@elastic/eui 62.2.1 → 64.0.0

package/lib/components/page/page_template.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TEMPLATES = exports.EuiPageTemplate = void 0;
+exports.TEMPLATES = exports.EuiPageTemplate_Deprecated = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _react2 = require("@emotion/react");
+
 var _page = require("./page");
 
 var _page_side_bar = require("./page_side_bar");
@@ -27,7 +29,7 @@ var _services = require("../../services");
 
 var _flex = require("../flex");
 
-var _react2 = require("@emotion/react");
+var _global_styling = require("../../global_styling");
 
 var _excluded = ["template", "restrictWidth", "grow", "paddingSize", "fullHeight", "children", "className", "pageSideBar", "pageSideBarProps", "pageHeader", "pageBodyProps", "pageContentProps", "pageContentBodyProps", "bottomBar", "bottomBarProps", "minHeight"];
 
@@ -48,7 +50,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var TEMPLATES = ['default', 'centeredBody', 'centeredContent', 'empty'];
 exports.TEMPLATES = TEMPLATES;
 
-var EuiPageTemplate = function EuiPageTemplate(_ref) {
+/**
+ * This component has been deprecated in favor of the new
+ * namespaced version. You can still import this component
+ * for a period of time by importing `as EuiPageTemplate`.
+ */
+var EuiPageTemplate_Deprecated = function EuiPageTemplate_Deprecated(_ref) {
   var _pageBodyProps2;
 
   var _ref$template = _ref.template,
@@ -74,9 +81,12 @@ var EuiPageTemplate = function EuiPageTemplate(_ref) {
       minHeight = _ref$minHeight === void 0 ? 460 : _ref$minHeight,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  // BWC page header margin to match padding
+  var headerMargin = /*#__PURE__*/(0, _react2.css)("margin-bottom: ".concat((0, _global_styling.useEuiPaddingSize)(paddingSize)), ";label:headerMargin;");
   /**
    * Full height ~madness~ logic
    */
+
   var canFullHeight = (0, _services.useIsWithinBreakpoints)(['m', 'l', 'xl']) && (template === 'default' || template === 'empty');
   var fullHeightClass = {
     'eui-fullHeight': fullHeight && canFullHeight
@@ -134,18 +144,19 @@ var EuiPageTemplate = function EuiPageTemplate(_ref) {
         grow: grow
       }, rest, {
         style: pageStyle
-      }), (0, _react2.jsx)(_page_side_bar.EuiPageSideBar, _extends({
+      }), (0, _react2.jsx)(_page_side_bar.EuiPageSideBar_Deprecated, _extends({
         sticky: true,
         paddingSize: paddingSize
       }, pageSideBarProps), pageSideBar), (0, _react2.jsx)(_page_body.EuiPageBody, _extends({
         paddingSize: paddingSize
       }, pageBodyProps), pageHeader && (0, _react2.jsx)(_page_header.EuiPageHeader, _extends({
-        restrictWidth: restrictWidth
-      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent, _extends({
+        restrictWidth: restrictWidth,
+        css: headerMargin
+      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent_Deprecated, _extends({
         verticalPosition: "center",
         horizontalPosition: "center",
         paddingSize: paddingSize
-      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody, _extends({
+      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody_Deprecated, _extends({
         restrictWidth: restrictWidth
       }, pageContentBodyProps), children)))) : (0, _react2.jsx)(_page.EuiPage, _extends({
         className: classes,
@@ -158,12 +169,13 @@ var EuiPageTemplate = function EuiPageTemplate(_ref) {
       }, pageBodyProps), pageHeader && (0, _react2.jsx)(_page_header.EuiPageHeader, _extends({
         paddingSize: "none",
         restrictWidth: false,
+        css: headerMargin,
         bottomBorder: true
-      }, pageHeader)), (0, _react2.jsx)(_page_body.EuiPageBody, null, (0, _react2.jsx)(_page_content.EuiPageContent, _extends({
+      }, pageHeader)), (0, _react2.jsx)(_page_body.EuiPageBody, null, (0, _react2.jsx)(_page_content.EuiPageContent_Deprecated, _extends({
         verticalPosition: "center",
         horizontalPosition: "center",
         paddingSize: paddingSize
-      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody, _extends({
+      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody_Deprecated, _extends({
         paddingSize: "none",
         restrictWidth: restrictWidth
       }, pageContentBodyProps), children)))));
@@ -180,21 +192,22 @@ var EuiPageTemplate = function EuiPageTemplate(_ref) {
         grow: grow
       }, rest, {
         style: pageStyle
-      }), (0, _react2.jsx)(_page_side_bar.EuiPageSideBar, _extends({
+      }), (0, _react2.jsx)(_page_side_bar.EuiPageSideBar_Deprecated, _extends({
         sticky: true,
         paddingSize: paddingSize
       }, pageSideBarProps), pageSideBar), (0, _react2.jsx)(_page_body.EuiPageBody, _extends({
         panelled: true,
         paddingSize: paddingSize
       }, pageBodyProps), pageHeader && (0, _react2.jsx)(_page_header.EuiPageHeader, _extends({
-        restrictWidth: restrictWidth
-      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent, _extends({
+        restrictWidth: restrictWidth,
+        css: headerMargin
+      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent_Deprecated, _extends({
         verticalPosition: "center",
         horizontalPosition: "center",
         hasShadow: false,
         color: "subdued",
         paddingSize: paddingSize
-      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody, _extends({
+      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody_Deprecated, _extends({
         restrictWidth: restrictWidth
       }, pageContentBodyProps), children)))) : (0, _react2.jsx)(_page.EuiPage, _extends({
         className: classes,
@@ -204,8 +217,9 @@ var EuiPageTemplate = function EuiPageTemplate(_ref) {
         style: pageStyle
       }), (0, _react2.jsx)(_page_body.EuiPageBody, pageBodyProps, pageHeader && (0, _react2.jsx)(_page_header.EuiPageHeader, _extends({
         paddingSize: paddingSize,
-        restrictWidth: restrictWidth
-      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent, {
+        restrictWidth: restrictWidth,
+        bottomBorder: "extended"
+      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent_Deprecated, {
         role: null,
         borderRadius: "none",
         hasShadow: false,
@@ -213,13 +227,13 @@ var EuiPageTemplate = function EuiPageTemplate(_ref) {
         style: {
           display: 'flex'
         }
-      }, (0, _react2.jsx)(_page_content.EuiPageContent, _extends({
+      }, (0, _react2.jsx)(_page_content.EuiPageContent_Deprecated, _extends({
         verticalPosition: "center",
         horizontalPosition: "center",
         hasShadow: false,
         color: "subdued",
         paddingSize: paddingSize
-      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody, _extends({
+      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody_Deprecated, _extends({
         restrictWidth: restrictWidth
       }, pageContentBodyProps), children)))));
 
@@ -235,20 +249,22 @@ var EuiPageTemplate = function EuiPageTemplate(_ref) {
         grow: grow
       }, rest, {
         style: pageStyle
-      }), (0, _react2.jsx)(_page_side_bar.EuiPageSideBar, _extends({
+      }), (0, _react2.jsx)(_page_side_bar.EuiPageSideBar_Deprecated, _extends({
         sticky: true,
         paddingSize: paddingSize
       }, pageSideBarProps), pageSideBar), (0, _react2.jsx)(_page_body.EuiPageBody, _extends({
         paddingSize: paddingSize
       }, pageBodyProps), pageHeader && (0, _react2.jsx)(_page_header.EuiPageHeader, _extends({
-        restrictWidth: restrictWidth
-      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent, _extends({
+        restrictWidth: restrictWidth,
+        bottomBorder: true,
+        css: headerMargin
+      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent_Deprecated, _extends({
         hasBorder: false,
         hasShadow: false,
         paddingSize: 'none',
         color: 'transparent',
         borderRadius: 'none'
-      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody, _extends({
+      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody_Deprecated, _extends({
         restrictWidth: restrictWidth
       }, pageContentBodyProps), children)))) : (0, _react2.jsx)(_page.EuiPage, _extends({
         className: classes,
@@ -261,14 +277,15 @@ var EuiPageTemplate = function EuiPageTemplate(_ref) {
       }, pageBodyProps), pageHeader && (0, _react2.jsx)(_page_header.EuiPageHeader, _extends({
         paddingSize: "none",
         restrictWidth: false,
+        css: headerMargin,
         bottomBorder: true
-      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent, _extends({
+      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent_Deprecated, _extends({
         hasBorder: false,
         hasShadow: false,
         paddingSize: 'none',
         color: 'transparent',
         borderRadius: 'none'
-      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody, _extends({
+      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody_Deprecated, _extends({
         paddingSize: "none"
       }, pageContentBodyProps), children))));
 
@@ -283,7 +300,7 @@ var EuiPageTemplate = function EuiPageTemplate(_ref) {
         paddingSize: paddingSize,
         position: canFullHeight && fullHeight ? 'static' : 'sticky' // Using uknown here because of the possible conflict with overriding props and position `sticky`
 
-      }, bottomBarProps), (0, _react2.jsx)(_page_content.EuiPageContentBody, {
+      }, bottomBarProps), (0, _react2.jsx)(_page_content.EuiPageContentBody_Deprecated, {
         paddingSize: 'none',
         restrictWidth: restrictWidth
       }, bottomBar)) : undefined;
@@ -293,7 +310,7 @@ var EuiPageTemplate = function EuiPageTemplate(_ref) {
         grow: grow
       }, rest, {
         style: pageStyle
-      }), (0, _react2.jsx)(_page_side_bar.EuiPageSideBar, _extends({
+      }), (0, _react2.jsx)(_page_side_bar.EuiPageSideBar_Deprecated, _extends({
         sticky: true,
         paddingSize: paddingSize
       }, pageSideBarProps), pageSideBar), (0, _react2.jsx)(_page_body.EuiPageBody, _extends({
@@ -305,14 +322,15 @@ var EuiPageTemplate = function EuiPageTemplate(_ref) {
         className: (_pageBodyProps2 = pageBodyProps) === null || _pageBodyProps2 === void 0 ? void 0 : _pageBodyProps2.className
       }, pageHeader && (0, _react2.jsx)(_page_header.EuiPageHeader, _extends({
         bottomBorder: true,
-        restrictWidth: restrictWidth
-      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent, _extends({
+        restrictWidth: restrictWidth,
+        css: headerMargin
+      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent_Deprecated, _extends({
         hasShadow: false,
         hasBorder: false,
         color: 'transparent',
         borderRadius: 'none',
         paddingSize: "none"
-      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody, _extends({
+      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody_Deprecated, _extends({
         restrictWidth: restrictWidth
       }, pageContentBodyProps), children))), bottomBarNode)) : (0, _react2.jsx)(_page.EuiPage, _extends({
         className: classes,
@@ -322,22 +340,23 @@ var EuiPageTemplate = function EuiPageTemplate(_ref) {
         style: pageStyle
       }), (0, _react2.jsx)(_page_body.EuiPageBody, pageBodyProps, pageHeader && (0, _react2.jsx)(_page_header.EuiPageHeader, _extends({
         restrictWidth: restrictWidth,
-        paddingSize: paddingSize
-      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent, _extends({
+        paddingSize: paddingSize,
+        bottomBorder: "extended"
+      }, pageHeader)), (0, _react2.jsx)(_page_content.EuiPageContent_Deprecated, _extends({
         hasBorder: pageHeader === undefined ? false : undefined,
         hasShadow: false,
         paddingSize: 'none',
         color: 'plain',
         borderRadius: 'none'
-      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody, _extends({
+      }, pageContentProps), (0, _react2.jsx)(_page_content.EuiPageContentBody_Deprecated, _extends({
         restrictWidth: restrictWidth,
         paddingSize: paddingSize
       }, pageContentBodyProps), children)), bottomBarNode));
   }
 };
 
-exports.EuiPageTemplate = EuiPageTemplate;
-EuiPageTemplate.propTypes = {
+exports.EuiPageTemplate_Deprecated = EuiPageTemplate_Deprecated;
+EuiPageTemplate_Deprecated.propTypes = {
   /**
      * Choose between 3 types of templates.
      * `default`: Typical layout with nothing centered
@@ -351,7 +370,7 @@ EuiPageTemplate.propTypes = {
      * Padding size will not get applied to the over-arching #EuiPage,
      * but will propogate through all the components to keep them in sync
      */
-  paddingSize: _propTypes.default.any,
+  paddingSize: _propTypes.default.oneOf(["none", "s", "m", "l"]),
 
   /**
      * Optionally include #EuiPageSideBar content.
@@ -364,7 +383,7 @@ EuiPageTemplate.propTypes = {
      */
   pageSideBarProps: _propTypes.default.shape({
     /**
-       * Adds `position: sticky` and affords for any fixed position headers
+       * Adds `position: sticky`
        */
     sticky: _propTypes.default.bool,
 
@@ -374,7 +393,8 @@ EuiPageTemplate.propTypes = {
     paddingSize: _propTypes.default.any,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
   }),
 
   /**
@@ -382,157 +402,28 @@ EuiPageTemplate.propTypes = {
      */
   pageHeader: _propTypes.default.shape({
     /**
-       * Adjust the padding.
-       * When using this setting it's best to be consistent throughout all similar usages
+       * Adjust the overall padding.
        */
     paddingSize: _propTypes.default.any,
-
-    /**
-       * Adds a bottom border to separate it from the content after
-       */
-    bottomBorder: _propTypes.default.bool,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
-
-    /**
-       * Set to false if you don't want the children to stack at small screen sizes.
-       * Set to `reverse` to display the right side content first for the sake of hierarchy (like global time)
-       */
-    responsive: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.oneOf(["reverse"])]),
-
-    /**
-       * Vertical alignment of the left and right side content;
-       * Default is `middle` for custom content, but `top` for when `pageTitle` or `tabs` are included
-       */
-    alignItems: _propTypes.default.any,
-
-    /**
-       * Pass custom an array of content to this side usually up to 3 buttons.
-       * The first button should be primary, usually with `fill` and will be visually displayed as the last item,
-       * but first in the tab order
-       */
-    rightSideItems: _propTypes.default.arrayOf(_propTypes.default.node.isRequired),
-
-    /**
-       * Additional EuiFlexGroup props to pass to the container of the `rightSideItems`
-       */
-    rightSideGroupProps: _propTypes.default.any,
-
-    /**
-       * Custom children will be rendered before the `tabs` unless no `pageTitle` is present, then it will be the last item
-       */
-    children: _propTypes.default.node,
-
-    /**
-       * Position is dependent on existing with a `pageTitle` or `tabs`
-       * Automatically get wrapped in a single paragraph tag inside an EuiText block
-       */
-    description: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.node.isRequired]),
-
-    /**
-       * Wrapped in an `H1` so choose appropriately.
-       * A simple string is best
-       */
-    pageTitle: _propTypes.default.node,
-
-    /**
-       * Additional props to pass to the EuiTitle
-       */
-    pageTitleProps: _propTypes.default.shape({
-      className: _propTypes.default.string,
-      "aria-label": _propTypes.default.string,
-      "data-test-subj": _propTypes.default.string,
-      textTransform: _propTypes.default.any,
-      id: _propTypes.default.string
-    }),
-
-    /**
-       * Optional icon to place to the left of the title
-       */
-    iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "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", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "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", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "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", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "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", "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", "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", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spacesApp", "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", "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", "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]),
-
-    /**
-       * Additional EuiIcon props to apply to the optional icon
-       */
-    iconProps: _propTypes.default.any,
-
-    /**
-       * Optional array breadcrumbs that render before the `pageTitle`
-       */
-    breadcrumbs: _propTypes.default.arrayOf(_propTypes.default.shape({
-      className: _propTypes.default.string,
-      "aria-label": _propTypes.default.string,
-      "data-test-subj": _propTypes.default.string,
-      href: _propTypes.default.string,
-      rel: _propTypes.default.string,
-      onClick: _propTypes.default.func,
-
-      /**
-           * Visible label of the breadcrumb
-           */
-      text: _propTypes.default.node.isRequired,
-
-      /**
-           * Force a max-width on the breadcrumb text
-           */
-      truncate: _propTypes.default.bool,
-
-      /**
-           * Accepts any EuiLink `color` when rendered as one (has `href` or `onClick`)
-           */
-      color: _propTypes.default.any,
-
-      /**
-           * Override the existing `aria-current` which defaults to `page` for the last breadcrumb
-           */
-      "aria-current": _propTypes.default.any
-    }).isRequired),
-
-    /**
-       * Adjust the props of [EuiBreadcrumbs](#/navigation/breadcrumbs)
-       */
-    breadcrumbProps: _propTypes.default.any,
-
-    /**
-       * In-app navigation presented as large borderless tabs.
-       * Accepts an array of `EuiTab` objects;
-       */
-    tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
-      /**
-         * Visible text of the tab
-         */
-      label: _propTypes.default.node.isRequired
-    }).isRequired),
-
-    /**
-       * Any extras to apply to the outer tabs container.
-       * Extends `EuiTabs`
-       */
-    tabsProps: _propTypes.default.shape({
-      className: _propTypes.default.string,
-      "aria-label": _propTypes.default.string,
-      "data-test-subj": _propTypes.default.string,
-
-      /**
-           * ReactNode to render as this component's content
-           */
-      children: _propTypes.default.node,
-
-      /**
-           * Adds a bottom border to separate it from the content after
-           */
-      bottomBorder: _propTypes.default.bool
-    }),
+    css: _propTypes.default.any,
 
     /**
        * Sets the max-width of the page,
-       * set to `true` to use the default size of `1000px (1200 for Amsterdam)`,
+       * set to `true` to use the default size of `1200px`,
        * set to `false` to not restrict the width,
        * set to a number for a custom width in px,
        * set to a string for a custom width in custom measurement.
        */
-    restrictWidth: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.number.isRequired, _propTypes.default.string.isRequired])
+    restrictWidth: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.number.isRequired, _propTypes.default.string.isRequired]),
+
+    /**
+       * Adds a bottom border to separate it from the content after;
+       * Passing `extended` will ensure the border touches the sides of the parent container.
+       */
+    bottomBorder: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.oneOf(["extended"])])
   }),
 
   /**
@@ -542,10 +433,11 @@ EuiPageTemplate.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
        * Sets the max-width of the page,
-       * set to `true` to use the default size of `1000px (1200 for Amsterdam)`,
+       * set to `true` to use the default size of `1200px`,
        * set to `false` to not restrict the width,
        * set to a number for a custom width in px,
        * set to a string for a custom width in custom measurement.
@@ -580,6 +472,7 @@ EuiPageTemplate.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
        * Adds a medium shadow to the panel;
@@ -664,10 +557,11 @@ EuiPageTemplate.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
        * Sets the max-width of the page,
-       * set to `true` to use the default size of `1000px (1200 for Amsterdam)`,
+       * set to `true` to use the default size of `1200px`,
        * set to `false` to not restrict the width,
        * set to a number for a custom width in px,
        * set to a string for a custom width in custom measurement.
@@ -688,6 +582,7 @@ EuiPageTemplate.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
          * How to position the bottom bar against its parent.
@@ -698,7 +593,17 @@ EuiPageTemplate.propTypes = {
          * Whether to wrap in an EuiPortal which appends the component to the body element.
          * Only works if `position` is `fixed`.
          */
-    usePortal: _propTypes.default.bool,
+    usePortal: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
+      /**
+         * ReactNode to render as this component's content
+         */
+      children: _propTypes.default.node.isRequired,
+      insert: _propTypes.default.shape({
+        sibling: _propTypes.default.any.isRequired,
+        position: _propTypes.default.oneOf(["before", "after"]).isRequired
+      }),
+      portalRef: _propTypes.default.func
+    }).isRequired]),
 
     /**
          * Whether the component should apply padding on the document body element to afford for its own displacement height.

package/lib/components/page_template/bottom_bar/page_bottom_bar.js

@@ -0,0 +1,114 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports._EuiPageBottomBar = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _services = require("../../../services");
+
+var _bottom_bar = require("../../bottom_bar");
+
+var _page_section = require("../../page/page_section");
+
+var _excluded = ["children", "paddingSize", "restrictWidth", "parent"];
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1y6dyt1-bar",
+  styles: "overflow:hidden;flex-shrink:0;label:bar;"
+} : {
+  name: "1y6dyt1-bar",
+  styles: "overflow:hidden;flex-shrink:0;label:bar;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _EuiPageBottomBar = function _EuiPageBottomBar(_ref2) {
+  var children = _ref2.children,
+      paddingSize = _ref2.paddingSize,
+      restrictWidth = _ref2.restrictWidth,
+      parent = _ref2.parent,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  // In order for the bottom bar to be placed at the end of the content,
+  // it must know what parent element to insert into
+  var _useState = (0, _react2.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasValidAnchor = _useState2[0],
+      setHasValidAnchor = _useState2[1];
+
+  var animationFrameId = (0, _react2.useRef)();
+  var parentNode = (0, _react2.useRef)(null);
+  (0, _react2.useEffect)(function () {
+    animationFrameId.current = window.requestAnimationFrame(function () {
+      parentNode.current = (0, _services.findElementBySelectorOrRef)(parent);
+      setHasValidAnchor(parentNode.current ? true : false);
+    });
+    return function () {
+      animationFrameId.current && window.cancelAnimationFrame(animationFrameId.current);
+    };
+  }, [parent]);
+  var bar = (0, _react.jsx)(_bottom_bar.EuiBottomBar, _extends({
+    paddingSize: 'none',
+    position: "sticky" // Hide the overflow in case of larger flex margins than padding
+    ,
+    css: _ref // Using unknown here because of the possible conflict with overriding props and position `sticky`
+
+  }, rest), (0, _react.jsx)(_page_section.EuiPageSection, {
+    paddingSize: paddingSize,
+    restrictWidth: restrictWidth
+  }, children));
+  return hasValidAnchor && parentNode.current ? /*#__PURE__*/(0, _reactDom.createPortal)(bar, parentNode.current) : bar;
+};
+
+exports._EuiPageBottomBar = _EuiPageBottomBar;
+_EuiPageBottomBar.propTypes = {
+  /**
+     * The reference id of the element to insert into
+     */
+  parent: _propTypes.default.string,
+
+  /**
+     * Sets the max-width of the page,
+     * set to `true` to use the default size of `1200px`,
+     * set to `false` to not restrict the width,
+     * set to a number for a custom width in px,
+     * set to a string for a custom width in custom measurement.
+     */
+  restrictWidth: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.number.isRequired, _propTypes.default.string.isRequired])
+};