@elastic/eui 95.10.1 → 95.11.0

package/optimize/lib/components/datagrid/utils/scrolling.js

@@ -9,8 +9,11 @@ exports.useScrollCellIntoView = exports.useScrollBars = exports.useScroll = void
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../../services");
+var _global_styling = require("../../../global_styling");
 var _cell = require("../body/cell");
 var _focus = require("./focus");
+var _scrolling = require("./scrolling.styles");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -216,6 +219,7 @@ var useScrollBars = exports.useScrollBars = function useScrollBars(outerGridRef)
   // If the grid scrolls or has scrollbars, we add custom border overlays
   // (since borders are normally set by cells) to ensure our grid body has
   // ending borders regardless of scroll position
+  var styles = (0, _services.useEuiMemoizedStyles)(_scrolling.euiDataGridScrollBarStyles);
   var scrollBorderOverlay = (0, _react.useMemo)(function () {
     if (!hasHorizontalScroll && !hasVerticalScroll) {
       return null; // Nothing to render if the grid doesn't scroll
@@ -224,22 +228,25 @@ var useScrollBars = exports.useScrollBars = function useScrollBars(outerGridRef)
       return null; // Nothing to render if the grid doesn't use borders
     }
     return (0, _react2.jsx)("div", {
+      css: styles.euiDataGrid__scrollOverlay,
       className: "euiDataGrid__scrollOverlay",
       role: "presentation"
     }, scrollBarHeight > 0 && (0, _react2.jsx)("div", {
+      css: styles.euiDataGrid__scrollBarOverlayBottom,
       className: "euiDataGrid__scrollBarOverlayBottom",
-      style: {
-        bottom: scrollBarHeight,
-        right: 0
-      }
+      style: (0, _global_styling.logicalStyles)({
+        bottom: scrollBarHeight
+      })
     }), scrollBarWidth > 0 && (0, _react2.jsx)("div", {
+      css: styles.euiDataGrid__scrollBarOverlayRight,
       className: "euiDataGrid__scrollBarOverlayRight",
-      style: {
+      style: (0, _global_styling.logicalStyles)({
+        top: 0,
         bottom: scrollBarHeight,
         right: scrollBarWidth
-      }
+      })
     }));
-  }, [hasHorizontalScroll, hasVerticalScroll, scrollBarHeight, scrollBarWidth, borderStyle]);
+  }, [hasHorizontalScroll, hasVerticalScroll, scrollBarHeight, scrollBarWidth, borderStyle, styles]);
   return {
     scrollBarHeight: scrollBarHeight,
     scrollBarWidth: scrollBarWidth,

package/optimize/lib/components/datagrid/utils/scrolling.styles.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridScrollBarStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+/*
+ * 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 euiDataGridScrollBarStyles = exports.euiDataGridScrollBarStyles = function euiDataGridScrollBarStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  // Note that 'borders' *must* be rendered with inset box-shadow, because actual
+  // `border` CSS will affect the relative position of the child scroll bar overlays
+  // and cause them to be off by the width of the border
+  var borderWidth = euiTheme.border.width.thin;
+  var borderColor = euiTheme.border.color;
+  return {
+    euiDataGrid__scrollOverlay: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;", (0, _global_styling.logicalCSS)('top', "-".concat(borderWidth)), "pointer-events:none;box-shadow:inset 0 0 0 ", borderWidth, " ", borderColor, ";.euiDataGrid--bordersHorizontal &{box-shadow:inset 0 -", (0, _global_styling.mathWithUnits)(borderWidth, function (x) {
+      return x * 2;
+    }), " 0 -", borderWidth, " ", borderColor, ";};label:euiDataGrid__scrollOverlay;"),
+    // Ensure the horizontal scrollbar has a top border
+    euiDataGrid__scrollBarOverlayBottom: /*#__PURE__*/(0, _react.css)("position:absolute;inset-inline:0;", (0, _global_styling.logicalCSS)('height', borderWidth), " background-color:", borderColor, ";;label:euiDataGrid__scrollBarOverlayBottom;"),
+    // Ensure the vertical scrollbar has a left border
+    euiDataGrid__scrollBarOverlayRight: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('width', borderWidth), " background-color:", borderColor, ";;label:euiDataGrid__scrollBarOverlayRight;")
+    // Note: Scroll bar border positions are set via JS inline style, since
+    // JS has access to the exact OS scrollbar width/height and CSS doesn't
+  };
+};

package/optimize/lib/components/flyout/flyout_resizable.js

@@ -16,7 +16,7 @@ var _helpers = require("../resizable_container/helpers");
 var _flyout = require("./flyout");
 var _flyout_resizable = require("./flyout_resizable.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "children"];
+var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ownFocus", "children"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -38,10 +38,13 @@ var EuiFlyoutResizable = exports.EuiFlyoutResizable = /*#__PURE__*/(0, _react.fo
     side = _ref$side === void 0 ? 'right' : _ref$side,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'overlay' : _ref$type,
+    _ref$ownFocus = _ref.ownFocus,
+    ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
     children = _ref.children,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var hasOverlay = type === 'overlay' && ownFocus;
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout_resizable.euiFlyoutResizableButtonStyles);
-  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side]];
+  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side], !hasOverlay && styles.noOverlay.noOverlay, !hasOverlay && styles.noOverlay[side]];
   var getFlyoutMinMaxWidth = (0, _react.useCallback)(function (width) {
     return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
     );
@@ -145,6 +148,7 @@ var EuiFlyoutResizable = exports.EuiFlyoutResizable = /*#__PURE__*/(0, _react.fo
     maxWidth: maxWidth,
     side: side,
     type: type,
+    ownFocus: ownFocus,
     ref: setRefs
   }), (0, _react2.jsx)(_resizable_container.EuiResizableButton, {
     isHorizontal: true,

package/optimize/lib/components/flyout/flyout_resizable.styles.js

@@ -14,6 +14,30 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1vfos8p-right",
+  styles: "justify-content:flex-start;label:right;"
+} : {
+  name: "1vfos8p-right",
+  styles: "justify-content:flex-start;label:right;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1ydooaf-left",
+  styles: "justify-content:flex-end;label:left;"
+} : {
+  name: "1ydooaf-left",
+  styles: "justify-content:flex-end;label:left;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1cw850z-noOverlay",
+  styles: "margin-inline:0;label:noOverlay;"
+} : {
+  name: "1cw850z-noOverlay",
+  styles: "margin-inline:0;label:noOverlay;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "1gfwqnd-euiFlyoutResizableButton",
   styles: "position:absolute;label:euiFlyoutResizableButton;"
 } : {
@@ -21,17 +45,22 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "position:absolute;label:euiFlyoutResizableButton;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiFlyoutResizableButtonStyles = exports.euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+var euiFlyoutResizableButtonStyles = exports.euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
-    euiFlyoutResizableButton: _ref,
+    euiFlyoutResizableButton: _ref4,
     overlay: {
       left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', 0), ";;label:left;"),
       right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), ";;label:right;")
     },
     push: {
-      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', "-".concat(euiTheme.border.width.thin)), ";;label:left;"),
-      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', "-".concat(euiTheme.border.width.thin)), ";;label:right;")
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', "-".concat(euiTheme.border.width.thick)), ";;label:left;"),
+      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', "-".concat(euiTheme.border.width.thick)), ";;label:right;")
+    },
+    noOverlay: {
+      noOverlay: _ref3,
+      left: _ref2,
+      right: _ref
     }
   };
 };

package/optimize/lib/components/popover/popover.js

@@ -431,7 +431,7 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
           }), popoverScreenReaderText));
         }
         var returnFocus = this.state.isOpenStable ? returnFocusConfig : false;
-        panel = (0, _react2.jsx)(_portal.EuiPortal, {
+        panel = (0, _react2.jsx)(_portal.EuiPortal, insert && {
           insert: insert
         }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
           clickOutsideDisables: true,

package/optimize/lib/components/text/text.js

@@ -10,11 +10,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _text = require("./text.styles");
 var _text_color = require("./text_color");
 var _text_align = require("./text_align");
+var _text = require("./text.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["size", "color", "grow", "textAlign", "children", "className"];
+var _excluded = ["component", "size", "color", "grow", "textAlign", "children", "className"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,7 +24,9 @@ var _excluded = ["size", "color", "grow", "textAlign", "children", "className"];
  */
 var TEXT_SIZES = exports.TEXT_SIZES = ['xs', 's', 'm', 'relative'];
 var EuiText = exports.EuiText = function EuiText(_ref) {
-  var _ref$size = _ref.size,
+  var _ref$component = _ref.component,
+    component = _ref$component === void 0 ? 'div' : _ref$component,
+    _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
     color = _ref.color,
     _ref$grow = _ref.grow,
@@ -36,12 +38,14 @@ var EuiText = exports.EuiText = function EuiText(_ref) {
   var styles = (0, _services.useEuiMemoizedStyles)(_text.euiTextStyles);
   var cssStyles = [styles.euiText, !grow ? styles.constrainedWidth : undefined, styles[size]];
   var classes = (0, _classnames.default)('euiText', className);
-  var text = (0, _react2.jsx)("div", (0, _extends2.default)({
+  var Component = component;
+  var text = (0, _react2.jsx)(Component, (0, _extends2.default)({
     css: cssStyles,
     className: classes
   }, rest), children);
   if (color) {
     text = (0, _react2.jsx)(_text_color.EuiTextColor, {
+      component: component,
       color: color,
       className: classes,
       cloneElement: true
@@ -49,6 +53,7 @@ var EuiText = exports.EuiText = function EuiText(_ref) {
   }
   if (textAlign) {
     text = (0, _react2.jsx)(_text_align.EuiTextAlign, {
+      component: component,
       textAlign: textAlign,
       className: classes,
       cloneElement: true

package/optimize/lib/components/text/text_align.js

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../services");
 var _text_align = require("./text_align.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "textAlign", "cloneElement"];
+var _excluded = ["children", "component", "textAlign", "cloneElement"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -27,6 +27,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var ALIGNMENTS = exports.ALIGNMENTS = ['left', 'right', 'center'];
 var EuiTextAlign = exports.EuiTextAlign = function EuiTextAlign(_ref) {
   var children = _ref.children,
+    _ref$component = _ref.component,
+    Component = _ref$component === void 0 ? 'div' : _ref$component,
     _ref$textAlign = _ref.textAlign,
     textAlign = _ref$textAlign === void 0 ? 'left' : _ref$textAlign,
     _ref$cloneElement = _ref.cloneElement,
@@ -39,6 +41,6 @@ var EuiTextAlign = exports.EuiTextAlign = function EuiTextAlign(_ref) {
   if ( /*#__PURE__*/(0, _react.isValidElement)(children) && cloneElement) {
     return (0, _services.cloneElementWithCss)(children, props);
   } else {
-    return (0, _react2.jsx)("div", props, children);
+    return (0, _react2.jsx)(Component, props, children);
   }
 };

package/optimize/lib/components/text/text_color.js

@@ -33,7 +33,7 @@ var EuiTextColor = exports.EuiTextColor = function EuiTextColor(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
     _ref$component = _ref.component,
-    component = _ref$component === void 0 ? 'span' : _ref$component,
+    Component = _ref$component === void 0 ? 'span' : _ref$component,
     _ref$cloneElement = _ref.cloneElement,
     cloneElement = _ref$cloneElement === void 0 ? false : _ref$cloneElement,
     style = _ref.style,
@@ -58,7 +58,6 @@ var EuiTextColor = exports.EuiTextColor = function EuiTextColor(_ref) {
       style: childrenStyle
     }));
   } else {
-    var Component = component;
     return (0, _react2.jsx)(Component, props, children);
   }
 };

package/optimize/lib/components/text/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "95.10.1",
+  "version": "95.11.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -42,8 +42,8 @@
     "release": "node ./scripts/release.js",
     "release-backport": "node ./scripts/release.js --type=backport",
     "release-rc": "node ./scripts/release.js --type=prerelease",
-    "storybook": "yarn compile-scss && storybook dev -p 6006",
-    "build-storybook": "yarn compile-scss && storybook build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "pre-push": "yarn test-staged"
   },
   "repository": {

package/src/themes/amsterdam/theme_dark.scss

@@ -3,10 +3,3 @@
 
 // Global styling
 @import './global_styling/index';
-
-// Components
-@import '../../components/index';
-
-// Component overrides
-// Comes after the component import and overrides via cascade
-@import './overrides/index';

package/src/themes/amsterdam/theme_light.scss

@@ -3,10 +3,3 @@
 
 // Global styling
 @import './global_styling/index';
-
-// Components
-@import '../../components/index';
-
-// Component overrides
-// Comes after the component import and overrides via cascade
-@import './overrides/index';

package/test-env/components/basic_table/basic_table.js

@@ -706,7 +706,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
           var hasCustomActions = columnActions.some(function (action) {
             return !!action.render;
           });
-          cells.push(_this5.renderItemActionsCell(itemId, item, column, columnIndex, hasCustomActions));
+          cells.push(_this5.renderItemActionsCell(itemId, item, column, columnIndex, rowIndex, hasCustomActions));
           // A table theoretically could have both custom and default action items
           // If it has both, default action mobile row styles take precedence over custom
           hasActions = !hasActions && hasCustomActions ? 'custom' : true;
@@ -795,7 +795,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "renderItemActionsCell",
-    value: function renderItemActionsCell(itemId, item, column, columnIndex, hasCustomActions) {
+    value: function renderItemActionsCell(itemId, item, column, columnIndex, rowIndex, hasCustomActions) {
       // Disable all actions if any row(s) are selected
       var allDisabled = this.state.selection.length > 0;
       var actualActions = column.actions.filter(function (action) {
@@ -832,7 +832,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
               actions: column.actions,
               actionsDisabled: allDisabled,
               itemId: itemId,
-              item: item
+              item: item,
+              displayedRowIndex: rowIndex
             });
           }
         });

package/test-env/components/basic_table/collapsed_item_actions.js

@@ -30,6 +30,7 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
     itemId = _ref.itemId,
     item = _ref.item,
     actionsDisabled = _ref.actionsDisabled,
+    displayedRowIndex = _ref.displayedRowIndex,
     className = _ref.className;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -38,6 +39,11 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
   var closePopover = (0, _react.useCallback)(function () {
     return setPopoverOpen(false);
   }, []);
+  var allActionsTooltip = (0, _i18n.useEuiI18n)('euiCollapsedItemActions.allActionsTooltip', 'All actions');
+  var allActionsButtonAriaLabel = (0, _i18n.useEuiI18n)('euiCollapsedItemActions.allActions', 'All actions, row {index}', {
+    index: displayedRowIndex + 1
+  });
+  var allActionsButtonDisabledAriaLabel = (0, _i18n.useEuiI18n)('euiCollapsedItemActions.allActionsDisabled', 'Individual item actions are disabled when rows are being selected.');
   var controls = (0, _react.useMemo)(function () {
     return actions.reduce(function (controls, action, index) {
       var _action$available, _action$available2;
@@ -88,37 +94,24 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
       return controls;
     }, []);
   }, [actions, actionsDisabled, item, closePopover]);
-  var popoverButton = (0, _react2.jsx)(_i18n.EuiI18n, {
-    tokens: ['euiCollapsedItemActions.allActions', 'euiCollapsedItemActions.allActionsDisabled'],
-    defaults: ['All actions', 'Individual item actions are disabled when rows are being selected.']
-  }, function (_ref2) {
-    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-      allActions = _ref3[0],
-      allActionsDisabled = _ref3[1];
-    return (0, _react2.jsx)(_button.EuiButtonIcon, {
-      className: className,
-      "aria-label": actionsDisabled ? allActionsDisabled : allActions,
-      title: actionsDisabled ? allActionsDisabled : undefined,
-      iconType: "boxesHorizontal",
-      color: "text",
-      isDisabled: actionsDisabled,
-      onClick: function onClick() {
-        return setPopoverOpen(function (isOpen) {
-          return !isOpen;
-        });
-      },
-      "data-test-subj": "euiCollapsedItemActionsButton"
-    });
-  });
-  var withTooltip = !actionsDisabled && (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiCollapsedItemActions.allActions",
-    default: "All actions"
-  }, function (allActions) {
-    return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-      content: allActions,
-      delay: "long"
-    }, popoverButton);
+  var popoverButton = (0, _react2.jsx)(_button.EuiButtonIcon, {
+    className: className,
+    "aria-label": actionsDisabled ? allActionsButtonDisabledAriaLabel : allActionsButtonAriaLabel,
+    title: actionsDisabled ? allActionsButtonDisabledAriaLabel : undefined,
+    iconType: "boxesHorizontal",
+    color: "text",
+    isDisabled: actionsDisabled,
+    onClick: function onClick() {
+      return setPopoverOpen(function (isOpen) {
+        return !isOpen;
+      });
+    },
+    "data-test-subj": "euiCollapsedItemActionsButton"
   });
+  var withTooltip = !actionsDisabled && (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: allActionsTooltip,
+    delay: "long"
+  }, popoverButton);
   return (0, _react2.jsx)(_popover.EuiPopover, {
     className: className,
     id: "".concat(itemId, "-actions"),