@instructure/ui-buttons 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-buttons
 

package/es/BaseButton/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["type", "size", "elementRef", "as", "href", "color", "focusColor", "textAlign", "shape", "display", "withBackground", "withBorder", "isCondensed", "margin", "cursor", "onClick", "renderIcon", "tabIndex", "styles", "makeStyles"];
 
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -47,76 +47,39 @@ category: components/utilities
 ---
 @tsProps
 **/
-let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class BaseButton extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleElementRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-
-    this.handleClick = event => {
-      const onClick = this.props.onClick;
-      const interaction = this.interaction;
-
-      if (interaction !== 'enabled') {
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-
-      if (typeof onClick === 'function') {
-        onClick(event);
-      }
-    };
-
-    this.handleKeyDown = event => {
-      const _this$props = this.props,
-            onClick = _this$props.onClick,
-            onKeyDown = _this$props.onKeyDown,
-            href = _this$props.href;
-      const interaction = this.interaction;
-
-      if (typeof onKeyDown === 'function') {
-        onKeyDown(event);
-      } // behave like a button when space key is pressed
-
-
-      const _keycode$codes = keycode.codes,
-            space = _keycode$codes.space,
-            enter = _keycode$codes.enter;
-
-      if (this.elementType !== 'button' && [space, enter].includes(event.keyCode)) {
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (typeof onClick === 'function' && interaction === 'enabled') {
-          onClick(event);
-        }
-
-        if (href) {
-          this.ref && this.ref.click();
-        }
-      }
-    };
-  }
+let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class BaseButton extends Component {
+  static displayName = "BaseButton";
+  static componentId = 'BaseButton';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    type: 'button',
+    size: 'medium',
+    as: 'button',
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: void 0,
+    color: 'secondary',
+    shape: 'rectangle',
+    display: 'inline-block',
+    textAlign: 'start',
+    withBackground: true,
+    withBorder: true,
+    isCondensed: false,
+    margin: '0',
+    cursor: 'pointer'
+  };
+  ref = null;
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
+    var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStylesVariables);
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props3;
+    var _this$props$makeStyle2, _this$props2;
 
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStylesVariables);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
   }
 
   get _rootElement() {
@@ -131,9 +94,9 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   }
 
   get hasOnlyIconVisible() {
-    const _this$props4 = this.props,
-          children = _this$props4.children,
-          renderIcon = _this$props4.renderIcon;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          renderIcon = _this$props3.renderIcon;
     return !!(renderIcon && !hasVisibleChildren(children));
   }
 
@@ -172,10 +135,10 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   }
 
   get focusColor() {
-    const _this$props5 = this.props,
-          color = _this$props5.color,
-          focusColor = _this$props5.focusColor,
-          withBackground = _this$props5.withBackground; // Give user specified focusColor preference
+    const _this$props4 = this.props,
+          color = _this$props4.color,
+          focusColor = _this$props4.focusColor,
+          withBackground = _this$props4.withBackground; // Give user specified focusColor preference
 
     if (focusColor) {
       return focusColor;
@@ -200,6 +163,58 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     this.ref && this.ref.focus();
   }
 
+  handleElementRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
+
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+  handleClick = event => {
+    const onClick = this.props.onClick;
+    const interaction = this.interaction;
+
+    if (interaction !== 'enabled') {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    if (typeof onClick === 'function') {
+      onClick(event);
+    }
+  };
+  handleKeyDown = event => {
+    const _this$props5 = this.props,
+          onClick = _this$props5.onClick,
+          onKeyDown = _this$props5.onKeyDown,
+          href = _this$props5.href;
+    const interaction = this.interaction;
+
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event);
+    } // behave like a button when space key is pressed
+
+
+    const _keycode$codes = keycode.codes,
+          space = _keycode$codes.space,
+          enter = _keycode$codes.enter;
+
+    if (this.elementType !== 'button' && [space, enter].includes(event.keyCode)) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (typeof onClick === 'function' && interaction === 'enabled') {
+        onClick(event);
+      }
+
+      if (href) {
+        this.ref && this.ref.click();
+      }
+    }
+  };
+
   renderChildren() {
     const _this$props6 = this.props,
           renderIcon = _this$props6.renderIcon,
@@ -285,21 +300,6 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     }, this.renderChildren()));
   }
 
-}, _class2.displayName = "BaseButton", _class2.componentId = 'BaseButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  type: 'button',
-  size: 'medium',
-  as: 'button',
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  color: 'secondary',
-  shape: 'rectangle',
-  display: 'inline-block',
-  textAlign: 'start',
-  withBackground: true,
-  withBorder: true,
-  isCondensed: false,
-  margin: '0',
-  cursor: 'pointer'
-}, _class2)) || _class) || _class);
+}) || _class) || _class);
 export { BaseButton };
 export default BaseButton;

package/es/Button/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["children", "type", "size", "as", "color", "focusColor", "display", "textAlign", "withBackground", "margin", "cursor", "href", "renderIcon"];
 
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -41,25 +41,26 @@ category: components
 @tsProps
 **/
 // needed for listing the available theme variables on docs page
-let Button = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class Button extends Component {
-  constructor() {
-    super(...arguments);
-    this._buttonComponent = null;
-    this.ref = null;
-
-    this.handleElementRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-
-    this.handleButtonRef = component => {
-      this._buttonComponent = component;
-    };
-  }
+let Button = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class Button extends Component {
+  static displayName = "Button";
+  static componentId = 'Button';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    type: 'button',
+    size: 'medium',
+    as: 'button',
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: void 0,
+    color: 'secondary',
+    display: 'inline-block',
+    textAlign: 'center',
+    withBackground: true,
+    margin: '0',
+    cursor: 'pointer'
+  };
+  _buttonComponent = null;
+  ref = null;
 
   get focused() {
     return this._buttonComponent && this._buttonComponent.focused;
@@ -69,6 +70,18 @@ let Button = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable()
     this._buttonComponent && this._buttonComponent.focus();
   }
 
+  handleElementRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
+
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+  handleButtonRef = component => {
+    this._buttonComponent = component;
+  };
+
   render() {
     const _this$props = this.props,
           children = _this$props.children,
@@ -111,18 +124,6 @@ let Button = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable()
     return /*#__PURE__*/React.createElement(BaseButton, buttonProps, children);
   }
 
-}, _class2.displayName = "Button", _class2.componentId = 'Button', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  type: 'button',
-  size: 'medium',
-  as: 'button',
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  color: 'secondary',
-  display: 'inline-block',
-  textAlign: 'center',
-  withBackground: true,
-  margin: '0',
-  cursor: 'pointer'
-}, _class2)) || _class) || _class);
+}) || _class) || _class);
 export default Button;
 export { Button };

package/es/CloseButton/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["screenReaderLabel", "elementRef", "size", "onClick", "margin", "placement", "offset", "type", "as", "href", "cursor", "tabIndex", "styles"];
 
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -45,19 +45,30 @@ category: components
 ---
 @tsProps
 **/
-let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class CloseButton extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
+let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class CloseButton extends Component {
+  static displayName = "CloseButton";
+  static componentId = 'CloseButton';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: void 0,
+    type: 'button',
+    placement: 'static',
+    offset: 'x-small',
+    size: 'small',
+    margin: '0',
+    as: 'button',
+    cursor: 'pointer'
+  };
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
 
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -120,16 +131,6 @@ let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     }, jsx(ScreenReaderContent, null, screenReaderLabel)));
   }
 
-}, _class2.displayName = "CloseButton", _class2.componentId = 'CloseButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  type: 'button',
-  placement: 'static',
-  offset: 'x-small',
-  size: 'small',
-  margin: '0',
-  as: 'button',
-  cursor: 'pointer'
-}, _class2)) || _class) || _class);
+}) || _class) || _class);
 export default CloseButton;
 export { CloseButton };

package/es/CondensedButton/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["children", "type", "size", "elementRef", "as", "interaction", "color", "margin", "cursor", "href", "renderIcon"];
 
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -41,21 +41,31 @@ category: components
 @tsProps
 **/
 // needed for listing the available theme variables on docs page
-let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class CondensedButton extends Component {
-  constructor() {
-    super(...arguments);
-    this._baseButton = null;
-    this.ref = null;
+let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class CondensedButton extends Component {
+  static displayName = "CondensedButton";
+  static componentId = 'CondensedButton';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    type: 'button',
+    size: 'medium',
+    as: 'button',
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: void 0,
+    color: 'primary',
+    margin: '0',
+    cursor: 'pointer'
+  };
+  _baseButton = null;
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
 
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
 
   get focused() {
     return this._baseButton && this._baseButton.focused;
@@ -102,15 +112,6 @@ let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
     }), children);
   }
 
-}, _class2.displayName = "CondensedButton", _class2.componentId = 'CondensedButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  type: 'button',
-  size: 'medium',
-  as: 'button',
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  color: 'primary',
-  margin: '0',
-  cursor: 'pointer'
-}, _class2)) || _class) || _class);
+}) || _class) || _class);
 export default CondensedButton;
 export { CondensedButton };

package/es/IconButton/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["children", "renderIcon", "screenReaderLabel", "type", "size", "elementRef", "as", "interaction", "color", "focusColor", "shape", "withBackground", "withBorder", "margin", "cursor", "href"];
 
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -42,21 +42,34 @@ category: components
 @tsProps
 **/
 // needed for listing the available theme variables on docs page
-let IconButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class IconButton extends Component {
-  constructor() {
-    super(...arguments);
-    this._baseButton = null;
-    this.ref = null;
+let IconButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class IconButton extends Component {
+  static displayName = "IconButton";
+  static componentId = 'IconButton';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    type: 'button',
+    size: 'medium',
+    as: 'button',
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: void 0,
+    color: 'secondary',
+    shape: 'rectangle',
+    withBackground: true,
+    withBorder: true,
+    margin: '0',
+    cursor: 'pointer'
+  };
+  _baseButton = null;
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
 
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
 
   get focused() {
     return this._baseButton && this._baseButton.focused;
@@ -109,18 +122,6 @@ let IconButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testab
     }), /*#__PURE__*/React.createElement(ScreenReaderContent, null, screenReaderLabel));
   }
 
-}, _class2.displayName = "IconButton", _class2.componentId = 'IconButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  type: 'button',
-  size: 'medium',
-  as: 'button',
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  color: 'secondary',
-  shape: 'rectangle',
-  withBackground: true,
-  withBorder: true,
-  margin: '0',
-  cursor: 'pointer'
-}, _class2)) || _class) || _class);
+}) || _class) || _class);
 export default IconButton;
 export { IconButton };

package/es/ToggleButton/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["as", "color", "elementRef", "size", "interaction", "mountNode", "renderIcon", "renderTooltipContent", "screenReaderLabel", "status", "placement", "onClick"];
 
-var _dec, _class, _class2;
+var _dec, _class;
 
 /*
  * The MIT License (MIT)
@@ -39,24 +39,38 @@ category: components
 ---
 @tsProps
 **/
-let ToggleButton = (_dec = testable(), _dec(_class = (_class2 = class ToggleButton extends Component {
+let ToggleButton = (_dec = testable(), _dec(_class = class ToggleButton extends Component {
+  static displayName = "ToggleButton";
+  static componentId = 'ToggleButton';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    size: 'medium',
+    as: 'button',
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: void 0,
+    mountNode: null,
+    color: 'secondary',
+    placement: 'top center',
+    constrain: 'window'
+  };
+
   constructor(props) {
     super(props);
-    this.ref = null;
-
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-
     this.state = {
       isShowingTooltip: props.isShowingTooltip || false
     };
   }
 
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+
   get isShowingTooltip() {
     return typeof this.props.isShowingTooltip === 'undefined' ? this.state.isShowingTooltip : this.props.isShowingTooltip;
   }
@@ -109,15 +123,6 @@ let ToggleButton = (_dec = testable(), _dec(_class = (_class2 = class ToggleButt
     }), callRenderProp(renderIcon)));
   }
 
-}, _class2.displayName = "ToggleButton", _class2.componentId = 'ToggleButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  size: 'medium',
-  as: 'button',
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  mountNode: null,
-  color: 'secondary',
-  placement: 'top center',
-  constrain: 'window'
-}, _class2)) || _class);
+}) || _class);
 export { ToggleButton };
 export default ToggleButton;