@elastic/eui 88.1.0 → 88.3.0

package/optimize/es/components/icon/assets/transitionTopOut.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconTransitionTopOut = function EuiIconTransitionTopOut(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M9.146 9.854a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.708 0l-2 2a.5.5 0 1 0 .708.708L7 8.707V12.5a.5.5 0 0 0 1 0V8.707l1.146 1.147Z"
+  }), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M15 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2Zm-1 2.707V5h-1.293l-4-4h1.586L14 4.707ZM1 6h13v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6Zm1.293-1H1V3.707L2.293 5Zm3 0H3.707L1 2.293V2a1 1 0 0 1 .455-.838L5.293 5Zm3 0H6.707l-4-4h1.586l4 4Zm3 0H9.707l-4-4h1.586l4 4ZM14 3.293V2a1 1 0 0 0-1-1h-1.293L14 3.293Z"
+  }));
+};
+export var icon = EuiIconTransitionTopOut;

package/optimize/es/components/icon/icon_map.js

@@ -160,6 +160,7 @@ export var typeToPathMap = {
   globe: 'globe',
   grab: 'grab',
   grabHorizontal: 'grab_horizontal',
+  grabOmnidirectional: 'grabOmnidirectional',
   graphApp: 'app_graph',
   grid: 'grid',
   grokApp: 'app_grok',
@@ -389,6 +390,10 @@ export var typeToPathMap = {
   timeRefresh: 'timeRefresh',
   timeslider: 'timeslider',
   training: 'training',
+  transitionLeftIn: 'transitionLeftIn',
+  transitionLeftOut: 'transitionLeftOut',
+  transitionTopIn: 'transitionTopIn',
+  transitionTopOut: 'transitionTopOut',
   trash: 'trash',
   unfold: 'unfold',
   unlink: 'unlink',

package/optimize/es/components/index.js

@@ -88,6 +88,7 @@ export * from './basic_table';
 export * from './tabs';
 export * from './text';
 export * from './text_diff';
+export * from './text_truncate';
 export * from './timeline';
 export * from './title';
 export * from './toast';

package/optimize/es/components/inline_edit/inline_edit_form.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children", "sizes", "defaultValue", "value", "onChange", "onCancel", "placeholder", "inputAriaLabel", "startWithEditOpen", "readModeProps", "editModeProps", "isLoading", "isInvalid", "onSave", "isReadOnly"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -10,7 +12,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
  * Side Public License, v 1.
  */
 
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import { EuiFormRow, EuiFieldText } from '../form';
 import { euiFormVariables } from '../form/form.styles';
@@ -41,8 +43,14 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
   var className = _ref.className,
     children = _ref.children,
     sizes = _ref.sizes,
-    defaultValue = _ref.defaultValue,
-    placeholder = _ref.placeholder,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+    _ref$value = _ref.value,
+    controlledValue = _ref$value === void 0 ? '' : _ref$value,
+    _onChange = _ref.onChange,
+    onCancel = _ref.onCancel,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
     inputAriaLabel = _ref.inputAriaLabel,
     startWithEditOpen = _ref.startWithEditOpen,
     readModeProps = _ref.readModeProps,
@@ -51,7 +59,8 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     isInvalid = _ref.isInvalid,
     onSave = _ref.onSave,
-    isReadOnly = _ref.isReadOnly;
+    isReadOnly = _ref.isReadOnly,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiInlineEdit', className);
   var euiTheme = useEuiTheme();
   var _euiFormVariables = euiFormVariables(euiTheme),
@@ -78,10 +87,19 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     editModeValue = _useState4[0],
     setEditModeValue = _useState4[1];
-  var _useState5 = useState(defaultValue),
+
+  // readModeValue accepts controlledValue here to provide a reliable backup for the onCancel callback
+  var _useState5 = useState(controlledValue || defaultValue),
     _useState6 = _slicedToArray(_useState5, 2),
     readModeValue = _useState6[0],
     setReadModeValue = _useState6[1];
+  var value = useMemo(function () {
+    if (controlledValue) {
+      return controlledValue;
+    } else {
+      return isEditing ? editModeValue : readModeValue || placeholder;
+    }
+  }, [controlledValue, editModeValue, readModeValue, isEditing, placeholder]);
   var readModeStyles = euiInlineEditReadModeStyles(euiTheme);
   var readModeCssStyles = [readModeStyles.euiInlineEditReadMode, isReadOnly && readModeStyles.isReadOnly, placeholder && !readModeValue && readModeStyles.hasPlaceholder];
   var activateEditMode = function activateEditMode() {
@@ -94,6 +112,7 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
   };
   var cancelInlineEdit = function cancelInlineEdit() {
     setEditModeValue(readModeValue);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel(readModeValue);
     setIsEditing(false);
     requestAnimationFrame(function () {
       var _readModeFocusRef$cur;
@@ -110,7 +129,7 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
               _context.next = 12;
               break;
             }
-            onSaveReturn = onSave(editModeValue);
+            onSaveReturn = onSave(value);
             if (!(onSaveReturn instanceof Promise)) {
               _context.next = 8;
               break;
@@ -174,18 +193,19 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
     error: isInvalid && (editModeProps === null || editModeProps === void 0 ? void 0 : (_editModeProps$formRo = editModeProps.formRowProps) === null || _editModeProps$formRo === void 0 ? void 0 : _editModeProps$formRo.error)
   }, editModeProps === null || editModeProps === void 0 ? void 0 : editModeProps.formRowProps), ___EmotionJSX(EuiFieldText, _extends({
     fullWidth: true,
-    value: editModeValue,
+    value: value,
     "aria-label": inputAriaLabel,
     compressed: sizes.compressed,
     isInvalid: isInvalid,
     isLoading: isLoading,
     "data-test-subj": "euiInlineEditModeInput",
-    placeholder: placeholder
+    placeholder: placeholder || undefined // Opt not to render the prop entirely if an empty string is passed
   }, editModeProps === null || editModeProps === void 0 ? void 0 : editModeProps.inputProps, {
     inputRef: setEditModeRefs,
     onChange: function onChange(e) {
       var _editModeProps$inputP2, _editModeProps$inputP3;
       setEditModeValue(e.target.value);
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(e);
       editModeProps === null || editModeProps === void 0 ? void 0 : (_editModeProps$inputP2 = editModeProps.inputProps) === null || _editModeProps$inputP2 === void 0 ? void 0 : (_editModeProps$inputP3 = _editModeProps$inputP2.onChange) === null || _editModeProps$inputP3 === void 0 ? void 0 : _editModeProps$inputP3.call(_editModeProps$inputP2, e);
     },
     onKeyDown: function onKeyDown(e) {
@@ -259,7 +279,7 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
     "data-test-subj": "euiInlineReadModeButton",
     disabled: isReadOnly,
     css: readModeCssStyles,
-    title: readModeValue || placeholder
+    title: value
   }, readModeProps, {
     buttonRef: setReadModeRefs,
     "aria-describedby": classNames(readModeDescribedById, readModeProps === null || readModeProps === void 0 ? void 0 : readModeProps['aria-describedby']),
@@ -268,14 +288,14 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
       activateEditMode();
       readModeProps === null || readModeProps === void 0 ? void 0 : (_readModeProps$onClic = readModeProps.onClick) === null || _readModeProps$onClic === void 0 ? void 0 : _readModeProps$onClic.call(readModeProps, e);
     }
-  }), children(readModeValue || placeholder)), ___EmotionJSX("span", {
+  }), children(value)), ___EmotionJSX("span", {
     id: readModeDescribedById,
     hidden: true
   }, !isReadOnly && ___EmotionJSX(EuiI18n, {
     token: "euiInlineEditForm.activateEditModeDescription",
     default: "Click to edit this text inline."
   })));
-  return ___EmotionJSX("div", {
+  return ___EmotionJSX("div", _extends({
     className: classes
-  }, isEditing ? editModeForm : readModeElement);
+  }, rest), isEditing ? editModeForm : readModeElement);
 };

package/optimize/es/components/inline_edit/inline_edit_text.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "size", "defaultValue", "placeholder", "inputAriaLabel", "startWithEditOpen", "readModeProps", "editModeProps", "isLoading", "isInvalid", "isReadOnly"];
+var _excluded = ["className", "size", "readModeProps", "isReadOnly"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
@@ -23,14 +23,7 @@ export var EuiInlineEditText = function EuiInlineEditText(_ref) {
   var className = _ref.className,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
-    defaultValue = _ref.defaultValue,
-    placeholder = _ref.placeholder,
-    inputAriaLabel = _ref.inputAriaLabel,
-    startWithEditOpen = _ref.startWithEditOpen,
     _readModeProps = _ref.readModeProps,
-    editModeProps = _ref.editModeProps,
-    isLoading = _ref.isLoading,
-    isInvalid = _ref.isInvalid,
     isReadOnly = _ref.isReadOnly,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiInlineEditText', className);
@@ -45,22 +38,13 @@ export var EuiInlineEditText = function EuiInlineEditText(_ref) {
       role: 'paragraph'
     });
   }, [_readModeProps, isReadOnly]);
-  var formProps = {
-    sizes: sizes,
-    defaultValue: defaultValue,
-    placeholder: placeholder,
-    inputAriaLabel: inputAriaLabel,
-    startWithEditOpen: startWithEditOpen,
-    readModeProps: readModeProps,
-    editModeProps: editModeProps,
-    isLoading: isLoading,
-    isInvalid: isInvalid,
-    isReadOnly: isReadOnly
-  };
   return ___EmotionJSX(EuiInlineEditForm, _extends({
     className: classes,
-    css: cssStyles
-  }, rest, formProps), function (textReadModeValue) {
+    css: cssStyles,
+    readModeProps: readModeProps,
+    isReadOnly: isReadOnly,
+    sizes: sizes
+  }, rest), function (textReadModeValue) {
     return ___EmotionJSX(EuiText, {
       size: size,
       className: "eui-textTruncate"

package/optimize/es/components/inline_edit/inline_edit_title.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "size", "heading", "defaultValue", "placeholder", "inputAriaLabel", "startWithEditOpen", "readModeProps", "editModeProps", "isLoading", "isInvalid", "isReadOnly"];
+var _excluded = ["className", "size", "heading", "readModeProps", "isReadOnly"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
@@ -25,14 +25,7 @@ export var EuiInlineEditTitle = function EuiInlineEditTitle(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
     heading = _ref.heading,
-    defaultValue = _ref.defaultValue,
-    placeholder = _ref.placeholder,
-    inputAriaLabel = _ref.inputAriaLabel,
-    startWithEditOpen = _ref.startWithEditOpen,
     _readModeProps = _ref.readModeProps,
-    editModeProps = _ref.editModeProps,
-    isLoading = _ref.isLoading,
-    isInvalid = _ref.isInvalid,
     isReadOnly = _ref.isReadOnly,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiInlineEditTitle', className);
@@ -52,22 +45,13 @@ export var EuiInlineEditTitle = function EuiInlineEditTitle(_ref) {
       role: 'paragraph'
     });
   }, [_readModeProps, isReadOnly, heading]);
-  var formProps = {
-    sizes: sizes,
-    defaultValue: defaultValue,
-    placeholder: placeholder,
-    inputAriaLabel: inputAriaLabel,
-    startWithEditOpen: startWithEditOpen,
-    readModeProps: readModeProps,
-    editModeProps: editModeProps,
-    isLoading: isLoading,
-    isInvalid: isInvalid,
-    isReadOnly: isReadOnly
-  };
   return ___EmotionJSX(EuiInlineEditForm, _extends({
     css: cssStyles,
-    className: classes
-  }, rest, formProps), function (titleReadModeValue) {
+    className: classes,
+    readModeProps: readModeProps,
+    isReadOnly: isReadOnly,
+    sizes: sizes
+  }, rest), function (titleReadModeValue) {
     return ___EmotionJSX(EuiTitle, {
       size: size,
       className: "eui-textTruncate"

package/optimize/es/components/list_group/list_group_item.js

@@ -170,7 +170,7 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
     }, toolTipProps, {
       anchorClassName: anchorClasses,
       anchorProps: anchorPropsAndCss
-    }), itemContent));
+    }), ___EmotionJSX(React.Fragment, null, itemContent, extraActionNode)));
   } else {
     itemContent = ___EmotionJSX("li", {
       className: classes,

package/optimize/es/components/overlay_mask/overlay_mask.styles.js

@@ -14,6 +14,6 @@ export var euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
   return {
     euiOverlayMask: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('left', 0), " ", logicalCSS('right', 0), " ", logicalCSS('bottom', 0), " display:flex;align-items:center;justify-content:center;", logicalCSS('padding-bottom', '10vh'), " animation:", euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", transparentize(euiTheme.colors.ink, 0.5), ";;label:euiOverlayMask;"),
     aboveHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.mask, ";;label:aboveHeader;"),
-    belowHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.maskBelowHeader, ";", logicalCSS('top', "".concat(euiTheme.base * 3, "px")), ";;label:belowHeader;")
+    belowHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.maskBelowHeader, ";", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;")
   };
 };

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

@@ -45,10 +45,8 @@ export var EuiPageSidebar = function EuiPageSidebar(_ref) {
   useLayoutEffect(function () {
     var updatedStyles = _objectSpread(_objectSpread({}, style), logicalStyle('min-width', isResponding ? '100%' : minWidth));
     if (sticky) {
-      var _document$body$datase;
-      var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
-      var offset = _typeof(sticky) === 'object' ? sticky === null || sticky === void 0 ? void 0 : sticky.offset : themeContext.euiTheme.base * 3 * euiHeaderFixedCounter;
-      updatedStyles = _objectSpread(_objectSpread(_objectSpread({}, updatedStyles), logicalStyle('top', offset)), logicalStyle('max-height', "calc(100vh - ".concat(offset, "px)")));
+      var offset = _typeof(sticky) === 'object' ? "".concat(sticky === null || sticky === void 0 ? void 0 : sticky.offset, "px") : 'var(--euiFixedHeadersOffset, 0)';
+      updatedStyles = _objectSpread(_objectSpread(_objectSpread({}, updatedStyles), logicalStyle('top', offset)), logicalStyle('max-height', "calc(100vh - ".concat(offset, ")")));
     }
     setInlineStyles(updatedStyles);
   }, [style, sticky, themeContext.euiTheme.base, isResponding, minWidth]);

package/optimize/es/components/page_template/page_template.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "responsive", "restrictWidth", "paddingSize", "grow", "bottomBorder", "offset", "panelled", "contentBorder", "component", "mainProps", "className", "minHeight"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -13,14 +12,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useContext } from 'react';
 import classNames from 'classnames';
 import { _EuiPageOuter as EuiPageOuter } from './outer';
 import { _EuiPageInner as EuiPageInner } from './inner';
 import { _EuiPageBottomBar as EuiPageBottomBar } from './bottom_bar/page_bottom_bar';
 import { _EuiPageEmptyPrompt as EuiPageEmptyPrompt } from './empty_prompt/page_empty_prompt';
 import { EuiPageHeader, EuiPageSection, EuiPageSidebar } from '../page';
-import { useEuiTheme, useGeneratedHtmlId } from '../../services';
+import { useGeneratedHtmlId } from '../../services';
 import { logicalStyle } from '../../global_styling';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TemplateContext = /*#__PURE__*/createContext({
@@ -29,14 +28,6 @@ export var TemplateContext = /*#__PURE__*/createContext({
   emptyPrompt: {},
   bottomBar: {}
 });
-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
@@ -52,7 +43,7 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     _ref$grow = _ref.grow,
     grow = _ref$grow === void 0 ? true : _ref$grow,
     bottomBorder = _ref.bottomBorder,
-    _offset = _ref.offset,
+    offset = _ref.offset,
     panelled = _ref.panelled,
     contentBorder = _ref.contentBorder,
     component = _ref.component,
@@ -61,14 +52,6 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     _ref$minHeight = _ref.minHeight,
     minHeight = _ref$minHeight === void 0 ? '460px' : _ref$minHeight,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useEuiTheme = useEuiTheme(),
-    euiTheme = _useEuiTheme.euiTheme;
-  var _useState = useState(function () {
-      return _offset !== null && _offset !== void 0 ? _offset : calculateOffset(euiTheme.base);
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    offset = _useState2[0],
-    setOffset = _useState2[1];
   var templateContext = useContext(TemplateContext);
 
   // Used as a target to insert the bottom bar component
@@ -76,11 +59,6 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     prefix: 'EuiPageTemplateInner',
     conditionalId: mainProps === null || mainProps === void 0 ? void 0 : mainProps.id
   });
-  useEffect(function () {
-    if (_offset === undefined) {
-      setOffset(calculateOffset(euiTheme.base));
-    }
-  }, [_offset, euiTheme.base]);
 
   // Sections include page header
   var sections = [];
@@ -139,7 +117,7 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   });
   var _minHeight = grow ? "max(".concat(minHeight, ", 100vh)") : minHeight;
   var classes = classNames('euiPageTemplate', className);
-  var pageStyle = _objectSpread(_objectSpread(_objectSpread({}, logicalStyle('min-height', _minHeight)), logicalStyle('padding-top', offset)), rest.style);
+  var pageStyle = _objectSpread(_objectSpread(_objectSpread({}, logicalStyle('min-height', _minHeight)), logicalStyle('padding-top', offset !== null && offset !== void 0 ? offset : 'var(--euiFixedHeadersOffset, 0)')), rest.style);
   templateContext.header = getHeaderProps();
   templateContext.section = getSectionProps();
   templateContext.emptyPrompt = {

package/optimize/es/components/panel/split_panel/split_panel.js

@@ -12,8 +12,9 @@ var _excluded = ["children", "className"],
 
 import React from 'react';
 import classNames from 'classnames';
-import { EuiPanel } from '../panel';
 import { useIsWithinBreakpoints } from '../../../services/breakpoint';
+import { EuiPanel } from '../panel';
+import { euiSplitPanelOuterStyles, euiSplitPanelInnerStyles } from './split_panel.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 /**
  * Consumed via `EuiSplitPanel.Inner`.
@@ -32,7 +33,8 @@ export var _EuiSplitPanelInner = function _EuiSplitPanelInner(_ref) {
   };
   return ___EmotionJSX(EuiPanel, _extends({
     element: "div",
-    className: classes
+    className: classes,
+    css: euiSplitPanelInnerStyles.euiSplitPanelInner
   }, panelProps, rest), children);
 };
 /**
@@ -48,14 +50,14 @@ export var _EuiSplitPanelOuter = function _EuiSplitPanelOuter(_ref2) {
     responsive = _ref2$responsive === void 0 ? ['xs', 's'] : _ref2$responsive,
     rest = _objectWithoutProperties(_ref2, _excluded2);
   var isResponsive = useIsWithinBreakpoints(responsive, !!responsive);
-  var classes = classNames('euiSplitPanel', {
-    'euiSplitPanel--row': direction === 'row',
-    'euiSplitPanel-isResponsive': isResponsive
-  }, className);
+  var styles = euiSplitPanelOuterStyles;
+  var cssStyles = [styles.euiSplitPanelOuter, direction === 'row' && !isResponsive ? styles.row : styles.column];
+  var classes = classNames('euiSplitPanel', className);
   return ___EmotionJSX(EuiPanel, _extends({
     paddingSize: "none",
     grow: false,
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), children);
 };
 export var EuiSplitPanel = {

package/optimize/es/components/panel/split_panel/split_panel.styles.js

@@ -0,0 +1,40 @@
+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)."; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
+export var euiSplitPanelOuterStyles = {
+  euiSplitPanelOuter: /*#__PURE__*/css("display:flex;", logicalCSS('min-width', 0), " overflow:hidden;;label:euiSplitPanelOuter;"),
+  column: process.env.NODE_ENV === "production" ? {
+    name: "ll8kmq-column",
+    styles: "flex-direction:column;label:column;"
+  } : {
+    name: "ll8kmq-column",
+    styles: "flex-direction:column;label:column;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  row: process.env.NODE_ENV === "production" ? {
+    name: "15mvjmo-row",
+    styles: "flex-direction:row;label:row;"
+  } : {
+    name: "15mvjmo-row",
+    styles: "flex-direction:row;label:row;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
+};
+export var euiSplitPanelInnerStyles = {
+  euiSplitPanelInner: process.env.NODE_ENV === "production" ? {
+    name: "1k62yu6-euiSplitPanelInner",
+    styles: "flex-basis:0%;transform:none!important;box-shadow:none!important;label:euiSplitPanelInner;"
+  } : {
+    name: "1k62yu6-euiSplitPanelInner",
+    styles: "flex-basis:0%;transform:none!important;box-shadow:none!important;label:euiSplitPanelInner;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
+};

package/optimize/es/components/text_truncate/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { EuiTextTruncate } from './text_truncate';
+export { TruncationUtilsWithDOM, TruncationUtilsWithCanvas } from './utils';