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

package/datepicker/day.js

@@ -99,21 +99,12 @@ var Day = /*#__PURE__*/function (_React$Component) {
       var date;
 
       if (Array.isArray(value) && range) {
-        var _value = _slicedToArray(value, 2),
-            start = _value[0],
-            end = _value[1]; // Starting a new range
-
-
-        if (!start && !end || start && end) {
-          date = [selectedDate, null]; // EndDate needs a StartDate, SelectedDate comes before EndDate
-        } else if (!start && end && _this.dateHelpers.isAfter(end, selectedDate)) {
-          date = [selectedDate, end]; // EndDate needs a StartDate, but SelectedDate comes after EndDate
-        } else if (!start && end && _this.dateHelpers.isAfter(selectedDate, end)) {
-          date = [end, selectedDate]; // StartDate needs an EndDate, SelectedDate comes after StartDate
-        } else if (start && !end && _this.dateHelpers.isAfter(selectedDate, start)) {
-          date = [start, selectedDate];
+        if (!value.length || value.length > 1) {
+          date = [selectedDate];
+        } else if (_this.dateHelpers.isAfter(selectedDate, value[0])) {
+          date = [value[0], selectedDate];
         } else {
-          date = [selectedDate, start];
+          date = [selectedDate, value[0]];
         }
       } else {
         date = selectedDate;
@@ -307,18 +298,13 @@ var Day = /*#__PURE__*/function (_React$Component) {
       var date = this.getDateProp();
       var value = this.props.value;
 
-      if (Array.isArray(value)) {
-        var _value2 = _slicedToArray(value, 2),
-            start = _value2[0],
-            end = _value2[1];
+      if (Array.isArray(value) && !value[0] && !value[1]) {
+        return false;
+      } // fix flow by passing a specific arg type and remove 'Array.isArray(value)'
 
-        if (!start && !end) {
-          return false;
-        }
 
-        if (start && end) {
-          return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(start), this.clampToDayStart(end));
-        }
+      if (Array.isArray(value) && value.length > 1) {
+        return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(value[0]), this.clampToDayStart(value[1]));
       }
     } // calculated for range case only
 
@@ -330,29 +316,16 @@ var Day = /*#__PURE__*/function (_React$Component) {
           value = _this$props4.value,
           highlightedDate = _this$props4.highlightedDate;
 
-      if (Array.isArray(value)) {
-        var _value3 = _slicedToArray(value, 2),
-            start = _value3[0],
-            end = _value3[1];
-
-        if (!start && !end) {
-          return false;
-        }
+      if (Array.isArray(value) && !value[0] && !value[1]) {
+        return false;
+      } // fix flow by passing a specific arg type and remove 'Array.isArray(value)'
 
-        if (highlightedDate && start && !end) {
-          if (this.dateHelpers.isAfter(highlightedDate, start)) {
-            return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(start), this.clampToDayStart(highlightedDate));
-          } else {
-            return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(highlightedDate), this.clampToDayStart(start));
-          }
-        }
 
-        if (highlightedDate && !start && end) {
-          if (this.dateHelpers.isAfter(highlightedDate, end)) {
-            return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(end), this.clampToDayStart(highlightedDate));
-          } else {
-            return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(highlightedDate), this.clampToDayStart(end));
-          }
+      if (Array.isArray(value) && highlightedDate && value[0] && !value[1]) {
+        if (this.dateHelpers.isAfter(highlightedDate, value[0])) {
+          return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(value[0]), this.clampToDayStart(highlightedDate));
+        } else {
+          return this.dateHelpers.isDayInRange(this.clampToDayStart(date), this.clampToDayStart(highlightedDate), this.clampToDayStart(value[0]));
         }
       }
     }
@@ -364,22 +337,21 @@ var Day = /*#__PURE__*/function (_React$Component) {
           value = _this$props5.value,
           highlightedDate = _this$props5.highlightedDate,
           range = _this$props5.range,
-          highlighted = _this$props5.highlighted,
-          peekNextMonth = _this$props5.peekNextMonth;
+          highlighted = _this$props5.highlighted;
       var $isHighlighted = highlighted;
       var $selected = this.isSelected();
-      var $hasRangeHighlighted = !!(Array.isArray(value) && range && highlightedDate && (value[0] && !value[1] && !this.dateHelpers.isSameDay(value[0], highlightedDate) || !value[0] && value[1] && !this.dateHelpers.isSameDay(value[1], highlightedDate)));
-      var $outsideMonth = !peekNextMonth && this.isOutsideMonth();
-      var $outsideMonthWithinRange = !!(Array.isArray(value) && range && $outsideMonth && !peekNextMonth && this.isOutsideOfMonthButWithinRange());
+      var $hasRangeHighlighted = !!(Array.isArray(value) && range && value.length === 1 && highlightedDate && !this.dateHelpers.isSameDay(value[0], highlightedDate));
+      var $outsideMonth = !this.props.peekNextMonth && this.isOutsideMonth();
+      var $outsideMonthWithinRange = !!(Array.isArray(value) && range && $outsideMonth && !this.props.peekNextMonth && this.isOutsideOfMonthButWithinRange());
       return {
         $date: date,
         $density: this.props.density,
         $disabled: this.props.disabled,
-        $endDate: Array.isArray(value) && !!(value[0] && value[1]) && range && $selected && this.dateHelpers.isSameDay(date, value[1]) || false,
+        $endDate: Array.isArray(value) && this.props.range && $selected && this.dateHelpers.isSameDay(date, value[1]) || false,
         $hasDateLabel: !!this.props.dateLabel,
         $hasRangeHighlighted: $hasRangeHighlighted,
-        $hasRangeOnRight: Array.isArray(value) && $hasRangeHighlighted && highlightedDate && (value[0] && this.dateHelpers.isAfter(highlightedDate, value[0]) || value[1] && this.dateHelpers.isAfter(highlightedDate, value[1])),
-        $hasRangeSelected: Array.isArray(value) ? !!(value[0] && value[1]) : false,
+        $hasRangeOnRight: Array.isArray(value) && $hasRangeHighlighted && highlightedDate && value[0] && this.dateHelpers.isAfter(highlightedDate, value[0]),
+        $hasRangeSelected: Array.isArray(value) ? value.length === 2 : false,
         $highlightedDate: highlightedDate,
         $isHighlighted: $isHighlighted,
         $isHovered: this.state.isHovered,
@@ -389,12 +361,12 @@ var Day = /*#__PURE__*/function (_React$Component) {
         $month: this.getMonthProp(),
         $outsideMonth: $outsideMonth,
         $outsideMonthWithinRange: $outsideMonthWithinRange,
-        $peekNextMonth: peekNextMonth,
-        $pseudoHighlighted: range && !$isHighlighted && !$selected ? this.isPseudoHighlighted() : false,
-        $pseudoSelected: range && !$selected ? this.isPseudoSelected() : false,
-        $range: range,
+        $peekNextMonth: this.props.peekNextMonth,
+        $pseudoHighlighted: this.props.range && !$isHighlighted && !$selected ? this.isPseudoHighlighted() : false,
+        $pseudoSelected: this.props.range && !$selected ? this.isPseudoSelected() : false,
+        $range: this.props.range,
         $selected: $selected,
-        $startDate: Array.isArray(value) && value[0] && value[1] && range && $selected ? this.dateHelpers.isSameDay(date, value[0]) : false
+        $startDate: Array.isArray(this.props.value) && this.props.value.length > 1 && this.props.range && $selected ? this.dateHelpers.isSameDay(date, this.props.value[0]) : false
       };
     }
   }, {

package/datepicker/day.js.flow

@@ -87,34 +87,16 @@ export default class Day<T = Date> extends React.Component<
     const {range, value} = this.props;
     let date;
     if (Array.isArray(value) && range) {
-      const [start, end] = value;
-
-      // Starting a new range
-      if ((!start && !end) || (start && end)) {
-        date = [selectedDate, null];
-
-        // EndDate needs a StartDate, SelectedDate comes before EndDate
-      } else if (!start && end && this.dateHelpers.isAfter(end, selectedDate)) {
-        date = [selectedDate, end];
-
-        // EndDate needs a StartDate, but SelectedDate comes after EndDate
-      } else if (!start && end && this.dateHelpers.isAfter(selectedDate, end)) {
-        date = [end, selectedDate];
-
-        // StartDate needs an EndDate, SelectedDate comes after StartDate
-      } else if (
-        start &&
-        !end &&
-        this.dateHelpers.isAfter(selectedDate, start)
-      ) {
-        date = [start, selectedDate];
+      if (!value.length || value.length > 1) {
+        date = [selectedDate];
+      } else if (this.dateHelpers.isAfter(selectedDate, value[0])) {
+        date = [value[0], selectedDate];
       } else {
-        date = [selectedDate, start];
+        date = [selectedDate, value[0]];
       }
     } else {
       date = selectedDate;
     }
-
     this.props.onSelect({date});
   };
 
@@ -248,21 +230,16 @@ export default class Day<T = Date> extends React.Component<
   isPseudoSelected() {
     const date = this.getDateProp();
     const {value} = this.props;
-
-    if (Array.isArray(value)) {
-      const [start, end] = value;
-
-      if (!start && !end) {
-        return false;
-      }
-
-      if (start && end) {
-        return this.dateHelpers.isDayInRange(
-          this.clampToDayStart(date),
-          this.clampToDayStart(start),
-          this.clampToDayStart(end),
-        );
-      }
+    if (Array.isArray(value) && !value[0] && !value[1]) {
+      return false;
+    }
+    // fix flow by passing a specific arg type and remove 'Array.isArray(value)'
+    if (Array.isArray(value) && value.length > 1) {
+      return this.dateHelpers.isDayInRange(
+        this.clampToDayStart(date),
+        this.clampToDayStart(value[0]),
+        this.clampToDayStart(value[1]),
+      );
     }
   }
 
@@ -270,76 +247,46 @@ export default class Day<T = Date> extends React.Component<
   isPseudoHighlighted() {
     const date = this.getDateProp();
     const {value, highlightedDate} = this.props;
+    if (Array.isArray(value) && !value[0] && !value[1]) {
+      return false;
+    }
 
-    if (Array.isArray(value)) {
-      const [start, end] = value;
-
-      if (!start && !end) {
-        return false;
-      }
-
-      if (highlightedDate && start && !end) {
-        if (this.dateHelpers.isAfter(highlightedDate, start)) {
-          return this.dateHelpers.isDayInRange(
-            this.clampToDayStart(date),
-            this.clampToDayStart(start),
-            this.clampToDayStart(highlightedDate),
-          );
-        } else {
-          return this.dateHelpers.isDayInRange(
-            this.clampToDayStart(date),
-            this.clampToDayStart(highlightedDate),
-            this.clampToDayStart(start),
-          );
-        }
-      }
-
-      if (highlightedDate && !start && end) {
-        if (this.dateHelpers.isAfter(highlightedDate, end)) {
-          return this.dateHelpers.isDayInRange(
-            this.clampToDayStart(date),
-            this.clampToDayStart(end),
-            this.clampToDayStart(highlightedDate),
-          );
-        } else {
-          return this.dateHelpers.isDayInRange(
-            this.clampToDayStart(date),
-            this.clampToDayStart(highlightedDate),
-            this.clampToDayStart(end),
-          );
-        }
+    // fix flow by passing a specific arg type and remove 'Array.isArray(value)'
+    if (Array.isArray(value) && highlightedDate && value[0] && !value[1]) {
+      if (this.dateHelpers.isAfter(highlightedDate, value[0])) {
+        return this.dateHelpers.isDayInRange(
+          this.clampToDayStart(date),
+          this.clampToDayStart(value[0]),
+          this.clampToDayStart(highlightedDate),
+        );
+      } else {
+        return this.dateHelpers.isDayInRange(
+          this.clampToDayStart(date),
+          this.clampToDayStart(highlightedDate),
+          this.clampToDayStart(value[0]),
+        );
       }
     }
   }
 
   getSharedProps() {
     const date = this.getDateProp();
-    const {
-      value,
-      highlightedDate,
-      range,
-      highlighted,
-      peekNextMonth,
-    } = this.props;
+    const {value, highlightedDate, range, highlighted} = this.props;
     const $isHighlighted = highlighted;
     const $selected = this.isSelected();
     const $hasRangeHighlighted = !!(
       Array.isArray(value) &&
       range &&
+      value.length === 1 &&
       highlightedDate &&
-      ((value[0] &&
-        !value[1] &&
-        !this.dateHelpers.isSameDay(value[0], highlightedDate)) ||
-        (!value[0] &&
-          value[1] &&
-          !this.dateHelpers.isSameDay(value[1], highlightedDate)))
+      !this.dateHelpers.isSameDay(value[0], highlightedDate)
     );
-    const $outsideMonth = !peekNextMonth && this.isOutsideMonth();
+    const $outsideMonth = !this.props.peekNextMonth && this.isOutsideMonth();
     const $outsideMonthWithinRange = !!(
       Array.isArray(value) &&
       range &&
       $outsideMonth &&
-      !peekNextMonth &&
+      !this.props.peekNextMonth &&
       this.isOutsideOfMonthButWithinRange()
     );
     return {
@@ -348,8 +295,7 @@ export default class Day<T = Date> extends React.Component<
       $disabled: this.props.disabled,
       $endDate:
         (Array.isArray(value) &&
-          !!(value[0] && value[1]) &&
-          range &&
+          this.props.range &&
           $selected &&
           this.dateHelpers.isSameDay(date, value[1])) ||
         false,
@@ -359,11 +305,9 @@ export default class Day<T = Date> extends React.Component<
         Array.isArray(value) &&
         $hasRangeHighlighted &&
         highlightedDate &&
-        ((value[0] && this.dateHelpers.isAfter(highlightedDate, value[0])) ||
-          (value[1] && this.dateHelpers.isAfter(highlightedDate, value[1]))),
-      $hasRangeSelected: Array.isArray(value)
-        ? !!(value[0] && value[1])
-        : false,
+        value[0] &&
+        this.dateHelpers.isAfter(highlightedDate, value[0]),
+      $hasRangeSelected: Array.isArray(value) ? value.length === 2 : false,
       $highlightedDate: highlightedDate,
       $isHighlighted,
       $isHovered: this.state.isHovered,
@@ -373,17 +317,21 @@ export default class Day<T = Date> extends React.Component<
       $month: this.getMonthProp(),
       $outsideMonth,
       $outsideMonthWithinRange,
-      $peekNextMonth: peekNextMonth,
+      $peekNextMonth: this.props.peekNextMonth,
       $pseudoHighlighted:
-        range && !$isHighlighted && !$selected
+        this.props.range && !$isHighlighted && !$selected
           ? this.isPseudoHighlighted()
           : false,
-      $pseudoSelected: range && !$selected ? this.isPseudoSelected() : false,
-      $range: range,
+      $pseudoSelected:
+        this.props.range && !$selected ? this.isPseudoSelected() : false,
+      $range: this.props.range,
       $selected,
       $startDate:
-        Array.isArray(value) && value[0] && value[1] && range && $selected
-          ? this.dateHelpers.isSameDay(date, value[0])
+        Array.isArray(this.props.value) &&
+        this.props.value.length > 1 &&
+        this.props.range &&
+        $selected
+          ? this.dateHelpers.isSameDay(date, this.props.value[0])
           : false,
     };
   }

package/datepicker/stateful-container.js.flow

@@ -14,7 +14,6 @@ import type {
   StatefulContainerPropsT,
   StateChangeTypeT,
   StateReducerT,
-  DateValueT,
 } from './types.js';
 
 type InputProps<T> = CalendarPropsT<T> | DatepickerPropsT<T>;
@@ -37,7 +36,7 @@ class StatefulContainer<T = Date> extends React.Component<
     this.state = {value, ...props.initialState};
   }
 
-  onChange: ({date: DateValueT<T>}) => mixed = data => {
+  onChange: ({date: ?T | Array<T>}) => mixed = data => {
     const {date} = data;
     this.internalSetState(STATE_CHANGE_TYPE.change, {value: date});
     if (typeof this.props.onChange === 'function') {

package/datepicker/types.js.flow

@@ -21,9 +21,7 @@ import type {OptionT} from '../select/index.js';
 // eslint-disable-next-line flowtype/no-weak-types
 type LocaleT = any; // see https://github.com/date-fns/date-fns/blob/master/src/locale/index.js.flow
 
-export type DateValueT<T> = ?T | Array<?T>;
-
-type onChangeT<T> = ({date: DateValueT<T>}) => mixed;
+type onChangeT<T> = ({date: ?T | Array<T>}) => mixed;
 
 export type DensityT = $Keys<typeof DENSITY>;
 
@@ -84,13 +82,13 @@ export type DayPropsT<T = Date> = {
   month: ?number,
   onBlur: ({event: Event, date: T}) => mixed,
   onFocus: ({event: Event, date: T}) => mixed,
-  onSelect: ({date: DateValueT<T>}) => mixed,
+  onSelect: ({date: ?T | Array<T>}) => mixed,
   onClick: ({event: Event, date: T}) => mixed,
   onMouseOver: ({event: Event, date: T}) => mixed,
   onMouseLeave: ({event: Event, date: T}) => mixed,
   overrides?: DatepickerOverridesT,
   peekNextMonth: boolean,
-  value: DateValueT<T>,
+  value: ?T | Array<T>,
 };
 
 export type DayStateT = {
@@ -122,7 +120,7 @@ export type WeekPropsT<T = Date> = {
   onChange?: onChangeT<T>,
   overrides?: DatepickerOverridesT,
   peekNextMonth: boolean,
-  value: DateValueT<T>,
+  value: ?T | Array<T>,
 };
 
 export type MonthPropsT<T = Date> = WeekPropsT<T> & {
@@ -135,7 +133,7 @@ export type CalendarInternalState<T = Date> = {
   date: T,
   quickSelectId: ?string,
   rootElement: ?HTMLElement,
-  time: Array<?T>,
+  time: Array<T>,
 };
 
 export type CalendarPropsT<T = Date> = {
@@ -196,7 +194,7 @@ export type CalendarPropsT<T = Date> = {
   /** Defines if tabbing inside the calendar is circled within it. */
   trapTabbing?: boolean,
   /** Currently selected date. */
-  value?: DateValueT<T>,
+  value?: ?T | Array<T>,
   fixedHeight?: boolean,
 };
 
@@ -224,7 +222,7 @@ export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
   required?: boolean,
   clearable?: boolean,
   displayValueAtRangeIndex?: number,
-  formatDisplayValue?: (date: DateValueT<T>, formatString: string) => string,
+  formatDisplayValue?: (date: ?T | Array<T>, formatString: string) => string,
   formatString: string,
   /** Where to mount the popover */
   mountNode?: HTMLElement,
@@ -270,7 +268,7 @@ export type StateChangeTypeT = ?$Values<typeof STATE_CHANGE_TYPE>;
 
 export type ContainerStateT<T = Date> = {
   /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */
-  value?: DateValueT<T>,
+  value?: ?T | Array<T>,
 };
 
 export type NavigationContainerStateT<T = Date> = {
@@ -326,7 +324,7 @@ export type NavigationContainerPropsT<T = Date> = {
   /** Event handler that is called when the current rendered year is changed. */
   onYearChange?: ({date: T}) => mixed,
   /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */
-  value?: DateValueT<T>,
+  value?: ?T | Array<T>,
   stateReducer: NavigationContainerStateReducerT<T>,
   trapTabbing: boolean,
 };

package/drawer/drawer.js

@@ -340,7 +340,9 @@ var Drawer = /*#__PURE__*/function (_React$Component) {
 
       var sharedProps = this.getSharedProps();
       return /*#__PURE__*/React.createElement(_index.LocaleContext.Consumer, null, function (locale) {
-        return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
+        return /*#__PURE__*/React.createElement(_reactFocusLock.default // Allow focus to escape when UI is within an iframe
+        , {
+          crossFrame: false,
           returnFocus: true,
           autoFocus: autoFocus,
           noFocusGuards: true

package/drawer/drawer.js.flow

@@ -253,7 +253,13 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
       <LocaleContext.Consumer>
         {locale => {
           return (
-            <FocusLock returnFocus autoFocus={autoFocus} noFocusGuards={true}>
+            <FocusLock
+              // Allow focus to escape when UI is within an iframe
+              crossFrame={false}
+              returnFocus
+              autoFocus={autoFocus}
+              noFocusGuards={true}
+            >
               <Root
                 data-baseweb="drawer"
                 ref={this.getRef('Root')}

package/es/a11y/a11y.js

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 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';
 
@@ -95,7 +95,7 @@ function Violation(props) {
     ref: setPopper,
     $top: `${offset.top}px` || '0px',
     $left: `${offset.left}px` || '0px'
-  }, /*#__PURE__*/React.createElement(Caption1, null, props.target), props.violations.map((violation, index) => /*#__PURE__*/React.createElement(Paragraph3, {
+  }, /*#__PURE__*/React.createElement(ParagraphXSmall, null, props.target), props.violations.map((violation, index) => /*#__PURE__*/React.createElement(ParagraphSmall, {
     key: index
   }, violation.description)))));
 }

package/es/button/styled-components.js

@@ -39,8 +39,12 @@ export const BaseButton = styled('button', ({
   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,
@@ -272,6 +276,32 @@ function getFontStyles({
   }
 }
 
+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,

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

@@ -13,7 +13,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';
 import { LocaleContext } from '../locale/index.js';
@@ -139,7 +139,7 @@ export function CategoricalFilter(props) {
       overflowY: 'auto',
       marginTop: theme.sizing.scale600
     })
-  }, !filteredCategories.length && /*#__PURE__*/React.createElement(Label3, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map((category, i) => /*#__PURE__*/React.createElement("div", {
+  }, !filteredCategories.length && /*#__PURE__*/React.createElement(LabelSmall, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map((category, i) => /*#__PURE__*/React.createElement("div", {
     className: checkboxStyles,
     key: i
   }, /*#__PURE__*/React.createElement(Checkbox, {

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) => d ? applyDateToTime(rangeDates[i], d) : null);
+        const nextDates = date.map((d, i) => applyDateToTime(rangeDates[i], d));
         setRangeDates(nextDates);
       }
     },

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

@@ -11,7 +11,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';
 import FilterShell from './filter-shell.js';
@@ -402,7 +402,7 @@ function NumericalFilter(props) {
       marginLeft: theme.sizing.scale300,
       marginRight: theme.sizing.scale300
     })
-  }, /*#__PURE__*/React.createElement(Paragraph4, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(Paragraph4, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ParagraphXSmall, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(ParagraphXSmall, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
     className: css({
       display: 'flex',
       justifyContent: 'space-between'

package/es/datepicker/calendar.js

@@ -257,16 +257,10 @@ 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)) {
-        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], data.date);
         updatedDate = newTimeState[0];
@@ -295,14 +289,14 @@ export default class Calendar extends React.Component {
 
       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]]
+          date: dates
         });
       } else {
         const date = this.dateHelpers.applyTimeToDate(this.props.value, time);