@elastic/eui 65.0.1 → 67.0.0

package/test-env/global_styling/utility/animations.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiAnimFadeIn = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _templateObject;
+
+var euiAnimFadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
+exports.euiAnimFadeIn = euiAnimFadeIn;

package/test-env/services/theme/hooks.js

@@ -32,11 +32,14 @@ var useEuiTheme = function useEuiTheme() {
   var theme = (0, _react.useContext)(_context.EuiThemeContext);
   var colorMode = (0, _react.useContext)(_context.EuiColorModeContext);
   var modifications = (0, _react.useContext)(_context.EuiModificationsContext);
-  return {
-    euiTheme: theme,
-    colorMode: colorMode,
-    modifications: modifications
-  };
+  var assembledTheme = (0, _react.useMemo)(function () {
+    return {
+      euiTheme: theme,
+      colorMode: colorMode,
+      modifications: modifications
+    };
+  }, [theme, colorMode, modifications]);
+  return assembledTheme;
 };
 
 exports.useEuiTheme = useEuiTheme;
@@ -47,17 +50,9 @@ var withEuiTheme = function withEuiTheme(Component) {
   var componentName = Component.displayName || Component.name || 'ComponentWithTheme';
 
   var Render = function Render(props, ref) {
-    var _useEuiTheme = useEuiTheme(),
-        euiTheme = _useEuiTheme.euiTheme,
-        colorMode = _useEuiTheme.colorMode,
-        modifications = _useEuiTheme.modifications;
-
+    var theme = useEuiTheme();
     return (0, _react2.jsx)(Component, (0, _extends2.default)({
-      theme: {
-        euiTheme: euiTheme,
-        colorMode: colorMode,
-        modifications: modifications
-      },
+      theme: theme,
       ref: ref
     }, props));
   };

package/src/components/call_out/_index.scss

@@ -1,3 +0,0 @@
-@import 'variables';
-@import 'mixins';
-

package/src/components/call_out/_mixins.scss

@@ -1,23 +0,0 @@
-// Kibana's Ace Editor uses this function, can't remove yet
-// https://github.com/elastic/kibana/blob/main/src/core/public/styles/_ace_overrides.scss
-// As well as deprecation notices
-// https://github.com/elastic/kibana/blob/main/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/_step_progress.scss
-@function euiCallOutColor($type: 'primary', $returnBackgroundOrForeground: 'background') {
-  @warn 'euiCallOutColor() is set for deprecation. Please consider using EuiCallOut directly.';
-
-  @if (map-has-key($euiCallOutTypes, $type)) {
-    $color: map-get($euiCallOutTypes, $type);
-    $backgroundColor: tintOrShade($color, 90%, 70%);
-    $foregroundColor: shadeOrTint(makeHighContrastColor($color, $backgroundColor), 0, 20%);
-
-    @if ($returnBackgroundOrForeground == 'background') {
-      @return $backgroundColor;
-    } @else if ($returnBackgroundOrForeground == 'foreground') {
-      @return $foregroundColor;
-    } @else {
-      @warn 'Incorrect value provided as $returnBackgroundOrForeground';
-    }
-  } @else {
-    @warn 'Incorrect type of call out provided. See the $euiCallOutTypes map for allowed values.';
-  }
-}

package/src/components/call_out/_variables.scss

@@ -1,7 +0,0 @@
-// Used in mixin that's used in Kibana
-$euiCallOutTypes: (
-  primary: $euiColorPrimary,
-  success: $euiColorSuccess,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-);

package/src/components/overlay_mask/_index.scss

@@ -1 +0,0 @@
-@import 'overlay_mask';

package/src/components/overlay_mask/_overlay_mask.scss

@@ -1,33 +0,0 @@
-.euiOverlayMask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-bottom: 10vh;
-  animation: euiAnimFadeIn $euiAnimSpeedFast ease-in;
-
-  $backgroundColor: $euiColorEmptyShade;
-
-  @if (lightness($euiTextColor) > 50) {
-    $backgroundColor: $euiColorLightShade;
-  }
-
-  background: transparentize($backgroundColor, .2);
-}
-
-.euiBody-hasOverlayMask {
-  overflow: hidden;
-}
-
-// Handling the z-index based on whether it should be displayed above or below the header
-.euiOverlayMask--aboveHeader {
-  z-index: $euiZMask;
-}
-
-.euiOverlayMask--belowHeader {
-  z-index: $euiZMaskBelowHeader;
-}

package/src/components/pagination/_index.scss

@@ -1,2 +0,0 @@
-@import 'pagination';
-@import 'pagination_button';

package/src/components/pagination/_pagination.scss

@@ -1,30 +0,0 @@
-.euiPagination {
-  @include euiScrollBar;
-  display: flex;
-  align-items: center;
-  overflow-y: hidden;
-  overflow-x: auto;
-
-  &__compressedText {
-    // sass-lint:disable-block no-important
-    display: inline-flex;
-    align-items: center;
-    line-height: 1 !important; // Override EuiText line-height
-
-    > span {
-      margin-right: $euiSizeS;
-      margin-left: $euiSizeS;
-      font-weight: $euiFontWeightSemiBold;
-
-      // sass-lint:disable-block nesting-depth
-      &:first-of-type {
-        color: $euiColorPrimaryText;
-      }
-    }
-  }
-}
-
-.euiPagination__list {
-  display: flex;
-  align-items: baseline;
-}

package/src/components/pagination/_pagination_button.scss

@@ -1,37 +0,0 @@
-.euiPaginationButton {
-  font-size: $euiFontSizeS;
-  padding: 0;
-  text-align: center;
-  border-radius: $euiBorderRadius;
-  outline-offset: -$euiFocusRingSize;
-}
-
-.euiPaginationButton-isActive {
-  font-weight: $euiFontWeightBold;
-
-  &#{&} {
-    color: $euiColorPrimary;
-
-    .euiButtonEmpty__content {
-      cursor: default;
-    }
-
-    &,
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-.euiPaginationArrowButton {
-  outline-offset: -$euiFocusRingSize;
-}
-
-.euiPaginationButton-isPlaceholder {
-  align-items: baseline;
-  color: $euiButtonColorDisabledText;
-  font-size: $euiFontSizeS;
-  padding: 0 $euiSizeS;
-  height: $euiSizeL;
-  padding-top: $euiSizeM / 2;
-}

package/src/components/tool_tip/_index.scss

@@ -1 +0,0 @@
-@import 'tool_tip';

package/src/components/tool_tip/_tool_tip.scss

@@ -1,121 +0,0 @@
-/*
- * 1. Shift arrow 1px more than half its size to account for border radius
- */
-
-.euiToolTip {
-  @include euiToolTipStyle;
-  @include euiToolTipAnimation('top');
-  position: absolute;
-  opacity: 0;
-
-  // Custom sizing
-  $arrowSize: $euiSizeM;
-  $arrowPlusSize: (($arrowSize/2) + 1px) * -1; /* 1 */
-  $arrowMinusSize: (($arrowSize/2) - 1px) * -1; /* 1 */
-
-  .euiToolTip__arrow {
-    content: '';
-    position: absolute;
-    transform-origin: center;
-    border-radius: 2px;
-    background-color: $euiTooltipBackgroundColor;
-    width: $arrowSize;
-    height: $arrowSize;
-
-    transform: translateY($arrowPlusSize) rotateZ(45deg); /* 1 */
-  }
-
-  // Positions the arrow and animates in from the same side.
-  &.euiToolTip--right {
-    animation-name: euiToolTipRight;
-
-    .euiToolTip__arrow {
-      transform: translateX($arrowMinusSize) rotateZ(45deg); /* 1 */
-    }
-  }
-
-  &.euiToolTip--bottom {
-    animation-name: euiToolTipBottom;
-
-    .euiToolTip__arrow {
-      transform: translateY($arrowMinusSize) rotateZ(45deg); /* 1 */
-    }
-  }
-
-  &.euiToolTip--left {
-    animation-name: euiToolTipLeft;
-
-    .euiToolTip__arrow {
-      transform: translateX($arrowPlusSize) rotateZ(45deg); /* 1 */
-    }
-  }
-
-  .euiToolTip__title {
-    @include euiToolTipTitle;
-  }
-}
-
-.euiToolTipAnchor {
-  display: inline-block;
-
-  // disabled elements don't fire mouse events which means leaving a disabled element
-  // wouldn't trigger the onMouseOut and hide the tooltip; disabling pointer events
-  // on disabled elements means any mouse events remain handled by parent elements
-  // https://jakearchibald.com/2017/events-and-disabled-form-fields/
-  *[disabled] {
-    pointer-events: none;
-  }
-
-  &.euiToolTipAnchor--displayBlock {
-    display: block;
-  }
-}
-
-// Keyframes to animate in the tooltip.
-@keyframes euiToolTipTop {
-  0% {
-    opacity: 0;
-    transform: translateY(-$euiSize);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes euiToolTipBottom {
-  0% {
-    opacity: 0;
-    transform: translateY($euiSize);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes euiToolTipLeft {
-  0% {
-    opacity: 0;
-    transform: translateX(-$euiSize);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes euiToolTipRight {
-  0% {
-    opacity: 0;
-    transform: translateX($euiSize);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

package/src/global_styling/utility/_utility.scss

@@ -1,15 +0,0 @@
-// This file utilizes !importants on purpose
-// sass-lint:disable no-important
-
-/**
-  * IE doesn't properly wrap groups if it is within a flex-item of a flex-group.
-  * Adding the following styles to the flex-item that contains the wrapping group, will fix IE.
-  * https://github.com/philipwalton/flexbugs/issues/104
-  */
-.euiIEFlexWrapFix {
-  @include internetExplorerOnly {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 0%;
-  }
-}

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

@@ -1,3 +0,0 @@
-.euiOverlayMask {
-  background: transparentize($euiColorInk, .5);
-}

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

@@ -1,7 +0,0 @@
-.euiToolTip {
-  padding: $euiSizeS;
-
-  .euiHorizontalRule {
-    background-color: $euiTooltipBorderColor;
-  }
-}