@mui/x-charts-pro 8.0.0-alpha.0 → 8.0.0-alpha.10

package/node/Heatmap/DefaultHeatmapTooltip.js

@@ -1,105 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DefaultHeatmapTooltip = DefaultHeatmapTooltip;
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
-var _hooks = require("@mui/x-charts/hooks");
-var _internals = require("@mui/x-charts/internals");
-var _jsxRuntime = require("react/jsx-runtime");
-function DefaultHeatmapTooltip(props) {
-  const {
-    series,
-    itemData,
-    sx,
-    classes,
-    getColor
-  } = props;
-  const xAxis = (0, _hooks.useXAxis)();
-  const yAxis = (0, _hooks.useYAxis)();
-  if (itemData.dataIndex === undefined || !series.data[itemData.dataIndex]) {
-    return null;
-  }
-  const color = getColor(itemData.dataIndex);
-  const valueItem = series.data[itemData.dataIndex];
-  const [xIndex, yIndex] = valueItem;
-  const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
-    location: 'tooltip'
-  }) ?? xAxis.data[xIndex].toLocaleString();
-  const formattedY = yAxis.valueFormatter?.(yAxis.data[yIndex], {
-    location: 'tooltip'
-  }) ?? yAxis.data[yIndex].toLocaleString();
-  const formattedValue = series.valueFormatter(valueItem, {
-    dataIndex: itemData.dataIndex
-  });
-  const seriesLabel = (0, _internals.getLabel)(series.label, 'tooltip');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipPaper, {
-    sx: sx,
-    className: classes.root,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipTable, {
-      className: classes.table,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-            children: formattedX
-          }), formattedX && formattedY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-            children: formattedY
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
-          className: classes.row,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-            className: (0, _clsx.default)(classes.markCell, classes.cell),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipMark, {
-              color: color,
-              className: classes.mark
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-            className: (0, _clsx.default)(classes.labelCell, classes.cell),
-            children: seriesLabel
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-            className: (0, _clsx.default)(classes.valueCell, classes.cell),
-            children: formattedValue
-          })]
-        })
-      })]
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? DefaultHeatmapTooltip.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: _propTypes.default.object.isRequired,
-  /**
-   * Get the color of the item with index `dataIndex`.
-   * @param {number} dataIndex The data index of the item.
-   * @returns {string} The color to display.
-   */
-  getColor: _propTypes.default.func.isRequired,
-  /**
-   * The data used to identify the triggered item.
-   */
-  itemData: _propTypes.default.shape({
-    dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['heatmap']).isRequired
-  }).isRequired,
-  /**
-   * The series linked to the triggered item.
-   */
-  series: _propTypes.default.object.isRequired,
-  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;

package/node/context/CartesianProviderPro/CartesianProviderPro.js

@@ -1,95 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CartesianProviderPro = CartesianProviderPro;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _internals = require("@mui/x-charts/internals");
-var _useZoom = require("../ZoomProvider/useZoom");
-var _createAxisFilterMapper = require("./createAxisFilterMapper");
-var _jsxRuntime = require("react/jsx-runtime");
-function CartesianProviderPro(props) {
-  const {
-    xAxis,
-    yAxis,
-    children
-  } = props;
-  const formattedSeries = (0, _internals.useSeries)();
-  const drawingArea = (0, _internals.useDrawingArea)();
-  const {
-    zoomData,
-    options
-  } = (0, _useZoom.useZoom)();
-  const xExtremumGetters = (0, _internals.useXExtremumGetter)();
-  const yExtremumGetters = (0, _internals.useYExtremumGetter)();
-  const getFilters = React.useMemo(() => {
-    const xMapper = (0, _createAxisFilterMapper.createAxisFilterMapper)({
-      zoomData,
-      extremumGetter: xExtremumGetters,
-      formattedSeries,
-      direction: 'x'
-    });
-    const yMapper = (0, _createAxisFilterMapper.createAxisFilterMapper)({
-      zoomData,
-      extremumGetter: yExtremumGetters,
-      formattedSeries,
-      direction: 'y'
-    });
-    const xFilters = xAxis.reduce((acc, axis, index) => {
-      const filter = xMapper(axis, index);
-      if (filter !== null) {
-        acc[axis.id] = filter;
-      }
-      return acc;
-    }, {});
-    const yFilters = yAxis.reduce((acc, axis, index) => {
-      const filter = yMapper(axis, index);
-      if (filter !== null) {
-        acc[axis.id] = filter;
-      }
-      return acc;
-    }, {});
-    if (Object.keys(xFilters).length === 0 && Object.keys(yFilters).length === 0) {
-      return undefined;
-    }
-    return (0, _createAxisFilterMapper.createGetAxisFilters)((0, _extends2.default)({}, xFilters, yFilters));
-  }, [formattedSeries, xAxis, xExtremumGetters, yAxis, yExtremumGetters, zoomData]);
-  const xValues = React.useMemo(() => (0, _internals.computeAxisValue)({
-    drawingArea,
-    formattedSeries,
-    axis: xAxis,
-    extremumGetters: xExtremumGetters,
-    axisDirection: 'x',
-    zoomData,
-    zoomOptions: options,
-    getFilters
-  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, zoomData, options, getFilters]);
-  const yValues = React.useMemo(() => (0, _internals.computeAxisValue)({
-    drawingArea,
-    formattedSeries,
-    axis: yAxis,
-    extremumGetters: yExtremumGetters,
-    axisDirection: 'y',
-    zoomData,
-    zoomOptions: options,
-    getFilters
-  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, zoomData, options, getFilters]);
-  const value = React.useMemo(() => ({
-    isInitialized: true,
-    data: {
-      xAxis: xValues.axis,
-      yAxis: yValues.axis,
-      xAxisIds: xValues.axisIds,
-      yAxisIds: yValues.axisIds
-    }
-  }), [xValues, yValues]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.CartesianContext.Provider, {
-    value: value,
-    children: children
-  });
-}

package/node/context/CartesianProviderPro/createAxisFilterMapper.js

@@ -1,68 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createGetAxisFilters = exports.createAxisFilterMapper = void 0;
-var _internals = require("@mui/x-charts/internals");
-const createAxisFilterMapper = ({
-  zoomData,
-  extremumGetter,
-  formattedSeries,
-  direction
-}) => (axis, axisIndex) => {
-  if (typeof axis.zoom !== 'object' || axis.zoom.filterMode !== 'discard') {
-    return null;
-  }
-  const zoom = zoomData?.find(({
-    axisId
-  }) => axisId === axis.id);
-  if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
-    // No zoom, or zoom with all data visible
-    return null;
-  }
-  let extremums = [];
-  const scaleType = axis.scaleType;
-  if (scaleType === 'point' || scaleType === 'band') {
-    extremums = [0, (axis.data?.length ?? 1) - 1];
-  } else {
-    extremums = (0, _internals.getAxisExtremum)(axis, extremumGetter, axisIndex, formattedSeries);
-  }
-  let min;
-  let max;
-
-  // @ts-expect-error The function defaults to linear scale if the scaleType is not recognized.
-  [min, max] = (0, _internals.getScale)(scaleType, extremums, [0, 100]).nice().domain();
-  min = min instanceof Date ? min.getTime() : min;
-  max = max instanceof Date ? max.getTime() : max;
-  const minVal = min + zoom.start * (max - min) / 100;
-  const maxVal = min + zoom.end * (max - min) / 100;
-  return (value, dataIndex) => {
-    const val = value[direction] ?? axis.data?.[dataIndex];
-    if (val == null) {
-      // If the value does not exist because of missing data point, or out of range index, we just ignore.
-      return true;
-    }
-    if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
-      return dataIndex >= minVal && dataIndex <= maxVal;
-    }
-    return val >= minVal && val <= maxVal;
-  };
-};
-exports.createAxisFilterMapper = createAxisFilterMapper;
-const createGetAxisFilters = filters => ({
-  currentAxisId,
-  seriesXAxisId,
-  seriesYAxisId,
-  isDefaultAxis
-}) => {
-  return (value, dataIndex) => {
-    const axisId = currentAxisId === seriesXAxisId ? seriesYAxisId : seriesXAxisId;
-    if (!axisId || isDefaultAxis) {
-      return Object.values(filters ?? {})[0]?.(value, dataIndex) ?? true;
-    }
-    const data = [seriesYAxisId, seriesXAxisId].filter(id => id !== currentAxisId).map(id => filters[id ?? '']).filter(_internals.isDefined);
-    return data.every(f => f(value, dataIndex));
-  };
-};
-exports.createGetAxisFilters = createGetAxisFilters;

package/node/context/ChartDataProviderPro/useChartDataProviderProProps.js

@@ -1,50 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useChartContainerProProps = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _internals = require("@mui/x-charts/internals");
-const _excluded = ["zoom", "onZoomChange"];
-const useChartContainerProProps = (props, ref) => {
-  const {
-      zoom,
-      onZoomChange
-    } = props,
-    baseProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const {
-    children,
-    drawingProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    chartsSurfaceProps,
-    pluginProviderProps,
-    animationProviderProps,
-    xAxis,
-    yAxis
-  } = (0, _internals.useChartDataProviderProps)(baseProps, ref);
-  const zoomProviderProps = {
-    zoom,
-    onZoomChange,
-    xAxis,
-    yAxis
-  };
-  return {
-    zoomProviderProps,
-    children,
-    drawingProviderProps,
-    pluginProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    chartsSurfaceProps,
-    animationProviderProps
-  };
-};
-exports.useChartContainerProProps = useChartContainerProProps;

package/node/context/ZoomProvider/ZoomContext.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ZoomContext = void 0;
-var React = _interopRequireWildcard(require("react"));
-const ZoomContext = exports.ZoomContext = /*#__PURE__*/React.createContext({
-  isInitialized: false,
-  data: {
-    isZoomEnabled: false,
-    isPanEnabled: false,
-    options: {},
-    zoomData: [],
-    setZoomData: () => {},
-    isInteracting: false,
-    setIsInteracting: () => {}
-  }
-});
-if (process.env.NODE_ENV !== 'production') {
-  ZoomContext.displayName = 'ZoomContext';
-}

package/node/context/ZoomProvider/ZoomProvider.js

@@ -1,63 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ZoomProvider = ZoomProvider;
-var React = _interopRequireWildcard(require("react"));
-var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
-var _ZoomContext = require("./ZoomContext");
-var _defaultizeZoom = require("./defaultizeZoom");
-var _initializeZoomData = require("./initializeZoomData");
-var _jsxRuntime = require("react/jsx-runtime");
-function ZoomProvider({
-  children,
-  xAxis,
-  yAxis,
-  zoom,
-  onZoomChange
-}) {
-  const [isInteracting, setIsInteracting] = React.useState(false);
-  const options = React.useMemo(() => [...(0, _defaultizeZoom.defaultizeZoom)(xAxis, 'x'), ...(0, _defaultizeZoom.defaultizeZoom)(yAxis, 'y')].reduce((acc, v) => {
-    acc[v.axisId] = v;
-    return acc;
-  }, {}), [xAxis, yAxis]);
-
-  // Default zoom data is initialized only once when uncontrolled. If the user changes the options
-  // after the initial render, the zoom data will not be updated until the next zoom interaction.
-  // This is required to avoid warnings about controlled/uncontrolled components.
-  const defaultZoomData = React.useRef((0, _initializeZoomData.initializeZoomData)(options));
-  const [zoomData, setZoomData] = (0, _useControlled.default)({
-    controlled: zoom,
-    // eslint-disable-next-line react-compiler/react-compiler
-    default: defaultZoomData.current,
-    name: 'ZoomProvider',
-    state: 'zoom'
-  });
-  const setZoomDataCallback = React.useCallback(newZoomData => {
-    setZoomData(newZoomData);
-    onZoomChange?.(newZoomData);
-  }, [setZoomData, onZoomChange]);
-  const value = React.useMemo(() => ({
-    isInitialized: true,
-    data: {
-      isZoomEnabled: Object.keys(options).length > 0,
-      isPanEnabled: isPanEnabled(options),
-      options,
-      zoomData,
-      setZoomData: setZoomDataCallback,
-      isInteracting,
-      setIsInteracting
-    }
-  }), [zoomData, isInteracting, setIsInteracting, options, setZoomDataCallback]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomContext.ZoomContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-function isPanEnabled(options) {
-  return Object.values(options).some(v => v.panning) || false;
-}

package/node/context/ZoomProvider/ZoomSetup.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ZoomSetup = ZoomSetup;
-var _useSetupPan = require("./useSetupPan");
-var _useSetupZoom = require("./useSetupZoom");
-/**
- * Sets up the zoom functionality if using composition or a custom chart.
- *
- * Simply add this component at the same level as the chart component to enable zooming and panning.
- *
- * See: [Composition](https://mui.com/x/react-charts/composition/)
- */
-function ZoomSetup() {
-  (0, _useSetupZoom.useSetupZoom)();
-  (0, _useSetupPan.useSetupPan)();
-  return null;
-}

package/node/context/ZoomProvider/defaultizeZoom.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.defaultizeZoom = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _internals = require("@mui/x-charts/internals");
-const defaultZoomOptions = {
-  minStart: 0,
-  maxEnd: 100,
-  step: 5,
-  minSpan: 10,
-  maxSpan: 100,
-  panning: true,
-  filterMode: 'keep'
-};
-const defaultizeZoom = (axis, axisDirection) => {
-  if (!axis) {
-    return [];
-  }
-  const defaultized = axis.map(v => {
-    if (!v.zoom) {
-      return undefined;
-    }
-    if (v.zoom === true) {
-      return (0, _extends2.default)({
-        axisId: v.id,
-        axisDirection
-      }, defaultZoomOptions);
-    }
-    return (0, _extends2.default)({
-      axisId: v.id,
-      axisDirection
-    }, defaultZoomOptions, v.zoom);
-  }).filter(_internals.isDefined);
-  return defaultized;
-};
-exports.defaultizeZoom = defaultizeZoom;

package/node/context/ZoomProvider/index.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _ZoomContext = require("./ZoomContext");
-Object.keys(_ZoomContext).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ZoomContext[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ZoomContext[key];
-    }
-  });
-});
-var _ZoomProvider = require("./ZoomProvider");
-Object.keys(_ZoomProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ZoomProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ZoomProvider[key];
-    }
-  });
-});
-var _Zoom = require("./Zoom.types");
-Object.keys(_Zoom).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Zoom[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Zoom[key];
-    }
-  });
-});

package/node/context/ZoomProvider/initializeZoomData.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.initializeZoomData = void 0;
-// This function is used to initialize the zoom data when it is not provided by the user.
-// It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
-const initializeZoomData = options => {
-  return Object.values(options).map(({
-    axisId,
-    minStart: start,
-    maxEnd: end
-  }) => ({
-    axisId,
-    start,
-    end
-  }));
-};
-exports.initializeZoomData = initializeZoomData;

package/node/context/ZoomProvider/useSetupPan.js

@@ -1,114 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useSetupPan = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _hooks = require("@mui/x-charts/hooks");
-var _internals = require("@mui/x-charts/internals");
-var _useZoom = require("./useZoom");
-const useSetupPan = () => {
-  const {
-    zoomData,
-    setZoomData,
-    setIsInteracting,
-    isPanEnabled,
-    options
-  } = (0, _useZoom.useZoom)();
-  const drawingArea = (0, _hooks.useDrawingArea)();
-  const svgRef = (0, _hooks.useSvgRef)();
-  const isDraggingRef = React.useRef(false);
-  const touchStartRef = React.useRef(null);
-  const eventCacheRef = React.useRef([]);
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null || !isPanEnabled) {
-      return () => {};
-    }
-    const handlePan = event => {
-      if (element === null || !isDraggingRef.current || eventCacheRef.current.length > 1) {
-        return;
-      }
-      if (touchStartRef.current == null) {
-        return;
-      }
-      const point = (0, _internals.getSVGPoint)(element, event);
-      const movementX = point.x - touchStartRef.current.x;
-      const movementY = (point.y - touchStartRef.current.y) * -1;
-      const newZoomData = touchStartRef.current.zoomData.map(zoom => {
-        const option = options[zoom.axisId];
-        if (!option || !option.panning) {
-          return zoom;
-        }
-        const min = zoom.start;
-        const max = zoom.end;
-        const span = max - min;
-        const MIN_PERCENT = option.minStart;
-        const MAX_PERCENT = option.maxEnd;
-        const movement = option.axisDirection === 'x' ? movementX : movementY;
-        const dimension = option.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
-        let newMinPercent = min - movement / dimension * span;
-        let newMaxPercent = max - movement / dimension * span;
-        if (newMinPercent < MIN_PERCENT) {
-          newMinPercent = MIN_PERCENT;
-          newMaxPercent = newMinPercent + span;
-        }
-        if (newMaxPercent > MAX_PERCENT) {
-          newMaxPercent = MAX_PERCENT;
-          newMinPercent = newMaxPercent - span;
-        }
-        if (newMinPercent < MIN_PERCENT || newMaxPercent > MAX_PERCENT || span < option.minSpan || span > option.maxSpan) {
-          return zoom;
-        }
-        return (0, _extends2.default)({}, zoom, {
-          start: newMinPercent,
-          end: newMaxPercent
-        });
-      });
-      setZoomData(newZoomData);
-    };
-    const handleDown = event => {
-      eventCacheRef.current.push(event);
-      const point = (0, _internals.getSVGPoint)(element, event);
-      if (!drawingArea.isPointInside(point)) {
-        return;
-      }
-
-      // If there is only one pointer, prevent selecting text
-      if (eventCacheRef.current.length === 1) {
-        event.preventDefault();
-      }
-      isDraggingRef.current = true;
-      setIsInteracting(true);
-      touchStartRef.current = {
-        x: point.x,
-        y: point.y,
-        zoomData
-      };
-    };
-    const handleUp = event => {
-      eventCacheRef.current.splice(eventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
-      setIsInteracting(false);
-      isDraggingRef.current = false;
-      touchStartRef.current = null;
-    };
-    element.addEventListener('pointerdown', handleDown);
-    document.addEventListener('pointermove', handlePan);
-    document.addEventListener('pointerup', handleUp);
-    document.addEventListener('pointercancel', handleUp);
-    document.addEventListener('pointerleave', handleUp);
-    return () => {
-      element.removeEventListener('pointerdown', handleDown);
-      document.removeEventListener('pointermove', handlePan);
-      document.removeEventListener('pointerup', handleUp);
-      document.removeEventListener('pointercancel', handleUp);
-      document.removeEventListener('pointerleave', handleUp);
-    };
-  }, [drawingArea, svgRef, isDraggingRef, setIsInteracting, zoomData, setZoomData, isPanEnabled, options]);
-};
-exports.useSetupPan = useSetupPan;