@elastic/eui 91.0.0 → 91.1.0

package/dist/eui_theme_dark.css

@@ -2401,7 +2401,7 @@ The following files still use the Sass version:
 .euiDataGridHeader {
   display: -webkit-flex;
   display: flex;
-  z-index: 3;
+  z-index: 999;
   background: #1D1E24;
   position: -webkit-sticky;
   position: sticky;
@@ -2425,12 +2425,6 @@ The following files still use the Sass version:
   display: -webkit-flex;
   display: flex;
 }
-.euiDataGridHeaderCell.euiDataGridHeaderCell--numeric {
-  text-align: right;
-}
-.euiDataGridHeaderCell.euiDataGridHeaderCell--currency {
-  text-align: right;
-}
 .euiDataGridHeaderCell:focus {
   outline: none;
   border-top: none;
@@ -2443,8 +2437,8 @@ The following files still use the Sass version:
   position: absolute;
   top: 0;
   left: 0;
-  border: 2px solid #36A2EF;
-  border-radius: 4px;
+  border: 2px solid var(--euiDataGridCellOutlineColor, #36A2EF);
+  border-radius: 3px;
   z-index: 2;
   pointer-events: none;
 }
@@ -2460,50 +2454,57 @@ The following files still use the Sass version:
   position: absolute;
   top: 0;
   left: 0;
-  border: 2px solid #36A2EF;
-  border-radius: 4px;
+  border: 2px solid var(--euiDataGridCellOutlineColor, #36A2EF);
+  border-radius: 3px;
   z-index: 2;
   pointer-events: none;
 }
-.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__sortingArrow {
-  margin-right: 4px;
-}
 .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__button {
-  -webkit-flex: 0 0 auto;
-          flex: 0 0 auto;
   position: relative;
-  -webkit-align-items: center;
-          align-items: center;
   display: -webkit-flex;
   display: flex;
+  -webkit-align-items: center;
+          align-items: center;
+  gap: 4px;
   width: 100%;
   font-weight: 700;
   outline: none;
 }
-.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__button .euiDataGridHeaderCell__sortingArrow {
-  -webkit-flex-grow: 0;
-          flex-grow: 0;
-}
 .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__content {
   max-width: 100%;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
+}
+.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__sortingArrow {
+  -webkit-flex: 0 0 auto;
+          flex: 0 0 auto;
+}
+.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__icon {
+  -webkit-flex: 0 0 auto;
+          flex: 0 0 auto;
+  margin-left: auto;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  height: 16px;
   overflow: hidden;
-  white-space: nowrap;
-  text-align: left;
+  width: 0;
+  opacity: 0;
+  transition: width 150ms ease-in, opacity 350ms ease-in;
+}
+.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn):focus-within .euiDataGridHeaderCell__icon, .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn):hover .euiDataGridHeaderCell__icon,
+.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiPopover-isOpen .euiDataGridHeaderCell__icon {
+  width: 16px;
+  opacity: 1;
+}
+.euiDataGridHeaderCell.euiDataGridHeaderCell--numeric .euiDataGridHeaderCell__content, .euiDataGridHeaderCell.euiDataGridHeaderCell--currency .euiDataGridHeaderCell__content {
   -webkit-flex-grow: 1;
           flex-grow: 1;
-  -webkit-align-self: baseline;
-          align-self: baseline;
-}
-.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__icon {
-  -webkit-flex-grow: 0;
-          flex-grow: 0;
-  -webkit-flex-basis: auto;
-          flex-basis: auto;
-  width: auto;
-  padding-left: 4px;
+  text-align: right;
 }
 
 .euiDataGridHeader__action--selected {
@@ -2666,15 +2667,23 @@ The following files still use the Sass version:
 }
 
 .euiDataGridRowCell {
+  position: relative;
+  border-right: solid 1px #24272e;
+  border-bottom: 1px solid #343741;
+  --euiDataGridCellOutlineColor: #36A2EF;
+}
+.euiDataGridRowCell .euiDataGridRowCell__content {
   font-size: 14px;
   font-size: 1rem;
   line-height: 1.7142857143rem;
   padding: 6px;
-  border-right: solid 1px #24272e;
-  border-bottom: 1px solid #343741;
+  height: 100%;
   overflow: hidden;
 }
-.euiDataGridRowCell > * {
+.euiDataGridRowCell .euiDataGridRowCell__content--autoHeight {
+  height: auto;
+}
+.euiDataGridRowCell > [data-focus-lock-disabled] {
   height: 100%;
 }
 .euiDataGridRowCell.euiDataGridRowCell--firstColumn {
@@ -2683,11 +2692,10 @@ The following files still use the Sass version:
 .euiDataGridRowCell.euiDataGridRowCell--lastColumn {
   border-right-color: #343741;
 }
-.euiDataGridRowCell:focus {
-  position: relative;
+.euiDataGridRowCell:hover, .euiDataGridRowCell:focus, .euiDataGridRowCell.euiDataGridRowCell--open {
   outline: none;
 }
-.euiDataGridRowCell:focus::after {
+.euiDataGridRowCell:hover::after, .euiDataGridRowCell:focus::after, .euiDataGridRowCell.euiDataGridRowCell--open::after {
   content: "";
   display: block;
   width: 100%;
@@ -2695,30 +2703,29 @@ The following files still use the Sass version:
   position: absolute;
   top: 0;
   left: 0;
-  border: 2px solid #36A2EF;
-  border-radius: 4px;
+  border: 2px solid var(--euiDataGridCellOutlineColor, #36A2EF);
+  border-radius: 3px;
   z-index: 2;
   pointer-events: none;
 }
-.euiDataGridRowCell:hover .euiDataGridRowCell__actionButtonIcon {
+.euiDataGridRowCell:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) {
+  --euiDataGridCellOutlineColor: #98A2B3;
+}
+.euiDataGridRowCell:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) .euiDataGridRowCell__actions {
+  -webkit-animation-delay: 350ms;
+          animation-delay: 350ms;
+}
+.euiDataGridRowCell:hover .euiDataGridRowCell__actions, .euiDataGridRowCell:focus .euiDataGridRowCell__actions, .euiDataGridRowCell:focus-within .euiDataGridRowCell__actions, .euiDataGridRowCell.euiDataGridRowCell--open .euiDataGridRowCell__actions, .euiDataGridRowCell[data-keyboard-closing] .euiDataGridRowCell__actions {
   -webkit-animation-duration: 90ms;
           animation-duration: 90ms;
   -webkit-animation-name: euiDataGridCellActionsSlideIn;
           animation-name: euiDataGridCellActionsSlideIn;
   -webkit-animation-iteration-count: 1;
           animation-iteration-count: 1;
-  -webkit-animation-delay: 250ms;
-          animation-delay: 250ms;
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
 }
-.euiDataGridRowCell:focus .euiDataGridRowCell__actionButtonIcon, .euiDataGridRowCell:focus-within .euiDataGridRowCell__actionButtonIcon, .euiDataGridRowCell.euiDataGridRowCell--open .euiDataGridRowCell__actionButtonIcon {
-  -webkit-animation: none;
-          animation: none;
-  margin-left: 6px;
-  width: 12px;
-}
-.euiDataGridRowCell:not(:hover):not(:focus):not(.euiDataGridRowCell--open) .euiDataGridRowCell__actionButtonIcon {
+.euiDataGridRowCell:not(:hover):not(:focus):not(.euiDataGridRowCell--open):not([data-keyboard-closing]) .euiDataGridRowCell__actions {
   display: none;
 }
 .euiDataGridRowCell.euiDataGridRowCell--numeric {
@@ -2741,12 +2748,14 @@ The following files still use the Sass version:
   scrollbar-color: rgba(152, 162, 179, 0.5) transparent;
   scrollbar-width: thin;
   overflow: auto;
-  max-width: 400px !important;
-  max-height: 400px !important;
   z-index: 1000 !important;
   -webkit-filter: none;
           filter: none;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125);
+  -webkit-animation-duration: 250ms;
+          animation-duration: 250ms;
+  -webkit-animation-name: euiDataGridCellPopover;
+          animation-name: euiDataGridCellPopover;
 }
 .euiDataGridRowCell__popover::-webkit-scrollbar {
   width: 16px;
@@ -2762,66 +2771,93 @@ The following files still use the Sass version:
   background-color: transparent;
 }
 
-.euiDataGridRowCell__contentWrapper {
-  position: relative;
-  height: 100%;
-}
-
-.euiDataGridRowCell__defaultHeight {
+.euiDataGridRowCell--controlColumn .euiDataGridRowCell__content {
+  max-height: 100%;
+  height: auto;
   display: -webkit-flex;
   display: flex;
-  -webkit-align-items: baseline;
-          align-items: baseline;
-  max-width: 100%;
-}
-.euiDataGridRowCell__defaultHeight .euiDataGridRowCell__content {
-  -webkit-flex-grow: 1;
-          flex-grow: 1;
-}
-.euiDataGridRowCell__defaultHeight .euiDataGridRowCell__actions {
-  -webkit-flex-grow: 0;
-          flex-grow: 0;
-}
-.euiDataGridRowCell--controlColumn .euiDataGridRowCell__defaultHeight {
-  height: 100%;
   -webkit-align-items: center;
           align-items: center;
 }
 
-.euiDataGridRowCell__numericalHeight [data-euiportal],
-.euiDataGridRowCell__numericalHeight .euiPopover {
-  height: 100%;
+.euiDataGridRowCell__actions,
+.euiDataGridRowCell__actions + [data-euiportal] > .euiPopover {
+  position: absolute;
+  bottom: 100%;
+}
+.euiDataGridRowCell--alignLeft .euiDataGridRowCell__actions,
+.euiDataGridRowCell--alignLeft .euiDataGridRowCell__actions + [data-euiportal] > .euiPopover {
+  left: 0;
+}
+.euiDataGridRowCell--alignRight .euiDataGridRowCell__actions,
+.euiDataGridRowCell--alignRight .euiDataGridRowCell__actions + [data-euiportal] > .euiPopover {
+  right: 0;
 }
 
 .euiDataGridRowCell__actions {
+  z-index: 998;
+  margin-bottom: -1px;
   display: -webkit-flex;
   display: flex;
+  gap: 2px;
+  padding-inline: 2px;
+  background-color: var(--euiDataGridCellOutlineColor);
+  color: #1D1E24;
+  border: 1px solid var(--euiDataGridCellOutlineColor);
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  -webkit-transform: scaleY(0);
+          transform: scaleY(0);
+  -webkit-transform-origin: bottom;
+          transform-origin: bottom;
+}
+.euiDataGridRowCell[data-gridcell-visible-row-index="0"] > .euiDataGridRowCell__actions {
+  z-index: 999;
+}
+.euiDataGridRowCell--alignLeft .euiDataGridRowCell__actions {
+  border-bottom-right-radius: 3px;
+}
+.euiDataGridRowCell--alignRight .euiDataGridRowCell__actions {
+  border-bottom-left-radius: 3px;
 }
-.euiDataGridRowCell__actions--overlay {
+.euiDataGridRowCell__actions::after {
+  content: "";
   position: absolute;
-  right: 0;
-  top: 0;
-  padding: 6px 0;
-  background-color: #1D1E24;
+  top: 100%;
+  height: 2px;
+  width: 2px;
+  background-color: var(--euiDataGridCellOutlineColor);
+}
+.euiDataGridRowCell--alignLeft .euiDataGridRowCell__actions::after {
+  left: -1px;
+}
+.euiDataGridRowCell--alignRight .euiDataGridRowCell__actions::after {
+  right: -1px;
 }
 
 .euiDataGridRowCell__actionButtonIcon {
-  height: 12px;
-  border-radius: 3px;
-  width: 0;
-  overflow: hidden;
-  transition: none;
-  box-shadow: none !important;
-  border: none;
+  height: 20px;
+  width: 16px;
+  border-radius: 0;
+  /* Force all cell action buttons to match EUI colors */
+  /* Manually increase the size of the expand cell icon - it's a bit small by default */
+}
+.euiDataGridRowCell__actionButtonIcon,
+.euiDataGridRowCell__actionButtonIcon svg {
+  background-color: transparent !important;
+  color: currentColor !important;
+  fill: currentColor !important;
+}
+.euiDataGridRowCell__actionButtonIcon.euiDataGridRowCell__expandCell .euiIcon {
+  width: 120%;
+  height: 100%;
 }
 
-.euiDataGrid--stripes .euiDataGridRow--striped,
-.euiDataGrid--stripes .euiDataGridRow--striped .euiDataGridRowCell__actions--overlay {
+.euiDataGrid--stripes .euiDataGridRow--striped {
   background-color: #25262E;
 }
 
-.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover,
-.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__actions--overlay {
+.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover {
   background-color: #2E2D25;
 }
 
@@ -2834,53 +2870,61 @@ The following files still use the Sass version:
   border-left-color: transparent;
 }
 
-.euiDataGrid--fontSizeSmall .euiDataGridRowCell {
+.euiDataGrid--fontSizeSmall .euiDataGridRowCell .euiDataGridRowCell__content {
   font-size: 12px;
   font-size: 0.8571428571rem;
   line-height: 1.1428571429rem;
 }
 
-.euiDataGrid--fontSizeLarge .euiDataGridRowCell {
+.euiDataGrid--fontSizeLarge .euiDataGridRowCell .euiDataGridRowCell__content {
   font-size: 14px;
   font-size: 1rem;
   line-height: 1.7142857143rem;
 }
 
-.euiDataGrid--paddingSmall .euiDataGridRowCell {
+.euiDataGrid--paddingSmall .euiDataGridRowCell .euiDataGridRowCell__content {
   padding: 4px;
 }
 
-.euiDataGrid--paddingLarge .euiDataGridRowCell {
+.euiDataGrid--paddingLarge .euiDataGridRowCell .euiDataGridRowCell__content {
   padding: 8px;
 }
 
-.euiDataGrid--fontSizeSmall.euiDataGrid--paddingSmall .euiDataGridRowCell__actions--overlay {
-  padding: 2px 0;
-}
-.euiDataGrid--fontSizeSmall.euiDataGrid--paddingSmall .euiDataGridRowCell__defaultHeight .euiDataGridRowCell__actions {
-  -webkit-transform: translateY(1px);
-          transform: translateY(1px);
-}
-
 @-webkit-keyframes euiDataGridCellActionsSlideIn {
   from {
-    margin-left: 0;
-    width: 0;
+    -webkit-transform: scaleY(0);
+            transform: scaleY(0);
   }
   to {
-    margin-left: 6px;
-    width: 12px;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
   }
 }
 
 @keyframes euiDataGridCellActionsSlideIn {
   from {
-    margin-left: 0;
-    width: 0;
+    -webkit-transform: scaleY(0);
+            transform: scaleY(0);
+  }
+  to {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+}
+@-webkit-keyframes euiDataGridCellPopover {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes euiDataGridCellPopover {
+  from {
+    opacity: 0;
   }
   to {
-    margin-left: 6px;
-    width: 12px;
+    opacity: 1;
   }
 }
 .euiDataGrid__controls {
@@ -2911,11 +2955,6 @@ The following files still use the Sass version:
   margin-left: 2px;
 }
 
-.euiDataGrid__controlBtn--active,
-.euiDataGrid__controlBtn--active:focus {
-  font-weight: 600;
-}
-
 .euiDataGrid--bordersNone .euiDataGrid__controls {
   border: none;
   background: #1D1E24;
@@ -5244,7 +5283,7 @@ The following files still use the Sass version:
 }
 
 .euiFormRow--hasEmptyLabelSpace {
-  margin-top: 18px; /* 2 */
+  margin-top: 20px; /* 2 */
   min-height: 40px;
   padding-bottom: 0;
   -webkit-justify-content: center;
@@ -7189,15 +7228,13 @@ The following files still use the Sass version:
   transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
   transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
 }
-.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide,
-.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled,
-.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled:hover,
-.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled:focus, .euiTableRow:hover .euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled {
+.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide {
   -webkit-filter: grayscale(0%);
           filter: grayscale(0%);
   opacity: 0;
 }
-.euiTableRow-hasActions:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem:not(:disabled), .euiTableRow-hasActions:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem:not(:disabled):hover, .euiTableRow-hasActions:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem:not(:disabled):focus {
+.euiTableRow-hasActions:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem,
+.euiTableRow-hasActions .euiTableCellContent--showOnHover:focus-within .euiTableCellContent__hoverItem {
   opacity: 1;
   -webkit-filter: grayscale(0%);
           filter: grayscale(0%);
@@ -7390,6 +7427,21 @@ The following files still use the Sass version:
   .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander .euiTableCellContent .euiLink, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions .euiTableCellContent .euiLink {
     padding: 4px;
   }
+  .euiTable.euiTable--responsive .euiTableRow:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child {
+    width: 100%;
+  }
+  .euiTable.euiTable--responsive .euiTableRow:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: rgba(83, 89, 102, 0.1);
+  }
+  .euiTable.euiTable--responsive .euiTableRow:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child .euiTableCellContent {
+    position: relative;
+    top: 4px;
+  }
   .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions.euiTableRow-isExpandable .euiTableRowCell--isExpander {
     top: auto;
     bottom: 16px;
@@ -7588,6 +7640,21 @@ The following files still use the Sass version:
   .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander .euiTableCellContent .euiLink, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions .euiTableCellContent .euiLink {
     padding: 4px;
   }
+  .euiTable.euiTable--responsive .euiTableRow:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child {
+    width: 100%;
+  }
+  .euiTable.euiTable--responsive .euiTableRow:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: rgba(83, 89, 102, 0.1);
+  }
+  .euiTable.euiTable--responsive .euiTableRow:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child .euiTableCellContent {
+    position: relative;
+    top: 4px;
+  }
   .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions.euiTableRow-isExpandable .euiTableRowCell--isExpander {
     top: auto;
     bottom: 16px;