@ember-eui/core 5.8.5 → 5.9.2

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-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>

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

@@ -0,0 +1,258 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { helper } from '@ember/component/helper';
+import moment from 'moment';
+// import { isDayDisabled, isOutOfBounds } from '../utils/date-utils';
+
+const isSameDayHelper = helper(function ([year, month, day, selectedDate]: [
+  number,
+  number,
+  number,
+  moment.Moment
+]) {
+  if (!selectedDate) {
+    return false;
+  }
+  return (
+    selectedDate.year() === year &&
+    selectedDate.month() === month &&
+    selectedDate.date() === day
+  );
+});
+
+interface DatetimePickerArgs {
+  selected: moment.Moment;
+  onChange: (value: any) => void;
+}
+
+interface Day {
+  day: number;
+  month: number;
+  year: number;
+  isOutside: boolean;
+}
+
+export default class DatetimePicker extends Component<DatetimePickerArgs> {
+  @tracked month: number = 0;
+  @tracked year: number = 0;
+  @tracked monthMoment: moment.Moment;
+  // Used to style the days outside of the current month
+  @tracked offset: number = 0;
+  @tracked selectedDate?: moment.Moment;
+  @tracked selectedTime?: string;
+  @tracked today: moment.Moment;
+
+  momentConfig: {
+    year: number;
+    month: number;
+    day: number;
+    hour: number;
+    minute: number;
+    second: number;
+    millisecond: number;
+  };
+
+  isSameDayHelper = isSameDayHelper;
+
+  constructor(owner: unknown, args: DatetimePickerArgs) {
+    super(owner, args);
+
+    if (this.args.selected) {
+      this.monthMoment = this.args.selected;
+      this.selectedDate = this.args.selected;
+    } else {
+      this.monthMoment = moment([this.year, this.month]);
+    }
+
+    this.momentConfig = {
+      year: this.monthMoment.year(),
+      month: this.monthMoment.month(),
+      day: this.monthMoment.date(),
+      hour: this.monthMoment.hour(),
+      minute: this.monthMoment.minute(),
+      second: 0,
+      millisecond: 0
+    };
+
+    this.month = this.momentConfig.month;
+    this.year = this.momentConfig.year;
+    let hour = this.momentConfig.hour;
+    let minute = this.momentConfig.minute;
+    let hourStr = hour < 10 ? `0${hour}` : hour;
+    let minuteStr = minute < 10 ? `0${minute}` : minute;
+    this.selectedTime = `${hourStr}:${minuteStr}`;
+
+    this.offset = this.monthMoment.clone().startOf('month').day();
+
+    this.today = moment();
+  }
+
+  get monthNames() {
+    return moment.months().map((month, i) => {
+      return {
+        text: month,
+        value: i
+      };
+    });
+  }
+
+  get years() {
+    return Array.from(Array(15).keys()).map((_, i) => {
+      // Create a list of years +/- 7 from the current year
+      let year = this.year - 7 + i;
+      return {
+        text: year,
+        value: year
+      };
+    });
+  }
+
+  get times() {
+    const timesArray = [];
+    // Create entries every 30 minutes
+    for (let i = 0; i < 24; i++) {
+      let hour = i < 10 ? `0${i}` : i;
+      timesArray.push(`${hour}:00`, `${hour}:30`);
+    }
+    return timesArray;
+  }
+
+  get days() {
+    // Used for showing days outside of the current month
+    // const prevMonth = moment([this.year, this.month - 1]);
+    const prevMonth = this.monthMoment.clone().subtract(1, 'month');
+    const nextMonth = this.monthMoment.clone().add(1, 'month');
+    const offset = this.offset;
+    let daysInMonth = this.monthMoment.daysInMonth();
+    let daysInPrevMonth = prevMonth.daysInMonth();
+
+    const daysArray = [];
+    for (let i = 0; i < daysInMonth; i++) {
+      daysArray[i] = {
+        day: i + 1
+      };
+    }
+
+    // Fill the previous and next month days
+    for (let i = 0, d = daysInPrevMonth; i < offset; i++, d--) {
+      daysArray.unshift({
+        day: d,
+        month: prevMonth.month(),
+        year: prevMonth.year(),
+        isOutside: true
+      });
+    }
+    // All months fit within 6 weeks (42 days)
+    for (let d = 1, i = daysInMonth + offset; i < 42; d++, i++) {
+      daysArray.push({
+        day: d,
+        month: nextMonth.month(),
+        year: nextMonth.year(),
+        isOutside: true
+      });
+    }
+
+    // All months fit within 6 weeks (42 days)
+    // but depending on the starting day, one week may not be needed
+    const daysMatrix = [];
+    const weeks = daysInMonth + offset > 35 ? 6 : 5;
+    for (let i = 0; i < weeks; i++) {
+      daysMatrix[i] = daysArray.slice(i * 7, i * 7 + 7);
+    }
+
+    return daysMatrix;
+  }
+
+  updateDate() {
+    this.year = this.monthMoment.year();
+    this.month = this.monthMoment.month();
+    this.offset = this.monthMoment.clone().startOf('month').day();
+  }
+
+  @action selectTime(time: string) {
+    this.selectedTime = time;
+    const [hour, minute] = time.split(':');
+    this.momentConfig.hour = parseInt(hour);
+    this.momentConfig.minute = parseInt(minute);
+    this.momentConfig.second = 0;
+    this.momentConfig.millisecond = 0;
+    this.selectedDate = moment(this.momentConfig);
+    this.args.onChange(this.selectedDate);
+  }
+
+  @action selectDate(day: Day) {
+    // Only outside days will have year/month
+    this.momentConfig.year = day.year || this.year;
+    this.momentConfig.month = day.month || this.month;
+    this.momentConfig.day = day.day;
+    this.selectedDate = moment(this.momentConfig);
+    this.args.onChange(this.selectedDate);
+
+    // Update the state to show the selected month properly
+    if (day.isOutside) {
+      this.monthMoment.month(day.month);
+      this.monthMoment.year(day.year);
+      this.updateDate();
+    }
+  }
+
+  // @action setSelected(date, event, keepInput) {
+  //   let changedDate = date;
+
+  //   if (changedDate !== null && isDayDisabled(changedDate, this.props)) {
+  //     if (isOutOfBounds(changedDate, this.props)) {
+  //       this.props.onChange(date, event);
+  //       this.props.onSelect(changedDate, event);
+  //     }
+
+  //     return;
+  //   }
+
+  //   if (changedDate !== null && this.props.selected) {
+  //     let selected = this.props.selected;
+  //     if (keepInput) selected = newDate(changedDate);
+  //     changedDate = setTime(newDate(changedDate), {
+  //       hour: getHour(selected),
+  //       minute: getMinute(selected),
+  //       second: getSecond(selected),
+  //       millisecond: getMillisecond(selected),
+  //     });
+  //   }
+
+  //   if (
+  //     !isSameTime(this.props.selected, changedDate) ||
+  //     this.props.allowSameDay
+  //   ) {
+  //     if (changedDate !== null) {
+  //       if (!this.props.inline) {
+  //         this.setState({
+  //           preSelection: changedDate
+  //         });
+  //       }
+  //     }
+  //     this.props.onChange(changedDate, event);
+  //   }
+
+  //   this.props.onSelect(changedDate, event);
+
+  //   if (!keepInput) {
+  //     this.setState({ inputValue: null });
+  //   }
+  // }
+
+  @action setMonth(month: string) {
+    this.monthMoment.month(parseInt(month));
+    this.updateDate();
+  }
+
+  @action increaseMonth() {
+    this.monthMoment.add(1, 'month');
+    this.updateDate();
+  }
+
+  @action decreaseMonth() {
+    this.monthMoment.subtract(1, 'month');
+    this.updateDate();
+  }
+}

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

@@ -0,0 +1,49 @@
+{{#let
+  (class-names
+    "euiDatePopoverButton"
+    (concat "euiDatePopoverButton--" @position)
+    (if @compressed "euiDatePopoverButton--compressed")
+    (if this.isOpen "euiDatePopoverButton-isSelected")
+    (if @isInvalid "euiDatePopoverButton-isInvalid")
+    (if @needsUpdating "euiDatePopoverButton-needsUpdating")
+    (if @isDisabled "euiDatePopoverButton-disabled")
+  )
+  as |classes|
+}}
+  <EuiPopover
+    @className={{@className}}
+    @isOpen={{this.isOpen}}
+    @closePopover={{set this "isOpen" false}}
+    @anchorPosition={{this.anchorPosition}}
+    @panelPaddingSize="none"
+    @display="block"
+  >
+    <:button>
+      <button
+        type="button"
+        {{!-- onClick={onPopoverToggle} --}}
+        class={{classes}}
+        title={{this.formattedValue}}
+        disabled={{@isDisabled}}
+        ...attributes
+        {{on "click" (set this "isOpen" (not this.isOpen))}}
+      >
+        {{this.formattedValue}}
+      </button>
+    </:button>
+
+    <:content>
+      <EuiSuperDatePicker::DatePopover::EuiDatePopoverContent
+        @position={{@position}}
+        @value={{@value}}
+        @roundUp={{@roundUp}}
+        @dateFormat={{@dateFormat}}
+        @timeFormat={{@timeFormat}}
+        @locale={{@locale}}
+        @utcOffset={{@utcOffset}}
+        @timeOptions={{@timeOptions}}
+        @onChange={{@onChange}}
+      />
+    </:content>
+  </EuiPopover>
+{{/let}}