@ember-eui/core 14.1.4 → 16.0.0

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

@@ -0,0 +1,69 @@
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { getEuiThemeContext } from '../../../utils/emotion/consume.js';
+import { fieldsetReset, legendReset } from '../../../utils/eui/date-pickers.js';
+import { el as euiQuickSelectPanelStyles, D as euiTitleStyles } from '../../../styles.generated-SYAxYhey.js';
+import { useEuiBorealisStyles, euiClass } from '../../../utils/eui/styles.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { n } from 'decorator-transforms/runtime-esm';
+
+class EuiQuickSelectPanel extends Component {
+  get context() {
+    return getEuiThemeContext(this);
+  }
+  get tagName() {
+    return this.args.component ?? this.args.tagName ?? 'div';
+  }
+  get isFieldset() {
+    return this.tagName === 'fieldset';
+  }
+  get hasTitle() {
+    return this.args.title !== undefined && this.args.title !== '';
+  }
+  get styles() {
+    return useEuiBorealisStyles(this.context, euiQuickSelectPanelStyles);
+  }
+  static {
+    n(this.prototype, "styles", [cached]);
+  }
+  get classes() {
+    return `euiQuickSelectPanel ${euiClass(this.context, this.isFieldset && fieldsetReset, {
+      boxSizing: 'border-box'
+    }, this.styles.euiQuickSelectPanel, this.args.css)}`;
+  }
+  /**
+  * Upstream clones the title element into `EuiTitle size="xxxs"`, so the
+  * title styles, the heading reset and the panel title styles share one
+  * class here.
+  */
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  get titleClasses() {
+    const context = this.context;
+    const title = useEuiBorealisStyles(context, euiTitleStyles);
+    return `euiTitle euiQuickSelectPanel__title ${euiClass(context, legendReset, {
+      fontFamily: context.upstream.euiTheme.font.family
+    }, title.euiTitle, title.xxxs, this.styles.euiQuickSelectPanel__title)}`;
+  }
+  static {
+    n(this.prototype, "titleClasses", [cached]);
+  }
+  get sectionClasses() {
+    return `euiQuickSelectPanel__section ${euiClass(this.context, {
+      boxSizing: 'border-box'
+    }, this.styles.euiQuickSelectPanel__section)}`;
+  }
+  static {
+    n(this.prototype, "sectionClasses", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#let (element this.tagName) as |Tag|}}\n  {{!-- @glint-expect-error: the dynamic tag is a div or a fieldset --}}\n  <Tag class={{this.classes}} ...attributes>\n    {{#if this.hasTitle}}\n      {{#if this.isFieldset}}\n        <legend id={{@titleId}} class={{this.titleClasses}}>{{@title}}</legend>\n      {{else}}\n        <span id={{@titleId}} class={{this.titleClasses}}>{{@title}}</span>\n      {{/if}}\n      <div class={{this.sectionClasses}}>\n        {{yield}}\n      </div>\n    {{else}}\n      {{yield}}\n    {{/if}}\n  </Tag>\n{{/let}}", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { EuiQuickSelectPanel as default };
+//# sourceMappingURL=eui-quick-select-panel.js.map

package/dist/components/eui-super-date-picker/eui-quick-select-popover/eui-quick-select-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-quick-select-panel.js","sources":["../../../../src/components/eui-super-date-picker/eui-quick-select-popover/eui-quick-select-panel.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport { getEuiThemeContext } from '../../../utils/emotion/consume.ts';\nimport { fieldsetReset, legendReset } from '../../../utils/eui/date-pickers.ts';\nimport {\n  euiQuickSelectPanelStyles,\n  euiTitleStyles\n} from '../../../utils/eui/styles.generated.ts';\nimport { euiClass, useEuiBorealisStyles } from '../../../utils/eui/styles.ts';\n\nimport type { EuiCss } from '../../../utils/eui/styles.ts';\n\n/**\n * @private A section of the quick select popover (upstream\n * `EuiQuickSelectPanel`): a top border and spacing between panels, an\n * optional `xxxs` title (a `<legend>` when rendered as a fieldset) and a\n * scrollable section for the content.\n */\nexport interface EuiQuickSelectPanelSignature {\n  // A `<fieldset>` (or a `<div>` with `@tagName=\"div\"`, which no caller\n  // passes attributes to).\n  Element: HTMLFieldSetElement;\n  Args: {\n    /** `'div'` (default) or `'fieldset'` (upstream `component`). */\n    component?: 'div' | 'fieldset';\n    /** Same as `@component`, which wins. */\n    tagName?: 'div' | 'fieldset';\n    /** Panel title; the content then goes in a scrollable section. */\n    title?: string;\n    /** Id of the title, e.g. for `aria-labelledby`. */\n    titleId?: string;\n    /** Extra styles composed last onto the panel's class. */\n    css?: EuiCss;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nexport default class EuiQuickSelectPanel extends Component<EuiQuickSelectPanelSignature> {\n  get context() {\n    return getEuiThemeContext(this);\n  }\n\n  get tagName() {\n    return this.args.component ?? this.args.tagName ?? 'div';\n  }\n\n  get isFieldset() {\n    return this.tagName === 'fieldset';\n  }\n\n  get hasTitle() {\n    return this.args.title !== undefined && this.args.title !== '';\n  }\n\n  @cached\n  get styles() {\n    return useEuiBorealisStyles(this.context, euiQuickSelectPanelStyles);\n  }\n\n  @cached\n  get classes() {\n    return `euiQuickSelectPanel ${euiClass(\n      this.context,\n      this.isFieldset && fieldsetReset,\n      { boxSizing: 'border-box' },\n      this.styles.euiQuickSelectPanel,\n      this.args.css\n    )}`;\n  }\n\n  /**\n   * Upstream clones the title element into `EuiTitle size=\"xxxs\"`, so the\n   * title styles, the heading reset and the panel title styles share one\n   * class here.\n   */\n  @cached\n  get titleClasses() {\n    const context = this.context;\n    const title = useEuiBorealisStyles(context, euiTitleStyles);\n    return `euiTitle euiQuickSelectPanel__title ${euiClass(\n      context,\n      legendReset,\n      { fontFamily: context.upstream.euiTheme.font.family },\n      title.euiTitle,\n      title.xxxs,\n      this.styles.euiQuickSelectPanel__title\n    )}`;\n  }\n\n  @cached\n  get sectionClasses() {\n    return `euiQuickSelectPanel__section ${euiClass(\n      this.context,\n      { boxSizing: 'border-box' },\n      this.styles.euiQuickSelectPanel__section\n    )}`;\n  }\n\n  <template>\n    {{#let (element this.tagName) as |Tag|}}\n      {{! @glint-expect-error: the dynamic tag is a div or a fieldset }}\n      <Tag class={{this.classes}} ...attributes>\n        {{#if this.hasTitle}}\n          {{#if this.isFieldset}}\n            <legend id={{@titleId}} class={{this.titleClasses}}>{{@title}}</legend>\n          {{else}}\n            <span id={{@titleId}} class={{this.titleClasses}}>{{@title}}</span>\n          {{/if}}\n          <div class={{this.sectionClasses}}>\n            {{yield}}\n          </div>\n        {{else}}\n          {{yield}}\n        {{/if}}\n      </Tag>\n    {{/let}}\n  </template>\n}\n"],"names":["EuiQuickSelectPanel","Component","context","getEuiThemeContext","tagName","args","component","isFieldset","hasTitle","title","undefined","styles","useEuiBorealisStyles","euiQuickSelectPanelStyles","n","prototype","cached","classes","euiClass","fieldsetReset","boxSizing","euiQuickSelectPanel","css","titleClasses","euiTitleStyles","legendReset","fontFamily","upstream","euiTheme","font","family","euiTitle","xxxs","euiQuickSelectPanel__title","sectionClasses","euiQuickSelectPanel__section","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;;;;;;AAwCe,MAAMA,4BAA4BC,SAAA,CAAU;EACzD,IAAIC,OAAAA,GAAU;IACZ,OAAOC,mBAAmB,IAAI,CAAA;AAChC,EAAA;EAEA,IAAIC,OAAAA,GAAU;AACZ,IAAA,OAAO,IAAI,CAACC,IAAI,CAACC,SAAS,IAAI,IAAI,CAACD,IAAI,CAACD,OAAO,IAAI,KAAA;AACrD,EAAA;EAEA,IAAIG,UAAAA,GAAa;AACf,IAAA,OAAO,IAAI,CAACH,OAAO,KAAK,UAAA;AAC1B,EAAA;EAEA,IAAII,QAAAA,GAAW;AACb,IAAA,OAAO,IAAI,CAACH,IAAI,CAACI,KAAK,KAAKC,SAAA,IAAa,IAAI,CAACL,IAAI,CAACI,KAAK,KAAK,EAAA;AAC9D,EAAA;EAEA,IACIE,MAAAA,GAAS;AACX,IAAA,OAAOC,oBAAA,CAAqB,IAAI,CAACV,OAAO,EAAEW,yBAAA,CAAA;AAC5C,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,QAAA,EAAA,CAHCC,MAAA,CAAA,CAAA;AAAA;EAKD,IACIC,OAAAA,GAAU;AACZ,IAAA,OAAO,CAAA,oBAAA,EAAuBC,QAAA,CAC5B,IAAI,CAAChB,OAAO,EACZ,IAAI,CAACK,UAAU,IAAIY,aAAA,EACnB;AAAEC,MAAAA,SAAA,EAAW;AAAa,KAAA,EAC1B,IAAI,CAACT,MAAM,CAACU,mBAAmB,EAC/B,IAAI,CAAChB,IAAI,CAACiB,GAAG,CAAA,CAAA,CACZ;AACL,EAAA;AAEA;;;;AAIC;AAJD,EAAA;IAAAR,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAXCC,MAAA,CAAA,CAAA;AAAA;EAgBD,IACIO,YAAAA,GAAe;AACjB,IAAA,MAAMrB,OAAA,GAAU,IAAI,CAACA,OAAO;AAC5B,IAAA,MAAMO,KAAA,GAAQG,qBAAqBV,OAAA,EAASsB,cAAA,CAAA;AAC5C,IAAA,OAAO,uCAAuCN,QAAA,CAC5ChB,SACAuB,WAAA,EACA;MAAEC,UAAA,EAAYxB,QAAQyB,QAAQ,CAACC,QAAQ,CAACC,IAAI,CAACC;AAAO,KAAA,EACpDrB,KAAA,CAAMsB,QAAQ,EACdtB,KAAA,CAAMuB,IAAI,EACV,IAAI,CAACrB,MAAM,CAACsB,0BAA0B,CAAA,CAAA,CACrC;AACL,EAAA;AAAA,EAAA;IAAAnB,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,cAAA,EAAA,CAZCC,MAAA,CAAA,CAAA;AAAA;EAcD,IACIkB,cAAAA,GAAiB;AACnB,IAAA,OAAO,gCAAgChB,SACrC,IAAI,CAAChB,OAAO,EACZ;AAAEkB,MAAAA,SAAA,EAAW;AAAa,KAAA,EAC1B,IAAI,CAACT,MAAM,CAACwB,4BAA4B,CAAA,CAAA,CACvC;AACL,EAAA;AAAA,EAAA;IAAArB,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,gBAAA,EAAA,CAPCC,MAAA,CAAA,CAAA;AAAA;AASD,EAAA;IAAAoB,oBAAA,CAAAC,kBAAA,CAAA,qiBAAA,EAkBA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

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

@@ -2,27 +2,38 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
+import { service } from '@ember/service';
 import dateMath from '@elastic/datemath';
 import pick from '@nullvoxpopuli/ember-composable-helpers/helpers/pick';
 import set from 'ember-set-helper/helpers/set';
 import { lte } from 'ember-truth-helpers';
 import moment from 'moment';
+import { randomId } from '../../../-private/random-id.js';
+import { euiQuickSelectStyles } from '../../../utils/eui/date-pickers.js';
 import EuiButton from '../../eui-button.js';
 import EuiButtonIcon from '../../eui-button-icon.js';
 import EuiFieldNumber from '../../eui-field-number.js';
 import EuiFlexGroup from '../../eui-flex-group.js';
 import EuiFlexItem from '../../eui-flex-item.js';
 import EuiI18nComponent from '../../eui-i18n.js';
+import EuiScreenReaderOnly from '../../eui-screen-reader-only.js';
 import EuiSelect from '../../eui-select.js';
-import EuiSpacer from '../../eui-spacer.js';
 import EuiToolTip from '../../eui-tool-tip.js';
 import parseTimeParts from '../utils/quick-select.js';
 import { NEXT } from '../utils/time-options.js';
+import EuiQuickSelectPanel from './eui-quick-select-panel.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import { g, i, n } from 'decorator-transforms/runtime-esm';
 
 class EuiQuickSelect extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service('eui-i18n')]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  legendId = randomId();
+  timeSelectionId = randomId();
+  panelCss = euiQuickSelectStyles.panel;
   static {
     g(this.prototype, "timeTense", [tracked]);
   }
@@ -102,23 +113,63 @@ class EuiQuickSelect extends Component {
   static {
     n(this.prototype, "stepBackward", [action]);
   }
+  get title() {
+    return this.euiI18n.lookupToken('euiQuickSelect.quickSelectTitle', 'Quick select');
+  }
+  get describedBy() {
+    return `${this.timeSelectionId} ${this.legendId}`;
+  }
+  /** Upstream's screen reader summary of the current selection. */
+  get description() {
+    const unit = this.args.timeOptions.timeUnitsOptions.find(({
+      value
+    }) => value === this.timeUnits);
+    return this.euiI18n.lookupToken('euiQuickSelect.fullDescription', 'Currently set to {timeTense} {timeValue} {timeUnit}.', {
+      timeTense: this.timeTense,
+      timeValue: this.timeValue,
+      timeUnit: unit ? unit.text : ''
+    });
+  }
+  /**
+  * The previous/next buttons sit above the inputs, next to the title
+  * (upstream's `css` on their EuiFlexGroup).
+  */
+  get timeWindowButtonsCss() {
+    return euiQuickSelectStyles.timeWindowButtons;
+  }
+  onTimeValueInput(event) {
+    // upstream: a non-number value becomes 0, which disables "Apply"
+    const value = parseInt(event.target.value, 10);
+    this.timeValue = isNaN(value) ? 0 : value;
+  }
+  /** Enter in any of the fields applies the quick selection (upstream). */
+  static {
+    n(this.prototype, "onTimeValueInput", [action]);
+  }
+  onKeyDown(event) {
+    if (event.key === 'Enter') this.applyQuickSelect();
+  }
+  static {
+    n(this.prototype, "onKeyDown", [action]);
+  }
   static {
-    setComponentTemplate(precompileTemplate("<fieldset>\n  <EuiFlexGroup @responsive={{false}} @alignItems=\"center\" @justifyContent=\"spaceBetween\" @gutterSize=\"s\">\n    <EuiFlexItem @grow={{false}}>\n      <EuiI18n @token=\"euiQuickSelect.quickSelectTitle\" @default=\"Quick select\" as |Token|>\n        <Token as |quickSelectTitle|>\n          <div aria-hidden class=\"euiFormLabel\">\n            {{quickSelectTitle}}\n          </div>\n        </Token>\n      </EuiI18n>\n    </EuiFlexItem>\n    <EuiFlexItem @grow={{false}}>\n      <EuiFlexGroup @alignItems=\"center\" @gutterSize=\"s\" @responsive={{false}}>\n        <EuiFlexItem @grow={{false}}>\n          <EuiI18n @token=\"euiQuickSelect.previousLabel\" @default=\"Previous time window\" as |Token|>\n            <Token as |previousLabel|>\n              <EuiToolTip @content={{previousLabel}}>\n                <EuiButtonIcon aria-label={{previousLabel}} @iconType=\"arrowLeft\" {{on \"click\" this.stepBackward}} />\n              </EuiToolTip>\n            </Token>\n          </EuiI18n>\n        </EuiFlexItem>\n        <EuiFlexItem @grow={{false}}>\n          <EuiI18n @token=\"euiQuickSelect.nextLabel\" @default=\"Next time window\" as |Token|>\n            <Token as |nextLabel|>\n              <EuiToolTip @content={{nextLabel}}>\n                <EuiButtonIcon aria-label={{nextLabel}} @iconType=\"arrowRight\" {{on \"click\" this.stepForward}} />\n              </EuiToolTip>\n            </Token>\n          </EuiI18n>\n        </EuiFlexItem>\n      </EuiFlexGroup>\n    </EuiFlexItem>\n  </EuiFlexGroup>\n  <EuiSpacer @size=\"s\" />\n  <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n    <EuiFlexItem>\n      <EuiI18n @token=\"euiQuickSelect.tenseLabel\" @default=\"Time tense\" as |Token|>\n        <Token as |tenseLabel|>\n          <EuiSelect @compressed={{true}} aria-label={{tenseLabel}} @value={{this.timeTense}} @options={{@timeOptions.timeTenseOptions}} {{on \"change\" (pick \"target.value\" (set this \"timeTense\"))}} />\n        </Token>\n      </EuiI18n>\n    </EuiFlexItem>\n    <EuiFlexItem>\n      <EuiI18n @token=\"euiQuickSelect.valueLabel\" @default=\"Time value\" as |Token|>\n        <Token as |valueLabel|>\n          <EuiFieldNumber @compressed={{true}} aria-label={{valueLabel}} @value={{this.timeValue}} {{on \"input\" (pick \"target.value\" (set this \"timeValue\"))}} />\n        </Token>\n      </EuiI18n>\n    </EuiFlexItem>\n    <EuiFlexItem>\n      <EuiI18n @token=\"euiQuickSelect.unitLabel\" @default=\"Time unit\" as |Token|>\n        <Token as |unitLabel|>\n          <EuiSelect @compressed={{true}} aria-label={{unitLabel}} @value={{this.timeUnits}} @options={{@timeOptions.timeUnitsOptions}} {{on \"change\" (pick \"target.value\" (set this \"timeUnits\"))}} />\n        </Token>\n      </EuiI18n>\n    </EuiFlexItem>\n    <EuiFlexItem @grow={{false}}>\n      <EuiButton class=\"euiQuickSelect__applyButton\" @size=\"s\" @disabled={{lte this.timeValue 0}} {{on \"click\" this.applyQuickSelect}}>\n        <EuiI18n @token=\"euiQuickSelect.applyButton\" @default=\"Apply\" as |Token|>\n          <Token as |value|>\n            {{value}}\n          </Token>\n        </EuiI18n>\n      </EuiButton>\n    </EuiFlexItem>\n  </EuiFlexGroup>\n</fieldset>", {
+    setComponentTemplate(precompileTemplate("<EuiQuickSelectPanel @tagName=\"fieldset\" @title={{this.title}} @titleId={{this.legendId}} @css={{this.panelCss}} aria-describedby={{this.timeSelectionId}}>\n  <EuiFlexGroup class=\"euiQuickSelect__timeWindowButtons\" @alignItems=\"center\" @gutterSize=\"s\" @responsive={{false}} @css={{this.timeWindowButtonsCss}}>\n    <EuiFlexItem @grow={{false}}>\n      <EuiI18n @token=\"euiQuickSelect.previousLabel\" @default=\"Previous time window\" as |Token|>\n        <Token as |previousLabel|>\n          <EuiToolTip @content={{previousLabel}} @disableScreenReaderOutput={{true}}>\n            <EuiButtonIcon aria-label={{previousLabel}} @iconType=\"chevronSingleLeft\" {{on \"click\" this.stepBackward}} />\n          </EuiToolTip>\n        </Token>\n      </EuiI18n>\n    </EuiFlexItem>\n    <EuiFlexItem @grow={{false}}>\n      <EuiI18n @token=\"euiQuickSelect.nextLabel\" @default=\"Next time window\" as |Token|>\n        <Token as |nextLabel|>\n          <EuiToolTip @content={{nextLabel}} @disableScreenReaderOutput={{true}}>\n            <EuiButtonIcon aria-label={{nextLabel}} @iconType=\"chevronSingleRight\" {{on \"click\" this.stepForward}} />\n          </EuiToolTip>\n        </Token>\n      </EuiI18n>\n    </EuiFlexItem>\n  </EuiFlexGroup>\n  <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n    <EuiFlexItem>\n      <EuiI18n @token=\"euiQuickSelect.tenseLabel\" @default=\"Time tense\" as |Token|>\n        <Token as |tenseLabel|>\n          <EuiSelect @compressed={{true}} aria-label={{tenseLabel}} aria-describedby={{this.describedBy}} @value={{this.timeTense}} @options={{@timeOptions.timeTenseOptions}} {{on \"change\" (pick \"target.value\" (set this \"timeTense\"))}} {{on \"keydown\" this.onKeyDown}} />\n        </Token>\n      </EuiI18n>\n    </EuiFlexItem>\n    <EuiFlexItem>\n      <EuiI18n @token=\"euiQuickSelect.valueLabel\" @default=\"Time value\" as |Token|>\n        <Token as |valueLabel|>\n          <EuiFieldNumber @compressed={{true}} aria-label={{valueLabel}} aria-describedby={{this.describedBy}} @value={{this.timeValue}} {{on \"input\" this.onTimeValueInput}} {{on \"keydown\" this.onKeyDown}} />\n        </Token>\n      </EuiI18n>\n    </EuiFlexItem>\n    <EuiFlexItem>\n      <EuiI18n @token=\"euiQuickSelect.unitLabel\" @default=\"Time unit\" as |Token|>\n        <Token as |unitLabel|>\n          <EuiSelect @compressed={{true}} aria-label={{unitLabel}} aria-describedby={{this.describedBy}} @value={{this.timeUnits}} @options={{@timeOptions.timeUnitsOptions}} {{on \"change\" (pick \"target.value\" (set this \"timeUnits\"))}} {{on \"keydown\" this.onKeyDown}} />\n        </Token>\n      </EuiI18n>\n    </EuiFlexItem>\n    <EuiFlexItem @grow={{false}}>\n      <EuiButton class=\"euiQuickSelect__applyButton\" aria-describedby={{this.describedBy}} data-test-subj=\"superDatePickerQuickSelectApplyButton\" @size=\"s\" @disabled={{lte this.timeValue 0}} {{on \"click\" this.applyQuickSelect}}>\n        <EuiI18n @token=\"euiQuickSelect.applyButton\" @default=\"Apply\" as |Token|>\n          <Token as |value|>\n            {{value}}\n          </Token>\n        </EuiI18n>\n      </EuiButton>\n    </EuiFlexItem>\n  </EuiFlexGroup>\n  <EuiScreenReaderOnly>\n    <p id={{this.timeSelectionId}}>{{this.description}}</p>\n  </EuiScreenReaderOnly>\n</EuiQuickSelectPanel>", {
       strictMode: true,
       scope: () => ({
+        EuiQuickSelectPanel,
         EuiFlexGroup,
         EuiFlexItem,
         EuiI18n: EuiI18nComponent,
         EuiToolTip,
         EuiButtonIcon,
         on,
-        EuiSpacer,
         EuiSelect,
         pick,
         set,
         EuiFieldNumber,
         EuiButton,
-        lte
+        lte,
+        EuiScreenReaderOnly
       })
     }), this);
   }

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

@@ -1 +1 @@
-{"version":3,"file":"eui-quick-select.js","sources":["../../../../src/components/eui-super-date-picker/eui-quick-select-popover/eui-quick-select.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport type Owner from '@ember/owner';\n\nimport dateMath from '@elastic/datemath';\nimport pick from '@nullvoxpopuli/ember-composable-helpers/helpers/pick';\nimport set from 'ember-set-helper/helpers/set';\nimport { lte } from 'ember-truth-helpers';\nimport moment from 'moment';\n\nimport EuiButton from '../../eui-button.gts';\nimport EuiButtonIcon from '../../eui-button-icon.gts';\nimport EuiFieldNumber from '../../eui-field-number.gts';\nimport EuiFlexGroup from '../../eui-flex-group.gts';\nimport EuiFlexItem from '../../eui-flex-item.gts';\nimport EuiI18n from '../../eui-i18n.gts';\nimport EuiSelect from '../../eui-select.gts';\nimport EuiSpacer from '../../eui-spacer.gts';\nimport EuiToolTip from '../../eui-tool-tip.gts';\nimport { parseTimeParts } from '../utils/quick-select.ts';\nimport { NEXT } from '../utils/time-options.ts';\n\nimport type { ApplyTime, TimeUnitId } from '../types/global';\nimport type { TimeOptions } from '../utils/time-options.ts';\n\ninterface EuiQuickSelectState {\n  timeTense: string;\n  timeValue: number;\n  timeUnits: TimeUnitId;\n}\n\ninterface EuiQuickSelectArgs {\n  /** Applies a new `{ start, end }` range. */\n  applyTime: ApplyTime;\n  /** Start of the range (date math or ISO date). */\n  start: string;\n  /** End of the range. */\n  end: string;\n  /** The last quick select, to prefill it. */\n  prevQuickSelect?: EuiQuickSelectState;\n  /** Time units and tenses for the quick select. */\n  timeOptions: TimeOptions;\n}\n\n/** @private The \"Quick select\" part of the quick select popover. */\nexport interface EuiQuickSelectSignature {\n  Args: EuiQuickSelectArgs;\n  Blocks: { default: [] };\n}\n\nexport default class EuiQuickSelect extends Component<EuiQuickSelectSignature> {\n  @tracked timeTense: string;\n  @tracked timeValue: number;\n  @tracked timeUnits: TimeUnitId;\n\n  constructor(owner: Owner, args: EuiQuickSelectArgs) {\n    super(owner, args);\n\n    const {\n      timeTense: timeTenseDefault,\n      timeUnits: timeUnitsDefault,\n      timeValue: timeValueDefault\n    } = parseTimeParts(this.args.start, this.args.end);\n\n    this.timeTense =\n      this.args.prevQuickSelect && this.args.prevQuickSelect.timeTense\n        ? this.args.prevQuickSelect.timeTense\n        : timeTenseDefault;\n    this.timeValue =\n      this.args.prevQuickSelect && this.args.prevQuickSelect.timeValue\n        ? this.args.prevQuickSelect.timeValue\n        : timeValueDefault;\n    this.timeUnits =\n      this.args.prevQuickSelect && this.args.prevQuickSelect.timeUnits\n        ? this.args.prevQuickSelect.timeUnits\n        : timeUnitsDefault;\n  }\n\n  getBounds() {\n    const startMoment = dateMath.parse(this.args.start);\n    const endMoment = dateMath.parse(this.args.end, { roundUp: true });\n\n    return {\n      min:\n        startMoment && startMoment.isValid()\n          ? startMoment\n          : moment().subtract(15, 'minute'),\n      max: endMoment && endMoment.isValid() ? endMoment : moment()\n    };\n  }\n\n  @action\n  applyQuickSelect() {\n    if (this.timeTense === NEXT) {\n      this.args.applyTime({\n        start: 'now',\n        end: `now+${this.timeValue}${this.timeUnits}`\n        // quickSelect: { ...this.state },\n      });\n    } else {\n      this.args.applyTime({\n        start: `now-${this.timeValue}${this.timeUnits}`,\n        end: 'now'\n        // quickSelect: { ...this.state },\n      });\n    }\n  }\n\n  @action\n  stepForward() {\n    const { min, max } = this.getBounds();\n    const diff = max.diff(min);\n\n    this.args.applyTime({\n      start: moment(max).add(1, 'ms').toISOString(),\n      end: moment(max)\n        .add(diff + 1, 'ms')\n        .toISOString(),\n      keepPopoverOpen: true\n    });\n  }\n\n  @action\n  stepBackward() {\n    const { min, max } = this.getBounds();\n    const diff = max.diff(min);\n\n    this.args.applyTime({\n      start: moment(min)\n        .subtract(diff + 1, 'ms')\n        .toISOString(),\n      end: moment(min).subtract(1, 'ms').toISOString(),\n      keepPopoverOpen: true\n    });\n  }\n\n  <template>\n    <fieldset>\n      <EuiFlexGroup\n        @responsive={{false}}\n        @alignItems=\"center\"\n        @justifyContent=\"spaceBetween\"\n        @gutterSize=\"s\"\n      >\n        <EuiFlexItem @grow={{false}}>\n          <EuiI18n\n            @token=\"euiQuickSelect.quickSelectTitle\"\n            @default=\"Quick select\"\n            as |Token|\n          >\n            <Token as |quickSelectTitle|>\n              <div aria-hidden class=\"euiFormLabel\">\n                {{quickSelectTitle}}\n              </div>\n            </Token>\n          </EuiI18n>\n        </EuiFlexItem>\n        <EuiFlexItem @grow={{false}}>\n          <EuiFlexGroup\n            @alignItems=\"center\"\n            @gutterSize=\"s\"\n            @responsive={{false}}\n          >\n            <EuiFlexItem @grow={{false}}>\n              <EuiI18n\n                @token=\"euiQuickSelect.previousLabel\"\n                @default=\"Previous time window\"\n                as |Token|\n              >\n                <Token as |previousLabel|>\n                  <EuiToolTip @content={{previousLabel}}>\n                    <EuiButtonIcon\n                      aria-label={{previousLabel}}\n                      @iconType=\"arrowLeft\"\n                      {{on \"click\" this.stepBackward}}\n                    />\n                  </EuiToolTip>\n                </Token>\n              </EuiI18n>\n            </EuiFlexItem>\n            <EuiFlexItem @grow={{false}}>\n              <EuiI18n\n                @token=\"euiQuickSelect.nextLabel\"\n                @default=\"Next time window\"\n                as |Token|\n              >\n                <Token as |nextLabel|>\n                  <EuiToolTip @content={{nextLabel}}>\n                    <EuiButtonIcon\n                      aria-label={{nextLabel}}\n                      @iconType=\"arrowRight\"\n                      {{on \"click\" this.stepForward}}\n                    />\n                  </EuiToolTip>\n                </Token>\n              </EuiI18n>\n            </EuiFlexItem>\n          </EuiFlexGroup>\n        </EuiFlexItem>\n      </EuiFlexGroup>\n      <EuiSpacer @size=\"s\" />\n      <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n        <EuiFlexItem>\n          <EuiI18n\n            @token=\"euiQuickSelect.tenseLabel\"\n            @default=\"Time tense\"\n            as |Token|\n          >\n            <Token as |tenseLabel|>\n              <EuiSelect\n                @compressed={{true}}\n                aria-label={{tenseLabel}}\n                @value={{this.timeTense}}\n                @options={{@timeOptions.timeTenseOptions}}\n                {{on \"change\" (pick \"target.value\" (set this \"timeTense\"))}}\n              />\n            </Token>\n          </EuiI18n>\n        </EuiFlexItem>\n        <EuiFlexItem>\n          <EuiI18n\n            @token=\"euiQuickSelect.valueLabel\"\n            @default=\"Time value\"\n            as |Token|\n          >\n            <Token as |valueLabel|>\n              <EuiFieldNumber\n                @compressed={{true}}\n                aria-label={{valueLabel}}\n                @value={{this.timeValue}}\n                {{on \"input\" (pick \"target.value\" (set this \"timeValue\"))}}\n              />\n            </Token>\n          </EuiI18n>\n        </EuiFlexItem>\n        <EuiFlexItem>\n          <EuiI18n\n            @token=\"euiQuickSelect.unitLabel\"\n            @default=\"Time unit\"\n            as |Token|\n          >\n            <Token as |unitLabel|>\n              <EuiSelect\n                @compressed={{true}}\n                aria-label={{unitLabel}}\n                @value={{this.timeUnits}}\n                @options={{@timeOptions.timeUnitsOptions}}\n                {{on \"change\" (pick \"target.value\" (set this \"timeUnits\"))}}\n              />\n            </Token>\n          </EuiI18n>\n        </EuiFlexItem>\n        <EuiFlexItem @grow={{false}}>\n          <EuiButton\n            class=\"euiQuickSelect__applyButton\"\n            @size=\"s\"\n            @disabled={{lte this.timeValue 0}}\n            {{on \"click\" this.applyQuickSelect}}\n          >\n            <EuiI18n\n              @token=\"euiQuickSelect.applyButton\"\n              @default=\"Apply\"\n              as |Token|\n            >\n              <Token as |value|>\n                {{value}}\n              </Token>\n            </EuiI18n>\n          </EuiButton>\n        </EuiFlexItem>\n      </EuiFlexGroup>\n    </fieldset>\n  </template>\n}\n"],"names":["EuiQuickSelect","Component","g","prototype","tracked","i","constructor","owner","args","timeTense","timeTenseDefault","timeUnits","timeUnitsDefault","timeValue","timeValueDefault","parseTimeParts","start","end","prevQuickSelect","getBounds","startMoment","dateMath","parse","endMoment","roundUp","min","isValid","moment","subtract","max","applyQuickSelect","NEXT","applyTime","n","action","stepForward","diff","add","toISOString","keepPopoverOpen","stepBackward","setComponentTemplate","precompileTemplate","strictMode","scope","EuiFlexGroup","EuiFlexItem","EuiI18n","EuiToolTip","EuiButtonIcon","on","EuiSpacer","EuiSelect","pick","set","EuiFieldNumber","EuiButton","lte"],"mappings":"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"}
+{"version":3,"file":"eui-quick-select.js","sources":["../../../../src/components/eui-super-date-picker/eui-quick-select-popover/eui-quick-select.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport type Owner from '@ember/owner';\nimport { service } from '@ember/service';\n\nimport dateMath from '@elastic/datemath';\nimport pick from '@nullvoxpopuli/ember-composable-helpers/helpers/pick';\nimport set from 'ember-set-helper/helpers/set';\nimport { lte } from 'ember-truth-helpers';\nimport moment from 'moment';\n\nimport { randomId } from '../../../-private/random-id.ts';\nimport { euiQuickSelectStyles } from '../../../utils/eui/date-pickers.ts';\nimport type { EuiCss } from '../../../utils/eui/styles.ts';\nimport EuiButton from '../../eui-button.gts';\nimport EuiButtonIcon from '../../eui-button-icon.gts';\nimport EuiFieldNumber from '../../eui-field-number.gts';\nimport EuiFlexGroup from '../../eui-flex-group.gts';\nimport EuiFlexItem from '../../eui-flex-item.gts';\nimport EuiI18n from '../../eui-i18n.gts';\nimport EuiScreenReaderOnly from '../../eui-screen-reader-only.gts';\nimport EuiSelect from '../../eui-select.gts';\nimport EuiToolTip from '../../eui-tool-tip.gts';\nimport { parseTimeParts } from '../utils/quick-select.ts';\nimport { NEXT } from '../utils/time-options.ts';\nimport EuiQuickSelectPanel from './eui-quick-select-panel.gts';\n\nimport type EuiI18nService from '../../../services/eui-i18n';\n\nimport type { ApplyTime, TimeUnitId } from '../types/global';\nimport type { TimeOptions } from '../utils/time-options.ts';\n\ninterface EuiQuickSelectState {\n  timeTense: string;\n  timeValue: number;\n  timeUnits: TimeUnitId;\n}\n\ninterface EuiQuickSelectArgs {\n  /** Applies a new `{ start, end }` range. */\n  applyTime: ApplyTime;\n  /** Start of the range (date math or ISO date). */\n  start: string;\n  /** End of the range. */\n  end: string;\n  /** The last quick select, to prefill it. */\n  prevQuickSelect?: EuiQuickSelectState;\n  /** Time units and tenses for the quick select. */\n  timeOptions: TimeOptions;\n}\n\n/** @private The \"Quick select\" part of the quick select popover. */\nexport interface EuiQuickSelectSignature {\n  Args: EuiQuickSelectArgs;\n  Blocks: { default: [] };\n}\n\nexport default class EuiQuickSelect extends Component<EuiQuickSelectSignature> {\n  @service('eui-i18n') declare euiI18n: EuiI18nService;\n\n  legendId = randomId();\n  timeSelectionId = randomId();\n  panelCss = euiQuickSelectStyles.panel;\n  @tracked timeTense: string;\n  @tracked timeValue: number;\n  @tracked timeUnits: TimeUnitId;\n\n  constructor(owner: Owner, args: EuiQuickSelectArgs) {\n    super(owner, args);\n\n    const {\n      timeTense: timeTenseDefault,\n      timeUnits: timeUnitsDefault,\n      timeValue: timeValueDefault\n    } = parseTimeParts(this.args.start, this.args.end);\n\n    this.timeTense =\n      this.args.prevQuickSelect && this.args.prevQuickSelect.timeTense\n        ? this.args.prevQuickSelect.timeTense\n        : timeTenseDefault;\n    this.timeValue =\n      this.args.prevQuickSelect && this.args.prevQuickSelect.timeValue\n        ? this.args.prevQuickSelect.timeValue\n        : timeValueDefault;\n    this.timeUnits =\n      this.args.prevQuickSelect && this.args.prevQuickSelect.timeUnits\n        ? this.args.prevQuickSelect.timeUnits\n        : timeUnitsDefault;\n  }\n\n  getBounds() {\n    const startMoment = dateMath.parse(this.args.start);\n    const endMoment = dateMath.parse(this.args.end, { roundUp: true });\n\n    return {\n      min:\n        startMoment && startMoment.isValid()\n          ? startMoment\n          : moment().subtract(15, 'minute'),\n      max: endMoment && endMoment.isValid() ? endMoment : moment()\n    };\n  }\n\n  @action\n  applyQuickSelect() {\n    if (this.timeTense === NEXT) {\n      this.args.applyTime({\n        start: 'now',\n        end: `now+${this.timeValue}${this.timeUnits}`\n        // quickSelect: { ...this.state },\n      });\n    } else {\n      this.args.applyTime({\n        start: `now-${this.timeValue}${this.timeUnits}`,\n        end: 'now'\n        // quickSelect: { ...this.state },\n      });\n    }\n  }\n\n  @action\n  stepForward() {\n    const { min, max } = this.getBounds();\n    const diff = max.diff(min);\n\n    this.args.applyTime({\n      start: moment(max).add(1, 'ms').toISOString(),\n      end: moment(max)\n        .add(diff + 1, 'ms')\n        .toISOString(),\n      keepPopoverOpen: true\n    });\n  }\n\n  @action\n  stepBackward() {\n    const { min, max } = this.getBounds();\n    const diff = max.diff(min);\n\n    this.args.applyTime({\n      start: moment(min)\n        .subtract(diff + 1, 'ms')\n        .toISOString(),\n      end: moment(min).subtract(1, 'ms').toISOString(),\n      keepPopoverOpen: true\n    });\n  }\n\n  get title() {\n    return this.euiI18n.lookupToken(\n      'euiQuickSelect.quickSelectTitle',\n      'Quick select'\n    );\n  }\n\n  get describedBy() {\n    return `${this.timeSelectionId} ${this.legendId}`;\n  }\n\n  /** Upstream's screen reader summary of the current selection. */\n  get description() {\n    const unit = this.args.timeOptions.timeUnitsOptions.find(\n      ({ value }) => value === this.timeUnits\n    );\n    return this.euiI18n.lookupToken(\n      'euiQuickSelect.fullDescription',\n      'Currently set to {timeTense} {timeValue} {timeUnit}.',\n      {\n        timeTense: this.timeTense,\n        timeValue: this.timeValue,\n        timeUnit: unit ? unit.text : ''\n      }\n    );\n  }\n\n  /**\n   * The previous/next buttons sit above the inputs, next to the title\n   * (upstream's `css` on their EuiFlexGroup).\n   */\n  get timeWindowButtonsCss(): EuiCss {\n    return euiQuickSelectStyles.timeWindowButtons;\n  }\n\n  @action\n  onTimeValueInput(event: Event) {\n    // upstream: a non-number value becomes 0, which disables \"Apply\"\n    const value = parseInt((event.target as HTMLInputElement).value, 10);\n    this.timeValue = isNaN(value) ? 0 : value;\n  }\n\n  /** Enter in any of the fields applies the quick selection (upstream). */\n  @action\n  onKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter') this.applyQuickSelect();\n  }\n\n  <template>\n    <EuiQuickSelectPanel\n      @tagName=\"fieldset\"\n      @title={{this.title}}\n      @titleId={{this.legendId}}\n      @css={{this.panelCss}}\n      aria-describedby={{this.timeSelectionId}}\n    >\n      <EuiFlexGroup\n        class=\"euiQuickSelect__timeWindowButtons\"\n        @alignItems=\"center\"\n        @gutterSize=\"s\"\n        @responsive={{false}}\n        @css={{this.timeWindowButtonsCss}}\n      >\n        <EuiFlexItem @grow={{false}}>\n          <EuiI18n\n            @token=\"euiQuickSelect.previousLabel\"\n            @default=\"Previous time window\"\n            as |Token|\n          >\n            <Token as |previousLabel|>\n              <EuiToolTip\n                @content={{previousLabel}}\n                @disableScreenReaderOutput={{true}}\n              >\n                <EuiButtonIcon\n                  aria-label={{previousLabel}}\n                  @iconType=\"chevronSingleLeft\"\n                  {{on \"click\" this.stepBackward}}\n                />\n              </EuiToolTip>\n            </Token>\n          </EuiI18n>\n        </EuiFlexItem>\n        <EuiFlexItem @grow={{false}}>\n          <EuiI18n\n            @token=\"euiQuickSelect.nextLabel\"\n            @default=\"Next time window\"\n            as |Token|\n          >\n            <Token as |nextLabel|>\n              <EuiToolTip\n                @content={{nextLabel}}\n                @disableScreenReaderOutput={{true}}\n              >\n                <EuiButtonIcon\n                  aria-label={{nextLabel}}\n                  @iconType=\"chevronSingleRight\"\n                  {{on \"click\" this.stepForward}}\n                />\n              </EuiToolTip>\n            </Token>\n          </EuiI18n>\n        </EuiFlexItem>\n      </EuiFlexGroup>\n      <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n        <EuiFlexItem>\n          <EuiI18n\n            @token=\"euiQuickSelect.tenseLabel\"\n            @default=\"Time tense\"\n            as |Token|\n          >\n            <Token as |tenseLabel|>\n              <EuiSelect\n                @compressed={{true}}\n                aria-label={{tenseLabel}}\n                aria-describedby={{this.describedBy}}\n                @value={{this.timeTense}}\n                @options={{@timeOptions.timeTenseOptions}}\n                {{on \"change\" (pick \"target.value\" (set this \"timeTense\"))}}\n                {{on \"keydown\" this.onKeyDown}}\n              />\n            </Token>\n          </EuiI18n>\n        </EuiFlexItem>\n        <EuiFlexItem>\n          <EuiI18n\n            @token=\"euiQuickSelect.valueLabel\"\n            @default=\"Time value\"\n            as |Token|\n          >\n            <Token as |valueLabel|>\n              <EuiFieldNumber\n                @compressed={{true}}\n                aria-label={{valueLabel}}\n                aria-describedby={{this.describedBy}}\n                @value={{this.timeValue}}\n                {{on \"input\" this.onTimeValueInput}}\n                {{on \"keydown\" this.onKeyDown}}\n              />\n            </Token>\n          </EuiI18n>\n        </EuiFlexItem>\n        <EuiFlexItem>\n          <EuiI18n\n            @token=\"euiQuickSelect.unitLabel\"\n            @default=\"Time unit\"\n            as |Token|\n          >\n            <Token as |unitLabel|>\n              <EuiSelect\n                @compressed={{true}}\n                aria-label={{unitLabel}}\n                aria-describedby={{this.describedBy}}\n                @value={{this.timeUnits}}\n                @options={{@timeOptions.timeUnitsOptions}}\n                {{on \"change\" (pick \"target.value\" (set this \"timeUnits\"))}}\n                {{on \"keydown\" this.onKeyDown}}\n              />\n            </Token>\n          </EuiI18n>\n        </EuiFlexItem>\n        <EuiFlexItem @grow={{false}}>\n          <EuiButton\n            class=\"euiQuickSelect__applyButton\"\n            aria-describedby={{this.describedBy}}\n            data-test-subj=\"superDatePickerQuickSelectApplyButton\"\n            @size=\"s\"\n            @disabled={{lte this.timeValue 0}}\n            {{on \"click\" this.applyQuickSelect}}\n          >\n            <EuiI18n\n              @token=\"euiQuickSelect.applyButton\"\n              @default=\"Apply\"\n              as |Token|\n            >\n              <Token as |value|>\n                {{value}}\n              </Token>\n            </EuiI18n>\n          </EuiButton>\n        </EuiFlexItem>\n      </EuiFlexGroup>\n      <EuiScreenReaderOnly>\n        <p id={{this.timeSelectionId}}>{{this.description}}</p>\n      </EuiScreenReaderOnly>\n    </EuiQuickSelectPanel>\n  </template>\n}\n"],"names":["EuiQuickSelect","Component","g","prototype","service","i","legendId","randomId","timeSelectionId","panelCss","euiQuickSelectStyles","panel","tracked","constructor","owner","args","timeTense","timeTenseDefault","timeUnits","timeUnitsDefault","timeValue","timeValueDefault","parseTimeParts","start","end","prevQuickSelect","getBounds","startMoment","dateMath","parse","endMoment","roundUp","min","isValid","moment","subtract","max","applyQuickSelect","NEXT","applyTime","n","action","stepForward","diff","add","toISOString","keepPopoverOpen","stepBackward","title","euiI18n","lookupToken","describedBy","description","unit","timeOptions","timeUnitsOptions","find","value","timeUnit","text","timeWindowButtonsCss","timeWindowButtons","onTimeValueInput","event","parseInt","target","isNaN","onKeyDown","key","setComponentTemplate","precompileTemplate","strictMode","scope","EuiQuickSelectPanel","EuiFlexGroup","EuiFlexItem","EuiI18n","EuiToolTip","EuiButtonIcon","on","EuiSelect","pick","set","EuiFieldNumber","EuiButton","lte","EuiScreenReaderOnly"],"mappings":"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"}

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

@@ -1,29 +1,51 @@
+import Component from '@glimmer/component';
 import { hash, fn } from '@ember/helper';
 import { on } from '@ember/modifier';
-import randomId from '../../../-private/random-id.js';
+import { service } from '@ember/service';
+import { randomId } from '../../../-private/random-id.js';
 import EuiFlexGrid from '../../eui-flex-grid.js';
 import EuiFlexItem from '../../eui-flex-item.js';
-import EuiI18nComponent from '../../eui-i18n.js';
 import EuiLink from '../../eui-link.js';
-import EuiTitle from '../../eui-title.js';
+import { prettyDuration } from '../utils/pretty-duration.js';
+import EuiQuickSelectPanel from './eui-quick-select-panel.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import templateOnly from '@ember/component/template-only';
+import { g, i } from 'decorator-transforms/runtime-esm';
 
-const EuiRecentlyUsed = setComponentTemplate(precompileTemplate("{{#let (randomId) as |legendId|}}\n  <fieldset>\n    <EuiTitle id={{legendId}} @tagName=\"legend\" @size=\"xxxs\">\n      <EuiI18n @token=\"euiRecentlyUsed.legend\" @default=\"Recently used date ranges\" as |Token|>\n        <Token as |value|>\n          {{value}}\n        </Token>\n      </EuiI18n>\n    </EuiTitle>\n    <div class=\"euiQuickSelectPopover__section\">\n      <EuiFlexGrid aria-labelledby={{legendId}} @gutterSize=\"s\" @columns={{2}} @direction=\"column\" @responsive={{false}} @tagName=\"ul\">\n        {{#each @recentlyUsedRanges as |range|}}\n          <EuiFlexItem class=\"euiQuickSelectPopover__sectionItem\" @tagName=\"li\">\n            <EuiLink {{on \"click\" (fn @applyTime (hash start=range.start end=range.end))}}>\n              {{range.label}}\n            </EuiLink>\n          </EuiFlexItem>\n        {{/each}}\n      </EuiFlexGrid>\n    </div>\n  </fieldset>\n{{/let}}", {
-  strictMode: true,
-  scope: () => ({
-    randomId,
-    EuiTitle,
-    EuiI18n: EuiI18nComponent,
-    EuiFlexGrid,
-    EuiFlexItem,
-    EuiLink,
-    on,
-    fn,
-    hash
-  })
-}), templateOnly());
+class EuiRecentlyUsed extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  legendId = randomId();
+  get title() {
+    return this.euiI18n.lookupToken('euiRecentlyUsed.legend', 'Recently used date ranges');
+  }
+  get ranges() {
+    return this.args.recentlyUsedRanges ?? [];
+  }
+  /** Upstream renders each range as a `PrettyDuration`. */
+  label = range => prettyDuration(this.euiI18n, {
+    timeFrom: range.start,
+    timeTo: range.end,
+    quickRanges: this.args.commonlyUsedRanges,
+    dateFormat: this.args.dateFormat ?? 'MMM D, YYYY @ HH:mm:ss.SSS'
+  });
+  static {
+    setComponentTemplate(precompileTemplate("{{!-- upstream renders nothing without ranges --}}\n{{#if this.ranges.length}}\n  <EuiQuickSelectPanel @tagName=\"fieldset\" @title={{this.title}} @titleId={{this.legendId}}>\n    <EuiFlexGrid aria-labelledby={{this.legendId}} @gutterSize=\"s\" @columns={{1}} @direction=\"column\" @responsive={{false}} @tagName=\"ul\">\n      {{#each this.ranges as |range|}}\n        <EuiFlexItem class=\"euiQuickSelectPopover__sectionItem\" @tagName=\"li\">\n          <EuiLink {{on \"click\" (fn @applyTime (hash start=range.start end=range.end))}}>\n            {{this.label range}}\n          </EuiLink>\n        </EuiFlexItem>\n      {{/each}}\n    </EuiFlexGrid>\n  </EuiQuickSelectPanel>\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        EuiQuickSelectPanel,
+        EuiFlexGrid,
+        EuiFlexItem,
+        EuiLink,
+        on,
+        fn,
+        hash
+      })
+    }), this);
+  }
+}
 
 export { EuiRecentlyUsed as default };
 //# sourceMappingURL=eui-recently-used.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"eui-recently-used.js","sources":["../../../../src/components/eui-super-date-picker/eui-quick-select-popover/eui-recently-used.gts"],"sourcesContent":["import { fn, hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport randomId from '../../../-private/random-id.ts';\nimport EuiFlexGrid from '../../eui-flex-grid.gts';\nimport EuiFlexItem from '../../eui-flex-item.gts';\nimport EuiI18n from '../../eui-i18n.gts';\nimport EuiLink from '../../eui-link.gts';\nimport EuiTitle from '../../eui-title.gts';\n\nimport type { DurationRange } from '../types/global';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** @private The \"Recently used\" list of the quick select popover. */\nexport interface EuiRecentlyUsedSignature {\n  Args: {\n    /** Ranges listed as \"Recently used\". */\n    recentlyUsedRanges?: DurationRange[];\n    /** Applies a new `{ start, end }` range. */\n    applyTime: (args: { start: string; end: string }) => void;\n  };\n}\n\nconst EuiRecentlyUsed: TemplateOnlyComponent<EuiRecentlyUsedSignature> =\n  <template>\n    {{#let (randomId) as |legendId|}}\n      <fieldset>\n        <EuiTitle id={{legendId}} @tagName=\"legend\" @size=\"xxxs\">\n          <EuiI18n\n            @token=\"euiRecentlyUsed.legend\"\n            @default=\"Recently used date ranges\"\n            as |Token|\n          >\n            <Token as |value|>\n              {{value}}\n            </Token>\n          </EuiI18n>\n        </EuiTitle>\n        <div class=\"euiQuickSelectPopover__section\">\n          <EuiFlexGrid\n            aria-labelledby={{legendId}}\n            @gutterSize=\"s\"\n            @columns={{2}}\n            @direction=\"column\"\n            @responsive={{false}}\n            @tagName=\"ul\"\n          >\n            {{#each @recentlyUsedRanges as |range|}}\n              <EuiFlexItem\n                class=\"euiQuickSelectPopover__sectionItem\"\n                @tagName=\"li\"\n              >\n                <EuiLink\n                  {{on\n                    \"click\"\n                    (fn @applyTime (hash start=range.start end=range.end))\n                  }}\n                >\n                  {{range.label}}\n                </EuiLink>\n              </EuiFlexItem>\n            {{/each}}\n          </EuiFlexGrid>\n        </div>\n      </fieldset>\n    {{/let}}\n  </template>;\n\nexport default EuiRecentlyUsed;\n"],"names":["EuiRecentlyUsed","setComponentTemplate","precompileTemplate","strictMode","scope","randomId","EuiTitle","EuiI18n","EuiFlexGrid","EuiFlexItem","EuiLink","on","fn","hash","templateOnly"],"mappings":";;;;;;;;;;;;AAuBA,MAAMA,eAAuC,GAAAC,oBAAA,CAC3CC,kBAAA,CAAA,w4BAAA,EA0CA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,QAAA;IAAAC,QAAA;aAAAC,gBAAA;IAAAC,WAAA;IAAAC,WAAA;IAAAC,OAAA;IAAAC,EAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"eui-recently-used.js","sources":["../../../../src/components/eui-super-date-picker/eui-quick-select-popover/eui-recently-used.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { fn, hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { service } from '@ember/service';\n\nimport { randomId } from '../../../-private/random-id.ts';\nimport EuiFlexGrid from '../../eui-flex-grid.gts';\nimport EuiFlexItem from '../../eui-flex-item.gts';\nimport EuiLink from '../../eui-link.gts';\nimport { prettyDuration } from '../utils/pretty-duration.ts';\nimport EuiQuickSelectPanel from './eui-quick-select-panel.gts';\n\nimport type EuiI18n from '../../../services/eui-i18n';\nimport type { DurationRange } from '../types/global';\n\n/** @private The \"Recently used\" list of the quick select popover. */\nexport interface EuiRecentlyUsedSignature {\n  Args: {\n    /** Ranges listed as \"Recently used\". */\n    recentlyUsedRanges?: DurationRange[];\n    /** Applies a new `{ start, end }` range. */\n    applyTime: (args: { start: string; end: string }) => void;\n    /** Commonly used ranges: a matching range shows its label. */\n    commonlyUsedRanges?: DurationRange[];\n    /** moment format of absolute dates. */\n    dateFormat?: string;\n  };\n}\n\nexport default class EuiRecentlyUsed extends Component<EuiRecentlyUsedSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  legendId = randomId();\n\n  get title() {\n    return this.euiI18n.lookupToken(\n      'euiRecentlyUsed.legend',\n      'Recently used date ranges'\n    );\n  }\n\n  get ranges() {\n    return this.args.recentlyUsedRanges ?? [];\n  }\n\n  /** Upstream renders each range as a `PrettyDuration`. */\n  label = (range: DurationRange) =>\n    prettyDuration(this.euiI18n, {\n      timeFrom: range.start,\n      timeTo: range.end,\n      quickRanges: this.args.commonlyUsedRanges,\n      dateFormat: this.args.dateFormat ?? 'MMM D, YYYY @ HH:mm:ss.SSS'\n    });\n\n  <template>\n    {{! upstream renders nothing without ranges }}\n    {{#if this.ranges.length}}\n      <EuiQuickSelectPanel\n        @tagName=\"fieldset\"\n        @title={{this.title}}\n        @titleId={{this.legendId}}\n      >\n        <EuiFlexGrid\n          aria-labelledby={{this.legendId}}\n          @gutterSize=\"s\"\n          @columns={{1}}\n          @direction=\"column\"\n          @responsive={{false}}\n          @tagName=\"ul\"\n        >\n          {{#each this.ranges as |range|}}\n            <EuiFlexItem\n              class=\"euiQuickSelectPopover__sectionItem\"\n              @tagName=\"li\"\n            >\n              <EuiLink\n                {{on\n                  \"click\"\n                  (fn @applyTime (hash start=range.start end=range.end))\n                }}\n              >\n                {{this.label range}}\n              </EuiLink>\n            </EuiFlexItem>\n          {{/each}}\n        </EuiFlexGrid>\n      </EuiQuickSelectPanel>\n    {{/if}}\n  </template>\n}\n"],"names":["EuiRecentlyUsed","Component","g","prototype","service","i","legendId","randomId","title","euiI18n","lookupToken","ranges","args","recentlyUsedRanges","label","range","prettyDuration","timeFrom","start","timeTo","end","quickRanges","commonlyUsedRanges","dateFormat","setComponentTemplate","precompileTemplate","strictMode","scope","EuiQuickSelectPanel","EuiFlexGrid","EuiFlexItem","EuiLink","on","fn","hash"],"mappings":";;;;;;;;;;;;;;AA6Be,MAAMA,wBAAwBC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACpDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;EAEDC,QAAA,GAAWC,QAAA,EAAA;EAEX,IAAIC,KAAAA,GAAQ;IACV,OAAO,IAAI,CAACC,OAAO,CAACC,WAAW,CAC7B,wBAAA,EACA,2BAAA,CAAA;AAEJ,EAAA;EAEA,IAAIC,MAAAA,GAAS;AACX,IAAA,OAAO,IAAI,CAACC,IAAI,CAACC,kBAAkB,IAAI,EAAE;AAC3C,EAAA;AAEA;EACAC,QAASC,SACPC,cAAA,CAAe,IAAI,CAACP,OAAO,EAAE;IAC3BQ,QAAA,EAAUF,MAAMG,KAAK;IACrBC,MAAA,EAAQJ,MAAMK,GAAG;AACjBC,IAAAA,WAAA,EAAa,IAAI,CAACT,IAAI,CAACU,kBAAkB;AACzCC,IAAAA,UAAA,EAAY,IAAI,CAACX,IAAI,CAACW,UAAU,IAAI;AACtC,GAAA,CAAA;AAEF,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,mrBAAA,EAkCA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,mBAAA;QAAAC,WAAA;QAAAC,WAAA;QAAAC,OAAA;QAAAC,EAAA;QAAAC,EAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

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

@@ -1,23 +1,50 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { on } from '@ember/modifier';
+import { tracked, cached } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
-import set from 'ember-set-helper/helpers/set';
-import { gt, not } from 'ember-truth-helpers';
-import EuiButtonEmpty from '../eui-button-empty.js';
-import EuiHorizontalRule from '../eui-horizontal-rule.js';
-import EuiIcon from '../eui-icon.js';
+import { modifier } from 'ember-modifier';
+import { getEuiThemeContext } from '../../utils/emotion/consume.js';
+import { eA as euiQuickSelectPopoverStyles } from '../../styles.generated-SYAxYhey.js';
+import { useEuiBorealisStyles, euiClass } from '../../utils/eui/styles.js';
+import EuiFormPrepend from '../eui-form-prepend.js';
 import EuiPopoverComponent from '../eui-popover.js';
-import EuiRecentlyUsed from './eui-quick-select-popover/eui-recently-used.js';
+import EuiRefreshInterval from '../eui-refresh-interval.js';
+import EuiToolTip from '../eui-tool-tip.js';
+import { or } from 'ember-truth-helpers';
+import EuiQuickSelectPanel from './eui-quick-select-popover/eui-quick-select-panel.js';
 import EuiCommonlyUsedTimeRanges from './eui-quick-select-popover/eui-commonly-used-time-ranges.js';
 import EuiQuickSelect from './eui-quick-select-popover/eui-quick-select.js';
+import EuiRecentlyUsed from './eui-quick-select-popover/eui-recently-used.js';
 import useI18nTimeOptions from './utils/time-options.js';
-import EuiRefreshInterval from '../eui-refresh-interval.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
 import { g, i, n } from 'decorator-transforms/runtime-esm';
 
+/** Keys of `EuiQuickSelectButtonProps` that are not plain attributes. */const BUTTON_ARG_KEYS = new Set(['label', 'iconLeft', 'iconRight', 'css', 'className', 'onClick', 'aria-label', 'data-test-subj', 'children', 'isDisabled']);
+/** Upstream: each custom panel's content gets `applyTime`. */
+const CustomPanels = setComponentTemplate(precompileTemplate("{{#each @panels key=\"title\" as |panel|}}\n  <EuiQuickSelectPanel @title={{panel.title}}>\n    <panel.content @applyTime={{@applyTime}} />\n  </EuiQuickSelectPanel>\n{{/each}}", {
+  strictMode: true,
+  scope: () => ({
+    EuiQuickSelectPanel
+  })
+}), templateOnly());
+const RefreshIntervalPanel = setComponentTemplate(precompileTemplate("{{#if (or @applyRefreshInterval @onRefreshChange)}}\n  <EuiRefreshInterval @applyRefreshInterval={{@applyRefreshInterval}} @onRefreshChange={{@onRefreshChange}} @isPaused={{@isPaused}} @refreshInterval={{@refreshInterval}} @minInterval={{@minInterval}} @intervalUnits={{@intervalUnits}} />\n{{/if}}", {
+  strictMode: true,
+  scope: () => ({
+    or,
+    EuiRefreshInterval
+  })
+}), templateOnly());
+const CommonlyUsed = setComponentTemplate(precompileTemplate("{{#if @commonlyUsedRanges.length}}\n  <EuiCommonlyUsedTimeRanges @applyTime={{@applyTime}} @commonlyUsedRanges={{@commonlyUsedRanges}} />\n{{/if}}", {
+  strictMode: true,
+  scope: () => ({
+    EuiCommonlyUsedTimeRanges
+  })
+}), templateOnly());
+/** @private EuiSuperDatePicker's quick select popover. */
+
 class EuiQuickSelectPopover extends Component {
   static {
     g(this.prototype, "euiI18n", [service]);
@@ -29,6 +56,9 @@ class EuiQuickSelectPopover extends Component {
     });
   }
   #isOpen = (i(this, "isOpen"), void 0);
+  get context() {
+    return getEuiThemeContext(this);
+  }
   applyTime({
     start,
     end,
@@ -42,28 +72,87 @@ class EuiQuickSelectPopover extends Component {
       this.isOpen = false;
     }
   }
+  /** Upstream toggles the popover, then calls `buttonProps.onClick`. */
   static {
     n(this.prototype, "applyTime", [action]);
   }
+  toggle(event) {
+    this.isOpen = !this.isOpen;
+    this.args.buttonProps?.onClick?.(event);
+  }
+  static {
+    n(this.prototype, "toggle", [action]);
+  }
+  get buttonProps() {
+    return this.args.buttonProps ?? {};
+  }
+  get buttonAriaLabel() {
+    return this.buttonProps['aria-label'] ?? this.buttonLabel;
+  }
+  get buttonTestSubj() {
+    return this.buttonProps['data-test-subj'] ?? 'superDatePickerToggleQuickMenuButton';
+  }
+  get buttonIconLeft() {
+    return 'iconLeft' in this.buttonProps ? this.buttonProps.iconLeft : 'calendar';
+  }
+  get buttonIconRight() {
+    return 'iconRight' in this.buttonProps ? this.buttonProps.iconRight : 'chevronSingleDown';
+  }
+  /**
+  * The rest of `@buttonProps` (React spreads them onto the button):
+  * `on*` functions as event listeners, other values as attributes.
+  */
+  spreadButtonProps = modifier((element, [props]) => {
+    const cleanups = [];
+    for (const [key, value] of Object.entries(props ?? {})) {
+      if (BUTTON_ARG_KEYS.has(key)) continue;
+      if (/^on[A-Z]/.test(key) && typeof value === 'function') {
+        const type = key.slice(2).toLowerCase();
+        const listener = value;
+        element.addEventListener(type, listener);
+        cleanups.push(() => element.removeEventListener(type, listener));
+      } else if (value !== undefined && value !== null && value !== false) {
+        const previous = element.getAttribute(key);
+        element.setAttribute(key, value === true ? '' : String(value));
+        cleanups.push(() => previous === null ? element.removeAttribute(key) : element.setAttribute(key, previous));
+      }
+    }
+    return () => cleanups.forEach(cleanup => cleanup());
+  });
+  close() {
+    this.isOpen = false;
+  }
+  static {
+    n(this.prototype, "close", [action]);
+  }
   get timeOptions() {
     return this.args.timeOptions || useI18nTimeOptions(this.euiI18n);
   }
+  get buttonLabel() {
+    return this.euiI18n.lookupToken('euiQuickSelectPopover.buttonLabel', 'Date quick select');
+  }
+  get contentClass() {
+    const styles = useEuiBorealisStyles(this.context, euiQuickSelectPopoverStyles);
+    return `euiQuickSelectPopover ${euiClass(this.context, {
+      boxSizing: 'border-box'
+    }, styles.euiQuickSelectPopover)}`;
+  }
+  static {
+    n(this.prototype, "contentClass", [cached]);
+  }
   static {
-    setComponentTemplate(precompileTemplate("<EuiPopover @isOpen={{this.isOpen}} @closePopover={{set this \"isOpen\" false}} @anchorPosition=\"downLeft\" @anchorClassName=\"euiQuickSelectPopover__anchor\">\n  <:button>\n    <EuiButtonEmpty class=\"euiFormControlLayout__prepend\" @textClasses=\"euiQuickSelectPopover__buttonText\" @size=\"xs\" @iconType=\"arrowDown\" @iconSide=\"right\" @isDisabled={{@isDisabled}} {{on \"click\" (set this \"isOpen\" (not this.isOpen))}}>\n      <EuiIcon @type=\"calendar\" />\n    </EuiButtonEmpty>\n  </:button>\n\n  <:content>\n    <div class=\"euiQuickSelectPopover__content\">\n      <EuiQuickSelect @applyTime={{this.applyTime}} @start={{@start}} @end={{@end}} @timeOptions={{this.timeOptions}} />\n\n      {{#if (gt @commonlyUsedRanges.length 0)}}\n        <EuiHorizontalRule @margin=\"s\" />\n        <EuiCommonlyUsedTimeRanges @applyTime={{this.applyTime}} @commonlyUsedRanges={{@commonlyUsedRanges}} />\n      {{/if}}\n\n      {{#if (gt @recentlyUsedRanges.length 0)}}\n        <EuiHorizontalRule @margin=\"s\" />\n        <EuiRecentlyUsed @applyTime={{this.applyTime}} @recentlyUsedRanges={{@recentlyUsedRanges}} />\n      {{/if}}\n\n      {{#if @applyRefreshInterval}}\n        <EuiHorizontalRule @margin=\"s\" />\n        <EuiRefreshInterval @applyRefreshInterval={{@applyRefreshInterval}} @isPaused={{@isPaused}} @refreshInterval={{@refreshInterval}} />\n      {{/if}}\n\n    </div>\n  </:content>\n</EuiPopover>", {
+    setComponentTemplate(precompileTemplate("<EuiPopover @isOpen={{this.isOpen}} @closePopover={{this.close}} @anchorPosition=\"downLeft\" @anchorClassName=\"euiQuickSelectPopover__anchor\">\n  <:button>\n    <EuiToolTip @content={{this.buttonLabel}} @disableScreenReaderOutput={{true}}>\n      <EuiFormPrepend @element=\"button\" @compressed={{@compressed}} @isDisabled={{@isDisabled}} @iconLeft={{this.buttonIconLeft}} @iconRight={{this.buttonIconRight}} @label={{this.buttonProps.label}} @css={{this.buttonProps.css}} @onClick={{this.toggle}} class=\"euiQuickSelectPopover__button {{this.buttonProps.className}}\" aria-label={{this.buttonAriaLabel}} data-test-subj={{this.buttonTestSubj}} {{this.spreadButtonProps @buttonProps}} />\n    </EuiToolTip>\n  </:button>\n\n  <:content>\n    <div class={{this.contentClass}} data-test-subj=\"superDatePickerQuickMenu\">\n      {{#let (component EuiQuickSelect applyTime=this.applyTime start=@start end=@end timeOptions=this.timeOptions) (component CommonlyUsed applyTime=this.applyTime commonlyUsedRanges=@commonlyUsedRanges) (component EuiRecentlyUsed applyTime=this.applyTime recentlyUsedRanges=@recentlyUsedRanges commonlyUsedRanges=@commonlyUsedRanges dateFormat=@dateFormat) (component RefreshIntervalPanel applyRefreshInterval=@applyRefreshInterval onRefreshChange=@onRefreshChange isPaused=@isPaused refreshInterval=@refreshInterval minInterval=@refreshMinInterval intervalUnits=@intervalUnits) (component CustomPanels panels=@customQuickSelectPanels applyTime=this.applyTime) as |QuickSelect CommonlyUsedRanges RecentlyUsedRanges RefreshInterval CustomQuickSelectPanels|}}\n        {{#if @hasCustomQuickSelectRender}}\n          {{yield (hash quickSelect=QuickSelect commonlyUsedRanges=CommonlyUsedRanges recentlyUsedRanges=RecentlyUsedRanges refreshInterval=RefreshInterval customQuickSelectPanels=CustomQuickSelectPanels) to=\"customQuickSelectRender\"}}\n        {{else}}\n          <QuickSelect />\n          <CommonlyUsedRanges />\n          <RecentlyUsedRanges />\n          <RefreshInterval />\n          <CustomQuickSelectPanels />\n        {{/if}}\n      {{/let}}\n    </div>\n  </:content>\n</EuiPopover>", {
       strictMode: true,
       scope: () => ({
         EuiPopover: EuiPopoverComponent,
-        set,
-        EuiButtonEmpty,
-        on,
-        not,
-        EuiIcon,
+        EuiToolTip,
+        EuiFormPrepend,
         EuiQuickSelect,
-        gt,
-        EuiHorizontalRule,
-        EuiCommonlyUsedTimeRanges,
+        CommonlyUsed,
         EuiRecentlyUsed,
-        EuiRefreshInterval
+        RefreshIntervalPanel,
+        CustomPanels,
+        hash
       })
     }), this);
   }