@instructure/ui-tabs 8.25.1-snapshot-7 → 8.25.1-snapshot-10

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-7) (2022-06-13)
+## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
 
 **Note:** Version bump only for package @instructure/ui-tabs
 

package/es/Tabs/Panel/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles"];
 
-var _dec, _class, _class2;
+var _dec, _class;
 
 /*
  * The MIT License (MIT)
@@ -44,20 +44,18 @@ id: Tabs.Panel
 @tsProps
 **/
 
-let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class Panel extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Panel extends Component {
+  static displayName = "Panel";
+  static componentId = 'Tabs.Panel';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    isDisabled: false,
+    textAlign: 'start',
+    variant: 'default',
+    isSelected: false,
+    padding: 'small'
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -71,6 +69,16 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
+
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+
   render() {
     const _this$props3 = this.props,
           labelledBy = _this$props3.labelledBy,
@@ -110,12 +118,6 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
     }, children)));
   }
 
-}, _class2.displayName = "Panel", _class2.componentId = 'Tabs.Panel', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  isDisabled: false,
-  textAlign: 'start',
-  variant: 'default',
-  isSelected: false,
-  padding: 'small'
-}, _class2)) || _class);
+}) || _class);
 export default Panel;
 export { Panel };

package/es/Tabs/Tab/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["id", "variant", "isSelected", "isDisabled", "controls", "children", "styles"];
 
-var _dec, _class, _class2;
+var _dec, _class;
 
 /*
  * The MIT License (MIT)
@@ -43,61 +43,66 @@ id: Tabs.Tab
 @tsProps
 **/
 
-let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class Tab extends Component {
-  constructor() {
-    super(...arguments);
-
-    this.handleClick = event => {
-      const _this$props = this.props,
-            onClick = _this$props.onClick,
-            index = _this$props.index,
-            id = _this$props.id,
-            isDisabled = _this$props.isDisabled;
-
-      if (isDisabled) {
-        return;
-      }
-
-      if (typeof onClick === 'function') {
-        onClick(event, {
-          index,
-          id
-        });
-      }
-    };
-
-    this.handleKeyDown = event => {
-      const _this$props2 = this.props,
-            onKeyDown = _this$props2.onKeyDown,
-            index = _this$props2.index,
-            id = _this$props2.id,
-            isDisabled = _this$props2.isDisabled;
-
-      if (isDisabled) {
-        return;
-      }
-
-      if (typeof onKeyDown === 'function') {
-        onKeyDown(event, {
-          index,
-          id
-        });
-      }
-    };
-  }
+let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Tab extends Component {
+  static displayName = "Tab";
+  static componentId = 'Tabs.Tab';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    variant: 'default',
+    isDisabled: false,
+    isSelected: false
+  };
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props3;
+    var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props4;
+    var _this$props$makeStyle2, _this$props2;
 
-    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
+  handleClick = event => {
+    const _this$props3 = this.props,
+          onClick = _this$props3.onClick,
+          index = _this$props3.index,
+          id = _this$props3.id,
+          isDisabled = _this$props3.isDisabled;
+
+    if (isDisabled) {
+      return;
+    }
+
+    if (typeof onClick === 'function') {
+      onClick(event, {
+        index,
+        id
+      });
+    }
+  };
+  handleKeyDown = event => {
+    const _this$props4 = this.props,
+          onKeyDown = _this$props4.onKeyDown,
+          index = _this$props4.index,
+          id = _this$props4.id,
+          isDisabled = _this$props4.isDisabled;
+
+    if (isDisabled) {
+      return;
+    }
+
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event, {
+        index,
+        id
+      });
+    }
+  };
+
   render() {
     const _this$props5 = this.props,
           id = _this$props5.id,
@@ -125,10 +130,6 @@ let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
     }), callRenderProp(children));
   }
 
-}, _class2.displayName = "Tab", _class2.componentId = 'Tabs.Tab', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  variant: 'default',
-  isDisabled: false,
-  isSelected: false
-}, _class2)) || _class);
+}) || _class);
 export default Tab;
 export { Tab };

package/es/Tabs/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["children", "elementRef", "maxWidth", "variant", "margin", "screenReaderLabel", "onRequestTabChange", "tabOverflow", "styles"];
 
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _dec3, _class;
 
 /*
  * The MIT License (MIT)
@@ -53,64 +53,35 @@ category: components
 ---
 @tsProps
 **/
-let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Tabs extends Component {
+let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class Tabs extends Component {
+  static displayName = "Tabs";
+  static componentId = 'Tabs';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    variant: 'default',
+    shouldFocusOnRender: false,
+    tabOverflow: 'stack'
+  };
+  static Panel = Panel;
+  static Tab = Tab;
+  _tabList = null;
+  _focusable = null;
+  _tabListPosition;
+  _debounced;
+  _resizeListener;
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
+
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+
   constructor(props) {
     super(props);
-    this._tabList = null;
-    this._focusable = null;
-    this._tabListPosition = void 0;
-    this._debounced = void 0;
-    this._resizeListener = void 0;
-    this.ref = null;
-
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-
-    this.handleTabClick = (event, _ref) => {
-      let index = _ref.index;
-      const nextTab = this.getNextTab(index, 0);
-      this.fireOnChange(event, nextTab);
-    };
-
-    this.handleTabKeyDown = (event, _ref2) => {
-      let index = _ref2.index;
-      let nextTab;
-
-      if (event.keyCode === keycode.codes.up || event.keyCode === keycode.codes.left) {
-        // Select next tab to the left
-        nextTab = this.getNextTab(index, -1);
-      } else if (event.keyCode === keycode.codes.down || event.keyCode === keycode.codes.right) {
-        // Select next tab to the right
-        nextTab = this.getNextTab(index, 1);
-      }
-
-      if (nextTab) {
-        event.preventDefault();
-        this.fireOnChange(event, nextTab);
-      }
-    };
-
-    this.handleResize = () => {
-      this.setState({
-        withTabListOverflow: this._tabList.scrollWidth > this._tabList.offsetWidth
-      });
-      this._tabListPosition = getBoundingClientRect(this._tabList);
-    };
-
-    this.handleFocusableRef = el => {
-      this._focusable = el;
-    };
-
-    this.handleTabListRef = el => {
-      this._tabList = el;
-    };
-
     this.state = {
       withTabListOverflow: false
     };
@@ -248,6 +219,35 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
     }
   }
 
+  handleTabClick = (event, _ref) => {
+    let index = _ref.index;
+    const nextTab = this.getNextTab(index, 0);
+    this.fireOnChange(event, nextTab);
+  };
+  handleTabKeyDown = (event, _ref2) => {
+    let index = _ref2.index;
+    let nextTab;
+
+    if (event.keyCode === keycode.codes.up || event.keyCode === keycode.codes.left) {
+      // Select next tab to the left
+      nextTab = this.getNextTab(index, -1);
+    } else if (event.keyCode === keycode.codes.down || event.keyCode === keycode.codes.right) {
+      // Select next tab to the right
+      nextTab = this.getNextTab(index, 1);
+    }
+
+    if (nextTab) {
+      event.preventDefault();
+      this.fireOnChange(event, nextTab);
+    }
+  };
+  handleResize = () => {
+    this.setState({
+      withTabListOverflow: this._tabList.scrollWidth > this._tabList.offsetWidth
+    });
+    this._tabListPosition = getBoundingClientRect(this._tabList);
+  };
+
   getNextTab(startIndex, step) {
     const tabs = React.Children.toArray(this.props.children).map(child => matchComponentTypes(child, [Panel]) && child);
     const count = tabs.length;
@@ -315,6 +315,13 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
     });
   }
 
+  handleFocusableRef = el => {
+    this._focusable = el;
+  };
+  handleTabListRef = el => {
+    this._tabList = el;
+  };
+
   focus() {
     this._focusable && typeof this._focusable.focus === 'function' && this._focusable.focus();
   }
@@ -385,10 +392,6 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
     }, panels));
   }
 
-}, _class2.displayName = "Tabs", _class2.componentId = 'Tabs', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  variant: 'default',
-  shouldFocusOnRender: false,
-  tabOverflow: 'stack'
-}, _class2.Panel = Panel, _class2.Tab = Tab, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 export default Tabs;
 export { Tabs, Panel };

package/lib/Tabs/Panel/index.js

@@ -27,7 +27,7 @@ var _props = require("./props");
 
 const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles"];
 
-var _dec, _class, _class2;
+var _dec, _class;
 
 /**
 ---
@@ -36,20 +36,18 @@ id: Tabs.Panel
 ---
 @tsProps
 **/
-let Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class Panel extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+let Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class Panel extends _react.Component {
+  static displayName = "Panel";
+  static componentId = 'Tabs.Panel';
+  static allowedProps = _props.allowedProps;
+  static propTypes = _props.propTypes;
+  static defaultProps = {
+    isDisabled: false,
+    textAlign: 'start',
+    variant: 'default',
+    isSelected: false,
+    padding: 'small'
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -63,6 +61,16 @@ let Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
+
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+
   render() {
     const _this$props3 = this.props,
           labelledBy = _this$props3.labelledBy,
@@ -101,13 +109,7 @@ let Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     }, children)));
   }
 
-}, _class2.displayName = "Panel", _class2.componentId = 'Tabs.Panel', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
-  isDisabled: false,
-  textAlign: 'start',
-  variant: 'default',
-  isSelected: false,
-  padding: 'small'
-}, _class2)) || _class);
+}) || _class);
 exports.Panel = Panel;
 var _default = Panel;
 exports.default = _default;

package/lib/Tabs/Tab/index.js

@@ -29,7 +29,7 @@ var _props = require("./props");
 
 const _excluded = ["id", "variant", "isSelected", "isDisabled", "controls", "children", "styles"];
 
-var _dec, _class, _class2;
+var _dec, _class;
 
 /**
 ---
@@ -38,61 +38,66 @@ id: Tabs.Tab
 ---
 @tsProps
 **/
-let Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class Tab extends _react.Component {
-  constructor() {
-    super(...arguments);
-
-    this.handleClick = event => {
-      const _this$props = this.props,
-            onClick = _this$props.onClick,
-            index = _this$props.index,
-            id = _this$props.id,
-            isDisabled = _this$props.isDisabled;
-
-      if (isDisabled) {
-        return;
-      }
-
-      if (typeof onClick === 'function') {
-        onClick(event, {
-          index,
-          id
-        });
-      }
-    };
-
-    this.handleKeyDown = event => {
-      const _this$props2 = this.props,
-            onKeyDown = _this$props2.onKeyDown,
-            index = _this$props2.index,
-            id = _this$props2.id,
-            isDisabled = _this$props2.isDisabled;
-
-      if (isDisabled) {
-        return;
-      }
-
-      if (typeof onKeyDown === 'function') {
-        onKeyDown(event, {
-          index,
-          id
-        });
-      }
-    };
-  }
+let Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class Tab extends _react.Component {
+  static displayName = "Tab";
+  static componentId = 'Tabs.Tab';
+  static allowedProps = _props.allowedProps;
+  static propTypes = _props.propTypes;
+  static defaultProps = {
+    variant: 'default',
+    isDisabled: false,
+    isSelected: false
+  };
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props3;
+    var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props4;
+    var _this$props$makeStyle2, _this$props2;
 
-    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
+  handleClick = event => {
+    const _this$props3 = this.props,
+          onClick = _this$props3.onClick,
+          index = _this$props3.index,
+          id = _this$props3.id,
+          isDisabled = _this$props3.isDisabled;
+
+    if (isDisabled) {
+      return;
+    }
+
+    if (typeof onClick === 'function') {
+      onClick(event, {
+        index,
+        id
+      });
+    }
+  };
+  handleKeyDown = event => {
+    const _this$props4 = this.props,
+          onKeyDown = _this$props4.onKeyDown,
+          index = _this$props4.index,
+          id = _this$props4.id,
+          isDisabled = _this$props4.isDisabled;
+
+    if (isDisabled) {
+      return;
+    }
+
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event, {
+        index,
+        id
+      });
+    }
+  };
+
   render() {
     const _this$props5 = this.props,
           id = _this$props5.id,
@@ -119,11 +124,7 @@ let Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
     }), (0, _callRenderProp.callRenderProp)(children));
   }
 
-}, _class2.displayName = "Tab", _class2.componentId = 'Tabs.Tab', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
-  variant: 'default',
-  isDisabled: false,
-  isSelected: false
-}, _class2)) || _class);
+}) || _class);
 exports.Tab = Tab;
 var _default = Tab;
 exports.default = _default;