@elastic/eui 93.3.0 → 93.5.0

package/es/components/flex/flex_item.styles.js

@@ -8,127 +8,112 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "n7polf-10",
-  styles: "flex-grow:10;label:10;"
-} : {
-  name: "n7polf-10",
-  styles: "flex-grow:10;label:10;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "1tyr8p6-9",
-  styles: "flex-grow:9;label:9;"
-} : {
-  name: "1tyr8p6-9",
-  styles: "flex-grow:9;label:9;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "fjdgzc-8",
-  styles: "flex-grow:8;label:8;"
-} : {
-  name: "fjdgzc-8",
-  styles: "flex-grow:8;label:8;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref4 = process.env.NODE_ENV === "production" ? {
-  name: "fvh3nz-7",
-  styles: "flex-grow:7;label:7;"
-} : {
-  name: "fvh3nz-7",
-  styles: "flex-grow:7;label:7;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref5 = process.env.NODE_ENV === "production" ? {
-  name: "1in9iiy-6",
-  styles: "flex-grow:6;label:6;"
-} : {
-  name: "1in9iiy-6",
-  styles: "flex-grow:6;label:6;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref6 = process.env.NODE_ENV === "production" ? {
-  name: "1cx5fxs-5",
-  styles: "flex-grow:5;label:5;"
-} : {
-  name: "1cx5fxs-5",
-  styles: "flex-grow:5;label:5;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref7 = process.env.NODE_ENV === "production" ? {
-  name: "k4pnsg-4",
-  styles: "flex-grow:4;label:4;"
-} : {
-  name: "k4pnsg-4",
-  styles: "flex-grow:4;label:4;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref8 = process.env.NODE_ENV === "production" ? {
-  name: "1sl79ay-3",
-  styles: "flex-grow:3;label:3;"
-} : {
-  name: "1sl79ay-3",
-  styles: "flex-grow:3;label:3;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref9 = process.env.NODE_ENV === "production" ? {
-  name: "1l86xxh-2",
-  styles: "flex-grow:2;label:2;"
-} : {
-  name: "1l86xxh-2",
-  styles: "flex-grow:2;label:2;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref10 = process.env.NODE_ENV === "production" ? {
-  name: "1v6uyoj-1",
-  styles: "flex-grow:1;label:1;"
-} : {
-  name: "1v6uyoj-1",
-  styles: "flex-grow:1;label:1;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref11 = process.env.NODE_ENV === "production" ? {
-  name: "tr4wer-grow",
-  styles: "flex-basis:0%;label:grow;"
-} : {
-  name: "tr4wer-grow",
-  styles: "flex-basis:0%;label:grow;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref12 = process.env.NODE_ENV === "production" ? {
-  name: "1pat7n0-growZero",
-  styles: "flex-grow:0;flex-basis:auto;label:growZero;"
-} : {
-  name: "1pat7n0-growZero",
-  styles: "flex-grow:0;flex-basis:auto;label:growZero;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref13 = process.env.NODE_ENV === "production" ? {
-  name: "19hf44n-euiFlexItem",
-  styles: "display:flex;flex-direction:column;label:euiFlexItem;"
-} : {
-  name: "19hf44n-euiFlexItem",
-  styles: "display:flex;flex-direction:column;label:euiFlexItem;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var euiFlexItemStyles = function euiFlexItemStyles() {
-  return {
-    // 1. Allow EuiPanels to expand to fill the item.
-    euiFlexItem: _ref13,
-    growZero: _ref12,
-    grow: _ref11,
-    growSizes: {
-      '1': _ref10,
-      '2': _ref9,
-      '3': _ref8,
-      '4': _ref7,
-      '5': _ref6,
-      '6': _ref5,
-      '7': _ref4,
-      '8': _ref3,
-      '9': _ref2,
-      '10': _ref
+export var euiFlexItemStyles = {
+  // 1. Allow EuiPanels to expand to fill the item.
+  euiFlexItem: process.env.NODE_ENV === "production" ? {
+    name: "19hf44n-euiFlexItem",
+    styles: "display:flex;flex-direction:column;label:euiFlexItem;"
+  } : {
+    name: "19hf44n-euiFlexItem",
+    styles: "display:flex;flex-direction:column;label:euiFlexItem;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  growZero: process.env.NODE_ENV === "production" ? {
+    name: "1pat7n0-growZero",
+    styles: "flex-grow:0;flex-basis:auto;label:growZero;"
+  } : {
+    name: "1pat7n0-growZero",
+    styles: "flex-grow:0;flex-basis:auto;label:growZero;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  grow: process.env.NODE_ENV === "production" ? {
+    name: "tr4wer-grow",
+    styles: "flex-basis:0%;label:grow;"
+  } : {
+    name: "tr4wer-grow",
+    styles: "flex-basis:0%;label:grow;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  growSizes: {
+    '1': process.env.NODE_ENV === "production" ? {
+      name: "1v6uyoj-1",
+      styles: "flex-grow:1;label:1;"
+    } : {
+      name: "1v6uyoj-1",
+      styles: "flex-grow:1;label:1;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '2': process.env.NODE_ENV === "production" ? {
+      name: "1l86xxh-2",
+      styles: "flex-grow:2;label:2;"
+    } : {
+      name: "1l86xxh-2",
+      styles: "flex-grow:2;label:2;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '3': process.env.NODE_ENV === "production" ? {
+      name: "1sl79ay-3",
+      styles: "flex-grow:3;label:3;"
+    } : {
+      name: "1sl79ay-3",
+      styles: "flex-grow:3;label:3;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '4': process.env.NODE_ENV === "production" ? {
+      name: "k4pnsg-4",
+      styles: "flex-grow:4;label:4;"
+    } : {
+      name: "k4pnsg-4",
+      styles: "flex-grow:4;label:4;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '5': process.env.NODE_ENV === "production" ? {
+      name: "1cx5fxs-5",
+      styles: "flex-grow:5;label:5;"
+    } : {
+      name: "1cx5fxs-5",
+      styles: "flex-grow:5;label:5;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '6': process.env.NODE_ENV === "production" ? {
+      name: "1in9iiy-6",
+      styles: "flex-grow:6;label:6;"
+    } : {
+      name: "1in9iiy-6",
+      styles: "flex-grow:6;label:6;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '7': process.env.NODE_ENV === "production" ? {
+      name: "fvh3nz-7",
+      styles: "flex-grow:7;label:7;"
+    } : {
+      name: "fvh3nz-7",
+      styles: "flex-grow:7;label:7;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '8': process.env.NODE_ENV === "production" ? {
+      name: "fjdgzc-8",
+      styles: "flex-grow:8;label:8;"
+    } : {
+      name: "fjdgzc-8",
+      styles: "flex-grow:8;label:8;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '9': process.env.NODE_ENV === "production" ? {
+      name: "1tyr8p6-9",
+      styles: "flex-grow:9;label:9;"
+    } : {
+      name: "1tyr8p6-9",
+      styles: "flex-grow:9;label:9;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '10': process.env.NODE_ENV === "production" ? {
+      name: "n7polf-10",
+      styles: "flex-grow:10;label:10;"
+    } : {
+      name: "n7polf-10",
+      styles: "flex-grow:10;label:10;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
     }
-  };
+  }
 };

package/es/components/flyout/flyout.js

@@ -99,33 +99,31 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     resizeRef = _useState2[0],
     setResizeRef = _useState2[1];
   var setRef = useCombinedRefs([setResizeRef, ref]);
-  // TODO: Allow this hook to be conditional
-  var dimensions = useResizeObserver(resizeRef);
+  var _useResizeObserver = useResizeObserver(isPushed ? resizeRef : null, 'width'),
+    width = _useResizeObserver.width;
   useEffect(function () {
-    // This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
-    document.body.classList.add('euiBody--hasFlyout');
-
     /**
      * Accomodate for the `isPushed` state by adding padding to the body equal to the width of the element
      */
     if (isPushed) {
-      if (side === 'right') {
-        document.body.style.paddingInlineEnd = "".concat(dimensions.width, "px");
-      } else if (side === 'left') {
-        document.body.style.paddingInlineStart = "".concat(dimensions.width, "px");
-      }
+      var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
+      document.body.style[paddingSide] = "".concat(width, "px");
+      return function () {
+        document.body.style[paddingSide] = '';
+      };
     }
+  }, [isPushed, side, width]);
+
+  /**
+   * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
+   */
+  useEffect(function () {
+    document.body.classList.add('euiBody--hasFlyout');
     return function () {
+      // Remove the hasFlyout class when the flyout is unmounted
       document.body.classList.remove('euiBody--hasFlyout');
-      if (isPushed) {
-        if (side === 'right') {
-          document.body.style.paddingInlineEnd = '';
-        } else if (side === 'left') {
-          document.body.style.paddingInlineStart = '';
-        }
-      }
     };
-  }, [side, dimensions, isPushed]);
+  }, []);
 
   /**
    * ESC key closes flyout (always?)

package/es/components/header/header_breadcrumbs/header_breadcrumbs.js

@@ -13,24 +13,22 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiBreadcrumbs } from '../../breadcrumbs';
 import { euiHeaderBreadcrumbsStyles } from './header_breadcrumbs.styles';
-import { useEuiTheme } from '../../../services';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiHeaderBreadcrumbs = function EuiHeaderBreadcrumbs(_ref) {
   var className = _ref.className,
     breadcrumbs = _ref.breadcrumbs,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiHeaderBreadcrumbs', className);
-  var euiTheme = useEuiTheme();
-  var styles = euiHeaderBreadcrumbsStyles(euiTheme);
-  var cssHeaderBreadcrumbStyles = [styles.euiHeaderBreadcrumbs];
+  var styles = useEuiMemoizedStyles(euiHeaderBreadcrumbsStyles);
   return ___EmotionJSX(EuiBreadcrumbs, _extends({
     max: 4,
     truncate: true,
     breadcrumbs: breadcrumbs,
     className: classes,
-    css: cssHeaderBreadcrumbStyles,
+    css: styles.euiHeaderBreadcrumbs,
     type: "application"
   }, rest));
 };

package/es/components/header/header_links/header_links.js

@@ -78,6 +78,7 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
       size: "m"
     }));
   });
+  var renderedChildren = typeof children === 'function' ? children(closeMenu) : children;
   return ___EmotionJSX(EuiI18n, {
     token: "euiHeaderLinks.appNavigation",
     default: "App menu"
@@ -91,7 +92,7 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     }, ___EmotionJSX("div", {
       className: "euiHeaderLinks__list",
       css: [styles.euiHeaderLinks__list, styles.gutterSizes[gutterSize], ";label:EuiHeaderLinks;"]
-    }, children)), ___EmotionJSX(EuiShowFor, {
+    }, renderedChildren)), ___EmotionJSX(EuiShowFor, {
       sizes: popoverBreakpoints
     }, ___EmotionJSX(EuiPopover, _extends({
       button: button,
@@ -103,7 +104,7 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     }, popoverProps), ___EmotionJSX("div", {
       className: "euiHeaderLinks__mobileList",
       css: styles.euiHeaderLinks__mobileList
-    }, children))));
+    }, renderedChildren))));
   });
 };
 EuiHeaderLinks.propTypes = {
@@ -111,6 +112,13 @@ EuiHeaderLinks.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+       * Takes any rendered node(s), typically of `EuiHeaderLink`s.
+       *
+       * Optionally takes a render function that will pass a callback allowing you
+       * to close the mobile popover from within your popover content.
+       */
+  children: PropTypes.oneOfType([PropTypes.node.isRequired, PropTypes.func.isRequired]),
   /**
        * Spacing between direct children
        */

package/es/components/icon/icon.js

@@ -223,8 +223,8 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
       } else {
         var Svg = icon;
 
-        // If it's an empty icon, or if there is no aria-label, aria-labelledby, or title it gets aria-hidden true
-        var isAriaHidden = icon === empty || !(this.props['aria-label'] || this.props['aria-labelledby'] || this.props.title);
+        // If there is no aria-label, aria-labelledby, or title it gets aria-hidden true
+        var isAriaHidden = !(this.props['aria-label'] || this.props['aria-labelledby'] || this.props.title);
 
         // If no aria-label or aria-labelledby is provided but there's a title, a titleId is generated
         //  The svg aria-labelledby attribute gets this titleId
@@ -244,7 +244,7 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
           "data-is-loaded": isLoaded || undefined,
           "data-is-loading": isLoading || undefined
         }, rest, {
-          "aria-hidden": isAriaHidden || undefined
+          "aria-hidden": isAriaHidden || rest['aria-hidden']
         }));
       }
     }

package/es/components/modal/confirm_modal.js

@@ -74,7 +74,8 @@ export var EuiConfirmModal = function EuiConfirmModal(_ref) {
   return ___EmotionJSX(EuiModal, _extends({
     className: classes,
     css: cssStyles,
-    onClose: onCancel
+    onClose: onCancel,
+    role: "alertdialog"
   }, rest), modalTitle, message && ___EmotionJSX(EuiModalBody, null, ___EmotionJSX(EuiText, {
     "data-test-subj": "confirmModalBodyText"
   }, message)), ___EmotionJSX(EuiModalFooter, null, ___EmotionJSX(EuiButtonEmpty, {

package/es/components/modal/modal.js

@@ -1,5 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "style"];
+var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "role", "style"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -33,6 +33,8 @@ export var EuiModal = function EuiModal(_ref) {
     onClose = _ref.onClose,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? true : _ref$maxWidth,
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? 'dialog' : _ref$role,
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
   var onKeyDown = function onKeyDown(event) {
@@ -62,7 +64,9 @@ export var EuiModal = function EuiModal(_ref) {
     className: classes,
     onKeyDown: onKeyDown,
     tabIndex: 0,
-    style: newStyle
+    style: newStyle,
+    role: role,
+    "aria-modal": true
   }, rest), ___EmotionJSX(EuiI18n, {
     token: "euiModal.closeModal",
     default: "Closes this modal window"
@@ -96,5 +100,10 @@ EuiModal.propTypes = {
      * Specifies what element should initially have focus.
      * Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node.
      */
-  initialFocus: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.func.isRequired, PropTypes.string.isRequired])
+  initialFocus: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.func.isRequired, PropTypes.string.isRequired]),
+  /**
+     * Identifies a modal dialog to screen readers. Modal dialogs that confirm destructive actions
+     * or need a user's attention should use "alertdialog".
+     */
+  role: PropTypes.oneOf(["dialog", "alertdialog"])
 };

package/es/components/observer/resize_observer/resize_observer.js

@@ -44,14 +44,13 @@ export var EuiResizeObserver = /*#__PURE__*/function (_EuiObserver) {
       height: 0,
       width: 0
     });
-    _defineProperty(_assertThisInitialized(_this), "onResize", function () {
-      // `entry.contentRect` provides incomplete `height` and `width` data.
-      // Use `getBoundingClientRect` to account for padding and border.
-      // https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly
-      if (!_this.childNode) return;
-      var _this$childNode$getBo = _this.childNode.getBoundingClientRect(),
-        height = _this$childNode$getBo.height,
-        width = _this$childNode$getBo.width;
+    _defineProperty(_assertThisInitialized(_this), "onResize", function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+        entry = _ref2[0];
+      var _entry$borderBoxSize$ = entry.borderBoxSize[0],
+        width = _entry$borderBoxSize$.inlineSize,
+        height = _entry$borderBoxSize$.blockSize;
+
       // Check for actual resize event
       if (_this.state.height === height && _this.state.width === width) {
         return;
@@ -105,23 +104,15 @@ export var useResizeObserver = function useResizeObserver(container, dimension)
   }, [dimension]);
   useEffect(function () {
     if (container != null) {
-      // ResizeObserver's first call to the observation callback is scheduled in the future
-      // so find the container's initial dimensions now
-      var boundingRect = container.getBoundingClientRect();
-      setSize({
-        width: boundingRect.width,
-        height: boundingRect.height
-      });
-      var observer = makeResizeObserver(container, function () {
-        // `entry.contentRect` provides incomplete `height` and `width` data.
-        // Use `getBoundingClientRect` to account for padding and border.
-        // https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly
-        var _container$getBoundin = container.getBoundingClientRect(),
-          height = _container$getBoundin.height,
-          width = _container$getBoundin.width;
+      var observer = makeResizeObserver(container, function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 1),
+          entry = _ref4[0];
+        var _entry$borderBoxSize$2 = entry.borderBoxSize[0],
+          inlineSize = _entry$borderBoxSize$2.inlineSize,
+          blockSize = _entry$borderBoxSize$2.blockSize;
         setSize({
-          width: width,
-          height: height
+          width: inlineSize,
+          height: blockSize
         });
       });
       return function () {

package/es/components/panel/panel.js

@@ -17,7 +17,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { useEuiBackgroundColorCSS, useEuiPaddingCSS, BACKGROUND_COLORS, PADDING_SIZES } from '../../global_styling';
 import { keysOf } from '../common';
 import { euiPanelStyles } from './panel.styles';
@@ -53,11 +53,10 @@ export var EuiPanel = function EuiPanel(_ref) {
     panelRef = _ref.panelRef,
     element = _ref.element,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
   // Shadows are only allowed when there's a white background (plain)
   var canHaveShadow = !hasBorder && color === 'plain';
   var canHaveBorder = color === 'plain' || color === 'transparent';
-  var styles = euiPanelStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiPanelStyles);
   var cssStyles = [styles.euiPanel, grow && styles.grow, styles.radius[borderRadius], useEuiPaddingCSS()[paddingSize], useEuiBackgroundColorCSS()[color], canHaveShadow && hasShadow === true && styles.hasShadow, canHaveBorder && hasBorder === true && styles.hasBorder, rest.onClick && styles.isClickable];
   var classes = classNames('euiPanel', "euiPanel--".concat(color), _defineProperty({}, "euiPanel--".concat(paddingSizeToClassNameMap[paddingSize]), paddingSizeToClassNameMap[paddingSize]), className);
   if (rest.onClick && element !== 'div') {

package/es/components/resizable_container/resizable_button.js

@@ -21,7 +21,7 @@ import React, { useCallback, useMemo, useRef, forwardRef } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { EuiI18n } from '../i18n';
-import { useEuiTheme, useGeneratedHtmlId } from '../../services';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
 import { useEuiResizableContainerContext } from './context';
 import { euiResizableButtonStyles } from './resizable_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -39,8 +39,7 @@ export var EuiResizableButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiResizableButton', className);
   var resizeDirection = isHorizontal ? 'horizontal' : 'vertical';
-  var euiTheme = useEuiTheme();
-  var styles = euiResizableButtonStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiResizableButtonStyles);
   var cssStyles = [styles.euiResizableButton, styles[indicator], styles["".concat(indicator, "Direction")][resizeDirection], styles[resizeDirection], indicator === 'handle' && styles.alignIndicator[alignIndicator]];
   return ___EmotionJSX(EuiI18n, {
     tokens: ['euiResizableButton.horizontalResizerAriaLabel', 'euiResizableButton.verticalResizerAriaLabel'],

package/es/components/resizable_container/resizable_collapse_button.js

@@ -19,7 +19,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiButtonIcon } from '../button';
 import { euiScreenReaderOnlyStyles } from '../accessibility/screen_reader_only/screen_reader_only.styles';
 import { euiResizableCollapseButtonStyles } from './resizable_collapse_button.styles';
@@ -38,8 +38,7 @@ export var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref
   var isHorizontal = direction === 'horizontal';
   var showOnFocus = !isCollapsed && !isVisible;
   var screenReaderOnlyStyles = euiScreenReaderOnlyStyles(showOnFocus).euiScreenReaderOnly;
-  var euiTheme = useEuiTheme();
-  var styles = euiResizableCollapseButtonStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiResizableCollapseButtonStyles);
   var collapsedStyles = [styles.collapsed.collapsed, styles.collapsed[direction], styles.collapsed["".concat(direction, "Positions")][internalPosition]];
   var collapsibleStyles = [styles.collapsible.collapsible, styles.collapsible[direction][externalPosition], styles.collapsible[direction][internalPosition]];
   var cssStyles = [styles.euiResizableCollapseButton, showOnFocus && screenReaderOnlyStyles].concat(_toConsumableArray(isCollapsed ? collapsedStyles : collapsibleStyles));

package/es/components/resizable_container/resizable_container.js

@@ -31,7 +31,7 @@ import { EuiResizableContainerContextProvider } from './context';
 import { euiResizableButtonWithControls } from './resizable_button';
 import { euiResizablePanelWithControls, getModeType } from './resizable_panel';
 import { useContainerCallbacks, getPosition } from './helpers';
-import { euiResizableContainerStyles } from './resizable_container.styles';
+import { euiResizableContainerStyles as styles } from './resizable_container.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var initialState = {
   isDragging: false,
@@ -59,7 +59,6 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
   var containerRef = useRef(null);
   var isHorizontal = direction === 'horizontal';
   var classes = classNames('euiResizableContainer', className);
-  var styles = euiResizableContainerStyles();
   var cssStyles = [styles.euiResizableContainer, styles[direction]];
   var _useContainerCallback = useContainerCallbacks({
       initialState: _objectSpread(_objectSpread({}, initialState), {}, {

package/es/components/resizable_container/resizable_container.styles.js

@@ -9,18 +9,15 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "omnk2l-vertical",
-  styles: "flex-direction:column;label:vertical;"
-} : {
-  name: "omnk2l-vertical",
-  styles: "flex-direction:column;label:vertical;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var euiResizableContainerStyles = function euiResizableContainerStyles() {
-  return {
-    euiResizableContainer: /*#__PURE__*/css("display:flex;", logicalCSS('width', '100%'), ";;label:euiResizableContainer;"),
-    horizontal: /*#__PURE__*/css(";label:horizontal;"),
-    vertical: _ref
-  };
+export var euiResizableContainerStyles = {
+  euiResizableContainer: /*#__PURE__*/css("display:flex;", logicalCSS('width', '100%'), ";;label:euiResizableContainer;"),
+  horizontal: /*#__PURE__*/css(";label:horizontal;"),
+  vertical: process.env.NODE_ENV === "production" ? {
+    name: "omnk2l-vertical",
+    styles: "flex-direction:column;label:vertical;"
+  } : {
+    name: "omnk2l-vertical",
+    styles: "flex-direction:column;label:vertical;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
 };

package/es/components/resizable_container/resizable_panel.js

@@ -19,13 +19,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 
 import React, { useEffect, useMemo, useRef } from 'react';
 import classNames from 'classnames';
-import { useGeneratedHtmlId, useEuiTheme } from '../../services';
-import { logicalSizeStyle, euiPaddingSize } from '../../global_styling';
+import { useGeneratedHtmlId, useEuiMemoizedStyles } from '../../services';
+import { logicalSizeStyle, useEuiPaddingSize, useEuiPaddingCSS } from '../../global_styling';
 import { useEuiResizableContainerContext } from './context';
 import { EuiPanel } from '../panel';
 import { useEuiI18n } from '../i18n';
 import { EuiResizableCollapseButton } from './resizable_collapse_button';
-import { euiResizablePanelStyles, euiResizablePanelContentStyles } from './resizable_panel.styles';
+import { euiResizablePanelStyles as styles, euiResizablePanelContentStyles } from './resizable_panel.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var defaultToggleOptions = {
   className: null,
@@ -137,15 +137,13 @@ export var EuiResizablePanel = function EuiResizablePanel(_ref) {
     return direction;
   }, [isCollapsed, isCollapsible, position, panels, panelId]);
   var axis = isHorizontal ? 'horizontal' : 'vertical';
-  var euiTheme = useEuiTheme();
-  var styles = euiResizablePanelStyles(euiTheme);
-  var cssStyles = [styles.euiResizablePanel, isCollapsed && styles.collapsed, styles.paddingSizes[wrapperPadding], wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
-  var contentStyles = euiResizablePanelContentStyles(euiTheme);
+  var cssStyles = [styles.euiResizablePanel, isCollapsed && styles.collapsed, useEuiPaddingCSS()[wrapperPadding], wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
+  var contentStyles = useEuiMemoizedStyles(euiResizablePanelContentStyles);
   var contentCssStyles = [contentStyles.euiResizablePanel__content, scrollable && contentStyles.scrollable, isCollapsed && contentStyles.collapsedChildren, isCollapsed && !isCollapsible && contentStyles[axis].collapsed, isCollapsible && contentStyles[axis].hasCollapsibleButton];
   var classes = classNames('euiResizablePanel', wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className);
   var panelClasses = classNames('euiResizablePanel__content', className);
   var inlineStyles = _objectSpread(_objectSpread({}, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style), isHorizontal ? logicalSizeStyle("".concat(size || innerSize, "%"), 'auto') : logicalSizeStyle('100%', "".concat(size || innerSize, "%")));
-  var padding = euiPaddingSize(euiTheme, paddingSize) || '0px';
+  var padding = useEuiPaddingSize(paddingSize) || '0px';
   useEffect(function () {
     if (!registration) return;
     var initSize = size !== null && size !== void 0 ? size : initialSize || 0;