@elastic/eui 97.0.0-backport.0 → 97.1.0

package/test-env/components/datagrid/utils/focus.js

@@ -49,11 +49,11 @@ var useFocus = exports.useFocus = function useFocus() {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     focusedCell = _useState4[0],
     _setFocusedCell = _useState4[1];
-  var setFocusedCell = (0, _react.useCallback)(function (nextFocusedCell) {
+  var setFocusedCell = (0, _react.useCallback)(function (nextFocusedCell, forceUpdate) {
     _setFocusedCell(function (prevFocusedCell) {
       // If the x/y coordinates remained the same, don't update. This keeps the focusedCell
       // reference stable, and allows it to be used in places that need reference equality.
-      if (nextFocusedCell[0] === (prevFocusedCell === null || prevFocusedCell === void 0 ? void 0 : prevFocusedCell[0]) && nextFocusedCell[1] === (prevFocusedCell === null || prevFocusedCell === void 0 ? void 0 : prevFocusedCell[1])) {
+      if (!forceUpdate && nextFocusedCell[0] === (prevFocusedCell === null || prevFocusedCell === void 0 ? void 0 : prevFocusedCell[0]) && nextFocusedCell[1] === (prevFocusedCell === null || prevFocusedCell === void 0 ? void 0 : prevFocusedCell[1])) {
         return prevFocusedCell;
       } else {
         setIsFocusedCellInView(true); // scrolling.ts ensures focused cells are fully in view

package/test-env/components/datagrid/utils/scrolling.js

@@ -71,7 +71,8 @@ var useScrollCellIntoView = exports.useScrollCellIntoView = function useScrollCe
     headerRowHeight = _ref.headerRowHeight,
     footerRowHeight = _ref.footerRowHeight,
     visibleRowCount = _ref.visibleRowCount,
-    hasStickyFooter = _ref.hasStickyFooter;
+    hasStickyFooter = _ref.hasStickyFooter,
+    canDragAndDropColumns = _ref.canDragAndDropColumns;
   var scrollCellIntoView = (0, _react.useCallback)(
   /*#__PURE__*/
   // Note: in order for this UX to work correctly with react-window's APIs,
@@ -82,7 +83,7 @@ var useScrollCellIntoView = exports.useScrollCellIntoView = function useScrollCe
       var rowIndex = _ref3.rowIndex,
         colIndex = _ref3.colIndex;
       return /*#__PURE__*/_regenerator.default.mark(function _callee(_adjustedScrollLeft) {
-        var getCell, cell, cellIsInView, _outerGridRef$current, scrollTop, scrollLeft, adjustedScrollTop, adjustedScrollLeft, cellRightPos, rightScrollBound, rightWidthOutOfView, cellLeftPos, leftScrollBound, leftWidthOutOfView, isStickyHeader, isStickyFooter, _adjustedScrollTop, parentRow, cellBottomPos, bottomScrollBound, bottomHeightOutOfView, cellTopPos, topScrollBound, topHeightOutOfView, _adjustedScrollLeft2, _adjustedScrollTop2;
+        var getCell, cell, cellIsInView, isStickyHeader, isStickyFooter, isDraggableHeader, isDraggableHeaderCell, _outerGridRef$current, scrollTop, scrollLeft, adjustedScrollTop, adjustedScrollLeft, cellLeftPos, cellRightPos, rightScrollBound, rightWidthOutOfView, leftScrollBound, leftWidthOutOfView, _adjustedScrollTop, parentRow, cellBottomPos, bottomScrollBound, bottomHeightOutOfView, cellTopPos, topScrollBound, topHeightOutOfView, _adjustedScrollLeft2, _adjustedScrollTop2;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -128,7 +129,10 @@ var useScrollCellIntoView = exports.useScrollCellIntoView = function useScrollCe
               return _context.abrupt("return");
             case 14:
               // If for some reason we can't find a valid cell, short-circuit
-              // We now manually adjust scroll positioning around the cell to ensure it's
+              isStickyHeader = rowIndex === -1;
+              isStickyFooter = hasStickyFooter && rowIndex === visibleRowCount;
+              isDraggableHeader = canDragAndDropColumns && isStickyHeader;
+              isDraggableHeaderCell = isDraggableHeader && cell.offsetLeft === 0 && colIndex !== 0; // We now manually adjust scroll positioning around the cell to ensure it's
               // fully in view on all sides. A couple of notes on this:
               // 1. We're avoiding relying on react-window's scrollToItem for this because it also
               //    does not account for sticky items (see https://github.com/bvaughn/react-window/issues/586)
@@ -137,8 +141,10 @@ var useScrollCellIntoView = exports.useScrollCellIntoView = function useScrollCe
               //    halfway there, but doesn't guarantee the *full* cell in view, or account for
               //    sticky positioned rows or OS scrollbars, hence these workarounds
               _outerGridRef$current = outerGridRef.current, scrollTop = _outerGridRef$current.scrollTop, scrollLeft = _outerGridRef$current.scrollLeft;
-              // Check if the cell's right side is outside the current scrolling bounds
-              cellRightPos = cell.offsetLeft + cell.offsetWidth;
+              // Draggable header columns are nested within EuiDraggables,
+              // and their offsetLeft needs to go up a wrapper as a result
+              cellLeftPos = isDraggableHeaderCell ? cell.offsetParent.offsetLeft : cell.offsetLeft; // Check if the cell's right side is outside the current scrolling bounds
+              cellRightPos = cellLeftPos + cell.offsetWidth;
               rightScrollBound = scrollLeft + outerGridRef.current.clientWidth; // Note: We specifically want clientWidth and not offsetWidth here to account for scrollbars
               rightWidthOutOfView = cellRightPos - rightScrollBound;
               if (rightWidthOutOfView > 0) {
@@ -146,7 +152,6 @@ var useScrollCellIntoView = exports.useScrollCellIntoView = function useScrollCe
               }
 
               // Check if the cell's left side is outside the current scrolling bounds
-              cellLeftPos = cell.offsetLeft;
               leftScrollBound = (_adjustedScrollLeft = adjustedScrollLeft) !== null && _adjustedScrollLeft !== void 0 ? _adjustedScrollLeft : scrollLeft;
               leftWidthOutOfView = leftScrollBound - cellLeftPos;
               if (leftWidthOutOfView > 0) {
@@ -157,8 +162,6 @@ var useScrollCellIntoView = exports.useScrollCellIntoView = function useScrollCe
 
               // Skip top/bottom scroll adjustments for sticky headers & footers
               // since they should always be in view vertically
-              isStickyHeader = rowIndex === -1;
-              isStickyFooter = hasStickyFooter && rowIndex === visibleRowCount;
               if (!isStickyHeader && !isStickyFooter) {
                 parentRow = cell.parentNode; // Check if the cell's bottom side is outside the current scrolling bounds
                 cellBottomPos = parentRow.offsetTop + cell.offsetHeight;
@@ -188,7 +191,7 @@ var useScrollCellIntoView = exports.useScrollCellIntoView = function useScrollCe
                   scrollTop: (_adjustedScrollTop2 = adjustedScrollTop) !== null && _adjustedScrollTop2 !== void 0 ? _adjustedScrollTop2 : scrollTop
                 });
               }
-            case 27:
+            case 29:
             case "end":
               return _context.stop();
           }
@@ -198,7 +201,7 @@ var useScrollCellIntoView = exports.useScrollCellIntoView = function useScrollCe
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [gridRef, outerGridRef, hasGridScrolling, headerRowHeight, footerRowHeight, visibleRowCount, hasStickyFooter]);
+  }(), [gridRef, outerGridRef, hasGridScrolling, headerRowHeight, footerRowHeight, visibleRowCount, hasStickyFooter, canDragAndDropColumns]);
   return {
     scrollCellIntoView: scrollCellIntoView
   };

package/test-env/components/drag_and_drop/draggable.js

@@ -55,6 +55,7 @@ var EuiDraggable = exports.EuiDraggable = function EuiDraggable(_ref) {
     cloneItems = _useContext.cloneItems;
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _draggable.euiDraggableStyles)(euiTheme);
+  var hasCustomDragHandle = customDragHandle !== false;
   return (0, _react2.jsx)(_dnd.Draggable, (0, _extends2.default)({
     draggableId: draggableId,
     index: index,
@@ -62,13 +63,14 @@ var EuiDraggable = exports.EuiDraggable = function EuiDraggable(_ref) {
   }, rest), function (provided, snapshot, rubric) {
     var _provided$dragHandleP, _provided$dragHandleP2;
     var isDragging = snapshot.isDragging;
+    var isFullyCustomDragHandle = customDragHandle === 'custom';
     var cssStyles = [styles.euiDraggable, cloneItems && !isDragging && styles.hasClone, isDragging && styles.isDragging, isRemovable && styles.isRemovable, styles.spacing[spacing]];
     var classes = (0, _classnames.default)('euiDraggable', className);
     var childClasses = (0, _classnames.default)('euiDraggable__item', {
       'euiDraggable__item-isDisabled': isDragDisabled
     });
     var DraggableElement = typeof children === 'function' ? children(provided, snapshot, rubric) : children;
-    var content = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", (0, _extends2.default)({}, provided.draggableProps, !customDragHandle ? provided.dragHandleProps : {}, {
+    var content = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", (0, _extends2.default)({}, provided.draggableProps, !hasCustomDragHandle ? provided.dragHandleProps : {}, {
       ref: provided.innerRef,
       "data-test-subj": dataTestSubj,
       className: classes,
@@ -78,11 +80,14 @@ var EuiDraggable = exports.EuiDraggable = function EuiDraggable(_ref) {
       // interactive element. Screen readers will cue users that this is a container
       // and has one or more elements inside that are part of a related group.
       ,
-      role: hasInteractiveChildren ? 'group' : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
+      role: isFullyCustomDragHandle ? undefined // prevent wrapper role from removing semantics of the children
+      : hasInteractiveChildren ? 'group' : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
       // If the container includes an interactive element, we remove the tabindex=0
       // because [role="group"] does not permit or warrant a tab stop
+      // additionally we remove the tabindex when the child is a fully custom handle
+      // that has its own tabindex and handle props
       ,
-      tabIndex: hasInteractiveChildren ? undefined : (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2.tabIndex
+      tabIndex: hasInteractiveChildren || isFullyCustomDragHandle ? undefined : (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2.tabIndex
     }), (0, _services.cloneElementWithCss)(DraggableElement, {
       className: (0, _classnames.default)(DraggableElement.props.className, childClasses),
       css: [_draggable.euiDraggableItemStyles.euiDraggable__item, isDragDisabled && _draggable.euiDraggableItemStyles.disabled]
@@ -100,9 +105,12 @@ EuiDraggable.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.element.isRequired, _propTypes.default.any.isRequired]).isRequired,
   className: _propTypes.default.string,
   /**
-     * Whether the `children` will provide and set up its own drag handle
+     * Whether the `children` will provide and set up its own drag handle.
+     * The `custom` value additionally removes the `role` from the draggable container.
+     * Use this if the `children` element is focusable and should keep its
+     * semantic role for accessibility purposes.
      */
-  customDragHandle: _propTypes.default.bool,
+  customDragHandle: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.oneOf(["custom"])]),
   /**
      * Whether the container has interactive children and should have `role="group"` instead of `"button"`.
      * Setting this flag ensures your drag & drop container is keyboard and screen reader accessible.

package/test-env/components/header/header.styles.js

@@ -26,23 +26,18 @@ var euiHeaderVariables = exports.euiHeaderVariables = function euiHeaderVariable
   };
 };
 var euiHeaderStyles = exports.euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
     height = _euiHeaderVariables.height,
     padding = _euiHeaderVariables.padding;
-
-  // Curated border color to fade into the shadow without looking too much like a border
-  // It adds separation between the header and flyout
-  var borderColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.emptyShade, 0.35) : (0, _services.shade)(euiTheme.border.color, 0.03);
   return {
-    euiHeader: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;", (0, _global_styling.logicalCSS)('height', height), " ", (0, _global_styling.logicalCSS)('padding-horizontal', padding), " ", (0, _mixins.euiShadowSmall)(euiThemeContext), ";;label:euiHeader;"),
+    euiHeader: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;", (0, _global_styling.logicalCSS)('height', height), " ", (0, _global_styling.logicalCSS)('padding-horizontal', padding), " ", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), " ", (0, _mixins.euiShadowSmall)(euiThemeContext), ";;label:euiHeader;"),
     // Position
     static: /*#__PURE__*/(0, _react.css)("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
     fixed: /*#__PURE__*/(0, _react.css)("z-index:", euiTheme.levels.header, ";position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('horizontal', 0), ";;label:fixed;"),
     // Theme
-    default: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:default;"),
-    dark: /*#__PURE__*/(0, _react.css)(euiHeaderDarkStyles(euiThemeContext, borderColor), ";label:dark;")
+    default: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";;label:default;"),
+    dark: /*#__PURE__*/(0, _react.css)(euiHeaderDarkStyles(euiThemeContext), ";label:dark;")
   };
 };
 
@@ -56,12 +51,11 @@ var euiHeaderStyles = exports.euiHeaderStyles = function euiHeaderStyles(euiThem
  * by Kibana in the near future, at which point we can remove this
  */
 
-var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext, defaultBorderColor) {
+var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.5) : (0, _services.shade)(euiTheme.colors.darkestShade, 0.28);
-  var borderColor = colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
-  return "\n    background-color: ".concat(backgroundColor, ";\n    ").concat((0, _global_styling.logicalCSS)('border-bottom-color', borderColor), "\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat((0, _services.shade)(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group {\n        border-color: ").concat((0, _services.transparentize)(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat((0, _services.makeHighContrastColor)(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat((0, _services.shade)(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group {\n        border-color: ").concat((0, _services.transparentize)(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat((0, _services.makeHighContrastColor)(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
 };

package/test-env/components/page_template/inner/page_inner.styles.js

@@ -7,7 +7,6 @@ exports.euiPageInnerStyles = void 0;
 var _react = require("@emotion/react");
 var _mixins = require("../../../themes/amsterdam/global_styling/mixins");
 var _global_styling = require("../../../global_styling");
-var _services = require("../../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,13 +16,13 @@ var _services = require("../../../services");
  */
 
 var euiPageInnerStyles = exports.euiPageInnerStyles = function euiPageInnerStyles(euiThemeContext) {
-  var borderColor = (0, _services.transparentize)(euiThemeContext.euiTheme.colors.lightShade, 0.7);
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiPageInner: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;flex:1 1 100%;", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSS)('min-width', '0'), ";;label:euiPageInner;"),
     panelled: /*#__PURE__*/(0, _react.css)("background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'plain'), ";", (0, _mixins.euiShadow)(euiThemeContext, 'm'), ";;label:panelled;"),
     border: {
-      top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:top;"),
-      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:left;")
+      top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";;label:top;"),
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), ";;label:left;")
     }
   };
 };

package/test-env/components/tabs/tab.js

@@ -75,7 +75,7 @@ var EuiTab = exports.EuiTab = function EuiTab(_ref) {
       target: target,
       rel: secureRel
     }, rest), prependNode, (0, _react2.jsx)("span", {
-      className: "euiTab__content",
+      className: "euiTab__content eui-textTruncate",
       css: cssTabContentStyles
     }, children), appendNode);
   }