baseui 10.12.1 → 11.0.2

package/esm/checkbox/checkbox.js

@@ -32,7 +32,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { getOverride, getOverrideProps } from '../helpers/overrides.js';
-import { Checkmark as StyledCheckmark, Input as StyledInput, Label as StyledLabel, Root as StyledRoot, Toggle as StyledToggle, ToggleInner as StyledToggleInner, ToggleTrack as StyledToggleTrack } from './styled-components.js';
+import { Checkmark as StyledCheckmark, Input as StyledInput, Label as StyledLabel, Root as StyledRoot, Toggle as StyledToggle, ToggleTrack as StyledToggleTrack } from './styled-components.js';
 import { STYLE_TYPE } from './constants.js';
 import { isFocusVisible } from '../utils/focusVisible.js';
 
@@ -124,10 +124,6 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "isToggle", function () {
-      return _this.props.checkmarkType === STYLE_TYPE.toggle || _this.props.checkmarkType === STYLE_TYPE.toggle_round;
-    });
-
     return _this;
   }
 
@@ -140,32 +136,19 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
 
       if (autoFocus && inputRef.current) {
         inputRef.current.focus();
-      } // TODO(v11)
-
-
-      if (process.env.NODE_ENV !== "production") {
-        if (this.props.checkmarkType === STYLE_TYPE.toggle) {
-          console.warn("baseui:Checkbox The STYLE_TYPE.toggle value on the 'checkmarkType' prop does not conform to the current base design specification. " + 'Please update your code to STYLE_TYPE.toggle_round. This will be updated automatically in a future major version.');
-        }
-
-        if (this.props.isError) {
-          console.warn('baseui:Checkbox Property "isError" will be removed in the next major version. Use "error" property instead.');
-        }
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var checkmarkType = this.props.checkmarkType;
       var _this$props2 = this.props,
           _this$props2$override = _this$props2.overrides,
           overrides = _this$props2$override === void 0 ? {} : _this$props2$override,
           onChange = _this$props2.onChange,
           _this$props2$labelPla = _this$props2.labelPlacement,
-          labelPlacement = _this$props2$labelPla === void 0 ? this.isToggle() ? 'left' : 'right' : _this$props2$labelPla,
+          labelPlacement = _this$props2$labelPla === void 0 ? this.props.checkmarkType === STYLE_TYPE.toggle ? 'left' : 'right' : _this$props2$labelPla,
           inputRef = _this$props2.inputRef,
           isIndeterminate = _this$props2.isIndeterminate,
-          isError = _this$props2.isError,
           error = _this$props2.error,
           disabled = _this$props2.disabled,
           value = _this$props2.value,
@@ -180,14 +163,12 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
           LabelOverride = overrides.Label,
           InputOverride = overrides.Input,
           ToggleOverride = overrides.Toggle,
-          ToggleInnerOverride = overrides.ToggleInner,
           ToggleTrackOverride = overrides.ToggleTrack;
       var Root = getOverride(RootOverride) || StyledRoot;
       var Checkmark = getOverride(CheckmarkOverride) || StyledCheckmark;
       var Label = getOverride(LabelOverride) || StyledLabel;
       var Input = getOverride(InputOverride) || StyledInput;
       var Toggle = getOverride(ToggleOverride) || StyledToggle;
-      var ToggleInner = getOverride(ToggleInnerOverride) || StyledToggleInner;
       var ToggleTrack = getOverride(ToggleTrackOverride) || StyledToggleTrack;
       var inputEvents = {
         onChange: onChange,
@@ -205,17 +186,14 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: this.state.isFocusVisible,
         $isHovered: this.state.isHovered,
         $isActive: this.state.isActive,
-        $isError: isError,
         $error: error,
         $checked: checked,
         $isIndeterminate: isIndeterminate,
         $required: required,
         $disabled: disabled,
-        $value: value,
-        $checkmarkType: checkmarkType
-      }; // TODO(v11) - add check for children (#2172)
-
-      var labelComp = /*#__PURE__*/React.createElement(Label, _extends({
+        $value: value
+      };
+      var labelComp = children && /*#__PURE__*/React.createElement(Label, _extends({
         $labelPlacement: labelPlacement
       }, sharedProps, getOverrideProps(LabelOverride)), this.props.containsInteractiveElement ?
       /*#__PURE__*/
@@ -230,7 +208,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         "data-baseweb": "checkbox",
         title: title || null,
         $labelPlacement: labelPlacement
-      }, sharedProps, mouseEvents, getOverrideProps(RootOverride)), (labelPlacement === 'top' || labelPlacement === 'left') && labelComp, this.isToggle() ? /*#__PURE__*/React.createElement(ToggleTrack, _extends({}, sharedProps, getOverrideProps(ToggleTrackOverride)), /*#__PURE__*/React.createElement(Toggle, _extends({}, sharedProps, getOverrideProps(ToggleOverride)), /*#__PURE__*/React.createElement(ToggleInner, _extends({}, sharedProps, getOverrideProps(ToggleInnerOverride))))) : /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, getOverrideProps(CheckmarkOverride))), /*#__PURE__*/React.createElement(Input, _extends({
+      }, sharedProps, mouseEvents, getOverrideProps(RootOverride)), (labelPlacement === 'top' || labelPlacement === 'left') && labelComp, this.props.checkmarkType === STYLE_TYPE.toggle ? /*#__PURE__*/React.createElement(ToggleTrack, _extends({}, sharedProps, getOverrideProps(ToggleTrackOverride)), /*#__PURE__*/React.createElement(Toggle, _extends({}, sharedProps, getOverrideProps(ToggleOverride)))) : /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, getOverrideProps(CheckmarkOverride))), /*#__PURE__*/React.createElement(Input, _extends({
         value: value,
         name: name,
         checked: checked,
@@ -239,7 +217,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         "aria-checked": isIndeterminate ? 'mixed' : checked,
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],
-        "aria-invalid": error || isError || null,
+        "aria-invalid": error || null,
         "aria-required": required || null,
         disabled: disabled,
         type: type,
@@ -262,7 +240,6 @@ _defineProperty(StatelessCheckbox, "defaultProps", {
   autoFocus: false,
   isIndeterminate: false,
   inputRef: /*#__PURE__*/React.createRef(),
-  isError: false,
   error: false,
   type: 'checkbox',
   checkmarkType: STYLE_TYPE.default,

package/esm/checkbox/constants.js

@@ -12,7 +12,8 @@ export var STATE_TYPE = {
 export var STYLE_TYPE = Object.freeze({
   default: 'default',
   toggle: 'toggle',
-  toggle_round: 'toggle_round'
+  // maintaining key with aliased value to assist in transition to v11 but will be removed soon after release
+  toggle_round: 'toggle'
 });
 export var LABEL_PLACEMENT = Object.freeze({
   top: 'top',

package/esm/checkbox/index.js

@@ -8,5 +8,5 @@ export { default as StatefulCheckbox } from './stateful-checkbox.js';
 export { default as StatefulContainer } from './stateful-checkbox-container.js';
 export { default as Checkbox } from './checkbox.js'; // Styled elements
 
-export { Root as StyledRoot, Checkmark as StyledCheckmark, Label as StyledLabel, Input as StyledInput, Toggle as StyledToggle, ToggleInner as StyledToggleInner, ToggleTrack as StyledToggleTrack } from './styled-components.js';
+export { Root as StyledRoot, Checkmark as StyledCheckmark, Label as StyledLabel, Input as StyledInput, Toggle as StyledToggle, ToggleTrack as StyledToggleTrack } from './styled-components.js';
 export { STATE_TYPE, STYLE_TYPE, LABEL_PLACEMENT } from './constants.js'; // Flow

package/esm/checkbox/styled-components.js

@@ -10,13 +10,11 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import { styled, expandBorderStyles } from '../styles/index.js';
-import { STYLE_TYPE } from './constants.js';
+import { styled } from '../styles/index.js';
 
 function getBorderColor(props) {
   var $disabled = props.$disabled,
       $checked = props.$checked,
-      $isError = props.$isError,
       $error = props.$error,
       $isIndeterminate = props.$isIndeterminate,
       $theme = props.$theme,
@@ -27,8 +25,8 @@ function getBorderColor(props) {
     return colors.tickFillDisabled;
   } else if ($checked || $isIndeterminate) {
     return 'transparent';
-  } else if ($error || $isError) {
-    return colors.borderError;
+  } else if ($error) {
+    return colors.borderNegative;
   } else if ($isFocusVisible) {
     return colors.borderSelected;
   } else {
@@ -76,26 +74,19 @@ function getBackgroundColor(props) {
   var $disabled = props.$disabled,
       $checked = props.$checked,
       $isIndeterminate = props.$isIndeterminate,
-      $isError = props.$isError,
       $error = props.$error,
       $isHovered = props.$isHovered,
       $isActive = props.$isActive,
-      $theme = props.$theme,
-      $checkmarkType = props.$checkmarkType;
-  var isToggle = $checkmarkType === STYLE_TYPE.toggle;
+      $theme = props.$theme;
   var colors = $theme.colors;
 
   if ($disabled) {
-    if (isToggle) {
-      return colors.toggleFillDisabled;
-    }
-
     if ($checked || $isIndeterminate) {
       return colors.tickFillDisabled;
     } else {
       return colors.tickFill;
     }
-  } else if (($error || $isError) && ($isIndeterminate || $checked)) {
+  } else if ($error && ($isIndeterminate || $checked)) {
     if ($isActive) {
       return colors.tickFillErrorSelectedHoverActive;
     } else if ($isHovered) {
@@ -103,7 +94,7 @@ function getBackgroundColor(props) {
     } else {
       return colors.tickFillErrorSelected;
     }
-  } else if ($error || $isError) {
+  } else if ($error) {
     if ($isActive) {
       return colors.tickFillErrorHoverActive;
     } else if ($isHovered) {
@@ -121,11 +112,11 @@ function getBackgroundColor(props) {
     }
   } else {
     if ($isActive) {
-      return isToggle ? colors.sliderTrackFillActive : colors.tickFillActive;
+      return colors.tickFillActive;
     } else if ($isHovered) {
-      return isToggle ? colors.sliderTrackFillHover : colors.tickFillHover;
+      return colors.tickFillHover;
     } else {
-      return isToggle ? colors.toggleTrackFill : colors.tickFill;
+      return colors.tickFill;
     }
   }
 }
@@ -152,14 +143,13 @@ Root.displayName = "Root";
 export var Checkmark = styled('span', function (props) {
   var $checked = props.$checked,
       $disabled = props.$disabled,
-      $isError = props.$isError,
       $error = props.$error,
       $isIndeterminate = props.$isIndeterminate,
       $theme = props.$theme,
       $isFocusVisible = props.$isFocusVisible;
   var sizing = $theme.sizing,
       animation = $theme.animation;
-  var tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $isError || $error ? $theme.colors.tickMarkFillError : $theme.colors.tickMarkFill;
+  var tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $error ? $theme.colors.tickMarkFillError : $theme.colors.tickMarkFill;
   var indeterminate = encodeURIComponent("\n    <svg width=\"14\" height=\"4\" viewBox=\"0 0 14 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14 0.5H0V3.5H14V0.5Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
   var check = encodeURIComponent("\n    <svg width=\"17\" height=\"13\" viewBox=\"0 0 17 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.50002 12.6L0.400024 6.60002L2.60002 4.40002L6.50002 8.40002L13.9 0.900024L16.1 3.10002L6.50002 12.6Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
   var borderRadius = $theme.borders.inputBorderRadius;
@@ -206,11 +196,9 @@ export var Checkmark = styled('span', function (props) {
 });
 Checkmark.displayName = "Checkmark";
 export var Label = styled('div', function (props) {
-  var $theme = props.$theme,
-      $checkmarkType = props.$checkmarkType;
+  var $theme = props.$theme;
   var typography = $theme.typography;
   return _objectSpread(_objectSpread(_objectSpread({
-    flex: $checkmarkType === STYLE_TYPE.toggle ? 'auto' : null,
     verticalAlign: 'middle'
   }, getLabelPadding(props)), {}, {
     color: getLabelColor(props)
@@ -231,137 +219,54 @@ export var Input = styled('input', {
 });
 Input.displayName = "Input";
 export var Toggle = styled('div', function (props) {
-  if (props.$checkmarkType === STYLE_TYPE.toggle) {
-    var borderRadius = props.$theme.borders.useRoundedCorners ? props.$theme.borders.radius200 : null;
-    return _objectSpread(_objectSpread({}, expandBorderStyles(props.$theme.borders.border300)), {}, {
-      alignItems: 'center',
-      backgroundColor: props.$theme.colors.mono100,
-      borderTopLeftRadius: borderRadius,
-      borderTopRightRadius: borderRadius,
-      borderBottomRightRadius: borderRadius,
-      borderBottomLeftRadius: borderRadius,
-      boxShadow: props.$isFocusVisible ? "0 0 0 3px ".concat(props.$theme.colors.accent) : props.$theme.lighting.shadow400,
-      outline: 'none',
-      display: 'flex',
-      justifyContent: 'center',
-      height: props.$theme.sizing.scale800,
-      width: props.$theme.sizing.scale800
-    });
-  }
-
-  if (props.$checkmarkType === STYLE_TYPE.toggle_round) {
-    var backgroundColor = props.$theme.colors.toggleFill;
-
-    if (props.$disabled) {
-      backgroundColor = props.$theme.colors.toggleFillDisabled;
-    } else if (props.$checked && (props.$error || props.$isError)) {
-      backgroundColor = props.$theme.colors.borderError;
-    } else if (props.$checked) {
-      backgroundColor = props.$theme.colors.toggleFillChecked;
-    }
-
-    return {
-      backgroundColor: backgroundColor,
-      borderTopLeftRadius: '50%',
-      borderTopRightRadius: '50%',
-      borderBottomRightRadius: '50%',
-      borderBottomLeftRadius: '50%',
-      boxShadow: props.$isFocusVisible ? "0 0 0 3px ".concat(props.$theme.colors.accent) : props.$isHovered && !props.$disabled ? props.$theme.lighting.shadow500 : props.$theme.lighting.shadow400,
-      outline: 'none',
-      height: props.$theme.sizing.scale700,
-      width: props.$theme.sizing.scale700,
-      transform: props.$checked ? "translateX(".concat(props.$theme.direction === 'rtl' ? '-100%' : '100%', ")") : null,
-      transition: "transform ".concat(props.$theme.animation.timing200)
-    };
+  var backgroundColor = props.$theme.colors.toggleFill;
+
+  if (props.$disabled) {
+    backgroundColor = props.$theme.colors.toggleFillDisabled;
+  } else if (props.$checked && props.$error) {
+    backgroundColor = props.$theme.colors.tickFillErrorSelected;
+  } else if (props.$checked) {
+    backgroundColor = props.$theme.colors.toggleFillChecked;
   }
 
-  return {};
+  return {
+    backgroundColor: backgroundColor,
+    borderTopLeftRadius: '50%',
+    borderTopRightRadius: '50%',
+    borderBottomRightRadius: '50%',
+    borderBottomLeftRadius: '50%',
+    boxShadow: props.$isFocusVisible ? "0 0 0 3px ".concat(props.$theme.colors.accent) : props.$isHovered && !props.$disabled ? props.$theme.lighting.shadow500 : props.$theme.lighting.shadow400,
+    outline: 'none',
+    height: props.$theme.sizing.scale700,
+    width: props.$theme.sizing.scale700,
+    transform: props.$checked ? "translateX(".concat(props.$theme.direction === 'rtl' ? '-100%' : '100%', ")") : null,
+    transition: "transform ".concat(props.$theme.animation.timing200)
+  };
 });
 Toggle.displayName = "Toggle";
-export var ToggleInner = styled('div', function (props) {
-  if (props.$checkmarkType === STYLE_TYPE.toggle) {
-    // eslint-disable-next-line no-inner-declarations
-    var backgroundColor = function backgroundColor() {
-      if (props.$disabled) {
-        return props.$theme.colors.sliderHandleInnerFillDisabled;
-      }
-
-      if (props.$isActive && props.$checked) {
-        return props.$theme.colors.sliderHandleInnerFillSelectedActive;
-      }
-
-      if (props.$isHovered && props.$checked) {
-        return props.$theme.colors.sliderHandleInnerFillSelectedHover;
-      }
-
-      return props.$theme.colors.toggleTrackFill;
-    };
-
-    return {
-      height: props.$theme.sizing.scale300,
-      width: props.$theme.sizing.scale0,
-      borderTopLeftRadius: props.$theme.borders.radius100,
-      borderTopRightRadius: props.$theme.borders.radius100,
-      borderBottomRightRadius: props.$theme.borders.radius100,
-      borderBottomLeftRadius: props.$theme.borders.radius100,
-      backgroundColor: backgroundColor()
-    };
-  }
-
-  if (props.$checkmarkType === STYLE_TYPE.toggle_round) {
-    return {};
-  }
-
-  return {};
-});
-ToggleInner.displayName = "ToggleInner";
 export var ToggleTrack = styled('div', function (props) {
-  if (props.$checkmarkType === STYLE_TYPE.toggle) {
-    var borderRadius = props.$theme.borders.useRoundedCorners ? props.$theme.borders.radius200 : null;
-    return {
-      alignItems: 'center',
-      backgroundColor: getBackgroundColor(props),
-      borderTopLeftRadius: borderRadius,
-      borderTopRightRadius: borderRadius,
-      borderBottomRightRadius: borderRadius,
-      borderBottomLeftRadius: borderRadius,
-      display: 'flex',
-      height: props.$theme.sizing.scale600,
-      justifyContent: props.$checked ? 'flex-end' : 'flex-start',
-      marginTop: props.$theme.sizing.scale100,
-      marginBottom: props.$theme.sizing.scale100,
-      marginLeft: props.$theme.sizing.scale100,
-      marginRight: props.$theme.sizing.scale100,
-      width: props.$theme.sizing.scale1000
-    };
-  }
-
-  if (props.$checkmarkType === STYLE_TYPE.toggle_round) {
-    var backgroundColor = props.$theme.colors.toggleTrackFill;
-
-    if (props.$disabled) {
-      backgroundColor = props.$theme.colors.toggleTrackFillDisabled;
-    } else if ((props.$error || props.$isError) && props.$checked) {
-      backgroundColor = props.$theme.colors.tickFillError;
-    }
+  var backgroundColor = props.$theme.colors.toggleTrackFill;
 
-    return {
-      alignItems: 'center',
-      backgroundColor: backgroundColor,
-      borderTopLeftRadius: '7px',
-      borderTopRightRadius: '7px',
-      borderBottomRightRadius: '7px',
-      borderBottomLeftRadius: '7px',
-      display: 'flex',
-      height: props.$theme.sizing.scale550,
-      marginTop: props.$theme.sizing.scale200,
-      marginBottom: props.$theme.sizing.scale100,
-      marginLeft: props.$theme.sizing.scale200,
-      marginRight: props.$theme.sizing.scale100,
-      width: props.$theme.sizing.scale1000
-    };
+  if (props.$disabled) {
+    backgroundColor = props.$theme.colors.toggleTrackFillDisabled;
+  } else if (props.$error && props.$checked) {
+    backgroundColor = props.$theme.colors.tickFillError;
   }
 
-  return {};
+  return {
+    alignItems: 'center',
+    backgroundColor: backgroundColor,
+    borderTopLeftRadius: '7px',
+    borderTopRightRadius: '7px',
+    borderBottomRightRadius: '7px',
+    borderBottomLeftRadius: '7px',
+    display: 'flex',
+    height: props.$theme.sizing.scale550,
+    marginTop: props.$theme.sizing.scale200,
+    marginBottom: props.$theme.sizing.scale100,
+    marginLeft: props.$theme.sizing.scale200,
+    marginRight: props.$theme.sizing.scale100,
+    width: props.$theme.sizing.scale1000
+  };
 });
 ToggleTrack.displayName = "ToggleTrack";

package/esm/data-table/column-categorical.js

@@ -57,7 +57,7 @@ function FilterQuickControls(props) {
   var locale = React.useContext(LocaleContext);
   return /*#__PURE__*/React.createElement(ButtonGroup, {
     size: SIZE.mini,
-    kind: KIND.minimal
+    kind: KIND.tertiary
   }, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     onClick: props.onSelectAll

package/esm/data-table/column-datetime.js

@@ -425,7 +425,7 @@ function DatetimeFilter(props) {
       if (Array.isArray(date)) {
         if (!date.length) return;
         var nextDates = date.map(function (d, i) {
-          return applyDateToTime(rangeDates[i], d);
+          return d ? applyDateToTime(rangeDates[i], d) : null;
         });
         setRangeDates(nextDates);
       }

package/esm/data-table/column.js

@@ -75,7 +75,11 @@ function Column(options) {
           display: 'flex',
           height: '100%'
         })
-      }, Boolean(props.onSelect) && /*#__PURE__*/React.createElement(Checkbox, {
+      }, Boolean(props.onSelect) && /*#__PURE__*/React.createElement("span", {
+        className: css({
+          paddingRight: theme.sizing.scale300
+        })
+      }, /*#__PURE__*/React.createElement(Checkbox, {
         onChange: props.onSelect,
         checked: props.isSelected,
         overrides: {
@@ -86,7 +90,7 @@ function Column(options) {
             }
           }
         }
-      }), /*#__PURE__*/React.createElement(ProvidedCell, props)));
+      })), /*#__PURE__*/React.createElement(ProvidedCell, props)));
     }),
     renderFilter: options.renderFilter || function () {
       return null;

package/esm/data-table/data-table.js

@@ -466,7 +466,7 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
         });
       },
       size: BUTTON_SIZES.compact,
-      kind: BUTTON_KINDS.minimal,
+      kind: BUTTON_KINDS.tertiary,
       shape: BUTTON_SHAPES.round,
       overrides: {
         BaseButton: {
@@ -536,7 +536,8 @@ export function DataTable(_ref2) {
       sortIndex = _ref2.sortIndex,
       sortDirection = _ref2.sortDirection,
       _ref2$textQuery = _ref2.textQuery,
-      textQuery = _ref2$textQuery === void 0 ? '' : _ref2$textQuery;
+      textQuery = _ref2$textQuery === void 0 ? '' : _ref2$textQuery,
+      controlRef = _ref2.controlRef;
 
   var _useStyletron13 = useStyletron(),
       _useStyletron14 = _slicedToArray(_useStyletron13, 2),
@@ -735,6 +736,13 @@ export function DataTable(_ref2) {
 
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
+  React.useImperativeHandle(controlRef, function () {
+    return {
+      getRows: function getRows() {
+        return rows;
+      }
+    };
+  }, [rows]);
 
   var _React$useState19 = React.useState(0),
       _React$useState20 = _slicedToArray(_React$useState19, 2),

package/esm/data-table/header-cell.js

@@ -95,6 +95,9 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onFocus: handleFocus,
     onBlur: handleBlur
   }, props.isSelectable && /*#__PURE__*/React.createElement("span", {
+    className: css({
+      paddingRight: theme.sizing.scale300
+    }),
     ref: checkboxRef
   }, /*#__PURE__*/React.createElement(Checkbox, {
     onChange: function onChange(e) {

package/esm/data-table/stateful-data-table.js

@@ -327,7 +327,8 @@ export function StatefulDataTable(props) {
       selectedRowIds: selectedRowIds,
       sortDirection: sortDirection,
       sortIndex: sortIndex,
-      textQuery: textQuery
+      textQuery: textQuery,
+      controlRef: props.controlRef
     })));
   });
 }

package/esm/datepicker/calendar.js

@@ -315,25 +315,36 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleDateChange", function (data) {
       var _this$props$onChange = _this.props.onChange,
           onChange = _this$props$onChange === void 0 ? function (params) {} : _this$props$onChange;
-      var updatedDate = data.date; // We'll need to update the date in time values of internal state
+      var updatedDate = data.date; // Apply the currently selected time values (saved in state) to the updated date
 
-      var newTimeState = _toConsumableArray(_this.state.time); // Apply the currently selected time values (saved in state) to the updated date
+      if (Array.isArray(data.date)) {
+        // We'll need to update the date in time values of internal state
+        var newTimeState = _toConsumableArray(_this.state.time);
 
+        var start = data.date[0] ? _this.dateHelpers.applyDateToTime(newTimeState[0], data.date[0]) : null;
+        var end = data.date[1] ? _this.dateHelpers.applyDateToTime(newTimeState[1], data.date[1]) : null;
+        newTimeState[0] = start;
 
-      if (Array.isArray(data.date)) {
-        updatedDate = data.date.map(function (date, index) {
-          newTimeState[index] = _this.dateHelpers.applyDateToTime(newTimeState[index], date);
-          return newTimeState[index];
+        if (end) {
+          updatedDate = [start, end];
+          newTimeState[1] = end;
+        } else {
+          updatedDate = [start];
+        } // Update the date in time values of internal state
+
+
+        _this.setState({
+          time: newTimeState
         });
       } else if (!Array.isArray(_this.props.value) && data.date) {
-        newTimeState[0] = _this.dateHelpers.applyDateToTime(newTimeState[0], data.date);
-        updatedDate = newTimeState[0];
-      } // Update the date in time values of internal state
+        var _newTimeState = _this.dateHelpers.applyDateToTime(_this.state.time[0], data.date);
 
+        updatedDate = _newTimeState; // Update the date in time values of internal state
 
-      _this.setState({
-        time: newTimeState
-      });
+        _this.setState({
+          time: [_newTimeState]
+        });
+      }
 
       onChange({
         date: updatedDate
@@ -356,7 +367,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 
       if (Array.isArray(_this.props.value)) {
         var dates = _this.props.value.map(function (date, i) {
-          if (index === i) {
+          if (date && index === i) {
             return _this.dateHelpers.applyTimeToDate(date, time);
           }
 
@@ -364,7 +375,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
         });
 
         onChange({
-          date: dates
+          date: [dates[0], dates[1]]
         });
       } else {
         var date = _this.dateHelpers.applyTimeToDate(_this.props.value, time);
@@ -434,7 +445,9 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           overrides: overrides,
           value: _this.props.value,
           peekNextMonth: _this.props.peekNextMonth,
-          fixedHeight: _this.props.fixedHeight
+          fixedHeight: _this.props.fixedHeight,
+          hasLockedBehavior: !!_this.props.hasLockedBehavior,
+          selectedInput: _this.props.selectedInput
         })));
         monthList.push( /*#__PURE__*/React.createElement("div", {
           key: "month-component-".concat(i)

package/esm/datepicker/constants.js

@@ -25,4 +25,12 @@ export var DEFAULT_MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 export var DENSITY = {
   high: 'high',
   default: 'default'
+};
+export var INPUT_ROLE = {
+  startDate: 'startDate',
+  endDate: 'endDate'
+};
+export var RANGED_CALENDAR_BEHAVIOR = {
+  default: 'default',
+  locked: 'locked'
 };