@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.8

package/node/ChartsLabel/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "labelClasses", {
+  enumerable: true,
+  get: function () {
+    return _labelClasses.labelClasses;
+  }
+});
+Object.defineProperty(exports, "labelGradientClasses", {
+  enumerable: true,
+  get: function () {
+    return _labelGradientClasses.labelGradientClasses;
+  }
+});
+Object.defineProperty(exports, "labelMarkClasses", {
+  enumerable: true,
+  get: function () {
+    return _labelMarkClasses.labelMarkClasses;
+  }
+});
+var _labelClasses = require("./labelClasses");
+var _labelMarkClasses = require("./labelMarkClasses");
+var _labelGradientClasses = require("./labelGradientClasses");

package/node/ChartsLabel/labelGradientClasses.js

@@ -12,14 +12,15 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getLabelGradientUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiChartsLabelGradient', slot);
 }
-const labelGradientClasses = exports.labelGradientClasses = (0, _generateUtilityClasses.default)('MuiChartsLabelGradient', ['root', 'column', 'row', 'mask']);
+const labelGradientClasses = exports.labelGradientClasses = (0, _generateUtilityClasses.default)('MuiChartsLabelGradient', ['root', 'vertical', 'horizontal', 'mask', 'fill']);
 const useUtilityClasses = props => {
   const {
     direction
   } = props;
   const slots = {
     root: ['root', direction],
-    mask: ['mask']
+    mask: ['mask'],
+    fill: ['fill']
   };
   return (0, _composeClasses.default)(slots, getLabelGradientUtilityClass, props.classes);
 };

package/node/ChartsLabel/labelMarkClasses.js

@@ -12,14 +12,15 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getLabelMarkUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiChartsLabelMark', slot);
 }
-const labelMarkClasses = exports.labelMarkClasses = (0, _generateUtilityClasses.default)('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask']);
+const labelMarkClasses = exports.labelMarkClasses = (0, _generateUtilityClasses.default)('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask', 'fill']);
 const useUtilityClasses = props => {
   const {
     type
   } = props;
   const slots = {
     root: ['root', type],
-    mask: ['mask']
+    mask: ['mask'],
+    fill: ['fill']
   };
   return (0, _composeClasses.default)(slots, getLabelMarkUtilityClass, props.classes);
 };

package/node/ChartsLegend/ChartsLegend.js

@@ -6,71 +6,108 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsLegend = ChartsLegend;
+exports.ChartsLegend = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
-var _utils = require("./utils");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _useLegend = require("../hooks/useLegend");
+var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
+var _onClickContextBuilder = require("./onClickContextBuilder");
 var _chartsLegendClasses = require("./chartsLegendClasses");
-var _DefaultChartsLegend = require("./DefaultChartsLegend");
-var _useSeries = require("../hooks/useSeries");
+var _consumeSlots = require("../internals/consumeSlots");
+var _ChartsLabel = require("../ChartsLabel/ChartsLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    direction
-  } = ownerState;
-  const slots = {
-    root: ['root', direction],
-    mark: ['mark'],
-    label: ['label'],
-    series: ['series'],
-    itemBackground: ['itemBackground']
-  };
-  return (0, _composeClasses.default)(slots, _chartsLegendClasses.getLegendUtilityClass, classes);
-};
-function ChartsLegend(inProps) {
-  const props = (0, _styles.useThemeProps)({
-    props: inProps,
-    name: 'MuiChartsLegend'
-  });
-  const defaultizedProps = (0, _extends2.default)({
-    direction: 'row'
-  }, props, {
-    position: (0, _extends2.default)({
-      horizontal: 'middle',
-      vertical: 'top'
-    }, props.position)
-  });
+const _excluded = ["direction", "onItemClick", "className", "classes"];
+const RootElement = (0, _styles.styled)('ul', {
+  name: 'MuiChartsLegend',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  ownerState,
+  theme
+}) => (0, _extends2.default)({}, 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.${_chartsLegendClasses.legendClasses.series}`]: {
+    // Reset button styles
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    fontFamily: 'inherit',
+    fontWeight: 'inherit',
+    fontSize: 'inherit',
+    letterSpacing: 'inherit',
+    color: 'inherit'
+  },
+  [`& .${_chartsLegendClasses.legendClasses.series}`]: {
+    display: ownerState.direction === 'vertical' ? 'flex' : 'inline-flex',
+    alignItems: 'center',
+    gap: theme.spacing(1)
+  }
+}));
+const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.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: _chartsLegendClasses.useUtilityClasses
+}, function ChartsLegend(props, ref) {
+  const data = (0, _useLegend.useLegend)();
   const {
-      slots,
-      slotProps
-    } = defaultizedProps,
-    other = (0, _objectWithoutPropertiesLoose2.default)(defaultizedProps, _excluded);
-  const theme = (0, _styles.useTheme)();
-  const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
-    theme
+      onItemClick,
+      className,
+      classes
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  if (data.items.length === 0) {
+    return null;
+  }
+  const Element = onItemClick ? 'button' : 'div';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootElement, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes?.root, className),
+    ref: ref
+  }, other, {
+    ownerState: props,
+    children: data.items.map((item, i) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        children: /*#__PURE__*/(0, _jsxRuntime.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, (0, _onClickContextBuilder.seriesContextBuilder)(item), i) : undefined,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+            className: classes?.mark,
+            color: item.color,
+            type: item.markType
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
+            className: classes?.label,
+            children: item.label
+          })]
+        })
+      }, item.id);
+    })
   }));
-  const series = (0, _useSeries.useSeries)();
-  const seriesToDisplay = (0, _utils.getSeriesToDisplay)(series);
-  const ChartLegendRender = slots?.legend ?? _DefaultChartsLegend.DefaultChartsLegend;
-  const chartLegendRenderProps = (0, _useSlotProps.default)({
-    elementType: ChartLegendRender,
-    externalSlotProps: slotProps?.legend,
-    additionalProps: (0, _extends2.default)({}, other, {
-      classes,
-      series,
-      seriesToDisplay
-    }),
-    ownerState: {}
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartLegendRender, (0, _extends2.default)({}, chartLegendRenderProps));
-}
+});
 process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -80,66 +117,19 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
+  className: _propTypes.default.string,
   /**
    * The direction of the legend layout.
    * The default depends on the chart.
    */
-  direction: _propTypes.default.oneOf(['column', 'row']),
-  /**
-   * Set to true to hide the legend.
-   * @default false
-   */
-  hidden: _propTypes.default.bool,
-  /**
-   * Space between two legend items (in px).
-   * @default 10
-   */
-  itemGap: _propTypes.default.number,
-  /**
-   * Height of the item mark (in px).
-   * @default 20
-   */
-  itemMarkHeight: _propTypes.default.number,
-  /**
-   * Width of the item mark (in px).
-   * @default 20
-   */
-  itemMarkWidth: _propTypes.default.number,
-  /**
-   * Style applied to legend labels.
-   * @default theme.typography.subtitle1
-   */
-  labelStyle: _propTypes.default.object,
-  /**
-   * Space between the mark and the label (in px).
-   * @default 5
-   */
-  markGap: _propTypes.default.number,
+  direction: _propTypes.default.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.default.func,
-  /**
-   * Legend padding (in px).
-   * Can either be a single number, or an object with top, left, bottom, right properties.
-   * @default 10
-   */
-  padding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
-    bottom: _propTypes.default.number,
-    left: _propTypes.default.number,
-    right: _propTypes.default.number,
-    top: _propTypes.default.number
-  })]),
-  /**
-   * The position of the legend.
-   */
-  position: _propTypes.default.shape({
-    horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
-    vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
-  }),
   /**
    * The props used for each component slot.
    * @default {}
@@ -149,5 +139,6 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * Overridable component slots.
    * @default {}
    */
-  slots: _propTypes.default.object
+  slots: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;