@ember-eui/core 15.0.0 → 16.0.0

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

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { tracked, cached } from '@glimmer/tracking';
 import { helper } from '@ember/component/helper';
 import { fn, concat } from '@ember/helper';
 import { on } from '@ember/modifier';
@@ -7,10 +7,14 @@ import { action } from '@ember/object';
 import pick from '@nullvoxpopuli/ember-composable-helpers/helpers/pick';
 import { eq, not, and } from 'ember-truth-helpers';
 import moment from 'moment';
-import EuiFlexItem from '../../eui-flex-item.js';
+import { getEuiThemeContext } from '../../../utils/emotion/consume.js';
+import { euiReactDatePickerStyles } from '../../../utils/eui/date-pickers.js';
+import { eX as euiDatePickerStyles } from '../../../styles.generated-SYAxYhey.js';
+import { useEuiBorealisStyles, euiClass } from '../../../utils/eui/styles.js';
+import EuiButtonIcon from '../../eui-button-icon.js';
 import EuiFormControlLayout from '../../eui-form-control-layout.js';
-import EuiIcon from '../../eui-icon.js';
 import EuiSelect from '../../eui-select.js';
+import isOutOfBounds from '../utils/date-utils.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import { g, i, n } from 'decorator-transforms/runtime-esm';
@@ -87,6 +91,42 @@ class DatetimePicker extends Component {
     this.offset = this.monthMoment.clone().startOf('month').day();
     this.today = moment();
   }
+  get context() {
+    return getEuiThemeContext(this);
+  }
+  /**
+  * Upstream `EuiDatePicker inline shadow={false}`: a block wrapper whose
+  * form control layout loses its frame and stacks the calendar.
+  */
+  get rootClass() {
+    const styles = useEuiBorealisStyles(this.context, euiDatePickerStyles);
+    return euiClass(this.context, {
+      boxSizing: 'border-box'
+    }, styles.euiDatePicker, styles.inline.inline, styles.inline.noShadow);
+  }
+  /** Upstream's react-datepicker styles, applied to the same markup. */
+  static {
+    n(this.prototype, "rootClass", [cached]);
+  }
+  get calendarClass() {
+    const styles = useEuiBorealisStyles(this.context, euiReactDatePickerStyles);
+    return euiClass(this.context,
+    // React's global reset: no list markers/spacing, border-box
+    {
+      boxSizing: 'border-box',
+      '& :where(*, *::before, *::after)': {
+        boxSizing: 'border-box'
+      },
+      '& :where(ul)': {
+        margin: 0,
+        padding: 0,
+        listStyle: 'none'
+      }
+    }, styles.euiReactDatePicker);
+  }
+  static {
+    n(this.prototype, "calendarClass", [cached]);
+  }
   get monthNames() {
     return moment.months().map((month, i) => {
       return {
@@ -170,10 +210,24 @@ class DatetimePicker extends Component {
     this.selectedDate = moment(this.momentConfig);
     this.args.onChange(this.selectedDate, e);
   }
+  /** react-datepicker disables the days outside `minDate`..`maxDate`. */
   static {
     n(this.prototype, "selectTime", [action]);
   }
+  isDayDisabled = day => {
+    const {
+      minDate,
+      maxDate
+    } = this.args;
+    if (!minDate && !maxDate) return false;
+    const date = moment([day.year ?? this.year, day.month ?? this.month, day.day]);
+    return Boolean(isOutOfBounds(date, {
+      minDate,
+      maxDate
+    }));
+  };
   selectDate(day, e) {
+    if (this.isDayDisabled(day)) return;
     // Only outside days will have year/month
     this.momentConfig.year = day.year || this.year;
     this.momentConfig.month = day.month || this.month;
@@ -218,13 +272,12 @@ class DatetimePicker extends Component {
     n(this.prototype, "decreaseMonth", [action]);
   }
   static {
-    setComponentTemplate(precompileTemplate("<div class=\"euiDatePicker euiDatePicker--inline\">\n  <EuiFormControlLayout>\n    <div class=\"react-datepicker\">\n      <button type=\"button\" class=\"react-datepicker__navigation react-datepicker__navigation--previous\" aria-label=\"Previous month\" {{on \"click\" this.decreaseMonth}}>\n        <EuiIcon @iconClasses=\"euiButtonIcon__icon\" @type=\"arrowLeft\" />\n      </button>\n      <button type=\"button\" class=\"react-datepicker__navigation react-datepicker__navigation--next\" aria-label=\"Next month\" {{on \"click\" this.increaseMonth}}>\n        <EuiIcon @iconClasses=\"euiButtonIcon__icon {{@iconClasses}}\" @type=\"arrowRight\" />\n      </button>\n      <div class=\"react-datepicker__month-container\">\n        <div class=\"react-datepicker__header\">\n          <div class=\"react-datepicker__header__dropdown react-datepicker__header__dropdown--scroll\">\n            <div class=\"react-datepicker__month-dropdown-container react-datepicker__month-dropdown-container--scroll\">\n              {{!--template-lint-disable--}}\n              <div class=\"react-datepicker__month-read-view\" style=\"padding: 0;\">\n                <EuiFlexItem @grow={{1}}>\n                  <EuiSelect @compressed={{true}} @value={{this.month}} @options={{this.monthNames}} {{on \"change\" (pick \"target.value\" this.setMonth)}} />\n                </EuiFlexItem>\n              </div>\n            </div>\n            <div class=\"react-datepicker__year-dropdown-container react-datepicker__year-dropdown-container--scroll\">\n              {{!--template-lint-disable--}}\n              <div class=\"react-datepicker__year-read-view\" style=\"padding: 0;\">\n                <EuiFlexItem @grow={{1}}>\n                  <EuiSelect @compressed={{true}} @value={{this.year}} @options={{this.years}} {{on \"change\" (pick \"target.value\" this.setYear)}} />\n                </EuiFlexItem>\n              </div>\n            </div>\n          </div>\n          <div class=\"react-datepicker__day-names\">\n            <div class=\"react-datepicker__day-name\">Su</div>\n            <div class=\"react-datepicker__day-name\">Mo</div>\n            <div class=\"react-datepicker__day-name\">Tu</div>\n            <div class=\"react-datepicker__day-name\">We</div>\n            <div class=\"react-datepicker__day-name\">Th</div>\n            <div class=\"react-datepicker__day-name\">Fr</div>\n            <div class=\"react-datepicker__day-name\">Sa</div>\n          </div>\n        </div>\n\n        <div class=\"react-datepicker__month react-datepicker__month--accessible\">\n          {{#each this.days as |days|}}\n            <div class=\"react-datepicker__week\">\n              {{#each days as |day|}}\n                <div role=\"button\" class={{concat \"react-datepicker__day\" (if (and (not day.isOutside) (isSameDayHelper this.year this.month day.day this.selectedDate)) \" react-datepicker__day--selected\") (if (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)}}>\n                  <div class=\"react-datepicker__day-text\">{{day.day}}</div>\n                </div>\n              {{/each}}\n            </div>\n          {{/each}}\n        </div>\n      </div>\n\n      <div class=\"react-datepicker__time-container\">\n        <div class=\"react-datepicker__time\">\n          <div class=\"react-datepicker__time-box react-datepicker__time-box--accessible\">\n            <ul class=\"react-datepicker__time-list\">\n              {{#each this.times as |time|}}\n                <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)}}>\n                  {{time}}\n                </li>\n              {{/each}}\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </EuiFormControlLayout>\n</div>", {
+    setComponentTemplate(precompileTemplate("<div class=\"euiDatePicker {{this.rootClass}}\">\n  <EuiFormControlLayout>\n    <div class=\"react-datepicker {{this.calendarClass}}\">\n      <EuiButtonIcon class=\"react-datepicker__navigation react-datepicker__navigation--previous\" aria-label=\"Previous month\" @iconType=\"sortLeft\" @size=\"s\" @color=\"text\" {{on \"click\" this.decreaseMonth}} />\n      <EuiButtonIcon class=\"react-datepicker__navigation react-datepicker__navigation--next\" aria-label=\"Next month\" @iconType=\"sortRight\" @size=\"s\" @color=\"text\" {{on \"click\" this.increaseMonth}} />\n      <div class=\"react-datepicker__month-container\">\n        <div class=\"react-datepicker__header\">\n          <div class=\"react-datepicker__header__dropdown react-datepicker__header__dropdown--scroll\">\n            <div class=\"react-datepicker__month-dropdown-container react-datepicker__month-dropdown-container--scroll\">\n              <EuiSelect @compressed={{true}} @fullWidth={{true}} aria-label=\"Month\" @value={{this.month}} @options={{this.monthNames}} {{on \"change\" (pick \"target.value\" this.setMonth)}} />\n            </div>\n            <div class=\"react-datepicker__year-dropdown-container react-datepicker__year-dropdown-container--scroll\">\n              <EuiSelect @compressed={{true}} @fullWidth={{true}} aria-label=\"Year\" @value={{this.year}} @options={{this.years}} {{on \"change\" (pick \"target.value\" this.setYear)}} />\n            </div>\n          </div>\n          <div class=\"react-datepicker__day-names\">\n            <div class=\"react-datepicker__day-name\">Su</div>\n            <div class=\"react-datepicker__day-name\">Mo</div>\n            <div class=\"react-datepicker__day-name\">Tu</div>\n            <div class=\"react-datepicker__day-name\">We</div>\n            <div class=\"react-datepicker__day-name\">Th</div>\n            <div class=\"react-datepicker__day-name\">Fr</div>\n            <div class=\"react-datepicker__day-name\">Sa</div>\n          </div>\n        </div>\n\n        <div class=\"react-datepicker__month react-datepicker__month--accessible\">\n          {{#each this.days as |days|}}\n            <div class=\"react-datepicker__week\">\n              {{#each days as |day|}}\n                <div role=\"button\" class={{concat \"react-datepicker__day\" (if (and (not day.isOutside) (isSameDayHelper this.year this.month day.day this.selectedDate)) \" react-datepicker__day--selected\") (if (isSameDayHelper this.year this.month day.day this.today) \" react-datepicker__day--today\") (if day.isOutside \" react-datepicker__day--outside-month\") (if (this.isDayDisabled day) \" react-datepicker__day--disabled\")}} aria-disabled={{if (this.isDayDisabled day) \"true\"}} {{on \"click\" (fn this.selectDate day)}}>\n                  <div class=\"react-datepicker__day-text\">{{day.day}}</div>\n                </div>\n              {{/each}}\n            </div>\n          {{/each}}\n        </div>\n      </div>\n\n      <div class=\"react-datepicker__time-container\">\n        <div class=\"react-datepicker__time\">\n          <div class=\"react-datepicker__time-box react-datepicker__time-box--accessible\">\n            <ul class=\"react-datepicker__time-list\">\n              {{#each this.times as |time|}}\n                <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)}}>\n                  {{time}}\n                </li>\n              {{/each}}\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </EuiFormControlLayout>\n</div>", {
       strictMode: true,
       scope: () => ({
         EuiFormControlLayout,
+        EuiButtonIcon,
         on,
-        EuiIcon,
-        EuiFlexItem,
         EuiSelect,
         pick,
         concat,

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

@@ -1 +1 @@
-{"version":3,"file":"datetime-picker.js","sources":["../../../../src/components/eui-super-date-picker/date-popover/datetime-picker.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { helper } from '@ember/component/helper';\nimport { concat, fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport type Owner from '@ember/owner';\n\nimport pick from '@nullvoxpopuli/ember-composable-helpers/helpers/pick';\nimport { and, eq, not } from 'ember-truth-helpers';\nimport moment from 'moment';\n\nimport EuiFlexItem from '../../eui-flex-item.gts';\nimport EuiFormControlLayout from '../../eui-form-control-layout.gts';\nimport EuiIcon from '../../eui-icon.gts';\nimport EuiSelect from '../../eui-select.gts';\n\nconst isSameDayHelper = helper(function ([year, month, day, selectedDate]: [\n  number,\n  number,\n  number,\n  moment.Moment | undefined\n]) {\n  if (!selectedDate) {\n    return false;\n  }\n\n  return (\n    selectedDate.year() === year &&\n    selectedDate.month() === month &&\n    selectedDate.date() === day\n  );\n});\n\ninterface DatetimePickerArgs {\n  /** The selected date. */\n  selected?: moment.Moment | null;\n  /** Called with the new value. */\n  onChange: (value: string | Date | moment.Moment, e: Event) => void;\n  /** Classes for the icon. */\n  iconClasses?: string;\n  /** moment format of absolute dates. */\n  dateFormat?: string;\n}\n\ninterface Day {\n  day: number;\n  month?: number;\n  year?: number;\n  isOutside?: boolean;\n}\n\n/** @private The calendar and time list of the \"Absolute\" tab. */\ninterface DatetimePickerSignature {\n  Args: DatetimePickerArgs;\n}\n\nexport default class DatetimePicker extends Component<DatetimePickerSignature> {\n  @tracked month: number = 0;\n  @tracked year: number = 0;\n  @tracked monthMoment: moment.Moment;\n  // Used to style the days outside of the current month\n  @tracked offset: number = 0;\n  @tracked selectedDate?: moment.Moment;\n  @tracked selectedTime?: string;\n  @tracked today: moment.Moment;\n\n  momentConfig: {\n    year: number;\n    month: number;\n    day: number;\n    hour: number;\n    minute: number;\n    second: number;\n    millisecond: number;\n  };\n\n  constructor(owner: Owner, args: DatetimePickerArgs) {\n    super(owner, args);\n\n    if (this.args.selected) {\n      this.monthMoment = this.args.selected;\n      this.selectedDate = this.args.selected;\n    } else {\n      this.monthMoment = moment([this.year, this.month]);\n    }\n\n    this.momentConfig = {\n      year: this.monthMoment.year(),\n      month: this.monthMoment.month(),\n      day: this.monthMoment.date(),\n      hour: this.monthMoment.hour(),\n      minute: this.monthMoment.minute(),\n      second: 0,\n      millisecond: 0\n    };\n\n    this.month = this.momentConfig.month;\n    this.year = this.momentConfig.year;\n\n    const hour = this.momentConfig.hour;\n    const minute = this.momentConfig.minute;\n    const hourStr = hour < 10 ? `0${hour}` : hour;\n    const minuteStr = minute < 10 ? `0${minute}` : minute;\n\n    this.selectedTime = `${hourStr}:${minuteStr}`;\n\n    this.offset = this.monthMoment.clone().startOf('month').day();\n\n    this.today = moment();\n  }\n\n  get monthNames() {\n    return moment.months().map((month, i) => {\n      return {\n        text: month,\n        value: i\n      };\n    });\n  }\n\n  get years() {\n    return Array.from(Array(15).keys()).map((_, i) => {\n      // Create a list of years +/- 7 from the current year\n      const year = this.year - 7 + i;\n\n      return {\n        text: year,\n        value: year\n      };\n    });\n  }\n\n  get times() {\n    const timesArray = [];\n\n    // Create entries every 30 minutes\n    for (let i = 0; i < 24; i++) {\n      const hour = i < 10 ? `0${i}` : i;\n\n      timesArray.push(`${hour}:00`, `${hour}:30`);\n    }\n\n    return timesArray;\n  }\n\n  get days() {\n    // Used for showing days outside of the current month\n    // const prevMonth = moment([this.year, this.month - 1]);\n    const prevMonth = this.monthMoment.clone().subtract(1, 'month');\n    const nextMonth = this.monthMoment.clone().add(1, 'month');\n    const offset = this.offset;\n    const daysInMonth = this.monthMoment.daysInMonth();\n    const daysInPrevMonth = prevMonth.daysInMonth();\n\n    const daysArray = [];\n\n    for (let i = 0; i < daysInMonth; i++) {\n      daysArray[i] = {\n        day: i + 1\n      };\n    }\n\n    // Fill the previous and next month days\n    for (let i = 0, d = daysInPrevMonth; i < offset; i++, d--) {\n      daysArray.unshift({\n        day: d,\n        month: prevMonth.month(),\n        year: prevMonth.year(),\n        isOutside: true\n      });\n    }\n\n    // All months fit within 6 weeks (42 days)\n    for (let d = 1, i = daysInMonth + offset; i < 42; d++, i++) {\n      daysArray.push({\n        day: d,\n        month: nextMonth.month(),\n        year: nextMonth.year(),\n        isOutside: true\n      });\n    }\n\n    // All months fit within 6 weeks (42 days)\n    // but depending on the starting day, one week may not be needed\n    const daysMatrix = [];\n    const weeks = daysInMonth + offset > 35 ? 6 : 5;\n\n    for (let i = 0; i < weeks; i++) {\n      daysMatrix[i] = daysArray.slice(i * 7, i * 7 + 7);\n    }\n\n    return daysMatrix;\n  }\n\n  updateDate() {\n    this.year = this.monthMoment.year();\n    this.month = this.monthMoment.month();\n    this.offset = this.monthMoment.clone().startOf('month').day();\n  }\n\n  @action\n  selectTime(time: string, e: Event) {\n    this.selectedTime = time;\n\n    const [hour, minute] = time.split(':');\n\n    this.momentConfig.hour = parseInt(hour!);\n    this.momentConfig.minute = parseInt(minute!);\n    this.momentConfig.second = 0;\n    this.momentConfig.millisecond = 0;\n    this.selectedDate = moment(this.momentConfig);\n    this.args.onChange(this.selectedDate, e);\n  }\n\n  @action\n  selectDate(day: Day, e: Event) {\n    // Only outside days will have year/month\n    this.momentConfig.year = day.year || this.year;\n    this.momentConfig.month = day.month || this.month;\n    this.momentConfig.day = day.day;\n    this.selectedDate = moment(this.momentConfig);\n    this.args.onChange(this.selectedDate, e);\n\n    // Update the state to show the selected month properly\n    if (day.isOutside && day.month && day.year) {\n      this.monthMoment.month(day.month);\n      this.monthMoment.year(day.year);\n      this.updateDate();\n    }\n  }\n\n  @action\n  setYear(year: string) {\n    this.year = parseInt(year);\n  }\n\n  @action\n  setMonth(month: string) {\n    this.monthMoment.month(parseInt(month));\n    this.updateDate();\n  }\n\n  @action\n  increaseMonth() {\n    this.monthMoment.add(1, 'month');\n    this.updateDate();\n  }\n\n  @action\n  decreaseMonth() {\n    this.monthMoment.subtract(1, 'month');\n    this.updateDate();\n  }\n\n  <template>\n    <div class=\"euiDatePicker euiDatePicker--inline\">\n      <EuiFormControlLayout>\n        <div class=\"react-datepicker\">\n          <button\n            type=\"button\"\n            class=\"react-datepicker__navigation react-datepicker__navigation--previous\"\n            aria-label=\"Previous month\"\n            {{on \"click\" this.decreaseMonth}}\n          >\n            <EuiIcon @iconClasses=\"euiButtonIcon__icon\" @type=\"arrowLeft\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"react-datepicker__navigation react-datepicker__navigation--next\"\n            aria-label=\"Next month\"\n            {{on \"click\" this.increaseMonth}}\n          >\n            <EuiIcon\n              @iconClasses=\"euiButtonIcon__icon {{@iconClasses}}\"\n              @type=\"arrowRight\"\n            />\n          </button>\n          <div class=\"react-datepicker__month-container\">\n            <div class=\"react-datepicker__header\">\n              <div\n                class=\"react-datepicker__header__dropdown react-datepicker__header__dropdown--scroll\"\n              >\n                <div\n                  class=\"react-datepicker__month-dropdown-container react-datepicker__month-dropdown-container--scroll\"\n                >\n                  {{!template-lint-disable}}\n                  <div\n                    class=\"react-datepicker__month-read-view\"\n                    style=\"padding: 0;\"\n                  >\n                    <EuiFlexItem @grow={{1}}>\n                      <EuiSelect\n                        @compressed={{true}}\n                        @value={{this.month}}\n                        @options={{this.monthNames}}\n                        {{on \"change\" (pick \"target.value\" this.setMonth)}}\n                      />\n                    </EuiFlexItem>\n                  </div>\n                </div>\n                <div\n                  class=\"react-datepicker__year-dropdown-container react-datepicker__year-dropdown-container--scroll\"\n                >\n                  {{!template-lint-disable}}\n                  <div\n                    class=\"react-datepicker__year-read-view\"\n                    style=\"padding: 0;\"\n                  >\n                    <EuiFlexItem @grow={{1}}>\n                      <EuiSelect\n                        @compressed={{true}}\n                        @value={{this.year}}\n                        @options={{this.years}}\n                        {{on \"change\" (pick \"target.value\" this.setYear)}}\n                      />\n                    </EuiFlexItem>\n                  </div>\n                </div>\n              </div>\n              <div class=\"react-datepicker__day-names\">\n                <div class=\"react-datepicker__day-name\">Su</div>\n                <div class=\"react-datepicker__day-name\">Mo</div>\n                <div class=\"react-datepicker__day-name\">Tu</div>\n                <div class=\"react-datepicker__day-name\">We</div>\n                <div class=\"react-datepicker__day-name\">Th</div>\n                <div class=\"react-datepicker__day-name\">Fr</div>\n                <div class=\"react-datepicker__day-name\">Sa</div>\n              </div>\n            </div>\n\n            <div\n              class=\"react-datepicker__month react-datepicker__month--accessible\"\n            >\n              {{#each this.days as |days|}}\n                <div class=\"react-datepicker__week\">\n                  {{#each days as |day|}}\n                    <div\n                      role=\"button\"\n                      class={{concat\n                        \"react-datepicker__day\"\n                        (if\n                          (and\n                            (not day.isOutside)\n                            (isSameDayHelper\n                              this.year this.month day.day this.selectedDate\n                            )\n                          )\n                          \" react-datepicker__day--selected\"\n                        )\n                        (if\n                          (isSameDayHelper\n                            this.year this.month day.day this.today\n                          )\n                          \" react-datepicker__day--today\"\n                        )\n                        (if\n                          day.isOutside \" react-datepicker__day--outside-month\"\n                        )\n                      }}\n                      {{on \"click\" (fn this.selectDate day)}}\n                    >\n                      <div class=\"react-datepicker__day-text\">{{day.day}}</div>\n                    </div>\n                  {{/each}}\n                </div>\n              {{/each}}\n            </div>\n          </div>\n\n          <div class=\"react-datepicker__time-container\">\n            <div class=\"react-datepicker__time\">\n              <div\n                class=\"react-datepicker__time-box react-datepicker__time-box--accessible\"\n              >\n                <ul class=\"react-datepicker__time-list\">\n                  {{#each this.times as |time|}}\n                    <li\n                      role=\"option\"\n                      class={{concat\n                        \"react-datepicker__time-list-item\"\n                        (if\n                          (eq time this.selectedTime)\n                          \" react-datepicker__time-list-item--selected\"\n                        )\n                      }}\n                      {{on \"click\" (fn this.selectTime time)}}\n                    >\n                      {{time}}\n                    </li>\n                  {{/each}}\n                </ul>\n              </div>\n            </div>\n          </div>\n        </div>\n      </EuiFormControlLayout>\n    </div>\n  </template>\n}\n"],"names":["isSameDayHelper","helper","year","month","day","selectedDate","date","DatetimePicker","Component","g","prototype","tracked","i","momentConfig","constructor","owner","args","selected","monthMoment","moment","hour","minute","second","millisecond","hourStr","minuteStr","selectedTime","offset","clone","startOf","today","monthNames","months","map","text","value","years","Array","from","keys","_","times","timesArray","push","days","prevMonth","subtract","nextMonth","add","daysInMonth","daysInPrevMonth","daysArray","d","unshift","isOutside","daysMatrix","weeks","slice","updateDate","selectTime","time","e","split","parseInt","onChange","n","action","selectDate","setYear","setMonth","increaseMonth","decreaseMonth","setComponentTemplate","precompileTemplate","strictMode","scope","EuiFormControlLayout","on","EuiIcon","EuiFlexItem","EuiSelect","pick","concat","and","not","fn","eq"],"mappings":"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"}
+{"version":3,"file":"datetime-picker.js","sources":["../../../../src/components/eui-super-date-picker/date-popover/datetime-picker.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached, tracked } from '@glimmer/tracking';\nimport { helper } from '@ember/component/helper';\nimport { concat, fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport type Owner from '@ember/owner';\n\nimport pick from '@nullvoxpopuli/ember-composable-helpers/helpers/pick';\nimport { and, eq, not } from 'ember-truth-helpers';\nimport moment from 'moment';\n\nimport { getEuiThemeContext } from '../../../utils/emotion/consume.ts';\nimport { euiReactDatePickerStyles } from '../../../utils/eui/date-pickers.ts';\nimport { euiDatePickerStyles } from '../../../utils/eui/styles.generated.ts';\nimport { euiClass, useEuiBorealisStyles } from '../../../utils/eui/styles.ts';\nimport EuiButtonIcon from '../../eui-button-icon.gts';\nimport EuiFormControlLayout from '../../eui-form-control-layout.gts';\nimport EuiSelect from '../../eui-select.gts';\nimport { isOutOfBounds } from '../utils/date-utils.ts';\n\nconst isSameDayHelper = helper(function ([year, month, day, selectedDate]: [\n  number,\n  number,\n  number,\n  moment.Moment | undefined\n]) {\n  if (!selectedDate) {\n    return false;\n  }\n\n  return (\n    selectedDate.year() === year &&\n    selectedDate.month() === month &&\n    selectedDate.date() === day\n  );\n});\n\ninterface DatetimePickerArgs {\n  /** The selected date. */\n  selected?: moment.Moment | null;\n  /** Called with the new value. */\n  onChange: (value: string | Date | moment.Moment, e: Event) => void;\n  /** @deprecated Has no effect: the month buttons are `EuiButtonIcon`s. */\n  iconClasses?: string;\n  /** moment format of absolute dates. */\n  dateFormat?: string;\n  /** Days before this one are disabled (react-datepicker `minDate`). */\n  minDate?: moment.Moment;\n  /** Days after this one are disabled (react-datepicker `maxDate`). */\n  maxDate?: moment.Moment;\n}\n\ninterface Day {\n  day: number;\n  month?: number;\n  year?: number;\n  isOutside?: boolean;\n}\n\n/** @private The calendar and time list of the \"Absolute\" tab. */\ninterface DatetimePickerSignature {\n  Args: DatetimePickerArgs;\n}\n\nexport default class DatetimePicker extends Component<DatetimePickerSignature> {\n  @tracked month: number = 0;\n  @tracked year: number = 0;\n  @tracked monthMoment: moment.Moment;\n  // Used to style the days outside of the current month\n  @tracked offset: number = 0;\n  @tracked selectedDate?: moment.Moment;\n  @tracked selectedTime?: string;\n  @tracked today: moment.Moment;\n\n  momentConfig: {\n    year: number;\n    month: number;\n    day: number;\n    hour: number;\n    minute: number;\n    second: number;\n    millisecond: number;\n  };\n\n  constructor(owner: Owner, args: DatetimePickerArgs) {\n    super(owner, args);\n\n    if (this.args.selected) {\n      this.monthMoment = this.args.selected;\n      this.selectedDate = this.args.selected;\n    } else {\n      this.monthMoment = moment([this.year, this.month]);\n    }\n\n    this.momentConfig = {\n      year: this.monthMoment.year(),\n      month: this.monthMoment.month(),\n      day: this.monthMoment.date(),\n      hour: this.monthMoment.hour(),\n      minute: this.monthMoment.minute(),\n      second: 0,\n      millisecond: 0\n    };\n\n    this.month = this.momentConfig.month;\n    this.year = this.momentConfig.year;\n\n    const hour = this.momentConfig.hour;\n    const minute = this.momentConfig.minute;\n    const hourStr = hour < 10 ? `0${hour}` : hour;\n    const minuteStr = minute < 10 ? `0${minute}` : minute;\n\n    this.selectedTime = `${hourStr}:${minuteStr}`;\n\n    this.offset = this.monthMoment.clone().startOf('month').day();\n\n    this.today = moment();\n  }\n\n  get context() {\n    return getEuiThemeContext(this);\n  }\n\n  /**\n   * Upstream `EuiDatePicker inline shadow={false}`: a block wrapper whose\n   * form control layout loses its frame and stacks the calendar.\n   */\n  @cached\n  get rootClass() {\n    const styles = useEuiBorealisStyles(this.context, euiDatePickerStyles);\n    return euiClass(\n      this.context,\n      { boxSizing: 'border-box' },\n      styles.euiDatePicker,\n      styles.inline.inline,\n      styles.inline.noShadow\n    );\n  }\n\n  /** Upstream's react-datepicker styles, applied to the same markup. */\n  @cached\n  get calendarClass() {\n    const styles = useEuiBorealisStyles(\n      this.context,\n      euiReactDatePickerStyles\n    );\n    return euiClass(\n      this.context,\n      // React's global reset: no list markers/spacing, border-box\n      {\n        boxSizing: 'border-box',\n        '& :where(*, *::before, *::after)': { boxSizing: 'border-box' },\n        '& :where(ul)': { margin: 0, padding: 0, listStyle: 'none' }\n      },\n      styles.euiReactDatePicker\n    );\n  }\n\n  get monthNames() {\n    return moment.months().map((month, i) => {\n      return {\n        text: month,\n        value: i\n      };\n    });\n  }\n\n  get years() {\n    return Array.from(Array(15).keys()).map((_, i) => {\n      // Create a list of years +/- 7 from the current year\n      const year = this.year - 7 + i;\n\n      return {\n        text: year,\n        value: year\n      };\n    });\n  }\n\n  get times() {\n    const timesArray = [];\n\n    // Create entries every 30 minutes\n    for (let i = 0; i < 24; i++) {\n      const hour = i < 10 ? `0${i}` : i;\n\n      timesArray.push(`${hour}:00`, `${hour}:30`);\n    }\n\n    return timesArray;\n  }\n\n  get days() {\n    // Used for showing days outside of the current month\n    // const prevMonth = moment([this.year, this.month - 1]);\n    const prevMonth = this.monthMoment.clone().subtract(1, 'month');\n    const nextMonth = this.monthMoment.clone().add(1, 'month');\n    const offset = this.offset;\n    const daysInMonth = this.monthMoment.daysInMonth();\n    const daysInPrevMonth = prevMonth.daysInMonth();\n\n    const daysArray = [];\n\n    for (let i = 0; i < daysInMonth; i++) {\n      daysArray[i] = {\n        day: i + 1\n      };\n    }\n\n    // Fill the previous and next month days\n    for (let i = 0, d = daysInPrevMonth; i < offset; i++, d--) {\n      daysArray.unshift({\n        day: d,\n        month: prevMonth.month(),\n        year: prevMonth.year(),\n        isOutside: true\n      });\n    }\n\n    // All months fit within 6 weeks (42 days)\n    for (let d = 1, i = daysInMonth + offset; i < 42; d++, i++) {\n      daysArray.push({\n        day: d,\n        month: nextMonth.month(),\n        year: nextMonth.year(),\n        isOutside: true\n      });\n    }\n\n    // All months fit within 6 weeks (42 days)\n    // but depending on the starting day, one week may not be needed\n    const daysMatrix = [];\n    const weeks = daysInMonth + offset > 35 ? 6 : 5;\n\n    for (let i = 0; i < weeks; i++) {\n      daysMatrix[i] = daysArray.slice(i * 7, i * 7 + 7);\n    }\n\n    return daysMatrix;\n  }\n\n  updateDate() {\n    this.year = this.monthMoment.year();\n    this.month = this.monthMoment.month();\n    this.offset = this.monthMoment.clone().startOf('month').day();\n  }\n\n  @action\n  selectTime(time: string, e: Event) {\n    this.selectedTime = time;\n\n    const [hour, minute] = time.split(':');\n\n    this.momentConfig.hour = parseInt(hour!);\n    this.momentConfig.minute = parseInt(minute!);\n    this.momentConfig.second = 0;\n    this.momentConfig.millisecond = 0;\n    this.selectedDate = moment(this.momentConfig);\n    this.args.onChange(this.selectedDate, e);\n  }\n\n  /** react-datepicker disables the days outside `minDate`..`maxDate`. */\n  isDayDisabled = (day: Day): boolean => {\n    const { minDate, maxDate } = this.args;\n    if (!minDate && !maxDate) return false;\n    const date = moment([\n      day.year ?? this.year,\n      day.month ?? this.month,\n      day.day\n    ]);\n    return Boolean(isOutOfBounds(date, { minDate, maxDate }));\n  };\n\n  @action\n  selectDate(day: Day, e: Event) {\n    if (this.isDayDisabled(day)) return;\n\n    // Only outside days will have year/month\n    this.momentConfig.year = day.year || this.year;\n    this.momentConfig.month = day.month || this.month;\n    this.momentConfig.day = day.day;\n    this.selectedDate = moment(this.momentConfig);\n    this.args.onChange(this.selectedDate, e);\n\n    // Update the state to show the selected month properly\n    if (day.isOutside && day.month && day.year) {\n      this.monthMoment.month(day.month);\n      this.monthMoment.year(day.year);\n      this.updateDate();\n    }\n  }\n\n  @action\n  setYear(year: string) {\n    this.year = parseInt(year);\n  }\n\n  @action\n  setMonth(month: string) {\n    this.monthMoment.month(parseInt(month));\n    this.updateDate();\n  }\n\n  @action\n  increaseMonth() {\n    this.monthMoment.add(1, 'month');\n    this.updateDate();\n  }\n\n  @action\n  decreaseMonth() {\n    this.monthMoment.subtract(1, 'month');\n    this.updateDate();\n  }\n\n  <template>\n    <div class=\"euiDatePicker {{this.rootClass}}\">\n      <EuiFormControlLayout>\n        <div class=\"react-datepicker {{this.calendarClass}}\">\n          <EuiButtonIcon\n            class=\"react-datepicker__navigation react-datepicker__navigation--previous\"\n            aria-label=\"Previous month\"\n            @iconType=\"sortLeft\"\n            @size=\"s\"\n            @color=\"text\"\n            {{on \"click\" this.decreaseMonth}}\n          />\n          <EuiButtonIcon\n            class=\"react-datepicker__navigation react-datepicker__navigation--next\"\n            aria-label=\"Next month\"\n            @iconType=\"sortRight\"\n            @size=\"s\"\n            @color=\"text\"\n            {{on \"click\" this.increaseMonth}}\n          />\n          <div class=\"react-datepicker__month-container\">\n            <div class=\"react-datepicker__header\">\n              <div\n                class=\"react-datepicker__header__dropdown react-datepicker__header__dropdown--scroll\"\n              >\n                <div\n                  class=\"react-datepicker__month-dropdown-container react-datepicker__month-dropdown-container--scroll\"\n                >\n                  <EuiSelect\n                    @compressed={{true}}\n                    @fullWidth={{true}}\n                    aria-label=\"Month\"\n                    @value={{this.month}}\n                    @options={{this.monthNames}}\n                    {{on \"change\" (pick \"target.value\" this.setMonth)}}\n                  />\n                </div>\n                <div\n                  class=\"react-datepicker__year-dropdown-container react-datepicker__year-dropdown-container--scroll\"\n                >\n                  <EuiSelect\n                    @compressed={{true}}\n                    @fullWidth={{true}}\n                    aria-label=\"Year\"\n                    @value={{this.year}}\n                    @options={{this.years}}\n                    {{on \"change\" (pick \"target.value\" this.setYear)}}\n                  />\n                </div>\n              </div>\n              <div class=\"react-datepicker__day-names\">\n                <div class=\"react-datepicker__day-name\">Su</div>\n                <div class=\"react-datepicker__day-name\">Mo</div>\n                <div class=\"react-datepicker__day-name\">Tu</div>\n                <div class=\"react-datepicker__day-name\">We</div>\n                <div class=\"react-datepicker__day-name\">Th</div>\n                <div class=\"react-datepicker__day-name\">Fr</div>\n                <div class=\"react-datepicker__day-name\">Sa</div>\n              </div>\n            </div>\n\n            <div\n              class=\"react-datepicker__month react-datepicker__month--accessible\"\n            >\n              {{#each this.days as |days|}}\n                <div class=\"react-datepicker__week\">\n                  {{#each days as |day|}}\n                    <div\n                      role=\"button\"\n                      class={{concat\n                        \"react-datepicker__day\"\n                        (if\n                          (and\n                            (not day.isOutside)\n                            (isSameDayHelper\n                              this.year this.month day.day this.selectedDate\n                            )\n                          )\n                          \" react-datepicker__day--selected\"\n                        )\n                        (if\n                          (isSameDayHelper\n                            this.year this.month day.day this.today\n                          )\n                          \" react-datepicker__day--today\"\n                        )\n                        (if\n                          day.isOutside \" react-datepicker__day--outside-month\"\n                        )\n                        (if\n                          (this.isDayDisabled day)\n                          \" react-datepicker__day--disabled\"\n                        )\n                      }}\n                      aria-disabled={{if (this.isDayDisabled day) \"true\"}}\n                      {{on \"click\" (fn this.selectDate day)}}\n                    >\n                      <div class=\"react-datepicker__day-text\">{{day.day}}</div>\n                    </div>\n                  {{/each}}\n                </div>\n              {{/each}}\n            </div>\n          </div>\n\n          <div class=\"react-datepicker__time-container\">\n            <div class=\"react-datepicker__time\">\n              <div\n                class=\"react-datepicker__time-box react-datepicker__time-box--accessible\"\n              >\n                <ul class=\"react-datepicker__time-list\">\n                  {{#each this.times as |time|}}\n                    <li\n                      role=\"option\"\n                      class={{concat\n                        \"react-datepicker__time-list-item\"\n                        (if\n                          (eq time this.selectedTime)\n                          \" react-datepicker__time-list-item--selected\"\n                        )\n                      }}\n                      {{on \"click\" (fn this.selectTime time)}}\n                    >\n                      {{time}}\n                    </li>\n                  {{/each}}\n                </ul>\n              </div>\n            </div>\n          </div>\n        </div>\n      </EuiFormControlLayout>\n    </div>\n  </template>\n}\n"],"names":["isSameDayHelper","helper","year","month","day","selectedDate","date","DatetimePicker","Component","g","prototype","tracked","i","momentConfig","constructor","owner","args","selected","monthMoment","moment","hour","minute","second","millisecond","hourStr","minuteStr","selectedTime","offset","clone","startOf","today","context","getEuiThemeContext","rootClass","styles","useEuiBorealisStyles","euiDatePickerStyles","euiClass","boxSizing","euiDatePicker","inline","noShadow","n","cached","calendarClass","euiReactDatePickerStyles","margin","padding","listStyle","euiReactDatePicker","monthNames","months","map","text","value","years","Array","from","keys","_","times","timesArray","push","days","prevMonth","subtract","nextMonth","add","daysInMonth","daysInPrevMonth","daysArray","d","unshift","isOutside","daysMatrix","weeks","slice","updateDate","selectTime","time","e","split","parseInt","onChange","action","isDayDisabled","minDate","maxDate","Boolean","isOutOfBounds","selectDate","setYear","setMonth","increaseMonth","decreaseMonth","setComponentTemplate","precompileTemplate","strictMode","scope","EuiFormControlLayout","EuiButtonIcon","on","EuiSelect","pick","concat","and","not","fn","eq"],"mappings":"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"}

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

@@ -1,18 +1,25 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { hash, concat } from '@ember/helper';
+import { tracked, cached } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
+import { schedule, cancel, later } from '@ember/runloop';
 import { service } from '@ember/service';
-import set from 'ember-set-helper/helpers/set';
-import { not } from 'ember-truth-helpers';
-import classNames from '../../../helpers/class-names.js';
+import { modifier } from 'ember-modifier';
+import { getEuiThemeContext } from '../../../utils/emotion/consume.js';
+import { buttonReset } from '../../../utils/eui/form-controls.js';
+import { ez as euiDatePopoverButtonStyles } from '../../../styles.generated-SYAxYhey.js';
+import { useEuiBorealisStyles, euiClass } from '../../../utils/eui/styles.js';
 import EuiPopoverComponent from '../../eui-popover.js';
+import EuiToolTip from '../../eui-tool-tip.js';
 import useFormatTimeString from '../utils/index.js';
 import useI18nTimeOptions from '../utils/time-options.js';
 import EuiDatePopoverContent from './eui-date-popover-content.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i } from 'decorator-transforms/runtime-esm';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+/** Upstream EuiPopover's `closingTransitionTime`. */const CLOSING_TRANSITION_TIME = 250;
+/** @private The start or end date button of EuiSuperDatePicker. */
 
 class EuiDatePopoverButton extends Component {
   static {
@@ -20,11 +27,67 @@ class EuiDatePopoverButton extends Component {
   }
   #euiI18n = (i(this, "euiI18n"), void 0);
   static {
-    g(this.prototype, "isOpen", [tracked], function () {
+    g(this.prototype, "uncontrolledIsOpen", [tracked], function () {
       return false;
     });
   }
-  #isOpen = (i(this, "isOpen"), void 0);
+  #uncontrolledIsOpen = (i(this, "uncontrolledIsOpen"), void 0);
+  /** Controlled by the parent when it passes `@onPopoverToggle`. */get isOpen() {
+    return this.args.onPopoverToggle ? Boolean(this.args.isOpen) : this.uncontrolledIsOpen;
+  }
+  toggle = () => {
+    if (this.args.onPopoverToggle) {
+      this.args.onPopoverToggle();
+    } else {
+      this.uncontrolledIsOpen = !this.uncontrolledIsOpen;
+    }
+  };
+  open = () => {
+    if (!this.isOpen) this.toggle();
+  };
+  close = () => {
+    if (this.args.onPopoverToggle) {
+      this.args.onPopoverClose?.();
+    } else {
+      this.uncontrolledIsOpen = false;
+    }
+  };
+  wasOpen = false;
+  panelId = null;
+  strandedFocusTimer;
+  /**
+  * Upstream EuiPopover's `handleStrandedFocus`: once the popover closed, if
+  * the focus could not return (it is left on the body, or in the closing
+  * panel), move it to this button. E.g. the super date picker opens the
+  * start popover on mount from its pretty duration button, which is gone.
+  */
+  returnStrandedFocus = modifier((element, [isOpen]) => {
+    const wasOpen = this.wasOpen;
+    this.wasOpen = isOpen;
+    if (isOpen) {
+      // EuiPopover links the panel once it opens
+      schedule('afterRender', () => {
+        this.panelId = element.getAttribute('aria-controls') ?? this.panelId;
+      });
+      return;
+    }
+    if (!wasOpen) return;
+    const panelId = element.getAttribute('aria-controls') ?? this.panelId;
+    cancel(this.strandedFocusTimer);
+    this.strandedFocusTimer = later(() => {
+      const active = document.activeElement;
+      const panel = panelId ? document.getElementById(panelId) : null;
+      if (!active || active === document.body || !active.isConnected || panel?.contains(active)) {
+        element.focus({
+          preventScroll: true
+        });
+      }
+    }, CLOSING_TRANSITION_TIME);
+  });
+  willDestroy() {
+    super.willDestroy();
+    cancel(this.strandedFocusTimer);
+  }
   get dateFormat() {
     //date with seconds and such
     return this.args.dateFormat ?? 'YYYY-MM-DDTHH:mm:ss.SSSZ';
@@ -32,7 +95,14 @@ class EuiDatePopoverButton extends Component {
   get formattedValue() {
     const roundUp = this.args.roundUp ?? false;
     const locale = this.args.locale ?? 'en';
-    return useFormatTimeString(this.args.value, this.dateFormat, roundUp, locale, this.euiI18n);
+    return useFormatTimeString(this.args.value, this.dateFormat, roundUp, locale, this.euiI18n, this.args.canRoundRelativeUnits ?? true);
+  }
+  onFocus = event => {
+    this.args.buttonProps?.onFocus?.(event);
+    this.args.onFocus?.(event);
+  };
+  get testSubj() {
+    return this.args.buttonProps?.['data-test-subj'] ?? `superDatePicker${this.position}DatePopoverButton`;
   }
   get timeOptions() {
     return this.args.timeOptions || useI18nTimeOptions(this.euiI18n);
@@ -43,17 +113,69 @@ class EuiDatePopoverButton extends Component {
   get position() {
     return this.args.position ?? 'start';
   }
+  get context() {
+    return getEuiThemeContext(this);
+  }
+  get styles() {
+    return useEuiBorealisStyles(this.context, euiDatePopoverButtonStyles);
+  }
+  /** Upstream state classes plus the button styles. */
+  static {
+    n(this.prototype, "styles", [cached]);
+  }
+  get classes() {
+    const context = this.context;
+    return ['euiDatePopoverButton', `euiDatePopoverButton--${this.position}`, this.args.compressed && 'euiDatePopoverButton--compressed', this.isOpen && 'euiDatePopoverButton-isSelected', this.args.isInvalid && 'euiDatePopoverButton-isInvalid', this.args.needsUpdating && 'euiDatePopoverButton-needsUpdating', this.args.isDisabled && 'euiDatePopoverButton-disabled', this.args.className, this.args.buttonProps?.className, euiClass(context, buttonReset, {
+      fontFamily: context.upstream.euiTheme.font.family
+    }, this.styles.euiDatePopoverButton, this.args.buttonProps?.css)].filter(Boolean).join(' ');
+  }
+  /** Popover root: the caller's styles, and a narrower "now" (upstream). */
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  get rootCss() {
+    return [this.args.css, this.args.value === 'now' && this.styles.now];
+  }
+  /** Upstream's tooltip anchor fills the range cell; so does our anchor. */
+  static {
+    n(this.prototype, "rootCss", [cached]);
+  }
+  get anchorClass() {
+    return euiClass(this.context, this.styles.tooltipAnchor);
+  }
+  /**
+  * Upstream: the tooltip repeats the date, so screen readers only get it
+  * when it adds something (invalid or needs updating).
+  */
+  static {
+    n(this.prototype, "anchorClass", [cached]);
+  }
+  get hidesTitleFromScreenReaders() {
+    return !this.args.isInvalid && !this.args.needsUpdating;
+  }
+  /** Upstream tooltip: the date, or why it is invalid / needs updating. */
+  get title() {
+    const title = this.formattedValue;
+    if (this.args.isInvalid) {
+      return this.euiI18n.lookupToken('euiDatePopoverButton.invalidTitle', 'Invalid date: {title}', {
+        title
+      });
+    }
+    if (this.args.needsUpdating) {
+      return this.euiI18n.lookupToken('euiDatePopoverButton.outdatedTitle', 'Update needed: {title}', {
+        title
+      });
+    }
+    return title;
+  }
   static {
-    setComponentTemplate(precompileTemplate("{{#let (classNames \"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|}}\n  <EuiPopover @isOpen={{this.isOpen}} @closePopover={{set this \"isOpen\" false}} @anchorPosition={{this.anchorPosition}} @panelPaddingSize=\"none\" @display=\"block\">\n    <:button>\n      {{#if (has-block \"button\")}}\n        {{yield (hash classes=classes formattedValue=this.formattedValue open=(set this \"isOpen\" true) close=(set this \"isOpen\" false)) to=\"button\"}}\n      {{else}}\n        <button type=\"button\" class={{classes}} title={{this.formattedValue}} disabled={{@isDisabled}} ...attributes {{on \"click\" (set this \"isOpen\" (not this.isOpen))}}>\n          {{this.formattedValue}}\n        </button>\n      {{/if}}\n    </:button>\n\n    <:content>\n      <EuiDatePopoverContent @position={{this.position}} @value={{@value}} @roundUp={{@roundUp}} @dateFormat={{this.dateFormat}} @timeFormat={{@timeFormat}} @locale={{@locale}} @utcOffset={{@utcOffset}} @timeOptions={{this.timeOptions}} @onChange={{@onChange}} />\n    </:content>\n  </EuiPopover>\n{{/let}}", {
+    setComponentTemplate(precompileTemplate("<EuiPopover @isOpen={{this.isOpen}} @closePopover={{this.close}} @anchorPosition={{this.anchorPosition}} @anchorClassName={{this.anchorClass}} @panelPaddingSize=\"none\" @display=\"block\" @rootCss={{this.rootCss}}>\n  <:button>\n    {{#if (has-block \"button\")}}\n      {{yield (hash classes=this.classes formattedValue=this.formattedValue open=this.open close=this.close) to=\"button\"}}\n    {{else}}\n      {{!-- Upstream wraps the button in a tooltip showing its title. --}}\n      <EuiToolTip @content={{this.title}} @display=\"block\" @disableScreenReaderOutput={{this.hidesTitleFromScreenReaders}} @anchorCss={{this.styles.tooltipAnchor}}>\n        <button type=\"button\" class={{this.classes}} disabled={{@isDisabled}} id={{@buttonProps.id}} aria-label={{@buttonProps.aria-label}} data-test-subj={{this.testSubj}} ...attributes {{on \"click\" this.toggle}} {{on \"focus\" this.onFocus}} {{this.returnStrandedFocus this.isOpen}}>\n          {{this.formattedValue}}\n        </button>\n      </EuiToolTip>\n    {{/if}}\n  </:button>\n\n  <:content>\n    <EuiDatePopoverContent @position={{this.position}} @value={{@value}} @roundUp={{@roundUp}} @dateFormat={{this.dateFormat}} @timeFormat={{@timeFormat}} @locale={{@locale}} @utcOffset={{@utcOffset}} @timeOptions={{this.timeOptions}} @onChange={{@onChange}} @minDate={{@minDate}} @maxDate={{@maxDate}} @canRoundRelativeUnits={{@canRoundRelativeUnits}} @timeZoneDisplayProps={{@timeZoneDisplayProps}} />\n  </:content>\n</EuiPopover>", {
       strictMode: true,
       scope: () => ({
-        classNames,
-        concat,
         EuiPopover: EuiPopoverComponent,
-        set,
         hash,
+        EuiToolTip,
         on,
-        not,
         EuiDatePopoverContent
       })
     }), this);

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

@@ -1 +1 @@
-{"version":3,"file":"eui-date-popover-button.js","sources":["../../../../src/components/eui-super-date-picker/date-popover/eui-date-popover-button.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { concat, hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { service } from '@ember/service';\n\nimport set from 'ember-set-helper/helpers/set';\nimport { not } from 'ember-truth-helpers';\n\nimport classNames from '../../../helpers/class-names.ts';\nimport EuiPopover from '../../eui-popover.gts';\nimport { useFormatTimeString } from '../utils/index.ts';\nimport { useI18nTimeOptions } from '../utils/time-options.ts';\nimport EuiDatePopoverContent from './eui-date-popover-content.gts';\n\nimport type EuiI18n from '../../../services/eui-i18n';\nimport type { EuiDatePopoverContentSignature } from './eui-date-popover-content';\n\ninterface EuiDatePopoverButtonArgs {\n  /** Extra class(es). */\n  className?: string;\n  /** moment format of absolute dates. */\n  dateFormat?: string;\n  /** Disables it. */\n  isDisabled?: boolean;\n  /** Invalid styling. */\n  isInvalid?: boolean;\n  /** Whether the popover is open. */\n  isOpen?: boolean;\n  /** Highlights that it changed and needs applying. */\n  needsUpdating?: boolean;\n  /** moment locale. */\n  locale?: EuiDatePopoverContentSignature['Args']['locale'];\n  /** `'start'` or `'end'` of the range. */\n  position?: 'start' | 'end';\n  /** Rounds relative dates up (for the end of a range). */\n  roundUp?: boolean;\n  /** moment format of times. */\n  timeFormat?: string;\n  /** The date (date math or ISO date). */\n  value: string;\n  /** UTC offset in minutes. */\n  utcOffset?: number;\n  /** Compressed styling. */\n  compressed?: boolean;\n  /** Time units and tenses for the quick select. */\n  timeOptions?: EuiDatePopoverContentSignature['Args']['timeOptions'];\n  /** Called with the new value. */\n  onChange: EuiDatePopoverContentSignature['Args']['onChange'];\n}\n\n/** @private The start or end date button of EuiSuperDatePicker. */\nexport interface EuiDatePopoverButtonSignature {\n  Element: HTMLButtonElement;\n  Args: EuiDatePopoverButtonArgs;\n  Blocks: {\n    button: [\n      {\n        classes: string;\n        formattedValue: string;\n        open: () => void;\n        close: () => void;\n      }\n    ];\n  };\n}\n\nexport default class EuiDatePopoverButton extends Component<EuiDatePopoverButtonSignature> {\n  @service declare euiI18n: EuiI18n;\n  @tracked isOpen = false;\n\n  get dateFormat() {\n    //date with seconds and such\n    return this.args.dateFormat ?? 'YYYY-MM-DDTHH:mm:ss.SSSZ';\n  }\n\n  get formattedValue() {\n    const roundUp = this.args.roundUp ?? false;\n    const locale = this.args.locale ?? 'en';\n\n    return useFormatTimeString(\n      this.args.value,\n      this.dateFormat,\n      roundUp,\n      locale,\n      this.euiI18n\n    );\n  }\n\n  get timeOptions() {\n    return this.args.timeOptions || useI18nTimeOptions(this.euiI18n);\n  }\n\n  get anchorPosition() {\n    return this.args.position === 'start' ? 'downLeft' : 'downRight';\n  }\n\n  get position() {\n    return this.args.position ?? 'start';\n  }\n\n  <template>\n    {{#let\n      (classNames\n        \"euiDatePopoverButton\"\n        (concat \"euiDatePopoverButton--\" @position)\n        (if @compressed \"euiDatePopoverButton--compressed\")\n        (if this.isOpen \"euiDatePopoverButton-isSelected\")\n        (if @isInvalid \"euiDatePopoverButton-isInvalid\")\n        (if @needsUpdating \"euiDatePopoverButton-needsUpdating\")\n        (if @isDisabled \"euiDatePopoverButton-disabled\")\n      )\n      as |classes|\n    }}\n      <EuiPopover\n        @isOpen={{this.isOpen}}\n        @closePopover={{set this \"isOpen\" false}}\n        @anchorPosition={{this.anchorPosition}}\n        @panelPaddingSize=\"none\"\n        @display=\"block\"\n      >\n        <:button>\n          {{#if (has-block \"button\")}}\n            {{yield\n              (hash\n                classes=classes\n                formattedValue=this.formattedValue\n                open=(set this \"isOpen\" true)\n                close=(set this \"isOpen\" false)\n              )\n              to=\"button\"\n            }}\n          {{else}}\n            <button\n              type=\"button\"\n              class={{classes}}\n              title={{this.formattedValue}}\n              disabled={{@isDisabled}}\n              ...attributes\n              {{on \"click\" (set this \"isOpen\" (not this.isOpen))}}\n            >\n              {{this.formattedValue}}\n            </button>\n          {{/if}}\n        </:button>\n\n        <:content>\n          <EuiDatePopoverContent\n            @position={{this.position}}\n            @value={{@value}}\n            @roundUp={{@roundUp}}\n            @dateFormat={{this.dateFormat}}\n            @timeFormat={{@timeFormat}}\n            @locale={{@locale}}\n            @utcOffset={{@utcOffset}}\n            @timeOptions={{this.timeOptions}}\n            @onChange={{@onChange}}\n          />\n        </:content>\n      </EuiPopover>\n    {{/let}}\n  </template>\n}\n"],"names":["EuiDatePopoverButton","Component","g","prototype","service","i","tracked","dateFormat","args","formattedValue","roundUp","locale","useFormatTimeString","value","euiI18n","timeOptions","useI18nTimeOptions","anchorPosition","position","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","concat","EuiPopover","set","hash","on","not","EuiDatePopoverContent"],"mappings":";;;;;;;;;;;;;;;;AAmEe,MAAMA,6BAA6BC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACzDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;AAAA,EAAA;IAAAH,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,QAAA,EAAA,CACAG,OAAA,CAAA,EAAA,YAAA;AAAA,MAAA,OAAiB,KAAA;AAAA,IAAA,CAAA,CAAA;AAAA;EAAA,OAAA,IAAAD,CAAA,CAAA,IAAA,EAAA,QAAA,CAAA,EAAA,MAAA;EAElB,IAAIE,UAAAA,GAAa;AACf;AACA,IAAA,OAAO,IAAI,CAACC,IAAI,CAACD,UAAU,IAAI,0BAAA;AACjC,EAAA;EAEA,IAAIE,cAAAA,GAAiB;IACnB,MAAMC,UAAU,IAAI,CAACF,IAAI,CAACE,OAAO,IAAI,KAAA;IACrC,MAAMC,SAAS,IAAI,CAACH,IAAI,CAACG,MAAM,IAAI,IAAA;AAEnC,IAAA,OAAOC,mBAAA,CACL,IAAI,CAACJ,IAAI,CAACK,KAAK,EACf,IAAI,CAACN,UAAU,EACfG,OAAA,EACAC,MAAA,EACA,IAAI,CAACG,OAAO,CAAA;AAEhB,EAAA;EAEA,IAAIC,WAAAA,GAAc;IAChB,OAAO,IAAI,CAACP,IAAI,CAACO,WAAW,IAAIC,kBAAA,CAAmB,IAAI,CAACF,OAAO,CAAA;AACjE,EAAA;EAEA,IAAIG,cAAAA,GAAiB;IACnB,OAAO,IAAI,CAACT,IAAI,CAACU,QAAQ,KAAK,UAAU,UAAA,GAAa,WAAA;AACvD,EAAA;EAEA,IAAIA,QAAAA,GAAW;AACb,IAAA,OAAO,IAAI,CAACV,IAAI,CAACU,QAAQ,IAAI,OAAA;AAC/B,EAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,i1CAAA,EA4DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,UAAA;QAAAC,MAAA;oBAAAC,mBAAA;QAAAC,GAAA;QAAAC,IAAA;QAAAC,EAAA;QAAAC,GAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}
+{"version":3,"file":"eui-date-popover-button.js","sources":["../../../../src/components/eui-super-date-picker/date-popover/eui-date-popover-button.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached, tracked } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { cancel, later, schedule } from '@ember/runloop';\nimport { service } from '@ember/service';\n\nimport { modifier } from 'ember-modifier';\n\nimport { getEuiThemeContext } from '../../../utils/emotion/consume.ts';\nimport { buttonReset } from '../../../utils/eui/form-controls.ts';\nimport { euiDatePopoverButtonStyles } from '../../../utils/eui/styles.generated.ts';\nimport { euiClass, useEuiBorealisStyles } from '../../../utils/eui/styles.ts';\nimport EuiPopover from '../../eui-popover.gts';\nimport EuiToolTip from '../../eui-tool-tip.gts';\nimport { useFormatTimeString } from '../utils/index.ts';\nimport { useI18nTimeOptions } from '../utils/time-options.ts';\nimport EuiDatePopoverContent from './eui-date-popover-content.gts';\n\nimport type EuiI18n from '../../../services/eui-i18n';\nimport type { EuiCss } from '../../../utils/eui/styles.ts';\nimport type { CommonArgs } from '../../common.ts';\nimport type { EuiDatePopoverContentSignature } from './eui-date-popover-content';\nimport type { EuiTimeZoneDisplayProps } from './eui-time-zone-display.gts';\nimport type { Moment } from 'moment';\n\n/** Supported keys of `@buttonProps`. */\nexport type EuiDatePopoverButtonProps = CommonArgs & {\n  css?: EuiCss;\n  onFocus?: (event: FocusEvent) => void;\n};\n\ninterface EuiDatePopoverButtonArgs {\n  /** Extra class(es). */\n  className?: string;\n  /** moment format of absolute dates. */\n  dateFormat?: string;\n  /** Disables it. */\n  isDisabled?: boolean;\n  /** Invalid styling. */\n  isInvalid?: boolean;\n  /**\n   * Whether the popover is open, when the parent controls it (with\n   * `@onPopoverToggle`).\n   */\n  isOpen?: boolean;\n  /**\n   * Called when the button is clicked. Passing it makes the popover\n   * controlled: `@isOpen` decides whether it is open (upstream\n   * `onPopoverToggle`).\n   */\n  onPopoverToggle?: () => void;\n  /** Called when the controlled popover asks to close (upstream `onPopoverClose`). */\n  onPopoverClose?: () => void;\n  /** Highlights that it changed and needs applying. */\n  needsUpdating?: boolean;\n  /** moment locale. */\n  locale?: EuiDatePopoverContentSignature['Args']['locale'];\n  /** `'start'` or `'end'` of the range. */\n  position?: 'start' | 'end';\n  /** Rounds relative dates up (for the end of a range). */\n  roundUp?: boolean;\n  /** moment format of times. */\n  timeFormat?: string;\n  /** The date (date math or ISO date). */\n  value: string;\n  /** UTC offset in minutes. */\n  utcOffset?: number;\n  /** Compressed styling. */\n  compressed?: boolean;\n  /** Time units and tenses for the quick select. */\n  timeOptions?: EuiDatePopoverContentSignature['Args']['timeOptions'];\n  /** Called with the new value. */\n  onChange: EuiDatePopoverContentSignature['Args']['onChange'];\n  /** Earliest selectable day of the absolute tab's calendar. */\n  minDate?: Moment;\n  /** Latest selectable day of the absolute tab's calendar. */\n  maxDate?: Moment;\n  /** `false` keeps relative units as typed. Defaults to `true`. */\n  canRoundRelativeUnits?: boolean;\n  /** Shows the time zone in the absolute and relative tabs. */\n  timeZoneDisplayProps?: EuiTimeZoneDisplayProps;\n  /** Called when the button gets focus (upstream `buttonProps.onFocus`). */\n  onFocus?: (event: FocusEvent) => void;\n  /**\n   * Extra props for the `<button>` (upstream `buttonProps`): `className`\n   * (added to its classes), `css` (composed last into its class), `id`,\n   * `aria-label`, `data-test-subj` (replaces the default) and `onFocus`\n   * (called with `@onFocus`).\n   */\n  buttonProps?: EuiDatePopoverButtonProps;\n  /**\n   * Extra styles for the popover root (upstream passes the super date\n   * picker's range input styles this way).\n   */\n  css?: EuiCss;\n}\n\n/** Upstream EuiPopover's `closingTransitionTime`. */\nconst CLOSING_TRANSITION_TIME = 250;\n\n/** @private The start or end date button of EuiSuperDatePicker. */\nexport interface EuiDatePopoverButtonSignature {\n  Element: HTMLButtonElement;\n  Args: EuiDatePopoverButtonArgs;\n  Blocks: {\n    button: [\n      {\n        classes: string;\n        formattedValue: string;\n        open: () => void;\n        close: () => void;\n      }\n    ];\n  };\n}\n\nexport default class EuiDatePopoverButton extends Component<EuiDatePopoverButtonSignature> {\n  @service declare euiI18n: EuiI18n;\n  @tracked private uncontrolledIsOpen = false;\n\n  /** Controlled by the parent when it passes `@onPopoverToggle`. */\n  get isOpen(): boolean {\n    return this.args.onPopoverToggle\n      ? Boolean(this.args.isOpen)\n      : this.uncontrolledIsOpen;\n  }\n\n  toggle = () => {\n    if (this.args.onPopoverToggle) {\n      this.args.onPopoverToggle();\n    } else {\n      this.uncontrolledIsOpen = !this.uncontrolledIsOpen;\n    }\n  };\n\n  open = () => {\n    if (!this.isOpen) this.toggle();\n  };\n\n  close = () => {\n    if (this.args.onPopoverToggle) {\n      this.args.onPopoverClose?.();\n    } else {\n      this.uncontrolledIsOpen = false;\n    }\n  };\n\n  private wasOpen = false;\n  private panelId: string | null = null;\n  private strandedFocusTimer?: ReturnType<typeof later>;\n\n  /**\n   * Upstream EuiPopover's `handleStrandedFocus`: once the popover closed, if\n   * the focus could not return (it is left on the body, or in the closing\n   * panel), move it to this button. E.g. the super date picker opens the\n   * start popover on mount from its pretty duration button, which is gone.\n   */\n  returnStrandedFocus = modifier((element: HTMLElement, [isOpen]: [boolean]) => {\n    const wasOpen = this.wasOpen;\n    this.wasOpen = isOpen;\n\n    if (isOpen) {\n      // EuiPopover links the panel once it opens\n      schedule('afterRender', () => {\n        this.panelId = element.getAttribute('aria-controls') ?? this.panelId;\n      });\n      return;\n    }\n\n    if (!wasOpen) return;\n\n    const panelId = element.getAttribute('aria-controls') ?? this.panelId;\n    cancel(this.strandedFocusTimer);\n    this.strandedFocusTimer = later(() => {\n      const active = document.activeElement;\n      const panel = panelId ? document.getElementById(panelId) : null;\n\n      if (\n        !active ||\n        active === document.body ||\n        !active.isConnected ||\n        panel?.contains(active)\n      ) {\n        element.focus({ preventScroll: true });\n      }\n    }, CLOSING_TRANSITION_TIME);\n  });\n\n  willDestroy() {\n    super.willDestroy();\n    cancel(this.strandedFocusTimer);\n  }\n\n  get dateFormat() {\n    //date with seconds and such\n    return this.args.dateFormat ?? 'YYYY-MM-DDTHH:mm:ss.SSSZ';\n  }\n\n  get formattedValue() {\n    const roundUp = this.args.roundUp ?? false;\n    const locale = this.args.locale ?? 'en';\n\n    return useFormatTimeString(\n      this.args.value,\n      this.dateFormat,\n      roundUp,\n      locale,\n      this.euiI18n,\n      this.args.canRoundRelativeUnits ?? true\n    );\n  }\n\n  onFocus = (event: FocusEvent) => {\n    this.args.buttonProps?.onFocus?.(event);\n    this.args.onFocus?.(event);\n  };\n\n  get testSubj(): string {\n    return (\n      this.args.buttonProps?.['data-test-subj'] ??\n      `superDatePicker${this.position}DatePopoverButton`\n    );\n  }\n\n  get timeOptions() {\n    return this.args.timeOptions || useI18nTimeOptions(this.euiI18n);\n  }\n\n  get anchorPosition() {\n    return this.args.position === 'start' ? 'downLeft' : 'downRight';\n  }\n\n  get position() {\n    return this.args.position ?? 'start';\n  }\n\n  get context() {\n    return getEuiThemeContext(this);\n  }\n\n  @cached\n  get styles() {\n    return useEuiBorealisStyles(this.context, euiDatePopoverButtonStyles);\n  }\n\n  /** Upstream state classes plus the button styles. */\n  @cached\n  get classes() {\n    const context = this.context;\n    return [\n      'euiDatePopoverButton',\n      `euiDatePopoverButton--${this.position}`,\n      this.args.compressed && 'euiDatePopoverButton--compressed',\n      this.isOpen && 'euiDatePopoverButton-isSelected',\n      this.args.isInvalid && 'euiDatePopoverButton-isInvalid',\n      this.args.needsUpdating && 'euiDatePopoverButton-needsUpdating',\n      this.args.isDisabled && 'euiDatePopoverButton-disabled',\n      this.args.className,\n      this.args.buttonProps?.className,\n      euiClass(\n        context,\n        buttonReset,\n        {\n          fontFamily: context.upstream.euiTheme.font.family\n        },\n        this.styles.euiDatePopoverButton,\n        this.args.buttonProps?.css\n      )\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  /** Popover root: the caller's styles, and a narrower \"now\" (upstream). */\n  @cached\n  get rootCss() {\n    return [this.args.css, this.args.value === 'now' && this.styles.now];\n  }\n\n  /** Upstream's tooltip anchor fills the range cell; so does our anchor. */\n  @cached\n  get anchorClass() {\n    return euiClass(this.context, this.styles.tooltipAnchor);\n  }\n\n  /**\n   * Upstream: the tooltip repeats the date, so screen readers only get it\n   * when it adds something (invalid or needs updating).\n   */\n  get hidesTitleFromScreenReaders() {\n    return !this.args.isInvalid && !this.args.needsUpdating;\n  }\n\n  /** Upstream tooltip: the date, or why it is invalid / needs updating. */\n  get title() {\n    const title = this.formattedValue;\n\n    if (this.args.isInvalid) {\n      return this.euiI18n.lookupToken(\n        'euiDatePopoverButton.invalidTitle',\n        'Invalid date: {title}',\n        { title }\n      );\n    }\n\n    if (this.args.needsUpdating) {\n      return this.euiI18n.lookupToken(\n        'euiDatePopoverButton.outdatedTitle',\n        'Update needed: {title}',\n        { title }\n      );\n    }\n\n    return title;\n  }\n\n  <template>\n    <EuiPopover\n      @isOpen={{this.isOpen}}\n      @closePopover={{this.close}}\n      @anchorPosition={{this.anchorPosition}}\n      @anchorClassName={{this.anchorClass}}\n      @panelPaddingSize=\"none\"\n      @display=\"block\"\n      @rootCss={{this.rootCss}}\n    >\n      <:button>\n        {{#if (has-block \"button\")}}\n          {{yield\n            (hash\n              classes=this.classes\n              formattedValue=this.formattedValue\n              open=this.open\n              close=this.close\n            )\n            to=\"button\"\n          }}\n        {{else}}\n          {{! Upstream wraps the button in a tooltip showing its title. }}\n          <EuiToolTip\n            @content={{this.title}}\n            @display=\"block\"\n            @disableScreenReaderOutput={{this.hidesTitleFromScreenReaders}}\n            @anchorCss={{this.styles.tooltipAnchor}}\n          >\n            <button\n              type=\"button\"\n              class={{this.classes}}\n              disabled={{@isDisabled}}\n              id={{@buttonProps.id}}\n              aria-label={{@buttonProps.aria-label}}\n              data-test-subj={{this.testSubj}}\n              ...attributes\n              {{on \"click\" this.toggle}}\n              {{on \"focus\" this.onFocus}}\n              {{this.returnStrandedFocus this.isOpen}}\n            >\n              {{this.formattedValue}}\n            </button>\n          </EuiToolTip>\n        {{/if}}\n      </:button>\n\n      <:content>\n        <EuiDatePopoverContent\n          @position={{this.position}}\n          @value={{@value}}\n          @roundUp={{@roundUp}}\n          @dateFormat={{this.dateFormat}}\n          @timeFormat={{@timeFormat}}\n          @locale={{@locale}}\n          @utcOffset={{@utcOffset}}\n          @timeOptions={{this.timeOptions}}\n          @onChange={{@onChange}}\n          @minDate={{@minDate}}\n          @maxDate={{@maxDate}}\n          @canRoundRelativeUnits={{@canRoundRelativeUnits}}\n          @timeZoneDisplayProps={{@timeZoneDisplayProps}}\n        />\n      </:content>\n    </EuiPopover>\n  </template>\n}\n"],"names":["CLOSING_TRANSITION_TIME","EuiDatePopoverButton","Component","g","prototype","service","i","tracked","isOpen","args","onPopoverToggle","Boolean","uncontrolledIsOpen","toggle","open","close","onPopoverClose","wasOpen","panelId","strandedFocusTimer","returnStrandedFocus","modifier","element","schedule","getAttribute","cancel","later","active","document","activeElement","panel","getElementById","body","isConnected","contains","focus","preventScroll","willDestroy","dateFormat","formattedValue","roundUp","locale","useFormatTimeString","value","euiI18n","canRoundRelativeUnits","onFocus","event","buttonProps","testSubj","position","timeOptions","useI18nTimeOptions","anchorPosition","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiDatePopoverButtonStyles","n","cached","classes","compressed","isInvalid","needsUpdating","isDisabled","className","euiClass","buttonReset","fontFamily","upstream","euiTheme","font","family","euiDatePopoverButton","css","filter","join","rootCss","now","anchorClass","tooltipAnchor","hidesTitleFromScreenReaders","title","lookupToken","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPopover","hash","EuiToolTip","on","EuiDatePopoverContent"],"mappings":"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"}

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

@@ -1,8 +1,11 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { tracked, cached } from '@glimmer/tracking';
 import { helper } from '@ember/component/helper';
 import { service } from '@ember/service';
 import { eq } from 'ember-truth-helpers';
+import { getEuiThemeContext } from '../../../utils/emotion/consume.js';
+import { eR as euiDatePopoverContentStyles } from '../../../styles.generated-SYAxYhey.js';
+import { useEuiBorealisStyles, euiClass } from '../../../utils/eui/styles.js';
 import EuiTabbedContentComponent from '../../eui-tabbed-content.js';
 import { toAbsoluteString, getDateMode } from '../utils/index.js';
 import useI18nTimeOptions from '../utils/time-options.js';
@@ -11,10 +14,10 @@ import EuiSuperDatePickerDatePopoverNowTab from './now-tab.js';
 import RelativeTab from './relative-tab.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i } from 'decorator-transforms/runtime-esm';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
 
-const toAbsoluteStringHelper = helper(function ([value, roundUp]) {
-  return toAbsoluteString(value, roundUp);
+const toAbsoluteStringHelper = helper(function ([value, roundUp, canRoundRelativeUnits = true]) {
+  return canRoundRelativeUnits ? toAbsoluteString(value, roundUp) : value;
 });
 /** @private The tabs (absolute, relative, now) of the date popover. */
 
@@ -33,29 +36,44 @@ class EuiDatePopoverContent extends Component {
   get labelPrefix() {
     return this.args.position === 'start' ? this.euiI18n.lookupToken('euiDatePopoverContent.startDateLabel', 'Start date') : this.euiI18n.lookupToken('euiDatePopoverContent.endDateLabel', 'End date');
   }
+  /** Upstream also labels each tab with the position and its test subject. */
   get tabs() {
-    return [{
-      id: 'absolute',
-      name: this.euiI18n.lookupToken('euiDatePopoverContent.absoluteTabLabel', 'Absolute')
-    }, {
-      id: 'relative',
-      name: this.euiI18n.lookupToken('euiDatePopoverContent.relativeTabLabel', 'Relative')
-    }, {
-      id: 'now',
-      name: this.euiI18n.lookupToken('euiDatePopoverContent.nowTabLabel', 'Now')
-    }];
+    const tab = (id, token, label, testSubj) => {
+      const name = this.euiI18n.lookupToken(token, label);
+      return {
+        id,
+        name,
+        'data-test-subj': testSubj,
+        'aria-label': `${this.labelPrefix}: ${name}`
+      };
+    };
+    return [tab('absolute', 'euiDatePopoverContent.absoluteTabLabel', 'Absolute', 'superDatePickerAbsoluteTab'), tab('relative', 'euiDatePopoverContent.relativeTabLabel', 'Relative', 'superDatePickerRelativeTab'), tab('now', 'euiDatePopoverContent.nowTabLabel', 'Now', 'superDatePickerNowTab')];
   }
   get initialSelectedTab() {
     return this.tabs.find(tab => tab.id === getDateMode(this.args.value));
   }
+  /** Upstream: the form width (400px), narrower below the `s` breakpoint. */
+  get className() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiDatePopoverContentStyles);
+    return `euiDatePopoverContent ${euiClass(context, {
+      boxSizing: 'border-box'
+    }, styles.euiDatePopoverContent)}`;
+  }
+  static {
+    n(this.prototype, "className", [cached]);
+  }
   get roundUp() {
     return this.args.roundUp ?? false;
   }
+  get canRoundRelativeUnits() {
+    return this.args.canRoundRelativeUnits ?? true;
+  }
   get timeOptions() {
     return this.args.timeOptions || useI18nTimeOptions(this.euiI18n);
   }
   static {
-    setComponentTemplate(precompileTemplate("<EuiTabbedContent @className=\"euiDatePopoverContent\" @tabs={{this.tabs}} @initialSelectedTab={{this.initialSelectedTab}} @autoFocus=\"selected\" @expand={{true}} @size=\"s\">\n  <:selectedTabContent as |selected|>\n    {{#if (eq selected.id \"relative\")}}\n      <RelativeTab @value={{this.toAbsoluteStringHelper @value this.roundUp}} @onChange={{@onChange}} @labelPrefix={{this.labelPrefix}} @roundUp={{this.roundUp}} @dateFormat={{@dateFormat}} @locale={{@locale}} @position={{@position}} @timeOptions={{this.timeOptions}} />\n    {{else if (eq selected.id \"now\")}}\n      <NowTab @position={{@position}} @onChange={{@onChange}} />\n    {{else if (eq selected.id \"absolute\")}}\n      <AbsoluteTab @value={{@value}} @roundUp={{this.roundUp}} @dateFormat={{@dateFormat}} @locale={{@locale}} @position={{@position}} @onChange={{@onChange}} @labelPrefix={{this.labelPrefix}} />\n    {{/if}}\n  </:selectedTabContent>\n</EuiTabbedContent>", {
+    setComponentTemplate(precompileTemplate("<EuiTabbedContent @className={{this.className}} @tabs={{this.tabs}} @initialSelectedTab={{this.initialSelectedTab}} @autoFocus=\"selected\" @expand={{true}} @size=\"s\">\n  <:selectedTabContent as |selected|>\n    {{#if (eq selected.id \"relative\")}}\n      <RelativeTab @value={{this.toAbsoluteStringHelper @value this.roundUp this.canRoundRelativeUnits}} @onChange={{@onChange}} @labelPrefix={{this.labelPrefix}} @roundUp={{this.roundUp}} @dateFormat={{@dateFormat}} @locale={{@locale}} @position={{@position}} @timeOptions={{this.timeOptions}} @timeZoneDisplayProps={{@timeZoneDisplayProps}} />\n    {{else if (eq selected.id \"now\")}}\n      <NowTab @position={{@position}} @onChange={{@onChange}} />\n    {{else if (eq selected.id \"absolute\")}}\n      <AbsoluteTab @value={{@value}} @roundUp={{this.roundUp}} @dateFormat={{@dateFormat}} @locale={{@locale}} @position={{@position}} @onChange={{@onChange}} @labelPrefix={{this.labelPrefix}} @minDate={{@minDate}} @maxDate={{@maxDate}} @timeZoneDisplayProps={{@timeZoneDisplayProps}} />\n    {{/if}}\n  </:selectedTabContent>\n</EuiTabbedContent>", {
       strictMode: true,
       scope: () => ({
         EuiTabbedContent: EuiTabbedContentComponent,