@elastic/eui 87.0.0 → 87.2.0

package/test-env/components/flyout/flyout_body.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _flyout_body = require("./flyout_body.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "banner"];
+var _excluded = ["children", "className", "banner", "scrollableTabIndex"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -25,6 +25,8 @@ var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
   var children = _ref.children,
     className = _ref.className,
     banner = _ref.banner,
+    _ref$scrollableTabInd = _ref.scrollableTabIndex,
+    scrollableTabIndex = _ref$scrollableTabInd === void 0 ? 0 : _ref$scrollableTabInd,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiFlyoutBody', className);
   var euiTheme = (0, _services.useEuiTheme)();
@@ -36,7 +38,7 @@ var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
     className: classes,
     css: cssStyles
   }, rest), (0, _react2.jsx)("div", {
-    tabIndex: 0,
+    tabIndex: scrollableTabIndex,
     className: "euiFlyoutBody__overflow",
     css: overflowCssStyles
   }, banner && (0, _react2.jsx)("div", {
@@ -55,5 +57,15 @@ EuiFlyoutBody.propTypes = {
   /**
          * Use to display a banner at the top of the body. It is suggested to use `EuiCallOut` for it.
          */
-  banner: _propTypes.default.node
+  banner: _propTypes.default.node,
+  /**
+         * [Scrollable regions (or their children) should be focusable](https://dequeuniversity.com/rules/axe/4.0/scrollable-region-focusable)
+         * to allow keyboard users to scroll the region via arrow keys.
+         *
+         * By default, EuiFlyoutBody's scroll overflow wrapper sets a `tabIndex` of `0`.
+         * If you know your flyout body content already contains focusable children
+         * that satisfy keyboard accessibility requirements, you can use this prop
+         * to override this default.
+         */
+  scrollableTabIndex: _propTypes.default.number
 };

package/test-env/components/form/range/dual_range.js

@@ -38,7 +38,7 @@ var _range = require("./range.styles");
 var _dual_range = require("./dual_range.styles");
 var _i18n = require("../../i18n");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable", "theme"];
+var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "inputPopoverProps", "isDraggable", "theme"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function 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; }
@@ -268,9 +268,11 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResize", function (width) {
+      var _this$props$inputPopo, _this$props$inputPopo2;
       _this.setState({
         rangeWidth: width
       });
+      (_this$props$inputPopo = _this.props.inputPopoverProps) === null || _this$props$inputPopo === void 0 ? void 0 : (_this$props$inputPopo2 = _this$props$inputPopo.onPanelResize) === null || _this$props$inputPopo2 === void 0 ? void 0 : _this$props$inputPopo2.call(_this$props$inputPopo, width);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNearestStep", function (value) {
       var min = _this.props.min;
@@ -387,6 +389,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         prepend = _this$props.prepend,
         minInputProps = _this$props.minInputProps,
         maxInputProps = _this$props.maxInputProps,
+        inputPopoverProps = _this$props.inputPopoverProps,
         isDraggable = _this$props.isDraggable,
         theme = _this$props.theme,
         rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
@@ -627,8 +630,8 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
         css: showTicks || ticks ? rangeStyles.euiRange__slimHorizontalSpacer : rangeStyles.euiRange__horizontalSpacer
       }), maxInput));
-      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, {
-        className: "euiRange__popover",
+      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, (0, _extends2.default)({}, inputPopoverProps, {
+        className: (0, _classnames.default)('euiDualRange__popover', inputPopoverProps === null || inputPopoverProps === void 0 ? void 0 : inputPopoverProps.className),
         input: (0, _react2.jsx)(_form_control_layout.EuiFormControlLayoutDelimited, {
           startControl: minInput,
           endControl: maxInput,
@@ -647,7 +650,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         disableFocusTrap: true,
         onPanelResize: this.onResize,
         popoverScreenReaderText: dualSliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover || theRange;
     }
   }]);
@@ -768,14 +771,38 @@ EuiDualRangeClass.propTypes = {
      * @default false
      */
   fullWidth: _propTypes.default.bool,
+  /**
+     * Only impacts inputs rendered by the `showInput` prop
+     */
+  isInvalid: _propTypes.default.bool,
   /**
      * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`
      */
   isLoading: _propTypes.default.bool,
   /**
-     * Only impacts inputs rendered by the `showInput` prop
+     * Only impacts input popovers rendered when the `showInput` prop is set to `"inputWithPopover"`
+     *
+     * Allows customizing the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element),
+     * except for props controlled by the range component
      */
-  isInvalid: _propTypes.default.bool
+  inputPopoverProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
+    /**
+       * Alignment of the popover relative to the input
+       */
+    anchorPosition: _propTypes.default.oneOf(["downLeft", "downRight", "downCenter"]),
+    inputRef: _propTypes.default.any,
+    onPanelResize: _propTypes.default.func,
+    /**
+       * By default, **EuiInputPopovers** inherit the same width as the passed input element.
+       * However, if the input width is too small, you can pass a minimum panel width
+       * (that should be based on the popover content).
+       */
+    panelMinWidth: _propTypes.default.number
+  })
 };
 var EuiDualRange = (0, _services.withEuiTheme)(EuiDualRangeClass);
 exports.EuiDualRange = EuiDualRange;

package/test-env/components/form/range/range.js

@@ -33,7 +33,7 @@ var _range_wrapper = require("./range_wrapper");
 var _range = require("./range.styles");
 var _i18n = require("../../i18n");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
+var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "inputPopoverProps", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -123,6 +123,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         step = _this$props.step,
         showLabels = _this$props.showLabels,
         showInput = _this$props.showInput,
+        inputPopoverProps = _this$props.inputPopoverProps,
         showTicks = _this$props.showTicks,
         tickInterval = _this$props.tickInterval,
         ticks = _this$props.ticks,
@@ -235,8 +236,8 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
         css: showTicks || ticks ? styles.euiRange__slimHorizontalSpacer : styles.euiRange__horizontalSpacer
       }), theInput));
-      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, {
-        className: "euiRange__popover",
+      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, (0, _extends2.default)({}, inputPopoverProps, {
+        className: (0, _classnames.default)('euiRange__popover', inputPopoverProps === null || inputPopoverProps === void 0 ? void 0 : inputPopoverProps.className),
         input: theInput // `showInputOnly` confirms existence
         ,
         fullWidth: fullWidth,
@@ -244,7 +245,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         closePopover: this.closePopover,
         disableFocusTrap: true,
         popoverScreenReaderText: sliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover ? thePopover : theRange;
     }
   }]);
@@ -364,14 +365,21 @@ EuiRangeClass.propTypes = {
      * @default false
      */
   fullWidth: _propTypes.default.bool,
+  /**
+     * Only impacts inputs rendered by the `showInput` prop
+     */
+  isInvalid: _propTypes.default.bool,
   /**
      * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`
      */
   isLoading: _propTypes.default.bool,
   /**
-     * Only impacts inputs rendered by the `showInput` prop
+     * Only impacts input popovers rendered when the `showInput` prop is set to `"inputWithPopover"`
+     *
+     * Allows customizing the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element),
+     * except for props controlled by the range component
      */
-  isInvalid: _propTypes.default.bool
+  inputPopoverProps: _propTypes.default.any
 };
 var EuiRange = (0, _services.withEuiTheme)(EuiRangeClass);
 exports.EuiRange = EuiRange;

package/test-env/components/form/super_select/super_select.js

@@ -355,7 +355,7 @@ EuiSuperSelect.propTypes = {
        */
   isOpen: _propTypes.default.bool,
   /**
-       * Optional props to pass to the underlying [EuiPopover](/#/layout/popover).
+       * Optional props to pass to the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element).
        * Allows fine-grained control of the popover dropdown menu, including
        * `repositionOnScroll` for EuiSuperSelects used within scrollable containers,
        * and customizing popover panel styling.

package/test-env/components/page/page_sidebar/page_sidebar.js

@@ -52,7 +52,7 @@ var EuiPageSidebar = function EuiPageSidebar(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     inlineStyles = _useState2[0],
     setInlineStyles = _useState2[1];
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     var updatedStyles = _objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth));
     if (sticky) {
       var _document$body$datase;

package/test-env/components/page_template/page_template.js

@@ -40,6 +40,14 @@ var TemplateContext = /*#__PURE__*/(0, _react.createContext)({
   bottomBar: {}
 });
 exports.TemplateContext = TemplateContext;
+var calculateOffset = function calculateOffset(base) {
+  var _document$body$datase;
+  if (typeof document === 'undefined') return 0; // SSR catch
+
+  var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
+  return base * 3 * euiHeaderFixedCounter;
+};
+
 /**
  * Consumed via `EuiPageTemplate`,
  * it controls and propogates most of the shared props per direct child
@@ -66,7 +74,9 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useEuiTheme = (0, _services.useEuiTheme)(),
     euiTheme = _useEuiTheme.euiTheme;
-  var _useState = (0, _react.useState)(_offset),
+  var _useState = (0, _react.useState)(function () {
+      return _offset !== null && _offset !== void 0 ? _offset : calculateOffset(euiTheme.base);
+    }),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     offset = _useState2[0],
     setOffset = _useState2[1];
@@ -79,9 +89,7 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   });
   (0, _react.useEffect)(function () {
     if (_offset === undefined) {
-      var _document$body$datase;
-      var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
-      setOffset(euiTheme.base * 3 * euiHeaderFixedCounter);
+      setOffset(calculateOffset(euiTheme.base));
     }
   }, [_offset, euiTheme.base]);
 
@@ -119,7 +127,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/test-env/components/popover/input_popover.js

@@ -20,7 +20,7 @@ var _services = require("../../services");
 var _form = require("../form/form.styles");
 var _react2 = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -39,6 +39,8 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     input = _ref.input,
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$panelMinWidth = _ref.panelMinWidth,
+    panelMinWidth = _ref$panelMinWidth === void 0 ? 0 : _ref$panelMinWidth,
     onPanelResize = _ref.onPanelResize,
     _inputRef = _ref.inputRef,
     _panelRef = _ref.panelRef,
@@ -56,22 +58,24 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     panelEl = _useState6[0],
     setPanelEl = _useState6[1];
+  var popoverClassRef = (0, _react.useRef)(null);
   var inputRef = (0, _services.useCombinedRefs)([setInputEl, _inputRef]);
   var panelRef = (0, _services.useCombinedRefs)([setPanelEl, _panelRef]);
   var setPanelWidth = (0, _react.useCallback)(function (width) {
     if (panelEl && (!!inputElWidth || !!width)) {
       var newWidth = !!width ? width : inputElWidth;
-      panelEl.style.width = "".concat(newWidth, "px");
-      if (onPanelResize) {
-        onPanelResize(newWidth);
-      }
+      var widthToSet = newWidth && newWidth > panelMinWidth ? newWidth : panelMinWidth;
+      panelEl.style.width = "".concat(widthToSet, "px");
+      onPanelResize === null || onPanelResize === void 0 ? void 0 : onPanelResize(widthToSet);
     }
-  }, [panelEl, inputElWidth, onPanelResize]);
+  }, [panelEl, inputElWidth, onPanelResize, panelMinWidth]);
   var onResize = (0, _react.useCallback)(function () {
     if (inputEl) {
+      var _popoverClassRef$curr;
       var _width = inputEl.getBoundingClientRect().width;
       setInputElWidth(_width);
       setPanelWidth(_width);
+      (_popoverClassRef$curr = popoverClassRef.current) === null || _popoverClassRef$curr === void 0 ? void 0 : _popoverClassRef$curr.positionPopoverFluid();
     }
   }, [inputEl, setPanelWidth]);
   (0, _react.useEffect)(function () {
@@ -106,7 +110,8 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     }),
     buttonRef: inputRef,
     panelRef: panelRef,
-    className: classes
+    className: classes,
+    ref: popoverClassRef
   }, props), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
     clickOutsideDisables: true,
     disabled: disableFocusTrap
@@ -120,11 +125,21 @@ EuiInputPopover.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
+  /**
+     * Alignment of the popover relative to the input
+     */
+  anchorPosition: _propTypes.default.oneOf(["downLeft", "downRight", "downCenter"]),
   disableFocusTrap: _propTypes.default.bool,
   fullWidth: _propTypes.default.bool,
   input: _propTypes.default.any.isRequired,
   inputRef: _propTypes.default.any,
-  onPanelResize: _propTypes.default.func
+  onPanelResize: _propTypes.default.func,
+  /**
+     * By default, **EuiInputPopovers** inherit the same width as the passed input element.
+     * However, if the input width is too small, you can pass a minimum panel width
+     * (that should be based on the popover content).
+     */
+  panelMinWidth: _propTypes.default.number
 };
 EuiInputPopover.defaultProps = {
   anchorPosition: 'downLeft',

package/test-env/components/popover/popover.js

@@ -217,8 +217,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
         top = _findPopoverPosition.top,
         left = _findPopoverPosition.left,
         foundPosition = _findPopoverPosition.position,
-        arrow = _findPopoverPosition.arrow,
-        anchorBoundingBox = _findPopoverPosition.anchorBoundingBox;
+        arrow = _findPopoverPosition.arrow;
 
       // the popover's z-index must inherit from the button
       // this keeps a button's popover under a flyout that would cover the button
@@ -227,7 +226,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
       var zIndex = zIndexProp == null ? (0, _popover.getElementZIndex)(_this.button, _this.panel) + 2000 : zIndexProp;
       var popoverStyles = _objectSpread(_objectSpread({}, _this.props.panelStyle), {}, {
         top: top,
-        left: _this.props.attachToAnchor && anchorBoundingBox ? anchorBoundingBox.left : left,
+        left: left,
         zIndex: zIndex
       });
       var willRenderArrow = !_this.props.attachToAnchor && _this.props.hasArrow;
@@ -549,9 +548,8 @@ EuiPopover.propTypes = {
      */
   anchorPosition: _propTypes.default.any,
   /**
-     * Style and position alteration for arrow-less, left-aligned
-     * attachment. Intended for use with inputs as anchors, e.g.
-     * EuiInputPopover
+     * Style and position alteration for arrow-less attachment.
+     * Intended for use with inputs as anchors, e.g. EuiInputPopover
      */
   attachToAnchor: _propTypes.default.bool,
   /**

package/test-env/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/test-env/components/resizable_container/resizable_button.js

@@ -5,8 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiResizableButton = void 0;
-exports.euiResizableButtonWithControls = euiResizableButtonWithControls;
+exports.euiResizableButtonWithControls = exports.EuiResizableButtonControlled = exports.EuiResizableButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -16,8 +15,10 @@ 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
@@ -27,15 +28,70 @@ var _excluded = ["isHorizontal", "className", "id", "registration", "disabled",
  */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var 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 = (0, _objectWithoutProperties2.default)(_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 = (0, _slicedToArray2.default)(_ref2, 2),
+      horizontalResizerAriaLabel = _ref3[0],
+      verticalResizerAriaLabel = _ref3[1];
+    return (0, _react2.jsx)("button", (0, _extends2.default)({
+      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 = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
   var resizerId = (0, _services.useGeneratedHtmlId)({
     prefix: 'resizable-button',
     conditionalId: id
@@ -47,13 +103,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;
@@ -72,42 +124,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 = (0, _slicedToArray2.default)(_ref2, 2),
-      horizontalResizerAriaLabel = _ref3[0],
-      verticalResizerAriaLabel = _ref3[1];
-    return (0, _react2.jsx)("button", (0, _extends2.default)({
-      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, (0, _extends2.default)({
+    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, (0, _extends2.default)({}, controls, props));
+    return (0, _react2.jsx)(EuiResizableButtonControlled, (0, _extends2.default)({}, controls, props));
   };
-}
+};
+exports.euiResizableButtonWithControls = euiResizableButtonWithControls;

package/test-env/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;