@elastic/eui 113.1.0 → 113.2.0

package/lib/components/datagrid/body/header/data_grid_header_cell.js

@@ -112,7 +112,7 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
       return (0, _react2.jsx)(_react.default.Fragment, null, !canDragAndDropColumns && columnResizer, canDragAndDropColumns && (0, _react2.jsx)("span", {
         className: "euiDataGridHeaderCell__draggableIcon"
       }, (0, _react2.jsx)(_icon.EuiIcon, {
-        type: "grabOmnidirectional",
+        type: "drag",
         size: "s",
         css: [styles.euiDataGridHeaderCell__actions.action, styles.euiDataGridHeaderCell__actions.start, ";label:EuiDataGridHeaderCell;"]
       })), (0, _react2.jsx)("div", {

package/lib/components/datagrid/controls/column_selector.js

@@ -158,7 +158,7 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
       panelPaddingSize: "none",
       button: (0, _react2.jsx)(_data_grid_toolbar_control.EuiDataGridToolbarControl, {
         badgeContent: numberOfHiddenFields > 0 ? "".concat(orderedVisibleColumns.length, "/").concat(sortedColumns.length) : sortedColumns.length,
-        iconType: "tableDensityNormal",
+        iconType: "table",
         "data-test-subj": "dataGridColumnSelectorButton",
         onClick: function onClick() {
           return setIsOpen(!isOpen);
@@ -243,7 +243,7 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
         }, provided.dragHandleProps, {
           "aria-label": "".concat(label, " ").concat(dragHandleAriaLabel)
         }), (0, _react2.jsx)(_icon.EuiIcon, {
-          type: "grab",
+          type: "dragVertical",
           color: "subdued"
         }))));
       });

package/lib/components/datagrid/controls/column_sorting.js

@@ -202,7 +202,7 @@ var DataGridSortingControl = exports.DataGridSortingControl = /*#__PURE__*/(0, _
     button: (0, _react2.jsx)(_button.EuiButtonEmpty, {
       size: "xs",
       flush: "left",
-      iconType: "arrowDown",
+      iconType: "chevronSingleDown",
       iconSide: "right",
       "data-test-subj": "dataGridColumnSortingSelectionButton",
       onClick: function onClick() {

package/lib/components/datagrid/controls/column_sorting_draggable.js

@@ -176,7 +176,7 @@ var EuiDataGridColumnSortingDraggable = exports.EuiDataGridColumnSortingDraggabl
     }, provided.dragHandleProps, {
       "aria-label": dragHandleAriaLabel
     }), (0, _react2.jsx)(_icon.EuiIcon, {
-      type: "grab",
+      type: "dragVertical",
       color: "subdued"
     })));
   });

package/lib/components/datagrid/data_grid.a11y.js

@@ -149,7 +149,7 @@ var DataGrid = function DataGrid() {
       },
       sortTextAsc: 'Alma to Debian',
       sortTextDesc: 'Debian to Alma',
-      icon: 'starFilled',
+      icon: 'starFill',
       color: '#800080'
     }]
   });

package/lib/components/datagrid/data_grid.stories.utils.js

@@ -116,7 +116,7 @@ var columns = [{
       onClick: function onClick() {
         return alert(value);
       },
-      iconType: "email",
+      iconType: "mail",
       "aria-label": "Send email to ".concat(value)
     }, "Send email");
   }]
@@ -132,7 +132,7 @@ var columns = [{
     additional: [{
       label: 'Custom action',
       onClick: function onClick() {},
-      iconType: 'cheer',
+      iconType: 'popper',
       size: 'xs',
       color: 'text'
     }]
@@ -210,7 +210,7 @@ var defaultStorybookArgs = exports.defaultStorybookArgs = {
         iconType: "indexEdit",
         "aria-label": "Edit row"
       }), (0, _react2.jsx)(_button.EuiButtonIcon, {
-        iconType: "boxesHorizontal",
+        iconType: "boxesVertical",
         "aria-label": "Open actions popover"
       }));
     }

package/lib/components/datagrid/utils/data_grid_schema.js

@@ -79,7 +79,7 @@ var schemaDetectors = exports.schemaDetectors = [{
     if (aValue > bValue) return direction === 'asc' ? 1 : -1;
     return 0;
   },
-  icon: 'currency',
+  icon: 'money',
   color: 'euiColorVis0',
   sortTextAsc: (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiDataGridSchema.currencySortTextAsc",

package/lib/components/date_picker/auto_refresh/auto_refresh.js

@@ -70,7 +70,7 @@ var EuiAutoRefresh = exports.EuiAutoRefresh = function EuiAutoRefresh(_ref) {
         className: "euiFormControlLayout__prepend",
         element: "button",
         label: (0, _react2.jsx)("strong", null, autoRefeshLabel),
-        iconLeft: "timeRefresh",
+        iconLeft: "refreshTime",
         isDisabled: isDisabled,
         onClick: function onClick() {
           return setIsPopoverOpen(function (isOpen) {
@@ -159,7 +159,7 @@ var EuiAutoRefreshButton = exports.EuiAutoRefreshButton = function EuiAutoRefres
       className: classes,
       size: size,
       color: color,
-      iconType: "timeRefresh",
+      iconType: "refreshTime",
       title: isPaused ? autoRefeshLabelOff : autoRefeshLabelOn,
       isDisabled: isDisabled
     }, rest), (0, _pretty_interval.usePrettyInterval)(Boolean(isPaused), refreshInterval, {

package/lib/components/date_picker/react-datepicker/src/month_dropdown.js

@@ -113,7 +113,7 @@ var MonthDropdown = exports.default = /*#__PURE__*/function (_React$Component) {
       }, (0, _react2.jsx)("span", {
         className: "react-datepicker__month-read-view--selected-month"
       }, monthNames[_this.props.month]), (0, _react2.jsx)(_icon.EuiIcon, {
-        type: "arrowDown",
+        type: "chevronSingleDown",
         size: "s",
         color: "subdued",
         className: "react-datepicker__month-read-view--down-arrow"

package/lib/components/date_picker/react-datepicker/src/month_year_dropdown.js

@@ -126,7 +126,7 @@ var MonthYearDropdown = exports.default = /*#__PURE__*/function (_React$Componen
       }, (0, _react2.jsx)("span", {
         className: "react-datepicker__month-year-read-view--selected-month-year"
       }, yearMonth), (0, _react2.jsx)(_icon.EuiIcon, {
-        type: "arrowDown",
+        type: "chevronSingleDown",
         size: "s",
         color: "subdued",
         className: "react-datepicker__month-year-read-view--down-arrow"

package/lib/components/date_picker/react-datepicker/src/year_dropdown.js

@@ -124,7 +124,7 @@ var YearDropdown = exports.default = /*#__PURE__*/function (_React$Component) {
       }, (0, _react2.jsx)("span", {
         className: "react-datepicker__year-read-view--selected-year"
       }, _this.props.year), (0, _react2.jsx)(_icon.EuiIcon, {
-        type: "arrowDown",
+        type: "chevronSingleDown",
         size: "s",
         color: "subdued",
         className: "react-datepicker__year-read-view--down-arrow"

package/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select.js

@@ -195,7 +195,7 @@ var EuiQuickSelect = exports.EuiQuickSelect = /*#__PURE__*/function (_Component)
           disableScreenReaderOutput: true
         }, (0, _react2.jsx)(_button.EuiButtonIcon, {
           "aria-label": previousLabel,
-          iconType: "arrowLeft",
+          iconType: "chevronSingleLeft",
           onClick: _this2.stepBackward
         }));
       })), (0, _react2.jsx)(_flex.EuiFlexItem, {
@@ -209,7 +209,7 @@ var EuiQuickSelect = exports.EuiQuickSelect = /*#__PURE__*/function (_Component)
           disableScreenReaderOutput: true
         }, (0, _react2.jsx)(_button.EuiButtonIcon, {
           "aria-label": nextLabel,
-          iconType: "arrowRight",
+          iconType: "chevronSingleRight",
           onClick: _this2.stepForward
         }));
       }))), (0, _react2.jsx)(_flex.EuiFlexGroup, {

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

@@ -87,7 +87,7 @@ var EuiQuickSelectPopover = exports.EuiQuickSelectPopover = function EuiQuickSel
   var quickSelectButton = (0, _react2.jsx)(_form.EuiFormPrepend, _extends({
     element: "button",
     iconLeft: "calendar",
-    iconRight: "arrowDown",
+    iconRight: "chevronSingleDown",
     isDisabled: props.isDisabled,
     onClick: quickSelectButtonOnClick,
     "aria-label": buttonlabel,

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

@@ -101,7 +101,7 @@ var EuiTimeWindowButtons = exports.EuiTimeWindowButtons = function EuiTimeWindow
     toolTipContent: !isDisabled && previousTooltipContent,
     color: buttonColor,
     size: buttonSize,
-    iconType: "arrowLeft",
+    iconType: "chevronSingleLeft",
     iconSize: iconSize,
     isIconOnly: true,
     isDisabled: isWindowDurationZero || isDisabled,
@@ -117,7 +117,7 @@ var EuiTimeWindowButtons = exports.EuiTimeWindowButtons = function EuiTimeWindow
     },
     color: buttonColor,
     size: buttonSize,
-    iconType: "magnifyWithPlus",
+    iconType: "magnifyPlus",
     iconSize: iconSize,
     isIconOnly: true,
     isDisabled: isWindowDurationZero || isDisabled,
@@ -133,7 +133,7 @@ var EuiTimeWindowButtons = exports.EuiTimeWindowButtons = function EuiTimeWindow
     },
     color: buttonColor,
     size: buttonSize,
-    iconType: "magnifyWithMinus",
+    iconType: "magnifyMinus",
     iconSize: iconSize,
     isIconOnly: true,
     isDisabled: isDisabled,
@@ -146,7 +146,7 @@ var EuiTimeWindowButtons = exports.EuiTimeWindowButtons = function EuiTimeWindow
     toolTipContent: !isDisabled && nextTooltipContent,
     color: buttonColor,
     size: buttonSize,
-    iconType: "arrowRight",
+    iconType: "chevronSingleRight",
     iconSize: iconSize,
     isIconOnly: true,
     isDisabled: isWindowDurationZero || isDisabled,

package/lib/components/filter_group/filter_button.js

@@ -74,7 +74,7 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
 
   // assumption about type of usage based on icon usage
   // requires manual override to apply correct aria attributes for more custom usages
-  var isCollapsible = !isToggle && iconType === 'arrowDown';
+  var isCollapsible = !isToggle && iconType === 'chevronSingleDown';
   var isExpanded = isCollapsible && (isSelected !== null && isSelected !== void 0 ? isSelected : hasActiveFilters);
   var styles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonStyles);
   var focusColorStyles = (0, _services.useEuiMemoizedStyles)(_button_group_button2._compressedButtonFocusColors);
@@ -211,7 +211,7 @@ EuiFilterButton.propTypes = {
      * Applies a visual state to the button.
      * Automatically applies `aria-pressed` when used with `isToggle={true}`.
      * Otherwise applies `aria-expanded` when used with `isToggle={false}` and
-     * `iconType="arrowDown"` as trigger button for e.g. a popover.
+     * `iconType="chevronSingleDown"` as trigger button for e.g. a popover.
      */
   isSelected: _propTypes.default.bool,
   /**

package/lib/components/filter_group/filter_group.a11y.js

@@ -175,7 +175,7 @@ describe('EuiFilterGroup multiselect example', function () {
       items = _useState16[0],
       setItems = _useState16[1];
     var button = (0, _react2.jsx)(_index.EuiFilterButton, {
-      iconType: "arrowDown",
+      iconType: "chevronSingleDown",
       onClick: onButtonClick,
       isSelected: isPopoverOpen,
       numFilters: items.filter(function (item) {

package/lib/components/flyout/_flyout_overlay.js

@@ -38,11 +38,14 @@ var getEuiFlyoutOverlayStyles = function getEuiFlyoutOverlayStyles(zIndex) {
  * @internal
  */
 var EuiFlyoutOverlay = exports.EuiFlyoutOverlay = function EuiFlyoutOverlay(_ref) {
+  var _maskProps$headerZind;
   var children = _ref.children,
     isPushed = _ref.isPushed,
     maskProps = _ref.maskProps,
     hasOverlayMask = _ref.hasOverlayMask,
-    maskZIndex = _ref.maskZIndex;
+    maskZIndex = _ref.maskZIndex,
+    _ref$headerZindexLoca = _ref.headerZindexLocation,
+    headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'below' : _ref$headerZindexLoca;
   var styles = (0, _react.useMemo)(function () {
     return getEuiFlyoutOverlayStyles(maskZIndex);
   }, [maskZIndex]);
@@ -52,7 +55,7 @@ var EuiFlyoutOverlay = exports.EuiFlyoutOverlay = function EuiFlyoutOverlay(_ref
   }
   var classes = (0, _css.cx)(maskProps === null || maskProps === void 0 ? void 0 : maskProps.className, styles);
   return (0, _react2.jsx)(_react.default.Fragment, null, hasOverlayMask && (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, _extends({
-    headerZindexLocation: "below"
+    headerZindexLocation: (_maskProps$headerZind = maskProps === null || maskProps === void 0 ? void 0 : maskProps.headerZindexLocation) !== null && _maskProps$headerZind !== void 0 ? _maskProps$headerZind : headerZindexLocation
   }, maskProps, {
     className: classes
   })), content);