@shopify/polaris/dist/esm/components/MediaQueryProvider/MediaQueryProvider.js

Shopify’s product component library

import React$1, { useState, useCallback, useEffect } from 'react';
import debounce$1 from 'lodash/debounce';
import { MediaQueryContext } from '../../utilities/media-query/context.js';
import { navigationBarCollapsed } from '../../utilities/breakpoints.js';
import { EventListener as EventListener$1 } from '../EventListener/EventListener.js';

var MediaQueryProvider = function MediaQueryProvider({
  children
}) {
  var [isNavigationCollapsed, setIsNavigationCollapsed] = useState(navigationBarCollapsed().matches); // eslint-disable-next-line react-hooks/exhaustive-deps

  var handleResize = useCallback(debounce$1(() => {
    if (isNavigationCollapsed !== navigationBarCollapsed().matches) {
      setIsNavigationCollapsed(!isNavigationCollapsed);
    }
  }, 40, {
    trailing: true,
    leading: true,
    maxWait: 40
  }), [isNavigationCollapsed]);
  useEffect(() => {
    setIsNavigationCollapsed(navigationBarCollapsed().matches);
  }, []);
  return /*#__PURE__*/React$1.createElement(MediaQueryContext.Provider, {
    value: {
      isNavigationCollapsed
    }
  }, /*#__PURE__*/React$1.createElement(EventListener$1, {
    event: "resize",
    handler: handleResize
  }), children);
};

export { MediaQueryProvider };