baseui 10.12.0 → 11.0.1

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: {
@@ -555,7 +555,8 @@ function DataTable(_ref2) {
       sortIndex = _ref2.sortIndex,
       sortDirection = _ref2.sortDirection,
       _ref2$textQuery = _ref2.textQuery,
-      textQuery = _ref2$textQuery === void 0 ? '' : _ref2$textQuery;
+      textQuery = _ref2$textQuery === void 0 ? '' : _ref2$textQuery,
+      controlRef = _ref2.controlRef;
 
   var _useStyletron13 = (0, _index2.useStyletron)(),
       _useStyletron14 = _slicedToArray(_useStyletron13, 2),
@@ -754,6 +755,13 @@ function DataTable(_ref2) {
 
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
+  React.useImperativeHandle(controlRef, function () {
+    return {
+      getRows: function getRows() {
+        return rows;
+      }
+    };
+  }, [rows]);
 
   var _React$useState19 = React.useState(0),
       _React$useState20 = _slicedToArray(_React$useState19, 2),

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: {
@@ -658,6 +658,7 @@ export function DataTable({
   sortIndex,
   sortDirection,
   textQuery = '',
+  controlRef,
 }: DataTablePropsT) {
   const [, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
@@ -809,6 +810,8 @@ 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/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/data-table/index.d.ts

@@ -34,10 +34,7 @@ export interface SORT_DIRECTIONS {
 }
 export const SORT_DIRECTIONS: SORT_DIRECTIONS;
 
-export type SortDirectionsT =
-  | SORT_DIRECTIONS['ASC']
-  | SORT_DIRECTIONS['DESC']
-  | null;
+export type SortDirectionsT = SORT_DIRECTIONS['ASC'] | SORT_DIRECTIONS['DESC'] | null;
 export type ColumnT = any;
 export type RowT = {
   id: number | string;
@@ -54,12 +51,13 @@ export type BatchActionT = {
   renderIcon?: any;
 };
 
+export interface ImperativeMethods {
+  getRows: () => RowT[];
+}
+
 export type RowActionT = {
   label: string;
-  onClick: (params: {
-    event: React.MouseEvent<HTMLButtonElement>;
-    row: RowT;
-  }) => any;
+  onClick: (params: { event: React.MouseEvent<HTMLButtonElement>; row: RowT }) => any;
   renderIcon: any;
 };
 
@@ -69,4 +67,5 @@ export type Props = {
   columns: ColumnT[];
   onSelectionChange?: (rows: RowT[]) => any;
   rows: RowT[];
+  controlRef?: React.Ref<ImperativeMethods>;
 };

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

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

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

@@ -306,6 +306,7 @@ export function StatefulDataTable(props: StatefulDataTablePropsT) {
               sortDirection={sortDirection}
               sortIndex={sortIndex}
               textQuery={textQuery}
+              controlRef={props.controlRef}
             />
           </div>
         </React.Fragment>

package/data-table/types.js.flow

@@ -87,6 +87,13 @@ export type RowActionT = {|
   renderButton?: React.AbstractComponent<{||}>,
 |};
 
+type ImperativeMethodsT = {|
+  getRows: () => RowT[],
+|};
+export type ControlRefT = {
+  current: ImperativeMethodsT | null,
+};
+
 export type StatefulDataTablePropsT = {|
   batchActions?: BatchActionT[],
   columns: ColumnT<>[],
@@ -109,6 +116,7 @@ export type StatefulDataTablePropsT = {|
   rowHeight?: number,
   rowHighlightIndex?: number,
   searchable?: boolean,
+  controlRef?: ControlRefT,
 |};
 
 export type DataTablePropsT = {|

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)