@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.10

package/context/HighlightedProvider/HighlightedContext.d.ts

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { SeriesId } from '../../models/seriesType/common';
-import { Initializable } from '../context.types';
-/**
- * The data of the highlighted item.
- * To highlight an item, you need to provide the series id and the item id.
- * If targeting the whole series, you can omit the item id.
- * To clear the highlight, set the value to an empty object.
- *
- * @example
- * // Highlight the item with the series id 'london' and the item id 0.
- * { seriesId: 'london', dataIndex: 0 }
- *
- * // Highlight the whole series with the series id 'london'.
- * { seriesId: 'london' }
- *
- * // Clear the highlight.
- * {}
- */
-export type HighlightItemData = {
-    /**
-     * The series id of the highlighted item.
-     */
-    seriesId?: SeriesId;
-    /**
-     * The index of the item in series data.
-     */
-    dataIndex?: number;
-};
-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'
-     */
-    highlight?: 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'
-     */
-    fade?: FadeOptions;
-};
-export type HighlightedState = {
-    highlightScope?: Partial<HighlightScope>;
-    highlightedItem: HighlightItemData | null;
-    setHighlighted: (item: HighlightItemData) => void;
-    clearHighlighted: () => void;
-    isHighlighted: (input: HighlightItemData) => boolean;
-    isFaded: (input: HighlightItemData) => boolean;
-};
-export declare const HighlightedContext: React.Context<Initializable<HighlightedState>>;

package/context/HighlightedProvider/HighlightedContext.js

@@ -1,32 +0,0 @@
-import * as React from 'react';
-
-/**
- * The data of the highlighted item.
- * To highlight an item, you need to provide the series id and the item id.
- * If targeting the whole series, you can omit the item id.
- * To clear the highlight, set the value to an empty object.
- *
- * @example
- * // Highlight the item with the series id 'london' and the item id 0.
- * { seriesId: 'london', dataIndex: 0 }
- *
- * // Highlight the whole series with the series id 'london'.
- * { seriesId: 'london' }
- *
- * // Clear the highlight.
- * {}
- */
-
-export const HighlightedContext = /*#__PURE__*/React.createContext({
-  isInitialized: false,
-  data: {
-    highlightedItem: null,
-    setHighlighted: () => {},
-    clearHighlighted: () => {},
-    isHighlighted: () => false,
-    isFaded: () => false
-  }
-});
-if (process.env.NODE_ENV !== 'production') {
-  HighlightedContext.displayName = 'HighlightedContext';
-}

package/context/HighlightedProvider/HighlightedProvider.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { HighlightItemData } from './HighlightedContext';
-export type HighlightedProviderProps = {
-    children: React.ReactNode;
-    /**
-     * The item currently highlighted. Turns highlighting into a controlled prop.
-     */
-    highlightedItem?: HighlightItemData | null;
-    /**
-     * The callback fired when the highlighted item changes.
-     *
-     * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
-     */
-    onHighlightChange?: (highlightedItem: HighlightItemData | null) => void;
-};
-declare function HighlightedProvider({ children, highlightedItem: highlightedItemProps, onHighlightChange, }: HighlightedProviderProps): React.JSX.Element;
-declare namespace HighlightedProvider {
-    var propTypes: any;
-}
-export { HighlightedProvider };

package/context/HighlightedProvider/HighlightedProvider.js

@@ -1,79 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import useControlled from '@mui/utils/useControlled';
-import { HighlightedContext } from "./HighlightedContext.js";
-import { createIsFaded } from "./createIsFaded.js";
-import { createIsHighlighted } from "./createIsHighlighted.js";
-import { useSeries } from "../../hooks/useSeries.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-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, seriesItem?.highlightScope);
-      });
-    });
-    return map;
-  }, [series]);
-  const highlightScope = highlightedItem && highlightedItem.seriesId ? seriesById.get(highlightedItem.seriesId) ?? undefined : undefined;
-  const providerValue = React.useMemo(() => {
-    return {
-      isInitialized: true,
-      data: {
-        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/context/HighlightedProvider/createIsFaded.d.ts

@@ -1,2 +0,0 @@
-import { HighlightItemData, HighlightScope } from './HighlightedContext';
-export declare const createIsFaded: (highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null) => (input: HighlightItemData) => boolean;

package/context/HighlightedProvider/createIsFaded.js

@@ -1,12 +0,0 @@
-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/context/HighlightedProvider/createIsHighlighted.d.ts

@@ -1,2 +0,0 @@
-import { HighlightItemData, HighlightScope } from './HighlightedContext';
-export declare const createIsHighlighted: (highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null) => (input: HighlightItemData) => boolean;

package/context/HighlightedProvider/createIsHighlighted.js

@@ -1,12 +0,0 @@
-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/context/HighlightedProvider/index.d.ts

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

package/context/HighlightedProvider/index.js

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

package/context/HighlightedProvider/useHighlighted.d.ts

@@ -1,9 +0,0 @@
-import { HighlightedState } 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 declare function useHighlighted(): HighlightedState;

package/context/HighlightedProvider/useHighlighted.js

@@ -1,22 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { HighlightedContext } from "./HighlightedContext.js";
-
-/**
- * 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 {
-    isInitialized,
-    data
-  } = React.useContext(HighlightedContext);
-  if (!isInitialized) {
-    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 data;
-}

package/context/HighlightedProvider/useItemHighlighted.d.ts

@@ -1,21 +0,0 @@
-import { HighlightItemData } from './HighlightedContext';
-export type ItemHighlightedState = {
-    /**
-     * Whether the item is highlighted.
-     */
-    isHighlighted: boolean;
-    /**
-     * Whether the item is faded.
-     */
-    isFaded: boolean;
-};
-/**
- * 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 declare function useItemHighlighted(item: HighlightItemData | null): ItemHighlightedState;

package/context/HighlightedProvider/useItemHighlighted.js

@@ -1,27 +0,0 @@
-'use client';
-
-import { useHighlighted } from "./useHighlighted.js";
-/**
- * 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 = useHighlighted();
-  if (!item) {
-    return {
-      isHighlighted: false,
-      isFaded: false
-    };
-  }
-  const isHighlighted = highlighted.isHighlighted(item);
-  const isFaded = !isHighlighted && highlighted.isFaded(item);
-  return {
-    isHighlighted,
-    isFaded
-  };
-}

package/context/InteractionProvider.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { ChartStore } from '../internals/plugins/utils/ChartStore';
-export declare const ChartsContext: React.Context<{
-    store: ChartStore;
-} | null>;
-declare function InteractionProvider(props: React.PropsWithChildren): React.JSX.Element;
-export { InteractionProvider };

package/context/InteractionProvider.js

@@ -1,22 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useCharts } from "../internals/useCharts.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ChartsContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  ChartsContext.displayName = 'ChartsContext';
-}
-function InteractionProvider(props) {
-  const {
-    children
-  } = props;
-  const {
-    contextValue
-  } = useCharts();
-  return /*#__PURE__*/_jsx(ChartsContext.Provider, {
-    value: contextValue,
-    children: children
-  });
-}
-export { InteractionProvider };