@elastic/eui 112.0.0 → 112.1.0

package/es/components/flyout/flyout.component.js

@@ -33,6 +33,7 @@ import React, { useEffect, useLayoutEffect, useRef, useMemo, useCallback, useSta
 import classnames from 'classnames';
 import { keys, EuiWindowEvent, useCombinedRefs, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables, focusTrapPubSub } from '../../services';
 import { useCurrentSession, useIsInManagedFlyout, useFlyoutLayoutMode, useFlyoutId, useFlyoutWidth, useIsFlyoutActive, useFlyoutManager, useHasPushPadding } from './manager';
+import { LAYOUT_MODE_STACKED } from './manager/const';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
@@ -158,6 +159,31 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useResizeObserver = useResizeObserver(isPushed ? resizeRef : null, 'width'),
     width = _useResizeObserver.width;
 
+  // Memoize flyout identification and relationships to prevent race conditions
+  var flyoutIdentity = useMemo(function () {
+    if (!flyoutId || !currentSession) {
+      return {
+        isMainFlyout: false,
+        siblingFlyoutId: null,
+        hasValidSession: false,
+        sessionForWidth: null
+      };
+    }
+    var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
+    return {
+      isMainFlyout: currentSession.mainFlyoutId === flyoutId,
+      siblingFlyoutId: siblingFlyoutId,
+      hasValidSession: true,
+      sessionForWidth: currentSession
+    };
+  }, [flyoutId, currentSession]);
+
+  // Destructure for easier use
+  var siblingFlyoutId = flyoutIdentity.siblingFlyoutId,
+    isMainFlyout = flyoutIdentity.isMainFlyout;
+  var _siblingFlyoutWidth = useFlyoutWidth(siblingFlyoutId);
+  var siblingFlyoutWidth = layoutMode === LAYOUT_MODE_STACKED ? 0 : _siblingFlyoutWidth;
+
   /**
    * Effect for adding push padding to body. Using useLayoutEffect to ensure
    * padding changes happen synchronously before child components render -
@@ -172,12 +198,13 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
     var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
     var managerSide = side === 'left' ? 'left' : 'right';
+    var paddingWidth = layoutMode === LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
     if (shouldApplyPadding) {
-      document.body.style[paddingSide] = "".concat(width, "px");
-      setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(width, "px")));
+      document.body.style[paddingSide] = "".concat(paddingWidth, "px");
+      setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(paddingWidth, "px")));
       // Update manager state if in managed context
       if (isInManagedContext && flyoutManagerRef.current) {
-        flyoutManagerRef.current.setPushPadding(managerSide, width);
+        flyoutManagerRef.current.setPushPadding(managerSide, paddingWidth);
       }
     } else {
       // Explicitly remove padding when this push flyout becomes inactive
@@ -198,7 +225,7 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
         flyoutManagerRef.current.setPushPadding(managerSide, 0);
       }
     };
-  }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width]);
+  }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth]);
 
   /**
    * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
@@ -210,27 +237,6 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
       document.body.classList.remove('euiBody--hasFlyout');
     };
   }, []);
-
-  // Memoize flyout identification and relationships to prevent race conditions
-  var flyoutIdentity = useMemo(function () {
-    if (!flyoutId || !currentSession) {
-      return {
-        isMainFlyout: false,
-        siblingFlyoutId: null,
-        hasValidSession: false,
-        sessionForWidth: null
-      };
-    }
-    var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
-    return {
-      siblingFlyoutId: siblingFlyoutId,
-      hasValidSession: true,
-      sessionForWidth: currentSession
-    };
-  }, [flyoutId, currentSession]);
-
-  // Destructure for easier use
-  var siblingFlyoutId = flyoutIdentity.siblingFlyoutId;
   var hasChildFlyout = (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) != null;
   var isChildFlyout = isInManagedContext && hasChildFlyout && (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) === id;
   var shouldCloseOnEscape = useMemo(function () {
@@ -262,7 +268,6 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
       onClose(event);
     }
   }, [onClose, isPushed, shouldCloseOnEscape]);
-  var siblingFlyoutWidth = useFlyoutWidth(siblingFlyoutId);
   var managedFlyoutIndex = currentZIndexRef.current;
   if (isInManagedContext && currentSession) {
     managedFlyoutIndex = currentSession.zIndex;

package/es/components/icon/assets/timeline.js

@@ -28,8 +28,10 @@ var EuiIconTimeline = function EuiIconTimeline(_ref) {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
     fillRule: "evenodd",
-    d: "M2 5.915v4.17a1.5 1.5 0 0 0 0 2.83V15h1v-2.085a1.5 1.5 0 0 0 0-2.83v-4.17a1.5 1.5 0 0 0 0-2.83V1H2v2.085a1.5 1.5 0 0 0 0 2.83ZM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Zm0 7a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0ZM8 2a1 1 0 0 0-.707.293L5.086 4.5l2.207 2.207A1 1 0 0 0 8 7h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H8Zm6 1H8L6.5 4.5 8 6h6V3ZM7.293 9.293A1 1 0 0 1 8 9h6a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H8a1 1 0 0 1-.707-.293L5.086 11.5l2.207-2.207ZM8 10h6v3H8l-1.5-1.5L8 10Z",
+    d: "M13 6.5a1.5 1.5 0 0 1 1.413 1H16v1h-1.587a1.5 1.5 0 0 1-2.826 0H9.413a1.5 1.5 0 0 1-2.826 0H4.413a1.5 1.5 0 0 1-2.826 0H0v-1h1.587a1.5 1.5 0 0 1 2.826 0h2.174a1.5 1.5 0 0 1 2.826 0h2.174A1.5 1.5 0 0 1 13 6.5Zm-10 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm5 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm5 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
     clipRule: "evenodd"
+  }), ___EmotionJSX("path", {
+    d: "M1 13v2h4v-2H1Zm10 0v2h4v-2h-4ZM6 1v2h4V1H6Zm0 14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1.5v-1h1v1H5a1 1 0 0 1 1 1v2Zm10 0a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1.5v-1h1v1H15a1 1 0 0 1 1 1v2ZM11 3a1 1 0 0 1-1 1H8.5v1h-1V4H6a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2Z"
   }));
 };
 export var icon = EuiIconTimeline;

package/es/components/icon/icon.js

@@ -301,4 +301,5 @@ EuiIconClass.propTypes = {
        */
   onIconLoad: PropTypes.func
 };
-export var EuiIcon = withEuiStylesMemoizer(EuiIconClass);
+export var EuiIcon = withEuiStylesMemoizer(EuiIconClass);
+EuiIcon.displayName = 'EuiIcon';

package/es/components/image/image.js

@@ -154,4 +154,5 @@ EuiImage.propTypes = {
     "data-test-subj": PropTypes.string,
     css: PropTypes.any
   })
-};
+};
+EuiImage.displayName = 'EuiImage';

package/es/components/loading/loading_logo.js

@@ -53,4 +53,5 @@ EuiLoadingLogo.propTypes = {
        * While this component should be restricted to using logo icons, it works with any IconType
        */
   logo: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alignBottom", "alignBottomLeft", "alignBottomRight", "alignCenterHorizontal", "alignCenterVertical", "alignLeft", "alignRight", "alignTop", "alignTopLeft", "alignTopRight", "alert", "analyzeEvent", "annotation", "anomalyChart", "chartAnomaly", "anomalySwimLane", "apmApp", "apmTrace", "chartWaterfall", "appSearchApp", "apps", "arrowDown", "chevronSingleDown", "arrowLeft", "chevronSingleLeft", "arrowRight", "chevronSingleRight", "arrowUp", "chevronSingleUp", "arrowStart", "chevronLimitLeft", "arrowEnd", "chevronLimitRight", "article", "asterisk", "at", "archive", "axisX", "axisYLeft", "axisYRight", "auditbeatApp", "backgroundTask", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "briefcase", "branchUser", "broom", "brush", "bug", "bulb", "bullseye", "calendar", "canvasApp", "casesApp", "changePointDetection", "chartChangePoint", "chartArea", "chartAreaStack", "chartBarHorizontal", "chartBarHorizontalStack", "chartBarVertical", "chartBarVerticalStack", "chartGauge", "chartHeatmap", "chartLine", "chartPie", "chartTagCloud", "chartThreshold", "check", "checkCircle", "checkInCircleFilled", "checkCircleFill", "cheer", "popper", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "clockControl", "cloud", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "code", "codeApp", "color", "paintBucket", "commandLine", "comment", "compare", "compute", "processor", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "contrast", "contrastHigh", "contrastFill", "controls", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "crossProjectSearch", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInCircle", "crossCircle", "crosshair", "crosshairs", "currency", "money", "cut", "scissors", "dashboardApp", "dashedCircle", "dataVisualizer", "database", "desktop", "display", "devToolsApp", "diff", "discoverApp", "distributeHorizontal", "distributeVertical", "download", "drag", "dragHorizontal", "dragVertical", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "chevronDoubleLeft", "doubleArrowRight", "chevronDoubleRight", "ellipsis", "editorAlignCenter", "textAlignCenter", "editorAlignLeft", "textAlignLeft", "editorAlignRight", "textAlignRight", "editorBold", "textBold", "editorChecklist", "listCheck", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "textHeading", "editorItalic", "textItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "listNumber", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "redo", "editorStrike", "textStrike", "editorTable", "table", "editorUnderline", "textUnderline", "editorUndo", "undo", "editorUnorderedList", "listBullet", "email", "mail", "empty", "emsApp", "endpoint", "eql", "query", "eraser", "error", "errorFilled", "errorFill", "esqlVis", "exit", "logOut", "expand", "maximize", "expandMini", "export", "exportAction", "upload", "external", "eye", "eyeClosed", "eyeSlash", "faceHappy", "faceNeutral", "faceSad", "fieldStatistics", "tableInfo", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flask", "flag", "fleetApp", "fold", "folder", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "hourglass", "if", "info", "image", "importAction", "index", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "mapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "tableTime", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "queryField", "kqlFunction", "kqlOperand", "queryOperand", "kqlSelector", "querySelector", "kqlValue", "queryValue", "kubernetesNode", "kubernetesPod", "launch", "rocket", "layers", "lensApp", "lettering", "text", "lineBreak", "lineBreakSlash", "lineDash", "lineDashed", "lineDot", "lineDotted", "lineSolid", "link", "linkSlash", "list", "listAdd", "lock", "lockOpen", "logPatternAnalysis", "pattern", "logRateAnalysis", "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", "queue", "machineLearningApp", "magnet", "magnify", "magnifyExclamation", "magnifyMinus", "magnifyPlus", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "map", "mapMarker", "waypoint", "megaphone", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusCircle", "minusInCircle", "minusInCircleFilled", "minusInSquare", "minusSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "newChat", "node", "vectorTriangle", "notebookApp", "number", "offline", "wifiSlash", "online", "wifi", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFill", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plugs", "plus", "plusCircle", "plusInCircle", "plusInCircleFilled", "plusInSquare", "plusSquare", "popout", "presentation", "productRobot", "productAgent", "productCloudInfra", "productDashboard", "productDiscover", "productML", "productStreamsClassic", "productStreamsWired", "push", "send", "question", "quote", "radar", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "return", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "star", "starEmpty", "starEmptySpace", "starFill", "starFilled", "starFillSpace", "starFilledSpace", "starMinusEmpty", "starMinusFill", "starMinusFilled", "starPlusEmpty", "starPlusFill", "starPlusFilled", "stats", "stop", "stopFill", "stopFilled", "stopSlash", "storage", "streamsClassic", "streamsWired", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityHigh", "tableDensityExpanded", "tableDensityLow", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "thermometer", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "refreshTime", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "unarchive", "vector", "vectorSquare", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "chartMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "warningFilled", "warningFill", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workflowsApp", "workflow", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "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", "tokenSemanticText", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired])
-};
+};
+EuiLoadingLogo.displayName = 'EuiLoadingLogo';

package/es/components/page/page_section/page_section.js

@@ -99,4 +99,5 @@ EuiPageSection.propTypes = {
        * Sets which HTML element to render.
        */
   component: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.elementType.isRequired])
-};
+};
+EuiPageSection.displayName = 'EuiPageSection';

package/es/components/page/page_sidebar/page_sidebar.js

@@ -100,4 +100,5 @@ EuiPageSidebar.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any
-};
+};
+EuiPageSidebar.displayName = 'EuiPageSidebar';

package/es/components/page_template/page_template.js

@@ -216,6 +216,7 @@ _EuiPageTemplate.propTypes = {
        */
   component: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.elementType.isRequired])
 };
+_EuiPageTemplate.displayName = 'EuiPageTemplate';
 var _EuiPageSidebar = function _EuiPageSidebar(props) {
   var _useContext = useContext(TemplateContext),
     sidebar = _useContext.sidebar;
@@ -255,6 +256,7 @@ _EuiPageSidebar.propTypes = {
   "data-test-subj": PropTypes.string,
   css: PropTypes.any
 };
+_EuiPageSidebar.displayName = 'EuiPageTemplate.Sidebar';
 var _EuiPageSection = function _EuiPageSection(props) {
   var _useContext2 = useContext(TemplateContext),
     section = _useContext2.section;
@@ -304,6 +306,7 @@ _EuiPageSection.propTypes = {
        */
   component: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.elementType.isRequired])
 };
+_EuiPageSection.displayName = 'EuiPageTemplate.Section';
 var _EuiPageHeader = function _EuiPageHeader(props) {
   var _useContext3 = useContext(TemplateContext),
     header = _useContext3.header;
@@ -337,6 +340,7 @@ _EuiPageHeader.propTypes = {
      */
   bottomBorder: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.oneOf(["extended"])])
 };
+_EuiPageHeader.displayName = 'EuiPageTemplate.Header';
 var _EuiPageEmptyPrompt = function _EuiPageEmptyPrompt(props) {
   var _useContext4 = useContext(TemplateContext),
     emptyPrompt = _useContext4.emptyPrompt;
@@ -361,6 +365,7 @@ _EuiPageEmptyPrompt.propTypes = {
   component: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.elementType.isRequired]),
   panelled: PropTypes.bool
 };
+_EuiPageEmptyPrompt.displayName = 'EuiPageTemplate.EmptyPrompt';
 var _EuiPageBottomBar = function _EuiPageBottomBar(props) {
   var _useContext5 = useContext(TemplateContext),
     bottomBar = _useContext5.bottomBar;
@@ -380,6 +385,7 @@ _EuiPageBottomBar.propTypes = {
      */
   restrictWidth: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.number.isRequired, PropTypes.string.isRequired])
 };
+_EuiPageBottomBar.displayName = 'EuiPageTemplate.BottomBar';
 export var EuiPageTemplate = Object.assign(_EuiPageTemplate, {
   Sidebar: _EuiPageSidebar,
   Header: _EuiPageHeader,

package/es/components/panel/panel.js

@@ -89,9 +89,6 @@ export var EuiPanel = function EuiPanel(_ref) {
     css: cssStyles
   }, rest), children);
 };
-
-// Do not render a high contrast border if the panel is transparent
-// and does not have a default contrast border
 EuiPanel.propTypes = {
   element: PropTypes.oneOfType([PropTypes.oneOf(["button"]), PropTypes.oneOf(["div"])]),
   /**
@@ -148,6 +145,10 @@ EuiPanel.propTypes = {
   "data-test-subj": PropTypes.string,
   css: PropTypes.any
 };
+EuiPanel.displayName = 'EuiPanel';
+
+// Do not render a high contrast border if the panel is transparent
+// and does not have a default contrast border
 export var _canRenderHighContrastBorder = function _canRenderHighContrastBorder(_ref2) {
   var color = _ref2.color,
     hasBorder = _ref2.hasBorder;

package/es/components/selectable/selectable_list/selectable_list.js

@@ -491,8 +491,8 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
             (_this$listRef = this.listRef) === null || _this$listRef === void 0 || _this$listRef.scrollToItem(activeOptionIndex, 'auto');
           } else {
             var _this$listBoxRef;
-            var activeOptionId = "#".concat(makeOptionId(activeOptionIndex));
-            var activeOptionEl = (_this$listBoxRef = this.listBoxRef) === null || _this$listBoxRef === void 0 ? void 0 : _this$listBoxRef.querySelector(activeOptionId);
+            var activeOptionId = makeOptionId(activeOptionIndex);
+            var activeOptionEl = (_this$listBoxRef = this.listBoxRef) === null || _this$listBoxRef === void 0 ? void 0 : _this$listBoxRef.querySelector("[id=\"".concat(activeOptionId, "\"]"));
             if (activeOptionEl) {
               var _activeOptionEl$scrol;
               // TODO: we can remove scrollIntoView's conditional chaining once jsdom stubs it
@@ -630,6 +630,12 @@ EuiSelectableList.propTypes = {
        * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
        */
     color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.string.isRequired]),
+    /**
+       * Whether the badge should use filled (more intense) colors.
+       * It has no effect when a non-named color is passed to the `color` prop.
+       * @default false
+       */
+    fill: PropTypes.bool,
     /**
        * Will override any color passed through the `color` prop.
        */

package/es/components/selectable/selectable_list/selectable_list_item.js

@@ -317,6 +317,12 @@ EuiSelectableListItem.propTypes = {
        * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
        */
     color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.string.isRequired]),
+    /**
+       * Whether the badge should use filled (more intense) colors.
+       * It has no effect when a non-named color is passed to the `color` prop.
+       * @default false
+       */
+    fill: PropTypes.bool,
     /**
        * Will override any color passed through the `color` prop.
        */