@cloudscape-design/components-themeable 3.0.1127 → 3.0.1129

package/lib/internal/template/date-range-picker/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/date-range-picker/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { CalendarProps } from '../calendar/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { ExpandToViewport } from '../internal/components/dropdown/interfaces';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { DateFormat, EditableDateFormat } from '../internal/utils/date-time/interfaces';\nimport { TimeInputProps } from '../time-input/interfaces';\n\nexport interface DateRangePickerBaseProps {\n  /**\n   * The current date range value. Can be either an absolute time range\n   * or a relative time range.\n   */\n  value: null | DateRangePickerProps.Value;\n\n  /**\n   * A list of relative time ranges that are shown as suggestions.\n   */\n  relativeOptions: ReadonlyArray<DateRangePickerProps.RelativeOption>;\n\n  /**\n   * A function that defines whether a particular date should be enabled\n   * in the calendar or not. Note that disabling a date in the calendar\n   * still allows users to enter this date via keyboard. We therefore\n   * recommend that you also validate these constraints client- and\n   * server-side, in the same way as for other form elements.\n   */\n  isDateEnabled?: DateRangePickerProps.IsDateEnabledFunction;\n\n  /**\n   * Provides a reason why a particular date in the calendar is not enabled (only when `isDateEnabled` returns `false`).\n   * If provided, the date becomes focusable.\n   * @param date\n   */\n  dateDisabledReason?: DateRangePickerProps.DateDisabledReasonFunction;\n\n  /**\n   * The locale to be used for rendering month names and defining the\n   * starting date of the week. If not provided, it will be determined\n   * from the page and browser locales. Supported values and formats\n   * are as-per the [JavaScript Intl API specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).\n   */\n  locale?: string;\n\n  /**\n   * Starting day of the week. [0-6] maps to [Sunday-Saturday].\n   * By default the starting day of the week is defined by the locale,\n   * but you can override it using this property.\n   */\n  startOfWeek?: number;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: DateRangePickerProps.I18nStrings;\n\n  /**\n   * Hides time inputs and changes the input format to date-only, e.g. 2021-04-06.\n   *\n   * Do not use `dateOnly` flag conditionally. The component does not trigger the value update\n   * when the flag changes which means the value format can become inconsistent.\n   *\n   * This does not apply when the 'granularity' is set to 'month'\n   *\n   * Default: `false`.\n   */\n  dateOnly?: boolean;\n\n  /**\n   * Determines the range selector mode as follows:\n   *\n   * * `default` for combined absolute/relative range selector.\n   * * `absolute-only` for absolute-only range selector.\n   * * `relative-only` for relative-only range selector.\n   *\n   * By default, the range selector mode is `default`.\n   */\n  rangeSelectorMode?: DateRangePickerProps.RangeSelectorMode;\n\n  /**\n   * Specifies the date format to use on the date inputs in the absolute dropdown.\n   *\n   * The format of the input as it is being interacted with. It can take the following values:\n   * * `iso`: ISO 8601 format without time, e.g.: 2024-01-30 (or 2024-01)\n   * * `slashed`: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01)\n   */\n  dateInputFormat?: DateRangePickerProps.DateInputFormat;\n\n  /**\n   * Specifies the format of the time input for absolute ranges.\n   *\n   * Use to restrict the granularity of time that the user can enter.\n   *\n   * Has no effect when `dateOnly` is true or `granularity` is set to 'month'.\n   */\n  timeInputFormat?: DateRangePickerProps.TimeInputFormat;\n\n  /**\n   * Fired whenever a user changes the component's value.\n   * The event `detail` contains the current value of the field.\n   */\n  onChange?: NonCancelableEventHandler<DateRangePickerProps.ChangeDetail>;\n\n  /**\n   * The time offset from UTC in minutes that should be used to\n   * display and produce values.\n   *\n   * Has no effect when `dateOnly` is true.\n   *\n   * Default: the user's current time offset as provided by the browser.\n   *\n   * @deprecated Use `getTimeOffset` instead.\n   */\n  timeOffset?: number;\n\n  /**\n   * A function that defines timezone offset from UTC in minutes for selected dates.\n   * Use it to define time relative to the desired timezone.\n   *\n   * The function is called for the start date and the end date and takes a UTC date\n   * corresponding the selected value as an argument.\n   *\n   * Has no effect when `dateOnly` is true.\n   *\n   * Default: the user's current time offset as provided by the browser.\n   */\n  getTimeOffset?: DateRangePickerProps.GetTimeOffsetFunction;\n}\nexport interface DateRangePickerProps\n  extends BaseComponentProps,\n    FormFieldValidationControlProps,\n    ExpandToViewport,\n    DateRangePickerBaseProps,\n    Pick<CalendarProps, 'granularity'> {\n  /**\n   * Specifies the placeholder text that is rendered when the value is empty.\n   */\n  placeholder?: string;\n\n  /**\n   * Specifies that the component is disabled, preventing the user from\n   * modifying the value. A disabled component cannot receive focus.\n   */\n  disabled?: boolean;\n\n  /**\n   * Specifies that the component is read-only, preventing the user from\n   * modifying the value. A read-only component can receive focus.\n   */\n  readOnly?: boolean;\n\n  /**\n   * Fired when keyboard focus is set onto the UI control.\n   */\n  onFocus?: NonCancelableEventHandler<null>;\n\n  /**\n   * Fired when keyboard focus is removed from the UI control.\n   */\n  onBlur?: NonCancelableEventHandler<null>;\n\n  /**\n   * A function that defines whether a particular range is valid or not.\n   *\n   * Ensure that your function checks for missing fields in the value.\n   */\n  isValidRange: DateRangePickerProps.ValidationFunction;\n\n  /**\n   * Specifies whether the component should show a button that\n   * allows the user to clear the selected value.\n   */\n  showClearButton?: boolean;\n\n  /**\n   * Specifies an additional control displayed in the dropdown, located below the range calendar.\n   */\n  customAbsoluteRangeControl?: DateRangePickerProps.AbsoluteRangeControl;\n\n  /**\n   * Specifies which time units to allow in the custom relative range control.\n   */\n  customRelativeRangeUnits?: DateRangePickerProps.TimeUnit[];\n\n  /**\n   * Specifies the time format to use for displaying the absolute time range.\n   *\n   * It can take the following values:\n   * * `iso`: ISO 8601 format, e.g.: 2024-01-30T13:32:32+01:00 (or 2024-01-30 when `dateOnly` is true)\n   * * `long-localized`: a more human-readable, localized format, e.g.: January 30, 2024, 13:32:32 (UTC+1) (or January 30, 2024 when `dateOnly` is true)\n   * * `slashed`: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01)\n   */\n  absoluteFormat?: DateRangePickerProps.AbsoluteFormat;\n\n  /**\n   * Specifies whether to hide the time offset in the displayed absolute time range.\n   * Defaults to `false`.\n   */\n  hideTimeOffset?: boolean;\n}\n\nexport namespace DateRangePickerProps {\n  export type Value = AbsoluteValue | RelativeValue;\n  export interface AbsoluteValue {\n    /**\n     * In ISO8601 format, e.g.: 2021-04-06T17:23:50+02:00 (or 2021-04-06 when `dateOnly` is true)\n     */\n    startDate: string;\n    /**\n     * In ISO8601 format, e.g.: 2021-04-06T17:23:50+02:00 (or 2021-04-06 when `dateOnly` is true)\n     */\n    endDate: string;\n    type: 'absolute';\n  }\n\n  export interface RelativeValue {\n    /**\n     * If provided, used to match this value\n     * to a provided relative option.\n     */\n    key?: string;\n    amount: number;\n    unit: TimeUnit;\n    type: 'relative';\n  }\n  export interface RelativeOption {\n    /**\n     * Used to uniquely identify this relative option.\n     */\n    key: string;\n    amount: number;\n    unit: TimeUnit;\n    type: 'relative';\n  }\n\n  export type TimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';\n\n  export type ValidationFunction = (value: Value | null) => ValidationResult;\n\n  export type ValidationResult = ValidRangeResult | InvalidRangeResult;\n\n  export interface ValidRangeResult {\n    valid: true;\n  }\n\n  export interface InvalidRangeResult {\n    valid: false;\n    errorMessage: string;\n  }\n\n  export interface ChangeDetail {\n    /**\n     * The newly selected range of this date range picker.\n     */\n    value: null | Value;\n  }\n\n  export interface IsDateEnabledFunction {\n    (date: Date): boolean;\n  }\n\n  export interface DateDisabledReasonFunction {\n    (date: Date): string;\n  }\n\n  export interface GetTimeOffsetFunction {\n    (date: Date): number;\n  }\n\n  export interface DateTimeStrings {\n    date: string;\n    time: string;\n  }\n\n  export interface PendingAbsoluteValue {\n    start: DateTimeStrings;\n    end: DateTimeStrings;\n  }\n\n  export type AbsoluteRangeControl = (\n    selectedRange: PendingAbsoluteValue,\n    setSelectedRange: React.Dispatch<React.SetStateAction<PendingAbsoluteValue>>\n  ) => React.ReactNode;\n\n  export type RangeSelectorMode = 'default' | 'absolute-only' | 'relative-only';\n\n  export interface Ref {\n    /**\n     * Sets the browser focus on the UI control\n     */\n    focus(): void;\n  }\n\n  export interface I18nStrings {\n    /**\n     * Adds `aria-label` to the trigger and dropdown.\n     */\n    ariaLabel?: string;\n\n    /**\n     * Adds `aria-labelledby` to the trigger and dropdown.\n     */\n    ariaLabelledby?: string;\n\n    /**\n     * Adds `aria-describedby` to the trigger and dropdown.\n     */\n    ariaDescribedby?: string;\n\n    /**\n     * Label of the mode selection group. In the standard view, it adds 'aria-label' to the group of segments.\n     * In a narrow container the label is visible and attached to the select component.\n     * @i18n\n     */\n    modeSelectionLabel?: string;\n\n    /**\n     * Segment title of the relative range selection mode\n     * @i18n\n     */\n    relativeModeTitle?: string;\n\n    /**\n     * Segment title of the absolute range selection mode\n     * @i18n\n     */\n    absoluteModeTitle?: string;\n\n    /**\n     * Heading for the relative range selection area\n     * @i18n\n     */\n    relativeRangeSelectionHeading?: string;\n\n    /**\n     * Description for the relative range selection area\n     * @i18n\n     */\n    relativeRangeSelectionMonthlyDescription?: string;\n\n    /**\n     * Visible label of the Cancel button\n     * @i18n\n     */\n    cancelButtonLabel?: string;\n\n    /**\n     * Visible label of the Clear and dismiss button\n     * @i18n\n     */\n    clearButtonLabel?: string;\n\n    /**\n     * Visible label of the Apply button\n     * @i18n\n     */\n    applyButtonLabel?: string;\n\n    /**\n     * Formatting function for relative ranges.\n     * This function must convert a relative range to a human-readable string.\n     * @i18n\n     */\n    formatRelativeRange?: (value: RelativeValue) => string;\n\n    /**\n     * Formatting function for time units.\n     *\n     * This function must return a localized form of the unit that fits the provided time value.\n     * @i18n\n     */\n    formatUnit?: (unit: TimeUnit, value: number) => string;\n\n    /**\n     * Visible label for the option for selecting\n     * a custom relative range.\n     * @i18n\n     */\n    customRelativeRangeOptionLabel?: string;\n\n    /**\n     * Visible description for the option for selecting\n     * a custom relative range.\n     * @i18n\n     */\n    customRelativeRangeOptionDescription?: string;\n\n    /**\n     * Visible label for the duration selector for\n     * the custom relative range.\n     * @i18n\n     */\n    customRelativeRangeDurationLabel?: string;\n\n    /**\n     * Placeholder for the duration selector for\n     * the custom relative range.\n     * @i18n\n     */\n    customRelativeRangeDurationPlaceholder?: string;\n\n    /**\n     * Visible label for the unit selector for the\n     * custom relative range.\n     * @i18n\n     */\n    customRelativeRangeUnitLabel?: string;\n\n    /**\n     * Visible label for the Start Month input for the\n     * absolute range.\n     * @i18n\n     */\n    startMonthLabel?: string;\n\n    /**\n     * Visible label for the Start Date input for the\n     * absolute range.\n     * @i18n\n     */\n    startDateLabel?: string;\n\n    /**\n     * Visible label for the Start Time input for the\n     * absolute range.\n     * @i18n\n     */\n    startTimeLabel?: string;\n\n    /**\n     * Visible label for the End Month input for the\n     * absolute range.\n     * @i18n\n     */\n    endMonthLabel?: string;\n\n    /**\n     * Visible label for the End Date input for the\n     * absolute range.\n     * @i18n\n     */\n    endDateLabel?: string;\n\n    /**\n     * Visible label for the End Time input for the absolute range.\n     * This serves as a fallback if no format specific date constraint test is provided\n     *\n     * @i18n\n     */\n    endTimeLabel?: string;\n\n    /**\n     * Constraint text for the date input field for the\n     * absolute range with no time option.\n     * @i18n\n     */\n    dateConstraintText?: string;\n\n    /**\n     * Constraint text for the input fields for the absolute range in 'slashed' format with no time option.\n     * @i18n\n     */\n    slashedDateConstraintText?: string;\n\n    /**\n     * Constraint text for the input fields for the absolute range in 'iso' format with no time option.\n     * @i18n\n     */\n    isoDateConstraintText?: string;\n\n    /**\n     * Constraint text for the input fields for the absolute range.\n     * This serves as a fallback if no format specific datetime constraint test is provided\n     *\n     * @i18n\n     */\n    dateTimeConstraintText?: string;\n\n    /**\n     * Constraint text for the date input fields for the absolute range in 'slashed' format.\n     * @i18n\n     */\n    slashedDateTimeConstraintText?: string;\n\n    /**\n     * Constraint text for the date input fields for the absolute range in 'iso' format with.\n     * @i18n\n     */\n    isoDateTimeConstraintText?: string;\n\n    /**\n     * Constraint text for the month input fields for the absolute range.\n     * This serves as a fallback if no format specific month constraint test is provided.\n     *\n     * @i18n\n     */\n    monthConstraintText?: string;\n\n    /**\n     * Constraint text for the month input fields for the absolute range in 'slashed' format.\n     * @i18n\n     */\n    slashedMonthConstraintText?: string;\n\n    /**\n     * Constraint text for the month input fields for the absolute range in 'iso' format.\n     * @i18n\n     */\n    isoMonthConstraintText?: string;\n\n    /**\n     * Provides a text alternative for the error icon in the error alert.\n     * @i18n\n     */\n    errorIconAriaLabel?: string;\n\n    /**\n     * When the property is set, screen readers announce the selected range when the absolute range gets selected.\n     */\n    renderSelectedAbsoluteRangeAriaLive?: (startDate: string, endDate: string) => string;\n\n    /**\n     * Used as part of the `aria-label` for today's date in the calendar.\n     * @i18n\n     */\n    todayAriaLabel?: string;\n\n    /**\n     * Specifies an `aria-label` for the 'next month' button.\n     * @i18n\n     */\n    nextMonthAriaLabel?: string;\n\n    /**\n     * Specifies an `aria-label` for the 'previous month' button.\n     * @i18n\n     */\n    previousMonthAriaLabel?: string;\n\n    /**\n     * Used as part of the `aria-label` for the current month in the calendar.\n     * @i18n\n     */\n    currentMonthAriaLabel?: string;\n\n    /**\n     * Specifies an `aria-label` for the 'next year' button.\n     * @i18n\n     */\n    nextYearAriaLabel?: string;\n\n    /**\n     * Specifies an `aria-label` for the 'previous year' button.\n     * @i18n\n     */\n    previousYearAriaLabel?: string;\n  }\n\n  export type AbsoluteFormat = DateFormat;\n\n  export type DateInputFormat = EditableDateFormat | undefined;\n\n  export type TimeInputFormat = TimeInputProps.Format;\n}\n\nexport type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type QuarterIndex = 0 | 1 | 2;\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/date-range-picker/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { CalendarProps } from '../calendar/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { ExpandToViewport } from '../internal/components/dropdown/interfaces';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { DateFormat, EditableDateFormat } from '../internal/utils/date-time/interfaces';\nimport { TimeInputProps } from '../time-input/interfaces';\n\nexport interface DateRangePickerBaseProps {\n  /**\n   * The current date range value. Can be either an absolute time range\n   * or a relative time range.\n   */\n  value: null | DateRangePickerProps.Value;\n\n  /**\n   * A list of relative time ranges that are shown as suggestions.\n   */\n  relativeOptions: ReadonlyArray<DateRangePickerProps.RelativeOption>;\n\n  /**\n   * A function that defines whether a particular date should be enabled\n   * in the calendar or not. Note that disabling a date in the calendar\n   * still allows users to enter this date via keyboard. We therefore\n   * recommend that you also validate these constraints client- and\n   * server-side, in the same way as for other form elements.\n   */\n  isDateEnabled?: DateRangePickerProps.IsDateEnabledFunction;\n\n  /**\n   * Provides a reason why a particular date in the calendar is not enabled (only when `isDateEnabled` returns `false`).\n   * If provided, the date becomes focusable.\n   * @param date\n   */\n  dateDisabledReason?: DateRangePickerProps.DateDisabledReasonFunction;\n\n  /**\n   * The locale to be used for rendering month names and defining the\n   * starting date of the week. If not provided, it will be determined\n   * from the page and browser locales. Supported values and formats\n   * are as-per the [JavaScript Intl API specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).\n   */\n  locale?: string;\n\n  /**\n   * Starting day of the week. [0-6] maps to [Sunday-Saturday].\n   * By default the starting day of the week is defined by the locale,\n   * but you can override it using this property.\n   */\n  startOfWeek?: number;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: DateRangePickerProps.I18nStrings;\n\n  /**\n   * Hides time inputs and changes the input format to date-only, e.g. 2021-04-06.\n   *\n   * Do not use `dateOnly` flag conditionally. The component does not trigger the value update\n   * when the flag changes which means the value format can become inconsistent.\n   *\n   * This does not apply when the 'granularity' is set to 'month'\n   *\n   * Default: `false`.\n   */\n  dateOnly?: boolean;\n\n  /**\n   * Determines the range selector mode as follows:\n   *\n   * * `default` for combined absolute/relative range selector.\n   * * `absolute-only` for absolute-only range selector.\n   * * `relative-only` for relative-only range selector.\n   *\n   * By default, the range selector mode is `default`.\n   */\n  rangeSelectorMode?: DateRangePickerProps.RangeSelectorMode;\n\n  /**\n   * Specifies the date format to use on the date inputs in the absolute dropdown.\n   *\n   * The format of the input as it is being interacted with. It can take the following values:\n   * * `iso`: ISO 8601 format without time, e.g.: 2024-01-30 (or 2024-01)\n   * * `slashed`: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01)\n   */\n  dateInputFormat?: DateRangePickerProps.DateInputFormat;\n\n  /**\n   * Specifies the format of the time input for absolute ranges.\n   *\n   * Use to restrict the granularity of time that the user can enter.\n   *\n   * Has no effect when `dateOnly` is true or `granularity` is set to 'month'.\n   */\n  timeInputFormat?: DateRangePickerProps.TimeInputFormat;\n\n  /**\n   * Fired whenever a user changes the component's value.\n   * The event `detail` contains the current value of the field.\n   */\n  onChange?: NonCancelableEventHandler<DateRangePickerProps.ChangeDetail>;\n\n  /**\n   * The time offset from UTC in minutes that should be used to\n   * display and produce values.\n   *\n   * Has no effect when `dateOnly` is true.\n   *\n   * Default: the user's current time offset as provided by the browser.\n   *\n   * @deprecated Use `getTimeOffset` instead.\n   */\n  timeOffset?: number;\n\n  /**\n   * A function that defines timezone offset from UTC in minutes for selected dates.\n   * Use it to define time relative to the desired timezone.\n   *\n   * The function is called for the start date and the end date and takes a UTC date\n   * corresponding the selected value as an argument.\n   *\n   * Has no effect when `dateOnly` is true.\n   *\n   * Default: the user's current time offset as provided by the browser.\n   */\n  getTimeOffset?: DateRangePickerProps.GetTimeOffsetFunction;\n}\nexport interface DateRangePickerProps\n  extends BaseComponentProps,\n    FormFieldValidationControlProps,\n    ExpandToViewport,\n    DateRangePickerBaseProps,\n    Pick<CalendarProps, 'granularity'> {\n  /**\n   * Specifies the placeholder text that is rendered when the value is empty.\n   */\n  placeholder?: string;\n\n  /**\n   * Specifies that the component is disabled, preventing the user from\n   * modifying the value. A disabled component cannot receive focus.\n   */\n  disabled?: boolean;\n\n  /**\n   * Specifies that the component is read-only, preventing the user from\n   * modifying the value. A read-only component can receive focus.\n   */\n  readOnly?: boolean;\n\n  /**\n   * Fired when keyboard focus is set onto the UI control.\n   */\n  onFocus?: NonCancelableEventHandler<null>;\n\n  /**\n   * Fired when keyboard focus is removed from the UI control.\n   */\n  onBlur?: NonCancelableEventHandler<null>;\n\n  /**\n   * A function that defines whether a particular range is valid or not.\n   *\n   * Ensure that your function checks for missing fields in the value.\n   */\n  isValidRange: DateRangePickerProps.ValidationFunction;\n\n  /**\n   * Specifies whether the component should show a button that\n   * allows the user to clear the selected value.\n   */\n  showClearButton?: boolean;\n\n  /**\n   * Specifies an additional control displayed in the dropdown, located below the range calendar.\n   */\n  customAbsoluteRangeControl?: DateRangePickerProps.AbsoluteRangeControl;\n\n  /**\n   * Specifies which time units to allow in the custom relative range control.\n   */\n  customRelativeRangeUnits?: DateRangePickerProps.TimeUnit[];\n\n  /**\n   * Specifies custom content to fully override the relative range tab.\n   * When provided, all default relative range functionality is replaced.\n   */\n  renderRelativeRangeContent?: DateRangePickerProps.RelativeRangeControl;\n\n  /**\n   * Specifies the time format to use for displaying the absolute time range.\n   *\n   * It can take the following values:\n   * * `iso`: ISO 8601 format, e.g.: 2024-01-30T13:32:32+01:00 (or 2024-01-30 when `dateOnly` is true)\n   * * `long-localized`: a more human-readable, localized format, e.g.: January 30, 2024, 13:32:32 (UTC+1) (or January 30, 2024 when `dateOnly` is true)\n   * * `slashed`: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01)\n   */\n  absoluteFormat?: DateRangePickerProps.AbsoluteFormat;\n\n  /**\n   * Specifies whether to hide the time offset in the displayed absolute time range.\n   * Defaults to `false`.\n   */\n  hideTimeOffset?: boolean;\n}\n\nexport namespace DateRangePickerProps {\n  export type Value = AbsoluteValue | RelativeValue;\n  export interface AbsoluteValue {\n    /**\n     * In ISO8601 format, e.g.: 2021-04-06T17:23:50+02:00 (or 2021-04-06 when `dateOnly` is true)\n     */\n    startDate: string;\n    /**\n     * In ISO8601 format, e.g.: 2021-04-06T17:23:50+02:00 (or 2021-04-06 when `dateOnly` is true)\n     */\n    endDate: string;\n    type: 'absolute';\n  }\n\n  export interface RelativeValue {\n    /**\n     * If provided, used to match this value\n     * to a provided relative option.\n     */\n    key?: string;\n    amount: number;\n    unit: TimeUnit;\n    type: 'relative';\n  }\n  export interface RelativeOption {\n    /**\n     * Used to uniquely identify this relative option.\n     */\n    key: string;\n    amount: number;\n    unit: TimeUnit;\n    type: 'relative';\n  }\n\n  export type TimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';\n\n  export type ValidationFunction = (value: Value | null) => ValidationResult;\n\n  export type ValidationResult = ValidRangeResult | InvalidRangeResult;\n\n  export interface ValidRangeResult {\n    valid: true;\n  }\n\n  export interface InvalidRangeResult {\n    valid: false;\n    errorMessage: string;\n  }\n\n  export interface ChangeDetail {\n    /**\n     * The newly selected range of this date range picker.\n     */\n    value: null | Value;\n  }\n\n  export interface IsDateEnabledFunction {\n    (date: Date): boolean;\n  }\n\n  export interface DateDisabledReasonFunction {\n    (date: Date): string;\n  }\n\n  export interface GetTimeOffsetFunction {\n    (date: Date): number;\n  }\n\n  export interface DateTimeStrings {\n    date: string;\n    time: string;\n  }\n\n  export interface PendingAbsoluteValue {\n    start: DateTimeStrings;\n    end: DateTimeStrings;\n  }\n\n  export type AbsoluteRangeControl = (\n    selectedRange: PendingAbsoluteValue,\n    setSelectedRange: React.Dispatch<React.SetStateAction<PendingAbsoluteValue>>\n  ) => React.ReactNode;\n\n  export type RelativeRangeControl = (\n    selectedRange: RelativeValue | null,\n    setSelectedRange: (value: RelativeValue) => void\n  ) => React.ReactNode;\n\n  export type RangeSelectorMode = 'default' | 'absolute-only' | 'relative-only';\n\n  export interface Ref {\n    /**\n     * Sets the browser focus on the UI control\n     */\n    focus(): void;\n  }\n\n  export interface I18nStrings {\n    /**\n     * Adds `aria-label` to the trigger and dropdown.\n     */\n    ariaLabel?: string;\n\n    /**\n     * Adds `aria-labelledby` to the trigger and dropdown.\n     */\n    ariaLabelledby?: string;\n\n    /**\n     * Adds `aria-describedby` to the trigger and dropdown.\n     */\n    ariaDescribedby?: string;\n\n    /**\n     * Label of the mode selection group. In the standard view, it adds 'aria-label' to the group of segments.\n     * In a narrow container the label is visible and attached to the select component.\n     * @i18n\n     */\n    modeSelectionLabel?: string;\n\n    /**\n     * Segment title of the relative range selection mode\n     * @i18n\n     */\n    relativeModeTitle?: string;\n\n    /**\n     * Segment title of the absolute range selection mode\n     * @i18n\n     */\n    absoluteModeTitle?: string;\n\n    /**\n     * Heading for the relative range selection area\n     * @i18n\n     */\n    relativeRangeSelectionHeading?: string;\n\n    /**\n     * Description for the relative range selection area\n     * @i18n\n     */\n    relativeRangeSelectionMonthlyDescription?: string;\n\n    /**\n     * Visible label of the Cancel button\n     * @i18n\n     */\n    cancelButtonLabel?: string;\n\n    /**\n     * Visible label of the Clear and dismiss button\n     * @i18n\n     */\n    clearButtonLabel?: string;\n\n    /**\n     * Visible label of the Apply button\n     * @i18n\n     */\n    applyButtonLabel?: string;\n\n    /**\n     * Formatting function for relative ranges.\n     * This function must convert a relative range to a human-readable string.\n     * @i18n\n     */\n    formatRelativeRange?: (value: RelativeValue) => string;\n\n    /**\n     * Formatting function for time units.\n     *\n     * This function must return a localized form of the unit that fits the provided time value.\n     * @i18n\n     */\n    formatUnit?: (unit: TimeUnit, value: number) => string;\n\n    /**\n     * Visible label for the option for selecting\n     * a custom relative range.\n     * @i18n\n     */\n    customRelativeRangeOptionLabel?: string;\n\n    /**\n     * Visible description for the option for selecting\n     * a custom relative range.\n     * @i18n\n     */\n    customRelativeRangeOptionDescription?: string;\n\n    /**\n     * Visible label for the duration selector for\n     * the custom relative range.\n     * @i18n\n     */\n    customRelativeRangeDurationLabel?: string;\n\n    /**\n     * Placeholder for the duration selector for\n     * the custom relative range.\n     * @i18n\n     */\n    customRelativeRangeDurationPlaceholder?: string;\n\n    /**\n     * Visible label for the unit selector for the\n     * custom relative range.\n     * @i18n\n     */\n    customRelativeRangeUnitLabel?: string;\n\n    /**\n     * Visible label for the Start Month input for the\n     * absolute range.\n     * @i18n\n     */\n    startMonthLabel?: string;\n\n    /**\n     * Visible label for the Start Date input for the\n     * absolute range.\n     * @i18n\n     */\n    startDateLabel?: string;\n\n    /**\n     * Visible label for the Start Time input for the\n     * absolute range.\n     * @i18n\n     */\n    startTimeLabel?: string;\n\n    /**\n     * Visible label for the End Month input for the\n     * absolute range.\n     * @i18n\n     */\n    endMonthLabel?: string;\n\n    /**\n     * Visible label for the End Date input for the\n     * absolute range.\n     * @i18n\n     */\n    endDateLabel?: string;\n\n    /**\n     * Visible label for the End Time input for the absolute range.\n     * This serves as a fallback if no format specific date constraint test is provided\n     *\n     * @i18n\n     */\n    endTimeLabel?: string;\n\n    /**\n     * Constraint text for the date input field for the\n     * absolute range with no time option.\n     * @i18n\n     */\n    dateConstraintText?: string;\n\n    /**\n     * Constraint text for the input fields for the absolute range in 'slashed' format with no time option.\n     * @i18n\n     */\n    slashedDateConstraintText?: string;\n\n    /**\n     * Constraint text for the input fields for the absolute range in 'iso' format with no time option.\n     * @i18n\n     */\n    isoDateConstraintText?: string;\n\n    /**\n     * Constraint text for the input fields for the absolute range.\n     * This serves as a fallback if no format specific datetime constraint test is provided\n     *\n     * @i18n\n     */\n    dateTimeConstraintText?: string;\n\n    /**\n     * Constraint text for the date input fields for the absolute range in 'slashed' format.\n     * @i18n\n     */\n    slashedDateTimeConstraintText?: string;\n\n    /**\n     * Constraint text for the date input fields for the absolute range in 'iso' format with.\n     * @i18n\n     */\n    isoDateTimeConstraintText?: string;\n\n    /**\n     * Constraint text for the month input fields for the absolute range.\n     * This serves as a fallback if no format specific month constraint test is provided.\n     *\n     * @i18n\n     */\n    monthConstraintText?: string;\n\n    /**\n     * Constraint text for the month input fields for the absolute range in 'slashed' format.\n     * @i18n\n     */\n    slashedMonthConstraintText?: string;\n\n    /**\n     * Constraint text for the month input fields for the absolute range in 'iso' format.\n     * @i18n\n     */\n    isoMonthConstraintText?: string;\n\n    /**\n     * Provides a text alternative for the error icon in the error alert.\n     * @i18n\n     */\n    errorIconAriaLabel?: string;\n\n    /**\n     * When the property is set, screen readers announce the selected range when the absolute range gets selected.\n     */\n    renderSelectedAbsoluteRangeAriaLive?: (startDate: string, endDate: string) => string;\n\n    /**\n     * Used as part of the `aria-label` for today's date in the calendar.\n     * @i18n\n     */\n    todayAriaLabel?: string;\n\n    /**\n     * Specifies an `aria-label` for the 'next month' button.\n     * @i18n\n     */\n    nextMonthAriaLabel?: string;\n\n    /**\n     * Specifies an `aria-label` for the 'previous month' button.\n     * @i18n\n     */\n    previousMonthAriaLabel?: string;\n\n    /**\n     * Used as part of the `aria-label` for the current month in the calendar.\n     * @i18n\n     */\n    currentMonthAriaLabel?: string;\n\n    /**\n     * Specifies an `aria-label` for the 'next year' button.\n     * @i18n\n     */\n    nextYearAriaLabel?: string;\n\n    /**\n     * Specifies an `aria-label` for the 'previous year' button.\n     * @i18n\n     */\n    previousYearAriaLabel?: string;\n  }\n\n  export type AbsoluteFormat = DateFormat;\n\n  export type DateInputFormat = EditableDateFormat | undefined;\n\n  export type TimeInputFormat = TimeInputProps.Format;\n}\n\nexport type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type QuarterIndex = 0 | 1 | 2;\n"]}

package/lib/internal/template/date-range-picker/relative-range/index.d.ts

@@ -9,7 +9,8 @@ interface RelativeRangePickerProps extends Pick<CalendarProps, 'granularity'> {
     i18nStrings?: DateRangePickerProps.I18nStrings;
     isSingleGrid: boolean;
     customUnits?: DateRangePickerProps.TimeUnit[];
+    renderRelativeRangeContent?: DateRangePickerProps.RelativeRangeControl;
 }
-export default function RelativeRangePicker({ dateOnly, options: clientOptions, initialSelection: initialRange, onChange: onChangeRangeSize, i18nStrings, isSingleGrid, customUnits, granularity, }: RelativeRangePickerProps): JSX.Element;
+export default function RelativeRangePicker({ dateOnly, options: clientOptions, initialSelection: initialRange, onChange: onChangeRangeSize, i18nStrings, isSingleGrid, customUnits, granularity, renderRelativeRangeContent, }: RelativeRangePickerProps): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/date-range-picker/relative-range/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/relative-range/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAQ1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAKrD,UAAU,wBAAyB,SAAQ,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,aAAa,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAC5D,gBAAgB,EAAE,oBAAoB,CAAC,aAAa,GAAG,IAAI,CAAC;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,aAAa,KAAK,IAAI,CAAC;IAC9D,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,oBAAoB,CAAC,QAAQ,EAAE,CAAC;CAC/C;AAaD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,OAAO,EAAE,aAAkB,EAC3B,gBAAgB,EAAE,YAAY,EAC9B,QAAQ,EAAE,iBAAiB,EAC3B,WAAW,EACX,YAAY,EACZ,WAAW,EACX,WAAmB,GACpB,EAAE,wBAAwB,eA4L1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/relative-range/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAQ1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAKrD,UAAU,wBAAyB,SAAQ,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,aAAa,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAC5D,gBAAgB,EAAE,oBAAoB,CAAC,aAAa,GAAG,IAAI,CAAC;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,aAAa,KAAK,IAAI,CAAC;IAC9D,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,oBAAoB,CAAC,QAAQ,EAAE,CAAC;IAC9C,0BAA0B,CAAC,EAAE,oBAAoB,CAAC,oBAAoB,CAAC;CACxE;AAaD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,OAAO,EAAE,aAAkB,EAC3B,gBAAgB,EAAE,YAAY,EAC9B,QAAQ,EAAE,iBAAiB,EAC3B,WAAW,EACX,YAAY,EACZ,WAAW,EACX,WAAmB,EACnB,0BAA0B,GAC3B,EAAE,wBAAwB,eAgM1B"}

package/lib/internal/template/date-range-picker/relative-range/index.js

@@ -16,7 +16,7 @@ const monthUnits = ['month', 'year'];
 const dayUnits = ['day', 'week', ...monthUnits];
 const units = ['second', 'minute', 'hour', ...dayUnits];
 const CUSTOM_OPTION_SELECT_KEY = 'awsui-internal-custom-duration-key';
-export default function RelativeRangePicker({ dateOnly, options: clientOptions = [], initialSelection: initialRange, onChange: onChangeRangeSize, i18nStrings, isSingleGrid, customUnits, granularity = 'day', }) {
+export default function RelativeRangePicker({ dateOnly, options: clientOptions = [], initialSelection: initialRange, onChange: onChangeRangeSize, i18nStrings, isSingleGrid, customUnits, granularity = 'day', renderRelativeRangeContent, }) {
     var _a;
     const i18n = useInternalI18n('date-range-picker');
     const formatRelativeRange = i18n('i18nStrings.formatRelativeRange', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.formatRelativeRange, format => ({ amount, unit }) => format({ amount, unit }));
@@ -59,6 +59,9 @@ export default function RelativeRangePicker({ dateOnly, options: clientOptions =
         initialCustomTimeUnit = finalUnits[0];
     }
     const [customUnitOfTime, setCustomUnitOfTime] = useState((_a = initialRange === null || initialRange === void 0 ? void 0 : initialRange.unit) !== null && _a !== void 0 ? _a : initialCustomTimeUnit);
+    if (renderRelativeRangeContent) {
+        return React.createElement(React.Fragment, null, renderRelativeRangeContent(initialRange, onChangeRangeSize));
+    }
     const showRadioControl = clientOptions.length > 0;
     const showCustomControls = clientOptions.length === 0 || selectedRadio === CUSTOM_OPTION_SELECT_KEY;
     return (React.createElement("div", null,

package/lib/internal/template/date-range-picker/relative-range/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/date-range-picker/relative-range/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../../box/internal';\nimport { CalendarProps } from '../../calendar/interfaces';\nimport InternalFormField from '../../form-field/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport InternalInput from '../../input/internal';\nimport { RadioGroupProps } from '../../radio-group/interfaces';\nimport InternalRadioGroup from '../../radio-group/internal';\nimport InternalSelect from '../../select/internal';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport { DateRangePickerProps } from '../interfaces';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface RelativeRangePickerProps extends Pick<CalendarProps, 'granularity'> {\n  dateOnly: boolean;\n  options: ReadonlyArray<DateRangePickerProps.RelativeOption>;\n  initialSelection: DateRangePickerProps.RelativeValue | null;\n  onChange: (range: DateRangePickerProps.RelativeValue) => void;\n  i18nStrings?: DateRangePickerProps.I18nStrings;\n  isSingleGrid: boolean;\n  customUnits?: DateRangePickerProps.TimeUnit[];\n}\n\ninterface UnitSelectOption {\n  value: DateRangePickerProps.TimeUnit;\n  label: string;\n}\n\nconst monthUnits: ReadonlyArray<DateRangePickerProps.TimeUnit> = ['month', 'year'];\nconst dayUnits: ReadonlyArray<DateRangePickerProps.TimeUnit> = ['day', 'week', ...monthUnits];\nconst units: ReadonlyArray<DateRangePickerProps.TimeUnit> = ['second', 'minute', 'hour', ...dayUnits];\n\nconst CUSTOM_OPTION_SELECT_KEY = 'awsui-internal-custom-duration-key';\n\nexport default function RelativeRangePicker({\n  dateOnly,\n  options: clientOptions = [],\n  initialSelection: initialRange,\n  onChange: onChangeRangeSize,\n  i18nStrings,\n  isSingleGrid,\n  customUnits,\n  granularity = 'day',\n}: RelativeRangePickerProps) {\n  const i18n = useInternalI18n('date-range-picker');\n  const formatRelativeRange = i18n(\n    'i18nStrings.formatRelativeRange',\n    i18nStrings?.formatRelativeRange,\n    format =>\n      ({ amount, unit }) =>\n        format({ amount, unit })\n  );\n  const formatUnit = i18n(\n    'i18nStrings.formatUnit',\n    i18nStrings?.formatUnit,\n    format => (unit, amount) => format({ amount, unit })\n  );\n\n  const radioOptions: RadioGroupProps.RadioButtonDefinition[] = clientOptions.map(option => ({\n    value: option.key,\n    label: formatRelativeRange?.(option),\n  }));\n  radioOptions.push({\n    value: CUSTOM_OPTION_SELECT_KEY,\n    label: i18n('i18nStrings.customRelativeRangeOptionLabel', i18nStrings?.customRelativeRangeOptionLabel),\n    description: i18n(\n      'i18nStrings.customRelativeRangeOptionDescription',\n      i18nStrings?.customRelativeRangeOptionDescription\n    ),\n  });\n\n  const [selectedRadio, setSelectedRadio] = useState(() => {\n    if (initialRange && !initialRange.key) {\n      return CUSTOM_OPTION_SELECT_KEY;\n    }\n    return initialRange?.key ?? null;\n  });\n\n  const [customDuration, setCustomDuration] = useState(() => {\n    if (initialRange) {\n      return initialRange.amount;\n    }\n    // NaN represents an empty duration\n    return NaN;\n  });\n\n  let finalUnits = granularity === 'month' ? monthUnits : dateOnly ? dayUnits : units;\n  if (customUnits) {\n    finalUnits = customUnits.filter(unit => {\n      if (units.includes(unit)) {\n        return true;\n      }\n      warnOnce(\n        'DateRangePicker',\n        `Invalid unit found in customRelativeRangeUnits: ${unit}. This entry will be ignored.`\n      );\n      return false;\n    });\n  }\n\n  let initialCustomTimeUnit: DateRangePickerProps.TimeUnit =\n    granularity === 'month' ? 'month' : dateOnly ? 'day' : 'minute';\n  if (!finalUnits.includes(initialCustomTimeUnit)) {\n    initialCustomTimeUnit = finalUnits[0];\n  }\n  const [customUnitOfTime, setCustomUnitOfTime] = useState<DateRangePickerProps.TimeUnit>(\n    initialRange?.unit ?? initialCustomTimeUnit\n  );\n\n  const showRadioControl = clientOptions.length > 0;\n  const showCustomControls = clientOptions.length === 0 || selectedRadio === CUSTOM_OPTION_SELECT_KEY;\n\n  return (\n    <div>\n      <InternalSpaceBetween size=\"xs\" direction=\"vertical\">\n        {showRadioControl && (\n          <InternalFormField\n            {...{\n              label: i18n('i18nStrings.relativeRangeSelectionHeading', i18nStrings?.relativeRangeSelectionHeading),\n              description:\n                granularity === 'month' &&\n                i18n(\n                  'i18nStrings.relativeRangeSelectionMonthlyDescription',\n                  i18nStrings?.relativeRangeSelectionMonthlyDescription\n                ),\n            }}\n          >\n            <InternalRadioGroup\n              className={testutilStyles['relative-range-radio-group']}\n              onChange={({ detail }) => {\n                setSelectedRadio(detail.value);\n\n                if (detail.value === CUSTOM_OPTION_SELECT_KEY) {\n                  setCustomDuration(NaN);\n                  setCustomUnitOfTime(initialCustomTimeUnit);\n                  onChangeRangeSize({\n                    amount: NaN,\n                    unit: initialCustomTimeUnit,\n                    type: 'relative',\n                  });\n                } else {\n                  const option = clientOptions.filter(o => o.key === detail.value)[0];\n                  onChangeRangeSize(option);\n                }\n              }}\n              value={selectedRadio}\n              items={radioOptions}\n            />\n          </InternalFormField>\n        )}\n\n        {showCustomControls && (\n          <InternalSpaceBetween direction=\"vertical\" size=\"xs\">\n            {!showRadioControl && (\n              <InternalBox fontSize=\"body-m\" color=\"text-body-secondary\">\n                {i18n(\n                  'i18nStrings.customRelativeRangeOptionDescription',\n                  i18nStrings?.customRelativeRangeOptionDescription\n                )}\n              </InternalBox>\n            )}\n\n            <div\n              className={clsx(styles['custom-range'], {\n                [styles['custom-range--no-padding']]: !showRadioControl,\n              })}\n            >\n              <div\n                className={clsx(styles['custom-range-form-controls'], {\n                  [styles.vertical]: isSingleGrid,\n                })}\n              >\n                <div className={styles['custom-range-duration']}>\n                  <InternalFormField\n                    label={i18n(\n                      'i18nStrings.customRelativeRangeDurationLabel',\n                      i18nStrings?.customRelativeRangeDurationLabel\n                    )}\n                  >\n                    <InternalInput\n                      type=\"number\"\n                      className={testutilStyles['custom-range-duration-input']}\n                      value={isNaN(customDuration) || customDuration === 0 ? '' : customDuration?.toString()}\n                      onChange={e => {\n                        const amount = Number(e.detail.value);\n\n                        setCustomDuration(amount);\n                        onChangeRangeSize({ amount, unit: customUnitOfTime, type: 'relative' });\n                      }}\n                      placeholder={i18n(\n                        'i18nStrings.customRelativeRangeDurationPlaceholder',\n                        i18nStrings?.customRelativeRangeDurationPlaceholder\n                      )}\n                      __inheritFormFieldProps={true}\n                    />\n                  </InternalFormField>\n                </div>\n\n                <div className={styles['custom-range-unit']}>\n                  <InternalFormField\n                    label={i18n('i18nStrings.customRelativeRangeUnitLabel', i18nStrings?.customRelativeRangeUnitLabel)}\n                  >\n                    <InternalSelect\n                      className={testutilStyles['custom-range-unit-select']}\n                      selectedOption={\n                        {\n                          value: customUnitOfTime,\n                          label: formatUnit?.(customUnitOfTime, customDuration),\n                        } as UnitSelectOption\n                      }\n                      onChange={e => {\n                        const { value: unit } = e.detail.selectedOption as UnitSelectOption;\n\n                        setCustomUnitOfTime(unit);\n                        onChangeRangeSize({ amount: customDuration, unit, type: 'relative' });\n                      }}\n                      options={finalUnits.map(unit => ({\n                        value: unit,\n                        label: formatUnit?.(unit, customDuration),\n                      }))}\n                      renderHighlightedAriaLive={option => option.label || option.value || ''}\n                    />\n                  </InternalFormField>\n                </div>\n              </div>\n            </div>\n          </InternalSpaceBetween>\n        )}\n      </InternalSpaceBetween>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/date-range-picker/relative-range/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../../box/internal';\nimport { CalendarProps } from '../../calendar/interfaces';\nimport InternalFormField from '../../form-field/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport InternalInput from '../../input/internal';\nimport { RadioGroupProps } from '../../radio-group/interfaces';\nimport InternalRadioGroup from '../../radio-group/internal';\nimport InternalSelect from '../../select/internal';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport { DateRangePickerProps } from '../interfaces';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface RelativeRangePickerProps extends Pick<CalendarProps, 'granularity'> {\n  dateOnly: boolean;\n  options: ReadonlyArray<DateRangePickerProps.RelativeOption>;\n  initialSelection: DateRangePickerProps.RelativeValue | null;\n  onChange: (range: DateRangePickerProps.RelativeValue) => void;\n  i18nStrings?: DateRangePickerProps.I18nStrings;\n  isSingleGrid: boolean;\n  customUnits?: DateRangePickerProps.TimeUnit[];\n  renderRelativeRangeContent?: DateRangePickerProps.RelativeRangeControl;\n}\n\ninterface UnitSelectOption {\n  value: DateRangePickerProps.TimeUnit;\n  label: string;\n}\n\nconst monthUnits: ReadonlyArray<DateRangePickerProps.TimeUnit> = ['month', 'year'];\nconst dayUnits: ReadonlyArray<DateRangePickerProps.TimeUnit> = ['day', 'week', ...monthUnits];\nconst units: ReadonlyArray<DateRangePickerProps.TimeUnit> = ['second', 'minute', 'hour', ...dayUnits];\n\nconst CUSTOM_OPTION_SELECT_KEY = 'awsui-internal-custom-duration-key';\n\nexport default function RelativeRangePicker({\n  dateOnly,\n  options: clientOptions = [],\n  initialSelection: initialRange,\n  onChange: onChangeRangeSize,\n  i18nStrings,\n  isSingleGrid,\n  customUnits,\n  granularity = 'day',\n  renderRelativeRangeContent,\n}: RelativeRangePickerProps) {\n  const i18n = useInternalI18n('date-range-picker');\n  const formatRelativeRange = i18n(\n    'i18nStrings.formatRelativeRange',\n    i18nStrings?.formatRelativeRange,\n    format =>\n      ({ amount, unit }) =>\n        format({ amount, unit })\n  );\n  const formatUnit = i18n(\n    'i18nStrings.formatUnit',\n    i18nStrings?.formatUnit,\n    format => (unit, amount) => format({ amount, unit })\n  );\n\n  const radioOptions: RadioGroupProps.RadioButtonDefinition[] = clientOptions.map(option => ({\n    value: option.key,\n    label: formatRelativeRange?.(option),\n  }));\n  radioOptions.push({\n    value: CUSTOM_OPTION_SELECT_KEY,\n    label: i18n('i18nStrings.customRelativeRangeOptionLabel', i18nStrings?.customRelativeRangeOptionLabel),\n    description: i18n(\n      'i18nStrings.customRelativeRangeOptionDescription',\n      i18nStrings?.customRelativeRangeOptionDescription\n    ),\n  });\n\n  const [selectedRadio, setSelectedRadio] = useState(() => {\n    if (initialRange && !initialRange.key) {\n      return CUSTOM_OPTION_SELECT_KEY;\n    }\n    return initialRange?.key ?? null;\n  });\n\n  const [customDuration, setCustomDuration] = useState(() => {\n    if (initialRange) {\n      return initialRange.amount;\n    }\n    // NaN represents an empty duration\n    return NaN;\n  });\n\n  let finalUnits = granularity === 'month' ? monthUnits : dateOnly ? dayUnits : units;\n  if (customUnits) {\n    finalUnits = customUnits.filter(unit => {\n      if (units.includes(unit)) {\n        return true;\n      }\n      warnOnce(\n        'DateRangePicker',\n        `Invalid unit found in customRelativeRangeUnits: ${unit}. This entry will be ignored.`\n      );\n      return false;\n    });\n  }\n\n  let initialCustomTimeUnit: DateRangePickerProps.TimeUnit =\n    granularity === 'month' ? 'month' : dateOnly ? 'day' : 'minute';\n  if (!finalUnits.includes(initialCustomTimeUnit)) {\n    initialCustomTimeUnit = finalUnits[0];\n  }\n  const [customUnitOfTime, setCustomUnitOfTime] = useState<DateRangePickerProps.TimeUnit>(\n    initialRange?.unit ?? initialCustomTimeUnit\n  );\n\n  if (renderRelativeRangeContent) {\n    return <>{renderRelativeRangeContent(initialRange, onChangeRangeSize)}</>;\n  }\n\n  const showRadioControl = clientOptions.length > 0;\n  const showCustomControls = clientOptions.length === 0 || selectedRadio === CUSTOM_OPTION_SELECT_KEY;\n\n  return (\n    <div>\n      <InternalSpaceBetween size=\"xs\" direction=\"vertical\">\n        {showRadioControl && (\n          <InternalFormField\n            {...{\n              label: i18n('i18nStrings.relativeRangeSelectionHeading', i18nStrings?.relativeRangeSelectionHeading),\n              description:\n                granularity === 'month' &&\n                i18n(\n                  'i18nStrings.relativeRangeSelectionMonthlyDescription',\n                  i18nStrings?.relativeRangeSelectionMonthlyDescription\n                ),\n            }}\n          >\n            <InternalRadioGroup\n              className={testutilStyles['relative-range-radio-group']}\n              onChange={({ detail }) => {\n                setSelectedRadio(detail.value);\n\n                if (detail.value === CUSTOM_OPTION_SELECT_KEY) {\n                  setCustomDuration(NaN);\n                  setCustomUnitOfTime(initialCustomTimeUnit);\n                  onChangeRangeSize({\n                    amount: NaN,\n                    unit: initialCustomTimeUnit,\n                    type: 'relative',\n                  });\n                } else {\n                  const option = clientOptions.filter(o => o.key === detail.value)[0];\n                  onChangeRangeSize(option);\n                }\n              }}\n              value={selectedRadio}\n              items={radioOptions}\n            />\n          </InternalFormField>\n        )}\n\n        {showCustomControls && (\n          <InternalSpaceBetween direction=\"vertical\" size=\"xs\">\n            {!showRadioControl && (\n              <InternalBox fontSize=\"body-m\" color=\"text-body-secondary\">\n                {i18n(\n                  'i18nStrings.customRelativeRangeOptionDescription',\n                  i18nStrings?.customRelativeRangeOptionDescription\n                )}\n              </InternalBox>\n            )}\n\n            <div\n              className={clsx(styles['custom-range'], {\n                [styles['custom-range--no-padding']]: !showRadioControl,\n              })}\n            >\n              <div\n                className={clsx(styles['custom-range-form-controls'], {\n                  [styles.vertical]: isSingleGrid,\n                })}\n              >\n                <div className={styles['custom-range-duration']}>\n                  <InternalFormField\n                    label={i18n(\n                      'i18nStrings.customRelativeRangeDurationLabel',\n                      i18nStrings?.customRelativeRangeDurationLabel\n                    )}\n                  >\n                    <InternalInput\n                      type=\"number\"\n                      className={testutilStyles['custom-range-duration-input']}\n                      value={isNaN(customDuration) || customDuration === 0 ? '' : customDuration?.toString()}\n                      onChange={e => {\n                        const amount = Number(e.detail.value);\n\n                        setCustomDuration(amount);\n                        onChangeRangeSize({ amount, unit: customUnitOfTime, type: 'relative' });\n                      }}\n                      placeholder={i18n(\n                        'i18nStrings.customRelativeRangeDurationPlaceholder',\n                        i18nStrings?.customRelativeRangeDurationPlaceholder\n                      )}\n                      __inheritFormFieldProps={true}\n                    />\n                  </InternalFormField>\n                </div>\n\n                <div className={styles['custom-range-unit']}>\n                  <InternalFormField\n                    label={i18n('i18nStrings.customRelativeRangeUnitLabel', i18nStrings?.customRelativeRangeUnitLabel)}\n                  >\n                    <InternalSelect\n                      className={testutilStyles['custom-range-unit-select']}\n                      selectedOption={\n                        {\n                          value: customUnitOfTime,\n                          label: formatUnit?.(customUnitOfTime, customDuration),\n                        } as UnitSelectOption\n                      }\n                      onChange={e => {\n                        const { value: unit } = e.detail.selectedOption as UnitSelectOption;\n\n                        setCustomUnitOfTime(unit);\n                        onChangeRangeSize({ amount: customDuration, unit, type: 'relative' });\n                      }}\n                      options={finalUnits.map(unit => ({\n                        value: unit,\n                        label: formatUnit?.(unit, customDuration),\n                      }))}\n                      renderHighlightedAriaLive={option => option.label || option.value || ''}\n                    />\n                  </InternalFormField>\n                </div>\n              </div>\n            </div>\n          </InternalSpaceBetween>\n        )}\n      </InternalSpaceBetween>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/flashbar/styles.css.js

@@ -1,55 +1,55 @@
 
     import './styles.scoped.css';
     export default {
-  "flash-with-motion": "awsui_flash-with-motion_1q84n_1vg8z_157",
-  "enter": "awsui_enter_1q84n_1vg8z_157",
-  "flash-body": "awsui_flash-body_1q84n_1vg8z_171",
-  "flash-message": "awsui_flash-message_1q84n_1vg8z_171",
-  "flash-header": "awsui_flash-header_1q84n_1vg8z_171",
-  "flash-content": "awsui_flash-content_1q84n_1vg8z_172",
-  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_1vg8z_173",
-  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_1vg8z_174",
-  "flash-icon": "awsui_flash-icon_1q84n_1vg8z_197",
-  "entering": "awsui_entering_1q84n_1vg8z_210",
-  "entered": "awsui_entered_1q84n_1vg8z_231",
-  "exiting": "awsui_exiting_1q84n_1vg8z_336",
-  "stack": "awsui_stack_1q84n_1vg8z_370",
-  "animation-running": "awsui_animation-running_1q84n_1vg8z_370",
-  "item": "awsui_item_1q84n_1vg8z_370",
-  "flash-list-item": "awsui_flash-list-item_1q84n_1vg8z_371",
-  "notification-bar": "awsui_notification-bar_1q84n_1vg8z_372",
-  "collapsed": "awsui_collapsed_1q84n_1vg8z_392",
-  "animation-ready": "awsui_animation-ready_1q84n_1vg8z_392",
-  "expanded-only": "awsui_expanded-only_1q84n_1vg8z_392",
-  "expanded": "awsui_expanded_1q84n_1vg8z_392",
-  "flash": "awsui_flash_1q84n_1vg8z_157",
-  "collapsible": "awsui_collapsible_1q84n_1vg8z_448",
-  "short-list": "awsui_short-list_1q84n_1vg8z_454",
-  "visual-refresh": "awsui_visual-refresh_1q84n_1vg8z_454",
-  "status": "awsui_status_1q84n_1vg8z_601",
-  "header": "awsui_header_1q84n_1vg8z_601",
-  "item-count": "awsui_item-count_1q84n_1vg8z_602",
-  "button": "awsui_button_1q84n_1vg8z_603",
-  "type-count": "awsui_type-count_1q84n_1vg8z_636",
-  "count-number": "awsui_count-number_1q84n_1vg8z_636",
-  "icon": "awsui_icon_1q84n_1vg8z_674",
-  "floating": "awsui_floating_1q84n_1vg8z_715",
-  "flashbar": "awsui_flashbar_1q84n_1vg8z_719",
-  "initial-hidden": "awsui_initial-hidden_1q84n_1vg8z_778",
-  "flash-list": "awsui_flash-list_1q84n_1vg8z_371",
-  "flash-focus-container": "awsui_flash-focus-container_1q84n_1vg8z_802",
-  "flash-text": "awsui_flash-text_1q84n_1vg8z_832",
-  "hidden": "awsui_hidden_1q84n_1vg8z_851",
-  "header-replacement": "awsui_header-replacement_1q84n_1vg8z_856",
-  "content-replacement": "awsui_content-replacement_1q84n_1vg8z_861",
-  "dismiss-button": "awsui_dismiss-button_1q84n_1vg8z_174",
-  "action-wrapped": "awsui_action-wrapped_1q84n_1vg8z_879",
-  "action-button": "awsui_action-button_1q84n_1vg8z_173",
-  "action-slot": "awsui_action-slot_1q84n_1vg8z_886",
-  "flash-type-success": "awsui_flash-type-success_1q84n_1vg8z_890",
-  "flash-type-error": "awsui_flash-type-error_1q84n_1vg8z_894",
-  "flash-type-info": "awsui_flash-type-info_1q84n_1vg8z_898",
-  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_1vg8z_899",
-  "flash-type-warning": "awsui_flash-type-warning_1q84n_1vg8z_903"
+  "flash-with-motion": "awsui_flash-with-motion_1q84n_tvi85_157",
+  "enter": "awsui_enter_1q84n_tvi85_157",
+  "flash-body": "awsui_flash-body_1q84n_tvi85_171",
+  "flash-message": "awsui_flash-message_1q84n_tvi85_171",
+  "flash-header": "awsui_flash-header_1q84n_tvi85_171",
+  "flash-content": "awsui_flash-content_1q84n_tvi85_172",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_tvi85_173",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_tvi85_174",
+  "flash-icon": "awsui_flash-icon_1q84n_tvi85_197",
+  "entering": "awsui_entering_1q84n_tvi85_210",
+  "entered": "awsui_entered_1q84n_tvi85_231",
+  "exiting": "awsui_exiting_1q84n_tvi85_336",
+  "stack": "awsui_stack_1q84n_tvi85_370",
+  "animation-running": "awsui_animation-running_1q84n_tvi85_370",
+  "item": "awsui_item_1q84n_tvi85_370",
+  "flash-list-item": "awsui_flash-list-item_1q84n_tvi85_371",
+  "notification-bar": "awsui_notification-bar_1q84n_tvi85_372",
+  "collapsed": "awsui_collapsed_1q84n_tvi85_392",
+  "animation-ready": "awsui_animation-ready_1q84n_tvi85_392",
+  "expanded-only": "awsui_expanded-only_1q84n_tvi85_392",
+  "expanded": "awsui_expanded_1q84n_tvi85_392",
+  "flash": "awsui_flash_1q84n_tvi85_157",
+  "collapsible": "awsui_collapsible_1q84n_tvi85_448",
+  "short-list": "awsui_short-list_1q84n_tvi85_454",
+  "visual-refresh": "awsui_visual-refresh_1q84n_tvi85_454",
+  "status": "awsui_status_1q84n_tvi85_601",
+  "header": "awsui_header_1q84n_tvi85_601",
+  "item-count": "awsui_item-count_1q84n_tvi85_602",
+  "button": "awsui_button_1q84n_tvi85_603",
+  "type-count": "awsui_type-count_1q84n_tvi85_636",
+  "count-number": "awsui_count-number_1q84n_tvi85_636",
+  "icon": "awsui_icon_1q84n_tvi85_674",
+  "floating": "awsui_floating_1q84n_tvi85_715",
+  "flashbar": "awsui_flashbar_1q84n_tvi85_719",
+  "initial-hidden": "awsui_initial-hidden_1q84n_tvi85_778",
+  "flash-list": "awsui_flash-list_1q84n_tvi85_371",
+  "flash-focus-container": "awsui_flash-focus-container_1q84n_tvi85_802",
+  "flash-text": "awsui_flash-text_1q84n_tvi85_832",
+  "hidden": "awsui_hidden_1q84n_tvi85_851",
+  "header-replacement": "awsui_header-replacement_1q84n_tvi85_856",
+  "content-replacement": "awsui_content-replacement_1q84n_tvi85_861",
+  "dismiss-button": "awsui_dismiss-button_1q84n_tvi85_174",
+  "action-wrapped": "awsui_action-wrapped_1q84n_tvi85_879",
+  "action-button": "awsui_action-button_1q84n_tvi85_173",
+  "action-slot": "awsui_action-slot_1q84n_tvi85_886",
+  "flash-type-success": "awsui_flash-type-success_1q84n_tvi85_890",
+  "flash-type-error": "awsui_flash-type-error_1q84n_tvi85_894",
+  "flash-type-info": "awsui_flash-type-info_1q84n_tvi85_898",
+  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_tvi85_899",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_tvi85_903"
 };