@elastic/eui 91.3.0 → 92.0.0

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

@@ -1,117 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EuiNotificationEventMeta = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _icon = require("../icon");
-var _badge = require("../badge");
-var _popover = require("../popover");
-var _button = require("../button");
-var _context_menu = require("../context_menu");
-var _i18n = require("../i18n");
-var _services = require("../../services");
-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); }
-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.
- */
-
-var EuiNotificationEventMeta = function EuiNotificationEventMeta(_ref) {
-  var id = _ref.id,
-    iconType = _ref.iconType,
-    type = _ref.type,
-    time = _ref.time,
-    _ref$badgeColor = _ref.badgeColor,
-    badgeColor = _ref$badgeColor === void 0 ? 'hollow' : _ref$badgeColor,
-    severity = _ref.severity,
-    eventName = _ref.eventName,
-    iconAriaLabel = _ref.iconAriaLabel,
-    onOpenContextMenu = _ref.onOpenContextMenu;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isPopoverOpen = _useState2[0],
-    setIsPopoverOpen = _useState2[1];
-  var classes = (0, _classnames.default)('euiNotificationEventMeta', {
-    'euiNotificationEventMeta--hasContextMenu': onOpenContextMenu
-  });
-  var _useState3 = (0, _react.useState)([]),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    contextMenuItems = _useState4[0],
-    setContextMenuItems = _useState4[1];
-  var randomPopoverId = (0, _services.useGeneratedHtmlId)();
-  var ariaAttribute = iconAriaLabel ? {
-    'aria-label': iconAriaLabel
-  } : {
-    'aria-hidden': true
-  };
-  var onOpenPopover = function onOpenPopover() {
-    setIsPopoverOpen(!isPopoverOpen);
-    if (onOpenContextMenu) {
-      setContextMenuItems(onOpenContextMenu());
-    }
-  };
-  return (0, _react2.jsx)("div", {
-    className: classes
-  }, (0, _react2.jsx)("div", {
-    className: "euiNotificationEventMeta__section"
-  }, iconType && (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
-    className: "euiNotificationEventMeta__icon",
-    type: iconType
-  }, ariaAttribute)), type && (0, _react2.jsx)(_badge.EuiBadge, {
-    className: "euiNotificationEventMeta__badge",
-    color: badgeColor
-  }, severity ? "".concat(type, ": ").concat(severity) : type)), (0, _react2.jsx)("div", {
-    className: "euiNotificationEventMeta__section"
-  }, (0, _react2.jsx)("span", {
-    className: "euiNotificationEventMeta__time"
-  }, time)), onOpenContextMenu && (0, _react2.jsx)("div", {
-    className: "euiNotificationEventMeta__contextMenuWrapper"
-  }, (0, _react2.jsx)(_popover.EuiPopover, {
-    id: randomPopoverId,
-    ownFocus: true,
-    repositionOnScroll: true,
-    isOpen: isPopoverOpen,
-    panelPaddingSize: "none",
-    anchorPosition: "leftUp",
-    button: (0, _react2.jsx)(_i18n.EuiI18n, {
-      token: "euiNotificationEventMeta.contextMenuButton",
-      default: "Menu for {eventName}",
-      values: {
-        eventName: eventName
-      }
-    }, function (contextMenuButton) {
-      return (0, _react2.jsx)(_button.EuiButtonIcon, {
-        "aria-label": contextMenuButton,
-        "aria-controls": randomPopoverId,
-        "aria-expanded": isPopoverOpen,
-        "aria-haspopup": "true",
-        iconType: "boxesVertical",
-        color: "text",
-        onClick: onOpenPopover,
-        "data-test-subj": "".concat(id, "-notificationEventMetaButton")
-      });
-    }),
-    closePopover: function closePopover() {
-      return setIsPopoverOpen(false);
-    }
-  }, (0, _react2.jsx)("div", {
-    onClick: function onClick() {
-      return setIsPopoverOpen(false);
-    }
-  }, (0, _react2.jsx)(_context_menu.EuiContextMenuPanel, {
-    items: contextMenuItems
-  })))));
-};
-exports.EuiNotificationEventMeta = EuiNotificationEventMeta;

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

@@ -1,51 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EuiNotificationEventReadButton = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _button = require("../button");
-var _i18n = require("../i18n");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react2 = require("@emotion/react");
-var _excluded = ["id", "isRead", "onClick", "eventName"];
-/*
- * 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 EuiNotificationEventReadButton = function EuiNotificationEventReadButton(_ref) {
-  var id = _ref.id,
-    isRead = _ref.isRead,
-    onClick = _ref.onClick,
-    eventName = _ref.eventName,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classesReadState = (0, _classnames.default)('euiNotificationEventReadButton', {
-    'euiNotificationEventReadButton--isRead': isRead
-  });
-  var markAsReadAria = (0, _i18n.useEuiI18n)('euiNotificationEventReadButton.markAsReadAria', 'Mark {eventName} as read', {
-    eventName: eventName
-  });
-  var markAsUnreadAria = (0, _i18n.useEuiI18n)('euiNotificationEventReadButton.markAsUnreadAria', 'Mark {eventName} as unread', {
-    eventName: eventName
-  });
-  var markAsRead = (0, _i18n.useEuiI18n)('euiNotificationEventReadButton.markAsRead', 'Mark as read');
-  var markAsUnread = (0, _i18n.useEuiI18n)('euiNotificationEventReadButton.markAsUnread', 'Mark as unread');
-  var buttonAriaLabel = isRead ? markAsUnreadAria : markAsReadAria;
-  var buttonTitle = isRead ? markAsUnread : markAsRead;
-  return (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({
-    iconType: "dot",
-    "aria-label": buttonAriaLabel,
-    title: buttonTitle,
-    className: classesReadState,
-    onClick: onClick,
-    "data-test-subj": "".concat(id, "-notificationEventReadButton")
-  }, rest));
-};
-exports.EuiNotificationEventReadButton = EuiNotificationEventReadButton;

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

@@ -1,51 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EuiNotificationEventReadIcon = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _i18n = require("../i18n");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _icon = require("../icon");
-var _react2 = require("@emotion/react");
-var _excluded = ["id", "isRead", "eventName"];
-/*
- * 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 EuiNotificationEventReadIcon = function EuiNotificationEventReadIcon(_ref) {
-  var id = _ref.id,
-    isRead = _ref.isRead,
-    eventName = _ref.eventName,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classesReadState = (0, _classnames.default)('euiNotificationEventReadIcon', {
-    'euiNotificationEventReadIcon--isRead': isRead
-  });
-  var readAria = (0, _i18n.useEuiI18n)('euiNotificationEventReadIcon.readAria', '{eventName} is read', {
-    eventName: eventName
-  });
-  var unreadAria = (0, _i18n.useEuiI18n)('euiNotificationEventReadIcon.unreadAria', '{eventName} is unread', {
-    eventName: eventName
-  });
-  var readTitle = (0, _i18n.useEuiI18n)('euiNotificationEventReadIcon.read', 'Read');
-  var unreadTitle = (0, _i18n.useEuiI18n)('euiNotificationEventReadIcon.unread', 'Unread');
-  var iconAriaLabel = isRead ? readAria : unreadAria;
-  var iconTitle = isRead ? readTitle : unreadTitle;
-  return (0, _react2.jsx)("div", {
-    className: classesReadState
-  }, (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
-    type: "dot",
-    "aria-label": iconAriaLabel,
-    title: iconTitle,
-    color: "primary",
-    "data-test-subj": "".concat(id, "-notificationEventReadIcon")
-  }, rest)));
-};
-exports.EuiNotificationEventReadIcon = EuiNotificationEventReadIcon;

package/src/components/control_bar/_control_bar.scss

@@ -1,232 +0,0 @@
-.euiControlBar {
-  background: $euiControlBarBackground;
-  color: $euiControlBarText;
-  display: flex;
-  flex-direction: column;
-  // This large box shadow helps prevent a flicker of dark
-  // background when the content is shown and hidden
-  box-shadow: inset 0 $euiControlBarInitialHeight 0 $euiControlBarBackground, inset 0 600rem 0 $euiPageBackgroundColor;
-  bottom: 0;
-  transform: translateY(0);
-  height: $euiControlBarInitialHeight;
-  max-height: $euiControlBarMaxHeight;
-
-  &--fixed {
-    position: fixed;
-    z-index: $euiZMask;
-  }
-
-  &--absolute {
-    position: absolute;
-    z-index: $euiZLevel1;
-  }
-
-  &--relative {
-    position: relative;
-  }
-
-  &-isOpen {
-    animation-duration: $euiAnimSpeedNormal;
-    animation-timing-function: $euiAnimSlightResistance;
-    animation-fill-mode: forwards;
-  }
-
-  &-isOpen.euiControlBar--large {
-    animation-name: euiControlBarOpenPanelLarge;
-    height: $euiControlBarMaxHeight;
-    bottom: map-get($euiControlBarHeights, 'l') * -1;
-  }
-
-  &-isOpen.euiControlBar--medium {
-    animation-name: euiControlBarOpenPanelMedium;
-    height: map-get($euiControlBarHeights, 'm');
-    bottom: map-get($euiControlBarHeights, 'm') * -1;
-  }
-
-  &-isOpen.euiControlBar--small {
-    animation-name: euiControlBarOpenPanelSmall;
-    height: map-get($euiControlBarHeights, 's');
-    bottom: map-get($euiControlBarHeights, 's') * -1;
-  }
-}
-
-.euiControlBar__controls {
-  height: $euiControlBarInitialHeight;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  overflow-y: hidden; // Ensures the movement of buttons in :focus don't cause scrollbars
-  overflow-x: auto;
-  padding: 0 $euiSizeM;
-}
-
-.euiControlBar__content {
-  @include euiScrollBar;
-  overflow-y: auto;
-  width: 100%;
-  height: calc(100% - #{$euiControlBarInitialHeight});
-  background-color: $euiPageBackgroundColor;
-  animation-name: euiControlBarShowContent;
-  animation-duration: $euiAnimSpeedSlow;
-  animation-iteration-count: 1;
-  animation-timing-function: $euiAnimSlightResistance;
-  color: $euiColorDarkestShade;
-}
-
-// CONTROL TYPES
-
-.euiControlBar__icon {
-  flex-shrink: 0;
-  margin-left: $euiSizeS;
-  margin-right: $euiSizeS;
-}
-
-.euiControlBar__buttonIcon {
-  flex-shrink: 0;
-  min-width: $euiControlBarInitialHeight;
-  min-height: $euiControlBarInitialHeight;
-}
-
-.euiControlBar__button {
-  flex-shrink: 0;
-  border-radius: $euiBorderRadius / 2;
-  margin-left: $euiSizeXS;
-  font-size: $euiFontSizeS;
-
-  &:enabled:hover {
-    transform: none;
-    box-shadow: none;
-  }
-
-  &:last-child {
-    margin-right: $euiSizeXS;
-  }
-}
-
-.euiControlBar__breadcrumbs {
-  .euiBreadcrumb {
-    &:not(:last-of-type) .euiBreadcrumb__content {
-      color: makeHighContrastColor($euiTextSubduedColor, $euiControlBarBackground);
-    }
-
-    &::after {
-      background: $euiControlBarBorderColor;
-    }
-  }
-}
-
-.euiControlBar__spacer {
-  flex-grow: 1;
-  height: 100%;
-}
-
-.euiControlBar__divider {
-  flex-shrink: 0;
-  height: 100%;
-  width: 1px;
-  background-color: $euiControlBarBorderColor;
-}
-
-.euiControlBar__text {
-  @include euiTextTruncate;
-  @include euiFontSizeS;
-  padding: 0 $euiSizeS;
-  color: $euiControlBarText;
-
-  &:last-child {
-    padding-right: 0;
-  }
-}
-
-.euiControlBar__tab {
-  @include euiTextTruncate;
-  @include euiFontSizeS;
-  color: $euiControlBarText;
-  padding: 0 $euiSize;
-  text-align: center;
-  height: 100%;
-
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
-  &.euiControlBar__tab--active {
-    background-color: $euiPageBackgroundColor;
-    box-shadow: inset 0 4px 0 makeHighContrastColor($euiColorPrimary, $euiColorLightestShade);
-    color: makeHighContrastColor($euiColorPrimary, $euiColorLightestShade);
-  }
-}
-
-@each $colorName, $colorValue in $euiButtonTypes {
-  .euiControlBar__controls {
-    .euiLink.euiLink--#{$colorName} {
-      color: makeHighContrastColor($colorValue, $euiControlBarBackground);
-
-      &:hover {
-        color: tintOrShade($colorValue, 30%, 30%);
-      }
-    }
-
-    .euiLink.euiLink--text {
-      color: $euiColorGhost;
-    }
-
-    .euiControlBar__button.euiButton[class*='#{$colorName}']:enabled:not(.euiButton--fill) {
-      color: makeHighContrastColor($colorValue, $euiControlBarBackground);
-      border-color: makeHighContrastColor($colorValue, $euiControlBarBackground);
-    }
-
-    .euiButtonIcon[class*='#{$colorName}'] {
-      color: makeHighContrastColor($colorValue, $euiControlBarBackground);
-    }
-  }
-}
-
-@include euiBreakpoint('xs', 's') {
-  .euiControlBar:not(.euiControlBar--showOnMobile) {
-    display: none;
-  }
-}
-
-@keyframes euiControlBarOpenPanelLarge {
-  0% {
-    // Accounts for the initial height offset from the top
-    transform: translateY(calc((#{$euiControlBarInitialHeight} * 3) * -1));
-  }
-
-  100% {
-    transform: translateY(map-get($euiControlBarHeights, 'l') * -1);
-  }
-}
-
-@keyframes euiControlBarOpenPanelMedium {
-  0% {
-    transform: translateY(-$euiControlBarInitialHeight);
-  }
-
-  100% {
-    transform: translateY(map-get($euiControlBarHeights, 'm') * -1);
-  }
-}
-
-@keyframes euiControlBarOpenPanelSmall {
-  0% {
-    transform: translateY(-$euiControlBarInitialHeight);
-  }
-
-  100% {
-    transform: translateY(map-get($euiControlBarHeights, 's') * -1);
-  }
-}
-
-@keyframes euiControlBarShowContent {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}

package/src/components/control_bar/_index.scss

@@ -1,2 +0,0 @@
-@import 'variables';
-@import 'control_bar';

package/src/components/control_bar/_variables.scss

@@ -1,12 +0,0 @@
-$euiControlBarBackground: lightOrDarkTheme($euiColorDarkestShade, $euiColorInk);
-$euiControlBarText: lighten(makeHighContrastColor($euiColorLightestShade, $euiControlBarBackground), 20%);
-$euiControlBarBorderColor: transparentize($euiColorGhost, .8);
-$euiControlBarInitialHeight: $euiSizeXXL;
-$euiControlBarMaxHeight: calc(100vh - #{$euiSize * 5});
-
-// Pixel heights ensure no blurriness caused by half pixel offsets
-$euiControlBarHeights: (
-  s: $euiSize * 15,
-  m: $euiSize * 30,
-  l: 100vh,
-);

package/src/components/notification/_index.scss

@@ -1,5 +0,0 @@
-@import './notification_event';
-@import './notification_event_meta';
-@import './notification_event_messages';
-@import './notification_event_read_button';
-@import './notification_event_read_icon';

package/src/components/notification/_notification_event.scss

@@ -1,40 +0,0 @@
-.euiNotificationEvent {
-  display: flex;
-  padding: $euiSizeM 0 $euiSizeM $euiSizeM;
-  border-bottom: $euiBorderThin;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &--withReadState {
-    padding: $euiSizeM 0 $euiSizeM $euiSizeS;
-  }
-}
-
-.euiNotificationEvent__title {
-  @include euiTitle('xs');
-  display: flex;
-
-  // ensure links get the right color
-  &.euiLink {
-    color: $euiLinkColor;
-  }
-
-  &--isRead {
-    color: $euiColorDarkShade !important; // stylelint-disable-line declaration-no-important
-  }
-}
-
-.euiNotificationEvent__readButton {
-  margin-right: $euiSizeS;
-}
-
-.euiNotificationEvent__content {
-  flex: 1;
-
-  > * + * {
-    margin-top: $euiSizeS;
-    margin-right: $euiSizeM;
-  }
-}

package/src/components/notification/_notification_event_messages.scss

@@ -1,17 +0,0 @@
-.euiNotificationEventMessages {
-  font-size: $euiFontSizeS;
-
-  &__accordion {
-    color: $euiColorDarkShade;
-  }
-
-  &__accordionButton {
-    color: $euiLinkColor;
-  }
-
-  &__accordionContent {
-    > * {
-      padding-top: $euiSizeS;
-    }
-  }
-}

package/src/components/notification/_notification_event_meta.scss

@@ -1,44 +0,0 @@
-.euiNotificationEventMeta {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-right: $euiSizeXS;
-  min-height: $euiSizeL; // ensures the same size of the read button to properly center align
-
-  &--hasContextMenu {
-    padding-right: $euiSizeL;
-  }
-
-  &__contextMenuWrapper {
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-
-  &__section {
-    margin-right: $euiSizeS;
-
-    &:first-child {
-      display: flex;
-      flex: 1;
-      align-items: center;
-    }
-  }
-
-  &__icon {
-    margin-right: $euiSizeS;
-  }
-
-  &__badge {
-    max-width: 100%;
-    display: inline-grid; // forces truncation of the badge
-  }
-
-  &__time {
-    font-size: $euiFontSizeXS;
-    color: $euiTextSubduedColor;
-  }
-}

package/src/components/notification/_notification_event_read_button.scss

@@ -1,5 +0,0 @@
-.euiNotificationEventReadButton--isRead svg {
-  fill: transparent;
-  stroke-width: 1px;
-  stroke: $euiBorderColor;
-}

package/src/components/notification/_notification_event_read_icon.scss

@@ -1,12 +0,0 @@
-.euiNotificationEventReadIcon {
-  display: flex;
-  align-items: center;
-  height: $euiSizeL;
-  margin: 0 $euiSizeXS;
-}
-
-.euiNotificationEventReadIcon--isRead svg {
-  fill: transparent;
-  stroke-width: 1px;
-  stroke: $euiBorderColor;
-}