@elastic/eui 62.0.2 → 62.1.0

package/es/services/{hooks/useIsWithinBreakpoints.js → breakpoint/currentEuiBreakpoint.js}

@@ -1,3 +1,5 @@
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -17,40 +19,46 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { useState, useEffect } from 'react';
-import { isWithinBreakpoints } from '../breakpoint';
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { useEuiTheme } from '../theme';
+import { throttle } from '../throttle';
+import { getBreakpoint } from './breakpoint';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var CurrentEuiBreakpointContext = /*#__PURE__*/createContext(undefined);
 /**
- * Given the current window.innerWidth and an array of breakpoint keys,
- * this hook stores state and returns true or false if the window.innerWidth
- * falls within any of the named breakpoints.
- *
- * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
- * @param {boolean} isActive Manages whether the resize handler should be active
- * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
+ * Top level provider (nested within EuiProvider) which provides a single
+ * resize listener that returns the current breakpoint based on window width
  */
 
-export function useIsWithinBreakpoints(sizes) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+export var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
+  var children = _ref.children;
+
+  var _useEuiTheme = useEuiTheme(),
+      breakpoints = _useEuiTheme.euiTheme.breakpoint;
 
-  var _useState = useState(false),
+  var _useState = useState((typeof window === "undefined" ? "undefined" : _typeof(window)) !== undefined ? getBreakpoint(window.innerWidth, breakpoints) : undefined),
       _useState2 = _slicedToArray(_useState, 2),
-      isWithinBreakpointsValue = _useState2[0],
-      setIsWithinBreakpointsValue = _useState2[1];
+      currentBreakpoint = _useState2[0],
+      setCurrentBreakpoint = _useState2[1];
 
   useEffect(function () {
-    function handleResize() {
-      setIsWithinBreakpointsValue(isWithinBreakpoints(window.innerWidth, sizes));
-    }
-
-    if (isActive) {
-      window.removeEventListener('resize', handleResize);
-      window.addEventListener('resize', handleResize);
-      handleResize();
-    }
-
+    var onWindowResize = throttle(function () {
+      setCurrentBreakpoint(getBreakpoint(window.innerWidth, breakpoints));
+    }, 50);
+    window.addEventListener('resize', onWindowResize);
     return function () {
-      return window.removeEventListener('resize', handleResize);
+      return window.removeEventListener('resize', onWindowResize);
     };
-  }, [sizes, isActive]);
-  return isWithinBreakpointsValue;
-}
+  }, [breakpoints]);
+  return ___EmotionJSX(CurrentEuiBreakpointContext.Provider, {
+    value: currentBreakpoint
+  }, children);
+};
+/**
+ * Hook util / syntactical sugar
+ */
+
+export var useCurrentEuiBreakpoint = function useCurrentEuiBreakpoint() {
+  var currentBreakpoint = useContext(CurrentEuiBreakpointContext);
+  return currentBreakpoint;
+};

package/es/services/breakpoint/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+export * from './breakpoint';
+export * from './currentEuiBreakpoint';
+export * from './useIsWithinBreakpoints';

package/es/services/breakpoint/useIsWithinBreakpoints.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { useCurrentEuiBreakpoint } from './currentEuiBreakpoint';
+/**
+ * Given the current window.innerWidth and an array of breakpoint keys,
+ * this hook stores state and returns true or false if the window.innerWidth
+ * falls within any of the named breakpoints.
+ *
+ * @param {_EuiThemeBreakpoint[]} sizes An array of named EUI breakpoints
+ * @param {boolean} isResponsive Some components have the option to turn off responsive behavior.
+ *   Since hooks can't be called conditionally, it's easier to pass the condition into the hook
+ * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
+ */
+
+export var useIsWithinBreakpoints = function useIsWithinBreakpoints(sizes) {
+  var isResponsive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var currentBreakpoint = useCurrentEuiBreakpoint();
+  return currentBreakpoint && isResponsive ? sizes.includes(currentBreakpoint) : false;
+};

package/es/services/hooks/index.js

@@ -8,7 +8,6 @@
 export * from './useDependentState';
 export * from './useCombinedRefs';
 export * from './useForceRender';
-export * from './useIsWithinBreakpoints';
 export * from './useLatest';
 export * from './useMouseMove';
 export * from './useUpdateEffect';

package/es/services/index.js

@@ -10,7 +10,7 @@ import * as keys from './keys';
 export { keys };
 export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
 export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from './alignment';
-export { BREAKPOINTS, BREAKPOINT_KEYS, getBreakpoint, isWithinBreakpoints, isWithinMaxBreakpoint, isWithinMinBreakpoint } from './breakpoint';
+export { BREAKPOINTS, BREAKPOINT_KEYS, getBreakpoint, isWithinBreakpoints, useIsWithinBreakpoints, isWithinMaxBreakpoint, isWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint } from './breakpoint';
 export { isColorDark, isValidHex, calculateContrast, calculateLuminance, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, rgbToHex, rgbToHsv, VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, colorPalette, euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, getSteppedGradient, transparentize, tint, shade, tintOrShade, shadeOrTint, saturate, desaturate, lightness, makeHighContrastColor, makeDisabledContrastColor } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';