@mui/x-charts 7.5.1 → 7.6.1

package/modern/context/HighlightedProvider/HighlightedProvider.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["highlighted", "faded"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useControlled from '@mui/utils/useControlled';
+import { HighlightedContext } from './HighlightedContext';
+import { createIsFaded } from './createIsFaded';
+import { createIsHighlighted } from './createIsHighlighted';
+import { useSeries } from '../../hooks/useSeries';
+import { jsx as _jsx } from "react/jsx-runtime";
+const mergeDeprecatedOptions = options => {
+  const _ref = options ?? {},
+    {
+      highlighted,
+      faded
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return _extends({
+    highlight: highlighted,
+    fade: faded
+  }, rest);
+};
+function HighlightedProvider({
+  children,
+  highlightedItem: highlightedItemProps,
+  onHighlightChange
+}) {
+  const [highlightedItem, setHighlightedItem] = useControlled({
+    controlled: highlightedItemProps,
+    default: null,
+    name: 'HighlightedProvider',
+    state: 'highlightedItem'
+  });
+  const series = useSeries();
+  const seriesById = React.useMemo(() => {
+    const map = new Map();
+    Object.keys(series).forEach(seriesType => {
+      const seriesData = series[seriesType];
+      Object.keys(seriesData?.series ?? {}).forEach(seriesId => {
+        const seriesItem = seriesData?.series[seriesId];
+        map.set(seriesId, mergeDeprecatedOptions(seriesItem?.highlightScope));
+      });
+    });
+    return map;
+  }, [series]);
+  const highlightScope = highlightedItem && highlightedItem.seriesId ? seriesById.get(highlightedItem.seriesId) ?? undefined : undefined;
+  const providerValue = React.useMemo(() => {
+    return {
+      highlightScope,
+      highlightedItem,
+      setHighlighted: itemData => {
+        setHighlightedItem(itemData);
+        onHighlightChange?.(itemData);
+      },
+      clearHighlighted: () => {
+        setHighlightedItem(null);
+        onHighlightChange?.(null);
+      },
+      isHighlighted: createIsHighlighted(highlightScope, highlightedItem),
+      isFaded: createIsFaded(highlightScope, highlightedItem)
+    };
+  }, [highlightedItem, highlightScope, setHighlightedItem, onHighlightChange]);
+  return /*#__PURE__*/_jsx(HighlightedContext.Provider, {
+    value: providerValue,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? HighlightedProvider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func
+} : void 0;
+export { HighlightedProvider };

package/modern/context/HighlightedProvider/createIsFaded.js

@@ -0,0 +1,12 @@
+export const createIsFaded = (highlightScope, highlightedItem) => input => {
+  if (!highlightScope) {
+    return false;
+  }
+  if (highlightScope.fade === 'series') {
+    return input.seriesId === highlightedItem?.seriesId && input.dataIndex !== highlightedItem?.dataIndex;
+  }
+  if (highlightScope.fade === 'global') {
+    return input.seriesId !== highlightedItem?.seriesId || input.dataIndex !== highlightedItem?.dataIndex;
+  }
+  return false;
+};

package/modern/context/HighlightedProvider/createIsHighlighted.js

@@ -0,0 +1,12 @@
+export const createIsHighlighted = (highlightScope, highlightedItem) => input => {
+  if (!highlightScope) {
+    return false;
+  }
+  if (highlightScope.highlight === 'series') {
+    return input.seriesId === highlightedItem?.seriesId;
+  }
+  if (highlightScope.highlight === 'item') {
+    return input.dataIndex === highlightedItem?.dataIndex && input.seriesId === highlightedItem?.seriesId;
+  }
+  return false;
+};

package/modern/context/HighlightedProvider/index.js

@@ -0,0 +1,4 @@
+export * from './HighlightedProvider';
+export * from './HighlightedContext';
+export * from './useHighlighted';
+export * from './useItemHighlighted';

package/modern/context/HighlightedProvider/useHighlighted.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { HighlightedContext } from './HighlightedContext';
+
+/**
+ * A hook to get the highlighted state of the chart.
+ *
+ * Please consider using the `useItemHighlighted` hook if you need to check the state of a specific item.
+ *
+ * @returns {HighlightedState} the state of the chart
+ */
+export function useHighlighted() {
+  const highlighted = React.useContext(HighlightedContext);
+  if (highlighted === undefined) {
+    throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return highlighted;
+}

package/modern/context/HighlightedProvider/useItemHighlighted.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { HighlightedContext } from './HighlightedContext';
+/**
+ * A hook to check the highlighted state of the item.
+ * This function already calculates that an item is not faded if it is highlighted.
+ *
+ * If you need fine control over the state, use the `useHighlighted` hook instead.
+ *
+ * @param {HighlightItemData} item is the item to check
+ * @returns {ItemHighlightedState} the state of the item
+ */
+export function useItemHighlighted(item) {
+  const highlighted = React.useContext(HighlightedContext);
+  if (highlighted === undefined) {
+    throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  if (!item) {
+    return {
+      isHighlighted: false,
+      isFaded: false
+    };
+  }
+  const isHighlighted = highlighted.isHighlighted(item);
+  const isFaded = !isHighlighted && highlighted.isFaded(item);
+  return {
+    isHighlighted,
+    isFaded
+  };
+}

package/modern/context/index.js

@@ -1 +1,2 @@
+export * from './HighlightedProvider';
 export { ZAxisContextProvider } from './ZAxisContextProvider';

package/modern/hooks/useInteractionItemProps.js

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
-import { HighlighContext } from '../context/HighlightProvider';
-export const useInteractionItemProps = (scope, skip) => {
+import { HighlightedContext } from '../context';
+export const useInteractionItemProps = skip => {
   const {
     dispatch: dispatchInteraction
   } = React.useContext(InteractionContext);
   const {
-    dispatch: dispatchHighlight
-  } = React.useContext(HighlighContext);
+    setHighlighted,
+    clearHighlighted
+  } = React.useContext(HighlightedContext);
   if (skip) {
     return () => ({});
   }
@@ -17,10 +18,9 @@ export const useInteractionItemProps = (scope, skip) => {
         type: 'enterItem',
         data
       });
-      dispatchHighlight({
-        type: 'enterItem',
-        item: data,
-        scope
+      setHighlighted({
+        seriesId: data.seriesId,
+        dataIndex: data.dataIndex
       });
     };
     const onMouseLeave = () => {
@@ -28,10 +28,7 @@ export const useInteractionItemProps = (scope, skip) => {
         type: 'leaveItem',
         data
       });
-      dispatchHighlight({
-        type: 'leaveItem',
-        item: data
-      });
+      clearHighlighted();
     };
     return {
       onMouseEnter,
@@ -39,33 +36,4 @@ export const useInteractionItemProps = (scope, skip) => {
     };
   };
   return getInteractionItemProps;
-};
-export const getIsHighlighted = (selectedItem, currentItem, highlightScope) => {
-  if (!highlightScope?.highlighted || highlightScope.highlighted === 'none' || selectedItem === null) {
-    return false;
-  }
-  const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;
-  if (!isSeriesSelected) {
-    return false;
-  }
-  if (highlightScope.highlighted === 'series') {
-    return isSeriesSelected;
-  }
-  return selectedItem.dataIndex !== undefined && selectedItem.dataIndex === currentItem.dataIndex;
-};
-export const getIsFaded = (selectedItem, currentItem, highlightScope) => {
-  if (!highlightScope?.faded || highlightScope.faded === 'none' || selectedItem === null) {
-    return false;
-  }
-  const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;
-  if (highlightScope.faded === 'series') {
-    return isSeriesSelected && selectedItem.dataIndex !== currentItem.dataIndex;
-  }
-  if (highlightScope.faded === 'global') {
-    if (!isSeriesSelected) {
-      return true;
-    }
-    return selectedItem.dataIndex !== undefined && selectedItem.dataIndex !== currentItem.dataIndex;
-  }
-  return false;
 };

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.5.1
+ * @mui/x-charts v7.6.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.5.1",
+  "version": "7.6.1",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -29,9 +29,9 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.14",
+    "@mui/system": "^5.15.15",
     "@mui/utils": "^5.15.14",
     "@react-spring/rafz": "^9.7.3",
     "@react-spring/web": "^9.7.3",

package/context/HighlightProvider.d.ts

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { ChartItemIdentifier, ChartSeriesType } from '../models/seriesType/config';
-export interface HighlightProviderProps {
-    children: React.ReactNode;
-}
-export type ItemHighlighData<T extends ChartSeriesType> = ChartItemIdentifier<T>;
-export type HighlightOptions = 'none' | 'item' | 'series';
-export type FadeOptions = 'none' | 'series' | 'global';
-export type HighlightScope = {
-    /**
-     * The scope of highlighted elements.
-     * - 'none': no highlight.
-     * - 'item': only highlight the item.
-     * - 'series': highlight all elements of the same series.
-     * @default 'none'
-     */
-    highlighted: HighlightOptions;
-    /**
-     * The scope of faded elements.
-     * - 'none': no fading.
-     * - 'series': only fade element of the same series.
-     * - 'global': fade all elements that are not highlighted.
-     * @default 'none'
-     */
-    faded: FadeOptions;
-};
-type HighlighActions<T extends ChartSeriesType = ChartSeriesType> = {
-    type: 'enterItem';
-    item: ItemHighlighData<T>;
-    scope?: Partial<HighlightScope>;
-} | {
-    type: 'leaveItem';
-    item: ItemHighlighData<T>;
-};
-type HighlighState = {
-    /**
-     * The item that triggers the highlight state.
-     */
-    item: null | ItemHighlighData<ChartSeriesType>;
-    scope: HighlightScope;
-    dispatch: React.Dispatch<HighlighActions>;
-};
-export declare const HighlighContext: React.Context<HighlighState>;
-declare function HighlightProvider(props: HighlightProviderProps): React.JSX.Element;
-export { HighlightProvider };

package/context/HighlightProvider.js

@@ -1,60 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.HighlighContext = void 0;
-exports.HighlightProvider = HighlightProvider;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const defaultScope = {
-  highlighted: 'none',
-  faded: 'none'
-};
-const HighlighContext = exports.HighlighContext = /*#__PURE__*/React.createContext({
-  item: null,
-  scope: defaultScope,
-  dispatch: () => null
-});
-if (process.env.NODE_ENV !== 'production') {
-  HighlighContext.displayName = 'HighlighContext';
-}
-const dataReducer = (prevState, action) => {
-  switch (action.type) {
-    case 'enterItem':
-      return (0, _extends2.default)({}, prevState, {
-        item: action.item,
-        scope: (0, _extends2.default)({}, defaultScope, action.scope)
-      });
-    case 'leaveItem':
-      if (prevState.item === null || Object.keys(action.item).some(key => action.item[key] !== prevState.item[key])) {
-        // The item is already something else
-        return prevState;
-      }
-      return (0, _extends2.default)({}, prevState, {
-        item: null
-      });
-    default:
-      return prevState;
-  }
-};
-function HighlightProvider(props) {
-  const {
-    children
-  } = props;
-  const [data, dispatch] = React.useReducer(dataReducer, {
-    item: null,
-    scope: defaultScope
-  });
-  const value = React.useMemo(() => (0, _extends2.default)({}, data, {
-    dispatch
-  }), [data]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlighContext.Provider, {
-    value: value,
-    children: children
-  });
-}

package/esm/context/HighlightProvider.js

@@ -1,51 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-const defaultScope = {
-  highlighted: 'none',
-  faded: 'none'
-};
-export const HighlighContext = /*#__PURE__*/React.createContext({
-  item: null,
-  scope: defaultScope,
-  dispatch: () => null
-});
-if (process.env.NODE_ENV !== 'production') {
-  HighlighContext.displayName = 'HighlighContext';
-}
-const dataReducer = (prevState, action) => {
-  switch (action.type) {
-    case 'enterItem':
-      return _extends({}, prevState, {
-        item: action.item,
-        scope: _extends({}, defaultScope, action.scope)
-      });
-    case 'leaveItem':
-      if (prevState.item === null || Object.keys(action.item).some(key => action.item[key] !== prevState.item[key])) {
-        // The item is already something else
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        item: null
-      });
-    default:
-      return prevState;
-  }
-};
-function HighlightProvider(props) {
-  const {
-    children
-  } = props;
-  const [data, dispatch] = React.useReducer(dataReducer, {
-    item: null,
-    scope: defaultScope
-  });
-  const value = React.useMemo(() => _extends({}, data, {
-    dispatch
-  }), [data]);
-  return /*#__PURE__*/_jsx(HighlighContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-export { HighlightProvider };

package/modern/context/HighlightProvider.js

@@ -1,51 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-const defaultScope = {
-  highlighted: 'none',
-  faded: 'none'
-};
-export const HighlighContext = /*#__PURE__*/React.createContext({
-  item: null,
-  scope: defaultScope,
-  dispatch: () => null
-});
-if (process.env.NODE_ENV !== 'production') {
-  HighlighContext.displayName = 'HighlighContext';
-}
-const dataReducer = (prevState, action) => {
-  switch (action.type) {
-    case 'enterItem':
-      return _extends({}, prevState, {
-        item: action.item,
-        scope: _extends({}, defaultScope, action.scope)
-      });
-    case 'leaveItem':
-      if (prevState.item === null || Object.keys(action.item).some(key => action.item[key] !== prevState.item[key])) {
-        // The item is already something else
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        item: null
-      });
-    default:
-      return prevState;
-  }
-};
-function HighlightProvider(props) {
-  const {
-    children
-  } = props;
-  const [data, dispatch] = React.useReducer(dataReducer, {
-    item: null,
-    scope: defaultScope
-  });
-  const value = React.useMemo(() => _extends({}, data, {
-    dispatch
-  }), [data]);
-  return /*#__PURE__*/_jsx(HighlighContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-export { HighlightProvider };