@levi-gemcommerce/analytics 2.1.0-test.0 → 3.0.1-dev.3

package/src/shared/charts/components/GPolarisViz/hooks/useDataForHorizontalChart.ts

@@ -0,0 +1,69 @@
+import { useChartContext, estimateStringWidth, isInfinity } from '@shopify/polaris-viz-core';
+import type { DataSeries, LabelFormatter } from '@shopify/polaris-viz-core';
+import { useMemo } from 'react';
+
+import { HORIZONTAL_BAR_LABEL_OFFSET } from '../constants';
+
+export interface Props {
+  data: DataSeries[];
+  isSimple: boolean;
+  isStacked: boolean;
+  labelFormatter: LabelFormatter;
+}
+
+export function useDataForHorizontalChart({ data, isSimple, isStacked, labelFormatter }: Props) {
+  const { characterWidths } = useChartContext();
+
+  const allNumbers = useMemo(() => {
+    return data.reduce<number[]>((prev, cur) => {
+      const numbers = cur.data.map(({ value }) => value).filter((value) => value !== null) as number[];
+      return prev.concat(...numbers);
+    }, []);
+  }, [data]);
+
+  const lowestNegative = useMemo(() => Math.min(0, ...allNumbers), [allNumbers]);
+  const highestPositive = useMemo(() => Math.max(0, ...allNumbers), [allNumbers]);
+
+  if (isInfinity(lowestNegative) || isInfinity(highestPositive)) {
+    throw new Error('Data must be finite');
+  }
+
+  const longestLabel = useMemo(() => {
+    if (!isSimple && !isStacked) {
+      return { positive: 0, negative: 0 };
+    }
+
+    const negativeTextSize =
+      lowestNegative === 0
+        ? 0
+        : estimateStringWidth(`${labelFormatter(lowestNegative)}`, characterWidths) + HORIZONTAL_BAR_LABEL_OFFSET;
+
+    const positiveTextSize =
+      highestPositive === 0
+        ? 0
+        : estimateStringWidth(`${labelFormatter(highestPositive)}`, characterWidths) + HORIZONTAL_BAR_LABEL_OFFSET;
+
+    return {
+      negative: negativeTextSize,
+      positive: positiveTextSize,
+    };
+  }, [labelFormatter, isSimple, isStacked, highestPositive, lowestNegative, characterWidths]);
+
+  const areAllZero = useMemo(() => {
+    return !allNumbers.some((num) => num !== null && num !== 0);
+  }, [allNumbers]);
+
+  const areAllNegative = useMemo(() => {
+    if (areAllZero) {
+      return false;
+    }
+
+    return !allNumbers.some((num) => num !== null && num > 0);
+  }, [areAllZero, allNumbers]);
+
+  return {
+    allNumbers,
+    areAllNegative,
+    longestLabel,
+  };
+}

package/src/shared/charts/components/GPolarisViz/hooks/useDebouncedCallback.ts

@@ -0,0 +1,197 @@
+import { useRef, useEffect, useMemo, type Dispatch, type SetStateAction } from 'react';
+
+export interface CallOptions {
+  leading?: boolean;
+  trailing?: boolean;
+}
+
+export interface Options extends CallOptions {
+  maxWait?: number;
+  debounceOnServer?: boolean;
+}
+
+export interface ControlFunctions<ReturnT> {
+  cancel: () => void;
+  flush: () => ReturnT | undefined;
+  isPending: () => boolean;
+}
+
+/**
+ * Subsequent calls to the debounced function return the result of the last func invocation.
+ * Note, that if there are no previous invocations you will get undefined. You should check it in your code properly.
+ */
+export interface DebouncedState<T extends (...args: any[]) => any> extends ControlFunctions<ReturnType<T>> {
+  (...args: Parameters<T>): ReturnType<T> | undefined;
+}
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked, or until the next browser frame is drawn.
+ */
+export const useDebouncedCallback = <T extends (...args: any[]) => any>(
+  func: T,
+  wait?: number,
+  options?: Options,
+  forceUpdate?: Dispatch<SetStateAction<object>> | null,
+): DebouncedState<T> => {
+  const lastCallTime = useRef<number | null>(null);
+  const lastInvokeTime = useRef<number>(0);
+  const firstInvokeTime = useRef<number>(0);
+  const timerId = useRef<number | null>(null);
+  const lastArgs = useRef<Parameters<T>>([] as unknown as Parameters<T>);
+  const lastThis = useRef<any>();
+  const result = useRef<ReturnType<T> | undefined>(undefined);
+  const funcRef = useRef<T>(func);
+  const mounted = useRef<boolean>(true);
+
+  funcRef.current = func;
+
+  const isClientSide = typeof window !== 'undefined';
+  const useRAF = !wait && wait !== 0 && isClientSide;
+
+  if (typeof func !== 'function') {
+    throw new TypeError('Expected a function');
+  }
+
+  wait = +(wait || 0);
+  options = options || {};
+
+  const leading = !!options.leading;
+  const trailing = 'trailing' in options ? !!options.trailing : true;
+  const maxing = 'maxWait' in options;
+  const debounceOnServer = 'debounceOnServer' in options ? !!options.debounceOnServer : false;
+  const maxWait = maxing ? Math.max(+(options.maxWait || 0), wait) : null;
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  const debounced = useMemo(() => {
+    const invokeFunc = (time: number): ReturnType<T> | undefined => {
+      const args = lastArgs.current as Parameters<T>;
+      const thisArg = lastThis.current;
+      lastArgs.current = [] as unknown as Parameters<T>;
+      lastThis.current = null;
+      lastInvokeTime.current = time;
+      firstInvokeTime.current = firstInvokeTime.current || time;
+
+      return (result.current = funcRef.current.apply(thisArg, args));
+    };
+
+    const startTimer = (pendingFunc: () => void, waitTime: number) => {
+      if (useRAF) cancelAnimationFrame(timerId.current!);
+      timerId.current = useRAF
+        ? (requestAnimationFrame(pendingFunc) as unknown as number)
+        : (setTimeout(pendingFunc, waitTime) as unknown as number);
+    };
+
+    const shouldInvoke = (time: number) => {
+      if (!mounted.current) return false;
+
+      const timeSinceLastCall = time - (lastCallTime.current ?? 0);
+      const timeSinceLastInvoke = time - lastInvokeTime.current;
+
+      return (
+        !lastCallTime.current ||
+        timeSinceLastCall >= wait ||
+        timeSinceLastCall < 0 ||
+        (maxing && timeSinceLastInvoke >= (maxWait ?? Infinity))
+      );
+    };
+
+    const trailingEdge = (time: number): ReturnType<T> | undefined => {
+      timerId.current = null;
+
+      if (trailing && lastArgs.current.length) {
+        return invokeFunc(time);
+      }
+
+      lastArgs.current = [] as unknown as Parameters<T>;
+      lastThis.current = null;
+      return result.current;
+    };
+
+    const timerExpired = () => {
+      const time = Date.now();
+
+      if (leading && firstInvokeTime.current === lastInvokeTime.current) {
+        notifyManuallyTimerExpired();
+      }
+
+      if (shouldInvoke(time)) {
+        return trailingEdge(time);
+      }
+
+      if (!mounted.current) {
+        return;
+      }
+
+      const timeSinceLastCall = time - (lastCallTime.current ?? 0);
+      const timeSinceLastInvoke = time - lastInvokeTime.current;
+      const timeWaiting = wait - timeSinceLastCall;
+      const remainingWait = maxing ? Math.min(timeWaiting, (maxWait ?? Infinity) - timeSinceLastInvoke) : timeWaiting;
+
+      startTimer(timerExpired, remainingWait);
+    };
+
+    const notifyManuallyTimerExpired = () => {
+      if (forceUpdate) {
+        forceUpdate({});
+      }
+    };
+
+    const func: DebouncedState<T> = (...args: Parameters<T>): ReturnType<T> | undefined => {
+      if (!isClientSide && !debounceOnServer) {
+        return undefined;
+      }
+
+      const time = Date.now();
+      const isInvoking = shouldInvoke(time);
+
+      lastArgs.current = args;
+      lastThis.current = this;
+      lastCallTime.current = time;
+
+      if (isInvoking) {
+        if (!timerId.current && mounted.current) {
+          lastInvokeTime.current = lastCallTime.current;
+          startTimer(timerExpired, wait);
+          return leading ? invokeFunc(lastCallTime.current) : result.current;
+        }
+        if (maxing) {
+          startTimer(timerExpired, wait);
+          return invokeFunc(lastCallTime.current);
+        }
+      }
+      if (!timerId.current) {
+        startTimer(timerExpired, wait);
+      }
+      return result.current;
+    };
+
+    func.cancel = () => {
+      if (timerId.current) {
+        useRAF ? cancelAnimationFrame(timerId.current) : clearTimeout(timerId.current);
+      }
+      lastInvokeTime.current = 0;
+      lastArgs.current = [] as unknown as Parameters<T>;
+      lastCallTime.current = lastThis.current = timerId.current = null;
+    };
+
+    func.isPending = () => {
+      return !!timerId.current;
+    };
+
+    func.flush = () => {
+      return !timerId.current ? result.current : trailingEdge(Date.now());
+    };
+
+    return func;
+  }, [leading, maxing, wait, maxWait, trailing, useRAF, isClientSide, debounceOnServer, forceUpdate]);
+
+  return debounced;
+};

package/src/shared/charts/components/GPolarisViz/hooks/useFormattedLabels.ts

@@ -0,0 +1,31 @@
+import type { DataSeries, LabelFormatter } from '@shopify/polaris-viz-core';
+import { useMemo } from 'react';
+
+interface Props {
+  data: DataSeries[];
+  labelFormatter: LabelFormatter;
+}
+
+export function useFormattedLabels({ data, labelFormatter }: Props) {
+  return useMemo(() => {
+    const formattedLabels: string[] = [];
+    const unformattedLabels: string[] = [];
+
+    if (data == null || data.length === 0) {
+      return { formattedLabels, unformattedLabels };
+    }
+
+    data.forEach((series) => {
+      if (series == null || series.data == null) {
+        return;
+      }
+
+      series.data.forEach(({ key }, index) => {
+        formattedLabels[index] = (labelFormatter?.(`${key}`) as string) ?? `${key}`;
+        unformattedLabels[index] = `${key}`;
+      });
+    });
+
+    return { formattedLabels, unformattedLabels };
+  }, [data, labelFormatter]);
+}

package/src/shared/charts/components/GPolarisViz/hooks/useFunnelBarScaling.ts

@@ -0,0 +1,53 @@
+import type { ScaleLinear } from 'd3-scale';
+import { useCallback } from 'react';
+
+// Threshold to determine if we should scale the segments, i.e if the smallest segment is less than 10% of the tallest segment
+export const SCALING_RATIO_THRESHOLD = 0.1;
+
+// Minimum height ratio between smallest and tallest segments
+export const MINIMUM_SEGMENT_HEIGHT_RATIO = 0.25;
+
+interface UseFunnelBarScalingProps {
+  yScale: ScaleLinear<number, number>;
+  values: number[];
+}
+
+export function useFunnelBarScaling({ yScale, values }: UseFunnelBarScalingProps) {
+  const maxValue = Math.max(...values);
+  const smallestNonZeroValue = Math.min(...values.filter((value) => value > 0));
+  const tallestBarHeight = yScale(maxValue);
+  const smallestBarHeight = yScale(smallestNonZeroValue);
+  const smallestToTallestBarRatio = smallestBarHeight / tallestBarHeight;
+  const shouldApplyScaling = smallestToTallestBarRatio <= SCALING_RATIO_THRESHOLD;
+
+  const getBarHeight = useCallback(
+    (rawValue: number) => {
+      const sanitizedValue = Math.max(0, rawValue);
+      const barHeight = sanitizedValue === 0 ? 0 : yScale(sanitizedValue);
+      if (!shouldApplyScaling || barHeight === tallestBarHeight || sanitizedValue === 0) {
+        return barHeight;
+      }
+
+      // Calculate the ratio of this segment's value compared to the maximum
+      const valueRatio = sanitizedValue / maxValue;
+
+      /*
+       * Use logarithmic scaling to make small segments more visible in the funnel chart.
+       * This helps when values vary greatly (e.g., 1000 vs 10), ensuring smaller
+       * segments remain meaningful. The logarithmic scale uses exponential growth
+       * rather than linear increments on the y scale, which works well for visualizing
+       * large ranges.
+       */
+      const logBase = MINIMUM_SEGMENT_HEIGHT_RATIO ** (1 / Math.log(smallestNonZeroValue / maxValue));
+      const scaledRatio = logBase ** Math.log(valueRatio);
+
+      return tallestBarHeight * Math.max(scaledRatio, MINIMUM_SEGMENT_HEIGHT_RATIO);
+    },
+    [yScale, shouldApplyScaling, tallestBarHeight, maxValue, smallestNonZeroValue],
+  );
+
+  return {
+    shouldApplyScaling,
+    getBarHeight,
+  };
+}

package/src/shared/charts/components/GPolarisViz/hooks/useHorizontalBarSizes.ts

@@ -0,0 +1,70 @@
+import type { Dimensions } from '@shopify/polaris-viz-core';
+import { clamp } from '@shopify/polaris-viz-core';
+import { useMemo } from 'react';
+
+import {
+  HORIZONTAL_GROUP_LABEL_HEIGHT,
+  HORIZONTAL_SPACE_BETWEEN_CHART_AND_AXIS,
+  HORIZONTAL_SPACE_BETWEEN_SETS,
+  HORIZONTAL_SPACE_BETWEEN_SINGLE,
+  WARN_FOR_DEVELOPMENT,
+} from '../constants';
+
+const MIN_BAR_HEIGHT = 6;
+
+export interface Props {
+  chartDimensions: Dimensions;
+  isSimple: boolean;
+  isStacked: boolean;
+  seriesLength: number;
+  singleBarCount: number;
+  xAxisHeight: number;
+}
+
+// Returns all the data needed to size and position the
+// horizontal bar groups and individual bars
+export function useHorizontalBarSizes({
+  chartDimensions,
+  isSimple,
+  isStacked,
+  seriesLength,
+  singleBarCount,
+  xAxisHeight,
+}: Props) {
+  return useMemo(() => {
+    const spaceBetweenXAxis = isSimple ? 0 : HORIZONTAL_SPACE_BETWEEN_CHART_AND_AXIS;
+    // Push the container taller to line up last bar
+    const simpleHeight = chartDimensions.height + HORIZONTAL_SPACE_BETWEEN_SETS;
+
+    const containerHeight = isSimple ? simpleHeight : chartDimensions.height;
+    const xAxisAreaHeight = isSimple ? 0 : xAxisHeight + spaceBetweenXAxis;
+    const chartHeight = containerHeight - xAxisAreaHeight;
+
+    const groupHeight = chartHeight / seriesLength;
+
+    const groupBarsAreaHeight =
+      groupHeight -
+      HORIZONTAL_GROUP_LABEL_HEIGHT -
+      (singleBarCount - 1) * HORIZONTAL_SPACE_BETWEEN_SINGLE -
+      HORIZONTAL_SPACE_BETWEEN_SETS;
+
+    const barHeight = clamp({
+      amount: groupBarsAreaHeight / (isStacked ? 1 : singleBarCount),
+      min: MIN_BAR_HEIGHT,
+    });
+
+    if (WARN_FOR_DEVELOPMENT && groupBarsAreaHeight < 0) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'The height available for drawing the chart is too small and this will cause overlaps between labels and bars. Maybe you should increase the chart height or use fewer data series?',
+      );
+    }
+
+    return {
+      barHeight,
+      chartHeight,
+      groupBarsAreaHeight,
+      groupHeight,
+    };
+  }, [chartDimensions, isSimple, isStacked, seriesLength, singleBarCount, xAxisHeight]);
+}

package/src/shared/charts/components/GPolarisViz/hooks/useHorizontalStackedValues.ts

@@ -0,0 +1,34 @@
+import type { DataSeries } from '@shopify/polaris-viz-core';
+import { useMemo } from 'react';
+
+import { getStackedValuesFromDataSeries } from '../utilities/getStackedValuesFromDataSeries';
+import { getStackedMinMax } from '../utilities/getStackedMinMax';
+
+interface Props {
+  data: DataSeries[];
+  isStacked: boolean;
+}
+
+export function useHorizontalStackedValues({ data, isStacked }: Props) {
+  const { stackedValues, stackedMin, stackedMax } = useMemo(() => {
+    if (!isStacked || data.length === 0) {
+      return { stackedMin: 0, stackedMax: 0, stackedValues: [] };
+    }
+
+    const { stackedValues, formattedStackedValues } = getStackedValuesFromDataSeries(data);
+
+    const { min, max } = getStackedMinMax({
+      stackedValues,
+      data,
+      integersOnly: false,
+    });
+
+    return {
+      stackedMin: min,
+      stackedMax: max,
+      stackedValues: formattedStackedValues,
+    };
+  }, [isStacked, data]);
+
+  return { stackedValues, stackedMin, stackedMax };
+}

package/src/shared/charts/components/GPolarisViz/hooks/useHorizontalTicksAndScale.ts

@@ -0,0 +1,67 @@
+import type { LabelFormatter } from '@shopify/polaris-viz-core';
+import { scaleLinear } from 'd3-scale';
+import { extent } from 'd3-array';
+import { useMemo } from 'react';
+
+interface Props {
+  allNumbers: number[];
+  isStacked: boolean;
+  labelFormatter: LabelFormatter;
+  maxWidth: number;
+  stackedMax: number;
+  stackedMin: number;
+}
+
+export function useHorizontalTicksAndScale({
+  maxWidth,
+  allNumbers,
+  labelFormatter,
+  isStacked,
+  stackedMin,
+  stackedMax,
+}: Props) {
+  const xScale = useMemo(() => {
+    const areAllZero = !allNumbers.some((num) => num != null && num !== 0);
+
+    const domainValues = [0, ...allNumbers];
+
+    if (areAllZero) {
+      domainValues.push(1);
+    }
+
+    return scaleLinear()
+      .range([0, maxWidth])
+      .domain(extent(domainValues, (num) => num) as [number, number])
+      .nice();
+  }, [maxWidth, allNumbers]);
+
+  const ticks = useMemo(() => {
+    return xScale.ticks();
+  }, [xScale]);
+
+  const xScaleStacked = useMemo(() => {
+    if (!isStacked) {
+      return null;
+    }
+
+    const xScale = scaleLinear().range([0, maxWidth]).domain([stackedMin, stackedMax]).nice();
+
+    return xScale;
+  }, [isStacked, maxWidth, stackedMin, stackedMax]);
+
+  const ticksStacked = useMemo(() => {
+    if (!isStacked || !xScaleStacked) {
+      return [];
+    }
+
+    return xScaleStacked.ticks();
+  }, [isStacked, xScaleStacked]);
+
+  const finalTicks = isStacked ? ticksStacked! : ticks;
+
+  return {
+    ticks: finalTicks,
+    xScale: isStacked ? xScaleStacked! : xScale,
+    ticksFormatted: finalTicks.map((tick) => `${labelFormatter(tick)}`),
+  };
+}

package/src/shared/charts/components/GPolarisViz/hooks/useHorizontalXScale.ts

@@ -0,0 +1,48 @@
+import type { LabelFormatter } from '@shopify/polaris-viz-core';
+
+import { useHorizontalTicksAndScale } from './useHorizontalTicksAndScale';
+
+interface Props {
+  allNumbers: number[];
+  isStacked: boolean;
+  maxWidth: number;
+  stackedMax: number;
+  stackedMin: number;
+  labelFormatter: LabelFormatter;
+  longestLabel: { positive: number; negative: number };
+}
+
+export function useHorizontalXScale({
+  allNumbers,
+  isStacked,
+  labelFormatter,
+  maxWidth,
+  stackedMax = 0,
+  stackedMin = 0,
+  longestLabel,
+}: Props) {
+  let drawableWidth = maxWidth;
+  let chartXPosition = 0;
+
+  const labelWidth = longestLabel.positive + longestLabel.negative;
+
+  drawableWidth -= labelWidth;
+  chartXPosition += labelWidth / 2;
+
+  const { xScale, ticks, ticksFormatted } = useHorizontalTicksAndScale({
+    maxWidth: drawableWidth,
+    allNumbers,
+    labelFormatter,
+    isStacked,
+    stackedMin,
+    stackedMax,
+  });
+
+  return {
+    xScale,
+    ticks,
+    ticksFormatted,
+    drawableWidth,
+    chartXPosition,
+  };
+}

package/src/shared/charts/components/GPolarisViz/hooks/useIndexForLabels.ts

@@ -0,0 +1,16 @@
+import type { DataSeries } from '@shopify/polaris-viz-core';
+import { useMemo } from 'react';
+
+export function useIndexForLabels(data: DataSeries[]) {
+  return useMemo(() => {
+    return data.reduce((longestIndex, currentSeries, index, array) => {
+      const previousSeries = array[index - 1];
+
+      if (previousSeries && previousSeries.data.length < currentSeries.data.length) {
+        return index;
+      }
+
+      return longestIndex;
+    }, 0);
+  }, [data]);
+}

package/src/shared/charts/components/GPolarisViz/hooks/usePrefersReducedMotion.ts

@@ -0,0 +1,6 @@
+export function usePrefersReducedMotion() {
+  const prefersReducedMotion =
+    typeof window === 'undefined' ? false : window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  return { prefersReducedMotion };
+}

package/src/shared/charts/components/GPolarisViz/hooks/usePrintResizing.ts

@@ -0,0 +1,94 @@
+import type { Dimensions } from '@shopify/polaris-viz-core';
+import type { Dispatch } from 'react';
+
+import { useBrowserCheck } from './useBrowserCheck';
+import { useEnhancedEffect } from '@/hooks';
+import { useState } from 'react';
+
+interface Props {
+  ref: HTMLElement | null;
+  setContainerBounds: (value: React.SetStateAction<Dimensions | null>) => void;
+  onIsPrintingChange: Dispatch<React.SetStateAction<boolean>>;
+}
+
+export function usePrintResizing({ ref, setContainerBounds, onIsPrintingChange }: Props) {
+  const [isPrinting, setIsPrinting] = useState(false);
+  const { isFirefox, isSafari } = useBrowserCheck();
+
+  useEnhancedEffect(() => {
+    const isServer = typeof window === 'undefined';
+
+    function handlePrint() {
+      if (ref != null) {
+        const { paddingRight, paddingLeft, paddingTop, paddingBottom } = getComputedStyle(ref);
+        const width = ref.clientWidth - parseInt(paddingLeft, 10) - parseInt(paddingRight, 10);
+        const height = ref.clientHeight - parseInt(paddingTop, 10) - parseInt(paddingBottom, 10);
+        setContainerBounds({ width, height });
+
+        setIsPrinting((isPrinting) => {
+          const newIsPrinting = !isPrinting;
+          onIsPrintingChange(newIsPrinting);
+          return newIsPrinting;
+        });
+      }
+    }
+
+    const printSafari = () => {
+      setTimeout(() => {
+        handlePrint();
+      });
+    };
+
+    const addEventListener = typeof window.matchMedia('print').addEventListener === 'function';
+    // older versions of Safari break if we call addEventListener
+    const addListener = typeof window.matchMedia('print').addListener === 'function';
+    const notSafariOrServer = !isSafari && !isServer;
+    const safariNotServer = isSafari && !isServer;
+
+    if (isFirefox) {
+      window.addEventListener('beforeprint', handlePrint);
+      window.addEventListener('afterprint', handlePrint);
+    }
+
+    if (notSafariOrServer) {
+      if (addEventListener) {
+        window.matchMedia('print').addEventListener('change', handlePrint);
+      } else if (addListener) {
+        window.matchMedia('print').addListener(printSafari);
+      }
+    }
+
+    if (safariNotServer) {
+      if (addEventListener) {
+        window.matchMedia('print').addEventListener('change', printSafari);
+      } else if (addListener) {
+        window.matchMedia('print').addListener(printSafari);
+      }
+    }
+
+    return () => {
+      if (isFirefox) {
+        window.removeEventListener('beforeprint', handlePrint);
+        window.removeEventListener('afterprint', handlePrint);
+      }
+
+      if (notSafariOrServer) {
+        if (addEventListener) {
+          window.matchMedia('print').removeEventListener('change', handlePrint);
+        } else if (addListener) {
+          window.matchMedia('print').removeListener(printSafari);
+        }
+      }
+
+      if (safariNotServer) {
+        if (addEventListener) {
+          window.matchMedia('print').removeEventListener('change', printSafari);
+        } else if (addListener) {
+          window.matchMedia('print').removeListener(printSafari);
+        }
+      }
+    };
+  }, [onIsPrintingChange, setContainerBounds, ref, isFirefox, isSafari]);
+
+  return { isPrinting };
+}