baseui 0.0.0-alpha-3a96a5e → 0.0.0-alpha-bcb33da

package/a11y/a11y.js

@@ -140,8 +140,8 @@ function Violation(props) {
     ref: setPopper,
     $top: "".concat(offset.top, "px") || '0px',
     $left: "".concat(offset.left, "px") || '0px'
-  }, /*#__PURE__*/React.createElement(_index2.Caption1, null, props.target), props.violations.map(function (violation, index) {
-    return /*#__PURE__*/React.createElement(_index2.Paragraph3, {
+  }, /*#__PURE__*/React.createElement(_index2.ParagraphXSmall, null, props.target), props.violations.map(function (violation, index) {
+    return /*#__PURE__*/React.createElement(_index2.ParagraphSmall, {
       key: index
     }, violation.description);
   }))));

package/a11y/a11y.js.flow

@@ -11,7 +11,7 @@ import * as React from 'react';
 import axe from 'axe-core';
 
 import {Layer, TetherBehavior, TETHER_PLACEMENT} from '../layer/index.js';
-import {Paragraph3, Caption1} from '../typography/index.js';
+import {ParagraphSmall, ParagraphXSmall} from '../typography/index.js';
 import {styled} from '../styles/index.js';
 import {ThemeContext} from '../styles/theme-provider.js';
 
@@ -101,9 +101,9 @@ function Violation(props: ViolationPropsT) {
           $top={`${offset.top}px` || '0px'}
           $left={`${offset.left}px` || '0px'}
         >
-          <Caption1>{props.target}</Caption1>
+          <ParagraphXSmall>{props.target}</ParagraphXSmall>
           {props.violations.map((violation, index) => (
-            <Paragraph3 key={index}>{violation.description}</Paragraph3>
+            <ParagraphSmall key={index}>{violation.description}</ParagraphSmall>
           ))}
         </ViolationContainer>
       </TetherBehavior>

package/button/styled-components.js

@@ -46,11 +46,14 @@ var BaseButton = (0, _index.styled)('button', function (_ref) {
     transitionDuration: $theme.animation.timing200,
     transitionTimingFunction: $theme.animation.linearCurve,
     cursor: 'pointer',
-    ':disabled': {
-      cursor: 'not-allowed',
-      backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
-      color: $theme.colors.buttonDisabledText
-    },
+    ':disabled': _objectSpread({
+      cursor: 'not-allowed'
+    }, getDisabledStyles({
+      $theme: $theme,
+      $kind: $kind,
+      $disabled: $disabled,
+      $isSelected: $isSelected
+    })),
     marginLeft: 0,
     marginTop: 0,
     marginRight: 0,
@@ -275,10 +278,36 @@ function getFontStyles(_ref10) {
   }
 }
 
-function getPaddingStyles(_ref11) {
+function getDisabledStyles(_ref11) {
   var $theme = _ref11.$theme,
-      $size = _ref11.$size,
-      $shape = _ref11.$shape;
+      $kind = _ref11.$kind,
+      $isSelected = _ref11.$isSelected,
+      $disabled = _ref11.$disabled;
+
+  if ($disabled && $isSelected) {
+    if ($kind === _constants.KIND.primary || $kind === _constants.KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill
+      };
+    } else if ($kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText
+      };
+    }
+  }
+
+  return {
+    backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText
+  };
+}
+
+function getPaddingStyles(_ref12) {
+  var $theme = _ref12.$theme,
+      $size = _ref12.$size,
+      $shape = _ref12.$shape;
   var iconShape = $shape === _constants.SHAPE.square || $shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round;
 
   switch ($size) {
@@ -316,12 +345,12 @@ function getPaddingStyles(_ref11) {
   }
 }
 
-function getKindStyles(_ref12) {
-  var $theme = _ref12.$theme,
-      $isLoading = _ref12.$isLoading,
-      $isSelected = _ref12.$isSelected,
-      $kind = _ref12.$kind,
-      $disabled = _ref12.$disabled;
+function getKindStyles(_ref13) {
+  var $theme = _ref13.$theme,
+      $isLoading = _ref13.$isLoading,
+      $isSelected = _ref13.$isSelected,
+      $kind = _ref13.$kind,
+      $disabled = _ref13.$disabled;
 
   if ($disabled) {
     return Object.freeze({});
@@ -409,10 +438,10 @@ function getKindStyles(_ref12) {
   }
 }
 
-function getShapeStyles(_ref13) {
-  var $theme = _ref13.$theme,
-      $shape = _ref13.$shape,
-      $size = _ref13.$size;
+function getShapeStyles(_ref14) {
+  var $theme = _ref14.$theme,
+      $shape = _ref14.$shape,
+      $size = _ref14.$size;
 
   if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.square) {
     var height, width;

package/button/styled-components.js.flow

@@ -46,11 +46,7 @@ export const BaseButton = styled<SharedStylePropsT>(
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor:
-        $kind === KIND.minimal || $kind === KIND.tertiary
-          ? 'transparent'
-          : $theme.colors.buttonDisabledFill,
-      color: $theme.colors.buttonDisabledText,
+      ...getDisabledStyles({$theme, $kind, $disabled, $isSelected}),
     },
     marginLeft: 0,
     marginTop: 0,
@@ -229,6 +225,30 @@ function getFontStyles({$theme, $size}) {
   }
 }
 
+function getDisabledStyles({$theme, $kind, $isSelected, $disabled}) {
+  if ($disabled && $isSelected) {
+    if ($kind === KIND.primary || $kind === KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill,
+      };
+    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText,
+      };
+    }
+  }
+
+  return {
+    backgroundColor:
+      $kind === KIND.minimal || $kind === KIND.tertiary
+        ? 'transparent'
+        : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText,
+  };
+}
+
 function getPaddingStyles({$theme, $size, $shape}) {
   const iconShape =
     $shape === SHAPE.square ||

package/data-table/column-categorical.js

@@ -208,7 +208,7 @@ function CategoricalFilter(props) {
       overflowY: 'auto',
       marginTop: theme.sizing.scale600
     })
-  }, !filteredCategories.length && /*#__PURE__*/React.createElement(_index6.Label3, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
+  }, !filteredCategories.length && /*#__PURE__*/React.createElement(_index6.LabelSmall, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
     return /*#__PURE__*/React.createElement("div", {
       className: checkboxStyles,
       key: i

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

@@ -14,7 +14,7 @@ import {Checkbox, StyledLabel} from '../checkbox/index.js';
 import Search from '../icon/search.js';
 import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
 import {useStyletron, withStyle} from '../styles/index.js';
-import {Label3} from '../typography/index.js';
+import {LabelSmall} from '../typography/index.js';
 
 import Column from './column.js';
 import {COLUMNS} from './constants.js';
@@ -184,7 +184,7 @@ export function CategoricalFilter(props: CategoricalFilterProps) {
         })}
       >
         {!filteredCategories.length && (
-          <Label3>{locale.datatable.categoricalFilterEmpty}</Label3>
+          <LabelSmall>{locale.datatable.categoricalFilterEmpty}</LabelSmall>
         )}
 
         {Boolean(filteredCategories.length) &&

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 d ? (0, _index13.applyDateToTime)(rangeDates[i], d) : null;
+          return (0, _index13.applyDateToTime)(rangeDates[i], d);
         });
         setRangeDates(nextDates);
       }

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

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

package/data-table/column-numerical.js

@@ -493,7 +493,7 @@ function NumericalFilter(props) {
       marginLeft: theme.sizing.scale300,
       marginRight: theme.sizing.scale300
     })
-  }, /*#__PURE__*/React.createElement(_index5.Paragraph4, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(_index5.Paragraph4, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(_index5.ParagraphXSmall, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(_index5.ParagraphXSmall, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
     className: css({
       display: 'flex',
       justifyContent: 'space-between'

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

@@ -12,7 +12,7 @@ import {Button, SIZE} from '../button/index.js';
 import {ButtonGroup, MODE} from '../button-group/index.js';
 import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
 import {useStyletron} from '../styles/index.js';
-import {Paragraph4} from '../typography/index.js';
+import {ParagraphXSmall} from '../typography/index.js';
 
 import Column from './column.js';
 import {COLUMNS, NUMERICAL_FORMATS, NUMERICAL_OPERATIONS} from './constants.js';
@@ -388,8 +388,8 @@ function NumericalFilter(props) {
           marginRight: theme.sizing.scale300,
         })}
       >
-        <Paragraph4>{format(min, props.options)}</Paragraph4>{' '}
-        <Paragraph4>{format(max, props.options)}</Paragraph4>
+        <ParagraphXSmall>{format(min, props.options)}</ParagraphXSmall>{' '}
+        <ParagraphXSmall>{format(max, props.options)}</ParagraphXSmall>
       </div>
 
       <div className={css({display: 'flex', justifyContent: 'space-between'})}>

package/datepicker/calendar.js

@@ -339,16 +339,10 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 
 
       if (Array.isArray(data.date)) {
-        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];
-        }
+        updatedDate = data.date.map(function (date, index) {
+          newTimeState[index] = _this.dateHelpers.applyDateToTime(newTimeState[index], date);
+          return newTimeState[index];
+        });
       } else if (!Array.isArray(_this.props.value) && data.date) {
         newTimeState[0] = _this.dateHelpers.applyDateToTime(newTimeState[0], data.date);
         updatedDate = newTimeState[0];
@@ -380,7 +374,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 
       if (Array.isArray(_this.props.value)) {
         var dates = _this.props.value.map(function (date, i) {
-          if (date && index === i) {
+          if (index === i) {
             return _this.dateHelpers.applyTimeToDate(date, time);
           }
 
@@ -388,7 +382,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
         });
 
         onChange({
-          date: [dates[0], dates[1]]
+          date: dates
         });
       } else {
         var date = _this.dateHelpers.applyTimeToDate(_this.props.value, time);

package/datepicker/calendar.js.flow

@@ -22,11 +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,
-  DateValueT,
-} from './types.js';
+import type {CalendarPropsT, CalendarInternalState} from './types.js';
 import {DENSITY, ORIENTATION} from './constants.js';
 
 export default class Calendar<T = Date> extends React.Component<
@@ -144,7 +140,7 @@ export default class Calendar<T = Date> extends React.Component<
     return monthDelta >= 0 && monthDelta < (this.props.monthsShown || 1);
   }
 
-  getSingleDate(value: DateValueT<T>): ?T {
+  getSingleDate(value: ?T | Array<T>): ?T {
     // need to check this.props.range but flow would complain
     // at the return value in the else clause
     if (Array.isArray(value)) {
@@ -350,26 +346,20 @@ export default class Calendar<T = Date> extends React.Component<
     this.props.onDayMouseLeave && this.props.onDayMouseLeave(data);
   };
 
-  handleDateChange: ({date: DateValueT<T>}) => void = data => {
+  handleDateChange: ({date: ?T | Array<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)) {
-      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];
-      }
+      updatedDate = data.date.map((date, index) => {
+        newTimeState[index] = this.dateHelpers.applyDateToTime(
+          newTimeState[index],
+          date,
+        );
+        return newTimeState[index];
+      });
     } else if (!Array.isArray(this.props.value) && data.date) {
       newTimeState[0] = this.dateHelpers.applyDateToTime(
         newTimeState[0],
@@ -377,7 +367,6 @@ export default class Calendar<T = Date> extends React.Component<
       );
       updatedDate = newTimeState[0];
     }
-
     // Update the date in time values of internal state
     this.setState({time: newTimeState});
     onChange({date: updatedDate});
@@ -396,12 +385,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 (date && index === i) {
+        if (index === i) {
           return this.dateHelpers.applyTimeToDate(date, time);
         }
         return date;
       });
-      onChange({date: [dates[0], dates[1]]});
+      onChange({date: dates});
     } else {
       const date = this.dateHelpers.applyTimeToDate(this.props.value, time);
       onChange({date});

package/datepicker/datepicker.js

@@ -98,7 +98,6 @@ var combineSeparatedInputs = function combineSeparatedInputs(newInputValue) {
       prevEndDate = _prevCombinedInputVal4 === void 0 ? '' : _prevCombinedInputVal4;
 
   if (separatedInput === 'startDate' && prevEndDate) {
-    // TODO(LUKE): use INPUT_DELIMITER below
     inputValue = "".concat(inputValue, " \u2013 ").concat(prevEndDate);
   }
 
@@ -132,11 +131,11 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       var nextDate = data.date;
 
       if (Array.isArray(nextDate) && _this.props.range) {
-        if (!nextDate[0] || !nextDate[1]) {
+        if (nextDate.length < 2) {
           isOpen = true;
           isPseudoFocused = true;
           calendarFocused = null;
-        } else if (nextDate[0] && nextDate[1]) {
+        } else if (nextDate.length === 2) {
           var _nextDate = nextDate,
               _nextDate2 = _slicedToArray(_nextDate, 2),
               start = _nextDate2[0],
@@ -283,7 +282,6 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       }
 
       if (range && !separateRangeInputs) {
-        // TODO(LUKE): use INPUT_DELIMITER below
         return '9999/99/99 – 9999/99/99';
       }
 
@@ -471,11 +469,6 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(Datepicker, [{
-    key: "getNullDatePlaceholder",
-    value: function getNullDatePlaceholder(formatString) {
-      return (this.getMask() || formatString).split('–')[0].replace(/[0-9]|[a-z]/g, ' ');
-    }
-  }, {
     key: "formatDate",
     value: function formatDate(date, formatString) {
       var _this2 = this;
@@ -492,13 +485,9 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         return '';
       } else if (Array.isArray(date) && !date[0] && !date[1]) {
         return '';
-      } else if (Array.isArray(date) && !date[0] && date[1]) {
-        var endDate = format(date[1]);
-        var startDate = this.getNullDatePlaceholder(formatString);
-        return [startDate, endDate].join(INPUT_DELIMITER);
       } else if (Array.isArray(date)) {
         return date.map(function (day) {
-          return day ? format(day) : '';
+          return format(day);
         }).join(INPUT_DELIMITER);
       } else {
         return format(date);
@@ -650,11 +639,11 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             clipPath: 'inset(100%)'
           }
         }, // No date selected
-        !_this4.props.value || Array.isArray(_this4.props.value) && !_this4.props.value[0] && !_this4.props.value[1] ? '' : // Date selected in a non-range picker
+        !_this4.props.value || Array.isArray(_this4.props.value) && !_this4.props.value.length ? '' : // Date selected in a non-range picker
         !Array.isArray(_this4.props.value) ? (0, _i18nInterpolation.default)(locale.datepicker.selectedDate, {
           date: _this4.state.inputValue || ''
         }) : // Start and end dates are selected in a range picker
-        _this4.props.value[0] && _this4.props.value[1] ? (0, _i18nInterpolation.default)(locale.datepicker.selectedDateRange, {
+        _this4.props.value.length > 1 ? (0, _i18nInterpolation.default)(locale.datepicker.selectedDateRange, {
           startDate: _this4.formatDisplayValue(_this4.props.value[0]),
           endDate: _this4.formatDisplayValue( // $FlowFixMe
           _this4.props.value[1])

package/datepicker/datepicker.js.flow

@@ -19,7 +19,7 @@ import {
   StyledStartDate,
   StyledEndDate,
 } from './styled-components.js';
-import type {DatepickerPropsT, DateValueT} from './types.js';
+import type {DatepickerPropsT} from './types.js';
 import DateHelpers from './utils/date-helpers.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import type {LocaleT} from '../locale/types.js';
@@ -38,7 +38,6 @@ const combineSeparatedInputs = (
     INPUT_DELIMITER,
   );
   if (separatedInput === 'startDate' && prevEndDate) {
-    // TODO(LUKE): use INPUT_DELIMITER below
     inputValue = `${inputValue} – ${prevEndDate}`;
   }
   if (separatedInput === 'endDate') {
@@ -82,18 +81,18 @@ export default class Datepicker<T = Date> extends React.Component<
     };
   }
 
-  onChange: ({date: DateValueT<T>}) => void = data => {
+  onChange: ({date: ?T | Array<T>}) => void = data => {
     let isOpen = false;
     let isPseudoFocused = false;
     let calendarFocused = false;
     let nextDate = data.date;
 
     if (Array.isArray(nextDate) && this.props.range) {
-      if (!nextDate[0] || !nextDate[1]) {
+      if (nextDate.length < 2) {
         isOpen = true;
         isPseudoFocused = true;
         calendarFocused = null;
-      } else if (nextDate[0] && nextDate[1]) {
+      } else if (nextDate.length === 2) {
         const [start, end] = nextDate;
         if (this.dateHelpers.isAfter(start, end)) {
           nextDate = [start, start];
@@ -144,36 +143,25 @@ export default class Datepicker<T = Date> extends React.Component<
     this.props.onChange && this.props.onChange({date: nextDate});
   };
 
-  getNullDatePlaceholder(formatString: string) {
-    return (this.getMask() || formatString)
-      .split('–')[0]
-      .replace(/[0-9]|[a-z]/g, ' ');
-  }
-
-  formatDate(date: DateValueT<T>, formatString: string) {
-    const format = (date: T) => {
+  formatDate(date: ?T | Array<T>, formatString: string) {
+    const format = date => {
       if (formatString === DEFAULT_DATE_FORMAT) {
         return this.dateHelpers.format(date, 'slashDate', this.props.locale);
       }
       return this.dateHelpers.formatDate(date, formatString, this.props.locale);
     };
-
     if (!date) {
       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 => (day ? format(day) : '')).join(INPUT_DELIMITER);
+      return date.map(day => format(day)).join(INPUT_DELIMITER);
     } else {
       return format(date);
     }
   }
 
-  formatDisplayValue: (DateValueT<T>) => string = (date: DateValueT<T>) => {
+  formatDisplayValue: (?T | Array<T>) => string = (date: ?T | Array<T>) => {
     const {displayValueAtRangeIndex, formatDisplayValue, range} = this.props;
     const formatString = this.normalizeDashes(this.props.formatString);
 
@@ -253,7 +241,6 @@ export default class Datepicker<T = Date> extends React.Component<
     }
 
     if (range && !separateRangeInputs) {
-      // TODO(LUKE): use INPUT_DELIMITER below
       return '9999/99/99 – 9999/99/99';
     }
 
@@ -613,9 +600,7 @@ export default class Datepicker<T = Date> extends React.Component<
             >
               {// No date selected
               !this.props.value ||
-              (Array.isArray(this.props.value) &&
-                !this.props.value[0] &&
-                !this.props.value[1])
+              (Array.isArray(this.props.value) && !this.props.value.length)
                 ? ''
                 : // Date selected in a non-range picker
                 !Array.isArray(this.props.value)
@@ -623,7 +608,7 @@ export default class Datepicker<T = Date> extends React.Component<
                     date: this.state.inputValue || '',
                   })
                 : // Start and end dates are selected in a range picker
-                this.props.value[0] && this.props.value[1]
+                this.props.value.length > 1
                 ? getInterpolatedString(locale.datepicker.selectedDateRange, {
                     startDate: this.formatDisplayValue(this.props.value[0]),
                     endDate: this.formatDisplayValue(