@ember-eui/core 14.0.0 → 14.1.1

package/dist/components/eui-context-menu-panel.js

@@ -1,10 +1,194 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { schedule } from '@ember/runloop';
+import { modifier } from 'ember-modifier';
+import { tabbable } from 'tabbable';
+import ResizeObserver from '../modifiers/resize-observer.js';
+import EuiIcon from './eui-icon.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import templateOnly from '@ember/component/template-only';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
 
-const EuiContextMenuPanel = setComponentTemplate(precompileTemplate("{{!-- ToDo not yet implemented, only created to avoid creating divs with euiContextMenuPanel class --}}\n\n<div class=\"euiContextMenuPanel\" tabindex=\"-1\" ...attributes>\n  {{yield}}\n</div>", {
-  strictMode: true
-}), templateOnly());
+const TRANSITIONS = {
+  next: {
+    in: 'euiContextMenuPanel-txInLeft',
+    out: 'euiContextMenuPanel-txOutLeft'
+  },
+  previous: {
+    in: 'euiContextMenuPanel-txInRight',
+    out: 'euiContextMenuPanel-txOutRight'
+  }
+};
+/**
+ * A list of `EuiContextMenuItem`s, usually as a popover's content, with
+ * an optional title. Arrow keys move between the items. For menus with
+ * several panels (items opening sub-menus), use `EuiContextMenu`, which
+ * renders these panels for you.
+ */
+
+class EuiContextMenuPanel extends Component {
+  static {
+    g(this.prototype, "focusedItemIndex", [tracked]);
+  }
+  #focusedItemIndex = (i(this, "focusedItemIndex"), void 0);
+  constructor(owner, args) {
+    super(owner, args);
+    // only the starting point: moving with the keyboard changes it
+    this.focusedItemIndex = args.initialFocusedItemIndex;
+  }
+  panel;
+  content;
+  backButton;
+  get classes() {
+    const {
+      transitionType,
+      transitionDirection
+    } = this.args;
+    const transition = transitionType && transitionDirection ? TRANSITIONS[transitionDirection][transitionType] : undefined;
+    return ['euiContextMenuPanel', transition].filter(Boolean).join(' ');
+  }
+  get titleClasses() {
+    return this.args.size === 's' ? 'euiContextMenuPanelTitle euiContextMenuPanelTitle--small' : 'euiContextMenuPanelTitle';
+  }
+  /** The panel's own menu items (not those of a nested panel). */
+  get menuItems() {
+    if (!this.content) return [];
+    return Array.from(this.content.querySelectorAll('.euiContextMenuItem')).filter(item => item.closest('.euiContextMenuPanel') === this.panel);
+  }
+  focusItem(index) {
+    this.focusedItemIndex = index;
+    this.menuItems[index]?.focus();
+  }
+  moveFocus(amount) {
+    const items = this.menuItems;
+    const count = items.length;
+    // start from the focused item (e.g. focused by the popover on open)
+    const focused = items.indexOf(document.activeElement);
+    const current = focused !== -1 ? focused : this.focusedItemIndex;
+    // starting to use the keyboard: the first or the last item
+    const next = current === undefined || current < 0 ? amount < 0 ? count - 1 : 0 : (current + amount + count) % count;
+    this.focusItem(next);
+  }
+  onKeyDown(event) {
+    const items = this.menuItems;
+    const active = document.activeElement;
+    // with items, arrow left always goes back; otherwise only from the
+    // title or the panel, as the content (e.g. a text field) may need it
+    if (items.length || active === this.backButton || active === this.panel) {
+      if (event.key === 'ArrowLeft' && this.args.showPreviousPanel) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.args.showPreviousPanel();
+        this.args.onUseKeyboardToNavigate?.();
+        return;
+      }
+    }
+    if (!items.length) return;
+    switch (event.key) {
+      case 'Tab':
+        {
+          const index = items.indexOf(active);
+          this.focusedItemIndex = index >= 0 ? index : undefined;
+          break;
+        }
+      case 'ArrowUp':
+        event.preventDefault();
+        this.moveFocus(-1);
+        this.args.onUseKeyboardToNavigate?.();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.moveFocus(1);
+        this.args.onUseKeyboardToNavigate?.();
+        break;
+      case 'ArrowRight':
+        if (this.args.showNextPanel) {
+          event.preventDefault();
+          this.args.showNextPanel(this.focusedItemIndex);
+          this.args.onUseKeyboardToNavigate?.();
+        }
+        break;
+    }
+  }
+  static {
+    n(this.prototype, "onKeyDown", [action]);
+  }
+  onAnimationEnd(event) {
+    if (event.target === this.panel) this.args.onTransitionComplete?.();
+  }
+  static {
+    n(this.prototype, "onAnimationEnd", [action]);
+  }
+  onResize({
+    height
+  }) {
+    this.reportHeight(height);
+  }
+  // the menu sizes itself from this, so report it after rendering
+  static {
+    n(this.prototype, "onResize", [action]);
+  }
+  reportHeight(height) {
+    schedule('afterRender', () => this.args.onHeightChange?.(height));
+  }
+  /** Registers the elements, and handles focus and transitions once rendered. */
+  setup = modifier((panel, [hasFocus, transitionType]) => {
+    this.panel = panel;
+    this.reportHeight(panel.clientHeight);
+    schedule('afterRender', () => {
+      if (!panel.isConnected) return;
+      // without an animation (e.g. no CSS), the transition ends at once
+      if (transitionType && getComputedStyle(panel).animationName === 'none') {
+        this.args.onTransitionComplete?.();
+      }
+      if (!hasFocus) {
+        if (panel.contains(document.activeElement)) {
+          document.activeElement.blur();
+        }
+        return;
+      }
+      // focusing while sliding makes the animation glitch
+      if (transitionType) return;
+      this.updateFocus(panel);
+    });
+  });
+  updateFocus(panel) {
+    const items = this.menuItems;
+    if (this.focusedItemIndex === -1) {
+      panel.focus();
+      return;
+    }
+    if (!items.length) {
+      if (panel.contains(document.activeElement)) return;
+      const [first] = this.content ? tabbable(this.content) : [];
+      if (first) first.focus();else panel.focus();
+      return;
+    }
+    if (this.focusedItemIndex !== undefined && items[this.focusedItemIndex]) {
+      items[this.focusedItemIndex].focus();
+      return;
+    }
+    if (!panel.contains(document.activeElement)) panel.focus();
+  }
+  registerContent = modifier(element => {
+    this.content = element;
+  });
+  registerBackButton = modifier(element => {
+    this.backButton = element;
+  });
+  static {
+    setComponentTemplate(precompileTemplate("<div class={{this.classes}} tabindex=\"-1\" {{this.setup @hasFocus @transitionType}} {{on \"keydown\" this.onKeyDown}} {{on \"animationend\" this.onAnimationEnd}} ...attributes>\n  {{#if @title}}\n    {{#if @onClose}}\n      <button class={{this.titleClasses}} type=\"button\" data-test-subj=\"contextMenuPanelTitleButton\" {{on \"click\" @onClose}} {{this.registerBackButton}}>\n        <span class=\"euiContextMenu__itemLayout\">\n          <EuiIcon @type=\"arrowLeft\" @size=\"m\" class=\"euiContextMenu__icon\" />\n          <span class=\"euiContextMenu__text\">{{@title}}</span>\n        </span>\n      </button>\n    {{else}}\n      <div class={{this.titleClasses}}>\n        <span class=\"euiContextMenu__itemLayout\">{{@title}}</span>\n      </div>\n    {{/if}}\n  {{/if}}\n  <div {{this.registerContent}}>\n    <div {{resizeObserver onResize=this.onResize}}>\n      {{yield}}\n    </div>\n  </div>\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        EuiIcon,
+        resizeObserver: ResizeObserver
+      })
+    }), this);
+  }
+}
 
 export { EuiContextMenuPanel as default };
 //# sourceMappingURL=eui-context-menu-panel.js.map

package/dist/components/eui-context-menu-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-context-menu-panel.js","sources":["../../src/components/eui-context-menu-panel.gts"],"sourcesContent":["import type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiContextMenuPanelSignature {\n  Element: HTMLDivElement;\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiContextMenuPanel: TemplateOnlyComponent<EuiContextMenuPanelSignature> =\n  <template>\n    {{! ToDo not yet implemented, only created to avoid creating divs with euiContextMenuPanel class }}\n\n    <div class=\"euiContextMenuPanel\" tabindex=\"-1\" ...attributes>\n      {{yield}}\n    </div>\n  </template>;\n\nexport default EuiContextMenuPanel;\n"],"names":["EuiContextMenuPanel","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;AASA,MAAMA,mBACJ,GAAAC,oBAAA,CAAAC,kBAAA,CAMA,mMAAA,EAAA;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-context-menu-panel.js","sources":["../../src/components/eui-context-menu-panel.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { schedule } from '@ember/runloop';\n\nimport { modifier } from 'ember-modifier';\nimport { tabbable } from 'tabbable';\n\nimport type Owner from '@ember/owner';\n\nimport resizeObserver from '../modifiers/resize-observer.ts';\nimport EuiIcon from './eui-icon.gts';\n\ntype TransitionType = 'in' | 'out';\ntype TransitionDirection = 'next' | 'previous';\n\nconst TRANSITIONS: Record<TransitionDirection, Record<TransitionType, string>> = {\n  next: { in: 'euiContextMenuPanel-txInLeft', out: 'euiContextMenuPanel-txOutLeft' },\n  previous: { in: 'euiContextMenuPanel-txInRight', out: 'euiContextMenuPanel-txOutRight' }\n};\n\n/**\n * A list of `EuiContextMenuItem`s, usually as a popover's content, with\n * an optional title. Arrow keys move between the items. For menus with\n * several panels (items opening sub-menus), use `EuiContextMenu`, which\n * renders these panels for you.\n */\nexport interface EuiContextMenuPanelSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Title above the items. */\n    title?: string;\n    /**\n     * Makes the title a \"back\" button calling this function, e.g. to\n     * return to the previous panel.\n     */\n    onClose?: () => void;\n    /** `'s'` for a smaller title. Defaults to `'m'`. */\n    size?: 's' | 'm';\n    /**\n     * Moves focus into the panel once rendered: to the item at\n     * `@initialFocusedItemIndex`, else to its first focusable element when\n     * it has no items, else to the panel itself.\n     */\n    hasFocus?: boolean;\n    /** Index of the item to focus with `@hasFocus`; `-1` focuses the panel. */\n    initialFocusedItemIndex?: number;\n    /** @private Slide animation, set by `EuiContextMenu`. */\n    transitionType?: TransitionType;\n    /** @private Slide direction, set by `EuiContextMenu`. */\n    transitionDirection?: TransitionDirection;\n    /** @private Called when the slide animation ends. */\n    onTransitionComplete?: () => void;\n    /** @private Called with the panel's height when it changes. */\n    onHeightChange?: (height: number) => void;\n    /** @private Arrow right on an item: opens its panel. */\n    showNextPanel?: (itemIndex?: number) => void;\n    /** @private Arrow left: back to the previous panel. */\n    showPreviousPanel?: () => void;\n    /** @private Called once the keyboard is used to move around. */\n    onUseKeyboardToNavigate?: () => void;\n  };\n  Blocks: {\n    /** The `EuiContextMenuItem`s (and e.g. `EuiHorizontalRule`s), or any content. */\n    default: [];\n  };\n}\n\nexport default class EuiContextMenuPanel extends Component<EuiContextMenuPanelSignature> {\n  @tracked focusedItemIndex?: number;\n\n  constructor(owner: Owner, args: EuiContextMenuPanelSignature['Args']) {\n    super(owner, args);\n    // only the starting point: moving with the keyboard changes it\n    this.focusedItemIndex = args.initialFocusedItemIndex;\n  }\n\n  panel?: HTMLElement;\n  content?: HTMLElement;\n  backButton?: HTMLElement;\n\n  get classes(): string {\n    const { transitionType, transitionDirection } = this.args;\n    const transition =\n      transitionType && transitionDirection\n        ? TRANSITIONS[transitionDirection][transitionType]\n        : undefined;\n\n    return ['euiContextMenuPanel', transition].filter(Boolean).join(' ');\n  }\n\n  get titleClasses(): string {\n    return this.args.size === 's'\n      ? 'euiContextMenuPanelTitle euiContextMenuPanelTitle--small'\n      : 'euiContextMenuPanelTitle';\n  }\n\n  /** The panel's own menu items (not those of a nested panel). */\n  get menuItems(): HTMLElement[] {\n    if (!this.content) return [];\n\n    return Array.from(\n      this.content.querySelectorAll<HTMLElement>('.euiContextMenuItem')\n    ).filter((item) => item.closest('.euiContextMenuPanel') === this.panel);\n  }\n\n  focusItem(index: number): void {\n    this.focusedItemIndex = index;\n    this.menuItems[index]?.focus();\n  }\n\n  moveFocus(amount: number): void {\n    const items = this.menuItems;\n    const count = items.length;\n    // start from the focused item (e.g. focused by the popover on open)\n    const focused = items.indexOf(document.activeElement as HTMLElement);\n    const current = focused !== -1 ? focused : this.focusedItemIndex;\n\n    // starting to use the keyboard: the first or the last item\n    const next =\n      current === undefined || current < 0\n        ? amount < 0\n          ? count - 1\n          : 0\n        : (current + amount + count) % count;\n\n    this.focusItem(next);\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    const items = this.menuItems;\n    const active = document.activeElement;\n\n    // with items, arrow left always goes back; otherwise only from the\n    // title or the panel, as the content (e.g. a text field) may need it\n    if (items.length || active === this.backButton || active === this.panel) {\n      if (event.key === 'ArrowLeft' && this.args.showPreviousPanel) {\n        event.preventDefault();\n        event.stopPropagation();\n        this.args.showPreviousPanel();\n        this.args.onUseKeyboardToNavigate?.();\n\n        return;\n      }\n    }\n\n    if (!items.length) return;\n\n    switch (event.key) {\n      case 'Tab': {\n        const index = items.indexOf(active as HTMLElement);\n\n        this.focusedItemIndex = index >= 0 ? index : undefined;\n        break;\n      }\n      case 'ArrowUp':\n        event.preventDefault();\n        this.moveFocus(-1);\n        this.args.onUseKeyboardToNavigate?.();\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n        this.moveFocus(1);\n        this.args.onUseKeyboardToNavigate?.();\n        break;\n      case 'ArrowRight':\n        if (this.args.showNextPanel) {\n          event.preventDefault();\n          this.args.showNextPanel(this.focusedItemIndex);\n          this.args.onUseKeyboardToNavigate?.();\n        }\n        break;\n    }\n  }\n\n  @action\n  onAnimationEnd(event: AnimationEvent): void {\n    if (event.target === this.panel) this.args.onTransitionComplete?.();\n  }\n\n  @action\n  onResize({ height }: { height: number }): void {\n    this.reportHeight(height);\n  }\n\n  // the menu sizes itself from this, so report it after rendering\n  reportHeight(height: number): void {\n    schedule('afterRender', () => this.args.onHeightChange?.(height));\n  }\n\n  /** Registers the elements, and handles focus and transitions once rendered. */\n  setup = modifier(\n    (\n      panel: HTMLElement,\n      [hasFocus, transitionType]: [boolean | undefined, TransitionType | undefined]\n    ) => {\n      this.panel = panel;\n      this.reportHeight(panel.clientHeight);\n\n      schedule('afterRender', () => {\n        if (!panel.isConnected) return;\n\n        // without an animation (e.g. no CSS), the transition ends at once\n        if (transitionType && getComputedStyle(panel).animationName === 'none') {\n          this.args.onTransitionComplete?.();\n        }\n\n        if (!hasFocus) {\n          if (panel.contains(document.activeElement)) {\n            (document.activeElement as HTMLElement).blur();\n          }\n\n          return;\n        }\n\n        // focusing while sliding makes the animation glitch\n        if (transitionType) return;\n\n        this.updateFocus(panel);\n      });\n    }\n  );\n\n  updateFocus(panel: HTMLElement): void {\n    const items = this.menuItems;\n\n    if (this.focusedItemIndex === -1) {\n      panel.focus();\n\n      return;\n    }\n\n    if (!items.length) {\n      if (panel.contains(document.activeElement)) return;\n\n      const [first] = this.content ? tabbable(this.content) : [];\n\n      if (first) first.focus();\n      else panel.focus();\n\n      return;\n    }\n\n    if (this.focusedItemIndex !== undefined && items[this.focusedItemIndex]) {\n      items[this.focusedItemIndex]!.focus();\n\n      return;\n    }\n\n    if (!panel.contains(document.activeElement)) panel.focus();\n  }\n\n  registerContent = modifier((element: HTMLElement) => {\n    this.content = element;\n  });\n\n  registerBackButton = modifier((element: HTMLElement) => {\n    this.backButton = element;\n  });\n\n  <template>\n    <div\n      class={{this.classes}}\n      tabindex=\"-1\"\n      {{this.setup @hasFocus @transitionType}}\n      {{on \"keydown\" this.onKeyDown}}\n      {{on \"animationend\" this.onAnimationEnd}}\n      ...attributes\n    >\n      {{#if @title}}\n        {{#if @onClose}}\n          <button\n            class={{this.titleClasses}}\n            type=\"button\"\n            data-test-subj=\"contextMenuPanelTitleButton\"\n            {{on \"click\" @onClose}}\n            {{this.registerBackButton}}\n          >\n            <span class=\"euiContextMenu__itemLayout\">\n              <EuiIcon\n                @type=\"arrowLeft\"\n                @size=\"m\"\n                class=\"euiContextMenu__icon\"\n              />\n              <span class=\"euiContextMenu__text\">{{@title}}</span>\n            </span>\n          </button>\n        {{else}}\n          <div class={{this.titleClasses}}>\n            <span class=\"euiContextMenu__itemLayout\">{{@title}}</span>\n          </div>\n        {{/if}}\n      {{/if}}\n      <div {{this.registerContent}}>\n        <div {{resizeObserver onResize=this.onResize}}>\n          {{yield}}\n        </div>\n      </div>\n    </div>\n  </template>\n}\n"],"names":["TRANSITIONS","next","in","out","previous","EuiContextMenuPanel","Component","g","prototype","tracked","i","constructor","owner","args","focusedItemIndex","initialFocusedItemIndex","panel","content","backButton","classes","transitionType","transitionDirection","transition","undefined","filter","Boolean","join","titleClasses","size","menuItems","Array","from","querySelectorAll","item","closest","focusItem","index","focus","moveFocus","amount","items","count","length","focused","indexOf","document","activeElement","current","onKeyDown","event","active","key","showPreviousPanel","preventDefault","stopPropagation","onUseKeyboardToNavigate","showNextPanel","n","action","onAnimationEnd","target","onTransitionComplete","onResize","height","reportHeight","schedule","onHeightChange","setup","modifier","hasFocus","clientHeight","isConnected","getComputedStyle","animationName","contains","blur","updateFocus","first","tabbable","registerContent","element","registerBackButton","setComponentTemplate","precompileTemplate","strictMode","scope","on","EuiIcon","resizeObserver"],"mappings":"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"}

package/dist/components/eui-context-menu.js

@@ -0,0 +1,176 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { get, fn, hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import cssStyle from '../-private/css-style.js';
+import EuiContextMenuItemComponent from './eui-context-menu-item.js';
+import EuiContextMenuPanel from './eui-context-menu-panel.js';
+import EuiHorizontalRule from './eui-horizontal-rule.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+function itemSize(size) {
+  return size === 's' ? 's' : undefined;
+}
+function isSeparator(item) {
+  return item.isSeparator === true;
+}
+class EuiContextMenu extends Component {
+  static {
+    g(this.prototype, "incomingPanelId", [tracked]);
+  }
+  #incomingPanelId = (i(this, "incomingPanelId"), void 0);
+  static {
+    g(this.prototype, "outgoingPanelId", [tracked]);
+  }
+  #outgoingPanelId = (i(this, "outgoingPanelId"), void 0);
+  static {
+    g(this.prototype, "transitionDirection", [tracked]);
+  }
+  #transitionDirection = (i(this, "transitionDirection"), void 0);
+  static {
+    g(this.prototype, "isOutgoingPanelVisible", [tracked], function () {
+      return false;
+    });
+  }
+  #isOutgoingPanelVisible = (i(this, "isOutgoingPanelVisible"), void 0);
+  static {
+    g(this.prototype, "height", [tracked]);
+  }
+  #height = (i(this, "height"), void 0);
+  static {
+    g(this.prototype, "focusedItemIndex", [tracked]);
+  }
+  #focusedItemIndex = (i(this, "focusedItemIndex"), void 0);
+  static {
+    g(this.prototype, "isUsingKeyboardToNavigate", [tracked], function () {
+      return false;
+    });
+  }
+  #isUsingKeyboardToNavigate = (i(this, "isUsingKeyboardToNavigate"), void 0);
+  static {
+    g(this.prototype, "hasNavigated", [tracked], function () {
+      return false;
+    });
+  }
+  #hasNavigated = (i(this, "hasNavigated"), void 0);
+  /**
+  * Whether the user moved to another panel. The first panel does not take
+  * the focus (in a popover, the popover focuses its first item once it is
+  * positioned); panels reached afterwards do.
+  */
+  constructor(owner, args) {
+    super(owner, args);
+    // only the starting point: items then move between panels
+    this.incomingPanelId = args.initialPanelId;
+  }
+  get panelsById() {
+    return new Map(this.args.panels.map(panel => [panel.id, panel]));
+  }
+  /** For each panel opened from an item: the panel holding that item. */
+  get previousPanelIds() {
+    const map = new Map();
+    for (const panel of this.args.panels) {
+      for (const item of panel.items ?? []) {
+        if (!isSeparator(item) && item.panel !== undefined) map.set(item.panel, panel.id);
+      }
+    }
+    return map;
+  }
+  // one-element lists keyed by panel id, so a panel gets a new element
+  // (and its slide animation runs again) whenever the shown panel changes
+  get incomingPanels() {
+    const panel = this.panelsById.get(this.incomingPanelId);
+    return panel ? [panel] : [];
+  }
+  get outgoingPanels() {
+    const panel = this.isOutgoingPanelVisible && this.outgoingPanelId !== undefined ? this.panelsById.get(this.outgoingPanelId) : undefined;
+    return panel ? [panel] : [];
+  }
+  get width() {
+    return this.panelsById.get(this.incomingPanelId)?.width;
+  }
+  get classes() {
+    return this.args.size === 's' ? 'euiContextMenu euiContextMenu--small' : 'euiContextMenu';
+  }
+  hasPreviousPanel = panelId => this.previousPanelIds.has(panelId);
+  showPanel(panelId, direction) {
+    this.hasNavigated = true;
+    this.outgoingPanelId = this.incomingPanelId;
+    this.incomingPanelId = panelId;
+    this.transitionDirection = direction;
+    this.isOutgoingPanelVisible = true;
+  }
+  showNextPanel(itemIndex) {
+    if (itemIndex === undefined) return;
+    const item = this.panelsById.get(this.incomingPanelId)?.items?.[itemIndex];
+    const nextPanelId = item && !isSeparator(item) ? item.panel : undefined;
+    if (nextPanelId === undefined) return;
+    if (this.isUsingKeyboardToNavigate) {
+      this.focusedItemIndex = this.panelsById.get(nextPanelId)?.initialFocusedItemIndex ?? 0;
+    }
+    this.showPanel(nextPanelId, 'next');
+  }
+  static {
+    n(this.prototype, "showNextPanel", [action]);
+  }
+  showPreviousPanel() {
+    const previousPanelId = this.previousPanelIds.get(this.incomingPanelId);
+    if (previousPanelId === undefined) return;
+    // focus the item that opened the panel we are leaving
+    const index = (this.panelsById.get(previousPanelId)?.items ?? []).findIndex(item => !isSeparator(item) && item.panel === this.incomingPanelId);
+    if (index !== -1) this.focusedItemIndex = index;
+    this.showPanel(previousPanelId, 'previous');
+  }
+  static {
+    n(this.prototype, "showPreviousPanel", [action]);
+  }
+  onItemClick(item, index, event) {
+    if (isSeparator(item)) return;
+    item.onClick?.(event);
+    if (item.panel !== undefined) this.showNextPanel(index);
+  }
+  static {
+    n(this.prototype, "onItemClick", [action]);
+  }
+  onOutgoingTransitionComplete() {
+    this.isOutgoingPanelVisible = false;
+  }
+  static {
+    n(this.prototype, "onOutgoingTransitionComplete", [action]);
+  }
+  onIncomingHeightChange(height) {
+    if (height !== this.height) this.height = height;
+  }
+  static {
+    n(this.prototype, "onIncomingHeightChange", [action]);
+  }
+  onUseKeyboardToNavigate() {
+    if (!this.isUsingKeyboardToNavigate) this.isUsingKeyboardToNavigate = true;
+  }
+  static {
+    n(this.prototype, "onUseKeyboardToNavigate", [action]);
+  }
+  initialFocusedItemIndex = panel => this.isUsingKeyboardToNavigate ? this.focusedItemIndex : panel.initialFocusedItemIndex;
+  static {
+    setComponentTemplate(precompileTemplate("<div class={{this.classes}} style={{cssStyle (hash height=this.height width=this.width)}} ...attributes>\n  {{#each this.outgoingPanels key=\"id\" as |panel|}}\n    <EuiContextMenuPanel class=\"euiContextMenu__panel\" @title={{panel.title}} @size={{@size}} @transitionType=\"out\" @transitionDirection={{this.transitionDirection}} @onTransitionComplete={{this.onOutgoingTransitionComplete}} @hasFocus={{false}}>\n      {{#if panel.items}}\n        {{#each panel.items as |item index|}}\n          {{#if item.isSeparator}}\n            <EuiHorizontalRule @margin=\"none\" />\n          {{else}}\n            <EuiContextMenuItem @icon={{item.icon}} @hasPanel={{if item.panel true false}} @href={{item.href}} @target={{item.target}} @disabled={{item.disabled}} @layoutAlign={{item.layoutAlign}} @size={{itemSize @size}} {{on \"click\" (fn this.onItemClick item index)}}>{{item.name}}</EuiContextMenuItem>\n          {{/if}}\n        {{/each}}\n      {{else}}\n        {{yield panel to=\"content\"}}\n      {{/if}}\n    </EuiContextMenuPanel>\n  {{/each}}\n  {{#each this.incomingPanels key=\"id\" as |panel|}}\n    <EuiContextMenuPanel class=\"euiContextMenu__panel\" @title={{panel.title}} @size={{@size}} @onClose={{if (this.hasPreviousPanel panel.id) this.showPreviousPanel}} @transitionType={{if this.isOutgoingPanelVisible \"in\"}} @transitionDirection={{if this.isOutgoingPanelVisible this.transitionDirection}} @hasFocus={{this.hasNavigated}} @initialFocusedItemIndex={{this.initialFocusedItemIndex panel}} @onHeightChange={{this.onIncomingHeightChange}} @showNextPanel={{this.showNextPanel}} @showPreviousPanel={{this.showPreviousPanel}} @onUseKeyboardToNavigate={{this.onUseKeyboardToNavigate}}>\n      {{#if panel.items}}\n        {{#each panel.items as |item index|}}\n          {{#if item.isSeparator}}\n            <EuiHorizontalRule @margin=\"none\" />\n          {{else}}\n            <EuiContextMenuItem @icon={{item.icon}} @hasPanel={{if item.panel true false}} @href={{item.href}} @target={{item.target}} @disabled={{item.disabled}} @layoutAlign={{item.layoutAlign}} @size={{itemSize @size}} data-test-subj={{get item \"data-test-subj\"}} {{on \"click\" (fn this.onItemClick item index)}}>{{item.name}}</EuiContextMenuItem>\n          {{/if}}\n        {{/each}}\n      {{else}}\n        {{yield panel to=\"content\"}}\n      {{/if}}\n    </EuiContextMenuPanel>\n  {{/each}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        cssStyle,
+        hash,
+        EuiContextMenuPanel,
+        EuiHorizontalRule,
+        EuiContextMenuItem: EuiContextMenuItemComponent,
+        itemSize,
+        on,
+        fn,
+        get
+      })
+    }), this);
+  }
+}
+
+export { EuiContextMenu as default };
+//# sourceMappingURL=eui-context-menu.js.map

package/dist/components/eui-context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-context-menu.js","sources":["../../src/components/eui-context-menu.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { fn, get, hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\n\nimport cssStyle from '../-private/css-style.ts';\nimport EuiContextMenuItem from './eui-context-menu-item.gts';\nimport EuiContextMenuPanel from './eui-context-menu-panel.gts';\nimport EuiHorizontalRule from './eui-horizontal-rule.gts';\n\nimport type { EuiContextMenuItemSignature } from './eui-context-menu-item';\nimport type Owner from '@ember/owner';\n\ntype PanelId = string | number;\n\n/** One entry of a panel: an item, or a separator (`{ isSeparator: true }`). */\nexport type EuiContextMenuPanelItem =\n  | { isSeparator: true; key?: string }\n  | {\n      isSeparator?: false;\n      /** The item's text. */\n      name: string;\n      /** Icon before the text, any `EuiIcon` type. */\n      icon?: EuiContextMenuItemSignature['Args']['icon'];\n      /** Id of the panel this item opens (it gets an arrow). */\n      panel?: PanelId;\n      /** Called when the item is clicked (also when it opens a panel). */\n      onClick?: (event: MouseEvent) => void;\n      /** Makes the item a link. */\n      href?: string;\n      /** `target` of the link. */\n      target?: string;\n      /** Disables the item. */\n      disabled?: boolean;\n      /** Aligns the icon with the `'center'` or the `'top'` of the text. */\n      layoutAlign?: EuiContextMenuItemSignature['Args']['layoutAlign'];\n      /** `data-test-subj` of the item, for tests. */\n      'data-test-subj'?: string;\n    };\n\nexport interface EuiContextMenuPanelDescriptor {\n  /** Unique id; items open the panel with `panel: id`. */\n  id: PanelId;\n  /** Title of the panel (a back button on panels opened from another). */\n  title?: string;\n  /**\n   * The panel's items. Without items, the `<:content>` block renders the\n   * panel's content instead (e.g. a form).\n   */\n  items?: EuiContextMenuPanelItem[];\n  /** Width of the menu while this panel is shown, e.g. `400` (px). */\n  width?: number | string;\n  /** Item to focus when the panel opens. */\n  initialFocusedItemIndex?: number;\n}\n\n/**\n * A menu of panels: items can open another panel (a sub-menu), which\n * slides in with a back button to return. Usually the content of an\n * `EuiPopover`. For a single list of items, `EuiContextMenuPanel` is\n * enough.\n */\nexport interface EuiContextMenuSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Every panel, flat: an item's `panel` is the id of the panel it opens. */\n    panels: EuiContextMenuPanelDescriptor[];\n    /** Id of the panel shown first. */\n    initialPanelId: PanelId;\n    /** `'s'` for smaller items and titles. Defaults to `'m'`. */\n    size?: 's' | 'm';\n  };\n  Blocks: {\n    /** Content of the panels without `items`; yields the panel. */\n    content: [panel: EuiContextMenuPanelDescriptor];\n  };\n}\n\ntype Direction = 'next' | 'previous';\n\nfunction itemSize(size?: 's' | 'm'): 's' | undefined {\n  return size === 's' ? 's' : undefined;\n}\n\nfunction isSeparator(\n  item: EuiContextMenuPanelItem\n): item is { isSeparator: true; key?: string } {\n  return item.isSeparator === true;\n}\n\nexport default class EuiContextMenu extends Component<EuiContextMenuSignature> {\n  @tracked incomingPanelId: PanelId;\n  @tracked outgoingPanelId?: PanelId;\n  @tracked transitionDirection?: Direction;\n  @tracked isOutgoingPanelVisible = false;\n  @tracked height?: number;\n  @tracked focusedItemIndex?: number;\n  @tracked isUsingKeyboardToNavigate = false;\n  /**\n   * Whether the user moved to another panel. The first panel does not take\n   * the focus (in a popover, the popover focuses its first item once it is\n   * positioned); panels reached afterwards do.\n   */\n  @tracked hasNavigated = false;\n\n  constructor(owner: Owner, args: EuiContextMenuSignature['Args']) {\n    super(owner, args);\n    // only the starting point: items then move between panels\n    this.incomingPanelId = args.initialPanelId;\n  }\n\n  get panelsById(): Map<PanelId, EuiContextMenuPanelDescriptor> {\n    return new Map(this.args.panels.map((panel) => [panel.id, panel]));\n  }\n\n  /** For each panel opened from an item: the panel holding that item. */\n  get previousPanelIds(): Map<PanelId, PanelId> {\n    const map = new Map<PanelId, PanelId>();\n\n    for (const panel of this.args.panels) {\n      for (const item of panel.items ?? []) {\n        if (!isSeparator(item) && item.panel !== undefined) map.set(item.panel, panel.id);\n      }\n    }\n\n    return map;\n  }\n\n  // one-element lists keyed by panel id, so a panel gets a new element\n  // (and its slide animation runs again) whenever the shown panel changes\n  get incomingPanels(): EuiContextMenuPanelDescriptor[] {\n    const panel = this.panelsById.get(this.incomingPanelId);\n\n    return panel ? [panel] : [];\n  }\n\n  get outgoingPanels(): EuiContextMenuPanelDescriptor[] {\n    const panel =\n      this.isOutgoingPanelVisible && this.outgoingPanelId !== undefined\n        ? this.panelsById.get(this.outgoingPanelId)\n        : undefined;\n\n    return panel ? [panel] : [];\n  }\n\n  get width(): number | string | undefined {\n    return this.panelsById.get(this.incomingPanelId)?.width;\n  }\n\n  get classes(): string {\n    return this.args.size === 's' ? 'euiContextMenu euiContextMenu--small' : 'euiContextMenu';\n  }\n\n  hasPreviousPanel = (panelId: PanelId): boolean => this.previousPanelIds.has(panelId);\n\n  showPanel(panelId: PanelId, direction: Direction): void {\n    this.hasNavigated = true;\n    this.outgoingPanelId = this.incomingPanelId;\n    this.incomingPanelId = panelId;\n    this.transitionDirection = direction;\n    this.isOutgoingPanelVisible = true;\n  }\n\n  @action\n  showNextPanel(itemIndex?: number): void {\n    if (itemIndex === undefined) return;\n\n    const item = this.panelsById.get(this.incomingPanelId)?.items?.[itemIndex];\n    const nextPanelId = item && !isSeparator(item) ? item.panel : undefined;\n\n    if (nextPanelId === undefined) return;\n\n    if (this.isUsingKeyboardToNavigate) {\n      this.focusedItemIndex = this.panelsById.get(nextPanelId)?.initialFocusedItemIndex ?? 0;\n    }\n\n    this.showPanel(nextPanelId, 'next');\n  }\n\n  @action\n  showPreviousPanel(): void {\n    const previousPanelId = this.previousPanelIds.get(this.incomingPanelId);\n\n    if (previousPanelId === undefined) return;\n\n    // focus the item that opened the panel we are leaving\n    const index = (this.panelsById.get(previousPanelId)?.items ?? []).findIndex(\n      (item) => !isSeparator(item) && item.panel === this.incomingPanelId\n    );\n\n    if (index !== -1) this.focusedItemIndex = index;\n\n    this.showPanel(previousPanelId, 'previous');\n  }\n\n  @action\n  onItemClick(item: EuiContextMenuPanelItem, index: number, event: MouseEvent): void {\n    if (isSeparator(item)) return;\n\n    item.onClick?.(event);\n\n    if (item.panel !== undefined) this.showNextPanel(index);\n  }\n\n  @action\n  onOutgoingTransitionComplete(): void {\n    this.isOutgoingPanelVisible = false;\n  }\n\n  @action\n  onIncomingHeightChange(height: number): void {\n    if (height !== this.height) this.height = height;\n  }\n\n  @action\n  onUseKeyboardToNavigate(): void {\n    if (!this.isUsingKeyboardToNavigate) this.isUsingKeyboardToNavigate = true;\n  }\n\n  initialFocusedItemIndex = (panel: EuiContextMenuPanelDescriptor): number | undefined =>\n    this.isUsingKeyboardToNavigate ? this.focusedItemIndex : panel.initialFocusedItemIndex;\n\n  <template>\n    <div\n      class={{this.classes}}\n      style={{cssStyle (hash height=this.height width=this.width)}}\n      ...attributes\n    >\n      {{#each this.outgoingPanels key=\"id\" as |panel|}}\n        <EuiContextMenuPanel\n          class=\"euiContextMenu__panel\"\n          @title={{panel.title}}\n          @size={{@size}}\n          @transitionType=\"out\"\n          @transitionDirection={{this.transitionDirection}}\n          @onTransitionComplete={{this.onOutgoingTransitionComplete}}\n          @hasFocus={{false}}\n        >\n          {{#if panel.items}}\n            {{#each panel.items as |item index|}}\n              {{#if item.isSeparator}}\n                <EuiHorizontalRule @margin=\"none\" />\n              {{else}}\n                <EuiContextMenuItem\n                  @icon={{item.icon}}\n                  @hasPanel={{if item.panel true false}}\n                  @href={{item.href}}\n                  @target={{item.target}}\n                  @disabled={{item.disabled}}\n                  @layoutAlign={{item.layoutAlign}}\n                  @size={{itemSize @size}}\n                  {{on \"click\" (fn this.onItemClick item index)}}\n                >{{item.name}}</EuiContextMenuItem>\n              {{/if}}\n            {{/each}}\n          {{else}}\n            {{yield panel to=\"content\"}}\n          {{/if}}\n        </EuiContextMenuPanel>\n      {{/each}}\n      {{#each this.incomingPanels key=\"id\" as |panel|}}\n        <EuiContextMenuPanel\n          class=\"euiContextMenu__panel\"\n          @title={{panel.title}}\n          @size={{@size}}\n          @onClose={{if\n            (this.hasPreviousPanel panel.id)\n            this.showPreviousPanel\n          }}\n          @transitionType={{if this.isOutgoingPanelVisible \"in\"}}\n          @transitionDirection={{if\n            this.isOutgoingPanelVisible\n            this.transitionDirection\n          }}\n          @hasFocus={{this.hasNavigated}}\n          @initialFocusedItemIndex={{this.initialFocusedItemIndex panel}}\n          @onHeightChange={{this.onIncomingHeightChange}}\n          @showNextPanel={{this.showNextPanel}}\n          @showPreviousPanel={{this.showPreviousPanel}}\n          @onUseKeyboardToNavigate={{this.onUseKeyboardToNavigate}}\n        >\n          {{#if panel.items}}\n            {{#each panel.items as |item index|}}\n              {{#if item.isSeparator}}\n                <EuiHorizontalRule @margin=\"none\" />\n              {{else}}\n                <EuiContextMenuItem\n                  @icon={{item.icon}}\n                  @hasPanel={{if item.panel true false}}\n                  @href={{item.href}}\n                  @target={{item.target}}\n                  @disabled={{item.disabled}}\n                  @layoutAlign={{item.layoutAlign}}\n                  @size={{itemSize @size}}\n                  data-test-subj={{get item \"data-test-subj\"}}\n                  {{on \"click\" (fn this.onItemClick item index)}}\n                >{{item.name}}</EuiContextMenuItem>\n              {{/if}}\n            {{/each}}\n          {{else}}\n            {{yield panel to=\"content\"}}\n          {{/if}}\n        </EuiContextMenuPanel>\n      {{/each}}\n    </div>\n  </template>\n}\n"],"names":["itemSize","size","undefined","isSeparator","item","EuiContextMenu","Component","g","prototype","tracked","i","constructor","owner","args","incomingPanelId","initialPanelId","panelsById","Map","panels","map","panel","id","previousPanelIds","items","set","incomingPanels","get","outgoingPanels","isOutgoingPanelVisible","outgoingPanelId","width","classes","hasPreviousPanel","panelId","has","showPanel","direction","hasNavigated","transitionDirection","showNextPanel","itemIndex","nextPanelId","isUsingKeyboardToNavigate","focusedItemIndex","initialFocusedItemIndex","n","action","showPreviousPanel","previousPanelId","index","findIndex","onItemClick","event","onClick","onOutgoingTransitionComplete","onIncomingHeightChange","height","onUseKeyboardToNavigate","setComponentTemplate","precompileTemplate","strictMode","scope","cssStyle","hash","EuiContextMenuPanel","EuiHorizontalRule","EuiContextMenuItem","on","fn"],"mappings":"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"}

package/dist/components/eui-control-bar.js

@@ -0,0 +1,113 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash, fn, get } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { modifier } from 'ember-modifier';
+import cssStyle from '../-private/css-style.js';
+import EuiBreadcrumbs from './eui-breadcrumbs.js';
+import EuiButton from './eui-button.js';
+import EuiButtonIcon from './eui-button-icon.js';
+import EuiIcon from './eui-icon.js';
+import EuiPortal from './eui-portal.js';
+import EuiScreenReaderOnly from './eui-screen-reader-only.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+class EuiControlBar extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "selectedTab", [tracked]);
+  }
+  #selectedTab = (i(this, "selectedTab"), void 0);
+  get position() {
+    return this.args.position ?? 'fixed';
+  }
+  get isFixed() {
+    return this.position === 'fixed';
+  }
+  get classes() {
+    const {
+      showContent,
+      showOnMobile
+    } = this.args;
+    return ['euiControlBar', showContent && 'euiControlBar-isOpen', `euiControlBar--${{
+      s: 'small',
+      m: 'medium',
+      l: 'large'
+    }[this.args.size ?? 'l']}`, `euiControlBar--${this.position}`, showOnMobile && 'euiControlBar--showOnMobile'].filter(Boolean).join(' ');
+  }
+  get heading() {
+    return this.args.landmarkHeading ?? this.euiI18n.lookupToken('euiControlBar.screenReaderHeading', 'Page level controls');
+  }
+  get announcement() {
+    return this.args.landmarkHeading ? this.euiI18n.lookupToken('euiControlBar.customScreenReaderAnnouncement', 'There is a new region landmark called {landmarkHeading} with page level controls at the end of the document.', {
+      landmarkHeading: this.args.landmarkHeading
+    }) : this.euiI18n.lookupToken('euiControlBar.screenReaderAnnouncement', 'There is a new region landmark with page level controls at the end of the document.');
+  }
+  tabClasses = (id, className) => ['euiControlBar__tab', this.args.showContent && id === this.selectedTab && 'euiControlBar__tab--active', className].filter(Boolean).join(' ');
+  onTabClick(control, event) {
+    this.selectedTab = control.id;
+    control.onClick(event);
+  }
+  /** A fixed bar pads the bottom of `<body>` by its height while shown. */
+  static {
+    n(this.prototype, "onTabClick", [action]);
+  }
+  padBody = modifier((controls, [isFixed, bodyClassName]) => {
+    if (!isFixed) return;
+    document.body.style.paddingBottom = `${controls.clientHeight}px`;
+    if (bodyClassName) document.body.classList.add(bodyClassName);
+    return () => {
+      document.body.style.paddingBottom = '';
+      if (bodyClassName) document.body.classList.remove(bodyClassName);
+    };
+  });
+  static {
+    setComponentTemplate(precompileTemplate("{{#if this.isFixed}}\n  <EuiPortal>\n    {{!-- template-lint-disable no-duplicate-landmark-elements --}}\n    <section class={{this.classes}} aria-label={{this.heading}} style={{cssStyle (hash left=(if @leftOffset @leftOffset 0) right=(if @rightOffset @rightOffset 0) maxHeight=@maxHeight)}} ...attributes>\n      <EuiScreenReaderOnly><h2>{{this.heading}}</h2></EuiScreenReaderOnly>\n      <div class=\"euiControlBar__controls\" {{this.padBody true @bodyClassName}}>\n        {{#each @controls as |control|}}\n          <Control @control={{control}} @tabClasses={{this.tabClasses}} @onTabClick={{this.onTabClick}} />\n        {{/each}}\n      </div>\n      {{#if @showContent}}\n        <div class=\"euiControlBar__content\">{{yield}}</div>\n      {{/if}}\n    </section>\n    <EuiScreenReaderOnly>\n      <p aria-live=\"assertive\">{{this.announcement}}</p>\n    </EuiScreenReaderOnly>\n  </EuiPortal>\n{{else}}\n  <section class={{this.classes}} aria-label={{this.heading}} style={{cssStyle (hash left=(if @leftOffset @leftOffset 0) right=(if @rightOffset @rightOffset 0) maxHeight=@maxHeight)}} ...attributes>\n    <EuiScreenReaderOnly><h2>{{this.heading}}</h2></EuiScreenReaderOnly>\n    <div class=\"euiControlBar__controls\">\n      {{#each @controls as |control|}}\n        <Control @control={{control}} @tabClasses={{this.tabClasses}} @onTabClick={{this.onTabClick}} />\n      {{/each}}\n    </div>\n    {{#if @showContent}}\n      <div class=\"euiControlBar__content\">{{yield}}</div>\n    {{/if}}\n  </section>\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        EuiPortal,
+        cssStyle,
+        hash,
+        EuiScreenReaderOnly,
+        Control
+      })
+    }), this);
+  }
+}
+function is(control, type) {
+  return control.controlType === type ? control : undefined;
+}
+function noop() {}
+const Control = setComponentTemplate(precompileTemplate("{{#let (is @control \"button\") (is @control \"icon\") (is @control \"tab\") (is @control \"text\") (is @control \"breadcrumbs\") as |buttonControl iconControl tabControl textControl crumbsControl|}}\n  {{#if buttonControl}}\n    <EuiButton class=\"euiControlBar__button {{buttonControl.className}}\" @color={{if buttonControl.color buttonControl.color \"ghost\"}} @size=\"s\" @href={{buttonControl.href}} @iconType={{buttonControl.iconType}} @isDisabled={{buttonControl.isDisabled}} {{on \"click\" (if buttonControl.onClick buttonControl.onClick noop)}}>{{buttonControl.label}}</EuiButton>\n  {{else if iconControl}}\n    {{#if (or2 iconControl.onClick iconControl.href)}}\n      <EuiButtonIcon class=\"euiControlBar__buttonIcon {{iconControl.className}}\" @iconType={{iconControl.iconType}} @href={{iconControl.href}} @color={{if iconControl.color iconControl.color \"ghost\"}} aria-label={{get iconControl \"aria-label\"}} {{on \"click\" (if iconControl.onClick iconControl.onClick noop)}} />\n    {{else}}\n      <EuiIcon class=\"euiControlBar__icon {{iconControl.className}}\" @type={{iconControl.iconType}} @color={{if iconControl.color iconControl.color \"ghost\"}} aria-label={{get iconControl \"aria-label\"}} />\n    {{/if}}\n  {{else if tabControl}}\n    <button type=\"button\" class={{@tabClasses tabControl.id tabControl.className}} {{on \"click\" (fn @onTabClick tabControl)}}>{{tabControl.label}}</button>\n  {{else if textControl}}\n    <div class=\"euiControlBar__text {{textControl.className}}\">{{textControl.text}}</div>\n  {{else if crumbsControl}}\n    <EuiBreadcrumbs class=\"euiControlBar__breadcrumbs\" @breadcrumbs={{crumbsControl.breadcrumbs}} />\n  {{else if (eq2 @control.controlType \"divider\")}}\n    <div class=\"euiControlBar__divider\"></div>\n  {{else if (eq2 @control.controlType \"spacer\")}}\n    <div class=\"euiControlBar__spacer\"></div>\n  {{/if}}\n{{/let}}", {
+  strictMode: true,
+  scope: () => ({
+    is,
+    EuiButton,
+    on,
+    noop,
+    or2,
+    EuiButtonIcon,
+    get,
+    EuiIcon,
+    fn,
+    EuiBreadcrumbs,
+    eq2
+  })
+}), templateOnly());
+function or2(a, b) {
+  return Boolean(a || b);
+}
+function eq2(a, b) {
+  return a === b;
+}
+
+export { EuiControlBar as default };
+//# sourceMappingURL=eui-control-bar.js.map

package/dist/components/eui-control-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-control-bar.js","sources":["../../src/components/eui-control-bar.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { fn, get, hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport { modifier } from 'ember-modifier';\n\nimport cssStyle from '../-private/css-style.ts';\nimport EuiBreadcrumbs from './eui-breadcrumbs.gts';\nimport EuiButton from './eui-button.gts';\nimport EuiButtonIcon from './eui-button-icon.gts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiPortal from './eui-portal.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { EuiBreadcrumb } from './eui-breadcrumbs';\nimport type { EuiIconSignature } from './eui-icon';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** A control in the bar; `controlType` decides which. */\nexport type EuiControlBarControl =\n  | {\n      controlType: 'button';\n      id: string;\n      label: string;\n      onClick?: (event: MouseEvent) => void;\n      href?: string;\n      /** Any `EuiButton` color. Defaults to `'ghost'`. */\n      color?: string;\n      iconType?: EuiIconSignature['Args']['type'];\n      isDisabled?: boolean;\n      className?: string;\n    }\n  | {\n      controlType: 'icon';\n      id: string;\n      iconType: EuiIconSignature['Args']['type'];\n      /** Makes it a button (with `href`, a link); otherwise a plain icon. */\n      onClick?: (event: MouseEvent) => void;\n      href?: string;\n      /** Accessible label; needed for icon buttons. */\n      'aria-label'?: string;\n      /** Any `EuiButtonIcon` color. Defaults to `'ghost'`. */\n      color?: 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'ghost' | 'text';\n      className?: string;\n    }\n  | {\n      controlType: 'tab';\n      id: string;\n      label: string;\n      /** Usually toggles `@showContent` and shows this tab's content. */\n      onClick: (event: MouseEvent) => void;\n      className?: string;\n    }\n  | { controlType: 'text'; id: string; text: string; className?: string }\n  | { controlType: 'breadcrumbs'; id: string; breadcrumbs: EuiBreadcrumb[] }\n  | { controlType: 'divider' }\n  | { controlType: 'spacer' };\n\n/**\n * A dark bar of controls at the bottom of the page (or of a container),\n * e.g. an editor's toolbar or a code console: buttons, icons, text,\n * breadcrumbs and tabs that open a content area above it.\n */\nexport interface EuiControlBarSignature {\n  Element: HTMLElement;\n  Args: {\n    /** The controls, from left to right. */\n    controls: EuiControlBarControl[];\n    /** Shows the content (the default block) above the controls. */\n    showContent?: boolean;\n    /** Height of the content area: `'s'`, `'m'` or `'l'`. Defaults to `'l'`. */\n    size?: 's' | 'm' | 'l';\n    /**\n     * `'fixed'` (bottom of the window, rendered at the end of `<body>`),\n     * `'absolute'` or `'relative'` (inside a positioned container).\n     * Defaults to `'fixed'`.\n     */\n    position?: 'fixed' | 'absolute' | 'relative';\n    /** Space on the left, e.g. for a side navigation. Defaults to `0`. */\n    leftOffset?: number | string;\n    /** Space on the right. Defaults to `0`. */\n    rightOffset?: number | string;\n    /** Maximum height of the bar with its content. */\n    maxHeight?: number | string;\n    /** Keeps the bar on small screens (hidden there by default). */\n    showOnMobile?: boolean;\n    /** Class added to `<body>` while a fixed bar is shown. */\n    bodyClassName?: string;\n    /** Accessible name of the bar's region. Defaults to \"Page level controls\". */\n    landmarkHeading?: string;\n  };\n  Blocks: {\n    /** Content shown above the controls while `@showContent`. */\n    default: [];\n  };\n}\n\nexport default class EuiControlBar extends Component<EuiControlBarSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked selectedTab?: string;\n\n  get position(): string {\n    return this.args.position ?? 'fixed';\n  }\n\n  get isFixed(): boolean {\n    return this.position === 'fixed';\n  }\n\n  get classes(): string {\n    const { showContent, showOnMobile } = this.args;\n\n    return [\n      'euiControlBar',\n      showContent && 'euiControlBar-isOpen',\n      `euiControlBar--${{ s: 'small', m: 'medium', l: 'large' }[this.args.size ?? 'l']}`,\n      `euiControlBar--${this.position}`,\n      showOnMobile && 'euiControlBar--showOnMobile'\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  get heading(): string {\n    return (\n      this.args.landmarkHeading ??\n      this.euiI18n.lookupToken('euiControlBar.screenReaderHeading', 'Page level controls')\n    );\n  }\n\n  get announcement(): string {\n    return this.args.landmarkHeading\n      ? this.euiI18n.lookupToken(\n          'euiControlBar.customScreenReaderAnnouncement',\n          'There is a new region landmark called {landmarkHeading} with page level controls at the end of the document.',\n          { landmarkHeading: this.args.landmarkHeading }\n        )\n      : this.euiI18n.lookupToken(\n          'euiControlBar.screenReaderAnnouncement',\n          'There is a new region landmark with page level controls at the end of the document.'\n        );\n  }\n\n  tabClasses = (id: string, className?: string): string =>\n    [\n      'euiControlBar__tab',\n      this.args.showContent && id === this.selectedTab && 'euiControlBar__tab--active',\n      className\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n  @action\n  onTabClick(control: { id: string; onClick: (event: MouseEvent) => void }, event: MouseEvent): void {\n    this.selectedTab = control.id;\n    control.onClick(event);\n  }\n\n  /** A fixed bar pads the bottom of `<body>` by its height while shown. */\n  padBody = modifier((controls: HTMLElement, [isFixed, bodyClassName]: [boolean, string | undefined]) => {\n    if (!isFixed) return;\n\n    document.body.style.paddingBottom = `${controls.clientHeight}px`;\n    if (bodyClassName) document.body.classList.add(bodyClassName);\n\n    return () => {\n      document.body.style.paddingBottom = '';\n      if (bodyClassName) document.body.classList.remove(bodyClassName);\n    };\n  });\n\n  <template>\n    {{#if this.isFixed}}\n      <EuiPortal>\n        {{! template-lint-disable no-duplicate-landmark-elements }}\n        <section\n          class={{this.classes}}\n          aria-label={{this.heading}}\n          style={{cssStyle\n            (hash\n              left=(if @leftOffset @leftOffset 0)\n              right=(if @rightOffset @rightOffset 0)\n              maxHeight=@maxHeight\n            )\n          }}\n          ...attributes\n        >\n          <EuiScreenReaderOnly><h2>{{this.heading}}</h2></EuiScreenReaderOnly>\n          <div class=\"euiControlBar__controls\" {{this.padBody true @bodyClassName}}>\n            {{#each @controls as |control|}}\n              <Control\n                @control={{control}}\n                @tabClasses={{this.tabClasses}}\n                @onTabClick={{this.onTabClick}}\n              />\n            {{/each}}\n          </div>\n          {{#if @showContent}}\n            <div class=\"euiControlBar__content\">{{yield}}</div>\n          {{/if}}\n        </section>\n        <EuiScreenReaderOnly>\n          <p aria-live=\"assertive\">{{this.announcement}}</p>\n        </EuiScreenReaderOnly>\n      </EuiPortal>\n    {{else}}\n      <section\n        class={{this.classes}}\n        aria-label={{this.heading}}\n        style={{cssStyle\n          (hash\n            left=(if @leftOffset @leftOffset 0)\n            right=(if @rightOffset @rightOffset 0)\n            maxHeight=@maxHeight\n          )\n        }}\n        ...attributes\n      >\n        <EuiScreenReaderOnly><h2>{{this.heading}}</h2></EuiScreenReaderOnly>\n        <div class=\"euiControlBar__controls\">\n          {{#each @controls as |control|}}\n            <Control\n                @control={{control}}\n                @tabClasses={{this.tabClasses}}\n                @onTabClick={{this.onTabClick}}\n              />\n          {{/each}}\n        </div>\n        {{#if @showContent}}\n          <div class=\"euiControlBar__content\">{{yield}}</div>\n        {{/if}}\n      </section>\n    {{/if}}\n  </template>\n}\n\ninterface ControlSignature {\n  Args: {\n    control: EuiControlBarControl;\n    tabClasses: (id: string, className?: string) => string;\n    onTabClick: (control: { id: string; onClick: (event: MouseEvent) => void }, event: MouseEvent) => void;\n  };\n}\n\nfunction is<T extends EuiControlBarControl['controlType']>(\n  control: EuiControlBarControl,\n  type: T\n): Extract<EuiControlBarControl, { controlType: T }> | undefined {\n  return control.controlType === type\n    ? (control as Extract<EuiControlBarControl, { controlType: T }>)\n    : undefined;\n}\n\nfunction noop(): void {}\n\nconst Control: TemplateOnlyComponent<ControlSignature> = <template>\n  {{#let\n    (is @control \"button\")\n    (is @control \"icon\")\n    (is @control \"tab\")\n    (is @control \"text\")\n    (is @control \"breadcrumbs\")\n    as |buttonControl iconControl tabControl textControl crumbsControl|\n  }}\n    {{#if buttonControl}}\n      <EuiButton\n        class=\"euiControlBar__button {{buttonControl.className}}\"\n        @color={{if buttonControl.color buttonControl.color \"ghost\"}}\n        @size=\"s\"\n        @href={{buttonControl.href}}\n        @iconType={{buttonControl.iconType}}\n        @isDisabled={{buttonControl.isDisabled}}\n        {{on \"click\" (if buttonControl.onClick buttonControl.onClick noop)}}\n      >{{buttonControl.label}}</EuiButton>\n    {{else if iconControl}}\n      {{#if (or2 iconControl.onClick iconControl.href)}}\n        <EuiButtonIcon\n          class=\"euiControlBar__buttonIcon {{iconControl.className}}\"\n          @iconType={{iconControl.iconType}}\n          @href={{iconControl.href}}\n          @color={{if iconControl.color iconControl.color \"ghost\"}}\n          aria-label={{get iconControl \"aria-label\"}}\n          {{on \"click\" (if iconControl.onClick iconControl.onClick noop)}}\n        />\n      {{else}}\n        <EuiIcon\n          class=\"euiControlBar__icon {{iconControl.className}}\"\n          @type={{iconControl.iconType}}\n          @color={{if iconControl.color iconControl.color \"ghost\"}}\n          aria-label={{get iconControl \"aria-label\"}}\n        />\n      {{/if}}\n    {{else if tabControl}}\n      <button\n        type=\"button\"\n        class={{@tabClasses tabControl.id tabControl.className}}\n        {{on \"click\" (fn @onTabClick tabControl)}}\n      >{{tabControl.label}}</button>\n    {{else if textControl}}\n      <div class=\"euiControlBar__text {{textControl.className}}\">{{textControl.text}}</div>\n    {{else if crumbsControl}}\n      <EuiBreadcrumbs\n        class=\"euiControlBar__breadcrumbs\"\n        @breadcrumbs={{crumbsControl.breadcrumbs}}\n      />\n    {{else if (eq2 @control.controlType \"divider\")}}\n      <div class=\"euiControlBar__divider\"></div>\n    {{else if (eq2 @control.controlType \"spacer\")}}\n      <div class=\"euiControlBar__spacer\"></div>\n    {{/if}}\n  {{/let}}\n</template>;\n\nfunction or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n\nfunction eq2(a: unknown, b: unknown): boolean {\n  return a === b;\n}\n"],"names":["EuiControlBar","Component","g","prototype","service","i","tracked","position","args","isFixed","classes","showContent","showOnMobile","s","m","l","size","filter","Boolean","join","heading","landmarkHeading","euiI18n","lookupToken","announcement","tabClasses","id","className","selectedTab","onTabClick","control","event","onClick","n","action","padBody","modifier","controls","bodyClassName","document","body","style","paddingBottom","clientHeight","classList","add","remove","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPortal","cssStyle","hash","EuiScreenReaderOnly","Control","is","type","controlType","undefined","noop","EuiButton","on","or2","EuiButtonIcon","get","EuiIcon","fn","EuiBreadcrumbs","eq2","templateOnly","a","b"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"eui-copy.js","sources":["../../src/components/eui-copy.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { action } from \"@ember/object\";\n\nimport { copyToClipboard } from \"../utils/copy-to-clipboard.ts\";\nimport EuiToolTip from \"./eui-tool-tip.gts\";\n\nimport type { EuiToolTipSignature } from \"./eui-tool-tip\";\n\ntype EuiCopyArgs = {\n  /**\n   * Text that will be copied to clipboard when copy function is executed.\n   */\n  textToCopy: string;\n  /**\n   * Tooltip message displayed before copy function is called.\n   */\n  beforeMessage?: string;\n  /**\n   * Tooltip message displayed after copy function is called that lets the user know that\n   * 'textToCopy' has been copied to the clipboard.\n   */\n  afterMessage?: string;\n\n  /**\n   * The element that will be used as the anchor for the tooltip.\n   * Defaults to the child element of EuiCopy.\n   */\n  anchor?: HTMLElement;\n};\n\nexport interface EuiCopySignature {\n  Element: EuiToolTipSignature[\"Element\"];\n  Args: EuiCopyArgs;\n  Blocks: {\n    default: [() => void];\n  };\n}\n\nexport default class EuiCopyComponent extends Component<EuiCopySignature> {\n  @tracked isCopied = false;\n\n  get tooltipText() {\n    return this.isCopied ? this.args.afterMessage : this.args.beforeMessage;\n  }\n\n  @action\n  copy() {\n    if (copyToClipboard(this.args.textToCopy)) {\n      this.isCopied = true;\n    }\n  }\n\n  @action\n  resetTooltipText(): void {\n    this.isCopied = false;\n  }\n\n  <template>\n    <EuiToolTip\n      @content={{this.tooltipText}}\n      @onMouseOut={{this.resetTooltipText}}\n      ...attributes\n    >\n      <:anchor>\n        {{yield this.copy}}\n      </:anchor>\n    </EuiToolTip>\n  </template>\n}\n"],"names":["EuiCopyComponent","Component","g","prototype","tracked","i","tooltipText","isCopied","args","afterMessage","beforeMessage","copy","copyToClipboard","textToCopy","n","action","resetTooltipText","setComponentTemplate","precompileTemplate","strictMode","scope","EuiToolTip"],"mappings":";;;;;;;;;AAuCe,MAAMA,yBAAyBC,SAAU,CAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,UAAA,EAAA,CACrDC,OAAA,CAAA,EAAA,YAAA;AAAA,MAAA,OAAmB,KAAM;AAAA,KAAA,CAAA;AAAA;EAAA,SAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,UAAA,CAAA,EAAA,MAAA;EAE1B,IAAIC,WAAcA,GAAA;AAChB,IAAA,OAAO,IAAI,CAACC,QAAQ,GAAG,IAAI,CAACC,IAAI,CAACC,YAAY,GAAG,IAAI,CAACD,IAAI,CAACE,aAAa;AACzE;AAGAC,EAAAA,IAAOA,GAAA;IACL,IAAIC,gBAAgB,IAAI,CAACJ,IAAI,CAACK,UAAU,CAAG,EAAA;MACzC,IAAI,CAACN,QAAQ,GAAG,IAAA;AAClB;AACF;AAAA,EAAA;IAAAO,CAAA,CAAA,IAAA,CAAAX,SAAA,EAAA,MAAA,EAAA,CALCY,MAAA,CAAA,CAAA;AAAA;AAQDC,EAAAA,gBAAAA,GAAyB;IACvB,IAAI,CAACT,QAAQ,GAAG,KAAA;AAClB;AAAA,EAAA;IAAAO,CAAA,CAAA,IAAA,CAAAX,SAAA,EAAA,kBAAA,EAAA,CAHCY,MAAA,CAAA,CAAA;AAAA;AAKD,EAAA;IAAAE,oBAAA,CAAAC,kBAAA,CAUA,mKAAA,EAAA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"eui-copy.js","sources":["../../src/components/eui-copy.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { action } from \"@ember/object\";\n\nimport { copyToClipboard } from \"../utils/copy-to-clipboard.ts\";\nimport EuiToolTip from \"./eui-tool-tip.gts\";\n\nimport type { EuiToolTipSignature } from \"./eui-tool-tip\";\n\ntype EuiCopyArgs = {\n  /**\n   * Text that will be copied to clipboard when copy function is executed.\n   */\n  textToCopy: string;\n  /**\n   * Tooltip message displayed before copy function is called, e.g.\n   * \"Click to copy\". No tooltip without it.\n   */\n  beforeMessage?: string;\n  /**\n   * Tooltip message displayed after copy function is called that lets the user know that\n   * 'textToCopy' has been copied to the clipboard, e.g. \"Copied\".\n   */\n  afterMessage?: string;\n\n  /**\n   * @deprecated Has no effect: the tooltip is anchored to the block's\n   * content.\n   */\n  anchor?: HTMLElement;\n};\n\nexport interface EuiCopySignature {\n  Element: EuiToolTipSignature['Element'];\n  Args: EuiCopyArgs;\n  Blocks: {\n    /**\n     * The element triggering the copy; call the yielded function from it:\n     * `as |copy|` → `<EuiButton {{on \"click\" copy}}>Copy</EuiButton>`.\n     */\n    default: [() => void];\n  };\n}\n\nexport default class EuiCopyComponent extends Component<EuiCopySignature> {\n  @tracked isCopied = false;\n\n  get tooltipText() {\n    return this.isCopied ? this.args.afterMessage : this.args.beforeMessage;\n  }\n\n  @action\n  copy() {\n    if (copyToClipboard(this.args.textToCopy)) {\n      this.isCopied = true;\n    }\n  }\n\n  @action\n  resetTooltipText(): void {\n    this.isCopied = false;\n  }\n\n  <template>\n    <EuiToolTip\n      @content={{this.tooltipText}}\n      @onMouseOut={{this.resetTooltipText}}\n      ...attributes\n    >\n      <:anchor>\n        {{yield this.copy}}\n      </:anchor>\n    </EuiToolTip>\n  </template>\n}\n"],"names":["EuiCopyComponent","Component","g","prototype","tracked","i","tooltipText","isCopied","args","afterMessage","beforeMessage","copy","copyToClipboard","textToCopy","n","action","resetTooltipText","setComponentTemplate","precompileTemplate","strictMode","scope","EuiToolTip"],"mappings":";;;;;;;;;AA4Ce,MAAMA,yBAAyBC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,UAAA,EAAA,CACrDC,OAAA,CAAA,EAAA,YAAA;AAAA,MAAA,OAAmB,KAAA;AAAA,IAAA,CAAA,CAAA;AAAA;EAAA,SAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,UAAA,CAAA,EAAA,MAAA;EAEpB,IAAIC,WAAAA,GAAc;AAChB,IAAA,OAAO,IAAI,CAACC,QAAQ,GAAG,IAAI,CAACC,IAAI,CAACC,YAAY,GAAG,IAAI,CAACD,IAAI,CAACE,aAAa;AACzE,EAAA;AAGAC,EAAAA,IAAAA,GAAO;IACL,IAAIC,gBAAgB,IAAI,CAACJ,IAAI,CAACK,UAAU,CAAA,EAAG;MACzC,IAAI,CAACN,QAAQ,GAAG,IAAA;AAClB,IAAA;AACF,EAAA;AAAA,EAAA;IAAAO,CAAA,CAAA,IAAA,CAAAX,SAAA,EAAA,MAAA,EAAA,CALCY,MAAA,CAAA,CAAA;AAAA;AAQDC,EAAAA,gBAAAA,GAAyB;IACvB,IAAI,CAACT,QAAQ,GAAG,KAAA;AAClB,EAAA;AAAA,EAAA;IAAAO,CAAA,CAAA,IAAA,CAAAX,SAAA,EAAA,kBAAA,EAAA,CAHCY,MAAA,CAAA,CAAA;AAAA;AAKD,EAAA;IAAAE,oBAAA,CAAAC,kBAAA,CAAA,mKAAA,EAUA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}