baseui 10.12.1 → 11.0.2

package/es/checkbox/index.js

@@ -8,5 +8,5 @@ export { default as StatefulCheckbox } from './stateful-checkbox.js';
 export { default as StatefulContainer } from './stateful-checkbox-container.js';
 export { default as Checkbox } from './checkbox.js'; // Styled elements
 
-export { Root as StyledRoot, Checkmark as StyledCheckmark, Label as StyledLabel, Input as StyledInput, Toggle as StyledToggle, ToggleInner as StyledToggleInner, ToggleTrack as StyledToggleTrack } from './styled-components.js';
+export { Root as StyledRoot, Checkmark as StyledCheckmark, Label as StyledLabel, Input as StyledInput, Toggle as StyledToggle, ToggleTrack as StyledToggleTrack } from './styled-components.js';
 export { STATE_TYPE, STYLE_TYPE, LABEL_PLACEMENT } from './constants.js'; // Flow

package/es/checkbox/styled-components.js

@@ -4,14 +4,12 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import { styled, expandBorderStyles } from '../styles/index.js';
-import { STYLE_TYPE } from './constants.js';
+import { styled } from '../styles/index.js';
 
 function getBorderColor(props) {
   const {
     $disabled,
     $checked,
-    $isError,
     $error,
     $isIndeterminate,
     $theme,
@@ -25,8 +23,8 @@ function getBorderColor(props) {
     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 {
@@ -82,29 +80,22 @@ function getBackgroundColor(props) {
     $disabled,
     $checked,
     $isIndeterminate,
-    $isError,
     $error,
     $isHovered,
     $isActive,
-    $theme,
-    $checkmarkType
+    $theme
   } = props;
-  const isToggle = $checkmarkType === STYLE_TYPE.toggle;
   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) {
@@ -112,7 +103,7 @@ function getBackgroundColor(props) {
     } else {
       return colors.tickFillErrorSelected;
     }
-  } else if ($error || $isError) {
+  } else if ($error) {
     if ($isActive) {
       return colors.tickFillErrorHoverActive;
     } else if ($isHovered) {
@@ -130,11 +121,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;
     }
   }
 }
@@ -168,7 +159,6 @@ export const Checkmark = styled('span', props => {
   const {
     $checked,
     $disabled,
-    $isError,
     $error,
     $isIndeterminate,
     $theme,
@@ -178,7 +168,7 @@ export const Checkmark = styled('span', props => {
     sizing,
     animation
   } = $theme;
-  const tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $isError || $error ? $theme.colors.tickMarkFillError : $theme.colors.tickMarkFill;
+  const tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $error ? $theme.colors.tickMarkFillError : $theme.colors.tickMarkFill;
   const indeterminate = encodeURIComponent(`
     <svg width="14" height="4" viewBox="0 0 14 4" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M14 0.5H0V3.5H14V0.5Z" fill="${tickColor}"/>
@@ -234,14 +224,12 @@ export const Checkmark = styled('span', props => {
 Checkmark.displayName = "Checkmark";
 export const Label = styled('div', props => {
   const {
-    $theme,
-    $checkmarkType
+    $theme
   } = props;
   const {
     typography
   } = $theme;
   return {
-    flex: $checkmarkType === STYLE_TYPE.toggle ? 'auto' : null,
     verticalAlign: 'middle',
     ...getLabelPadding(props),
     color: getLabelColor(props),
@@ -262,137 +250,54 @@ export const Input = styled('input', {
 });
 Input.displayName = "Input";
 export const Toggle = styled('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
-    };
-  }
+  let backgroundColor = props.$theme.colors.toggleFill;
 
-  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}`
-    };
+  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;
   }
 
-  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}`
+  };
 });
 Toggle.displayName = "Toggle";
-export const ToggleInner = styled('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()
-    };
-  }
-
-  if (props.$checkmarkType === STYLE_TYPE.toggle_round) {
-    return {};
-  }
-
-  return {};
-});
-ToggleInner.displayName = "ToggleInner";
 export const ToggleTrack = styled('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;
-    }
+  let backgroundColor = props.$theme.colors.toggleTrackFill;
 
-    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
-    };
+  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
+  };
 });
 ToggleTrack.displayName = "ToggleTrack";

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

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

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

package/es/data-table/column.js

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

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

@@ -396,7 +396,7 @@ const InnerTableElement = /*#__PURE__*/React.forwardRef((props, ref) => {
         row: ctx.rows[ctx.rowHighlightIndex - 1]
       }),
       size: BUTTON_SIZES.compact,
-      kind: BUTTON_KINDS.minimal,
+      kind: BUTTON_KINDS.tertiary,
       shape: BUTTON_SHAPES.round,
       overrides: {
         BaseButton: {
@@ -459,7 +459,8 @@ export function DataTable({
   selectedRowIds,
   sortIndex,
   sortDirection,
-  textQuery = ''
+  textQuery = '',
+  controlRef
 }) {
   const [, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
@@ -596,6 +597,9 @@ 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/es/data-table/header-cell.js

@@ -69,6 +69,9 @@ const HeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     onFocus: handleFocus,
     onBlur: handleBlur
   }, props.isSelectable && /*#__PURE__*/React.createElement("span", {
+    className: css({
+      paddingRight: theme.sizing.scale300
+    }),
     ref: checkboxRef
   }, /*#__PURE__*/React.createElement(Checkbox, {
     onChange: e => {

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

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

package/es/datepicker/calendar.js

@@ -252,24 +252,35 @@ export default class Calendar extends React.Component {
       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
+      let updatedDate = data.date; // 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];
+        // We'll need to update the date in time values of internal state
+        const newTimeState = [...this.state.time];
+        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];
+        } // Update the date in time values of internal state
+
+
+        this.setState({
+          time: newTimeState
         });
       } 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
+        const newTimeState = this.dateHelpers.applyDateToTime(this.state.time[0], data.date);
+        updatedDate = newTimeState; // Update the date in time values of internal state
 
+        this.setState({
+          time: [newTimeState]
+        });
+      }
 
-      this.setState({
-        time: newTimeState
-      });
       onChange({
         date: updatedDate
       });
@@ -289,14 +300,14 @@ export default class Calendar extends React.Component {
 
       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
+          date: [dates[0], dates[1]]
         });
       } else {
         const date = this.dateHelpers.applyTimeToDate(this.props.value, time);
@@ -355,7 +366,9 @@ export default class Calendar extends 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-${i}`

package/es/datepicker/constants.js

@@ -25,4 +25,12 @@ export const DEFAULT_MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 export const DENSITY = {
   high: 'high',
   default: 'default'
+};
+export const INPUT_ROLE = {
+  startDate: 'startDate',
+  endDate: 'endDate'
+};
+export const RANGED_CALENDAR_BEHAVIOR = {
+  default: 'default',
+  locked: 'locked'
 };