@ember-eui/core 14.1.3 → 15.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"eui-super-date-picker.js","sources":["../../src/components/eui-super-date-picker.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport { modifier } from 'ember-modifier';\nimport { eq, or } from 'ember-truth-helpers';\n\nimport argOrDefault, { argOrDefaultDecorator } from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiFormControlLayout from './eui-form-control-layout.gts';\nimport EuiDatePopoverButton from './eui-super-date-picker/date-popover/eui-date-popover-button.gts';\nimport EuiDatePickerRange from './eui-super-date-picker/eui-date-picker-range.gts';\nimport EuiQuickSelectPopover from './eui-super-date-picker/eui-quick-select-popover.gts';\nimport EuiSuperUpdateButton from './eui-super-date-picker/eui-super-update-button.gts';\nimport { isRangeInvalid } from './eui-super-date-picker/utils/index.ts';\nimport { useI18nTimeOptions } from './eui-super-date-picker/utils/time-options.ts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type {\n  ApplyRefreshInterval,\n  DurationRange,\n  Milliseconds,\n  ShortDate\n} from './eui-super-date-picker/types/global';\nimport type { LocaleSpecifier } from 'moment';\n\nexport type { ApplyRefreshInterval, DurationRange, Milliseconds, ShortDate };\n\n/**\n * EuiSuperDatePicker picks a time range (absolute dates, relative like\n * \"last 15 minutes\", or \"now\") with a quick select popover and optional\n * auto refresh, as in Kibana. `@onTimeChange` receives date math strings.\n */\nexport interface EuiSuperDatePickerArgs {\n  /**\n   * Ranges listed as \"Commonly used\" in the quick select popover:\n   * `[{ start: 'now/d', end: 'now/d', label: 'Today' }, …]`. Defaults to\n   * EUI's list (Today, This week, Last 15 minutes, …).\n   */\n  commonlyUsedRanges?: DurationRange[];\n  // customQuickSelectPanels?: QuickSelectPanel[];\n  /**\n   * moment format for absolute dates. Defaults to\n   * `'MMM D, YYYY @ HH:mm:ss.SSS'`.\n   */\n  dateFormat?: string;\n  /**\n   * Set isAutoRefreshOnly to true to limit the component to only display\n   * auto refresh content. Defaults to `false`.\n   */\n  isAutoRefreshOnly?: boolean;\n  /** Disables the picker. Defaults to `false`. */\n  isDisabled?: boolean;\n  /** Shows the update button's loading state, e.g. while data refreshes. */\n  isLoading?: boolean;\n  /**\n   * Whether auto refresh is paused (with `@onRefreshChange`).\n   * Defaults to `true`.\n   */\n  isPaused?: boolean;\n  /**\n   * Sets the overall width by adding sensible min and max widths.\n   * - `auto`: fits width to internal content / time string.\n   * - `restricted`: static width that fits the longest possible time string.\n   * - `full`: expands to 100% of the container.\n   * Defaults to `'restricted'`.\n   */\n  width?: 'restricted' | 'full' | 'auto';\n  /**\n   * Reduces overall height to compressed form size\n   */\n  compressed?: boolean;\n  /**\n   * Used to localize e.g. month names, passed to `moment`\n   */\n  locale?: LocaleSpecifier;\n  /**\n   * Called every `@refreshInterval` ms while not `@isPaused` (and by the\n   * update button when the range has not changed), with `{ start, end,\n   * refreshInterval }`. If it returns a promise, the next call waits for\n   * it; if the promise rejects, refreshing stops.\n   */\n  onRefresh?: (props: {\n    start: string;\n    end: string;\n    refreshInterval: number;\n  }) => void | Promise<unknown>;\n  /**\n   * Adds the \"Refresh every\" section to the quick select popover; called\n   * with `{ refreshInterval, isPaused }` when the user changes them.\n   */\n  onRefreshChange?: ApplyRefreshInterval;\n  /**\n   * Callback for when the time changes.\n   */\n  onTimeChange: (props: {\n    start: string;\n    end: string;\n    isQuickSelection: boolean;\n    isInvalid: boolean;\n  }) => void;\n  // recentlyUsedRanges?: DurationRange[];\n  /**\n   * Refresh interval in milliseconds. Defaults to `1000`.\n   */\n  refreshInterval?: Milliseconds;\n  /**\n   * Start of the range, as date math (`'now-15m'`, `'now/d'`) or an ISO\n   * date. Defaults to `'now-15m'`.\n   */\n  start?: ShortDate;\n  /** End of the range, like `@start`. Defaults to `'now'`. */\n  end?: ShortDate;\n  /**\n   * moment format for times in the date picker. Defaults to `'HH:mm'`.\n   */\n  timeFormat?: string;\n  /** UTC offset in minutes for absolute dates, e.g. `-300`. */\n  utcOffset?: number;\n  /**\n   * Set showUpdateButton to false to immediately invoke onTimeChange for\n   * all start and end changes; `'iconOnly'` shows a compact button.\n   * Defaults to `true`.\n   */\n  showUpdateButton?: boolean | 'iconOnly';\n  /**\n   * Hides the actual input reducing to just the quick select button.\n   */\n  isQuickSelectOnly?: boolean;\n  /**\n   * Props passed to the update button #EuiSuperUpdateButtonProps\n   */\n  // updateButtonProps?: EuiSuperUpdateButtonProps;\n}\n\nexport default class EuiSuperDatePicker extends Component<EuiSuperDatePickerArgs> {\n  @argOrDefaultDecorator('MMM D, YYYY @ HH:mm:ss.SSS') dateFormat!: string;\n  @argOrDefaultDecorator('HH:mm') timeFormat!: string;\n  // @argOrDefaultDecorator('now-15m') start!: ShortDate;\n  // @argOrDefaultDecorator('now') end!: ShortDate;\n  @argOrDefaultDecorator(false) isAutoRefreshOnly!: boolean;\n  @argOrDefaultDecorator(false) isDisabled!: boolean;\n  @argOrDefaultDecorator(true) isPaused!: boolean;\n  @argOrDefaultDecorator(true) showUpdateButton!: boolean;\n  @argOrDefaultDecorator('restricted') width!: string;\n  // recentlyUsedRanges: [],\n  @argOrDefaultDecorator(1000) refreshInterval!: Milliseconds;\n\n  @service declare euiI18n: EuiI18n;\n\n  /**\n   * The range the user is editing, before it is applied with the update\n   * button. It remembers the @start/@end it was based on: when the parent\n   * passes a different range, the draft no longer applies and the picker\n   * shows the new arguments (like EUI React's getDerivedStateFromProps).\n   */\n  @tracked private draft?: {\n    start: ShortDate;\n    end: ShortDate;\n    hasChanged: boolean;\n    forStart: ShortDate | undefined;\n    forEnd: ShortDate | undefined;\n  };\n\n  private get currentDraft() {\n    const { draft } = this;\n\n    return draft &&\n      draft.forStart === this.args.start &&\n      draft.forEnd === this.args.end\n      ? draft\n      : undefined;\n  }\n\n  get start(): ShortDate {\n    return this.currentDraft?.start ?? this.args.start ?? 'now-15m';\n  }\n\n  get end(): ShortDate {\n    return this.currentDraft?.end ?? this.args.end ?? 'now';\n  }\n\n  get isInvalid(): boolean {\n    return isRangeInvalid(this.start, this.end);\n  }\n\n  get hasChanged(): boolean {\n    return this.currentDraft?.hasChanged ?? false;\n  }\n\n  private setDraft(start: ShortDate, end: ShortDate, hasChanged: boolean) {\n    this.draft = {\n      start,\n      end,\n      hasChanged,\n      forStart: this.args.start,\n      forEnd: this.args.end\n    };\n  }\n\n  get timeOptions() {\n    return useI18nTimeOptions(this.euiI18n);\n  }\n\n  setTime({ start, end }: DurationRange) {\n    this.setDraft(start, end, !(this.start === start && this.end === end));\n\n    if (!this.showUpdateButton) {\n      this.args.onTimeChange({\n        start,\n        end,\n        isQuickSelection: false,\n        isInvalid: isRangeInvalid(start, end)\n      });\n    }\n  }\n\n  applyTime() {\n    this.args.onTimeChange({\n      start: this.start,\n      end: this.end,\n      isQuickSelection: false,\n      isInvalid: false\n    });\n  }\n\n  @action\n  applyQuickTime({ start, end }: DurationRange) {\n    this.setDraft(start, end, false);\n\n    this.args.onTimeChange({\n      start,\n      end,\n      isQuickSelection: true,\n      isInvalid: false\n    });\n  }\n\n  @action\n  setStart(start: ShortDate) {\n    this.setTime({ start, end: this.end });\n  }\n\n  @action\n  setEnd(end: ShortDate) {\n    this.setTime({ start: this.start, end });\n  }\n\n  @action\n  handleClickUpdateButton() {\n    if (!this.hasChanged && this.args.onRefresh) {\n      void this.args.onRefresh({\n        start: this.start,\n        end: this.end,\n        refreshInterval: this.refreshInterval\n      });\n    } else {\n      this.applyTime();\n    }\n\n    if (this.currentDraft) {\n      this.draft = { ...this.currentDraft, hasChanged: false };\n    }\n  }\n\n  /**\n   * Calls `@onRefresh` every `@refreshInterval` ms while not `@isPaused`.\n   * A returned promise delays the next call until it settles; a rejected\n   * one stops the refreshing.\n   */\n  autoRefresh = modifier(\n    (\n      _element: Element,\n      [onRefresh, isPaused, refreshInterval]: [\n        EuiSuperDatePickerArgs['onRefresh'],\n        boolean,\n        number\n      ]\n    ) => {\n      if (!onRefresh || isPaused || !(refreshInterval > 0)) return;\n\n      let stopped = false;\n      let timer: ReturnType<typeof setTimeout>;\n\n      const tick = async () => {\n        try {\n          await onRefresh({ start: this.start, end: this.end, refreshInterval });\n        } catch {\n          stopped = true;\n        }\n\n        if (!stopped) timer = setTimeout(() => void tick(), refreshInterval);\n      };\n\n      timer = setTimeout(() => void tick(), refreshInterval);\n\n      return () => {\n        stopped = true;\n        clearTimeout(timer);\n      };\n    }\n  );\n\n  <template>\n    <EuiFlexGroup\n      {{this.autoRefresh @onRefresh this.isPaused this.refreshInterval}}\n      @gutterSize=\"s\"\n      @responsive={{false}}\n      class={{classNames\n        \"euiSuperDatePicker__flexWrapper\"\n        (unless\n          this.showUpdateButton\n          \"euiSuperDatePicker__flexWrapper--noUpdateButton\"\n        )\n        (if\n          this.isAutoRefreshOnly\n          \"euiSuperDatePicker__flexWrapper--isAutoRefreshOnly\"\n        )\n        (if\n          @isQuickSelectOnly\n          \"euiSuperDatePicker__flexWrapper--isQuickSelectOnly\"\n        )\n        (if (eq this.width \"full\") \"euiSuperDatePicker__flexWrapper--fullWidth\")\n        (if (eq this.width \"auto\") \"euiSuperDatePicker__flexWrapper--autoWidth\")\n      }}\n    >\n      <EuiFlexItem>\n        <EuiFormControlLayout\n          class=\"euiSuperDatePicker\"\n          @compressed={{@compressed}}\n          @isDisabled={{@isDisabled}}\n          @useGroup={{true}}\n        >\n          <:prepend>\n            <EuiQuickSelectPopover\n              @start={{this.start}}\n              @end={{this.end}}\n              @applyTime={{this.applyQuickTime}}\n              @timeOptions={{this.timeOptions}}\n              @isDisabled={{@isDisabled}}\n              @commonlyUsedRanges={{argOrDefault\n                @commonlyUsedRanges\n                this.timeOptions.commonDurationRanges\n              }}\n              @applyRefreshInterval={{@onRefreshChange}}\n              @isPaused={{this.isPaused}}\n              @refreshInterval={{this.refreshInterval}}\n            />\n          </:prepend>\n\n          <:field>\n            <EuiDatePickerRange\n              @className=\"euiDatePickerRange--inGroup\"\n              @isInvalid={{this.isInvalid}}\n              @disabled={{@isDisabled}}\n            >\n              <:startDateControl>\n                <EuiDatePopoverButton\n                  @className=\"euiSuperDatePicker__startPopoverButton\"\n                  @value={{this.start}}\n                  @compressed={{@compressed}}\n                  @position=\"start\"\n                  @isDisabled={{@isDisabled}}\n                  @dateFormat={{this.dateFormat}}\n                  @onChange={{this.setStart}}\n                  @isInvalid={{this.isInvalid}}\n                  @timeOptions={{this.timeOptions}}\n                  @needsUpdating={{this.hasChanged}}\n                  @locale={{@locale}}\n                />\n              </:startDateControl>\n\n              <:endDateControl>\n                <EuiDatePopoverButton\n                  @className=\"euiSuperDatePicker__startPopoverButton\"\n                  @value={{this.end}}\n                  @compressed={{@compressed}}\n                  @position=\"end\"\n                  @isDisabled={{@isDisabled}}\n                  @dateFormat={{this.dateFormat}}\n                  @onChange={{this.setEnd}}\n                  @isInvalid={{this.isInvalid}}\n                  @timeOptions={{this.timeOptions}}\n                  @roundUp={{true}}\n                  @needsUpdating={{this.hasChanged}}\n                  @locale={{@locale}}\n                />\n              </:endDateControl>\n            </EuiDatePickerRange>\n          </:field>\n        </EuiFormControlLayout>\n      </EuiFlexItem>\n\n      {{#if this.showUpdateButton}}\n        <EuiFlexItem @grow={{false}}>\n          <EuiSuperUpdateButton\n            @size={{if @compressed \"s\" \"m\"}}\n            @onClick={{this.handleClickUpdateButton}}\n            @isLoading={{@isLoading}}\n            @isDisabled={{or @isDisabled this.isInvalid}}\n            @needsUpdate={{this.hasChanged}}\n            @fill={{true}}\n            @iconOnly={{eq this.showUpdateButton \"iconOnly\"}}\n          />\n        </EuiFlexItem>\n      {{/if}}\n    </EuiFlexGroup>\n  </template>\n}\n"],"names":["EuiSuperDatePicker","Component","g","prototype","argOrDefaultDecorator","i","service","tracked","currentDraft","draft","forStart","args","start","forEnd","end","undefined","isInvalid","isRangeInvalid","hasChanged","setDraft","timeOptions","useI18nTimeOptions","euiI18n","setTime","showUpdateButton","onTimeChange","isQuickSelection","applyTime","applyQuickTime","n","action","setStart","setEnd","handleClickUpdateButton","onRefresh","refreshInterval","autoRefresh","modifier","_element","isPaused","stopped","timer","tick","setTimeout","clearTimeout","setComponentTemplate","precompileTemplate","strictMode","scope","EuiFlexGroup","classNames","eq","EuiFlexItem","EuiFormControlLayout","EuiQuickSelectPopover","argOrDefault","EuiDatePickerRange","EuiDatePopoverButton","EuiSuperUpdateButton","or"],"mappings":"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"}
+{"version":3,"file":"eui-super-date-picker.js","sources":["../../src/components/eui-super-date-picker.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport { modifier } from 'ember-modifier';\nimport { eq, or } from 'ember-truth-helpers';\n\nimport argOrDefault, { argOrDefaultDecorator } from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiFormControlLayout from './eui-form-control-layout.gts';\nimport EuiDatePopoverButton from './eui-super-date-picker/date-popover/eui-date-popover-button.gts';\nimport EuiDatePickerRange from './eui-super-date-picker/eui-date-picker-range.gts';\nimport EuiQuickSelectPopover from './eui-super-date-picker/eui-quick-select-popover.gts';\nimport EuiSuperUpdateButton from './eui-super-date-picker/eui-super-update-button.gts';\nimport { isRangeInvalid } from './eui-super-date-picker/utils/index.ts';\nimport { useI18nTimeOptions } from './eui-super-date-picker/utils/time-options.ts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type {\n  ApplyRefreshInterval,\n  DurationRange,\n  Milliseconds,\n  ShortDate\n} from './eui-super-date-picker/types/global';\nimport type { LocaleSpecifier } from 'moment';\n\nexport type { ApplyRefreshInterval, DurationRange, Milliseconds, ShortDate };\n\n/**\n * EuiSuperDatePicker picks a time range (absolute dates, relative like\n * \"last 15 minutes\", or \"now\") with a quick select popover and optional\n * auto refresh, as in Kibana. `@onTimeChange` receives date math strings.\n */\nexport interface EuiSuperDatePickerArgs {\n  /**\n   * Ranges listed as \"Commonly used\" in the quick select popover:\n   * `[{ start: 'now/d', end: 'now/d', label: 'Today' }, …]`. Defaults to\n   * EUI's list (Today, This week, Last 15 minutes, …).\n   */\n  commonlyUsedRanges?: DurationRange[];\n  // customQuickSelectPanels?: QuickSelectPanel[];\n  /**\n   * moment format for absolute dates. Defaults to\n   * `'MMM D, YYYY @ HH:mm:ss.SSS'`.\n   */\n  dateFormat?: string;\n  /**\n   * Set isAutoRefreshOnly to true to limit the component to only display\n   * auto refresh content. Defaults to `false`.\n   */\n  isAutoRefreshOnly?: boolean;\n  /** Disables the picker. Defaults to `false`. */\n  isDisabled?: boolean;\n  /** Shows the update button's loading state, e.g. while data refreshes. */\n  isLoading?: boolean;\n  /**\n   * Whether auto refresh is paused (with `@onRefreshChange`).\n   * Defaults to `true`.\n   */\n  isPaused?: boolean;\n  /**\n   * Sets the overall width by adding sensible min and max widths.\n   * - `auto`: fits width to internal content / time string.\n   * - `restricted`: static width that fits the longest possible time string.\n   * - `full`: expands to 100% of the container.\n   * Defaults to `'restricted'`.\n   */\n  width?: 'restricted' | 'full' | 'auto';\n  /**\n   * Reduces overall height to compressed form size\n   */\n  compressed?: boolean;\n  /**\n   * Used to localize e.g. month names, passed to `moment`\n   */\n  locale?: LocaleSpecifier;\n  /**\n   * Called every `@refreshInterval` ms while not `@isPaused` (and by the\n   * update button when the range has not changed), with `{ start, end,\n   * refreshInterval }`. If it returns a promise, the next call waits for\n   * it; if the promise rejects, refreshing stops.\n   */\n  onRefresh?: (props: {\n    start: string;\n    end: string;\n    refreshInterval: number;\n  }) => void | Promise<unknown>;\n  /**\n   * Adds the \"Refresh every\" section to the quick select popover; called\n   * with `{ refreshInterval, isPaused }` when the user changes them.\n   */\n  onRefreshChange?: ApplyRefreshInterval;\n  /**\n   * Callback for when the time changes.\n   */\n  onTimeChange: (props: {\n    start: string;\n    end: string;\n    isQuickSelection: boolean;\n    isInvalid: boolean;\n  }) => void;\n  // recentlyUsedRanges?: DurationRange[];\n  /**\n   * Refresh interval in milliseconds. Defaults to `1000`.\n   */\n  refreshInterval?: Milliseconds;\n  /**\n   * Start of the range, as date math (`'now-15m'`, `'now/d'`) or an ISO\n   * date. Defaults to `'now-15m'`.\n   */\n  start?: ShortDate;\n  /** End of the range, like `@start`. Defaults to `'now'`. */\n  end?: ShortDate;\n  /**\n   * moment format for times in the date picker. Defaults to `'HH:mm'`.\n   */\n  timeFormat?: string;\n  /** UTC offset in minutes for absolute dates, e.g. `-300`. */\n  utcOffset?: number;\n  /**\n   * Set showUpdateButton to false to immediately invoke onTimeChange for\n   * all start and end changes; `'iconOnly'` shows a compact button.\n   * Defaults to `true`.\n   */\n  showUpdateButton?: boolean | 'iconOnly';\n  /**\n   * Hides the actual input reducing to just the quick select button.\n   */\n  isQuickSelectOnly?: boolean;\n  /**\n   * Props passed to the update button #EuiSuperUpdateButtonProps\n   */\n  // updateButtonProps?: EuiSuperUpdateButtonProps;\n}\n\nexport default class EuiSuperDatePicker extends Component<EuiSuperDatePickerArgs> {\n  @argOrDefaultDecorator('MMM D, YYYY @ HH:mm:ss.SSS') dateFormat!: string;\n  @argOrDefaultDecorator('HH:mm') timeFormat!: string;\n  // @argOrDefaultDecorator('now-15m') start!: ShortDate;\n  // @argOrDefaultDecorator('now') end!: ShortDate;\n  @argOrDefaultDecorator(false) isAutoRefreshOnly!: boolean;\n  @argOrDefaultDecorator(false) isDisabled!: boolean;\n  @argOrDefaultDecorator(true) isPaused!: boolean;\n  @argOrDefaultDecorator(true) showUpdateButton!: boolean | 'iconOnly';\n  @argOrDefaultDecorator('restricted') width!: string;\n  // recentlyUsedRanges: [],\n  @argOrDefaultDecorator(1000) refreshInterval!: Milliseconds;\n\n  @service declare euiI18n: EuiI18n;\n\n  /**\n   * The range the user is editing, before it is applied with the update\n   * button. It remembers the @start/@end it was based on: when the parent\n   * passes a different range, the draft no longer applies and the picker\n   * shows the new arguments (like EUI React's getDerivedStateFromProps).\n   */\n  @tracked private draft?: {\n    start: ShortDate;\n    end: ShortDate;\n    hasChanged: boolean;\n    forStart: ShortDate | undefined;\n    forEnd: ShortDate | undefined;\n  };\n\n  private get currentDraft() {\n    const { draft } = this;\n\n    return draft &&\n      draft.forStart === this.args.start &&\n      draft.forEnd === this.args.end\n      ? draft\n      : undefined;\n  }\n\n  get start(): ShortDate {\n    return this.currentDraft?.start ?? this.args.start ?? 'now-15m';\n  }\n\n  get end(): ShortDate {\n    return this.currentDraft?.end ?? this.args.end ?? 'now';\n  }\n\n  get isInvalid(): boolean {\n    return isRangeInvalid(this.start, this.end);\n  }\n\n  get hasChanged(): boolean {\n    return this.currentDraft?.hasChanged ?? false;\n  }\n\n  private setDraft(start: ShortDate, end: ShortDate, hasChanged: boolean) {\n    this.draft = {\n      start,\n      end,\n      hasChanged,\n      forStart: this.args.start,\n      forEnd: this.args.end\n    };\n  }\n\n  get timeOptions() {\n    return useI18nTimeOptions(this.euiI18n);\n  }\n\n  setTime({ start, end }: DurationRange) {\n    this.setDraft(start, end, !(this.start === start && this.end === end));\n\n    if (!this.showUpdateButton) {\n      this.args.onTimeChange({\n        start,\n        end,\n        isQuickSelection: false,\n        isInvalid: isRangeInvalid(start, end)\n      });\n    }\n  }\n\n  applyTime() {\n    this.args.onTimeChange({\n      start: this.start,\n      end: this.end,\n      isQuickSelection: false,\n      isInvalid: false\n    });\n  }\n\n  @action\n  applyQuickTime({ start, end }: DurationRange) {\n    this.setDraft(start, end, false);\n\n    this.args.onTimeChange({\n      start,\n      end,\n      isQuickSelection: true,\n      isInvalid: false\n    });\n  }\n\n  @action\n  setStart(start: ShortDate) {\n    this.setTime({ start, end: this.end });\n  }\n\n  @action\n  setEnd(end: ShortDate) {\n    this.setTime({ start: this.start, end });\n  }\n\n  @action\n  handleClickUpdateButton() {\n    if (!this.hasChanged && this.args.onRefresh) {\n      void this.args.onRefresh({\n        start: this.start,\n        end: this.end,\n        refreshInterval: this.refreshInterval\n      });\n    } else {\n      this.applyTime();\n    }\n\n    if (this.currentDraft) {\n      this.draft = { ...this.currentDraft, hasChanged: false };\n    }\n  }\n\n  /**\n   * Calls `@onRefresh` every `@refreshInterval` ms while not `@isPaused`.\n   * A returned promise delays the next call until it settles; a rejected\n   * one stops the refreshing.\n   */\n  autoRefresh = modifier(\n    (\n      _element: Element,\n      [onRefresh, isPaused, refreshInterval]: [\n        EuiSuperDatePickerArgs['onRefresh'],\n        boolean,\n        number\n      ]\n    ) => {\n      if (!onRefresh || isPaused || !(refreshInterval > 0)) return;\n\n      let stopped = false;\n      let timer: ReturnType<typeof setTimeout>;\n\n      const tick = async () => {\n        try {\n          await onRefresh({ start: this.start, end: this.end, refreshInterval });\n        } catch {\n          stopped = true;\n        }\n\n        if (!stopped) timer = setTimeout(() => void tick(), refreshInterval);\n      };\n\n      timer = setTimeout(() => void tick(), refreshInterval);\n\n      return () => {\n        stopped = true;\n        clearTimeout(timer);\n      };\n    }\n  );\n\n  <template>\n    <EuiFlexGroup\n      {{this.autoRefresh @onRefresh this.isPaused this.refreshInterval}}\n      @gutterSize=\"s\"\n      @responsive={{false}}\n      class={{classNames\n        \"euiSuperDatePicker__flexWrapper\"\n        (unless\n          this.showUpdateButton\n          \"euiSuperDatePicker__flexWrapper--noUpdateButton\"\n        )\n        (if\n          this.isAutoRefreshOnly\n          \"euiSuperDatePicker__flexWrapper--isAutoRefreshOnly\"\n        )\n        (if\n          @isQuickSelectOnly\n          \"euiSuperDatePicker__flexWrapper--isQuickSelectOnly\"\n        )\n        (if (eq this.width \"full\") \"euiSuperDatePicker__flexWrapper--fullWidth\")\n        (if (eq this.width \"auto\") \"euiSuperDatePicker__flexWrapper--autoWidth\")\n      }}\n    >\n      <EuiFlexItem>\n        <EuiFormControlLayout\n          class=\"euiSuperDatePicker\"\n          @compressed={{@compressed}}\n          @isDisabled={{@isDisabled}}\n          @useGroup={{true}}\n        >\n          <:prepend>\n            <EuiQuickSelectPopover\n              @start={{this.start}}\n              @end={{this.end}}\n              @applyTime={{this.applyQuickTime}}\n              @timeOptions={{this.timeOptions}}\n              @isDisabled={{@isDisabled}}\n              @commonlyUsedRanges={{argOrDefault\n                @commonlyUsedRanges\n                this.timeOptions.commonDurationRanges\n              }}\n              @applyRefreshInterval={{@onRefreshChange}}\n              @isPaused={{this.isPaused}}\n              @refreshInterval={{this.refreshInterval}}\n            />\n          </:prepend>\n\n          <:field>\n            <EuiDatePickerRange\n              @className=\"euiDatePickerRange--inGroup\"\n              @isInvalid={{this.isInvalid}}\n              @disabled={{@isDisabled}}\n            >\n              <:startDateControl>\n                <EuiDatePopoverButton\n                  @className=\"euiSuperDatePicker__startPopoverButton\"\n                  @value={{this.start}}\n                  @compressed={{@compressed}}\n                  @position=\"start\"\n                  @isDisabled={{@isDisabled}}\n                  @dateFormat={{this.dateFormat}}\n                  @onChange={{this.setStart}}\n                  @isInvalid={{this.isInvalid}}\n                  @timeOptions={{this.timeOptions}}\n                  @needsUpdating={{this.hasChanged}}\n                  @locale={{@locale}}\n                />\n              </:startDateControl>\n\n              <:endDateControl>\n                <EuiDatePopoverButton\n                  @className=\"euiSuperDatePicker__startPopoverButton\"\n                  @value={{this.end}}\n                  @compressed={{@compressed}}\n                  @position=\"end\"\n                  @isDisabled={{@isDisabled}}\n                  @dateFormat={{this.dateFormat}}\n                  @onChange={{this.setEnd}}\n                  @isInvalid={{this.isInvalid}}\n                  @timeOptions={{this.timeOptions}}\n                  @roundUp={{true}}\n                  @needsUpdating={{this.hasChanged}}\n                  @locale={{@locale}}\n                />\n              </:endDateControl>\n            </EuiDatePickerRange>\n          </:field>\n        </EuiFormControlLayout>\n      </EuiFlexItem>\n\n      {{#if this.showUpdateButton}}\n        <EuiFlexItem @grow={{false}}>\n          <EuiSuperUpdateButton\n            @size={{if @compressed \"s\" \"m\"}}\n            @onClick={{this.handleClickUpdateButton}}\n            @isLoading={{@isLoading}}\n            @isDisabled={{or @isDisabled this.isInvalid}}\n            @needsUpdate={{this.hasChanged}}\n            @fill={{true}}\n            @iconOnly={{eq this.showUpdateButton \"iconOnly\"}}\n          />\n        </EuiFlexItem>\n      {{/if}}\n    </EuiFlexGroup>\n  </template>\n}\n"],"names":["EuiSuperDatePicker","Component","g","prototype","argOrDefaultDecorator","i","service","tracked","currentDraft","draft","forStart","args","start","forEnd","end","undefined","isInvalid","isRangeInvalid","hasChanged","setDraft","timeOptions","useI18nTimeOptions","euiI18n","setTime","showUpdateButton","onTimeChange","isQuickSelection","applyTime","applyQuickTime","n","action","setStart","setEnd","handleClickUpdateButton","onRefresh","refreshInterval","autoRefresh","modifier","_element","isPaused","stopped","timer","tick","setTimeout","clearTimeout","setComponentTemplate","precompileTemplate","strictMode","scope","EuiFlexGroup","classNames","eq","EuiFlexItem","EuiFormControlLayout","EuiQuickSelectPopover","argOrDefault","EuiDatePickerRange","EuiDatePopoverButton","EuiSuperUpdateButton","or"],"mappings":"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"}

package/dist/components/eui-tabbed-content.js

@@ -66,7 +66,7 @@ class EuiTabbedContentComponent extends Component {
     const currentTarget = blurEvent.currentTarget;
     const relatedTarget = blurEvent.relatedTarget;
     if (currentTarget.contains(relatedTarget) === false) {
-      this.inFocus = true;
+      this.inFocus = false;
     }
   };
   onTabClick = selectedTab => {
@@ -87,9 +87,10 @@ class EuiTabbedContentComponent extends Component {
     }
   };
   focusTab = () => {
-    if (this.tabsRef) {
-      const targetTab = this.tabsRef.querySelector(`#${this.selectedTabId}`);
-      targetTab.focus();
+    const selectedTab = this.selectedTab;
+    if (this.tabsRef && selectedTab) {
+      const targetTab = this.tabsRef.querySelector(`#${CSS.escape(selectedTab.id)}`);
+      targetTab?.focus();
     }
   };
   initializeFocus = () => {
@@ -104,7 +105,7 @@ class EuiTabbedContentComponent extends Component {
     }
   };
   static {
-    setComponentTemplate(precompileTemplate("{{#let (randomId) as |rootId|}}\n  <div class={{@className}} ...attributes>\n    <EuiTabs @expand={{@expand}} @display={{@display}} @size={{@size}} {{on \"focus\" this.initializeFocus}} {{didInsert this.setTabsRef}}>\n      {{#each @tabs as |tab|}}\n        <EuiTab @id={{tab.id}} aria-controls={{rootId}} @isSelected={{eq tab.id this.selectedTab.id}} @disabled={{tab.disabled}} {{on \"click\" (fn this.onTabClick tab)}}>\n          {{tab.name}}\n        </EuiTab>\n      {{/each}}\n    </EuiTabs>\n\n    {{#let (findBy \"id\" (if this.selectedTabId this.selectedTabId \"\") @tabs) as |currentTab|}}\n      {{#if currentTab}}\n        <div role=\"tabpanel\" id={{rootId}} aria-labelledby={{currentTab.id}}>\n          {{#if (has-block \"selectedTabContent\")}}\n            {{yield currentTab to=\"selectedTabContent\"}}\n          {{else}}\n            {{currentTab.content}}\n          {{/if}}\n        </div>\n      {{/if}}\n    {{/let}}\n  </div>\n{{/let}}", {
+    setComponentTemplate(precompileTemplate("{{#let (randomId) as |rootId|}}\n  <div class={{@className}} ...attributes>\n    <EuiTabs @expand={{@expand}} @display={{@display}} @size={{@size}} {{on \"focusin\" this.initializeFocus}} {{didInsert this.setTabsRef}}>\n      {{#each @tabs as |tab|}}\n        <EuiTab @id={{tab.id}} aria-controls={{rootId}} @isSelected={{eq tab.id this.selectedTab.id}} @disabled={{tab.disabled}} {{on \"click\" (fn this.onTabClick tab)}}>\n          {{tab.name}}\n        </EuiTab>\n      {{/each}}\n    </EuiTabs>\n\n    {{#let (findBy \"id\" (if this.selectedTab this.selectedTab.id \"\") @tabs) as |currentTab|}}\n      {{#if currentTab}}\n        <div role=\"tabpanel\" id={{rootId}} aria-labelledby={{currentTab.id}}>\n          {{#if (has-block \"selectedTabContent\")}}\n            {{yield currentTab to=\"selectedTabContent\"}}\n          {{else}}\n            {{currentTab.content}}\n          {{/if}}\n        </div>\n      {{/if}}\n    {{/let}}\n  </div>\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         randomId,

package/dist/components/eui-tabbed-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-tabbed-content.js","sources":["../../src/components/eui-tabbed-content.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\nimport { scheduleOnce } from '@ember/runloop';\nimport type Owner from '@ember/owner';\n\nimport findBy from '@nullvoxpopuli/ember-composable-helpers/helpers/find-by';\nimport { eq } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport EuiTab from './eui-tab.gts';\nimport EuiTabs from './eui-tabs.gts';\n\nimport type { CommonArgs } from './common.ts';\nimport type { EuiTabsSignature } from './eui-tabs';\nimport type { ComponentLike } from '@glint/template';\n\n/** A tab of EuiTabbedContent. */\nexport interface EuiTabbedContentTab {\n  /** Unique id. */\n  id: string;\n  /** The tab's label. */\n  name: string;\n  /**\n   * The panel shown while the tab is selected (a component). Or render\n   * panels with the `<:selectedTabContent>` block.\n   */\n  content?: ComponentLike;\n  /** Disables the tab. */\n  disabled?: boolean;\n}\n\nexport type EuiTabbedContentArgs = CommonArgs & {\n  /**\n   * When tabbing into the tabs, set the focus on `initial` for the first tab,\n   * or `selected` for the currently selected tab. Best use case is for inside of\n   * overlay content like popovers or flyouts.\n   */\n  autoFocus?: 'initial' | 'selected';\n  /**\n   * Choose `default` or alternative `condensed` display styles\n   */\n  display?: EuiTabsSignature['Args']['display'];\n  /**\n   * Evenly stretches each tab to fill the horizontal space\n   */\n  expand?: boolean;\n  /**\n   * Use this prop to set the initially selected tab while letting the tabbed content component\n   * control selection state internally\n   */\n  initialSelectedTab?: EuiTabbedContentTab;\n  /** Called with the clicked tab. */\n  onTabClick?: (selectedTab: EuiTabbedContentTab) => void;\n  /**\n   * Use this prop if you want to control selection state within the owner component\n   */\n  selectedTab?: EuiTabbedContentTab;\n  /** Size of the tabs: `'s'`, `'m'`, `'l'` or `'xl'`. Defaults to `'m'`. */\n  size?: EuiTabsSignature['Args']['size'];\n  /**\n   * Each tab needs id and content properties, so we can associate it with its panel for accessibility.\n   * The name property (a node) is also required to display to the user.\n   */\n  tabs: EuiTabbedContentTab[];\n};\n\n/** Tabs with their panels, managing the selected tab for you. For custom layouts use EuiTabs. */\nexport interface EuiTabbedContentSignature {\n  Element: HTMLDivElement;\n  Args: EuiTabbedContentArgs;\n  Blocks: {\n    /** Unused. */\n    default: [EuiTabbedContentTab];\n    /**\n     * Renders the selected tab's panel (instead of its `content`); yields\n     * the tab: `<:selectedTabContent as |tab|>{{#if (eq tab.id \"a\")}}…`.\n     */\n    selectedTabContent: [EuiTabbedContentTab];\n  };\n}\n\nexport default class EuiTabbedContentComponent extends Component<EuiTabbedContentSignature> {\n  @tracked selectedTabId;\n  @tracked inFocus: boolean = false;\n  tabsRef?: Element;\n\n  get autoFocus() {\n    return this.args.autoFocus || 'initial';\n  }\n\n  constructor(owner: Owner, args: EuiTabbedContentArgs) {\n    super(owner, args);\n\n    const { initialSelectedTab, selectedTab, tabs } = this.args;\n\n    // Only track selection state if it's not controlled externally.\n    if (!selectedTab) {\n      this.selectedTabId =\n        (initialSelectedTab && initialSelectedTab.id) || tabs[0]?.id;\n    }\n  }\n\n  get selectedTab() {\n    const { selectedTab: externalSelectedTab, tabs } = this.args;\n\n    return (\n      externalSelectedTab ||\n      tabs.find((tab: EuiTabbedContentTab) => tab.id === this.selectedTabId)\n    );\n  }\n\n  setTabsRef = (element: Element) => {\n    this.tabsRef = element;\n    // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)\n    //@ts-expect-error\n    this.tabsRef.addEventListener('focusout', this.removeFocus);\n  };\n\n  willDestroy(): void {\n    super.willDestroy();\n\n    if (this.tabsRef) {\n      //@ts-expect-error\n      this.tabsRef.removeEventListener('focusout', this.removeFocus);\n    }\n\n    this.tabsRef = undefined;\n  }\n\n  removeFocus = (blurEvent: FocusEvent) => {\n    // only set inFocus to false if the wrapping div doesn't contain the now-focusing element\n    const currentTarget = blurEvent.currentTarget! as HTMLElement;\n    const relatedTarget = blurEvent.relatedTarget! as HTMLElement;\n\n    if (currentTarget.contains(relatedTarget) === false) {\n      this.inFocus = true;\n    }\n  };\n\n  onTabClick = (selectedTab: EuiTabbedContentTab) => {\n    const { onTabClick, selectedTab: externalSelectedTab } = this.args;\n\n    if (onTabClick) {\n      onTabClick(selectedTab);\n    }\n\n    // Only track selection state if it's not controlled externally.\n    if (!externalSelectedTab) {\n      this.selectedTabId = selectedTab.id;\n\n      const focusTab = () => {\n        this.focusTab();\n      };\n\n      scheduleOnce('afterRender', this, focusTab);\n    }\n  };\n\n  focusTab = () => {\n    if (this.tabsRef) {\n      const targetTab: HTMLDivElement | null = this.tabsRef.querySelector(\n        `#${this.selectedTabId}`\n      );\n\n      targetTab!.focus();\n    }\n  };\n\n  initializeFocus = () => {\n    if (!this.inFocus && this.autoFocus === 'selected') {\n      // Must wait for setState to finish before calling `.focus()`\n      // as the focus call triggers a blur on the first tab\n      this.inFocus = true;\n\n      const focusTab = () => {\n        this.focusTab();\n      };\n\n      scheduleOnce('afterRender', this, focusTab);\n    }\n  };\n\n  <template>\n    {{#let (randomId) as |rootId|}}\n      <div class={{@className}} ...attributes>\n        <EuiTabs\n          @expand={{@expand}}\n          @display={{@display}}\n          @size={{@size}}\n          {{on \"focus\" this.initializeFocus}}\n          {{didInsert this.setTabsRef}}\n        >\n          {{#each @tabs as |tab|}}\n            <EuiTab\n              @id={{tab.id}}\n              aria-controls={{rootId}}\n              @isSelected={{eq tab.id this.selectedTab.id}}\n              @disabled={{tab.disabled}}\n              {{on \"click\" (fn this.onTabClick tab)}}\n            >\n              {{tab.name}}\n            </EuiTab>\n          {{/each}}\n        </EuiTabs>\n\n        {{#let\n          (findBy \"id\" (if this.selectedTabId this.selectedTabId \"\") @tabs)\n          as |currentTab|\n        }}\n          {{#if currentTab}}\n            <div\n              role=\"tabpanel\"\n              id={{rootId}}\n              aria-labelledby={{currentTab.id}}\n            >\n              {{#if (has-block \"selectedTabContent\")}}\n                {{yield currentTab to=\"selectedTabContent\"}}\n              {{else}}\n                {{currentTab.content}}\n              {{/if}}\n            </div>\n          {{/if}}\n        {{/let}}\n      </div>\n    {{/let}}\n  </template>\n}\n"],"names":["EuiTabbedContentComponent","Component","g","prototype","tracked","i","tabsRef","autoFocus","args","constructor","owner","initialSelectedTab","selectedTab","tabs","selectedTabId","id","externalSelectedTab","find","tab","setTabsRef","element","addEventListener","removeFocus","willDestroy","removeEventListener","undefined","blurEvent","currentTarget","relatedTarget","contains","inFocus","onTabClick","focusTab","scheduleOnce","targetTab","querySelector","focus","initializeFocus","setComponentTemplate","precompileTemplate","strictMode","scope","randomId","EuiTabs","on","didInsert","EuiTab","eq","fn","findBy"],"mappings":"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"}
+{"version":3,"file":"eui-tabbed-content.js","sources":["../../src/components/eui-tabbed-content.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\nimport { scheduleOnce } from '@ember/runloop';\nimport type Owner from '@ember/owner';\n\nimport findBy from '@nullvoxpopuli/ember-composable-helpers/helpers/find-by';\nimport { eq } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport EuiTab from './eui-tab.gts';\nimport EuiTabs from './eui-tabs.gts';\n\nimport type { CommonArgs } from './common.ts';\nimport type { EuiTabsSignature } from './eui-tabs';\nimport type { ComponentLike } from '@glint/template';\n\n/** A tab of EuiTabbedContent. */\nexport interface EuiTabbedContentTab {\n  /** Unique id. */\n  id: string;\n  /** The tab's label. */\n  name: string;\n  /**\n   * The panel shown while the tab is selected (a component). Or render\n   * panels with the `<:selectedTabContent>` block.\n   */\n  content?: ComponentLike;\n  /** Disables the tab. */\n  disabled?: boolean;\n}\n\nexport type EuiTabbedContentArgs = CommonArgs & {\n  /**\n   * When tabbing into the tabs, set the focus on `initial` for the first tab,\n   * or `selected` for the currently selected tab. Best use case is for inside of\n   * overlay content like popovers or flyouts.\n   */\n  autoFocus?: 'initial' | 'selected';\n  /**\n   * Choose `default` or alternative `condensed` display styles\n   */\n  display?: EuiTabsSignature['Args']['display'];\n  /**\n   * Evenly stretches each tab to fill the horizontal space\n   */\n  expand?: boolean;\n  /**\n   * Use this prop to set the initially selected tab while letting the tabbed content component\n   * control selection state internally\n   */\n  initialSelectedTab?: EuiTabbedContentTab;\n  /** Called with the clicked tab. */\n  onTabClick?: (selectedTab: EuiTabbedContentTab) => void;\n  /**\n   * Use this prop if you want to control selection state within the owner component\n   */\n  selectedTab?: EuiTabbedContentTab;\n  /** Size of the tabs: `'s'`, `'m'`, `'l'` or `'xl'`. Defaults to `'m'`. */\n  size?: EuiTabsSignature['Args']['size'];\n  /**\n   * Each tab needs id and content properties, so we can associate it with its panel for accessibility.\n   * The name property (a node) is also required to display to the user.\n   */\n  tabs: EuiTabbedContentTab[];\n};\n\n/** Tabs with their panels, managing the selected tab for you. For custom layouts use EuiTabs. */\nexport interface EuiTabbedContentSignature {\n  Element: HTMLDivElement;\n  Args: EuiTabbedContentArgs;\n  Blocks: {\n    /** Unused. */\n    default: [EuiTabbedContentTab];\n    /**\n     * Renders the selected tab's panel (instead of its `content`); yields\n     * the tab: `<:selectedTabContent as |tab|>{{#if (eq tab.id \"a\")}}…`.\n     */\n    selectedTabContent: [EuiTabbedContentTab];\n  };\n}\n\nexport default class EuiTabbedContentComponent extends Component<EuiTabbedContentSignature> {\n  @tracked selectedTabId;\n  @tracked inFocus: boolean = false;\n  tabsRef?: Element;\n\n  get autoFocus() {\n    return this.args.autoFocus || 'initial';\n  }\n\n  constructor(owner: Owner, args: EuiTabbedContentArgs) {\n    super(owner, args);\n\n    const { initialSelectedTab, selectedTab, tabs } = this.args;\n\n    // Only track selection state if it's not controlled externally.\n    if (!selectedTab) {\n      this.selectedTabId =\n        (initialSelectedTab && initialSelectedTab.id) || tabs[0]?.id;\n    }\n  }\n\n  get selectedTab() {\n    const { selectedTab: externalSelectedTab, tabs } = this.args;\n\n    return (\n      externalSelectedTab ||\n      tabs.find((tab: EuiTabbedContentTab) => tab.id === this.selectedTabId)\n    );\n  }\n\n  setTabsRef = (element: Element) => {\n    this.tabsRef = element;\n    // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)\n    //@ts-expect-error\n    this.tabsRef.addEventListener('focusout', this.removeFocus);\n  };\n\n  willDestroy(): void {\n    super.willDestroy();\n\n    if (this.tabsRef) {\n      //@ts-expect-error\n      this.tabsRef.removeEventListener('focusout', this.removeFocus);\n    }\n\n    this.tabsRef = undefined;\n  }\n\n  removeFocus = (blurEvent: FocusEvent) => {\n    // only set inFocus to false if the wrapping div doesn't contain the now-focusing element\n    const currentTarget = blurEvent.currentTarget! as HTMLElement;\n    const relatedTarget = blurEvent.relatedTarget! as HTMLElement;\n\n    if (currentTarget.contains(relatedTarget) === false) {\n      this.inFocus = false;\n    }\n  };\n\n  onTabClick = (selectedTab: EuiTabbedContentTab) => {\n    const { onTabClick, selectedTab: externalSelectedTab } = this.args;\n\n    if (onTabClick) {\n      onTabClick(selectedTab);\n    }\n\n    // Only track selection state if it's not controlled externally.\n    if (!externalSelectedTab) {\n      this.selectedTabId = selectedTab.id;\n\n      const focusTab = () => {\n        this.focusTab();\n      };\n\n      scheduleOnce('afterRender', this, focusTab);\n    }\n  };\n\n  focusTab = () => {\n    const selectedTab = this.selectedTab;\n\n    if (this.tabsRef && selectedTab) {\n      const targetTab = this.tabsRef.querySelector<HTMLElement>(\n        `#${CSS.escape(selectedTab.id)}`\n      );\n\n      targetTab?.focus();\n    }\n  };\n\n  initializeFocus = () => {\n    if (!this.inFocus && this.autoFocus === 'selected') {\n      // Must wait for setState to finish before calling `.focus()`\n      // as the focus call triggers a blur on the first tab\n      this.inFocus = true;\n\n      const focusTab = () => {\n        this.focusTab();\n      };\n\n      scheduleOnce('afterRender', this, focusTab);\n    }\n  };\n\n  <template>\n    {{#let (randomId) as |rootId|}}\n      <div class={{@className}} ...attributes>\n        <EuiTabs\n          @expand={{@expand}}\n          @display={{@display}}\n          @size={{@size}}\n          {{on \"focusin\" this.initializeFocus}}\n          {{didInsert this.setTabsRef}}\n        >\n          {{#each @tabs as |tab|}}\n            <EuiTab\n              @id={{tab.id}}\n              aria-controls={{rootId}}\n              @isSelected={{eq tab.id this.selectedTab.id}}\n              @disabled={{tab.disabled}}\n              {{on \"click\" (fn this.onTabClick tab)}}\n            >\n              {{tab.name}}\n            </EuiTab>\n          {{/each}}\n        </EuiTabs>\n\n        {{#let\n          (findBy \"id\" (if this.selectedTab this.selectedTab.id \"\") @tabs)\n          as |currentTab|\n        }}\n          {{#if currentTab}}\n            <div\n              role=\"tabpanel\"\n              id={{rootId}}\n              aria-labelledby={{currentTab.id}}\n            >\n              {{#if (has-block \"selectedTabContent\")}}\n                {{yield currentTab to=\"selectedTabContent\"}}\n              {{else}}\n                {{currentTab.content}}\n              {{/if}}\n            </div>\n          {{/if}}\n        {{/let}}\n      </div>\n    {{/let}}\n  </template>\n}\n"],"names":["EuiTabbedContentComponent","Component","g","prototype","tracked","i","tabsRef","autoFocus","args","constructor","owner","initialSelectedTab","selectedTab","tabs","selectedTabId","id","externalSelectedTab","find","tab","setTabsRef","element","addEventListener","removeFocus","willDestroy","removeEventListener","undefined","blurEvent","currentTarget","relatedTarget","contains","inFocus","onTabClick","focusTab","scheduleOnce","targetTab","querySelector","CSS","escape","focus","initializeFocus","setComponentTemplate","precompileTemplate","strictMode","scope","randomId","EuiTabs","on","didInsert","EuiTab","eq","fn","findBy"],"mappings":"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"}

package/dist/components/eui-table-header-cell.js

@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 import didInsert from '@ember/render-modifiers/modifiers/did-insert';
 import { on } from '@ember/modifier';
 import { service } from '@ember/service';
-import { element } from 'ember-element-helper';
 import { alignClasses, widthStyle } from '../-private/table.js';
 import EuiIcon from './eui-icon.js';
 import EuiImage from './eui-inner-text.js';
@@ -39,7 +38,6 @@ class EuiTableHeaderCell extends Component {
     setComponentTemplate(precompileTemplate("{{#let (element (if (has-block) \"th\" \"td\")) as |Cell|}}\n  <Cell class={{this.classes}} scope={{if (has-block) (if @scope @scope \"col\")}} role=\"columnheader\" aria-sort={{this.ariaSort}} aria-live={{if this.isSortable \"polite\"}} style={{widthStyle @width}} ...attributes>\n    {{#if (and2 @onSort (not2 @readOnly))}}\n      <button type=\"button\" class=\"euiTableHeaderButton {{if @isSorted \"euiTableHeaderButton-isSorted\"}}\" data-test-subj=\"tableHeaderSortButton\" {{on \"click\" (sortHandler @onSort)}}>\n        <span class={{this.contentClasses}}>\n          <EuiInnerText as |ref innerText|>\n            <span class=\"euiTableCellContent__text\" title={{this.title innerText}} {{didInsert ref}}>{{yield}}</span>\n          </EuiInnerText>\n          {{#if @description}}\n            <EuiScreenReaderOnly>{{@description}}</EuiScreenReaderOnly>\n          {{/if}}\n          {{#if @isSorted}}\n            <EuiIcon class=\"euiTableSortIcon\" @type={{if @isSortAscending \"sortUp\" \"sortDown\"}} @size=\"m\" />\n          {{/if}}\n        </span>\n      </button>\n    {{else}}\n      <span class={{this.contentClasses}}>\n        <EuiInnerText as |ref innerText|>\n          <span class=\"euiTableCellContent__text\" title={{this.title innerText}} {{didInsert ref}}>{{yield}}</span>\n        </EuiInnerText>\n        {{#if @description}}\n          <EuiScreenReaderOnly>{{@description}}</EuiScreenReaderOnly>\n        {{/if}}\n        {{#if (and2 this.isSortable @isSorted)}}\n          <EuiIcon class=\"euiTableSortIcon\" @type={{if @isSortAscending \"sortUp\" \"sortDown\"}} @size=\"m\" />\n        {{/if}}\n      </span>\n    {{/if}}\n  </Cell>\n{{/let}}", {
       strictMode: true,
       scope: () => ({
-        element,
         widthStyle,
         and2,
         not2,

package/dist/components/eui-table-header-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-table-header-cell.js","sources":["../../src/components/eui-table-header-cell.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\nimport { on } from '@ember/modifier';\nimport { service } from '@ember/service';\n\nimport { element } from 'ember-element-helper';\n\nimport { alignClasses, widthStyle } from '../-private/table.ts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiInnerText from './eui-inner-text.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { TableAlignment, TableMobileOptions } from '../-private/table.ts';\n\n/**\n * A column header of an `EuiTable`. With `@onSort` it is a button that\n * shows the sort direction (`@isSorted`, `@isSortAscending`).\n */\nexport interface EuiTableHeaderCellSignature {\n  Element: HTMLTableCellElement;\n  Args: {\n    /** `'left'`, `'right'` (numbers) or `'center'`. Defaults to `'left'`. */\n    align?: TableAlignment;\n    /** Makes the header a button sorting the column. */\n    onSort?: (event: MouseEvent) => void;\n    /** The table is sorted by this column: shows the direction. */\n    isSorted?: boolean;\n    /** Ascending order (arrow up); descending otherwise. */\n    isSortAscending?: boolean;\n    /** Shows the sort state without the button. */\n    readOnly?: boolean;\n    /** Width, e.g. `100` (px) or `'20%'`. */\n    width?: number | string;\n    /** More about the column, in its title and for screen readers. */\n    description?: string;\n    /** `scope` of the `<th>`. Defaults to `'col'`. */\n    scope?: string;\n    /** `{ show, only }` on small screens. */\n    mobileOptions?: TableMobileOptions;\n  };\n  Blocks: {\n    /** The column's name. */\n    default: [];\n  };\n}\n\nexport default class EuiTableHeaderCell extends Component<EuiTableHeaderCellSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  get classes(): string {\n    const mobile = this.args.mobileOptions ?? {};\n\n    return [\n      'euiTableHeaderCell',\n      mobile.only && 'euiTableHeaderCell--hideForDesktop',\n      mobile.show === false && 'euiTableHeaderCell--hideForMobile'\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  get contentClasses(): string {\n    return ['euiTableCellContent', alignClasses(this.args.align)].filter(Boolean).join(' ');\n  }\n\n  get isSortable(): boolean {\n    return Boolean(this.args.onSort || this.args.isSorted);\n  }\n\n  get ariaSort(): string | undefined {\n    if (!this.isSortable) return undefined;\n    if (!this.args.isSorted) return 'none';\n\n    return this.args.isSortAscending ? 'ascending' : 'descending';\n  }\n\n  title = (innerText: string): string =>\n    this.args.description\n      ? this.euiI18n.lookupToken('euiTableHeaderCell.titleTextWithDesc', '{innerText}; {description}', {\n          innerText,\n          description: this.args.description\n        })\n      : innerText;\n\n  <template>\n    {{#let (element (if (has-block) \"th\" \"td\")) as |Cell|}}\n      <Cell\n        class={{this.classes}}\n        scope={{if (has-block) (if @scope @scope \"col\")}}\n        role=\"columnheader\"\n        aria-sort={{this.ariaSort}}\n        aria-live={{if this.isSortable \"polite\"}}\n        style={{widthStyle @width}}\n        ...attributes\n      >\n        {{#if (and2 @onSort (not2 @readOnly))}}\n          <button\n            type=\"button\"\n            class=\"euiTableHeaderButton {{if @isSorted 'euiTableHeaderButton-isSorted'}}\"\n            data-test-subj=\"tableHeaderSortButton\"\n            {{on \"click\" (sortHandler @onSort)}}\n          >\n            <span class={{this.contentClasses}}>\n              <EuiInnerText as |ref innerText|>\n                <span\n                  class=\"euiTableCellContent__text\"\n                  title={{this.title innerText}}\n                  {{didInsert ref}}\n                >{{yield}}</span>\n              </EuiInnerText>\n              {{#if @description}}\n                <EuiScreenReaderOnly>{{@description}}</EuiScreenReaderOnly>\n              {{/if}}\n              {{#if @isSorted}}\n                <EuiIcon\n                  class=\"euiTableSortIcon\"\n                  @type={{if @isSortAscending \"sortUp\" \"sortDown\"}}\n                  @size=\"m\"\n                />\n              {{/if}}\n            </span>\n          </button>\n        {{else}}\n          <span class={{this.contentClasses}}>\n            <EuiInnerText as |ref innerText|>\n              <span\n                class=\"euiTableCellContent__text\"\n                title={{this.title innerText}}\n                {{didInsert ref}}\n              >{{yield}}</span>\n            </EuiInnerText>\n            {{#if @description}}\n              <EuiScreenReaderOnly>{{@description}}</EuiScreenReaderOnly>\n            {{/if}}\n            {{#if (and2 this.isSortable @isSorted)}}\n              <EuiIcon\n                class=\"euiTableSortIcon\"\n                @type={{if @isSortAscending \"sortUp\" \"sortDown\"}}\n                @size=\"m\"\n              />\n            {{/if}}\n          </span>\n        {{/if}}\n      </Cell>\n    {{/let}}\n  </template>\n}\n\nfunction sortHandler(onSort?: (event: MouseEvent) => void): (event: MouseEvent) => void {\n  return (event) => onSort?.(event);\n}\n\nfunction and2(a: unknown, b: unknown): boolean {\n  return Boolean(a && b);\n}\n\nfunction not2(a: unknown): boolean {\n  return !a;\n}\n"],"names":["EuiTableHeaderCell","Component","g","prototype","service","i","classes","mobile","args","mobileOptions","only","show","filter","Boolean","join","contentClasses","alignClasses","align","isSortable","onSort","isSorted","ariaSort","undefined","isSortAscending","title","innerText","description","euiI18n","lookupToken","setComponentTemplate","precompileTemplate","strictMode","scope","element","widthStyle","and2","not2","on","sortHandler","EuiInnerText","didInsert","EuiScreenReaderOnly","EuiIcon","event","a","b"],"mappings":";;;;;;;;;;;;;AA+Ce,MAAMA,2BAA2BC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACvDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;EAED,IAAIC,OAAAA,GAAkB;IACpB,MAAMC,SAAS,IAAI,CAACC,IAAI,CAACC,aAAa,IAAI,EAAC;IAE3C,OAAO,CACL,oBAAA,EACAF,MAAA,CAAOG,IAAI,IAAI,oCAAA,EACfH,MAAA,CAAOI,IAAI,KAAK,KAAA,IAAS,mCAAA,CAC1B,CACEC,MAAM,CAACC,OAAA,CAAA,CACPC,IAAI,CAAC,GAAA,CAAA;AACV,EAAA;EAEA,IAAIC,cAAAA,GAAyB;IAC3B,OAAO,CAAC,qBAAA,EAAuBC,YAAA,CAAa,IAAI,CAACR,IAAI,CAACS,KAAK,CAAA,CAAE,CAACL,MAAM,CAACC,OAAA,CAAA,CAASC,IAAI,CAAC,GAAA,CAAA;AACrF,EAAA;EAEA,IAAII,UAAAA,GAAsB;AACxB,IAAA,OAAOL,OAAA,CAAQ,IAAI,CAACL,IAAI,CAACW,MAAM,IAAI,IAAI,CAACX,IAAI,CAACY,QAAQ,CAAA;AACvD,EAAA;EAEA,IAAIC,QAAAA,GAA+B;AACjC,IAAA,IAAI,CAAC,IAAI,CAACH,UAAU,EAAE,OAAOI,SAAA;IAC7B,IAAI,CAAC,IAAI,CAACd,IAAI,CAACY,QAAQ,EAAE,OAAO,MAAA;IAEhC,OAAO,IAAI,CAACZ,IAAI,CAACe,eAAe,GAAG,WAAA,GAAc,YAAA;AACnD,EAAA;AAEAC,EAAAA,KAAA,GAASC,SAAiB,IACxB,IAAI,CAACjB,IAAI,CAACkB,WAAW,GACjB,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,wCAAwC,4BAAA,EAA8B;IAC7FH,SAAA;AACAC,IAAAA,WAAA,EAAa,IAAI,CAAClB,IAAI,CAACkB;GACzB,CAAA,GACAD,SAAA;AAEN,EAAA;IAAAI,oBAAA,CAAAC,kBAAA,CAAA,+oDAAA,EA6DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;QAAAC,UAAA;QAAAC,IAAA;QAAAC,IAAA;QAAAC,EAAA;QAAAC,WAAA;sBAAAC,QAAA;QAAAC,SAAA;QAAAC,mBAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;AAEA,SAASJ,WAAAA,CAAYnB,MAAoC,EAA8B;AACrF,EAAA,OAAQwB,SAAUxB,MAAA,GAASwB,KAAA,CAAA;AAC7B;AAEA,SAASR,KAAKS,CAAU,EAAEC,CAAU,EAAU;AAC5C,EAAA,OAAOhC,QAAQ+B,CAAA,IAAKC,CAAA,CAAA;AACtB;AAEA,SAAST,IAAAA,CAAKQ,CAAU,EAAU;AAChC,EAAA,OAAO,CAACA,CAAA;AACV;;"}
+{"version":3,"file":"eui-table-header-cell.js","sources":["../../src/components/eui-table-header-cell.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\nimport { on } from '@ember/modifier';\nimport { service } from '@ember/service';\n\n\nimport { alignClasses, widthStyle } from '../-private/table.ts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiInnerText from './eui-inner-text.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { TableAlignment, TableMobileOptions } from '../-private/table.ts';\n\n/**\n * A column header of an `EuiTable`. With `@onSort` it is a button that\n * shows the sort direction (`@isSorted`, `@isSortAscending`).\n */\nexport interface EuiTableHeaderCellSignature {\n  Element: HTMLTableCellElement;\n  Args: {\n    /** `'left'`, `'right'` (numbers) or `'center'`. Defaults to `'left'`. */\n    align?: TableAlignment;\n    /** Makes the header a button sorting the column. */\n    onSort?: (event: MouseEvent) => void;\n    /** The table is sorted by this column: shows the direction. */\n    isSorted?: boolean;\n    /** Ascending order (arrow up); descending otherwise. */\n    isSortAscending?: boolean;\n    /** Shows the sort state without the button. */\n    readOnly?: boolean;\n    /** Width, e.g. `100` (px) or `'20%'`. */\n    width?: number | string;\n    /** More about the column, in its title and for screen readers. */\n    description?: string;\n    /** `scope` of the `<th>`. Defaults to `'col'`. */\n    scope?: string;\n    /** `{ show, only }` on small screens. */\n    mobileOptions?: TableMobileOptions;\n  };\n  Blocks: {\n    /** The column's name. */\n    default: [];\n  };\n}\n\nexport default class EuiTableHeaderCell extends Component<EuiTableHeaderCellSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  get classes(): string {\n    const mobile = this.args.mobileOptions ?? {};\n\n    return [\n      'euiTableHeaderCell',\n      mobile.only && 'euiTableHeaderCell--hideForDesktop',\n      mobile.show === false && 'euiTableHeaderCell--hideForMobile'\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  get contentClasses(): string {\n    return ['euiTableCellContent', alignClasses(this.args.align)].filter(Boolean).join(' ');\n  }\n\n  get isSortable(): boolean {\n    return Boolean(this.args.onSort || this.args.isSorted);\n  }\n\n  get ariaSort(): string | undefined {\n    if (!this.isSortable) return undefined;\n    if (!this.args.isSorted) return 'none';\n\n    return this.args.isSortAscending ? 'ascending' : 'descending';\n  }\n\n  title = (innerText: string): string =>\n    this.args.description\n      ? this.euiI18n.lookupToken('euiTableHeaderCell.titleTextWithDesc', '{innerText}; {description}', {\n          innerText,\n          description: this.args.description\n        })\n      : innerText;\n\n  <template>\n    {{#let (element (if (has-block) \"th\" \"td\")) as |Cell|}}\n      <Cell\n        class={{this.classes}}\n        scope={{if (has-block) (if @scope @scope \"col\")}}\n        role=\"columnheader\"\n        aria-sort={{this.ariaSort}}\n        aria-live={{if this.isSortable \"polite\"}}\n        style={{widthStyle @width}}\n        ...attributes\n      >\n        {{#if (and2 @onSort (not2 @readOnly))}}\n          <button\n            type=\"button\"\n            class=\"euiTableHeaderButton {{if @isSorted 'euiTableHeaderButton-isSorted'}}\"\n            data-test-subj=\"tableHeaderSortButton\"\n            {{on \"click\" (sortHandler @onSort)}}\n          >\n            <span class={{this.contentClasses}}>\n              <EuiInnerText as |ref innerText|>\n                <span\n                  class=\"euiTableCellContent__text\"\n                  title={{this.title innerText}}\n                  {{didInsert ref}}\n                >{{yield}}</span>\n              </EuiInnerText>\n              {{#if @description}}\n                <EuiScreenReaderOnly>{{@description}}</EuiScreenReaderOnly>\n              {{/if}}\n              {{#if @isSorted}}\n                <EuiIcon\n                  class=\"euiTableSortIcon\"\n                  @type={{if @isSortAscending \"sortUp\" \"sortDown\"}}\n                  @size=\"m\"\n                />\n              {{/if}}\n            </span>\n          </button>\n        {{else}}\n          <span class={{this.contentClasses}}>\n            <EuiInnerText as |ref innerText|>\n              <span\n                class=\"euiTableCellContent__text\"\n                title={{this.title innerText}}\n                {{didInsert ref}}\n              >{{yield}}</span>\n            </EuiInnerText>\n            {{#if @description}}\n              <EuiScreenReaderOnly>{{@description}}</EuiScreenReaderOnly>\n            {{/if}}\n            {{#if (and2 this.isSortable @isSorted)}}\n              <EuiIcon\n                class=\"euiTableSortIcon\"\n                @type={{if @isSortAscending \"sortUp\" \"sortDown\"}}\n                @size=\"m\"\n              />\n            {{/if}}\n          </span>\n        {{/if}}\n      </Cell>\n    {{/let}}\n  </template>\n}\n\nfunction sortHandler(onSort?: (event: MouseEvent) => void): (event: MouseEvent) => void {\n  return (event) => onSort?.(event);\n}\n\nfunction and2(a: unknown, b: unknown): boolean {\n  return Boolean(a && b);\n}\n\nfunction not2(a: unknown): boolean {\n  return !a;\n}\n"],"names":["EuiTableHeaderCell","Component","g","prototype","service","i","classes","mobile","args","mobileOptions","only","show","filter","Boolean","join","contentClasses","alignClasses","align","isSortable","onSort","isSorted","ariaSort","undefined","isSortAscending","title","innerText","description","euiI18n","lookupToken","setComponentTemplate","precompileTemplate","strictMode","scope","widthStyle","and2","not2","on","sortHandler","EuiInnerText","didInsert","EuiScreenReaderOnly","EuiIcon","event","a","b"],"mappings":";;;;;;;;;;;;AA8Ce,MAAMA,2BAA2BC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACvDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;EAED,IAAIC,OAAAA,GAAkB;IACpB,MAAMC,SAAS,IAAI,CAACC,IAAI,CAACC,aAAa,IAAI,EAAC;IAE3C,OAAO,CACL,oBAAA,EACAF,MAAA,CAAOG,IAAI,IAAI,oCAAA,EACfH,MAAA,CAAOI,IAAI,KAAK,KAAA,IAAS,mCAAA,CAC1B,CACEC,MAAM,CAACC,OAAA,CAAA,CACPC,IAAI,CAAC,GAAA,CAAA;AACV,EAAA;EAEA,IAAIC,cAAAA,GAAyB;IAC3B,OAAO,CAAC,qBAAA,EAAuBC,YAAA,CAAa,IAAI,CAACR,IAAI,CAACS,KAAK,CAAA,CAAE,CAACL,MAAM,CAACC,OAAA,CAAA,CAASC,IAAI,CAAC,GAAA,CAAA;AACrF,EAAA;EAEA,IAAII,UAAAA,GAAsB;AACxB,IAAA,OAAOL,OAAA,CAAQ,IAAI,CAACL,IAAI,CAACW,MAAM,IAAI,IAAI,CAACX,IAAI,CAACY,QAAQ,CAAA;AACvD,EAAA;EAEA,IAAIC,QAAAA,GAA+B;AACjC,IAAA,IAAI,CAAC,IAAI,CAACH,UAAU,EAAE,OAAOI,SAAA;IAC7B,IAAI,CAAC,IAAI,CAACd,IAAI,CAACY,QAAQ,EAAE,OAAO,MAAA;IAEhC,OAAO,IAAI,CAACZ,IAAI,CAACe,eAAe,GAAG,WAAA,GAAc,YAAA;AACnD,EAAA;AAEAC,EAAAA,KAAA,GAASC,SAAiB,IACxB,IAAI,CAACjB,IAAI,CAACkB,WAAW,GACjB,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,wCAAwC,4BAAA,EAA8B;IAC7FH,SAAA;AACAC,IAAAA,WAAA,EAAa,IAAI,CAAClB,IAAI,CAACkB;GACzB,CAAA,GACAD,SAAA;AAEN,EAAA;IAAAI,oBAAA,CAAAC,kBAAA,CAAA,+oDAAA,EA6DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,UAAA;QAAAC,IAAA;QAAAC,IAAA;QAAAC,EAAA;QAAAC,WAAA;sBAAAC,QAAA;QAAAC,SAAA;QAAAC,mBAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;AAEA,SAASJ,WAAAA,CAAYlB,MAAoC,EAA8B;AACrF,EAAA,OAAQuB,SAAUvB,MAAA,GAASuB,KAAA,CAAA;AAC7B;AAEA,SAASR,KAAKS,CAAU,EAAEC,CAAU,EAAU;AAC5C,EAAA,OAAO/B,QAAQ8B,CAAA,IAAKC,CAAA,CAAA;AACtB;AAEA,SAAST,IAAAA,CAAKQ,CAAU,EAAU;AAChC,EAAA,OAAO,CAACA,CAAA;AACV;;"}

package/dist/helpers/eui-page-restrict-width.js

@@ -11,7 +11,7 @@ function restrictWidth(restrictWidth, style) {
     widthClassName = 'restrictWidth-custom';
     newStyle = {
       ...newStyle,
-      maxWidth: restrictWidth
+      maxWidth: typeof restrictWidth === 'number' ? `${restrictWidth}px` : restrictWidth
     };
   }
   return {

package/dist/helpers/eui-page-restrict-width.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-page-restrict-width.js","sources":["../../src/helpers/eui-page-restrict-width.ts"],"sourcesContent":["import { helper } from '@ember/component/helper';\n\nexport type _EuiPageRestrictWidth = {\n  /**\n   * Sets the max-width of the page,\n   * set to `true` to use the default size of `1000px (1200 for Amsterdam)`,\n   * set to `false` to not restrict the width,\n   * set to a number for a custom width in px,\n   * set to a string for a custom width in custom measurement.\n   */\n  restrictWidth?: boolean | number | string;\n};\n\nexport function restrictWidth(\n  restrictWidth: _EuiPageRestrictWidth['restrictWidth'],\n  style?: Record<string, unknown>\n) {\n  let widthClassName;\n  let newStyle = {\n    ...(style || {})\n  };\n\n  if (restrictWidth === true) {\n    widthClassName = 'restrictWidth-default';\n  } else if (restrictWidth !== false) {\n    widthClassName = 'restrictWidth-custom';\n    newStyle = { ...newStyle, maxWidth: restrictWidth };\n  }\n\n  return { widthClassName, newStyle };\n}\n\nexport default helper(function ([restrict, style]: [\n  _EuiPageRestrictWidth['restrictWidth'],\n  Record<string, unknown> | undefined\n]) {\n  return restrictWidth(restrict, style);\n});\n"],"names":["restrictWidth","style","widthClassName","newStyle","maxWidth","helper","restrict"],"mappings":";;AAaO,SAASA,aAAaA,CAC3BA,aAAqD,EACrDC,KAA+B,EAC/B;AACA,EAAA,IAAIC,cAAc;AAClB,EAAA,IAAIC,QAAQ,GAAG;IACb,IAAIF,KAAK,IAAI,EAAE;GAChB;EAED,IAAID,aAAa,KAAK,IAAI,EAAE;AAC1BE,IAAAA,cAAc,GAAG,uBAAuB;AAC1C,EAAA,CAAC,MAAM,IAAIF,aAAa,KAAK,KAAK,EAAE;AAClCE,IAAAA,cAAc,GAAG,sBAAsB;AACvCC,IAAAA,QAAQ,GAAG;AAAE,MAAA,GAAGA,QAAQ;AAAEC,MAAAA,QAAQ,EAAEJ;KAAe;AACrD,EAAA;EAEA,OAAO;IAAEE,cAAc;AAAEC,IAAAA;GAAU;AACrC;AAEA,2BAAeE,MAAM,CAAC,UAAU,CAACC,QAAQ,EAAEL,KAAK,CAG/C,EAAE;AACD,EAAA,OAAOD,aAAa,CAACM,QAAQ,EAAEL,KAAK,CAAC;AACvC,CAAC,CAAC;;"}
+{"version":3,"file":"eui-page-restrict-width.js","sources":["../../src/helpers/eui-page-restrict-width.ts"],"sourcesContent":["import { helper } from '@ember/component/helper';\n\nexport type _EuiPageRestrictWidth = {\n  /**\n   * Sets the max-width of the page,\n   * set to `true` to use the default size of `1000px (1200 for Amsterdam)`,\n   * set to `false` to not restrict the width,\n   * set to a number for a custom width in px,\n   * set to a string for a custom width in custom measurement.\n   */\n  restrictWidth?: boolean | number | string;\n};\n\nexport function restrictWidth(\n  restrictWidth: _EuiPageRestrictWidth['restrictWidth'],\n  style?: Record<string, unknown>\n) {\n  let widthClassName;\n  let newStyle = {\n    ...(style || {})\n  };\n\n  if (restrictWidth === true) {\n    widthClassName = 'restrictWidth-default';\n  } else if (restrictWidth !== false) {\n    widthClassName = 'restrictWidth-custom';\n    newStyle = {\n      ...newStyle,\n      maxWidth:\n        typeof restrictWidth === 'number' ? `${restrictWidth}px` : restrictWidth\n    };\n  }\n\n  return { widthClassName, newStyle };\n}\n\nexport default helper(function ([restrict, style]: [\n  _EuiPageRestrictWidth['restrictWidth'],\n  Record<string, unknown> | undefined\n]) {\n  return restrictWidth(restrict, style);\n});\n"],"names":["restrictWidth","style","widthClassName","newStyle","maxWidth","helper","restrict"],"mappings":";;AAaO,SAASA,aAAaA,CAC3BA,aAAqD,EACrDC,KAA+B,EAC/B;AACA,EAAA,IAAIC,cAAc;AAClB,EAAA,IAAIC,QAAQ,GAAG;IACb,IAAIF,KAAK,IAAI,EAAE;GAChB;EAED,IAAID,aAAa,KAAK,IAAI,EAAE;AAC1BE,IAAAA,cAAc,GAAG,uBAAuB;AAC1C,EAAA,CAAC,MAAM,IAAIF,aAAa,KAAK,KAAK,EAAE;AAClCE,IAAAA,cAAc,GAAG,sBAAsB;AACvCC,IAAAA,QAAQ,GAAG;AACT,MAAA,GAAGA,QAAQ;MACXC,QAAQ,EACN,OAAOJ,aAAa,KAAK,QAAQ,GAAG,CAAA,EAAGA,aAAa,CAAA,EAAA,CAAI,GAAGA;KAC9D;AACH,EAAA;EAEA,OAAO;IAAEE,cAAc;AAAEC,IAAAA;GAAU;AACrC;AAEA,2BAAeE,MAAM,CAAC,UAAU,CAACC,QAAQ,EAAEL,KAAK,CAG/C,EAAE;AACD,EAAA,OAAOD,aAAa,CAACM,QAAQ,EAAEL,KAAK,CAAC;AACvC,CAAC,CAAC;;"}