@elastic/eui 76.0.2 → 76.2.0

package/es/components/color_picker/color_palette_picker/color_palette_picker.js

@@ -123,6 +123,11 @@ EuiColorPalettePicker.propTypes = {
   readOnly: PropTypes.bool,
   name: PropTypes.string,
 
+  /**
+       * Placeholder to display when the current selected value is empty.
+       */
+  placeholder: PropTypes.node,
+
   /**
      * Creates an input group with element(s) coming before input.
      * `string` | `ReactElement` or an array of these
@@ -134,12 +139,6 @@ EuiColorPalettePicker.propTypes = {
      * `string` | `ReactElement` or an array of these
      */
   append: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired).isRequired]),
-
-  /**
-     * Creates a semantic label ID for the `div[role="listbox"]` that's opened on click or keypress.
-     * __Generated and passed down by `EuiSuperSelect`.__
-     */
-  screenReaderId: PropTypes.string,
   valueOfSelected: PropTypes.any,
 
   /**

package/es/components/datagrid/body/data_grid_body.js

@@ -1,18 +1,10 @@
-var _excluded = ["children", "style"];
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["renderCustomGridBody"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import PropTypes from "prop-types";
-
-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) { _defineProperty(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; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -21,392 +13,23 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import classNames from 'classnames';
-import React, { forwardRef, createContext, useContext, useEffect, useRef } from 'react';
-import { VariableSizeGrid as Grid } from 'react-window';
-import { useResizeObserver } from '../../observer/resize_observer';
-import { EuiDataGridCell } from './data_grid_cell';
-import { useDataGridHeader } from './header';
-import { useDataGridFooter } from './footer';
-import { DataGridCellPopoverContext } from './data_grid_cell_popover';
-import { useRowManager } from './data_grid_row_manager';
-import { useFinalGridDimensions, useUnconstrainedHeight, useVirtualizeContainerWidth } from '../utils/grid_height_width';
-import { useDefaultColumnWidth, useColumnWidths } from '../utils/col_widths';
-import { useRowHeightUtils, useDefaultRowHeight } from '../utils/row_heights';
-import { useScrollBars, useScroll } from '../utils/scrolling';
-import { DataGridSortingContext } from '../utils/sorting';
-import { IS_JEST_ENVIRONMENT } from '../../../utils';
+import React from 'react';
+import PropTypes from "prop-types";
+import { EuiDataGridBodyVirtualized } from './data_grid_body_virtualized';
+import { EuiDataGridBodyCustomRender } from './data_grid_body_custom';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export 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 = useContext(DataGridCellPopoverContext);
-
-  var _useContext = useContext(DataGridWrapperRowsContext),
-      headerRowHeight = _useContext.headerRowHeight;
-
-  var _useContext2 = useContext(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 = classNames(_defineProperty({
-    '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 = ___EmotionJSX(EuiDataGridCell, _extends({}, 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 = ___EmotionJSX(EuiDataGridCell, _extends({}, 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 = ___EmotionJSX(EuiDataGridCell, _extends({}, 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
-
-export var DataGridWrapperRowsContext = /*#__PURE__*/createContext({
-  headerRow: ___EmotionJSX("div", null),
-  headerRowHeight: 0,
-  footerRow: null
-});
-var InnerElement = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-      style = _ref2.style,
-      rest = _objectWithoutProperties(_ref2, _excluded);
-
-  var _useContext3 = useContext(DataGridWrapperRowsContext),
-      headerRowHeight = _useContext3.headerRowHeight,
-      headerRow = _useContext3.headerRow,
-      footerRow = _useContext3.footerRow;
-
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", _extends({
-    ref: ref,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      height: style.height + headerRowHeight
-    })
-  }, rest), headerRow, children), footerRow);
-});
-InnerElement.propTypes = {
-  style: PropTypes.shape({
-    height: PropTypes.number.isRequired
-  }).isRequired
-};
-InnerElement.displayName = 'EuiDataGridInnerElement';
-export 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
+export var EuiDataGridBody = function EuiDataGridBody(_ref) {
+  var renderCustomGridBody = _ref.renderCustomGridBody,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  /*
+   * Determine whether we should use the default EuiDataGridBody
+   * + virtualization library for rendering content, or if consumers have
+   * passed their own custom renderer
    */
-
-  var wrapperDimensions = useResizeObserver(wrapperRef.current);
-  var outerGridRef = useRef(null); // container that becomes scrollable
-
-  var innerGridRef = useRef(null); // container sized to fit all content
-
-  /**
-   * Scroll bars
-   */
-
-  var _useScrollBars = useScrollBars(outerGridRef, gridStyles.border),
-      scrollBarHeight = _useScrollBars.scrollBarHeight,
-      hasVerticalScroll = _useScrollBars.hasVerticalScroll,
-      hasHorizontalScroll = _useScrollBars.hasHorizontalScroll,
-      scrollBorderOverlay = _useScrollBars.scrollBorderOverlay;
-  /**
-   * Widths
-   */
-
-
-  var virtualizeContainerWidth = 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 = useDefaultColumnWidth(virtualizeContainerWidth, leadingControlColumns, trailingControlColumns, columns);
-
-  var _useColumnWidths = useColumnWidths({
-    columns: columns,
-    leadingControlColumns: leadingControlColumns,
-    trailingControlColumns: trailingControlColumns,
-    defaultColumnWidth: defaultColumnWidth,
-    onColumnResize: onColumnResize
-  }),
-      columnWidths = _useColumnWidths.columnWidths,
-      setColumnWidth = _useColumnWidths.setColumnWidth,
-      getColumnWidth = _useColumnWidths.getColumnWidth;
-  /**
-   * Header & footer
-   */
-
-
-  var _useDataGridHeader = 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 = 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
-   */
-
-
-  useScroll({
-    gridRef: gridRef,
-    outerGridRef: outerGridRef,
-    hasGridScrolling: hasVerticalScroll || hasHorizontalScroll,
-    headerRowHeight: headerRowHeight,
-    footerRowHeight: footerRowHeight,
-    visibleRowCount: visibleRowCount,
-    hasStickyFooter: !!(renderFooterCellValue && gridStyles.stickyFooter)
-  });
-  /**
-   * Row manager
-   */
-
-  var rowManager = useRowManager({
-    innerGridRef: innerGridRef,
-    rowClasses: gridStyles.rowClasses
-  });
-  /**
-   * Heights
-   */
-
-  var rowHeightUtils = useRowHeightUtils({
-    gridRef: gridRef,
-    outerGridElementRef: outerGridRef,
-    gridItemsRenderedRef: gridItemsRendered,
-    gridStyles: gridStyles,
-    columns: columns,
-    rowHeightsOptions: rowHeightsOptions
-  });
-
-  var _useDefaultRowHeight = useDefaultRowHeight({
-    rowHeightsOptions: rowHeightsOptions,
-    rowHeightUtils: rowHeightUtils
-  }),
-      defaultRowHeight = _useDefaultRowHeight.defaultRowHeight,
-      setRowHeight = _useDefaultRowHeight.setRowHeight,
-      getRowHeight = _useDefaultRowHeight.getRowHeight;
-
-  var unconstrainedHeight = 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 = 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
-   */
-
-
-  useEffect(function () {
-    if (gridRef.current) {
-      gridRef.current.resetAfterColumnIndex(0);
-    }
-  }, [gridRef, columns, columnWidths, defaultColumnWidth]);
-  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]);
-  useEffect(function () {
-    if (gridRef.current) {
-      gridRef.current.resetAfterRowIndex(0);
-    }
-  }, [gridRef, getRowHeight]);
-  return IS_JEST_ENVIRONMENT || finalWidth > 0 ? ___EmotionJSX(DataGridWrapperRowsContext.Provider, {
-    value: {
-      headerRowHeight: headerRowHeight,
-      headerRow: headerRow,
-      footerRow: footerRow
-    }
-  }, ___EmotionJSX(Grid, _extends({}, virtualizationOptions ? virtualizationOptions : {}, {
-    ref: gridRef,
-    className: classNames('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: IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0
-  }), Cell), scrollBorderOverlay) : null;
+  return renderCustomGridBody ? ___EmotionJSX(EuiDataGridBodyCustomRender, _extends({
+    renderCustomGridBody: renderCustomGridBody
+  }, props)) : ___EmotionJSX(EuiDataGridBodyVirtualized, props);
 };
 EuiDataGridBody.propTypes = {
   leadingControlColumns: PropTypes.arrayOf(PropTypes.shape({
@@ -985,6 +608,7 @@ EuiDataGridBody.propTypes = {
   renderCellValue: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.func.isRequired]).isRequired,
   renderCellPopover: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.func.isRequired]),
   renderFooterCellValue: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.func.isRequired]),
+  renderCustomGridBody: PropTypes.func,
   interactiveCellId: PropTypes.string.isRequired,
   pagination: PropTypes.shape({
     /**