@elastic/eui 93.1.1 → 93.2.0

package/optimize/lib/components/code/code_syntax.styles.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiCodeSyntaxVariables = void 0;
-var _react = require("react");
+exports.euiCodeSyntaxVariables = void 0;
 var _services = require("../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -16,41 +15,37 @@ var _services = require("../../services");
 
 var visColors = (0, _services.euiPaletteColorBlind)();
 
-// These variables are computationally expensive, so it needs
-// to be a hook in order to memoize it per theme
-var useEuiCodeSyntaxVariables = function useEuiCodeSyntaxVariables() {
-  var _useEuiTheme = (0, _services.useEuiTheme)(),
-    euiTheme = _useEuiTheme.euiTheme;
-  return (0, _react.useMemo)(function () {
-    var backgroundColor = euiTheme.colors.lightestShade;
-    return {
-      backgroundColor: backgroundColor,
-      color: (0, _services.makeHighContrastColor)(euiTheme.colors.text)(backgroundColor),
-      inlineCodeColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
-      selectedBackgroundColor: 'inherit',
-      commentColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
-      selectorTagColor: 'inherit',
-      stringColor: (0, _services.makeHighContrastColor)(visColors[2])(backgroundColor),
-      tagColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
-      nameColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
-      numberColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
-      keywordColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
-      functionTitleColor: 'inherit',
-      typeColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
-      attributeColor: 'inherit',
-      symbolColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
-      paramsColor: 'inherit',
-      metaColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
-      titleColor: (0, _services.makeHighContrastColor)(visColors[7])(backgroundColor),
-      sectionColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
-      additionColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
-      deletionColor: (0, _services.makeHighContrastColor)(euiTheme.colors.danger)(backgroundColor),
-      selectorClassColor: 'inherit',
-      selectorIdColor: 'inherit',
-      get tokensCss() {
-        return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: .7;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ".concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
-      }
-    };
-  }, [euiTheme]);
+// These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
+var euiCodeSyntaxVariables = function euiCodeSyntaxVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  var backgroundColor = euiTheme.colors.lightestShade;
+  return {
+    backgroundColor: backgroundColor,
+    color: (0, _services.makeHighContrastColor)(euiTheme.colors.text)(backgroundColor),
+    inlineCodeColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
+    selectedBackgroundColor: 'inherit',
+    commentColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
+    selectorTagColor: 'inherit',
+    stringColor: (0, _services.makeHighContrastColor)(visColors[2])(backgroundColor),
+    tagColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
+    nameColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
+    numberColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
+    keywordColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
+    functionTitleColor: 'inherit',
+    typeColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
+    attributeColor: 'inherit',
+    symbolColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
+    paramsColor: 'inherit',
+    metaColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
+    titleColor: (0, _services.makeHighContrastColor)(visColors[7])(backgroundColor),
+    sectionColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
+    additionColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
+    deletionColor: (0, _services.makeHighContrastColor)(euiTheme.colors.danger)(backgroundColor),
+    selectorClassColor: 'inherit',
+    selectorIdColor: 'inherit',
+    get tokensCss() {
+      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: .7;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ".concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
+    }
+  };
 };
-exports.useEuiCodeSyntaxVariables = useEuiCodeSyntaxVariables;
+exports.euiCodeSyntaxVariables = euiCodeSyntaxVariables;

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

@@ -157,12 +157,15 @@ var useVirtualizeContainerWidth = function useVirtualizeContainerWidth(virtualiz
   }, [virtualizeContainer === null || virtualizeContainer === void 0 ? void 0 : virtualizeContainer.clientWidth]);
   (0, _react.useEffect)(function () {
     // wait for layout to settle, then measure virtualize container
-    setTimeout(function () {
+    var timerId = setTimeout(function () {
       if (virtualizeContainer !== null && virtualizeContainer !== void 0 && virtualizeContainer.clientWidth) {
         var containerWidth = virtualizeContainer.clientWidth;
         setVirtualizeContainerWidth(containerWidth);
       }
     }, 100);
+    return function () {
+      return clearTimeout(timerId);
+    };
   }, [pageSize, virtualizeContainer]);
 
   // Use clientWidth of the virtualization container to take scroll bar into account

package/optimize/lib/components/icon/assets/diff.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiIconDiff = function EuiIconDiff(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    d: "M5 1.5a.5.5 0 0 0-1 0V4H1.5a.5.5 0 0 0 0 1H4v2.5a.5.5 0 0 0 1 0V5h2.5a.5.5 0 0 0 0-1H5V1.5Zm3 10a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm4.854-7.646a.5.5 0 0 0-.708-.708l-9 9a.5.5 0 0 0 .708.708l9-9Z"
+  }));
+};
+var icon = EuiIconDiff;
+exports.icon = icon;

package/optimize/lib/components/icon/assets/new_chat.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiIconNewChat = function EuiIconNewChat(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    d: "M8 4a.5.5 0 0 1 .5.5V6H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V7H6a.5.5 0 0 1 0-1h1.5V4.5A.5.5 0 0 1 8 4Z"
+  }), (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M1 4a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 15 4v5a2.5 2.5 0 0 1-2.5 2.5H7.707L4.5 14.707V11.5h-1A2.5 2.5 0 0 1 1 9V4Zm2.5-1.5A1.5 1.5 0 0 0 2 4v5a1.5 1.5 0 0 0 1.5 1.5h2v1.793L7.293 10.5H12.5A1.5 1.5 0 0 0 14 9V4a1.5 1.5 0 0 0-1.5-1.5h-9Z",
+    clipRule: "evenodd"
+  }));
+};
+var icon = EuiIconNewChat;
+exports.icon = icon;

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

@@ -87,6 +87,7 @@ var typeToPathMap = {
   database: 'database',
   desktop: 'desktop',
   devToolsApp: 'app_devtools',
+  diff: 'diff',
   discoverApp: 'app_discover',
   discuss: 'discuss',
   document: 'document',
@@ -308,6 +309,7 @@ var typeToPathMap = {
   moon: 'moon',
   namespace: 'namespace',
   nested: 'nested',
+  newChat: 'new_chat',
   node: 'node',
   notebookApp: 'app_notebook',
   number: 'number',

package/optimize/lib/components/icon/svgs/diff.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5 1.5a.5.5 0 0 0-1 0V4H1.5a.5.5 0 0 0 0 1H4v2.5a.5.5 0 0 0 1 0V5h2.5a.5.5 0 0 0 0-1H5V1.5Zm3 10a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm4.854-7.646a.5.5 0 0 0-.708-.708l-9 9a.5.5 0 0 0 .708.708l9-9Z"/></svg>

package/optimize/lib/components/icon/svgs/new_chat.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16"  xmlns="http://www.w3.org/2000/svg">
+<path d="M8 4C8.27614 4 8.5 4.22386 8.5 4.5V6H10C10.2761 6 10.5 6.22386 10.5 6.5C10.5 6.77614 10.2761 7 10 7H8.5V8.5C8.5 8.77614 8.27614 9 8 9C7.72386 9 7.5 8.77614 7.5 8.5V7H6C5.72386 7 5.5 6.77614 5.5 6.5C5.5 6.22386 5.72386 6 6 6H7.5V4.5C7.5 4.22386 7.72386 4 8 4Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 4C1 2.61929 2.11929 1.5 3.5 1.5H12.5C13.8807 1.5 15 2.61929 15 4V9C15 10.3807 13.8807 11.5 12.5 11.5H7.70711L4.5 14.7071V11.5H3.5C2.11929 11.5 1 10.3807 1 9V4ZM3.5 2.5C2.67157 2.5 2 3.17157 2 4V9C2 9.82843 2.67157 10.5 3.5 10.5H5.5V12.2929L7.29289 10.5H12.5C13.3284 10.5 14 9.82843 14 9V4C14 3.17157 13.3284 2.5 12.5 2.5H3.5Z" />
+</svg>

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

@@ -16,7 +16,7 @@ var _global_styling = require("../../../global_styling");
 var _services = require("../../../services");
 var _page_sidebar = require("./page_sidebar.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "sticky", "paddingSize", "minWidth", "responsive", "style"];
+var _excluded = ["children", "className", "sticky", "paddingSize", "minWidth", "responsive", "hasEmbellish", "style"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -39,12 +39,14 @@ var EuiPageSidebar = function EuiPageSidebar(_ref) {
     minWidth = _ref$minWidth === void 0 ? 248 : _ref$minWidth,
     _ref$responsive = _ref.responsive,
     responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
+    _ref$hasEmbellish = _ref.hasEmbellish,
+    hasEmbellish = _ref$hasEmbellish === void 0 ? false : _ref$hasEmbellish,
     style = _ref.style,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var themeContext = (0, _services.useEuiTheme)();
   var styles = (0, _page_sidebar.euiPageSidebarStyles)(themeContext);
   var isResponding = (0, _services.useIsWithinBreakpoints)(responsive);
-  var cssStyles = [styles.euiPageSidebar, !isResponding && sticky && styles.sticky, (0, _global_styling.useEuiPaddingCSS)()[paddingSize]];
+  var cssStyles = [styles.euiPageSidebar, !isResponding && sticky && styles.sticky, hasEmbellish && styles.embellish, (0, _global_styling.useEuiPaddingCSS)()[paddingSize]];
 
   // Inline styles for setting up width and sticky offsets
   var _useState = (0, _react.useState)(_objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth))),

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiPageSidebarStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 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
@@ -22,11 +23,14 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiPageSidebarStyles = function euiPageSidebarStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var embellishColor = (0, _services.transparentize)(euiTheme.colors.lightShade, 0.3);
   return {
     euiPageSidebar: _ref,
     sticky: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScroll)(euiThemeContext, {
       height: 'auto'
-    }), " flex-grow:1;position:sticky;;label:sticky;")
+    }), " flex-grow:1;position:sticky;;label:sticky;"),
+    embellish: /*#__PURE__*/(0, _react.css)("background:linear-gradient(\n          160deg,\n          ", embellishColor, " 0,\n          ", embellishColor, " ", euiTheme.size.xl, ",\n          transparent 0\n        ),linear-gradient(\n          175deg,\n          ", embellishColor, " 0,\n          ", embellishColor, " ", euiTheme.size.base, ",\n          transparent 0\n        );;label:embellish;")
   };
 };
 exports.euiPageSidebarStyles = euiPageSidebarStyles;

package/optimize/lib/components/page_template/page_template.js

@@ -105,7 +105,7 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
       restrictWidth: restrictWidth,
       paddingSize: paddingSize,
       // pageInnerId may contain colons that are parsed as pseudo-elements if not escaped
-      parent: "#".concat(CSS.escape(pageInnerId))
+      parent: "#".concat(pageInnerId.replaceAll(':', '\\:'))
     };
   };
   var innerPanelled = function innerPanelled() {

package/optimize/lib/components/side_nav/_side_nav_heading.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiSideNavHeading = void 0;
+var _react = require("@emotion/react");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react2 = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
+var _title = require("../title");
+var _accessibility = require("../accessibility");
+var _excluded = ["children", "id", "className", "element", "screenReaderOnly", "size", "textTransform"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var EuiSideNavHeading = function EuiSideNavHeading(_ref) {
+  var children = _ref.children,
+    id = _ref.id,
+    className = _ref.className,
+    _ref$element = _ref.element,
+    HeadingElement = _ref$element === void 0 ? 'h2' : _ref$element,
+    _ref$screenReaderOnly = _ref.screenReaderOnly,
+    screenReaderOnly = _ref$screenReaderOnly === void 0 ? false : _ref$screenReaderOnly,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'xs' : _ref$size,
+    textTransform = _ref.textTransform,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _classnames.default)('euiSideNav__heading', className);
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
+  return screenReaderOnly ? (0, _react.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react.jsx)(HeadingElement, (0, _extends2.default)({
+    id: id,
+    className: classes
+  }, rest), children)) : (0, _react.jsx)(_title.EuiTitle, {
+    size: size,
+    textTransform: textTransform
+  }, (0, _react.jsx)(HeadingElement, (0, _extends2.default)({
+    id: id,
+    className: classes,
+    css: /*#__PURE__*/(0, _react.css)({
+      marginBlockEnd: euiTheme.size.l
+    }, ";label:EuiSideNavHeading;")
+  }, rest), children));
+};
+exports.EuiSideNavHeading = EuiSideNavHeading;

package/optimize/lib/components/side_nav/side_nav.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiSideNav = void 0;
+exports.EuiSideNavClass = exports.EuiSideNav = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -17,16 +17,16 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _side_nav_item = require("./side_nav_item");
 var _button = require("../button");
-var _title = require("../title");
-var _accessibility = require("../accessibility");
+var _i18n = require("../i18n");
 var _services = require("../../services");
 var _responsive = require("../responsive");
+var _side_nav_heading = require("./_side_nav_heading");
+var _side_nav_item = require("./side_nav_item");
+var _side_nav = require("./side_nav.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["id", "name", "isSelected", "items", "icon", "onClick", "href", "forceOpen"],
-  _excluded2 = ["className", "items", "toggleOpenOnMobile", "isOpenOnMobile", "mobileTitle", "mobileBreakpoints", "renderItem", "truncate", "heading", "headingProps"],
-  _excluded3 = ["screenReaderOnly", "element"];
+  _excluded2 = ["className", "items", "toggleOpenOnMobile", "isOpenOnMobile", "mobileTitle", "mobileBreakpoints", "renderItem", "truncate", "heading", "headingProps", "theme"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -37,12 +37,12 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
                                                                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                                                                            */
-var EuiSideNav = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(EuiSideNav, _Component);
-  var _super = _createSuper(EuiSideNav);
-  function EuiSideNav() {
+var EuiSideNavClass = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(EuiSideNavClass, _Component);
+  var _super = _createSuper(EuiSideNavClass);
+  function EuiSideNavClass() {
     var _this;
-    (0, _classCallCheck2.default)(this, EuiSideNav);
+    (0, _classCallCheck2.default)(this, EuiSideNavClass);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -108,7 +108,7 @@ var EuiSideNav = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  (0, _createClass2.default)(EuiSideNav, [{
+  (0, _createClass2.default)(EuiSideNavClass, [{
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
@@ -121,85 +121,75 @@ var EuiSideNav = /*#__PURE__*/function (_Component) {
         renderItem = _this$props2.renderItem,
         truncate = _this$props2.truncate,
         heading = _this$props2.heading,
-        _this$props2$headingP = _this$props2.headingProps,
-        headingProps = _this$props2$headingP === void 0 ? {} : _this$props2$headingP,
+        headingProps = _this$props2.headingProps,
+        theme = _this$props2.theme,
         rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded2);
       var classes = (0, _classnames.default)('euiSideNav', className, {
         'euiSideNav-isOpenMobile': isOpenOnMobile
       });
-
-      // To support the extra CSS needed to show/hide/animate the content,
-      // We add a className for every breakpoint supported
-      var contentClasses = (0, _classnames.default)('euiSideNav__content', mobileBreakpoints === null || mobileBreakpoints === void 0 ? void 0 : mobileBreakpoints.map(function (breakpointName) {
-        return "euiSideNav__contentMobile-".concat(breakpointName);
-      }));
+      var styles = (0, _side_nav.euiSideNavMobileStyles)(theme);
+      var contentClasses = (0, _classnames.default)('euiSideNav__content');
       var sideNavContentId = this.generateId('content');
-      var navContent = (0, _react2.jsx)("div", {
-        id: sideNavContentId,
-        className: contentClasses
-      }, this.renderTree(items));
-      var _ref = headingProps,
-        _ref$screenReaderOnly = _ref.screenReaderOnly,
-        headingScreenReaderOnly = _ref$screenReaderOnly === void 0 ? false : _ref$screenReaderOnly,
-        _ref$element = _ref.element,
-        HeadingElement = _ref$element === void 0 ? 'h2' : _ref$element,
-        titleProps = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
+      var mobileContentStyles = [styles.content.euiSideNav__mobileContent, isOpenOnMobile ? styles.content.open : styles.content.hidden];
       var hasMobileVersion = mobileBreakpoints && mobileBreakpoints.length > 0;
-      var hasHeader = !!heading;
-      var headingNode;
-      var sharedHeadingProps = {
-        id: (headingProps === null || headingProps === void 0 ? void 0 : headingProps.id) || this.generateId('heading'),
-        className: headingProps === null || headingProps === void 0 ? void 0 : headingProps.className,
-        'data-test-subj': headingProps === null || headingProps === void 0 ? void 0 : headingProps['data-test-subj'],
-        'aria-label': headingProps === null || headingProps === void 0 ? void 0 : headingProps['aria-label']
+      var mobileToggleText = mobileTitle || heading;
+      var mobileHeadingUnset = {
+        marginBlockEnd: 0,
+        label: 'mobile'
       };
-      if (hasHeader) {
-        headingNode = (0, _react2.jsx)(HeadingElement, sharedHeadingProps, heading);
-        if (headingScreenReaderOnly) {
-          headingNode = (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, headingNode);
-        } else {
-          headingNode = (0, _react2.jsx)(_title.EuiTitle, (0, _extends2.default)({
-            size: "xs"
-          }, titleProps, {
-            className: (0, _classnames.default)('euiSideNav__heading', headingProps === null || headingProps === void 0 ? void 0 : headingProps.className)
-          }), (0, _react2.jsx)(HeadingElement, sharedHeadingProps, heading));
-        }
-      }
-      var mobileNode;
-      var breakpoints = mobileBreakpoints;
-      if (hasMobileVersion) {
-        mobileNode = (0, _react2.jsx)(_responsive.EuiShowFor, {
-          sizes: breakpoints || 'none'
-        }, (0, _react2.jsx)("nav", (0, _extends2.default)({
-          "aria-labelledby": sharedHeadingProps.id,
-          className: classes
-        }, rest), (0, _react2.jsx)(HeadingElement, sharedHeadingProps, (0, _react2.jsx)(_button.EuiButtonEmpty, {
+      var headingId = (headingProps === null || headingProps === void 0 ? void 0 : headingProps.id) || this.generateId('heading');
+      var headingScreenReaderOnly = !!(headingProps !== null && headingProps !== void 0 && headingProps.screenReaderOnly);
+      return (0, _react2.jsx)(_react.default.Fragment, null, hasMobileVersion && (0, _react2.jsx)(_responsive.EuiShowFor, {
+        sizes: mobileBreakpoints || 'none'
+      }, (0, _react2.jsx)("nav", (0, _extends2.default)({
+        "aria-labelledby": headingId,
+        className: classes
+      }, rest), (0, _react2.jsx)(_side_nav_heading.EuiSideNavHeading, (0, _extends2.default)({
+        id: headingId
+      }, headingProps, {
+        screenReaderOnly: false,
+        css: mobileHeadingUnset
+      }), (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiSideNav.mobileToggleAriaLabel",
+        default: "Toggle navigation"
+      }, function (mobileToggleAriaLabel) {
+        return (0, _react2.jsx)(_button.EuiButtonEmpty, {
           className: "euiSideNav__mobileToggle",
-          textProps: {
-            className: 'euiSideNav__mobileToggleText'
-          },
+          css: styles.euiSideNav__mobileToggle,
           contentProps: {
-            className: 'euiSideNav__mobileToggleContent'
+            className: 'euiSideNav__mobileToggleContent',
+            css: styles.euiSideNav__mobileToggleContent
           },
           onClick: toggleOpenOnMobile,
           iconType: "apps",
           iconSide: "right",
           "aria-controls": sideNavContentId,
-          "aria-expanded": isOpenOnMobile
-        }, mobileTitle || heading)), navContent));
-      }
-      return (0, _react2.jsx)(_react.default.Fragment, null, mobileNode, (0, _react2.jsx)(_responsive.EuiHideFor, {
-        sizes: breakpoints || 'none'
+          "aria-expanded": isOpenOnMobile,
+          "aria-label": !mobileToggleText || headingScreenReaderOnly ? mobileToggleAriaLabel : undefined
+        }, !headingScreenReaderOnly && mobileToggleText);
+      })), (0, _react2.jsx)("div", {
+        id: sideNavContentId,
+        className: contentClasses,
+        css: mobileContentStyles
+      }, this.renderTree(items)))), (0, _react2.jsx)(_responsive.EuiHideFor, {
+        sizes: mobileBreakpoints || 'none'
       }, (0, _react2.jsx)("nav", (0, _extends2.default)({
-        "aria-labelledby": headingNode ? sharedHeadingProps.id : undefined,
+        "aria-labelledby": heading ? headingId : undefined,
         className: classes
-      }, rest), headingNode, navContent)));
+      }, rest), heading && (0, _react2.jsx)(_side_nav_heading.EuiSideNavHeading, (0, _extends2.default)({
+        id: headingId
+      }, headingProps), heading), (0, _react2.jsx)("div", {
+        id: sideNavContentId,
+        className: contentClasses
+      }, this.renderTree(items)))));
     }
   }]);
-  return EuiSideNav;
+  return EuiSideNavClass;
 }(_react.Component);
-exports.EuiSideNav = EuiSideNav;
-(0, _defineProperty2.default)(EuiSideNav, "defaultProps", {
+exports.EuiSideNavClass = EuiSideNavClass;
+(0, _defineProperty2.default)(EuiSideNavClass, "defaultProps", {
   items: [],
   mobileBreakpoints: ['xs', 's']
-});
+});
+var EuiSideNav = (0, _services.withEuiTheme)(EuiSideNavClass);
+exports.EuiSideNav = EuiSideNav;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiSideNavMobileStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+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.
+                                                                                                                                                                                                                                                                                           */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "f0todx-euiSideNav__mobileToggleContent",
+  styles: "justify-content:space-between;label:euiSideNav__mobileToggleContent;"
+} : {
+  name: "f0todx-euiSideNav__mobileToggleContent",
+  styles: "justify-content:space-between;label:euiSideNav__mobileToggleContent;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiSideNavMobileStyles = function euiSideNavMobileStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var fastTransition = "".concat(euiTheme.animation.extraFast, " ").concat(euiTheme.animation.resistance);
+  var slowTransition = "".concat(euiTheme.animation.extraSlow, " ").concat(euiTheme.animation.resistance);
+  return {
+    // Mobile button
+    euiSideNav__mobileToggle: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', 'auto'), "padding:1em;font-size:inherit;text-align:start;border-radius:0;", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";;label:euiSideNav__mobileToggle;"),
+    euiSideNav__mobileToggleContent: _ref,
+    // Mobile content
+    content: {
+      euiSideNav__mobileContent: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:max-block-size ", fastTransition, ",padding-block ", fastTransition, ",opacity ", slowTransition, ",visibility ", slowTransition, ";};label:euiSideNav__mobileContent;"),
+      hidden: /*#__PURE__*/(0, _react.css)("overflow:hidden;visibility:hidden;opacity:0;max-block-size:0;padding-inline:", euiTheme.size.l, ";;label:hidden;"),
+      open: /*#__PURE__*/(0, _react.css)("visibility:visible;opacity:1;max-block-size:5000px;padding:", euiTheme.size.l, ";;label:open;")
+    }
+  };
+};
+exports.euiSideNavMobileStyles = euiSideNavMobileStyles;