@elastic/eui 64.0.0 → 64.0.3

package/test-env/components/notification/notification_event.js

@@ -270,7 +270,16 @@ EuiNotificationEvent.propTypes = {
     /**
        * Object of props passed to the <span/> wrapping the button's content
        */
-    contentProps: _propTypes.default.any,
+
+    /**
+       * Object of props passed to the <span/> wrapping the button's content
+       */
+    contentProps: _propTypes.default.shape({
+      className: _propTypes.default.string,
+      "aria-label": _propTypes.default.string,
+      "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any
+    }),
 
     /**
        * Any `type` accepted by EuiIcon

package/test-env/components/page/page_content/page_content.js

@@ -30,8 +30,7 @@ var horizontalPositionToClassNameMap = {
 };
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 var EuiPageContent_Deprecated = function EuiPageContent_Deprecated(_ref) {
   var verticalPosition = _ref.verticalPosition,

package/test-env/components/page/page_content/page_content_body.js

@@ -36,8 +36,7 @@ var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
 exports.PADDING_SIZES = PADDING_SIZES;
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 var EuiPageContentBody_Deprecated = function EuiPageContentBody_Deprecated(_ref) {
   var children = _ref.children,

package/test-env/components/page/page_content/page_content_header.js

@@ -22,8 +22,7 @@ var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "responsive"];
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 var EuiPageContentHeader_Deprecated = function EuiPageContentHeader_Deprecated(_ref) {
   var children = _ref.children,

package/test-env/components/page/page_content/page_content_header_section.js

@@ -22,8 +22,7 @@ var _react2 = require("@emotion/react");
 var _excluded = ["children", "className"];
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 var EuiPageContentHeaderSection_Deprecated = function EuiPageContentHeaderSection_Deprecated(_ref) {
   var children = _ref.children,

package/test-env/components/page/page_section/page_section.js

@@ -25,7 +25,7 @@ var _global_styling = require("../../../global_styling");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps"];
+var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps", "component"];
 
 var EuiPageSection = function EuiPageSection(_ref) {
   var children = _ref.children,
@@ -41,6 +41,8 @@ var EuiPageSection = function EuiPageSection(_ref) {
       _ref$grow = _ref.grow,
       grow = _ref$grow === void 0 ? false : _ref$grow,
       contentProps = _ref.contentProps,
+      _ref$component = _ref.component,
+      Component = _ref$component === void 0 ? 'section' : _ref$component,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Set max-width as a style prop
   var widthStyles = (0, _restrict_width.setStyleForRestrictedPageWidth)(restrictWidth, contentProps === null || contentProps === void 0 ? void 0 : contentProps.style);
@@ -52,7 +54,7 @@ var EuiPageSection = function EuiPageSection(_ref) {
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = (0, _page_section.euiPageSectionContentStyles)();
   var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
+  return (0, _react2.jsx)(Component, (0, _extends2.default)({
     css: cssStyles
   }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({
     css: cssContentStyles
@@ -107,5 +109,15 @@ EuiPageSection.propTypes = {
   /**
        * Passed down to the div wrapper of the section contents
        */
-  contentProps: _propTypes.default.any
+  contentProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.elementType.isRequired])
 };

package/test-env/components/page/page_side_bar/page_side_bar.js

@@ -32,8 +32,7 @@ var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
 exports.PADDING_SIZES = PADDING_SIZES;
 
 /**
- * **DEPRECATED**
- * Use the new EuiPageSidebar instead
+ * @deprecated Use the new EuiPageSidebar in page/page_sidebar instead
  */
 var EuiPageSideBar_Deprecated = function EuiPageSideBar_Deprecated(_ref) {
   var children = _ref.children,

package/test-env/components/page/page_sidebar/page_sidebar.js

@@ -65,13 +65,17 @@ var EuiPageSidebar = function EuiPageSidebar(_ref) {
       setInlineStyles = _useState2[1];
 
   (0, _react.useEffect)(function () {
+    var updatedStyles = _objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth));
+
     if (sticky) {
       var _document$body$datase;
 
       var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
       var offset = (0, _typeof2.default)(sticky) === 'object' ? sticky === null || sticky === void 0 ? void 0 : sticky.offset : themeContext.euiTheme.base * 3 * euiHeaderFixedCounter;
-      setInlineStyles(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth)), (0, _global_styling.logicalStyle)('top', offset)), (0, _global_styling.logicalStyle)('max-height', "calc(100vh - ".concat(offset, "px)"))));
+      updatedStyles = _objectSpread(_objectSpread(_objectSpread({}, updatedStyles), (0, _global_styling.logicalStyle)('top', offset)), (0, _global_styling.logicalStyle)('max-height', "calc(100vh - ".concat(offset, "px)")));
     }
+
+    setInlineStyles(updatedStyles);
   }, [style, sticky, themeContext.euiTheme.base, isResponding, minWidth]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: className,

package/test-env/components/page/page_template.js

@@ -51,7 +51,9 @@ exports.TEMPLATES = TEMPLATES;
 /**
  * This component has been deprecated in favor of the new
  * namespaced version. You can still import this component
- * for a period of time by importing `as EuiPageTemplate`.
+ * until August 2023 by importing `as EuiPageTemplate`.
+ *
+ * @deprecated use EuiPageTemplate from page_template/page_template instead
  */
 var EuiPageTemplate_Deprecated = function EuiPageTemplate_Deprecated(_ref) {
   var _pageBodyProps2;

package/test-env/components/page_template/empty_prompt/page_empty_prompt.js

@@ -110,6 +110,16 @@ _EuiPageEmptyPrompt.propTypes = {
   /**
        * Passed down to the div wrapper of the section contents
        */
-  contentProps: _propTypes.default.any,
+  contentProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.elementType.isRequired]),
   panelled: _propTypes.default.bool
 };

package/test-env/components/page_template/page_template.js

@@ -309,7 +309,17 @@ _EuiPageSection.propTypes = {
   /**
        * Passed down to the div wrapper of the section contents
        */
-  contentProps: _propTypes.default.any
+  contentProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.elementType.isRequired])
 };
 
 var _EuiPageHeader = function _EuiPageHeader(props) {
@@ -358,7 +368,13 @@ _EuiPageEmptyPrompt.propTypes = {
   paddingSize: _propTypes.default.any,
   alignment: _propTypes.default.any,
   grow: _propTypes.default.bool,
-  contentProps: _propTypes.default.any,
+  contentProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
+  component: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.elementType.isRequired]),
   panelled: _propTypes.default.bool
 };
 

package/test-env/components/progress/progress.js

@@ -160,5 +160,10 @@ EuiProgress.propTypes = {
   /**
        * Object of props passed to the <span/> wrapping the determinate progress's label
        */
-  labelProps: _propTypes.default.any
+  labelProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  })
 };

package/test-env/components/provider/cache/cache_provider.js

@@ -9,8 +9,6 @@ exports.EuiCacheProvider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _cache = _interopRequireDefault(require("@emotion/cache"));
-
 var _react2 = require("@emotion/react");
 
 /*
@@ -20,18 +18,12 @@ var _react2 = require("@emotion/react");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var defaultCache = (0, _cache.default)({
-  key: 'css'
-});
-defaultCache.compat = true;
-
 var EuiCacheProvider = function EuiCacheProvider(_ref) {
-  var _ref$cache = _ref.cache,
-      cache = _ref$cache === void 0 ? defaultCache : _ref$cache,
+  var cache = _ref.cache,
       children = _ref.children;
-  return (0, _react2.jsx)(_react2.CacheProvider, {
+  return children && cache ? (0, _react2.jsx)(_react2.CacheProvider, {
     value: cache
-  }, children);
+  }, children) : (0, _react2.jsx)(_react.default.Fragment, null, children);
 };
 
 exports.EuiCacheProvider = EuiCacheProvider;

package/test-env/components/provider/provider.js

@@ -9,6 +9,8 @@ exports.EuiProvider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _cache = _interopRequireDefault(require("@emotion/cache"));
+
 var _global_styles = require("../../global_styling/reset/global_styles");
 
 var _utility = require("../../global_styling/utility/utility");
@@ -17,7 +19,7 @@ var _services = require("../../services");
 
 var _themes = require("../../themes");
 
-var _cache = require("./cache");
+var _cache2 = require("./cache");
 
 var _react2 = require("@emotion/react");
 
@@ -32,8 +34,16 @@ var isEmotionCacheObject = function isEmotionCacheObject(obj) {
   return obj.hasOwnProperty('key');
 };
 
+var fallbackCache = (0, _cache.default)({
+  key: 'css'
+});
+fallbackCache.compat = true;
+
 var EuiProvider = function EuiProvider(_ref) {
-  var cache = _ref.cache,
+  var _defaultCache;
+
+  var _ref$cache = _ref.cache,
+      cache = _ref$cache === void 0 ? fallbackCache : _ref$cache,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? _themes.EuiThemeAmsterdam : _ref$theme,
       _ref$globalStyles = _ref.globalStyles,
@@ -49,24 +59,39 @@ var EuiProvider = function EuiProvider(_ref) {
 
   if (cache) {
     if (isEmotionCacheObject(cache)) {
+      cache.compat = true;
       defaultCache = cache;
     } else {
+      if (cache.default) {
+        cache.default.compat = true;
+      }
+
       defaultCache = cache.default;
+
+      if (cache.global) {
+        cache.global.compat = true;
+      }
+
       globalCache = cache.global;
+
+      if (cache.utility) {
+        cache.utility.compat = true;
+      }
+
       utilityCache = cache.utility;
     }
   }
 
-  return (0, _react2.jsx)(_cache.EuiCacheProvider, {
-    cache: defaultCache
+  return (0, _react2.jsx)(_cache2.EuiCacheProvider, {
+    cache: (_defaultCache = defaultCache) !== null && _defaultCache !== void 0 ? _defaultCache : fallbackCache
   }, (0, _react2.jsx)(_services.EuiThemeProvider, {
     theme: theme !== null && theme !== void 0 ? theme : undefined,
     colorMode: colorMode,
     modify: modify
-  }, theme && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_cache.EuiCacheProvider, {
+  }, theme && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_cache2.EuiCacheProvider, {
     cache: globalCache,
     children: Globals && (0, _react2.jsx)(Globals, null)
-  }), (0, _react2.jsx)(_cache.EuiCacheProvider, {
+  }), (0, _react2.jsx)(_cache2.EuiCacheProvider, {
     cache: utilityCache,
     children: Utilities && (0, _react2.jsx)(Utilities, null)
   })), (0, _react2.jsx)(_services.CurrentEuiBreakpointProvider, null, children)));

package/test-env/components/resizable_container/resizable_panel.js

@@ -355,7 +355,12 @@ EuiResizablePanel.propTypes = {
   /**
      * Props to add to the wrapping `.euiResizablePanel` div
      */
-  wrapperProps: _propTypes.default.any,
+  wrapperProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
 
   /**
      * Padding to add directly to the wrapping `.euiResizablePanel` div

package/test-env/components/side_nav/side_nav.js

@@ -255,6 +255,11 @@ EuiSideNav.propTypes = {
        * Adds a couple extra #EuiSideNavHeading props and extends the props of EuiTitle that wraps the `heading`
        */
   headingProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
+
     /**
        * The actual HTML heading element to wrap the `heading`.
        * Default is `h2`

package/test-env/components/text/text.styles.js

@@ -74,7 +74,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), ";clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiTheme), ";}img{display:block;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", (0, _global_styling.logicalTextAlignCSS)('center'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " ", (0, _global_styling.logicalCSS)('width', '50%'), " ", (0, _global_styling.logicalCSS)('left', '25%'), " ", (0, _global_styling.logicalCSS)('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", (0, _global_styling.logicalCSS)('top', '0'), ";}&:after{", (0, _global_styling.logicalCSS)('bottom', '0'), ";}}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:euiText;"),
+    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), ";clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}img{display:block;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", (0, _global_styling.logicalTextAlignCSS)('center'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " ", (0, _global_styling.logicalCSS)('width', '50%'), " ", (0, _global_styling.logicalCSS)('left', '25%'), " ", (0, _global_styling.logicalCSS)('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", (0, _global_styling.logicalCSS)('top', '0'), ";}&:after{", (0, _global_styling.logicalCSS)('bottom', '0'), ";}}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:euiText;"),
     constrainedWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),
     // Sizes
     m: /*#__PURE__*/(0, _react.css)(euiScaleText(euiThemeContext, {

package/test-env/components/toast/global_toast_list.styles.js

@@ -24,7 +24,7 @@ var euiGlobalToastListStyles = function euiGlobalToastListStyles(euiThemeContext
      * 2. Allow some padding for shadow
      */
     // Base
-    euiGlobalToastList: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), ";", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth + euiTheme.base * 5, "px")), ";", (0, _global_styling.logicalCSS)('max-height', '100vh'), ";overflow-y:auto;", (0, _global_styling.logicalCSS)('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
+    euiGlobalToastList: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), ";", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth + euiTheme.base * 5, "px")), ";", (0, _global_styling.logicalCSS)('max-height', '100vh'), ";", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
     // Variants
     right: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('right', 0), ";", (0, _global_styling.logicalCSS)('padding-left', "".concat(euiTheme.base * 4, "px")), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";}};label:right;"),
     left: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('padding-right', "".concat(euiTheme.base * 4, "px")), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";}};label:left;")

package/test-env/global_styling/functions/logicals.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.logicals = exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.logicalText = exports.logicalStyle = exports.logicalSizeStyle = exports.logicalSizeCSS = exports.logicalSide = exports.logicalCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.LOGICAL_SIDES = exports.LOGICAL_PROPERTIES = void 0;
+exports.logicals = exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.logicalText = exports.logicalStyle = exports.logicalSizeStyle = exports.logicalSizeCSS = exports.logicalSide = exports.logicalCSSWithFallback = exports.logicalCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.LOGICAL_SIDES = exports.LOGICAL_PROPERTIES = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -66,8 +66,8 @@ var logicalSize = {
   'min-width': 'min-inline-size'
 };
 var logicalOverflow = {
-  'overflow-x': 'overflow-block',
-  'overflow-y': 'overflow-inline'
+  'overflow-x': 'overflow-inline',
+  'overflow-y': 'overflow-block'
 };
 var logicalBorders = {
   'border-horizontal': 'border-inline',
@@ -115,6 +115,23 @@ exports.LOGICAL_PROPERTIES = LOGICAL_PROPERTIES;
 var logicalCSS = function logicalCSS(property, value) {
   return "".concat(logicals[property], ": ").concat(value, ";");
 };
+/**
+ * Some logical properties are not yet fully supported by all browsers.
+ * For those cases, we should use the old property as a fallback for
+ * browsers missing support, while allowing supporting browsers to use
+ * the logical properties.
+ *
+ * Examples:
+ * https://caniuse.com/?search=overflow-block
+ * https://caniuse.com/mdn-css_properties_float_flow_relative_values
+ */
+
+
+exports.logicalCSS = logicalCSS;
+
+var logicalCSSWithFallback = function logicalCSSWithFallback(property, value) {
+  return "\n  ".concat(property, ": ").concat(value, ";\n  ").concat(logicalCSS(property, value), "\n");
+};
 /**
  *
  * @param property A string that is a valid CSS logical property
@@ -123,7 +140,7 @@ var logicalCSS = function logicalCSS(property, value) {
  */
 
 
-exports.logicalCSS = logicalCSS;
+exports.logicalCSSWithFallback = logicalCSSWithFallback;
 
 var logicalStyle = function logicalStyle(property, value) {
   // Strip hyphens and camelCase the CSS logical property so React doesn't throw errors

package/test-env/global_styling/mixins/_helpers.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowScroll = void 0;
+exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowScroll = exports.euiFullHeight = void 0;
 
 var _theme = require("../../services/theme");
 
 var _color = require("../../services/color");
 
+var _functions = require("../functions");
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -38,7 +40,7 @@ var euiScrollBarStyles = function euiScrollBarStyles(_ref) {
   // so it's being added to this mixin for allowing support wherever custom scrollbars are
 
   var firefoxSupport = "scrollbar-color: ".concat(thumbColor, " ").concat(trackColor, ";");
-  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      width: ").concat(scrollBarSize, ";\n      height: ").concat(scrollBarSize, ";\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
+  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      ").concat((0, _functions.logicalCSS)('width', scrollBarSize), "\n      ").concat((0, _functions.logicalCSS)('height', scrollBarSize), "\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
 };
 
 exports.euiScrollBarStyles = euiScrollBarStyles;
@@ -92,12 +94,11 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
  */
 
 
-// TODO: How do we use Emotion to output the CSS class utilities instead?
 var euiYScroll = function euiYScroll(euiTheme) {
   var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       height = _ref5.height;
 
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  height: ").concat(height || '100%', ";\n  overflow-y: auto;\n  overflow-x: hidden;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat((0, _functions.logicalCSS)('height', height || '100%'), "\n  ").concat((0, _functions.logicalCSSWithFallback)('overflow-y', 'auto'), "\n  ").concat((0, _functions.logicalCSSWithFallback)('overflow-x', 'hidden'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 
 exports.euiYScroll = euiYScroll;
@@ -140,7 +141,7 @@ var useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {
 exports.useEuiYScrollWithShadows = useEuiYScrollWithShadows;
 
 var euiXScroll = function euiXScroll(euiTheme) {
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  overflow-x: auto;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat((0, _functions.logicalCSSWithFallback)('overflow-x', 'auto'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 
 exports.euiXScroll = euiXScroll;
@@ -196,5 +197,15 @@ var useEuiOverflowScroll = function useEuiOverflowScroll(direction) {
     mask: mask
   });
 };
+/**
+ * For quickly applying a full-height element whether using flex or not
+ */
+
+
+exports.useEuiOverflowScroll = useEuiOverflowScroll;
+
+var euiFullHeight = function euiFullHeight() {
+  return "\n  ".concat((0, _functions.logicalCSS)('height', '100%'), "\n  flex: 1 1 auto;\n  overflow: hidden;\n");
+};
 
-exports.useEuiOverflowScroll = useEuiOverflowScroll;
+exports.euiFullHeight = euiFullHeight;

package/test-env/global_styling/mixins/_states.js

@@ -23,7 +23,8 @@ var _services = require("../../services");
  * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
  * @param color Accepts any CSS color, **Note: only works in -webkit-**
  */
-var euiFocusRing = function euiFocusRing(euiTheme) {
+var euiFocusRing = function euiFocusRing(_ref) {
+  var euiTheme = _ref.euiTheme;
   var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
   var options = arguments.length > 2 ? arguments[2] : undefined;
   // Width is enforced as a constant at the global theme layer
@@ -51,9 +52,7 @@ var euiFocusRing = function euiFocusRing(euiTheme) {
 exports.euiFocusRing = euiFocusRing;
 
 var useEuiFocusRing = function useEuiFocusRing(offset, color) {
-  var _useEuiTheme = (0, _services.useEuiTheme)(),
-      euiTheme = _useEuiTheme.euiTheme;
-
+  var euiTheme = (0, _services.useEuiTheme)();
   return euiFocusRing(euiTheme, offset, {
     color: color
   });

package/test-env/global_styling/mixins/_typography.js

@@ -9,6 +9,8 @@ var _typography = require("../functions/typography");
 
 var _hooks = require("../../services/theme/hooks");
 
+var _functions = require("../functions");
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -54,7 +56,8 @@ exports.euiTextBreakWord = euiTextBreakWord;
 
 var euiTextTruncate = function euiTextTruncate() {
   var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
-  return "\n  max-width: ".concat(maxWidth, "; // Ensure that the node has a maximum width after which truncation can occur\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
+  return "\n  ".concat((0, _functions.logicalCSS)('max-width', maxWidth) // Ensure that the node has a maximum width after which truncation can occur
+  , "\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
 };
 /**
  * Fixed-width numbers for tabular data

package/test-env/global_styling/reset/global_styles.js

@@ -55,7 +55,7 @@ var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    * Final styles
    */
 
-  var styles = /*#__PURE__*/(0, _react2.css)(_reset.resetStyles, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", (0, _mixins.euiFocusRing)(euiTheme), ";}::selection{background:", (0, _color.transparentize)(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
+  var styles = /*#__PURE__*/(0, _react2.css)(_reset.resetStyles, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", (0, _mixins.euiFocusRing)(euiThemeContext), ";}::selection{background:", (0, _color.transparentize)(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
   return (0, _react2.jsx)(_react2.Global, {
     styles: styles
   });

package/test-env/global_styling/utility/utility.js

@@ -5,14 +5,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiUtilityClasses = void 0;
+exports.globalStyles = exports.EuiUtilityClasses = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@emotion/react");
 
+var _hooks = require("../../services/theme/hooks");
+
 var _screen_reader_only = require("../../components/accessibility/screen_reader_only/screen_reader_only.styles");
 
+var _mixins = require("../mixins");
+
+var _functions = require("../functions");
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,11 +26,18 @@ var _screen_reader_only = require("../../components/accessibility/screen_reader_
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var globalStyles = /*#__PURE__*/(0, _react2.css)(".euiScreenReaderOnly{", (0, _screen_reader_only.euiScreenReaderOnly)(), ";};label:globalStyles;");
+var globalStyles = function globalStyles(euiThemeContext) {
+  return /*#__PURE__*/(0, _react2.css)(".euiScreenReaderOnly{", (0, _screen_reader_only.euiScreenReaderOnly)(), ";}.eui-alignBaseline{vertical-align:baseline!important;}.eui-alignBottom{vertical-align:bottom!important;}.eui-alignMiddle{vertical-align:middle!important;}.eui-alignTop{vertical-align:top!important;}.eui-displayBlock{display:block!important;}.eui-displayInline{display:inline!important;}.eui-displayInlineBlock{display:inline-block!important;}.eui-fullWidth{display:block!important;", (0, _functions.logicalCSS)('width', '100% !important'), ";}.eui-fullHeight{", (0, _mixins.euiFullHeight)(), ";}.eui-textCenter{text-align:center!important;}.eui-textLeft{text-align:start!important;}.eui-textRight{text-align:end!important;}.eui-textNoWrap{white-space:nowrap!important;}.eui-textInheritColor{color:inherit!important;}.eui-textBreakWord{", (0, _mixins.euiTextBreakWord)(), ";}.eui-textBreakAll{overflow-wrap:break-word!important;word-break:break-all!important;}.eui-textBreakNormal{overflow-wrap:normal!important;word-wrap:normal!important;word-break:normal!important;}.eui-textTruncate{", (0, _mixins.euiTextTruncate)(), ";}.eui-textNumber{", (0, _mixins.euiNumberFormat)(euiThemeContext), ";}.eui-scrollBar{", (0, _mixins.euiScrollBarStyles)(euiThemeContext), ";}.eui-yScroll{", (0, _mixins.euiYScroll)(euiThemeContext), ";}.eui-xScroll{", (0, _mixins.euiXScroll)(euiThemeContext), ";}.eui-yScrollWithShadows{", (0, _mixins.euiYScrollWithShadows)(euiThemeContext), ";}.eui-xScrollWithShadows{", (0, _mixins.euiXScrollWithShadows)(euiThemeContext), ";}[class*='eui-showFor']{display:none!important;}", Object.keys(euiThemeContext.euiTheme.breakpoint).map(function (size) {
+    return "\n      .eui-hideFor--".concat(size, " {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: none !important;\n        }\n      }\n      .eui-showFor--").concat(size, " {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: inline !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--block {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--inlineBlock {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: inline-block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--flex {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: flex !important;\n        }\n      }");
+  }), ";;label:globalStyles;");
+};
+
+exports.globalStyles = globalStyles;
 
 var EuiUtilityClasses = function EuiUtilityClasses() {
+  var euiTheme = (0, _hooks.useEuiTheme)();
   return (0, _react2.jsx)(_react2.Global, {
-    styles: globalStyles
+    styles: globalStyles(euiTheme)
   });
 };