@instructure/ui-buttons 8.10.1 → 8.10.3-snapshot.3

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.10.2](https://github.com/instructure/instructure-ui/compare/v8.10.1...v8.10.2) (2021-10-01)
+
+**Note:** Version bump only for package @instructure/ui-buttons
+
 ## [8.10.1](https://github.com/instructure/instructure-ui/compare/v8.10.0...v8.10.1) (2021-10-01)
 
 **Note:** Version bump only for package @instructure/ui-buttons

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 Instructure, Inc.
+
+**Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions.**
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/es/BaseButton/index.js

@@ -49,10 +49,14 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   constructor(...args) {
     super(...args);
     this._rootElement = null;
+    this.ref = null;
 
     this.handleElementRef = el => {
+      var _this$props$elementRe, _this$props;
+
       this._rootElement = el;
-      this.props.elementRef(el);
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
     };
 
     this.handleClick = event => {
@@ -71,10 +75,10 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     };
 
     this.handleKeyDown = event => {
-      const _this$props = this.props,
-            onClick = _this$props.onClick,
-            onKeyDown = _this$props.onKeyDown,
-            href = _this$props.href;
+      const _this$props2 = this.props,
+            onClick = _this$props2.onClick,
+            onKeyDown = _this$props2.onKeyDown,
+            href = _this$props2.href;
       const interaction = this.interaction;
       onKeyDown(event); // behave like a button when space key is pressed
 
@@ -113,9 +117,9 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   }
 
   get hasOnlyIconVisible() {
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          renderIcon = _this$props2.renderIcon;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          renderIcon = _this$props3.renderIcon;
     return !!(renderIcon && !hasVisibleChildren(children));
   }
 
@@ -142,10 +146,10 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   }
 
   get focusColor() {
-    const _this$props3 = this.props,
-          color = _this$props3.color,
-          focusColor = _this$props3.focusColor,
-          withBackground = _this$props3.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;
@@ -171,10 +175,10 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   }
 
   renderChildren() {
-    const _this$props4 = this.props,
-          renderIcon = _this$props4.renderIcon,
-          children = _this$props4.children,
-          styles = _this$props4.styles;
+    const _this$props5 = this.props,
+          renderIcon = _this$props5.renderIcon,
+          children = _this$props5.children,
+          styles = _this$props5.styles;
     const wrappedChildren = jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.children
     }, children);
@@ -202,28 +206,28 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   }
 
   render() {
-    const _this$props5 = this.props,
-          type = _this$props5.type,
-          size = _this$props5.size,
-          elementRef = _this$props5.elementRef,
-          as = _this$props5.as,
-          href = _this$props5.href,
-          color = _this$props5.color,
-          focusColor = _this$props5.focusColor,
-          textAlign = _this$props5.textAlign,
-          shape = _this$props5.shape,
-          display = _this$props5.display,
-          withBackground = _this$props5.withBackground,
-          withBorder = _this$props5.withBorder,
-          isCondensed = _this$props5.isCondensed,
-          margin = _this$props5.margin,
-          cursor = _this$props5.cursor,
-          onClick = _this$props5.onClick,
-          renderIcon = _this$props5.renderIcon,
-          tabIndex = _this$props5.tabIndex,
-          styles = _this$props5.styles,
-          makeStyles = _this$props5.makeStyles,
-          props = _objectWithoutProperties(_this$props5, _excluded);
+    const _this$props6 = this.props,
+          type = _this$props6.type,
+          size = _this$props6.size,
+          elementRef = _this$props6.elementRef,
+          as = _this$props6.as,
+          href = _this$props6.href,
+          color = _this$props6.color,
+          focusColor = _this$props6.focusColor,
+          textAlign = _this$props6.textAlign,
+          shape = _this$props6.shape,
+          display = _this$props6.display,
+          withBackground = _this$props6.withBackground,
+          withBorder = _this$props6.withBorder,
+          isCondensed = _this$props6.isCondensed,
+          margin = _this$props6.margin,
+          cursor = _this$props6.cursor,
+          onClick = _this$props6.onClick,
+          renderIcon = _this$props6.renderIcon,
+          tabIndex = _this$props6.tabIndex,
+          styles = _this$props6.styles,
+          makeStyles = _this$props6.makeStyles,
+          props = _objectWithoutProperties(_this$props6, _excluded);
 
     const isDisabled = this.isDisabled,
           isEnabled = this.isEnabled,

package/es/Button/index.js

@@ -44,10 +44,12 @@ let Button = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable()
   constructor(...args) {
     super(...args);
     this._buttonComponent = null;
+    this.ref = null;
 
     this.handleElementRef = el => {
       const elementRef = this.props.elementRef;
-      elementRef(el);
+      this.ref = el;
+      elementRef === null || elementRef === void 0 ? void 0 : elementRef(el);
     };
 
     this.handleButtonRef = component => {

package/es/CloseButton/index.js

@@ -45,6 +45,18 @@ category: components
 ---
 **/
 let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class CloseButton extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+
+    this.handleRef = el => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
+  }
+
   componentDidMount() {
     this.props.makeStyles();
   }
@@ -65,27 +77,27 @@ let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
 
   render() {
-    const _this$props = this.props,
-          screenReaderLabel = _this$props.screenReaderLabel,
-          elementRef = _this$props.elementRef,
-          size = _this$props.size,
-          onClick = _this$props.onClick,
-          margin = _this$props.margin,
-          placement = _this$props.placement,
-          offset = _this$props.offset,
-          type = _this$props.type,
-          as = _this$props.as,
-          href = _this$props.href,
-          cursor = _this$props.cursor,
-          tabIndex = _this$props.tabIndex,
-          styles = _this$props.styles,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props2 = this.props,
+          screenReaderLabel = _this$props2.screenReaderLabel,
+          elementRef = _this$props2.elementRef,
+          size = _this$props2.size,
+          onClick = _this$props2.onClick,
+          margin = _this$props2.margin,
+          placement = _this$props2.placement,
+          offset = _this$props2.offset,
+          type = _this$props2.type,
+          as = _this$props2.as,
+          href = _this$props2.href,
+          cursor = _this$props2.cursor,
+          tabIndex = _this$props2.tabIndex,
+          styles = _this$props2.styles,
+          props = _objectWithoutProperties(_this$props2, _excluded);
 
     return jsx("span", Object.assign({}, passthroughProps(props), {
       css: styles === null || styles === void 0 ? void 0 : styles.closeButton
     }), jsx(BaseButton, {
       renderIcon: IconXSolid,
-      elementRef: elementRef,
+      elementRef: this.handleRef,
       interaction: this.interaction,
       type: type,
       color: this.color,

package/es/CondensedButton/index.js

@@ -44,6 +44,14 @@ let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
   constructor(...args) {
     super(...args);
     this._baseButton = null;
+    this.ref = null;
+
+    this.handleRef = el => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
   }
 
   get focused() {
@@ -55,19 +63,19 @@ let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
   }
 
   render() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          type = _this$props.type,
-          size = _this$props.size,
-          elementRef = _this$props.elementRef,
-          as = _this$props.as,
-          interaction = _this$props.interaction,
-          color = _this$props.color,
-          margin = _this$props.margin,
-          cursor = _this$props.cursor,
-          href = _this$props.href,
-          renderIcon = _this$props.renderIcon,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props2 = this.props,
+          children = _this$props2.children,
+          type = _this$props2.type,
+          size = _this$props2.size,
+          elementRef = _this$props2.elementRef,
+          as = _this$props2.as,
+          interaction = _this$props2.interaction,
+          color = _this$props2.color,
+          margin = _this$props2.margin,
+          cursor = _this$props2.cursor,
+          href = _this$props2.href,
+          renderIcon = _this$props2.renderIcon,
+          props = _objectWithoutProperties(_this$props2, _excluded);
 
     const themeOverride = this.props.themeOverride;
     return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, passthroughProps(props), {
@@ -76,7 +84,7 @@ let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
       withBorder: false,
       type: type,
       size: size,
-      elementRef: elementRef,
+      elementRef: this.handleRef,
       as: as,
       interaction: interaction,
       color: color,

package/es/IconButton/index.js

@@ -45,6 +45,14 @@ let IconButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testab
   constructor(...args) {
     super(...args);
     this._baseButton = null;
+    this.ref = null;
+
+    this.handleRef = el => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
   }
 
   get focused() {
@@ -56,30 +64,30 @@ let IconButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testab
   }
 
   render() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          renderIcon = _this$props.renderIcon,
-          screenReaderLabel = _this$props.screenReaderLabel,
-          type = _this$props.type,
-          size = _this$props.size,
-          elementRef = _this$props.elementRef,
-          as = _this$props.as,
-          interaction = _this$props.interaction,
-          color = _this$props.color,
-          focusColor = _this$props.focusColor,
-          shape = _this$props.shape,
-          withBackground = _this$props.withBackground,
-          withBorder = _this$props.withBorder,
-          margin = _this$props.margin,
-          cursor = _this$props.cursor,
-          href = _this$props.href,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props2 = this.props,
+          children = _this$props2.children,
+          renderIcon = _this$props2.renderIcon,
+          screenReaderLabel = _this$props2.screenReaderLabel,
+          type = _this$props2.type,
+          size = _this$props2.size,
+          elementRef = _this$props2.elementRef,
+          as = _this$props2.as,
+          interaction = _this$props2.interaction,
+          color = _this$props2.color,
+          focusColor = _this$props2.focusColor,
+          shape = _this$props2.shape,
+          withBackground = _this$props2.withBackground,
+          withBorder = _this$props2.withBorder,
+          margin = _this$props2.margin,
+          cursor = _this$props2.cursor,
+          href = _this$props2.href,
+          props = _objectWithoutProperties(_this$props2, _excluded);
 
     const themeOverride = this.props.themeOverride;
     return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, passthroughProps(props), {
       type: type,
       size: size,
-      elementRef: elementRef,
+      elementRef: this.handleRef,
       as: as,
       interaction: interaction,
       color: color,

package/es/ToggleButton/index.js

@@ -41,6 +41,15 @@ category: components
 let ToggleButton = (_dec = testable(), _dec(_class = (_temp = _class2 = class ToggleButton extends Component {
   constructor(props) {
     super(props);
+    this.ref = null;
+
+    this.handleRef = el => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
+
     this.state = {
       isShowingTooltip: props.isShowingTooltip || false
     };
@@ -51,20 +60,20 @@ let ToggleButton = (_dec = testable(), _dec(_class = (_temp = _class2 = class To
   }
 
   render() {
-    const _this$props = this.props,
-          as = _this$props.as,
-          color = _this$props.color,
-          elementRef = _this$props.elementRef,
-          size = _this$props.size,
-          interaction = _this$props.interaction,
-          mountNode = _this$props.mountNode,
-          renderIcon = _this$props.renderIcon,
-          renderTooltipContent = _this$props.renderTooltipContent,
-          screenReaderLabel = _this$props.screenReaderLabel,
-          status = _this$props.status,
-          placement = _this$props.placement,
-          onClick = _this$props.onClick,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props2 = this.props,
+          as = _this$props2.as,
+          color = _this$props2.color,
+          elementRef = _this$props2.elementRef,
+          size = _this$props2.size,
+          interaction = _this$props2.interaction,
+          mountNode = _this$props2.mountNode,
+          renderIcon = _this$props2.renderIcon,
+          renderTooltipContent = _this$props2.renderTooltipContent,
+          screenReaderLabel = _this$props2.screenReaderLabel,
+          status = _this$props2.status,
+          placement = _this$props2.placement,
+          onClick = _this$props2.onClick,
+          props = _objectWithoutProperties(_this$props2, _excluded);
 
     return /*#__PURE__*/React.createElement(Tooltip, {
       renderTip: renderTooltipContent,
@@ -89,7 +98,7 @@ let ToggleButton = (_dec = testable(), _dec(_class = (_temp = _class2 = class To
       withBorder: false,
       color: color,
       size: size,
-      elementRef: elementRef,
+      elementRef: this.handleRef,
       as: as,
       onClick: onClick,
       interaction: interaction,

package/lib/BaseButton/index.js

@@ -50,10 +50,14 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   constructor(...args) {
     super(...args);
     this._rootElement = null;
+    this.ref = null;
 
     this.handleElementRef = el => {
+      var _this$props$elementRe, _this$props;
+
       this._rootElement = el;
-      this.props.elementRef(el);
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
     };
 
     this.handleClick = event => {
@@ -72,10 +76,10 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     };
 
     this.handleKeyDown = event => {
-      const _this$props = this.props,
-            onClick = _this$props.onClick,
-            onKeyDown = _this$props.onKeyDown,
-            href = _this$props.href;
+      const _this$props2 = this.props,
+            onClick = _this$props2.onClick,
+            onKeyDown = _this$props2.onKeyDown,
+            href = _this$props2.href;
       const interaction = this.interaction;
       onKeyDown(event); // behave like a button when space key is pressed
 
@@ -114,9 +118,9 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   get hasOnlyIconVisible() {
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          renderIcon = _this$props2.renderIcon;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          renderIcon = _this$props3.renderIcon;
     return !!(renderIcon && !(0, _hasVisibleChildren.hasVisibleChildren)(children));
   }
 
@@ -143,10 +147,10 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   get focusColor() {
-    const _this$props3 = this.props,
-          color = _this$props3.color,
-          focusColor = _this$props3.focusColor,
-          withBackground = _this$props3.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;
@@ -172,10 +176,10 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   renderChildren() {
-    const _this$props4 = this.props,
-          renderIcon = _this$props4.renderIcon,
-          children = _this$props4.children,
-          styles = _this$props4.styles;
+    const _this$props5 = this.props,
+          renderIcon = _this$props5.renderIcon,
+          children = _this$props5.children,
+          styles = _this$props5.styles;
     const wrappedChildren = (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.children
     }, children);
@@ -203,28 +207,28 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   render() {
-    const _this$props5 = this.props,
-          type = _this$props5.type,
-          size = _this$props5.size,
-          elementRef = _this$props5.elementRef,
-          as = _this$props5.as,
-          href = _this$props5.href,
-          color = _this$props5.color,
-          focusColor = _this$props5.focusColor,
-          textAlign = _this$props5.textAlign,
-          shape = _this$props5.shape,
-          display = _this$props5.display,
-          withBackground = _this$props5.withBackground,
-          withBorder = _this$props5.withBorder,
-          isCondensed = _this$props5.isCondensed,
-          margin = _this$props5.margin,
-          cursor = _this$props5.cursor,
-          onClick = _this$props5.onClick,
-          renderIcon = _this$props5.renderIcon,
-          tabIndex = _this$props5.tabIndex,
-          styles = _this$props5.styles,
-          makeStyles = _this$props5.makeStyles,
-          props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
+    const _this$props6 = this.props,
+          type = _this$props6.type,
+          size = _this$props6.size,
+          elementRef = _this$props6.elementRef,
+          as = _this$props6.as,
+          href = _this$props6.href,
+          color = _this$props6.color,
+          focusColor = _this$props6.focusColor,
+          textAlign = _this$props6.textAlign,
+          shape = _this$props6.shape,
+          display = _this$props6.display,
+          withBackground = _this$props6.withBackground,
+          withBorder = _this$props6.withBorder,
+          isCondensed = _this$props6.isCondensed,
+          margin = _this$props6.margin,
+          cursor = _this$props6.cursor,
+          onClick = _this$props6.onClick,
+          renderIcon = _this$props6.renderIcon,
+          tabIndex = _this$props6.tabIndex,
+          styles = _this$props6.styles,
+          makeStyles = _this$props6.makeStyles,
+          props = (0, _objectWithoutProperties2.default)(_this$props6, _excluded);
     const isDisabled = this.isDisabled,
           isEnabled = this.isEnabled,
           isReadOnly = this.isReadOnly;

package/lib/Button/index.js

@@ -41,10 +41,12 @@ let Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0,
   constructor(...args) {
     super(...args);
     this._buttonComponent = null;
+    this.ref = null;
 
     this.handleElementRef = el => {
       const elementRef = this.props.elementRef;
-      elementRef(el);
+      this.ref = el;
+      elementRef === null || elementRef === void 0 ? void 0 : elementRef(el);
     };
 
     this.handleButtonRef = component => {

package/lib/CloseButton/index.js

@@ -41,6 +41,18 @@ category: components
 ---
 **/
 let CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class CloseButton extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+
+    this.handleRef = el => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
+  }
+
   componentDidMount() {
     this.props.makeStyles();
   }
@@ -61,26 +73,26 @@ let CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   render() {
-    const _this$props = this.props,
-          screenReaderLabel = _this$props.screenReaderLabel,
-          elementRef = _this$props.elementRef,
-          size = _this$props.size,
-          onClick = _this$props.onClick,
-          margin = _this$props.margin,
-          placement = _this$props.placement,
-          offset = _this$props.offset,
-          type = _this$props.type,
-          as = _this$props.as,
-          href = _this$props.href,
-          cursor = _this$props.cursor,
-          tabIndex = _this$props.tabIndex,
-          styles = _this$props.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props2 = this.props,
+          screenReaderLabel = _this$props2.screenReaderLabel,
+          elementRef = _this$props2.elementRef,
+          size = _this$props2.size,
+          onClick = _this$props2.onClick,
+          margin = _this$props2.margin,
+          placement = _this$props2.placement,
+          offset = _this$props2.offset,
+          type = _this$props2.type,
+          as = _this$props2.as,
+          href = _this$props2.href,
+          cursor = _this$props2.cursor,
+          tabIndex = _this$props2.tabIndex,
+          styles = _this$props2.styles,
+          props = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
     return (0, _emotion.jsx)("span", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
       css: styles === null || styles === void 0 ? void 0 : styles.closeButton
     }), (0, _emotion.jsx)(_BaseButton.BaseButton, {
       renderIcon: _IconXSolid.IconXSolid,
-      elementRef: elementRef,
+      elementRef: this.handleRef,
       interaction: this.interaction,
       type: type,
       color: this.color,