@ember-eui/core 7.1.5 → 8.0.0-beta.0

package/addon/components/eui-tool-tip/index.ts

@@ -1,333 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
-import { tracked, cached } from '@glimmer/tracking';
-import { findPopoverPosition } from '../../utils/popover';
-import { keys } from '../../utils/keys';
-import { later, cancel, scheduleOnce, next } from '@ember/runloop';
-import { guidFor } from '@ember/object/internals';
-
-export type ToolTipPositions = 'top' | 'right' | 'bottom' | 'left';
-
-export type ToolTipDelay = 'regular' | 'long';
-
-const delayToMsMap: { [key in ToolTipDelay]: number } = {
-  regular: 250,
-  long: 250 * 5
-};
-
-interface ToolTipStyles {
-  top: string;
-  left: string | 'auto';
-  right?: string | 'auto';
-  opacity?: string;
-  visibility?: 'hidden';
-  display?: 'inlineBlock';
-}
-
-const displayToClassNameMap = {
-  inlineBlock: undefined,
-  block: 'euiToolTipAnchor--displayBlock'
-};
-
-const DEFAULT_TOOLTIP_STYLES: ToolTipStyles = {
-  // position the tooltip content near the top-left
-  // corner of the window so it can't create scrollbars
-  // 50,50 because who knows what negative margins, padding, etc
-  top: '50px',
-  left: '50px',
-  // just in case, avoid any potential flicker by hiding
-  // the tooltip before it is positioned
-  opacity: '0',
-  // prevent accidental mouse interaction while positioning
-  visibility: 'hidden',
-  display: 'inlineBlock'
-};
-
-type EuiTooltipArgs = {
-  /**
-   * Passes onto the the trigger.
-   */
-  anchorClassName?: string;
-  /**
-   * Passes onto the tooltip itself, not the trigger.
-   */
-  className?: string;
-  /**
-   * The main content of your tooltip.
-   */
-  content?: Component;
-  /**
-   * Common display alternatives for the anchor wrapper
-   */
-  display?: keyof typeof displayToClassNameMap;
-  /**
-   * Delay before showing tooltip. Good for repeatable items.
-   */
-  delay: ToolTipDelay;
-  /**
-   * An optional title for your tooltip.
-   */
-  title?: Component;
-  /**
-   * Unless you provide one, this will be randomly generated.
-   */
-  id?: string;
-  /**
-   * Suggested position. If there is not enough room for it this will be changed.
-   */
-  position: ToolTipPositions;
-
-  attachTo: undefined | HTMLElement | string | null;
-
-  isShown: boolean | undefined;
-
-  /**
-   * If supplied, called when mouse movement causes the tool tip to be
-   * hidden.
-   */
-  onMouseOut?: (event: MouseEvent) => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-};
-
-export default class EuiToolTip extends Component<EuiTooltipArgs> {
-  anchor: null | HTMLElement = null;
-  popover: null | HTMLElement = null;
-
-  @argOrDefault('top') position!: ToolTipPositions;
-  @argOrDefault('regular') delay!: ToolTipDelay;
-
-  //STATE
-  @tracked visible = false;
-  @tracked hasFocus = false;
-  @tracked calculatedPosition: ToolTipPositions = this.position;
-  @tracked toolTipStyles: ToolTipStyles = DEFAULT_TOOLTIP_STYLES;
-  @tracked arrowStyles: undefined | { left: string; top: string };
-  @tracked id: string = this.args.id || guidFor({});
-  @tracked _attachTo: undefined | HTMLElement | string | null = null;
-
-  private timeoutId?: ReturnType<typeof later>;
-
-  @action
-  updateAttachTo(): void {
-    if (!this.args.attachTo && this._attachTo) {
-      this.removeAttachToHandlers();
-      this._attachTo = null;
-      return;
-    }
-
-    if (this.args.attachTo && this.args.attachTo !== this._attachTo) {
-      next(() => {
-        this.removeAttachToHandlers();
-        this._attachTo = this.args.attachTo;
-        this.setupAttachToHandlers();
-      });
-    }
-  }
-
-  @action
-  setupAttachToHandlers(): void {
-    if (this._attachTo) {
-      this.attachTo?.addEventListener('mousemove', this.showToolTip);
-      this.attachTo?.addEventListener('focusin', this.onFocus);
-      this.attachTo?.addEventListener('mouseout', this.onMouseOut);
-      this.attachTo?.addEventListener('focusout', this.onBlur);
-      this.positionToolTip();
-    }
-  }
-
-  @action
-  removeAttachToHandlers(): void {
-    if (this._attachTo) {
-      this.attachTo?.removeEventListener('mousemove', this.showToolTip);
-      this.attachTo?.removeEventListener('focusin', this.onFocus);
-      this.attachTo?.removeEventListener('mouseout', this.onMouseOut);
-      this.attachTo?.removeEventListener('focusout', this.onBlur);
-    }
-  }
-
-  @action
-  clearAnimationTimeout(): void {
-    if (this.timeoutId) {
-      cancel(this.timeoutId);
-      this.timeoutId = undefined;
-    }
-  }
-
-  @action
-  visibleDidUpdate(value: boolean): void {
-    if (this.visible === false && value === true) {
-      requestAnimationFrame(this.testAnchor);
-    }
-  }
-
-  willDestroy(): void {
-    super.willDestroy();
-    this.clearAnimationTimeout();
-    this.removeAttachToHandlers();
-  }
-
-  @action
-  testAnchor(): void {
-    // when the tooltip is visible, this checks if the anchor is still part of document
-    // this fixes when the react root is removed from the dom without unmounting
-    // https://github.com/elastic/eui/issues/1105
-    if (document.body.contains(this._anchor) === false) {
-      // the anchor is no longer part of `document`
-      this.hideToolTip();
-    } else {
-      if (this.visible) {
-        // if still visible, keep checking
-        requestAnimationFrame(this.testAnchor);
-      }
-    }
-  }
-
-  @action
-  didInsertAnchor(ref: HTMLElement): void {
-    this.anchor = ref;
-  }
-
-  @action
-  setPopoverRef(ref: HTMLElement): void {
-    this.popover = ref;
-
-    // if the popover has been unmounted, clear
-    // any previous knowledge about its size
-    if (ref == null) {
-      this.toolTipStyles = DEFAULT_TOOLTIP_STYLES;
-      this.arrowStyles = undefined;
-    } else {
-      this.positionToolTip();
-    }
-  }
-
-  @action
-  showToolTip(): void {
-    if (!this.timeoutId && !this.visible) {
-      const fn = (): void => {
-        this.visible = true;
-      };
-      this.timeoutId = later(
-        this,
-        () => {
-          scheduleOnce('afterRender', this, fn);
-        },
-        delayToMsMap[this.delay]
-      );
-    }
-  }
-
-  @cached
-  get attachTo(): Element | null | undefined {
-    if (typeof this._attachTo === 'string') {
-      return document.querySelector(this._attachTo);
-    } else {
-      return this._attachTo;
-    }
-  }
-
-  get _anchor(): Element | null {
-    return this.attachTo || this.anchor;
-  }
-
-  @action
-  positionToolTip(): void {
-    const requestedPosition = this.position;
-
-    if (!this._anchor || !this.popover) {
-      return;
-    }
-    const { position, left, top, arrow } = findPopoverPosition({
-      anchor: this._anchor as HTMLElement,
-      popover: this.popover,
-      position: requestedPosition,
-      offset: 16, // offset popover 16px from the anchor
-      arrowConfig: {
-        arrowWidth: 12,
-        arrowBuffer: 4
-      }
-    });
-
-    const windowWidth =
-      document.documentElement.clientWidth || window.innerWidth;
-    const useRightValue = windowWidth / 2 < left;
-
-    const toolTipStyles: ToolTipStyles = {
-      top: `${top}px`,
-      left: useRightValue ? 'auto' : `${left}px`,
-      right: useRightValue
-        ? `${windowWidth - left - this.popover.offsetWidth}px`
-        : 'auto'
-    };
-
-    this.visible = true;
-    this.calculatedPosition = position;
-    this.toolTipStyles = toolTipStyles;
-    if (arrow) {
-      this.arrowStyles = {
-        left: `${arrow.left}px`,
-        top: `${arrow?.top}px`
-      };
-    }
-  }
-
-  @action
-  hideToolTip(): void {
-    if (this.args.isShown === true) {
-      return;
-    }
-    this.clearAnimationTimeout();
-    const fn = (): void => {
-      if (!this.isDestroying || !this.isDestroyed) {
-        this.visible = false;
-      }
-    };
-    scheduleOnce('afterRender', this, fn);
-  }
-
-  @action
-  hasFocusMouseMoveListener(): void {
-    this.hideToolTip();
-    window.removeEventListener('mousemove', this.hasFocusMouseMoveListener);
-  }
-
-  @action
-  onKeyUp(event: KeyboardEvent): void {
-    if (event.key === keys.TAB) {
-      window.addEventListener('mousemove', this.hasFocusMouseMoveListener);
-    }
-  }
-
-  @action
-  onFocus(): void {
-    this.hasFocus = true;
-    this.showToolTip();
-  }
-
-  @action
-  onBlur(): void {
-    this.hasFocus = false;
-    this.hideToolTip();
-  }
-
-  @action
-  onMouseOut(event: MouseEvent): void {
-    // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has
-    // left the anchor for a non-child.
-    if (
-      this._anchor === event.relatedTarget ||
-      (this._anchor != null &&
-        !this._anchor.contains(event.relatedTarget as Node))
-    ) {
-      if (!this.hasFocus) {
-        this.hideToolTip();
-      }
-    }
-
-    if (this.args.onMouseOut) {
-      this.args.onMouseOut(event);
-    }
-  }
-}

package/addon/components/eui-tool-tip-popover/index.hbs

@@ -1,13 +0,0 @@
-<div
-  class="euiToolTipPopover"
-  ...attributes
-  {{did-insert this.setPopoverRef}}
-  {{will-destroy (fn this.setPopoverRef null)}}
->
-  {{#if @hasTitle}}
-    <div class="euiToolTip__title">
-      {{yield to="title"}}
-    </div>
-  {{/if}}
-  {{yield to="content"}}
-</div>

package/addon/components/eui-tool-tip-popover/index.ts

@@ -1,46 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { CommonArgs } from '../common';
-
-type EuiTooltipPopoverArgs = CommonArgs &
-  Omit<HTMLDivElement, 'title'> & {
-    positionToolTip: () => void;
-    title?: Component;
-    popoverRef?: (ref: HTMLDivElement) => void;
-  };
-
-export default class EuiTooltipPopover extends Component<EuiTooltipPopoverArgs> {
-  popover: HTMLDivElement | undefined;
-
-  constructor(owner: unknown, args: EuiTooltipPopoverArgs) {
-    super(owner, args);
-    document.body.classList.add('euiBody-hasPortalContent');
-    window.addEventListener('resize', this.updateDimensions);
-    window.addEventListener('scroll', this.updateDimensions, true);
-  }
-
-  willDestroy(): void {
-    super.willDestroy();
-    document.body.classList.remove('euiBody-hasPortalContent');
-    window.removeEventListener('resize', this.updateDimensions);
-    window.removeEventListener('scroll', this.updateDimensions, true);
-  }
-
-  @action
-  setPopoverRef(popover: HTMLDivElement): void {
-    this.popover = popover;
-    if (this.args.popoverRef) {
-      this.args.popoverRef(popover);
-    }
-  }
-
-  @action
-  updateDimensions(): void {
-    requestAnimationFrame(() => {
-      // Because of this delay, sometimes `positionToolTip` becomes unavailable.
-      if (this.popover) {
-        this.args.positionToolTip();
-      }
-    });
-  }
-}

package/addon/components/text-block/index.hbs

@@ -1,33 +0,0 @@
-{{#if (eq @tagName "h1")}}
-  <h1 ...attributes>
-    {{yield}}
-  </h1>
-{{else if (eq @tagName "h2")}}
-  <h2 ...attributes>
-    {{yield}}
-  </h2>
-{{else if (eq @tagName "h3")}}
-  <h3 ...attributes>
-    {{yield}}
-  </h3>
-{{else if (eq @tagName "h4")}}
-  <h4 ...attributes>
-    {{yield}}
-  </h4>
-{{else if (eq @tagName "h5")}}
-  <h5 ...attributes>
-    {{yield}}
-  </h5>
-{{else if (eq @tagName "h6")}}
-  <h6 ...attributes>
-    {{yield}}
-  </h6>
-{{else if (eq @tagName "p")}}
-  <p ...attributes>
-    {{yield}}
-  </p>
-{{else if (eq @tagName "legend")}}
-  <legend ...attributes>
-    {{yield}}
-  </legend>
-{{/if}}

package/addon/helpers/arg-or-default.ts

@@ -1,41 +0,0 @@
-import { helper } from '@ember/component/helper';
-import { assert } from '@ember/debug';
-import config from 'ember-get-config';
-import { get } from '@ember/object';
-
-/**
- * Helper that returns a default value if the passed argument is undefined
- *
- * @param {array} param
- * @property {unknown} 0 - value to be returned if it's defined
- * @property {unknown} 1 - default value to be returned if value is undefined
- */
-export function argOrDefault(
-  [value, defaultValue]: [unknown, unknown],
-  { configKey }: { configKey?: string }
-): unknown {
-  assert('`defaultValue` must be provided', defaultValue !== undefined);
-  let configValue;
-  if (configKey) {
-    configValue = get(config, configKey);
-  }
-  return value !== undefined ? value : configValue || defaultValue;
-}
-
-//eslint-disable-next-line
-export function argOrDefaultDecorator<T>(
-  defaultValue: T,
-  configKey?: string
-): any {
-  return function (_target: any, key: string) {
-    return {
-      get(this: { args: Record<string, T> }): T {
-        return argOrDefault([this.args[key], defaultValue], {
-          configKey: configKey
-        }) as T;
-      }
-    };
-  };
-}
-
-export default helper(argOrDefault);

package/addon/helpers/cast-to.ts

@@ -1,25 +0,0 @@
-import { helper } from '@ember/component/helper';
-
-const NUMBER = 'number';
-const BOOLEAN = 'boolean';
-const STRING = 'string';
-
-export function castTo(
-  [that]: [string, unknown],
-  { to = NUMBER }: { to: string }
-): number | boolean | string {
-  let toLower = to?.toLowerCase();
-
-  switch (toLower) {
-    case NUMBER:
-      return Number(that);
-    case STRING:
-      return String(that);
-    case BOOLEAN:
-      return Boolean(that);
-    default:
-      return Number(that);
-  }
-}
-
-export default helper(castTo);

package/addon/helpers/class-names.ts

@@ -1,73 +0,0 @@
-import { helper } from '@ember/component/helper';
-import { assert } from '@ember/debug';
-
-// Mappings registry
-import cssMappings from '../utils/css-mappings';
-
-interface IObjectKeys {
-  [key: string]: string | number;
-}
-interface Options extends IObjectKeys {
-  size: string;
-  side: string;
-  paddingSize: string;
-  textAlign: string;
-  textStyle: string;
-  color: string;
-  verticalPosition: string;
-  horizontalPosition: string;
-  componentName: string;
-  textTransform: string;
-  display: string;
-  type: string;
-  gutterSize: string;
-  alignItems: string;
-  direction: string;
-  justifyContent: string;
-  columns: number;
-  grow: number | string;
-  iconSide: string;
-  flush: string;
-  borderSide: string;
-  position: string;
-  theme: string;
-  margin: string;
-  borderRadius: string;
-  backgroundColor: string;
-  resize: string;
-}
-
-/**
- * Joins a list of classes
- *
- * @param classes - List of classes that will be joined
- */
-export function classNames(
-  classNames: string[] = [],
-  options: Options & { addBase: boolean }
-): string {
-  let { componentName, ...rest } = options;
-  let includeBase = options.addBase !== false;
-  let str = `${classNames.join(' ')}`;
-  if (options.componentName) {
-    assert(
-      `The component '${options.componentName}' doesn't have mappings defined`,
-      cssMappings[options.componentName] !== undefined
-    );
-    const component = cssMappings[options.componentName];
-    if (includeBase) {
-      str = `${str} ${component.base}`;
-    }
-
-    for (let key in rest) {
-      if (component.properties[key] && component.properties[key][rest[key]]) {
-        str = `${str} ${component.properties[key][rest[key]]}`;
-      }
-    }
-  }
-  return str;
-}
-
-export default helper<string[], Options & { addBase: boolean }, string>(
-  classNames
-);

package/addon/helpers/eui-page-restrict-width.ts

@@ -1,37 +0,0 @@
-import { helper } from '@ember/component/helper';
-export type _EuiPageRestrictWidth = {
-  /**
-   * Sets the max-width of the page,
-   * set to `true` to use the default size of `1000px (1200 for Amsterdam)`,
-   * set to `false` to not restrict the width,
-   * set to a number for a custom width in px,
-   * set to a string for a custom width in custom measurement.
-   */
-  restrictWidth?: boolean | number | string;
-};
-
-export function restrictWidth(
-  restrictWidth: _EuiPageRestrictWidth['restrictWidth'],
-  style?: Record<string, unknown>
-) {
-  let widthClassName;
-  let newStyle = {
-    ...(style || {})
-  };
-
-  if (restrictWidth === true) {
-    widthClassName = 'restrictWidth-default';
-  } else if (restrictWidth !== false) {
-    widthClassName = 'restrictWidth-custom';
-    newStyle = { ...newStyle, maxWidth: restrictWidth };
-  }
-
-  return { widthClassName, newStyle };
-}
-
-export default helper(function ([restrict, style]: [
-  _EuiPageRestrictWidth['restrictWidth'],
-  Record<string, unknown> | undefined
-]) {
-  return restrictWidth(restrict, style);
-});

package/addon/helpers/eui-palette.ts

@@ -1,40 +0,0 @@
-import { helper } from '@ember/component/helper';
-import {
-  EuiPalette,
-  euiPaletteForLightBackground,
-  euiPaletteForDarkBackground,
-  euiPaletteColorBlind,
-  euiPaletteColorBlindBehindText,
-  euiPaletteForStatus,
-  euiPaletteForTemperature,
-  euiPaletteComplimentary,
-  euiPaletteNegative,
-  euiPalettePositive,
-  euiPaletteCool,
-  euiPaletteWarm,
-  euiPaletteGray
-} from '../utils/color/eui_palettes';
-
-export const PALETTES = {
-  euiPaletteForLightBackground,
-  euiPaletteForDarkBackground,
-  euiPaletteColorBlind,
-  euiPaletteColorBlindBehindText,
-  euiPaletteForStatus,
-  euiPaletteForTemperature,
-  euiPaletteComplimentary,
-  euiPaletteNegative,
-  euiPalettePositive,
-  euiPaletteCool,
-  euiPaletteWarm,
-  euiPaletteGray
-};
-
-export type palette_keys = keyof typeof PALETTES;
-
-export default helper(function ([paletteName, steps]: [
-  palette_keys,
-  number
-]): EuiPalette {
-  return PALETTES[paletteName](steps);
-});