@ember-eui/core 5.7.0 → 5.8.2

package/addon/components/eui-combo-box/index.hbs

@@ -29,6 +29,7 @@
     )
     isLoading=@isLoading
     autoFocus=(and (not @isDisabled) @autoFocus)
+    icon=@triggerIcon
   }}
   @matcher={{@matcher}}
   @initiallyOpen={{@initiallyOpen}}
@@ -70,7 +71,7 @@
     (if @compressed "euiComboBox--compressed")
     (if @fullWidth "euiComboBox--fullWidth")
     (if @isDisabled "euiComboBox-isDisabled")
-    (if @isInvalid "euiComboBox--isInvalid")
+    (if @isInvalid "euiComboBox-isInvalid")
     (if this.select.isOpen "euiComboBox-isOpen")
   }}
   @noMatchesMessageComponent={{if

package/addon/components/eui-combo-box/trigger/index.hbs

@@ -1,5 +1,5 @@
 <EuiFormControlLayout
-  @icon="arrowDown"
+  @icon={{arg-or-default @icon "arrowDown"}}
   @iconSide="right"
   @fullWidth={{@fullWidth}}
   @compressed={{@compressed}}

package/addon/components/eui-empty-prompt/index.hbs

@@ -9,6 +9,7 @@
     @color={{arg-or-default @color "transparent"}}
     @hasBorder={{@hasBorder}}
     @hasShadow={{false}}
+    ...attributes
   >
     <div class="euiEmptyPrompt__main">
       {{#if (has-block "icon")}}
@@ -80,4 +81,4 @@
       {{/if}}
     {{/if}}
   </EuiPanel>
-{{/let}}
+{{/let}}

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

@@ -0,0 +1,33 @@
+{{#let this.lookupedTokens as |result|}}
+  {{#if this.isI18nTokensShape}}
+    {{#if this.i18n.renderComponent}}
+      {{yield
+        (component
+          (ensure-safe-component this.i18n.renderComponent) tokens=result
+        )
+      }}
+    {{else}}
+      {{#each
+        (if (not-eq (type-of result) "array") (array result) result)
+        as |token index|
+      }}
+        {{yield (component "eui-i18n/render" token=token) index result}}
+      {{/each}}
+    {{/if}}
+  {{else}}
+    {{#if this.i18n.renderComponent}}
+      {{yield
+        (component
+          (ensure-safe-component this.i18n.renderComponent) tokens=result
+        )
+      }}
+    {{else}}
+      {{#each
+        (if (not-eq (type-of result) "array") (array result) result)
+        as |token index|
+      }}
+        {{yield (component "eui-i18n/render" token=token) index result}}
+      {{/each}}
+    {{/if}}
+  {{/if}}
+{{/let}}

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

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { processStringToChildren } from './util';
+//@ts-ignore
+import { i18n, I18nShape } from '@ember-eui/core/i18n';
+
+interface Args {
+  tokens?: string[];
+  defaults?: string[];
+  token?: string;
+  default?: string;
+  values?: { [key: string]: any };
+  i18n?: I18nShape;
+}
+
+interface lookupTokenOptions {
+  token: string;
+  i18nMapping: I18nShape['mapping'];
+  valueDefault: string;
+  i18nMappingFunc?: (token: string) => string;
+  values?: { [key: string]: any };
+  render?: I18nShape['render'];
+}
+
+function lookupToken(options: lookupTokenOptions) {
+  const {
+    token,
+    i18nMapping,
+    valueDefault,
+    i18nMappingFunc,
+    values = {}
+  } = options;
+
+  let renderable = (i18nMapping && i18nMapping[token]) || valueDefault;
+
+  const children = processStringToChildren(renderable, values, i18nMappingFunc);
+  if (typeof children === 'string') {
+    // likewise, `processStringToChildren` returns a string or ReactChild[] depending on
+    // the type of `values`, so we will make the assumption that the default value is correct.
+    return children;
+  }
+
+  // same reasons as above, we can't promise the transforms match the default's type
+  return children;
+}
+
+export default class EuiI18nComponent extends Component<Args> {
+  get isI18nTokensShape() {
+    return this.args.tokens != null;
+  }
+
+  get i18n() {
+    return this.args.i18n || i18n;
+  }
+
+  get lookupedTokens() {
+    if (this.isI18nTokensShape) {
+      return this.args.tokens?.map((token, idx) =>
+        lookupToken({
+          token,
+          i18nMapping: i18n.mapping,
+          valueDefault: this.args.defaults![idx]
+        })
+      );
+    } else {
+      return lookupToken({
+        token: this.args.token!,
+        i18nMapping: i18n.mapping,
+        valueDefault: this.args.default!,
+        values: this.args.values
+      });
+    }
+  }
+}

package/addon/components/eui-i18n/render.hbs

@@ -0,0 +1 @@
+{{yield @token}}

package/addon/components/eui-i18n/util.ts

@@ -0,0 +1,127 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  isBoolean,
+  isString,
+  isNumber,
+  isUndefined
+} from '../../utils/predicate';
+import { get } from '@ember/object';
+import { assert } from '@ember/debug';
+
+function isPrimitive(value: any) {
+  return (
+    isBoolean(value) || isString(value) || isNumber(value) || isUndefined(value)
+  );
+}
+
+type Child = string | { propName: string };
+
+function hasPropName(child: Child): child is { propName: string } {
+  return child
+    ? typeof child === 'object' && child.hasOwnProperty('propName')
+    : false;
+}
+
+function isElement(value: any) {
+  return value.hasOwnProperty('propName') && !isPrimitive(value);
+}
+
+/**
+ * Replaces placeholder values in `input` with their matching value in `values`
+ * e.g. input:'Hello, {name}' will replace `{name}` with `values[name]`
+ * @param {string} input
+ * @param {RenderableValues} values
+ * @param {Function} i18nMappingFunc
+ * @returns {string | React.ReactChild[]}
+ */
+export function processStringToChildren(
+  input: string,
+  values: { [key: string]: any },
+  i18nMappingFunc?: (token: string) => string
+): any[] | string {
+  const children: any[] = [];
+
+  let child: Child | undefined = { propName: '' };
+
+  function appendCharToChild(char: string) {
+    if (child === undefined) {
+      // starting a new string literal
+      child = char;
+    } else if (typeof child === 'string') {
+      // existing string literal
+      child = child + char;
+    } else if (hasPropName(child)) {
+      // adding to the propName of a values lookup
+      child.propName = child.propName + char;
+    }
+  }
+
+  function appendValueToChildren(value?: Child) {
+    if (value === undefined) {
+      return;
+    } else if (hasPropName(value)) {
+      // an array with any ReactElements will be kept as an array
+      // so they need to be assigned a key
+      // children.push(cloneElement(value, { key: children.length }));
+      children.push(value.propName);
+    } else if (isElement(value)) {
+      // this won't be called, propName children are converted to a ReactChild before calling this
+    } else {
+      // everything else can go straight in
+      if (i18nMappingFunc !== undefined && typeof value === 'string') {
+        value = i18nMappingFunc(value);
+      }
+      children.push(value);
+    }
+  }
+
+  // if we don't encounter a non-primitive
+  // then `children` can be concatenated together at the end
+  let encounteredNonPrimitive = false;
+  for (let i = 0; i < input.length; i++) {
+    const char = input[i];
+
+    if (char === '\\') {
+      // peek at the next character to know if this is an escape
+      const nextChar = input[i + 1];
+      let charToAdd = char; // if this isn't an escape sequence then we will add the backslash
+
+      if (nextChar === '{' || nextChar === '}') {
+        // escaping a brace
+        i += 1; // advance passed the brace
+        charToAdd = input[i];
+      }
+      appendCharToChild(charToAdd);
+    } else if (char === '{') {
+      appendValueToChildren(child);
+      child = { propName: '' };
+    } else if (char === '}') {
+      const propName = (child as { propName: string }).propName as string;
+      if (get(values, propName) === undefined) {
+        assert(
+          `Key "${propName}" not found in ${JSON.stringify(values, null, 2)}`,
+          true
+        );
+      }
+      const propValue = values[propName];
+      encounteredNonPrimitive =
+        encounteredNonPrimitive || !isPrimitive(propValue);
+      appendValueToChildren(propValue);
+      child = undefined;
+    } else {
+      appendCharToChild(char);
+    }
+  }
+
+  // include any remaining child value
+  appendValueToChildren(child);
+
+  return encounteredNonPrimitive ? children : children.join('');
+}

package/addon/components/eui-pagination/button-wrapper/index.hbs

@@ -0,0 +1,21 @@
+{{#if (arg-or-default @inList true)}}
+  <li>
+    <EuiPaginationButton
+      @isActive={{eq @pageIndex @props.activePage}}
+      @totalPages={{@props.pageCount}}
+      @pageIndex={{@pageIndex}}
+      aria-controls={{@props.ariaControls}}
+      @hideOnMobile={{true}}
+      {{on "click" (fn @props.safeClick @pageIndex)}}
+    />
+  </li>
+{{else}}
+  <EuiPaginationButton
+    @isActive={{eq @pageIndex @props.activePage}}
+    @totalPages={{@props.pageCount}}
+    @pageIndex={{@pageIndex}}
+    aria-controls={{@props.ariaControls}}
+    @hideOnMobile={{true}}
+    {{on "click" (fn @props.safeClick @pageIndex)}}
+  />
+{{/if}}

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

@@ -0,0 +1,115 @@
+{{#if @compressed}}
+  <nav class="euiPagination" ...attributes>
+    <EuiPagination::PreviousButton
+      @activePage={{this.activePage}}
+      @safeClick={{this.safeClick}}
+      @props={{this.prevPageButtonProps}}
+    />
+    <EuiHideFor @sizes={{array "xs" "s"}}>
+      <EuiText @size="s" class="euiPagination__compressedText">
+        <EuiI18n
+          @token="euiPagination.pageOfTotalCompressed"
+          @default="{page} of {total}"
+          @values={{hash
+            page=(component
+              "eui-pagination/button-wrapper"
+              pageIndex=this.activePage
+              props=this.sharedButtonProps
+              inList=false
+            )
+            total=(component
+              "eui-pagination/button-wrapper"
+              pageIndex=(sub this.pageCount 1)
+              props=this.sharedButtonProps
+              inList=false
+            )
+          }}
+          as |Token|
+        >
+          <Token as |value|>
+            {{value}}
+          </Token>
+        </EuiI18n>
+      </EuiText>
+    </EuiHideFor>
+    <EuiPagination::NextButton
+      @activePage={{this.activePage}}
+      @safeClick={{this.safeClick}}
+      @props={{this.nextPageButtonProps}}
+    />
+  </nav>
+{{else}}
+  {{!template-lint-disable no-duplicate-landmark-elements}}
+  <nav class="euiPagination" ...attributes>
+    <EuiPagination::PreviousButton
+      @activePage={{this.activePage}}
+      @safeClick={{this.safeClick}}
+      @props={{this.prevPageButtonProps}}
+    />
+    <ul class="euiPagination__list">
+      {{#each this.firstPageButtons as |page|}}
+        {{#if page.i18n}}
+          <EuiI18n
+            @token="euiPagination.firstRangeAriaLabel"
+            @default="Skipping pages 2 to {lastPage}"
+            @values={{hash lastPage=this.firstPageInRange}}
+            as |Token|
+          >
+            <Token as |firstRangeAriaLabel|>
+              <li
+                aria-label={{firstRangeAriaLabel}}
+                class="euiPaginationButton-isPlaceholder euiPagination__item"
+              >
+                &hellip;
+              </li>
+            </Token>
+          </EuiI18n>
+        {{else}}
+          <EuiPagination::ButtonWrapper
+            @pageIndex={{page.pageIndex}}
+            @props={{this.sharedButtonProps}}
+          />
+        {{/if}}
+      {{/each}}
+      {{#each this.pages as |page|}}
+        <EuiPagination::ButtonWrapper
+          @pageIndex={{page.pageIndex}}
+          @props={{this.sharedButtonProps}}
+        />
+      {{/each}}
+      {{#each this.lastPageButtons as |page|}}
+        {{#if page.i18n}}
+          <EuiI18n
+            @token="euiPagination.lastRangeAriaLabel"
+            @default="Skipping pages {firstPage} to {lastPage}"
+            @values={{hash
+              firstPage=(add this.lastPageInRange 1)
+              lastPage=(sub this.pageCount 1)
+            }}
+            as |Token|
+          >
+            <Token as |lastRangeAriaLabel|>
+              <li
+                aria-label={{lastRangeAriaLabel}}
+                class="euiPaginationButton-isPlaceholder euiPagination__item"
+              >
+                &hellip;
+              </li>
+            </Token>
+          </EuiI18n>
+        {{else}}
+          <EuiPagination::ButtonWrapper
+            @pageIndex={{page.pageIndex}}
+            @props={{this.sharedButtonProps}}
+          />
+        {{/if}}
+      {{/each}}
+    </ul>
+    <EuiPagination::NextButton
+      @activePage={{this.activePage}}
+      @safeClick={{this.safeClick}}
+      @props={{this.nextPageButtonProps}}
+    />
+  </nav>
+
+{{/if}}

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

@@ -0,0 +1,177 @@
+import Component from '@glimmer/component';
+
+export type PageClickHandler = (pageIndex: number) => void;
+type SafeClickHandler = (pageIndex: number) => void;
+
+interface Args {
+  /**
+   * The total number of pages.
+   */
+  pageCount?: number;
+
+  /**
+   * The current page using a zero based index.
+   * So if you set the activePage to 1, it will activate the second page.
+   */
+  activePage?: number;
+
+  onPageClick?: PageClickHandler;
+
+  /**
+   * If true, will only show next/prev arrows instead of page numbers.
+   */
+  compressed?: boolean;
+
+  /**
+   * If passed in, passes value through to each button to set aria-controls
+   */
+  'aria-controls'?: string;
+  ariaControls?: string;
+}
+const MAX_VISIBLE_PAGES = 5;
+const NUMBER_SURROUNDING_PAGES = Math.floor(MAX_VISIBLE_PAGES * 0.5);
+
+export default class EuiPaginationComponent extends Component<Args> {
+  get pageCount() {
+    return this.args.pageCount ?? 1;
+  }
+
+  get activePage() {
+    return this.args.activePage ?? 0;
+  }
+
+  get ariaControls() {
+    return this.args['aria-controls'] || this.args.ariaControls;
+  }
+
+  get hasControl() {
+    return this.ariaControls !== undefined;
+  }
+
+  get pages() {
+    let pages = [];
+    const { firstPageInRange, lastPageInRange } = this;
+    for (
+      let i = firstPageInRange, index = 0;
+      i < lastPageInRange;
+      i++, index++
+    ) {
+      pages.push({
+        pageIndex: i
+      });
+    }
+
+    return pages;
+  }
+
+  get firstPageButtons() {
+    let firstPageButtons = [];
+    if (this.firstPageInRange > 0) {
+      firstPageButtons.push({
+        pageIndex: 0
+      });
+
+      if (this.firstPageInRange > 1 && this.firstPageInRange !== 2) {
+        firstPageButtons.push({
+          i18n: {
+            key: 'startingEllipses',
+            token: 'euiPagination.firstRangeAriaLabel',
+            default: 'Skipping pages 2 to {lastPage}',
+            values: { lastPage: this.firstPageInRange }
+          }
+        });
+      } else if (this.firstPageInRange === 2) {
+        firstPageButtons.push({ pageIndex: 1 });
+      }
+    }
+
+    return firstPageButtons;
+  }
+
+  get lastPageButtons() {
+    let lastPageButtons = [];
+    let pageCount = this.pageCount;
+    let lastPageInRange = this.lastPageInRange;
+
+    if (lastPageInRange < pageCount) {
+      if (lastPageInRange + 1 === pageCount - 1) {
+        lastPageButtons.push({ pageIndex: lastPageInRange });
+      } else if (lastPageInRange < pageCount - 1) {
+        lastPageButtons.push({
+          i18n: {
+            key: 'endingEllipses',
+            token: 'euiPagination.lastRangeAriaLabel',
+            default: 'Skipping pages {firstPage} to {lastPage}',
+            values: { firstPage: lastPageInRange + 1, lastPage: pageCount - 1 }
+          }
+        });
+      }
+      lastPageButtons.push({ pageIndex: pageCount - 1 });
+    }
+
+    return lastPageButtons;
+  }
+
+  get sharedButtonProps() {
+    return {
+      activePage: this.activePage,
+      pageCount: this.pageCount,
+      ariaControls: this.ariaControls,
+      safeClick: this.safeClick
+    };
+  }
+
+  get prevPageButtonProps() {
+    let prevPageButtonProps = {};
+    if (this.hasControl && this.activePage !== 0) {
+      prevPageButtonProps = {
+        'aria-controls': this.ariaControls,
+        href: `#${this.ariaControls}`
+      };
+    } else {
+      prevPageButtonProps = { disabled: this.activePage === 0 };
+    }
+    return prevPageButtonProps;
+  }
+
+  get nextPageButtonProps() {
+    let nextPageButtonProps = {};
+    if (this.hasControl && this.activePage !== this.pageCount - 1) {
+      nextPageButtonProps = {
+        'aria-controls': this.ariaControls,
+        href: `#${this.ariaControls}`
+      };
+    } else {
+      nextPageButtonProps = {
+        disabled: this.activePage === this.pageCount - 1
+      };
+    }
+    return nextPageButtonProps;
+  }
+
+  safeClick: SafeClickHandler = (pageIndex) => {
+    if (this.ariaControls) {
+      const controlledElement = document.getElementById(this.ariaControls);
+
+      if (controlledElement) {
+        controlledElement.focus();
+      }
+    }
+
+    this.args.onPageClick?.(pageIndex);
+  };
+
+  get firstPageInRange() {
+    return Math.max(
+      0,
+      Math.min(
+        this.activePage - NUMBER_SURROUNDING_PAGES,
+        this.pageCount - MAX_VISIBLE_PAGES
+      )
+    );
+  }
+
+  get lastPageInRange() {
+    return Math.min(this.pageCount, this.firstPageInRange + MAX_VISIBLE_PAGES);
+  }
+}

package/addon/components/eui-pagination/next-button/index.hbs

@@ -0,0 +1,27 @@
+<EuiI18n
+  @token="euiPagination.nextPage"
+  @default="Next page, {page}"
+  @values={{hash page=(add @activePage 2)}}
+  as |Token|
+>
+  <Token as |nextPage|>
+    <EuiI18n
+      @token="euiPagination.disabledNextPage"
+      @default="Next page"
+      as |InnerToken|
+    >
+      <InnerToken as |disabledNextPage|>
+        <EuiButtonIcon
+          {{on "click" (fn @safeClick (add @activePage 1))}}
+          @iconType="arrowRight"
+          @color="text"
+          aria-label={{if (eq (sub @activePage -1)) disabledNextPage nextPage}}
+          aria-controls={{if @props.aria-controls @props.aria-controls}}
+          href={{if @props.href @props.href}}
+          disabled={{eq @props.disabled true}}
+          ...attributes
+        />
+      </InnerToken>
+    </EuiI18n>
+  </Token>
+</EuiI18n>

package/addon/components/eui-pagination/previous-button/index.hbs

@@ -0,0 +1,27 @@
+<EuiI18n
+  @token="euiPagination.previousPage"
+  @default="Previous page, {page}"
+  @values={{hash page=@activePage}}
+  as |Token|
+>
+  <Token as |previousPage|>
+    <EuiI18n
+      @token="euiPagination.disabledPreviousPage"
+      @default="Previous page"
+      as |InnerToken|
+    >
+      <InnerToken as |disabledPreviousPage|>
+        <EuiButtonIcon
+          {{on "click" (fn @safeClick (sub @activePage 1))}}
+          @iconType="arrowLeft"
+          @color="text"
+          aria-label={{if (eq @activePage 0) disabledPreviousPage previousPage}}
+          aria-controls={{if @props.aria-controls @props.aria-controls}}
+          href={{if @props.href @props.href}}
+          disabled={{eq @props.disabled true}}
+          ...attributes
+        />
+      </InnerToken>
+    </EuiI18n>
+  </Token>
+</EuiI18n>

package/addon/components/eui-pagination-button/index.hbs

@@ -0,0 +1,36 @@
+{{#let (add @pageIndex 1) as |pageNumber|}}
+  <EuiI18n
+    @token="euiPaginationButton.longPageString"
+    @default="Page {page} of {totalPages}"
+    @values={{hash page=pageNumber totalPages=@totalPages}}
+    as |Token|
+  >
+    <Token as |longPageString|>
+      <EuiI18n
+        @token="euiPaginationButton.shortPageString"
+        @default="Page {page}"
+        values={{hash page=pageNumber}}
+        as |InnerToken|
+      >
+        <InnerToken as |shortPageString|>
+          <EuiButtonEmpty
+            class={{class-names
+              "euiPaginationButton"
+              (if @isActive "euiPaginationButton-isActive")
+              (if @isPlaceholder "euiPaginationButton-isPlaceholder")
+              (if @hideOnMobile "euiPaginationButton--hideOnMobile")
+            }}
+            aria-label={{if @totalPages longPageString shortPageString}}
+            @size="s"
+            @color="text"
+            @isDisabled={{or @isPlaceholder @isActive}}
+            aria-current={{if @isActive true}}
+            ...attributes
+          >
+            {{pageNumber}}
+          </EuiButtonEmpty>
+        </InnerToken>
+      </EuiI18n>
+    </Token>
+  </EuiI18n>
+{{/let}}

package/addon/i18n/index.ts

@@ -0,0 +1,8 @@
+export interface I18nShape {
+  mapping: { [key: string]: string };
+}
+
+const i18n: I18nShape = {
+  mapping: {}
+};
+export { i18n };

package/addon/utils/css-mappings/eui-description-list.ts

@@ -13,7 +13,7 @@ export const alignMapping = {
 };
 
 export const textStyleMapping = {
-  center: `${baseClass}--reverse`,
+  reverse: `${baseClass}--reverse`,
   normal: ''
 };
 

package/addon/utils/predicate/common_predicates.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// import moment from 'moment';
+
+export const always = (_value?: any) => true;
+
+export const never = (_value?: any) => false;
+
+export const isUndefined = (value: any): value is undefined => {
+  return value === undefined;
+};
+
+export const isNull = (value: any): value is null => {
+  return value === null;
+};
+
+export const isNil = (value: any): value is null | undefined => {
+  return isUndefined(value) || isNull(value);
+};
+
+// export const isMoment = (value: any) => {
+//   return moment.isMoment(value);
+// };
+
+// export const isDate = (value: any): value is Date => {
+//   return moment.isDate(value);
+// };
+
+// export const isDateLike = (value: any): value is moment.Moment | Date => {
+//   return isDate(value);
+// };

package/addon/utils/predicate/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './common_predicates';
+export * from './lodash_predicates';

package/addon/utils/predicate/lodash_predicates.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import _isFunction from 'lodash-es/isFunction';
+import _isArray from 'lodash-es/isArray';
+import _isString from 'lodash-es/isString';
+import _isBoolean from 'lodash-es/isBoolean';
+import _isNumber from 'lodash-es/isNumber';
+import _isNaN from 'lodash-es/isNaN';
+import _isObject from 'lodash-es/isObject';
+
+// wrap the lodash functions to avoid having lodash's TS type definition from being
+// exported, which can conflict with the lodash namespace if other versions are used
+
+export const isFunction = (value: any): value is (...args: any[]) => any =>
+  _isFunction(value);
+export const isArray = (value: any): value is any[] => _isArray(value);
+export const isString = (value: any): value is string => _isString(value);
+export const isBoolean = (value: any): value is boolean => _isBoolean(value);
+export const isNumber = (value: any): value is number => _isNumber(value);
+export const isNaN = (value: any) => _isNaN(value);
+export const isObject = (value: any): value is object => _isObject(value);

package/app/components/eui-i18n/index.js

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

package/app/components/eui-i18n/render.js

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

package/app/components/eui-pagination/button-wrapper.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-pagination/button-wrapper';

package/app/components/eui-pagination/index.js

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

package/app/components/eui-pagination/next-button.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-pagination/next-button';

package/app/components/eui-pagination/previous-button.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-pagination/previous-button';

package/app/components/eui-pagination-button/index.js

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

package/app/i18n/index.js

@@ -0,0 +1 @@
+export * from '@ember-eui/core/i18n';

package/docs/display/list-group/demo/d01-list-group.md

@@ -1,3 +1,12 @@
+---
+order: 1
+---
+
+ <EuiText>
+    <p>The <strong>EuiListGroup</strong> component is used to present <strong>EuiListGroupItems</strong> in a neatly formatted list. Use the <EuiCode>flush</EuiCode> and <EuiCode>bordered</EuiCode> properties for full-width and bordered presentations, respectively.
+Adjust the <EuiCode>gutterSize</EuiCode> prop to increase or decrease the spacing between items.</p>
+</EuiText>
+
 ```hbs template
 <EuiFlexGroup>
   <EuiFlexItem>
@@ -47,153 +56,7 @@
           <Input @type='checkbox' @checked={{this.flush}} name='flushed' />
           <label for='flushed'>Flush</label>
         </div>
-        <div>
-          <EuiText>Gutter size</EuiText>
-          <EuiBadge
-            @color={{if (eq this.gutterSize 'none') 'primary'}}
-            @onClick={{set this 'gutterSize' 'none'}}
-          >none</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.gutterSize 's') 'primary'}}
-            @onClick={{set this 'gutterSize' 's'}}
-          >small</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.gutterSize 'm') 'primary'}}
-            @onClick={{set this 'gutterSize' 'm'}}
-          >medium</EuiBadge>
-        </div>
-        <div>
-          <EuiText>Max width</EuiText>
-          <EuiBadge
-            @color={{if (eq this.maxWidthType 'bool') 'primary'}}
-            @onClick={{pipe
-              (set this 'maxWidthType' 'bool')
-              (set this 'maxWidth' false)
-            }}
-          >
-            boolean
-          </EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.maxWidthType 'num') 'primary'}}
-            @onClick={{pipe
-              (set this 'maxWidthType' 'num')
-              (set this 'maxWidth' 400)
-            }}
-          >
-            number
-          </EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.maxWidthType 'string') 'primary'}}
-            @onClick={{pipe
-              (set this 'maxWidthType' 'string')
-              (set this 'maxWidth' '')
-            }}
-          >
-            string
-          </EuiBadge>
-        </div>
-        <div>
-          {{#if (eq this.maxWidthType 'bool')}}
-            <Input
-              @type='checkbox'
-              @checked={{this.maxWidth}}
-              name='maxwidth'
-            />
-            <label for='maxwidth'>{{this.maxWidth}}</label>
-          {{else if (eq this.maxWidthType 'num')}}
-            <label for='maxwidth'>Enter value</label>
-            <input
-              type='number'
-              value={{this.maxWidth}}
-              {{on 'input' this.parseToNum}}
-              name='maxwidth'
-            />
-          {{else}}
-            <label for='maxwidth'>Enter value</label>
-            <Input @value={{this.maxWidth}} name='maxwidth' />
-          {{/if}}
-        </div>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiTitle @size='xs'>First Item</EuiTitle>
-        <div>
-          <Input @type='checkbox' @checked={{this.useHref}} name='useHref' />
-          <label for='useHref'>use Href</label>
-        </div>
-        <div>
-          <Input
-            @type='checkbox'
-            @checked={{this.useOnClick}}
-            name='useOnClick'
-          />
-          <label for='useOnClick'>use onClick</label>
-        </div>
-        <div>
-          <Input @type='checkbox' @checked={{this.isActive}} name='isActive' />
-          <label for='isActive'>isActive</label>
-        </div>
-        <div>
-          <Input
-            @type='checkbox'
-            @checked={{this.isDisabled}}
-            name='isDisabled'
-          />
-          <label for='isDisabled'>isDisabled</label>
-        </div>
-        <div>
-          <Input @type='checkbox' @checked={{this.wrapText}} name='wrapText' />
-          <label for='wrapText'>wrapText</label>
-        </div>
-        <div>
-          <EuiText>Size</EuiText>
-          <EuiBadge
-            @color={{if (eq this.size 'xs') 'primary'}}
-            @onClick={{set this 'size' 'xs'}}
-          >extra small</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.size 's') 'primary'}}
-            @onClick={{set this 'size' 's'}}
-          >small</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.size 'm') 'primary'}}
-            @onClick={{set this 'size' 'm'}}
-          >medium</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.size 'l') 'primary'}}
-            @onClick={{set this 'size' 'l'}}
-          >large</EuiBadge>
-        </div>
-        <div>
-          <EuiText>Color</EuiText>
-          <EuiBadge
-            @color={{if (eq this.color 'inherit') 'primary'}}
-            @onClick={{set this 'color' 'inherit'}}
-          >inherit</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.color 'text') 'primary'}}
-            @onClick={{set this 'color' 'text'}}
-          >text</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.color 'subdued') 'primary'}}
-            @onClick={{set this 'color' 'subdued'}}
-          >subdued</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.color 'ghost') 'primary'}}
-            @onClick={{set this 'color' 'ghost'}}
-          >ghost</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.color 'primary') 'primary'}}
-            @onClick={{set this 'color' 'primary'}}
-          >primary</EuiBadge>
-        </div>
-        <div>
-          <Input
-            @type='checkbox'
-            @checked={{this.useIconType}}
-            name='useIconType'
-          />
-          <label for='useIconType'>use iconType</label>
-        </div>
+
       </EuiFlexItem>
     </EuiFlexGroup>
   </EuiFlexItem>

package/docs/display/list-group/demo/d02-list-of-links.md

@@ -0,0 +1,47 @@
+---
+order: 2
+---
+
+# List of links
+
+ <EuiText>
+   <p>Display <strong>EuiListGroupItems</strong> as links by providing an <EuiCode>href</EuiCode> value and change their state with the <EuiCode>isActive</EuiCode> and <EuiCode>isDisabled</EuiCode> properties.</p><p>As is done in this example, the <strong>EuiListGroup</strong> component can also accept an array of items via the <EuiCode>listItems</EuiCode> property.</p>
+</EuiText>
+
+```hbs template
+<EuiListGroup>
+  <EuiListGroupItem @href='#/display/list-group' @iconType='calendar' @size='s'>
+    First link
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='clock'
+    @size='s'
+    @isActive='true'
+  >
+    This is an active link with very long label that truncates
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='compute'
+    @size='s'
+    @isDisabled='true'
+  >
+    Third link is disabled
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='copyClipboard'
+    @size='s'
+  >
+    Fourth link
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='crosshairs'
+    @size='s'
+  >
+    Fifth link
+  </EuiListGroupItem>
+</EuiListGroup>
+```

package/docs/display/list-group/demo/d03-text-wrapping-and-tooltips.md

@@ -0,0 +1,31 @@
+---
+order: 3
+---
+
+# Text wrapping and tooltips
+
+ <EuiText>
+   <p>Optional props <EuiCode>showToolTip</EuiCode> and <EuiCode>wrapLines</EuiCode> can be used to augment the display of list items. Use these when lists are inside small containers where it is likely that the content will be truncated.</p>
+</EuiText>
+
+```hbs template
+<EuiListGroup @showToolTips>
+  <EuiListGroupItem>
+    First item
+  </EuiListGroupItem>
+
+  <EuiListGroupItem>
+    Second item
+  </EuiListGroupItem>
+
+  <EuiListGroupItem>
+    <span>
+      Third very, very long item that
+      <strong>will surely</strong>
+      force truncation
+    </span>
+  </EuiListGroupItem>
+  <EuiListGroupItem @wrapText={{true}}>Fourth very, very long item with wrapping
+    enabled that will not force truncation</EuiListGroupItem>
+</EuiListGroup>
+```

package/docs/display/list-group/demo/d04-list-item-color-and-size.md

@@ -0,0 +1,27 @@
+---
+order: 4
+---
+
+# List item color and size
+
+ <EuiText>
+   <p><strong>EuiListGroupItems</strong> will inherit the color from their element type whether it is a <EuiCode>button</EuiCode>, <EuiCode>anchor</EuiCode>, or <EuiCode>span</EuiCode>. You can enforce a different color of <EuiCode>primary</EuiCode>, <EuiCode>text</EuiCode>, or <EuiCode>subdued</EuiCode> with the <EuiCode>color</EuiCode> prop. Or provide the prop directly to <strong>EuiListGroup</strong>.</p><p>They also accept options for text size; <EuiCode><span class="token string">'xs'</span> <span class="token operator">|</span> <span class="token string">'s'</span> <span class="token operator">|</span> <span class="token string">'m'</span> <span class="token operator">|</span> <span class="token string">'l'</span></EuiCode>.</p>
+</EuiText>
+
+```hbs template
+<EuiListGroup>
+  <EuiListGroupItem @href='#' @label='Inherit by default (xs)' @size='xs' />
+
+  <EuiListGroupItem @label='Primary (s)' @color='primary' @size='s' />
+
+  <EuiListGroupItem @href='#' @label='Text (m)' @color='text' />
+
+  <EuiListGroupItem @href='#' @label='Subdued (l)' @color='subdued' @size='l' />
+</EuiListGroup>
+
+<EuiSpacer @size='s' />
+
+<EuiListGroup {{style (inline-styles background='black')}}>
+  <EuiListGroupItem @href='#' @label='Ghost' @color='ghost' />
+</EuiListGroup>
+```

package/docs/navigation/pagination/demo/d01-basic.md

@@ -0,0 +1,27 @@
+---
+order: 1
+---
+
+# Basic usage with many pages
+
+<EuiText>
+		<p><strong>EuiPagination</strong> accepts a total <EuiCode>pageCount</EuiCode> and only shows up to 5 consecutive pages, with shortcuts to the first and/or last page. It also requires the parent component to maintain the current <EuiCode>activePage</EuiCode> and handle the <EuiCode>onPageClick</EuiCode>.</p>
+</EuiText>
+
+```hbs template
+{{#let (use-state 0) as |activePage|}}
+  <EuiPagination
+    @compressed={{true}}
+    @aria-label='Many pages example'
+    @pageCount={{22}}
+    @activePage={{activePage.value}}
+    @onPageClick={{activePage.setState}}
+  />
+  <EuiPagination
+    @aria-label='Many pages example'
+    @pageCount={{22}}
+    @activePage={{activePage.value}}
+    @onPageClick={{activePage.setState}}
+  />
+{{/let}}
+```

package/docs/navigation/pagination/index.md

@@ -0,0 +1,8 @@
+---
+title: Pagination
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Pagination"/>
+
+<EuiSpacer @size='l' />

package/docs/utilities/i18n/demo/d01-basic.md

@@ -0,0 +1,32 @@
+---
+order: 1
+---
+
+<EuiText>
+<p>
+	Render strings to components, you can provide a hash containing custom tokens via <EuiCode>{{"@i18n"}}</EuiCode> or override i18n/index.js in your host app to export a hash containg them
+</p>
+</EuiText>
+
+```hbs template
+<EuiI18n
+  @token='euiPagination.pageOfTotalCompressed'
+  @default='{page} of {total}'
+  @values={{hash page=(component 'eui-button') total=(component 'eui-button')}}
+  as |Token|
+>
+  <Token as |value|>
+		{{value}}
+	</Token>
+</EuiI18n>
+<EuiI18n
+  @token='euiPagination.pageOfTotalCompressed'
+  @default='{page} other {total}'
+  @values={{hash page=10 total=2000}}
+  as |Token|
+>
+  <Token as |value|>
+		{{value}}
+	</Token>
+</EuiI18n>
+```

package/docs/utilities/i18n/index.md

@@ -0,0 +1,8 @@
+---
+title: i18n
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="i18n"/>
+
+<EuiSpacer @size='l' />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "5.7.0",
+  "version": "5.8.2",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -182,5 +182,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "99f313704b534a506c9a67cffd7e38a64348df97"
+  "gitHead": "f9942c20d6e52e2f420ecca223285677f89a62b4"
 }