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

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-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
+## [8.25.1-snapshot-15](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-15) (2022-06-23)
 
 **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;
+var _dec, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -44,18 +44,20 @@ id: Tabs.Panel
 @tsProps
 **/
 
-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'
-  };
+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);
+      }
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -69,16 +71,6 @@ 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,
@@ -118,6 +110,12 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
     }, children)));
   }
 
-}) || _class);
+}, _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);
 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;
+var _dec, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -43,66 +43,61 @@ id: Tabs.Tab
 @tsProps
 **/
 
-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
-  };
+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
+        });
+      }
+    };
+  }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props3;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
+    var _this$props$makeStyle2, _this$props4;
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
   }
 
-  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,
@@ -130,6 +125,10 @@ let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
     }), callRenderProp(children));
   }
 
-}) || _class);
+}, _class2.displayName = "Tab", _class2.componentId = 'Tabs.Tab', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
+  variant: 'default',
+  isDisabled: false,
+  isSelected: false
+}, _class2)) || _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;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -53,35 +53,64 @@ category: components
 ---
 @tsProps
 **/
-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);
-    }
-  };
-
+let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Tabs extends Component {
   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
     };
@@ -219,35 +248,6 @@ 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,13 +315,6 @@ 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();
   }
@@ -392,6 +385,10 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
     }, panels));
   }
 
-}) || _class) || _class) || _class);
+}, _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);
 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;
+var _dec, _class, _class2;
 
 /**
 ---
@@ -36,18 +36,20 @@ id: Tabs.Panel
 ---
 @tsProps
 **/
-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'
-  };
+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);
+      }
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -61,16 +63,6 @@ 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,
@@ -109,7 +101,13 @@ let Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     }, children)));
   }
 
-}) || _class);
+}, _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);
 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;
+var _dec, _class, _class2;
 
 /**
 ---
@@ -38,66 +38,61 @@ id: Tabs.Tab
 ---
 @tsProps
 **/
-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
-  };
+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
+        });
+      }
+    };
+  }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props3;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
+    var _this$props$makeStyle2, _this$props4;
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
   }
 
-  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,
@@ -124,7 +119,11 @@ let Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
     }), (0, _callRenderProp.callRenderProp)(children));
   }
 
-}) || _class);
+}, _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);
 exports.Tab = Tab;
 var _default = Tab;
 exports.default = _default;