npm - @elastic/eui - Versions diffs - 116.1.0 → 116.2.0-snapshot.1780097782326 - Mend

@elastic/eui 116.1.0 → 116.2.0-snapshot.1780097782326

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (445) hide show

package/optimize/es/components/outside_click_detector/outside_click_detector.js CHANGED Viewed

@@ -1,13 +1,6 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -16,110 +9,83 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * Side Public License, v 1.
  */
-import { Children, cloneElement, Component } from 'react';
-import { htmlIdGenerator } from '../../services/accessibility';
-export var EuiOutsideClickDetector = /*#__PURE__*/function (_Component) {
-  function EuiOutsideClickDetector(props) {
-    var _this;
-    _classCallCheck(this, EuiOutsideClickDetector);
-    _this = _callSuper(this, EuiOutsideClickDetector, [props]);
-    // the id is used to identify which EuiOutsideClickDetector
-    // is the source of a click event; as the click event bubbles
-    // up and reaches the click detector's child component the
-    // id value is stamped on the event. This id is inspected
-    // in the document's click handler, and if the id doesn't
-    // exist or doesn't match this detector's id, then trigger
-    // the outsideClick callback.
-    //
-    // Taking this approach instead of checking if the event's
-    // target element exists in this component's DOM sub-tree is
-    // necessary for handling clicks originating from children
-    // rendered through React's portals (EuiPortal). The id tracking
-    // works because React guarantees the event bubbles through the
-    // virtual DOM and executes EuiClickDetector's onClick handler,
-    // stamping the id even though the event originates outside
-    // this component's reified DOM tree.
-    // We are working with the assumption that a click event is
-    // equivalent to a sequential, compound press and release of
-    // the pointing device (mouse, finger, stylus, etc.).
-    // A click event's target can be imprecise, as the value will be
-    // the closest common ancestor of the press (mousedown, touchstart)
-    // and release (mouseup, touchend) events (often <body />) if
-    // the the target of each event differs.
-    // We need the actual event targets to make the correct decisions
-    // about user intention. So, consider the down/start and up/end
-    // items below as the deconstruction of a click event.
-    _defineProperty(_this, "id", void 0);
-    _defineProperty(_this, "capturedDownIds", void 0);
-    _defineProperty(_this, "onClickOutside", function (e) {
-      var _this$props = _this.props,
-        isDisabled = _this$props.isDisabled,
-        onOutsideClick = _this$props.onOutsideClick;
+import { Children, cloneElement, useRef, useEffect, forwardRef } from 'react';
+import { useGeneratedHtmlId } from '../../services/accessibility';
+export var EuiOutsideClickDetector = /*#__PURE__*/forwardRef(function (props, ref) {
+  // the id is used to identify which EuiOutsideClickDetector
+  // is the source of a click event; as the click event bubbles
+  // up and reaches the click detector's child component the
+  // id value is stamped on the event. This id is inspected
+  // in the document's click handler, and if the id doesn't
+  // exist or doesn't match this detector's id, then trigger
+  // the outsideClick callback.
+  //
+  // Taking this approach instead of checking if the event's
+  // target element exists in this component's DOM sub-tree is
+  // necessary for handling clicks originating from children
+  // rendered through React's portals (EuiPortal). The id tracking
+  // works because React guarantees the event bubbles through the
+  // virtual DOM and executes EuiClickDetector's onClick handler,
+  // stamping the id even though the event originates outside
+  // this component's reified DOM tree.
+  var id = useGeneratedHtmlId();
+  var capturedDownIds = useRef([]);
+  useEffect(function () {
+    function onClickOutside(e) {
+      var isDisabled = props.isDisabled,
+        onOutsideClick = props.onOutsideClick;
       if (isDisabled) {
-        _this.capturedDownIds = [];
+        capturedDownIds.current = [];
         return;
       }
       var event = e;
-      if (event.euiGeneratedBy && event.euiGeneratedBy.includes(_this.id) || _this.capturedDownIds.includes(_this.id)) {
-        _this.capturedDownIds = [];
+      if (event.euiGeneratedBy && event.euiGeneratedBy.includes(id) || capturedDownIds.current.includes(id)) {
+        capturedDownIds.current = [];
         return;
       }
-      _this.capturedDownIds = [];
+      capturedDownIds.current = [];
       return onOutsideClick(event);
+    }
+    document.addEventListener('mouseup', onClickOutside);
+    document.addEventListener('touchend', onClickOutside);
+    return function () {
+      document.removeEventListener('mouseup', onClickOutside);
+      document.removeEventListener('touchend', onClickOutside);
+    };
+  }, [props.isDisabled, props.onOutsideClick]);
+  function onChildClick(event, cb) {
+    // to support nested click detectors, build an array
+    // of detector ids that have been encountered;
+    if (event.nativeEvent.hasOwnProperty('euiGeneratedBy')) {
+      event.nativeEvent.euiGeneratedBy.push(id);
+    } else {
+      event.nativeEvent.euiGeneratedBy = [id];
+    }
+    if (cb) cb(event);
+  }
+  function onChildMouseDown(event) {
+    onChildClick(event, function (e) {
+      var nativeEvent = e.nativeEvent;
+      capturedDownIds.current = nativeEvent.euiGeneratedBy;
+      if (props.onMouseDown) props.onMouseDown(e);
+      if (props.onTouchStart) props.onTouchStart(e);
     });
-    _defineProperty(_this, "onChildClick", function (event, cb) {
-      // to support nested click detectors, build an array
-      // of detector ids that have been encountered;
-      if (event.nativeEvent.hasOwnProperty('euiGeneratedBy')) {
-        event.nativeEvent.euiGeneratedBy.push(_this.id);
-      } else {
-        event.nativeEvent.euiGeneratedBy = [_this.id];
-      }
-      if (cb) cb(event);
-    });
-    _defineProperty(_this, "onChildMouseDown", function (event) {
-      _this.onChildClick(event, function (e) {
-        var nativeEvent = e.nativeEvent;
-        _this.capturedDownIds = nativeEvent.euiGeneratedBy;
-        if (_this.props.onMouseDown) _this.props.onMouseDown(e);
-        if (_this.props.onTouchStart) _this.props.onTouchStart(e);
-      });
-    });
-    _defineProperty(_this, "onChildMouseUp", function (event) {
-      _this.onChildClick(event, function (e) {
-        if (_this.props.onMouseUp) _this.props.onMouseUp(e);
-        if (_this.props.onTouchEnd) _this.props.onTouchEnd(e);
-      });
+  }
+  function onChildMouseUp(event) {
+    onChildClick(event, function (e) {
+      if (props.onMouseUp) props.onMouseUp(e);
+      if (props.onTouchEnd) props.onTouchEnd(e);
     });
-    _this.id = htmlIdGenerator()();
-    _this.capturedDownIds = [];
-    return _this;
   }
-  _inherits(EuiOutsideClickDetector, _Component);
-  return _createClass(EuiOutsideClickDetector, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('mouseup', this.onClickOutside);
-      document.addEventListener('touchend', this.onClickOutside);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('mouseup', this.onClickOutside);
-      document.removeEventListener('touchend', this.onClickOutside);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var props = _objectSpread(_objectSpread({}, this.props.children.props), {
-        onMouseDown: this.onChildMouseDown,
-        onTouchStart: this.onChildMouseDown,
-        onMouseUp: this.onChildMouseUp,
-        onTouchEnd: this.onChildMouseUp
-      });
-      var child = Children.only(this.props.children);
-      return /*#__PURE__*/cloneElement(child, props);
-    }
-  }]);
-}(Component);
+  var child = Children.only(props.children);
+  var childProps = _objectSpread(_objectSpread({}, props.children.props), {}, {
+    onMouseDown: onChildMouseDown,
+    onTouchStart: onChildMouseDown,
+    onMouseUp: onChildMouseUp,
+    onTouchEnd: onChildMouseUp
+  }, ref ? {
+    ref: ref
+  } : {});
+  return /*#__PURE__*/cloneElement(child, childProps);
+});
+EuiOutsideClickDetector.displayName = 'EuiOutsideClickDetector';

package/optimize/es/components/pagination/pagination_button_arrow.js CHANGED Viewed

@@ -13,6 +13,7 @@ import { EuiButtonIcon } from '../button/button_icon';
 import { keysOf } from '../common';
 import { useEuiI18n } from '../i18n';
 import { useEuiTheme } from '../../services';
+import { EuiToolTip } from '../tool_tip';
 import { euiPaginationButtonStyles } from './pagination_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var typeToIconTypeMap = {
@@ -41,15 +42,18 @@ export var EuiPaginationButtonArrow = function EuiPaginationButtonArrow(_ref) {
     buttonProps.href = "#".concat(ariaControls);
     buttonProps['aria-controls'] = ariaControls;
   }
-  return ___EmotionJSX(EuiButtonIcon, _extends({
+  var button = ___EmotionJSX(EuiButtonIcon, _extends({
     css: styles.euiPaginationButton,
     className: classNames('euiPaginationArrowButton', className),
     color: "text",
     "aria-label": labels[type],
-    title: disabled ? undefined : labels[type],
     isDisabled: disabled,
     onClick: onClick,
     "data-test-subj": "pagination-button-".concat(type),
     iconType: typeToIconTypeMap[type]
   }, buttonProps));
+  return disabled ? button : ___EmotionJSX(EuiToolTip, {
+    content: labels[type],
+    disableScreenReaderOutput: true
+  }, button);
 };

package/optimize/es/components/search_bar/search_bar.js CHANGED Viewed

@@ -24,6 +24,7 @@ import React, { Component } from 'react';
 import { RenderWithEuiTheme, htmlIdGenerator } from '../../services';
 import { isString } from '../../services/predicate';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { EuiToolTip } from '../tool_tip';
 import { EuiSearchBox } from './search_box';
 import { EuiSearchBarFilters } from './search_filters';
 import { Query } from './query';
@@ -186,6 +187,21 @@ export var EuiSearchBar = /*#__PURE__*/function (_Component) {
       var toolsLeftEl = this.renderTools(toolsLeft);
       var toolsRightEl = this.renderTools(toolsRight);
       var isHintVisible = (_hint$popoverProps$is = hint === null || hint === void 0 || (_hint$popoverProps = hint.popoverProps) === null || _hint$popoverProps === void 0 ? void 0 : _hint$popoverProps.isOpen) !== null && _hint$popoverProps$is !== void 0 ? _hint$popoverProps$is : isHintVisibleState;
+      var searchBox = ___EmotionJSX(EuiSearchBox, _extends({}, box, {
+        query: queryText,
+        onSearch: this.onSearch,
+        isInvalid: error != null,
+        "aria-describedby": isHintVisible ? "".concat(this.hintId) : undefined,
+        hint: hint ? _objectSpread({
+          isVisible: isHintVisible,
+          setIsVisible: function setIsVisible(isVisible) {
+            _this2.setState({
+              isHintVisible: isVisible
+            });
+          },
+          id: this.hintId
+        }, hint) : undefined
+      }));
       return ___EmotionJSX(RenderWithEuiTheme, null, function (euiTheme) {
         return ___EmotionJSX(EuiFlexGroup, {
           gutterSize: "s",
@@ -195,22 +211,10 @@ export var EuiSearchBar = /*#__PURE__*/function (_Component) {
           className: "euiSearchBar__searchHolder",
           css: euiSearchBar__searchHolder(euiTheme),
           grow: true
-        }, ___EmotionJSX(EuiSearchBox, _extends({}, box, {
-          query: queryText,
-          onSearch: _this2.onSearch,
-          isInvalid: error != null,
-          title: error ? error.message : undefined,
-          "aria-describedby": isHintVisible ? "".concat(_this2.hintId) : undefined,
-          hint: hint ? _objectSpread({
-            isVisible: isHintVisible,
-            setIsVisible: function setIsVisible(isVisible) {
-              _this2.setState({
-                isHintVisible: isVisible
-              });
-            },
-            id: _this2.hintId
-          }, hint) : undefined
-        }))), filters && ___EmotionJSX(EuiFlexItem, {
+        }, ___EmotionJSX(EuiToolTip, {
+          content: error === null || error === void 0 ? void 0 : error.message,
+          display: "block"
+        }, searchBox)), filters && ___EmotionJSX(EuiFlexItem, {
           className: "euiSearchBar__filtersHolder",
           css: euiSearchBar__filtersHolder(euiTheme),
           grow: false

package/optimize/es/components/search_bar/search_box.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["query", "placeholder", "incremental", "hint"];
+var _excluded = ["query", "placeholder", "incremental", "hint", "onFocus"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -19,6 +19,7 @@ export var EuiSearchBox = function EuiSearchBox(_ref) {
     placeholder = _ref.placeholder,
     incremental = _ref.incremental,
     hint = _ref.hint,
+    _onFocus = _ref.onFocus,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _inputRef = useRef(null);
   useLayoutEffect(function () {
@@ -39,8 +40,9 @@ export var EuiSearchBox = function EuiSearchBox(_ref) {
     incremental: incremental,
     "aria-label": incremental ? ariaLabelIncremental : ariaLabelEnter,
     placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : defaultPlaceholder,
-    onFocus: function onFocus() {
+    onFocus: function onFocus(e) {
       hint === null || hint === void 0 || hint.setIsVisible(true);
+      _onFocus === null || _onFocus === void 0 || _onFocus(e);
     }
   }, rest));
   if (hint) {

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

@@ -187,7 +187,7 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           _this.onAddOrRemoveOption(option, event);
         },
         isFocused: isFocused,
-        title: searchableLabel || label,
+        title: !truncationProps && !option.toolTipContent ? searchableLabel || label : undefined,
         checked: checked,
         disabled: disabled,
         prepend: prepend,

package/optimize/es/components/selectable/selectable_list/selectable_list.styles.js CHANGED Viewed

@@ -45,6 +45,6 @@ export var euiSelectableListGroupLabelStyles = function euiSelectableListGroupLa
   return {
     groupLabel: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xxxs'), " position:relative;display:flex;align-items:center;gap:", itemVars.spacing.horizontal, ";", logicalCSS('padding-horizontal', itemVars.textPadding.horizontal), " ", logicalCSS('padding-vertical', spacingVertical), " &:not(:first-child){", logicalCSS('padding-top', mathWithUnits([spacingVertical], function (a) {
       return a * 3;
-    })), " &::before{content:'';position:absolute;inset:0;inset-block-start:", spacingVertical, ";", logicalCSS('border-top', "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor)), ";}};label:groupLabel;")
+    })), " &::before{content:'';position:absolute;z-index:-1;inset:0;inset-block-start:", spacingVertical, ";", logicalCSS('border-top', "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor)), ";}};label:groupLabel;")
   };
 };

package/optimize/es/components/table/sticky_header/context.js ADDED Viewed

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import React, { createContext, useContext } from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiTableWithinStickyHeaderContext = /*#__PURE__*/createContext(false);
+/**
+ * React context provider to detect whether a component is rendered
+ * inside <EuiTableStickyHeader> to prevent duplicated header cell renders.
+ * @internal
+ */
+export var EuiTableWithinStickyHeaderProvider = function EuiTableWithinStickyHeaderProvider(_ref) {
+  var children = _ref.children;
+  return ___EmotionJSX(EuiTableWithinStickyHeaderContext.Provider, {
+    value: true
+  }, children);
+};
+/**
+ * Returns true if the component (usually the EuiTableHeaderCell or EuiTableHeaderCellCheckbox)
+ * is rendered inside EuiTableStickyHeader.
+ * @internal
+ */
+export var useEuiTableWithinStickyHeader = function useEuiTableWithinStickyHeader() {
+  return useContext(EuiTableWithinStickyHeaderContext);
+};

package/optimize/es/components/table/sticky_header/index.js ADDED Viewed

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+export { EuiTableStickyHeader } from './sticky_header';
+export { useEuiTableWithinStickyHeader } from './context';

package/optimize/es/components/table/sticky_header/sticky_header.js ADDED Viewed

@@ -0,0 +1,146 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEuiTableColumnDataStore } from '../store/provider';
+import { EuiTableHeader } from '../table_header';
+import { EuiTableWithinStickyHeaderProvider } from './context';
+import { useEuiMemoizedStyles } from '../../../services';
+import { euiTableStyles } from '../table.styles';
+import { euiTableStickyHeaderStyles } from './sticky_header.styles';
+import { euiContainerCSS } from '../../../global_styling';
+import { EUI_TABLE_CSS_CONTAINER_NAME } from '../const';
+/**
+ * @internal
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiTableStickyHeader = function EuiTableStickyHeader(_ref) {
+  var tableRef = _ref.tableRef,
+    tableWrapperRef = _ref.tableWrapperRef,
+    compressed = _ref.compressed,
+    scrollableInline = _ref.scrollableInline,
+    isResponsive = _ref.isResponsive;
+  var store = useEuiTableColumnDataStore();
+  var columnElements = useRef(new Map());
+  var stickyTableWrapperRef = useRef(null);
+  var stickyTableRef = useRef(null);
+  var _useState = useState(function () {
+      return Array.from(store.getColumns().entries());
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    columns = _useState2[0],
+    setColumns = _useState2[1];
+  var originalStyles = useEuiMemoizedStyles(euiTableStyles);
+  var styles = useEuiMemoizedStyles(euiTableStickyHeaderStyles);
+  /**
+   * Get a callback ref to handle the column element ref
+   */
+  var getColumnRef = useCallback(function (id) {
+    return function (element) {
+      if (element) {
+        columnElements.current.set(id, element);
+      } else {
+        columnElements.current.delete(id);
+      }
+    };
+  }, []);
+  useEffect(function () {
+    var unsubscribe = store.subscribe(function (columns) {
+      setColumns(Array.from(columns.entries()));
+    });
+    var unsubscribeColumnWidths = store.subscribeToColumnWidths(function (columns) {
+      columns.forEach(function (width, name) {
+        var element = columnElements.current.get(name);
+        if (element) {
+          element.style.width = "".concat(width, "px");
+        }
+      });
+    });
+    return function () {
+      unsubscribe();
+      unsubscribeColumnWidths();
+    };
+  }, [store]);
+  // When columns change, apply column widths after render
+  useLayoutEffect(function () {
+    store.getColumnWidths().forEach(function (width, name) {
+      var element = columnElements.current.get(name);
+      if (element) {
+        element.style.width = "".concat(width, "px");
+      }
+    });
+  }, [store, columns]);
+  useEffect(function () {
+    if (!scrollableInline || !tableWrapperRef.current || !stickyTableRef.current || !tableRef.current) {
+      return;
+    }
+    var tableWrapper = tableWrapperRef.current;
+    var handleScroll = function handleScroll() {
+      if (stickyTableWrapperRef.current) {
+        stickyTableWrapperRef.current.scrollLeft = tableWrapper.scrollLeft;
+      }
+    };
+    var handleResize = function handleResize(entries) {
+      var element = entries[0].target;
+      if (!element) {
+        return;
+      }
+      if (stickyTableRef.current) {
+        stickyTableRef.current.style.minWidth = "".concat(element.clientWidth, "px");
+      }
+    };
+    // Initial width sync
+    stickyTableRef.current.style.minWidth = "".concat(tableRef.current.getBoundingClientRect().width, "px");
+    // Use ResizeObserver to keep table width in sync
+    var resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(tableRef.current);
+    tableWrapper.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return function () {
+      tableWrapper.removeEventListener('scroll', handleScroll);
+      resizeObserver.disconnect();
+    };
+  }, [scrollableInline, tableRef, tableWrapperRef]);
+  var tableStyles = [originalStyles.euiTable, scrollableInline && originalStyles.euiTableScrollableInline, (!compressed || isResponsive) && originalStyles.uncompressed, compressed && !isResponsive && originalStyles.compressed,
+  // Forced fixed layout since all column widths come synced from the main table
+  originalStyles.layout.fixed, originalStyles.hasBackground, styles.table];
+  if (isResponsive) {
+    return null;
+  }
+  return ___EmotionJSX(EuiTableWithinStickyHeaderProvider, null, ___EmotionJSX("div", {
+    css: styles.wrapper,
+    "aria-hidden": "true"
+  }, ___EmotionJSX("div", {
+    css: [
+    // This CSS container is needed to feed `<EuiTableHeaderCell>`
+    // with `sticky` prop set the necessary scroll state
+    euiContainerCSS('normal', EUI_TABLE_CSS_CONTAINER_NAME, true), styles.innerWrapper, ";label:EuiTableStickyHeader;"],
+    ref: stickyTableWrapperRef
+  }, ___EmotionJSX("table", {
+    css: tableStyles,
+    ref: stickyTableRef
+  }, ___EmotionJSX(EuiTableHeader, {
+    css: styles.header
+  }, columns.map(function (_ref2, index) {
+    var _data$renderHeaderCel, _data$renderHeaderCel2;
+    var _ref3 = _slicedToArray(_ref2, 2),
+      name = _ref3[0],
+      data = _ref3[1];
+    return (_data$renderHeaderCel = (_data$renderHeaderCel2 = data.renderHeaderCellRef).current) === null || _data$renderHeaderCel === void 0 ? void 0 : _data$renderHeaderCel.call(_data$renderHeaderCel2, {
+      ref: getColumnRef(name),
+      key: "".concat(name, "-").concat(index)
+    });
+  }))))));
+};

package/optimize/es/components/table/sticky_header/sticky_header.styles.js ADDED Viewed

@@ -0,0 +1,43 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1uk19xy-table",
+  styles: "pointer-events:auto;label:table;"
+} : {
+  name: "1uk19xy-table",
+  styles: "pointer-events:auto;label:table;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "15dchac-innerWrapper",
+  styles: "overflow-inline:hidden;label:innerWrapper;"
+} : {
+  name: "15dchac-innerWrapper",
+  styles: "overflow-inline:hidden;label:innerWrapper;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "4w3rcu-wrapper",
+  styles: "position:sticky;inset-block-start:var(--euiTableStickyHeaderOffsetTop, 0);z-index:var(--euiTableStickyHeaderZIndex, 1);block-size:0;overflow-block:visible;label:wrapper;"
+} : {
+  name: "4w3rcu-wrapper",
+  styles: "position:sticky;inset-block-start:var(--euiTableStickyHeaderOffsetTop, 0);z-index:var(--euiTableStickyHeaderZIndex, 1);block-size:0;overflow-block:visible;label:wrapper;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiTableStickyHeaderStyles = function euiTableStickyHeaderStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme;
+  return {
+    wrapper: _ref3,
+    innerWrapper: _ref2,
+    table: _ref,
+    header: /*#__PURE__*/css("th::after{content:'';display:block;inline-size:100%;block-size:", euiTheme.border.width.thin, ";background-color:", euiTheme.border.color, ";};label:header;")
+  };
+};

package/optimize/es/components/table/sticky_scrollbar/index.js ADDED Viewed

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+export { EuiTableStickyScrollbar } from './sticky_scrollbar';