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

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';
 
 /******************************************************************************
@@ -1482,7 +1482,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 +1565,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 +1649,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 })),