@elastic/eui 116.3.0 → 116.3.1

package/es/components/avatar/avatar.js

@@ -75,6 +75,7 @@ export var EuiAvatar = function EuiAvatar(_ref) {
   var classes = classNames('euiAvatar', _defineProperty(_defineProperty(_defineProperty({}, "euiAvatar--".concat(size), size), "euiAvatar--".concat(type), type), 'euiAvatar-isDisabled', isDisabled), className);
   var styles = useEuiMemoizedStyles(euiAvatarStyles);
   var cssStyles = [styles.euiAvatar, styles[type], styles[size], styles[casing], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
+  var tooltipCssStyles = [styles.tooltip[type]];
   var avatarStyle = useMemo(function () {
     if (imageUrl) {
       return {
@@ -129,6 +130,9 @@ export var EuiAvatar = function EuiAvatar(_ref) {
   // It already has `aria-label`, the tooltip is only visual.
   return name ? ___EmotionJSX(EuiToolTip, {
     content: name,
+    anchorProps: {
+      css: tooltipCssStyles
+    },
     disableScreenReaderOutput: true
   }, avatarNode) : avatarNode;
 };

package/es/components/avatar/avatar.styles.js

@@ -9,9 +9,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalSizeCSS, mathWithUnits } from '../../global_styling';
-var _avatarSize = function _avatarSize(_ref7) {
-  var size = _ref7.size,
-    fontSize = _ref7.fontSize;
+var _avatarSize = function _avatarSize(_ref6) {
+  var size = _ref6.size,
+    fontSize = _ref6.fontSize;
   return "\n    ".concat(logicalSizeCSS(size), ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -54,24 +54,20 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref6 = process.env.NODE_ENV === "production" ? {
-  name: "ont6vs-user",
-  styles: "border-radius:50%;label:user;"
-} : {
-  name: "ont6vs-user",
-  styles: "border-radius:50%;label:user;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var euiAvatarStyles = function euiAvatarStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme;
+export var euiAvatarStyles = function euiAvatarStyles(_ref7) {
+  var euiTheme = _ref7.euiTheme;
+  var borderRadius = {
+    user: '50%',
+    space: euiTheme.border.radius.medium
+  };
   return {
     // Base
     euiAvatar: /*#__PURE__*/css("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;background-color:", euiTheme.colors.lightShade, ";overflow:hidden;font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/css("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),
-    user: _ref6,
-    space: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:space;"),
+    user: /*#__PURE__*/css("border-radius:", borderRadius.user, ";;label:user;"),
+    space: /*#__PURE__*/css("border-radius:", borderRadius.space, ";;label:space;"),
     // States
     isDisabled: _ref5,
     // Sizes
@@ -101,6 +97,10 @@ export var euiAvatarStyles = function euiAvatarStyles(_ref8) {
     capitalize: _ref4,
     uppercase: _ref3,
     lowercase: _ref2,
-    none: _ref
+    none: _ref,
+    tooltip: {
+      user: /*#__PURE__*/css("border-radius:", borderRadius.user, ";;label:user;"),
+      space: /*#__PURE__*/css("border-radius:", borderRadius.space, ";;label:space;")
+    }
   };
 };

package/es/components/table/store/use_unique_column_id.js

@@ -0,0 +1,25 @@
+/*
+ * 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, { useId, useRef } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+var useEuiTableStoreUniqueColumnIdFallback = function useEuiTableStoreUniqueColumnIdFallback() {
+  var ref = useRef(uuidv4());
+  return ref.current;
+};
+
+/**
+ * Returns a stable unique column ID to be used when registering columns.
+ * It uses `React.useId()` when available and falls back to UUID v4 on React 17.
+ *
+ * This is needed so that static `uuid` mocks don't break column registration
+ * (at least in React 18+; in older versions this function would need
+ * to be mocked to return something unique, but stable).
+ * @internal
+ */
+export var useEuiTableStoreUniqueColumnId = 'useId' in React ? useId : useEuiTableStoreUniqueColumnIdFallback;

package/es/components/table/table_header_cell.js

@@ -20,7 +20,6 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useEffect, useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles, LEFT_ALIGNMENT } from '../../services';
-import { useGeneratedHtmlId } from '../../services/accessibility/html_id_generator';
 import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiIcon } from '../icon';
@@ -32,6 +31,7 @@ import { EuiTableCellContent } from './_table_cell_content';
 import { euiTableHeaderFooterCellStyles, _useEuiTableStickyCellStyles } from './table_cells_shared.styles';
 import { useEuiTableColumnDataStore } from './store/provider';
 import { useEuiTableWithinStickyHeader } from './sticky_header';
+import { useEuiTableStoreUniqueColumnId } from './store/use_unique_column_id';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CellContents = function CellContents(_ref) {
   var className = _ref.className,
@@ -109,7 +109,7 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
     sticky = _ref2.sticky,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var selfRef = useRef(null);
-  var internalCellId = useGeneratedHtmlId();
+  var storeCellId = useEuiTableStoreUniqueColumnId();
   var store = useEuiTableColumnDataStore();
   var isWithinStickyHeader = useEuiTableWithinStickyHeader();
   var styles = useEuiMemoizedStyles(euiTableHeaderFooterCellStyles);
@@ -174,15 +174,15 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
     if (!entry) {
       return;
     }
-    store.updateColumnWidth(internalCellId, entry.contentRect.width);
-  }, [store, internalCellId]);
+    store.updateColumnWidth(storeCellId, entry.contentRect.width);
+  }, [store, storeCellId]);
   useEffect(function () {
     // Don't register the column inside the sticky header as the original
     // column is already registered. This would cause an infinite loop.
     if (isWithinStickyHeader || !selfRef.current || !renderHeaderCellRef.current) {
       return;
     }
-    var unregisterColumn = store.registerColumn(internalCellId, {
+    var unregisterColumn = store.registerColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef,
       // getBoundingClientRect is not the cheapest, but we call it only once
       currentWidth: selfRef.current.getBoundingClientRect().width
@@ -204,8 +204,7 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
       unregisterColumn();
       (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 || _resizeObserver.disconnect();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [store, internalCellId, isWithinStickyHeader]);
+  }, [store, isWithinStickyHeader, handleResize, storeCellId]);
 
   // Notify the store on every render so the sticky header stays in sync.
   // React's reconciliation will efficiently handle any duplicate renders.
@@ -220,7 +219,7 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
     if (!selfRef.current) {
       return;
     }
-    store.updateColumn(internalCellId, {
+    store.updateColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
   });

package/es/components/table/table_header_cell_checkbox.js

@@ -14,11 +14,11 @@ import React, { useEffect, useRef } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../services';
-import { useGeneratedHtmlId } from '../../services/accessibility/html_id_generator';
 import { resolveWidthPropsAsStyle } from './utils';
 import { euiTableCellCheckboxStyles } from './table_cells_shared.styles';
 import { useEuiTableColumnDataStore } from './store/provider';
 import { useEuiTableWithinStickyHeader } from './sticky_header';
+import { useEuiTableStoreUniqueColumnId } from './store/use_unique_column_id';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTableHeaderCellCheckbox = function EuiTableHeaderCellCheckbox(props) {
   var children = props.children,
@@ -31,7 +31,7 @@ export var EuiTableHeaderCellCheckbox = function EuiTableHeaderCellCheckbox(prop
     maxWidth = props.maxWidth,
     append = props.append,
     rest = _objectWithoutProperties(props, _excluded);
-  var internalCellId = useGeneratedHtmlId();
+  var storeCellId = useEuiTableStoreUniqueColumnId();
   var store = useEuiTableColumnDataStore();
   var isWithinStickyHeader = useEuiTableWithinStickyHeader();
   var styles = useEuiMemoizedStyles(euiTableCellCheckboxStyles);
@@ -58,21 +58,20 @@ export var EuiTableHeaderCellCheckbox = function EuiTableHeaderCellCheckbox(prop
     if (isWithinStickyHeader) {
       return;
     }
-    var unregisterColumn = store.registerColumn(internalCellId, {
+    var unregisterColumn = store.registerColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
     return function () {
       unregisterColumn();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [store, internalCellId, isWithinStickyHeader]);
+  }, [store, isWithinStickyHeader, storeCellId]);
   useEffect(function () {
     // Notify the store on every render so the sticky header stays in sync.
     // React's reconciliation will efficiently handle any duplicate renders.
     if (isWithinStickyHeader) {
       return;
     }
-    store.updateColumn(internalCellId, {
+    store.updateColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
   });

package/eui.d.ts

@@ -17237,6 +17237,20 @@ declare module '@elastic/eui/src/components/table/sticky_header' {
 	export { EuiTableStickyHeader } from '@elastic/eui/src/components/table/sticky_header/sticky_header';
 	export { useEuiTableWithinStickyHeader } from '@elastic/eui/src/components/table/sticky_header/context';
 
+}
+declare module '@elastic/eui/src/components/table/store/use_unique_column_id' {
+	import React from 'react';
+	/**
+	 * Returns a stable unique column ID to be used when registering columns.
+	 * It uses `React.useId()` when available and falls back to UUID v4 on React 17.
+	 *
+	 * This is needed so that static `uuid` mocks don't break column registration
+	 * (at least in React 18+; in older versions this function would need
+	 * to be mocked to return something unique, but stable).
+	 * @internal
+	 */
+	export const useEuiTableStoreUniqueColumnId: typeof React.useId;
+
 }
 declare module '@elastic/eui/src/components/table/table_header_cell' {
 	import { FunctionComponent, ThHTMLAttributes, ReactNode } from 'react';
@@ -22084,6 +22098,10 @@ declare module '@elastic/eui/src/components/avatar/avatar.styles' {
 	    uppercase: import("@emotion/react").SerializedStyles;
 	    lowercase: import("@emotion/react").SerializedStyles;
 	    none: import("@emotion/react").SerializedStyles;
+	    tooltip: {
+	        user: import("@emotion/react").SerializedStyles;
+	        space: import("@emotion/react").SerializedStyles;
+	    };
 	};
 
 }

package/lib/components/avatar/avatar.js

@@ -83,6 +83,7 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
   var classes = (0, _classnames.default)('euiAvatar', _defineProperty(_defineProperty(_defineProperty({}, "euiAvatar--".concat(size), size), "euiAvatar--".concat(type), type), 'euiAvatar-isDisabled', isDisabled), className);
   var styles = (0, _services.useEuiMemoizedStyles)(_avatar.euiAvatarStyles);
   var cssStyles = [styles.euiAvatar, styles[type], styles[size], styles[casing], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
+  var tooltipCssStyles = [styles.tooltip[type]];
   var avatarStyle = (0, _react.useMemo)(function () {
     if (imageUrl) {
       return {
@@ -137,6 +138,9 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
   // It already has `aria-label`, the tooltip is only visual.
   return name ? (0, _react2.jsx)(_tool_tip.EuiToolTip, {
     content: name,
+    anchorProps: {
+      css: tooltipCssStyles
+    },
     disableScreenReaderOutput: true
   }, avatarNode) : avatarNode;
 };

package/lib/components/avatar/avatar.styles.js

@@ -13,9 +13,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var _avatarSize = function _avatarSize(_ref7) {
-  var size = _ref7.size,
-    fontSize = _ref7.fontSize;
+var _avatarSize = function _avatarSize(_ref6) {
+  var size = _ref6.size,
+    fontSize = _ref6.fontSize;
   return "\n    ".concat((0, _global_styling.logicalSizeCSS)(size), ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -58,24 +58,20 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref6 = process.env.NODE_ENV === "production" ? {
-  name: "ont6vs-user",
-  styles: "border-radius:50%;label:user;"
-} : {
-  name: "ont6vs-user",
-  styles: "border-radius:50%;label:user;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme;
+var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref7) {
+  var euiTheme = _ref7.euiTheme;
+  var borderRadius = {
+    user: '50%',
+    space: euiTheme.border.radius.medium
+  };
   return {
     // Base
     euiAvatar: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;background-color:", euiTheme.colors.lightShade, ";overflow:hidden;font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),
-    user: _ref6,
-    space: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:space;"),
+    user: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.user, ";;label:user;"),
+    space: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.space, ";;label:space;"),
     // States
     isDisabled: _ref5,
     // Sizes
@@ -105,6 +101,10 @@ var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref8)
     capitalize: _ref4,
     uppercase: _ref3,
     lowercase: _ref2,
-    none: _ref
+    none: _ref,
+    tooltip: {
+      user: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.user, ";;label:user;"),
+      space: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.space, ";;label:space;")
+    }
   };
 };

package/lib/components/table/store/use_unique_column_id.js

@@ -0,0 +1,34 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiTableStoreUniqueColumnId = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/*
+ * 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.
+ */
+
+var useEuiTableStoreUniqueColumnIdFallback = function useEuiTableStoreUniqueColumnIdFallback() {
+  var ref = (0, _react.useRef)((0, _uuid.v4)());
+  return ref.current;
+};
+
+/**
+ * Returns a stable unique column ID to be used when registering columns.
+ * It uses `React.useId()` when available and falls back to UUID v4 on React 17.
+ *
+ * This is needed so that static `uuid` mocks don't break column registration
+ * (at least in React 18+; in older versions this function would need
+ * to be mocked to return something unique, but stable).
+ * @internal
+ */
+var useEuiTableStoreUniqueColumnId = exports.useEuiTableStoreUniqueColumnId = 'useId' in _react.default ? _react.useId : useEuiTableStoreUniqueColumnIdFallback;

package/lib/components/table/table_header_cell.js

@@ -9,7 +9,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _html_id_generator = require("../../services/accessibility/html_id_generator");
 var _i18n = require("../i18n");
 var _accessibility = require("../accessibility");
 var _icon = require("../icon");
@@ -21,6 +20,7 @@ var _table_cell_content = require("./_table_cell_content");
 var _table_cells_shared = require("./table_cells_shared.styles");
 var _provider = require("./store/provider");
 var _sticky_header = require("./sticky_header");
+var _use_unique_column_id = require("./store/use_unique_column_id");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "align", "onSort", "isSorted", "isSortAscending", "className", "scope", "mobileOptions", "width", "minWidth", "maxWidth", "style", "readOnly", "tooltipProps", "description", "append", "sticky"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -116,7 +116,7 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     sticky = _ref2.sticky,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var selfRef = (0, _react.useRef)(null);
-  var internalCellId = (0, _html_id_generator.useGeneratedHtmlId)();
+  var storeCellId = (0, _use_unique_column_id.useEuiTableStoreUniqueColumnId)();
   var store = (0, _provider.useEuiTableColumnDataStore)();
   var isWithinStickyHeader = (0, _sticky_header.useEuiTableWithinStickyHeader)();
   var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableHeaderFooterCellStyles);
@@ -181,15 +181,15 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     if (!entry) {
       return;
     }
-    store.updateColumnWidth(internalCellId, entry.contentRect.width);
-  }, [store, internalCellId]);
+    store.updateColumnWidth(storeCellId, entry.contentRect.width);
+  }, [store, storeCellId]);
   (0, _react.useEffect)(function () {
     // Don't register the column inside the sticky header as the original
     // column is already registered. This would cause an infinite loop.
     if (isWithinStickyHeader || !selfRef.current || !renderHeaderCellRef.current) {
       return;
     }
-    var unregisterColumn = store.registerColumn(internalCellId, {
+    var unregisterColumn = store.registerColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef,
       // getBoundingClientRect is not the cheapest, but we call it only once
       currentWidth: selfRef.current.getBoundingClientRect().width
@@ -211,8 +211,7 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
       unregisterColumn();
       (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 || _resizeObserver.disconnect();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [store, internalCellId, isWithinStickyHeader]);
+  }, [store, isWithinStickyHeader, handleResize, storeCellId]);
 
   // Notify the store on every render so the sticky header stays in sync.
   // React's reconciliation will efficiently handle any duplicate renders.
@@ -227,7 +226,7 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     if (!selfRef.current) {
       return;
     }
-    store.updateColumn(internalCellId, {
+    store.updateColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
   });

package/lib/components/table/table_header_cell_checkbox.js

@@ -9,11 +9,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _html_id_generator = require("../../services/accessibility/html_id_generator");
 var _utils = require("./utils");
 var _table_cells_shared = require("./table_cells_shared.styles");
 var _provider = require("./store/provider");
 var _sticky_header = require("./sticky_header");
+var _use_unique_column_id = require("./store/use_unique_column_id");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "scope", "style", "width", "minWidth", "maxWidth", "append"];
 /*
@@ -40,7 +40,7 @@ var EuiTableHeaderCellCheckbox = exports.EuiTableHeaderCellCheckbox = function E
     maxWidth = props.maxWidth,
     append = props.append,
     rest = _objectWithoutProperties(props, _excluded);
-  var internalCellId = (0, _html_id_generator.useGeneratedHtmlId)();
+  var storeCellId = (0, _use_unique_column_id.useEuiTableStoreUniqueColumnId)();
   var store = (0, _provider.useEuiTableColumnDataStore)();
   var isWithinStickyHeader = (0, _sticky_header.useEuiTableWithinStickyHeader)();
   var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableCellCheckboxStyles);
@@ -67,21 +67,20 @@ var EuiTableHeaderCellCheckbox = exports.EuiTableHeaderCellCheckbox = function E
     if (isWithinStickyHeader) {
       return;
     }
-    var unregisterColumn = store.registerColumn(internalCellId, {
+    var unregisterColumn = store.registerColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
     return function () {
       unregisterColumn();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [store, internalCellId, isWithinStickyHeader]);
+  }, [store, isWithinStickyHeader, storeCellId]);
   (0, _react.useEffect)(function () {
     // Notify the store on every render so the sticky header stays in sync.
     // React's reconciliation will efficiently handle any duplicate renders.
     if (isWithinStickyHeader) {
       return;
     }
-    store.updateColumn(internalCellId, {
+    store.updateColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
   });

package/optimize/es/components/avatar/avatar.js

@@ -65,6 +65,7 @@ export var EuiAvatar = function EuiAvatar(_ref) {
   var classes = classNames('euiAvatar', _defineProperty(_defineProperty(_defineProperty({}, "euiAvatar--".concat(size), size), "euiAvatar--".concat(type), type), 'euiAvatar-isDisabled', isDisabled), className);
   var styles = useEuiMemoizedStyles(euiAvatarStyles);
   var cssStyles = [styles.euiAvatar, styles[type], styles[size], styles[casing], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
+  var tooltipCssStyles = [styles.tooltip[type]];
   var avatarStyle = useMemo(function () {
     if (imageUrl) {
       return {
@@ -119,6 +120,9 @@ export var EuiAvatar = function EuiAvatar(_ref) {
   // It already has `aria-label`, the tooltip is only visual.
   return name ? ___EmotionJSX(EuiToolTip, {
     content: name,
+    anchorProps: {
+      css: tooltipCssStyles
+    },
     disableScreenReaderOutput: true
   }, avatarNode) : avatarNode;
 };

package/optimize/es/components/avatar/avatar.styles.js

@@ -9,9 +9,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalSizeCSS, mathWithUnits } from '../../global_styling';
-var _avatarSize = function _avatarSize(_ref7) {
-  var size = _ref7.size,
-    fontSize = _ref7.fontSize;
+var _avatarSize = function _avatarSize(_ref6) {
+  var size = _ref6.size,
+    fontSize = _ref6.fontSize;
   return "\n    ".concat(logicalSizeCSS(size), ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -54,24 +54,20 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref6 = process.env.NODE_ENV === "production" ? {
-  name: "ont6vs-user",
-  styles: "border-radius:50%;label:user;"
-} : {
-  name: "ont6vs-user",
-  styles: "border-radius:50%;label:user;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var euiAvatarStyles = function euiAvatarStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme;
+export var euiAvatarStyles = function euiAvatarStyles(_ref7) {
+  var euiTheme = _ref7.euiTheme;
+  var borderRadius = {
+    user: '50%',
+    space: euiTheme.border.radius.medium
+  };
   return {
     // Base
     euiAvatar: /*#__PURE__*/css("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;background-color:", euiTheme.colors.lightShade, ";overflow:hidden;font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/css("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),
-    user: _ref6,
-    space: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:space;"),
+    user: /*#__PURE__*/css("border-radius:", borderRadius.user, ";;label:user;"),
+    space: /*#__PURE__*/css("border-radius:", borderRadius.space, ";;label:space;"),
     // States
     isDisabled: _ref5,
     // Sizes
@@ -101,6 +97,10 @@ export var euiAvatarStyles = function euiAvatarStyles(_ref8) {
     capitalize: _ref4,
     uppercase: _ref3,
     lowercase: _ref2,
-    none: _ref
+    none: _ref,
+    tooltip: {
+      user: /*#__PURE__*/css("border-radius:", borderRadius.user, ";;label:user;"),
+      space: /*#__PURE__*/css("border-radius:", borderRadius.space, ";;label:space;")
+    }
   };
 };

package/optimize/es/components/table/store/use_unique_column_id.js

@@ -0,0 +1,25 @@
+/*
+ * 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, { useId, useRef } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+var useEuiTableStoreUniqueColumnIdFallback = function useEuiTableStoreUniqueColumnIdFallback() {
+  var ref = useRef(uuidv4());
+  return ref.current;
+};
+
+/**
+ * Returns a stable unique column ID to be used when registering columns.
+ * It uses `React.useId()` when available and falls back to UUID v4 on React 17.
+ *
+ * This is needed so that static `uuid` mocks don't break column registration
+ * (at least in React 18+; in older versions this function would need
+ * to be mocked to return something unique, but stable).
+ * @internal
+ */
+export var useEuiTableStoreUniqueColumnId = 'useId' in React ? useId : useEuiTableStoreUniqueColumnIdFallback;

package/optimize/es/components/table/table_header_cell.js

@@ -15,7 +15,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useEffect, useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles, LEFT_ALIGNMENT } from '../../services';
-import { useGeneratedHtmlId } from '../../services/accessibility/html_id_generator';
 import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiIcon } from '../icon';
@@ -27,6 +26,7 @@ import { EuiTableCellContent } from './_table_cell_content';
 import { euiTableHeaderFooterCellStyles, _useEuiTableStickyCellStyles } from './table_cells_shared.styles';
 import { useEuiTableColumnDataStore } from './store/provider';
 import { useEuiTableWithinStickyHeader } from './sticky_header';
+import { useEuiTableStoreUniqueColumnId } from './store/use_unique_column_id';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CellContents = function CellContents(_ref) {
   var className = _ref.className,
@@ -104,7 +104,7 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
     sticky = _ref2.sticky,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var selfRef = useRef(null);
-  var internalCellId = useGeneratedHtmlId();
+  var storeCellId = useEuiTableStoreUniqueColumnId();
   var store = useEuiTableColumnDataStore();
   var isWithinStickyHeader = useEuiTableWithinStickyHeader();
   var styles = useEuiMemoizedStyles(euiTableHeaderFooterCellStyles);
@@ -169,15 +169,15 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
     if (!entry) {
       return;
     }
-    store.updateColumnWidth(internalCellId, entry.contentRect.width);
-  }, [store, internalCellId]);
+    store.updateColumnWidth(storeCellId, entry.contentRect.width);
+  }, [store, storeCellId]);
   useEffect(function () {
     // Don't register the column inside the sticky header as the original
     // column is already registered. This would cause an infinite loop.
     if (isWithinStickyHeader || !selfRef.current || !renderHeaderCellRef.current) {
       return;
     }
-    var unregisterColumn = store.registerColumn(internalCellId, {
+    var unregisterColumn = store.registerColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef,
       // getBoundingClientRect is not the cheapest, but we call it only once
       currentWidth: selfRef.current.getBoundingClientRect().width
@@ -199,8 +199,7 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
       unregisterColumn();
       (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 || _resizeObserver.disconnect();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [store, internalCellId, isWithinStickyHeader]);
+  }, [store, isWithinStickyHeader, handleResize, storeCellId]);
 
   // Notify the store on every render so the sticky header stays in sync.
   // React's reconciliation will efficiently handle any duplicate renders.
@@ -215,7 +214,7 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
     if (!selfRef.current) {
       return;
     }
-    store.updateColumn(internalCellId, {
+    store.updateColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
   });

package/optimize/es/components/table/table_header_cell_checkbox.js

@@ -12,11 +12,11 @@ var _excluded = ["children", "className", "scope", "style", "width", "minWidth",
 import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../services';
-import { useGeneratedHtmlId } from '../../services/accessibility/html_id_generator';
 import { resolveWidthPropsAsStyle } from './utils';
 import { euiTableCellCheckboxStyles } from './table_cells_shared.styles';
 import { useEuiTableColumnDataStore } from './store/provider';
 import { useEuiTableWithinStickyHeader } from './sticky_header';
+import { useEuiTableStoreUniqueColumnId } from './store/use_unique_column_id';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTableHeaderCellCheckbox = function EuiTableHeaderCellCheckbox(props) {
   var children = props.children,
@@ -29,7 +29,7 @@ export var EuiTableHeaderCellCheckbox = function EuiTableHeaderCellCheckbox(prop
     maxWidth = props.maxWidth,
     append = props.append,
     rest = _objectWithoutProperties(props, _excluded);
-  var internalCellId = useGeneratedHtmlId();
+  var storeCellId = useEuiTableStoreUniqueColumnId();
   var store = useEuiTableColumnDataStore();
   var isWithinStickyHeader = useEuiTableWithinStickyHeader();
   var styles = useEuiMemoizedStyles(euiTableCellCheckboxStyles);
@@ -56,21 +56,20 @@ export var EuiTableHeaderCellCheckbox = function EuiTableHeaderCellCheckbox(prop
     if (isWithinStickyHeader) {
       return;
     }
-    var unregisterColumn = store.registerColumn(internalCellId, {
+    var unregisterColumn = store.registerColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
     return function () {
       unregisterColumn();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [store, internalCellId, isWithinStickyHeader]);
+  }, [store, isWithinStickyHeader, storeCellId]);
   useEffect(function () {
     // Notify the store on every render so the sticky header stays in sync.
     // React's reconciliation will efficiently handle any duplicate renders.
     if (isWithinStickyHeader) {
       return;
     }
-    store.updateColumn(internalCellId, {
+    store.updateColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
   });

package/optimize/lib/components/avatar/avatar.js

@@ -74,6 +74,7 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
   var classes = (0, _classnames.default)('euiAvatar', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "euiAvatar--".concat(size), size), "euiAvatar--".concat(type), type), 'euiAvatar-isDisabled', isDisabled), className);
   var styles = (0, _services.useEuiMemoizedStyles)(_avatar.euiAvatarStyles);
   var cssStyles = [styles.euiAvatar, styles[type], styles[size], styles[casing], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
+  var tooltipCssStyles = [styles.tooltip[type]];
   var avatarStyle = (0, _react.useMemo)(function () {
     if (imageUrl) {
       return {
@@ -128,6 +129,9 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
   // It already has `aria-label`, the tooltip is only visual.
   return name ? (0, _react2.jsx)(_tool_tip.EuiToolTip, {
     content: name,
+    anchorProps: {
+      css: tooltipCssStyles
+    },
     disableScreenReaderOutput: true
   }, avatarNode) : avatarNode;
 };

package/optimize/lib/components/avatar/avatar.styles.js

@@ -13,9 +13,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var _avatarSize = function _avatarSize(_ref7) {
-  var size = _ref7.size,
-    fontSize = _ref7.fontSize;
+var _avatarSize = function _avatarSize(_ref6) {
+  var size = _ref6.size,
+    fontSize = _ref6.fontSize;
   return "\n    ".concat((0, _global_styling.logicalSizeCSS)(size), ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -58,24 +58,20 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref6 = process.env.NODE_ENV === "production" ? {
-  name: "ont6vs-user",
-  styles: "border-radius:50%;label:user;"
-} : {
-  name: "ont6vs-user",
-  styles: "border-radius:50%;label:user;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme;
+var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref7) {
+  var euiTheme = _ref7.euiTheme;
+  var borderRadius = {
+    user: '50%',
+    space: euiTheme.border.radius.medium
+  };
   return {
     // Base
     euiAvatar: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;background-color:", euiTheme.colors.lightShade, ";overflow:hidden;font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),
-    user: _ref6,
-    space: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:space;"),
+    user: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.user, ";;label:user;"),
+    space: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.space, ";;label:space;"),
     // States
     isDisabled: _ref5,
     // Sizes
@@ -105,6 +101,10 @@ var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref8)
     capitalize: _ref4,
     uppercase: _ref3,
     lowercase: _ref2,
-    none: _ref
+    none: _ref,
+    tooltip: {
+      user: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.user, ";;label:user;"),
+      space: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.space, ";;label:space;")
+    }
   };
 };

package/optimize/lib/components/table/store/use_unique_column_id.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiTableStoreUniqueColumnId = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/*
+ * 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.
+ */
+
+var useEuiTableStoreUniqueColumnIdFallback = function useEuiTableStoreUniqueColumnIdFallback() {
+  var ref = (0, _react.useRef)((0, _uuid.v4)());
+  return ref.current;
+};
+
+/**
+ * Returns a stable unique column ID to be used when registering columns.
+ * It uses `React.useId()` when available and falls back to UUID v4 on React 17.
+ *
+ * This is needed so that static `uuid` mocks don't break column registration
+ * (at least in React 18+; in older versions this function would need
+ * to be mocked to return something unique, but stable).
+ * @internal
+ */
+var useEuiTableStoreUniqueColumnId = exports.useEuiTableStoreUniqueColumnId = 'useId' in _react.default ? _react.useId : useEuiTableStoreUniqueColumnIdFallback;

package/optimize/lib/components/table/table_header_cell.js

@@ -12,7 +12,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _html_id_generator = require("../../services/accessibility/html_id_generator");
 var _i18n = require("../i18n");
 var _accessibility = require("../accessibility");
 var _icon = require("../icon");
@@ -24,6 +23,7 @@ var _table_cell_content = require("./_table_cell_content");
 var _table_cells_shared = require("./table_cells_shared.styles");
 var _provider = require("./store/provider");
 var _sticky_header = require("./sticky_header");
+var _use_unique_column_id = require("./store/use_unique_column_id");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "align", "onSort", "isSorted", "isSortAscending", "className", "scope", "mobileOptions", "width", "minWidth", "maxWidth", "style", "readOnly", "tooltipProps", "description", "append", "sticky"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -112,7 +112,7 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     sticky = _ref2.sticky,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var selfRef = (0, _react.useRef)(null);
-  var internalCellId = (0, _html_id_generator.useGeneratedHtmlId)();
+  var storeCellId = (0, _use_unique_column_id.useEuiTableStoreUniqueColumnId)();
   var store = (0, _provider.useEuiTableColumnDataStore)();
   var isWithinStickyHeader = (0, _sticky_header.useEuiTableWithinStickyHeader)();
   var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableHeaderFooterCellStyles);
@@ -177,15 +177,15 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     if (!entry) {
       return;
     }
-    store.updateColumnWidth(internalCellId, entry.contentRect.width);
-  }, [store, internalCellId]);
+    store.updateColumnWidth(storeCellId, entry.contentRect.width);
+  }, [store, storeCellId]);
   (0, _react.useEffect)(function () {
     // Don't register the column inside the sticky header as the original
     // column is already registered. This would cause an infinite loop.
     if (isWithinStickyHeader || !selfRef.current || !renderHeaderCellRef.current) {
       return;
     }
-    var unregisterColumn = store.registerColumn(internalCellId, {
+    var unregisterColumn = store.registerColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef,
       // getBoundingClientRect is not the cheapest, but we call it only once
       currentWidth: selfRef.current.getBoundingClientRect().width
@@ -207,8 +207,7 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
       unregisterColumn();
       (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 || _resizeObserver.disconnect();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [store, internalCellId, isWithinStickyHeader]);
+  }, [store, isWithinStickyHeader, handleResize, storeCellId]);
 
   // Notify the store on every render so the sticky header stays in sync.
   // React's reconciliation will efficiently handle any duplicate renders.
@@ -223,7 +222,7 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     if (!selfRef.current) {
       return;
     }
-    store.updateColumn(internalCellId, {
+    store.updateColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
   });

package/optimize/lib/components/table/table_header_cell_checkbox.js

@@ -11,11 +11,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _html_id_generator = require("../../services/accessibility/html_id_generator");
 var _utils = require("./utils");
 var _table_cells_shared = require("./table_cells_shared.styles");
 var _provider = require("./store/provider");
 var _sticky_header = require("./sticky_header");
+var _use_unique_column_id = require("./store/use_unique_column_id");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "scope", "style", "width", "minWidth", "maxWidth", "append"];
 /*
@@ -38,7 +38,7 @@ var EuiTableHeaderCellCheckbox = exports.EuiTableHeaderCellCheckbox = function E
     maxWidth = props.maxWidth,
     append = props.append,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var internalCellId = (0, _html_id_generator.useGeneratedHtmlId)();
+  var storeCellId = (0, _use_unique_column_id.useEuiTableStoreUniqueColumnId)();
   var store = (0, _provider.useEuiTableColumnDataStore)();
   var isWithinStickyHeader = (0, _sticky_header.useEuiTableWithinStickyHeader)();
   var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableCellCheckboxStyles);
@@ -65,21 +65,20 @@ var EuiTableHeaderCellCheckbox = exports.EuiTableHeaderCellCheckbox = function E
     if (isWithinStickyHeader) {
       return;
     }
-    var unregisterColumn = store.registerColumn(internalCellId, {
+    var unregisterColumn = store.registerColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
     return function () {
       unregisterColumn();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [store, internalCellId, isWithinStickyHeader]);
+  }, [store, isWithinStickyHeader, storeCellId]);
   (0, _react.useEffect)(function () {
     // Notify the store on every render so the sticky header stays in sync.
     // React's reconciliation will efficiently handle any duplicate renders.
     if (isWithinStickyHeader) {
       return;
     }
-    store.updateColumn(internalCellId, {
+    store.updateColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "116.3.0",
+  "version": "116.3.1",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/test-env/components/avatar/avatar.js

@@ -75,6 +75,7 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
   var classes = (0, _classnames.default)('euiAvatar', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "euiAvatar--".concat(size), size), "euiAvatar--".concat(type), type), 'euiAvatar-isDisabled', isDisabled), className);
   var styles = (0, _services.useEuiMemoizedStyles)(_avatar.euiAvatarStyles);
   var cssStyles = [styles.euiAvatar, styles[type], styles[size], styles[casing], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
+  var tooltipCssStyles = [styles.tooltip[type]];
   var avatarStyle = (0, _react.useMemo)(function () {
     if (imageUrl) {
       return {
@@ -129,6 +130,9 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
   // It already has `aria-label`, the tooltip is only visual.
   return name ? (0, _react2.jsx)(_tool_tip.EuiToolTip, {
     content: name,
+    anchorProps: {
+      css: tooltipCssStyles
+    },
     disableScreenReaderOutput: true
   }, avatarNode) : avatarNode;
 };

package/test-env/components/avatar/avatar.styles.js

@@ -13,9 +13,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var _avatarSize = function _avatarSize(_ref7) {
-  var size = _ref7.size,
-    fontSize = _ref7.fontSize;
+var _avatarSize = function _avatarSize(_ref6) {
+  var size = _ref6.size,
+    fontSize = _ref6.fontSize;
   return "\n    ".concat((0, _global_styling.logicalSizeCSS)(size), ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -58,24 +58,20 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref6 = process.env.NODE_ENV === "production" ? {
-  name: "ont6vs-user",
-  styles: "border-radius:50%;label:user;"
-} : {
-  name: "ont6vs-user",
-  styles: "border-radius:50%;label:user;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme;
+var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref7) {
+  var euiTheme = _ref7.euiTheme;
+  var borderRadius = {
+    user: '50%',
+    space: euiTheme.border.radius.medium
+  };
   return {
     // Base
     euiAvatar: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;background-color:", euiTheme.colors.lightShade, ";overflow:hidden;font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),
-    user: _ref6,
-    space: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:space;"),
+    user: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.user, ";;label:user;"),
+    space: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.space, ";;label:space;"),
     // States
     isDisabled: _ref5,
     // Sizes
@@ -105,6 +101,10 @@ var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref8)
     capitalize: _ref4,
     uppercase: _ref3,
     lowercase: _ref2,
-    none: _ref
+    none: _ref,
+    tooltip: {
+      user: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.user, ";;label:user;"),
+      space: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius.space, ";;label:space;")
+    }
   };
 };

package/test-env/components/table/store/use_unique_column_id.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiTableStoreUniqueColumnId = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/*
+ * 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.
+ */
+
+var useEuiTableStoreUniqueColumnIdFallback = function useEuiTableStoreUniqueColumnIdFallback() {
+  var ref = (0, _react.useRef)((0, _uuid.v4)());
+  return ref.current;
+};
+
+/**
+ * Returns a stable unique column ID to be used when registering columns.
+ * It uses `React.useId()` when available and falls back to UUID v4 on React 17.
+ *
+ * This is needed so that static `uuid` mocks don't break column registration
+ * (at least in React 18+; in older versions this function would need
+ * to be mocked to return something unique, but stable).
+ * @internal
+ */
+var useEuiTableStoreUniqueColumnId = exports.useEuiTableStoreUniqueColumnId = 'useId' in _react.default ? _react.useId : useEuiTableStoreUniqueColumnIdFallback;

package/test-env/components/table/table_header_cell.js

@@ -13,7 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _html_id_generator = require("../../services/accessibility/html_id_generator");
 var _i18n = require("../i18n");
 var _accessibility = require("../accessibility");
 var _icon = require("../icon");
@@ -25,6 +24,7 @@ var _table_cell_content = require("./_table_cell_content");
 var _table_cells_shared = require("./table_cells_shared.styles");
 var _provider = require("./store/provider");
 var _sticky_header = require("./sticky_header");
+var _use_unique_column_id = require("./store/use_unique_column_id");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "align", "onSort", "isSorted", "isSortAscending", "className", "scope", "mobileOptions", "width", "minWidth", "maxWidth", "style", "readOnly", "tooltipProps", "description", "append", "sticky"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -113,7 +113,7 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     sticky = _ref2.sticky,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var selfRef = (0, _react.useRef)(null);
-  var internalCellId = (0, _html_id_generator.useGeneratedHtmlId)();
+  var storeCellId = (0, _use_unique_column_id.useEuiTableStoreUniqueColumnId)();
   var store = (0, _provider.useEuiTableColumnDataStore)();
   var isWithinStickyHeader = (0, _sticky_header.useEuiTableWithinStickyHeader)();
   var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableHeaderFooterCellStyles);
@@ -178,15 +178,15 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     if (!entry) {
       return;
     }
-    store.updateColumnWidth(internalCellId, entry.contentRect.width);
-  }, [store, internalCellId]);
+    store.updateColumnWidth(storeCellId, entry.contentRect.width);
+  }, [store, storeCellId]);
   (0, _react.useEffect)(function () {
     // Don't register the column inside the sticky header as the original
     // column is already registered. This would cause an infinite loop.
     if (isWithinStickyHeader || !selfRef.current || !renderHeaderCellRef.current) {
       return;
     }
-    var unregisterColumn = store.registerColumn(internalCellId, {
+    var unregisterColumn = store.registerColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef,
       // getBoundingClientRect is not the cheapest, but we call it only once
       currentWidth: selfRef.current.getBoundingClientRect().width
@@ -208,8 +208,7 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
       unregisterColumn();
       (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 || _resizeObserver.disconnect();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [store, internalCellId, isWithinStickyHeader]);
+  }, [store, isWithinStickyHeader, handleResize, storeCellId]);
 
   // Notify the store on every render so the sticky header stays in sync.
   // React's reconciliation will efficiently handle any duplicate renders.
@@ -224,7 +223,7 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     if (!selfRef.current) {
       return;
     }
-    store.updateColumn(internalCellId, {
+    store.updateColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
   });

package/test-env/components/table/table_header_cell_checkbox.js

@@ -12,11 +12,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _html_id_generator = require("../../services/accessibility/html_id_generator");
 var _utils = require("./utils");
 var _table_cells_shared = require("./table_cells_shared.styles");
 var _provider = require("./store/provider");
 var _sticky_header = require("./sticky_header");
+var _use_unique_column_id = require("./store/use_unique_column_id");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "scope", "style", "width", "minWidth", "maxWidth", "append"];
 /*
@@ -39,7 +39,7 @@ var EuiTableHeaderCellCheckbox = exports.EuiTableHeaderCellCheckbox = function E
     maxWidth = props.maxWidth,
     append = props.append,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var internalCellId = (0, _html_id_generator.useGeneratedHtmlId)();
+  var storeCellId = (0, _use_unique_column_id.useEuiTableStoreUniqueColumnId)();
   var store = (0, _provider.useEuiTableColumnDataStore)();
   var isWithinStickyHeader = (0, _sticky_header.useEuiTableWithinStickyHeader)();
   var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableCellCheckboxStyles);
@@ -66,21 +66,20 @@ var EuiTableHeaderCellCheckbox = exports.EuiTableHeaderCellCheckbox = function E
     if (isWithinStickyHeader) {
       return;
     }
-    var unregisterColumn = store.registerColumn(internalCellId, {
+    var unregisterColumn = store.registerColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
     return function () {
       unregisterColumn();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [store, internalCellId, isWithinStickyHeader]);
+  }, [store, isWithinStickyHeader, storeCellId]);
   (0, _react.useEffect)(function () {
     // Notify the store on every render so the sticky header stays in sync.
     // React's reconciliation will efficiently handle any duplicate renders.
     if (isWithinStickyHeader) {
       return;
     }
-    store.updateColumn(internalCellId, {
+    store.updateColumn(storeCellId, {
       renderHeaderCellRef: renderHeaderCellRef
     });
   });