@ember-eui/core 5.8.5 → 5.10.2

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

@@ -2,6 +2,14 @@
   (arg-or-default @valueKey "id")
   (arg-or-default @labelKey "label") as |valueKey labelKey|
 }}
+  {{!template-lint-disable}}
+  <input
+    tabindex="-1"
+    style="opacity: 0px; width:0px; height:0px; position: absolute; top: 40%; border:solid 1px transparent !important; margin:0px !important;"
+    class="fake-input-for-html-form-validity"
+    {{validatable-control @isInvalid}}
+  />
+  {{!template-lint-enable}}
   {{#if @legend}}
     <EuiFormFieldset @legend={{@legend}} @compressed={{@compressed}}>
       {{#each @options key=valueKey as |option|}}

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

@@ -63,7 +63,7 @@
   @beforeOptionsComponent={{@beforeOptionsComponent}}
   @placeholder={{@placeholder}}
   @searchPlaceholder={{@searchPlaceholder}}
-  @optionsComponent={{component "eui-combo-box/options" rowHeight=@rowHeight}}
+  @optionsComponent={{component "eui-combo-box/options" rowHeight=@rowHeight class=@optionsClass}}
   @extra={{@extra}}
   @groupComponent={{component "eui-combo-box/group"}}
   @triggerClass={{class-names

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

@@ -25,6 +25,7 @@
       style="max-height: 200px; overflow-y: auto;"
       role="listbox"
       aria-controls="ember-power-select-trigger-{{@select.uniqueId}}"
+      class={{@class}}
       ...attributes
       {{did-insert this.addHandlers}}
       {{will-destroy this.removeHandlers}}

package/addon/components/eui-dual-range/index.ts

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { uniqueId } from '../../helpers/unique-id';
+import { guidFor } from '@ember/object/internals';
 import { isWithinRange } from '../../utils/number';
 
 import { EuiRangeInputArgs } from '../eui-range-input/types';
@@ -87,7 +87,7 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
   @argOrDefault([]) levels!: EuiRangeLevel[];
 
   //State
-  @tracked id: string = this.args.id || uniqueId();
+  @tracked id: string = this.args.id || guidFor({});
   @tracked hasFocus = false;
   @tracked rangeSliderRefAvailable = false;
   @tracked isPopoverOpen = false;

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

@@ -47,6 +47,7 @@
             disabled={{@disabled}}
             type="text"
             placeholder={{@placeholder}}
+            readonly={{@readOnly}}
             ...attributes
             {{validatable-control @isInvalid}}
           />

package/addon/components/eui-global-toast-list/index.ts

@@ -4,7 +4,7 @@ import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { sideMapping } from 'core/utils/css-mappings/eui-global-toast-list';
 import Timer from '../../utils/timer';
-import EuiToasterService, { EuiToastProps } from 'core/services/eui-toaster';
+import EuiToasterService, { EuiToastProps } from '../../services/eui-toaster';
 
 type EuiToastSide = keyof typeof sideMapping;
 type ToastSide = EuiToastSide | string;

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

@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
-import { processStringToChildren } from './util';
-//@ts-ignore
-import { i18n, I18nShape } from '@ember-eui/core/i18n';
+import { inject as service } from '@ember/service';
+import type EuiI18n from '../../services/eui-i18n';
 
 interface Args {
   tokens?: string[];
@@ -9,62 +8,31 @@ interface Args {
   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;
+  i18n?: { mapping: { [key: string]: any } };
 }
 
 export default class EuiI18nComponent extends Component<Args> {
+  @service declare euiI18n: EuiI18n;
+
   get isI18nTokensShape() {
     return this.args.tokens != null;
   }
 
-  get i18n() {
-    return this.args.i18n || i18n;
-  }
-
   get lookupedTokens() {
+    const lookupToken = this.euiI18n._lookupToken;
+
     if (this.isI18nTokensShape) {
       return this.args.tokens?.map((token, idx) =>
         lookupToken({
           token,
-          i18nMapping: i18n.mapping,
+          i18nMapping: this.args.i18n?.mapping,
           valueDefault: this.args.defaults![idx]
         })
       );
     } else {
       return lookupToken({
         token: this.args.token!,
-        i18nMapping: i18n.mapping,
+        i18nMapping: this.args.i18n?.mapping,
         valueDefault: this.args.default!,
         values: this.args.values
       });

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

@@ -6,7 +6,7 @@ import {
   colorToClassMap,
   typeToPathMap
 } from '../../utils/css-mappings/eui-icon';
-import { uniqueId } from '../../helpers/unique-id';
+import { guidFor } from '@ember/object/internals';
 import { htmlSafe } from '@ember/template';
 import { getOwner } from '@ember/application';
 
@@ -178,7 +178,7 @@ export default class EuiIcon extends Component<EuiIconArgs> {
     //  The svg aria-labelledby attribute gets this titleId
     //  The svg title element gets this titleId as an id
     if (!this.args['aria-label'] && !this.args['aria-labelledby'] && title) {
-      titleId = uniqueId();
+      titleId = guidFor({});
     }
     return titleId;
   }

package/addon/components/eui-markdown-editor/index.ts

@@ -11,7 +11,7 @@ import {
   defaultParsingPlugins,
   defaultProcessingPlugins
 } from '../../utils/markdown/plugins/markdown-default-plugins';
-import { uniqueId } from '../../helpers/unique-id';
+import { guidFor } from '@ember/object/internals';
 import unified from 'unified';
 import * as MarkdownTooltipPlugin from '../../utils/markdown/plugins/markdown-tooltip';
 import {
@@ -121,7 +121,7 @@ export default class EuiMarkdownEditorComponent extends Component<EuiMarkdownEdi
   declare processingPluginList: typeof defaultProcessingPlugins;
 
   @tracked selectedNode: Node | null = null;
-  @tracked editorId = this.args.editorId ?? uniqueId();
+  @tracked editorId = this.args.editorId ?? guidFor({});
   @tracked viewMode = this.args.initialViewMode || MODE_EDITING;
   @tracked textareaRef: HTMLTextAreaElement | null = null;
   @tracked previewRef: HTMLDivElement | null = null;

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

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { uniqueId } from '../../helpers/unique-id';
+import { guidFor } from '@ember/object/internals';
 import { keysOf } from '../common';
 
 interface InsertPositionsMap {
@@ -32,7 +32,7 @@ export default class EuiPortal extends Component<EuiPortalArgs> {
     const { insert } = this.args;
 
     this.portalNode = document.createElement('div');
-    this.portalNode.id = `${uniqueId()}-portal`;
+    this.portalNode.id = `${guidFor({})}-portal`;
 
     if (insert == null) {
       // no insertion defined, append to body

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

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { uniqueId } from '../../helpers/unique-id';
+import { guidFor } from '@ember/object/internals';
 import { isWithinRange } from '../../utils/number';
 import { EuiRangeInputArgs } from '../eui-range-input/types';
 import { EuiRangeLevel } from '../eui-range-levels';
@@ -81,7 +81,7 @@ export default class EuiRangeComponent extends Component<EuiRangeArgs> {
   preventPopoverClose = false;
 
   //State
-  @tracked id: string = this.args.id || uniqueId();
+  @tracked id: string = this.args.id || guidFor({});
   @tracked isPopoverOpen = false;
   ///
 

package/addon/components/eui-super-date-picker/date-popover/absolute-tab.hbs

@@ -0,0 +1,42 @@
+<div>
+  <EuiSuperDatePicker::DatePopover::DatetimePicker
+    @inline={{true}}
+    @showTimeSelect={{true}}
+    @shadow={{false}}
+    @onChange={{this.handleChange}}
+    @dateFormat={{@dateFormat}}
+    @timeFormat={{@timeFormat}}
+    @selected={{this.valueAsMoment}}
+    {{!--
+    locale={locale}
+    utcOffset={utcOffset} --}}
+  />
+  <EuiI18n
+    @token="euiAbsoluteTab.dateFormatError"
+    @default="Expected format: {dateFormat}"
+    @values={{@dateFormat}}
+    as |Token|
+  >
+    <Token as |dateFormatError|>
+      <EuiFormRow
+        class="euiSuperDatePicker__absoluteDateFormRow"
+        @isInvalid={{this.isTextInvalid}}
+        @error={{if this.isTextInvalid dateFormatError}}
+      >
+        <EuiFieldText
+          @isInvalid={{this.isTextInvalid}}
+          @value={{this.textInputValue}}
+          @compressed={{true}}
+          {{on "input" this.triggerChange}}
+          {{on "change" this.handleTextChange}}
+        >
+          <:prepend as |classes|>
+            <EuiFormLabel class={{classes}}>
+              {{@labelPrefix}}
+            </EuiFormLabel>
+          </:prepend>
+        </EuiFieldText>
+      </EuiFormRow>
+    </Token>
+  </EuiI18n>
+</div>

package/addon/components/eui-super-date-picker/date-popover/absolute-tab.ts

@@ -0,0 +1,79 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import moment, { LocaleSpecifier, Moment } from 'moment';
+import dateMath from '@elastic/datemath';
+import { tracked } from '@glimmer/tracking';
+
+interface AbsoluteTabArgs {
+  dateFormat: string;
+  timeFormat: string;
+  locale?: LocaleSpecifier;
+  value: string;
+  onChange: (value: any) => void;
+  roundUp: boolean;
+  position: 'start' | 'end';
+  labelPrefix: string;
+  utcOffset?: number;
+}
+
+export default class AbsoluteTab extends Component<AbsoluteTabArgs> {
+  @tracked isTextInvalid: boolean;
+  @tracked textInputValue: string;
+  @tracked valueAsMoment: Moment | null;
+
+  constructor(owner: unknown, args: AbsoluteTabArgs) {
+    super(owner, args);
+
+    const parsedValue = dateMath.parse(this.args.value, {
+      roundUp: this.args.roundUp
+    });
+    const valueAsMoment =
+      parsedValue && parsedValue.isValid() ? parsedValue : moment();
+
+    const textInputValue = valueAsMoment
+      .locale(this.args.locale || 'en')
+      .format(this.args.dateFormat);
+
+    this.isTextInvalid = false;
+    this.textInputValue = textInputValue;
+    this.valueAsMoment = valueAsMoment;
+  }
+
+  @action handleChange(date: any) {
+    if (date === null) {
+      return;
+    }
+
+    this.args.onChange(date.toISOString());
+
+    const valueAsMoment = moment(date);
+    this.valueAsMoment = valueAsMoment;
+    this.textInputValue = valueAsMoment.format(this.args.dateFormat);
+    this.isTextInvalid = false;
+  }
+
+  @action handleTextChange(e: InputEvent) {
+    const valueAsMoment = moment(
+      (e.target as HTMLInputElement).value,
+      this.args.dateFormat,
+      true
+    );
+    const dateIsValid = valueAsMoment.isValid();
+    if (dateIsValid) {
+      this.args.onChange(valueAsMoment.toISOString());
+    }
+
+    this.textInputValue = (e.target as HTMLInputElement).value;
+    this.isTextInvalid = !dateIsValid;
+    this.valueAsMoment = dateIsValid ? valueAsMoment : null;
+  }
+
+  // `change` event on an input gets called after a `blur`
+  // blur the input and focus again to trigger the change event
+  // and call `handleTextChange` with the updated value
+  // and keep the field focused
+  @action triggerChange(e: InputEvent) {
+    (e.target as HTMLInputElement).blur();
+    (e.target as HTMLInputElement).focus();
+  }
+}

package/addon/components/eui-super-date-picker/date-popover/datetime-picker.hbs

@@ -0,0 +1,125 @@
+<div class="euiDatePicker euiDatePicker--inline">
+  <EuiFormControlLayout
+    {{!-- @icon={{optionalIcon}}
+    @fullWidth={{fullWidth}}
+    @clear={selected && onClear ? { onClick: onClear } : undefined}
+    @isLoading={isLoading} --}}
+  >
+    <div class="react-datepicker">
+      <button
+        type="button"
+        class="react-datepicker__navigation react-datepicker__navigation--previous"
+        aria-label="Previous month"
+        {{on "click" this.decreaseMonth}}
+      >
+        <EuiIcon
+          @iconClasses="euiButtonIcon__icon"
+          @type="arrowLeft"
+        />
+      </button>
+      <button
+        type="button"
+        class="react-datepicker__navigation react-datepicker__navigation--next"
+        aria-label="Next month"
+        {{on "click" this.increaseMonth}}
+      >
+        <EuiIcon
+          @iconClasses="euiButtonIcon__icon {{@iconClasses}}"
+          @type="arrowRight"
+        />
+      </button>
+      <div class="react-datepicker__month-container">
+        <div class="react-datepicker__header">
+          <div class="react-datepicker__header__dropdown react-datepicker__header__dropdown--scroll">
+            <div class="react-datepicker__month-dropdown-container react-datepicker__month-dropdown-container--scroll">
+              {{!template-lint-disable}}
+              <div class="react-datepicker__month-read-view" style="padding: 0;">
+                <EuiFlexItem @grow="1">
+                  <EuiSelect
+                    @compressed={{true}}
+                    @value={{this.month}}
+                    @options={{this.monthNames}}
+                    {{on "change" (pick "target.value" this.setMonth)}}
+                  />
+                </EuiFlexItem>
+              </div>
+            </div>
+            <div class="react-datepicker__year-dropdown-container react-datepicker__year-dropdown-container--scroll">
+              {{!template-lint-disable}}
+              <div class="react-datepicker__year-read-view" style="padding: 0;">
+                <EuiFlexItem @grow="1">
+                  <EuiSelect
+                    @compressed={{true}}
+                    @value={{this.year}}
+                    @options={{this.years}}
+                    {{on "change" (pick "target.value" (set this "year"))}}
+                  />
+                </EuiFlexItem>
+              </div>
+            </div>
+          </div>
+          <div class="react-datepicker__day-names">
+            <div class="react-datepicker__day-name">Su</div>
+            <div class="react-datepicker__day-name">Mo</div>
+            <div class="react-datepicker__day-name">Tu</div>
+            <div class="react-datepicker__day-name">We</div>
+            <div class="react-datepicker__day-name">Th</div>
+            <div class="react-datepicker__day-name">Fr</div>
+            <div class="react-datepicker__day-name">Sa</div>
+          </div>
+        </div>
+
+        <div class="react-datepicker__month react-datepicker__month--accessible">
+          {{#each this.days as |days|}}
+            <div class="react-datepicker__week">
+              {{#each days as |day|}}
+                <div
+                  role="button"
+                  class={{concat
+                    "react-datepicker__day"
+                    (if
+                      (and
+                        (not day.isOutside)
+                        (this.isSameDayHelper this.year this.month day.day this.selectedDate)
+                      )
+                      " react-datepicker__day--selected"
+                    )
+                    (if
+                        (this.isSameDayHelper this.year this.month day.day this.today)
+                      " react-datepicker__day--today"
+                    )
+                    (if day.isOutside " react-datepicker__day--outside-month")
+                  }}
+                  {{on "click" (fn this.selectDate day)}}
+                >
+                  <div class="react-datepicker__day-text">{{day.day}}</div>
+                </div>
+              {{/each}}
+            </div>
+          {{/each}}
+        </div>
+      </div>
+
+      <div class="react-datepicker__time-container">
+        <div class="react-datepicker__time">
+          <div class="react-datepicker__time-box react-datepicker__time-box--accessible">
+            <ul class="react-datepicker__time-list">
+              {{#each this.times as |time|}}
+                <li
+                  role="option"
+                  class={{concat
+                    "react-datepicker__time-list-item"
+                    (if (eq time this.selectedTime) " react-datepicker__time-list-item--selected")
+                  }}
+                  {{on "click" (fn this.selectTime time)}}
+                >
+                  {{time}}
+                </li>
+              {{/each}}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </EuiFormControlLayout>
+</div>