@elastic/eui 66.0.0 → 67.1.0

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiThemeContext = exports.EuiSystemContext = exports.EuiModificationsContext = exports.EuiColorModeContext = void 0;
+exports.defaultComputedTheme = exports.EuiThemeContext = exports.EuiSystemContext = exports.EuiModificationsContext = exports.EuiColorModeContext = void 0;
 
 var _react = require("react");
 
@@ -24,5 +24,7 @@ var EuiModificationsContext = /*#__PURE__*/(0, _react.createContext)({});
 exports.EuiModificationsContext = EuiModificationsContext;
 var EuiColorModeContext = /*#__PURE__*/(0, _react.createContext)(_utils.DEFAULT_COLOR_MODE);
 exports.EuiColorModeContext = EuiColorModeContext;
-var EuiThemeContext = /*#__PURE__*/(0, _react.createContext)((0, _utils.getComputed)(_theme.EuiThemeAmsterdam, {}, _utils.DEFAULT_COLOR_MODE));
+var defaultComputedTheme = (0, _utils.getComputed)(_theme.EuiThemeAmsterdam, {}, _utils.DEFAULT_COLOR_MODE);
+exports.defaultComputedTheme = defaultComputedTheme;
+var EuiThemeContext = /*#__PURE__*/(0, _react.createContext)(defaultComputedTheme);
 exports.EuiThemeContext = EuiThemeContext;

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

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _context = require("./context");
 
+var _provider = require("./provider");
+
 var _react2 = require("@emotion/react");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -28,10 +30,36 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+var providerMessage = "`EuiProvider` is missing which can result in negative effects.\nWrap your component in `EuiProvider`: https://ela.st/euiprovider.";
+
 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);
+
+  if (process.env.NODE_ENV !== 'production') {
+    var isFallback = theme === _context.defaultComputedTheme;
+    var warningLevel = (0, _provider.getEuiDevProviderWarning)();
+
+    if (isFallback && typeof warningLevel !== 'undefined') {
+      switch (warningLevel) {
+        case 'log':
+          console.log(providerMessage);
+          break;
+
+        case 'warn':
+          console.warn(providerMessage);
+          break;
+
+        case 'error':
+          throw new Error(providerMessage);
+
+        default:
+          break;
+      }
+    }
+  }
+
   var assembledTheme = (0, _react.useMemo)(function () {
     return {
       euiTheme: theme,

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

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "getComputed", {
     return _utils.getComputed;
   }
 });
+Object.defineProperty(exports, "getEuiDevProviderWarning", {
+  enumerable: true,
+  get: function get() {
+    return _provider.getEuiDevProviderWarning;
+  }
+});
 Object.defineProperty(exports, "getOn", {
   enumerable: true,
   get: function get() {
@@ -87,6 +93,12 @@ Object.defineProperty(exports, "mergeDeep", {
     return _utils.mergeDeep;
   }
 });
+Object.defineProperty(exports, "setEuiDevProviderWarning", {
+  enumerable: true,
+  get: function get() {
+    return _provider.setEuiDevProviderWarning;
+  }
+});
 Object.defineProperty(exports, "setOn", {
   enumerable: true,
   get: function get() {

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

@@ -7,7 +7,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiThemeProvider = void 0;
+exports.setEuiDevProviderWarning = exports.getEuiDevProviderWarning = exports.EuiThemeProvider = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -25,13 +27,24 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 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.
- */
+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 _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; }
+
+var providerWarning = undefined;
+
+var setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
+  return providerWarning = level;
+};
+
+exports.setEuiDevProviderWarning = setEuiDevProviderWarning;
+
+var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
+  return providerWarning;
+};
+
+exports.getEuiDevProviderWarning = getEuiDevProviderWarning;
+
 var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
       _colorMode = _ref.colorMode,
@@ -64,7 +77,8 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var prevColorMode = (0, _react.useRef)(colorMode);
   var isParentTheme = (0, _react.useRef)(prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && (0, _isEqual.default)(parentModifications, modifications));
 
-  var _useState7 = (0, _react.useState)(isParentTheme.current && Object.keys(parentTheme).length ? parentTheme : (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode)),
+  var _useState7 = (0, _react.useState)(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
+  : (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode)),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
       theme = _useState8[0],
       setTheme = _useState8[1];

package/src/components/badge/_badge.scss

@@ -1,133 +0,0 @@
-/**
- * 1. Accounts for the border
- */
-.euiBadge {
-  font-size: $euiFontSizeXS;
-  font-weight: $euiFontWeightMedium;
-  line-height: $euiSize + 2px; /* 1 */
-  padding: 0 $euiSizeS;
-  display: inline-block;
-  text-decoration: none;
-  border-radius: $euiBorderRadius / 2;
-  border: solid 1px transparent;
-  background-color: transparent;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: default;
-  max-width: 100%;
-  // The badge will only ever be as wide as its content
-  // So, make the text left aligned to ensure all badges line up the same
-  text-align: left;
-
-  &.euiBadge-isDisabled {
-    // sass-lint:disable-block no-important
-    // Using !important to override inline styles
-    color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2) !important;
-    background-color: $euiButtonColorDisabled !important;
-  }
-
-  &:focus-within {
-    @include euiFocusRing('small');
-  }
-
-  + .euiBadge {
-    margin-left: $euiSizeXS;
-  }
-
-  .euiBadge__content {
-    min-height: $euiSize + ($euiBorderWidthThin * 2); // Ensure proper height in case of just displaying an icon
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-  }
-
-  .euiBadge__childButton {
-    @include euiTextTruncate;
-    text-align: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit;
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-
-    &:not(:disabled) {
-      &:hover,
-      &:focus {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .euiBadge__iconButton {
-    font-size: 0; // Makes the button only as large as the icon so it aligns vertically better
-    margin-left: $euiSizeXS;
-
-    &:focus {
-      background-color: transparentize($euiColorGhost, .2);
-      color: $euiColorInk;
-      border-radius: 2px;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-
-    .euiBadge__icon {
-      // Remove margins from icon itself so that focus state doesn't include that space
-      margin: 0 !important; // sass-lint:disable-line no-important
-    }
-  }
-
-  .euiBadge__text {
-    @include euiTextTruncate;
-    cursor: default;
-  }
-
-  .euiBadge__icon {
-    &:not(:only-child) {
-      margin-left: $euiSizeXS;
-    }
-  }
-
-  &.euiBadge--iconLeft {
-    .euiBadge__content {
-      flex-direction: row-reverse;
-    }
-
-    .euiBadge__iconButton,
-    .euiBadge__icon:not(:only-child) {
-      margin-right: $euiSizeXS;
-      margin-left: 0;
-    }
-  }
-}
-
-.euiBadge-isClickable {
-  &:not(:disabled) {
-    &:hover,
-    &:focus {
-      text-decoration: underline;
-    }
-  }
-
-  &.euiBadge-isDisabled {
-    cursor: not-allowed;
-  }
-
-  &:focus {
-    @include euiFocusRing('small');
-  }
-
-  .euiBadge__text {
-    cursor: inherit;
-  }
-}
-
-// Hollow has a border and is mostly used for autocompleters.
-.euiBadge--hollow {
-  background-color: $euiColorEmptyShade;
-  border-color: lightOrDarkTheme($euiBorderColor, tint($euiBorderColor, 15%));
-  color: $euiTextColor;
-}

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/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;
-  }
-}