@elastic/eui 85.0.0 → 85.1.0

package/optimize/es/components/index.js

@@ -20,6 +20,7 @@ export * from './call_out';
 export * from './card';
 export * from './code';
 export * from './collapsible_nav';
+export * from './collapsible_nav_beta';
 export * from './color_picker';
 export * from './combo_box';
 export * from './comment_list';

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

@@ -258,7 +258,8 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
     size: sizes.buttonSize,
     "data-test-subj": "euiInlineReadModeButton",
     disabled: isReadOnly,
-    css: readModeCssStyles
+    css: readModeCssStyles,
+    title: readModeValue || placeholder
   }, readModeProps, {
     buttonRef: setReadModeRefs,
     "aria-describedby": classNames(readModeDescribedById, readModeProps === null || readModeProps === void 0 ? void 0 : readModeProps['aria-describedby']),

package/optimize/es/components/markdown_editor/markdown_editor.js

@@ -150,8 +150,8 @@ export var EuiMarkdownEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isPreviewing = viewMode === MODE_VIEWING;
   var isEditing = viewMode === MODE_EDITING;
   var replaceNode = useCallback(function (position, next) {
-    var leading = value.substr(0, position.start.offset);
-    var trailing = value.substr(position.end.offset);
+    var leading = value.substring(0, position.start.offset);
+    var trailing = value.substring(position.end.offset);
     _onChange("".concat(leading).concat(next).concat(trailing));
   }, [value, _onChange]);
   var contextValue = useMemo(function () {

package/optimize/es/themes/amsterdam/global_styling/variables/_states.js

@@ -6,24 +6,21 @@
  * Side Public License, v 1.
  */
 
-/**
- * NOTE: These were quick conversions of their Sass counterparts.
- *       The commented out keys have not been established as necessary yet.
- */
-
 import { computed } from '../../../../services/theme/utils';
+import { transparentize } from '../../../../services/color/manipulation';
 import { sizeToPixel } from '../../../../global_styling/functions/size';
 export var focus = {
+  // Focus ring
   color: 'currentColor',
-  width: computed(sizeToPixel(0.125))
-
-  // transparency: { LIGHT: 0.9, DARK: 0.7 },
-  // backgroundColor: computed(({ colors, focus }) =>
-  //   transparentize(colors.primary, focus!.transparency)
-  // ),
-
-  // Outline
-  // outline: {
-  //   outline: computed(({ focus }) => `${focus!.width} solid ${focus!.color}`),
-  // },
+  width: computed(sizeToPixel(0.125)),
+  // Focus background
+  transparency: {
+    LIGHT: 0.1,
+    DARK: 0.2
+  },
+  backgroundColor: computed(function (_ref) {
+    var colors = _ref.colors,
+      focus = _ref.focus;
+    return transparentize(colors.primary, focus.transparency);
+  })
 };

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCollapsibleNavBeta = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _services = require("../../services");
+var _collapsible_nav = require("../collapsible_nav/collapsible_nav");
+var _collapsible_nav_beta = require("./collapsible_nav_beta.styles");
+var _react2 = require("@emotion/react");
+/*
+ * 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.
+ */
+
+/**
+ * TODO: Actual component in a follow-up PR
+ */
+var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(props) {
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _collapsible_nav_beta.euiCollapsibleNavBetaStyles)(euiTheme);
+  return (0, _react2.jsx)(_collapsible_nav.EuiCollapsibleNav, (0, _extends2.default)({
+    css: styles.euiCollapsibleNavBeta,
+    size: 248
+  }, props));
+};
+exports.EuiCollapsibleNavBeta = EuiCollapsibleNavBeta;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCollapsibleNavBetaStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+/*
+ * 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 euiCollapsibleNavBetaStyles = function euiCollapsibleNavBetaStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiCollapsibleNavBeta: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), " .euiFlyoutFooter{background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavBeta;")
+  };
+};
+exports.euiCollapsibleNavBetaStyles = euiCollapsibleNavBetaStyles;

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

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCollapsibleNavAccordion = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _accordion = require("../../accordion");
+var _collapsible_nav_item = require("./collapsible_nav_item");
+var _collapsible_nav_link = require("./collapsible_nav_link");
+var _collapsible_nav_accordion = require("./collapsible_nav_accordion.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["id", "className", "items", "href", "isSubItem", "isSelected", "linkProps", "accordionProps", "buttonContent", "children"];
+/*
+ * 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.
+ */
+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 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) { (0, _defineProperty2.default)(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; }
+/**
+ * Internal nav accordion component.
+ *
+ * Renders children as either a nav link or any number/nesting of more nav accordions.
+ * Triggering the open/closed state is handled only by the accordion `arrow` for
+ * UX consistency, as accordion/nav titles can be their own links to pages.
+ */
+var EuiCollapsibleNavAccordion = function EuiCollapsibleNavAccordion(_ref) {
+  var _accordionProps$arrow;
+  var id = _ref.id,
+    className = _ref.className,
+    items = _ref.items,
+    href = _ref.href,
+    isSubItem = _ref.isSubItem,
+    isSelected = _ref.isSelected,
+    linkProps = _ref.linkProps,
+    accordionProps = _ref.accordionProps,
+    buttonContent = _ref.buttonContent,
+    _children = _ref.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _classnames.default)('euiCollapsibleNavAccordion', className);
+  var groupID = (0, _services.useGeneratedHtmlId)({
+    conditionalId: id
+  });
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _collapsible_nav_accordion.euiCollapsibleNavAccordionStyles)(euiTheme);
+  var cssStyles = [styles.euiCollapsibleNavAccordion, isSubItem ? styles.isSubItem : styles.isTopItem, isSelected && styles.isSelected, accordionProps === null || accordionProps === void 0 ? void 0 : accordionProps.css];
+
+  /**
+   * Title / accordion trigger
+   */
+  var isTitleInteractive = !!(href || linkProps !== null && linkProps !== void 0 && linkProps.onClick);
+
+  // Stop propagation on the title so that the accordion toggle doesn't occur on click
+  // (should only occur on accordion arrow click for UX consistency)
+  var stopPropagationClick = (0, _react.useCallback)(function (e) {
+    var _linkProps$onClick;
+    e.stopPropagation();
+    linkProps === null || linkProps === void 0 ? void 0 : (_linkProps$onClick = linkProps.onClick) === null || _linkProps$onClick === void 0 ? void 0 : _linkProps$onClick.call(linkProps, e);
+  }, [linkProps === null || linkProps === void 0 ? void 0 : linkProps.onClick] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  /**
+   * Child items
+   */
+  // If any of the sub items have an icon, default to an
+  // icon of `empty` so that all text lines up vertically
+  var itemsHaveIcons = (0, _react.useMemo)(function () {
+    return items.some(function (item) {
+      return !!item.icon;
+    });
+  }, [items]);
+  var icon = itemsHaveIcons ? 'empty' : undefined;
+  var childrenCssStyles = [styles.children.euiCollapsibleNavAccordion__children, isSubItem ? styles.children.isSubItem : styles.children.isTopItem];
+  var children = (0, _react2.jsx)("div", {
+    css: childrenCssStyles,
+    className: "euiCollapsibleNavAccordion__children"
+  }, items.map(function (item, index) {
+    return (
+      // This is an intentional circular dependency between the accordion & parent item display.
+      // EuiSideNavItem is purposely recursive to support any amount of nested sub items,
+      // and split up into separate files/components for better dev readability
+      (0, _react2.jsx)(_collapsible_nav_item.EuiCollapsibleNavSubItem, (0, _extends2.default)({
+        key: index,
+        icon: icon
+      }, item))
+    );
+  }));
+  return (0, _react2.jsx)(_accordion.EuiAccordion, (0, _extends2.default)({
+    id: groupID,
+    className: classes,
+    initialIsOpen: isSelected,
+    buttonElement: "div",
+    buttonContent: (0, _react2.jsx)(_collapsible_nav_link.EuiCollapsibleNavLink, (0, _extends2.default)({
+      href: href
+    }, linkProps, {
+      isSelected: isSelected,
+      isSubItem: isSubItem,
+      onClick: stopPropagationClick,
+      isInteractive: isTitleInteractive
+    }), buttonContent),
+    arrowDisplay: "right"
+  }, rest, accordionProps, {
+    css: cssStyles,
+    arrowProps: _objectSpread(_objectSpread({
+      iconSize: 's'
+    }, accordionProps === null || accordionProps === void 0 ? void 0 : accordionProps.arrowProps), {}, {
+      css: [styles.euiCollapsibleNavAccordion__arrow, accordionProps === null || accordionProps === void 0 ? void 0 : (_accordionProps$arrow = accordionProps.arrowProps) === null || _accordionProps$arrow === void 0 ? void 0 : _accordionProps$arrow.css]
+    })
+  }), children);
+};
+exports.EuiCollapsibleNavAccordion = EuiCollapsibleNavAccordion;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCollapsibleNavAccordionStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _collapsible_nav_item = require("./collapsible_nav_item.styles");
+/*
+ * 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 euiCollapsibleNavAccordionStyles = function euiCollapsibleNavAccordionStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var sharedStyles = (0, _collapsible_nav_item.euiCollapsibleNavItemVariables)(euiThemeContext);
+  return {
+    // NOTE: Specific usage of `>`s selectors are important here, because accordions can be nested
+    // - just because a parent accordion is open or selected does not mean its child accordion is the same
+    euiCollapsibleNavAccordion: /*#__PURE__*/(0, _react.css)(".euiAccordion__button{overflow:hidden;&:hover,&:focus{cursor:default;text-decoration:none;}}.euiAccordion__triggerWrapper{border-radius:", sharedStyles.borderRadius, ";", _global_styling.euiCanAnimate, "{transition:background-color ", sharedStyles.animation, ";}}.euiAccordion__buttonContent{", (0, _global_styling.logicalCSS)('max-width', '100%'), " flex-basis:100%;display:flex;align-items:center;}.euiCollapsibleNavLink{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCollapsibleNavAccordion;"),
+    isTopItem: /*#__PURE__*/(0, _react.css)("margin:", sharedStyles.padding, ";&>.euiAccordion__triggerWrapper{&:hover{background-color:", sharedStyles.backgroundHoverColor, ";}};label:isTopItem;"),
+    isSelected: /*#__PURE__*/(0, _react.css)("&>.euiAccordion__triggerWrapper{background-color:", sharedStyles.backgroundSelectedColor, ";&:hover{background-color:", sharedStyles.backgroundSelectedColor, ";}};label:isSelected;"),
+    isSubItem: /*#__PURE__*/(0, _react.css)("&.euiAccordion-isOpen{", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.m), ";};label:isSubItem;"),
+    // Arrow element
+    euiCollapsibleNavAccordion__arrow: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), _global_styling.euiCanAnimate, "{transition:background-color ", sharedStyles.animation, ";}&:hover,&:focus-visible{background-color:", euiTheme.colors.lightShade, ";&>.euiIcon{color:", sharedStyles.color, ";}}transform:none!important;&>.euiIcon{color:", sharedStyles.rightIconColor, ";transform:rotate(-90deg);", _global_styling.euiCanAnimate, "{transition:transform ", sharedStyles.animation, ",color ", sharedStyles.animation, ";}}&.euiAccordion__iconButton-isOpen>.euiIcon{color:", sharedStyles.color, ";transform:rotate(90deg);};label:euiCollapsibleNavAccordion__arrow;"),
+    // Children wrapper
+    children: {
+      euiCollapsibleNavAccordion__children: /*#__PURE__*/(0, _react.css)(";label:euiCollapsibleNavAccordion__children;"),
+      isTopItem: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.xl), ";;label:isTopItem;"),
+      isSubItem: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-left', (0, _global_styling.mathWithUnits)([euiTheme.size.s, euiTheme.border.width.thin], function (x, y) {
+        return x - y;
+      })), ";;label:isSubItem;")
+    }
+  };
+};
+exports.euiCollapsibleNavAccordionStyles = euiCollapsibleNavAccordionStyles;

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

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCollapsibleNavSubItem = exports.EuiCollapsibleNavItem = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _icon = require("../../icon");
+var _title = require("../../title");
+var _collapsible_nav_accordion = require("./collapsible_nav_accordion");
+var _collapsible_nav_link = require("./collapsible_nav_link");
+var _collapsible_nav_item = require("./collapsible_nav_item.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "className", "items", "children"],
+  _excluded2 = ["isGroupTitle", "className"];
+/*
+ * 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.
+ */
+/**
+ * Internal DRY subcomponent shared between top level items and sub items
+ * that handles title display/rendering, and can be used to recursively
+ * determine whether to render an accordion or a link
+ */
+var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
+  var _props$linkProps;
+  var isSubItem = _ref.isSubItem,
+    title = _ref.title,
+    titleElement = _ref.titleElement,
+    icon = _ref.icon,
+    iconProps = _ref.iconProps,
+    className = _ref.className,
+    items = _ref.items,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _classnames.default)('euiCollapsibleNavItem', {
+    euiCollapsibleNavSubItem: isSubItem
+  }, className);
+  var headerContent = (0, _react2.jsx)(EuiCollapsibleNavItemTitle, {
+    title: title,
+    titleElement: titleElement,
+    icon: icon,
+    iconProps: iconProps
+  });
+  var isAccordion = items && items.length > 0;
+  if (isAccordion) {
+    return (0, _react2.jsx)(_collapsible_nav_accordion.EuiCollapsibleNavAccordion, (0, _extends2.default)({
+      className: classes,
+      buttonContent: headerContent,
+      items: items
+    }, props, {
+      isSubItem: isSubItem
+    }));
+  }
+  return (0, _react2.jsx)(_collapsible_nav_link.EuiCollapsibleNavLink, (0, _extends2.default)({
+    className: classes
+  }, props, {
+    // EuiLink ExclusiveUnion type shenanigans
+    isSubItem: isSubItem,
+    isNotAccordion: true,
+    isInteractive: !!(props.href || props.onClick || (_props$linkProps = props.linkProps) !== null && _props$linkProps !== void 0 && _props$linkProps.onClick)
+  }), headerContent);
+};
+
+/**
+ * Internal subcomponent for title display
+ */
+var EuiCollapsibleNavItemTitle = function EuiCollapsibleNavItemTitle(_ref2) {
+  var title = _ref2.title,
+    _ref2$titleElement = _ref2.titleElement,
+    titleElement = _ref2$titleElement === void 0 ? 'span' : _ref2$titleElement,
+    icon = _ref2.icon,
+    iconProps = _ref2.iconProps;
+  var styles = _collapsible_nav_item.euiCollapsibleNavItemTitleStyles;
+  var TitleElement = titleElement;
+  return (0, _react2.jsx)(_react.default.Fragment, null, icon && (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
+    type: icon
+  }, iconProps)), (0, _react2.jsx)(TitleElement, {
+    className: "euiCollapsibleNavItem__title eui-textTruncate",
+    css: styles.euiCollapsibleNavItem__title
+  }, title));
+};
+
+/**
+ * Sub-items can either be a group title, to visually separate sections
+ * of nav links, or they can simply be more links or accordions
+ */
+var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
+  var isGroupTitle = _ref3.isGroupTitle,
+    className = _ref3.className,
+    props = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _collapsible_nav_item.euiCollapsibleNavSubItemGroupTitleStyles)(euiTheme);
+  if (isGroupTitle) {
+    var TitleElement = props.titleElement || 'div';
+    return (0, _react2.jsx)(_title.EuiTitle, {
+      size: "xxxs",
+      css: styles.euiCollapsibleNavItem__groupTitle,
+      className: "euiCollapsibleNavItem__groupTitle eui-textTruncate"
+    }, (0, _react2.jsx)(TitleElement, null, props.title));
+  }
+  return (0, _react2.jsx)(EuiCollapsibleNavItemDisplay, (0, _extends2.default)({}, props, {
+    isSubItem: true
+  }));
+};
+
+/**
+ * The actual exported component
+ */
+exports.EuiCollapsibleNavSubItem = EuiCollapsibleNavSubItem;
+var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(props) {
+  return (0, _react2.jsx)(EuiCollapsibleNavItemDisplay, (0, _extends2.default)({}, props, {
+    isSubItem: false
+  }));
+};
+exports.EuiCollapsibleNavItem = EuiCollapsibleNavItem;

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

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCollapsibleNavSubItemGroupTitleStyles = exports.euiCollapsibleNavItemVariables = exports.euiCollapsibleNavItemTitleStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
+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) { (0, _defineProperty2.default)(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; }
+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.
+                                                                                                                                                                                                                                                                                           */
+/**
+ * Style variables shared between accordion, link, and sub items
+ */
+var euiCollapsibleNavItemVariables = function euiCollapsibleNavItemVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return _objectSpread(_objectSpread({
+    height: euiTheme.size.xl,
+    padding: euiTheme.size.s
+  }, (0, _global_styling.euiFontSize)(euiThemeContext, 's')), {}, {
+    animation: "".concat(euiTheme.animation.normal, " ease-in-out"),
+    // Matches EuiButton
+    borderRadius: euiTheme.border.radius.small,
+    backgroundHoverColor: euiTheme.colors.lightestShade,
+    backgroundSelectedColor: (0, _button.euiButtonColor)(euiThemeContext, 'text').backgroundColor,
+    color: euiTheme.colors.text,
+    rightIconColor: euiTheme.colors.disabledText
+  });
+};
+
+/**
+ * Title styles
+ */
+exports.euiCollapsibleNavItemVariables = euiCollapsibleNavItemVariables;
+var euiCollapsibleNavItemTitleStyles = {
+  euiCollapsibleNavItem__title: process.env.NODE_ENV === "production" ? {
+    name: "i246l1-euiCollapsibleNavItem__title",
+    styles: "flex-grow:1;label:euiCollapsibleNavItem__title;"
+  } : {
+    name: "i246l1-euiCollapsibleNavItem__title",
+    styles: "flex-grow:1;label:euiCollapsibleNavItem__title;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
+};
+exports.euiCollapsibleNavItemTitleStyles = euiCollapsibleNavItemTitleStyles;
+var euiCollapsibleNavSubItemGroupTitleStyles = function euiCollapsibleNavSubItemGroupTitleStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiCollapsibleNavItem__groupTitle: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), " ", (0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.s)), ";;label:euiCollapsibleNavItem__groupTitle;")
+  };
+};
+exports.euiCollapsibleNavSubItemGroupTitleStyles = euiCollapsibleNavSubItemGroupTitleStyles;

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCollapsibleNavLink = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _link = require("../../link");
+var _collapsible_nav_link = require("./collapsible_nav_link.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["href", "rel", "children", "className", "isSelected", "isInteractive", "isNotAccordion", "isSubItem", "linkProps"];
+/*
+ * 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.
+ */
+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) { (0, _defineProperty2.default)(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; }
+/**
+ * Internal nav link component.
+ *
+ * Can be rendered as a standalone nav item, or as part of an accordion header.
+ * Can also be rendered as top-level item (has a background hover) or as a
+ * sub-item (renders closer to plain text).
+ *
+ * In terms of DOM output, follows the same logic as EuiLink (renders either
+ * an `a` tag or a `button` if no valid link exists), and can also additionally
+ * rendered a plain `span` if the item is not interactive.
+ */
+var EuiCollapsibleNavLink = function EuiCollapsibleNavLink(_ref) {
+  var href = _ref.href,
+    rel = _ref.rel,
+    children = _ref.children,
+    className = _ref.className,
+    isSelected = _ref.isSelected,
+    _ref$isInteractive = _ref.isInteractive,
+    isInteractive = _ref$isInteractive === void 0 ? true : _ref$isInteractive,
+    isNotAccordion = _ref.isNotAccordion,
+    isSubItem = _ref.isSubItem,
+    linkProps = _ref.linkProps,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _classnames.default)('euiCollapsibleNavLink', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _collapsible_nav_link.euiCollapsibleNavLinkStyles)(euiTheme);
+  var cssStyles = [styles.euiCollapsibleNavLink, isSelected && styles.isSelected, isSubItem ? styles.isSubItem : styles.isTopItem.isTopItem, isNotAccordion && !isSubItem && styles.isTopItem.isNotAccordion, isInteractive && !isSelected && !isSubItem && styles.isTopItem.isInteractive, linkProps === null || linkProps === void 0 ? void 0 : linkProps.css];
+  return isInteractive ? (0, _react2.jsx)(_link.EuiLink, (0, _extends2.default)({
+    href: href,
+    rel: rel,
+    className: classes
+  }, _objectSpread(_objectSpread({}, rest), linkProps), {
+    // EuiLink ExclusiveUnion shenanigans
+    css: cssStyles
+  }), children) : (0, _react2.jsx)("span", (0, _extends2.default)({
+    className: classes,
+    css: cssStyles
+  }, rest), children);
+};
+exports.EuiCollapsibleNavLink = EuiCollapsibleNavLink;

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.styles.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCollapsibleNavLinkStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _collapsible_nav_item = require("./collapsible_nav_item.styles");
+/*
+ * 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 euiCollapsibleNavLinkStyles = function euiCollapsibleNavLinkStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var sharedStyles = (0, _collapsible_nav_item.euiCollapsibleNavItemVariables)(euiThemeContext);
+  return {
+    // Shared between all links
+    euiCollapsibleNavLink: /*#__PURE__*/(0, _react.css)("display:flex;align-items:center;", (0, _global_styling.logicalCSS)('height', sharedStyles.height), " padding:", sharedStyles.padding, ";font-size:", sharedStyles.fontSize, ";line-height:", sharedStyles.lineHeight, ";color:", sharedStyles.color, ";border-radius:", sharedStyles.borderRadius, ";&:focus{outline-offset:-", euiTheme.focus.width, ";text-decoration-thickness:unset;}[class*='euiLink__externalIcon']{", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xxs), " color:", sharedStyles.rightIconColor, ";};label:euiCollapsibleNavLink;"),
+    isSelected: /*#__PURE__*/(0, _react.css)("background-color:", sharedStyles.backgroundSelectedColor, ";;label:isSelected;"),
+    isTopItem: {
+      isTopItem: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.semiBold, ";gap:", euiTheme.size.base, ";&:is(button){inline-size:calc(\n            100% - ", (0, _global_styling.mathWithUnits)(sharedStyles.padding, function (x) {
+        return x * 2;
+      }), "\n          );};label:isTopItem;"),
+      isNotAccordion: /*#__PURE__*/(0, _react.css)("margin:", sharedStyles.padding, ";;label:isNotAccordion;"),
+      isInteractive: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:background-color ", sharedStyles.animation, ";}&:hover,&:focus-visible{background-color:", sharedStyles.backgroundHoverColor, ";};label:isInteractive;")
+    },
+    isSubItem: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.regular, ";gap:", euiTheme.size.s, ";;label:isSubItem;")
+  };
+};
+exports.euiCollapsibleNavLinkStyles = euiCollapsibleNavLinkStyles;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiCollapsibleNavItem", {
+  enumerable: true,
+  get: function get() {
+    return _collapsible_nav_item.EuiCollapsibleNavItem;
+  }
+});
+var _collapsible_nav_item = require("./collapsible_nav_item");

package/optimize/lib/components/collapsible_nav_beta/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiCollapsibleNavBeta", {
+  enumerable: true,
+  get: function get() {
+    return _collapsible_nav_beta.EuiCollapsibleNavBeta;
+  }
+});
+Object.defineProperty(exports, "EuiCollapsibleNavItem", {
+  enumerable: true,
+  get: function get() {
+    return _collapsible_nav_item.EuiCollapsibleNavItem;
+  }
+});
+var _collapsible_nav_beta = require("./collapsible_nav_beta");
+var _collapsible_nav_item = require("./collapsible_nav_item");

package/optimize/lib/components/color_picker/saturation.js

@@ -29,10 +29,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 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) { (0, _defineProperty2.default)(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; }
+var colorDefaultValue = [1, 0, 0];
 var EuiSaturation = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? [1, 0, 0] : _ref$color,
+    color = _ref$color === void 0 ? colorDefaultValue : _ref$color,
     _ref$dataTestSubj = _ref['data-test-subj'],
     dataTestSubj = _ref$dataTestSubj === void 0 ? 'euiSaturation' : _ref$dataTestSubj,
     hex = _ref.hex,