@elastic/eui 81.1.0 → 81.3.0

package/optimize/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -20,10 +20,10 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import moment from 'moment'; // eslint-disable-line import/named
 import dateMath from '@elastic/datemath';
+import { isObject } from '../../../services/predicate';
 import { EuiI18nConsumer } from '../../context';
 import { EuiDatePickerRange } from '../date_picker_range';
 import { EuiFormControlLayout } from '../../form';
-import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { RenderI18nTimeOptions } from './time_options';
 import { PrettyDuration, showPrettyDuration } from './pretty_duration';
 import { AsyncInterval } from './async_interval';
@@ -220,7 +220,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         customQuickSelectRender: customQuickSelectRender,
         dateFormat: dateFormat,
         end: end,
-        isDisabled: isDisabled,
+        isDisabled: !!isDisabled,
         isPaused: isPaused,
         recentlyUsedRanges: recentlyUsedRanges,
         refreshInterval: refreshInterval,
@@ -251,41 +251,38 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         timeFormat = _this$props3.timeFormat,
         utcOffset = _this$props3.utcOffset,
         compressed = _this$props3.compressed,
-        onFocus = _this$props3.onFocus,
-        className = _this$props3.className,
-        dataTestSubj = _this$props3['data-test-subj'];
+        onFocus = _this$props3.onFocus;
       var autoRefreshAppend = !isPaused ? ___EmotionJSX(EuiAutoRefreshButton, {
         refreshInterval: refreshInterval,
-        isDisabled: isDisabled,
+        isDisabled: !!isDisabled,
         isPaused: isPaused,
         onRefreshChange: _this.onRefreshChange,
         shortHand: true
       }) : undefined;
       var formControlLayoutProps = {
-        className: classNames('euiSuperDatePicker', className),
         compressed: compressed,
         isInvalid: isInvalid,
         isLoading: isLoading && !showUpdateButton,
-        disabled: isDisabled,
+        disabled: !!isDisabled,
         prepend: _this.renderQuickSelect(),
-        append: autoRefreshAppend,
-        'data-test-subj': dataTestSubj
+        append: autoRefreshAppend
       };
       if (isQuickSelectOnly) {
         return ___EmotionJSX(EuiFormControlLayout, _extends({
           iconsPosition: "static"
         }, formControlLayoutProps));
       }
-      if (showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
+      var isDisabledDisplay = isObject(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
+      if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
         return ___EmotionJSX(EuiFormControlLayout, formControlLayoutProps, ___EmotionJSX("button", {
           className: classNames('euiSuperDatePicker__prettyFormat', {
             'euiSuperDatePicker__prettyFormat--disabled': isDisabled
           }),
           "data-test-subj": "superDatePickerShowDatesButton",
-          disabled: isDisabled,
+          disabled: !!isDisabled,
           onClick: _this.hidePrettyDuration,
           onFocus: onFocus
-        }, ___EmotionJSX(PrettyDuration, {
+        }, isDisabledDisplay ? isDisabled.display : ___EmotionJSX(PrettyDuration, {
           timeFrom: start,
           timeTo: end,
           quickRanges: commonlyUsedRanges,
@@ -295,9 +292,6 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       return ___EmotionJSX(EuiI18nConsumer, null, function (_ref4) {
         var contextLocale = _ref4.locale;
         return ___EmotionJSX(EuiDatePickerRange, _extends({}, formControlLayoutProps, {
-          className: classNames(formControlLayoutProps.className, {
-            'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid
-          }),
           isCustom: true,
           iconType: false,
           startDateControl: ___EmotionJSX(EuiDatePopoverButton, {
@@ -306,7 +300,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             position: "start",
             needsUpdating: hasChanged,
             isInvalid: isInvalid,
-            isDisabled: isDisabled,
+            isDisabled: !!isDisabled,
             onChange: _this.setStart,
             value: start,
             dateFormat: dateFormat,
@@ -326,7 +320,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             compressed: compressed,
             needsUpdating: hasChanged,
             isInvalid: isInvalid,
-            isDisabled: isDisabled,
+            isDisabled: !!isDisabled,
             onChange: _this.setEnd,
             value: end,
             dateFormat: dateFormat,
@@ -368,18 +362,16 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         showUpdateButton = _this$props5.showUpdateButton,
         compressed = _this$props5.compressed;
       if (!showUpdateButton) return null;
-      return ___EmotionJSX(EuiFlexItem, {
-        grow: false
-      }, ___EmotionJSX(EuiSuperUpdateButton, _extends({
+      return ___EmotionJSX(EuiSuperUpdateButton, _extends({
         needsUpdate: _this.state.hasChanged,
         showTooltip: !_this.state.isStartDatePopoverOpen && !_this.state.isEndDatePopoverOpen,
         isLoading: isLoading,
-        isDisabled: isDisabled || _this.state.isInvalid,
+        isDisabled: !!isDisabled || _this.state.isInvalid,
         onClick: _this.handleClickUpdateButton,
         "data-test-subj": "superDatePickerApplyTimeButton",
         size: compressed ? 's' : 'm',
         iconOnly: showUpdateButton === 'iconOnly'
-      }, updateButtonProps)));
+      }, updateButtonProps));
     });
     return _this;
   }
@@ -398,30 +390,32 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isQuickSelectOnly = _this$props6.isQuickSelectOnly,
         compressed = _this$props6.compressed,
         className = _this$props6.className;
+      var _this$state2 = this.state,
+        hasChanged = _this$state2.hasChanged,
+        isInvalid = _this$state2.isInvalid;
 
       // Force reduction in width if showing quick select only
       var width = isQuickSelectOnly ? 'auto' : _width;
-      var flexWrapperClasses = classNames('euiSuperDatePicker__flexWrapper', {
-        'euiSuperDatePicker__flexWrapper--noUpdateButton': !showUpdateButton,
-        'euiSuperDatePicker__flexWrapper--isAutoRefreshOnly': isAutoRefreshOnly,
-        'euiSuperDatePicker__flexWrapper--isQuickSelectOnly': isQuickSelectOnly,
-        'euiSuperDatePicker__flexWrapper--fullWidth': width === 'full',
-        'euiSuperDatePicker__flexWrapper--autoWidth': width === 'auto'
+      var classes = classNames('euiSuperDatePicker', className, {
+        'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid,
+        'euiSuperDatePicker--noUpdateButton': !showUpdateButton,
+        'euiSuperDatePicker--isAutoRefreshOnly': isAutoRefreshOnly,
+        'euiSuperDatePicker--isQuickSelectOnly': isQuickSelectOnly,
+        'euiSuperDatePicker--fullWidth': width === 'full',
+        'euiSuperDatePicker--autoWidth': width === 'auto'
       });
-      return ___EmotionJSX(EuiFlexGroup, {
-        gutterSize: "s",
-        responsive: false,
-        className: flexWrapperClasses
-      }, isAutoRefreshOnly && onRefreshChange ? ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiAutoRefresh, {
+      return ___EmotionJSX("div", {
+        className: classes,
+        "data-test-subj": dataTestSubj
+      }, isAutoRefreshOnly && onRefreshChange ? ___EmotionJSX(EuiAutoRefresh, {
         isPaused: isPaused,
         refreshInterval: refreshInterval,
         onRefreshChange: onRefreshChange,
         fullWidth: width === 'full',
         compressed: compressed,
-        isDisabled: isDisabled,
-        "data-test-subj": dataTestSubj,
+        isDisabled: !!isDisabled,
         className: className
-      })) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiFlexItem, null, this.renderDatePickerRange()), this.renderUpdateButton()));
+      }) : ___EmotionJSX(React.Fragment, null, this.renderDatePickerRange(), this.renderUpdateButton()));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/optimize/es/components/icon/assets/timelineWithArrow.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconTimelineWithArrow = function EuiIconTimelineWithArrow(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M7.854 4.854A.5.5 0 017 4.5V4H6a1 1 0 01-1-1V1a1 1 0 011-1h3a1 1 0 011 1v2a1 1 0 01-1 1H8v.5a.5.5 0 01-.146.354zM6 3V1h3v2H6zM2.146 9.146A.5.5 0 002 9.5v.5H1a1 1 0 00-1 1v2a1 1 0 001 1h3a1 1 0 001-1v-2a1 1 0 00-1-1H3v-.5a.5.5 0 00-.854-.354zM4 13v-2H1v2h3zM11.5 15a4.5 4.5 0 100-9 4.5 4.5 0 000 9zm.354-6.854l2 2a.5.5 0 010 .708l-2 2a.5.5 0 01-.707-.708L12.293 11H9.5a.5.5 0 010-1h2.793l-1.146-1.146a.5.5 0 11.707-.708zM8.337 6H3.915a1.5 1.5 0 00-2.83 0H.5a.5.5 0 000 1h.585a1.5 1.5 0 002.83 0h3.342c.314-.38.677-.716 1.08-1zM2 6.5a.5.5 0 111 0 .5.5 0 01-1 0z"
+  }));
+};
+export var icon = EuiIconTimelineWithArrow;

package/optimize/es/components/icon/icon_glyphs.a11y.js

@@ -15,7 +15,7 @@ import { EuiIcon } from './icon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 describe('EuiIcons', function () {
   describe('Automated accessibility check for glyph icons', function () {
-    var GlyphIcons = ['accessibility', 'aggregate', 'analyzeEvent', 'annotation', 'apmTrace', 'apps', 'arrowDown', 'arrowLeft', 'arrowRight', 'arrowUp', 'arrowStart', 'arrowEnd', 'article', 'asterisk', 'beaker', 'bell', 'bellSlash', 'beta', 'bolt', 'boxesHorizontal', 'boxesVertical', 'branch', 'branchUser', 'broom', 'brush', 'bug', 'bullseye', 'calendar', 'check', 'checkInCircleFilled', 'cheer', 'clock', 'cloudDrizzle', 'cloudStormy', 'cloudSunny', 'cluster', 'color', 'compute', 'console', 'container', 'continuityAbove', 'continuityAboveBelow', 'continuityBelow', 'continuityWithin', 'controlsHorizontal', 'controlsVertical', 'copy', 'copyClipboard', 'cross', 'crosshairs', 'currency', 'cut', 'database', 'desktop', 'discuss', 'document', 'documents', 'documentEdit', 'documentation', 'dot', 'dotInCircle', 'doubleArrowLeft', 'doubleArrowRight', 'download', 'email', 'empty', 'eql', 'eraser', 'exit', 'expand', 'expandMini', 'exportAction', 'eye', 'eyeClosed', 'faceHappy', 'faceNeutral', 'faceSad', 'filter', 'filterExclude', 'filterIgnore', 'filterInclude', 'filterInCircle', 'flag', 'fold', 'folderCheck', 'folderClosed', 'folderExclamation', 'folderOpen', 'frameNext', 'framePrevious', 'fullScreen', 'fullScreenExit', 'function', 'gear', 'glasses', 'globe', 'grab', 'grabHorizontal', 'grid', 'heart', 'heatmap', 'help', 'home', 'iInCircle', 'image', 'importAction', 'indexClose', 'indexEdit', 'indexFlush', 'indexMapping', 'indexOpen', 'indexRuntime', 'indexSettings', 'indexTemporary', 'infinity', 'inputOutput', 'inspect', 'invert', 'ip', 'keyboard', 'kqlField', 'kqlFunction', 'kqlOperand', 'kqlSelector', 'kqlValue', 'kubernetesNode', 'kubernetesPod', 'launch', 'layers', 'lettering', 'lineDashed', 'lineDotted', 'lineSolid', 'link', 'list', 'listAdd', 'lock', 'lockOpen', 'logstashFilter', 'logstashIf', 'logstashInput', 'logstashOutput', 'logstashQueue', 'magnifyWithExclamation', 'magnifyWithMinus', 'magnifyWithPlus', 'magnet', 'mapMarker', 'memory', 'merge', 'menu', 'menuDown', 'menuLeft', 'menuRight', 'menuUp', 'minimize', 'minus', 'minusInCircle', 'minusInCircleFilled', 'mobile', 'moon', 'namespace', 'nested', 'node', 'number', 'offline', 'online', 'package', 'pageSelect', 'pagesSelect', 'paperClip', 'partial', 'pause', 'payment', 'pencil', 'percent', 'pin', 'pinFilled', 'play', 'playFilled', 'plus', 'plusInCircle', 'plusInCircleFilled', 'popout', 'push', 'questionInCircle', 'quote', 'refresh', 'reporter', 'returnKey', 'save', 'scale', 'search', 'securitySignal', 'securitySignalDetected', 'securitySignalResolved', 'sessionViewer', 'shard', 'share', 'snowflake', 'sortable', 'sortAscending', 'sortDescending', 'sortDown', 'sortLeft', 'sortRight', 'sortUp', 'spaces', 'starEmpty', 'starEmptySpace', 'starFilled', 'starFilledSpace', 'starMinusEmpty', 'starMinusFilled', 'starPlusEmpty', 'starPlusFilled', 'stats', 'stop', 'stopFilled', 'stopSlash', 'storage', 'string', 'submodule', 'sun', 'symlink', 'tableOfContents', 'tableDensityExpanded', 'tableDensityCompact', 'tableDensityNormal', 'tag', 'tear', 'temperature', 'timeline', 'timeRefresh', 'timeslider', 'training', 'trash', 'unfold', 'unlink', 'user', 'userAvatar', 'users', 'vector', 'videoPlayer', 'visArea', 'visAreaStacked', 'visBarHorizontal', 'visBarHorizontalStacked', 'visBarVertical', 'visBarVerticalStacked', 'visGauge', 'visGoal', 'visLine', 'visMapCoordinate', 'visMapRegion', 'visMetric', 'visPie', 'visTable', 'visTagCloud', 'visText', 'visTimelion', 'visVega', 'visVisualBuilder', 'warning', 'wordWrap', 'wordWrapDisabled', 'wrench'];
+    var GlyphIcons = ['accessibility', 'aggregate', 'analyzeEvent', 'annotation', 'apmTrace', 'apps', 'arrowDown', 'arrowLeft', 'arrowRight', 'arrowUp', 'arrowStart', 'arrowEnd', 'article', 'asterisk', 'beaker', 'bell', 'bellSlash', 'beta', 'bolt', 'boxesHorizontal', 'boxesVertical', 'branch', 'branchUser', 'broom', 'brush', 'bug', 'bullseye', 'calendar', 'check', 'checkInCircleFilled', 'cheer', 'clock', 'cloudDrizzle', 'cloudStormy', 'cloudSunny', 'cluster', 'color', 'compute', 'console', 'container', 'continuityAbove', 'continuityAboveBelow', 'continuityBelow', 'continuityWithin', 'controlsHorizontal', 'controlsVertical', 'copy', 'copyClipboard', 'cross', 'crosshairs', 'currency', 'cut', 'database', 'desktop', 'discuss', 'document', 'documents', 'documentEdit', 'documentation', 'dot', 'dotInCircle', 'doubleArrowLeft', 'doubleArrowRight', 'download', 'email', 'empty', 'eql', 'eraser', 'exit', 'expand', 'expandMini', 'exportAction', 'eye', 'eyeClosed', 'faceHappy', 'faceNeutral', 'faceSad', 'filter', 'filterExclude', 'filterIgnore', 'filterInclude', 'filterInCircle', 'flag', 'fold', 'folderCheck', 'folderClosed', 'folderExclamation', 'folderOpen', 'frameNext', 'framePrevious', 'fullScreen', 'fullScreenExit', 'function', 'gear', 'glasses', 'globe', 'grab', 'grabHorizontal', 'grid', 'heart', 'heatmap', 'help', 'home', 'iInCircle', 'image', 'importAction', 'indexClose', 'indexEdit', 'indexFlush', 'indexMapping', 'indexOpen', 'indexRuntime', 'indexSettings', 'indexTemporary', 'infinity', 'inputOutput', 'inspect', 'invert', 'ip', 'keyboard', 'kqlField', 'kqlFunction', 'kqlOperand', 'kqlSelector', 'kqlValue', 'kubernetesNode', 'kubernetesPod', 'launch', 'layers', 'lettering', 'lineDashed', 'lineDotted', 'lineSolid', 'link', 'list', 'listAdd', 'lock', 'lockOpen', 'logstashFilter', 'logstashIf', 'logstashInput', 'logstashOutput', 'logstashQueue', 'magnifyWithExclamation', 'magnifyWithMinus', 'magnifyWithPlus', 'magnet', 'mapMarker', 'memory', 'merge', 'menu', 'menuDown', 'menuLeft', 'menuRight', 'menuUp', 'minimize', 'minus', 'minusInCircle', 'minusInCircleFilled', 'mobile', 'moon', 'namespace', 'nested', 'node', 'number', 'offline', 'online', 'package', 'pageSelect', 'pagesSelect', 'paperClip', 'partial', 'pause', 'payment', 'pencil', 'percent', 'pin', 'pinFilled', 'play', 'playFilled', 'plus', 'plusInCircle', 'plusInCircleFilled', 'popout', 'push', 'questionInCircle', 'quote', 'refresh', 'reporter', 'returnKey', 'save', 'scale', 'search', 'securitySignal', 'securitySignalDetected', 'securitySignalResolved', 'sessionViewer', 'shard', 'share', 'snowflake', 'sortable', 'sortAscending', 'sortDescending', 'sortDown', 'sortLeft', 'sortRight', 'sortUp', 'spaces', 'starEmpty', 'starEmptySpace', 'starFilled', 'starFilledSpace', 'starMinusEmpty', 'starMinusFilled', 'starPlusEmpty', 'starPlusFilled', 'stats', 'stop', 'stopFilled', 'stopSlash', 'storage', 'string', 'submodule', 'sun', 'symlink', 'tableOfContents', 'tableDensityExpanded', 'tableDensityCompact', 'tableDensityNormal', 'tag', 'tear', 'temperature', 'timeline', 'timelineWithArrow', 'timeRefresh', 'timeslider', 'training', 'trash', 'unfold', 'unlink', 'user', 'userAvatar', 'users', 'vector', 'videoPlayer', 'visArea', 'visAreaStacked', 'visBarHorizontal', 'visBarHorizontalStacked', 'visBarVertical', 'visBarVerticalStacked', 'visGauge', 'visGoal', 'visLine', 'visMapCoordinate', 'visMapRegion', 'visMetric', 'visPie', 'visTable', 'visTagCloud', 'visText', 'visTimelion', 'visVega', 'visVisualBuilder', 'warning', 'wordWrap', 'wordWrapDisabled', 'wrench'];
     var GlyphGrid = function GlyphGrid() {
       return ___EmotionJSX("div", null, GlyphIcons.map(function (glyph) {
         return ___EmotionJSX(EuiIcon, {

package/optimize/es/components/icon/icon_map.js

@@ -381,6 +381,7 @@ export var typeToPathMap = {
   tear: 'tear',
   temperature: 'temperature',
   timeline: 'timeline',
+  timelineWithArrow: 'timelineWithArrow',
   timelionApp: 'app_timelion',
   timeRefresh: 'timeRefresh',
   timeslider: 'timeslider',

package/optimize/lib/components/code/code_block_annotations.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiCodeBlockAnnotation = 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"));
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../services");
 var _i18n = require("../i18n");
@@ -16,8 +17,7 @@ var _icon = require("../icon");
 var _button = require("../../themes/amsterdam/global_styling/mixins/button");
 var _code_block_annotations = require("./code_block_annotations.style");
 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; }
+var _excluded = ["lineNumber", "children"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -25,10 +25,12 @@ 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.
  */
-
+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 EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
   var lineNumber = _ref.lineNumber,
-    children = _ref.children;
+    children = _ref.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
@@ -43,7 +45,9 @@ var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
   var buttonIconFocusStyle = (0, _button.useEuiButtonFocusCSS)();
   var cssButtonIconStyles = [styles.euiCodeBlockAnnotation__buttonIcon, buttonIconFocusStyle];
   var isDarkMode = colorMode === 'DARK';
-  return (0, _react2.jsx)(_popover.EuiPopover, {
+  return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+    css: styles.euiCodeBlockAnnotation
+  }, rest, {
     isOpen: isOpen,
     closePopover: function closePopover() {
       return setIsOpen(false);
@@ -60,14 +64,13 @@ var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
       size: "s",
       color: isDarkMode ? euiTheme.colors.ink : 'ghost'
     })),
-    css: styles.euiCodeBlockAnnotation,
     zIndex: Number(euiTheme.levels.mask) + 1 // Ensure fullscreen annotation popovers sit above the mask
     ,
     anchorPosition: "downLeft",
     panelProps: {
       'data-test-subj': 'euiCodeBlockAnnotationPopover'
     }
-  }, children);
+  }), children);
 };
 exports.EuiCodeBlockAnnotation = EuiCodeBlockAnnotation;
 var AnnotationInfoIcon = function AnnotationInfoIcon(props) {

package/optimize/lib/components/code/code_block_copy.js

@@ -12,6 +12,7 @@ var _inner_text = require("../inner_text");
 var _copy = require("../copy");
 var _i18n = require("../i18n");
 var _button = require("../button");
+var _utils = require("./utils");
 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; }
@@ -35,7 +36,17 @@ var useCopy = function useCopy(_ref) {
     innerTextRef = _useInnerText2[0],
     _innerText = _useInnerText2[1];
   var innerText = (0, _react.useMemo)(function () {
-    return (_innerText === null || _innerText === void 0 ? void 0 : _innerText.replace(/[\r\n?]{2}|\n\n/g, '\n')) || '';
+    return (_innerText
+    // Normalize line terminations to match native JS format
+    === null || _innerText
+    // Normalize line terminations to match native JS format
+    === void 0 ? void 0 : _innerText
+    // Normalize line terminations to match native JS format
+    .replace(_utils.NEW_LINE_REGEX_GLOBAL, '\n')
+    // Reduce two or more consecutive new line characters to a single one
+    // This is needed primarily because of how syntax highlighting
+    // generated DOM elements affect `innerText` output.
+    .replace(/\n{2,}/g, '\n')) || '';
   }, [_innerText]);
   var textToCopy = isVirtualized ? "".concat(children) : innerText; // Virtualized code blocks do not have inner text
 
@@ -51,7 +62,8 @@ var useCopy = function useCopy(_ref) {
         onClick: copy,
         iconType: "copyClipboard",
         color: "text",
-        "aria-label": copyAriaLabel
+        "aria-label": copyAriaLabel,
+        "data-test-subj": "euiCodeBlockCopy"
       });
     })) : null;
   }, [showCopyButton, textToCopy, copyAriaLabel]);

package/optimize/lib/components/code/code_block_line.styles.js

@@ -47,7 +47,7 @@ var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeContext) {
     },
     lineNumber: {
       euiCodeBlock__lineNumberWrapper: /*#__PURE__*/(0, _css.css)("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
-      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.css)("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;;label:euiCodeBlock__lineNumber;")
+      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.css)("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;&::before{content:attr(data-line-number);};label:euiCodeBlock__lineNumber;")
     }
   };
 };

package/optimize/lib/components/code/utils.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.parseLineRanges = exports.nodeToHtml = exports.isAstElement = exports.highlightByLine = exports.getHtmlContent = exports.checkSupportedLanguage = exports.SUPPORTED_LANGUAGES = exports.DEFAULT_LANGUAGE = void 0;
+exports.parseLineRanges = exports.nodeToHtml = exports.isAstElement = exports.highlightByLine = exports.getHtmlContent = exports.checkSupportedLanguage = exports.SUPPORTED_LANGUAGES = exports.NEW_LINE_REGEX_GLOBAL = exports.NEW_LINE_REGEX = exports.DEFAULT_LANGUAGE = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _refractor = require("refractor");
@@ -28,7 +28,25 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var SUPPORTED_LANGUAGES = (0, _refractor.listLanguages)();
 exports.SUPPORTED_LANGUAGES = SUPPORTED_LANGUAGES;
 var DEFAULT_LANGUAGE = 'text';
+
+/**
+ * Platform-agnostic new line regex that safely matches all standard
+ * line termination conventions:
+ * - LF: Unix-based platforms and JS-native sources like text areas
+ * - CRLF: Windows
+ * - CR: Mac Classic; to support files saved a long time ago
+ */
 exports.DEFAULT_LANGUAGE = DEFAULT_LANGUAGE;
+var NEW_LINE_REGEX = /\r\n|\r|\n/;
+
+/**
+ * Platform-agnostic global new line regex that safely matches all standard
+ * line termination conventions.
+ * See [NEW_LINE_REGEX]{@link NEW_LINE_REGEX} for more details.
+ */
+exports.NEW_LINE_REGEX = NEW_LINE_REGEX;
+var NEW_LINE_REGEX_GLOBAL = new RegExp(NEW_LINE_REGEX, 'g');
+exports.NEW_LINE_REGEX_GLOBAL = NEW_LINE_REGEX_GLOBAL;
 var checkSupportedLanguage = function checkSupportedLanguage(language) {
   return SUPPORTED_LANGUAGES.includes(language) ? language : DEFAULT_LANGUAGE;
 };
@@ -57,14 +75,12 @@ var nodeToHtml = function nodeToHtml(node, idx, nodes) {
     }), children && children.map(function (el, i) {
       return (
         // @ts-ignore - using a custom type here to handle JSX annotations
-        el.type === 'annotation' ?
-        // @ts-ignore - custom keys are passed by annotationElement below
-        (0, _react2.jsx)(_code_block_annotations.EuiCodeBlockAnnotation, {
+        el.type === 'annotation' ? (0, _react2.jsx)(_code_block_annotations.EuiCodeBlockAnnotation, {
+          className: "euiCodeBlock__lineAnnotation",
           lineNumber: el.lineNumber,
           children: el.annotation,
           key: i
-        }) // prettier-ignore
-        : nodeToHtml(el, i, nodes, depth + 1)
+        }) : nodeToHtml(el, i, nodes, depth + 1)
       );
     }));
   }
@@ -102,12 +118,12 @@ var addLineData = function addLineData(nodes, data) {
   return nodes.reduce(function (result, node) {
     var lineStart = data.lineNumber;
     if (node.type === 'text') {
-      if (!node.value.match(/\r\n?|\n/)) {
+      if (!node.value.match(NEW_LINE_REGEX)) {
         node.lineStart = lineStart;
         node.lineEnd = lineStart;
         result.push(node);
       } else {
-        var lines = node.value.split(/\r\n?|\n/);
+        var lines = node.value.split(NEW_LINE_REGEX);
         lines.forEach(function (line, i) {
           var num = i === 0 ? data.lineNumber : ++data.lineNumber;
           result.push({
@@ -181,11 +197,12 @@ function wrapLines(nodes, options, euiTheme) {
       var lineNumberWrapperElement = {
         type: 'element',
         tagName: 'span',
-        properties: (_properties = {
+        properties: {
           style: {
             inlineSize: width
-          }
-        }, (0, _defineProperty2.default)(_properties, 'data-line-number', lineNumber), (0, _defineProperty2.default)(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberWrapperStyles]), _properties),
+          },
+          className: ['euiCodeBlock__lineNumberWrapper', lineNumberWrapperStyles]
+        },
         children: []
       };
 
@@ -194,13 +211,10 @@ function wrapLines(nodes, options, euiTheme) {
       var lineNumberElement = {
         type: 'element',
         tagName: 'span',
-        properties: (0, _defineProperty2.default)({
-          className: [lineNumberStyles]
-        }, 'aria-hidden', true),
-        children: [{
-          type: 'text',
-          value: String(lineNumber)
-        }]
+        properties: (_properties = {
+          className: ['euiCodeBlock__lineNumber', lineNumberStyles]
+        }, (0, _defineProperty2.default)(_properties, 'data-line-number', lineNumber), (0, _defineProperty2.default)(_properties, 'aria-hidden', true), _properties),
+        children: []
       };
       lineNumberWrapperElement.children.push(lineNumberElement);
 

package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js

@@ -18,10 +18,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _moment = _interopRequireDefault(require("moment"));
 var _datemath = _interopRequireDefault(require("@elastic/datemath"));
+var _predicate = require("../../../services/predicate");
 var _context = require("../../context");
 var _date_picker_range = require("../date_picker_range");
 var _form = require("../../form");
-var _flex = require("../../flex");
 var _time_options = require("./time_options");
 var _pretty_duration = require("./pretty_duration");
 var _async_interval = require("./async_interval");
@@ -228,7 +228,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         customQuickSelectRender: customQuickSelectRender,
         dateFormat: dateFormat,
         end: end,
-        isDisabled: isDisabled,
+        isDisabled: !!isDisabled,
         isPaused: isPaused,
         recentlyUsedRanges: recentlyUsedRanges,
         refreshInterval: refreshInterval,
@@ -259,41 +259,38 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         timeFormat = _this$props3.timeFormat,
         utcOffset = _this$props3.utcOffset,
         compressed = _this$props3.compressed,
-        onFocus = _this$props3.onFocus,
-        className = _this$props3.className,
-        dataTestSubj = _this$props3['data-test-subj'];
+        onFocus = _this$props3.onFocus;
       var autoRefreshAppend = !isPaused ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefreshButton, {
         refreshInterval: refreshInterval,
-        isDisabled: isDisabled,
+        isDisabled: !!isDisabled,
         isPaused: isPaused,
         onRefreshChange: _this.onRefreshChange,
         shortHand: true
       }) : undefined;
       var formControlLayoutProps = {
-        className: (0, _classnames.default)('euiSuperDatePicker', className),
         compressed: compressed,
         isInvalid: isInvalid,
         isLoading: isLoading && !showUpdateButton,
-        disabled: isDisabled,
+        disabled: !!isDisabled,
         prepend: _this.renderQuickSelect(),
-        append: autoRefreshAppend,
-        'data-test-subj': dataTestSubj
+        append: autoRefreshAppend
       };
       if (isQuickSelectOnly) {
         return (0, _react2.jsx)(_form.EuiFormControlLayout, (0, _extends2.default)({
           iconsPosition: "static"
         }, formControlLayoutProps));
       }
-      if (showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
+      var isDisabledDisplay = (0, _predicate.isObject)(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
+      if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
         return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, (0, _react2.jsx)("button", {
           className: (0, _classnames.default)('euiSuperDatePicker__prettyFormat', {
             'euiSuperDatePicker__prettyFormat--disabled': isDisabled
           }),
           "data-test-subj": "superDatePickerShowDatesButton",
-          disabled: isDisabled,
+          disabled: !!isDisabled,
           onClick: _this.hidePrettyDuration,
           onFocus: onFocus
-        }, (0, _react2.jsx)(_pretty_duration.PrettyDuration, {
+        }, isDisabledDisplay ? isDisabled.display : (0, _react2.jsx)(_pretty_duration.PrettyDuration, {
           timeFrom: start,
           timeTo: end,
           quickRanges: commonlyUsedRanges,
@@ -303,9 +300,6 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       return (0, _react2.jsx)(_context.EuiI18nConsumer, null, function (_ref4) {
         var contextLocale = _ref4.locale;
         return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, (0, _extends2.default)({}, formControlLayoutProps, {
-          className: (0, _classnames.default)(formControlLayoutProps.className, {
-            'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid
-          }),
           isCustom: true,
           iconType: false,
           startDateControl: (0, _react2.jsx)(_date_popover_button.EuiDatePopoverButton, {
@@ -314,7 +308,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             position: "start",
             needsUpdating: hasChanged,
             isInvalid: isInvalid,
-            isDisabled: isDisabled,
+            isDisabled: !!isDisabled,
             onChange: _this.setStart,
             value: start,
             dateFormat: dateFormat,
@@ -334,7 +328,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             compressed: compressed,
             needsUpdating: hasChanged,
             isInvalid: isInvalid,
-            isDisabled: isDisabled,
+            isDisabled: !!isDisabled,
             onChange: _this.setEnd,
             value: end,
             dateFormat: dateFormat,
@@ -376,18 +370,16 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         showUpdateButton = _this$props5.showUpdateButton,
         compressed = _this$props5.compressed;
       if (!showUpdateButton) return null;
-      return (0, _react2.jsx)(_flex.EuiFlexItem, {
-        grow: false
-      }, (0, _react2.jsx)(_super_update_button.EuiSuperUpdateButton, (0, _extends2.default)({
+      return (0, _react2.jsx)(_super_update_button.EuiSuperUpdateButton, (0, _extends2.default)({
         needsUpdate: _this.state.hasChanged,
         showTooltip: !_this.state.isStartDatePopoverOpen && !_this.state.isEndDatePopoverOpen,
         isLoading: isLoading,
-        isDisabled: isDisabled || _this.state.isInvalid,
+        isDisabled: !!isDisabled || _this.state.isInvalid,
         onClick: _this.handleClickUpdateButton,
         "data-test-subj": "superDatePickerApplyTimeButton",
         size: compressed ? 's' : 'm',
         iconOnly: showUpdateButton === 'iconOnly'
-      }, updateButtonProps)));
+      }, updateButtonProps));
     });
     return _this;
   }
@@ -406,30 +398,32 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isQuickSelectOnly = _this$props6.isQuickSelectOnly,
         compressed = _this$props6.compressed,
         className = _this$props6.className;
+      var _this$state2 = this.state,
+        hasChanged = _this$state2.hasChanged,
+        isInvalid = _this$state2.isInvalid;
 
       // Force reduction in width if showing quick select only
       var width = isQuickSelectOnly ? 'auto' : _width;
-      var flexWrapperClasses = (0, _classnames.default)('euiSuperDatePicker__flexWrapper', {
-        'euiSuperDatePicker__flexWrapper--noUpdateButton': !showUpdateButton,
-        'euiSuperDatePicker__flexWrapper--isAutoRefreshOnly': isAutoRefreshOnly,
-        'euiSuperDatePicker__flexWrapper--isQuickSelectOnly': isQuickSelectOnly,
-        'euiSuperDatePicker__flexWrapper--fullWidth': width === 'full',
-        'euiSuperDatePicker__flexWrapper--autoWidth': width === 'auto'
+      var classes = (0, _classnames.default)('euiSuperDatePicker', className, {
+        'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid,
+        'euiSuperDatePicker--noUpdateButton': !showUpdateButton,
+        'euiSuperDatePicker--isAutoRefreshOnly': isAutoRefreshOnly,
+        'euiSuperDatePicker--isQuickSelectOnly': isQuickSelectOnly,
+        'euiSuperDatePicker--fullWidth': width === 'full',
+        'euiSuperDatePicker--autoWidth': width === 'auto'
       });
-      return (0, _react2.jsx)(_flex.EuiFlexGroup, {
-        gutterSize: "s",
-        responsive: false,
-        className: flexWrapperClasses
-      }, isAutoRefreshOnly && onRefreshChange ? (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_auto_refresh.EuiAutoRefresh, {
+      return (0, _react2.jsx)("div", {
+        className: classes,
+        "data-test-subj": dataTestSubj
+      }, isAutoRefreshOnly && onRefreshChange ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefresh, {
         isPaused: isPaused,
         refreshInterval: refreshInterval,
         onRefreshChange: onRefreshChange,
         fullWidth: width === 'full',
         compressed: compressed,
-        isDisabled: isDisabled,
-        "data-test-subj": dataTestSubj,
+        isDisabled: !!isDisabled,
         className: className
-      })) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_flex.EuiFlexItem, null, this.renderDatePickerRange()), this.renderUpdateButton()));
+      }) : (0, _react2.jsx)(_react.default.Fragment, null, this.renderDatePickerRange(), this.renderUpdateButton()));
     }
   }], [{
     key: "getDerivedStateFromProps",