@elastic/eui 86.0.0 → 87.1.0

package/optimize/lib/components/datagrid/data_grid.js

@@ -14,6 +14,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../services");
+var _table_pagination = require("../table/table_pagination");
 var _focus_trap = require("../focus_trap");
 var _i18n = require("../i18n");
 var _mutation_observer = require("../observer/mutation_observer");
@@ -90,7 +91,7 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     gridStyle = props.gridStyle,
     _props$toolbarVisibil = props.toolbarVisibility,
     toolbarVisibility = _props$toolbarVisibil === void 0 ? true : _props$toolbarVisibil,
-    pagination = props.pagination,
+    _pagination = props.pagination,
     sorting = props.sorting,
     inMemory = props.inMemory,
     onColumnResize = props.onColumnResize,
@@ -105,6 +106,13 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   /**
    * Merge consumer settings with defaults
    */
+  var paginationDefaults = (0, _table_pagination.useEuiTablePaginationDefaults)();
+  var pagination = (0, _react.useMemo)(function () {
+    return _pagination ? _objectSpread({
+      pageSize: paginationDefaults.itemsPerPage,
+      pageSizeOptions: paginationDefaults.itemsPerPageOptions
+    }, _pagination) : _pagination;
+  }, [_pagination, paginationDefaults]);
   var gridStyleWithDefaults = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({}, _controls.startingStyles), gridStyle);
   }, [gridStyle]);

package/optimize/lib/components/datagrid/utils/data_grid_pagination.js

@@ -26,13 +26,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var EuiDataGridPaginationRenderer = function EuiDataGridPaginationRenderer(_ref) {
   var pageIndex = _ref.pageIndex,
-    pageSize = _ref.pageSize,
-    pageSizeOptions = _ref.pageSizeOptions,
+    _pageSize = _ref.pageSize,
+    _pageSizeOptions = _ref.pageSizeOptions,
     _onChangePage = _ref.onChangePage,
     onChangeItemsPerPage = _ref.onChangeItemsPerPage,
     rowCount = _ref.rowCount,
     controls = _ref.controls,
     ariaLabel = _ref['aria-label'];
+  var defaults = (0, _table_pagination.useEuiTablePaginationDefaults)();
+  var pageSize = _pageSize !== null && _pageSize !== void 0 ? _pageSize : defaults.itemsPerPage;
+  var pageSizeOptions = _pageSizeOptions !== null && _pageSizeOptions !== void 0 ? _pageSizeOptions : defaults.itemsPerPageOptions;
   var detailedPaginationLabel = (0, _i18n.useEuiI18n)('euiDataGridPagination.detailedPaginationLabel', 'Pagination for preceding grid: {label}', {
     label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ''
   });
@@ -46,7 +49,7 @@ var EuiDataGridPaginationRenderer = function EuiDataGridPaginationRenderer(_ref)
     setFocusedCell([0, 0]);
   }, [setFocusedCell, _onChangePage]);
   var pageCount = pageSize ? Math.ceil(rowCount / pageSize) : 1;
-  var minSizeOption = pageSizeOptions && (0, _toConsumableArray2.default)(pageSizeOptions).sort(function (a, b) {
+  var minSizeOption = (0, _toConsumableArray2.default)(pageSizeOptions).sort(function (a, b) {
     return a - b;
   })[0];
   if (rowCount < (minSizeOption || pageSize)) {
@@ -58,8 +61,8 @@ var EuiDataGridPaginationRenderer = function EuiDataGridPaginationRenderer(_ref)
     return null;
   }
 
-  // hide select rows per page if pageSizeOptions is undefined or an empty array
-  var hidePerPageOptions = !pageSizeOptions || pageSizeOptions.length === 0;
+  // Hide select rows per page if pageSizeOptions is an empty array
+  var hidePerPageOptions = pageSizeOptions.length === 0;
   return (0, _react2.jsx)("div", {
     className: "euiDataGrid__pagination"
   }, (0, _react2.jsx)(_table_pagination.EuiTablePagination, {

package/optimize/lib/components/date_picker/date_picker_range.js

@@ -14,7 +14,7 @@ var _form = require("../form");
 var _services = require("../../services");
 var _date_picker_range = require("./date_picker_range.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
+var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "compressed", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -35,6 +35,7 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? true : _ref$shadow,
     _fullWidth = _ref.fullWidth,
+    _compressed = _ref.compressed,
     isCustom = _ref.isCustom,
     readOnly = _ref.readOnly,
     isLoading = _ref.isLoading,
@@ -45,8 +46,9 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     append = _ref.append,
     prepend = _ref.prepend,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // `fullWidth` should not affect inline datepickers (matches non-range behavior)
+  // `fullWidth` and `compressed` should not affect inline datepickers (matches non-range behavior)
   var fullWidth = _fullWidth && !inline;
+  var compressed = _compressed && !inline;
   var classes = (0, _classnames.default)('euiDatePickerRange', className);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _date_picker_range.euiDatePickerRangeStyles)(euiTheme);
@@ -118,6 +120,7 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     startControl: startControl,
     endControl: endControl,
     fullWidth: fullWidth,
+    compressed: compressed,
     readOnly: readOnly,
     isDisabled: disabled,
     isInvalid: isInvalid,

package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.a11y.js

@@ -69,7 +69,7 @@ var SuperDatePicker = function SuperDatePicker() {
 };
 beforeEach(function () {
   cy.mount((0, _react2.jsx)(SuperDatePicker, null));
-  cy.get('div.euiSuperDatePicker__flexWrapper').should('exist');
+  cy.get('div.euiSuperDatePicker').should('exist');
 });
 describe('EuiSuperDatePicker', function () {
   describe('Automated accessibility check', function () {

package/optimize/lib/components/filter_group/filter_group.a11y.js

@@ -239,10 +239,10 @@ describe('EuiFilterGroup multiselect example', function () {
       cy.realPress('Tab');
       cy.repeatRealPress('ArrowDown', 3);
       cy.realPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich - Checked option. To exclude this option, press Enter.');
+      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.');
       cy.realPress('ArrowDown');
       cy.repeatRealPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy - Excluded option. To uncheck this option, press Enter.');
+      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy. Excluded option. To uncheck this option, press Enter.');
       cy.checkAxe();
     });
     it('has zero violations when filtering by searchbox', function () {

package/optimize/lib/components/flyout/flyout.js

@@ -24,7 +24,7 @@ var _portal = require("../portal");
 var _accessibility = require("../accessibility");
 var _flyout = require("./flyout.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "focusTrapProps", "includeFixedHeadersInFocusTrap"];
+var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "focusTrapProps", "includeFixedHeadersInFocusTrap", "aria-describedby"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -83,6 +83,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _focusTrapProps = _ref$focusTrapProps === void 0 ? {} : _ref$focusTrapProps,
     _ref$includeFixedHead = _ref.includeFixedHeadersInFocusTrap,
     includeFixedHeadersInFocusTrap = _ref$includeFixedHead === void 0 ? true : _ref$includeFixedHead,
+    _ariaDescribedBy = _ref['aria-describedby'],
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var Element = as || defaultElement;
   var maskRef = (0, _react.useRef)(null);
@@ -216,6 +217,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
    */
   var hasOverlayMask = ownFocus && !isPushed;
   var descriptionId = (0, _services.useGeneratedHtmlId)();
+  var ariaDescribedBy = (0, _classnames.default)(descriptionId, _ariaDescribedBy);
   var screenReaderDescription = (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
     id: descriptionId
   }, hasOverlayMask ? (0, _react2.jsx)(_i18n.EuiI18n, {
@@ -260,15 +262,15 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     clickOutsideDisables: !ownFocus,
     onClickOutside: onClickOutside
   }, focusTrapProps), (0, _react2.jsx)(Element, (0, _extends2.default)({
-    css: cssStyles
-  }, rest, {
-    role: "dialog",
     className: classes,
-    tabIndex: 0,
-    "data-autofocus": true,
-    "aria-describedby": !isPushed ? descriptionId : undefined,
+    css: cssStyles,
     style: newStyle,
     ref: setRef
+  }, rest, {
+    role: !isPushed ? 'dialog' : rest.role,
+    tabIndex: !isPushed ? 0 : rest.tabIndex,
+    "aria-describedby": !isPushed ? ariaDescribedBy : _ariaDescribedBy,
+    "data-autofocus": !isPushed || undefined
   }), !isPushed && screenReaderDescription, closeButton, children));
 
   // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.

package/optimize/lib/components/flyout/flyout_body.js

@@ -12,7 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _flyout_body = require("./flyout_body.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "banner"];
+var _excluded = ["children", "className", "banner", "scrollableTabIndex"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,6 +24,8 @@ var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
   var children = _ref.children,
     className = _ref.className,
     banner = _ref.banner,
+    _ref$scrollableTabInd = _ref.scrollableTabIndex,
+    scrollableTabIndex = _ref$scrollableTabInd === void 0 ? 0 : _ref$scrollableTabInd,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiFlyoutBody', className);
   var euiTheme = (0, _services.useEuiTheme)();
@@ -35,7 +37,7 @@ var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
     className: classes,
     css: cssStyles
   }, rest), (0, _react2.jsx)("div", {
-    tabIndex: 0,
+    tabIndex: scrollableTabIndex,
     className: "euiFlyoutBody__overflow",
     css: overflowCssStyles
   }, banner && (0, _react2.jsx)("div", {

package/optimize/lib/components/focus_trap/focus_trap.js

@@ -18,6 +18,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactFocusOn = require("react-focus-on");
 var _reactRemoveScrollBar = require("react-remove-scroll-bar");
 var _services = require("../../services");
+var _component_defaults = require("../provider/component_defaults");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock", "gapMode"];
 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); }
@@ -32,12 +33,17 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
                                                                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                                                                            */
-var EuiFocusTrap = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(EuiFocusTrap, _Component);
-  var _super = _createSuper(EuiFocusTrap);
-  function EuiFocusTrap() {
+var EuiFocusTrap = function EuiFocusTrap(props) {
+  var propsWithDefaults = (0, _component_defaults.usePropsWithComponentDefaults)('EuiFocusTrap', props);
+  return (0, _react2.jsx)(EuiFocusTrapClass, propsWithDefaults);
+};
+exports.EuiFocusTrap = EuiFocusTrap;
+var EuiFocusTrapClass = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(EuiFocusTrapClass, _Component);
+  var _super = _createSuper(EuiFocusTrapClass);
+  function EuiFocusTrapClass() {
     var _this;
-    (0, _classCallCheck2.default)(this, EuiFocusTrap);
+    (0, _classCallCheck2.default)(this, EuiFocusTrapClass);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -88,7 +94,7 @@ var EuiFocusTrap = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  (0, _createClass2.default)(EuiFocusTrap, [{
+  (0, _createClass2.default)(EuiFocusTrapClass, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.setInitialFocus(this.props.initialFocus);
@@ -138,10 +144,9 @@ var EuiFocusTrap = /*#__PURE__*/function (_Component) {
       }));
     }
   }]);
-  return EuiFocusTrap;
+  return EuiFocusTrapClass;
 }(_react.Component);
-exports.EuiFocusTrap = EuiFocusTrap;
-(0, _defineProperty2.default)(EuiFocusTrap, "defaultProps", {
+(0, _defineProperty2.default)(EuiFocusTrapClass, "defaultProps", {
   clickOutsideDisables: false,
   disabled: false,
   returnFocus: true,

package/optimize/lib/components/form/range/dual_range.js

@@ -37,7 +37,7 @@ var _range = require("./range.styles");
 var _dual_range = require("./dual_range.styles");
 var _i18n = require("../../i18n");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable", "theme"];
+var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "inputPopoverProps", "isDraggable", "theme"];
 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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -267,9 +267,11 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResize", function (width) {
+      var _this$props$inputPopo, _this$props$inputPopo2;
       _this.setState({
         rangeWidth: width
       });
+      (_this$props$inputPopo = _this.props.inputPopoverProps) === null || _this$props$inputPopo === void 0 ? void 0 : (_this$props$inputPopo2 = _this$props$inputPopo.onPanelResize) === null || _this$props$inputPopo2 === void 0 ? void 0 : _this$props$inputPopo2.call(_this$props$inputPopo, width);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNearestStep", function (value) {
       var min = _this.props.min;
@@ -386,6 +388,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         prepend = _this$props.prepend,
         minInputProps = _this$props.minInputProps,
         maxInputProps = _this$props.maxInputProps,
+        inputPopoverProps = _this$props.inputPopoverProps,
         isDraggable = _this$props.isDraggable,
         theme = _this$props.theme,
         rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
@@ -626,8 +629,8 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
         css: showTicks || ticks ? rangeStyles.euiRange__slimHorizontalSpacer : rangeStyles.euiRange__horizontalSpacer
       }), maxInput));
-      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, {
-        className: "euiRange__popover",
+      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, (0, _extends2.default)({}, inputPopoverProps, {
+        className: (0, _classnames.default)('euiDualRange__popover', inputPopoverProps === null || inputPopoverProps === void 0 ? void 0 : inputPopoverProps.className),
         input: (0, _react2.jsx)(_form_control_layout.EuiFormControlLayoutDelimited, {
           startControl: minInput,
           endControl: maxInput,
@@ -646,7 +649,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         disableFocusTrap: true,
         onPanelResize: this.onResize,
         popoverScreenReaderText: dualSliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover || theRange;
     }
   }]);

package/optimize/lib/components/form/range/range.js

@@ -32,7 +32,7 @@ var _range_wrapper = require("./range_wrapper");
 var _range = require("./range.styles");
 var _i18n = require("../../i18n");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
+var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "inputPopoverProps", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
 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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -122,6 +122,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         step = _this$props.step,
         showLabels = _this$props.showLabels,
         showInput = _this$props.showInput,
+        inputPopoverProps = _this$props.inputPopoverProps,
         showTicks = _this$props.showTicks,
         tickInterval = _this$props.tickInterval,
         ticks = _this$props.ticks,
@@ -234,8 +235,8 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
         css: showTicks || ticks ? styles.euiRange__slimHorizontalSpacer : styles.euiRange__horizontalSpacer
       }), theInput));
-      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, {
-        className: "euiRange__popover",
+      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, (0, _extends2.default)({}, inputPopoverProps, {
+        className: (0, _classnames.default)('euiRange__popover', inputPopoverProps === null || inputPopoverProps === void 0 ? void 0 : inputPopoverProps.className),
         input: theInput // `showInputOnly` confirms existence
         ,
         fullWidth: fullWidth,
@@ -243,7 +244,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         closePopover: this.closePopover,
         disableFocusTrap: true,
         popoverScreenReaderText: sliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover ? thePopover : theRange;
     }
   }]);

package/optimize/lib/components/header/header.a11y.js

@@ -100,11 +100,7 @@ var Header = function Header() {
   });
   return (0, _react2.jsx)(_header.EuiHeader, null, (0, _react2.jsx)(_header_section.EuiHeaderSection, {
     grow: false
-  }, (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, {
-    border: "right"
-  }, renderLogo()), (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, {
-    border: "right"
-  }, (0, _react2.jsx)(HeaderSpacesMenu, null))), renderBreadcrumbs(), (0, _react2.jsx)(_header_section.EuiHeaderSection, {
+  }, (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, null, renderLogo()), (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, null, (0, _react2.jsx)(HeaderSpacesMenu, null))), renderBreadcrumbs(), (0, _react2.jsx)(_header_section.EuiHeaderSection, {
     side: "right"
   }, (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, null, search), (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, null, (0, _react2.jsx)(HeaderUserMenu, null)), (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, null, (0, _react2.jsx)(HeaderAppMenu, null))));
 };

package/optimize/lib/components/header/header.js

@@ -25,14 +25,13 @@ var _excluded = ["children", "className", "sections", "position", "theme"];
  */
 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 createHeaderSection(sections, border) {
+var createHeaderSection = function createHeaderSection(sections) {
   return sections.map(function (section, index) {
     return (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, {
-      key: index,
-      border: border
+      key: index
     }, section);
   });
-}
+};
 // Start a counter to manage the total number of fixed headers that need the body class
 var euiHeaderFixedCounter = 0;
 var EuiHeader = function EuiHeader(_ref) {
@@ -76,7 +75,7 @@ var EuiHeader = function EuiHeader(_ref) {
         // Items get wrapped in EuiHeaderSection and each item in a EuiHeaderSectionItem
         content.push((0, _react2.jsx)(_header_section.EuiHeaderSection, {
           key: "items-".concat(index)
-        }, createHeaderSection(section.items, section.borders)));
+        }, createHeaderSection(section.items)));
       }
       if (section.breadcrumbs) {
         content.push(

package/optimize/lib/components/header/header.styles.js

@@ -21,7 +21,8 @@ var euiHeaderVariables = function euiHeaderVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     height: euiTheme.size.xxxl,
-    childHeight: euiTheme.size.xxl
+    childHeight: euiTheme.size.xxl,
+    padding: euiTheme.size.s
   };
 };
 exports.euiHeaderVariables = euiHeaderVariables;
@@ -29,13 +30,14 @@ var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
-    height = _euiHeaderVariables.height;
+    height = _euiHeaderVariables.height,
+    padding = _euiHeaderVariables.padding;
 
   // Curated border color to fade into the shadow without looking too much like a border
   // It adds separation between the header and flyout
   var borderColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.emptyShade, 0.35) : (0, _services.shade)(euiTheme.border.color, 0.03);
   return {
-    euiHeader: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;", (0, _global_styling.logicalCSS)('height', height), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " ", (0, _mixins.euiShadowSmall)(euiThemeContext), ";;label:euiHeader;"),
+    euiHeader: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;", (0, _global_styling.logicalCSS)('height', height), " ", (0, _global_styling.logicalCSS)('padding-horizontal', padding), " ", (0, _mixins.euiShadowSmall)(euiThemeContext), ";;label:euiHeader;"),
     // Position
     static: /*#__PURE__*/(0, _react.css)("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
     fixed: /*#__PURE__*/(0, _react.css)("z-index:", euiTheme.levels.header, ";position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('horizontal', 0), " &+[data-fixed-header]{", (0, _global_styling.logicalCSS)('top', height), ";};label:fixed;"),
@@ -62,5 +64,5 @@ var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext, defaultB
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.5) : (0, _services.shade)(euiTheme.colors.darkestShade, 0.28);
   var borderColor = colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
-  return "\n    background-color: ".concat(backgroundColor, ";\n    ").concat((0, _global_styling.logicalCSS)('border-bottom-color', borderColor), "\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderSectionItem {\n      &::after {\n        background-color: ").concat(colorMode === 'DARK' ? euiTheme.colors.lightestShade : euiTheme.colors.darkShade, ";\n      }\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat((0, _services.shade)(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group,\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, "\n          ").concat((0, _services.transparentize)(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat((0, _services.makeHighContrastColor)(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append {\n          background-color: transparent;\n          color: inherit;\n        }\n      }\n    }\n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n    ").concat((0, _global_styling.logicalCSS)('border-bottom-color', borderColor), "\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat((0, _services.shade)(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group,\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, "\n          ").concat((0, _services.transparentize)(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat((0, _services.makeHighContrastColor)(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append {\n          background-color: transparent;\n          color: inherit;\n        }\n      }\n    }\n  ");
 };

package/optimize/lib/components/header/header_alert/header_alert.js

@@ -11,6 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _flex = require("../../flex");
 var _services = require("../../../services");
+var _header_alert = require("./header_alert.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["action", "className", "date", "text", "title", "badge"];
 /*
@@ -28,24 +29,31 @@ var EuiHeaderAlert = function EuiHeaderAlert(_ref) {
     title = _ref.title,
     badge = _ref.badge,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _header_alert.euiHeaderAlertStyles)(euiTheme);
   var classes = (0, _classnames.default)('euiHeaderAlert', className);
   var ariaId = (0, _services.useGeneratedHtmlId)();
   return (0, _react2.jsx)("article", (0, _extends2.default)({
     "aria-labelledby": "".concat(ariaId, "-title"),
-    className: classes
+    className: classes,
+    css: styles.euiHeaderAlert
   }, rest), (0, _react2.jsx)(_flex.EuiFlexGroup, {
     justifyContent: "spaceBetween"
   }, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)("div", {
-    className: "euiHeaderAlert__date"
+    className: "euiHeaderAlert__date",
+    css: styles.euiHeaderAlert__date
   }, date)), badge && (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
   }, badge)), (0, _react2.jsx)("h3", {
     id: "".concat(ariaId, "-title"),
-    className: "euiHeaderAlert__title"
+    className: "euiHeaderAlert__title",
+    css: styles.euiHeaderAlert__title
   }, title), (0, _react2.jsx)("div", {
-    className: "euiHeaderAlert__text"
+    className: "euiHeaderAlert__text",
+    css: styles.euiHeaderAlert__text
   }, text), action && (0, _react2.jsx)("div", {
-    className: "euiHeaderAlert__action euiLink"
+    className: "euiHeaderAlert__action",
+    css: styles.euiHeaderAlert__action
   }, action));
 };
 exports.EuiHeaderAlert = EuiHeaderAlert;

package/optimize/lib/components/header/header_alert/header_alert.styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiHeaderAlertStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _title = require("../../title/title.styles");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var euiHeaderAlertStyles = function euiHeaderAlertStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiHeaderAlert: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('min-width', '300px'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " &:not(:last-child){", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.l), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.l), " ", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";};label:euiHeaderAlert;"),
+    euiHeaderAlert__title: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiHeaderAlert__title;"),
+    euiHeaderAlert__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), ";;label:euiHeaderAlert__text;"),
+    euiHeaderAlert__action: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:euiHeaderAlert__action;"),
+    euiHeaderAlert__date: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " color:", euiTheme.colors.darkShade, ";;label:euiHeaderAlert__date;")
+  };
+};
+exports.euiHeaderAlertStyles = euiHeaderAlertStyles;

package/optimize/lib/components/header/header_links/header_links.js

@@ -11,12 +11,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _common = require("../../common");
+var _services = require("../../../services");
 var _icon = require("../../icon");
 var _popover = require("../../popover");
 var _i18n = require("../../i18n");
 var _header_section = require("../header_section");
 var _responsive = require("../../responsive");
+var _header_links = require("./header_links.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "gutterSize", "popoverBreakpoints", "popoverButtonProps", "popoverProps"],
   _excluded2 = ["onClick", "iconType"];
@@ -29,13 +30,7 @@ var _excluded = ["children", "className", "gutterSize", "popoverBreakpoints", "p
  */
 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; }
-var gutterSizeToClassNameMap = {
-  xs: '--gutterXS',
-  s: '--gutterS',
-  m: '--gutterM',
-  l: '--gutterL'
-};
-var GUTTER_SIZES = (0, _common.keysOf)(gutterSizeToClassNameMap);
+var GUTTER_SIZES = ['xs', 's', 'm', 'l'];
 exports.GUTTER_SIZES = GUTTER_SIZES;
 var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   var children = _ref.children,
@@ -47,6 +42,8 @@ var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     popoverButtonProps = _ref.popoverButtonProps,
     popoverProps = _ref.popoverProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _header_links.euiHeaderLinksStyles)(euiTheme);
   var _ref2 = popoverButtonProps || {},
     onClick = _ref2.onClick,
     _ref2$iconType = _ref2.iconType,
@@ -70,7 +67,7 @@ var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     return function () {
       window.removeEventListener('resize', closeMenu);
     };
-  });
+  }, [closeMenu]);
   var classes = (0, _classnames.default)('euiHeaderLinks', className);
   var button = (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiHeaderLinks.openNavigationMenu",
@@ -90,11 +87,13 @@ var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   }, function (appNavigation) {
     return (0, _react2.jsx)("nav", (0, _extends2.default)({
       className: classes,
+      css: styles.euiHeaderLinks,
       "aria-label": appNavigation
     }, rest), (0, _react2.jsx)(_responsive.EuiHideFor, {
       sizes: popoverBreakpoints
     }, (0, _react2.jsx)("div", {
-      className: (0, _classnames.default)('euiHeaderLinks__list', ["euiHeaderLinks__list".concat(gutterSizeToClassNameMap[gutterSize])])
+      className: "euiHeaderLinks__list",
+      css: [styles.euiHeaderLinks__list, styles.gutterSizes[gutterSize], ";label:EuiHeaderLinks;"]
     }, children)), (0, _react2.jsx)(_responsive.EuiShowFor, {
       sizes: popoverBreakpoints
     }, (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
@@ -105,7 +104,8 @@ var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
       panelPaddingSize: "none",
       repositionOnScroll: true
     }, popoverProps), (0, _react2.jsx)("div", {
-      className: (0, _classnames.default)('euiHeaderLinks__mobileList', ["euiHeaderLinks__mobileList".concat(gutterSizeToClassNameMap[gutterSize])])
+      className: "euiHeaderLinks__mobileList",
+      css: styles.euiHeaderLinks__mobileList
     }, children))));
   });
 };