@elastic/eui 67.1.1 → 68.0.0

package/optimize/lib/components/list_group/pinnable_list_group/pinnable_list_group.styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiPinnableListGroupItemExtraActionStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _services = require("../../../services");
+
+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)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1du20m7-euiPinnableListGroup__itemExtraAction",
+  styles: "svg{transform:rotate(45deg);};label:euiPinnableListGroup__itemExtraAction;"
+} : {
+  name: "1du20m7-euiPinnableListGroup__itemExtraAction",
+  styles: "svg{transform:rotate(45deg);};label:euiPinnableListGroup__itemExtraAction;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiPinnableListGroupItemExtraActionStyles = function euiPinnableListGroupItemExtraActionStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return {
+    // Base
+    euiPinnableListGroup__itemExtraAction: _ref,
+    // Variants
+    pinned: /*#__PURE__*/(0, _react.css)("&:not(:hover):not(:focus){color:", (0, _services.makeHighContrastColor)(euiTheme.colors.lightShade)(euiTheme), ";};label:pinned;")
+  };
+};
+
+exports.euiPinnableListGroupItemExtraActionStyles = euiPinnableListGroupItemExtraActionStyles;

package/optimize/lib/components/notification/notification_event.js

@@ -61,9 +61,8 @@ var EuiNotificationEvent = function EuiNotificationEvent(_ref) {
       className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiNotificationEvent', {
-    'euiNotificationEvent--withReadState': typeof isRead === 'boolean',
-    className: className
-  });
+    'euiNotificationEvent--withReadState': typeof isRead === 'boolean'
+  }, className);
   var classesTitle = (0, _classnames.default)('euiNotificationEvent__title', {
     'euiNotificationEvent__title--isRead': isRead
   });

package/optimize/lib/components/popover/input_popover.js

@@ -111,8 +111,9 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
   };
 
   var classes = (0, _classnames.default)('euiInputPopover', className);
+  var form = (0, _form.euiFormVariables)(euiThemeContext);
   return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
-    css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', (0, _form.euiFormMaxWidth)(euiThemeContext)), ";label:EuiInputPopover;"),
+    css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', form.maxWidth), ";label:EuiInputPopover;"),
     ownFocus: false,
     button: (0, _react2.jsx)(_resize_observer.EuiResizeObserver, {
       onResize: onResize

package/optimize/lib/components/resizable_container/resizable_panel.js

@@ -35,7 +35,7 @@ var _resizable_collapse_button = require("./resizable_collapse_button");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "className", "id", "isHorizontal", "size", "initialSize", "minSize", "scrollable", "style", "mode", "registration", "onToggleCollapsed", "onToggleCollapsedInternal", "wrapperProps", "hasShadow", "borderRadius", "color", "paddingSize", "wrapperPadding"];
+var _excluded = ["children", "className", "id", "isHorizontal", "size", "initialSize", "minSize", "scrollable", "mode", "registration", "onToggleCollapsed", "onToggleCollapsedInternal", "wrapperProps", "hasShadow", "borderRadius", "color", "paddingSize", "wrapperPadding"];
 
 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); }
 
@@ -100,8 +100,6 @@ var EuiResizablePanel = function EuiResizablePanel(_ref) {
       minSize = _ref$minSize === void 0 ? '0px' : _ref$minSize,
       _ref$scrollable = _ref.scrollable,
       scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style,
       mode = _ref.mode,
       registration = _ref.registration,
       onToggleCollapsed = _ref.onToggleCollapsed,
@@ -210,7 +208,7 @@ var EuiResizablePanel = function EuiResizablePanel(_ref) {
     };
   }
 
-  var styles = _objectSpread(_objectSpread({}, style), dimensions);
+  var styles = _objectSpread(_objectSpread({}, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style), dimensions);
 
   (0, _react.useEffect)(function () {
     if (!registration) return;

package/optimize/lib/services/color/manipulation.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transparentize = exports.tintOrShade = exports.tint = exports.shadeOrTint = exports.shade = exports.saturate = exports.lightness = exports.desaturate = void 0;
+exports.transparentize = exports.tintOrShade = exports.tint = exports.shadeOrTint = exports.shade = exports.saturate = exports.lightness = exports.desaturate = exports.darken = void 0;
 
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 
@@ -122,5 +122,17 @@ exports.desaturate = desaturate;
 var lightness = function lightness(color) {
   return (0, _chromaJs.default)(color).get('hsl.l') * 100;
 };
+/**
+ * Returns the darken value of a color. 0-100
+ * @param color - Color to manipulate
+ * @param amount - Amount to change in absolute terms. 0-1.
+ */
+
+
+exports.lightness = lightness;
+
+var darken = function darken(color, amount) {
+  return (0, _chromaJs.default)(color).darken(amount).hex();
+};
 
-exports.lightness = lightness;
+exports.darken = darken;

package/optimize/lib/services/index.js

@@ -55,6 +55,7 @@ var _exportNames = {
   saturate: true,
   desaturate: true,
   lightness: true,
+  darken: true,
   makeHighContrastColor: true,
   makeDisabledContrastColor: true,
   wcagContrastMin: true,
@@ -227,6 +228,12 @@ Object.defineProperty(exports, "copyToClipboard", {
     return _copy_to_clipboard.copyToClipboard;
   }
 });
+Object.defineProperty(exports, "darken", {
+  enumerable: true,
+  get: function get() {
+    return _color.darken;
+  }
+});
 Object.defineProperty(exports, "dateFormatAliases", {
   enumerable: true,
   get: function get() {

package/optimize/lib/test/rtl/component_helpers.d.ts

@@ -5,3 +5,6 @@
  */
 export declare const waitForEuiPopoverOpen: () => Promise<void>;
 export declare const waitForEuiPopoverClose: () => Promise<void>;
+
+export declare const waitForEuiToolTipVisible: () => Promise<void>;
+export declare const waitForEuiToolTipHidden: () => Promise<void>;

package/optimize/lib/test/rtl/component_helpers.js

@@ -102,7 +102,10 @@ var waitForEuiToolTipVisible = /*#__PURE__*/function () {
             return (0, _react.waitFor)(function () {
               var tooltip = document.querySelector('.euiToolTipPopover');
               expect(tooltip).toBeVisible();
-            });
+            }, {
+              timeout: 1500
+            } // Account for long delay on tooltips
+            );
 
           case 2:
             return _context3.abrupt("return", _context3.sent);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "67.1.1",
+  "version": "68.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -115,7 +115,7 @@
     "@cypress/code-coverage": "^3.10.0",
     "@cypress/react": "^5.10.3",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^48.0.1",
+    "@elastic/charts": "^50.0.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.2.0",

package/src/components/index.scss

@@ -1,7 +1,6 @@
 // Components
 
 @import 'accordion/index';
-@import 'badge/index';
 @import 'basic_table/index';
 @import 'button/index';
 @import 'code/index';
@@ -19,7 +18,6 @@
 @import 'form/index';
 @import 'header/index';
 @import 'key_pad_menu/index';
-@import 'list_group/index';
 @import 'markdown_editor/index';
 @import 'modal/index';
 @import 'notification/index';

package/src/global_styling/mixins/_form.scss

@@ -175,13 +175,12 @@
   background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
   background-image: euiFormControlGradient();
   background-size: 100% 100%; // 1
+  outline: none; // Blanket remove all outlines relying on our own bottom border
 
   @if ($borderOnly) {
     box-shadow: inset 0 0 0 1px $euiFormBorderColor;
   } @else {
     box-shadow:
-      0 1px 1px -1px transparentize($euiShadowColor, .8),
-      0 4px 4px -2px transparentize($euiShadowColor, .8),
       inset 0 0 0 1px $euiFormBorderColor;
   }
 }
@@ -301,8 +300,6 @@
 // Custom styles and states for checkboxes and radios
 
 @mixin euiCustomControl($type: null, $size: $euiSize) {
-  @include euiSlightShadow;
-
   @if $size {
     $size: $size - 2px; // subtract 2px from size to account for border size
     padding: $size / 2;
@@ -321,6 +318,7 @@
               border-color $euiAnimSpeedFast ease-in;
 }
 
+
 @mixin euiCustomControlSelected($type: null) {
   border-color: $euiColorPrimary;
   background-color: $euiColorPrimary;
@@ -372,3 +370,14 @@
   cursor: pointer;
 }
 
+// Adjusts form controls border radius
+@mixin euiFormControlSideBorderRadius($borderRadius, $side, $internal: false) {
+  @if $internal == true {
+    $borderRadius: $borderRadius - 1;
+  }
+  @if $side == 'left' {
+    border-radius: $borderRadius 0 0 $borderRadius;
+  } @else if $side == 'right' {
+    border-radius: 0 $borderRadius $borderRadius 0;
+  }
+}

package/src/global_styling/variables/_borders.scss

@@ -4,8 +4,8 @@ $euiBorderWidthThin: 1px !default;
 $euiBorderWidthThick: 2px !default;
 
 $euiBorderColor: $euiColorLightShade !default;
-$euiBorderRadius: 4px !default;
-$euiBorderRadiusSmall: $euiBorderRadius / 2 !default;
+$euiBorderRadius: $euiSizeS * .75 !default;
+$euiBorderRadiusSmall: $euiSizeS * .5 !default;
 $euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default;
 $euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default;
 $euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default;

package/src/global_styling/variables/_form.scss

@@ -4,12 +4,12 @@ $euiFormControlHeight: $euiSizeXXL !default;
 $euiFormControlCompressedHeight: $euiSizeXL !default;
 $euiFormControlPadding: $euiSizeM !default;
 $euiFormControlCompressedPadding: $euiSizeS !default;
-$euiFormControlBorderRadius: 0 !default;
+$euiFormControlBorderRadius: $euiBorderRadius !default;
 $euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall !default;
 
 $euiRadioSize: $euiSize !default;
 $euiCheckBoxSize: $euiSize !default;
-$euiCheckboxBorderRadius: $euiBorderRadius !default;
+$euiCheckboxBorderRadius: $euiBorderRadiusSmall !default;
 
 // Switch
 $euiSwitchHeight: $euiSize * 1.25 !default;
@@ -28,17 +28,17 @@ $euiSwitchThumbSizeMini: $euiSwitchHeightMini !default;
 // Coloring
 $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default;
 $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default;
-$euiFormBackgroundReadOnlyColor: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorInk), .95) !default;
+$euiFormBackgroundReadOnlyColor: $euiColorEmptyShade !default;
 $euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 100%) !default;
 $euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
 $euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default;
 $euiFormControlDisabledColor: $euiColorMediumShade !default;
-$euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8) !default;
+$euiFormControlBoxShadow: 0 0 transparent !default;
 $euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default;
 $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default;
-$euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 2%, 4%) !default;
+$euiFormInputGroupBorder: none !default;
 $euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default;
 
 // Icons sizes
@@ -56,19 +56,27 @@ $euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight
 $euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressedBorderRadius / 2 !default;
 
 // Range
-$euiRangeTrackColor: $euiColorDarkShade !default;
+$euiRangeTrackColor: $euiColorLightShade !default;
+$euiRangeHighlightColor: $euiColorDarkShade !default;
 
 $euiRangeThumbRadius: 50% !default;
 $euiRangeThumbHeight: $euiSize !default;
 $euiRangeThumbWidth: $euiSize !default;
-$euiRangeThumbBorderColor: $euiRangeTrackColor !default;
+
+$euiRangeThumbBorderColor: $euiColorEmptyShade !default;
+$euiRangeThumbBackgroundColor: $euiRangeHighlightColor !default;
 
 $euiRangeTrackWidth: 100% !default;
-$euiRangeTrackHeight: 2px !default;
+$euiRangeTrackHeight: $euiSizeM / 2;
+$euiRangeTrackCompressedHeight: $euiSizeXS;
 $euiRangeTrackBorderWidth: 0 !default;
 $euiRangeTrackBorderColor: $euiRangeTrackColor !default;
 $euiRangeTrackRadius: $euiBorderRadius !default;
 
 $euiRangeDisabledOpacity: .25 !default;
 
-$euiRangeHighlightHeight: $euiSizeXS !default;
+$euiRangeHighlightHeight: $euiRangeTrackHeight !default;
+$euiRangeHighlightCompressedHeight: $euiRangeTrackCompressedHeight !default;
+
+$euiRangeHeight: $euiFormControlHeight !default;
+$euiRangeCompressedHeight: $euiFormControlCompressedHeight !default;

package/src/themes/amsterdam/global_styling/mixins/_index.scss

@@ -10,7 +10,6 @@
 
 @import '../../../../global_styling/mixins/button';
 @import '../../../../global_styling/mixins/form';
-@import 'form';
 @import '../../../../global_styling/mixins/header';
 @import '../../../../global_styling/mixins/loading';
 @import 'link';

package/src/themes/amsterdam/global_styling/variables/_index.scss

@@ -3,8 +3,6 @@
 @import 'states';
 
 @import 'buttons';
-@import 'borders';
-@import 'form';
 @import 'header';
 @import 'page';
 @import 'steps';

package/src/themes/amsterdam/overrides/_index.scss

@@ -11,11 +11,9 @@
 @import 'form_controls';
 @import 'header';
 @import 'hue';
-@import 'list_group_item';
 @import 'key_pad_menu';
 @import 'markdown_editor';
 @import 'modal';
-@import 'notification_badge';
 @import 'range';
 @import 'range_draggable';
 @import 'range_highlight';

package/test-env/components/accessibility/skip_link/skip_link.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,11 +11,11 @@ exports.POSITIONS = exports.EuiSkipLink = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -31,68 +33,88 @@ var _skip_link = require("./skip_link.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["destinationId", "overrideLinkBehavior", "tabIndex", "position", "children", "className"];
+var _excluded = ["destinationId", "fallbackDestination", "overrideLinkBehavior", "tabIndex", "position", "children", "className", "onClick"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 POSITIONS = ['static', 'fixed', 'absolute'];
 exports.POSITIONS = POSITIONS;
 
 var EuiSkipLink = function EuiSkipLink(_ref) {
   var destinationId = _ref.destinationId,
+      _ref$fallbackDestinat = _ref.fallbackDestination,
+      fallbackDestination = _ref$fallbackDestinat === void 0 ? 'main' : _ref$fallbackDestinat,
       overrideLinkBehavior = _ref.overrideLinkBehavior,
       tabIndex = _ref.tabIndex,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'static' : _ref$position,
       children = _ref.children,
       className = _ref.className,
+      _onClick = _ref.onClick,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _skip_link.euiSkipLinkStyles)(euiTheme);
   var classes = (0, _classnames.default)('euiSkipLink', className);
-  var cssStyles = [styles.euiSkipLink, position !== 'static' ? styles[position] : undefined]; // Create the `href` from `destinationId`
-
-  var optionalProps = {};
-
-  if (destinationId) {
-    optionalProps = {
-      href: "#".concat(destinationId)
-    };
-  }
-
-  if (overrideLinkBehavior) {
-    optionalProps = _objectSpread(_objectSpread({}, optionalProps), {}, {
-      onClick: function onClick(e) {
-        e.preventDefault();
-        var destinationEl = document.getElementById(destinationId);
-        if (!destinationEl) return; // Scroll to the top of the destination content only if it's ~mostly out of view
-
-        var destinationY = destinationEl.getBoundingClientRect().top;
-        var halfOfViewportHeight = window.innerHeight / 2;
-
-        if (destinationY >= halfOfViewportHeight || window.scrollY >= destinationY + halfOfViewportHeight) {
-          destinationEl.scrollIntoView();
-        } // Ensure the destination content is focusable
-
-
-        if (!(0, _tabbable.isTabbable)(destinationEl)) {
-          destinationEl.tabIndex = -1;
-          destinationEl.addEventListener('blur', function () {
-            return destinationEl.removeAttribute('tabindex');
-          }, {
-            once: true
-          });
-        }
-
-        destinationEl.focus({
-          preventScroll: true
-        }); // Scrolling is already handled above, and focus autoscroll behaves oddly on Chrome around fixed headers
+  var cssStyles = [styles.euiSkipLink, position !== 'static' ? styles[position] : undefined];
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      destinationEl = _useState2[0],
+      setDestinationEl = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      hasValidId = _useState4[0],
+      setHasValidId = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    var idEl = document.getElementById(destinationId);
+
+    if (idEl) {
+      setHasValidId(true);
+      setDestinationEl(idEl);
+      return;
+    }
+
+    setHasValidId(false); // If no valid element via ID is available, use the fallback query selectors
+
+    var fallbackEl = document.querySelector(fallbackDestination);
+
+    if (fallbackEl) {
+      setDestinationEl(fallbackEl);
+    }
+  }, [destinationId, fallbackDestination]);
+  var onClick = (0, _react.useCallback)(function (e) {
+    if (overrideLinkBehavior || !hasValidId) {
+      if (!destinationEl) return;
+      e.preventDefault(); // Scroll to the top of the destination content only if it's ~mostly out of view
+
+      var destinationY = destinationEl.getBoundingClientRect().top;
+      var halfOfViewportHeight = window.innerHeight / 2;
+
+      if (destinationY >= halfOfViewportHeight || window.scrollY >= destinationY + halfOfViewportHeight) {
+        destinationEl.scrollIntoView();
+      } // Ensure the destination content is focusable
+
+
+      if (!(0, _tabbable.isTabbable)(destinationEl)) {
+        destinationEl.tabIndex = -1;
+        destinationEl.addEventListener('blur', function () {
+          return destinationEl.removeAttribute('tabindex');
+        }, {
+          once: true
+        });
       }
-    });
-  }
 
+      destinationEl.focus({
+        preventScroll: true
+      }); // Scrolling is already handled above, and focus autoscroll behaves oddly on Chrome around fixed headers
+    }
+
+    _onClick === null || _onClick === void 0 ? void 0 : _onClick(e);
+  }, [overrideLinkBehavior, hasValidId, destinationEl, _onClick]);
   return (0, _react2.jsx)(_screen_reader_only.EuiScreenReaderOnly, {
     showOnFocus: true
   }, (0, _react2.jsx)(_button.EuiButton, (0, _extends2.default)({
@@ -100,8 +122,10 @@ var EuiSkipLink = function EuiSkipLink(_ref) {
     className: classes,
     tabIndex: position === 'fixed' ? 0 : tabIndex,
     size: "s",
-    fill: true
-  }, optionalProps, rest), children));
+    fill: true,
+    href: "#".concat(destinationId),
+    onClick: onClick
+  }, rest), children));
 };
 
 exports.EuiSkipLink = EuiSkipLink;
@@ -109,22 +133,12 @@ EuiSkipLink.propTypes = {
   href: _propTypes.default.string,
   onClick: _propTypes.default.func,
 
-  /**
-     * Change the display position of the element when focused.
-     * If 'fixed', the link will be fixed to the top left of the viewport
-     */
-
   /**
      * Change the display position of the element when focused.
      * If 'fixed', the link will be fixed to the top left of the viewport
      */
   position: _propTypes.default.any,
 
-  /**
-     * Typically an anchor id (e.g. `a11yMainContent`), the value provided
-     * will be prepended with a hash `#` and used as the link `href`
-     */
-
   /**
      * Typically an anchor id (e.g. `a11yMainContent`), the value provided
      * will be prepended with a hash `#` and used as the link `href`
@@ -132,10 +146,11 @@ EuiSkipLink.propTypes = {
   destinationId: _propTypes.default.string.isRequired,
 
   /**
-     * If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing),
-     * setting this flag to true will manually scroll to and focus the destination element
-     * without changing the browser URL's hash
+     * If no destination ID element exists or can be found, you may provide a string of
+     * query selectors to fall back to (e.g. a `main` or `role="main"` element)
+     * @default main
      */
+  fallbackDestination: _propTypes.default.string,
 
   /**
      * If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing),
@@ -144,10 +159,6 @@ EuiSkipLink.propTypes = {
      */
   overrideLinkBehavior: _propTypes.default.bool,
 
-  /**
-     * When position is fixed, this is forced to `0`
-     */
-
   /**
      * When position is fixed, this is forced to `0`
      */