baseui 10.12.0 → 11.0.1

package/es/checkbox/styled-components.js

@@ -4,14 +4,12 @@ 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) {
   const {
     $disabled,
     $checked,
-    $isError,
     $error,
     $isIndeterminate,
     $theme,
@@ -25,8 +23,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 {
@@ -82,29 +80,22 @@ function getBackgroundColor(props) {
     $disabled,
     $checked,
     $isIndeterminate,
-    $isError,
     $error,
     $isHovered,
     $isActive,
-    $theme,
-    $checkmarkType
+    $theme
   } = props;
-  const isToggle = $checkmarkType === STYLE_TYPE.toggle;
   const {
     colors
   } = $theme;
 
   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) {
@@ -112,7 +103,7 @@ function getBackgroundColor(props) {
     } else {
       return colors.tickFillErrorSelected;
     }
-  } else if ($error || $isError) {
+  } else if ($error) {
     if ($isActive) {
       return colors.tickFillErrorHoverActive;
     } else if ($isHovered) {
@@ -130,11 +121,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;
     }
   }
 }
@@ -168,7 +159,6 @@ export const Checkmark = styled('span', props => {
   const {
     $checked,
     $disabled,
-    $isError,
     $error,
     $isIndeterminate,
     $theme,
@@ -178,7 +168,7 @@ export const Checkmark = styled('span', props => {
     sizing,
     animation
   } = $theme;
-  const tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $isError || $error ? $theme.colors.tickMarkFillError : $theme.colors.tickMarkFill;
+  const tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $error ? $theme.colors.tickMarkFillError : $theme.colors.tickMarkFill;
   const indeterminate = encodeURIComponent(`
     <svg width="14" height="4" viewBox="0 0 14 4" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M14 0.5H0V3.5H14V0.5Z" fill="${tickColor}"/>
@@ -234,14 +224,12 @@ export const Checkmark = styled('span', props => {
 Checkmark.displayName = "Checkmark";
 export const Label = styled('div', props => {
   const {
-    $theme,
-    $checkmarkType
+    $theme
   } = props;
   const {
     typography
   } = $theme;
   return {
-    flex: $checkmarkType === STYLE_TYPE.toggle ? 'auto' : null,
     verticalAlign: 'middle',
     ...getLabelPadding(props),
     color: getLabelColor(props),
@@ -262,137 +250,54 @@ export const Input = styled('input', {
 });
 Input.displayName = "Input";
 export const Toggle = styled('div', props => {
-  if (props.$checkmarkType === STYLE_TYPE.toggle) {
-    const borderRadius = props.$theme.borders.useRoundedCorners ? props.$theme.borders.radius200 : null;
-    return { ...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 ${props.$theme.colors.accent}` : props.$theme.lighting.shadow400,
-      outline: 'none',
-      display: 'flex',
-      justifyContent: 'center',
-      height: props.$theme.sizing.scale800,
-      width: props.$theme.sizing.scale800
-    };
-  }
+  let backgroundColor = props.$theme.colors.toggleFill;
 
-  if (props.$checkmarkType === STYLE_TYPE.toggle_round) {
-    let 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,
-      borderTopLeftRadius: '50%',
-      borderTopRightRadius: '50%',
-      borderBottomRightRadius: '50%',
-      borderBottomLeftRadius: '50%',
-      boxShadow: props.$isFocusVisible ? `0 0 0 3px ${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(${props.$theme.direction === 'rtl' ? '-100%' : '100%'})` : null,
-      transition: `transform ${props.$theme.animation.timing200}`
-    };
+  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,
+    borderTopLeftRadius: '50%',
+    borderTopRightRadius: '50%',
+    borderBottomRightRadius: '50%',
+    borderBottomLeftRadius: '50%',
+    boxShadow: props.$isFocusVisible ? `0 0 0 3px ${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(${props.$theme.direction === 'rtl' ? '-100%' : '100%'})` : null,
+    transition: `transform ${props.$theme.animation.timing200}`
+  };
 });
 Toggle.displayName = "Toggle";
-export const ToggleInner = styled('div', props => {
-  if (props.$checkmarkType === STYLE_TYPE.toggle) {
-    // eslint-disable-next-line no-inner-declarations
-    const 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 const ToggleTrack = styled('div', props => {
-  if (props.$checkmarkType === STYLE_TYPE.toggle) {
-    const 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) {
-    let 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;
-    }
+  let backgroundColor = props.$theme.colors.toggleTrackFill;
 
-    return {
-      alignItems: 'center',
-      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,
+    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/es/data-table/column-categorical.js

@@ -37,7 +37,7 @@ function FilterQuickControls(props) {
   const 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/es/data-table/column-datetime.js

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

package/es/data-table/column.js

@@ -49,7 +49,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: {
@@ -60,7 +64,7 @@ function Column(options) {
             }
           }
         }
-      }), /*#__PURE__*/React.createElement(ProvidedCell, props)));
+      })), /*#__PURE__*/React.createElement(ProvidedCell, props)));
     }),
     renderFilter: options.renderFilter || (() => null),
     sortable: Boolean(options.sortable) && Boolean(options.sortFn),

package/es/data-table/data-table.js

@@ -396,7 +396,7 @@ const InnerTableElement = /*#__PURE__*/React.forwardRef((props, ref) => {
         row: ctx.rows[ctx.rowHighlightIndex - 1]
       }),
       size: BUTTON_SIZES.compact,
-      kind: BUTTON_KINDS.minimal,
+      kind: BUTTON_KINDS.tertiary,
       shape: BUTTON_SHAPES.round,
       overrides: {
         BaseButton: {
@@ -459,7 +459,8 @@ export function DataTable({
   selectedRowIds,
   sortIndex,
   sortDirection,
-  textQuery = ''
+  textQuery = '',
+  controlRef
 }) {
   const [, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
@@ -596,6 +597,9 @@ export function DataTable({
 
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
+  React.useImperativeHandle(controlRef, () => ({
+    getRows: () => rows
+  }), [rows]);
   const [browserScrollbarWidth, setBrowserScrollbarWidth] = React.useState(0);
   const normalizedWidths = React.useMemo(() => {
     const resizedWidths = measuredWidths.map((w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]));

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

@@ -69,6 +69,9 @@ const HeaderCell = /*#__PURE__*/React.forwardRef((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: e => {

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

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

package/es/datepicker/calendar.js

@@ -257,10 +257,16 @@ export default class Calendar extends React.Component {
       const newTimeState = [...this.state.time]; // Apply the currently selected time values (saved in state) to the updated date
 
       if (Array.isArray(data.date)) {
-        updatedDate = data.date.map((date, index) => {
-          newTimeState[index] = this.dateHelpers.applyDateToTime(newTimeState[index], date);
-          return newTimeState[index];
-        });
+        const start = data.date[0] ? this.dateHelpers.applyDateToTime(newTimeState[0], data.date[0]) : null;
+        const end = data.date[1] ? this.dateHelpers.applyDateToTime(newTimeState[1], data.date[1]) : null;
+        newTimeState[0] = start;
+
+        if (end) {
+          updatedDate = [start, end];
+          newTimeState[1] = end;
+        } else {
+          updatedDate = [start];
+        }
       } else if (!Array.isArray(this.props.value) && data.date) {
         newTimeState[0] = this.dateHelpers.applyDateToTime(newTimeState[0], data.date);
         updatedDate = newTimeState[0];
@@ -289,14 +295,14 @@ export default class Calendar extends React.Component {
 
       if (Array.isArray(this.props.value)) {
         const dates = this.props.value.map((date, i) => {
-          if (index === i) {
+          if (date && index === i) {
             return this.dateHelpers.applyTimeToDate(date, time);
           }
 
           return date;
         });
         onChange({
-          date: dates
+          date: [dates[0], dates[1]]
         });
       } else {
         const date = this.dateHelpers.applyTimeToDate(this.props.value, time);
@@ -355,7 +361,9 @@ export default class Calendar extends 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-${i}`

package/es/datepicker/constants.js

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

package/es/datepicker/datepicker.js

@@ -18,19 +18,20 @@ import { LocaleContext } from '../locale/index.js';
 import { StyledInputWrapper, StyledInputLabel, StyledStartDate, StyledEndDate } from './styled-components.js';
 import DateHelpers from './utils/date-helpers.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
+import { INPUT_ROLE, RANGED_CALENDAR_BEHAVIOR } from './constants.js';
 export const DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
-const INPUT_DELIMITER = ' – ';
+const INPUT_DELIMITER = '–';
 
-const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', separatedInput) => {
+const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', inputRole) => {
   let inputValue = newInputValue;
-  const [prevStartDate = '', prevEndDate = ''] = prevCombinedInputValue.split(INPUT_DELIMITER);
+  const [prevStartDate = '', prevEndDate = ''] = prevCombinedInputValue.split(` ${INPUT_DELIMITER} `);
 
-  if (separatedInput === 'startDate' && prevEndDate) {
-    inputValue = `${inputValue} – ${prevEndDate}`;
+  if (inputRole === INPUT_ROLE.startDate && prevEndDate) {
+    inputValue = `${inputValue} ${INPUT_DELIMITER} ${prevEndDate}`;
   }
 
-  if (separatedInput === 'endDate') {
-    inputValue = `${prevStartDate} – ${inputValue}`;
+  if (inputRole === INPUT_ROLE.endDate) {
+    inputValue = `${prevStartDate} ${INPUT_DELIMITER} ${inputValue}`;
   }
 
   return inputValue;
@@ -38,7 +39,7 @@ const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', sepa
 
 export default class Datepicker extends React.Component {
   constructor(props) {
-    super(props); //$FlowFixMe
+    super(props); //$FlowFixMe[incompatible-call]
 
     _defineProperty(this, "calendar", void 0);
 
@@ -51,15 +52,24 @@ export default class Datepicker extends React.Component {
       let nextDate = data.date;
 
       if (Array.isArray(nextDate) && this.props.range) {
-        if (nextDate.length < 2) {
+        if (!nextDate[0] || !nextDate[1]) {
           isOpen = true;
           isPseudoFocused = true;
           calendarFocused = null;
-        } else if (nextDate.length === 2) {
+        } else if (nextDate[0] && nextDate[1]) {
           const [start, end] = nextDate;
 
           if (this.dateHelpers.isAfter(start, end)) {
-            nextDate = [start, start];
+            if (this.hasLockedBehavior()) {
+              nextDate = this.props.value;
+              isOpen = true;
+            } else {
+              nextDate = [start, start];
+            }
+          } else if (this.dateHelpers.dateRangeIncludesDates( // $FlowFixMe Cannot call `this.dateHelpers.dateRangeIncludesDates` with `nextDate` bound to the first parameter because  read-only array type [1] is incompatible with  array type [2]
+          nextDate, this.props.excludeDates)) {
+            nextDate = this.props.value;
+            isOpen = true;
           }
 
           if (this.state.lastActiveElm) {
@@ -146,11 +156,12 @@ export default class Datepicker extends React.Component {
       return this.formatDate(date, formatString);
     });
 
-    _defineProperty(this, "open", () => {
+    _defineProperty(this, "open", inputRole => {
       this.setState({
         isOpen: true,
         isPseudoFocused: true,
-        calendarFocused: false
+        calendarFocused: false,
+        selectedInput: inputRole
       }, this.props.onOpen);
     });
 
@@ -158,6 +169,7 @@ export default class Datepicker extends React.Component {
       const isPseudoFocused = false;
       this.setState({
         isOpen: false,
+        selectedInput: null,
         isPseudoFocused,
         calendarFocused: false
       }, this.props.onClose);
@@ -194,14 +206,14 @@ export default class Datepicker extends React.Component {
       }
 
       if (range && !separateRangeInputs) {
-        return '9999/99/99 – 9999/99/99';
+        return `9999/99/99 ${INPUT_DELIMITER} 9999/99/99`;
       }
 
       return '9999/99/99';
     });
 
-    _defineProperty(this, "handleInputChange", (event, separatedInput) => {
-      const inputValue = this.props.range && this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, separatedInput) : event.currentTarget.value;
+    _defineProperty(this, "handleInputChange", (event, inputRole) => {
+      const inputValue = this.props.range && this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, inputRole) : event.currentTarget.value;
       const mask = this.getMask();
       const formatString = this.normalizeDashes(this.props.formatString);
 
@@ -232,7 +244,7 @@ export default class Datepicker extends React.Component {
       };
 
       if (this.props.range && typeof this.props.displayValueAtRangeIndex !== 'number') {
-        const [left, right] = this.normalizeDashes(inputValue).split(INPUT_DELIMITER);
+        const [left, right] = this.normalizeDashes(inputValue).split(` ${INPUT_DELIMITER} `);
         let startDate = this.dateHelpers.date(left);
         let endDate = this.dateHelpers.date(right);
 
@@ -353,19 +365,28 @@ export default class Datepicker extends React.Component {
 
     _defineProperty(this, "normalizeDashes", inputValue => {
       // replacing both hyphens and em-dashes with en-dashes
-      return inputValue.replace(/-/g, '–').replace(/—/g, '–');
+      return inputValue.replace(/-/g, INPUT_DELIMITER).replace(/—/g, INPUT_DELIMITER);
+    });
+
+    _defineProperty(this, "hasLockedBehavior", () => {
+      return this.props.rangedCalendarBehavior === RANGED_CALENDAR_BEHAVIOR.locked && this.props.range && this.props.separateRangeInputs;
     });
 
     this.dateHelpers = new DateHelpers(props.adapter);
     this.state = {
       calendarFocused: false,
       isOpen: false,
+      selectedInput: null,
       isPseudoFocused: false,
       lastActiveElm: null,
       inputValue: this.formatDisplayValue(props.value) || ''
     };
   }
 
+  getNullDatePlaceholder(formatString) {
+    return (this.getMask() || formatString).split(INPUT_DELIMITER)[0].replace(/[0-9]|[a-z]/g, ' ');
+  }
+
   formatDate(date, formatString) {
     const format = date => {
       if (formatString === DEFAULT_DATE_FORMAT) {
@@ -379,8 +400,12 @@ export default class Datepicker extends React.Component {
       return '';
     } else if (Array.isArray(date) && !date[0] && !date[1]) {
       return '';
+    } else if (Array.isArray(date) && !date[0] && date[1]) {
+      const endDate = format(date[1]);
+      const startDate = this.getNullDatePlaceholder(formatString);
+      return [startDate, endDate].join(` ${INPUT_DELIMITER} `);
     } else if (Array.isArray(date)) {
-      return date.map(day => format(day)).join(INPUT_DELIMITER);
+      return date.map(day => day ? format(day) : '').join(` ${INPUT_DELIMITER} `);
     } else {
       return format(date);
     }
@@ -394,16 +419,16 @@ export default class Datepicker extends React.Component {
     }
   }
 
-  renderInputComponent(locale, separatedInput) {
+  renderInputComponent(locale, inputRole) {
     const {
       overrides = {}
     } = this.props;
     const [InputComponent, inputProps] = getOverrides(overrides.Input, MaskedInput);
-    const placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? 'YYYY/MM/DD – YYYY/MM/DD' : 'YYYY/MM/DD';
-    const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(INPUT_DELIMITER);
-    const value = separatedInput === 'startDate' ? startDate : separatedInput === 'endDate' ? endDate : this.state.inputValue;
+    const placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? `YYYY/MM/DD ${INPUT_DELIMITER} YYYY/MM/DD` : 'YYYY/MM/DD';
+    const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(` ${INPUT_DELIMITER} `);
+    const value = inputRole === INPUT_ROLE.startDate ? startDate : inputRole === INPUT_ROLE.endDate ? endDate : this.state.inputValue;
 
-    const onChange = event => this.handleInputChange(event, separatedInput);
+    const onChange = event => this.handleInputChange(event, inputRole);
 
     return /*#__PURE__*/React.createElement(InputComponent, _extends({
       "aria-disabled": this.props.disabled,
@@ -416,7 +441,7 @@ export default class Datepicker extends React.Component {
       disabled: this.props.disabled,
       size: this.props.size,
       value: value,
-      onFocus: this.open,
+      onFocus: () => this.open(inputRole),
       onBlur: this.handleInputBlur,
       onKeyDown: this.handleKeyDown,
       onChange: onChange,
@@ -452,11 +477,13 @@ export default class Datepicker extends React.Component {
         trapTabbing: true,
         value: this.props.value
       }, this.props, {
-        onChange: this.onChange
+        onChange: this.onChange,
+        selectedInput: this.state.selectedInput,
+        hasLockedBehavior: this.hasLockedBehavior()
       }))
     }, popoverProps), /*#__PURE__*/React.createElement(InputWrapper, _extends({}, inputWrapperProps, {
       $separateRangeInputs: this.props.range && this.props.separateRangeInputs
-    }), this.props.range && this.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), this.renderInputComponent(locale, 'startDate')), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), this.renderInputComponent(locale, 'endDate'))) : /*#__PURE__*/React.createElement(React.Fragment, null, this.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
+    }), this.props.range && this.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), this.renderInputComponent(locale, INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), this.renderInputComponent(locale, INPUT_ROLE.endDate))) : /*#__PURE__*/React.createElement(React.Fragment, null, this.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
       id: this.props['aria-describedby'],
       style: {
         position: 'fixed',
@@ -487,11 +514,11 @@ export default class Datepicker extends React.Component {
         clipPath: 'inset(100%)'
       }
     }, // No date selected
-    !this.props.value || Array.isArray(this.props.value) && !this.props.value.length ? '' : // Date selected in a non-range picker
+    !this.props.value || Array.isArray(this.props.value) && !this.props.value[0] && !this.props.value[1] ? '' : // Date selected in a non-range picker
     !Array.isArray(this.props.value) ? getInterpolatedString(locale.datepicker.selectedDate, {
       date: this.state.inputValue || ''
     }) : // Start and end dates are selected in a range picker
-    this.props.value.length > 1 ? getInterpolatedString(locale.datepicker.selectedDateRange, {
+    this.props.value[0] && this.props.value[1] ? getInterpolatedString(locale.datepicker.selectedDateRange, {
       startDate: this.formatDisplayValue(this.props.value[0]),
       endDate: this.formatDisplayValue( // $FlowFixMe
       this.props.value[1])