@elastic/eui 76.0.2 → 76.2.0

package/optimize/es/components/selectable/selectable_list/selectable_list.js

@@ -94,7 +94,7 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }
 
         if (typeof ariaDescribedby === 'string') {
-          ref.setAttribute('aria-labelledby', ariaDescribedby);
+          ref.setAttribute('aria-describedby', ariaDescribedby);
         }
       }
     });

package/optimize/es/components/suggest/suggest.js

@@ -16,8 +16,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import React, { useState, useCallback } from 'react';
 import classNames from 'classnames';
-import { useGeneratedHtmlId } from '../../services';
-import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiIcon } from '../icon';
 import { useEuiI18n } from '../i18n';
 import { EuiInputPopover } from '../popover';
@@ -112,14 +110,11 @@ export var EuiSuggest = function EuiSuggest(_ref) {
   var searchOnChange = function searchOnChange(value) {
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
   };
-
-  var inputDescribedbyId = useGeneratedHtmlId({
-    prefix: id
-  });
   /**
    * Status
    */
 
+
   var icon = '';
   var color = '';
 
@@ -210,6 +205,7 @@ export var EuiSuggest = function EuiSuggest(_ref) {
     }
   }, [onItemClick, suggestions]);
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSelectable, {
+    selectableScreenReaderText: stateMessage,
     singleSelection: true,
     height: isVirtualized ? undefined : 'full',
     options: suggestionList,
@@ -234,7 +230,6 @@ export var EuiSuggest = function EuiSuggest(_ref) {
       onBlur: searchOnBlur,
       onInput: searchOnInput,
       onChange: searchOnChange,
-      'aria-describedby': inputDescribedbyId,
       'aria-label': ariaLabel,
       'aria-labelledby': labelId
     }, rest)
@@ -258,7 +253,5 @@ export var EuiSuggest = function EuiSuggest(_ref) {
       },
       className: "eui-yScroll"
     }, list));
-  }), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
-    id: inputDescribedbyId
-  }, stateMessage)));
+  }));
 };

package/optimize/lib/components/datagrid/body/data_grid_body.js

@@ -2,430 +2,37 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiDataGridBody = exports.DataGridWrapperRowsContext = exports.Cell = void 0;
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+exports.EuiDataGridBody = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactWindow = require("react-window");
-
-var _resize_observer = require("../../observer/resize_observer");
-
-var _data_grid_cell = require("./data_grid_cell");
-
-var _header = require("./header");
-
-var _footer = require("./footer");
-
-var _data_grid_cell_popover = require("./data_grid_cell_popover");
-
-var _data_grid_row_manager = require("./data_grid_row_manager");
-
-var _grid_height_width = require("../utils/grid_height_width");
-
-var _col_widths = require("../utils/col_widths");
-
-var _row_heights = require("../utils/row_heights");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _scrolling = require("../utils/scrolling");
+var _react = _interopRequireDefault(require("react"));
 
-var _sorting = require("../utils/sorting");
+var _data_grid_body_virtualized = require("./data_grid_body_virtualized");
 
-var _utils = require("../../../utils");
+var _data_grid_body_custom = require("./data_grid_body_custom");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "style"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var Cell = function Cell(_ref) {
-  var columnIndex = _ref.columnIndex,
-      visibleRowIndex = _ref.rowIndex,
-      style = _ref.style,
-      data = _ref.data;
-  var leadingControlColumns = data.leadingControlColumns,
-      trailingControlColumns = data.trailingControlColumns,
-      columns = data.columns,
-      visibleColCount = data.visibleColCount,
-      schema = data.schema,
-      columnWidths = data.columnWidths,
-      defaultColumnWidth = data.defaultColumnWidth,
-      renderCellValue = data.renderCellValue,
-      renderCellPopover = data.renderCellPopover,
-      interactiveCellId = data.interactiveCellId,
-      setRowHeight = data.setRowHeight,
-      schemaDetectors = data.schemaDetectors,
-      rowHeightsOptions = data.rowHeightsOptions,
-      rowHeightUtils = data.rowHeightUtils,
-      rowManager = data.rowManager,
-      pagination = data.pagination;
-  var popoverContext = (0, _react.useContext)(_data_grid_cell_popover.DataGridCellPopoverContext);
-
-  var _useContext = (0, _react.useContext)(DataGridWrapperRowsContext),
-      headerRowHeight = _useContext.headerRowHeight;
-
-  var _useContext2 = (0, _react.useContext)(_sorting.DataGridSortingContext),
-      getCorrectRowIndex = _useContext2.getCorrectRowIndex;
-
-  var cellContent;
-  var isFirstColumn = columnIndex === 0;
-  var isLastColumn = columnIndex === visibleColCount - 1;
-  var isLeadingControlColumn = columnIndex < leadingControlColumns.length;
-  var isTrailingControlColumn = columnIndex >= leadingControlColumns.length + columns.length;
-  var dataColumnIndex = columnIndex - leadingControlColumns.length;
-  var column = columns[dataColumnIndex];
-  var columnId = column === null || column === void 0 ? void 0 : column.id;
-  var transformClass = schemaDetectors.filter(function (row) {
-    return column !== null && column !== void 0 && column.schema ? (column === null || column === void 0 ? void 0 : column.schema) === row.type : columnId === row.type;
-  })[0];
-  var textTransform = transformClass === null || transformClass === void 0 ? void 0 : transformClass.textTransform;
-  var classes = (0, _classnames.default)((0, _defineProperty2.default)({
-    'euiDataGridRowCell--firstColumn': isFirstColumn,
-    'euiDataGridRowCell--lastColumn': isLastColumn,
-    'euiDataGridRowCell--controlColumn': isLeadingControlColumn || isTrailingControlColumn
-  }, "euiDataGridRowCell--".concat(textTransform), textTransform));
-  var sharedCellProps = {
-    rowIndex: getCorrectRowIndex(visibleRowIndex),
-    visibleRowIndex: visibleRowIndex,
-    colIndex: columnIndex,
-    interactiveCellId: interactiveCellId,
-    className: classes,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      top: "".concat(parseFloat(style.top) + headerRowHeight, "px")
-    }),
-    rowHeightsOptions: rowHeightsOptions,
-    rowHeightUtils: rowHeightUtils,
-    setRowHeight: isFirstColumn ? setRowHeight : undefined,
-    rowManager: rowManager,
-    popoverContext: popoverContext,
-    pagination: pagination
-  };
-
-  if (isLeadingControlColumn) {
-    var leadingColumn = leadingControlColumns[columnIndex];
-    var id = leadingColumn.id,
-        rowCellRender = leadingColumn.rowCellRender;
-    cellContent = (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, sharedCellProps, {
-      columnId: id,
-      width: leadingColumn.width,
-      renderCellValue: rowCellRender,
-      isExpandable: false
-    }));
-  } else if (isTrailingControlColumn) {
-    var columnOffset = columns.length + leadingControlColumns.length;
-    var trailingColumnIndex = columnIndex - columnOffset;
-    var trailingColumn = trailingControlColumns[trailingColumnIndex];
-    var _id = trailingColumn.id,
-        _rowCellRender = trailingColumn.rowCellRender;
-    cellContent = (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, sharedCellProps, {
-      columnId: _id,
-      width: trailingColumn.width,
-      renderCellValue: _rowCellRender,
-      isExpandable: false
-    }));
-  } else {
-    // this is a normal data cell
-    var columnType = schema[columnId] ? schema[columnId].columnType : null;
-    var isExpandable = column.isExpandable !== undefined ? column.isExpandable : true;
-    var width = columnWidths[columnId] || defaultColumnWidth;
-    cellContent = (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, sharedCellProps, {
-      columnId: columnId,
-      column: column,
-      columnType: columnType,
-      width: width || undefined,
-      renderCellValue: renderCellValue,
-      renderCellPopover: renderCellPopover,
-      interactiveCellId: interactiveCellId,
-      isExpandable: isExpandable
-    }));
-  }
-
-  return cellContent;
-}; // Context is required to pass props to react-window's innerElementType
-// @see https://github.com/bvaughn/react-window/issues/404
-
-
-exports.Cell = Cell;
-var DataGridWrapperRowsContext = /*#__PURE__*/(0, _react.createContext)({
-  headerRow: (0, _react2.jsx)("div", null),
-  headerRowHeight: 0,
-  footerRow: null
-});
-exports.DataGridWrapperRowsContext = DataGridWrapperRowsContext;
-var InnerElement = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var children = _ref2.children,
-      style = _ref2.style,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-
-  var _useContext3 = (0, _react.useContext)(DataGridWrapperRowsContext),
-      headerRowHeight = _useContext3.headerRowHeight,
-      headerRow = _useContext3.headerRow,
-      footerRow = _useContext3.footerRow;
-
-  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", (0, _extends2.default)({
-    ref: ref,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      height: style.height + headerRowHeight
-    })
-  }, rest), headerRow, children), footerRow);
-});
-InnerElement.displayName = 'EuiDataGridInnerElement';
-
-var EuiDataGridBody = function EuiDataGridBody(props) {
-  var leadingControlColumns = props.leadingControlColumns,
-      trailingControlColumns = props.trailingControlColumns,
-      columns = props.columns,
-      visibleColCount = props.visibleColCount,
-      schema = props.schema,
-      schemaDetectors = props.schemaDetectors,
-      rowCount = props.rowCount,
-      _props$visibleRows = props.visibleRows,
-      startRow = _props$visibleRows.startRow,
-      endRow = _props$visibleRows.endRow,
-      visibleRowCount = _props$visibleRows.visibleRowCount,
-      renderCellValue = props.renderCellValue,
-      renderCellPopover = props.renderCellPopover,
-      renderFooterCellValue = props.renderFooterCellValue,
-      interactiveCellId = props.interactiveCellId,
-      pagination = props.pagination,
-      headerIsInteractive = props.headerIsInteractive,
-      handleHeaderMutation = props.handleHeaderMutation,
-      setVisibleColumns = props.setVisibleColumns,
-      switchColumnPos = props.switchColumnPos,
-      onColumnResize = props.onColumnResize,
-      rowHeightsOptions = props.rowHeightsOptions,
-      virtualizationOptions = props.virtualizationOptions,
-      isFullScreen = props.isFullScreen,
-      gridStyles = props.gridStyles,
-      gridWidth = props.gridWidth,
-      gridRef = props.gridRef,
-      gridItemsRendered = props.gridItemsRendered,
-      wrapperRef = props.wrapperRef;
-  /**
-   * Grid refs & observers
-   */
-
-  var wrapperDimensions = (0, _resize_observer.useResizeObserver)(wrapperRef.current);
-  var outerGridRef = (0, _react.useRef)(null); // container that becomes scrollable
-
-  var innerGridRef = (0, _react.useRef)(null); // container sized to fit all content
-
-  /**
-   * Scroll bars
-   */
-
-  var _useScrollBars = (0, _scrolling.useScrollBars)(outerGridRef, gridStyles.border),
-      scrollBarHeight = _useScrollBars.scrollBarHeight,
-      hasVerticalScroll = _useScrollBars.hasVerticalScroll,
-      hasHorizontalScroll = _useScrollBars.hasHorizontalScroll,
-      scrollBorderOverlay = _useScrollBars.scrollBorderOverlay;
-  /**
-   * Widths
-   */
-
-
-  var virtualizeContainerWidth = (0, _grid_height_width.useVirtualizeContainerWidth)(outerGridRef.current, gridWidth, pagination === null || pagination === void 0 ? void 0 : pagination.pageSize); // compute the default column width from the container's width and count of visible columns
-
-  var defaultColumnWidth = (0, _col_widths.useDefaultColumnWidth)(virtualizeContainerWidth, leadingControlColumns, trailingControlColumns, columns);
-
-  var _useColumnWidths = (0, _col_widths.useColumnWidths)({
-    columns: columns,
-    leadingControlColumns: leadingControlColumns,
-    trailingControlColumns: trailingControlColumns,
-    defaultColumnWidth: defaultColumnWidth,
-    onColumnResize: onColumnResize
-  }),
-      columnWidths = _useColumnWidths.columnWidths,
-      setColumnWidth = _useColumnWidths.setColumnWidth,
-      getColumnWidth = _useColumnWidths.getColumnWidth;
-  /**
-   * Header & footer
-   */
+var _excluded = ["renderCustomGridBody"];
 
+var EuiDataGridBody = function EuiDataGridBody(_ref) {
+  var renderCustomGridBody = _ref.renderCustomGridBody,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  var _useDataGridHeader = (0, _header.useDataGridHeader)({
-    headerIsInteractive: headerIsInteractive,
-    handleHeaderMutation: handleHeaderMutation,
-    switchColumnPos: switchColumnPos,
-    setVisibleColumns: setVisibleColumns,
-    leadingControlColumns: leadingControlColumns,
-    trailingControlColumns: trailingControlColumns,
-    columns: columns,
-    columnWidths: columnWidths,
-    defaultColumnWidth: defaultColumnWidth,
-    setColumnWidth: setColumnWidth,
-    schema: schema,
-    schemaDetectors: schemaDetectors
-  }),
-      headerRow = _useDataGridHeader.headerRow,
-      headerRowHeight = _useDataGridHeader.headerRowHeight;
-
-  var _useDataGridFooter = (0, _footer.useDataGridFooter)({
-    renderFooterCellValue: renderFooterCellValue,
-    renderCellPopover: renderCellPopover,
-    rowIndex: visibleRowCount,
-    visibleRowIndex: visibleRowCount,
-    interactiveCellId: interactiveCellId,
-    leadingControlColumns: leadingControlColumns,
-    trailingControlColumns: trailingControlColumns,
-    columns: columns,
-    columnWidths: columnWidths,
-    defaultColumnWidth: defaultColumnWidth,
-    schema: schema
-  }),
-      footerRow = _useDataGridFooter.footerRow,
-      footerRowHeight = _useDataGridFooter.footerRowHeight;
-  /**
-   * Handle scrolling cells fully into view
-   */
-
-
-  (0, _scrolling.useScroll)({
-    gridRef: gridRef,
-    outerGridRef: outerGridRef,
-    hasGridScrolling: hasVerticalScroll || hasHorizontalScroll,
-    headerRowHeight: headerRowHeight,
-    footerRowHeight: footerRowHeight,
-    visibleRowCount: visibleRowCount,
-    hasStickyFooter: !!(renderFooterCellValue && gridStyles.stickyFooter)
-  });
-  /**
-   * Row manager
+  /*
+   * Determine whether we should use the default EuiDataGridBody
+   * + virtualization library for rendering content, or if consumers have
+   * passed their own custom renderer
    */
-
-  var rowManager = (0, _data_grid_row_manager.useRowManager)({
-    innerGridRef: innerGridRef,
-    rowClasses: gridStyles.rowClasses
-  });
-  /**
-   * Heights
-   */
-
-  var rowHeightUtils = (0, _row_heights.useRowHeightUtils)({
-    gridRef: gridRef,
-    outerGridElementRef: outerGridRef,
-    gridItemsRenderedRef: gridItemsRendered,
-    gridStyles: gridStyles,
-    columns: columns,
-    rowHeightsOptions: rowHeightsOptions
-  });
-
-  var _useDefaultRowHeight = (0, _row_heights.useDefaultRowHeight)({
-    rowHeightsOptions: rowHeightsOptions,
-    rowHeightUtils: rowHeightUtils
-  }),
-      defaultRowHeight = _useDefaultRowHeight.defaultRowHeight,
-      setRowHeight = _useDefaultRowHeight.setRowHeight,
-      getRowHeight = _useDefaultRowHeight.getRowHeight;
-
-  var unconstrainedHeight = (0, _grid_height_width.useUnconstrainedHeight)({
-    rowHeightUtils: rowHeightUtils,
-    startRow: startRow,
-    endRow: endRow,
-    rowHeightsOptions: rowHeightsOptions,
-    defaultRowHeight: defaultRowHeight,
-    headerRowHeight: headerRowHeight,
-    footerRowHeight: footerRowHeight,
-    scrollBarHeight: scrollBarHeight,
-    innerGridRef: innerGridRef
-  });
-  /**
-   * Final grid height & width
-   */
-
-  var _useFinalGridDimensio = (0, _grid_height_width.useFinalGridDimensions)({
-    unconstrainedHeight: unconstrainedHeight,
-    unconstrainedWidth: 0,
-    // unable to determine this until the container's size is known
-    wrapperDimensions: wrapperDimensions,
-    wrapperRef: wrapperRef,
-    isFullScreen: isFullScreen,
-    rowCount: rowCount
-  }),
-      finalWidth = _useFinalGridDimensio.finalWidth,
-      finalHeight = _useFinalGridDimensio.finalHeight;
-  /**
-   * Grid resets
-   */
-
-
-  (0, _react.useEffect)(function () {
-    if (gridRef.current) {
-      gridRef.current.resetAfterColumnIndex(0);
-    }
-  }, [gridRef, columns, columnWidths, defaultColumnWidth]);
-  (0, _react.useEffect)(function () {
-    if (gridRef.current && rowHeightsOptions) {
-      gridRef.current.resetAfterRowIndex(0);
-    }
-  }, [gridRef, pagination === null || pagination === void 0 ? void 0 : pagination.pageIndex, rowHeightsOptions, gridStyles === null || gridStyles === void 0 ? void 0 : gridStyles.cellPadding, gridStyles === null || gridStyles === void 0 ? void 0 : gridStyles.fontSize]);
-  (0, _react.useEffect)(function () {
-    if (gridRef.current) {
-      gridRef.current.resetAfterRowIndex(0);
-    }
-  }, [gridRef, getRowHeight]);
-  return _utils.IS_JEST_ENVIRONMENT || finalWidth > 0 ? (0, _react2.jsx)(DataGridWrapperRowsContext.Provider, {
-    value: {
-      headerRowHeight: headerRowHeight,
-      headerRow: headerRow,
-      footerRow: footerRow
-    }
-  }, (0, _react2.jsx)(_reactWindow.VariableSizeGrid, (0, _extends2.default)({}, virtualizationOptions ? virtualizationOptions : {}, {
-    ref: gridRef,
-    className: (0, _classnames.default)('euiDataGrid__virtualized', virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
-    onItemsRendered: function onItemsRendered(itemsRendered) {
-      var _virtualizationOption;
-
-      gridItemsRendered.current = itemsRendered;
-      virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : (_virtualizationOption = virtualizationOptions.onItemsRendered) === null || _virtualizationOption === void 0 ? void 0 : _virtualizationOption.call(virtualizationOptions, itemsRendered);
-    },
-    innerElementType: InnerElement,
-    outerRef: outerGridRef,
-    innerRef: innerGridRef,
-    columnCount: visibleColCount,
-    width: finalWidth,
-    columnWidth: getColumnWidth,
-    height: finalHeight,
-    rowHeight: getRowHeight,
-    itemData: {
-      schemaDetectors: schemaDetectors,
-      setRowHeight: setRowHeight,
-      leadingControlColumns: leadingControlColumns,
-      trailingControlColumns: trailingControlColumns,
-      columns: columns,
-      visibleColCount: visibleColCount,
-      schema: schema,
-      columnWidths: columnWidths,
-      defaultColumnWidth: defaultColumnWidth,
-      renderCellValue: renderCellValue,
-      renderCellPopover: renderCellPopover,
-      interactiveCellId: interactiveCellId,
-      rowHeightsOptions: rowHeightsOptions,
-      rowHeightUtils: rowHeightUtils,
-      rowManager: rowManager,
-      pagination: pagination
-    },
-    rowCount: _utils.IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0
-  }), Cell), scrollBorderOverlay) : null;
+  return renderCustomGridBody ? (0, _react2.jsx)(_data_grid_body_custom.EuiDataGridBodyCustomRender, (0, _extends2.default)({
+    renderCustomGridBody: renderCustomGridBody
+  }, props)) : (0, _react2.jsx)(_data_grid_body_virtualized.EuiDataGridBodyVirtualized, props);
 };
 
 exports.EuiDataGridBody = EuiDataGridBody;