@awsui/components-react/internal/components/chart-legend/index.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign } from "tslib";
import clsx from 'clsx';
import React, { useCallback, useEffect, useRef } from 'react';
import Box from '../../../box';
import useFocusVisible from '../../hooks/focus-visible';
import { KeyCode } from '../../keycode';
import SeriesMarker from '../chart-series-marker';
import styles from './styles.css.js';
export default function ChartLegend(_a) {
    var series = _a.series, onHighlightChange = _a.onHighlightChange, highlightedSeries = _a.highlightedSeries, legendTitle = _a.legendTitle, ariaLabel = _a.ariaLabel;
    var containerRef = useRef(null);
    var focusedSeriesRef = useRef(null);
    var handleHover = useCallback(function (segment) {
        onHighlightChange(segment);
    }, [onHighlightChange]);
    var handleKeyPress = useCallback(function (index, event) {
        var nextIndex = index;
        var MAX = series.length - 1;
        switch (event.keyCode) {
            case KeyCode.right:
                nextIndex++;
                if (nextIndex > MAX) {
                    nextIndex = 0;
                }
                break;
            case KeyCode.left:
                nextIndex--;
                if (nextIndex < 0) {
                    nextIndex = MAX;
                }
                break;
            default:
                return;
        }
        onHighlightChange(series[nextIndex].datum);
    }, [onHighlightChange]);
    var handleBlur = useCallback(function (event) {
        if (event.relatedTarget === null ||
            !(event.relatedTarget instanceof Element) ||
            (containerRef.current && !containerRef.current.contains(event.relatedTarget))) {
            onHighlightChange(null);
        }
    }, [onHighlightChange]);
    useEffect(function () {
        if (containerRef.current && focusedSeriesRef.current && containerRef.current.contains(document.activeElement)) {
            focusedSeriesRef.current.focus();
        }
    }, [highlightedSeries]);
    var focusVisible = useFocusVisible();
    if (!series || series.length === 0) {
        return null;
    }
    return (React.createElement("div", { className: styles.root, ref: containerRef, onBlur: handleBlur },
        legendTitle && (React.createElement(Box, { fontWeight: "bold", className: styles.title }, legendTitle)),
        React.createElement("ul", { className: styles.list, "aria-label": legendTitle || ariaLabel }, series.map(function (s, i) {
            var _a;
            return (React.createElement("li", __assign({}, focusVisible, { key: i, onMouseOver: handleHover.bind(null, s.datum), onMouseLeave: handleHover.bind(null, null), onKeyDown: handleKeyPress.bind(null, i), onFocus: handleHover.bind(null, s.datum), className: clsx(styles.marker, (_a = {},
                    _a[styles['marker--dimmed']] = highlightedSeries !== null && highlightedSeries !== s,
                    _a[styles['marker--highlighted']] = highlightedSeries === s,
                    _a)), tabIndex: highlightedSeries === s || (highlightedSeries === null && i === 0) ? 0 : -1, "aria-disabled": highlightedSeries !== null && highlightedSeries !== s ? true : undefined, ref: highlightedSeries === s ? focusedSeriesRef : null }),
                React.createElement(SeriesMarker, { color: s.color, type: s.type }),
                " ",
                s.label));
        }))));
}