@ember-eui/core 5.7.0 → 5.8.0

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/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/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.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -182,5 +182,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "99f313704b534a506c9a67cffd7e38a64348df97"
+  "gitHead": "530ce7498293425660b8904afadcf49b3841303e"
 }