@elastic/eui 87.1.0 → 87.2.0

package/lib/components/resizable_container/resizable_collapse_button.styles.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiResizableCollapseButtonStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+var _amsterdam = require("../../themes/amsterdam");
+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: "fuwsll-euiResizableCollapseButton",
+  styles: "z-index:2;position:absolute;&:focus{animation:none;};label:euiResizableCollapseButton;"
+} : {
+  name: "fuwsll-euiResizableCollapseButton",
+  styles: "z-index:2;position:absolute;&:focus{animation:none;};label:euiResizableCollapseButton;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiResizableCollapseButtonStyles = function euiResizableCollapseButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var buttonSize = euiTheme.size.l;
+  var centeringOffset = (0, _global_styling.mathWithUnits)(buttonSize, function (x) {
+    return x / -2;
+  }); // Use negative margins instead of transforms to avoid having to override EuiButtonIcon's CSS
+  var buttonOffset = euiTheme.size.base;
+  return {
+    euiResizableCollapseButton: _ref,
+    collapsible: {
+      collapsible: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.emptyShade, ";", (0, _amsterdam.euiShadowXSmall)(euiThemeContext), " &:focus{", (0, _amsterdam.euiSlightShadowHover)(euiThemeContext), ";};label:collapsible;"),
+      horizontal: {
+        after: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('margin-right', centeringOffset), ";;label:after;"),
+        before: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('margin-left', centeringOffset), ";;label:before;"),
+        middle: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', '50%'), " ", (0, _global_styling.logicalCSS)('margin-top', centeringOffset), ";;label:middle;"),
+        top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('margin-top', buttonOffset), ";;label:top;"),
+        bottom: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('margin-bottom', buttonOffset), ";;label:bottom;"),
+        // `left/right` aren't valid positions for the horizontal direction,
+        // so we're using getters to fall back to the `middle` CSS
+        get left() {
+          return this.middle;
+        },
+        get right() {
+          return this.middle;
+        }
+      },
+      vertical: {
+        after: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', '100%'), " ", (0, _global_styling.logicalCSS)('margin-top', centeringOffset), ";;label:after;"),
+        before: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('bottom', '100%'), " ", (0, _global_styling.logicalCSS)('margin-bottom', centeringOffset), ";;label:before;"),
+        middle: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', '50%'), " ", (0, _global_styling.logicalCSS)('margin-left', centeringOffset), ";;label:middle;"),
+        left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('margin-left', buttonOffset), ";;label:left;"),
+        right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('margin-right', buttonOffset), ";;label:right;"),
+        // `top/bottom` aren't valid positions for the horizontal direction,
+        // so we're using getters to fall back to the `middle` CSS
+        get top() {
+          return this.middle;
+        },
+        get bottom() {
+          return this.middle;
+        }
+      }
+    },
+    collapsed: {
+      // When collapsed, the button itself is the full collapsed area
+      // and we use flex to align the icon within
+      collapsed: /*#__PURE__*/(0, _react.css)("border-radius:0;", (0, _global_styling.logicalCSS)('top', 0), ";;label:collapsed;"),
+      horizontal: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), ";;label:horizontal;"),
+      vertical: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:vertical;"),
+      horizontalPositions: {
+        top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', buttonOffset), " align-items:flex-start;;label:top;"),
+        bottom: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-bottom', buttonOffset), " align-items:flex-end;;label:bottom;"),
+        middle: /*#__PURE__*/(0, _react.css)(";label:middle;"),
+        left: /*#__PURE__*/(0, _react.css)(";label:left;"),
+        right: /*#__PURE__*/(0, _react.css)(";label:right;")
+      },
+      verticalPositions: {
+        left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', buttonOffset), " justify-content:flex-start;;label:left;"),
+        right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', buttonOffset), " justify-content:flex-end;;label:right;"),
+        middle: /*#__PURE__*/(0, _react.css)(";label:middle;"),
+        top: /*#__PURE__*/(0, _react.css)(";label:top;"),
+        bottom: /*#__PURE__*/(0, _react.css)(";label:bottom;")
+      }
+    }
+  };
+};
+exports.euiResizableCollapseButtonStyles = euiResizableCollapseButtonStyles;

package/lib/components/steps/step.styles.js

@@ -48,7 +48,7 @@ exports.euiStepStyles = euiStepStyles;
 var euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var euiStep = euiStepVariables(euiTheme);
-  var styles = {
+  return {
     euiStep__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-top', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-bottom', (0, _global_styling.mathWithUnits)([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
       return x + y;
     })), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";;label:euiStep__content;"),
@@ -58,16 +58,16 @@ var euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
     })), (0, _global_styling.logicalCSS)('margin-left', (0, _global_styling.mathWithUnits)(euiStep.numberSize, function (x) {
       return x / 2;
     })), ";;label:m;"),
-    s: /*#__PURE__*/(0, _react.css)(";label:s;"),
-    // s is the same as m, so we'll programmatically duplicate it below
+    // `s` is the same as `m` - use a getter to duplicate its content
+    get s() {
+      return this.m;
+    },
     xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', (0, _global_styling.mathWithUnits)([euiStep.numberXSSize, euiStep.numberMargin], function (x, y) {
       return x / 2 + y;
     })), (0, _global_styling.logicalCSS)('margin-left', (0, _global_styling.mathWithUnits)(euiStep.numberXSSize, function (x) {
       return x / 2;
     })), ";;label:xs;")
   };
-  styles.s = styles.m;
-  return styles;
 };
 exports.euiStepContentStyles = euiStepContentStyles;
 var euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {

package/lib/services/accessibility/html_id_generator.js

@@ -1,12 +1,15 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.htmlIdGenerator = htmlIdGenerator;
 exports.useGeneratedHtmlId = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _uuid = require("uuid");
-var _react = require("react");
+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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -38,7 +41,8 @@ function htmlIdGenerator() {
  * This prevents IDs from being re-randomized on every component update.
  */
 
-var useGeneratedHtmlId = function useGeneratedHtmlId() {
+// We can remove this deprecated hook once EUI no longer needs to support React 16-17
+var useDeprecatedGeneratedHtmlId = function useDeprecatedGeneratedHtmlId() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     prefix = _ref.prefix,
     suffix = _ref.suffix,
@@ -47,4 +51,19 @@ var useGeneratedHtmlId = function useGeneratedHtmlId() {
     return conditionalId || htmlIdGenerator(prefix)(suffix);
   }, [conditionalId, prefix, suffix]);
 };
+var useNewGeneratedHtmlId = function useNewGeneratedHtmlId() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref2$prefix = _ref2.prefix,
+    prefix = _ref2$prefix === void 0 ? '' : _ref2$prefix,
+    _ref2$suffix = _ref2.suffix,
+    suffix = _ref2$suffix === void 0 ? '' : _ref2$suffix,
+    conditionalId = _ref2.conditionalId;
+  // Using the default export and dot notation here is intentional
+  // to prevent React <18 import errors.
+  var id = _react.default.useId();
+  return (0, _react.useMemo)(function () {
+    return conditionalId || "".concat(prefix).concat(id).concat(suffix);
+  }, [id, conditionalId, prefix, suffix]);
+};
+var useGeneratedHtmlId = 'useId' in _react.default ? useNewGeneratedHtmlId : useDeprecatedGeneratedHtmlId;
 exports.useGeneratedHtmlId = useGeneratedHtmlId;

package/lib/themes/amsterdam/global_styling/mixins/shadow.js

@@ -87,7 +87,6 @@ var euiShadowXLarge = function euiShadowXLarge(_ref9) {
 
 /**
  * slightShadowHover
- * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there
  */
 exports.euiShadowXLarge = euiShadowXLarge;
 var euiSlightShadowHover = function euiSlightShadowHover(_ref11) {

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

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

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

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { EuiResizableContainer } from './resizable_container';
+export { EuiResizableContainer } from './resizable_container';
+export { EuiResizableButton } from './resizable_button';

package/optimize/es/components/resizable_container/resizable_button.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isHorizontal", "className", "id", "registration", "disabled", "onFocus", "onBlur"];
+var _excluded = ["isHorizontal", "alignIndicator", "className"],
+  _excluded2 = ["registration", "id", "disabled", "onFocus"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,21 +11,56 @@ var _excluded = ["isHorizontal", "className", "id", "registration", "disabled",
  * Side Public License, v 1.
  */
 
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, forwardRef } from 'react';
 import classNames from 'classnames';
 import { EuiI18n } from '../i18n';
-import { useGeneratedHtmlId } from '../../services';
+import { useEuiTheme, useGeneratedHtmlId } from '../../services';
 import { useEuiResizableContainerContext } from './context';
+import { euiResizableButtonStyles } from './resizable_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiResizableButton = function EuiResizableButton(_ref) {
+/**
+ * A generic button for indicating/facilitating resizable content,
+ * usable outside of the EuiResizableContainer context
+ */
+export var EuiResizableButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isHorizontal = _ref.isHorizontal,
+    _ref$alignIndicator = _ref.alignIndicator,
+    alignIndicator = _ref$alignIndicator === void 0 ? 'center' : _ref$alignIndicator,
     className = _ref.className,
-    id = _ref.id,
-    registration = _ref.registration,
-    disabled = _ref.disabled,
-    onFocus = _ref.onFocus,
-    onBlur = _ref.onBlur,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('euiResizableButton', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiResizableButtonStyles(euiTheme);
+  var cssStyles = [styles.euiResizableButton, isHorizontal ? styles.horizontal : styles.vertical, styles.alignIndicator[alignIndicator]];
+  return ___EmotionJSX(EuiI18n, {
+    tokens: ['euiResizableButton.horizontalResizerAriaLabel', 'euiResizableButton.verticalResizerAriaLabel'],
+    defaults: ['Press the left or right arrow keys to adjust panels size', 'Press the up or down arrow keys to adjust panels size']
+  }, function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      horizontalResizerAriaLabel = _ref3[0],
+      verticalResizerAriaLabel = _ref3[1];
+    return ___EmotionJSX("button", _extends({
+      ref: ref,
+      "aria-label": isHorizontal ? horizontalResizerAriaLabel : verticalResizerAriaLabel,
+      className: classes,
+      css: cssStyles,
+      "data-test-subj": "euiResizableButton",
+      type: "button"
+    }, rest));
+  });
+});
+EuiResizableButton.displayName = 'EuiResizableButton';
+
+/**
+ * Resizer button specific to controlled EuiResizableContainer usage
+ */
+
+export var EuiResizableButtonControlled = function EuiResizableButtonControlled(_ref4) {
+  var registration = _ref4.registration,
+    id = _ref4.id,
+    disabled = _ref4.disabled,
+    _onFocus = _ref4.onFocus,
+    rest = _objectWithoutProperties(_ref4, _excluded2);
   var resizerId = useGeneratedHtmlId({
     prefix: 'resizable-button',
     conditionalId: id
@@ -36,13 +72,9 @@ export var EuiResizableButton = function EuiResizableButton(_ref) {
     } : _useEuiResizableConta2,
     resizers = _useEuiResizableConta3.resizers;
   var isDisabled = useMemo(function () {
-    return disabled || resizers[resizerId] && resizers[resizerId].isDisabled;
+    var _resizers$resizerId;
+    return disabled || ((_resizers$resizerId = resizers[resizerId]) === null || _resizers$resizerId === void 0 ? void 0 : _resizers$resizerId.isDisabled);
   }, [resizers, resizerId, disabled]);
-  var classes = classNames('euiResizableButton', {
-    'euiResizableButton--vertical': !isHorizontal,
-    'euiResizableButton--horizontal': isHorizontal,
-    'euiResizableButton--disabled': isDisabled
-  }, className);
   var previousRef = useRef();
   var onRef = useCallback(function (ref) {
     if (!registration) return;
@@ -61,35 +93,20 @@ export var EuiResizableButton = function EuiResizableButton(_ref) {
       }
     }
   }, [registration, resizerId, disabled]);
-  var setFocus = function setFocus(e) {
-    return e.currentTarget.focus();
-  };
-  var handleFocus = function handleFocus() {
-    onFocus && onFocus(resizerId);
-  };
-  return ___EmotionJSX(EuiI18n, {
-    tokens: ['euiResizableButton.horizontalResizerAriaLabel', 'euiResizableButton.verticalResizerAriaLabel'],
-    defaults: ['Press left or right to adjust panels size', 'Press up or down to adjust panels size']
-  }, function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      horizontalResizerAriaLabel = _ref3[0],
-      verticalResizerAriaLabel = _ref3[1];
-    return ___EmotionJSX("button", _extends({
-      id: resizerId,
-      ref: onRef,
-      "aria-label": isHorizontal ? horizontalResizerAriaLabel : verticalResizerAriaLabel,
-      className: classes,
-      "data-test-subj": "euiResizableButton",
-      type: "button",
-      onClick: setFocus,
-      onFocus: handleFocus,
-      onBlur: onBlur,
-      disabled: isDisabled
-    }, rest));
-  });
+  return ___EmotionJSX(EuiResizableButton, _extends({
+    id: resizerId,
+    ref: onRef,
+    disabled: isDisabled,
+    onClick: function onClick(e) {
+      return e.currentTarget.focus();
+    },
+    onFocus: function onFocus() {
+      return _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(resizerId);
+    }
+  }, rest));
 };
-export function euiResizableButtonWithControls(controls) {
+export var euiResizableButtonWithControls = function euiResizableButtonWithControls(controls) {
   return function (props) {
-    return ___EmotionJSX(EuiResizableButton, _extends({}, controls, props));
+    return ___EmotionJSX(EuiResizableButtonControlled, _extends({}, controls, props));
   };
-}
+};

package/optimize/es/components/resizable_container/resizable_button.styles.js

@@ -0,0 +1,66 @@
+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 { transparentize } from '../../services';
+import { logicalCSS, mathWithUnits, euiCanAnimate } from '../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1fvu7sv-end",
+  styles: "align-items:flex-end;label:end;"
+} : {
+  name: "1fvu7sv-end",
+  styles: "align-items:flex-end;label:end;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "h0ntv8-start",
+  styles: "align-items:flex-start;label:start;"
+} : {
+  name: "h0ntv8-start",
+  styles: "align-items:flex-start;label:start;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "8391db-center",
+  styles: "align-items:center;label:center;"
+} : {
+  name: "8391db-center",
+  styles: "align-items:center;label:center;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiResizableButtonStyles = function euiResizableButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var buttonSize = euiTheme.size.base;
+  var grabHandleWidth = euiTheme.size.m;
+  var grabHandleHeight = euiTheme.border.width.thin;
+  var transitionSpeed = euiTheme.animation.fast;
+  var transition = "".concat(transitionSpeed, " ease");
+  return {
+    // Mimics the "grab" icon with CSS psuedo-elements.
+    // 1. The "grab" icon transforms into a thicker straight line on :hover and :focus
+    // 2. Start/end aligned handles should have a slight margin offset that disappears on hover/focus
+    // 3. CSS hack to smooth out/anti-alias the 1px wide handles at various zoom levels
+    euiResizableButton: /*#__PURE__*/css("z-index:1;flex-shrink:0;display:flex;justify-content:center;gap:", mathWithUnits(grabHandleHeight, function (x) {
+      return x * 2;
+    }), ";&:disabled{display:none;}&:hover,&:focus{gap:0;justify-content:center;}", euiCanAnimate, "{transition:gap ", transition, ",justify-content ", transition, ";}&::before,&::after{content:'';display:block;background-color:", euiTheme.colors.darkestShade, ";transform:translateZ(0);", euiCanAnimate, "{transition:width ", transition, ",height ", transition, ",margin ", transition, ",background-color ", transition, ";}}&:hover{&::before,&::after{background-color:", euiTheme.colors.mediumShade, ";", euiCanAnimate, "{transition-delay:", transitionSpeed, ";}}}&:focus,&:active{background-color:", transparentize(euiTheme.colors.primary, 0.1), ";&::before,&::after{background-color:", euiTheme.colors.primary, ";", euiCanAnimate, "{transition:width ", transition, ",height ", transition, ";transition-delay:", mathWithUnits(transitionSpeed, function (x) {
+      return x / 2;
+    }), ";}}};label:euiResizableButton;"),
+    horizontal: /*#__PURE__*/css("cursor:col-resize;", logicalCSS('height', '100%'), " ", logicalCSS('width', buttonSize), " margin-inline:", mathWithUnits(buttonSize, function (x) {
+      return x / -2;
+    }), ";&::before,&::after{", logicalCSS('width', grabHandleHeight), " ", logicalCSS('height', grabHandleWidth), " margin-block:", euiTheme.size.base, ";}&:hover,&:focus,&:active{&::before,&::after{", logicalCSS('height', '100%'), " margin-block:0;transform:none;}};label:horizontal;"),
+    vertical: /*#__PURE__*/css("flex-direction:column;cursor:row-resize;", logicalCSS('width', '100%'), " ", logicalCSS('height', buttonSize), " margin-block:", mathWithUnits(buttonSize, function (x) {
+      return x / -2;
+    }), ";&::before,&::after{", logicalCSS('height', grabHandleHeight), " ", logicalCSS('width', grabHandleWidth), " margin-inline:", euiTheme.size.base, ";}&:hover,&:focus,&:active{&::before,&::after{", logicalCSS('width', '100%'), " margin-inline:0;transform:none;}};label:vertical;"),
+    alignIndicator: {
+      center: _ref3,
+      start: _ref2,
+      end: _ref
+    }
+  };
+};

package/optimize/es/components/resizable_container/resizable_collapse_button.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "externalPosition", "internalPosition", "direction", "isVisible", "isCollapsed"];
 /*
@@ -11,11 +12,15 @@ var _excluded = ["className", "externalPosition", "internalPosition", "direction
 
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
 import { EuiButtonIcon } from '../button';
+import { euiScreenReaderOnlyStyles } from '../accessibility/screen_reader_only/screen_reader_only.styles';
+import { euiResizableCollapseButtonStyles } from './resizable_collapse_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref) {
   var className = _ref.className,
-    externalPosition = _ref.externalPosition,
+    _ref$externalPosition = _ref.externalPosition,
+    externalPosition = _ref$externalPosition === void 0 ? 'before' : _ref$externalPosition,
     _ref$internalPosition = _ref.internalPosition,
     internalPosition = _ref$internalPosition === void 0 ? 'middle' : _ref$internalPosition,
     _ref$direction = _ref.direction,
@@ -24,14 +29,15 @@ export var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref
     isCollapsed = _ref.isCollapsed,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isHorizontal = direction === 'horizontal';
-  var classes = classNames('euiResizableToggleButton', "euiResizableToggleButton--".concat(direction), "euiResizableToggleButton--".concat(externalPosition), "euiResizableToggleButton--".concat(internalPosition), {
-    'euiResizableToggleButton-isVisible': isVisible,
-    'euiResizableToggleButton-isCollapsed': isCollapsed
-  }, className);
-
-  // Default to simiple grab icon in case there is no externalPosition specified
-  var COLLAPSED_ICON = isHorizontal ? 'grab' : 'grabHorizontal';
-  var NOT_COLLAPSED_ICON = isHorizontal ? 'grab' : 'grabHorizontal';
+  var showOnFocus = !isCollapsed && !isVisible;
+  var screenReaderOnlyStyles = euiScreenReaderOnlyStyles(showOnFocus).euiScreenReaderOnly;
+  var euiTheme = useEuiTheme();
+  var styles = euiResizableCollapseButtonStyles(euiTheme);
+  var collapsedStyles = [styles.collapsed.collapsed, styles.collapsed[direction], styles.collapsed["".concat(direction, "Positions")][internalPosition]];
+  var collapsibleStyles = [styles.collapsible.collapsible, styles.collapsible[direction][externalPosition], styles.collapsible[direction][internalPosition]];
+  var cssStyles = [styles.euiResizableCollapseButton, showOnFocus && screenReaderOnlyStyles].concat(_toConsumableArray(isCollapsed ? collapsedStyles : collapsibleStyles));
+  var COLLAPSED_ICON = '';
+  var NOT_COLLAPSED_ICON = '';
   switch (externalPosition) {
     case 'before':
       COLLAPSED_ICON = isHorizontal ? 'menuLeft' : 'menuUp';
@@ -42,11 +48,13 @@ export var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref
       NOT_COLLAPSED_ICON = isHorizontal ? 'menuLeft' : 'menuUp';
       break;
   }
+  var classes = classNames('euiResizableCollapseButton', className);
   return ___EmotionJSX(EuiButtonIcon, _extends({
     display: isCollapsed ? 'empty' : 'base',
-    color: "text"
-  }, rest, {
+    color: "text",
     className: classes,
+    css: cssStyles
+  }, rest, {
     iconType: isCollapsed ? COLLAPSED_ICON : NOT_COLLAPSED_ICON
   }));
 };

package/optimize/es/components/resizable_container/resizable_collapse_button.styles.js

@@ -0,0 +1,85 @@
+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, mathWithUnits } from '../../global_styling';
+import { euiShadowXSmall, euiSlightShadowHover } from '../../themes/amsterdam';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "fuwsll-euiResizableCollapseButton",
+  styles: "z-index:2;position:absolute;&:focus{animation:none;};label:euiResizableCollapseButton;"
+} : {
+  name: "fuwsll-euiResizableCollapseButton",
+  styles: "z-index:2;position:absolute;&:focus{animation:none;};label:euiResizableCollapseButton;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiResizableCollapseButtonStyles = function euiResizableCollapseButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var buttonSize = euiTheme.size.l;
+  var centeringOffset = mathWithUnits(buttonSize, function (x) {
+    return x / -2;
+  }); // Use negative margins instead of transforms to avoid having to override EuiButtonIcon's CSS
+  var buttonOffset = euiTheme.size.base;
+  return {
+    euiResizableCollapseButton: _ref,
+    collapsible: {
+      collapsible: /*#__PURE__*/css("background:", euiTheme.colors.emptyShade, ";", euiShadowXSmall(euiThemeContext), " &:focus{", euiSlightShadowHover(euiThemeContext), ";};label:collapsible;"),
+      horizontal: {
+        after: /*#__PURE__*/css(logicalCSS('right', 0), " ", logicalCSS('margin-right', centeringOffset), ";;label:after;"),
+        before: /*#__PURE__*/css(logicalCSS('left', 0), " ", logicalCSS('margin-left', centeringOffset), ";;label:before;"),
+        middle: /*#__PURE__*/css(logicalCSS('top', '50%'), " ", logicalCSS('margin-top', centeringOffset), ";;label:middle;"),
+        top: /*#__PURE__*/css(logicalCSS('top', 0), " ", logicalCSS('margin-top', buttonOffset), ";;label:top;"),
+        bottom: /*#__PURE__*/css(logicalCSS('bottom', 0), " ", logicalCSS('margin-bottom', buttonOffset), ";;label:bottom;"),
+        // `left/right` aren't valid positions for the horizontal direction,
+        // so we're using getters to fall back to the `middle` CSS
+        get left() {
+          return this.middle;
+        },
+        get right() {
+          return this.middle;
+        }
+      },
+      vertical: {
+        after: /*#__PURE__*/css(logicalCSS('top', '100%'), " ", logicalCSS('margin-top', centeringOffset), ";;label:after;"),
+        before: /*#__PURE__*/css(logicalCSS('bottom', '100%'), " ", logicalCSS('margin-bottom', centeringOffset), ";;label:before;"),
+        middle: /*#__PURE__*/css(logicalCSS('left', '50%'), " ", logicalCSS('margin-left', centeringOffset), ";;label:middle;"),
+        left: /*#__PURE__*/css(logicalCSS('left', 0), " ", logicalCSS('margin-left', buttonOffset), ";;label:left;"),
+        right: /*#__PURE__*/css(logicalCSS('right', 0), " ", logicalCSS('margin-right', buttonOffset), ";;label:right;"),
+        // `top/bottom` aren't valid positions for the horizontal direction,
+        // so we're using getters to fall back to the `middle` CSS
+        get top() {
+          return this.middle;
+        },
+        get bottom() {
+          return this.middle;
+        }
+      }
+    },
+    collapsed: {
+      // When collapsed, the button itself is the full collapsed area
+      // and we use flex to align the icon within
+      collapsed: /*#__PURE__*/css("border-radius:0;", logicalCSS('top', 0), ";;label:collapsed;"),
+      horizontal: /*#__PURE__*/css(logicalCSS('height', '100%'), ";;label:horizontal;"),
+      vertical: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:vertical;"),
+      horizontalPositions: {
+        top: /*#__PURE__*/css(logicalCSS('padding-top', buttonOffset), " align-items:flex-start;;label:top;"),
+        bottom: /*#__PURE__*/css(logicalCSS('padding-bottom', buttonOffset), " align-items:flex-end;;label:bottom;"),
+        middle: /*#__PURE__*/css(";label:middle;"),
+        left: /*#__PURE__*/css(";label:left;"),
+        right: /*#__PURE__*/css(";label:right;")
+      },
+      verticalPositions: {
+        left: /*#__PURE__*/css(logicalCSS('padding-left', buttonOffset), " justify-content:flex-start;;label:left;"),
+        right: /*#__PURE__*/css(logicalCSS('padding-right', buttonOffset), " justify-content:flex-end;;label:right;"),
+        middle: /*#__PURE__*/css(";label:middle;"),
+        top: /*#__PURE__*/css(";label:top;"),
+        bottom: /*#__PURE__*/css(";label:bottom;")
+      }
+    }
+  };
+};

package/optimize/es/components/steps/step.styles.js

@@ -40,7 +40,7 @@ export var euiStepStyles = function euiStepStyles(euiThemeContext) {
 export var euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var euiStep = euiStepVariables(euiTheme);
-  var styles = {
+  return {
     euiStep__content: /*#__PURE__*/css(logicalCSS('margin-top', euiTheme.size.s), " ", logicalCSS('padding-top', euiTheme.size.base), " ", logicalCSS('padding-bottom', mathWithUnits([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
       return x + y;
     })), " ", logicalCSS('padding-right', euiTheme.size.base), ";;label:euiStep__content;"),
@@ -50,16 +50,16 @@ export var euiStepContentStyles = function euiStepContentStyles(euiThemeContext)
     })), logicalCSS('margin-left', mathWithUnits(euiStep.numberSize, function (x) {
       return x / 2;
     })), ";;label:m;"),
-    s: /*#__PURE__*/css(";label:s;"),
-    // s is the same as m, so we'll programmatically duplicate it below
+    // `s` is the same as `m` - use a getter to duplicate its content
+    get s() {
+      return this.m;
+    },
     xs: /*#__PURE__*/css(logicalCSS('padding-left', mathWithUnits([euiStep.numberXSSize, euiStep.numberMargin], function (x, y) {
       return x / 2 + y;
     })), logicalCSS('margin-left', mathWithUnits(euiStep.numberXSSize, function (x) {
       return x / 2;
     })), ";;label:xs;")
   };
-  styles.s = styles.m;
-  return styles;
 };
 export var euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;

package/optimize/es/services/accessibility/html_id_generator.js

@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
+import React, { useMemo } from 'react';
 import { v1 as uuidv1 } from 'uuid';
-import { useMemo } from 'react';
 
 /**
  * This function returns a function to generate ids.
@@ -32,7 +32,8 @@ export function htmlIdGenerator() {
  * This prevents IDs from being re-randomized on every component update.
  */
 
-export var useGeneratedHtmlId = function useGeneratedHtmlId() {
+// We can remove this deprecated hook once EUI no longer needs to support React 16-17
+var useDeprecatedGeneratedHtmlId = function useDeprecatedGeneratedHtmlId() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     prefix = _ref.prefix,
     suffix = _ref.suffix,
@@ -40,4 +41,19 @@ export var useGeneratedHtmlId = function useGeneratedHtmlId() {
   return useMemo(function () {
     return conditionalId || htmlIdGenerator(prefix)(suffix);
   }, [conditionalId, prefix, suffix]);
-};
+};
+var useNewGeneratedHtmlId = function useNewGeneratedHtmlId() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref2$prefix = _ref2.prefix,
+    prefix = _ref2$prefix === void 0 ? '' : _ref2$prefix,
+    _ref2$suffix = _ref2.suffix,
+    suffix = _ref2$suffix === void 0 ? '' : _ref2$suffix,
+    conditionalId = _ref2.conditionalId;
+  // Using the default export and dot notation here is intentional
+  // to prevent React <18 import errors.
+  var id = React.useId();
+  return useMemo(function () {
+    return conditionalId || "".concat(prefix).concat(id).concat(suffix);
+  }, [id, conditionalId, prefix, suffix]);
+};
+export var useGeneratedHtmlId = 'useId' in React ? useNewGeneratedHtmlId : useDeprecatedGeneratedHtmlId;

package/optimize/es/themes/amsterdam/global_styling/mixins/shadow.js

@@ -78,7 +78,6 @@ export var euiShadowXLarge = function euiShadowXLarge(_ref9) {
 
 /**
  * slightShadowHover
- * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there
  */
 export var euiSlightShadowHover = function euiSlightShadowHover(_ref11) {
   var euiTheme = _ref11.euiTheme,