@elastic/eui 109.0.0 → 109.1.0-snapshot.1763390960850

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

@@ -38,6 +38,7 @@ import { EuiDatePickerRange } from '../date_picker_range';
 import { EuiFormControlButton, EuiFormControlLayout } from '../../form';
 import { RenderI18nTimeOptions } from './time_options';
 import { PrettyDuration, showPrettyDuration } from './pretty_duration';
+import { EuiTimeWindowButtons } from './time_window_buttons';
 import { AsyncInterval } from './async_interval';
 import { EuiSuperUpdateButton } from './super_update_button';
 import { EuiQuickSelectPopover } from './quick_select_popover/quick_select_popover';
@@ -276,7 +277,9 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         maxDate = _this$props3.maxDate,
         compressed = _this$props3.compressed,
         onFocus = _this$props3.onFocus,
-        styles = _this$props3.memoizedStyles;
+        styles = _this$props3.memoizedStyles,
+        _this$props3$timeZone = _this$props3.timeZoneDisplayProps,
+        timeZoneDisplayProps = _this$props3$timeZone === void 0 ? {} : _this$props3$timeZone;
       var autoRefreshAppend = !isPaused ? ___EmotionJSX(EuiAutoRefreshButton, {
         refreshInterval: refreshInterval,
         minInterval: refreshMinInterval,
@@ -353,7 +356,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             timeOptions: timeOptions,
             buttonProps: {
               onFocus: onFocus
-            }
+            },
+            timeZoneDisplayProps: timeZoneDisplayProps
           }),
           endDateControl: isQuickSelectOnly ? undefined : ___EmotionJSX(EuiDatePopoverButton, {
             css: styles.euiSuperDatePicker__rangeInput,
@@ -378,7 +382,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             timeOptions: timeOptions,
             buttonProps: {
               onFocus: onFocus
-            }
+            },
+            timeZoneDisplayProps: timeZoneDisplayProps
           })
         }));
       });
@@ -398,13 +403,32 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         _this.applyTime();
       }
     });
-    _defineProperty(_this, "renderUpdateButton", function () {
+    _defineProperty(_this, "renderTimeWindowButtons", function () {
+      if (!_this.props.showTimeWindowButtons || _this.props.isAutoRefreshOnly) {
+        return null;
+      }
       var _this$props5 = _this.props,
-        isLoading = _this$props5.isLoading,
-        isDisabled = _this$props5.isDisabled,
-        updateButtonProps = _this$props5.updateButtonProps,
-        showUpdateButton = _this$props5.showUpdateButton,
-        compressed = _this$props5.compressed;
+        start = _this$props5.start,
+        end = _this$props5.end,
+        showTimeWindowButtons = _this$props5.showTimeWindowButtons,
+        compressed = _this$props5.compressed,
+        isDisabled = _this$props5.isDisabled;
+      var config = typeof showTimeWindowButtons === 'boolean' ? {} : showTimeWindowButtons;
+      return ___EmotionJSX(EuiTimeWindowButtons, _extends({
+        applyTime: _this.applyQuickTime,
+        start: start,
+        end: end,
+        compressed: compressed,
+        isDisabled: !!isDisabled || _this.state.isInvalid
+      }, config));
+    });
+    _defineProperty(_this, "renderUpdateButton", function () {
+      var _this$props6 = _this.props,
+        isLoading = _this$props6.isLoading,
+        isDisabled = _this$props6.isDisabled,
+        updateButtonProps = _this$props6.updateButtonProps,
+        showUpdateButton = _this$props6.showUpdateButton,
+        compressed = _this$props6.compressed;
       if (!showUpdateButton) return null;
       return ___EmotionJSX(EuiSuperUpdateButton, _extends({
         needsUpdate: _this.state.hasChanged,
@@ -423,21 +447,21 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
   return _createClass(EuiSuperDatePickerInternal, [{
     key: "render",
     value: function render() {
-      var _this$props6 = this.props,
-        isAutoRefreshOnly = _this$props6.isAutoRefreshOnly,
-        isDisabled = _this$props6.isDisabled,
-        isPaused = _this$props6.isPaused,
-        onRefreshChange = _this$props6.onRefreshChange,
-        refreshInterval = _this$props6.refreshInterval,
-        refreshMinInterval = _this$props6.refreshMinInterval,
-        refreshIntervalUnits = _this$props6.refreshIntervalUnits,
-        showUpdateButton = _this$props6.showUpdateButton,
-        dataTestSubj = _this$props6['data-test-subj'],
-        _width = _this$props6.width,
-        isQuickSelectOnly = _this$props6.isQuickSelectOnly,
-        compressed = _this$props6.compressed,
-        className = _this$props6.className,
-        styles = _this$props6.memoizedStyles;
+      var _this$props7 = this.props,
+        isAutoRefreshOnly = _this$props7.isAutoRefreshOnly,
+        isDisabled = _this$props7.isDisabled,
+        isPaused = _this$props7.isPaused,
+        onRefreshChange = _this$props7.onRefreshChange,
+        refreshInterval = _this$props7.refreshInterval,
+        refreshMinInterval = _this$props7.refreshMinInterval,
+        refreshIntervalUnits = _this$props7.refreshIntervalUnits,
+        showUpdateButton = _this$props7.showUpdateButton,
+        dataTestSubj = _this$props7['data-test-subj'],
+        _width = _this$props7.width,
+        isQuickSelectOnly = _this$props7.isQuickSelectOnly,
+        compressed = _this$props7.compressed,
+        className = _this$props7.className,
+        styles = _this$props7.memoizedStyles;
       var _this$state2 = this.state,
         hasChanged = _this$state2.hasChanged,
         isInvalid = _this$state2.isInvalid;
@@ -462,7 +486,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         compressed: compressed,
         isDisabled: !!isDisabled,
         className: className
-      }) : ___EmotionJSX(React.Fragment, null, this.renderDatePickerRange(), this.renderUpdateButton()));
+      }) : ___EmotionJSX(React.Fragment, null, this.renderDatePickerRange(), this.renderTimeWindowButtons(), this.renderUpdateButton()));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -627,6 +651,28 @@ EuiSuperDatePickerInternal.propTypes = {
      * @default true
      */
   showUpdateButton: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.oneOf(["iconOnly"])]),
+  /**
+     * Set to true to display buttons for time shifting and zooming out,
+     * next to the top-level control.
+     */
+  showTimeWindowButtons: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.shape({
+    /**
+       * Show button for zooming out
+       * @default true
+       */
+    showZoomOut: PropTypes.bool,
+    /**
+       * Show buttons for shifting the time window forward and backward
+       * @default true
+       */
+    showShiftArrows: PropTypes.bool,
+    /**
+       * How much the time window is increased when zooming.
+       * A number between 0 and 1 e.g. 0.25, or a string representing a percentage e.g. 25%
+       * @default 0.5
+       * */
+    zoomFactor: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired])
+  }).isRequired]),
   /**
      * Hides the actual input reducing to just the quick select button.
      */
@@ -673,6 +719,31 @@ EuiSuperDatePickerInternal.propTypes = {
      * input by the user, set this flag to `false`.
      */
   canRoundRelativeUnits: PropTypes.bool,
+  /**
+     * Props passed to the time zone display in the popovers {@link EuiTimeZoneDisplayProps}
+     *
+     * Setting `timeZoneDisplayProps.timeZone` with a valid time zone name will make
+     * the time zone information be visible below the start and end input fields.
+     * This is informational only, it will not affect how date/times are handled.
+     */
+  timeZoneDisplayProps: PropTypes.shape({
+    /**
+       * A valid time zone name, from the IANA database, e.g. "America/Los_Angeles".
+       *
+       * @link https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+       */
+    timeZone: PropTypes.string,
+    /**
+       * Render prop function to add additional content to the time zone display.
+       * Useful for e.g. adding links to documentation or setting pages.
+       */
+    customRender: PropTypes.func,
+    /**
+       * Reference date to be used while resolving the UTC offset.
+       * Only useful for edge cases involving daylight saving time.
+       */
+    date: PropTypes.any
+  }),
   memoizedStyles: PropTypes.any.isRequired,
   timeOptions: PropTypes.shape({
     timeTenseOptions: PropTypes.arrayOf(PropTypes.any.isRequired).isRequired,
@@ -822,6 +893,15 @@ EuiSuperDatePicker.propTypes = {
      * @default true
      */
   showUpdateButton: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.oneOf(["iconOnly"])]),
+  /**
+     * Set to true to display buttons for time shifting and zooming out,
+     * next to the top-level control.
+     */
+  showTimeWindowButtons: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.shape({
+    showZoomOut: PropTypes.bool,
+    showShiftArrows: PropTypes.bool,
+    zoomFactor: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired])
+  }).isRequired]),
   /**
      * Hides the actual input reducing to just the quick select button.
      */
@@ -847,5 +927,17 @@ EuiSuperDatePicker.propTypes = {
      * If you do not want this behavior and instead wish to keep the exact units
      * input by the user, set this flag to `false`.
      */
-  canRoundRelativeUnits: PropTypes.bool
+  canRoundRelativeUnits: PropTypes.bool,
+  /**
+     * Props passed to the time zone display in the popovers {@link EuiTimeZoneDisplayProps}
+     *
+     * Setting `timeZoneDisplayProps.timeZone` with a valid time zone name will make
+     * the time zone information be visible below the start and end input fields.
+     * This is informational only, it will not affect how date/times are handled.
+     */
+  timeZoneDisplayProps: PropTypes.shape({
+    timeZone: PropTypes.string,
+    customRender: PropTypes.func,
+    date: PropTypes.any
+  })
 };

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

@@ -0,0 +1,185 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import dateMath from '@elastic/datemath';
+import moment from 'moment';
+import { usePrettyInterval } from './pretty_interval';
+import { isRelativeToNow } from './relative_utils';
+import { EuiButtonGroupButton } from '../../button/button_group/button_group_button';
+import { euiButtonGroupButtonsStyles } from '../../button/button_group/button_group.styles';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../services';
+import { useEuiI18n } from '../../i18n';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var ZOOM_FACTOR_DEFAULT = 0.5;
+/**
+ * Button group with time window controls for shifting the time window
+ * forwards and backwards, and zooming out.
+ */
+export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
+  var applyTime = _ref.applyTime,
+    start = _ref.start,
+    end = _ref.end,
+    compressed = _ref.compressed,
+    isDisabled = _ref.isDisabled,
+    _ref$showZoomOut = _ref.showZoomOut,
+    showZoomOut = _ref$showZoomOut === void 0 ? true : _ref$showZoomOut,
+    _ref$showShiftArrows = _ref.showShiftArrows,
+    showShiftArrows = _ref$showShiftArrows === void 0 ? true : _ref$showShiftArrows,
+    _ref$zoomFactor = _ref.zoomFactor,
+    zoomFactor = _ref$zoomFactor === void 0 ? ZOOM_FACTOR_DEFAULT : _ref$zoomFactor;
+  var buttonColor = 'text';
+  var buttonSize = compressed ? 's' : 'm';
+  var iconSize = compressed ? 's' : 'm';
+  var styles = useEuiMemoizedStyles(euiButtonGroupButtonsStyles);
+  var _useEuiTimeWindow = useEuiTimeWindow(start, end, applyTime, {
+      zoomFactor: zoomFactor
+    }),
+    displayInterval = _useEuiTimeWindow.displayInterval,
+    isInvalid = _useEuiTimeWindow.isInvalid,
+    stepForward = _useEuiTimeWindow.stepForward,
+    stepBackward = _useEuiTimeWindow.stepBackward,
+    expandWindow = _useEuiTimeWindow.expandWindow;
+  var invalidShiftDescription = useEuiI18n('euiTimeWindowButtons.invalidShiftLabel', 'Cannot shift invalid time window');
+  var invalidZoomOutDescription = useEuiI18n('euiTimeWindowButtons.invalidZoomOutLabel', 'Cannot zoom out invalid time window');
+  var previousId = useGeneratedHtmlId({
+    prefix: 'previous'
+  });
+  var previousLabel = useEuiI18n('euiTimeWindowButtons.previousLabel', 'Previous');
+  var previousTooltipContent = useEuiI18n('euiTimeWindowButtons.previousDescription', 'Previous {displayInterval}', {
+    displayInterval: displayInterval
+  });
+  var zoomOutId = useGeneratedHtmlId({
+    prefix: 'zoom_out'
+  });
+  var zoomOutLabel = useEuiI18n('euiTimeWindowButtons.zoomOutLabel', 'Zoom out');
+  var zoomOutTooltipContent = isInvalid ? invalidZoomOutDescription : zoomOutLabel;
+  var nextId = useGeneratedHtmlId({
+    prefix: 'next'
+  });
+  var nextLabel = useEuiI18n('euiTimeWindowButtons.nextLabel', 'Next');
+  var nextTooltipContent = useEuiI18n('euiTimeWindowButtons.nextDescription', 'Next {displayInterval}', {
+    displayInterval: displayInterval
+  });
+  if (!showZoomOut && !showShiftArrows) return null;
+  return ___EmotionJSX("div", {
+    className: "euiSuperDatePicker__timeWindowButtons",
+    css: [styles.euiButtonGroup__buttons, styles[buttonSize], ";label:EuiTimeWindowButtons;"],
+    "data-test-subj": "timeWindowButtons"
+  }, showShiftArrows && ___EmotionJSX(EuiButtonGroupButton, {
+    id: previousId,
+    "data-test-subj": "timeWindowButtonsPrevious",
+    label: previousLabel,
+    title: "",
+    toolTipContent: !isDisabled && (isInvalid ? invalidShiftDescription : previousTooltipContent),
+    color: buttonColor,
+    size: buttonSize,
+    iconType: "arrowLeft",
+    iconSize: iconSize,
+    isIconOnly: true,
+    isSelected: false,
+    isDisabled: isDisabled,
+    onClick: stepBackward
+  }), showZoomOut && ___EmotionJSX(EuiButtonGroupButton, {
+    id: zoomOutId,
+    "data-test-subj": "timeWindowButtonsZoomOut",
+    label: zoomOutLabel,
+    title: "",
+    toolTipContent: !isDisabled && zoomOutTooltipContent,
+    toolTipProps: {
+      disableScreenReaderOutput: zoomOutLabel === zoomOutTooltipContent
+    },
+    color: buttonColor,
+    size: buttonSize,
+    iconType: "magnifyWithMinus",
+    iconSize: iconSize,
+    isIconOnly: true,
+    isSelected: false,
+    isDisabled: isDisabled,
+    onClick: expandWindow
+  }), showShiftArrows && ___EmotionJSX(EuiButtonGroupButton, {
+    id: nextId,
+    "data-test-subj": "timeWindowButtonsNext",
+    label: nextLabel,
+    title: "",
+    toolTipContent: !isDisabled && (isInvalid ? invalidShiftDescription : nextTooltipContent),
+    color: buttonColor,
+    size: buttonSize,
+    iconType: "arrowRight",
+    iconSize: iconSize,
+    isIconOnly: true,
+    isSelected: false,
+    isDisabled: isDisabled,
+    onClick: stepForward
+  }));
+};
+
+/**
+ * Partly adapted from date_picker/super_date_picker/quick_select_popover/quick_select.tsx
+ */
+export function useEuiTimeWindow(start, end, apply, options) {
+  var _options$zoomFactor;
+  var min = dateMath.parse(start);
+  var max = dateMath.parse(end, {
+    roundUp: true
+  });
+  var isInvalid = !min || !min.isValid() || !max || !max.isValid();
+  var windowDuration = isInvalid ? 1 : max.diff(min);
+  var zoomFactor = getPercentageMultiplier((_options$zoomFactor = options === null || options === void 0 ? void 0 : options.zoomFactor) !== null && _options$zoomFactor !== void 0 ? _options$zoomFactor : ZOOM_FACTOR_DEFAULT);
+  var zoomAddition = windowDuration * (zoomFactor / 2); // Gets added to each end, that's why it's split in half
+  var prettyInterval = usePrettyInterval(false, windowDuration);
+  var displayInterval = isInvalid ? '' : prettyInterval;
+  if (!isInvalid && !isRelativeToNow(start, end) && !isExactMinuteRange(windowDuration)) {
+    displayInterval = "~".concat(displayInterval);
+  }
+  return {
+    displayInterval: displayInterval,
+    isInvalid: isInvalid,
+    stepForward: stepForward,
+    stepBackward: stepBackward,
+    expandWindow: expandWindow
+  };
+  function stepForward() {
+    if (isInvalid) return;
+    apply({
+      start: moment(max).toISOString(),
+      end: moment(max).add(windowDuration, 'ms').toISOString()
+    });
+  }
+  function stepBackward() {
+    if (isInvalid) return;
+    apply({
+      start: moment(min).subtract(windowDuration, 'ms').toISOString(),
+      end: moment(min).toISOString()
+    });
+  }
+  function expandWindow() {
+    if (isInvalid) return;
+    apply({
+      start: moment(min).subtract(zoomAddition, 'ms').toISOString(),
+      end: moment(max).add(zoomAddition, 'ms').toISOString()
+    });
+  }
+}
+
+/**
+ * Get a number out of either 0.2 or "20%"
+ */
+function getPercentageMultiplier(value) {
+  var result = typeof value === 'number' ? value : parseFloat(String(value).replace('%', '').trim());
+  if (isNaN(result)) throw new TypeError('Please provide a valid number or percentage string e.g. "25%"');
+  return result > 1 ? result / 100 : result;
+}
+
+/**
+ * Useful to determine whether to show the tilde in the display
+ */
+function isExactMinuteRange(diffMs) {
+  // 60 * 1000 = ms per minute
+  return diffMs % (60 * 1000) === 0;
+}

package/es/components/facet/facet_button.js

@@ -108,6 +108,9 @@ EuiFacetButton.propTypes = {
      * Any node, but preferably a `EuiIcon` or `EuiAvatar`
      */
   icon: PropTypes.node,
+  /**
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
   isDisabled: PropTypes.bool,
   /**
      * Force disables the button and changes the icon to a loading spinner
@@ -150,27 +153,14 @@ EuiFacetButton.propTypes = {
   style: PropTypes.any,
   type: PropTypes.any,
   /**
-     * Any `type` accepted by EuiIcon
-     */
-  iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "anomalyChart", "anomalySwimLane", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "backgroundTask", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "changePointDetection", "check", "checkCircle", "checkInCircleFilled", "cheer", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "code", "codeApp", "color", "comment", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "contrast", "contrastHigh", "controls", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInCircle", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "diff", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "errorFilled", "esqlVis", "exit", "expand", "expandMini", "export", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "fieldStatistics", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flask", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "info", "image", "importAction", "index", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logPatternAnalysis", "logRateAnalysis", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "minusInSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "newChat", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plugs", "plus", "plusInCircle", "plusInCircleFilled", "plusInSquare", "popout", "push", "question", "quote", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "streamsClassic", "streamsWired", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "warningFilled", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workflowsApp", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenSemanticText", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
-  /**
-     * Can only be one side `left` or `right`
-     */
-  iconSide: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([undefined])]),
-  /**
-     * Object of props passed to the `<span>` wrapping the content's text/children only (not icon)
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
      *
-     * This span wrapper can be removed by passing `textProps={false}`.
+     * Use e.g. when a disabled button should have a tooltip.
      */
-  textProps: PropTypes.oneOfType([PropTypes.shape({
-    className: PropTypes.string,
-    "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string,
-    css: PropTypes.any,
-    ref: PropTypes.any,
-    "data-text": PropTypes.string
-  }).isRequired, PropTypes.oneOf([false])]),
-  iconSize: PropTypes.any,
+  hasAriaDisabled: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

package/es/components/filter_group/filter_button.js

@@ -228,5 +228,18 @@ EuiFilterButton.propTypes = {
      *  - accent
      *  - warning
      */
-  color: PropTypes.any
+  color: PropTypes.any,
+  /**
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
+  isDisabled: PropTypes.bool,
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: PropTypes.bool
 };

package/es/components/flyout/flyout.js

@@ -29,7 +29,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 import React, { useEffect, useRef, useMemo, useCallback, useState, forwardRef } from 'react';
 import classnames from 'classnames';
-import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables } from '../../services';
+import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables, focusTrapPubSub } from '../../services';
 import { logicalStyle } from '../../global_styling';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
@@ -223,20 +223,28 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     return selectors;
   }, [includeSelectorInFocusTrap, includeFixedHeadersInFocusTrap]);
-  useEffect(function () {
+
+  /**
+   * Finds the shards to include in the focus trap by querying by `focusTrapSelectors`.
+   *
+   * @param shouldAutoFocus Whether to auto-focus the flyout wrapper when the focus trap is activated.
+   * This is necessary because when a flyout is toggled from within a shard, the focus trap's `autoFocus`
+   * feature doesn't work. This logic manually focuses the flyout as a workaround.
+   */
+  var findShards = useCallback(function () {
+    var shouldAutoFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     if (focusTrapSelectors.length > 0) {
       var shardsEls = focusTrapSelectors.flatMap(function (selector) {
         return Array.from(document.querySelectorAll(selector));
       });
       setFocusTrapShards(Array.from(shardsEls));
-
-      // Flyouts that are toggled from shards do not have working
-      // focus trap autoFocus, so we need to focus the flyout wrapper ourselves
-      shardsEls.forEach(function (shard) {
-        if (shard.contains(flyoutToggle.current)) {
-          resizeRef === null || resizeRef === void 0 || resizeRef.focus();
-        }
-      });
+      if (shouldAutoFocus) {
+        shardsEls.forEach(function (shard) {
+          if (shard.contains(flyoutToggle.current)) {
+            resizeRef === null || resizeRef === void 0 || resizeRef.focus();
+          }
+        });
+      }
     } else {
       // Clear existing shards if necessary, e.g. switching to `false`
       setFocusTrapShards(function (shards) {
@@ -244,6 +252,15 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
   }, [focusTrapSelectors, resizeRef]);
+  useEffect(function () {
+    // Auto-focus should only happen on initial flyout mount (or when the dependencies change)
+    // because it snaps focus to the flyout wrapper, which steals it from subsequently focused elements.
+    findShards(true);
+    var unsubscribe = focusTrapPubSub.subscribe(function () {
+      return findShards();
+    });
+    return unsubscribe;
+  }, [findShards]);
   var focusTrapProps = useMemo(function () {
     return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
       shards: [].concat(_toConsumableArray(focusTrapShards), _toConsumableArray((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))

package/es/components/form/form_control_button/form_control_button.js

@@ -100,13 +100,6 @@ EuiFormControlButton.propTypes = {
   fullWidth: PropTypes.bool,
   href: PropTypes.string,
   onClick: PropTypes.func,
-  /**
-     * `disabled` is also allowed
-     */
-  /**
-     * `disabled` is also allowed
-     */
-  isDisabled: PropTypes.bool,
   target: PropTypes.string,
   rel: PropTypes.string,
   type: PropTypes.any,
@@ -145,10 +138,23 @@ EuiFormControlButton.propTypes = {
     "data-text": PropTypes.string
   }).isRequired, PropTypes.oneOf([false])]),
   iconSize: PropTypes.any,
+  /**
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
+  isDisabled: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: PropTypes.bool,
   /**
        * Defines the button label when used like an input in combination with `placeholder`
        */

package/es/components/header/header_links/header_link.js

@@ -33,13 +33,6 @@ export var EuiHeaderLink = function EuiHeaderLink(_ref) {
 EuiHeaderLink.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
-  /**
-     * `disabled` is also allowed
-     */
-  /**
-     * `disabled` is also allowed
-     */
-  isDisabled: PropTypes.bool,
   target: PropTypes.string,
   rel: PropTypes.string,
   type: PropTypes.any,
@@ -78,10 +71,23 @@ EuiHeaderLink.propTypes = {
     "data-text": PropTypes.string
   }).isRequired, PropTypes.oneOf([false])]),
   iconSize: PropTypes.any,
+  /**
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
+  isDisabled: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: PropTypes.bool,
   /**
      * Simple prop to update color based on active state.
      * Can be overridden with `color`

package/es/components/header/header_section/header_section_item_button.js

@@ -174,13 +174,6 @@ ref) {
 EuiHeaderSectionItemButton.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
-  /**
-     * `disabled` is also allowed
-     */
-  /**
-     * `disabled` is also allowed
-     */
-  isDisabled: PropTypes.bool,
   target: PropTypes.string,
   rel: PropTypes.string,
   type: PropTypes.any,
@@ -219,10 +212,23 @@ EuiHeaderSectionItemButton.propTypes = {
     "data-text": PropTypes.string
   }).isRequired, PropTypes.oneOf([false])]),
   iconSize: PropTypes.any,
+  /**
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
+  isDisabled: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: PropTypes.bool,
   /**
        * Inserts the node into a EuiBadgeNotification and places it appropriately against the button.
        * Or pass `true` to render a simple dot