baseui 10.12.1 → 11.0.2

package/datepicker/types.js.flow

@@ -9,7 +9,13 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import type { OverrideT } from '../helpers/overrides.js';
 import type { SizeT } from '../input/types.js';
-import { ORIENTATION, STATE_CHANGE_TYPE, DENSITY } from './constants.js';
+import {
+  INPUT_ROLE,
+  ORIENTATION,
+  RANGED_CALENDAR_BEHAVIOR,
+  STATE_CHANGE_TYPE,
+  DENSITY,
+} from './constants.js';
 import type { DateIOAdapter } from './utils/types.js';
 import type {
   TimePickerPropsT as TimePickerPropsTBase,
@@ -21,8 +27,6 @@ import type { OptionT } from '../select/index.js';
 // flowlint-next-line unclear-type:off
 type LocaleT = any; // see https://github.com/date-fns/date-fns/blob/master/src/locale/index.js.flow
 
-type onChangeT<T> = ({ date: ?T | Array<T> }) => mixed;
-
 export type DensityT = $Keys<typeof DENSITY>;
 
 export type DatepickerOverridesT = {
@@ -74,6 +78,8 @@ export type DayPropsT<T = Date> = {
   includeDates: ?Array<T>,
   highlighted: boolean,
   range: boolean,
+  hasLockedBehavior: boolean,
+  selectedInput: InputRoleT,
   focusedCalendar: boolean,
   locale: ?LocaleT,
   maxDate: ?T,
@@ -82,13 +88,13 @@ export type DayPropsT<T = Date> = {
   month: ?number,
   onBlur: ({ event: Event, date: T }) => mixed,
   onFocus: ({ event: Event, date: T }) => mixed,
-  onSelect: ({ date: ?T | Array<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: ?T | Array<T>,
+  value: ?T | $ReadOnlyArray<?T>,
 };
 
 export type DayStateT = {
@@ -117,13 +123,16 @@ export type WeekPropsT<T = Date> = {
   onDayFocus: ({ date: T, event: Event }) => mixed,
   onDayMouseOver: ({ date: T, event: Event }) => mixed,
   onDayMouseLeave: ({ date: T, event: Event }) => mixed,
-  onChange?: onChangeT<T>,
+  onChange?: ({ +date: ?T | Array<?T> }) => mixed,
   overrides?: DatepickerOverridesT,
   peekNextMonth: boolean,
-  value: ?T | Array<T>,
+  value: ?T | $ReadOnlyArray<?T>,
+  hasLockedBehavior: boolean,
+  selectedInput?: InputRoleT,
 };
 
-export type MonthPropsT<T = Date> = WeekPropsT<T> & {
+export type MonthPropsT<T = Date> = {
+  ...WeekPropsT<T>,
   fixedHeight?: boolean,
 };
 
@@ -133,7 +142,7 @@ export type CalendarInternalState<T = Date> = {
   date: T,
   quickSelectId: ?string,
   rootElement: ?HTMLElement,
-  time: Array<T>,
+  time: Array<?T>,
 };
 
 export type CalendarPropsT<T = Date> = {
@@ -157,6 +166,8 @@ export type CalendarPropsT<T = Date> = {
   includeDates?: ?Array<T>,
   /** Defines if a range of dates can be selected. */
   range?: boolean,
+  /** Determines whether startDate and endDate should be updated independently of eachother */
+  hasLockedBehavior?: boolean,
   /** A locale object. See `date-fns` for more details https://github.com/date-fns/date-fns/tree/master/src/locale. */
   locale?: ?LocaleT,
   /** A max date that is selectable. */
@@ -179,7 +190,7 @@ export type CalendarPropsT<T = Date> = {
   /** Event handler that is called when the current rendered month's year is changed. */
   onYearChange?: ({ date: T }) => mixed,
   /** Event handler that is called when a new date is selected. */
-  onChange?: onChangeT<T>,
+  onChange?: ({ +date: ?T | Array<?T> }) => mixed,
   /** Event handler that is called when a selection is made using the quick select menu. */
   onQuickSelectChange?: (option?: QuickSelectOption<T>) => mixed,
   /** Sets the orientation of the calendar when multiple months are displayed */
@@ -194,8 +205,10 @@ export type CalendarPropsT<T = Date> = {
   /** Defines if tabbing inside the calendar is circled within it. */
   trapTabbing?: boolean,
   /** Currently selected date. */
-  value?: ?T | Array<T>,
+  value?: ?T | $ReadOnlyArray<?T>,
   fixedHeight?: boolean,
+  /** Determines whether user clicked startDate or endDate input to trigger calendar open */
+  selectedInput?: InputRoleT,
 };
 
 export type HeaderPropsT<T = Date> = CalendarPropsT<T> & {
@@ -209,7 +222,8 @@ export type QuickSelectOption<T> = {
   endDate?: T,
 };
 
-export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
+export type DatepickerPropsT<T = Date> = {
+  ...CalendarPropsT<T>,
   'aria-label'?: string,
   'aria-labelledby'?: string,
   'aria-describedby'?: ?string,
@@ -222,19 +236,26 @@ export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
   required?: boolean,
   clearable?: boolean,
   displayValueAtRangeIndex?: number,
-  formatDisplayValue?: (date: ?T | Array<T>, formatString: string) => string,
+  formatDisplayValue?: (date: ?T | $ReadOnlyArray<?T>, formatString: string) => string,
   formatString: string,
   /** Where to mount the popover */
   mountNode?: HTMLElement,
+  /** When single picker, fn is always called. When range picker, fn is called when start and end date are selected. */
+  onChange?: ({ +date: ?T | Array<T> }) => mixed,
   /** Called when calendar is closed */
   onClose?: () => mixed,
   /** Called when calendar is opened */
   onOpen?: () => mixed,
+  /** When single picker, fn is always called. When range picker, fn is called when either start or end date changes. */
+  onRangeChange?: ({ +date: ?T | Array<?T> }) => mixed,
   mask?: string | null,
+  /** Determines whether startDate and endDate should be updated independently of eachother */
+  rangedCalendarBehavior?: RangedCalendarBehaviorT,
   /** Determines if startDate and endDate should be separated into two input fields. Ignored if `range` is not true. */
   separateRangeInputs?: boolean,
   startDateLabel?: string,
   endDateLabel?: string,
+  value?: ?T | $ReadOnlyArray<?T>,
 };
 
 export type SharedStylePropsT = {
@@ -260,6 +281,9 @@ export type SharedStylePropsT = {
   $hasRangeHighlighted: ?boolean,
   $hasRangeOnRight: ?boolean,
   $hasRangeSelected: ?boolean,
+  $hasLockedBehavior: boolean,
+  $selectedInput: InputRoleT,
+  $value: Date | Array<Date>,
   $order: ?number,
   $hasDateLabel: ?boolean,
 };
@@ -268,7 +292,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?: ?T | Array<T>,
+  value?: ?T | $ReadOnlyArray<?T>,
 };
 
 export type NavigationContainerStateT<T = Date> = {
@@ -289,46 +313,21 @@ export type StateReducerT<T = Date> = (
   currentState: ContainerStateT<T>
 ) => ContainerStateT<T>;
 
-export type NavigationContainerStateReducerT<T = Date> = (
-  stateType: StateChangeTypeT,
-  nextState: NavigationContainerStateT<T>,
-  currentState: NavigationContainerStateT<T>
-) => NavigationContainerStateT<T>;
-
 export type StatefulContainerPropsT<PropsT, T = Date> = {
   children: (PropsT) => React.Node,
   /** Initial state of an uncontrolled datepicker component. */
   initialState: ContainerStateT<T>,
   /** A state change handler. */
   stateReducer: StateReducerT<T>,
-  /** Event handler that is called when a date/time is selected. */
-  onChange?: onChangeT<T>,
+  /** When single picker, fn is called when date/time is selected. When range picker, fn is called when both start and end are selected. */
+  onChange?: ({ +date: ?T | Array<T> }) => mixed,
+  /** When single picker, fn is called when date/time is selected. When range picker, fn is called when either start or end date changes. */
+  onRangeChange?: ({ +date: ?T | Array<?T> }) => mixed,
   adapter?: DateIOAdapter<T>,
   /** Should the date value be stored as an array or single value. */
   range?: boolean,
 };
 
-// This type is seemingly not used anywhere
-export type NavigationContainerPropsT<T = Date> = {
-  children: (CalendarPropsT<T>) => React.Node,
-  range?: boolean,
-  highlightedDate?: ?Date,
-  /** Day's `mouseover` event handler. */
-  onDayMouseOver: (params: { date: Date, event: Event }) => mixed,
-  /** Day's `mouseleave` event handler. */
-  onDayMouseLeave: (params: { date: Date, event: Event }) => mixed,
-  /** Event handler that is called when a new date is selected. */
-  onChange: onChangeT<T>,
-  /** Event handler that is called when the current rendered month is changed. */
-  onMonthChange?: ({ date: T }) => mixed,
-  /** 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?: ?T | Array<T>,
-  stateReducer: NavigationContainerStateReducerT<T>,
-  trapTabbing: boolean,
-};
-
 export type StatefulDatepickerPropsT<PropsT, T = Date> = $Diff<
   StatefulContainerPropsT<PropsT, T>,
   {
@@ -372,6 +371,10 @@ export type TimezonePickerPropsT = {
   positive?: boolean,
 };
 
+export type InputRoleT = ?$Values<typeof INPUT_ROLE>;
+
+export type RangedCalendarBehaviorT = ?$Values<typeof RANGED_CALENDAR_BEHAVIOR>;
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/datepicker/utils/date-helpers.js

@@ -5,6 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -230,6 +242,24 @@ var DateHelpers = function DateHelpers(_adapter) {
     return false;
   });
 
+  _defineProperty(this, "dateRangeIncludesDates", function (dateRange, dates) {
+    var _dateRange = _slicedToArray(dateRange, 2),
+        startDate = _dateRange[0],
+        endDate = _dateRange[1];
+
+    if (startDate && endDate && Array.isArray(dates) && dates.length) {
+      for (var i = 0; i < dates.length; i++) {
+        var _day = dates[i];
+
+        if (_this.isDayInRange(_day, startDate, endDate)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  });
+
   _defineProperty(this, "subDays", function (date, days) {
     return _this.adapter.addDays(date, days * -1);
   });

package/datepicker/utils/date-helpers.js.flow

@@ -191,6 +191,18 @@ class DateHelpers<T> {
     }
     return false;
   };
+  dateRangeIncludesDates: (Array<?T>, ?Array<T>) => boolean = (dateRange, dates) => {
+    const [startDate, endDate] = dateRange;
+    if (startDate && endDate && Array.isArray(dates) && dates.length) {
+      for (let i = 0; i < dates.length; i++) {
+        const day = dates[i];
+        if (this.isDayInRange(day, startDate, endDate)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
   subDays: (T, number) => T = (date, days) => {
     return this.adapter.addDays(date, days * -1);
   };

package/datepicker/week.js

@@ -114,7 +114,9 @@ var Week = /*#__PURE__*/function (_React$Component) {
             onMouseLeave: _this.props.onDayMouseLeave,
             overrides: _this.props.overrides,
             peekNextMonth: _this.props.peekNextMonth,
-            value: _this.props.value
+            value: _this.props.value,
+            hasLockedBehavior: _this.props.hasLockedBehavior,
+            selectedInput: _this.props.selectedInput
           })
         );
       }));

package/datepicker/week.js.flow

@@ -75,6 +75,8 @@ export default class Week<T = Date> extends React.Component<WeekPropsT<T>> {
             overrides={this.props.overrides}
             peekNextMonth={this.props.peekNextMonth}
             value={this.props.value}
+            hasLockedBehavior={this.props.hasLockedBehavior}
+            selectedInput={this.props.selectedInput}
           />
         );
       })

package/es/accordion/accordion.js

@@ -22,6 +22,8 @@ export default class Accordion extends React.Component {
       expanded: [],
       ...this.props.initialState
     });
+
+    _defineProperty(this, "itemRefs", []);
   }
 
   //flowlint-next-line unclear-type:off
@@ -64,6 +66,50 @@ export default class Accordion extends React.Component {
     typeof onChange === 'function' && onChange(newState);
   }
 
+  handleKeyDown(e) {
+    if (this.props.disabled) {
+      return;
+    }
+
+    const itemRefs = this.itemRefs;
+    const HOME = 36;
+    const END = 35;
+    const ARROW_UP = 38;
+    const ARROW_DOWN = 40;
+
+    if (e.keyCode === HOME) {
+      e.preventDefault();
+      const firstItem = itemRefs[0];
+      firstItem.current && firstItem.current.focus();
+    }
+
+    if (e.keyCode === END) {
+      e.preventDefault();
+      const lastItem = itemRefs[itemRefs.length - 1];
+      lastItem.current && lastItem.current.focus();
+    }
+
+    if (e.keyCode === ARROW_UP) {
+      e.preventDefault();
+      const activeItemIdx = itemRefs.findIndex(item => item.current === document.activeElement);
+
+      if (activeItemIdx > 0) {
+        const prevItem = itemRefs[activeItemIdx - 1];
+        prevItem.current && prevItem.current.focus();
+      }
+    }
+
+    if (e.keyCode === ARROW_DOWN) {
+      e.preventDefault();
+      const activeItemIdx = itemRefs.findIndex(item => item.current === document.activeElement);
+
+      if (activeItemIdx < itemRefs.length - 1) {
+        const nextItem = itemRefs[activeItemIdx + 1];
+        nextItem.current && nextItem.current.focus();
+      }
+    }
+  }
+
   getItems() {
     const {
       expanded
@@ -72,13 +118,14 @@ export default class Accordion extends React.Component {
       accordion,
       disabled,
       children,
-      renderPanelContent,
       renderAll,
       overrides
     } = this.props; // flowlint-next-line unclear-type:off
 
     return React.Children.map(children, (child, index) => {
-      if (!child) return; // If there is no key provided use the panel order as a default key
+      if (!child) return;
+      const itemRef = /*#__PURE__*/React.createRef();
+      this.itemRefs.push(itemRef); // If there is no key provided use the panel order as a default key
 
       const key = child.key || String(index);
       let isExpanded = false;
@@ -91,9 +138,9 @@ export default class Accordion extends React.Component {
 
       const props = {
         key,
+        ref: itemRef,
         expanded: isExpanded || child.props.expanded,
         accordion,
-        renderPanelContent,
         renderAll,
         overrides: child.props.overrides || overrides,
         disabled: child.props.disabled || disabled,
@@ -103,13 +150,6 @@ export default class Accordion extends React.Component {
     });
   }
 
-  componentDidMount() {
-    // TODO(v11)
-    if (process.env.NODE_ENV !== "production" && this.props.renderPanelContent) {
-      console.warn('baseui:Accordion The `renderPanelContent` prop is deprecated. Please update your code to use `renderAll`.');
-    }
-  }
-
   render() {
     const {
       overrides = {}
@@ -121,7 +161,8 @@ export default class Accordion extends React.Component {
     return /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "accordion",
       $disabled: this.props.disabled,
-      $isFocusVisible: false
+      $isFocusVisible: false,
+      onKeyDown: this.handleKeyDown.bind(this)
     }, rootProps), this.getItems());
   }
 
@@ -136,6 +177,5 @@ _defineProperty(Accordion, "defaultProps", {
   onChange: () => {},
   overrides: {},
   renderAll: false,
-  renderPanelContent: false,
   stateReducer: (type, newState) => newState
 });

package/es/accordion/panel.js

@@ -22,9 +22,8 @@ const Panel = ({
   onKeyDown = () => {},
   overrides = {},
   title = '',
-  renderPanelContent = false,
   renderAll = false
-}) => {
+}, ref) => {
   const [localState, setLocalState] = React.useState({
     expanded,
     isFocusVisible: false,
@@ -148,7 +147,8 @@ const Panel = ({
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     onFocus: forkFocus(headerProps, handleFocus),
-    onBlur: forkBlur(headerProps, handleBlur)
+    onBlur: forkBlur(headerProps, handleBlur),
+    ref: ref
   }), title, /*#__PURE__*/React.createElement(ToggleIcon, _extends({
     viewBox: "0 0 24 24",
     title: localState.expanded ? locale.accordion.collapse : locale.accordion.expand,
@@ -174,7 +174,9 @@ const Panel = ({
     ref: _animateRef
   }, sharedProps, contentProps, ariaControls ? {
     id: ariaControls
-  } : {}), localState.expanded || renderAll || renderPanelContent || localState.animationInProgress ? children : null))));
+  } : {}), localState.expanded || renderAll || localState.animationInProgress ? children : null))));
 };
 
-export default Panel;
+const ForwardedPanel = /*#__PURE__*/React.forwardRef(Panel);
+ForwardedPanel.displayName = 'Panel';
+export default ForwardedPanel;

package/es/accordion/stateless-accordion.js

@@ -17,8 +17,7 @@ function StatelessAccordion({
   expanded,
   onChange,
   overrides = {},
-  renderAll,
-  renderPanelContent
+  renderAll
 }) {
   const {
     Root: RootOverrides,
@@ -57,8 +56,7 @@ function StatelessAccordion({
         });
       } : onChange,
       overrides: child.props.overrides || PanelOverrides,
-      renderAll,
-      renderPanelContent
+      renderAll
     });
   }));
 }

package/es/button/constants.js

@@ -7,8 +7,7 @@ LICENSE file in the root directory of this source tree.
 export const KIND = {
   primary: 'primary',
   secondary: 'secondary',
-  tertiary: 'tertiary',
-  minimal: 'minimal'
+  tertiary: 'tertiary'
 };
 export const SHAPE = {
   default: 'default',

package/es/button/styled-components.js

@@ -212,14 +212,6 @@ function getLoadingSpinnerColors({
         };
       }
 
-    case KIND.minimal:
-      {
-        return {
-          foreground: $theme.colors.buttonMinimalSpinnerForeground,
-          background: $theme.colors.buttonMinimalSpinnerBackground
-        };
-      }
-
     case KIND.primary:
     default:
       {
@@ -289,7 +281,7 @@ function getDisabledStyles({
         color: $theme.colors.buttonDisabledActiveText,
         backgroundColor: $theme.colors.buttonDisabledActiveFill
       };
-    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+    } else if ($kind === KIND.tertiary) {
       return {
         backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
         color: $theme.colors.buttonTertiaryDisabledActiveText
@@ -298,7 +290,7 @@ function getDisabledStyles({
   }
 
   return {
-    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    backgroundColor: $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText
   };
 }
@@ -428,25 +420,6 @@ function getColorStyles({
         }
       };
 
-    case KIND.minimal:
-      if ($isSelected) {
-        return {
-          color: $theme.colors.buttonMinimalSelectedText,
-          backgroundColor: $theme.colors.buttonMinimalSelectedFill
-        };
-      }
-
-      return {
-        color: $theme.colors.buttonMinimalText,
-        backgroundColor: $theme.colors.buttonMinimalFill,
-        ':hover': {
-          backgroundColor: $isLoading ? $theme.colors.buttonMinimalActive : $theme.colors.buttonMinimalHover
-        },
-        ':active': {
-          backgroundColor: $theme.colors.buttonMinimalActive
-        }
-      };
-
     default:
       return Object.freeze({});
   }

package/es/checkbox/checkbox.js

@@ -10,7 +10,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { getOverride, getOverrideProps } from '../helpers/overrides.js';
-import { Checkmark as StyledCheckmark, Input as StyledInput, Label as StyledLabel, Root as StyledRoot, Toggle as StyledToggle, ToggleInner as StyledToggleInner, ToggleTrack as StyledToggleTrack } from './styled-components.js';
+import { Checkmark as StyledCheckmark, Input as StyledInput, Label as StyledLabel, Root as StyledRoot, Toggle as StyledToggle, ToggleTrack as StyledToggleTrack } from './styled-components.js';
 import { STYLE_TYPE } from './constants.js';
 import { isFocusVisible } from '../utils/focusVisible.js';
 
@@ -81,10 +81,6 @@ class StatelessCheckbox extends React.Component {
         });
       }
     });
-
-    _defineProperty(this, "isToggle", () => {
-      return this.props.checkmarkType === STYLE_TYPE.toggle || this.props.checkmarkType === STYLE_TYPE.toggle_round;
-    });
   }
 
   componentDidMount() {
@@ -95,31 +91,16 @@ class StatelessCheckbox extends React.Component {
 
     if (autoFocus && inputRef.current) {
       inputRef.current.focus();
-    } // TODO(v11)
-
-
-    if (process.env.NODE_ENV !== "production") {
-      if (this.props.checkmarkType === STYLE_TYPE.toggle) {
-        console.warn("baseui:Checkbox The STYLE_TYPE.toggle value on the 'checkmarkType' prop does not conform to the current base design specification. " + 'Please update your code to STYLE_TYPE.toggle_round. This will be updated automatically in a future major version.');
-      }
-
-      if (this.props.isError) {
-        console.warn('baseui:Checkbox Property "isError" will be removed in the next major version. Use "error" property instead.');
-      }
     }
   }
 
   render() {
-    const {
-      checkmarkType
-    } = this.props;
     const {
       overrides = {},
       onChange,
-      labelPlacement = this.isToggle() ? 'left' : 'right',
+      labelPlacement = this.props.checkmarkType === STYLE_TYPE.toggle ? 'left' : 'right',
       inputRef,
       isIndeterminate,
-      isError,
       error,
       disabled,
       value,
@@ -136,7 +117,6 @@ class StatelessCheckbox extends React.Component {
       Label: LabelOverride,
       Input: InputOverride,
       Toggle: ToggleOverride,
-      ToggleInner: ToggleInnerOverride,
       ToggleTrack: ToggleTrackOverride
     } = overrides;
     const Root = getOverride(RootOverride) || StyledRoot;
@@ -144,7 +124,6 @@ class StatelessCheckbox extends React.Component {
     const Label = getOverride(LabelOverride) || StyledLabel;
     const Input = getOverride(InputOverride) || StyledInput;
     const Toggle = getOverride(ToggleOverride) || StyledToggle;
-    const ToggleInner = getOverride(ToggleInnerOverride) || StyledToggleInner;
     const ToggleTrack = getOverride(ToggleTrackOverride) || StyledToggleTrack;
     const inputEvents = {
       onChange,
@@ -162,17 +141,14 @@ class StatelessCheckbox extends React.Component {
       $isFocusVisible: this.state.isFocusVisible,
       $isHovered: this.state.isHovered,
       $isActive: this.state.isActive,
-      $isError: isError,
       $error: error,
       $checked: checked,
       $isIndeterminate: isIndeterminate,
       $required: required,
       $disabled: disabled,
-      $value: value,
-      $checkmarkType: checkmarkType
-    }; // TODO(v11) - add check for children (#2172)
-
-    const labelComp = /*#__PURE__*/React.createElement(Label, _extends({
+      $value: value
+    };
+    const labelComp = children && /*#__PURE__*/React.createElement(Label, _extends({
       $labelPlacement: labelPlacement
     }, sharedProps, getOverrideProps(LabelOverride)), this.props.containsInteractiveElement ?
     /*#__PURE__*/
@@ -185,7 +161,7 @@ class StatelessCheckbox extends React.Component {
       "data-baseweb": "checkbox",
       title: title || null,
       $labelPlacement: labelPlacement
-    }, sharedProps, mouseEvents, getOverrideProps(RootOverride)), (labelPlacement === 'top' || labelPlacement === 'left') && labelComp, this.isToggle() ? /*#__PURE__*/React.createElement(ToggleTrack, _extends({}, sharedProps, getOverrideProps(ToggleTrackOverride)), /*#__PURE__*/React.createElement(Toggle, _extends({}, sharedProps, getOverrideProps(ToggleOverride)), /*#__PURE__*/React.createElement(ToggleInner, _extends({}, sharedProps, getOverrideProps(ToggleInnerOverride))))) : /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, getOverrideProps(CheckmarkOverride))), /*#__PURE__*/React.createElement(Input, _extends({
+    }, sharedProps, mouseEvents, getOverrideProps(RootOverride)), (labelPlacement === 'top' || labelPlacement === 'left') && labelComp, this.props.checkmarkType === STYLE_TYPE.toggle ? /*#__PURE__*/React.createElement(ToggleTrack, _extends({}, sharedProps, getOverrideProps(ToggleTrackOverride)), /*#__PURE__*/React.createElement(Toggle, _extends({}, sharedProps, getOverrideProps(ToggleOverride)))) : /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, getOverrideProps(CheckmarkOverride))), /*#__PURE__*/React.createElement(Input, _extends({
       value: value,
       name: name,
       checked: checked,
@@ -194,7 +170,7 @@ class StatelessCheckbox extends React.Component {
       "aria-checked": isIndeterminate ? 'mixed' : checked,
       "aria-describedby": this.props['aria-describedby'],
       "aria-errormessage": this.props['aria-errormessage'],
-      "aria-invalid": error || isError || null,
+      "aria-invalid": error || null,
       "aria-required": required || null,
       disabled: disabled,
       type: type,
@@ -215,7 +191,6 @@ _defineProperty(StatelessCheckbox, "defaultProps", {
   autoFocus: false,
   isIndeterminate: false,
   inputRef: /*#__PURE__*/React.createRef(),
-  isError: false,
   error: false,
   type: 'checkbox',
   checkmarkType: STYLE_TYPE.default,

package/es/checkbox/constants.js

@@ -12,7 +12,8 @@ export const STATE_TYPE = {
 export const STYLE_TYPE = Object.freeze({
   default: 'default',
   toggle: 'toggle',
-  toggle_round: 'toggle_round'
+  // maintaining key with aliased value to assist in transition to v11 but will be removed soon after release
+  toggle_round: 'toggle'
 });
 export const LABEL_PLACEMENT = Object.freeze({
   top: 'top',