intergalactic 15.43.0-prerelease-960d7de5-5 → 15.43.0-prerelease-3fe5d5e3

package/date-picker/lib/cjs/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ChangeEvent, ComponentProps } from 'react';\nimport dayjs from 'dayjs';\nimport { Flex, Box, BoxProps } from '@semcore/flex-box';\nimport { UnknownProperties, Intergalactic, PropGetterFn } from '@semcore/core';\nimport Button, { ButtonProps } from '@semcore/button';\nimport Dropdown, { DropdownProps, DropdownTriggerProps } from '@semcore/dropdown';\nimport { WithI18nEnhanceProps } from '@semcore/utils/lib/enhances/i18nEnhance';\nimport BaseTrigger, { BaseTriggerProps } from '@semcore/base-trigger';\nimport Input, { InputProps, InputValueProps } from '@semcore/input';\nimport { InputMaskValueProps } from '@semcore/input-mask';\nimport Checkbox from '@semcore/checkbox';\n\nexport type DateConstructorParams = string | number | Date;\n\n/** @deprecated */\nexport interface ICalendarProps extends CalendarProps, UnknownProperties {}\nexport type CalendarProps = BoxProps & {\n  /**\n   * Locale for displaying the days of a week and months, to be transferred to `Intl`\n   * @default en\n   * */\n  locale?: NavigatorLanguage['language'];\n  /**\n   * Array of dates blocked for selection\n   * Accepts the date or the range of dates for specifying infinity ([Date | false, Date | false]), crontab(6,7)\n   * */\n  disabled?: (Date | (Date | false)[] | string)[];\n  /**\n   * @ignore\n   * */\n  highlighted?: DateConstructorParams[];\n  /**\n   * @ignore\n   * */\n  onHighlightedChange?: (date: Date[]) => void;\n  /**\n   * The selected date, accepts everything which is accepted by `new Date()`\n   * */\n  value?: DateConstructorParams[];\n  /**\n   * To be activated upon selecting the date\n   * */\n  onChange?: (date: Date[]) => void;\n  /**\n   * Date for showing the necessary month\n   * @default new Date()\n   * */\n  displayedPeriod?: Date;\n\n  renderOutdated?: boolean;\n};\n\n/** @deprecated */\nexport interface ICalendarDaysContext extends CalendarDaysContext, UnknownProperties {}\nexport type CalendarDaysContext = {\n  days: CalendarUnitProps[];\n};\n\n/** @deprecated */\nexport interface ICalendarMonthsContext extends CalendarMonthsContext, UnknownProperties {}\nexport type CalendarMonthsContext = {\n  months: CalendarUnitProps[];\n};\n\n/** @deprecated */\nexport interface ICalendarUnitProps extends CalendarUnitProps, UnknownProperties {}\nexport type CalendarUnitProps = BoxProps & {\n  selected?: boolean;\n  outdated?: boolean;\n  disabled?: boolean;\n  today?: boolean;\n  startSelected?: boolean;\n  endSelected?: boolean;\n  highlighted?: boolean;\n  startHighlighted?: boolean;\n  endHighlighted?: boolean;\n  date?: Date;\n  children?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface ICalendarContext extends CalendarContext, UnknownProperties {}\nexport type CalendarContext = {\n  getUnitProps: PropGetterFn;\n};\n\ndeclare const Calendar: Intergalactic.Component<\n  'div',\n  CalendarProps,\n  CalendarContext & CalendarDaysContext,\n  [handlers: AbstractDatePickerHandlers]\n> & {\n  Unit: Intergalactic.Component<'div', CalendarUnitProps>;\n};\n\n/** @deprecated */\nexport interface IDatePickerProps extends DatePickerProps, UnknownProperties {}\nexport type DatePickerProps = DropdownProps &\n  WithI18nEnhanceProps & {\n    /**\n     * The selected date, accepts everything which is accepted by `new Date()`\n     * */\n    value?: DateConstructorParams;\n    /**\n     * To be activated upon selecting the date\n     * */\n    onChange?: (date: Date) => void;\n    /**\n     * Array of dates blocked for selection\n     * */\n    disabled?: (Date | (Date | false)[] | string)[];\n    /**\n     * Date for showing the necessary month\n     * @default new Date()\n     * */\n    displayedPeriod?: DateConstructorParams;\n    /**\n     * To be activated upon changing the current shown month\n     * */\n    onDisplayedPeriodChange?: (date: Date) => void;\n    /**\n     * Component size\n     * @default m\n     */\n    size?: 'm' | 'l';\n    /**\n     * The selected date, accepts everything which is accepted by `new Date()`\n     * */\n    highlighted?: DateConstructorParams[];\n    /**\n     * Default value selected date, accepts everything which is accepted by `new Date()`\n     * */\n    defaultValue?: DateConstructorParams;\n    /**\n     * Default value date for showing the necessary month\n     * */\n    defaultDisplayedPeriod?: DateConstructorParams;\n    /**\n     * Default value selected date, accepts everything which is accepted by `new Date()`\n     * */\n    defaultHighlighted?: DateConstructorParams[];\n  };\n\n/** @deprecated */\nexport interface IDateRangePickerProps extends DateRangePickerProps, UnknownProperties {}\nexport type DateRangePickerProps = DropdownProps &\n  WithI18nEnhanceProps & {\n    /**\n     * The selected date, accepts everything which is accepted by `new Date()`\n     * */\n    value?: DateConstructorParams[];\n    /**\n     * Default value selected date, accepts everything which is accepted by `new Date()`\n     * */\n    defaultValue?: DateConstructorParams[];\n    /**\n     * Default value date for showing the necessary month\n     * */\n    defaultDisplayedPeriod?: DateConstructorParams;\n    /**\n     * Default value selected date, accepts everything which is accepted by `new Date()`\n     * */\n    defaultHighlighted?: DateConstructorParams[];\n    /**\n     * To be activated upon selecting the date\n     * */\n    onChange?: (date: Date[]) => void;\n    /**\n     * Array of dates blocked for selection\n     * */\n    disabled?: (Date | (Date | false)[] | string)[];\n    /**\n     * Date for showing the necessary month\n     * @default new Date()\n     * */\n    displayedPeriod?: DateConstructorParams;\n    /**\n     * To be activated upon changing the current shown month\n     * */\n    onDisplayedPeriodChange?: (date: Date) => void;\n    /**\n     * Component size\n     * @default m\n     */\n    size?: 'm' | 'l' | 'xl';\n    /**\n     * The selected date, accepts everything which is accepted by `new Date()`\n     * */\n    highlighted?: DateConstructorParams[];\n    /**\n     * Remove the 'Reset' button\n     * */\n    unclearable?: boolean;\n    /**\n     * To be activated upon selecting the date\n     * */\n    onHighlightedChange?: (date: Date[]) => void;\n    /**\n     * Array of periods\n     * [{value: [new Date(), new Date()], children: \"Today\"}]\n     * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month\n     * */\n    periods?: (ButtonProps & { value: Date[] })[];\n  };\n\n/** @deprecated */\nexport interface IDateRangePickerPeriodProps\n  extends DateRangePickerPeriodProps,\n    UnknownProperties {}\nexport type DateRangePickerPeriodProps = BoxProps & {\n  /**\n   * Current selected period\n   * */\n  value?: DateConstructorParams[];\n  /**\n   * To be activated by clicking the button for switching the selected period.\n   * */\n  onChange?: (date: Date[]) => void;\n  /**\n   * To be activated by hovering a cursor over the button for changing the current displayed month.\n   * */\n  onDisplayedPeriodChange?: (date: Date) => void;\n  /**\n   * To be activated by hovering a cursor over the button for selecting the dates.\n   * */\n  onHighlightedChange?: (date: Date[]) => void;\n  /**\n   * Array of periods\n   * [{value: [new Date(), new Date()], children: \"Today\"}]\n   * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month\n   * */\n  periods?: (ButtonProps & { value: Date[] })[];\n};\n\n/** @deprecated */\nexport interface IDatePickerContext extends DatePickerContext, UnknownProperties {}\nexport type DatePickerContext = {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getTodayProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IAbstractDatePickerHandlers\n  extends AbstractDatePickerHandlers,\n    UnknownProperties {}\nexport type AbstractDatePickerHandlers = {\n  displayedPeriod: (value: DateConstructorParams) => void;\n  visible: (index: boolean) => void;\n  highlighted: (list: DateConstructorParams[]) => void;\n  value: (index: DateConstructorParams) => void;\n};\n\n/** @deprecated */\nexport interface IDatePickerHandlers extends DatePickerHandlers, UnknownProperties {}\nexport type DatePickerHandlers = {\n  visible: (index: boolean) => void;\n};\n\n/** @deprecated */\nexport interface IInputTriggerProps extends InputTriggerProps, UnknownProperties {}\nexport type BaseInputTriggerProps = InputProps & {\n  /**\n   * Date input placeholder characters\n   * @default { year: 'Y'; month: 'M'; day: 'D' }\n   */\n  placeholders?: { year: string; month: string; day: string };\n  locale?: string;\n  onDisplayedPeriodChange?: (date: Date) => void;\n};\nexport type InputTriggerProps = BaseInputTriggerProps & {\n  value?: Date;\n  onChange?: (date: Date, event: ChangeEvent) => void;\n};\n\nexport type RangeInputTriggerProps = BaseInputTriggerProps & {\n  value?: Date[];\n  onChange?: (date: Date[], event: ChangeEvent) => void;\n};\n\n/** @deprecated */\nexport interface ISingleDateInputProps extends SingleDateInputProps, UnknownProperties {}\nexport type SingleDateInputProps = InputTriggerProps & {};\n\n/** @deprecated */\nexport interface IDateRangeProps extends DateRangeProps, UnknownProperties {}\nexport type DateRangeProps = RangeInputTriggerProps & {};\n\n/** @deprecated */\nexport interface IDatePickerMaskedInputProps\n  extends DatePickerMaskedInputProps,\n    UnknownProperties {}\nexport type DatePickerMaskedInputProps = {\n  date?: Date;\n  onDateChange?: (date: Date, event: ChangeEvent) => void;\n  onDisplayedPeriodChange?: (date: Date) => void;\n  locale?: string;\n  parts?: { year: Boolean; month: Boolean; day: Boolean };\n  disabledDates?: (Date | (Date | false)[] | string)[];\n};\n\ndeclare const InputTrigger: Intergalactic.Component<\n  'div',\n  DropdownTriggerProps & InputTriggerProps\n> & {\n  Addon: typeof Input.Addon;\n  Value: typeof Input.Value;\n  SingleDateInput: Intergalactic.Component<'div', InputProps & SingleDateInputProps> & {\n    Indicator: typeof Input.Addon;\n    MaskedInput: Intergalactic.Component<'input', InputMaskValueProps & DatePickerMaskedInputProps>;\n  };\n};\n\ndeclare const RangeInputTrigger: Intergalactic.Component<\n  'div',\n  DropdownTriggerProps & RangeInputTriggerProps\n> & {\n  Addon: typeof Input.Addon;\n  Value: typeof Input.Value;\n  DateRange: Intergalactic.Component<'div', InputValueProps & DateRangeProps> & {\n    Indicator: typeof Input.Addon;\n    RangeSep: typeof Input.Addon;\n    FromMaskedInput: Intergalactic.Component<\n      'input',\n      InputMaskValueProps & DatePickerMaskedInputProps\n    >;\n    ToMaskedInput: Intergalactic.Component<\n      'input',\n      InputMaskValueProps & DatePickerMaskedInputProps\n    >;\n  };\n};\n\ndeclare const DatePicker: Intergalactic.Component<\n  'div',\n  DatePickerProps,\n  DatePickerContext & CalendarDaysContext\n> & {\n  /** @deprecated `DatePicker.ButtonTrigger` is deprecated, consider migrating to `DatePicker.Trigger` instead */\n  ButtonTrigger: Intergalactic.Component<'div', DropdownTriggerProps & BaseTriggerProps> & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  Trigger: typeof InputTrigger;\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: Intergalactic.Component<'div', DatePickerProps, DatePickerContext>;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Today: typeof Box;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\n/** @deprecated */\nexport interface IDateRangePickerContext extends DateRangePickerContext, UnknownProperties {}\nexport type DateRangePickerContext = {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getPeriodProps: PropGetterFn;\n};\n\ndeclare const DateRangePicker: Intergalactic.Component<\n  'div',\n  DateRangePickerProps,\n  DateRangePickerContext & CalendarDaysContext,\n  [handlers: DatePickerHandlers]\n> & {\n  /** @deprecated `DatePicker.ButtonTrigger` is deprecated, consider migrating to `DatePicker.Trigger` instead */\n  ButtonTrigger: Intergalactic.Component<'div', DropdownTriggerProps & BaseTriggerProps> & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  Trigger: typeof RangeInputTrigger;\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: Intergalactic.Component<'div', DateRangePickerProps, DateRangePickerContext>;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Period: Intergalactic.Component<'div', DateRangePickerPeriodProps>;\n  Apply: typeof Button;\n  Reset: typeof Button;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\n/** @deprecated */\nexport interface IMonthPickerContext extends MonthPickerContext, UnknownProperties {}\nexport type MonthPickerContext = {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n};\n\ndeclare const MonthPicker: Intergalactic.Component<\n  'div',\n  DatePickerProps,\n  MonthPickerContext & CalendarMonthsContext,\n  [handlers: DatePickerHandlers]\n> & {\n  /** @deprecated `DatePicker.ButtonTrigger` is deprecated, consider migrating to `DatePicker.Trigger` instead */\n  ButtonTrigger: Intergalactic.Component<'div', DropdownTriggerProps & BaseTriggerProps> & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  Trigger: typeof InputTrigger;\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: Intergalactic.Component<'div', DatePickerProps, MonthPickerContext>;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\n/** @deprecated */\nexport interface IMonthRangePickerContext extends MonthRangePickerContext, UnknownProperties {}\nexport type MonthRangePickerContext = {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getPeriodProps: PropGetterFn;\n};\n\ndeclare const MonthRangePicker: Intergalactic.Component<\n  'div',\n  DateRangePickerProps,\n  MonthRangePickerContext & CalendarMonthsContext,\n  [handlers: DatePickerHandlers]\n> & {\n  /** @deprecated `DatePicker.ButtonTrigger` is deprecated, consider migrating to `DatePicker.Trigger` instead */\n  ButtonTrigger: Intergalactic.Component<'div', DropdownTriggerProps & BaseTriggerProps> & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  Trigger: typeof RangeInputTrigger;\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: Intergalactic.Component<'div', DateRangePickerProps, MonthRangePickerContext>;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Period: Intergalactic.Component<'div', DateRangePickerPeriodProps>;\n  Apply: typeof Button;\n  Reset: typeof Button;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\nexport type DateRangeComparatorProps = DropdownProps &\n  WithI18nEnhanceProps & {\n    /**\n     * Selected date ranges\n     * */\n    value?: { value?: DateConstructorParams[]; compare?: DateConstructorParams[] };\n    /**\n     * Default value for selected date ranges\n     * */\n    defaultValue?: { value?: DateConstructorParams[]; compare?: DateConstructorParams[] };\n    /**\n     * Default value date for showing the necessary month\n     * */\n    defaultDisplayedPeriod?: DateConstructorParams;\n    /**\n     * Default value selected date, accepts everything which is accepted by `new Date()`\n     * */\n    defaultHighlighted?: DateConstructorParams[];\n    /**\n     * Called with selected date when user clicks `Apply` button.\n     * */\n    onChange?: (ranges: {\n      value?: DateConstructorParams[];\n      compare?: DateConstructorParams[];\n    }) => void;\n    /**\n     * Array of dates blocked for selection\n     * */\n    disabled?: (Date | (Date | false)[] | string)[];\n    /**\n     * Date for showing the necessary month\n     * @default new Date()\n     * */\n    displayedPeriod?: DateConstructorParams;\n    /**\n     * To be activated upon changing the current shown month\n     * */\n    onDisplayedPeriodChange?: (date: Date) => void;\n    /**\n     * Component size\n     * @default m\n     */\n    size?: 'm' | 'l' | 'xl';\n    /**\n     * The selected date, accepts everything which is accepted by `new Date()`\n     * */\n    highlighted?: DateConstructorParams[];\n    /**\n     * To be activated upon selecting the date\n     * */\n    onHighlightedChange?: (date: Date[]) => void;\n    /**\n     * The selected date, accepts everything which is accepted by `new Date()`\n     * */\n    compareHighlighted?: DateConstructorParams[];\n    /**\n     * To be activated upon selecting the date\n     * */\n    onCompareHighlightedChange?: (date: Date[]) => void;\n    /**\n     * Remove the 'Reset' button\n     * */\n    unclearable?: boolean;\n    /**\n     * Array of periods\n     * [{value: [new Date(), new Date()], children: \"Today\"}]\n     * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month\n     * */\n    periods?: (ButtonProps & { value: Date[] })[];\n  };\n\nexport type DateRangeComparatorContext = {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getPeriodProps: PropGetterFn;\n};\n\nexport type DateRangeComparatorTriggerProps = DropdownTriggerProps &\n  BaseTriggerProps & {\n    /**\n     * Text between the selected date range and the compared date range when both are selected.\n     * @default 'vs.'\n     */\n    separator?: string;\n    /**\n     * Trigger text when no ranges are selected.\n     */\n    placeholder?: string;\n  };\n\ndeclare const DateRangeComparator: Intergalactic.Component<\n  'div',\n  DateRangeComparatorProps,\n  DateRangeComparatorContext & CalendarDaysContext\n> & {\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Flex;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Apply: typeof Button;\n  Reset: typeof Button;\n\n  CalendarHeader: typeof Box;\n  Title: typeof Box;\n\n  Trigger: Intergalactic.Component<'div', DropdownTriggerProps & BaseTriggerProps> & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  ValueDateRange: Intergalactic.Component<'div', InputTriggerProps>;\n  CompareToggle: typeof Checkbox;\n  CompareDateRange: Intergalactic.Component<'div', InputTriggerProps>;\n  Body: typeof Flex;\n  RangeCalendar: typeof Flex;\n  Periods: typeof Flex;\n  Footer: typeof Flex;\n};\n\ndeclare const MonthDateRangeComparator: typeof DateRangeComparator;\n\nexport {\n  DatePicker,\n  DateRangePicker,\n  MonthPicker,\n  MonthRangePicker,\n  DateRangeComparator,\n  MonthDateRangeComparator,\n};\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ChangeEvent, ComponentProps } from 'react';\nimport dayjs from 'dayjs';\nimport { Flex, Box, BoxProps } from '@semcore/flex-box';\nimport { UnknownProperties, Intergalactic, PropGetterFn } from '@semcore/core';\nimport Button, { ButtonProps } from '@semcore/button';\nimport Dropdown, { DropdownProps, DropdownTriggerProps } from '@semcore/dropdown';\nimport { WithI18nEnhanceProps } from '@semcore/utils/lib/enhances/i18nEnhance';\nimport BaseTrigger, { BaseTriggerProps } from '@semcore/base-trigger';\nimport Input, { InputProps, InputValueProps } from '@semcore/input';\nimport { InputMaskValueProps } from '@semcore/input-mask';\nimport Checkbox from '@semcore/checkbox';\n\nexport type DateConstructorParams = string | number | Date;\n\n/** @deprecated */\nexport interface ICalendarProps extends CalendarProps, UnknownProperties {}\nexport type CalendarProps = BoxProps & {\n  /**\n   * Locale for displaying the days of a week and months, to be transferred to `Intl`\n   * @default en\n   * */\n  locale?: NavigatorLanguage['language'];\n  /**\n   * Array of dates blocked for selection\n   * Accepts the date or the range of dates for specifying infinity ([Date | false, Date | false]), crontab(6,7)\n   * */\n  disabled?: (Date | (Date | false)[] | string)[];\n  /**\n   * @ignore\n   * */\n  highlighted?: DateConstructorParams[];\n  /**\n   * @ignore\n   * */\n  onHighlightedChange?: (date: Date[]) => void;\n  /**\n   * The selected date, accepts everything which is accepted by `new Date()`\n   * */\n  value?: DateConstructorParams[];\n  /**\n   * To be activated upon selecting the date\n   * */\n  onChange?: (date: Date[]) => void;\n  /**\n   * Date for showing the necessary month\n   * @default new Date()\n   * */\n  displayedPeriod?: Date;\n\n  renderOutdated?: boolean;\n};\n\n/** @deprecated */\nexport interface ICalendarDaysContext extends CalendarDaysContext, UnknownProperties {}\nexport type CalendarDaysContext = {\n  days: CalendarUnitProps[];\n};\n\n/** @deprecated */\nexport interface ICalendarMonthsContext extends CalendarMonthsContext, UnknownProperties {}\nexport type CalendarMonthsContext = {\n  months: CalendarUnitProps[];\n};\n\n/** @deprecated */\nexport interface ICalendarUnitProps extends CalendarUnitProps, UnknownProperties {}\nexport type CalendarUnitProps = BoxProps & {\n  selected?: boolean;\n  outdated?: boolean;\n  disabled?: boolean;\n  today?: boolean;\n  startSelected?: boolean;\n  endSelected?: boolean;\n  highlighted?: boolean;\n  startHighlighted?: boolean;\n  endHighlighted?: boolean;\n  date?: Date;\n  children?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface ICalendarContext extends CalendarContext, UnknownProperties {}\nexport type CalendarContext = {\n  getUnitProps: PropGetterFn;\n};\n\ndeclare const Calendar: Intergalactic.Component<\n  'div',\n  CalendarProps,\n  CalendarContext & CalendarDaysContext,\n  [handlers: AbstractDatePickerHandlers]\n> & {\n  Unit: Intergalactic.Component<'div', CalendarUnitProps>;\n};\n\n/** @deprecated */\nexport interface IDatePickerProps extends DatePickerProps, UnknownProperties {}\nexport type DatePickerProps = DropdownProps &\n  WithI18nEnhanceProps & {\n    /**\n     * The selected date, accepts everything which is accepted by `new Date()`\n     * */\n    value?: DateConstructorParams;\n    /**\n     * To be activated upon selecting the date\n     * */\n    onChange?: (date: Date) => void;\n    /**\n     * Array of dates blocked for selection\n     * */\n    disabled?: (Date | (Date | false)[] | string)[];\n    /**\n     * Date for showing the necessary month\n     * @default new Date()\n     * */\n    displayedPeriod?: DateConstructorParams;\n    /**\n     * To be activated upon changing the current shown month\n     * */\n    onDisplayedPeriodChange?: (date: Date) => void;\n    /**\n     * Component size\n     * @default m\n     */\n    size?: 'm' | 'l';\n    /**\n     * The selected date, accepts everything which is accepted by `new Date()`\n     * */\n    highlighted?: DateConstructorParams[];\n    /**\n     * Default value selected date, accepts everything which is accepted by `new Date()`\n     * */\n    defaultValue?: DateConstructorParams;\n    /**\n     * Default value date for showing the necessary month\n     * */\n    defaultDisplayedPeriod?: DateConstructorParams;\n    /**\n     * Default value selected date, accepts everything which is accepted by `new Date()`\n     * */\n    defaultHighlighted?: DateConstructorParams[];\n  };\n\n/** @deprecated */\nexport interface IDateRangePickerProps extends DateRangePickerProps, UnknownProperties {}\nexport type DateRangePickerProps = DropdownProps &\n  WithI18nEnhanceProps & {\n    /**\n     * The selected date, accepts everything which is accepted by `new Date()`\n     * */\n    value?: DateConstructorParams[];\n    /**\n     * Default value selected date, accepts everything which is accepted by `new Date()`\n     * */\n    defaultValue?: DateConstructorParams[];\n    /**\n     * Default value date for showing the necessary month\n     * */\n    defaultDisplayedPeriod?: DateConstructorParams;\n    /**\n     * Default value selected date, accepts everything which is accepted by `new Date()`\n     * */\n    defaultHighlighted?: DateConstructorParams[];\n    /**\n     * To be activated upon selecting the date\n     * */\n    onChange?: (date: Date[]) => void;\n    /**\n     * Array of dates blocked for selection\n     * */\n    disabled?: (Date | (Date | false)[] | string)[];\n    /**\n     * Date for showing the necessary month\n     * @default new Date()\n     * */\n    displayedPeriod?: DateConstructorParams;\n    /**\n     * To be activated upon changing the current shown month\n     * */\n    onDisplayedPeriodChange?: (date: Date) => void;\n    /**\n     * Component size\n     * @default m\n     */\n    size?: 'm' | 'l' | 'xl';\n    /**\n     * The selected date, accepts everything which is accepted by `new Date()`\n     * */\n    highlighted?: DateConstructorParams[];\n    /**\n     * Remove the 'Reset' button\n     * */\n    unclearable?: boolean;\n    /**\n     * To be activated upon selecting the date\n     * */\n    onHighlightedChange?: (date: Date[]) => void;\n    /**\n     * Intermediate value between `highlighted` and `value` that user see before explicitly applying it.\n     */\n    preselectedValue?: DateConstructorParams[];\n    /**\n     * Normally called when user preselects a date range and when user applies this range.\n     */\n    onPreselectedValueChange?: (date: Date[]) => void;\n    /**\n     * Array of periods\n     * [{value: [new Date(), new Date()], children: \"Today\"}]\n     * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month\n     * */\n    periods?: (ButtonProps & { value: Date[] })[];\n  };\n\n/** @deprecated */\nexport interface IDateRangePickerPeriodProps\n  extends DateRangePickerPeriodProps,\n    UnknownProperties {}\nexport type DateRangePickerPeriodProps = BoxProps & {\n  /**\n   * Current selected period\n   * */\n  value?: DateConstructorParams[];\n  /**\n   * To be activated by clicking the button for switching the selected period.\n   * */\n  onChange?: (date: Date[]) => void;\n  /**\n   * To be activated by hovering a cursor over the button for changing the current displayed month.\n   * */\n  onDisplayedPeriodChange?: (date: Date) => void;\n  /**\n   * To be activated by hovering a cursor over the button for selecting the dates.\n   * */\n  onHighlightedChange?: (date: Date[]) => void;\n  /**\n   * Array of periods\n   * [{value: [new Date(), new Date()], children: \"Today\"}]\n   * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month\n   * */\n  periods?: (ButtonProps & { value: Date[] })[];\n};\n\n/** @deprecated */\nexport interface IDatePickerContext extends DatePickerContext, UnknownProperties {}\nexport type DatePickerContext = {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getTodayProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IAbstractDatePickerHandlers\n  extends AbstractDatePickerHandlers,\n    UnknownProperties {}\nexport type AbstractDatePickerHandlers = {\n  displayedPeriod: (value: DateConstructorParams) => void;\n  visible: (index: boolean) => void;\n  highlighted: (list: DateConstructorParams[]) => void;\n  value: (index: DateConstructorParams) => void;\n};\n\n/** @deprecated */\nexport interface IDatePickerHandlers extends DatePickerHandlers, UnknownProperties {}\nexport type DatePickerHandlers = {\n  visible: (index: boolean) => void;\n};\n\n/** @deprecated */\nexport interface IInputTriggerProps extends InputTriggerProps, UnknownProperties {}\nexport type BaseInputTriggerProps = InputProps & {\n  /**\n   * Date input placeholder characters\n   * @default { year: 'Y'; month: 'M'; day: 'D' }\n   */\n  placeholders?: { year: string; month: string; day: string };\n  locale?: string;\n  onDisplayedPeriodChange?: (date: Date) => void;\n};\nexport type InputTriggerProps = BaseInputTriggerProps & {\n  value?: Date;\n  onChange?: (date: Date, event: ChangeEvent) => void;\n};\n\nexport type RangeInputTriggerProps = BaseInputTriggerProps & {\n  value?: Date[];\n  onChange?: (date: Date[], event: ChangeEvent) => void;\n};\n\n/** @deprecated */\nexport interface ISingleDateInputProps extends SingleDateInputProps, UnknownProperties {}\nexport type SingleDateInputProps = InputTriggerProps & {};\n\n/** @deprecated */\nexport interface IDateRangeProps extends DateRangeProps, UnknownProperties {}\nexport type DateRangeProps = RangeInputTriggerProps & {};\n\n/** @deprecated */\nexport interface IDatePickerMaskedInputProps\n  extends DatePickerMaskedInputProps,\n    UnknownProperties {}\nexport type DatePickerMaskedInputProps = {\n  date?: Date;\n  onDateChange?: (date: Date, event: ChangeEvent) => void;\n  onDisplayedPeriodChange?: (date: Date) => void;\n  locale?: string;\n  parts?: { year: Boolean; month: Boolean; day: Boolean };\n  disabledDates?: (Date | (Date | false)[] | string)[];\n};\n\ndeclare const InputTrigger: Intergalactic.Component<\n  'div',\n  DropdownTriggerProps & InputTriggerProps\n> & {\n  Addon: typeof Input.Addon;\n  Value: typeof Input.Value;\n  SingleDateInput: Intergalactic.Component<'div', InputProps & SingleDateInputProps> & {\n    Indicator: typeof Input.Addon;\n    MaskedInput: Intergalactic.Component<'input', InputMaskValueProps & DatePickerMaskedInputProps>;\n  };\n};\n\ndeclare const RangeInputTrigger: Intergalactic.Component<\n  'div',\n  DropdownTriggerProps & RangeInputTriggerProps\n> & {\n  Addon: typeof Input.Addon;\n  Value: typeof Input.Value;\n  DateRange: Intergalactic.Component<'div', InputValueProps & DateRangeProps> & {\n    Indicator: typeof Input.Addon;\n    RangeSep: typeof Input.Addon;\n    FromMaskedInput: Intergalactic.Component<\n      'input',\n      InputMaskValueProps & DatePickerMaskedInputProps\n    >;\n    ToMaskedInput: Intergalactic.Component<\n      'input',\n      InputMaskValueProps & DatePickerMaskedInputProps\n    >;\n  };\n};\n\ndeclare const DatePicker: Intergalactic.Component<\n  'div',\n  DatePickerProps,\n  DatePickerContext & CalendarDaysContext\n> & {\n  /** @deprecated `DatePicker.ButtonTrigger` is deprecated, consider migrating to `DatePicker.Trigger` instead */\n  ButtonTrigger: Intergalactic.Component<'div', DropdownTriggerProps & BaseTriggerProps> & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  Trigger: typeof InputTrigger;\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: Intergalactic.Component<'div', DatePickerProps, DatePickerContext>;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Today: typeof Box;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\n/** @deprecated */\nexport interface IDateRangePickerContext extends DateRangePickerContext, UnknownProperties {}\nexport type DateRangePickerContext = {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getPeriodProps: PropGetterFn;\n};\n\ndeclare const DateRangePicker: Intergalactic.Component<\n  'div',\n  DateRangePickerProps,\n  DateRangePickerContext & CalendarDaysContext,\n  [handlers: DatePickerHandlers]\n> & {\n  /** @deprecated `DatePicker.ButtonTrigger` is deprecated, consider migrating to `DatePicker.Trigger` instead */\n  ButtonTrigger: Intergalactic.Component<'div', DropdownTriggerProps & BaseTriggerProps> & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  Trigger: typeof RangeInputTrigger;\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: Intergalactic.Component<'div', DateRangePickerProps, DateRangePickerContext>;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Period: Intergalactic.Component<'div', DateRangePickerPeriodProps>;\n  Apply: typeof Button;\n  Reset: typeof Button;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\n/** @deprecated */\nexport interface IMonthPickerContext extends MonthPickerContext, UnknownProperties {}\nexport type MonthPickerContext = {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n};\n\ndeclare const MonthPicker: Intergalactic.Component<\n  'div',\n  DatePickerProps,\n  MonthPickerContext & CalendarMonthsContext,\n  [handlers: DatePickerHandlers]\n> & {\n  /** @deprecated `DatePicker.ButtonTrigger` is deprecated, consider migrating to `DatePicker.Trigger` instead */\n  ButtonTrigger: Intergalactic.Component<'div', DropdownTriggerProps & BaseTriggerProps> & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  Trigger: typeof InputTrigger;\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: Intergalactic.Component<'div', DatePickerProps, MonthPickerContext>;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\n/** @deprecated */\nexport interface IMonthRangePickerContext extends MonthRangePickerContext, UnknownProperties {}\nexport type MonthRangePickerContext = {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getPeriodProps: PropGetterFn;\n};\n\ndeclare const MonthRangePicker: Intergalactic.Component<\n  'div',\n  DateRangePickerProps,\n  MonthRangePickerContext & CalendarMonthsContext,\n  [handlers: DatePickerHandlers]\n> & {\n  /** @deprecated `DatePicker.ButtonTrigger` is deprecated, consider migrating to `DatePicker.Trigger` instead */\n  ButtonTrigger: Intergalactic.Component<'div', DropdownTriggerProps & BaseTriggerProps> & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  Trigger: typeof RangeInputTrigger;\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Box;\n  Title: Intergalactic.Component<'div', DateRangePickerProps, MonthRangePickerContext>;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Period: Intergalactic.Component<'div', DateRangePickerPeriodProps>;\n  Apply: typeof Button;\n  Reset: typeof Button;\n  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;\n};\n\nexport type DateRangeComparatorProps = DropdownProps &\n  WithI18nEnhanceProps & {\n    /**\n     * Selected date ranges\n     * */\n    value?: { value?: DateConstructorParams[]; compare?: DateConstructorParams[] };\n    /**\n     * Default value for selected date ranges\n     * */\n    defaultValue?: { value?: DateConstructorParams[]; compare?: DateConstructorParams[] };\n    /**\n     * Default value date for showing the necessary month\n     * */\n    defaultDisplayedPeriod?: DateConstructorParams;\n    /**\n     * Default value selected date, accepts everything which is accepted by `new Date()`\n     * */\n    defaultHighlighted?: DateConstructorParams[];\n    /**\n     * Called with selected date when user clicks `Apply` button.\n     * */\n    onChange?: (ranges: {\n      value?: DateConstructorParams[];\n      compare?: DateConstructorParams[];\n    }) => void;\n    /**\n     * Array of dates blocked for selection\n     * */\n    disabled?: (Date | (Date | false)[] | string)[];\n    /**\n     * Date for showing the necessary month\n     * @default new Date()\n     * */\n    displayedPeriod?: DateConstructorParams;\n    /**\n     * To be activated upon changing the current shown month\n     * */\n    onDisplayedPeriodChange?: (date: Date) => void;\n    /**\n     * Component size\n     * @default m\n     */\n    size?: 'm' | 'l' | 'xl';\n    /**\n     * The selected date, accepts everything which is accepted by `new Date()`\n     * */\n    highlighted?: DateConstructorParams[];\n    /**\n     * To be activated upon selecting the date\n     * */\n    onHighlightedChange?: (date: Date[]) => void;\n    /**\n     * The selected date, accepts everything which is accepted by `new Date()`\n     * */\n    compareHighlighted?: DateConstructorParams[];\n    /**\n     * To be activated upon selecting the date\n     * */\n    onCompareHighlightedChange?: (date: Date[]) => void;\n    /**\n     * Intermediate value between `highlighted` and `value` that user see before explicitly applying it.\n     */\n    preselectedValue?: DateConstructorParams[];\n    /**\n     * Normally called when user preselects a date range and when user applies this range.\n     */\n    onPreselectedValueChange?: (date: Date[]) => void;\n    /**\n     * Intermediate value between `compareHighlighted` and `compare` that user see before explicitly applying it.\n     */\n    preselectedCompare?: DateConstructorParams[];\n    /**\n     * Normally called when user preselects a compare range and when user applies ranges.\n     */\n    onPreselectedCompareChange?: (date: Date[]) => void;\n    /**\n     * Controls that compare range input is enabled.\n     */\n    compareToggle?: boolean;\n    /**\n     * Toggles when compare range input enables or disables.\n     */\n    onCompareToggleChange?: (compareToggle: boolean) => void;\n    /**\n     * Controls which date range is focused.\n     */\n    focusedRange?: 'value' | 'compare';\n    /**\n     * Called when user focuses or is focused on some of the date ranges.\n     */\n    onFocusedRangeChange?: (focusedRange: 'value' | 'compare') => void;\n    /**\n     * Remove the 'Reset' button\n     * */\n    unclearable?: boolean;\n    /**\n     * Array of periods\n     * [{value: [new Date(), new Date()], children: \"Today\"}]\n     * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month\n     * */\n    periods?: (ButtonProps & { value: Date[] })[];\n  };\n\nexport type DateRangeComparatorContext = {\n  getTriggerProps: PropGetterFn;\n  getPopperProps: PropGetterFn;\n  getHeaderProps: PropGetterFn;\n  getTitleProps: PropGetterFn;\n  getNextProps: PropGetterFn;\n  getPrevProps: PropGetterFn;\n  getCalendarProps: PropGetterFn;\n  getPeriodProps: PropGetterFn;\n};\n\nexport type DateRangeComparatorTriggerProps = DropdownTriggerProps &\n  BaseTriggerProps & {\n    /**\n     * Text between the selected date range and the compared date range when both are selected.\n     * @default 'vs.'\n     */\n    separator?: string;\n    /**\n     * Trigger text when no ranges are selected.\n     */\n    placeholder?: string;\n  };\n\ndeclare const DateRangeComparator: Intergalactic.Component<\n  'div',\n  DateRangeComparatorProps,\n  DateRangeComparatorContext & CalendarDaysContext\n> & {\n  Popper: typeof Dropdown.Popper;\n  Header: typeof Flex;\n  Prev: typeof Button;\n  Next: typeof Button;\n  Calendar: typeof Calendar;\n  Apply: typeof Button;\n  Reset: typeof Button;\n\n  CalendarHeader: typeof Box;\n  Title: typeof Box;\n\n  Trigger: Intergalactic.Component<'div', DropdownTriggerProps & BaseTriggerProps> & {\n    Addon: typeof BaseTrigger.Addon;\n    Text: typeof BaseTrigger.Text;\n  };\n  ValueDateRange: Intergalactic.Component<'div', InputTriggerProps>;\n  CompareToggle: typeof Checkbox;\n  CompareDateRange: Intergalactic.Component<'div', InputTriggerProps>;\n  Body: typeof Flex;\n  RangeCalendar: typeof Flex;\n  Periods: typeof Flex;\n  Footer: typeof Flex;\n};\n\ndeclare const MonthDateRangeComparator: typeof DateRangeComparator;\n\nexport {\n  DatePicker,\n  DateRangePicker,\n  MonthPicker,\n  MonthRangePicker,\n  DateRangeComparator,\n  MonthDateRangeComparator,\n};\n"],"mappings":""}

package/date-picker/lib/es6/components/DateRangeComparatorAbstract.js

@@ -72,12 +72,6 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       args[_key2] = arguments[_key2];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      dirtyValue: undefined,
-      dirtyCompare: undefined,
-      dirtyToggler: undefined,
-      range: 'value' // 'value' | 'compare'
-    });
     _defineProperty(_assertThisInitialized(_this), "navigateView", function (direction) {
       var displayedPeriod = _this.asProps.displayedPeriod;
       var action = direction >= 1 ? 'add' : 'subtract';
@@ -97,41 +91,35 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       _this.handlers.visible(false);
     });
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (date) {
-      var _dirty, _dirty2, _dirty3;
-      var _this$state = _this.state,
-        dirtyValue = _this$state.dirtyValue,
-        dirtyCompare = _this$state.dirtyCompare,
-        range = _this$state.range;
+      var _value, _value2, _value3;
+      var _this$asProps = _this.asProps,
+        focusedRange = _this$asProps.focusedRange,
+        preselectedCompare = _this$asProps.preselectedCompare,
+        preselectedValue = _this$asProps.preselectedValue;
       var highlighted = [];
-      var dirty = range === 'compare' ? dirtyCompare : dirtyValue;
+      var value = focusedRange === 'compare' ? preselectedCompare : preselectedValue;
       if (Array.isArray(date)) {
-        dirty = date;
-      } else if (!((_dirty = dirty) !== null && _dirty !== void 0 && _dirty.length)) {
-        dirty = [date];
+        value = date;
+      } else if (!((_value = value) !== null && _value !== void 0 && _value.length)) {
+        value = [date];
         highlighted = [date];
-      } else if (((_dirty2 = dirty) === null || _dirty2 === void 0 ? void 0 : _dirty2.length) >= 2) {
-        dirty = [date];
+      } else if (((_value2 = value) === null || _value2 === void 0 ? void 0 : _value2.length) >= 2) {
+        value = [date];
         highlighted = [date];
-      } else if (((_dirty3 = dirty) === null || _dirty3 === void 0 ? void 0 : _dirty3[0]) > date) {
-        var _dirty4;
-        dirty = [date, (_dirty4 = dirty) === null || _dirty4 === void 0 ? void 0 : _dirty4[0]];
+      } else if (((_value3 = value) === null || _value3 === void 0 ? void 0 : _value3[0]) > date) {
+        var _value4;
+        value = [date, (_value4 = value) === null || _value4 === void 0 ? void 0 : _value4[0]];
       } else {
-        var _dirty5;
-        dirty = [(_dirty5 = dirty) === null || _dirty5 === void 0 ? void 0 : _dirty5[0], date];
+        var _value5;
+        value = [(_value5 = value) === null || _value5 === void 0 ? void 0 : _value5[0], date];
       }
-      var state = {};
-      if (range === 'compare') {
-        state['dirtyCompare'] = dirty;
+      if (focusedRange === 'compare') {
+        _this.handlers.preselectedCompare(value);
+        _this.handlers.compareHighlighted(highlighted);
       } else {
-        state['dirtyValue'] = dirty;
+        _this.handlers.preselectedValue(value);
+        _this.handlers.highlighted(highlighted);
       }
-      _this.setState(state, function () {
-        if (range === 'compare') {
-          _this.handlers.compareHighlighted(highlighted);
-        } else {
-          _this.handlers.highlighted(highlighted);
-        }
-      });
     });
     return _this;
   }
@@ -140,36 +128,31 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function getPeriodProps() {
       var _this$asProps$value,
         _this2 = this;
-      var _this$asProps = this.asProps,
-        _this$asProps$periods = _this$asProps.periods,
-        periods = _this$asProps$periods === void 0 ? this.getDefaultPeriods() : _this$asProps$periods,
-        onHighlightedChange = _this$asProps.onHighlightedChange,
-        onCompareHighlightedChange = _this$asProps.onCompareHighlightedChange,
-        onDisplayedPeriodChange = _this$asProps.onDisplayedPeriodChange;
-      var _this$state2 = this.state,
-        dirtyValue = _this$state2.dirtyValue,
-        dirtyCompare = _this$state2.dirtyCompare,
-        range = _this$state2.range;
-      var value = dirtyValue !== null && dirtyValue !== void 0 ? dirtyValue : (_this$asProps$value = this.asProps.value) === null || _this$asProps$value === void 0 ? void 0 : _this$asProps$value.value;
-      if (range === 'compare') {
+      var _this$asProps2 = this.asProps,
+        _this$asProps2$period = _this$asProps2.periods,
+        periods = _this$asProps2$period === void 0 ? this.getDefaultPeriods() : _this$asProps2$period,
+        onHighlightedChange = _this$asProps2.onHighlightedChange,
+        onCompareHighlightedChange = _this$asProps2.onCompareHighlightedChange,
+        onDisplayedPeriodChange = _this$asProps2.onDisplayedPeriodChange,
+        preselectedValue = _this$asProps2.preselectedValue,
+        preselectedCompare = _this$asProps2.preselectedCompare,
+        focusedRange = _this$asProps2.focusedRange;
+      var value = preselectedValue !== null && preselectedValue !== void 0 ? preselectedValue : (_this$asProps$value = this.asProps.value) === null || _this$asProps$value === void 0 ? void 0 : _this$asProps$value.value;
+      if (focusedRange === 'compare') {
         var _this$asProps$value2;
-        value = dirtyCompare !== null && dirtyCompare !== void 0 ? dirtyCompare : (_this$asProps$value2 = this.asProps.value) === null || _this$asProps$value2 === void 0 ? void 0 : _this$asProps$value2.compare;
+        value = preselectedCompare !== null && preselectedCompare !== void 0 ? preselectedCompare : (_this$asProps$value2 = this.asProps.value) === null || _this$asProps$value2 === void 0 ? void 0 : _this$asProps$value2.compare;
       }
       return {
         periods: periods,
         value: value,
         onChange: function onChange(value) {
-          if (range === 'compare') {
-            _this2.setState({
-              dirtyCompare: value
-            });
+          if (focusedRange === 'compare') {
+            _this2.handlers.preselectedCompare(value);
           } else {
-            _this2.setState({
-              dirtyValue: value
-            });
+            _this2.handlers.preselectedValue(value);
           }
         },
-        onHighlightedChange: range === 'compare' ? onCompareHighlightedChange : onHighlightedChange,
+        onHighlightedChange: focusedRange === 'compare' ? onCompareHighlightedChange : onHighlightedChange,
         onDisplayedPeriodChange: onDisplayedPeriodChange
       };
     }
@@ -202,17 +185,26 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
             var _ref10, _this3$asProps$value$, _this3$asProps$value, _this3$asProps$value2;
             _this3.handlers.highlighted([]);
             _this3.handlers.compareHighlighted([]);
-            _this3.setState({
-              dirtyValue: undefined,
-              dirtyCompare: undefined,
-              dirtyToggler: undefined,
-              range: 'value'
-            });
+            _this3.handlers.preselectedValue(undefined);
+            _this3.handlers.preselectedCompare(undefined);
+            _this3.handlers.compareToggle(undefined);
+            _this3.handlers.focusedRange('value');
             _this3.handlers.displayedPeriod(getLatestDate((_ref10 = (_this3$asProps$value$ = (_this3$asProps$value = _this3.asProps.value) === null || _this3$asProps$value === void 0 ? void 0 : _this3$asProps$value.value) !== null && _this3$asProps$value$ !== void 0 ? _this3$asProps$value$ : (_this3$asProps$value2 = _this3.asProps.value) === null || _this3$asProps$value2 === void 0 ? void 0 : _this3$asProps$value2.compare) !== null && _ref10 !== void 0 ? _ref10 : []) || _this3.props.defaultDisplayedPeriod);
           }
+          var _this3$asProps = _this3.asProps,
+            value = _this3$asProps.value,
+            displayedPeriod = _this3$asProps.displayedPeriod;
+          var newDisplayedPeriod = value ? getLatestDate(value.value, value.compare) : undefined;
+          if (visible && newDisplayedPeriod && newDisplayedPeriod !== displayedPeriod) {
+            _this3.handlers.displayedPeriod(newDisplayedPeriod);
+          }
         }],
         highlighted: null,
         compareHighlighted: null,
+        preselectedValue: null,
+        preselectedCompare: null,
+        compareToggle: null,
+        focusedRange: null,
         value: [null, function (value) {
           var dates = [value === null || value === void 0 ? void 0 : value.value, value === null || value === void 0 ? void 0 : value.compare].flat(2).filter(function (date) {
             var _date$isValid;
@@ -226,16 +218,15 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     key: "getApplyProps",
     value: function getApplyProps() {
       var _this4 = this;
-      var _this$asProps2 = this.asProps,
-        value = _this$asProps2.value,
-        getI18nText = _this$asProps2.getI18nText;
-      var _this$state3 = this.state,
-        dirtyValue = _this$state3.dirtyValue,
-        dirtyCompare = _this$state3.dirtyCompare;
+      var _this$asProps3 = this.asProps,
+        value = _this$asProps3.value,
+        getI18nText = _this$asProps3.getI18nText,
+        preselectedValue = _this$asProps3.preselectedValue,
+        preselectedCompare = _this$asProps3.preselectedCompare;
       return {
         getI18nText: getI18nText,
         onClick: function onClick() {
-          return _this4.handleApply(dirtyValue !== null && dirtyValue !== void 0 ? dirtyValue : value === null || value === void 0 ? void 0 : value.value, dirtyCompare !== null && dirtyCompare !== void 0 ? dirtyCompare : value === null || value === void 0 ? void 0 : value.compare);
+          return _this4.handleApply(preselectedValue !== null && preselectedValue !== void 0 ? preselectedValue : value === null || value === void 0 ? void 0 : value.value, preselectedCompare !== null && preselectedCompare !== void 0 ? preselectedCompare : value === null || value === void 0 ? void 0 : value.compare);
         }
       };
     }
@@ -273,9 +264,9 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
   }, {
     key: "getTitleProps",
     value: function getTitleProps(props, index) {
-      var _this$asProps3 = this.asProps,
-        locale = _this$asProps3.locale,
-        displayedPeriod = _this$asProps3.displayedPeriod;
+      var _this$asProps4 = this.asProps,
+        locale = _this$asProps4.locale,
+        displayedPeriod = _this$asProps4.displayedPeriod;
       return {
         children: new Intl.DateTimeFormat(locale, {
           month: 'long',
@@ -293,9 +284,9 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         placeholder = _ref11$placeholder === void 0 ? 'Select date ranges' : _ref11$placeholder,
         _ref11$separator = _ref11.separator,
         separator = _ref11$separator === void 0 ? 'vs.' : _ref11$separator;
-      var _this$asProps4 = this.asProps,
-        locale = _this$asProps4.locale,
-        visible = _this$asProps4.visible;
+      var _this$asProps5 = this.asProps,
+        locale = _this$asProps5.locale,
+        visible = _this$asProps5.visible;
       var value = (_this$asProps$value3 = this.asProps.value) === null || _this$asProps$value3 === void 0 ? void 0 : _this$asProps$value3.value;
       var compare = (_this$asProps$value4 = this.asProps.value) === null || _this$asProps$value4 === void 0 ? void 0 : _this$asProps$value4.compare;
       var formattingProps = {
@@ -328,23 +319,20 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     key: "getValueDateRangeProps",
     value: function getValueDateRangeProps() {
       var _this7 = this;
-      var _this$asProps5 = this.asProps,
-        value = _this$asProps5.value,
-        onDisplayedPeriodChange = _this$asProps5.onDisplayedPeriodChange,
-        locale = _this$asProps5.locale,
-        disabled = _this$asProps5.disabled,
-        size = _this$asProps5.size,
-        getI18nText = _this$asProps5.getI18nText;
-      var _this$state4 = this.state,
-        range = _this$state4.range,
-        dirtyValue = _this$state4.dirtyValue;
+      var _this$asProps6 = this.asProps,
+        value = _this$asProps6.value,
+        onDisplayedPeriodChange = _this$asProps6.onDisplayedPeriodChange,
+        locale = _this$asProps6.locale,
+        disabled = _this$asProps6.disabled,
+        size = _this$asProps6.size,
+        getI18nText = _this$asProps6.getI18nText,
+        focusedRange = _this$asProps6.focusedRange,
+        preselectedValue = _this$asProps6.preselectedValue;
       return {
-        focused: range === 'value' ? true : undefined,
-        value: dirtyValue !== null && dirtyValue !== void 0 ? dirtyValue : value === null || value === void 0 ? void 0 : value.value,
+        focused: focusedRange === 'value' ? true : undefined,
+        value: preselectedValue !== null && preselectedValue !== void 0 ? preselectedValue : value === null || value === void 0 ? void 0 : value.value,
         onChange: function onChange(value) {
-          return _this7.setState({
-            dirtyValue: value
-          });
+          return _this7.handlers.preselectedValue(value);
         },
         onDisplayedPeriodChange: onDisplayedPeriodChange,
         locale: locale,
@@ -353,9 +341,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         children: this.getRangeInput(),
         getI18nText: getI18nText,
         onFocus: function onFocus() {
-          _this7.setState({
-            range: 'value'
-          });
+          _this7.handlers.focusedRange('value');
           return false;
         }
       };
@@ -365,25 +351,22 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function getCompareDateRangeProps() {
       var _value$compare,
         _this8 = this;
-      var _this$asProps6 = this.asProps,
-        value = _this$asProps6.value,
-        onDisplayedPeriodChange = _this$asProps6.onDisplayedPeriodChange,
-        locale = _this$asProps6.locale,
-        disabled = _this$asProps6.disabled,
-        size = _this$asProps6.size,
-        getI18nText = _this$asProps6.getI18nText;
-      var _this$state5 = this.state,
-        range = _this$state5.range,
-        dirtyCompare = _this$state5.dirtyCompare,
-        dirtyToggler = _this$state5.dirtyToggler;
+      var _this$asProps7 = this.asProps,
+        value = _this$asProps7.value,
+        onDisplayedPeriodChange = _this$asProps7.onDisplayedPeriodChange,
+        locale = _this$asProps7.locale,
+        disabled = _this$asProps7.disabled,
+        size = _this$asProps7.size,
+        getI18nText = _this$asProps7.getI18nText,
+        focusedRange = _this$asProps7.focusedRange,
+        preselectedCompare = _this$asProps7.preselectedCompare,
+        compareToggle = _this$asProps7.compareToggle;
       return {
-        focused: range === 'compare' ? true : undefined,
-        disabled: !(dirtyToggler !== null && dirtyToggler !== void 0 ? dirtyToggler : value === null || value === void 0 ? void 0 : (_value$compare = value.compare) === null || _value$compare === void 0 ? void 0 : _value$compare.length),
-        value: dirtyCompare !== null && dirtyCompare !== void 0 ? dirtyCompare : value === null || value === void 0 ? void 0 : value.compare,
+        focused: focusedRange === 'compare' ? true : undefined,
+        disabled: !(compareToggle !== null && compareToggle !== void 0 ? compareToggle : value === null || value === void 0 ? void 0 : (_value$compare = value.compare) === null || _value$compare === void 0 ? void 0 : _value$compare.length),
+        value: preselectedCompare !== null && preselectedCompare !== void 0 ? preselectedCompare : value === null || value === void 0 ? void 0 : value.compare,
         onChange: function onChange(value) {
-          return _this8.setState({
-            dirtyCompare: value
-          });
+          return _this8.handlers.preselectedCompare(value);
         },
         onDisplayedPeriodChange: onDisplayedPeriodChange,
         locale: locale,
@@ -392,9 +375,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         children: this.getRangeInput(),
         getI18nText: getI18nText,
         onFocus: function onFocus() {
-          _this8.setState({
-            range: 'compare'
-          });
+          _this8.handlers.focusedRange('compare');
           return false;
         }
       };
@@ -404,25 +385,20 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function getCompareToggleProps() {
       var _value$compare2,
         _this9 = this;
-      var _this$asProps7 = this.asProps,
-        getI18nText = _this$asProps7.getI18nText,
-        value = _this$asProps7.value;
-      var dirtyToggler = this.state.dirtyToggler;
+      var _this$asProps8 = this.asProps,
+        getI18nText = _this$asProps8.getI18nText,
+        value = _this$asProps8.value,
+        compareToggle = _this$asProps8.compareToggle;
       return {
         getI18nText: getI18nText,
-        checked: dirtyToggler !== null && dirtyToggler !== void 0 ? dirtyToggler : value === null || value === void 0 ? void 0 : (_value$compare2 = value.compare) === null || _value$compare2 === void 0 ? void 0 : _value$compare2.length,
+        checked: compareToggle !== null && compareToggle !== void 0 ? compareToggle : value === null || value === void 0 ? void 0 : (_value$compare2 = value.compare) === null || _value$compare2 === void 0 ? void 0 : _value$compare2.length,
         onChange: function onChange(checked) {
           if (checked) {
-            _this9.setState({
-              range: 'compare',
-              dirtyToggler: true
-            });
+            _this9.handlers.compareToggle(true);
+            _this9.handlers.focusedRange('compare');
           } else {
-            _this9.setState({
-              range: 'value',
-              dirtyCompare: [],
-              dirtyToggler: false
-            });
+            _this9.handlers.compareToggle(false);
+            _this9.handlers.focusedRange('value');
           }
         }
       };
@@ -430,19 +406,18 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
   }, {
     key: "getCalendarProps",
     value: function getCalendarProps(_props, index) {
-      var _this$asProps8 = this.asProps,
-        locale = _this$asProps8.locale,
-        displayedPeriod = _this$asProps8.displayedPeriod,
-        disabled = _this$asProps8.disabled,
-        value = _this$asProps8.value,
-        onCompareHighlightedChange = _this$asProps8.onCompareHighlightedChange,
-        highlighted = _this$asProps8.highlighted,
-        compareHighlighted = _this$asProps8.compareHighlighted,
-        onHighlightedChange = _this$asProps8.onHighlightedChange;
-      var _this$state6 = this.state,
-        dirtyValue = _this$state6.dirtyValue,
-        dirtyCompare = _this$state6.dirtyCompare,
-        range = _this$state6.range;
+      var _this$asProps9 = this.asProps,
+        locale = _this$asProps9.locale,
+        displayedPeriod = _this$asProps9.displayedPeriod,
+        disabled = _this$asProps9.disabled,
+        value = _this$asProps9.value,
+        onCompareHighlightedChange = _this$asProps9.onCompareHighlightedChange,
+        highlighted = _this$asProps9.highlighted,
+        compareHighlighted = _this$asProps9.compareHighlighted,
+        onHighlightedChange = _this$asProps9.onHighlightedChange,
+        preselectedCompare = _this$asProps9.preselectedCompare,
+        preselectedValue = _this$asProps9.preselectedValue,
+        focusedRange = _this$asProps9.focusedRange;
       return {
         locale: locale,
         displayedPeriod: dayjs(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate(),
@@ -452,9 +427,9 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         compareHighlighted: compareHighlighted,
         onCompareHighlightedChange: onCompareHighlightedChange,
         onHighlightedChange: onHighlightedChange,
-        range: range,
-        value: dirtyValue !== null && dirtyValue !== void 0 ? dirtyValue : value === null || value === void 0 ? void 0 : value.value,
-        compare: dirtyCompare !== null && dirtyCompare !== void 0 ? dirtyCompare : value === null || value === void 0 ? void 0 : value.compare
+        range: focusedRange,
+        value: preselectedValue !== null && preselectedValue !== void 0 ? preselectedValue : value === null || value === void 0 ? void 0 : value.value,
+        compare: preselectedCompare !== null && preselectedCompare !== void 0 ? preselectedCompare : value === null || value === void 0 ? void 0 : value.compare
       };
     }
   }, {
@@ -469,10 +444,10 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _ref = this.asProps,
         _ref4;
-      var _this$asProps9 = this.asProps,
-        Children = _this$asProps9.Children,
-        styles = _this$asProps9.styles,
-        providedAriaLabel = _this$asProps9['aria-label'];
+      var _this$asProps10 = this.asProps,
+        Children = _this$asProps10.Children,
+        styles = _this$asProps10.styles,
+        providedAriaLabel = _this$asProps10['aria-label'];
       return /*#__PURE__*/React.createElement(React.Fragment, null, (_ref4 = sstyled(styles), /*#__PURE__*/React.createElement(Dropdown, _assignProps({
         "use:aria-label": providedAriaLabel,
         "__excludeProps": ['onChange', 'value']
@@ -493,6 +468,10 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         defaultCompareHighlighted: [],
         defaultDisplayedPeriod: getLatestDate(primaryRange, defaultPrimaryRange, secondaryRange, defaultSecondaryRange) || defaultDisplayedPeriod,
         defaultVisible: false,
+        defaultPreselectedValue: null,
+        defaultPreselectedCompare: null,
+        defaultCompareToggle: null,
+        defaultFocusedRange: 'value',
         disabled: [],
         size: 'm'
       };