@elastic/eui 63.0.1 → 64.0.0

package/es/components/tour/tour_step.js

@@ -49,7 +49,8 @@ import { EuiI18n } from '../i18n';
 import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle, EuiWrappingPopover } from '../popover';
 import { EuiTitle } from '../title';
 import { EuiTourStepIndicator } from './tour_step_indicator';
-import { useGeneratedHtmlId, findElementBySelectorOrRef } from '../../services';
+import { useGeneratedHtmlId, findElementBySelectorOrRef, useEuiTheme } from '../../services';
+import { euiTourStyles, euiTourBeaconStyles, euiTourFooterStyles, euiTourHeaderStyles } from './tour.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTourStep = function EuiTourStep(_ref) {
   var _ref$anchorPosition = _ref.anchorPosition,
@@ -91,6 +92,16 @@ export var EuiTourStep = function EuiTourStep(_ref) {
 
   var animationFrameId = useRef();
   var anchorNode = useRef(null);
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      popoverPosition = _useState4[0],
+      setPopoverPosition = _useState4[1];
+
+  var onPositionChange = function onPositionChange(position) {
+    setPopoverPosition(position);
+  };
+
   useEffect(function () {
     if (anchor) {
       animationFrameId.current = window.requestAnimationFrame(function () {
@@ -104,6 +115,12 @@ export var EuiTourStep = function EuiTourStep(_ref) {
     };
   }, [anchor]);
   var classes = classNames('euiTour', className);
+  var euiTheme = useEuiTheme();
+  var tourStyles = euiTourStyles(euiTheme);
+  var headerStyles = euiTourHeaderStyles(euiTheme);
+  var footerStyles = euiTourFooterStyles(euiTheme);
+  var beaconStyles = euiTourBeaconStyles(euiTheme);
+  var beaconCss = [beaconStyles.euiTourBeacon, popoverPosition && beaconStyles[popoverPosition]];
   var finishButtonProps = {
     color: 'text',
     flush: 'right',
@@ -164,11 +181,16 @@ export var EuiTourStep = function EuiTourStep(_ref) {
     ownFocus: false,
     panelClassName: classes,
     panelStyle: style,
+    panelProps: {
+      css: tourStyles.euiTour
+    },
     offset: hasBeacon ? 10 : 0,
     'aria-labelledby': titleId,
     arrowChildren: hasBeacon && ___EmotionJSX(EuiBeacon, {
+      css: beaconCss,
       className: "euiTour__beacon"
-    })
+    }),
+    onPositionChange: onPositionChange
   }, rest);
 
   var layout = ___EmotionJSX("div", {
@@ -177,17 +199,19 @@ export var EuiTourStep = function EuiTourStep(_ref) {
       maxWidth: maxWidth
     }
   }, ___EmotionJSX(EuiPopoverTitle, {
+    css: headerStyles.euiTourHeader,
     className: "euiTourHeader",
     id: titleId
   }, subtitle && ___EmotionJSX(EuiTitle, {
-    size: "xxxs",
-    className: "euiTourHeader__subtitle"
+    css: headerStyles.euiTourHeader__subtitle,
+    size: "xxxs"
   }, ___EmotionJSX("h2", null, subtitle)), ___EmotionJSX(EuiTitle, {
-    size: "xxs",
-    className: "euiTourHeader__title"
+    css: headerStyles.euiTourHeader__title,
+    size: "xxs"
   }, subtitle ? ___EmotionJSX("h3", null, title) : ___EmotionJSX("h2", null, title))), ___EmotionJSX("div", {
     className: "euiTour__content"
   }, content), ___EmotionJSX(EuiPopoverFooter, {
+    css: footerStyles.euiTourFooter,
     className: "euiTourFooter"
   }, footer));
 
@@ -209,6 +233,7 @@ EuiTourStep.propTypes = {
      */
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Class name passed to the direct parent of the button
@@ -349,6 +374,11 @@ EuiTourStep.propTypes = {
      */
   "aria-labelledby": PropTypes.string,
 
+  /**
+     * Function callback for when the popover positon changes
+     */
+  onPositionChange: PropTypes.func,
+
   /**
        * Element to which the tour step popover attaches when open
        */

package/es/components/tour/tour_step_indicator.js

@@ -6,6 +6,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+import PropTypes from "prop-types";
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -14,25 +18,28 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 import React from 'react';
-import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { keysOf } from '../common';
+import { css } from '@emotion/react';
 import { EuiIcon } from '../icon';
 import { EuiI18n } from '../i18n';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var statusToClassNameMap = {
-  complete: 'euiTourStepIndicator--complete',
-  incomplete: 'euiTourStepIndicator--incomplete',
-  active: 'euiTourStepIndicator--active'
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1v4nm53-EuiTourStepIndicator",
+  styles: "display:inline-block;label:EuiTourStepIndicator;"
+} : {
+  name: "1v4nm53-EuiTourStepIndicator",
+  styles: "display:inline-block;label:EuiTourStepIndicator;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var STATUS = keysOf(statusToClassNameMap);
-export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref) {
-  var className = _ref.className,
-      number = _ref.number,
-      status = _ref.status,
-      rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = classNames('euiTourStepIndicator', status ? statusToClassNameMap[status] : undefined, className);
+export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
+  var className = _ref2.className,
+      number = _ref2.number,
+      status = _ref2.status,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var classes = classNames('euiTourStepIndicator', className);
   var indicatorIcon;
 
   if (status === 'active') {
@@ -83,6 +90,7 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref) {
     }
   }, function (ariaLabel) {
     return ___EmotionJSX("li", _extends({
+      css: _ref,
       className: classes,
       "aria-label": ariaLabel
     }, rest), indicatorIcon);
@@ -93,5 +101,6 @@ EuiTourStepIndicator.propTypes = {
   status: PropTypes.oneOf(["complete", "incomplete", "active"]).isRequired,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/tree_view/tree_view.js

@@ -360,6 +360,7 @@ _defineProperty(EuiTreeView, "contextType", EuiTreeViewContext);
 EuiTreeView.propTypes = {
   className: PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /** An array of EuiTreeViewNodes
        */

package/es/global_styling/mixins/_responsive.js

@@ -5,39 +5,43 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+import { sortMapBySmallToLargeValues } from '../../services/breakpoint/_sorting';
 import { useEuiTheme } from '../../services/theme/hooks';
-import { EuiThemeBreakpoints } from '../variables';
+
 /**
  * Generates a CSS media query rule string based on the input breakpoint ranges.
- * Examples:
+ * Examples with default theme breakpoints:
+ *
  * euiBreakpoint(['s']) becomes `@media only screen and (min-width: 575px) and (max-width: 767px)`
  * euiBreakpoint(['s', 'l']) becomes `@media only screen and (min-width: 575px) and (max-width: 1199px)`
  *
- * Use the `xs` and `xl` sizes to generate media queries with only min/max-width.
- * Examples:
+ * Use the smallest and largest sizes to generate media queries with only min/max-width.
+ * Examples with default theme breakpoints:
+ *
  * euiBreakpoint(['xs', 'm']) becomes `@media only screen and (max-width: 991px)`
  * euiBreakpoint(['l', 'xl']) becomes `@media only screen and (min-width: 992px)`
  */
-
 export var euiBreakpoint = function euiBreakpoint(_ref, sizes) {
   var euiTheme = _ref.euiTheme;
-  // Ensure the array is in the correct ascending size order
+  // Ensure we inherit any theme breakpoint overrides & sort by small to large
+  var orderedBreakpoints = Object.keys(sortMapBySmallToLargeValues(euiTheme.breakpoint)); // Ensure the sizes array is in the correct ascending size order
+
   var orderedSizes = sizes.sort(function (a, b) {
-    return EuiThemeBreakpoints.indexOf(a) - EuiThemeBreakpoints.indexOf(b);
+    return orderedBreakpoints.indexOf(a) - orderedBreakpoints.indexOf(b);
   });
   var firstBreakpoint = orderedSizes[0];
   var minBreakpointSize = euiTheme.breakpoint[firstBreakpoint];
   var lastBreakpoint = orderedSizes[sizes.length - 1];
-  var maxBreakpointSize; // To get the correct screen range, we set the max-width
-  // to the next breakpoint size in the sizes array
+  var maxBreakpointSize; // To get the correct screen range, we set the max-width to the next breakpoint
+  // size in the sizes array (unless the size is already the largest breakpoint)
 
-  if (lastBreakpoint !== 'xl') {
-    var nextBreakpoint = EuiThemeBreakpoints.indexOf(lastBreakpoint) + 1;
-    maxBreakpointSize = euiTheme.breakpoint[EuiThemeBreakpoints[nextBreakpoint]];
+  if (lastBreakpoint !== orderedBreakpoints[orderedBreakpoints.length - 1]) {
+    var nextBreakpoint = orderedBreakpoints.indexOf(lastBreakpoint) + 1;
+    maxBreakpointSize = euiTheme.breakpoint[orderedBreakpoints[nextBreakpoint]];
   }
 
-  return ['@media only screen', minBreakpointSize ? "(min-width: ".concat(minBreakpointSize, "px)") : false, // If xs/0, don't render a min-width
-  maxBreakpointSize ? "(max-width: ".concat(maxBreakpointSize - 1, "px)") : false // If xl/undefined, don't render a max-width
+  return ['@media only screen', minBreakpointSize ? "(min-width: ".concat(minBreakpointSize, "px)") : false, // If 0, don't render a min-width
+  maxBreakpointSize ? "(max-width: ".concat(maxBreakpointSize - 1, "px)") : false // If undefined, don't render a max-width
   ].filter(Boolean).join(' and ');
 };
 export var useEuiBreakpoint = function useEuiBreakpoint(sizes) {

package/es/global_styling/variables/breakpoint.js

@@ -5,4 +5,5 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-export var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'];
+export var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl']; // This type cannot be a string enum / must be a generic string
+// in case consumers add custom breakpoint sizes, such as xxl or xxs

package/es/services/breakpoint/_sorting.js

@@ -0,0 +1,41 @@
+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."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/*
+ * 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 var sortMapByLargeToSmallValues = function sortMapByLargeToSmallValues(breakpointsMap) {
+  return Object.fromEntries(Object.entries(breakpointsMap).sort(function (_ref, _ref2) {
+    var _ref3 = _slicedToArray(_ref, 2),
+        a = _ref3[1];
+
+    var _ref4 = _slicedToArray(_ref2, 2),
+        b = _ref4[1];
+
+    return b - a;
+  }));
+};
+export var sortMapBySmallToLargeValues = function sortMapBySmallToLargeValues(breakpointsMap) {
+  return Object.fromEntries(Object.entries(breakpointsMap).sort(function (_ref5, _ref6) {
+    var _ref7 = _slicedToArray(_ref5, 2),
+        a = _ref7[1];
+
+    var _ref8 = _slicedToArray(_ref6, 2),
+        b = _ref8[1];
+
+    return a - b;
+  }));
+};

package/es/services/breakpoint/current_breakpoint.js

@@ -17,10 +17,11 @@ 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 React, { createContext, useState, useEffect } from 'react';
+import React, { createContext, useState, useEffect, useMemo, useCallback } from 'react';
+import { keysOf } from '../../components/common';
 import { useEuiTheme } from '../theme';
 import { throttle } from '../throttle';
-import { getBreakpoint } from './breakpoint';
+import { sortMapByLargeToSmallValues } from './_sorting';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CurrentEuiBreakpointContext = /*#__PURE__*/createContext(undefined);
 /**
@@ -31,23 +32,35 @@ export var CurrentEuiBreakpointContext = /*#__PURE__*/createContext(undefined);
 export var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
   var children = _ref.children;
 
+  // Obtain the breakpoints map from the EUI theme
   var _useEuiTheme = useEuiTheme(),
-      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+      breakpoints = _useEuiTheme.euiTheme.breakpoint; // Ensure the breakpoints map is sorted from largest value to smallest
 
-  var _useState = useState(typeof window !== 'undefined' ? getBreakpoint(window.innerWidth, breakpoints) : undefined),
+
+  var sortedBreakpoints = useMemo(function () {
+    return sortMapByLargeToSmallValues(breakpoints);
+  }, [breakpoints]); // Find the breakpoint (key) whose value is <= windowWidth starting with largest first
+
+  var getBreakpoint = useCallback(function (width) {
+    return keysOf(sortedBreakpoints).find(function (key) {
+      return sortedBreakpoints[key] <= width;
+    });
+  }, [sortedBreakpoints]);
+
+  var _useState = useState(typeof window !== 'undefined' ? getBreakpoint(window.innerWidth) : undefined),
       _useState2 = _slicedToArray(_useState, 2),
       currentBreakpoint = _useState2[0],
       setCurrentBreakpoint = _useState2[1];
 
   useEffect(function () {
     var onWindowResize = throttle(function () {
-      setCurrentBreakpoint(getBreakpoint(window.innerWidth, breakpoints));
+      setCurrentBreakpoint(getBreakpoint(window.innerWidth));
     }, 50);
     window.addEventListener('resize', onWindowResize);
     return function () {
       return window.removeEventListener('resize', onWindowResize);
     };
-  }, [breakpoints]);
+  }, [getBreakpoint]);
   return ___EmotionJSX(CurrentEuiBreakpointContext.Provider, {
     value: currentBreakpoint
   }, children);

package/es/services/breakpoint/index.js

@@ -5,7 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-export * from './breakpoint';
 export * from './current_breakpoint';
 export * from './current_breakpoint_hook';
-export * from './useIsWithinBreakpoints';
+export * from './is_within_hooks';
+export {};

package/es/services/breakpoint/is_within_hooks.js

@@ -0,0 +1,67 @@
+/*
+ * 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 { useEuiTheme } from '../theme';
+import { useCurrentEuiBreakpoint } from './current_breakpoint_hook';
+/**
+ * Given an array of breakpoint keys, this hook returns true or false
+ * if the breakpoint size of the current window width 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;
+};
+/**
+ * Given a max breakpoint key, this hook returns true if the breakpoint size
+ * of the current window width falls within the max breakpoint or any below,
+ * and false otherwise
+ *
+ * @param {EuiThemeBreakpoint} max The named max breakpoint to check against
+ * @returns {boolean} Will return `false` if it can't find a value for the `max` breakpoint
+ */
+
+export function useIsWithinMaxBreakpoint(max) {
+  var _useEuiTheme = useEuiTheme(),
+      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  var currentBreakpoint = useCurrentEuiBreakpoint();
+
+  if (currentBreakpoint == null || breakpoints[max] == null) {
+    return false;
+  }
+
+  return breakpoints[currentBreakpoint] <= breakpoints[max];
+}
+/**
+ * Given a min breakpoint key, this hook returns true if the breakpoint size
+ * of the current window width falls within the min breakpoint or any above,
+ * and false otherwise
+ *
+ * @param {EuiThemeBreakpoint} min The named min breakpoint to check against
+ * @returns {boolean} Will return `false` if it can't find a value for the `min` breakpoint
+ */
+
+export function useIsWithinMinBreakpoint(min) {
+  var _useEuiTheme2 = useEuiTheme(),
+      breakpoints = _useEuiTheme2.euiTheme.breakpoint;
+
+  var currentBreakpoint = useCurrentEuiBreakpoint();
+
+  if (currentBreakpoint == null || breakpoints[min] == null) {
+    return false;
+  }
+
+  return breakpoints[currentBreakpoint] >= breakpoints[min];
+}

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, useIsWithinBreakpoints, isWithinMaxBreakpoint, isWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint } from './breakpoint';
+export { useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, 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';