baseui 10.10.0 → 10.11.0

package/button-group/stateful-container.js.flow

@@ -8,9 +8,9 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {MODE, STATE_CHANGE_TYPE} from './constants.js';
+import { MODE, STATE_CHANGE_TYPE } from './constants.js';
 
-import type {StatefulContainerPropsT, StateT} from './types.js';
+import type { StatefulContainerPropsT, StateT } from './types.js';
 
 // handles the case where selected = 0
 function isSelectedDefined(selected) {
@@ -20,25 +20,22 @@ function isSelectedDefined(selected) {
 function defaultStateReducer(
   type: $Values<typeof STATE_CHANGE_TYPE>,
   nextState: StateT,
-  currentState: StateT,
+  currentState: StateT
 ) {
   return nextState;
 }
 
-export default class StatefulContainer extends React.Component<
-  StatefulContainerPropsT,
-  StateT,
-> {
+export default class StatefulContainer extends React.Component<StatefulContainerPropsT, StateT> {
   static defaultProps = {
-    initialState: {selected: []},
+    initialState: { selected: [] },
     stateReducer: defaultStateReducer,
   };
 
   constructor(props: StatefulContainerPropsT) {
     super(props);
 
-    const {initialState = {}} = props;
-    const {selected = []} = initialState;
+    const { initialState = {} } = props;
+    const { selected = [] } = initialState;
 
     this.state = {
       selected: isSelectedDefined(selected) ? [].concat(selected) : [],
@@ -47,13 +44,7 @@ export default class StatefulContainer extends React.Component<
 
   changeState = (nextState: StateT) => {
     if (this.props.stateReducer) {
-      this.setState(
-        this.props.stateReducer(
-          STATE_CHANGE_TYPE.change,
-          nextState,
-          this.state,
-        ),
-      );
+      this.setState(this.props.stateReducer(STATE_CHANGE_TYPE.change, nextState, this.state));
     } else {
       this.setState(nextState);
     }
@@ -61,22 +52,19 @@ export default class StatefulContainer extends React.Component<
 
   onClick = (event: SyntheticEvent<HTMLButtonElement>, index: number) => {
     if (this.props.mode === MODE.radio) {
-      if (
-        this.state.selected.length === 0 ||
-        this.state.selected[0] !== index
-      ) {
-        this.changeState({selected: [index]});
+      if (this.state.selected.length === 0 || this.state.selected[0] !== index) {
+        this.changeState({ selected: [index] });
       } else {
-        this.changeState({selected: []});
+        this.changeState({ selected: [] });
       }
     }
 
     if (this.props.mode === MODE.checkbox) {
       if (!this.state.selected.includes(index)) {
-        this.changeState({selected: [...this.state.selected, index]});
+        this.changeState({ selected: [...this.state.selected, index] });
       } else {
         this.changeState({
-          selected: this.state.selected.filter(value => value !== index),
+          selected: this.state.selected.filter((value) => value !== index),
         });
       }
     }
@@ -87,7 +75,7 @@ export default class StatefulContainer extends React.Component<
   };
 
   render() {
-    const {initialState, stateReducer, ...props} = this.props;
+    const { initialState, stateReducer, ...props } = this.props;
     return this.props.children({
       ...props,
       onClick: this.onClick,

package/button-group/styled-components.js.flow

@@ -6,12 +6,12 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled} from '../styles/index.js';
-import {SHAPE} from '../button/index.js';
+import { styled } from '../styles/index.js';
+import { SHAPE } from '../button/index.js';
 
-export const StyledRoot = styled<{$shape: string, $length: number}>(
+export const StyledRoot = styled<{ $shape: string, $length: number }>(
   'div',
-  ({$shape, $length, $theme}) => {
+  ({ $shape, $length, $theme }) => {
     const margin =
       $length === 1
         ? undefined
@@ -23,7 +23,7 @@ export const StyledRoot = styled<{$shape: string, $length: number}>(
       marginLeft: margin,
       marginRight: margin,
     };
-  },
+  }
 );
 
 declare var __DEV__: boolean;

package/button-group/types.js.flow

@@ -8,15 +8,15 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {SIZE, SHAPE, KIND} from '../button/index.js';
-import type {OverrideT} from '../helpers/overrides.js';
-
-import {MODE, STATE_CHANGE_TYPE} from './constants.js';
+import { SIZE, SHAPE, KIND } from '../button/index.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { MODE, STATE_CHANGE_TYPE } from './constants.js';
 
 // button-group
 export type PropsT = {|
   /** Accessible label. */
   ariaLabel?: string,
+  'aria-label'?: string,
   /** Set of more than one `Button` components */
   children: Array<React.Node>,
   /** Defines if the button group is disabled. */
@@ -56,17 +56,17 @@ type OverridesT = {
 export type StatefulPropsT = $Diff<
   {|
     ...PropsT,
-    initialState?: {selected: number | Array<number>},
+    initialState?: { selected: number | Array<number> },
     stateReducer?: StateReducerT,
   |},
-  {selected: mixed}, // excluded from type definition
+  { selected: mixed } // excluded from type definition
 >;
 
 // stateful-container
 export type StatefulContainerPropsT = {|
   ...StatefulPropsT,
   children: (props: {
-    ...$Diff<PropsT, {children: mixed}>,
+    ...$Diff<PropsT, { children: mixed }>,
     onClick: ClickHandlerT,
     selected: number | Array<number>,
   }) => React.Node,
@@ -79,14 +79,11 @@ export type StateT = {
 export type StateReducerT = (
   stateType: $Values<typeof STATE_CHANGE_TYPE>,
   nextState: StateT,
-  currentState: StateT,
+  currentState: StateT
 ) => StateT;
 
 // general
-type ClickHandlerT = (
-  event: SyntheticEvent<HTMLButtonElement>,
-  index: number,
-) => mixed;
+type ClickHandlerT = (event: SyntheticEvent<HTMLButtonElement>, index: number) => mixed;
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/card/card.js.flow

@@ -8,8 +8,8 @@ LICENSE file in the root directory of this source tree.
 /* @flow */
 
 import * as React from 'react';
-import {getOverride, getOverrideProps} from '../helpers/overrides.js';
-import {LevelContext} from '../heading/index.js';
+import { getOverride, getOverrideProps } from '../helpers/overrides.js';
+import { LevelContext } from '../heading/index.js';
 import {
   Action as StyledAction,
   Body as StyledBody,
@@ -20,18 +20,18 @@ import {
   Title as StyledTitle,
 } from './styled-components.js';
 
-import type {CardsPropsT} from './types.js';
+import type { CardsPropsT } from './types.js';
 
-export function hasThumbnail(props: {+thumbnail?: string}) {
+export function hasThumbnail(props: { +thumbnail?: string }) {
   return !!props.thumbnail;
 }
 
-const SemanticTitle = ({children, ...restProps}) => {
+const SemanticTitle = ({ children, ...restProps }) => {
   const levels = ['', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
   return (
     <LevelContext.Consumer>
-      {level => (
+      {(level) => (
         <StyledTitle $as={levels[level]} {...restProps}>
           {children}
         </StyledTitle>
@@ -70,41 +70,23 @@ function Card(props: CardsPropsT) {
   const Thumbnail = getOverride(ThumbnailOverride) || StyledThumbnail;
   const Title = getOverride(TitleOverride) || SemanticTitle;
 
-  const headerImageProps =
-    typeof headerImage === 'string' ? {src: headerImage} : headerImage;
+  const headerImageProps = typeof headerImage === 'string' ? { src: headerImage } : headerImage;
 
   const $hasThumbnail = hasThumbnail(props);
   return (
-    <Root
-      data-baseweb="card"
-      {...restProps}
-      {...getOverrideProps(RootOverride)}
-    >
+    <Root data-baseweb="card" {...restProps} {...getOverrideProps(RootOverride)}>
       {headerImage && (
-        <HeaderImage
-          {...headerImageProps}
-          {...getOverrideProps(HeaderImageOverride)}
-        />
+        <HeaderImage {...headerImageProps} {...getOverrideProps(HeaderImageOverride)} />
       )}
       <Contents {...getOverrideProps(ContentsOverride)}>
-        {thumbnailSrc && (
-          <Thumbnail
-            src={thumbnailSrc}
-            {...getOverrideProps(ThumbnailOverride)}
-          />
-        )}
+        {thumbnailSrc && <Thumbnail src={thumbnailSrc} {...getOverrideProps(ThumbnailOverride)} />}
         {title && (
-          <Title
-            $hasThumbnail={$hasThumbnail}
-            {...getOverrideProps(TitleOverride)}
-          >
+          <Title $hasThumbnail={$hasThumbnail} {...getOverrideProps(TitleOverride)}>
             {title}
           </Title>
         )}
         <Body {...getOverrideProps(BodyOverride)}>{children}</Body>
-        {action && (
-          <Action {...getOverrideProps(ActionOverride)}>{action}</Action>
-        )}
+        {action && <Action {...getOverrideProps(ActionOverride)}>{action}</Action>}
       </Contents>
     </Root>
   );

package/card/index.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 
 /* @flow */
 
-export {default as Card, hasThumbnail} from './card.js';
+export { default as Card, hasThumbnail } from './card.js';
 export {
   Action as StyledAction,
   Body as StyledBody,

package/card/styled-components.js.flow

@@ -7,26 +7,26 @@ LICENSE file in the root directory of this source tree.
 
 /* @flow */
 
-import {styled, expandBorderStyles} from '../styles/index.js';
+import { styled, expandBorderStyles } from '../styles/index.js';
 
-export const Action = styled<{}>('div', ({$theme}) => ({
+export const Action = styled<{}>('div', ({ $theme }) => ({
   ...$theme.typography.LabelMedium,
 }));
 
-export const Body = styled<{}>('div', ({$theme}) => ({
+export const Body = styled<{}>('div', ({ $theme }) => ({
   marginBottom: $theme.sizing.scale600,
   color: $theme.colors.contentPrimary,
   ...$theme.typography.ParagraphMedium,
 }));
 
-export const Contents = styled<{}>('div', ({$theme}) => ({
+export const Contents = styled<{}>('div', ({ $theme }) => ({
   marginLeft: $theme.sizing.scale600,
   marginTop: $theme.sizing.scale600,
   marginRight: $theme.sizing.scale600,
   marginBottom: $theme.sizing.scale600,
 }));
 
-export const HeaderImage = styled<{}>('img', ({$theme}) => ({
+export const HeaderImage = styled<{}>('img', ({ $theme }) => ({
   borderTopLeftRadius: $theme.borders.surfaceBorderRadius,
   borderTopRightRadius: $theme.borders.surfaceBorderRadius,
   objectFit: 'contain',
@@ -35,7 +35,7 @@ export const HeaderImage = styled<{}>('img', ({$theme}) => ({
 
 // by using the section tag, we can keep the h1 for the title
 // https://html.spec.whatwg.org/multipage/sections.html#headings-and-sections
-export const Root = styled<{}>('section', ({$theme}) => ({
+export const Root = styled<{}>('section', ({ $theme }) => ({
   borderLeftWidth: '2px',
   borderTopWidth: '2px',
   borderRightWidth: '2px',
@@ -56,7 +56,7 @@ export const Root = styled<{}>('section', ({$theme}) => ({
   overflow: 'hidden',
 }));
 
-export const Thumbnail = styled<{}>('img', ({$theme}) => ({
+export const Thumbnail = styled<{}>('img', ({ $theme }) => ({
   float: 'right',
   height: $theme.sizing.scale2400,
   width: $theme.sizing.scale2400,
@@ -69,7 +69,7 @@ export const Thumbnail = styled<{}>('img', ({$theme}) => ({
   margin: `0 0 ${$theme.sizing.scale500} ${$theme.sizing.scale500}`,
 }));
 
-export const Title = styled<{}>('h1', ({$theme}) => ({
+export const Title = styled<{}>('h1', ({ $theme }) => ({
   ...$theme.typography.HeadingSmall,
   color: $theme.colors.contentPrimary,
   marginLeft: 0,

package/card/types.js.flow

@@ -5,8 +5,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import type {Node} from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
+import type { Node } from 'react';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type CardComponentsT = {
   Action?: OverrideT,
@@ -41,7 +41,7 @@ export type CardsPropsT = {
   /** Content to be rendered within the Card body. */
   +children?: Node,
   /** Function that takes Card props and returns a boolean that represents if a thumbnail will be rendered. */
-  +hasThumbnail: ({+thumbnail?: string}) => boolean,
+  +hasThumbnail: ({ +thumbnail?: string }) => boolean,
   /** Image to be positioned at the top of the Card. Can be a string representing the img src or an object with img attrs */
   +headerImage?: string | ImagePropsT,
   +overrides: CardComponentsT,

package/checkbox/checkbox.js

@@ -183,8 +183,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
           checked = _this$props2.checked,
           children = _this$props2.children,
           required = _this$props2.required,
-          title = _this$props2.title,
-          ariaLabel = _this$props2.ariaLabel;
+          title = _this$props2.title;
       var RootOverride = overrides.Root,
           CheckmarkOverride = overrides.Checkmark,
           LabelOverride = overrides.Label,
@@ -253,7 +252,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         name: name,
         checked: checked,
         required: required,
-        "aria-label": ariaLabel,
+        "aria-label": this.props['aria-label'] || this.props.ariaLabel,
         "aria-checked": isIndeterminate ? 'mixed' : checked,
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],

package/checkbox/checkbox.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {getOverride, getOverrideProps} from '../helpers/overrides.js';
-import type {PropsT, DefaultPropsT, StatelessStateT} from './types.js';
+import { getOverride, getOverrideProps } from '../helpers/overrides.js';
+import type { PropsT, DefaultPropsT, StatelessStateT } from './types.js';
 import {
   Checkmark as StyledCheckmark,
   Input as StyledInput,
@@ -17,10 +17,10 @@ import {
   ToggleInner as StyledToggleInner,
   ToggleTrack as StyledToggleTrack,
 } from './styled-components.js';
-import {STYLE_TYPE} from './constants.js';
-import {isFocusVisible} from '../utils/focusVisible.js';
+import { STYLE_TYPE } from './constants.js';
+import { isFocusVisible } from '../utils/focusVisible.js';
 
-const stopPropagation = e => e.stopPropagation();
+const stopPropagation = (e) => e.stopPropagation();
 
 class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
   static defaultProps: DefaultPropsT = {
@@ -52,7 +52,7 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
   };
 
   componentDidMount() {
-    const {autoFocus, inputRef} = this.props;
+    const { autoFocus, inputRef } = this.props;
     if (autoFocus && inputRef.current) {
       inputRef.current.focus();
     }
@@ -62,50 +62,50 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
       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.',
+            '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.',
+          'baseui:Checkbox Property "isError" will be removed in the next major version. Use "error" property instead.'
         );
       }
     }
   }
 
   onMouseEnter = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    this.setState({isHovered: true});
+    this.setState({ isHovered: true });
     this.props.onMouseEnter(e);
   };
 
   onMouseLeave = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    this.setState({isHovered: false, isActive: false});
+    this.setState({ isHovered: false, isActive: false });
     this.props.onMouseLeave(e);
   };
 
   onMouseDown = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    this.setState({isActive: true});
+    this.setState({ isActive: true });
     this.props.onMouseDown(e);
   };
 
   onMouseUp = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    this.setState({isActive: false});
+    this.setState({ isActive: false });
     this.props.onMouseUp(e);
   };
 
   onFocus = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    this.setState({isFocused: true});
+    this.setState({ isFocused: true });
     this.props.onFocus(e);
     if (isFocusVisible(e)) {
-      this.setState({isFocusVisible: true});
+      this.setState({ isFocusVisible: true });
     }
   };
 
   onBlur = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    this.setState({isFocused: false});
+    this.setState({ isFocused: false });
     this.props.onBlur(e);
     if (this.state.isFocusVisible !== false) {
-      this.setState({isFocusVisible: false});
+      this.setState({ isFocusVisible: false });
     }
   };
 
@@ -117,7 +117,7 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
   };
 
   render() {
-    const {checkmarkType} = this.props;
+    const { checkmarkType } = this.props;
     const {
       overrides = {},
       onChange,
@@ -134,7 +134,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
       children,
       required,
       title,
-      ariaLabel,
     } = this.props;
 
     const {
@@ -182,15 +181,11 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
     };
     // TODO(v11) - add check for children (#2172)
     const labelComp = (
-      <Label
-        $labelPlacement={labelPlacement}
-        {...sharedProps}
-        {...getOverrideProps(LabelOverride)}
-      >
+      <Label $labelPlacement={labelPlacement} {...sharedProps} {...getOverrideProps(LabelOverride)}>
         {this.props.containsInteractiveElement ? (
           // Prevents the event from bubbling up to the label and moving focus to the radio button
           // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-          <div onClick={e => e.preventDefault()}>{children}</div>
+          <div onClick={(e) => e.preventDefault()}>{children}</div>
         ) : (
           children
         )}
@@ -207,29 +202,20 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
       >
         {(labelPlacement === 'top' || labelPlacement === 'left') && labelComp}
         {this.isToggle() ? (
-          <ToggleTrack
-            {...sharedProps}
-            {...getOverrideProps(ToggleTrackOverride)}
-          >
+          <ToggleTrack {...sharedProps} {...getOverrideProps(ToggleTrackOverride)}>
             <Toggle {...sharedProps} {...getOverrideProps(ToggleOverride)}>
-              <ToggleInner
-                {...sharedProps}
-                {...getOverrideProps(ToggleInnerOverride)}
-              />
+              <ToggleInner {...sharedProps} {...getOverrideProps(ToggleInnerOverride)} />
             </Toggle>
           </ToggleTrack>
         ) : (
-          <Checkmark
-            {...sharedProps}
-            {...getOverrideProps(CheckmarkOverride)}
-          />
+          <Checkmark {...sharedProps} {...getOverrideProps(CheckmarkOverride)} />
         )}
         <Input
           value={value}
           name={name}
           checked={checked}
           required={required}
-          aria-label={ariaLabel}
+          aria-label={this.props['aria-label'] || this.props.ariaLabel}
           aria-checked={isIndeterminate ? 'mixed' : checked}
           aria-describedby={this.props['aria-describedby']}
           aria-errormessage={this.props['aria-errormessage']}
@@ -245,8 +231,7 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
           {...inputEvents}
           {...getOverrideProps(InputOverride)}
         />
-        {(labelPlacement === 'bottom' || labelPlacement === 'right') &&
-          labelComp}
+        {(labelPlacement === 'bottom' || labelPlacement === 'right') && labelComp}
       </Root>
     );
   }

package/checkbox/index.d.ts

@@ -106,6 +106,7 @@ export interface CheckboxProps {
   checkmarkType?: STYLE_TYPE[keyof STYLE_TYPE];
   title?: string;
   ariaLabel?: string;
+  'aria-label'?: string;
   onChange?: React.FormEventHandler<HTMLInputElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLInputElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLInputElement>;

package/checkbox/index.js.flow

@@ -6,9 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as StatefulCheckbox} from './stateful-checkbox.js';
-export {default as StatefulContainer} from './stateful-checkbox-container.js';
-export {default as Checkbox} from './checkbox.js';
+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,
@@ -20,7 +20,7 @@ export {
   ToggleTrack as StyledToggleTrack,
 } from './styled-components.js';
 
-export {STATE_TYPE, STYLE_TYPE, LABEL_PLACEMENT} from './constants.js';
+export { STATE_TYPE, STYLE_TYPE, LABEL_PLACEMENT } from './constants.js';
 
 // Flow
 export type * from './types.js';

package/checkbox/stateful-checkbox-container.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {STATE_TYPE} from './constants.js';
+import { STATE_TYPE } from './constants.js';
 import type {
   StatefulContainerPropsT,
   StateReducerT,
@@ -16,10 +16,7 @@ import type {
 
 const defaultStateReducer: StateReducerT = (type, nextState) => nextState;
 
-class StatefulCheckboxContainer extends React.Component<
-  StatefulContainerPropsT,
-  StateT,
-> {
+class StatefulCheckboxContainer extends React.Component<StatefulContainerPropsT, StateT> {
   static defaultProps: DefaultStatefulPropsT = {
     initialState: {
       checked: false,
@@ -35,7 +32,7 @@ class StatefulCheckboxContainer extends React.Component<
 
   constructor(props: StatefulContainerPropsT) {
     super(props);
-    const {initialState} = this.props;
+    const { initialState } = this.props;
     this.state = {
       ...initialState,
     };
@@ -43,36 +40,36 @@ class StatefulCheckboxContainer extends React.Component<
 
   onChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
     this.stateReducer(STATE_TYPE.change, e);
-    const {onChange} = this.props;
+    const { onChange } = this.props;
     onChange && onChange(e);
   };
 
   onMouseEnter = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const {onMouseEnter} = this.props;
+    const { onMouseEnter } = this.props;
     onMouseEnter && onMouseEnter(e);
   };
 
   onMouseLeave = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const {onMouseLeave} = this.props;
+    const { onMouseLeave } = this.props;
     onMouseLeave && onMouseLeave(e);
   };
 
   onFocus = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const {onFocus} = this.props;
+    const { onFocus } = this.props;
     onFocus && onFocus(e);
   };
 
   onBlur = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const {onBlur} = this.props;
+    const { onBlur } = this.props;
     onBlur && onBlur(e);
   };
 
   stateReducer = (type: string, e: SyntheticInputEvent<HTMLInputElement>) => {
     let nextState = {};
-    const {stateReducer} = this.props;
+    const { stateReducer } = this.props;
     switch (type) {
       case STATE_TYPE.change:
-        nextState = {checked: e.target.checked};
+        nextState = { checked: e.target.checked };
         break;
     }
     const newState = stateReducer(type, nextState, this.state, e);
@@ -81,12 +78,12 @@ class StatefulCheckboxContainer extends React.Component<
 
   render() {
     const {
-      children = (childProps: {}) => null, // eslint-disable-line no-unused-vars
-      initialState, // eslint-disable-line no-unused-vars
-      stateReducer, // eslint-disable-line no-unused-vars
+      children = (childProps: {}) => null,
+      initialState,
+      stateReducer,
       ...restProps
     } = this.props;
-    const {onChange, onMouseEnter, onMouseLeave, onFocus, onBlur} = this;
+    const { onChange, onMouseEnter, onMouseLeave, onFocus, onBlur } = this;
     return children({
       ...restProps,
       checked: this.state.checked,