@ember-eui/core 16.0.1 → 16.0.3

package/dist/components/eui-aspect-ratio.js

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { cached } from '@glimmer/tracking';
+import style from 'ember-style-modifier/modifiers/style';
 import { getEuiThemeContext } from '../utils/emotion/consume.js';
 import { euiClass } from '../utils/eui/styles.js';
 import { precompileTemplate } from '@ember/template-compilation';
@@ -12,18 +13,29 @@ import { n } from 'decorator-transforms/runtime-esm';
  * wrapper takes those styles and its content fills it.
  */
 class EuiAspectRatio extends Component {
-  get classes() {
+  /**
+  * The ratio and max width go inline, as upstream's `style`: a class per
+  * ratio would stay in the style cache for good.
+  */
+  get inlineStyle() {
     const {
       width,
       height,
       maxWidth
     } = this.args;
+    const inline = {
+      aspectRatio: `${width} / ${height}`
+    };
+    if (maxWidth !== undefined) {
+      inline['maxInlineSize'] = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
+    }
+    return inline;
+  }
+  get classes() {
     return `euiAspectRatio ${euiClass(getEuiThemeContext(this), {
       boxSizing: 'border-box',
-      aspectRatio: `${width} / ${height}`,
       blockSize: 'auto',
       inlineSize: '100%',
-      maxInlineSize: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
       // block, so an inline iframe/img adds no line-box descender space
       '& > *': {
         boxSizing: 'border-box',
@@ -37,8 +49,11 @@ class EuiAspectRatio extends Component {
     n(this.prototype, "classes", [cached]);
   }
   static {
-    setComponentTemplate(precompileTemplate("<div class={{this.classes}} ...attributes>{{yield}}</div>", {
-      strictMode: true
+    setComponentTemplate(precompileTemplate("<div class={{this.classes}} ...attributes {{style this.inlineStyle}}>{{yield}}</div>", {
+      strictMode: true,
+      scope: () => ({
+        style
+      })
     }), this);
   }
 }

package/dist/components/eui-aspect-ratio.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-aspect-ratio.js","sources":["../../src/components/eui-aspect-ratio.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiClass } from '../utils/eui/styles.ts';\n\n/**\n * Keeps its content (an iframe, video, image or map) at a fixed aspect\n * ratio while it takes the available width.\n */\nexport interface EuiAspectRatioSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Width part of the ratio, e.g. `16` for 16:9. */\n    width: number;\n    /** Height part of the ratio, e.g. `9` for 16:9. */\n    height: number;\n    /** Maximum width, e.g. `500` (px) or `'50%'`. */\n    maxWidth?: number | string;\n  };\n  Blocks: {\n    /** One element that fills the box, e.g. an `<iframe>`. */\n    default: [];\n  };\n}\n\n/**\n * Upstream clones its only child and gives it `aspect-ratio`, `height: auto`,\n * `width: 100%` and `max-width` (logical). Ember cannot clone a block, so the\n * wrapper takes those styles and its content fills it.\n */\nexport default class EuiAspectRatio extends Component<EuiAspectRatioSignature> {\n  @cached\n  get classes() {\n    const { width, height, maxWidth } = this.args;\n    return `euiAspectRatio ${euiClass(getEuiThemeContext(this), {\n      boxSizing: 'border-box',\n      aspectRatio: `${width} / ${height}`,\n      blockSize: 'auto',\n      inlineSize: '100%',\n      maxInlineSize: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\n      // block, so an inline iframe/img adds no line-box descender space\n      '& > *': {\n        boxSizing: 'border-box',\n        display: 'block',\n        inlineSize: '100%',\n        blockSize: '100%'\n      }\n    })}`;\n  }\n\n  <template>\n    <div class={{this.classes}} ...attributes>{{yield}}</div>\n  </template>\n}\n"],"names":["EuiAspectRatio","Component","classes","width","height","maxWidth","args","euiClass","getEuiThemeContext","boxSizing","aspectRatio","blockSize","inlineSize","maxInlineSize","display","n","prototype","cached","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;;;;AA0BA;;;;;AAKe,MAAMA,cAAA,SAAuBC,SAAA,CAAU;EACpD,IACIC,OAAAA,GAAU;IACZ,MAAM;MAAEC,KAAK;MAAEC,MAAM;AAAEC,MAAAA;KAAU,GAAG,IAAI,CAACC,IAAI;AAC7C,IAAA,OAAO,kBAAkBC,QAAA,CAASC,kBAAA,CAAmB,IAAI,CAAA,EAAG;AAC1DC,MAAAA,SAAA,EAAW,YAAA;AACXC,MAAAA,WAAA,EAAa,CAAA,EAAGP,KAAA,CAAA,GAAA,EAAWC,MAAA,CAAA,CAAQ;AACnCO,MAAAA,SAAA,EAAW,MAAA;AACXC,MAAAA,UAAA,EAAY,MAAA;MACZC,aAAA,EAAe,OAAOR,QAAA,KAAa,QAAA,GAAW,CAAA,EAAGA,QAAA,CAAA,EAAA,CAAY,GAAGA,QAAA;AAChE;AACA,MAAA,OAAA,EAAS;AACPI,QAAAA,SAAA,EAAW,YAAA;AACXK,QAAAA,OAAA,EAAS,OAAA;AACTF,QAAAA,UAAA,EAAY,MAAA;AACZD,QAAAA,SAAA,EAAW;AACb;AACF,KAAA,CAAA,CAAA,CAAI;AACN,EAAA;AAAA,EAAA;IAAAI,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAjBCC,MAAA,CAAA,CAAA;AAAA;AAmBD,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,2DAAA,EAEA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}
+{"version":3,"file":"eui-aspect-ratio.js","sources":["../../src/components/eui-aspect-ratio.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport style from 'ember-style-modifier/modifiers/style';\n\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiClass } from '../utils/eui/styles.ts';\n\n/**\n * Keeps its content (an iframe, video, image or map) at a fixed aspect\n * ratio while it takes the available width.\n */\nexport interface EuiAspectRatioSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Width part of the ratio, e.g. `16` for 16:9. */\n    width: number;\n    /** Height part of the ratio, e.g. `9` for 16:9. */\n    height: number;\n    /** Maximum width, e.g. `500` (px) or `'50%'`. */\n    maxWidth?: number | string;\n  };\n  Blocks: {\n    /** One element that fills the box, e.g. an `<iframe>`. */\n    default: [];\n  };\n}\n\n/**\n * Upstream clones its only child and gives it `aspect-ratio`, `height: auto`,\n * `width: 100%` and `max-width` (logical). Ember cannot clone a block, so the\n * wrapper takes those styles and its content fills it.\n */\nexport default class EuiAspectRatio extends Component<EuiAspectRatioSignature> {\n  /**\n   * The ratio and max width go inline, as upstream's `style`: a class per\n   * ratio would stay in the style cache for good.\n   */\n  get inlineStyle(): Record<string, string> {\n    const { width, height, maxWidth } = this.args;\n    const inline: Record<string, string> = {\n      aspectRatio: `${width} / ${height}`\n    };\n    if (maxWidth !== undefined) {\n      inline['maxInlineSize'] =\n        typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;\n    }\n    return inline;\n  }\n\n  @cached\n  get classes() {\n    return `euiAspectRatio ${euiClass(getEuiThemeContext(this), {\n      boxSizing: 'border-box',\n      blockSize: 'auto',\n      inlineSize: '100%',\n      // block, so an inline iframe/img adds no line-box descender space\n      '& > *': {\n        boxSizing: 'border-box',\n        display: 'block',\n        inlineSize: '100%',\n        blockSize: '100%'\n      }\n    })}`;\n  }\n\n  <template>\n    <div class={{this.classes}} ...attributes {{style this.inlineStyle}}>{{yield}}</div>\n  </template>\n}\n"],"names":["EuiAspectRatio","Component","inlineStyle","width","height","maxWidth","args","inline","aspectRatio","undefined","classes","euiClass","getEuiThemeContext","boxSizing","blockSize","inlineSize","display","n","prototype","cached","setComponentTemplate","precompileTemplate","strictMode","scope","style"],"mappings":";;;;;;;;;AA4BA;;;;;AAKe,MAAMA,cAAA,SAAuBC,SAAA,CAAU;AACpD;;;AAGC;EACD,IAAIC,WAAAA,GAAsC;IACxC,MAAM;MAAEC,KAAK;MAAEC,MAAM;AAAEC,MAAAA;KAAU,GAAG,IAAI,CAACC,IAAI;AAC7C,IAAA,MAAMC,MAA6B,GAAI;AACrCC,MAAAA,WAAA,EAAa,CAAA,EAAGL,KAAA,CAAA,GAAA,EAAWC,MAAA,CAAA;KAC7B;IACA,IAAIC,aAAaI,SAAA,EAAW;AAC1BF,MAAAA,MAAM,CAAC,eAAA,CAAgB,GACrB,OAAOF,QAAA,KAAa,WAAW,CAAA,EAAGA,QAAA,CAAA,EAAA,CAAY,GAAGA,QAAA;AACrD,IAAA;AACA,IAAA,OAAOE,MAAA;AACT,EAAA;EAEA,IACIG,OAAAA,GAAU;AACZ,IAAA,OAAO,kBAAkBC,QAAA,CAASC,kBAAA,CAAmB,IAAI,CAAA,EAAG;AAC1DC,MAAAA,SAAA,EAAW,YAAA;AACXC,MAAAA,SAAA,EAAW,MAAA;AACXC,MAAAA,UAAA,EAAY,MAAA;AACZ;AACA,MAAA,OAAA,EAAS;AACPF,QAAAA,SAAA,EAAW,YAAA;AACXG,QAAAA,OAAA,EAAS,OAAA;AACTD,QAAAA,UAAA,EAAY,MAAA;AACZD,QAAAA,SAAA,EAAW;AACb;AACF,KAAA,CAAA,CAAA,CAAI;AACN,EAAA;AAAA,EAAA;IAAAG,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAdCC,MAAA,CAAA,CAAA;AAAA;AAgBD,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,sFAAA,EAEA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-avatar.js

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { cached } from '@glimmer/tracking';
 import { warn } from '@ember/debug';
+import style from 'ember-style-modifier/modifiers/style';
 import { hexToRgb } from '../helpers/hex-to-rgb.js';
 import { isColorDark } from '../helpers/is-color-dark.js';
 import { isValidHex } from '../helpers/is-valid-hex.js';
@@ -69,6 +70,18 @@ function oneOf(values, value, fallback) {
       color: textColor
     };
   }
+  /**
+  * `avatarStyle` as inline styles (upstream sets them through `style`).
+  * Per-avatar values such as image URLs stay out of the shared style cache,
+  * which would otherwise keep one class per URL or color for good.
+  */
+  get inlineStyle() {
+    const inline = {};
+    for (const [key, value] of Object.entries(this.avatarStyle ?? {})) {
+      if (value !== undefined) inline[key] = value;
+    }
+    return inline;
+  }
   get isForcedColors() {
     return this.context.upstream.highContrastMode === 'forced';
   }
@@ -95,13 +108,11 @@ function oneOf(values, value, fallback) {
     const reset = {
       boxSizing: 'border-box'
     };
-    // Upstream sets these inline; a class keeps the caller's `style` intact.
-    const avatarStyle = this.avatarStyle;
     // Background colors are ignored in Windows forced-colors themes.
     const highContrastBorder = this.isForcedColors ? {
       border: context.upstream.euiTheme.border.thin
     } : undefined;
-    return `euiAvatar ${euiClass(context, reset, styles['euiAvatar'], styles[type], styles[size], styles[casing], color === 'plain' && styles['plain'], color === 'subdued' && styles['subdued'], isDisabled && styles['isDisabled'], avatarStyle, highContrastBorder, this.args.css)}`;
+    return `euiAvatar ${euiClass(context, reset, styles['euiAvatar'], styles[type], styles[size], styles[casing], color === 'plain' && styles['plain'], color === 'subdued' && styles['subdued'], isDisabled && styles['isDisabled'], highContrastBorder, this.args.css)}`;
   }
   static {
     n(this.prototype, "classes", [cached]);
@@ -132,9 +143,10 @@ function oneOf(values, value, fallback) {
   }
 }
 /** The avatar element, with or without its tooltip anchor. */
-const AvatarNode = setComponentTemplate(precompileTemplate("<div class={{@avatar.classes}} aria-label={{if @avatar.args.isDisabled undefined @avatar.args.name}} role={{if @avatar.args.isDisabled \"presentation\" \"img\"}} ...attributes>\n  {{#unless @avatar.args.imageUrl}}\n    {{#if @avatar.args.iconType}}\n      <EuiIcon @iconClasses=\"euiAvatar__icon\" @size={{@avatar.iconSize}} @type={{@avatar.args.iconType}} @color={{@avatar.iconColor}} aria-hidden=\"true\" />\n    {{else}}\n      <span aria-hidden=\"true\">{{@avatar.initials}}</span>\n    {{/if}}\n  {{/unless}}\n</div>", {
+const AvatarNode = setComponentTemplate(precompileTemplate("<div class={{@avatar.classes}} aria-label={{if @avatar.args.isDisabled undefined @avatar.args.name}} role={{if @avatar.args.isDisabled \"presentation\" \"img\"}} ...attributes {{style @avatar.inlineStyle}}>\n  {{#unless @avatar.args.imageUrl}}\n    {{#if @avatar.args.iconType}}\n      <EuiIcon @iconClasses=\"euiAvatar__icon\" @size={{@avatar.iconSize}} @type={{@avatar.args.iconType}} @color={{@avatar.iconColor}} aria-hidden=\"true\" />\n    {{else}}\n      <span aria-hidden=\"true\">{{@avatar.initials}}</span>\n    {{/if}}\n  {{/unless}}\n</div>", {
   strictMode: true,
   scope: () => ({
+    style,
     EuiIcon
   })
 }), templateOnly());

package/dist/components/eui-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-avatar.js","sources":["../../src/components/eui-avatar.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport { warn } from '@ember/debug';\n\nimport { hexToRgb } from '../helpers/hex-to-rgb.ts';\nimport { isColorDark } from '../helpers/is-color-dark.ts';\nimport { isValidHex } from '../helpers/is-valid-hex.ts';\nimport { toInitials } from '../helpers/to-initials.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { useEuiPaletteColorBlindBehindText } from '../utils/color/eui_palettes.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport { euiAvatarStyles } from '../utils/eui/styles.generated.ts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiToolTip from './eui-tool-tip.gts';\n\nimport type { TOC } from '@ember/component/template-only';\nimport type { CSSObject } from '@emotion/css/create-instance';\nimport type { SerializedStyles } from '@emotion/serialize';\nimport type { EuiIconSignature } from './eui-icon';\n\nexport const SIZES = ['s', 'm', 'l', 'xl'] as const;\nexport const TYPES = ['space', 'user'] as const;\nexport const CASING = ['capitalize', 'uppercase', 'lowercase', 'none'] as const;\n\nexport type EuiAvatarSize = (typeof SIZES)[number];\nexport type EuiAvatarType = (typeof TYPES)[number];\nexport type EuiAvatarCasing = (typeof CASING)[number];\n\ntype AvatarStyles = Record<string, SerializedStyles> & {\n  tooltip: Record<string, SerializedStyles>;\n};\n\nfunction oneOf<T extends string>(\n  values: readonly T[],\n  value: unknown,\n  fallback: T\n): T {\n  return (values as readonly unknown[]).includes(value) ? (value as T) : fallback;\n}\n\nexport interface EuiAvatarSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * Full name of the user or space. Used as the accessible label and the\n     * tooltip content, for the initials and to pick a background color.\n     */\n    name?: string;\n    /**\n     * Background color as a hex value (`'#DA8B45'`), `'plain'` (the page's\n     * background color), `'subdued'` (a light gray), or `null` (the default\n     * gray). Defaults to one of the theme's visualization colors, picked\n     * from `@name`; the text color is chosen for contrast.\n     */\n    color?: string | null;\n    /**\n     * Color of the `@iconType` icon, any `EuiIcon` color. Defaults to the\n     * text color picked for the background; `null` keeps the icon's own\n     * colors (for multi-color logos).\n     */\n    iconColor?: string | null;\n    /**\n     * Size of the `@iconType` icon. Defaults to `@size`.\n     */\n    iconSize?: EuiIconSignature['Args']['size'];\n    /**\n     * Shows an icon instead of initials, e.g. `'logoElastic'` for a space.\n     * Anything `EuiIcon`'s `@type` accepts.\n     */\n    iconType?: EuiIconSignature['Args']['type'];\n    /**\n     * Image shown as the avatar (as a background image), instead of initials.\n     */\n    imageUrl?: string;\n    /**\n     * Custom initials (max 2 characters) instead of the ones computed from\n     * `@name`.\n     */\n    initials?: string;\n    /**\n     * Greys the avatar out and hides it from assistive technology.\n     */\n    isDisabled?: boolean;\n    /**\n     * `'s'` (24px), `'m'` (32px), `'l'` (40px) or `'xl'` (64px). Defaults\n     * to `'m'`.\n     */\n    size?: EuiAvatarSize;\n    /**\n     * `'user'` renders a circle, `'space'` a rounded square.\n     * Defaults to `'user'`.\n     */\n    type?: EuiAvatarType;\n    /**\n     * Text transform of the initials: `'capitalize'`, `'uppercase'`,\n     * `'lowercase'` or `'none'`. Defaults to `'uppercase'` for users and\n     * `'none'` for spaces.\n     */\n    casing?: EuiAvatarCasing;\n    /**\n     * Number of initials to compute from `@name`, `1` or `2`. Defaults to\n     * the number of words in the name, up to 2.\n     */\n    initialsLength?: 1 | 2;\n    /** Same as `@initialsLength` (the former name). */\n    initialLength?: 1 | 2;\n    /**\n     * Extra styles composed last into this component's class (like upstream's\n     * `css` prop). Prefer this to an extra class when styling it from a parent.\n     */\n    css?: EuiCss;\n  };\n}\n\n/** Native Ember avatar using the upstream EUI 123 / Borealis styles. */\nexport default class EuiAvatar extends Component<EuiAvatarSignature> {\n  get context() {\n    return getEuiThemeContext(this);\n  }\n\n  get type(): EuiAvatarType {\n    return oneOf(TYPES, this.args.type, 'user');\n  }\n\n  get initials(): string | null {\n    const { initials } = this.args;\n\n    if (initials && initials.length > 2) {\n      warn(\n        'EuiAvatar only accepts a max of 2 characters for the initials as a string. It is displaying only the first 2 characters.',\n        { id: 'EuiAvatar-initials-excedeed' }\n      );\n    }\n\n    return toInitials(\n      this.args.name ?? '',\n      this.args.initialsLength ?? this.args.initialLength,\n      initials\n    );\n  }\n\n  /**\n   * Upstream `avatarStyle`: the image, or a background color (by default a\n   * visualization color picked from the name) with a contrasting text color.\n   */\n  get avatarStyle(): { backgroundImage?: string; backgroundColor?: string; color?: string } | undefined {\n    const { color, imageUrl } = this.args;\n\n    if (imageUrl) return { backgroundImage: `url(${imageUrl})` };\n\n    if (color === 'plain' || color === 'subdued' || color === null) {\n      return undefined;\n    }\n\n    if (color && !isValidHex(color)) {\n      warn(\n        'EuiAvatar needs to pass a valid color. This can either be a three or six character hex value',\n        false,\n        { id: 'EuiAvatar-invalid-color' }\n      );\n    }\n\n    const visColors = useEuiPaletteColorBlindBehindText(this.context.upstream);\n    const name = this.args.name ?? '';\n    const assignedColor =\n      color || (visColors[Math.floor(name.length % visColors.length)] as string);\n    const textColor = isColorDark(...hexToRgb(assignedColor))\n      ? '#FFFFFF'\n      : '#000000';\n\n    return { backgroundColor: assignedColor, color: textColor };\n  }\n\n  get isForcedColors(): boolean {\n    return this.context.upstream.highContrastMode === 'forced';\n  }\n\n  /** Upstream `styles.tooltip[type]`: the anchor rounds like the avatar. */\n  @cached\n  get tooltipCss(): EuiCss {\n    const styles = useEuiBorealisStyles(\n      this.context,\n      euiAvatarStyles as unknown as (\n        ...args: Parameters<typeof euiAvatarStyles>\n      ) => AvatarStyles\n    );\n\n    return styles['tooltip']![this.type];\n  }\n\n  @cached\n  get classes(): string {\n    const context = this.context;\n    const styles = useEuiBorealisStyles(\n      context,\n      euiAvatarStyles as unknown as (\n        ...args: Parameters<typeof euiAvatarStyles>\n      ) => AvatarStyles\n    );\n    const type = this.type;\n    const size = oneOf(SIZES, this.args.size, 'm');\n    const casing = oneOf(\n      CASING,\n      this.args.casing,\n      type === 'space' ? 'none' : 'uppercase'\n    );\n    const { color, isDisabled } = this.args;\n    // The React global reset makes every element border-box; without it the\n    // forced-colors border would grow the avatar.\n    const reset: CSSObject = { boxSizing: 'border-box' };\n    // Upstream sets these inline; a class keeps the caller's `style` intact.\n    const avatarStyle = this.avatarStyle as CSSObject | undefined;\n    // Background colors are ignored in Windows forced-colors themes.\n    const highContrastBorder: CSSObject | undefined = this.isForcedColors\n      ? { border: context.upstream.euiTheme.border.thin }\n      : undefined;\n\n    return `euiAvatar ${euiClass(\n      context,\n      reset,\n      styles['euiAvatar'],\n      styles[type],\n      styles[size],\n      styles[casing],\n      color === 'plain' && styles['plain'],\n      color === 'subdued' && styles['subdued'],\n      isDisabled && styles['isDisabled'],\n      avatarStyle,\n      highContrastBorder,\n      this.args.css\n    )}`;\n  }\n\n  get iconSize(): EuiIconSignature['Args']['size'] {\n    return this.args.iconSize ?? oneOf(SIZES, this.args.size, 'm');\n  }\n\n  /** Upstream `iconCustomColor`. */\n  get iconColor(): string | undefined {\n    if (this.isForcedColors) {\n      return this.context.upstream.euiTheme.colors.fullShade;\n    }\n\n    const { iconColor } = this.args;\n\n    if (iconColor === null) return undefined;\n    if (iconColor) return iconColor;\n\n    return this.avatarStyle?.color;\n  }\n\n  <template>\n    {{#if @name}}\n      {{! upstream: the name is a visual tooltip; the avatar already has an\n          aria-label }}\n      <EuiToolTip\n        @content={{@name}}\n        @anchorCss={{this.tooltipCss}}\n        @disableScreenReaderOutput={{true}}\n      >\n        <AvatarNode @avatar={{this}} ...attributes />\n      </EuiToolTip>\n    {{else}}\n      <AvatarNode @avatar={{this}} ...attributes />\n    {{/if}}\n  </template>\n}\n\n/** The avatar element, with or without its tooltip anchor. */\nconst AvatarNode: TOC<{\n  Element: HTMLDivElement;\n  Args: { avatar: EuiAvatar };\n}> = <template>\n  <div\n    class={{@avatar.classes}}\n    aria-label={{if @avatar.args.isDisabled undefined @avatar.args.name}}\n    role={{if @avatar.args.isDisabled \"presentation\" \"img\"}}\n    ...attributes\n  >\n    {{#unless @avatar.args.imageUrl}}\n      {{#if @avatar.args.iconType}}\n        <EuiIcon\n          @iconClasses=\"euiAvatar__icon\"\n          @size={{@avatar.iconSize}}\n          @type={{@avatar.args.iconType}}\n          @color={{@avatar.iconColor}}\n          aria-hidden=\"true\"\n        />\n      {{else}}\n        <span aria-hidden=\"true\">{{@avatar.initials}}</span>\n      {{/if}}\n    {{/unless}}\n  </div>\n</template>;\n"],"names":["SIZES","TYPES","CASING","oneOf","values","value","fallback","includes","EuiAvatar","Component","context","getEuiThemeContext","type","args","initials","length","warn","id","toInitials","name","initialsLength","initialLength","avatarStyle","color","imageUrl","backgroundImage","undefined","isValidHex","visColors","useEuiPaletteColorBlindBehindText","upstream","assignedColor","Math","floor","textColor","isColorDark","hexToRgb","backgroundColor","isForcedColors","highContrastMode","tooltipCss","styles","useEuiBorealisStyles","euiAvatarStyles","n","prototype","cached","classes","size","casing","isDisabled","reset","boxSizing","highContrastBorder","border","euiTheme","thin","euiClass","css","iconSize","iconColor","colors","fullShade","setComponentTemplate","precompileTemplate","strictMode","scope","EuiToolTip","AvatarNode","EuiIcon","templateOnly"],"mappings":"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"}
+{"version":3,"file":"eui-avatar.js","sources":["../../src/components/eui-avatar.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport { warn } from '@ember/debug';\n\nimport style from 'ember-style-modifier/modifiers/style';\n\nimport { hexToRgb } from '../helpers/hex-to-rgb.ts';\nimport { isColorDark } from '../helpers/is-color-dark.ts';\nimport { isValidHex } from '../helpers/is-valid-hex.ts';\nimport { toInitials } from '../helpers/to-initials.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { useEuiPaletteColorBlindBehindText } from '../utils/color/eui_palettes.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport { euiAvatarStyles } from '../utils/eui/styles.generated.ts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiToolTip from './eui-tool-tip.gts';\n\nimport type { TOC } from '@ember/component/template-only';\nimport type { CSSObject } from '@emotion/css/create-instance';\nimport type { SerializedStyles } from '@emotion/serialize';\nimport type { EuiIconSignature } from './eui-icon';\n\nexport const SIZES = ['s', 'm', 'l', 'xl'] as const;\nexport const TYPES = ['space', 'user'] as const;\nexport const CASING = ['capitalize', 'uppercase', 'lowercase', 'none'] as const;\n\nexport type EuiAvatarSize = (typeof SIZES)[number];\nexport type EuiAvatarType = (typeof TYPES)[number];\nexport type EuiAvatarCasing = (typeof CASING)[number];\n\ntype AvatarStyles = Record<string, SerializedStyles> & {\n  tooltip: Record<string, SerializedStyles>;\n};\n\nfunction oneOf<T extends string>(\n  values: readonly T[],\n  value: unknown,\n  fallback: T\n): T {\n  return (values as readonly unknown[]).includes(value) ? (value as T) : fallback;\n}\n\nexport interface EuiAvatarSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * Full name of the user or space. Used as the accessible label and the\n     * tooltip content, for the initials and to pick a background color.\n     */\n    name?: string;\n    /**\n     * Background color as a hex value (`'#DA8B45'`), `'plain'` (the page's\n     * background color), `'subdued'` (a light gray), or `null` (the default\n     * gray). Defaults to one of the theme's visualization colors, picked\n     * from `@name`; the text color is chosen for contrast.\n     */\n    color?: string | null;\n    /**\n     * Color of the `@iconType` icon, any `EuiIcon` color. Defaults to the\n     * text color picked for the background; `null` keeps the icon's own\n     * colors (for multi-color logos).\n     */\n    iconColor?: string | null;\n    /**\n     * Size of the `@iconType` icon. Defaults to `@size`.\n     */\n    iconSize?: EuiIconSignature['Args']['size'];\n    /**\n     * Shows an icon instead of initials, e.g. `'logoElastic'` for a space.\n     * Anything `EuiIcon`'s `@type` accepts.\n     */\n    iconType?: EuiIconSignature['Args']['type'];\n    /**\n     * Image shown as the avatar (as a background image), instead of initials.\n     */\n    imageUrl?: string;\n    /**\n     * Custom initials (max 2 characters) instead of the ones computed from\n     * `@name`.\n     */\n    initials?: string;\n    /**\n     * Greys the avatar out and hides it from assistive technology.\n     */\n    isDisabled?: boolean;\n    /**\n     * `'s'` (24px), `'m'` (32px), `'l'` (40px) or `'xl'` (64px). Defaults\n     * to `'m'`.\n     */\n    size?: EuiAvatarSize;\n    /**\n     * `'user'` renders a circle, `'space'` a rounded square.\n     * Defaults to `'user'`.\n     */\n    type?: EuiAvatarType;\n    /**\n     * Text transform of the initials: `'capitalize'`, `'uppercase'`,\n     * `'lowercase'` or `'none'`. Defaults to `'uppercase'` for users and\n     * `'none'` for spaces.\n     */\n    casing?: EuiAvatarCasing;\n    /**\n     * Number of initials to compute from `@name`, `1` or `2`. Defaults to\n     * the number of words in the name, up to 2.\n     */\n    initialsLength?: 1 | 2;\n    /** Same as `@initialsLength` (the former name). */\n    initialLength?: 1 | 2;\n    /**\n     * Extra styles composed last into this component's class (like upstream's\n     * `css` prop). Prefer this to an extra class when styling it from a parent.\n     */\n    css?: EuiCss;\n  };\n}\n\n/** Native Ember avatar using the upstream EUI 123 / Borealis styles. */\nexport default class EuiAvatar extends Component<EuiAvatarSignature> {\n  get context() {\n    return getEuiThemeContext(this);\n  }\n\n  get type(): EuiAvatarType {\n    return oneOf(TYPES, this.args.type, 'user');\n  }\n\n  get initials(): string | null {\n    const { initials } = this.args;\n\n    if (initials && initials.length > 2) {\n      warn(\n        'EuiAvatar only accepts a max of 2 characters for the initials as a string. It is displaying only the first 2 characters.',\n        { id: 'EuiAvatar-initials-excedeed' }\n      );\n    }\n\n    return toInitials(\n      this.args.name ?? '',\n      this.args.initialsLength ?? this.args.initialLength,\n      initials\n    );\n  }\n\n  /**\n   * Upstream `avatarStyle`: the image, or a background color (by default a\n   * visualization color picked from the name) with a contrasting text color.\n   */\n  get avatarStyle(): { backgroundImage?: string; backgroundColor?: string; color?: string } | undefined {\n    const { color, imageUrl } = this.args;\n\n    if (imageUrl) return { backgroundImage: `url(${imageUrl})` };\n\n    if (color === 'plain' || color === 'subdued' || color === null) {\n      return undefined;\n    }\n\n    if (color && !isValidHex(color)) {\n      warn(\n        'EuiAvatar needs to pass a valid color. This can either be a three or six character hex value',\n        false,\n        { id: 'EuiAvatar-invalid-color' }\n      );\n    }\n\n    const visColors = useEuiPaletteColorBlindBehindText(this.context.upstream);\n    const name = this.args.name ?? '';\n    const assignedColor =\n      color || (visColors[Math.floor(name.length % visColors.length)] as string);\n    const textColor = isColorDark(...hexToRgb(assignedColor))\n      ? '#FFFFFF'\n      : '#000000';\n\n    return { backgroundColor: assignedColor, color: textColor };\n  }\n\n  /**\n   * `avatarStyle` as inline styles (upstream sets them through `style`).\n   * Per-avatar values such as image URLs stay out of the shared style cache,\n   * which would otherwise keep one class per URL or color for good.\n   */\n  get inlineStyle(): Record<string, string> {\n    const inline: Record<string, string> = {};\n    for (const [key, value] of Object.entries(this.avatarStyle ?? {})) {\n      if (value !== undefined) inline[key] = value;\n    }\n    return inline;\n  }\n\n  get isForcedColors(): boolean {\n    return this.context.upstream.highContrastMode === 'forced';\n  }\n\n  /** Upstream `styles.tooltip[type]`: the anchor rounds like the avatar. */\n  @cached\n  get tooltipCss(): EuiCss {\n    const styles = useEuiBorealisStyles(\n      this.context,\n      euiAvatarStyles as unknown as (\n        ...args: Parameters<typeof euiAvatarStyles>\n      ) => AvatarStyles\n    );\n\n    return styles['tooltip']![this.type];\n  }\n\n  @cached\n  get classes(): string {\n    const context = this.context;\n    const styles = useEuiBorealisStyles(\n      context,\n      euiAvatarStyles as unknown as (\n        ...args: Parameters<typeof euiAvatarStyles>\n      ) => AvatarStyles\n    );\n    const type = this.type;\n    const size = oneOf(SIZES, this.args.size, 'm');\n    const casing = oneOf(\n      CASING,\n      this.args.casing,\n      type === 'space' ? 'none' : 'uppercase'\n    );\n    const { color, isDisabled } = this.args;\n    // The React global reset makes every element border-box; without it the\n    // forced-colors border would grow the avatar.\n    const reset: CSSObject = { boxSizing: 'border-box' };\n    // Background colors are ignored in Windows forced-colors themes.\n    const highContrastBorder: CSSObject | undefined = this.isForcedColors\n      ? { border: context.upstream.euiTheme.border.thin }\n      : undefined;\n\n    return `euiAvatar ${euiClass(\n      context,\n      reset,\n      styles['euiAvatar'],\n      styles[type],\n      styles[size],\n      styles[casing],\n      color === 'plain' && styles['plain'],\n      color === 'subdued' && styles['subdued'],\n      isDisabled && styles['isDisabled'],\n      highContrastBorder,\n      this.args.css\n    )}`;\n  }\n\n  get iconSize(): EuiIconSignature['Args']['size'] {\n    return this.args.iconSize ?? oneOf(SIZES, this.args.size, 'm');\n  }\n\n  /** Upstream `iconCustomColor`. */\n  get iconColor(): string | undefined {\n    if (this.isForcedColors) {\n      return this.context.upstream.euiTheme.colors.fullShade;\n    }\n\n    const { iconColor } = this.args;\n\n    if (iconColor === null) return undefined;\n    if (iconColor) return iconColor;\n\n    return this.avatarStyle?.color;\n  }\n\n  <template>\n    {{#if @name}}\n      {{! upstream: the name is a visual tooltip; the avatar already has an\n          aria-label }}\n      <EuiToolTip\n        @content={{@name}}\n        @anchorCss={{this.tooltipCss}}\n        @disableScreenReaderOutput={{true}}\n      >\n        <AvatarNode @avatar={{this}} ...attributes />\n      </EuiToolTip>\n    {{else}}\n      <AvatarNode @avatar={{this}} ...attributes />\n    {{/if}}\n  </template>\n}\n\n/** The avatar element, with or without its tooltip anchor. */\nconst AvatarNode: TOC<{\n  Element: HTMLDivElement;\n  Args: { avatar: EuiAvatar };\n}> = <template>\n  <div\n    class={{@avatar.classes}}\n    aria-label={{if @avatar.args.isDisabled undefined @avatar.args.name}}\n    role={{if @avatar.args.isDisabled \"presentation\" \"img\"}}\n    ...attributes\n    {{style @avatar.inlineStyle}}\n  >\n    {{#unless @avatar.args.imageUrl}}\n      {{#if @avatar.args.iconType}}\n        <EuiIcon\n          @iconClasses=\"euiAvatar__icon\"\n          @size={{@avatar.iconSize}}\n          @type={{@avatar.args.iconType}}\n          @color={{@avatar.iconColor}}\n          aria-hidden=\"true\"\n        />\n      {{else}}\n        <span aria-hidden=\"true\">{{@avatar.initials}}</span>\n      {{/if}}\n    {{/unless}}\n  </div>\n</template>;\n"],"names":["SIZES","TYPES","CASING","oneOf","values","value","fallback","includes","EuiAvatar","Component","context","getEuiThemeContext","type","args","initials","length","warn","id","toInitials","name","initialsLength","initialLength","avatarStyle","color","imageUrl","backgroundImage","undefined","isValidHex","visColors","useEuiPaletteColorBlindBehindText","upstream","assignedColor","Math","floor","textColor","isColorDark","hexToRgb","backgroundColor","inlineStyle","inline","key","Object","entries","isForcedColors","highContrastMode","tooltipCss","styles","useEuiBorealisStyles","euiAvatarStyles","n","prototype","cached","classes","size","casing","isDisabled","reset","boxSizing","highContrastBorder","border","euiTheme","thin","euiClass","css","iconSize","iconColor","colors","fullShade","setComponentTemplate","precompileTemplate","strictMode","scope","EuiToolTip","AvatarNode","style","EuiIcon","templateOnly"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBO,MAAMA,KAAA,GAAQ,CAAC,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,IAAA;MACxBC,KAAA,GAAQ,CAAC,OAAA,EAAS,MAAA;AACxB,MAAMC,MAAA,GAAS,CAAC,YAAA,EAAc,WAAA,EAAa,WAAA,EAAa,MAAA;AAU/D,SAASC,KAAAA,CACPC,MAAoB,EACpBC,KAAc,EACdC,QAAW,EACV;EACD,OAAQF,MAAA,CAA8BG,QAAQ,CAACF,KAAA,CAAA,GAAUA,KAAA,GAAcC,QAAA;AACzE;AA4EA,wEACe,MAAME,SAAA,SAAkBC,SAAA,CAAU;EAC/C,IAAIC,OAAAA,GAAU;IACZ,OAAOC,mBAAmB,IAAI,CAAA;AAChC,EAAA;EAEA,IAAIC,OAAsB;IACxB,OAAOT,MAAMF,KAAA,EAAO,IAAI,CAACY,IAAI,CAACD,IAAI,EAAE,MAAA,CAAA;AACtC,EAAA;EAEA,IAAIE,QAAAA,GAA0B;IAC5B,MAAM;AAAEA,MAAAA;KAAU,GAAG,IAAI,CAACD,IAAI;AAE9B,IAAA,IAAIC,QAAA,IAAYA,QAAA,CAASC,MAAM,GAAG,CAAA,EAAG;MACnCC,IAAA,CACE,0HAAA,EACA;AAAEC,QAAAA,EAAA,EAAI;AAA8B,OAAA,CAAA;AAExC,IAAA;IAEA,OAAOC,WACL,IAAI,CAACL,IAAI,CAACM,IAAI,IAAI,EAAA,EAClB,IAAI,CAACN,IAAI,CAACO,cAAc,IAAI,IAAI,CAACP,IAAI,CAACQ,aAAa,EACnDP,QAAA,CAAA;AAEJ,EAAA;AAEA;;;AAGC;EACD,IAAIQ,WAAAA,GAAkG;IACpG,MAAM;MAAEC,KAAK;AAAEC,MAAAA;KAAU,GAAG,IAAI,CAACX,IAAI;IAErC,IAAIW,UAAU,OAAO;MAAEC,eAAA,EAAiB,OAAOD,QAAA,CAAA,CAAA;KAAY;IAE3D,IAAID,KAAA,KAAU,OAAA,IAAWA,KAAA,KAAU,SAAA,IAAaA,UAAU,IAAA,EAAM;AAC9D,MAAA,OAAOG,SAAA;AACT,IAAA;AAEA,IAAA,IAAIH,KAAA,IAAS,CAACI,UAAA,CAAWJ,KAAA,CAAA,EAAQ;AAC/BP,MAAAA,IAAA,CACE,gGACA,KAAA,EACA;AAAEC,QAAAA,EAAA,EAAI;AAA0B,OAAA,CAAA;AAEpC,IAAA;IAEA,MAAMW,YAAYC,iCAAA,CAAkC,IAAI,CAACnB,OAAO,CAACoB,QAAQ,CAAA;IACzE,MAAMX,OAAO,IAAI,CAACN,IAAI,CAACM,IAAI,IAAI,EAAA;AAC/B,IAAA,MAAMY,aAAA,GACJR,KAAA,IAAUK,SAAS,CAACI,IAAA,CAAKC,KAAK,CAACd,IAAA,CAAKJ,MAAM,GAAGa,SAAA,CAAUb,MAAM,CAAA,CAAY;AAC3E,IAAA,MAAMmB,SAAA,GAAYC,WAAA,CAAA,GAAeC,QAAA,CAASL,aAAA,CAAA,CAAA,GACtC,SAAA,GACA,SAAA;IAEJ,OAAO;AAAEM,MAAAA,eAAA,EAAiBN,aAAA;AAAeR,MAAAA,KAAA,EAAOW;KAAU;AAC5D,EAAA;AAEA;;;;AAIC;EACD,IAAII,WAAAA,GAAsC;IACxC,MAAMC,SAAiC,EAAC;AACxC,IAAA,KAAK,MAAM,CAACC,GAAA,EAAKnC,KAAA,CAAM,IAAIoC,MAAA,CAAOC,OAAO,CAAC,IAAI,CAACpB,WAAW,IAAI,EAAC,CAAA,EAAI;MACjE,IAAIjB,KAAA,KAAUqB,SAAA,EAAWa,MAAM,CAACC,IAAI,GAAGnC,KAAA;AACzC,IAAA;AACA,IAAA,OAAOkC,MAAA;AACT,EAAA;EAEA,IAAII,cAAAA,GAA0B;IAC5B,OAAO,IAAI,CAACjC,OAAO,CAACoB,QAAQ,CAACc,gBAAgB,KAAK,QAAA;AACpD,EAAA;AAEA;EACA,IACIC,aAAqB;IACvB,MAAMC,MAAA,GAASC,oBAAA,CACb,IAAI,CAACrC,OAAO,EACZsC,eAEK,CAAA;IAGP,OAAOF,MAAM,CAAC,SAAA,CAAU,CAAE,IAAI,CAAClC,IAAI,CAAC;AACtC,EAAA;AAAA,EAAA;IAAAqC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,YAAA,EAAA,CAVCC,MAAA,CAAA,CAAA;AAAA;EAYD,IACIC,OAAAA,GAAkB;AACpB,IAAA,MAAM1C,OAAA,GAAU,IAAI,CAACA,OAAO;AAC5B,IAAA,MAAMoC,MAAA,GAASC,qBACbrC,OAAA,EACAsC,eAEK,CAAA;AAEP,IAAA,MAAMpC,IAAA,GAAO,IAAI,CAACA,IAAI;AACtB,IAAA,MAAMyC,IAAA,GAAOlD,MAAMH,KAAA,EAAO,IAAI,CAACa,IAAI,CAACwC,IAAI,EAAE,GAAA,CAAA;AAC1C,IAAA,MAAMC,MAAA,GAASnD,KAAA,CACbD,MAAA,EACA,IAAI,CAACW,IAAI,CAACyC,MAAM,EAChB1C,IAAA,KAAS,OAAA,GAAU,MAAA,GAAS,WAAA,CAAA;IAE9B,MAAM;MAAEW,KAAK;AAAEgC,MAAAA;KAAY,GAAG,IAAI,CAAC1C,IAAI;AACvC;AACA;AACA,IAAA,MAAM2C,KAAO,GAAY;AAAEC,MAAAA,SAAA,EAAW;KAAa;AACnD;AACA,IAAA,MAAMC,kBAAyC,GAAG,IAAI,CAACf,cAAc,GACjE;MAAEgB,MAAA,EAAQjD,QAAQoB,QAAQ,CAAC8B,QAAQ,CAACD,MAAM,CAACE;AAAK,KAAA,GAChDnC,SAAA;AAEJ,IAAA,OAAO,CAAA,UAAA,EAAaoC,QAAA,CAClBpD,SACA8C,KAAA,EACAV,MAAM,CAAC,WAAA,CAAY,EACnBA,MAAM,CAAClC,IAAA,CAAK,EACZkC,MAAM,CAACO,KAAK,EACZP,MAAM,CAACQ,MAAA,CAAO,EACd/B,UAAU,OAAA,IAAWuB,MAAM,CAAC,OAAA,CAAQ,EACpCvB,UAAU,SAAA,IAAauB,MAAM,CAAC,SAAA,CAAU,EACxCS,cAAcT,MAAM,CAAC,aAAa,EAClCY,kBAAA,EACA,IAAI,CAAC7C,IAAI,CAACkD,GAAG,CAAA,CAAA,CACZ;AACL,EAAA;AAAA,EAAA;IAAAd,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAtCCC,MAAA,CAAA,CAAA;AAAA;EAwCD,IAAIa,QAAAA,GAA6C;AAC/C,IAAA,OAAO,IAAI,CAACnD,IAAI,CAACmD,QAAQ,IAAI7D,KAAA,CAAMH,KAAA,EAAO,IAAI,CAACa,IAAI,CAACwC,IAAI,EAAE,GAAA,CAAA;AAC5D,EAAA;AAEA;EACA,IAAIY,SAAAA,GAAgC;IAClC,IAAI,IAAI,CAACtB,cAAc,EAAE;MACvB,OAAO,IAAI,CAACjC,OAAO,CAACoB,QAAQ,CAAC8B,QAAQ,CAACM,MAAM,CAACC,SAAS;AACxD,IAAA;IAEA,MAAM;AAAEF,MAAAA;KAAW,GAAG,IAAI,CAACpD,IAAI;AAE/B,IAAA,IAAIoD,SAAA,KAAc,MAAM,OAAOvC,SAAA;IAC/B,IAAIuC,WAAW,OAAOA,SAAA;AAEtB,IAAA,OAAO,IAAI,CAAC3C,WAAW,EAAEC,KAAA;AAC3B,EAAA;AAEA,EAAA;IAAA6C,oBAAA,CAAAC,kBAAA,CAAA,+VAAA,EAcA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,UAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;AAEA;AACA,MAAMA,UAGD,GAAAL,oBAAA,CAAAC,kBAAA,CAAA,yiBAAA,EAsBL;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAG,KAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;;"}

package/dist/components/eui-basic-table.js

@@ -1,3 +1,4 @@
+import { registerDestructor } from '@ember/destroyable';
 import Component from '@glimmer/component';
 import { tracked, cached } from '@glimmer/tracking';
 import { fn } from '@ember/helper';
@@ -10,6 +11,7 @@ import { getItemId, getAlignForDataType, getRowProps, getRendererForDataType, sp
 import TableNode from '../-private/table-node.js';
 import { euiTablePaginationDefaults } from '../-private/table-pagination-defaults.js';
 import TabularCopyMarker from '../-private/tabular-copy-marker.js';
+import { retainDocumentListener } from '../utils/retain-document-listener.js';
 import { onTabularCopy } from '../utils/data-grid/tabular-copy.js';
 import { randomId } from '../-private/random-id.js';
 import { getEuiThemeContext } from '../utils/emotion/consume.js';
@@ -74,8 +76,8 @@ class EuiBasicTable extends Component {
   constructor(owner, args) {
     super(owner, args);
     // tabs/newlines for copied selections (upstream `OverrideCopiedTabularContent`
-    // registers it on the document; static handler: deduped)
-    document.addEventListener('copy', onTabularCopy);
+    // registers it on the document; static handler, ref-counted across instances)
+    registerDestructor(this, retainDocumentListener('copy', onTabularCopy));
   }
   /** Uncontrolled selection, `null` until the user (or `initialSelected`) sets it. */
   static {