@mui/x-charts 8.0.0-alpha.5 → 8.0.0-alpha.7

package/modern/ChartsLabel/labelMarkClasses.js

@@ -4,14 +4,15 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getLabelMarkUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLabelMark', slot);
 }
-export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask']);
+export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask', 'fill']);
 export const useUtilityClasses = props => {
   const {
     type
   } = props;
   const slots = {
     root: ['root', type],
-    mask: ['mask']
+    mask: ['mask'],
+    fill: ['fill']
   };
   return composeClasses(slots, getLabelMarkUtilityClass, props.classes);
 };

package/modern/ChartsLegend/ChartsLegend.js

@@ -2,68 +2,105 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps"];
+const _excluded = ["direction", "onItemClick", "className", "classes"];
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import useSlotProps from '@mui/utils/useSlotProps';
-import composeClasses from '@mui/utils/composeClasses';
-import { useThemeProps, useTheme } from '@mui/material/styles';
-import { getSeriesToDisplay } from "./utils.js";
-import { getLegendUtilityClass } from "./chartsLegendClasses.js";
-import { DefaultChartsLegend } from "./DefaultChartsLegend.js";
-import { useSeries } from "../hooks/useSeries.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+import clsx from 'clsx';
+import { useLegend } from "../hooks/useLegend.js";
+import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
+import { seriesContextBuilder } from "./onClickContextBuilder.js";
+import { legendClasses, useUtilityClasses } from "./chartsLegendClasses.js";
+import { consumeSlots } from "../internals/consumeSlots.js";
+import { ChartsLabel } from "../ChartsLabel/ChartsLabel.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const RootElement = styled('ul', {
+  name: 'MuiChartsLegend',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  ownerState,
+  theme
+}) => _extends({}, theme.typography.caption, {
+  color: (theme.vars || theme).palette.text.primary,
+  lineHeight: '100%',
+  display: 'flex',
+  flexDirection: ownerState.direction === 'vertical' ? 'column' : 'row',
+  alignItems: ownerState.direction === 'vertical' ? undefined : 'center',
+  flexShrink: 0,
+  gap: theme.spacing(2),
+  listStyleType: 'none',
+  paddingInlineStart: 0,
+  marginBlock: theme.spacing(1),
+  marginInline: theme.spacing(1),
+  flexWrap: 'wrap',
+  li: {
+    display: ownerState.direction === 'horizontal' ? 'inline-flex' : undefined
+  },
+  [`button.${legendClasses.series}`]: {
+    // Reset button styles
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    fontFamily: 'inherit',
+    fontWeight: 'inherit',
+    fontSize: 'inherit',
+    letterSpacing: 'inherit',
+    color: 'inherit'
+  },
+  [`& .${legendClasses.series}`]: {
+    display: ownerState.direction === 'vertical' ? 'flex' : 'inline-flex',
+    alignItems: 'center',
+    gap: theme.spacing(1)
+  }
+}));
+const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
+  defaultProps: {
+    direction: 'horizontal'
+  },
+  // @ts-expect-error position is used only in the slots, but it is passed to the SVG wrapper.
+  // We omit it here to avoid passing to slots.
+  omitProps: ['position'],
+  classesResolver: useUtilityClasses
+}, function ChartsLegend(props, ref) {
+  const data = useLegend();
   const {
-    classes,
-    direction
-  } = ownerState;
-  const slots = {
-    root: ['root', direction],
-    mark: ['mark'],
-    label: ['label'],
-    series: ['series'],
-    itemBackground: ['itemBackground']
-  };
-  return composeClasses(slots, getLegendUtilityClass, classes);
-};
-function ChartsLegend(inProps) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiChartsLegend'
-  });
-  const defaultizedProps = _extends({
-    direction: 'row'
-  }, props, {
-    position: _extends({
-      horizontal: 'middle',
-      vertical: 'top'
-    }, props.position)
-  });
-  const {
-      slots,
-      slotProps
-    } = defaultizedProps,
-    other = _objectWithoutPropertiesLoose(defaultizedProps, _excluded);
-  const theme = useTheme();
-  const classes = useUtilityClasses(_extends({}, defaultizedProps, {
-    theme
+      onItemClick,
+      className,
+      classes
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  if (data.items.length === 0) {
+    return null;
+  }
+  const Element = onItemClick ? 'button' : 'div';
+  return /*#__PURE__*/_jsx(RootElement, _extends({
+    className: clsx(classes?.root, className),
+    ref: ref
+  }, other, {
+    ownerState: props,
+    children: data.items.map((item, i) => {
+      return /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsxs(Element, {
+          className: classes?.series,
+          role: onItemClick ? 'button' : undefined,
+          type: onItemClick ? 'button' : undefined,
+          onClick: onItemClick ?
+          // @ts-ignore onClick is only attached to a button
+          event => onItemClick(event, seriesContextBuilder(item), i) : undefined,
+          children: [/*#__PURE__*/_jsx(ChartsLabelMark, {
+            className: classes?.mark,
+            color: item.color,
+            type: item.markType
+          }), /*#__PURE__*/_jsx(ChartsLabel, {
+            className: classes?.label,
+            children: item.label
+          })]
+        })
+      }, item.id);
+    })
   }));
-  const series = useSeries();
-  const seriesToDisplay = getSeriesToDisplay(series);
-  const ChartLegendRender = slots?.legend ?? DefaultChartsLegend;
-  const chartLegendRenderProps = useSlotProps({
-    elementType: ChartLegendRender,
-    externalSlotProps: slotProps?.legend,
-    additionalProps: _extends({}, other, {
-      classes,
-      series,
-      seriesToDisplay
-    }),
-    ownerState: {}
-  });
-  return /*#__PURE__*/_jsx(ChartLegendRender, _extends({}, chartLegendRenderProps));
-}
+});
 process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -73,66 +110,19 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The direction of the legend layout.
    * The default depends on the chart.
    */
-  direction: PropTypes.oneOf(['column', 'row']),
-  /**
-   * Set to true to hide the legend.
-   * @default false
-   */
-  hidden: PropTypes.bool,
-  /**
-   * Space between two legend items (in px).
-   * @default 10
-   */
-  itemGap: PropTypes.number,
-  /**
-   * Height of the item mark (in px).
-   * @default 20
-   */
-  itemMarkHeight: PropTypes.number,
-  /**
-   * Width of the item mark (in px).
-   * @default 20
-   */
-  itemMarkWidth: PropTypes.number,
-  /**
-   * Style applied to legend labels.
-   * @default theme.typography.subtitle1
-   */
-  labelStyle: PropTypes.object,
-  /**
-   * Space between the mark and the label (in px).
-   * @default 5
-   */
-  markGap: PropTypes.number,
+  direction: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Callback fired when a legend item is clicked.
-   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.
    * @param {SeriesLegendItemContext} legendItem The legend item data.
    * @param {number} index The index of the clicked legend item.
    */
   onItemClick: PropTypes.func,
-  /**
-   * Legend padding (in px).
-   * Can either be a single number, or an object with top, left, bottom, right properties.
-   * @default 10
-   */
-  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  })]),
-  /**
-   * The position of the legend.
-   */
-  position: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
-    vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
-  }),
   /**
    * The props used for each component slot.
    * @default {}
@@ -142,6 +132,7 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * Overridable component slots.
    * @default {}
    */
-  slots: PropTypes.object
+  slots: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { ChartsLegend };