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

package/CODE_OF_CONDUCT.md

@@ -1,76 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, sex characteristics, gender identity and expression,
-level of experience, education, socio-economic status, nationality, personal
-appearance, race, religion, or sexual identity and orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment
-include:
-
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at betocantu93@gmail.com. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality with regard to the reporter of an incident.
-Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq

package/addon/components/common.ts

@@ -1,55 +0,0 @@
-// utility types:
-/**
- * XOR for some properties applied to a type
- * (XOR is one of these but not both or neither)
- *
- * Usage: OneOf<typeToExtend, one | but | not | multiple | of | these | are | required>
- *
- * To require aria-label or aria-labelledby but not both
- * Example: OneOf<Type, 'aria-label' | 'aria-labelledby'>
- */
-export type OneOf<T, K extends keyof T> = Omit<T, K> &
-  { [k in K]: Pick<Required<T>, k> & { [k1 in Exclude<K, k>]?: never } }[K];
-
-export interface CommonArgs {
-  className?: string;
-  'aria-label'?: string;
-  'data-test-subj'?: string;
-}
-/**
- * Wraps Object.keys with proper typescript definition of the resulting array
- */
-export function keysOf<T, K extends keyof T>(obj: T): K[] {
-  return Object.keys(obj) as K[];
-}
-
-/**
- * Returns member keys in U not present in T set to never
- * T = { 'one', 'two', 'three' }
- * U = { 'three', 'four', 'five' }
- * returns { 'four': never, 'five': never }
- */
-export type DisambiguateSet<T, U> = {
-  [P in Exclude<keyof T, keyof U>]?: never;
-};
-
-/**
- * Allow either T or U, preventing any additional keys of the other type from being present
- */
-export type ExclusiveUnion<T, U> = T | U extends Record<string, unknown> // if there are any shared keys between T and U
-  ? (DisambiguateSet<T, U> & U) | (DisambiguateSet<U, T> & T) // otherwise the TS union is already unique
-  : T | U;
-
-/*
-https://github.com/Microsoft/TypeScript/issues/28339
-Problem: Pick and Omit do not distribute over union types, which manifests when
-optional values become required after a Pick or Omit operation. These
-Distributive forms correctly operate on union types, preserving optionality.
- */
-type UnionKeys<T> = T extends any ? keyof T : never;
-export type DistributivePick<T, K extends UnionKeys<T>> = T extends any
-  ? Pick<T, Extract<keyof T, K>>
-  : never;
-export type DistributiveOmit<T, K extends UnionKeys<T>> = T extends any
-  ? Omit<T, Extract<keyof T, K>>
-  : never;

package/addon/components/eui-accordion/index.hbs

@@ -1,118 +0,0 @@
-{{#let
-  (element (arg-or-default @element "div"))
-  (element this.buttonElement)
-  as |Element ButtonElement|
-}}
-  <Element
-    class={{class-names
-      (if this.isOpen "euiAccordion-isOpen")
-      componentName="EuiAccordion"
-    }}
-    ...attributes
-  >
-    <div class={{class-names "euiAccordion__triggerWrapper" @triggerClassName}}>
-      {{#if (eq this._arrowDisplay "left")}}
-        <EuiButtonIcon
-          @color="text"
-          @iconClasses={{class-names
-            "euiAccordion__iconButton"
-            (if this.isOpen "euiAccordion__iconButton-isOpen")
-            (if
-              (eq this._arrowDisplay "right") "euiAccordion__iconButton--right"
-            )
-            (if @arrowProps.className @arrowProps.className)
-          }}
-          @iconType="arrowRight"
-          {{on "click" this.onToggle}}
-          aria-controls={{@id}}
-          aria-expanded={{this.isOpen}}
-          aria-labelledby={{this.buttonId}}
-          tabindex={{if this.buttonElementIsFocusable "-1" "0"}}
-        />
-      {{/if}}
-      <ButtonElement
-        type="button"
-        id={{arg-or-default this.buttonProps.id (unique-id)}}
-        class={{this.buttonClasses}}
-        aria-controls={{@id}}
-        aria-expanded={{this.isOpen}}
-        aria-labelledby={{arg-or-default this.buttonProps.id (unique-id)}}
-        {{on "click" this.onToggle}}
-      >
-        <span class={{this.buttonContentClasses}}>
-          {{yield this.isOpen to="buttonContent"}}
-        </span>
-      </ButtonElement>
-      {{#if (and @extraAction (has-block "extraAction") (not this.isLoading))}}
-        <div class="euiAccordion__optionalAction">
-          {{yield this.isOpen to="extraAction"}}
-        </div>
-      {{else if this.isLoading}}
-        <div class="euiAccordion__optionalAction">
-          <EuiLoadingSpinner />
-        </div>
-      {{/if}}
-      {{#if (eq this._arrowDisplay "right")}}
-        <EuiButtonIcon
-          @color="text"
-          class={{class-names
-            "euiAccordion__iconButton"
-            (if this.isOpen "euiAccordion__iconButton-isOpen")
-            (if
-              (eq this._arrowDisplay "right") "euiAccordion__iconButton--right"
-            )
-            (if @arrowProps.className @arrowProps.className)
-          }}
-          @iconType="arrowRight"
-          {{on "click" this.onToggle}}
-          aria-controls={{@id}}
-          aria-expanded={{this.isOpen}}
-          aria-labelledby={{this.buttonId}}
-          tabindex={{if this.buttonElementIsFocusable "-1" "0"}}
-        />
-      {{/if}}
-    </div>
-    <div
-      class="euiAccordion__childWrapper"
-      style={{this.childContentStyle}}
-      id={{@id}}
-      {{did-insert (set this "childWrapper")}}
-      tabindex="-1"
-      role="region"
-      aria-labelledby={{this.buttonId}}
-    >
-      <div
-        class={{class-names
-          (if this.isLoading "euiAccordion__children-isLoading")
-          @childClassName
-        }}
-        {{did-insert
-          (queue (set this "childContent") this.setChildContentHeight)
-        }}
-        {{resize-observer onResize=this.setChildContentHeight}}
-        {{did-update this.setChildContentHeight @forceState}}
-      >
-        {{#if (and this.isLoading this.isLoadingMessage)}}
-          <EuiLoadingSpinner class="euiAccordion__spinner" />
-          <span>
-            {{#if this.hasLoadingMessage}}
-              {{this.isLoadingMessage}}
-            {{else}}
-              {{! <EuiI18n @token="euiAccordion.isLoading" @default="Loading" /> }}
-              Loading...
-            {{/if}}
-          </span>
-        {{else}}
-          <div
-            class={{class-names
-              componentName="EuiAccordion"
-              paddingSize=this.paddingSize
-            }}
-          >
-            {{yield to="content"}}
-          </div>
-        {{/if}}
-      </div>
-    </div>
-  </Element>
-{{/let}}

package/addon/components/eui-accordion/index.ts

@@ -1,162 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
-import { paddingMapping } from '../../utils/css-mappings/eui-accordion';
-import { htmlSafe } from '@ember/template';
-import { CommonArgs } from '../common';
-
-type EuiAccordionPaddingSize = keyof typeof paddingMapping;
-
-type AccordionArgs = {
-  id: string;
-
-  element?: 'div' | 'fieldset';
-  /**
-   * Class that will apply to the trigger for the accordion.
-   */
-  buttonClassName?: string;
-
-  buttonProps?: CommonArgs;
-
-  /**
-   * Applied to the main button receiving the `onToggle` event.
-   * Anything other than the default `button` does not support removing the arrow display (for accessibility of focus).
-   */
-  buttonElement?: 'div' | 'legend' | 'button';
-  /**
-   * Extra props to pass to the EuiButtonIcon containing the arrow.
-   */
-  arrowProps?: 'iconType' | 'onClick' | 'aria-labelledby';
-  /**
-   * Class that will apply to the trigger content for the accordion.
-   */
-  buttonContentClassName?: string;
-  /**
-   * The content of the clickable trigger
-   */
-  buttonContent?: Component;
-  /**
-   * Will appear right aligned against the button. Useful for separate actions like deletions.
-   */
-  extraAction?: Component;
-  /**
-   * The accordion will start in the open state.
-   */
-  initialIsOpen: boolean;
-  /**
-   * Optional callback method called on open and close with a single `isOpen` parameter
-   */
-  onToggle?: (isOpen: boolean) => void;
-  /**
-   * The padding around the exposed accordion content.
-   */
-  paddingSize?: EuiAccordionPaddingSize;
-  /**
-   * Placement of the arrow indicator, or 'none' to hide it.
-   */
-  arrowDisplay?: 'left' | 'right' | 'none';
-  /**
-   * Control the opening of accordion via prop
-   */
-  forceState?: 'closed' | 'open';
-  /**
-   * Change `extraAction` and children into a loading spinner
-   */
-  isLoading?: boolean;
-  /**
-   * Choose whether the loading message replaces the content. Customize the message by passing a node
-   */
-  isLoadingMessage?: boolean | Component;
-
-  isOpen?: boolean;
-};
-
-export default class EuiAccordionAccordionComponent extends Component<AccordionArgs> {
-  // Defaults
-  @argOrDefault(false) isLoading!: boolean;
-  @argOrDefault(false) isLoadingMessage!: boolean;
-  @argOrDefault(false) initialIsOpen!: boolean;
-  @argOrDefault('none') paddingSize!: EuiAccordionPaddingSize;
-  @argOrDefault('left') arrowDisplay!: AccordionArgs['arrowDisplay'];
-
-  @tracked _opened;
-  @tracked childWrapper: HTMLDivElement | null = null;
-  @tracked childContent: HTMLDivElement | null = null;
-
-  constructor(owner: unknown, args: AccordionArgs) {
-    super(owner, args);
-
-    this._opened = this.args.forceState
-      ? this.args.forceState === 'open'
-      : this.args.initialIsOpen;
-  }
-
-  get buttonElement() {
-    return this.args.element === 'fieldset' ? 'legend' : 'button';
-  }
-
-  get buttonElementIsFocusable() {
-    return this.buttonElement === 'button';
-  }
-
-  get _arrowDisplay() {
-    return this.arrowDisplay === 'none' && !this.buttonElementIsFocusable
-      ? 'left'
-      : this.arrowDisplay;
-  }
-
-  get isOpen(): boolean {
-    return this.args.forceState
-      ? this.args.forceState === 'open'
-      : this._opened;
-  }
-
-  get hasLoadingMessage(): boolean {
-    return this.isLoadingMessage && this.isLoadingMessage !== true;
-  }
-
-  get buttonClasses(): string {
-    return [
-      'euiAccordion__button',
-      this.args.buttonClassName,
-      this.args.buttonProps?.className
-    ].join(' ');
-  }
-
-  get buttonContentClasses(): string {
-    return [
-      'euiAccordion__buttonContent',
-      this.args.buttonContentClassName
-    ].join(' ');
-  }
-
-  get childContentStyle(): string | ReturnType<typeof htmlSafe> {
-    return this._opened ? '' : htmlSafe(`height: 0px;`);
-  }
-
-  setChildContentHeight = () => {
-    const { forceState } = this.args;
-    requestAnimationFrame(() => {
-      const height =
-        this.childContent && (forceState ? forceState === 'open' : this._opened)
-          ? this.childContent.clientHeight
-          : 0;
-      this.childWrapper &&
-        this.childWrapper.setAttribute('style', `height: ${height}px`);
-    });
-  };
-
-  @action
-  onToggle(): void {
-    if (this.args.forceState) {
-      this.args.onToggle?.(this.args.forceState === 'open' ? false : true);
-    } else {
-      this._opened = !this._opened;
-      if (this._opened && this.childWrapper) {
-        this.childWrapper.focus();
-      }
-      this.args.onToggle?.(this._opened);
-    }
-  }
-}

package/addon/components/eui-auto-sizer/index.hbs

@@ -1,3 +0,0 @@
-<div {{did-insert this.setRef}} {{style this.style.outerStyle}} ...attributes>
-  {{yield this.style.childStyle}}
-</div>

package/addon/components/eui-auto-sizer/index.ts

@@ -1,175 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-//@ts-ignore
-import createDetectElementResize from '../../utils/detect-element-resize';
-
-type Size = {
-  height: number;
-  width: number;
-};
-
-interface EuiAutoSizerComponentArgs {
-  /** Function responsible for rendering children.*/
-
-  /** Optional custom CSS class name to attach to root AutoSizer element.  */
-  className?: string;
-
-  /** Default height to use for initial render; useful for SSR */
-  defaultHeight?: number;
-
-  /** Default width to use for initial render; useful for SSR */
-  defaultWidth?: number;
-
-  /** Disable dynamic :height property */
-  disableHeight: boolean;
-
-  /** Disable dynamic :width property */
-  disableWidth: boolean;
-
-  /** Nonce of the inlined stylesheet for Content Security Policy */
-  nonce?: string;
-
-  /** Callback to be invoked on-resize */
-  onResize: (size: Size) => void;
-
-  /** Optional inline style */
-  style?: Record<string, string>;
-}
-
-type ResizeHandler = (element: HTMLElement, onResize: () => void) => void;
-
-type DetectElementResize = {
-  addResizeListener: ResizeHandler;
-  removeResizeListener: ResizeHandler;
-};
-
-type DynamicStyle = {
-  outerStyle: {
-    height?: number | string;
-    width?: number | string;
-    overflow?: string;
-  };
-  childStyle?: {
-    height?: number | string;
-    width?: number | string;
-  };
-};
-export default class EuiAutoSizerComponent extends Component<EuiAutoSizerComponentArgs> {
-  _autoSizer?: HTMLElement;
-  _parentNode?: HTMLElement;
-  _window?: any; // uses any instead of Window because Flow doesn't have window type
-  _detectElementResize?: DetectElementResize;
-
-  @tracked height: number | undefined;
-  @tracked width: number | undefined;
-
-  get disableHeight() {
-    return this.args.disableHeight ?? false;
-  }
-
-  get disableWidth() {
-    return this.args.disableWidth ?? false;
-  }
-
-  get style() {
-    let style: DynamicStyle = {
-      outerStyle: { overflow: 'visible' },
-      childStyle: {}
-    };
-    if (!this.disableHeight) {
-      style.outerStyle.height = `0px`;
-      if (style.childStyle) {
-        style.childStyle.height = `${this.height}px`;
-      }
-    }
-
-    if (!this.disableWidth) {
-      style.outerStyle.width = `0px`;
-      if (style.childStyle) {
-        style.childStyle.width = `${this.width}px`;
-      }
-    }
-
-    return style;
-  }
-
-  setup() {
-    const { nonce } = this.args;
-    if (
-      this._autoSizer &&
-      this._autoSizer.parentNode &&
-      this._autoSizer.parentNode.ownerDocument &&
-      this._autoSizer.parentNode.ownerDocument.defaultView &&
-      this._autoSizer.parentNode instanceof
-        this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement
-    ) {
-      // Delay access of parentNode until mount.
-      // This handles edge-cases where the component has already been unmounted before its ref has been set,
-      // As well as libraries like react-lite which have a slightly different lifecycle.
-      this._parentNode = this._autoSizer.parentNode;
-      this._window = this._autoSizer.parentNode.ownerDocument.defaultView;
-
-      // Defer requiring resize handler in order to support server-side rendering.
-      // See issue #41
-      this._detectElementResize = createDetectElementResize(
-        nonce,
-        this._window
-      );
-      //@ts-ignore
-      this._detectElementResize.addResizeListener(
-        this._parentNode,
-        this._onResize
-      );
-
-      this._onResize();
-    }
-  }
-
-  _onResize = () => {
-    const { disableHeight, disableWidth } = this;
-
-    if (this._parentNode) {
-      // Guard against AutoSizer component being removed from the DOM immediately after being added.
-      // This can result in invalid style values which can result in NaN values if we don't handle them.
-      // See issue #150 for more context.
-
-      const height = this._parentNode.offsetHeight || 0;
-      const width = this._parentNode.offsetWidth || 0;
-
-      const win = this._window || window;
-      const style = win.getComputedStyle(this._parentNode) || {};
-      const paddingLeft = parseInt(style.paddingLeft, 10) || 0;
-      const paddingRight = parseInt(style.paddingRight, 10) || 0;
-      const paddingTop = parseInt(style.paddingTop, 10) || 0;
-      const paddingBottom = parseInt(style.paddingBottom, 10) || 0;
-
-      const newHeight = height - paddingTop - paddingBottom;
-      const newWidth = width - paddingLeft - paddingRight;
-
-      if (
-        (!disableHeight && this.height !== newHeight) ||
-        (!disableWidth && this.width !== newWidth)
-      ) {
-        this.height = height - paddingTop - paddingBottom;
-        this.width = width - paddingLeft - paddingRight;
-
-        this.args.onResize?.({ height, width });
-      }
-    }
-  };
-
-  setRef = (ele: HTMLElement) => {
-    this._autoSizer = ele;
-    this.setup();
-  };
-
-  willDestroy(): void {
-    super.willDestroy();
-    if (this._detectElementResize && this._parentNode) {
-      this._detectElementResize.removeResizeListener(
-        this._parentNode,
-        this._onResize
-      );
-    }
-  }
-}

package/addon/components/eui-avatar/index.hbs

@@ -1,48 +0,0 @@
-{{#let
-  (inline-styles
-    componentName="EuiAvatar"
-    componentArgs=(hash
-      name=@name
-      color=@color
-      iconColor=@iconColor
-      iconSize=@iconSize
-      iconType=@iconType
-      imageUrl=@imageUrl
-      initials=@initials
-    )
-  )
-  as |inlineStyles|
-}}
-  <div
-    class={{class-names
-      (if @isDisabled "euiAvatar-isDisabled")
-      (if (eq @color "plain") "euiAvatar--plain")
-      componentName="EuiAvatar"
-      size=(arg-or-default @size "m")
-      type=(arg-or-default @type "user")
-    }}
-    aria-label={{if @isDisabled undefined @name}}
-    title={{@name}}
-    role={{if @isDisabled "presentation" "img"}}
-    ...attributes
-    {{simple-style inlineStyles}}
-  >
-    {{#if (and (not @imageUrl) (not @iconType))}}
-      <span aria-hidden="true">
-        {{to-initials @name @initialLength @initials}}
-      </span>
-    {{else if @iconType}}
-      <EuiIcon
-        @iconClasses="euiAvatar__icon"
-        @size={{or @iconSize @size}}
-        @type={{@iconType}}
-        aria-label={{@name}}
-        role={{if @isDisabled "presentation" "img"}}
-        @color={{or
-          @iconColor
-          (if (eq @iconColor null) @iconColor inlineStyles.color)
-        }}
-      />
-    {{/if}}
-  </div>
-{{/let}}