baseui 10.11.1 → 11.0.0

package/checkbox/styled-components.js.flow

@@ -6,21 +6,19 @@ LICENSE file in the root directory of this source tree.
 */
 
 // @flow
-import { styled, expandBorderStyles } from '../styles/index.js';
-import { STYLE_TYPE } from './constants.js';
+import { styled } from '../styles/index.js';
 
 import type { SharedStylePropsT } from './types.js';
 
 function getBorderColor(props) {
-  const { $disabled, $checked, $isError, $error, $isIndeterminate, $theme, $isFocusVisible } =
-    props;
+  const { $disabled, $checked, $error, $isIndeterminate, $theme, $isFocusVisible } = props;
   const { colors } = $theme;
   if ($disabled) {
     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 {
@@ -62,29 +60,15 @@ function getLabelPadding(props) {
 }
 
 function getBackgroundColor(props) {
-  const {
-    $disabled,
-    $checked,
-    $isIndeterminate,
-    $isError,
-    $error,
-    $isHovered,
-    $isActive,
-    $theme,
-    $checkmarkType,
-  } = props;
-  const isToggle = $checkmarkType === STYLE_TYPE.toggle;
+  const { $disabled, $checked, $isIndeterminate, $error, $isHovered, $isActive, $theme } = props;
   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) {
@@ -92,7 +76,7 @@ function getBackgroundColor(props) {
     } else {
       return colors.tickFillErrorSelected;
     }
-  } else if ($error || $isError) {
+  } else if ($error) {
     if ($isActive) {
       return colors.tickFillErrorHoverActive;
     } else if ($isHovered) {
@@ -110,11 +94,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;
     }
   }
 }
@@ -137,13 +121,12 @@ export const Root = styled<SharedStylePropsT>('label', (props) => {
 });
 
 export const Checkmark = styled<SharedStylePropsT>('span', (props) => {
-  const { $checked, $disabled, $isError, $error, $isIndeterminate, $theme, $isFocusVisible } =
-    props;
+  const { $checked, $disabled, $error, $isIndeterminate, $theme, $isFocusVisible } = props;
   const { sizing, animation } = $theme;
 
   const tickColor = $disabled
     ? $theme.colors.tickMarkFillDisabled
-    : $isError || $error
+    : $error
     ? $theme.colors.tickMarkFillError
     : $theme.colors.tickMarkFill;
 
@@ -208,10 +191,9 @@ export const Checkmark = styled<SharedStylePropsT>('span', (props) => {
 });
 
 export const Label = styled<SharedStylePropsT>('div', (props) => {
-  const { $theme, $checkmarkType } = props;
+  const { $theme } = props;
   const { typography } = $theme;
   return ({
-    flex: $checkmarkType === STYLE_TYPE.toggle ? 'auto' : null,
     verticalAlign: 'middle',
     ...getLabelPadding(props),
     color: getLabelColor(props),
@@ -232,146 +214,58 @@ export const Input = styled('input', {
 });
 
 export const Toggle = styled<SharedStylePropsT>('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,
-    }: {});
-  }
-
-  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}`,
-    };
-  }
-
-  return {};
-});
-
-export const ToggleInner = styled<SharedStylePropsT>('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(),
-    };
+  let 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;
   }
 
-  if (props.$checkmarkType === STYLE_TYPE.toggle_round) {
-    return {};
-  }
-
-  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}`,
+  };
 });
 
 export const ToggleTrack = styled<SharedStylePropsT>('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;
-    }
-    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,
-    };
+  let backgroundColor = props.$theme.colors.toggleTrackFill;
+  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,
+  };
 });
 
 declare var __DEV__: boolean;

package/checkbox/types.js.flow

@@ -27,7 +27,6 @@ export type DefaultPropsT = {
   children?: React$Node,
   checked: boolean,
   disabled: boolean,
-  isError: boolean,
   error: boolean,
   autoFocus: boolean,
   isIndeterminate: boolean,
@@ -63,8 +62,6 @@ export type PropsT = {
   required?: boolean,
   /** Renders checkbox in errored state. */
   error?: boolean,
-  /** You should use error instead. */
-  isError?: boolean,
   /** Used to get a ref to the input element. Useful for programmatically focusing the input */
   inputRef: ReactRefT<HTMLInputElement>,
   /** Focus the checkbox on initial render. */
@@ -195,14 +192,12 @@ export type SharedStylePropsT = {
   $isFocusVisible: boolean,
   $isHovered: boolean,
   $isActive: boolean,
-  $isError: boolean,
   $error: boolean,
   $checked: boolean,
   $isIndeterminate: boolean,
   $required: boolean,
   $disabled: boolean,
   $value: string,
-  $checkmarkType: StyleTypeT,
   $labelPlacement: LabelPlacementT,
 };
 

package/data-table/column-categorical.js

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

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

@@ -54,7 +54,7 @@ function FilterQuickControls(props: { onSelectAll: () => void, onClearSelection:
   const locale = React.useContext(LocaleContext);
 
   return (
-    <ButtonGroup size={SIZE.mini} kind={KIND.minimal}>
+    <ButtonGroup size={SIZE.mini} kind={KIND.tertiary}>
       <Button type="button" onClick={props.onSelectAll}>
         {locale.datatable.categoricalFilterSelectAll}
       </Button>

package/data-table/column-datetime.js

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

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

@@ -382,7 +382,9 @@ function DatetimeFilter(props) {
                   onChange={({ date }) => {
                     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/data-table/column.js

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

package/data-table/column.js.flow

@@ -62,13 +62,15 @@ function Column<ValueT, FilterParamsT>(
             })}
           >
             {Boolean(props.onSelect) && (
-              <Checkbox
-                onChange={props.onSelect}
-                checked={props.isSelected}
-                overrides={{
-                  Checkmark: { style: { marginTop: null, marginBottom: null } },
-                }}
-              />
+              <span className={css({ paddingRight: theme.sizing.scale300 })}>
+                <Checkbox
+                  onChange={props.onSelect}
+                  checked={props.isSelected}
+                  overrides={{
+                    Checkmark: { style: { marginTop: null, marginBottom: null } },
+                  }}
+                />
+              </span>
             )}
             <ProvidedCell {...props} />
           </div>

package/data-table/data-table.js

@@ -485,7 +485,7 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
         });
       },
       size: _index.SIZE.compact,
-      kind: _index.KIND.minimal,
+      kind: _index.KIND.tertiary,
       shape: _index.SHAPE.round,
       overrides: {
         BaseButton: {

package/data-table/data-table.js.flow

@@ -587,7 +587,7 @@ const InnerTableElement = React.forwardRef<
                     })
                   }
                   size={BUTTON_SIZES.compact}
-                  kind={BUTTON_KINDS.minimal}
+                  kind={BUTTON_KINDS.tertiary}
                   shape={BUTTON_SHAPES.round}
                   overrides={{
                     BaseButton: {

package/data-table/header-cell.js

@@ -111,6 +111,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(_index.Checkbox, {
     onChange: function onChange(e) {

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

@@ -97,7 +97,7 @@ const HeaderCell = React.forwardRef<HeaderCellPropsT, HTMLDivElement>((props, re
       onBlur={handleBlur}
     >
       {props.isSelectable && (
-        <span ref={checkboxRef}>
+        <span className={css({ paddingRight: theme.sizing.scale300 })} ref={checkboxRef}>
           <Checkbox
             onChange={(e) => {
               if (props.isSelectedAll || props.isSelectedIndeterminate) {

package/datepicker/calendar.js

@@ -339,10 +339,16 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 
 
       if (Array.isArray(data.date)) {
-        updatedDate = data.date.map(function (date, index) {
-          newTimeState[index] = _this.dateHelpers.applyDateToTime(newTimeState[index], date);
-          return newTimeState[index];
-        });
+        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 (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];
@@ -374,7 +380,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);
           }
 
@@ -382,7 +388,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);
@@ -452,7 +458,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/datepicker/calendar.js.flow

@@ -22,7 +22,7 @@ import {
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
-import type { CalendarPropsT, CalendarInternalState } from './types.js';
+import type { CalendarPropsT, CalendarInternalState, DateValueT } from './types.js';
 import { DENSITY, ORIENTATION } from './constants.js';
 
 export default class Calendar<T = Date> extends React.Component<
@@ -134,7 +134,7 @@ export default class Calendar<T = Date> extends React.Component<
     return monthDelta >= 0 && monthDelta < (this.props.monthsShown || 1);
   }
 
-  getSingleDate(value: ?T | Array<T>): ?T {
+  getSingleDate(value: DateValueT<T>): ?T {
     // need to check this.props.range but flow would complain
     // at the return value in the else clause
     if (Array.isArray(value)) {
@@ -337,21 +337,33 @@ export default class Calendar<T = Date> extends React.Component<
     this.props.onDayMouseLeave && this.props.onDayMouseLeave(data);
   };
 
-  handleDateChange: ({ date: ?T | Array<T> }) => void = (data) => {
+  /** Responsible for merging time values into date values. Note: the 'Day' component
+   * determines how the days themselves change when a new day is selected. */
+  handleDateChange: ({ date: DateValueT<T> }) => void = (data) => {
     const { onChange = (params) => {} } = this.props;
     let updatedDate = data.date;
     // We'll need to update the date in time values of internal state
     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];
     }
+
     // Update the date in time values of internal state
     this.setState({ time: newTimeState });
     onChange({ date: updatedDate });
@@ -367,12 +379,12 @@ export default class Calendar<T = Date> extends React.Component<
     // with the date value set to the date with updated time
     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 });
+      onChange({ date: [dates[0], dates[1]] });
     } else {
       const date = this.dateHelpers.applyTimeToDate(this.props.value, time);
       onChange({ date });
@@ -452,6 +464,8 @@ export default class Calendar<T = Date> extends React.Component<
             value={this.props.value}
             peekNextMonth={this.props.peekNextMonth}
             fixedHeight={this.props.fixedHeight}
+            hasLockedBehavior={!!this.props.hasLockedBehavior}
+            selectedInput={this.props.selectedInput}
           />
         </CalendarContainer>
       );

package/datepicker/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DENSITY = exports.DEFAULT_MONTHS = exports.WEEKDAYS = exports.STATE_CHANGE_TYPE = exports.ORIENTATION = exports.ISO_MONTH_FORMAT = exports.ISO_FORMAT = exports.DISPLAY_FORMAT = void 0;
+exports.RANGED_CALENDAR_BEHAVIOR = exports.INPUT_ROLE = exports.DENSITY = exports.DEFAULT_MONTHS = exports.WEEKDAYS = exports.STATE_CHANGE_TYPE = exports.ORIENTATION = exports.ISO_MONTH_FORMAT = exports.ISO_FORMAT = exports.DISPLAY_FORMAT = void 0;
 
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -40,4 +40,14 @@ var DENSITY = {
   high: 'high',
   default: 'default'
 };
-exports.DENSITY = DENSITY;
+exports.DENSITY = DENSITY;
+var INPUT_ROLE = {
+  startDate: 'startDate',
+  endDate: 'endDate'
+};
+exports.INPUT_ROLE = INPUT_ROLE;
+var RANGED_CALENDAR_BEHAVIOR = {
+  default: 'default',
+  locked: 'locked'
+};
+exports.RANGED_CALENDAR_BEHAVIOR = RANGED_CALENDAR_BEHAVIOR;

package/datepicker/constants.js.flow

@@ -33,6 +33,16 @@ export const DENSITY = {
   default: 'default',
 };
 
+export const INPUT_ROLE = {
+  startDate: 'startDate',
+  endDate: 'endDate',
+};
+
+export const RANGED_CALENDAR_BEHAVIOR = {
+  default: 'default',
+  locked: 'locked',
+};
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;