@elastic/eui 87.0.0 → 87.2.0

package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js

@@ -93,11 +93,11 @@ var EuiCollapsedNavPopover = function EuiCollapsedNavPopover(_ref) {
 exports.EuiCollapsedNavPopover = EuiCollapsedNavPopover;
 EuiCollapsedNavPopover.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: _propTypes.default.node.isRequired,
+  title: _propTypes.default.string.isRequired,
   /**
-     * Allows customizing title's element.
+     * Allows customizing the title element.
      * Consider using a heading element for better accessibility.
      * Defaults to an unsemantic `span` or `div`, depending on context.
      */
@@ -125,11 +125,11 @@ EuiCollapsedNavPopover.propTypes = {
        */
   items: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * ReactNode to render as this component's title
+       * Required text to render as the nav item title
        */
-    title: _propTypes.default.node,
+    title: _propTypes.default.string,
     /**
-       * Allows customizing title's element.
+       * Allows customizing the title element.
        * Consider using a heading element for better accessibility.
        * Defaults to an unsemantic `span` or `div`, depending on context.
        */
@@ -148,7 +148,7 @@ EuiCollapsedNavPopover.propTypes = {
        */
     isGroupTitle: _propTypes.default.bool
   }).isRequired), _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.node,
+    title: _propTypes.default.string,
     titleElement: _propTypes.default.oneOf(["h2", "h3", "h4", "h5", "h6", "span", "div"]),
     icon: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "error", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]),
     iconProps: _propTypes.default.any,

package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.js

@@ -137,11 +137,11 @@ EuiCollapsibleNavAccordion.propTypes = {
   // know for sure it's an actual accordion item and not a section heading
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * ReactNode to render as this component's title
+       * Required text to render as the nav item title
        */
-    title: _propTypes.default.node.isRequired,
+    title: _propTypes.default.string.isRequired,
     /**
-       * Allows customizing title's element.
+       * Allows customizing the title element.
        * Consider using a heading element for better accessibility.
        * Defaults to an unsemantic `span` or `div`, depending on context.
        */
@@ -169,11 +169,11 @@ EuiCollapsibleNavAccordion.propTypes = {
          */
     items: _propTypes.default.arrayOf(_propTypes.default.shape({
       /**
-         * ReactNode to render as this component's title
+         * Required text to render as the nav item title
          */
-      title: _propTypes.default.node,
+      title: _propTypes.default.string,
       /**
-         * Allows customizing title's element.
+         * Allows customizing the title element.
          * Consider using a heading element for better accessibility.
          * Defaults to an unsemantic `span` or `div`, depending on context.
          */

package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js

@@ -76,11 +76,11 @@ var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
  */
 EuiCollapsibleNavItemDisplay.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: _propTypes.default.node.isRequired,
+  title: _propTypes.default.string.isRequired,
   /**
-     * Allows customizing title's element.
+     * Allows customizing the title element.
      * Consider using a heading element for better accessibility.
      * Defaults to an unsemantic `span` or `div`, depending on context.
      */
@@ -185,11 +185,11 @@ var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
 exports.EuiCollapsibleNavSubItem = EuiCollapsibleNavSubItem;
 EuiCollapsibleNavSubItem.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: _propTypes.default.node,
+  title: _propTypes.default.string,
   /**
-     * Allows customizing title's element.
+     * Allows customizing the title element.
      * Consider using a heading element for better accessibility.
      * Defaults to an unsemantic `span` or `div`, depending on context.
      */
@@ -258,11 +258,11 @@ var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(_ref4) {
 exports.EuiCollapsibleNavItem = EuiCollapsibleNavItem;
 EuiCollapsibleNavItem.propTypes = {
   /**
-     * ReactNode to render as this component's title
+     * Required text to render as the nav item title
      */
-  title: _propTypes.default.node.isRequired,
+  title: _propTypes.default.string.isRequired,
   /**
-     * Allows customizing title's element.
+     * Allows customizing the title element.
      * Consider using a heading element for better accessibility.
      * Defaults to an unsemantic `span` or `div`, depending on context.
      */

package/lib/components/color_picker/color_palette_picker/color_palette_picker.js

@@ -150,7 +150,7 @@ EuiColorPalettePicker.propTypes = {
        */
   isOpen: _propTypes.default.bool,
   /**
-       * Optional props to pass to the underlying [EuiPopover](/#/layout/popover).
+       * Optional props to pass to the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element).
        * Allows fine-grained control of the popover dropdown menu, including
        * `repositionOnScroll` for EuiSuperSelects used within scrollable containers,
        * and customizing popover panel styling.

package/lib/components/date_picker/date_picker_range.js

@@ -12,7 +12,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
@@ -37,6 +37,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,
@@ -47,8 +48,9 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     append = _ref.append,
     prepend = _ref.prepend,
     rest = _objectWithoutProperties(_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);
@@ -120,6 +122,7 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     startControl: startControl,
     endControl: endControl,
     fullWidth: fullWidth,
+    compressed: compressed,
     readOnly: readOnly,
     isDisabled: disabled,
     isInvalid: isInvalid,

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

@@ -615,7 +615,7 @@ EuiSuperDatePickerInternal.propTypes = {
       /**
          * Common display alternatives for the anchor wrapper
          */
-      display: _propTypes.default.oneOf(["inlineBlock", "block"]),
+      display: _propTypes.default.any,
       /**
          * Delay before showing tooltip. Good for repeatable items.
          */
@@ -797,7 +797,7 @@ EuiSuperDatePicker.propTypes = {
       children: _propTypes.default.element.isRequired,
       className: _propTypes.default.string,
       content: _propTypes.default.node,
-      display: _propTypes.default.oneOf(["inlineBlock", "block"]),
+      display: _propTypes.default.any,
       delay: _propTypes.default.oneOf(["regular", "long"]).isRequired,
       title: _propTypes.default.node,
       id: _propTypes.default.string,

package/lib/components/date_picker/super_date_picker/super_update_button.js

@@ -220,7 +220,7 @@ EuiSuperUpdateButton.propTypes = {
     /**
        * Common display alternatives for the anchor wrapper
        */
-    display: _propTypes.default.oneOf(["inlineBlock", "block"]),
+    display: _propTypes.default.any,
     /**
        * Delay before showing tooltip. Good for repeatable items.
        */

package/lib/components/empty_prompt/empty_prompt.js

@@ -135,7 +135,6 @@ EuiEmptyPrompt.propTypes = {
   "aria-label": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
   "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
   css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]),
-  element: _propTypes.default.oneOf(["div"]),
   /**
      * Adds a medium shadow to the panel;
      * Only works when `color="plain"`

package/lib/components/flyout/flyout.js

@@ -18,7 +18,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
@@ -94,6 +94,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 = _objectWithoutProperties(_ref, _excluded);
   var Element = as || defaultElement;
   var maskRef = (0, _react.useRef)(null);
@@ -227,6 +228,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, {
@@ -271,15 +273,15 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     clickOutsideDisables: !ownFocus,
     onClickOutside: onClickOutside
   }, focusTrapProps), (0, _react2.jsx)(Element, _extends({
-    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/lib/components/flyout/flyout_body.js

@@ -10,7 +10,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
@@ -26,6 +26,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 = _objectWithoutProperties(_ref, _excluded);
   var classes = (0, _classnames.default)('euiFlyoutBody', className);
   var euiTheme = (0, _services.useEuiTheme)();
@@ -37,7 +39,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", {
@@ -56,5 +58,15 @@ EuiFlyoutBody.propTypes = {
   /**
          * Use to display a banner at the top of the body. It is suggested to use `EuiCallOut` for it.
          */
-  banner: _propTypes.default.node
+  banner: _propTypes.default.node,
+  /**
+         * [Scrollable regions (or their children) should be focusable](https://dequeuniversity.com/rules/axe/4.0/scrollable-region-focusable)
+         * to allow keyboard users to scroll the region via arrow keys.
+         *
+         * By default, EuiFlyoutBody's scroll overflow wrapper sets a `tabIndex` of `0`.
+         * If you know your flyout body content already contains focusable children
+         * that satisfy keyboard accessibility requirements, you can use this prop
+         * to override this default.
+         */
+  scrollableTabIndex: _propTypes.default.number
 };

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

@@ -27,7 +27,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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -273,9 +273,11 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_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);
     });
     _defineProperty(_assertThisInitialized(_this), "getNearestStep", function (value) {
       var min = _this.props.min;
@@ -392,6 +394,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 = _objectWithoutProperties(_this$props, _excluded);
@@ -632,8 +635,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, _extends({}, 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,
@@ -652,7 +655,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         disableFocusTrap: true,
         onPanelResize: this.onResize,
         popoverScreenReaderText: dualSliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover || theRange;
     }
   }]);
@@ -773,14 +776,38 @@ EuiDualRangeClass.propTypes = {
      * @default false
      */
   fullWidth: _propTypes.default.bool,
+  /**
+     * Only impacts inputs rendered by the `showInput` prop
+     */
+  isInvalid: _propTypes.default.bool,
   /**
      * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`
      */
   isLoading: _propTypes.default.bool,
   /**
-     * Only impacts inputs rendered by the `showInput` prop
+     * Only impacts input popovers rendered when the `showInput` prop is set to `"inputWithPopover"`
+     *
+     * Allows customizing the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element),
+     * except for props controlled by the range component
      */
-  isInvalid: _propTypes.default.bool
+  inputPopoverProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
+    /**
+       * Alignment of the popover relative to the input
+       */
+    anchorPosition: _propTypes.default.oneOf(["downLeft", "downRight", "downCenter"]),
+    inputRef: _propTypes.default.any,
+    onPanelResize: _propTypes.default.func,
+    /**
+       * By default, **EuiInputPopovers** inherit the same width as the passed input element.
+       * However, if the input width is too small, you can pass a minimum panel width
+       * (that should be based on the popover content).
+       */
+    panelMinWidth: _propTypes.default.number
+  })
 };
 var EuiDualRange = (0, _services.withEuiTheme)(EuiDualRangeClass);
 exports.EuiDualRange = EuiDualRange;

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

@@ -22,7 +22,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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -128,6 +128,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,
@@ -240,8 +241,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, _extends({}, inputPopoverProps, {
+        className: (0, _classnames.default)('euiRange__popover', inputPopoverProps === null || inputPopoverProps === void 0 ? void 0 : inputPopoverProps.className),
         input: theInput // `showInputOnly` confirms existence
         ,
         fullWidth: fullWidth,
@@ -249,7 +250,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         closePopover: this.closePopover,
         disableFocusTrap: true,
         popoverScreenReaderText: sliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover ? thePopover : theRange;
     }
   }]);
@@ -369,14 +370,21 @@ EuiRangeClass.propTypes = {
      * @default false
      */
   fullWidth: _propTypes.default.bool,
+  /**
+     * Only impacts inputs rendered by the `showInput` prop
+     */
+  isInvalid: _propTypes.default.bool,
   /**
      * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`
      */
   isLoading: _propTypes.default.bool,
   /**
-     * Only impacts inputs rendered by the `showInput` prop
+     * Only impacts input popovers rendered when the `showInput` prop is set to `"inputWithPopover"`
+     *
+     * Allows customizing the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element),
+     * except for props controlled by the range component
      */
-  isInvalid: _propTypes.default.bool
+  inputPopoverProps: _propTypes.default.any
 };
 var EuiRange = (0, _services.withEuiTheme)(EuiRangeClass);
 exports.EuiRange = EuiRange;

package/lib/components/form/super_select/super_select.js

@@ -360,7 +360,7 @@ EuiSuperSelect.propTypes = {
        */
   isOpen: _propTypes.default.bool,
   /**
-       * Optional props to pass to the underlying [EuiPopover](/#/layout/popover).
+       * Optional props to pass to the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element).
        * Allows fine-grained control of the popover dropdown menu, including
        * `repositionOnScroll` for EuiSuperSelects used within scrollable containers,
        * and customizing popover panel styling.

package/lib/components/page/page_sidebar/page_sidebar.js

@@ -59,7 +59,7 @@ var EuiPageSidebar = function EuiPageSidebar(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     inlineStyles = _useState2[0],
     setInlineStyles = _useState2[1];
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     var updatedStyles = _objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth));
     if (sticky) {
       var _document$body$datase;

package/lib/components/page_template/page_template.js

@@ -48,6 +48,14 @@ var TemplateContext = /*#__PURE__*/(0, _react.createContext)({
   bottomBar: {}
 });
 exports.TemplateContext = TemplateContext;
+var calculateOffset = function calculateOffset(base) {
+  var _document$body$datase;
+  if (typeof document === 'undefined') return 0; // SSR catch
+
+  var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
+  return base * 3 * euiHeaderFixedCounter;
+};
+
 /**
  * Consumed via `EuiPageTemplate`,
  * it controls and propogates most of the shared props per direct child
@@ -74,7 +82,9 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useEuiTheme = (0, _services.useEuiTheme)(),
     euiTheme = _useEuiTheme.euiTheme;
-  var _useState = (0, _react.useState)(_offset),
+  var _useState = (0, _react.useState)(function () {
+      return _offset !== null && _offset !== void 0 ? _offset : calculateOffset(euiTheme.base);
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     offset = _useState2[0],
     setOffset = _useState2[1];
@@ -87,9 +97,7 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   });
   (0, _react.useEffect)(function () {
     if (_offset === undefined) {
-      var _document$body$datase;
-      var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
-      setOffset(euiTheme.base * 3 * euiHeaderFixedCounter);
+      setOffset(calculateOffset(euiTheme.base));
     }
   }, [_offset, euiTheme.base]);
 
@@ -127,7 +135,8 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     return {
       restrictWidth: restrictWidth,
       paddingSize: paddingSize,
-      parent: "#".concat(pageInnerId)
+      // pageInnerId may contain colons that are parsed as pseudo-elements if not escaped
+      parent: "#".concat(CSS.escape(pageInnerId))
     };
   };
   var innerPanelled = function innerPanelled() {

package/lib/components/popover/input_popover.js

@@ -16,7 +16,7 @@ var _services = require("../../services");
 var _form = require("../form/form.styles");
 var _react2 = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -45,6 +45,8 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     input = _ref.input,
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$panelMinWidth = _ref.panelMinWidth,
+    panelMinWidth = _ref$panelMinWidth === void 0 ? 0 : _ref$panelMinWidth,
     onPanelResize = _ref.onPanelResize,
     _inputRef = _ref.inputRef,
     _panelRef = _ref.panelRef,
@@ -62,22 +64,24 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     panelEl = _useState6[0],
     setPanelEl = _useState6[1];
+  var popoverClassRef = (0, _react.useRef)(null);
   var inputRef = (0, _services.useCombinedRefs)([setInputEl, _inputRef]);
   var panelRef = (0, _services.useCombinedRefs)([setPanelEl, _panelRef]);
   var setPanelWidth = (0, _react.useCallback)(function (width) {
     if (panelEl && (!!inputElWidth || !!width)) {
       var newWidth = !!width ? width : inputElWidth;
-      panelEl.style.width = "".concat(newWidth, "px");
-      if (onPanelResize) {
-        onPanelResize(newWidth);
-      }
+      var widthToSet = newWidth && newWidth > panelMinWidth ? newWidth : panelMinWidth;
+      panelEl.style.width = "".concat(widthToSet, "px");
+      onPanelResize === null || onPanelResize === void 0 ? void 0 : onPanelResize(widthToSet);
     }
-  }, [panelEl, inputElWidth, onPanelResize]);
+  }, [panelEl, inputElWidth, onPanelResize, panelMinWidth]);
   var onResize = (0, _react.useCallback)(function () {
     if (inputEl) {
+      var _popoverClassRef$curr;
       var _width = inputEl.getBoundingClientRect().width;
       setInputElWidth(_width);
       setPanelWidth(_width);
+      (_popoverClassRef$curr = popoverClassRef.current) === null || _popoverClassRef$curr === void 0 ? void 0 : _popoverClassRef$curr.positionPopoverFluid();
     }
   }, [inputEl, setPanelWidth]);
   (0, _react.useEffect)(function () {
@@ -112,7 +116,8 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     }),
     buttonRef: inputRef,
     panelRef: panelRef,
-    className: classes
+    className: classes,
+    ref: popoverClassRef
   }, props), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, _extends({
     clickOutsideDisables: true,
     disabled: disableFocusTrap
@@ -126,11 +131,21 @@ EuiInputPopover.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
+  /**
+     * Alignment of the popover relative to the input
+     */
+  anchorPosition: _propTypes.default.oneOf(["downLeft", "downRight", "downCenter"]),
   disableFocusTrap: _propTypes.default.bool,
   fullWidth: _propTypes.default.bool,
   input: _propTypes.default.any.isRequired,
   inputRef: _propTypes.default.any,
-  onPanelResize: _propTypes.default.func
+  onPanelResize: _propTypes.default.func,
+  /**
+     * By default, **EuiInputPopovers** inherit the same width as the passed input element.
+     * However, if the input width is too small, you can pass a minimum panel width
+     * (that should be based on the popover content).
+     */
+  panelMinWidth: _propTypes.default.number
 };
 EuiInputPopover.defaultProps = {
   anchorPosition: 'downLeft',