baseui 0.0.0-next-18f6cb4 → 0.0.0-next-e7d1f7c

package/datepicker/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledWeekdayHeader = exports.StyledDayLabel = exports.StyledDay = exports.StyledWeek = exports.StyledMonth = exports.StyledNextButton = exports.StyledPrevButton = exports.StyledMonthYearSelectIconContainer = exports.StyledMonthYearSelectButton = exports.StyledMonthHeader = exports.StyledCalendarHeader = exports.StyledSelectorContainer = exports.StyledCalendarContainer = exports.StyledMonthContainer = exports.StyledRoot = exports.StyledInputWrapper = void 0;
+exports.StyledWeekdayHeader = exports.StyledDayLabel = exports.StyledDay = exports.StyledWeek = exports.StyledMonth = exports.StyledNextButton = exports.StyledPrevButton = exports.StyledMonthYearSelectIconContainer = exports.StyledMonthYearSelectButton = exports.StyledMonthHeader = exports.StyledCalendarHeader = exports.StyledSelectorContainer = exports.StyledCalendarContainer = exports.StyledMonthContainer = exports.StyledRoot = exports.StyledEndDate = exports.StyledStartDate = exports.StyledInputLabel = exports.StyledInputWrapper = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -22,7 +22,36 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 /**
  * Main component container element
  */
-var StyledInputWrapper = (0, _index.styled)('div', function () {
+var StyledInputWrapper = (0, _index.styled)('div', function (props) {
+  var $separateRangeInputs = props.$separateRangeInputs;
+  return _objectSpread({
+    width: '100%'
+  }, $separateRangeInputs ? {
+    display: 'flex',
+    justifyContent: 'center'
+  } : {});
+});
+exports.StyledInputWrapper = StyledInputWrapper;
+StyledInputWrapper.displayName = "StyledInputWrapper";
+var StyledInputLabel = (0, _index.styled)('div', function (_ref) {
+  var $theme = _ref.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.LabelMedium), {}, {
+    marginBottom: $theme.sizing.scale300
+  });
+});
+exports.StyledInputLabel = StyledInputLabel;
+StyledInputLabel.displayName = "StyledInputLabel";
+var StyledStartDate = (0, _index.styled)('div', function (_ref2) {
+  var $theme = _ref2.$theme;
+  return {
+    width: '100%',
+    marginRight: $theme.sizing.scale300
+  };
+});
+exports.StyledStartDate = StyledStartDate;
+StyledStartDate.displayName = "StyledStartDate";
+var StyledEndDate = (0, _index.styled)('div', function (_ref3) {
+  var $theme = _ref3.$theme;
   return {
     width: '100%'
   };
@@ -31,8 +60,8 @@ var StyledInputWrapper = (0, _index.styled)('div', function () {
  * Main component container element
  */
 
-exports.StyledInputWrapper = StyledInputWrapper;
-StyledInputWrapper.displayName = "StyledInputWrapper";
+exports.StyledEndDate = StyledEndDate;
+StyledEndDate.displayName = "StyledEndDate";
 var StyledRoot = (0, _index.styled)('div', function (props) {
   var _props$$theme = props.$theme,
       typography = _props$$theme.typography,
@@ -71,8 +100,8 @@ var StyledCalendarContainer = (0, _index.styled)('div', function (props) {
 });
 exports.StyledCalendarContainer = StyledCalendarContainer;
 StyledCalendarContainer.displayName = "StyledCalendarContainer";
-var StyledSelectorContainer = (0, _index.styled)('div', function (_ref) {
-  var $theme = _ref.$theme;
+var StyledSelectorContainer = (0, _index.styled)('div', function (_ref4) {
+  var $theme = _ref4.$theme;
   var textAlign = $theme.direction === 'rtl' ? 'right' : 'left';
   return {
     marginBottom: $theme.sizing.scale600,
@@ -146,10 +175,10 @@ var StyledMonthYearSelectIconContainer = (0, _index.styled)('span', function (pr
 exports.StyledMonthYearSelectIconContainer = StyledMonthYearSelectIconContainer;
 StyledMonthYearSelectIconContainer.displayName = "StyledMonthYearSelectIconContainer";
 
-function getArrowBtnStyle(_ref3) {
-  var $theme = _ref3.$theme,
-      $disabled = _ref3.$disabled,
-      $isFocusVisible = _ref3.$isFocusVisible;
+function getArrowBtnStyle(_ref6) {
+  var $theme = _ref6.$theme,
+      $disabled = _ref6.$disabled,
+      $isFocusVisible = _ref6.$isFocusVisible;
   return {
     boxSizing: 'border-box',
     color: $disabled ? $theme.colors.calendarHeaderForegroundDisabled : $theme.colors.calendarHeaderForeground,
@@ -199,16 +228,16 @@ exports.StyledWeek = StyledWeek;
 StyledWeek.displayName = "StyledWeek";
 
 function generateDayStyles(defaultCode, defaultStyle) {
-  var _ref4;
+  var _ref7;
 
   var codeForSM = defaultCode.substr(0, 12) + '1' + defaultCode.substr(12 + 1);
   var codeForEM = defaultCode.substr(0, 13) + '1' + defaultCode.substr(13 + 1);
-  return _ref4 = {}, _defineProperty(_ref4, defaultCode, defaultStyle), _defineProperty(_ref4, codeForSM, defaultStyle), _defineProperty(_ref4, codeForEM, defaultStyle), _ref4;
+  return _ref7 = {}, _defineProperty(_ref7, defaultCode, defaultStyle), _defineProperty(_ref7, codeForSM, defaultStyle), _defineProperty(_ref7, codeForEM, defaultStyle), _ref7;
 } // eslint-disable-next-line flowtype/no-weak-types
 
 
-function getDayStyles(code, _ref5) {
-  var colors = _ref5.colors;
+function getDayStyles(code, _ref8) {
+  var colors = _ref8.colors;
   var undefinedDayStyle = {
     ':before': {
       content: null

package/datepicker/styled-components.js.flow

@@ -13,7 +13,31 @@ import {ORIENTATION} from './constants.js';
 /**
  * Main component container element
  */
-export const StyledInputWrapper = styled<SharedStylePropsT>('div', () => ({
+export const StyledInputWrapper = styled<{
+  ...SharedStylePropsT,
+  $separateRangeInputs: boolean,
+}>('div', props => {
+  const {$separateRangeInputs} = props;
+
+  return {
+    width: '100%',
+    ...($separateRangeInputs
+      ? {display: 'flex', justifyContent: 'center'}
+      : {}),
+  };
+});
+
+export const StyledInputLabel = styled<{}>('div', ({$theme}) => ({
+  ...$theme.typography.LabelMedium,
+  marginBottom: $theme.sizing.scale300,
+}));
+
+export const StyledStartDate = styled<{}>('div', ({$theme}) => ({
+  width: '100%',
+  marginRight: $theme.sizing.scale300,
+}));
+
+export const StyledEndDate = styled<{}>('div', ({$theme}) => ({
   width: '100%',
 }));
 

package/datepicker/types.js.flow

@@ -57,6 +57,9 @@ export type DatepickerOverridesT = {
   InputWrapper?: OverrideT,
   /** Override for reused Popover component. Popover is **not a styled  element** but a react component that can be replaced */
   Popover?: OverrideT,
+  StartDate?: OverrideT,
+  EndDate?: OverrideT,
+  InputLabel?: OverrideT,
 };
 
 export type DayPropsT<T = Date> = {
@@ -220,6 +223,10 @@ export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
   /** Called when calendar is closed */
   onClose?: () => mixed,
   mask?: string | null,
+  /** Determines if startDate and endDate should be separated into two input fields. Ignored if `range` is not true. */
+  separateRangeInputs?: boolean,
+  startDateLabel?: string,
+  endDateLabel?: string,
 };
 
 export type SharedStylePropsT = {

package/es/datepicker/datepicker.js

@@ -15,10 +15,27 @@ import Calendar from './calendar.js';
 import { getOverrides } from '../helpers/overrides.js';
 import getInterpolatedString from '../helpers/i18n-interpolation.js';
 import { LocaleContext } from '../locale/index.js';
-import { StyledInputWrapper } from './styled-components.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';
 export const DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
+const INPUT_DELIMITER = ' – ';
+
+const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', separatedInput) => {
+  let inputValue = newInputValue;
+  const [prevStartDate = '', prevEndDate = ''] = prevCombinedInputValue.split(INPUT_DELIMITER);
+
+  if (separatedInput === 'startDate' && prevEndDate) {
+    inputValue = `${inputValue} – ${prevEndDate}`;
+  }
+
+  if (separatedInput === 'endDate') {
+    inputValue = `${prevStartDate} – ${inputValue}`;
+  }
+
+  return inputValue;
+};
+
 export default class Datepicker extends React.Component {
   constructor(props) {
     super(props);
@@ -164,7 +181,8 @@ export default class Datepicker extends React.Component {
       const {
         formatString,
         mask,
-        range
+        range,
+        separateRangeInputs
       } = this.props;
 
       if (mask === null) {
@@ -177,7 +195,7 @@ export default class Datepicker extends React.Component {
 
       const normalizedFormatString = this.normalizeDashes(formatString);
 
-      if (formatString) {
+      if (formatString && !separateRangeInputs) {
         if (range) {
           return `${normalizedFormatString} – ${normalizedFormatString}`.replace(/[a-z]/gi, '9');
         } else {
@@ -185,15 +203,15 @@ export default class Datepicker extends React.Component {
         }
       }
 
-      if (range) {
+      if (range && !separateRangeInputs) {
         return '9999/99/99 – 9999/99/99';
       }
 
       return '9999/99/99';
     });
 
-    _defineProperty(this, "handleInputChange", event => {
-      const inputValue = event.currentTarget.value;
+    _defineProperty(this, "handleInputChange", (event, separatedInput) => {
+      const inputValue = this.props.range && this.props.separateRangeInputs ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, separatedInput) : event.currentTarget.value;
       const mask = this.getMask();
 
       if (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ') || inputValue.length === 0) {
@@ -224,7 +242,7 @@ export default class Datepicker extends React.Component {
       };
 
       if (this.props.range && typeof this.props.displayValueAtRangeIndex !== 'number') {
-        const [left, right] = this.normalizeDashes(inputValue).split(' – ');
+        const [left, right] = this.normalizeDashes(inputValue).split(INPUT_DELIMITER);
         let startDate = this.dateHelpers.date(left);
         let endDate = this.dateHelpers.date(right);
 
@@ -372,7 +390,7 @@ export default class Datepicker extends React.Component {
     } else if (Array.isArray(date) && !date[0] && !date[1]) {
       return '';
     } else if (Array.isArray(date)) {
-      return date.map(day => format(day)).join(' – ');
+      return date.map(day => format(day)).join(INPUT_DELIMITER);
     } else {
       return format(date);
     }
@@ -386,14 +404,50 @@ export default class Datepicker extends React.Component {
     }
   }
 
-  render() {
+  renderInputComponent(locale, separatedInput) {
     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 onChange = event => this.handleInputChange(event, separatedInput);
+
+    return /*#__PURE__*/React.createElement(InputComponent, _extends({
+      "aria-disabled": this.props.disabled,
+      "aria-label": this.props['aria-label'] || (this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel),
+      error: this.props.error,
+      positive: this.props.positive,
+      "aria-describedby": this.props['aria-describedby'],
+      "aria-labelledby": this.props['aria-labelledby'],
+      "aria-required": this.props.required || null,
+      disabled: this.props.disabled,
+      size: this.props.size,
+      value: value,
+      onFocus: this.open,
+      onBlur: this.handleInputBlur,
+      onKeyDown: this.handleKeyDown,
+      onChange: onChange,
+      placeholder: placeholder,
+      mask: this.getMask(),
+      required: this.props.required,
+      clearable: this.props.clearable
+    }, inputProps));
+  }
+
+  render() {
+    const {
+      overrides = {},
+      startDateLabel = 'Start Date',
+      endDateLabel = 'End Date'
+    } = this.props;
     const [PopoverComponent, popoverProps] = getOverrides(overrides.Popover, Popover);
     const [InputWrapper, inputWrapperProps] = getOverrides(overrides.InputWrapper, StyledInputWrapper);
-    const placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range ? 'YYYY/MM/DD – YYYY/MM/DD' : 'YYYY/MM/DD';
+    const [StartDate, startDateProps] = getOverrides(overrides.StartDate, StyledStartDate);
+    const [EndDate, endDateProps] = getOverrides(overrides.EndDate, StyledEndDate);
+    const [InputLabel, inputLabelProps] = getOverrides(overrides.InputLabel, StyledInputLabel);
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
       focusLock: false,
       mountNode: this.props.mountNode,
@@ -409,26 +463,9 @@ export default class Datepicker extends React.Component {
       }, this.props, {
         onChange: this.onChange
       }))
-    }, popoverProps), /*#__PURE__*/React.createElement(InputWrapper, inputWrapperProps, /*#__PURE__*/React.createElement(InputComponent, _extends({
-      "aria-disabled": this.props.disabled,
-      "aria-label": this.props['aria-label'] || (this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel),
-      error: this.props.error,
-      positive: this.props.positive,
-      "aria-describedby": this.props['aria-describedby'],
-      "aria-labelledby": this.props['aria-labelledby'],
-      "aria-required": this.props.required || null,
-      disabled: this.props.disabled,
-      size: this.props.size,
-      value: this.state.inputValue,
-      onFocus: this.open,
-      onBlur: this.handleInputBlur,
-      onKeyDown: this.handleKeyDown,
-      onChange: this.handleInputChange,
-      placeholder: placeholder,
-      mask: this.getMask(),
-      required: this.props.required,
-      clearable: this.props.clearable
-    }, inputProps)))), /*#__PURE__*/React.createElement("p", {
+    }, 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", {
       id: this.props['aria-describedby'],
       style: {
         position: 'fixed',

package/es/datepicker/styled-components.js

@@ -11,14 +11,42 @@ import { ORIENTATION } from './constants.js';
  * Main component container element
  */
 
-export const StyledInputWrapper = styled('div', () => ({
+export const StyledInputWrapper = styled('div', props => {
+  const {
+    $separateRangeInputs
+  } = props;
+  return {
+    width: '100%',
+    ...($separateRangeInputs ? {
+      display: 'flex',
+      justifyContent: 'center'
+    } : {})
+  };
+});
+StyledInputWrapper.displayName = "StyledInputWrapper";
+export const StyledInputLabel = styled('div', ({
+  $theme
+}) => ({ ...$theme.typography.LabelMedium,
+  marginBottom: $theme.sizing.scale300
+}));
+StyledInputLabel.displayName = "StyledInputLabel";
+export const StyledStartDate = styled('div', ({
+  $theme
+}) => ({
+  width: '100%',
+  marginRight: $theme.sizing.scale300
+}));
+StyledStartDate.displayName = "StyledStartDate";
+export const StyledEndDate = styled('div', ({
+  $theme
+}) => ({
   width: '100%'
 }));
 /**
  * Main component container element
  */
 
-StyledInputWrapper.displayName = "StyledInputWrapper";
+StyledEndDate.displayName = "StyledEndDate";
 export const StyledRoot = styled('div', props => {
   const {
     $theme: {

package/es/popover/stateful-container.js

@@ -25,6 +25,10 @@ class StatefulContainer extends React.Component {
         this.props.onBlur(e);
       }
 
+      if (this.props.focusLock || this.props.autoFocus) {
+        return;
+      }
+
       this.close();
     });