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

package/addon/components/eui-field-search/index.hbs

@@ -1,61 +0,0 @@
-{{#let
-  (and (not (arg-or-default @isFakePrependBlock false)) (has-block "prepend"))
-  (and (not (arg-or-default @isFakeAppendBlock false)) (has-block "append"))
-  (arg-or-default @id (unique-id)) as |hasPrepend hasAppend inputId|
-}}
-  {{#let
-    (class-names
-      (if @fullWidth "euiFieldSearch--fullWidth")
-      (if @compressed "euiFieldSearch--compressed")
-      (if (or hasPrepend hasAppend) "euiFieldSearch--inGroup")
-      (if @isLoading "euiFieldSearch--isLoading")
-      (if
-        (and (arg-or-default @isClearable true) @value)
-        "euiFieldSearch--isClearable"
-      )
-      "euiFieldSearch"
-    ) as |classes|
-  }}
-    <EuiFormControlLayout
-      @icon="search"
-      @fullWidth={{@fullWidth}}
-      @isLoading={{@isLoading}}
-      @disabled={{@disabled}}
-      @clear={{if
-        (and
-          @isClearable
-          @value
-          (not @readOnly)
-          (and (not @isDisabled) (not @disabled))
-        )
-        this.onClear
-      }}
-      @compressed={{@compressed}}
-      @useGroup={{or hasPrepend hasAppend}}
-    >
-      <:prepend as |prependClasses|>
-        {{yield prependClasses inputId to="prepend"}}
-      </:prepend>
-      <:field>
-        <input
-          id={{inputId}}
-          class={{classes}}
-          value={{this.value}}
-          disabled={{@disabled}}
-          type="text"
-          placeholder={{@placeholder}}
-          ...attributes
-          {{on "keyup" (fn this.onKeyUp this.incremental @onSearch)}}
-          {{on "search" this.setValue}}
-          {{on "change" this.setValue}}
-          {{did-insert this.didInsertInput}}
-          {{did-update this.didUpdateValue @value}}
-          {{validatable-control @isInvalid}}
-        />
-      </:field>
-      <:append as |appendClasses|>
-        {{yield appendClasses inputId to="append"}}
-      </:append>
-    </EuiFormControlLayout>
-  {{/let}}
-{{/let}}

package/addon/components/eui-field-search/index.ts

@@ -1,120 +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 { keys } from '../../utils/keys';
-import { Browser } from '../../utils/browser';
-
-let isSearchSupported = false;
-
-/**
- * You can find more typing on the template
- */
-type EuiFieldSearchArgs = {
-  value?: string;
-  defaultValue?: string;
-
-  /**
-   * When `true` the search will be executed (that is, the `onSearch` will be called) as the
-   * user types.
-   */
-  incremental?: boolean;
-  /**
-   * Optional callback method called on open and close with a single `isOpen` parameter
-   */
-  onKeyUp?: (e: KeyboardEvent) => void;
-  onSearch?: (value: string) => void;
-};
-
-export default class EuiFieldSearch extends Component<EuiFieldSearchArgs> {
-  @tracked inputElement: HTMLInputElement | null = null;
-  @tracked value: string | undefined =
-    this.args.value ||
-    (this.args.defaultValue ? `${this.args.defaultValue}` : '');
-
-  @argOrDefault(false) incremental = false;
-
-  @action
-  setValue(e: InputEvent): void {
-    const value = (e.target as HTMLInputElement).value;
-    if (this.value !== value) {
-      this.value = value;
-    }
-    this.args.onSearch?.(this.value);
-  }
-
-  @action
-  onKeyUp(
-    incremental: boolean,
-    onSearch: (value: string) => void,
-    e: KeyboardEvent
-  ): void {
-    this.value = (e.target as HTMLInputElement).value;
-    if (this.args.onKeyUp) {
-      this.args.onKeyUp(e);
-      if (e.defaultPrevented) {
-        return;
-      }
-    }
-
-    if (
-      onSearch &&
-      ((e.key !== keys.ENTER && incremental) ||
-        (e.key === keys.ENTER && !isSearchSupported))
-    ) {
-      onSearch((e.target as HTMLInputElement).value);
-    }
-  }
-
-  @action
-  didUpdateValue() {
-    this.value = this.args.value;
-  }
-
-  @action
-  onClear(): void {
-    const nativeInputValue = Object.getOwnPropertyDescriptor(
-      HTMLInputElement.prototype,
-      'value'
-    );
-    const nativeInputValueSetter = nativeInputValue
-      ? nativeInputValue.set
-      : undefined;
-    if (nativeInputValueSetter) {
-      nativeInputValueSetter.call(this.inputElement, '');
-    }
-
-    // dispatch input event, with IE11 support/fallback
-    let event;
-    if ('Event' in window && typeof Event === 'function') {
-      event = new Event('input', {
-        bubbles: true,
-        cancelable: false
-      });
-    } else {
-      // IE11
-      event = document.createEvent('Event');
-      event.initEvent('input', true, false);
-    }
-
-    if (this.inputElement) {
-      if (event) {
-        this.inputElement.dispatchEvent(event);
-      }
-      // set focus on the search field
-      this.inputElement.focus();
-      this.inputElement.dispatchEvent(new Event('change'));
-    }
-    this.value = '';
-
-    if (this.args.onSearch && this.incremental) {
-      this.args.onSearch('');
-    }
-  }
-
-  @action
-  didInsertInput(inputRef: HTMLInputElement): void {
-    this.inputElement = inputRef;
-    isSearchSupported = Browser.isEventSupported('search', this.inputElement);
-  }
-}

package/addon/components/eui-field-text/index.hbs

@@ -1,61 +0,0 @@
-{{#let
-  (and (not (arg-or-default @isFakePrependBlock false)) (has-block "prepend"))
-  (and (not (arg-or-default @isFakeAppendBlock false)) (has-block "append"))
-  (arg-or-default @id (unique-id)) as |hasPrepend hasAppend inputId|
-}}
-  {{#let
-    (class-names
-      (if @icon "euiFieldText--withIcon")
-      (if @fullWidth "euiFieldText--fullWidth")
-      (if @compressed "euiFieldText--compressed")
-      (if (or hasPrepend hasAppend) "euiFieldText--inGroup")
-      (if @isLoading "euiFieldText--isLoading")
-      "euiFieldText"
-    ) as |classes|
-  }}
-    {{#if @controlOnly}}
-      <input
-        id={{inputId}}
-        value={{@value}}
-        class={{classes}}
-        disabled={{@disabled}}
-        type="text"
-        placeholder={{@placeholder}}
-        ...attributes
-        {{validatable-control @isInvalid}}
-        {{did-insert (optional @inputRef)}}
-      />
-    {{else}}
-      <EuiFormControlLayout
-        @icon={{@icon}}
-        @clear={{@clear}}
-        @fullWidth={{@fullWidth}}
-        @isLoading={{@isLoading}}
-        @compressed={{@compressed}}
-        @readOnly={{@readOnly}}
-        @disabled={{@disabled}}
-        @useGroup={{or hasPrepend hasAppend}}
-      >
-        <:prepend as |prependClasses|>
-          {{yield prependClasses inputId to="prepend"}}
-        </:prepend>
-        <:field>
-          <input
-            id={{inputId}}
-            value={{@value}}
-            class={{classes}}
-            disabled={{@disabled}}
-            type="text"
-            placeholder={{@placeholder}}
-            readonly={{@readOnly}}
-            ...attributes
-            {{validatable-control @isInvalid}}
-          />
-        </:field>
-        <:append as |appendClasses|>
-          {{yield appendClasses inputId to="append"}}
-        </:append>
-      </EuiFormControlLayout>
-    {{/if}}
-  {{/let}}
-{{/let}}

package/addon/components/eui-file-picker/index.hbs

@@ -1,84 +0,0 @@
-{{#let
-  (class-names
-    (if @compressed "euiFilePicker--compressed")
-    (if @fullWidth "euiFilePicker--fullWidth")
-    (if @isInvalid "euiFilePicker--isInvalid")
-    (if @isLoading "euiFilePicker--isLoading")
-    display=this.display
-    componentName="EuiFilePicker"
-  )
-  (arg-or-default @id (unique-id))
-  as |classes inputId|
-}}
-  {{#let
-    (if inputId (concat inputId "-filePicker__prompt") (unique-id))
-    (not-eq this.promptText null)
-    (eq this.display "default")
-    as |promptId isOverridingInitialPrompt normalFormControl|
-  }}
-    <div
-      class="{{classes}}
-        {{if this.isHoveringDrop 'euiFilePicker__showDrop'}}
-        {{if isOverridingInitialPrompt 'euiFilePicker--hasFiles'}}"
-    >
-      <div class="euiFilePicker__wrap">
-        <input
-          type="file"
-          id={{inputId}}
-          name={{@name}}
-          class="euiFilePicker__input"
-          disabled={{@disabled}}
-          aria-describedby={{promptId}}
-          multiple={{@multiple}}
-          {{on "dragover" this.showDrop}}
-          {{on "dragleave" this.hideDrop}}
-          {{on "drop" this.hideDrop}}
-          {{on "change" this.handleChange}}
-          {{did-insert this.didInsertInput}}
-          {{validatable-control @isInvalid}}
-          ...attributes
-        />
-        <div class="euiFilePicker__prompt" id={{promptId}}>
-          <EuiIcon
-            @iconClasses="euiFilePicker__icon"
-            @type="importAction"
-            @size={{if true "m" "l"}}
-            aria-hidden="true"
-          />
-          <div class="euiFilePicker__promptText">
-            {{or this.promptText this.initialPromptText}}
-          </div>
-          {{#if (and @isLoading normalFormControl)}}
-            <EuiLoadingSpinner class="euiFilePicker__loadingSpinner" />
-          {{else if isOverridingInitialPrompt}}
-            {{#if normalFormControl}}
-              <button
-                type="button"
-                aria-label="Clear selected files"
-                class="euiFilePicker__clearButton"
-                {{on "click" this.removeFiles}}
-              >
-                <EuiIcon
-                  @iconClasses="euiFilePicker__clearIcon"
-                  @type="cross"
-                />
-              </button>
-            {{else}}
-              <EuiButtonEmpty
-                aria-label="Clear selected files"
-                class="euiFilePicker__clearButton"
-                @size="xs"
-                {{on "click" this.removeFiles}}
-              >
-                Remove
-              </EuiButtonEmpty>
-            {{/if}}
-          {{/if}}
-          {{#if (and (not normalFormControl) @isLoading)}}
-            <EuiProgress @size="xs" @color="accent" position="absolute" />
-          {{/if}}
-        </div>
-      </div>
-    </div>
-  {{/let}}
-{{/let}}

package/addon/components/eui-file-picker/index.ts

@@ -1,113 +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 { displayMapping } from '../../utils/css-mappings/eui-file-picker';
-
-export type EuiFilePickerDisplay = keyof typeof displayMapping;
-
-/**
- * You can find more typing on the template
- */
-type EuiFilePicker = {
-  id?: string;
-  name?: string;
-  class?: string;
-  /**
-   * The content that appears in the dropzone if no file is attached
-   */
-  initialPromptText?: Component | string | null;
-  /**
-   * Use as a callback to access the HTML FileList API
-   */
-  onChange?: (files: FileList | null) => void;
-  /**
-   * Reduces the size to a typical (compressed) input
-   */
-  compressed?: boolean;
-  /**
-   * Size or type of display;
-   * `default` for normal height, similar to other controls;
-   * `large` for taller size
-   */
-  display?: EuiFilePickerDisplay;
-  fullWidth?: boolean;
-  isInvalid?: boolean;
-  isLoading?: boolean;
-  disabled?: boolean;
-
-  /**
-   * Optionally pass a fn to get the instance of the component to access it programatically
-   */
-  ref?: (c: typeof EuiFilePickerComponent) => void;
-};
-
-export default class EuiFilePickerComponent extends Component<EuiFilePicker> {
-  @tracked fileInput: HTMLInputElement | null = null;
-  @tracked promptText: string | null | undefined = null;
-  @tracked isHoveringDrop = false;
-
-  @argOrDefault('Select or drag and drop a file') initialPromptText!:
-    | Component
-    | string
-    | null;
-
-  @argOrDefault(false) compressed!: boolean;
-  @argOrDefault('') display!: string;
-
-  @action
-  showDrop(): void {
-    if (!this.args.disabled) {
-      this.isHoveringDrop = true;
-    }
-  }
-
-  @action
-  hideDrop(): void {
-    this.isHoveringDrop = false;
-  }
-
-  @action
-  handleChange(): void {
-    if (!this.fileInput) return;
-
-    if (this.fileInput.files && this.fileInput.files.length > 1) {
-      this.promptText = `${this.fileInput.files.length} files selected`;
-      // TODO: Change when EuiI18n is available
-      // <EuiI18n
-      //   token="euiFilePicker.filesSelected"
-      //   default="{fileCount} files selected"
-      //   values={{ fileCount: this.fileInput.files.length }}
-      // />
-    } else if (this.fileInput.files && this.fileInput.files.length === 0) {
-      this.promptText = null;
-    } else {
-      this.promptText = this.fileInput.value.split('\\').pop();
-    }
-
-    const { onChange } = this.args;
-
-    if (onChange) {
-      onChange(this.fileInput.files);
-    }
-  }
-
-  @action
-  removeFiles(e?: MouseEvent): void {
-    if (e) {
-      e.stopPropagation();
-      e.preventDefault();
-    }
-
-    if (!this.fileInput) return;
-
-    this.fileInput.value = '';
-    this.handleChange();
-  }
-
-  @action
-  didInsertInput(inputRef: HTMLInputElement): void {
-    this.fileInput = inputRef;
-    this.args.ref?.(this as any as typeof EuiFilePickerComponent);
-  }
-}

package/addon/components/eui-flex-grid/index.hbs

@@ -1,31 +0,0 @@
-{{#let (arg-or-default @tagName "div") as |tagName|}}
-  {{#if (eq tagName "div")}}
-    <div
-      class={{class-names
-        (unless (eq @responsive false) "euiFlexGrid--responsive")
-        componentName="EuiFlexGrid"
-        gutterSize=(arg-or-default @gutterSize "l")
-        direction=(arg-or-default @direction "row")
-        columns=(arg-or-default @columns 0)
-      }}
-      ...attributes
-    >
-      {{yield}}
-    </div>
-  {{else}}
-    {{#let (element tagName) as |Element|}}
-      <Element
-        class={{class-names
-          (unless (eq @responsive false) "euiFlexGrid--responsive")
-          componentName="EuiFlexGrid"
-          gutterSize=(arg-or-default @gutterSize "l")
-          direction=(arg-or-default @direction "row")
-          columns=(arg-or-default @columns 0)
-        }}
-        ...attributes
-      >
-        {{yield}}
-      </Element>
-    {{/let}}
-  {{/if}}
-{{/let}}

package/addon/components/eui-flex-group/index.hbs

@@ -1,31 +0,0 @@
-{{#if (eq @tagName "span")}}
-  <span
-    class={{class-names
-      (unless (eq @responsive false) "euiFlexGroup--responsive")
-      (if @wrap "euiFlexGroup--wrap")
-      componentName="EuiFlexGroup"
-      gutterSize=(arg-or-default @gutterSize "l")
-      alignItems=(arg-or-default @alignItems "stretch")
-      justifyContent=(arg-or-default @justifyContent "flexStart")
-      direction=(arg-or-default @direction "row")
-    }}
-    ...attributes
-  >
-    {{yield}}
-  </span>
-{{else}}
-  <div
-    class={{class-names
-      (unless (eq @responsive false) "euiFlexGroup--responsive")
-      (if @wrap "euiFlexGroup--wrap")
-      componentName="EuiFlexGroup"
-      gutterSize=(arg-or-default @gutterSize "l")
-      alignItems=(arg-or-default @alignItems "stretch")
-      justifyContent=(arg-or-default @justifyContent "flexStart")
-      direction=(arg-or-default @direction "row")
-    }}
-    ...attributes
-  >
-    {{yield}}
-  </div>
-{{/if}}

package/addon/components/eui-flex-item/index.hbs

@@ -1,17 +0,0 @@
-{{#let (arg-or-default @tagName "div") as |tagName|}}
-  {{#if (eq tagName "div")}}
-    <div class={{class-names componentName="EuiFlexItem" grow=@grow}} ...attributes>
-      {{yield}}
-    </div>
-  {{else if (eq tagName "span")}}
-    <span class={{class-names componentName="EuiFlexItem" grow=@grow}} ...attributes>
-      {{yield}}
-    </span>
-  {{else}}
-    {{#let (element tagName) as |Element|}}
-      <Element class={{class-names componentName="EuiFlexItem" grow=@grow}} ...attributes>
-        {{yield}}
-      </Element>
-    {{/let}}
-  {{/if}}
-{{/let}}

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

@@ -1,134 +0,0 @@
-{{#let
-  (class-names
-    (if (eq this.maxWidth true) "euiFlyout--maxWidth-default")
-    componentName="EuiFlyout"
-    type=this.type
-    side=this.side
-    size=this.size
-    padding=this.paddingSize
-  )
-  (class-names
-    "euiFlyout__closeButton"
-    (concat "euiFlyout__closeButton--" this.closeButtonPosition)
-    (or @closeButtonProps.className @closeButtonProps.classes)
-  )
-  (modifier
-    "focus-trap"
-    isActive=(arg-or-default @isFocusTrapActive true)
-    shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
-    isPaused=this.isPushed
-    focusTrapOptions=(arg-or-default
-      @focusTrapOptions
-      (hash allowOutsideClick=true clickOutsideDeactivates=(not this.ownFocus))
-    )
-  )
-  (modifier
-    "outside-click-detector"
-    isDisabled=(or this.isPushed (not this.outsideClickCloses))
-    onOutsideClick=this.onClose
-  )
-  (modifier "style" this.styles)
-  (modifier "on-key" "Escape" this.onClose)
-  (modifier
-    this.classesModifier
-    type=this.type
-    isPushed=this.isPushed
-    side=this.side
-    dimensions=this.dimensions
-    functionToCallOnWindowResize=this.functionToCallOnWindowResize
-  )
-  (modifier "resize-observer" onResize=this.onResize)
-  (element this.as)
-  as |classes closeButtonClasses focusTrap outsideClickDetector currentStyles onEscape classesModifier resizeObserver Element|
-}}
-
-  {{#if (and this.ownFocus (not this.isPushed))}}
-    <EuiOverlayMask @headerZindexLocation="below" @onClick={{this.onClose}}>
-      <Element
-        role={{this.role}}
-        class={{classes}}
-        tabindex={{-1}}
-        {{currentStyles}}
-        {{focusTrap}}
-        {{outsideClickDetector}}
-        {{classesModifier}}
-        {{resizeObserver}}
-        ...attributes
-      >
-        {{#if (and @onClose (not @hideCloseButton))}}
-          <EuiButtonIcon
-            @display={{if
-              (eq this.closeButtonPosition "outside")
-              "fill"
-              "empty"
-            }}
-            @iconType="cross"
-            @color="text"
-            aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
-            data-test-subj="euiFlyoutCloseButton"
-            class={{closeButtonClasses}}
-            {{on "click" this.onButtonCloseClicked}}
-          />
-        {{/if}}
-        {{yield}}
-      </Element>
-    </EuiOverlayMask>
-  {{else if (not this.isPushed)}}
-    <EuiPortal>
-      <Element
-        role={{this.role}}
-        class={{classes}}
-        tabindex={{-1}}
-        {{currentStyles}}
-        {{focusTrap}}
-        {{outsideClickDetector}}
-        {{classesModifier}}
-        {{resizeObserver}}
-        ...attributes
-      >
-        {{#if (and @onClose (not @hideCloseButton))}}
-          <EuiButtonIcon
-            @display={{if
-              (eq this.closeButtonPosition "outside")
-              "fill"
-              "empty"
-            }}
-            @iconType="cross"
-            @color="text"
-            aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
-            data-test-subj="euiFlyoutCloseButton"
-            class={{closeButtonClasses}}
-            {{on "click" this.onButtonCloseClicked}}
-          />
-        {{/if}}
-        {{yield}}
-      </Element>
-    </EuiPortal>
-  {{else}}
-    <Element
-      role={{this.role}}
-      class={{classes}}
-      tabindex={{-1}}
-      {{currentStyles}}
-      {{focusTrap}}
-      {{outsideClickDetector}}
-      {{onEscape}}
-      {{classesModifier}}
-      {{resizeObserver}}
-      ...attributes
-    >
-      {{#if (and @onClose (not @hideCloseButton))}}
-        <EuiButtonIcon
-          @display={{if (eq this.closeButtonPosition "outside") "fill" "empty"}}
-          @iconType="cross"
-          @color="text"
-          aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
-          data-test-subj="euiFlyoutCloseButton"
-          class={{closeButtonClasses}}
-          {{on "click" this.onButtonCloseClicked}}
-        />
-      {{/if}}
-      {{yield}}
-    </Element>
-  {{/if}}
-{{/let}}