@cloudscape-design/components 3.0.0

package/date-range-picker/index.js

@@ -0,0 +1,155 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './styles.css.js';
+import { normalizeLocale } from '../date-picker/calendar/utils/locales';
+import { getWeekStartByLocale } from 'weekstart';
+import useForwardFocus from '../internal/hooks/forward-focus';
+import { KeyCode } from '../internal/keycode';
+import clsx from 'clsx';
+import { getBaseProps } from '../internal/base-component';
+import checkControlled from '../internal/hooks/check-controlled';
+import InternalBox from '../box/internal';
+import { DateRangePickerDropdown } from './dropdown';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import Dropdown from '../internal/components/dropdown';
+import { useFocusTracker } from '../internal/hooks/use-focus-tracker';
+import { useMobile } from '../internal/hooks/use-mobile';
+import ButtonTrigger from '../internal/components/button-trigger';
+import { useFormFieldContext } from '../internal/context/form-field-context';
+import InternalIcon from '../icon/internal';
+import { getBrowserTimezoneOffset, shiftTimeOffset, formatOffset, setTimeOffset } from './time-offset';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { fireNonCancelableEvent } from '../internal/events/index.js';
+import { isDevelopment } from '../internal/is-development.js';
+import { warnOnce } from '../internal/logging.js';
+import { usePrevious } from '../internal/hooks/use-previous/index.js';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
+function formatDateRange(range, placeholder, formatRelativeRange, timeOffset) {
+    if (!range) {
+        return (React.createElement("span", { className: styles['label-text'], "aria-disabled": true }, placeholder));
+    }
+    if (range.type === 'relative') {
+        return (React.createElement(InternalBox, { fontWeight: "normal", display: "inline", color: "inherit" }, formatRelativeRange(range)));
+    }
+    if (range.type === 'absolute') {
+        var formattedOffset = isDateOnly(range) ? '' : formatOffset(timeOffset);
+        return (React.createElement(InternalBox, { fontWeight: "normal", display: "inline", color: "inherit" },
+            React.createElement("span", { className: styles['preferred-wordbreak'] },
+                range.startDate,
+                formattedOffset,
+                " \u2014"),
+            ' ',
+            React.createElement("span", { className: styles['preferred-wordbreak'] },
+                range.endDate,
+                formattedOffset)));
+    }
+}
+function isDateOnly(value) {
+    if (!value || value.type !== 'absolute') {
+        return false;
+    }
+    var dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+    return dateRegex.test(value.startDate) && dateRegex.test(value.endDate);
+}
+function formatValue(value, _a) {
+    var timeOffset = _a.timeOffset, dateOnly = _a.dateOnly;
+    if (!value || value.type === 'relative') {
+        return value;
+    }
+    if (dateOnly) {
+        return {
+            type: 'absolute',
+            startDate: value.startDate.split('T')[0],
+            endDate: value.endDate.split('T')[0]
+        };
+    }
+    return setTimeOffset(value, timeOffset);
+}
+var DateRangePicker = React.forwardRef(function (_a, ref) {
+    var _b;
+    var _c, _d;
+    var _e = _a.locale, locale = _e === void 0 ? '' : _e, startOfWeek = _a.startOfWeek, _f = _a.isDateEnabled, isDateEnabled = _f === void 0 ? function () { return true; } : _f, value = _a.value, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _j = _a.relativeOptions, relativeOptions = _j === void 0 ? [] : _j, i18nStrings = _a.i18nStrings, _k = _a.isValidRange, isValidRange = _k === void 0 ? function () { return ({ valid: true }); } : _k, _l = _a.showClearButton, showClearButton = _l === void 0 ? true : _l, _m = _a.dateOnly, dateOnly = _m === void 0 ? false : _m, _o = _a.timeOffset, timeOffset = _o === void 0 ? getBrowserTimezoneOffset() : _o, _p = _a.timeInputFormat, timeInputFormat = _p === void 0 ? 'hh:mm:ss' : _p, _q = _a.expandToViewport, expandToViewport = _q === void 0 ? false : _q, _r = _a.rangeSelectorMode, rangeSelectorMode = _r === void 0 ? 'default' : _r, rest = __rest(_a, ["locale", "startOfWeek", "isDateEnabled", "value", "placeholder", "readOnly", "disabled", "onChange", "onBlur", "onFocus", "relativeOptions", "i18nStrings", "isValidRange", "showClearButton", "dateOnly", "timeOffset", "timeInputFormat", "expandToViewport", "rangeSelectorMode"]);
+    var __internalRootRef = useBaseComponent('DateRangePicker').__internalRootRef;
+    checkControlled('DateRangePicker', 'value', value, 'onChange', onChange);
+    value = isDateOnly(value) ? value : shiftTimeOffset(value, timeOffset);
+    var baseProps = getBaseProps(rest);
+    var _s = useFormFieldContext(__assign({ ariaLabelledby: (_c = rest.ariaLabelledby) !== null && _c !== void 0 ? _c : i18nStrings.ariaLabelledby, ariaDescribedby: (_d = rest.ariaDescribedby) !== null && _d !== void 0 ? _d : i18nStrings.ariaDescribedby }, rest)), invalid = _s.invalid, controlId = _s.controlId, ariaDescribedby = _s.ariaDescribedby, ariaLabelledby = _s.ariaLabelledby;
+    var isSingleGrid = useMobile();
+    var triggerRef = useRef(null);
+    useForwardFocus(ref, triggerRef);
+    var rootRef = useRef(null);
+    var dropdownId = useUniqueId('date-range-picker-dropdown');
+    useFocusTracker({ rootRef: rootRef, onBlur: onBlur, onFocus: onFocus, viewportId: expandToViewport ? dropdownId : '' });
+    var _t = useState(false), isDropDownOpen = _t[0], setIsDropDownOpen = _t[1];
+    var normalizedLocale = normalizeLocale('DateRangePicker', locale !== null && locale !== void 0 ? locale : '');
+    var normalizedStartOfWeek = (typeof startOfWeek === 'number' ? startOfWeek % 7 : getWeekStartByLocale(normalizedLocale));
+    var closeDropdown = function (focusTrigger) {
+        var _a;
+        if (focusTrigger === void 0) { focusTrigger = false; }
+        setIsDropDownOpen(false);
+        if (focusTrigger) {
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    var onWrapperKeyDownHandler = function (event) {
+        if (event.keyCode === KeyCode.escape) {
+            closeDropdown(true);
+        }
+    };
+    var onClear = function () {
+        fireNonCancelableEvent(onChange, { value: null });
+    };
+    var onApply = function (newValue) {
+        var validationResult = isValidRange(newValue);
+        if ((validationResult === null || validationResult === void 0 ? void 0 : validationResult.valid) === false) {
+            return validationResult;
+        }
+        if (isDevelopment) {
+            if ((newValue === null || newValue === void 0 ? void 0 : newValue.type) === 'absolute') {
+                var startDateWithoutTime = newValue.startDate.split('T')[0];
+                var endDateWithoutTime = newValue.endDate.split('T')[0];
+                if (!startDateWithoutTime || !endDateWithoutTime) {
+                    warnOnce('DateRangePicker', 'You have provided an `isValidRange` prop that did not catch a missing start or end date.');
+                }
+            }
+        }
+        fireNonCancelableEvent(onChange, { value: formatValue(newValue, { dateOnly: dateOnly, timeOffset: timeOffset }) });
+        return validationResult || { valid: true };
+    };
+    var prevDateOnly = usePrevious(dateOnly);
+    useEffect(function () {
+        if (prevDateOnly !== undefined && prevDateOnly !== dateOnly) {
+            warnOnce('DateRangePicker', "The provided `dateOnly` flag has been changed from \"".concat(prevDateOnly, "\" to \"").concat(dateOnly, "\" which can lead to unexpected value format. Consider using separate components."));
+        }
+    }, [prevDateOnly, dateOnly]);
+    if (value && value.type !== 'absolute' && value.type !== 'relative') {
+        warnOnce('DateRangePicker', 'You provided an invalid value. Reverting back to default.');
+        value = null;
+    }
+    if (((value === null || value === void 0 ? void 0 : value.type) === 'absolute' && rangeSelectorMode === 'relative-only') ||
+        ((value === null || value === void 0 ? void 0 : value.type) === 'relative' && rangeSelectorMode === 'absolute-only')) {
+        warnOnce('DateRangePicker', 'The provided value does not correspond to the current range selector mode. Reverting back to default.');
+        value = null;
+    }
+    var trigger = (React.createElement("div", { className: styles['trigger-wrapper'] },
+        React.createElement(ButtonTrigger, { ref: triggerRef, id: controlId, invalid: invalid, ariaLabel: i18nStrings.ariaLabel, ariaDescribedby: ariaDescribedby, ariaLabelledby: ariaLabelledby, className: clsx(styles.label, (_b = {},
+                _b[styles['label-enabled']] = !readOnly && !disabled,
+                _b)), hideCaret: true, onClick: function () {
+                if (!readOnly && !disabled) {
+                    setIsDropDownOpen(true);
+                }
+            }, disabled: disabled, readOnly: readOnly, ariaHasPopup: "true" },
+            React.createElement("span", { className: styles['trigger-flexbox'] },
+                React.createElement("span", { className: styles['icon-wrapper'] },
+                    React.createElement(InternalIcon, { name: "calendar", variant: disabled || readOnly ? 'disabled' : 'normal' })),
+                formatDateRange(value, placeholder !== null && placeholder !== void 0 ? placeholder : '', i18nStrings.formatRelativeRange, timeOffset)))));
+    var mergedRef = useMergeRefs(rootRef, __internalRootRef);
+    return (React.createElement("div", __assign({}, baseProps, { ref: mergedRef, className: clsx(baseProps.className, styles.root), onKeyDown: onWrapperKeyDownHandler }),
+        React.createElement(Dropdown, { stretchWidth: true, stretchHeight: true, open: isDropDownOpen, onDropdownClose: function () { return closeDropdown(); }, trigger: trigger, stretchToTriggerWidth: false, expandToViewport: expandToViewport, dropdownId: dropdownId }, isDropDownOpen && (React.createElement(DateRangePickerDropdown, { startOfWeek: normalizedStartOfWeek, locale: normalizedLocale, isSingleGrid: isSingleGrid, onDropdownClose: function () { return closeDropdown(true); }, value: value, showClearButton: showClearButton, isDateEnabled: isDateEnabled, i18nStrings: i18nStrings, onClear: onClear, onApply: onApply, relativeOptions: relativeOptions, isValidRange: isValidRange, dateOnly: dateOnly, timeInputFormat: timeInputFormat, rangeSelectorMode: rangeSelectorMode, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby })))));
+});
+applyDisplayName(DateRangePicker, 'DateRangePicker');
+export default DateRangePicker;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/date-range-picker/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, { Ref, useEffect, useRef, useState } from 'react';\nimport styles from './styles.css.js';\nimport { DateRangePickerProps } from './interfaces';\nimport { DayIndex } from './calendar';\nimport { normalizeLocale } from '../date-picker/calendar/utils/locales';\nimport { getWeekStartByLocale } from 'weekstart';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { KeyCode } from '../internal/keycode';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport InternalBox from '../box/internal';\nimport { DateRangePickerDropdown } from './dropdown';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport Dropdown from '../internal/components/dropdown';\nimport { useFocusTracker } from '../internal/hooks/use-focus-tracker';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport ButtonTrigger from '../internal/components/button-trigger';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport InternalIcon from '../icon/internal';\nimport { getBrowserTimezoneOffset, shiftTimeOffset, formatOffset, setTimeOffset } from './time-offset';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { fireNonCancelableEvent } from '../internal/events/index.js';\nimport { isDevelopment } from '../internal/is-development.js';\nimport { warnOnce } from '../internal/logging.js';\nimport { usePrevious } from '../internal/hooks/use-previous/index.js';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nexport { DateRangePickerProps };\n\nfunction formatDateRange(\n  range: null | DateRangePickerProps.Value,\n  placeholder: string,\n  formatRelativeRange: DateRangePickerProps.I18nStrings['formatRelativeRange'],\n  timeOffset: number\n) {\n  if (!range) {\n    return (\n      <span className={styles['label-text']} aria-disabled={true}>\n        {placeholder}\n      </span>\n    );\n  }\n\n  if (range.type === 'relative') {\n    return (\n      <InternalBox fontWeight=\"normal\" display=\"inline\" color=\"inherit\">\n        {formatRelativeRange(range)}\n      </InternalBox>\n    );\n  }\n\n  if (range.type === 'absolute') {\n    const formattedOffset = isDateOnly(range) ? '' : formatOffset(timeOffset);\n    return (\n      <InternalBox fontWeight=\"normal\" display=\"inline\" color=\"inherit\">\n        <span className={styles['preferred-wordbreak']}>\n          {range.startDate}\n          {formattedOffset} &mdash;\n        </span>{' '}\n        <span className={styles['preferred-wordbreak']}>\n          {range.endDate}\n          {formattedOffset}\n        </span>\n      </InternalBox>\n    );\n  }\n}\n\nfunction isDateOnly(value: null | DateRangePickerProps.Value) {\n  if (!value || value.type !== 'absolute') {\n    return false;\n  }\n  const dateRegex = /^\\d{4}-\\d{2}-\\d{2}$/;\n  return dateRegex.test(value.startDate) && dateRegex.test(value.endDate);\n}\n\nfunction formatValue(\n  value: null | DateRangePickerProps.Value,\n  { timeOffset, dateOnly }: { timeOffset: number; dateOnly: boolean }\n): null | DateRangePickerProps.Value {\n  if (!value || value.type === 'relative') {\n    return value;\n  }\n  if (dateOnly) {\n    return {\n      type: 'absolute',\n      startDate: value.startDate.split('T')[0],\n      endDate: value.endDate.split('T')[0],\n    };\n  }\n  return setTimeOffset(value, timeOffset);\n}\n\nconst DateRangePicker = React.forwardRef(\n  (\n    {\n      locale = '',\n      startOfWeek,\n      isDateEnabled = () => true,\n      value,\n      placeholder,\n      readOnly = false,\n      disabled = false,\n      onChange,\n      onBlur,\n      onFocus,\n      relativeOptions = [],\n      i18nStrings,\n      isValidRange = () => ({ valid: true }),\n      showClearButton = true,\n      dateOnly = false,\n      timeOffset = getBrowserTimezoneOffset(),\n      timeInputFormat = 'hh:mm:ss',\n      expandToViewport = false,\n      rangeSelectorMode = 'default',\n      ...rest\n    }: DateRangePickerProps,\n    ref: Ref<DateRangePickerProps.Ref>\n  ) => {\n    const { __internalRootRef } = useBaseComponent('DateRangePicker');\n    checkControlled('DateRangePicker', 'value', value, 'onChange', onChange);\n\n    value = isDateOnly(value) ? value : shiftTimeOffset(value, timeOffset);\n\n    const baseProps = getBaseProps(rest);\n    const { invalid, controlId, ariaDescribedby, ariaLabelledby } = useFormFieldContext({\n      ariaLabelledby: rest.ariaLabelledby ?? i18nStrings.ariaLabelledby,\n      ariaDescribedby: rest.ariaDescribedby ?? i18nStrings.ariaDescribedby,\n      ...rest,\n    });\n    const isSingleGrid = useMobile();\n\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n    useForwardFocus(ref, triggerRef);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const dropdownId = useUniqueId('date-range-picker-dropdown');\n\n    useFocusTracker({ rootRef, onBlur, onFocus, viewportId: expandToViewport ? dropdownId : '' });\n\n    const [isDropDownOpen, setIsDropDownOpen] = useState<boolean>(false);\n\n    const normalizedLocale = normalizeLocale('DateRangePicker', locale ?? '');\n    const normalizedStartOfWeek = (\n      typeof startOfWeek === 'number' ? startOfWeek % 7 : getWeekStartByLocale(normalizedLocale)\n    ) as DayIndex;\n\n    const closeDropdown = (focusTrigger = false) => {\n      setIsDropDownOpen(false);\n      if (focusTrigger) {\n        triggerRef.current?.focus();\n      }\n    };\n\n    const onWrapperKeyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.keyCode === KeyCode.escape) {\n        closeDropdown(true);\n      }\n    };\n\n    const onClear = () => {\n      fireNonCancelableEvent(onChange, { value: null });\n    };\n\n    const onApply = (newValue: null | DateRangePickerProps.Value): DateRangePickerProps.ValidationResult => {\n      const validationResult = isValidRange(newValue);\n      if (validationResult?.valid === false) {\n        return validationResult;\n      }\n\n      if (isDevelopment) {\n        if (newValue?.type === 'absolute') {\n          const [startDateWithoutTime] = newValue.startDate.split('T');\n          const [endDateWithoutTime] = newValue.endDate.split('T');\n          if (!startDateWithoutTime || !endDateWithoutTime) {\n            warnOnce(\n              'DateRangePicker',\n              'You have provided an `isValidRange` prop that did not catch a missing start or end date.'\n            );\n          }\n        }\n      }\n      fireNonCancelableEvent(onChange, { value: formatValue(newValue, { dateOnly, timeOffset }) });\n      return validationResult || { valid: true };\n    };\n\n    const prevDateOnly = usePrevious(dateOnly);\n    useEffect(() => {\n      if (prevDateOnly !== undefined && prevDateOnly !== dateOnly) {\n        warnOnce(\n          'DateRangePicker',\n          `The provided \\`dateOnly\\` flag has been changed from \"${prevDateOnly}\" to \"${dateOnly}\" which can lead to unexpected value format. Consider using separate components.`\n        );\n      }\n    }, [prevDateOnly, dateOnly]);\n\n    if (value && value.type !== 'absolute' && value.type !== 'relative') {\n      warnOnce('DateRangePicker', 'You provided an invalid value. Reverting back to default.');\n      value = null;\n    }\n\n    if (\n      (value?.type === 'absolute' && rangeSelectorMode === 'relative-only') ||\n      (value?.type === 'relative' && rangeSelectorMode === 'absolute-only')\n    ) {\n      warnOnce(\n        'DateRangePicker',\n        'The provided value does not correspond to the current range selector mode. Reverting back to default.'\n      );\n      value = null;\n    }\n\n    const trigger = (\n      <div className={styles['trigger-wrapper']}>\n        <ButtonTrigger\n          ref={triggerRef}\n          id={controlId}\n          invalid={invalid}\n          ariaLabel={i18nStrings.ariaLabel}\n          ariaDescribedby={ariaDescribedby}\n          ariaLabelledby={ariaLabelledby}\n          className={clsx(styles.label, {\n            [styles['label-enabled']]: !readOnly && !disabled,\n          })}\n          hideCaret={true}\n          onClick={() => {\n            if (!readOnly && !disabled) {\n              setIsDropDownOpen(true);\n            }\n          }}\n          disabled={disabled}\n          readOnly={readOnly}\n          ariaHasPopup=\"true\"\n        >\n          <span className={styles['trigger-flexbox']}>\n            <span className={styles['icon-wrapper']}>\n              <InternalIcon name=\"calendar\" variant={disabled || readOnly ? 'disabled' : 'normal'} />\n            </span>\n            {formatDateRange(value, placeholder ?? '', i18nStrings.formatRelativeRange, timeOffset)}\n          </span>\n        </ButtonTrigger>\n      </div>\n    );\n\n    const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n\n    return (\n      <div\n        {...baseProps}\n        ref={mergedRef}\n        className={clsx(baseProps.className, styles.root)}\n        onKeyDown={onWrapperKeyDownHandler}\n      >\n        <Dropdown\n          stretchWidth={true}\n          stretchHeight={true}\n          open={isDropDownOpen}\n          onDropdownClose={() => closeDropdown()}\n          trigger={trigger}\n          stretchToTriggerWidth={false}\n          expandToViewport={expandToViewport}\n          dropdownId={dropdownId}\n        >\n          {isDropDownOpen && (\n            <DateRangePickerDropdown\n              startOfWeek={normalizedStartOfWeek}\n              locale={normalizedLocale}\n              isSingleGrid={isSingleGrid}\n              onDropdownClose={() => closeDropdown(true)}\n              value={value}\n              showClearButton={showClearButton}\n              isDateEnabled={isDateEnabled}\n              i18nStrings={i18nStrings}\n              onClear={onClear}\n              onApply={onApply}\n              relativeOptions={relativeOptions}\n              isValidRange={isValidRange}\n              dateOnly={dateOnly}\n              timeInputFormat={timeInputFormat}\n              rangeSelectorMode={rangeSelectorMode}\n              ariaLabelledby={ariaLabelledby}\n              ariaDescribedby={ariaDescribedby}\n            />\n          )}\n        </Dropdown>\n      </div>\n    );\n  }\n);\n\napplyDisplayName(DateRangePicker, 'DateRangePicker');\nexport default DateRangePicker;\n"]}

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

@@ -0,0 +1,292 @@
+import { BaseComponentProps } from '../internal/base-component';
+import { FormFieldValidationControlProps } from '../internal/context/form-field-context';
+import { NonCancelableEventHandler } from '../internal/events';
+import { TimeInputProps } from '../time-input/interfaces';
+import { ExpandToViewport } from '../internal/components/dropdown/interfaces';
+export interface DateRangePickerProps extends BaseComponentProps, FormFieldValidationControlProps, ExpandToViewport {
+    /**
+     * The current date range value. Can be either an absolute time range
+     * or a relative time range.
+     */
+    value: null | DateRangePickerProps.Value;
+    /**
+     * A list of relative time ranges that are shown as suggestions.
+     */
+    relativeOptions: ReadonlyArray<DateRangePickerProps.RelativeOption>;
+    /**
+     * Specifies the placeholder text that is rendered when the value is empty.
+     */
+    placeholder?: string;
+    /**
+     * A function that defines whether a particular date should be enabled
+     * in the calendar or not. Note that disabling a date in the calendar
+     * still allows users to enter this date via keyboard. We therefore
+     * recommend that you also validate these constraints client- and
+     * server-side, in the same way as for other form elements.
+     */
+    isDateEnabled?: DateRangePickerProps.IsDateEnabledFunction;
+    /**
+     * The locale to be used for rendering month names and defining the
+     * starting date of the week. If not provided, it will be determined
+     * from the page and browser locales. Supported values and formats
+     * 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).
+     */
+    locale?: string;
+    /**
+     * Starting day of the week. [0-6] maps to [Sunday-Saturday].
+     * By default the starting day of the week is defined by the locale,
+     * but you can override it using this property.
+     */
+    startOfWeek?: number;
+    /**
+     * Specifies that the component is disabled, preventing the user from
+     * modifying the value. A disabled component cannot receive focus.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies that the component is read-only, preventing the user from
+     * modifying the value. A read-only component can receive focus.
+     */
+    readOnly?: boolean;
+    /**
+     * Fired when keyboard focus is set onto the UI control.
+     */
+    onFocus?: NonCancelableEventHandler<null>;
+    /**
+     * Fired when keyboard focus is removed from the UI control.
+     */
+    onBlur?: NonCancelableEventHandler<null>;
+    /**
+     * Fired whenever a user changes the component's value.
+     * The event `detail` contains the current value of the field.
+     */
+    onChange?: NonCancelableEventHandler<DateRangePickerProps.ChangeDetail>;
+    /**
+     * A function that defines whether a particular range is valid or not.
+     *
+     * Ensure that your function checks for missing fields in the value.
+     */
+    isValidRange: DateRangePickerProps.ValidationFunction;
+    /**
+     * An object containing all the necessary localized strings required by the component.
+     */
+    i18nStrings: DateRangePickerProps.I18nStrings;
+    /**
+     * Specifies whether the component should show a button that
+     * allows the user to clear the selected value.
+     */
+    showClearButton?: boolean;
+    /**
+     * Hides time inputs and changes the input format to date-only, e.g. 2021-04-06.
+     *
+     * 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.
+     *
+     * Default: `false`.
+     */
+    dateOnly?: boolean;
+    /**
+     * Determines the range selector mode as follows:
+     * * `default` for combined absolute/relative range selector.
+     * * `absolute-only` for absolute-only range selector.
+     * * `relative-only` for relative-only range selector.
+     *
+     * By default, the range selector mode is `default`.
+     */
+    rangeSelectorMode?: DateRangePickerProps.RangeSelectorMode;
+    /**
+     * The time offset from UTC in minutes that should be used to
+     * display and produce values.
+     *
+     * Has no effect when `dateOnly` is true.
+     *
+     * Default: the user's current time offset as provided by the browser.
+     */
+    timeOffset?: number;
+    /**
+     * Specifies the format of the time input for absolute ranges.
+     *
+     * Use to restrict the granularity of time that the user can enter.
+     *
+     * Has no effect when `dateOnly` is true.
+     */
+    timeInputFormat?: TimeInputProps.Format;
+}
+export declare namespace DateRangePickerProps {
+    type Value = AbsoluteValue | RelativeValue;
+    interface AbsoluteValue {
+        /**
+         * In ISO8601 format, e.g.: 2021-04-06T17:23:50+02:00 (or 2021-04-06 when `dateOnly` is true)
+         */
+        startDate: string;
+        /**
+         * In ISO8601 format, e.g.: 2021-04-06T17:23:50+02:00 (or 2021-04-06 when `dateOnly` is true)
+         */
+        endDate: string;
+        type: 'absolute';
+    }
+    interface RelativeValue {
+        /**
+         * If provided, used to match this value
+         * to a provided relative option.
+         */
+        key?: string;
+        amount: number;
+        unit: TimeUnit;
+        type: 'relative';
+    }
+    interface RelativeOption {
+        /**
+         * Used to uniquely identify this relative option.
+         */
+        key: string;
+        amount: number;
+        unit: TimeUnit;
+        type: 'relative';
+    }
+    type TimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
+    type ValidationFunction = (value: Value | null) => ValidationResult;
+    type ValidationResult = ValidRangeResult | InvalidRangeResult;
+    interface ValidRangeResult {
+        valid: true;
+    }
+    interface InvalidRangeResult {
+        valid: false;
+        errorMessage: string;
+    }
+    interface ChangeDetail {
+        /**
+         * The newly selected range of this date range picker.
+         */
+        value: null | Value;
+    }
+    interface IsDateEnabledFunction {
+        (date: Date): boolean;
+    }
+    type RangeSelectorMode = 'default' | 'absolute-only' | 'relative-only';
+    interface Ref {
+        /**
+         * Sets the browser focus on the UI control
+         */
+        focus(): void;
+    }
+    interface I18nStrings {
+        /**
+         * Adds `aria-label` to the trigger and dropdown.
+         */
+        ariaLabel?: string;
+        /**
+         * Adds `aria-labelledby` to the trigger and dropdown.
+         */
+        ariaLabelledby?: string;
+        /**
+         * Adds `aria-describedby` to the trigger and dropdown.
+         */
+        ariaDescribedby?: string;
+        /**
+         * Segment title of the relative range selection mode
+         */
+        relativeModeTitle: string;
+        /**
+         * Segment title of the absolute range selection mode
+         */
+        absoluteModeTitle: string;
+        /**
+         * Heading for the relative range selection area
+         */
+        relativeRangeSelectionHeading: string;
+        /**
+         * Visible label of the Cancel button
+         */
+        cancelButtonLabel: string;
+        /**
+         * Visible label of the Clear and dismiss button
+         */
+        clearButtonLabel: string;
+        /**
+         * Visible label of the Apply button
+         */
+        applyButtonLabel: string;
+        /**
+         * Formatting function for relative ranges.
+         * This function must convert a relative range to a human-readable string.
+         */
+        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.
+         */
+        formatUnit: (unit: TimeUnit, value: number) => string;
+        /**
+         * Visible label for the option for selecting
+         * a custom relative range.
+         */
+        customRelativeRangeOptionLabel: string;
+        /**
+         * Visible description for the option for selecting
+         * a custom relative range.
+         */
+        customRelativeRangeOptionDescription: string;
+        /**
+         * Visible label for the duration selector for
+         * the custom relative range.
+         */
+        customRelativeRangeDurationLabel: string;
+        /**
+         * Placeholder for the duration selector for
+         * the custom relative range.
+         */
+        customRelativeRangeDurationPlaceholder: string;
+        /**
+         * Visible label for the unit selector for the
+         * custom relative range.
+         */
+        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.
+         */
+        previousMonthAriaLabel: string;
+        /**
+         * Visible label for the Start Date input for the
+         * absolute range.
+         */
+        startDateLabel: string;
+        /**
+         * Visible label for the Start Time input for the
+         * absolute range.
+         */
+        startTimeLabel: string;
+        /**
+         * Visible label for the End Date input for the
+         * absolute range.
+         */
+        endDateLabel: string;
+        /**
+         * Visible label for the End Time input for the
+         * absolute range.
+         */
+        endTimeLabel: string;
+        /**
+         * Constraint text for the input fields for the
+         * absolute range.
+         */
+        dateTimeConstraintText?: string;
+        /**
+         * When the property is set, screen readers announce the selected range when the absolute range gets selected.
+         */
+        renderSelectedAbsoluteRangeAriaLive?: (startDate: string, endDate: string) => string;
+    }
+}
+export interface Focusable {
+    focus(): void;
+}
+//# sourceMappingURL=interfaces.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/date-range-picker/interfaces.js.map

@@ -0,0 +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 { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { TimeInputProps } from '../time-input/interfaces';\nimport { ExpandToViewport } from '../internal/components/dropdown/interfaces';\n\nexport interface DateRangePickerProps extends BaseComponentProps, FormFieldValidationControlProps, ExpandToViewport {\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   * Specifies the placeholder text that is rendered when the value is empty.\n   */\n  placeholder?: string;\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   * 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   * 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   * 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   * 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   * An object containing all the necessary localized strings required by the component.\n   */\n  i18nStrings: DateRangePickerProps.I18nStrings;\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   * 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   * * `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   * 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  timeOffset?: number;\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\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 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     * 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     * 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\nexport interface Focusable {\n  focus(): void;\n}\n"]}

package/date-range-picker/mode-switcher.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DateRangePickerProps, Focusable } from './interfaces';
+interface ModeSwitcherProps extends Pick<Required<DateRangePickerProps>, 'i18nStrings'> {
+    mode: 'absolute' | 'relative';
+    onChange: (mode: 'absolute' | 'relative') => void;
+}
+declare const _default: React.ForwardRefExoticComponent<ModeSwitcherProps & React.RefAttributes<Focusable>>;
+export default _default;
+//# sourceMappingURL=mode-switcher.d.ts.map

package/date-range-picker/mode-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-switcher.d.ts","sourceRoot":"","sources":["../../../src/date-range-picker/mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAO/D,UAAU,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrF,IAAI,EAAE,UAAU,GAAG,UAAU,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAC;CACnD;;AAED,wBAAwC"}

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

@@ -0,0 +1,30 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import InternalSegmentedControl from '../segmented-control/internal';
+import segmentedControlStyles from '../segmented-control/styles.css.js';
+import buttonTriggerStyles from '../internal/components/button-trigger/styles.css.js';
+import styles from './styles.css.js';
+export default forwardRef(ModeSwitcher);
+function ModeSwitcher(_a, ref) {
+    var i18nStrings = _a.i18nStrings, mode = _a.mode, onChange = _a.onChange;
+    var elementRef = useRef(null);
+    useImperativeHandle(ref, function () { return ({
+        focus: function () {
+            if (elementRef.current) {
+                elementRef.current.getElementsByClassName(segmentedControlStyles.selected)[0].focus();
+                var select = elementRef.current.getElementsByClassName(buttonTriggerStyles['button-trigger']);
+                for (var _i = 0, _a = Array.prototype.slice.call(select); _i < _a.length; _i++) {
+                    var button = _a[_i];
+                    button.focus();
+                }
+            }
+        }
+    }); });
+    return (React.createElement("div", { ref: elementRef },
+        React.createElement(InternalSegmentedControl, { className: styles['mode-switch'], selectedId: mode, options: [
+                { id: 'relative', text: i18nStrings.relativeModeTitle },
+                { id: 'absolute', text: i18nStrings.absoluteModeTitle },
+            ], onChange: function (e) { return onChange(e.detail.selectedId); } })));
+}
+//# sourceMappingURL=mode-switcher.js.map

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

@@ -0,0 +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,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,OAAO,sBAAsB,MAAM,oCAAoC,CAAC;AACxE,OAAO,mBAAmB,MAAM,qDAAqD,CAAC;AACtF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,eAAe,UAAU,CAAC,YAAY,CAAC,CAAC;AAExC,SAAS,YAAY,CAAC,EAAkD,EAAE,GAAyB;QAA3E,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA;IACjD,IAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,mBAAmB,CAAC,GAAG,EAAE,cAAM,OAAA,CAAC;QAC9B,KAAK,EAAL;YACE,IAAI,UAAU,CAAC,OAAO,EAAE;gBACrB,UAAU,CAAC,OAAO,CAAC,sBAAsB,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAuB,CAAC,KAAK,EAAE,CAAC;gBAE7G,IAAM,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,CAAC;gBAEhG,KAAqB,UAAkC,EAAlC,KAAA,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAlC,cAAkC,EAAlC,IAAkC,EAAE;oBAApD,IAAM,MAAM,SAAA;oBACf,MAAM,CAAC,KAAK,EAAE,CAAC;iBAChB;aACF;QACH,CAAC;KACF,CAAC,EAZ6B,CAY7B,CAAC,CAAC;IAEJ,OAAO,CACL,6BAAK,GAAG,EAAE,UAAU;QAClB,oBAAC,wBAAwB,IACvB,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAChC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE;gBACP,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,CAAC,iBAAiB,EAAE;gBACvD,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,CAAC,iBAAiB,EAAE;aACxD,EACD,QAAQ,EAAE,UAAA,CAAC,IAAI,OAAA,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAqC,CAAC,EAAxD,CAAwD,GACvE,CACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { DateRangePickerProps, Focusable } from './interfaces';\nimport InternalSegmentedControl from '../segmented-control/internal';\n\nimport segmentedControlStyles from '../segmented-control/styles.css.js';\nimport buttonTriggerStyles from '../internal/components/button-trigger/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface ModeSwitcherProps extends Pick<Required<DateRangePickerProps>, 'i18nStrings'> {\n  mode: 'absolute' | 'relative';\n  onChange: (mode: 'absolute' | 'relative') => void;\n}\n\nexport default forwardRef(ModeSwitcher);\n\nfunction ModeSwitcher({ i18nStrings, mode, onChange }: ModeSwitcherProps, ref: React.Ref<Focusable>) {\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    focus() {\n      if (elementRef.current) {\n        (elementRef.current.getElementsByClassName(segmentedControlStyles.selected)[0] as HTMLButtonElement).focus();\n\n        const select = elementRef.current.getElementsByClassName(buttonTriggerStyles['button-trigger']);\n\n        for (const button of Array.prototype.slice.call(select)) {\n          button.focus();\n        }\n      }\n    },\n  }));\n\n  return (\n    <div ref={elementRef}>\n      <InternalSegmentedControl\n        className={styles['mode-switch']}\n        selectedId={mode}\n        options={[\n          { id: 'relative', text: i18nStrings.relativeModeTitle },\n          { id: 'absolute', text: i18nStrings.absoluteModeTitle },\n        ]}\n        onChange={e => onChange(e.detail.selectedId as 'absolute' | 'relative')}\n      />\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DateRangePickerProps, Focusable } from '../interfaces';
+export interface RelativeRangePickerProps {
+    dateOnly: boolean;
+    options: ReadonlyArray<DateRangePickerProps.RelativeOption>;
+    initialSelection: DateRangePickerProps.RelativeValue | null;
+    onChange: (range: DateRangePickerProps.RelativeValue) => void;
+    i18nStrings: DateRangePickerProps.I18nStrings;
+    isSingleGrid: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<RelativeRangePickerProps & React.RefAttributes<Focusable>>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/relative-range/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAUhE,MAAM,WAAW,wBAAwB;IACvC,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,EAAE,oBAAoB,CAAC,WAAW,CAAC;IAC9C,YAAY,EAAE,OAAO,CAAC;CACvB;;AAYD,wBAA+C"}