@elastic/eui 87.1.0 → 87.2.0

package/eui.d.ts

@@ -1699,7 +1699,6 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow'
 	export const euiShadowXLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color, reverse }?: EuiShadowXLarge) => string;
 	/**
 	 * slightShadowHover
-	 * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there
 	 */
 	export const euiSlightShadowHover: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
 	export const useEuiSlightShadowHover: (color?: _EuiThemeShadowCustomColor['color']) => string;
@@ -20688,7 +20687,7 @@ declare module '@elastic/eui/src/components/steps/step.styles' {
 	export const euiStepContentStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiStep__content: import("@emotion/utils").SerializedStyles;
 	    m: import("@emotion/utils").SerializedStyles;
-	    s: import("@emotion/utils").SerializedStyles;
+	    readonly s: import("@emotion/utils").SerializedStyles;
 	    xs: import("@emotion/utils").SerializedStyles;
 	};
 	export const euiStepTitleStyles: (euiThemeContext: UseEuiTheme) => {
@@ -22214,29 +22213,125 @@ declare module '@elastic/eui/src/components/resizable_container/context' {
 	export const useEuiResizableContainerContext: () => ContainerContextProps;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/resizable_container/resizable_button.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiResizableButtonStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiResizableButton: import("@emotion/utils").SerializedStyles;
+	    horizontal: import("@emotion/utils").SerializedStyles;
+	    vertical: import("@emotion/utils").SerializedStyles;
+	    alignIndicator: {
+	        center: import("@emotion/utils").SerializedStyles;
+	        start: import("@emotion/utils").SerializedStyles;
+	        end: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+
 }
 declare module '@elastic/eui/src/components/resizable_container/resizable_button' {
 	import React, { FunctionComponent, ButtonHTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiResizableButtonController, EuiResizableButtonMouseEvent, EuiResizableButtonKeyEvent } from '@elastic/eui/src/components/resizable_container/types';
-	interface EuiResizableButtonControls {
-	    onKeyDown: (eve: EuiResizableButtonKeyEvent) => void;
-	    onKeyUp: (eve: EuiResizableButtonKeyEvent) => void;
-	    onMouseDown: (eve: EuiResizableButtonMouseEvent) => void;
-	    onTouchStart: (eve: EuiResizableButtonMouseEvent) => void;
-	    onFocus: (id: string) => void;
-	    onBlur: () => void;
+	export type EuiResizableButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & CommonProps & {
+	    /**
+	     * Defaults to displaying a resizer for vertical (y-axis) resizing.
+	     * Set to `true` to display a resizer for horizontal (x-axis) resizing.
+	     */
+	    isHorizontal?: boolean;
+	    /**
+	     * Specify the alignment of the initial resize indicator. Defaults to `center`,
+	     * but consider using `start` for extremely tall content that scrolls off-screen
+	     */
+	    alignIndicator?: 'center' | 'start' | 'end';
+	    /**
+	     * When disabled, the resizer button will be completely hidden
+	     */
+	    disabled?: boolean;
+	};
+	/**
+	 * A generic button for indicating/facilitating resizable content,
+	 * usable outside of the EuiResizableContainer context
+	 */
+	export const EuiResizableButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & CommonProps & {
+	    /**
+	     * Defaults to displaying a resizer for vertical (y-axis) resizing.
+	     * Set to `true` to display a resizer for horizontal (x-axis) resizing.
+	     */
+	    isHorizontal?: boolean | undefined;
+	    /**
+	     * Specify the alignment of the initial resize indicator. Defaults to `center`,
+	     * but consider using `start` for extremely tall content that scrolls off-screen
+	     */
+	    alignIndicator?: "center" | "start" | "end" | undefined;
+	    /**
+	     * When disabled, the resizer button will be completely hidden
+	     */
+	    disabled?: boolean | undefined;
+	} & React.RefAttributes<HTMLButtonElement>>;
+	/**
+	 * Resizer button specific to controlled EuiResizableContainer usage
+	 */
+	export type EuiResizableButtonControls = Omit<EuiResizableButtonProps, 'onFocus'> & {
 	    registration: {
 	        register: (resizer: EuiResizableButtonController) => void;
 	        deregister: (resizerId: EuiResizableButtonController['id']) => void;
 	    };
-	    isHorizontal: boolean;
-	}
-	export interface EuiResizableButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof EuiResizableButtonControls>, CommonProps, Partial<EuiResizableButtonControls> {
-	}
-	export const EuiResizableButton: FunctionComponent<EuiResizableButtonProps>;
-	export function euiResizableButtonWithControls(controls: EuiResizableButtonControls): (props: CommonProps) => React.JSX.Element;
-	export {};
+	    onKeyDown: (e: EuiResizableButtonKeyEvent) => void;
+	    onKeyUp: (e: EuiResizableButtonKeyEvent) => void;
+	    onMouseDown: (e: EuiResizableButtonMouseEvent) => void;
+	    onTouchStart: (e: EuiResizableButtonMouseEvent) => void;
+	    onBlur: () => void;
+	    onFocus: (id: string) => void;
+	};
+	export const EuiResizableButtonControlled: FunctionComponent<Partial<EuiResizableButtonControls>>;
+	export const euiResizableButtonWithControls: (controls: EuiResizableButtonControls) => (props: CommonProps) => React.JSX.Element;
+
+}
+declare module '@elastic/eui/src/components/resizable_container/resizable_collapse_button.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiResizableCollapseButtonStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiResizableCollapseButton: import("@emotion/utils").SerializedStyles;
+	    collapsible: {
+	        collapsible: import("@emotion/utils").SerializedStyles;
+	        horizontal: {
+	            after: import("@emotion/utils").SerializedStyles;
+	            before: import("@emotion/utils").SerializedStyles;
+	            middle: import("@emotion/utils").SerializedStyles;
+	            top: import("@emotion/utils").SerializedStyles;
+	            bottom: import("@emotion/utils").SerializedStyles;
+	            readonly left: import("@emotion/utils").SerializedStyles;
+	            readonly right: import("@emotion/utils").SerializedStyles;
+	        };
+	        vertical: {
+	            after: import("@emotion/utils").SerializedStyles;
+	            before: import("@emotion/utils").SerializedStyles;
+	            middle: import("@emotion/utils").SerializedStyles;
+	            left: import("@emotion/utils").SerializedStyles;
+	            right: import("@emotion/utils").SerializedStyles;
+	            readonly top: import("@emotion/utils").SerializedStyles;
+	            readonly bottom: import("@emotion/utils").SerializedStyles;
+	        };
+	    };
+	    collapsed: {
+	        collapsed: import("@emotion/utils").SerializedStyles;
+	        horizontal: import("@emotion/utils").SerializedStyles;
+	        vertical: import("@emotion/utils").SerializedStyles;
+	        horizontalPositions: {
+	            top: import("@emotion/utils").SerializedStyles;
+	            bottom: import("@emotion/utils").SerializedStyles;
+	            middle: import("@emotion/utils").SerializedStyles;
+	            left: import("@emotion/utils").SerializedStyles;
+	            right: import("@emotion/utils").SerializedStyles;
+	        };
+	        verticalPositions: {
+	            left: import("@emotion/utils").SerializedStyles;
+	            right: import("@emotion/utils").SerializedStyles;
+	            middle: import("@emotion/utils").SerializedStyles;
+	            top: import("@emotion/utils").SerializedStyles;
+	            bottom: import("@emotion/utils").SerializedStyles;
+	        };
+	    };
+	};
 
 }
 declare module '@elastic/eui/src/components/resizable_container/resizable_collapse_button' {
@@ -22259,9 +22354,6 @@ declare module '@elastic/eui/src/components/resizable_container/resizable_collap
 	     * Same direction derived from EuiResizableContainer
 	     */
 	    direction?: EuiResizableContainerProps['direction'];
-	    /**
-	     *
-	     */
 	    isVisible?: boolean;
 	    isCollapsed?: boolean;
 	};
@@ -22452,6 +22544,8 @@ declare module '@elastic/eui/src/components/resizable_container/resizable_contai
 declare module '@elastic/eui/src/components/resizable_container' {
 	export type { EuiResizableContainerProps } from '@elastic/eui/src/components/resizable_container/resizable_container';
 	export { EuiResizableContainer } from '@elastic/eui/src/components/resizable_container/resizable_container';
+	export type { EuiResizableButtonProps } from '@elastic/eui/src/components/resizable_container/resizable_button';
+	export { EuiResizableButton } from '@elastic/eui/src/components/resizable_container/resizable_button';
 
 }
 declare module '@elastic/eui/src/components' {

package/i18ntokens.json

@@ -6067,36 +6067,36 @@
   },
   {
     "token": "euiResizableButton.horizontalResizerAriaLabel",
-    "defString": "Press left or right to adjust panels size",
+    "defString": "Press the left or right arrow keys to adjust panels size",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 111,
+        "line": 69,
         "column": 4,
-        "index": 3069
+        "index": 2211
       },
       "end": {
-        "line": 120,
+        "line": 78,
         "column": 5,
-        "index": 3350
+        "index": 2522
       }
     },
     "filepath": "src/components/resizable_container/resizable_button.tsx"
   },
   {
     "token": "euiResizableButton.verticalResizerAriaLabel",
-    "defString": "Press up or down to adjust panels size",
+    "defString": "Press the up or down arrow keys to adjust panels size",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 111,
+        "line": 69,
         "column": 4,
-        "index": 3069
+        "index": 2211
       },
       "end": {
-        "line": 120,
+        "line": 78,
         "column": 5,
-        "index": 3350
+        "index": 2522
       }
     },
     "filepath": "src/components/resizable_container/resizable_button.tsx"

package/lib/components/page_template/page_template.js

@@ -135,7 +135,8 @@ 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/lib/components/resizable_container/index.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "EuiResizableButton", {
+  enumerable: true,
+  get: function get() {
+    return _resizable_button.EuiResizableButton;
+  }
+});
 Object.defineProperty(exports, "EuiResizableContainer", {
   enumerable: true,
   get: function get() {
     return _resizable_container.EuiResizableContainer;
   }
 });
-var _resizable_container = require("./resizable_container");
+var _resizable_container = require("./resizable_container");
+var _resizable_button = require("./resizable_button");

package/lib/components/resizable_container/resizable_button.js

@@ -4,16 +4,17 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiResizableButton = void 0;
-exports.euiResizableButtonWithControls = euiResizableButtonWithControls;
+exports.euiResizableButtonWithControls = exports.EuiResizableButtonControlled = exports.EuiResizableButton = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("../i18n");
 var _services = require("../../services");
 var _context = require("./context");
+var _resizable_button = require("./resizable_button.styles");
 var _react2 = require("@emotion/react");
-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
@@ -33,15 +34,70 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var EuiResizableButton = function EuiResizableButton(_ref) {
+/**
+ * A generic button for indicating/facilitating resizable content,
+ * usable outside of the EuiResizableContainer context
+ */
+var EuiResizableButton = /*#__PURE__*/(0, _react.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 = (0, _classnames.default)('euiResizableButton', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _resizable_button.euiResizableButtonStyles)(euiTheme);
+  var cssStyles = [styles.euiResizableButton, isHorizontal ? styles.horizontal : styles.vertical, styles.alignIndicator[alignIndicator]];
+  return (0, _react2.jsx)(_i18n.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 (0, _react2.jsx)("button", _extends({
+      ref: ref,
+      "aria-label": isHorizontal ? horizontalResizerAriaLabel : verticalResizerAriaLabel,
+      className: classes,
+      css: cssStyles,
+      "data-test-subj": "euiResizableButton",
+      type: "button"
+    }, rest));
+  });
+});
+exports.EuiResizableButton = EuiResizableButton;
+EuiResizableButton.propTypes = {
+  className: _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
+  /**
+       * Defaults to displaying a resizer for vertical (y-axis) resizing.
+       * Set to `true` to display a resizer for horizontal (x-axis) resizing.
+       */
+  isHorizontal: _propTypes.default.bool,
+  /**
+       * Specify the alignment of the initial resize indicator. Defaults to `center`,
+       * but consider using `start` for extremely tall content that scrolls off-screen
+       */
+  alignIndicator: _propTypes.default.oneOf(["center", "start", "end"]),
+  /**
+       * When disabled, the resizer button will be completely hidden
+       */
+  disabled: _propTypes.default.bool
+};
+EuiResizableButton.displayName = 'EuiResizableButton';
+
+/**
+ * Resizer button specific to controlled EuiResizableContainer usage
+ */
+
+var EuiResizableButtonControlled = function EuiResizableButtonControlled(_ref4) {
+  var registration = _ref4.registration,
+    id = _ref4.id,
+    disabled = _ref4.disabled,
+    _onFocus = _ref4.onFocus,
+    rest = _objectWithoutProperties(_ref4, _excluded2);
   var resizerId = (0, _services.useGeneratedHtmlId)({
     prefix: 'resizable-button',
     conditionalId: id
@@ -53,13 +109,9 @@ var EuiResizableButton = function EuiResizableButton(_ref) {
     } : _useEuiResizableConta2,
     resizers = _useEuiResizableConta3.resizers;
   var isDisabled = (0, _react.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 = (0, _classnames.default)('euiResizableButton', {
-    'euiResizableButton--vertical': !isHorizontal,
-    'euiResizableButton--horizontal': isHorizontal,
-    'euiResizableButton--disabled': isDisabled
-  }, className);
   var previousRef = (0, _react.useRef)();
   var onRef = (0, _react.useCallback)(function (ref) {
     if (!registration) return;
@@ -78,42 +130,22 @@ 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 (0, _react2.jsx)(_i18n.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 (0, _react2.jsx)("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));
-  });
-};
-exports.EuiResizableButton = EuiResizableButton;
-EuiResizableButton.propTypes = {
-  className: _propTypes.default.string,
-  "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string,
-  css: _propTypes.default.any
+  return (0, _react2.jsx)(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));
 };
-function euiResizableButtonWithControls(controls) {
+exports.EuiResizableButtonControlled = EuiResizableButtonControlled;
+var euiResizableButtonWithControls = function euiResizableButtonWithControls(controls) {
   return function (props) {
-    return (0, _react2.jsx)(EuiResizableButton, _extends({}, controls, props));
+    return (0, _react2.jsx)(EuiResizableButtonControlled, _extends({}, controls, props));
   };
-}
+};
+exports.euiResizableButtonWithControls = euiResizableButtonWithControls;

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

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiResizableButtonStyles = 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
+                                                                                                                                                                                                                                                                                           * 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: "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__
+};
+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__*/(0, _react.css)("z-index:1;flex-shrink:0;display:flex;justify-content:center;gap:", (0, _global_styling.mathWithUnits)(grabHandleHeight, function (x) {
+      return x * 2;
+    }), ";&:disabled{display:none;}&:hover,&:focus{gap:0;justify-content:center;}", _global_styling.euiCanAnimate, "{transition:gap ", transition, ",justify-content ", transition, ";}&::before,&::after{content:'';display:block;background-color:", euiTheme.colors.darkestShade, ";transform:translateZ(0);", _global_styling.euiCanAnimate, "{transition:width ", transition, ",height ", transition, ",margin ", transition, ",background-color ", transition, ";}}&:hover{&::before,&::after{background-color:", euiTheme.colors.mediumShade, ";", _global_styling.euiCanAnimate, "{transition-delay:", transitionSpeed, ";}}}&:focus,&:active{background-color:", (0, _services.transparentize)(euiTheme.colors.primary, 0.1), ";&::before,&::after{background-color:", euiTheme.colors.primary, ";", _global_styling.euiCanAnimate, "{transition:width ", transition, ",height ", transition, ";transition-delay:", (0, _global_styling.mathWithUnits)(transitionSpeed, function (x) {
+      return x / 2;
+    }), ";}}};label:euiResizableButton;"),
+    horizontal: /*#__PURE__*/(0, _react.css)("cursor:col-resize;", (0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.logicalCSS)('width', buttonSize), " margin-inline:", (0, _global_styling.mathWithUnits)(buttonSize, function (x) {
+      return x / -2;
+    }), ";&::before,&::after{", (0, _global_styling.logicalCSS)('width', grabHandleHeight), " ", (0, _global_styling.logicalCSS)('height', grabHandleWidth), " margin-block:", euiTheme.size.base, ";}&:hover,&:focus,&:active{&::before,&::after{", (0, _global_styling.logicalCSS)('height', '100%'), " margin-block:0;transform:none;}};label:horizontal;"),
+    vertical: /*#__PURE__*/(0, _react.css)("flex-direction:column;cursor:row-resize;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', buttonSize), " margin-block:", (0, _global_styling.mathWithUnits)(buttonSize, function (x) {
+      return x / -2;
+    }), ";&::before,&::after{", (0, _global_styling.logicalCSS)('height', grabHandleHeight), " ", (0, _global_styling.logicalCSS)('width', grabHandleWidth), " margin-inline:", euiTheme.size.base, ";}&:hover,&:focus,&:active{&::before,&::after{", (0, _global_styling.logicalCSS)('width', '100%'), " margin-inline:0;transform:none;}};label:vertical;"),
+    alignIndicator: {
+      center: _ref3,
+      start: _ref2,
+      end: _ref
+    }
+  };
+};
+exports.euiResizableButtonStyles = euiResizableButtonStyles;

package/lib/components/resizable_container/resizable_collapse_button.js

@@ -7,7 +7,10 @@ exports.EuiResizableCollapseButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
 var _button = require("../button");
+var _screen_reader_only = require("../accessibility/screen_reader_only/screen_reader_only.styles");
+var _resizable_collapse_button = require("./resizable_collapse_button.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "externalPosition", "internalPosition", "direction", "isVisible", "isCollapsed"];
 /*
@@ -19,11 +22,18 @@ var _excluded = ["className", "externalPosition", "internalPosition", "direction
  */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 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,
@@ -32,14 +42,15 @@ var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref) {
     isCollapsed = _ref.isCollapsed,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isHorizontal = direction === 'horizontal';
-  var classes = (0, _classnames.default)('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 = (0, _screen_reader_only.euiScreenReaderOnlyStyles)(showOnFocus).euiScreenReaderOnly;
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _resizable_collapse_button.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';
@@ -50,11 +61,13 @@ var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref) {
       NOT_COLLAPSED_ICON = isHorizontal ? 'menuLeft' : 'menuUp';
       break;
   }
+  var classes = (0, _classnames.default)('euiResizableCollapseButton', className);
   return (0, _react2.jsx)(_button.EuiButtonIcon, _extends({
     display: isCollapsed ? 'empty' : 'base',
-    color: "text"
-  }, rest, {
+    color: "text",
     className: classes,
+    css: cssStyles
+  }, rest, {
     iconType: isCollapsed ? COLLAPSED_ICON : NOT_COLLAPSED_ICON
   }));
 };
@@ -74,9 +87,6 @@ EuiResizableCollapseButton.propTypes = {
      * Same direction derived from EuiResizableContainer
      */
   direction: _propTypes.default.oneOf(["vertical", "horizontal"]),
-  /**
-     *
-     */
   isVisible: _propTypes.default.bool,
   isCollapsed: _propTypes.default.bool
 };