@ember-eui/core 5.8.5 → 5.10.2

package/addon/components/eui-super-date-picker/utils/quick-select.ts

@@ -0,0 +1,75 @@
+/*
+ * 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';
+import dateMath from '@elastic/datemath';
+import { LAST, NEXT } from './time-options';
+import { DATE_MODES, relativeUnitsFromLargestToSmallest } from '.';
+import { QuickSelect, TimeUnitId } from '../types/global';
+
+const isNow = (value: string) => value === DATE_MODES.NOW;
+
+/**
+ * This function returns time value, time unit and time tense for a given time string.
+ *
+ * For example: for `now-40m` it will parse output as time value to `40` time unit to `m` and time unit to `last`.
+ *
+ * If given a datetime string it will return a default value.
+ *
+ * If the given string is in the format such as `now/d` it will parse the string to moment object and find the time value, time unit and time tense using moment
+ *
+ * This function accepts two strings start and end time. I the start value is now then it uses the end value to parse.
+ */
+export const parseTimeParts = (start: string, end: string): QuickSelect => {
+  const results: QuickSelect = {
+    timeTense: LAST,
+    timeUnits: 'm',
+    timeValue: 15
+  };
+
+  const value = isNow(start) ? end : start;
+
+  const matches =
+    typeof value === 'string' &&
+    value.match(/now(([-+])(\d+)([smhdwMy])(\/[smhdwMy])?)?/);
+
+  if (!matches) {
+    return results;
+  }
+
+  const operator = matches[2];
+  const matchedTimeValue = matches[3];
+  const timeUnits = matches[4] as TimeUnitId;
+
+  if (matchedTimeValue && timeUnits && operator) {
+    return {
+      timeTense: operator === '+' ? NEXT : LAST,
+      timeUnits,
+      timeValue: parseInt(matchedTimeValue, 10)
+    };
+  }
+
+  const duration = moment.duration(moment().diff(dateMath.parse(value)));
+  let unitOp = '';
+  for (let i = 0; i < relativeUnitsFromLargestToSmallest.length; i++) {
+    // @ts-expect-error this is a string with the accepted time units
+    const as = duration.as(relativeUnitsFromLargestToSmallest[i]);
+    if (as < 0) {
+      unitOp = '+';
+    }
+    if (Math.abs(as) > 1) {
+      return {
+        timeValue: Math.round(Math.abs(as)),
+        timeUnits: relativeUnitsFromLargestToSmallest[i] as TimeUnitId,
+        timeTense: unitOp === '+' ? NEXT : LAST
+      };
+    }
+  }
+
+  return results;
+};

package/addon/components/eui-super-date-picker/utils/time-options.ts

@@ -0,0 +1,216 @@
+/*
+ * 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 { EuiSelectOption } from '@elastic/eui';
+import type EuiI18n from '../../../services/eui-i18n';
+
+import { TimeUnitId, RelativeOption, DurationRange } from '../types/global';
+
+export const LAST = 'last';
+export const NEXT = 'next';
+
+export type TimeOptions = {
+  timeTenseOptions: EuiSelectOption[];
+  timeUnitsOptions: EuiSelectOption[];
+  relativeOptions: RelativeOption[];
+  relativeRoundingLabels: { [id in TimeUnitId]: string };
+  refreshUnitsOptions: EuiSelectOption[];
+  commonDurationRanges: DurationRange[];
+};
+
+/**
+ * i18n'd time options, mostly used in EuiSelects (except for a few cases)
+ * used in EuiSuperDatePicker child sub-components
+ */
+export const useI18nTimeOptions = (euiI18nService: EuiI18n): TimeOptions => {
+  let lookupToken = euiI18nService.lookupToken;
+
+  /**
+   * Quick select panel
+   */
+  const timeTenseOptions = [
+    { value: LAST, text: lookupToken('euiTimeOptions.last', 'Last') },
+    { value: NEXT, text: lookupToken('euiTimeOptions.next', 'Next') }
+  ];
+
+  const timeUnitsOptions = [
+    { value: 's', text: lookupToken('euiTimeOptions.seconds', 'Seconds') },
+    { value: 'm', text: lookupToken('euiTimeOptions.minutes', 'Minutes') },
+    { value: 'h', text: lookupToken('euiTimeOptions.hours', 'Hours') },
+    { value: 'd', text: lookupToken('euiTimeOptions.days', 'Days') },
+    { value: 'w', text: lookupToken('euiTimeOptions.weeks', 'Weeks') },
+    { value: 'M', text: lookupToken('euiTimeOptions.months', 'Months') },
+    { value: 'y', text: lookupToken('euiTimeOptions.years', 'Years') }
+  ];
+
+  /**
+   * Relative tab
+   */
+  const relativeOptions: RelativeOption[] = [
+    {
+      text: lookupToken('euiTimeOptions.secondsAgo', 'Seconds ago') as string,
+      value: 's'
+    },
+    {
+      text: lookupToken('euiTimeOptions.minutesAgo', 'Minutes ago') as string,
+      value: 'm'
+    },
+    {
+      text: lookupToken('euiTimeOptions.hoursAgo', 'Hours ago') as string,
+      value: 'h'
+    },
+    {
+      text: lookupToken('euiTimeOptions.daysAgo', 'Days ago') as string,
+      value: 'd'
+    },
+    {
+      text: lookupToken('euiTimeOptions.weeksAgo', 'Weeks ago') as string,
+      value: 'w'
+    },
+    {
+      text: lookupToken('euiTimeOptions.monthsAgo', 'Months ago') as string,
+      value: 'M'
+    },
+    {
+      text: lookupToken('euiTimeOptions.yearsAgo', 'Years ago') as string,
+      value: 'y'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.secondsFromNow',
+        'Seconds from now'
+      ) as string,
+      value: 's+'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.minutesFromNow',
+        'Minutes from now'
+      ) as string,
+      value: 'm+'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.hoursFromNow',
+        'Hours from now'
+      ) as string,
+      value: 'h+'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.daysFromNow',
+        'Days from now'
+      ) as string,
+      value: 'd+'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.weeksFromNow',
+        'Weeks from now'
+      ) as string,
+      value: 'w+'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.monthsFromNow',
+        'Months from now'
+      ) as string,
+      value: 'M+'
+    },
+    {
+      text: lookupToken(
+        'euiTimeOptions.yearsFromNow',
+        'Years from now'
+      ) as string,
+      value: 'y+'
+    }
+  ];
+
+  const relativeRoundingLabels = {
+    s: lookupToken(
+      'euiTimeOptions.roundToSecond',
+      'Round to the second'
+    ) as string,
+    m: lookupToken(
+      'euiTimeOptions.roundToMinute',
+      'Round to the minute'
+    ) as string,
+    h: lookupToken('euiTimeOptions.roundToHour', 'Round to the hour') as string,
+    d: lookupToken('euiTimeOptions.roundToDay', 'Round to the day') as string,
+    w: lookupToken('euiTimeOptions.roundToWeek', 'Round to the week') as string,
+    M: lookupToken(
+      'euiTimeOptions.roundToMonth',
+      'Round to the month'
+    ) as string,
+    y: lookupToken('euiTimeOptions.roundToYear', 'Round to the year') as string
+  };
+
+  /**
+   * Auto Refresh
+   */
+  const refreshUnitsOptions = timeUnitsOptions.filter(
+    ({ value }) => value === 'h' || value === 'm' || value === 's'
+  );
+
+  /**
+   * Used by both Quick Select ('Commonly used') and by PrettyDuration
+   */
+  const commonDurationRanges = [
+    {
+      start: 'now/d',
+      end: 'now/d',
+      label: lookupToken('euiTimeOptions.today', 'Today') as string
+    },
+    {
+      start: 'now/w',
+      end: 'now/w',
+      label: lookupToken('euiTimeOptions.thisWeek', 'This week') as string
+    },
+    {
+      start: 'now/M',
+      end: 'now/M',
+      label: lookupToken('euiTimeOptions.thisMonth', 'This month') as string
+    },
+    {
+      start: 'now/y',
+      end: 'now/y',
+      label: lookupToken('euiTimeOptions.thisYear', 'This year') as string
+    },
+    {
+      start: 'now-1d/d',
+      end: 'now-1d/d',
+      label: lookupToken('euiTimeOptions.yesterday', 'Yesterday') as string
+    },
+    {
+      start: 'now/w',
+      end: 'now',
+      label: lookupToken('euiTimeOptions.weekToDate', 'Week to date') as string
+    },
+    {
+      start: 'now/M',
+      end: 'now',
+      label: lookupToken(
+        'euiTimeOptions.monthToDate',
+        'Month to date'
+      ) as string
+    },
+    {
+      start: 'now/y',
+      end: 'now',
+      label: lookupToken('euiTimeOptions.yearToDate', 'Year to date') as string
+    }
+  ];
+
+  return {
+    timeTenseOptions,
+    timeUnitsOptions,
+    relativeOptions,
+    relativeRoundingLabels,
+    refreshUnitsOptions,
+    commonDurationRanges
+  };
+};

package/addon/components/eui-tool-tip/index.ts

@@ -1,11 +1,11 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
-import { uniqueId } from '../../helpers/unique-id';
 import { tracked, cached } from '@glimmer/tracking';
 import { findPopoverPosition } from '../../utils/popover';
 import { keys } from '../../utils/keys';
 import { later, cancel, scheduleOnce, next } from '@ember/runloop';
+import { guidFor } from '@ember/object/internals';
 
 export type ToolTipPositions = 'top' | 'right' | 'bottom' | 'left';
 
@@ -104,7 +104,7 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {
   @tracked calculatedPosition: ToolTipPositions = this.position;
   @tracked toolTipStyles: ToolTipStyles = DEFAULT_TOOLTIP_STYLES;
   @tracked arrowStyles: undefined | { left: string; top: string };
-  @tracked id: string = this.args.id || uniqueId();
+  @tracked id: string = this.args.id || guidFor({});
   @tracked _attachTo: undefined | HTMLElement | string | null = null;
 
   private timeoutId?: ReturnType<typeof later>;

package/addon/components/text-block/index.hbs

@@ -1,29 +1,33 @@
 {{#if (eq @tagName "h1")}}
-	<h1 ...attributes>
-		{{yield}}
-	</h1>
+  <h1 ...attributes>
+    {{yield}}
+  </h1>
 {{else if (eq @tagName "h2")}}
-	<h2 ...attributes>
-		{{yield}}
-	</h2>
+  <h2 ...attributes>
+    {{yield}}
+  </h2>
 {{else if (eq @tagName "h3")}}
-	<h3 ...attributes>
-		{{yield}}
-	</h3>
+  <h3 ...attributes>
+    {{yield}}
+  </h3>
 {{else if (eq @tagName "h4")}}
-	<h4 ...attributes>
-		{{yield}}
-	</h4>
+  <h4 ...attributes>
+    {{yield}}
+  </h4>
 {{else if (eq @tagName "h5")}}
-	<h5 ...attributes>
-		{{yield}}
-	</h5>
+  <h5 ...attributes>
+    {{yield}}
+  </h5>
 {{else if (eq @tagName "h6")}}
-	<h6 ...attributes>
-		{{yield}}
-	</h6>
+  <h6 ...attributes>
+    {{yield}}
+  </h6>
 {{else if (eq @tagName "p")}}
-	<p ...attributes>
-		{{yield}}
-	</p>
+  <p ...attributes>
+    {{yield}}
+  </p>
+{{else if (eq @tagName "legend")}}
+  <legend ...attributes>
+    {{yield}}
+  </legend>
 {{/if}}

package/addon/{components/eui-i18n → i18n}/util.ts

@@ -6,12 +6,7 @@
  * Side Public License, v 1.
  */
 
-import {
-  isBoolean,
-  isString,
-  isNumber,
-  isUndefined
-} from '../../utils/predicate';
+import { isBoolean, isString, isNumber, isUndefined } from '../utils/predicate';
 import { get } from '@ember/object';
 import { assert } from '@ember/debug';
 

package/addon/modifiers/outside-click-detector.ts

@@ -1,5 +1,5 @@
 import Modifier from 'ember-modifier';
-import { uniqueId } from '../helpers/unique-id';
+import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
 
 interface OutsideClickDetectorModifierArgs {
@@ -46,7 +46,7 @@ export default class OutsideClickDetector extends Modifier<OutsideClickDetectorM
   }
 
   didInstall(): void {
-    this.id = uniqueId();
+    this.id = guidFor({});
     document.addEventListener('mouseup', this.onClickOutside);
     document.addEventListener('touchend', this.onClickOutside);
     this.addElementEvents();

package/addon/services/eui-i18n.ts

@@ -0,0 +1,89 @@
+import Service from '@ember/service';
+import { action } from '@ember/object';
+import { processStringToChildren } from '../i18n/util';
+
+interface LookupTokenOptions {
+  token: string;
+  i18nMapping?: Record<string, string>;
+  valueDefault: string | ((values: Record<string, unknown>) => string);
+  values?: Record<string, unknown>;
+}
+
+function flatten(
+  acc: Record<string, unknown> = {},
+  obj: Record<string, unknown>,
+  path = ''
+) {
+  path = path.length > 0 ? path + '.' : path;
+
+  for (const key in obj) {
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      flatten(acc, obj[key] as Record<string, unknown>, path + key);
+    } else {
+      acc[path + key] = obj[key];
+    }
+  }
+  return acc;
+}
+
+export default class EuiI18n extends Service {
+  translations = {};
+  @action addTranslations(translations: Record<string, unknown>) {
+    // TODO: deep merge?
+    this.translations = {
+      ...this.translations,
+      ...flatten({}, translations)
+    };
+  }
+
+  get mapping() {
+    return this.translations;
+  }
+
+  @action
+  lookupToken(
+    token: string,
+    valueDefault: string | ((values: Record<string, unknown>) => string),
+    values?: Record<string, any>
+  ): string | string[] {
+    return this._lookupToken({
+      token,
+      valueDefault,
+      values
+    });
+  }
+
+  getTokenFromMapping(
+    token: LookupTokenOptions['token'],
+    valueDefault: LookupTokenOptions['valueDefault'],
+    i18nMapping: LookupTokenOptions['i18nMapping']
+  ) {
+    return (i18nMapping && i18nMapping[token]) || valueDefault;
+  }
+
+  @action
+  _lookupToken(options: LookupTokenOptions) {
+    const {
+      token,
+      i18nMapping = this.mapping,
+      valueDefault,
+      values = {}
+    } = options;
+
+    let renderable = this.getTokenFromMapping(token, valueDefault, i18nMapping);
+
+    if (typeof renderable === 'function') {
+      renderable = renderable(values);
+    }
+
+    const children = processStringToChildren(renderable, values);
+
+    return children as string;
+  }
+}
+
+declare module '@ember/service' {
+  interface Registry {
+    'eui-i18n': EuiI18n;
+  }
+}

package/addon/utils/markdown/markdown-unified-plugins.d.ts

@@ -6,22 +6,8 @@
  * Side Public License, v 1.
  */
 
-declare module 'remark-emoji' {
-  import { Plugin } from 'unified';
-  const RemarkEmoji: Plugin;
-  export = RemarkEmoji;
-}
-
 declare module 'remark-highlight.js' {
   import { Plugin } from 'unified';
   const RemarkHighlight: Plugin;
   export = RemarkHighlight;
 }
-
-declare module 'mdast-util-to-hast/lib/all' {
-  import { Node } from 'unist';
-  import { H } from 'mdast-util-to-hast';
-
-  const all: (h: H, node: Node) => Node[];
-  export = all;
-}

package/app/components/eui-super-date-picker/date-popover/absolute-tab.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-super-date-picker/date-popover/absolute-tab';

package/app/components/eui-super-date-picker/date-popover/datetime-picker.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-super-date-picker/date-popover/datetime-picker';

package/app/components/eui-super-date-picker/date-popover/eui-date-popover-button.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-super-date-picker/date-popover/eui-date-popover-button';

package/app/components/eui-super-date-picker/date-popover/eui-date-popover-content.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-super-date-picker/date-popover/eui-date-popover-content';

package/app/components/eui-super-date-picker/date-popover/now-tab.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-super-date-picker/date-popover/now-tab';

package/app/components/eui-super-date-picker/date-popover/relative-tab.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-super-date-picker/date-popover/relative-tab';

package/app/components/eui-super-date-picker/eui-date-picker-range.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-super-date-picker/eui-date-picker-range';

package/app/components/eui-super-date-picker/eui-quick-select-popover/eui-commonly-used-time-ranges.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-super-date-picker/eui-quick-select-popover/eui-commonly-used-time-ranges';

package/app/components/eui-super-date-picker/eui-quick-select-popover/eui-quick-select.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-super-date-picker/eui-quick-select-popover/eui-quick-select';

package/app/components/eui-super-date-picker/eui-quick-select-popover/eui-recently-used.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-super-date-picker/eui-quick-select-popover/eui-recently-used';

package/app/components/eui-super-date-picker/eui-quick-select-popover/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-super-date-picker/eui-quick-select-popover/index';

package/app/components/eui-super-date-picker/eui-super-update-button.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-super-date-picker/eui-super-update-button';

package/app/components/eui-super-date-picker/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-super-date-picker/index';

package/app/services/eui-i18n.js

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

package/docs/forms/super-date-picker/demo/d01-picker.md

@@ -0,0 +1,90 @@
+---
+order: 1
+---
+
+```hbs template
+<EuiText size="s">
+  EuiSuperDatePicker should be resilient to invalid date values. You can try to break it with unexpected values here.
+</EuiText>
+
+<EuiSpacer />
+
+<EuiFormControlLayoutDelimited>
+  <:prepend as |classes|>
+    <EuiFormLabel class={{classes}}>Dates</EuiFormLabel>
+  </:prepend>
+
+  <:startControl as |classes|>
+    <input
+      class={{concat classes " euiFieldText"}}
+      type="text"
+      placeholder="start"
+      value={{this.start}}
+      {{on "change" this.onStartInputChange}}
+    />
+  </:startControl>
+
+  <:endControl as |classes|>
+    <input
+      class={{concat classes " euiFieldText"}}
+      type="text"
+      placeholder="end"
+      value={{this.end}}
+      {{on "change" this.onEndInputChange}}
+    />
+  </:endControl>
+</EuiFormControlLayoutDelimited>
+
+<EuiSpacer />
+
+<EuiSuperDatePicker
+  @onTimeChange={{this.onTimeChange}}
+  @start={{this.start}}
+  @end={{this.end}}
+  @isLoading={{this.isLoading}}
+  @onRefresh={{this.onRefresh}}
+/>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  @tracked start = 'now-30m';
+  @tracked end = 'now';
+  @tracked isLoading = false;
+
+  @action onTimeChange({ start, end }) {
+    this.start = start;
+    this.end = end;
+    this.isLoading = true;
+    this.startLoading();
+  }
+
+  @action onRefresh({ start, end, refreshInterval }) {
+    return new Promise((resolve) => {
+      setTimeout(resolve, 100);
+    }).then(() => {
+      console.log(start, end, refreshInterval);
+    });
+  };
+
+  @action onStartInputChange(e) {
+    this.start = e.target.value;
+  };
+
+  @action onEndInputChange(e) {
+    this.end = e.target.value;
+  };
+
+  @action startLoading() {
+    setTimeout(this.stopLoading, 1000);
+  };
+
+  @action stopLoading() {
+    this.isLoading = false;
+  };
+}
+```

package/docs/forms/super-date-picker/index.md

@@ -0,0 +1,16 @@
+---
+title: Super date picker
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Super date picker"/>
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+    <strong>EuiSuperDatePicker</strong> is a complex date picker that supports relative and absolute dates.
+    It offers a convenient <EuiIcon type="calendar" color="primary" /> <strong>Quick select menu</strong> which includes
+    <strong>Commonly used dates</strong>, <strong>Recently used date ranges</strong> and <strong>Auto refresh</strong> features.
+  </p>
+</EuiText>