@ember-eui/core 4.4.0 → 5.0.0-alpha.4

package/addon/components/eui-code-block-impl/code-block-controls/index.hbs

@@ -1,33 +0,0 @@
-{{#if (or (and @isCopyable @innerText) @overflowHeight)}}
-  <div class="euiCodeBlock__controls">
-    {{#if @overflowHeight}}
-      <EuiButtonIcon
-        class="euiCodeBlock__fullScreenButton"
-        @size="s"
-        {{on "click" @toggleFullScreen}}
-        @iconType={{if @isFullScreen "cross" "fullScreen"}}
-        @color="text"
-        aria-label={{if @isFullScreen "Collapse" "Expand"}}
-      />
-
-    {{/if}}
-    {{#if (and @isCopyable @innerText)}}
-      <div class="euiCodeBlock__copyButton">
-        <EuiCopy
-          @textToCopy={{@innerText}}
-          @beforeMessage="Copy"
-          @afterMessage="Copied"
-          as |copy|
-        >
-          <EuiButtonIcon
-            @size="s"
-            {{on "click" copy}}
-            @iconType="copy"
-            @color="text"
-            aria-label="Copy"
-          />
-        </EuiCopy>
-      </div>
-    {{/if}}
-  </div>
-{{/if}}

package/addon/components/eui-code-block-impl/index.hbs

@@ -1,111 +0,0 @@
-{{#let
-  (class-names
-    "euiCodeBlock__pre"
-    (if (eq this.whiteSpace "pre") "euiCodeBlock__pre--whiteSpacePre")
-    (if (eq this.whiteSpace "pre-wrap") "euiCodeBlock__pre--whiteSpacePreWrap")
-  )
-  (class-names "euiCodeBlock__code" @language)
-  (class-names
-    "euiCodeBlock"
-    (if this.transparentBackground "euiCodeBlock--transparentBackground")
-    (if @inline "euiCodeBlock--inline")
-    (if (or @isCopyable @overflowHeight) "euiCodeBlock--hasControls")
-    componentName="EuiCodeBlockImpl"
-    paddingSize=this.paddingSize
-    fontSize=this.fontSize
-  )
-  as |preClasses codeClasses classes|
-}}
-  {{#if @inline}}
-    {{#if this.isPortalTargetReady}}
-      {{#in-element this.codeTarget}}
-        {{yield}}
-      {{/in-element}}
-      <span
-        class={{classes}}
-        {{style (if @overflowHeight (hash maxHeight=@overflowHeight))}}
-      ><code
-          {{did-insert (set this "code")}}
-          class={{codeClasses}}
-        ></code></span>
-    {{/if}}
-  {{else}}
-    {{! Not inline }}
-    {{#if this.isPortalTargetReady}}
-      {{#in-element this.codeTarget}}
-        {{yield}}
-      {{/in-element}}
-      <EuiInnerText @fallback="" as |setRef innerText|>
-        <div
-          class={{classes}}
-          {{style (if @overflowHeight (hash maxHeight=@overflowHeight))}}
-        >
-          <pre
-            {{did-insert setRef}}
-            class={{preClasses}}
-            {{style (if @overflowHeight (hash maxHeight=@overflowHeight))}}
-          ><code
-              {{did-insert (set this "code")}}
-              class={{codeClasses}}
-            ></code></pre>
-
-          <EuiCodeBlockImpl::CodeBlockControls
-            @innerText={{innerText}}
-            @isCopyable={{@isCopyable}}
-            @overflowHeight={{@overflowHeight}}
-            @toggleFullScreen={{set this "isFullScreen" (not this.isFullScreen)}}
-            @isFullScreen={{this.isFullScreen}}
-          />
-
-          {{#if this.isFullScreen}}
-            <EuiOverlayMask>
-              <div
-                {{focus-trap
-                  isActive=true
-                  focusTrapOptions=(hash
-                    clickOutsideDeactivates=true returnFocusOnDeactivate=true
-                  )
-                }}
-              >
-                <div
-                  class={{class-names
-                    "euiCodeBlock euiCodeBlock-paddingLarge euiCodeBlock-isFullScreen"
-                    fontSize=this.fontSize
-                    componentName="EuiCodeBlockImpl"
-                  }}
-                >
-                  <pre class={{preClasses}}>
-                    {{!template-lint-disable}}
-                    <code
-                      {{did-insert
-                        (queue (set this "codeFullScreen") this.update)
-                      }}
-                      {{will-destroy (set this "codeFullScreen" null)}}
-                      {{did-update this.update @language}}
-                      class={{codeClasses}}
-                      tabIndex={{0}}
-                      tabIndex={{0}}
-                      {{on "keydown" this.onKeyDown}}
-                    ></code>
-                    {{!template-lint-enable}}
-                  </pre>
-                  <EuiCodeBlockImpl::CodeBlockControls
-                    @innerText={{innerText}}
-                    @isCopyable={{@isCopyable}}
-                    @overflowHeight={{@overflowHeight}}
-                    @toggleFullScreen={{set
-                      this
-                      "isFullScreen"
-                      (not this.isFullScreen)
-                    }}
-                    @isFullScreen={{this.isFullScreen}}
-                  />
-                </div>
-              </div>
-            </EuiOverlayMask>
-          {{/if}}
-        </div>
-      </EuiInnerText>
-    {{/if}}
-  {{/if}}
-{{/let}}

package/addon/components/eui-code-block-impl/index.ts

@@ -1,121 +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 { PaddingSize, FontSize } from '../eui-code-block';
-//@ts-ignore
-import hljs from 'highlight.js';
-import { keys } from '../../utils/keys';
-import { scheduleOnce } from '@ember/runloop';
-
-type EuiCodeImplArgs = {
-  fontSize?: FontSize;
-
-  /**
-   * Displays the passed code in an inline format. Also removes any margins set.
-   */
-  inline?: boolean;
-
-  /**
-   * Displays an icon button to copy the code snippet to the clipboard.
-   */
-  isCopyable?: boolean;
-
-  /**
-   * Sets the syntax highlighting for a specific language
-   */
-  language?: string;
-  overflowHeight?: number;
-  paddingSize?: PaddingSize;
-  transparentBackground?: boolean;
-  /**
-   * Specify how `white-space` inside the element is handled.
-   * `pre` respects line breaks/white space but doesn't force them to wrap the line
-   * `pre-wrap` respects line breaks/white space but does force them to wrap the line when necessary.
-   */
-  whiteSpace?: 'pre' | 'pre-wrap';
-};
-
-export default class EuiAccordionAccordionComponent extends Component<EuiCodeImplArgs> {
-  // Defaults
-  @argOrDefault(false) declare transparentBackground: boolean;
-  @argOrDefault('l') declare paddingSize: string;
-  @argOrDefault('s') declare fontSize: string;
-  @argOrDefault(false) declare isCopyable: boolean;
-  @argOrDefault('pre-wrap') declare whiteSpace: string;
-
-  @tracked isFullScreen: boolean = false;
-  @tracked isPortalTargetReady: boolean = false;
-  @tracked codeTarget: HTMLDivElement | null = null;
-  @tracked code: HTMLElement | null = null;
-  @tracked codeFullScreen: HTMLElement | null = null;
-
-  observer: MutationObserver | null = null;
-
-  constructor(owner: unknown, args: EuiCodeImplArgs) {
-    super(owner, args);
-    this.codeTarget = document.createElement('div');
-    this.isPortalTargetReady = true;
-    this.setupObserver();
-  }
-
-  setupObserver() {
-    this.observer?.disconnect();
-    this.observer = new MutationObserver((mutationsList) => {
-      if (mutationsList.length) this.update();
-    });
-    if (this.codeTarget) {
-      this.update();
-      this.observer.observe(this.codeTarget, {
-        characterData: true,
-        subtree: true,
-        childList: true
-      });
-    }
-  }
-
-  willDestroy(): void {
-    this.observer?.disconnect();
-  }
-
-  @action
-  update() {
-    const render = () => {
-      const language = this.args.language;
-      const html = (
-        this.isPortalTargetReady && this.codeTarget?.innerHTML
-          ? this.codeTarget.innerHTML
-          : ''
-      ).trim();
-
-      const code = this.code;
-
-      if (code) {
-        code.innerHTML = html;
-      }
-
-      if (language) {
-        if (code) {
-          hljs.highlightBlock(code);
-        }
-      }
-
-      if (this.codeFullScreen) {
-        this.codeFullScreen.innerHTML = html;
-        if (language) {
-          hljs.highlightBlock(this.codeFullScreen);
-        }
-      }
-    };
-    scheduleOnce('afterRender', this, render);
-  }
-
-  @action
-  onKeyDown(event: KeyboardEvent): void {
-    if (event.key === keys.ESCAPE) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.isFullScreen = false;
-    }
-  }
-}

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

@@ -1,3 +0,0 @@
-<div class="euiFlyoutBody__banner">
-  {{yield}}
-</div>

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

@@ -1,3 +0,0 @@
-<div class="euiFlyoutBody__overflowContent" ...attributes>
-  {{yield}}
-</div>

package/addon/helpers/create-event.ts

@@ -1,30 +0,0 @@
-import { helper } from '@ember/component/helper';
-
-const EVENT_TYPE = 'Event';
-const KEYBOARD_EVENT = 'KeyboardEvent';
-const INPUT_EVENT = 'InputEvent';
-const MOUSE_EVENT = 'MouseEvent';
-const DEFAULT_TRIGGER = 'click';
-
-type Configuration = {
-  eventType: string;
-  trigger: string;
-  config: EventInit;
-};
-
-export function createEvent([
-  { eventType = EVENT_TYPE, trigger = DEFAULT_TRIGGER, config }
-]: [Configuration]) {
-  switch (eventType) {
-    case KEYBOARD_EVENT:
-      return new KeyboardEvent(trigger, config);
-    case INPUT_EVENT:
-      return new InputEvent(trigger, config);
-    case MOUSE_EVENT:
-      return new MouseEvent(trigger, config);
-    default:
-      return new Event(trigger, config);
-  }
-}
-
-export default helper(createEvent);

package/addon/helpers/get-tab-id.ts

@@ -1,17 +0,0 @@
-import { helper } from '@ember/component/helper';
-import { assert } from '@ember/debug';
-
-export function getTabId([tabOrId]: [Tab | string | number]): string | number | undefined {
-  if (tabOrId === undefined) {
-    return;
-  }
-
-  if (typeof tabOrId === 'string' || typeof tabOrId === 'number') {
-    return tabOrId;
-  }
-
-  assert('The passed `tab` object needs to have the `id` property', tabOrId.id !== undefined);
-  return tabOrId.id;
-}
-
-export default helper(getTabId);

package/addon/modifiers/focus-tab.ts

@@ -1,19 +0,0 @@
-import { scheduleOnce } from '@ember/runloop';
-import { modifier } from 'ember-modifier';
-
-export default modifier(function focusTab(
-  _element: HTMLElement,
-  [selectedTabId, isDisabled, focusFn]: [
-    Tab,
-    boolean,
-    (...args: unknown[]) => void,
-    boolean
-  ]
-) {
-  if (selectedTabId === undefined && !isDisabled) {
-    const fn = () => {
-      focusFn();
-    };
-    scheduleOnce('afterRender', null, fn);
-  }
-});

package/addon/modifiers/get-cursor-node.ts

@@ -1,54 +0,0 @@
-import { modifier } from 'ember-modifier';
-import { EuiMarkdownAstNode } from '../utils/markdown/markdown-types';
-
-export const getCursorNode = (
-  textareaRef: HTMLInputElement,
-  parsed: any
-): EuiMarkdownAstNode => {
-  const { selectionStart } = textareaRef;
-
-  let node: EuiMarkdownAstNode = parsed.result ?? parsed.contents;
-
-  //eslint-disable-next-line
-  outer: while (true) {
-    if (node.children) {
-      for (let i = 0; i < node.children.length; i++) {
-        const child = node.children[i];
-        if (
-          child.position.start.offset < (selectionStart as number) &&
-          (selectionStart as number) < child.position.end.offset
-        ) {
-          if (child.type === 'text') break outer; // don't dive into `text` nodes
-          node = child;
-          continue outer;
-        }
-      }
-    }
-    break;
-  }
-
-  return node;
-};
-
-function wrapper(
-  textarea: HTMLInputElement,
-  parsed: any,
-  callback: (node: EuiMarkdownAstNode) => void
-) {
-  const node = getCursorNode(textarea, parsed);
-  callback(node);
-}
-
-export default modifier(function getCursorNodeModifier(
-  textarea: HTMLInputElement,
-  [parsed, onSelectedNode]: [boolean, () => void]
-) {
-  const fn = wrapper.bind(null, textarea, parsed, onSelectedNode);
-  textarea.addEventListener('keyup', fn);
-  textarea.addEventListener('mouseup', fn);
-
-  return () => {
-    textarea.removeEventListener('keyup', fn);
-    textarea.removeEventListener('mouseup', fn);
-  };
-});

package/addon/modifiers/invalidate-indeterminate.ts

@@ -1,10 +0,0 @@
-import { modifier } from 'ember-modifier';
-
-export default modifier(function invalidateIndeterminate(
-  element: HTMLInputElement,
-  [indeterminate]: [boolean]
-) {
-  if (element) {
-    element.indeterminate = indeterminate;
-  }
-});

package/addon/modifiers/on-event-simulate-event.ts

@@ -1,32 +0,0 @@
-import { modifier } from 'ember-modifier';
-
-type Target = Element | string | null;
-
-type OnEventSimulateEventOptions = { target: Target; event: Event };
-
-export default modifier(function onEventSimulateEvent(
-  element,
-  [eventName]: [string],
-  { target, event }: OnEventSimulateEventOptions
-): void | (() => unknown) {
-  let _target: EventTarget | null;
-  if (target && typeof target === 'string') {
-    _target = element.querySelector(target);
-  }
-
-  function dispatch(e: MouseEvent): void {
-    if (_target && typeof target === 'string') {
-      // Prevent a recursive behavior catched by the browser
-      if (e.target instanceof Element && !e.target.closest(target)) {
-        _target.dispatchEvent(event);
-      }
-    }
-  }
-
-  if (target) {
-    element.addEventListener(eventName, dispatch);
-    return (): void => {
-      element.removeEventListener(eventName, dispatch);
-    };
-  }
-});

package/app/components/eui-card/eui-card-select/index.js

@@ -1 +0,0 @@
-export { default } from '@ember-eui/core/components/eui-card/eui-card-select';

package/app/components/eui-flyout-body/banner/index.js

@@ -1 +0,0 @@
-export { default } from '@ember-eui/core/components/eui-flyout-body/banner';

package/app/components/eui-flyout-body/content/index.js

@@ -1 +0,0 @@
-export { default } from '@ember-eui/core/components/eui-flyout-body/content';

package/app/helpers/create-event.js

@@ -1 +0,0 @@
-export { default, createEvent } from '@ember-eui/core/helpers/create-event';

package/app/helpers/get-tab-id.js

@@ -1 +0,0 @@
-export { default, getTabId } from '@ember-eui/core/helpers/get-tab-id';

package/app/modifiers/fixed-header.js

@@ -1 +0,0 @@
-export { default } from '@ember-eui/core/modifiers/fixed-header';

package/app/modifiers/focus-tab.js

@@ -1 +0,0 @@
-export { default } from '@ember-eui/core/modifiers/focus-tab';

package/app/modifiers/get-cursor-node.js

@@ -1 +0,0 @@
-export { default } from '@ember-eui/core/modifiers/get-cursor-node';

package/app/modifiers/invalidate-indeterminate.js

@@ -1 +0,0 @@
-export { default } from '@ember-eui/core/modifiers/invalidate-indeterminate';

package/app/modifiers/on-event-simulate-event.js

@@ -1 +0,0 @@
-export { default } from '@ember-eui/core/modifiers/on-event-simulate-event';

package/docs/forms/form-controls/checkbox-demo/demo1.md

@@ -1,40 +0,0 @@
----
-order: 1
----
-
-# Demo
-
-```hbs template
-<EuiForm>
-  <EuiCheckbox
-    @id="131"
-    @label="I am a checkbox"
-    @checked={{this.checkbox1}}
-    {{on "change" (pick "target.checked" (set this "checkbox1"))}}
-  />
-  <EuiCheckbox
-    @id="131d"
-    @label="I am an indeterminate checkbox"
-    @indeterminate={{this.indeterminate}}
-    {{on "change" (pick "target.checked" (set this "indeterminate"))}}
-  />
-  <EuiCheckbox
-    @disabled={{true}}
-    @id="disabled-checkbox"
-    @label="I am a checkbox"
-    @checked={{this.checkbox1}}
-    {{on "change" (pick "target.checked" (set this "checkbox1"))}}
-  />
-</EuiForm>
-```
-
-```javascript component
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class EuiTextFieldDemo1 extends Component {
-  @tracked checkbox1 = true;
-  @tracked indeterminate = true;
-}
-```

package/docs/forms/form-controls/checkbox-group.md

@@ -1 +0,0 @@
-# Checkbox group

package/docs/forms/form-controls/checkbox.md

@@ -1 +0,0 @@
-# Checkbox

package/docs/forms/form-controls/combo-box.md

@@ -1 +0,0 @@
-# Combo box

package/docs/forms/form-controls/file-picker-demo/demo1.md

@@ -1,28 +0,0 @@
----
-order: 1
----
-
-# Demo
-
-```hbs template
-<EuiForm>
-  {{#let (unique-id) as |inputId|}}
-    <EuiFormRow @label="Some Input" @helpText="here's some help text" @id={{inputId}}>
-      <EuiFilePicker @onChange={{set this "files"}} />
-    </EuiFormRow>
-  {{/let}}
-  {{#each this.files as |file|}}
-    {{file.name}}
-  {{/each}}
-</EuiForm>
-```
-
-```javascript component
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class EuiTextFieldDemo1 extends Component {
-  @tracked files = [];
-}
-```

package/docs/forms/form-controls/file-picker.md

@@ -1 +0,0 @@
-# File picker

package/docs/forms/form-controls/form-control-layout-delimited.md

@@ -1 +0,0 @@
-# Form control layout delimited

package/docs/forms/form-controls/form-control-layout.md

@@ -1 +0,0 @@
-# Form control layout

package/docs/forms/form-controls/number-field.md

@@ -1 +0,0 @@
-# Number field

package/docs/forms/form-controls/password-field.md

@@ -1 +0,0 @@
-# Password field

package/docs/forms/form-controls/radio-demo/demo1.md

@@ -1,39 +0,0 @@
----
-order: 1
----
-
-# Demo
-
-```hbs template
-<EuiForm>
-  <EuiRadio
-    @id="131"
-    @label="I am a checkbox"
-    checked={{this.radio1}}
-    {{on "change" (pick "target.checked" (set this "radio1"))}}
-  />
-  <EuiRadio
-    @id="131d"
-    @label="I am an indeterminate checkbox"
-    checked={{this.radio2}}
-  />
-  <EuiRadio
-    @disabled={{true}}
-    @id="disabled-checkbox"
-    @label="I am a checkbox"
-    @checked={{this.radio1}}
-    {{on "change" (pick "target.checked" (set this "radio1"))}}
-  />
-</EuiForm>
-```
-
-```javascript component
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class EuiTextFieldDemo1 extends Component {
-  @tracked radio1 = true;
-  @tracked radio2 = false;
-}
-```

package/docs/forms/form-controls/radio-group-demo/demo1.md

@@ -1,60 +0,0 @@
----
-order: 1
----
-
-# Demo
-
-This component is different yet simplier from what you'd expect in ember in a way that you don't control the rendering of each checkbox, you just pass in an array of `@options` and `@idSelected` which you are in charge to calculate on subsequent `@onChange`'s, refer to the javascript snippet.
-
-You can optionally pass `@valueKey` and `@labelKey` for a more flexible and ergonomic API, so you don't actually _have_ to map your options to
-`{ id: '', label: '' }` which are the default `@valueKey` and `@labelKey`.
-
-<EuiSpacer />
-
-
-```hbs template
-<EuiRadioGroup
-  @options={{this.radios}}
-  @idSelected={{this.selectedRadioId}}
-  @onChange={{set this "selectedRadioId"}}
-/>
-<EuiSpacer />
-<EuiRadioGroup
-  @legend="With legend"
-  @options={{this.radios}}
-  @idSelected={{this.selectedRadioId}}
-  @onChange={{set this "selectedRadioId"}}
-/>
-<EuiSpacer />
-Selected:
-{{this.selectedRadioId}}
-```
-
-```javascript component
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class EuiTextFieldDemo1 extends Component {
-  radios = [
-    {
-      id: 'radio-1',
-      label: 'radio 1',
-    },
-    {
-      id: 'radio-2',
-      label: 'radio 2',
-    },
-    {
-      id: 'radio-3',
-      label: 'radio 3',
-    },
-    {
-      id: 'radio-4',
-      label: 'radio 4',
-    },
-  ];
-
-  @tracked selectedRadioId = null;
-}
-```

package/docs/forms/form-controls/radio-group.md

@@ -1 +0,0 @@
-# Radio group