@cloudscape-design/components 3.0.882 → 3.0.884

package/date-range-picker/interfaces.d.ts

@@ -4,7 +4,7 @@ import { ExpandToViewport } from '../internal/components/dropdown/interfaces';
 import { FormFieldValidationControlProps } from '../internal/context/form-field-context';
 import { NonCancelableEventHandler } from '../internal/events';
 import { TimeInputProps } from '../time-input/interfaces';
-interface DateRangePickerBaseProps {
+export interface DateRangePickerBaseProps {
     /**
      * The current date range value. Can be either an absolute time range
      * or a relative time range.
@@ -52,6 +52,8 @@ interface DateRangePickerBaseProps {
      * Do not use `dateOnly` flag conditionally. The component does not trigger the value update
      * when the flag changes which means the value format can become inconsistent.
      *
+     * This does not apply when the 'granularity' is set to 'month'
+     *
      * Default: `false`.
      */
     dateOnly?: boolean;
@@ -70,7 +72,7 @@ interface DateRangePickerBaseProps {
      *
      * Use to restrict the granularity of time that the user can enter.
      *
-     * Has no effect when `dateOnly` is true.
+     * Has no effect when `dateOnly` is true or `granularity` is set to 'month'.
      */
     timeInputFormat?: TimeInputProps.Format;
     /**
@@ -101,6 +103,11 @@ interface DateRangePickerBaseProps {
      * Default: the user's current time offset as provided by the browser.
      */
     getTimeOffset?: DateRangePickerProps.GetTimeOffsetFunction;
+    /**
+     * Specifies the granularity at which users will be able to select a date range.
+     * Defaults to `day`.
+     */
+    granularity?: DateRangePickerProps.Granularity;
 }
 export interface DateRangePickerProps extends BaseComponentProps, FormFieldValidationControlProps, ExpandToViewport, DateRangePickerBaseProps {
     /**
@@ -249,117 +256,185 @@ export declare namespace DateRangePickerProps {
         /**
          * Label of the mode selection group. In the standard view, it adds 'aria-label' to the group of segments.
          * In a narrow container the label is visible and attached to the select component.
+         * @i18n
          */
         modeSelectionLabel?: string;
         /**
          * Segment title of the relative range selection mode
+         * @i18n
          */
         relativeModeTitle?: string;
         /**
          * Segment title of the absolute range selection mode
+         * @i18n
          */
         absoluteModeTitle?: string;
         /**
          * Heading for the relative range selection area
+         * @i18n
          */
         relativeRangeSelectionHeading?: string;
+        /**
+         * Description for the relative range selection area
+         * @i18n
+         */
+        relativeRangeSelectionMonthlyDescription?: string;
         /**
          * Visible label of the Cancel button
+         * @i18n
          */
         cancelButtonLabel?: string;
         /**
          * Visible label of the Clear and dismiss button
+         * @i18n
          */
         clearButtonLabel?: string;
         /**
          * Visible label of the Apply button
+         * @i18n
          */
         applyButtonLabel?: string;
         /**
          * Formatting function for relative ranges.
          * This function must convert a relative range to a human-readable string.
+         * @i18n
          */
         formatRelativeRange?: (value: RelativeValue) => string;
         /**
          * Formatting function for time units.
          *
          * This function must return a localized form of the unit that fits the provided time value.
+         * @i18n
          */
         formatUnit?: (unit: TimeUnit, value: number) => string;
         /**
          * Visible label for the option for selecting
          * a custom relative range.
+         * @i18n
          */
         customRelativeRangeOptionLabel?: string;
         /**
          * Visible description for the option for selecting
          * a custom relative range.
+         * @i18n
          */
         customRelativeRangeOptionDescription?: string;
         /**
          * Visible label for the duration selector for
          * the custom relative range.
+         * @i18n
          */
         customRelativeRangeDurationLabel?: string;
         /**
          * Placeholder for the duration selector for
          * the custom relative range.
+         * @i18n
          */
         customRelativeRangeDurationPlaceholder?: string;
         /**
          * Visible label for the unit selector for the
          * custom relative range.
+         * @i18n
          */
         customRelativeRangeUnitLabel?: string;
         /**
-         * Used as part of the aria label for today's date in the calendar.
-         */
-        todayAriaLabel?: string;
-        /**
-         * An aria label for the 'next month' button.
-         */
-        nextMonthAriaLabel?: string;
-        /**
-         * An aria label for the 'previous month' button.
+         * Visible label for the Start Month input for the
+         * absolute range.
+         * @i18n
          */
-        previousMonthAriaLabel?: string;
+        startMonthLabel?: string;
         /**
          * Visible label for the Start Date input for the
          * absolute range.
+         * @i18n
          */
         startDateLabel?: string;
         /**
          * Visible label for the Start Time input for the
          * absolute range.
+         * @i18n
          */
         startTimeLabel?: string;
+        /**
+         * Visible label for the End Month input for the
+         * absolute range.
+         * @i18n
+         */
+        endMonthLabel?: string;
         /**
          * Visible label for the End Date input for the
          * absolute range.
+         * @i18n
          */
         endDateLabel?: string;
         /**
          * Visible label for the End Time input for the
          * absolute range.
+         * @i18n
          */
         endTimeLabel?: string;
+        /**
+         * Constraint text for the date input field for the
+         * absolute range with no time option.
+         * @i18n
+         */
+        dateConstraintText?: string;
         /**
          * Constraint text for the input fields for the
          * absolute range.
+         * @i18n
          */
         dateTimeConstraintText?: string;
+        /**
+         * Constraint text for the month input fields for the
+         * absolute range.
+         * @i18n
+         */
+        monthConstraintText?: string;
         /**
          * Provides a text alternative for the error icon in the error alert.
+         * @i18n
          */
         errorIconAriaLabel?: string;
         /**
          * When the property is set, screen readers announce the selected range when the absolute range gets selected.
          */
         renderSelectedAbsoluteRangeAriaLive?: (startDate: string, endDate: string) => string;
+        /**
+         * Used as part of the `aria-label` for today's date in the calendar.
+         * @i18n
+         */
+        todayAriaLabel?: string;
+        /**
+         * Specifies an `aria-label` for the 'next month' button.
+         * @i18n
+         */
+        nextMonthAriaLabel?: string;
+        /**
+         * Specifies an `aria-label` for the 'previous month' button.
+         * @i18n
+         */
+        previousMonthAriaLabel?: string;
+        /**
+         * Used as part of the `aria-label` for the current month in the calendar.
+         * @i18n
+         */
+        currentMonthAriaLabel?: string;
+        /**
+         * Specifies an `aria-label` for the 'next year' button.
+         * @i18n
+         */
+        nextYearAriaLabel?: string;
+        /**
+         * Specifies an `aria-label` for the 'previous year' button.
+         * @i18n
+         */
+        previousYearAriaLabel?: string;
     }
     type AbsoluteFormat = 'iso' | 'long-localized';
+    type Granularity = 'day' | 'month';
 }
 export type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-export type RangeCalendarI18nStrings = Pick<DateRangePickerProps.I18nStrings, 'todayAriaLabel' | 'nextMonthAriaLabel' | 'previousMonthAriaLabel' | 'startDateLabel' | 'startTimeLabel' | 'endDateLabel' | 'endTimeLabel' | 'dateTimeConstraintText' | 'renderSelectedAbsoluteRangeAriaLive'>;
-export {};
+export type QuarterIndex = 0 | 1 | 2;
+export type RangeCalendarI18nStrings = Pick<DateRangePickerProps.I18nStrings, 'todayAriaLabel' | 'nextMonthAriaLabel' | 'previousMonthAriaLabel' | 'currentMonthAriaLabel' | 'nextYearAriaLabel' | 'previousYearAriaLabel' | 'startMonthLabel' | 'startDateLabel' | 'startTimeLabel' | 'endMonthLabel' | 'endDateLabel' | 'endTimeLabel' | 'dateConstraintText' | 'dateTimeConstraintText' | 'monthConstraintText' | 'renderSelectedAbsoluteRangeAriaLive'>;
 //# sourceMappingURL=interfaces.d.ts.map

package/date-range-picker/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/date-range-picker/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/date-range-picker/interfaces.ts"],"names":[],"mappings":"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"}

package/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 { 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 { TimeInputProps } from '../time-input/interfaces';\n\ninterface 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   * 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 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.\n   */\n  timeInputFormat?: TimeInputProps.Format;\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  /**\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   *\n   * Defaults to `iso`.\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     */\n    modeSelectionLabel?: string;\n\n    /**\n     * Segment title of the relative range selection mode\n     */\n    relativeModeTitle?: string;\n\n    /**\n     * Segment title of the absolute range selection mode\n     */\n    absoluteModeTitle?: string;\n\n    /**\n     * Heading for the relative range selection area\n     */\n    relativeRangeSelectionHeading?: string;\n\n    /**\n     * Visible label of the Cancel button\n     */\n    cancelButtonLabel?: string;\n    /**\n     * Visible label of the Clear and dismiss button\n     */\n    clearButtonLabel?: string;\n    /**\n     * Visible label of the Apply button\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     */\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     */\n    formatUnit?: (unit: TimeUnit, value: number) => string;\n\n    /**\n     * Visible label for the option for selecting\n     * a custom relative range.\n     */\n    customRelativeRangeOptionLabel?: string;\n\n    /**\n     * Visible description for the option for selecting\n     * a custom relative range.\n     */\n    customRelativeRangeOptionDescription?: string;\n\n    /**\n     * Visible label for the duration selector for\n     * the custom relative range.\n     */\n    customRelativeRangeDurationLabel?: string;\n    /**\n     * Placeholder for the duration selector for\n     * the custom relative range.\n     */\n    customRelativeRangeDurationPlaceholder?: string;\n    /**\n     * Visible label for the unit selector for the\n     * custom relative range.\n     */\n    customRelativeRangeUnitLabel?: string;\n\n    /**\n     * Used as part of the aria label for today's date in the calendar.\n     */\n    todayAriaLabel?: string;\n\n    /**\n     * An aria label for the 'next month' button.\n     */\n    nextMonthAriaLabel?: string;\n\n    /**\n     * An aria label for the 'previous month' button.\n     */\n    previousMonthAriaLabel?: string;\n\n    /**\n     * Visible label for the Start Date input for the\n     * absolute range.\n     */\n    startDateLabel?: string;\n    /**\n     * Visible label for the Start Time input for the\n     * absolute range.\n     */\n    startTimeLabel?: string;\n    /**\n     * Visible label for the End Date input for the\n     * absolute range.\n     */\n    endDateLabel?: string;\n    /**\n     * Visible label for the End Time input for the\n     * absolute range.\n     */\n    endTimeLabel?: string;\n\n    /**\n     * Constraint text for the input fields for the\n     * absolute range.\n     */\n    dateTimeConstraintText?: string;\n\n    /**\n     * Provides a text alternative for the error icon in the error alert.\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  export type AbsoluteFormat = 'iso' | 'long-localized';\n}\n\nexport type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type RangeCalendarI18nStrings = Pick<\n  DateRangePickerProps.I18nStrings,\n  | 'todayAriaLabel'\n  | 'nextMonthAriaLabel'\n  | 'previousMonthAriaLabel'\n  | 'startDateLabel'\n  | 'startTimeLabel'\n  | 'endDateLabel'\n  | 'endTimeLabel'\n  | 'dateTimeConstraintText'\n  | 'renderSelectedAbsoluteRangeAriaLive'\n>;\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 { 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 { 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 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?: TimeInputProps.Format;\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  /**\n   * Specifies the granularity at which users will be able to select a date range.\n   * Defaults to `day`.\n   */\n  granularity?: DateRangePickerProps.Granularity;\n}\nexport interface DateRangePickerProps\n  extends BaseComponentProps,\n    FormFieldValidationControlProps,\n    ExpandToViewport,\n    DateRangePickerBaseProps {\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   *\n   * Defaults to `iso`.\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\n     * absolute range.\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\n     * absolute range.\n     * @i18n\n     */\n    dateTimeConstraintText?: string;\n\n    /**\n     * Constraint text for the month input fields for the\n     * absolute range.\n     * @i18n\n     */\n    monthConstraintText?: 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 = 'iso' | 'long-localized';\n\n  export type Granularity = 'day' | 'month';\n}\n\nexport type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type QuarterIndex = 0 | 1 | 2;\n\nexport type RangeCalendarI18nStrings = Pick<\n  DateRangePickerProps.I18nStrings,\n  | 'todayAriaLabel'\n  | 'nextMonthAriaLabel'\n  | 'previousMonthAriaLabel'\n  | 'currentMonthAriaLabel'\n  | 'nextYearAriaLabel'\n  | 'previousYearAriaLabel'\n  | 'startMonthLabel'\n  | 'startDateLabel'\n  | 'startTimeLabel'\n  | 'endMonthLabel'\n  | 'endDateLabel'\n  | 'endTimeLabel'\n  | 'dateConstraintText'\n  | 'dateTimeConstraintText'\n  | 'monthConstraintText'\n  | 'renderSelectedAbsoluteRangeAriaLive'\n>;\n"]}

package/date-range-picker/mode-switcher.js

@@ -3,10 +3,10 @@
 import React from 'react';
 import { useInternalI18n } from '../i18n/context';
 import InternalSegmentedControl from '../segmented-control/internal';
-import styles from './styles.css.js';
+import testutilStyles from './test-classes/styles.css.js';
 export default function ModeSwitcher({ i18nStrings, mode, onChange }) {
     const i18n = useInternalI18n('date-range-picker');
-    return (React.createElement(InternalSegmentedControl, { className: styles['mode-switch'], selectedId: mode, label: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.modeSelectionLabel, options: [
+    return (React.createElement(InternalSegmentedControl, { className: testutilStyles['mode-switch'], selectedId: mode, label: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.modeSelectionLabel, options: [
             { id: 'relative', text: i18n('i18nStrings.relativeModeTitle', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.relativeModeTitle) },
             { id: 'absolute', text: i18n('i18nStrings.absoluteModeTitle', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.absoluteModeTitle) },
         ], onChange: e => onChange(e.detail.selectedId) }));

package/date-range-picker/mode-switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"mode-switcher.js","sourceRoot":"","sources":["../../../src/date-range-picker/mode-switcher.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAGrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAqB;IACrF,MAAM,IAAI,GAAG,eAAe,CAAC,mBAAmB,CAAC,CAAC;IAElD,OAAO,CACL,oBAAC,wBAAwB,IACvB,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAChC,UAAU,EAAE,IAAI,EAChB,KAAK,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,EACtC,OAAO,EAAE;YACP,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,+BAA+B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,CAAC,EAAE;YAC/F,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,+BAA+B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,CAAC,EAAE;SAChG,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAqC,CAAC,GACvE,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { useInternalI18n } from '../i18n/context';\nimport InternalSegmentedControl from '../segmented-control/internal';\nimport { DateRangePickerProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface ModeSwitcherProps extends Pick<DateRangePickerProps, 'i18nStrings'> {\n  mode: 'absolute' | 'relative';\n  onChange: (mode: 'absolute' | 'relative') => void;\n}\n\nexport default function ModeSwitcher({ i18nStrings, mode, onChange }: ModeSwitcherProps) {\n  const i18n = useInternalI18n('date-range-picker');\n\n  return (\n    <InternalSegmentedControl\n      className={styles['mode-switch']}\n      selectedId={mode}\n      label={i18nStrings?.modeSelectionLabel}\n      options={[\n        { id: 'relative', text: i18n('i18nStrings.relativeModeTitle', i18nStrings?.relativeModeTitle) },\n        { id: 'absolute', text: i18n('i18nStrings.absoluteModeTitle', i18nStrings?.absoluteModeTitle) },\n      ]}\n      onChange={e => onChange(e.detail.selectedId as 'absolute' | 'relative')}\n    />\n  );\n}\n"]}
+{"version":3,"file":"mode-switcher.js","sourceRoot":"","sources":["../../../src/date-range-picker/mode-switcher.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAGrE,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAO1D,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAqB;IACrF,MAAM,IAAI,GAAG,eAAe,CAAC,mBAAmB,CAAC,CAAC;IAElD,OAAO,CACL,oBAAC,wBAAwB,IACvB,SAAS,EAAE,cAAc,CAAC,aAAa,CAAC,EACxC,UAAU,EAAE,IAAI,EAChB,KAAK,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,EACtC,OAAO,EAAE;YACP,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,+BAA+B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,CAAC,EAAE;YAC/F,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,+BAA+B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,CAAC,EAAE;SAChG,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAqC,CAAC,GACvE,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { useInternalI18n } from '../i18n/context';\nimport InternalSegmentedControl from '../segmented-control/internal';\nimport { DateRangePickerProps } from './interfaces';\n\nimport testutilStyles from './test-classes/styles.css.js';\n\ninterface ModeSwitcherProps extends Pick<DateRangePickerProps, 'i18nStrings'> {\n  mode: 'absolute' | 'relative';\n  onChange: (mode: 'absolute' | 'relative') => void;\n}\n\nexport default function ModeSwitcher({ i18nStrings, mode, onChange }: ModeSwitcherProps) {\n  const i18n = useInternalI18n('date-range-picker');\n\n  return (\n    <InternalSegmentedControl\n      className={testutilStyles['mode-switch']}\n      selectedId={mode}\n      label={i18nStrings?.modeSelectionLabel}\n      options={[\n        { id: 'relative', text: i18n('i18nStrings.relativeModeTitle', i18nStrings?.relativeModeTitle) },\n        { id: 'absolute', text: i18n('i18nStrings.absoluteModeTitle', i18nStrings?.absoluteModeTitle) },\n      ]}\n      onChange={e => onChange(e.detail.selectedId as 'absolute' | 'relative')}\n    />\n  );\n}\n"]}

package/date-range-picker/relative-range/index.d.ts

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

package/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":";AAeA,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAIrD,UAAU,wBAAwB;IAChC,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;AAYD,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,GACZ,EAAE,wBAAwB,eAmL1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/relative-range/index.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAKrD,UAAU,wBAAwB;IAChC,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,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC;CAChD;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"}

package/date-range-picker/relative-range/index.js

@@ -10,11 +10,13 @@ import InternalInput from '../../input/internal';
 import InternalRadioGroup from '../../radio-group/internal';
 import InternalSelect from '../../select/internal';
 import InternalSpaceBetween from '../../space-between/internal';
+import testutilStyles from '../test-classes/styles.css.js';
 import styles from './styles.css.js';
-const dayUnits = ['day', 'week', 'month', 'year'];
+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, }) {
+export default function RelativeRangePicker({ dateOnly, options: clientOptions = [], initialSelection: initialRange, onChange: onChangeRangeSize, i18nStrings, isSingleGrid, customUnits, granularity = 'day', }) {
     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 }));
@@ -42,7 +44,7 @@ export default function RelativeRangePicker({ dateOnly, options: clientOptions =
         // NaN represents an empty duration
         return NaN;
     });
-    let finalUnits = dateOnly ? dayUnits : units;
+    let finalUnits = granularity === 'month' ? monthUnits : dateOnly ? dayUnits : units;
     if (customUnits) {
         finalUnits = customUnits.filter(unit => {
             if (units.includes(unit)) {
@@ -52,7 +54,7 @@ export default function RelativeRangePicker({ dateOnly, options: clientOptions =
             return false;
         });
     }
-    let initialCustomTimeUnit = dateOnly ? 'day' : 'minute';
+    let initialCustomTimeUnit = granularity === 'month' ? 'month' : dateOnly ? 'day' : 'minute';
     if (!finalUnits.includes(initialCustomTimeUnit)) {
         initialCustomTimeUnit = finalUnits[0];
     }
@@ -61,8 +63,12 @@ export default function RelativeRangePicker({ dateOnly, options: clientOptions =
     const showCustomControls = clientOptions.length === 0 || selectedRadio === CUSTOM_OPTION_SELECT_KEY;
     return (React.createElement("div", null,
         React.createElement(InternalSpaceBetween, { size: "xs", direction: "vertical" },
-            showRadioControl && (React.createElement(InternalFormField, { label: i18n('i18nStrings.relativeRangeSelectionHeading', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.relativeRangeSelectionHeading) },
-                React.createElement(InternalRadioGroup, { className: styles['relative-range-radio-group'], onChange: ({ detail }) => {
+            showRadioControl && (React.createElement(InternalFormField, Object.assign({}, {
+                label: i18n('i18nStrings.relativeRangeSelectionHeading', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.relativeRangeSelectionHeading),
+                description: granularity === 'month' &&
+                    i18n('i18nStrings.relativeRangeSelectionMonthlyDescription', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.relativeRangeSelectionMonthlyDescription),
+            }),
+                React.createElement(InternalRadioGroup, { className: testutilStyles['relative-range-radio-group'], onChange: ({ detail }) => {
                         setSelectedRadio(detail.value);
                         if (detail.value === CUSTOM_OPTION_SELECT_KEY) {
                             setCustomDuration(NaN);
@@ -88,14 +94,14 @@ export default function RelativeRangePicker({ dateOnly, options: clientOptions =
                         }) },
                         React.createElement("div", { className: styles['custom-range-duration'] },
                             React.createElement(InternalFormField, { label: i18n('i18nStrings.customRelativeRangeDurationLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.customRelativeRangeDurationLabel) },
-                                React.createElement(InternalInput, { type: "number", className: styles['custom-range-duration-input'], value: isNaN(customDuration) || customDuration === 0 ? '' : customDuration === null || customDuration === void 0 ? void 0 : customDuration.toString(), onChange: e => {
+                                React.createElement(InternalInput, { type: "number", className: testutilStyles['custom-range-duration-input'], value: isNaN(customDuration) || customDuration === 0 ? '' : customDuration === null || customDuration === void 0 ? void 0 : customDuration.toString(), onChange: e => {
                                         const amount = Number(e.detail.value);
                                         setCustomDuration(amount);
                                         onChangeRangeSize({ amount, unit: customUnitOfTime, type: 'relative' });
                                     }, placeholder: i18n('i18nStrings.customRelativeRangeDurationPlaceholder', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.customRelativeRangeDurationPlaceholder), __inheritFormFieldProps: true }))),
                         React.createElement("div", { className: styles['custom-range-unit'] },
                             React.createElement(InternalFormField, { label: i18n('i18nStrings.customRelativeRangeUnitLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.customRelativeRangeUnitLabel) },
-                                React.createElement(InternalSelect, { className: styles['custom-range-unit-select'], selectedOption: {
+                                React.createElement(InternalSelect, { className: testutilStyles['custom-range-unit-select'], selectedOption: {
                                         value: customUnitOfTime,
                                         label: formatUnit === null || formatUnit === void 0 ? void 0 : formatUnit(customUnitOfTime, customDuration),
                                     }, onChange: e => {

package/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":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAEzE,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,iBAAiB,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAEjD,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAC5D,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,oBAAoB,MAAM,8BAA8B,CAAC;AAGhE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAiBrC,MAAM,QAAQ,GAAiD,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AAChG,MAAM,KAAK,GAAiD,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC;AAEtG,MAAM,wBAAwB,GAAG,oCAAoC,CAAC;AAEtE,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,OAAO,EAAE,aAAa,GAAG,EAAE,EAC3B,gBAAgB,EAAE,YAAY,EAC9B,QAAQ,EAAE,iBAAiB,EAC3B,WAAW,EACX,YAAY,EACZ,WAAW,GACc;;IACzB,MAAM,IAAI,GAAG,eAAe,CAAC,mBAAmB,CAAC,CAAC;IAClD,MAAM,mBAAmB,GAAG,IAAI,CAC9B,iCAAiC,EACjC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,EAChC,MAAM,CAAC,EAAE,CACP,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,CACnB,MAAM,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAC7B,CAAC;IACF,MAAM,UAAU,GAAG,IAAI,CACrB,wBAAwB,EACxB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,UAAU,EACvB,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CACrD,CAAC;IAEF,MAAM,YAAY,GAA4C,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACzF,KAAK,EAAE,MAAM,CAAC,GAAG;QACjB,KAAK,EAAE,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,MAAM,CAAC;KACrC,CAAC,CAAC,CAAC;IACJ,YAAY,CAAC,IAAI,CAAC;QAChB,KAAK,EAAE,wBAAwB;QAC/B,KAAK,EAAE,IAAI,CAAC,4CAA4C,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,8BAA8B,CAAC;QACtG,WAAW,EAAE,IAAI,CACf,kDAAkD,EAClD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oCAAoC,CAClD;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;;QACtD,IAAI,YAAY,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE;YACrC,OAAO,wBAAwB,CAAC;SACjC;QACD,OAAO,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,GAAG,mCAAI,IAAI,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QACxD,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC,MAAM,CAAC;SAC5B;QACD,mCAAmC;QACnC,OAAO,GAAG,CAAC;IACb,CAAC,CAAC,CAAC;IAEH,IAAI,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC7C,IAAI,WAAW,EAAE;QACf,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;YACrC,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBACxB,OAAO,IAAI,CAAC;aACb;YACD,QAAQ,CACN,iBAAiB,EACjB,mDAAmD,IAAI,+BAA+B,CACvF,CAAC;YACF,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CAAC;KACJ;IAED,IAAI,qBAAqB,GAAkC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvF,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAAE;QAC/C,qBAAqB,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;KACvC;IACD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CACtD,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,mCAAI,qBAAqB,CAC5C,CAAC;IAEF,MAAM,gBAAgB,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAClD,MAAM,kBAAkB,GAAG,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,aAAa,KAAK,wBAAwB,CAAC;IAEpG,OAAO,CACL;QACE,oBAAC,oBAAoB,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,UAAU;YACjD,gBAAgB,IAAI,CACnB,oBAAC,iBAAiB,IAChB,KAAK,EAAE,IAAI,CAAC,2CAA2C,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,6BAA6B,CAAC;gBAEpG,oBAAC,kBAAkB,IACjB,SAAS,EAAE,MAAM,CAAC,4BAA4B,CAAC,EAC/C,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;wBACvB,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAE/B,IAAI,MAAM,CAAC,KAAK,KAAK,wBAAwB,EAAE;4BAC7C,iBAAiB,CAAC,GAAG,CAAC,CAAC;4BACvB,mBAAmB,CAAC,qBAAqB,CAAC,CAAC;4BAC3C,iBAAiB,CAAC;gCAChB,MAAM,EAAE,GAAG;gCACX,IAAI,EAAE,qBAAqB;gCAC3B,IAAI,EAAE,UAAU;6BACjB,CAAC,CAAC;yBACJ;6BAAM;4BACL,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;4BACpE,iBAAiB,CAAC,MAAM,CAAC,CAAC;yBAC3B;oBACH,CAAC,EACD,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,YAAY,GACnB,CACgB,CACrB;YAEA,kBAAkB,IAAI,CACrB,oBAAC,oBAAoB,IAAC,SAAS,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI;gBACjD,CAAC,gBAAgB,IAAI,CACpB,oBAAC,WAAW,IAAC,QAAQ,EAAC,QAAQ,EAAC,KAAK,EAAC,qBAAqB,IACvD,IAAI,CACH,kDAAkD,EAClD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oCAAoC,CAClD,CACW,CACf;gBAED,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE;wBACtC,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,CAAC,gBAAgB;qBACxD,CAAC;oBAEF,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,4BAA4B,CAAC,EAAE;4BACpD,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,YAAY;yBAChC,CAAC;wBAEF,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC;4BAC7C,oBAAC,iBAAiB,IAChB,KAAK,EAAE,IAAI,CACT,8CAA8C,EAC9C,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gCAAgC,CAC9C;gCAED,oBAAC,aAAa,IACZ,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,6BAA6B,CAAC,EAChD,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,QAAQ,EAAE,EACtF,QAAQ,EAAE,CAAC,CAAC,EAAE;wCACZ,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wCAEtC,iBAAiB,CAAC,MAAM,CAAC,CAAC;wCAC1B,iBAAiB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;oCAC1E,CAAC,EACD,WAAW,EAAE,IAAI,CACf,oDAAoD,EACpD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,sCAAsC,CACpD,EACD,uBAAuB,EAAE,IAAI,GAC7B,CACgB,CAChB;wBAEN,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC;4BACzC,oBAAC,iBAAiB,IAChB,KAAK,EAAE,IAAI,CAAC,0CAA0C,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,4BAA4B,CAAC;gCAElG,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC,EAC7C,cAAc,EACZ;wCACE,KAAK,EAAE,gBAAgB;wCACvB,KAAK,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,gBAAgB,EAAE,cAAc,CAAC;qCAClC,EAEvB,QAAQ,EAAE,CAAC,CAAC,EAAE;wCACZ,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,cAAkC,CAAC;wCAEpE,mBAAmB,CAAC,IAAI,CAAC,CAAC;wCAC1B,iBAAiB,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;oCACxE,CAAC,EACD,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;wCAC/B,KAAK,EAAE,IAAI;wCACX,KAAK,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,IAAI,EAAE,cAAc,CAAC;qCAC1C,CAAC,CAAC,EACH,yBAAyB,EAAE,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,IAAI,EAAE,GACvE,CACgB,CAChB,CACF,CACF,CACe,CACxB,CACoB,CACnB,CACP,CAAC;AACJ,CAAC","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 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 styles from './styles.css.js';\n\ninterface RelativeRangePickerProps {\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 dayUnits: ReadonlyArray<DateRangePickerProps.TimeUnit> = ['day', 'week', 'month', 'year'];\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}: 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 = 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 = 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            label={i18n('i18nStrings.relativeRangeSelectionHeading', i18nStrings?.relativeRangeSelectionHeading)}\n          >\n            <InternalRadioGroup\n              className={styles['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={styles['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={styles['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 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 {\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  granularity?: DateRangePickerProps.Granularity;\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"]}

package/date-range-picker/relative-range/styles.css.js

@@ -1,14 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "custom-range": "awsui_custom-range_16zmw_k2gxg_145",
-  "custom-range--no-padding": "awsui_custom-range--no-padding_16zmw_k2gxg_151",
-  "custom-range-form-controls": "awsui_custom-range-form-controls_16zmw_k2gxg_155",
-  "custom-range-duration": "awsui_custom-range-duration_16zmw_k2gxg_159",
-  "custom-range-unit": "awsui_custom-range-unit_16zmw_k2gxg_160",
-  "vertical": "awsui_vertical_16zmw_k2gxg_166",
-  "custom-range-duration-input": "awsui_custom-range-duration-input_16zmw_k2gxg_177",
-  "custom-range-unit-select": "awsui_custom-range-unit-select_16zmw_k2gxg_178",
-  "relative-range-radio-group": "awsui_relative-range-radio-group_16zmw_k2gxg_182"
+  "custom-range": "awsui_custom-range_16zmw_12l7m_145",
+  "custom-range--no-padding": "awsui_custom-range--no-padding_16zmw_12l7m_151",
+  "custom-range-form-controls": "awsui_custom-range-form-controls_16zmw_12l7m_155",
+  "custom-range-duration": "awsui_custom-range-duration_16zmw_12l7m_159",
+  "custom-range-unit": "awsui_custom-range-unit_16zmw_12l7m_160",
+  "vertical": "awsui_vertical_16zmw_12l7m_166"
 };
   

package/date-range-picker/relative-range/styles.scoped.css

@@ -142,43 +142,34 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_custom-range_16zmw_k2gxg_145:not(#\9) {
+.awsui_custom-range_16zmw_12l7m_145:not(#\9) {
   padding-inline-start: calc(14px + var(--space-xs-zb16t3, 8px));
   display: flex;
   inline-size: 80%;
 }
 
-.awsui_custom-range--no-padding_16zmw_k2gxg_151:not(#\9) {
+.awsui_custom-range--no-padding_16zmw_12l7m_151:not(#\9) {
   padding-inline-start: 0;
 }
 
-.awsui_custom-range-form-controls_16zmw_k2gxg_155:not(#\9) {
+.awsui_custom-range-form-controls_16zmw_12l7m_155:not(#\9) {
   display: flex;
   inline-size: 100%;
 }
-.awsui_custom-range-form-controls_16zmw_k2gxg_155 > .awsui_custom-range-duration_16zmw_k2gxg_159:not(#\9),
-.awsui_custom-range-form-controls_16zmw_k2gxg_155 > .awsui_custom-range-unit_16zmw_k2gxg_160:not(#\9) {
+.awsui_custom-range-form-controls_16zmw_12l7m_155 > .awsui_custom-range-duration_16zmw_12l7m_159:not(#\9),
+.awsui_custom-range-form-controls_16zmw_12l7m_155 > .awsui_custom-range-unit_16zmw_12l7m_160:not(#\9) {
   inline-size: 50%;
 }
-.awsui_custom-range-form-controls_16zmw_k2gxg_155 > .awsui_custom-range-duration_16zmw_k2gxg_159:not(#\9) {
+.awsui_custom-range-form-controls_16zmw_12l7m_155 > .awsui_custom-range-duration_16zmw_12l7m_159:not(#\9) {
   margin-inline-end: var(--space-xs-zb16t3, 8px);
 }
-.awsui_custom-range-form-controls_16zmw_k2gxg_155.awsui_vertical_16zmw_k2gxg_166:not(#\9) {
+.awsui_custom-range-form-controls_16zmw_12l7m_155.awsui_vertical_16zmw_12l7m_166:not(#\9) {
   flex-direction: column;
 }
-.awsui_custom-range-form-controls_16zmw_k2gxg_155.awsui_vertical_16zmw_k2gxg_166 > .awsui_custom-range-duration_16zmw_k2gxg_159:not(#\9),
-.awsui_custom-range-form-controls_16zmw_k2gxg_155.awsui_vertical_16zmw_k2gxg_166 > .awsui_custom-range-unit_16zmw_k2gxg_160:not(#\9) {
+.awsui_custom-range-form-controls_16zmw_12l7m_155.awsui_vertical_16zmw_12l7m_166 > .awsui_custom-range-duration_16zmw_12l7m_159:not(#\9),
+.awsui_custom-range-form-controls_16zmw_12l7m_155.awsui_vertical_16zmw_12l7m_166 > .awsui_custom-range-unit_16zmw_12l7m_160:not(#\9) {
   inline-size: 100%;
 }
-.awsui_custom-range-form-controls_16zmw_k2gxg_155.awsui_vertical_16zmw_k2gxg_166 > .awsui_custom-range-unit_16zmw_k2gxg_160:not(#\9) {
+.awsui_custom-range-form-controls_16zmw_12l7m_155.awsui_vertical_16zmw_12l7m_166 > .awsui_custom-range-unit_16zmw_12l7m_160:not(#\9) {
   margin-block-start: var(--space-s-34lx8l, 12px);
-}
-
-.awsui_custom-range-duration-input_16zmw_k2gxg_177:not(#\9),
-.awsui_custom-range-unit-select_16zmw_k2gxg_178:not(#\9) {
-  /* used in test-utils */
-}
-
-.awsui_relative-range-radio-group_16zmw_k2gxg_182:not(#\9) {
-  /* used in test-utils */
 }