intergalactic 15.43.0-prerelease-960d7de5-5 → 15.43.0-prerelease-cbb9c6f4

package/d3-chart/lib/es6/component/ChartLegend/LegendItem/LegendItem.js

@@ -19,21 +19,21 @@ import { Flex, Box } from 'intergalactic/flex-box';
 import Checkbox from 'intergalactic/checkbox';
 import { Text as TypographyText } from 'intergalactic/typography';
 /*__reshadow-styles__:"./legend-item.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SLegendItem_1v8x0_gg_{min-width:0;align-items:flex-start}@media (hover:hover){.___SLegendItem_1v8x0_gg_:hover{cursor:pointer}.___SLegendItem_1v8x0_gg_.__disabled_1v8x0_gg_:hover{cursor:default}}.___SPointShape_1v8x0_gg_.__color_1v8x0_gg_{background-color:var(--color_1v8x0);margin-right:8px;flex-shrink:0}.___SPointShape_1v8x0_gg_._shape_Circle_1v8x0_gg_._size_l_1v8x0_gg_{width:16px;height:16px;border-radius:8px;margin-top:4px}.___SPointShape_1v8x0_gg_._shape_Circle_1v8x0_gg_._size_m_1v8x0_gg_{width:12px;height:12px;border-radius:6px;margin-top:4px}.___SPointShape_1v8x0_gg_._shape_Line_1v8x0_gg_._size_l_1v8x0_gg_{width:16px;height:4px;border-radius:3px;margin-top:9px}.___SPointShape_1v8x0_gg_._shape_Line_1v8x0_gg_._size_m_1v8x0_gg_{width:12px;height:4px;border-radius:3px;margin-top:8px}.___SPointShape_1v8x0_gg_._shape_Square_1v8x0_gg_._size_l_1v8x0_gg_{width:16px;height:16px;border-radius:2px;margin-top:4px}.___SPointShape_1v8x0_gg_._shape_Square_1v8x0_gg_._size_m_1v8x0_gg_{width:12px;height:12px;border-radius:2px;margin-top:4px}.___SIcon_1v8x0_gg_{line-height:0;margin-right:4px}.___SIcon_1v8x0_gg_._size_l_1v8x0_gg_{margin-top:4px}.___SIcon_1v8x0_gg_._size_m_1v8x0_gg_{margin-top:2px}.___SLabel_1v8x0_gg_{min-width:0}.___SAdditionalLabel_1v8x0_gg_._size_l_1v8x0_gg_,.___SCount_1v8x0_gg_._size_l_1v8x0_gg_,.___SLabel_1v8x0_gg_._size_l_1v8x0_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SAdditionalLabel_1v8x0_gg_._size_m_1v8x0_gg_,.___SCount_1v8x0_gg_._size_m_1v8x0_gg_,.___SLabel_1v8x0_gg_._size_m_1v8x0_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SAdditionalLabel_1v8x0_gg_,.___SCount_1v8x0_gg_{margin-left:4px}.___SAdditionalLabel_1v8x0_gg_{white-space:nowrap;display:flex;align-items:flex-start}.___SAdditionalLabel_1v8x0_gg_::before{content:\"\";display:inline-block;background-color:var(--intergalactic-text-secondary, #6c6e79);height:4px;width:4px;border-radius:2px;margin-right:4px}.___SAdditionalLabel_1v8x0_gg_._size_l_1v8x0_gg_::before{margin-top:10px}.___SAdditionalLabel_1v8x0_gg_._size_m_1v8x0_gg_::before{margin-top:8px}" /*__inner_css_end__*/, "1v8x0_gg_") /*__reshadow_css_end__*/, {
-  "__SLegendItem": "___SLegendItem_1v8x0_gg_",
-  "_disabled": "__disabled_1v8x0_gg_",
-  "__SPointShape": "___SPointShape_1v8x0_gg_",
-  "_color": "__color_1v8x0_gg_",
-  "--color": "--color_1v8x0",
-  "_shape_Circle": "_shape_Circle_1v8x0_gg_",
-  "_size_l": "_size_l_1v8x0_gg_",
-  "_size_m": "_size_m_1v8x0_gg_",
-  "_shape_Line": "_shape_Line_1v8x0_gg_",
-  "_shape_Square": "_shape_Square_1v8x0_gg_",
-  "__SIcon": "___SIcon_1v8x0_gg_",
-  "__SLabel": "___SLabel_1v8x0_gg_",
-  "__SAdditionalLabel": "___SAdditionalLabel_1v8x0_gg_",
-  "__SCount": "___SCount_1v8x0_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SLegendItem_15ud0_gg_{min-width:0;align-items:flex-start}@media (hover:hover){.___SLegendItem_15ud0_gg_:hover{cursor:pointer}.___SLegendItem_15ud0_gg_.__disabled_15ud0_gg_:hover{cursor:default}}.___SPointShape_15ud0_gg_.__color_15ud0_gg_{background-color:var(--color_15ud0);margin-right:8px;flex-shrink:0}.___SPointShape_15ud0_gg_._shape_Circle_15ud0_gg_._size_l_15ud0_gg_{width:16px;height:16px;border-radius:8px;margin-top:4px}.___SPointShape_15ud0_gg_._shape_Circle_15ud0_gg_._size_m_15ud0_gg_{width:12px;height:12px;border-radius:6px;margin-top:4px}.___SPointShape_15ud0_gg_._shape_Line_15ud0_gg_._size_l_15ud0_gg_{width:16px;height:4px;border-radius:3px;margin-top:9px}.___SPointShape_15ud0_gg_._shape_Line_15ud0_gg_._size_m_15ud0_gg_{width:12px;height:4px;border-radius:3px;margin-top:8px}.___SPointShape_15ud0_gg_._shape_Square_15ud0_gg_._size_l_15ud0_gg_{width:16px;height:16px;border-radius:2px;margin-top:4px}.___SPointShape_15ud0_gg_._shape_Square_15ud0_gg_._size_m_15ud0_gg_{width:12px;height:12px;border-radius:2px;margin-top:4px}.___SIcon_15ud0_gg_{line-height:0;margin-right:4px}.___SIcon_15ud0_gg_._size_l_15ud0_gg_{margin-top:4px}.___SIcon_15ud0_gg_._size_m_15ud0_gg_{margin-top:2px}.___SLabel_15ud0_gg_{min-width:0}.___SAdditionalLabel_15ud0_gg_._size_l_15ud0_gg_,.___SCount_15ud0_gg_._size_l_15ud0_gg_,.___SLabel_15ud0_gg_._size_l_15ud0_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SAdditionalLabel_15ud0_gg_._size_m_15ud0_gg_,.___SCount_15ud0_gg_._size_m_15ud0_gg_,.___SLabel_15ud0_gg_._size_m_15ud0_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SAdditionalLabel_15ud0_gg_,.___SCount_15ud0_gg_{margin-left:4px}.___SAdditionalLabel_15ud0_gg_{white-space:nowrap;display:flex;align-items:flex-start}.___SAdditionalLabel_15ud0_gg_::before{content:\"\";display:inline-block;background-color:var(--intergalactic-text-secondary, #6c6e79);height:4px;width:4px;border-radius:2px;margin-right:4px}.___SAdditionalLabel_15ud0_gg_._size_l_15ud0_gg_::before{margin-top:10px}.___SAdditionalLabel_15ud0_gg_._size_m_15ud0_gg_::before{margin-top:8px}" /*__inner_css_end__*/, "15ud0_gg_") /*__reshadow_css_end__*/, {
+  "__SLegendItem": "___SLegendItem_15ud0_gg_",
+  "_disabled": "__disabled_15ud0_gg_",
+  "__SPointShape": "___SPointShape_15ud0_gg_",
+  "_color": "__color_15ud0_gg_",
+  "--color": "--color_15ud0",
+  "_shape_Circle": "_shape_Circle_15ud0_gg_",
+  "_size_l": "_size_l_15ud0_gg_",
+  "_size_m": "_size_m_15ud0_gg_",
+  "_shape_Line": "_shape_Line_15ud0_gg_",
+  "_shape_Square": "_shape_Square_15ud0_gg_",
+  "__SIcon": "___SIcon_15ud0_gg_",
+  "__SLabel": "___SLabel_15ud0_gg_",
+  "__SAdditionalLabel": "___SAdditionalLabel_15ud0_gg_",
+  "__SCount": "___SCount_15ud0_gg_"
 });
 import { StaticShapes } from './LegendItem.type';
 import resolveColorEnhance from 'intergalactic/utils/lib/enhances/resolveColorEnhance';

package/d3-chart/lib/es6/component/ChartLegend/LegendTable/LegendTable.js

@@ -11,12 +11,12 @@ import React from 'react';
 import createComponent, { sstyled, Root } from 'intergalactic/core';
 import { Box } from 'intergalactic/flex-box';
 /*__reshadow-styles__:"./legend-table.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SLegendTable_rzbji_gg_.__columns-count_rzbji_gg_{font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;display:grid;grid-template-columns:auto .2fr;align-items:center;height:-moz-fit-content;height:fit-content;grid-column-gap:16px;grid-row-gap:8px}.___SColumnItem_rzbji_gg_._size_l_rzbji_gg_{font-size:var(--intergalactic-fs-300, 16px);text-align:right}.___SColumnItem_rzbji_gg_._size_m_rzbji_gg_{font-size:var(--intergalactic-fs-200, 14px);text-align:right}" /*__inner_css_end__*/, "rzbji_gg_") /*__reshadow_css_end__*/, {
-  "__SLegendTable": "___SLegendTable_rzbji_gg_",
-  "_columns-count": "__columns-count_rzbji_gg_",
-  "__SColumnItem": "___SColumnItem_rzbji_gg_",
-  "_size_l": "_size_l_rzbji_gg_",
-  "_size_m": "_size_m_rzbji_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SLegendTable_8l5yq_gg_.__columns-count_8l5yq_gg_{font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;display:grid;grid-template-columns:auto .2fr;align-items:center;height:-moz-fit-content;height:fit-content;grid-column-gap:16px;grid-row-gap:8px}.___SColumnItem_8l5yq_gg_._size_l_8l5yq_gg_{font-size:var(--intergalactic-fs-300, 16px);text-align:right}.___SColumnItem_8l5yq_gg_._size_m_8l5yq_gg_{font-size:var(--intergalactic-fs-200, 14px);text-align:right}" /*__inner_css_end__*/, "8l5yq_gg_") /*__reshadow_css_end__*/, {
+  "__SLegendTable": "___SLegendTable_8l5yq_gg_",
+  "_columns-count": "__columns-count_8l5yq_gg_",
+  "__SColumnItem": "___SColumnItem_8l5yq_gg_",
+  "_size_l": "_size_l_8l5yq_gg_",
+  "_size_m": "_size_m_8l5yq_gg_"
 });
 import { LegendItemComponent } from '../LegendItem/LegendItem';
 import { BaseLegend } from '../BaseLegend';

package/d3-chart/lib/es6/style/dot.shadow.css

@@ -9,7 +9,6 @@ SDots {
 SDot {
   stroke-width: 2px;
   stroke: var(--intergalactic-chart-grid-border, #ffffff);
-  r: var(--radius);
   fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
   transition-property: cx, cy;
   transition-timing-function: ease-in-out;
@@ -19,10 +18,6 @@ SDot[hide] {
   display: none;
 }
 
-SDot[active] {
-  r: calc(var(--radius) * 8/6);
-}
-
 SDot[color] {
   fill: var(--color);
 }

package/data-table/index.js

@@ -1,8 +1,8 @@
 "use strict";
 
-module.exports.__esModule = true
+module.exports.__esModule = true;
 var item = require("./lib/cjs/index");
 module.exports = item['default'] || {};
 Object.keys(item).forEach(function (key) {
-  module.exports[key] = item[key]
+  module.exports[key] = item[key];
 });

package/date-picker/index.d.ts

@@ -195,6 +195,14 @@ export type DateRangePickerProps = DropdownProps &
      * To be activated upon selecting the date
      * */
     onHighlightedChange?: (date: Date[]) => void;
+    /**
+     * Intermediate value between `highlighted` and `value` that user see before explicitly applying it.
+     */
+    preselectedValue?: DateConstructorParams[];
+    /**
+     * Normally called when user preselects a date range and when user applies this range.
+     */
+    onPreselectedValueChange?: (date: Date[]) => void;
     /**
      * Array of periods
      * [{value: [new Date(), new Date()], children: "Today"}]
@@ -527,6 +535,38 @@ export type DateRangeComparatorProps = DropdownProps &
      * To be activated upon selecting the date
      * */
     onCompareHighlightedChange?: (date: Date[]) => void;
+    /**
+     * Intermediate value between `highlighted` and `value` that user see before explicitly applying it.
+     */
+    preselectedValue?: DateConstructorParams[];
+    /**
+     * Normally called when user preselects a date range and when user applies this range.
+     */
+    onPreselectedValueChange?: (date: Date[]) => void;
+    /**
+     * Intermediate value between `compareHighlighted` and `compare` that user see before explicitly applying it.
+     */
+    preselectedCompare?: DateConstructorParams[];
+    /**
+     * Normally called when user preselects a compare range and when user applies ranges.
+     */
+    onPreselectedCompareChange?: (date: Date[]) => void;
+    /**
+     * Controls that compare range input is enabled.
+     */
+    compareToggle?: boolean;
+    /**
+     * Toggles when compare range input enables or disables.
+     */
+    onCompareToggleChange?: (compareToggle: boolean) => void;
+    /**
+     * Controls which date range is focused.
+     */
+    focusedRange?: 'value' | 'compare';
+    /**
+     * Called when user focuses or is focused on some of the date ranges.
+     */
+    onFocusedRangeChange?: (focusedRange: 'value' | 'compare') => void;
     /**
      * Remove the 'Reset' button
      * */

package/date-picker/index.js

@@ -1,8 +1,8 @@
 "use strict";
 
-module.exports.__esModule = true
+module.exports.__esModule = true;
 var item = require("./lib/cjs/index");
 module.exports = item['default'] || {};
 Object.keys(item).forEach(function (key) {
-  module.exports[key] = item[key]
+  module.exports[key] = item[key];
 });

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

@@ -82,12 +82,6 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       args[_key2] = arguments[_key2];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      dirtyValue: undefined,
-      dirtyCompare: undefined,
-      dirtyToggler: undefined,
-      range: 'value' // 'value' | 'compare'
-    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "navigateView", function (direction) {
       var displayedPeriod = _this.asProps.displayedPeriod;
       var action = direction >= 1 ? 'add' : 'subtract';
@@ -107,41 +101,35 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
       _this.handlers.visible(false);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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;
   }
@@ -150,36 +138,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
       };
     }
@@ -212,17 +195,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;
@@ -236,16 +228,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);
         }
       };
     }
@@ -283,9 +274,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',
@@ -303,9 +294,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 = {
@@ -338,23 +329,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,
@@ -363,9 +351,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         children: this.getRangeInput(),
         getI18nText: getI18nText,
         onFocus: function onFocus() {
-          _this7.setState({
-            range: 'value'
-          });
+          _this7.handlers.focusedRange('value');
           return false;
         }
       };
@@ -375,25 +361,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,
@@ -402,9 +385,7 @@ var DateRangeComparatorAbstract = /*#__PURE__*/function (_Component) {
         children: this.getRangeInput(),
         getI18nText: getI18nText,
         onFocus: function onFocus() {
-          _this8.setState({
-            range: 'compare'
-          });
+          _this8.handlers.focusedRange('compare');
           return false;
         }
       };
@@ -414,25 +395,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');
           }
         }
       };
@@ -440,19 +416,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: (0, _dayjs["default"])(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate(),
@@ -462,9 +437,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
       };
     }
   }, {
@@ -479,10 +454,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["default"].createElement(_react["default"].Fragment, null, (_ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_dropdown["default"], (0, _core.assignProps)({
         "use:aria-label": providedAriaLabel,
         "__excludeProps": ['onChange', 'value']
@@ -503,6 +478,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'
       };