@elastic/eui 59.0.0 → 59.1.0

package/optimize/lib/components/facet/facet_button.styles.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFacetButtonTextStyles = exports.euiFacetButtonStyles = exports.euiFacetButtonQuantityStyles = exports.euiFacetButtonLoadingSpinnerStyles = exports.euiFacetButtonIconStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _link = require("../link/link.styles");
+
+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)."; }
+
+var euiFacetButtonStyles = function euiFacetButtonStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    // Base
+    euiFacetButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";&:hover,&:focus{&:not(:disabled) [class*='euiFacetButton__text']{text-decoration:underline;}}&:focus:not(:disabled) [class*='euiFacetButton__text']{", (0, _link.euiLinkFocusCSS)(euiTheme), ";}&:disabled{color:", euiTheme.colors.disabledText, ";pointer-events:none;&:hover,&:focus{text-decoration:none;}};label:euiFacetButton;")
+  };
+};
+
+exports.euiFacetButtonStyles = euiFacetButtonStyles;
+
+var euiFacetButtonTextStyles = function euiFacetButtonTextStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme;
+  return {
+    euiFacetButton__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), " flex-grow:1;;label:euiFacetButton__text;"),
+    isSelected: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";;label:isSelected;"),
+    unSelected: /*#__PURE__*/(0, _react.css)(";label:unSelected;")
+  };
+};
+
+exports.euiFacetButtonTextStyles = euiFacetButtonTextStyles;
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "mpq8zy-isDisabled",
+  styles: "opacity:0.5;label:isDisabled;"
+} : {
+  name: "mpq8zy-isDisabled",
+  styles: "opacity:0.5;label:isDisabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiFacetButtonIconStyles = function euiFacetButtonIconStyles() {
+  return {
+    euiFacetButton__icon: /*#__PURE__*/(0, _react.css)(";label:euiFacetButton__icon;"),
+    isDisabled: _ref2
+  };
+};
+
+exports.euiFacetButtonIconStyles = euiFacetButtonIconStyles;
+
+var euiFacetButtonLoadingSpinnerStyles = function euiFacetButtonLoadingSpinnerStyles() {
+  return {
+    euiFacetButton__loadingSpinner: /*#__PURE__*/(0, _react.css)(";label:euiFacetButton__loadingSpinner;")
+  };
+};
+
+exports.euiFacetButtonLoadingSpinnerStyles = euiFacetButtonLoadingSpinnerStyles;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "mpq8zy-isDisabled",
+  styles: "opacity:0.5;label:isDisabled;"
+} : {
+  name: "mpq8zy-isDisabled",
+  styles: "opacity:0.5;label:isDisabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiFacetButtonQuantityStyles = function euiFacetButtonQuantityStyles() {
+  return {
+    euiFacetButton__quantity: /*#__PURE__*/(0, _react.css)(";label:euiFacetButton__quantity;"),
+    isDisabled: _ref
+  };
+};
+
+exports.euiFacetButtonQuantityStyles = euiFacetButtonQuantityStyles;

package/optimize/lib/components/facet/facet_group.js

@@ -15,26 +15,16 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _common = require("../common");
+var _services = require("../../services");
 
-var _flex = require("../flex");
+var _facet_group = require("./facet_group.styles");
 
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "layout", "gutterSize"];
-var layoutToClassNameMap = {
-  vertical: 'euiFacetGroup--vertical',
-  horizontal: 'euiFacetGroup--horizontal'
-};
-var LAYOUTS = (0, _common.keysOf)(layoutToClassNameMap);
+var LAYOUTS = ['vertical', 'horizontal'];
 exports.LAYOUTS = LAYOUTS;
-var gutterSizeToClassNameMap = {
-  none: 'euiFacetGroup--gutterNone',
-  s: 'euiFacetGroup--gutterSmall',
-  m: 'euiFacetGroup--gutterMedium',
-  l: 'euiFacetGroup--gutterLarge'
-};
-var GUTTER_SIZES = (0, _common.keysOf)(gutterSizeToClassNameMap);
+var GUTTER_SIZES = ['none', 's', 'm', 'l'];
 exports.GUTTER_SIZES = GUTTER_SIZES;
 
 var EuiFacetGroup = function EuiFacetGroup(_ref) {
@@ -45,14 +35,13 @@ var EuiFacetGroup = function EuiFacetGroup(_ref) {
       _ref$gutterSize = _ref.gutterSize,
       gutterSize = _ref$gutterSize === void 0 ? 'm' : _ref$gutterSize,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiFacetGroup', layoutToClassNameMap[layout], gutterSizeToClassNameMap[gutterSize], className);
-  var direction = layout === 'vertical' ? 'column' : 'row';
-  var wrap = layout === 'vertical' ? false : true;
-  return (0, _react2.jsx)(_flex.EuiFlexGroup, (0, _extends2.default)({
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _facet_group.euiFacetGroupStyles)(theme, layout);
+  var cssStyles = [styles.euiFacetGroup, styles[gutterSize], styles[layout]];
+  var classes = (0, _classnames.default)('euiFacetGroup', className);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,
-    direction: direction,
-    wrap: wrap,
-    gutterSize: "none"
+    css: cssStyles
   }, rest), children);
 };
 

package/optimize/lib/components/facet/facet_group.styles.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFacetGroupStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _services = require("../../services");
+
+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)."; }
+
+var _facetGroupGutterSize = function _facetGroupGutterSize(_ref4) {
+  var gutterSize = _ref4.gutterSize,
+      layout = _ref4.layout;
+
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+      euiTheme = _useEuiTheme.euiTheme;
+
+  var isHorizontalLayout = layout === 'horizontal';
+  var gutterHorizontal = "calc(".concat(euiTheme.size.m, " + ").concat(gutterSize, ")");
+  var gutterVertical = gutterSize;
+  return isHorizontalLayout ? "gap: ".concat(gutterVertical, " ").concat(gutterHorizontal, ";") : "gap: ".concat(gutterVertical, " 0;");
+};
+
+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__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "envaaw-horizontal",
+  styles: "flex-direction:row;flex-wrap:wrap;label:horizontal;"
+} : {
+  name: "envaaw-horizontal",
+  styles: "flex-direction:row;flex-wrap:wrap;label:horizontal;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1g68sie-euiFacetGroup",
+  styles: "display:flex;flex-grow:1;label:euiFacetGroup;"
+} : {
+  name: "1g68sie-euiFacetGroup",
+  styles: "display:flex;flex-grow:1;label:euiFacetGroup;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiFacetGroupStyles = function euiFacetGroupStyles(_ref5, layout) {
+  var euiTheme = _ref5.euiTheme;
+  return {
+    // Base
+    euiFacetGroup: _ref3,
+    // Gutter sizes
+    none: /*#__PURE__*/(0, _react.css)(_facetGroupGutterSize({
+      gutterSize: '0',
+      layout: layout
+    }), ";label:none;"),
+    s: /*#__PURE__*/(0, _react.css)(_facetGroupGutterSize({
+      gutterSize: euiTheme.size.xs,
+      layout: layout
+    }), ";label:s;"),
+    m: /*#__PURE__*/(0, _react.css)(_facetGroupGutterSize({
+      gutterSize: euiTheme.size.s,
+      layout: layout
+    }), ";label:m;"),
+    l: /*#__PURE__*/(0, _react.css)(_facetGroupGutterSize({
+      gutterSize: euiTheme.size.m,
+      layout: layout
+    }), ";label:l;"),
+    // layouts
+    horizontal: _ref2,
+    vertical: _ref
+  };
+};
+
+exports.euiFacetGroupStyles = euiFacetGroupStyles;

package/optimize/lib/components/loading/loading_spinner.js

@@ -23,7 +23,7 @@ var _loading_spinner = require("./loading_spinner.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["size", "className", "aria-label"];
+var _excluded = ["size", "className", "aria-label", "color"];
 var SIZES = ['s', 'm', 'l', 'xl', 'xxl'];
 exports.SIZES = SIZES;
 
@@ -32,9 +32,10 @@ var EuiLoadingSpinner = function EuiLoadingSpinner(_ref) {
       size = _ref$size === void 0 ? 'm' : _ref$size,
       className = _ref.className,
       ariaLabel = _ref['aria-label'],
+      color = _ref.color,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _loading_spinner.euiLoadingSpinnerStyles)(euiTheme);
+  var styles = (0, _loading_spinner.euiLoadingSpinnerStyles)(euiTheme, color);
   var cssStyles = [styles.euiLoadingSpinner, styles[size]];
   var classes = (0, _classnames.default)('euiLoadingSpinner', className);
   var defaultLabel = (0, _loading_strings.useLoadingAriaLabel)();

package/optimize/lib/components/loading/loading_spinner.styles.js

@@ -25,14 +25,14 @@ var spinnerSizes = {
   xxl: 'xxl'
 };
 
-var spinnerColors = function spinnerColors(main, highlight) {
-  return "".concat(highlight, " ").concat(main, " ").concat(main, " ").concat(main);
+var spinnerColorsCSS = function spinnerColorsCSS(border, highlight) {
+  return "\n    border-color: ".concat(highlight, " ").concat(border, " ").concat(border, " ").concat(border, ";\n  ");
 };
 
-var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(_ref) {
+var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(_ref, color) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiLoadingSpinner: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";border-color:", spinnerColors(euiTheme.border.color, euiTheme.colors.primary), ";", _global_styling.euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
+    euiLoadingSpinner: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";", spinnerColorsCSS((color === null || color === void 0 ? void 0 : color.border) || euiTheme.colors.lightShade, (color === null || color === void 0 ? void 0 : color.highlight) || euiTheme.colors.primary), ";", _global_styling.euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
     // Sizes
     s: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.s], ";height:", euiTheme.size[spinnerSizes.s], ";border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:s;"),
     m: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.m], ";height:", euiTheme.size[spinnerSizes.m], ";border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:m;"),

package/optimize/lib/components/text/text.js

@@ -25,7 +25,7 @@ var _text_align = require("./text_align");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["size", "color", "grow", "textAlign", "children", "className", "style"];
+var _excluded = ["size", "color", "grow", "textAlign", "children", "className"];
 var TEXT_SIZES = ['xs', 's', 'm', 'relative'];
 exports.TEXT_SIZES = TEXT_SIZES;
 
@@ -38,7 +38,6 @@ var EuiText = function EuiText(_ref) {
       textAlign = _ref.textAlign,
       children = _ref.children,
       className = _ref.className,
-      style = _ref.style,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _text.euiTextStyles)(euiTheme);
@@ -52,7 +51,6 @@ var EuiText = function EuiText(_ref) {
   if (color) {
     text = (0, _react2.jsx)(_text_color.EuiTextColor, {
       color: color,
-      style: style,
       cloneElement: true
     }, text);
   }

package/optimize/lib/components/text/text_align.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _clone_element = require("../../services/theme/clone_element");
 
@@ -21,6 +23,10 @@ var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "textAlign", "cloneElement"];
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -42,7 +48,7 @@ var EuiTextAlign = function EuiTextAlign(_ref) {
     css: cssStyles
   }, rest);
 
-  if (cloneElement) {
+  if ( /*#__PURE__*/(0, _react.isValidElement)(children) && cloneElement) {
     return (0, _clone_element.cloneElementWithCss)(children, props);
   } else {
     return (0, _react2.jsx)("div", props, children);

package/optimize/lib/components/text/text_color.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _clone_element = require("../../services/theme/clone_element");
 
@@ -23,6 +25,10 @@ var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "color", "component", "cloneElement", "style"];
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -56,8 +62,12 @@ var EuiTextColor = function EuiTextColor(_ref) {
     style: euiTextStyle
   }, rest);
 
-  if (cloneElement) {
-    return (0, _clone_element.cloneElementWithCss)(children, props);
+  if ( /*#__PURE__*/(0, _react.isValidElement)(children) && cloneElement) {
+    var childrenStyle = _objectSpread(_objectSpread({}, children.props.style), euiTextStyle);
+
+    return (0, _clone_element.cloneElementWithCss)(children, _objectSpread(_objectSpread({}, props), {}, {
+      style: childrenStyle
+    }));
   } else {
     var Component = component;
     return (0, _react2.jsx)(Component, props, children);

package/optimize/lib/themes/amsterdam/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _shadow = require("./global_styling/mixins/shadow");
+
+Object.keys(_shadow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _shadow[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _shadow[key];
+    }
+  });
+});

package/optimize/lib/themes/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  EUI_THEMES: true,
+  isDefaultTheme: true,
+  AMSTERDAM_NAME_KEY: true,
+  EuiThemeAmsterdam: true
+};
 Object.defineProperty(exports, "AMSTERDAM_NAME_KEY", {
   enumerable: true,
   get: function get() {
@@ -30,4 +36,18 @@ Object.defineProperty(exports, "isDefaultTheme", {
 
 var _themes = require("./themes");
 
-var _theme = require("./amsterdam/theme");
+var _theme = require("./amsterdam/theme");
+
+var _amsterdam = require("./amsterdam");
+
+Object.keys(_amsterdam).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _amsterdam[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _amsterdam[key];
+    }
+  });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "59.0.0",
+  "version": "59.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/src/components/index.scss

@@ -21,7 +21,6 @@
 @import 'drag_and_drop/index';
 @import 'empty_prompt/index';
 @import 'error_boundary/index';
-@import 'facet/index';
 @import 'filter_group/index';
 @import 'flex/index';
 @import 'flyout/index';

package/src/components/selectable/selectable_message/_selectable_message.scss

@@ -6,6 +6,7 @@
   text-align: center;
   word-wrap: break-word; /* 1 */
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 }

package/src/themes/amsterdam/overrides/_index.scss

@@ -11,7 +11,6 @@
 @import 'date_picker';
 @import 'date_popover_button';
 @import 'description_list';
-@import 'facet';
 @import 'filter_group';
 @import 'form_control_layout';
 @import 'form_control_layout_delimited';

package/test-env/components/accessibility/skip_link/skip_link.js

@@ -9,6 +9,8 @@ exports.POSITIONS = exports.EuiSkipLink = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -27,12 +29,18 @@ var _skip_link = require("./skip_link.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["destinationId", "tabIndex", "position", "children", "className"];
+var _excluded = ["destinationId", "overrideLinkBehavior", "tabIndex", "position", "children", "className"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var POSITIONS = ['static', 'fixed', 'absolute'];
 exports.POSITIONS = POSITIONS;
 
 var EuiSkipLink = function EuiSkipLink(_ref) {
   var destinationId = _ref.destinationId,
+      overrideLinkBehavior = _ref.overrideLinkBehavior,
       tabIndex = _ref.tabIndex,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'static' : _ref$position,
@@ -52,6 +60,22 @@ var EuiSkipLink = function EuiSkipLink(_ref) {
     };
   }
 
+  if (overrideLinkBehavior) {
+    optionalProps = _objectSpread(_objectSpread({}, optionalProps), {}, {
+      onClick: function onClick(e) {
+        e.preventDefault();
+        var destinationEl = document.getElementById(destinationId);
+        if (!destinationEl) return;
+        destinationEl.scrollIntoView();
+        destinationEl.tabIndex = -1; // Ensure the destination content is focusable
+
+        destinationEl.focus({
+          preventScroll: true
+        }); // Scrolling is already handled above, and focus's autoscroll behaves oddly around fixed headers
+      }
+    });
+  }
+
   return (0, _react2.jsx)(_screen_reader_only.EuiScreenReaderOnly, {
     showOnFocus: true
   }, (0, _react2.jsx)(_button.EuiButton, (0, _extends2.default)({
@@ -90,6 +114,19 @@ EuiSkipLink.propTypes = {
      */
   destinationId: _propTypes.default.string.isRequired,
 
+  /**
+     * If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing),
+     * setting this flag to true will manually scroll to and focus the destination element
+     * without changing the browser URL's hash
+     */
+
+  /**
+     * If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing),
+     * setting this flag to true will manually scroll to and focus the destination element
+     * without changing the browser URL's hash
+     */
+  overrideLinkBehavior: _propTypes.default.bool,
+
   /**
      * When position is fixed, this is forced to `0`
      */
@@ -158,7 +195,8 @@ EuiSkipLink.propTypes = {
   iconSide: _propTypes.default.oneOf(["left", "right"]),
 
   /**
-     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
+     * It doesn't apply to the icon.
      */
   textProps: _propTypes.default.shape({
     className: _propTypes.default.string,

package/test-env/components/accessibility/skip_link/skip_link.styles.js

@@ -35,7 +35,7 @@ var euiSkipLinkStyles = function euiSkipLinkStyles(_ref3) {
     // Set positions on focus only as to not override screenReaderOnly position
     // When positioned absolutely, consumers still need to tell it WHERE (top,left,etc...)
     absolute: _ref,
-    fixed: /*#__PURE__*/(0, _react.css)("&:focus{position:fixed;inset-block-start:", euiTheme.size.xs, ";inset-inline-start:", euiTheme.size.xs, ";z-index:", Number(euiTheme.levels.header) + 1, ";};label:fixed;")
+    fixed: /*#__PURE__*/(0, _react.css)("position:fixed!important;&:focus{inset-block-start:", euiTheme.size.xs, ";inset-inline-start:", euiTheme.size.xs, ";z-index:", Number(euiTheme.levels.header) + 1, ";};label:fixed;")
   };
 };
 

package/test-env/components/button/{button_content.js → _button_content_deprecated.js}

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ICON_SIDES = exports.EuiButtonContent = void 0;
+exports.ICON_SIDES = exports.EuiButtonContentDeprecated = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -33,7 +33,7 @@ var iconSideToClassNameMap = {
 var ICON_SIDES = (0, _common.keysOf)(iconSideToClassNameMap);
 exports.ICON_SIDES = ICON_SIDES;
 
-var EuiButtonContent = function EuiButtonContent(_ref) {
+var EuiButtonContentDeprecated = function EuiButtonContentDeprecated(_ref) {
   var children = _ref.children,
       textProps = _ref.textProps,
       _ref$isLoading = _ref.isLoading,
@@ -68,8 +68,8 @@ var EuiButtonContent = function EuiButtonContent(_ref) {
   }), buttonIcon, (0, _react2.jsx)("span", textProps, children));
 };
 
-exports.EuiButtonContent = EuiButtonContent;
-EuiButtonContent.propTypes = {
+exports.EuiButtonContentDeprecated = EuiButtonContentDeprecated;
+EuiButtonContentDeprecated.propTypes = {
   /**
      * Any `type` accepted by EuiIcon
      */
@@ -82,7 +82,8 @@ EuiButtonContent.propTypes = {
   isLoading: _propTypes.default.bool,
 
   /**
-     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
+     * It doesn't apply to the icon.
      */
   textProps: _propTypes.default.shape({
     className: _propTypes.default.string,