@douyinfe/semi-ui 2.9.0-beta.1 → 2.10.0-beta.0

package/lib/cjs/carousel/index.js

@@ -0,0 +1,345 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/carousel/constants");
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/carousel/foundation"));
+
+var _CarouselIndicator = _interopRequireDefault(require("./CarouselIndicator"));
+
+var _CarouselArrow = _interopRequireDefault(require("./CarouselArrow"));
+
+require("@douyinfe/semi-foundation/lib/cjs/carousel/carousel.css");
+
+var _isNullOrUndefined = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isNullOrUndefined"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+class Carousel extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.play = () => {
+      return this.foundation.handleAutoPlay();
+    };
+
+    this.stop = () => {
+      return this.foundation.stop();
+    };
+
+    this.goTo = targetIndex => {
+      return this.foundation.goTo(targetIndex);
+    };
+
+    this.prev = () => {
+      return this.foundation.prev();
+    };
+
+    this.next = () => {
+      return this.foundation.next();
+    };
+
+    this.handleAutoPlay = () => {
+      if (!this.foundation.getIsControledComponent()) {
+        this.foundation.handleAutoPlay();
+      }
+    };
+
+    this.handleMouseEnter = () => {
+      const {
+        autoPlay
+      } = this.props;
+
+      if (typeof autoPlay !== 'object' || autoPlay.hoverToPause) {
+        this.foundation.stop();
+      }
+    };
+
+    this.handleMouseLeave = () => {
+      const {
+        autoPlay
+      } = this.props;
+
+      if ((typeof autoPlay !== 'object' || autoPlay.hoverToPause) && !this.foundation.getIsControledComponent()) {
+        this.foundation.handleAutoPlay();
+      }
+    };
+
+    this.onIndicatorChange = activeIndex => {
+      return this.foundation.throttleChange(activeIndex);
+    };
+
+    this.getChildren = () => {
+      var _context;
+
+      const {
+        children: originChildren
+      } = this.props;
+      return (0, _filter.default)(_context = _react.Children.toArray(originChildren)).call(_context, child => {
+        return /*#__PURE__*/_react.default.isValidElement(child);
+      });
+    };
+
+    this.getValidIndex = activeIndex => {
+      return this.foundation.getValidIndex(activeIndex);
+    };
+
+    this.renderChildren = () => {
+      const {
+        speed,
+        animation
+      } = this.props;
+      const {
+        activeIndex,
+        children,
+        preIndex,
+        isInit
+      } = this.state;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _map.default)(children).call(children, (child, index) => {
+        const isCurrent = index === activeIndex;
+        const isPrev = index === this.getValidIndex(activeIndex - 1);
+        const isNext = index === this.getValidIndex(activeIndex + 1);
+        const animateStyle = {
+          transitionTimingFunction: 'ease',
+          transitionDuration: "".concat(speed, "ms"),
+          animationTimingFunction: 'ease',
+          animationDuration: "".concat(speed, "ms")
+        };
+        return /*#__PURE__*/_react.default.cloneElement(child, {
+          style: (0, _assign.default)((0, _assign.default)({}, child.props.style), animateStyle),
+          className: (0, _classnames.default)(child.props.className, {
+            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item-prev")]: isPrev,
+            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item-next")]: isNext,
+            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item-current")]: isCurrent,
+            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item")]: true,
+            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item-active")]: isCurrent,
+            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item-slide-in")]: animation === 'slide' && !isInit && isCurrent,
+            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item-slide-out")]: animation === 'slide' && !isInit && index === preIndex
+          })
+        });
+      }));
+    };
+
+    this.renderIndicator = () => {
+      const {
+        children,
+        activeIndex
+      } = this.state;
+      const {
+        showIndicator,
+        indicatorType,
+        theme,
+        indicatorPosition,
+        indicatorSize,
+        trigger
+      } = this.props;
+      const carouselIndicatorCls = (0, _classnames.default)({
+        [_constants.cssClasses.CAROUSEL_INDICATOR]: true
+      });
+
+      if (showIndicator && children.length > 1) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: carouselIndicatorCls
+        }, /*#__PURE__*/_react.default.createElement(_CarouselIndicator.default, {
+          type: indicatorType,
+          total: children.length,
+          activeIndex: activeIndex,
+          position: indicatorPosition,
+          trigger: trigger,
+          size: indicatorSize,
+          theme: theme,
+          onIndicatorChange: this.onIndicatorChange
+        }));
+      }
+
+      return null;
+    };
+
+    this.renderArrow = () => {
+      const {
+        children
+      } = this.state;
+      const {
+        showArrow,
+        arrowType,
+        theme,
+        arrowProps
+      } = this.props;
+      const timing = this.foundation.getSwitchingTime();
+
+      if (showArrow && children.length > 1) {
+        return /*#__PURE__*/_react.default.createElement(_CarouselArrow.default, {
+          type: arrowType,
+          theme: theme,
+          prev: this.prev,
+          next: this.next,
+          timing: timing,
+          arrowProps: arrowProps
+        });
+      }
+
+      return null;
+    };
+
+    this.foundation = new _foundation.default(this.adapter);
+    const defaultActiveIndex = this.foundation.getDefaultActiveIndex();
+    this.state = {
+      activeIndex: defaultActiveIndex,
+      children: this.getChildren(),
+      preIndex: defaultActiveIndex,
+      isReverse: false,
+      isInit: true
+    };
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      notifyChange: (activeIndex, preIndex) => {
+        this.props.onChange(activeIndex, preIndex);
+      },
+      setNewActiveIndex: activeIndex => {
+        this.setState({
+          activeIndex
+        });
+      },
+      setPreActiveIndex: preIndex => {
+        this.setState({
+          preIndex
+        });
+      },
+      setIsReverse: isReverse => {
+        this.setState({
+          isReverse
+        });
+      },
+      setIsInit: isInit => {
+        this.setState({
+          isInit
+        });
+      }
+    });
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const states = {};
+
+    if (!(0, _isNullOrUndefined.default)(props.activeIndex) && props.activeIndex !== state.activeIndex) {
+      states.activeIndex = props.activeIndex;
+    }
+
+    return states;
+  }
+
+  componentDidMount() {
+    this.handleAutoPlay();
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  render() {
+    var _context2;
+
+    const {
+      animation,
+      className,
+      style,
+      slideDirection
+    } = this.props;
+    const {
+      isReverse
+    } = this.state;
+    const carouselWrapperCls = (0, _classnames.default)(className, {
+      [_constants.cssClasses.CAROUSEL]: true
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      // role='listbox'
+      // tabIndex={0}
+      className: carouselWrapperCls,
+      style: style,
+      onMouseEnter: (0, _debounce2.default)(this.handleMouseEnter, 400),
+      onMouseLeave: (0, _debounce2.default)(this.handleMouseLeave, 400)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)([(0, _concat.default)(_context2 = "".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-")).call(_context2, animation)], {
+        ["".concat(_constants.cssClasses.CAROUSEL_CONTENT)]: true,
+        ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-reverse")]: slideDirection === 'left' ? isReverse : !isReverse
+      })
+    }, this.renderChildren()), this.renderIndicator(), this.renderArrow());
+  }
+
+}
+
+Carousel.propTypes = {
+  activeIndex: _propTypes.default.number,
+  animation: _propTypes.default.oneOf(_constants.strings.ANIMATION_MAP),
+  arrowProps: _propTypes.default.object,
+  autoPlay: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
+  className: _propTypes.default.string,
+  defaultActiveIndex: _propTypes.default.number,
+  indicatorPosition: _propTypes.default.oneOf(_constants.strings.POSITION_MAP),
+  indicatorSize: _propTypes.default.oneOf(_constants.strings.SIZE),
+  indicatorType: _propTypes.default.oneOf(_constants.strings.TYPE_MAP),
+  theme: _propTypes.default.oneOf(_constants.strings.THEME_MAP),
+  onChange: _propTypes.default.func,
+  arrowType: _propTypes.default.oneOf(_constants.strings.ARROW_MAP),
+  showArrow: _propTypes.default.bool,
+  showIndicator: _propTypes.default.bool,
+  slideDirection: _propTypes.default.oneOf(_constants.strings.DIRECTION),
+  speed: _propTypes.default.number,
+  style: _propTypes.default.object,
+  trigger: _propTypes.default.oneOf(_constants.strings.TRIGGER)
+};
+Carousel.defaultProps = {
+  children: [],
+  animation: 'slide',
+  autoPlay: true,
+  arrowType: 'always',
+  defaultActiveIndex: _constants.numbers.DEFAULT_ACTIVE_INDEX,
+  indicatorPosition: 'center',
+  indicatorSize: 'small',
+  indicatorType: 'dot',
+  theme: 'light',
+  onChange: () => undefined,
+  showArrow: true,
+  showIndicator: true,
+  slideDirection: 'left',
+  speed: _constants.numbers.DEFAULT_SPEED,
+  trigger: 'click'
+};
+var _default = Carousel;
+exports.default = _default;

package/lib/cjs/carousel/interface.d.ts

@@ -0,0 +1,62 @@
+import React, { ReactNode } from "react";
+import { strings } from '@douyinfe/semi-foundation/lib/cjs/carousel/constants';
+export interface CarouselMethod {
+    next?: () => void;
+    prev?: () => void;
+    goTo?: () => void;
+    play?: () => void;
+    stop?: () => void;
+}
+export interface CarouselProps {
+    activeIndex?: number;
+    animation?: typeof strings.ANIMATION_MAP[number];
+    arrowProps?: ArrowProps;
+    autoPlay?: boolean | {
+        interval?: number;
+        hoverToPause?: boolean;
+    };
+    arrowType?: typeof strings.ARROW_MAP[number];
+    children?: ReactNode | Array<ReactNode>;
+    className?: string;
+    defaultActiveIndex?: number;
+    indicatorPosition?: typeof strings.POSITION_MAP[number];
+    indicatorSize?: typeof strings.SIZE[number];
+    theme?: typeof strings.THEME_MAP[number];
+    indicatorType?: typeof strings.TYPE_MAP[number];
+    onChange?: (index: number, preIndex: number) => void;
+    showArrow?: boolean;
+    showIndicator?: boolean;
+    slideDirection?: typeof strings.DIRECTION[number];
+    speed?: number;
+    style?: React.CSSProperties;
+    trigger?: typeof strings.TRIGGER[number];
+}
+export interface CarouselIndicatorProps {
+    activeIndex?: number;
+    className?: string;
+    defaultActiveIndex?: number;
+    position?: typeof strings.POSITION_MAP[number];
+    size?: typeof strings.SIZE[number];
+    total?: number;
+    theme?: typeof strings.THEME_MAP[number];
+    type?: typeof strings.TYPE_MAP[number];
+    onIndicatorChange?: (activeIndex: number) => void;
+    style?: React.CSSProperties;
+    trigger?: typeof strings.TRIGGER[number];
+}
+export interface CarouselArrowProps {
+    type?: typeof strings.ARROW_MAP[number];
+    theme?: typeof strings.THEME_MAP[number];
+    prev?: () => void;
+    next?: () => void;
+    arrowProps?: ArrowProps;
+    timing: number;
+}
+export interface ArrowButton {
+    props?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    children?: React.ReactNode;
+}
+export interface ArrowProps {
+    leftArrow?: ArrowButton;
+    rightArrow?: ArrowButton;
+}

package/lib/cjs/carousel/interface.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/cascader/index.js

@@ -139,7 +139,7 @@ class Cascader extends _baseComponent.default {
               e.preventDefault();
               this.handleTagRemove(e, keyEntities[nodeKey].valuePath);
             }
-          }, displayProp === 'label' && keyEntities[nodeKey].data.label, displayProp === 'value' && keyEntities[nodeKey].data.value);
+          }, keyEntities[nodeKey].data[displayProp]);
         }
       }
 
@@ -423,7 +423,7 @@ class Cascader extends _baseComponent.default {
 
     this.handleClearEnterPress = e => {
       e && e.stopPropagation();
-      this.foundation.handleClearEnterPress();
+      this.foundation.handleClearEnterPress(e);
     };
 
     this.showClearBtn = () => {

package/lib/cjs/collapse/item.js

@@ -103,9 +103,11 @@ class CollapsePanel extends _react.PureComponent {
       className,
       children,
       itemKey,
-      reCalcKey
+      reCalcKey,
+      header,
+      extra
     } = _a,
-          restProps = __rest(_a, ["className", "children", "itemKey", "reCalcKey"]);
+          restProps = __rest(_a, ["className", "children", "itemKey", "reCalcKey", "header", "extra"]);
 
     const {
       keepDOM,

package/lib/cjs/form/hoc/withField.js

@@ -147,7 +147,8 @@ function withField(Component, opts) {
     const [cursor, setCursor, getCursor] = (0, _index.useStateWithGetter)(0);
     const [status, setStatus] = (0, _react.useState)(validateStatus); // use props.validateStatus to init
 
-    const rulesRef = (0, _react.useRef)(rules); // notNotify is true means that the onChange of the Form does not need to be triggered
+    const rulesRef = (0, _react.useRef)(rules);
+    const validateRef = (0, _react.useRef)(validate); // notNotify is true means that the onChange of the Form does not need to be triggered
     // notUpdate is true means that this operation does not need to trigger the forceUpdate
 
     const updateTouched = (isTouched, callOpts) => {
@@ -246,7 +247,7 @@ function withField(Component, opts) {
       let maybePromisedErrors; // let errorThrowSync;
 
       try {
-        maybePromisedErrors = validate(val, values);
+        maybePromisedErrors = validateRef.current(val, values);
       } catch (err) {
         // error throw by syncValidate
         maybePromisedErrors = err;
@@ -286,7 +287,7 @@ function withField(Component, opts) {
         finalVal = transform(val);
       }
 
-      if (validate) {
+      if (validateRef.current) {
         return _validate(finalVal, updater.getValue(), callOpts);
       } else if (latestRules) {
         return _validateInternal(finalVal, callOpts);
@@ -395,7 +396,8 @@ function withField(Component, opts) {
 
     (0, _react.useLayoutEffect)(() => {
       rulesRef.current = rules;
-    }, [rules]); // exec validate once when trigger inlcude 'mount'
+      validateRef.current = validate;
+    }, [rules, validate]); // exec validate once when trigger inlcude 'mount'
 
     (0, _react.useLayoutEffect)(() => {
       if (validateOnMount) {

package/lib/cjs/index.d.ts

@@ -12,6 +12,7 @@ export { default as ButtonGroup } from './button/buttonGroup';
 export { default as Calendar } from './calendar';
 export { default as Card } from './card';
 export { default as CardGroup } from './card/cardGroup';
+export { default as Carousel } from './carousel';
 export { default as Cascader } from './cascader';
 export { default as Checkbox } from './checkbox';
 export { default as CheckboxGroup } from './checkbox/checkboxGroup';

package/lib/cjs/index.js

@@ -110,6 +110,13 @@ _Object$defineProperty(exports, "CardGroup", {
   }
 });
 
+_Object$defineProperty(exports, "Carousel", {
+  enumerable: true,
+  get: function () {
+    return _carousel.default;
+  }
+});
+
 _Object$defineProperty(exports, "Cascader", {
   enumerable: true,
   get: function () {
@@ -656,6 +663,8 @@ var _card = _interopRequireDefault(require("./card"));
 
 var _cardGroup = _interopRequireDefault(require("./card/cardGroup"));
 
+var _carousel = _interopRequireDefault(require("./carousel"));
+
 var _cascader = _interopRequireDefault(require("./cascader"));
 
 var _checkbox = _interopRequireDefault(require("./checkbox"));

package/lib/cjs/modal/Modal.js

@@ -253,6 +253,9 @@ class Modal extends _baseComponent.default {
         this.props.onOk(e);
       },
       notifyClose: () => {
+        var _a, _b;
+
+        (_b = (_a = this.props.motion) === null || _a === void 0 ? void 0 : _a.didLeave) === null || _b === void 0 ? void 0 : _b.call(_a);
         this.props.afterClose();
       },
       toggleHidden: (hidden, callback) => {

package/lib/cjs/scrollList/scrollItem.js

@@ -71,6 +71,8 @@ class ScrollItem extends _baseComponent.default {
     this._cacheSelectorNode = selector => this._cacheNode('selector', selector);
 
     this._cacheWrapperNode = wrapper => this._cacheNode('wrapper', wrapper);
+    /* istanbul ignore next */
+
 
     this._isFirst = node => {
       const {
@@ -85,6 +87,8 @@ class ScrollItem extends _baseComponent.default {
 
       return false;
     };
+    /* istanbul ignore next */
+
 
     this._isLast = node => {
       const {
@@ -197,7 +201,7 @@ class ScrollItem extends _baseComponent.default {
       } = this;
       const wrapperHeight = wrapper.offsetHeight;
       const itemHeight = this.getItmHeight(node);
-      const targetTop = node.offsetTop - (wrapperHeight - itemHeight) / 2;
+      const targetTop = (node.offsetTop || this.list.children.length * itemHeight / 2) - (wrapperHeight - itemHeight) / 2;
       this.scrollToPos(targetTop, duration);
     };
 

package/lib/cjs/switch/index.d.ts

@@ -26,6 +26,7 @@ export interface SwitchProps {
 export interface SwitchState {
     nativeControlChecked: boolean;
     nativeControlDisabled: boolean;
+    focusVisible: boolean;
 }
 declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
     static propTypes: {
@@ -55,6 +56,8 @@ declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
     componentDidUpdate(prevProps: SwitchProps): void;
     componentWillUnmount(): void;
     get adapter(): SwitchAdapter<SwitchProps, SwitchState>;
+    handleFocusVisible: (event: React.FocusEvent) => void;
+    handleBlur: (event: React.FocusEvent) => void;
     render(): JSX.Element;
 }
 export default Switch;

package/lib/cjs/switch/index.js

@@ -30,13 +30,23 @@ require("@douyinfe/semi-foundation/lib/cjs/switch/switch.css");
 
 var _spin = _interopRequireDefault(require("../spin"));
 
-/* eslint-disable max-len, jsx-a11y/role-supports-aria-props */
+/* eslint-disable max-len */
 class Switch extends _baseComponent.default {
   constructor(props) {
     super(props);
+
+    this.handleFocusVisible = event => {
+      this.foundation.handleFocusVisible(event);
+    };
+
+    this.handleBlur = event => {
+      this.foundation.handleBlur();
+    };
+
     this.state = {
       nativeControlChecked: false,
-      nativeControlDisabled: false
+      nativeControlDisabled: false,
+      focusVisible: false
     };
     this.switchRef = /*#__PURE__*/_react.default.createRef();
     this.foundation = new _foundation.default(this.adapter);
@@ -72,6 +82,11 @@ class Switch extends _baseComponent.default {
           nativeControlDisabled
         });
       },
+      setFocusVisible: focusVisible => {
+        this.setState({
+          focusVisible
+        });
+      },
       notifyChange: (checked, e) => {
         this.props.onChange(checked, e);
       }
@@ -81,7 +96,8 @@ class Switch extends _baseComponent.default {
   render() {
     const {
       nativeControlChecked,
-      nativeControlDisabled
+      nativeControlDisabled,
+      focusVisible
     } = this.state;
     const {
       className,
@@ -100,11 +116,11 @@ class Switch extends _baseComponent.default {
       [_constants.cssClasses.DISABLED]: nativeControlDisabled,
       [_constants.cssClasses.LARGE]: size === 'large',
       [_constants.cssClasses.SMALL]: size === 'small',
-      [_constants.cssClasses.LOADING]: loading
+      [_constants.cssClasses.LOADING]: loading,
+      [_constants.cssClasses.FOCUS]: focusVisible
     });
     const switchProps = {
       type: 'checkbox',
-      role: 'switch',
       className: _constants.cssClasses.NATIVE_CONTROL,
       disabled: nativeControlDisabled || loading,
       checked: nativeControlChecked || false
@@ -129,13 +145,17 @@ class Switch extends _baseComponent.default {
     }, uncheckedText) : null, /*#__PURE__*/_react.default.createElement("input", (0, _assign.default)({}, switchProps, {
       ref: this.switchRef,
       id: id,
+      role: 'switch',
       "aria-checked": nativeControlChecked,
       "aria-invalid": this.props['aria-invalid'],
       "aria-errormessage": this.props['aria-errormessage'],
       "aria-label": this.props['aria-label'],
       "aria-labelledby": this.props['aria-labelledby'],
       "aria-describedby": this.props["aria-describedby"],
-      onChange: e => this.foundation.handleChange(e.target.checked, e)
+      "aria-disabled": this.props['disabled'],
+      onChange: e => this.foundation.handleChange(e.target.checked, e),
+      onFocus: e => this.handleFocusVisible(e),
+      onBlur: e => this.handleBlur(e)
     })));
   }
 

package/lib/cjs/tabs/TabPane.js

@@ -75,6 +75,8 @@ class TabPane extends _react.PureComponent {
 
       return false;
     };
+    /* istanbul ignore next */
+
 
     this.hideScroll = () => {
       if (this.ref && this.ref.current) {
@@ -82,6 +84,8 @@ class TabPane extends _react.PureComponent {
         this.isAnimating = true;
       }
     };
+    /* istanbul ignore next */
+
 
     this.autoScroll = () => {
       if (this.ref && this.ref.current) {

package/lib/cjs/tabs/index.js

@@ -112,6 +112,8 @@ class Tabs extends _baseComponent.default {
     this.onTabClick = (activeKey, event) => {
       this.foundation.handleTabClick(activeKey, event);
     };
+    /* istanbul ignore next */
+
 
     this.rePosChildren = (children, activeKey) => {
       const newChildren = [];