@instructure/ui-buttons 8.33.2-snapshot-0 → 8.33.2

package/CHANGELOG.md

@@ -3,14 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.33.2-snapshot-0](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2-snapshot-0) (2023-01-13)
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
 
 **Note:** Version bump only for package @instructure/ui-buttons
 
-
-
-
-
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-buttons

package/es/BaseButton/BaseButtonLocator.js

@@ -21,16 +21,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { locator } from '@instructure/ui-test-locator';
 import { find } from '@instructure/ui-test-queries';
-import { BaseButton } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { BaseButton } from './index';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const BaseButtonLocator = locator(BaseButton.selector, {
   click: async function (element) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
-
     return (await find(element, 'a,button,[role="button"]')).click(...args);
   }
 });

package/es/BaseButton/index.js

@@ -1,8 +1,6 @@
 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;
-
 /*
  * The MIT License (MIT)
  *
@@ -40,7 +38,6 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components/utilities
@@ -51,168 +48,138 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   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;
+        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
-
+      }
 
+      // behave like a button when space key is pressed
       const _keycode$codes = keycode.codes,
-            space = _keycode$codes.space,
-            enter = _keycode$codes.enter;
-
+        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();
         }
       }
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props2;
-
     (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStylesVariables);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props3;
-
     (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStylesVariables);
   }
-
   get _rootElement() {
     return this.ref;
   }
-
   get makeStylesVariables() {
     return {
       isDisabled: this.isDisabled,
       hasOnlyIconVisible: this.hasOnlyIconVisible
     };
   }
-
   get hasOnlyIconVisible() {
     const _this$props4 = this.props,
-          children = _this$props4.children,
-          renderIcon = _this$props4.renderIcon;
+      children = _this$props4.children,
+      renderIcon = _this$props4.renderIcon;
     return !!(renderIcon && !hasVisibleChildren(children));
   }
-
   get elementType() {
     return getElementType(BaseButton, this.props);
   }
-
   get interaction() {
     return getInteraction({
       props: this.props
     });
   }
-
   get isDisabled() {
     return this.interaction === 'disabled';
   }
-
   get isReadOnly() {
     return this.interaction === 'readonly';
   }
-
   get isEnabled() {
     return this.interaction === 'enabled';
-  } // TODO: delete once the type of tabIndex is changed to number only
-
+  }
 
+  // TODO: delete once the type of tabIndex is changed to number only
   get tabIndex() {
     const tabIndex = this.props.tabIndex;
-
     if (typeof tabIndex === 'string') {
       warn(false, 'The `string` value for `tabIndex` is deprecated. Only `number` type will be accepted from V9.0.0.');
       return parseInt(tabIndex);
     }
-
     return tabIndex;
   }
-
   get focusColor() {
     const _this$props5 = this.props,
-          color = _this$props5.color,
-          focusColor = _this$props5.focusColor,
-          withBackground = _this$props5.withBackground; // Give user specified focusColor preference
+      color = _this$props5.color,
+      focusColor = _this$props5.focusColor,
+      withBackground = _this$props5.withBackground;
 
+    // Give user specified focusColor preference
     if (focusColor) {
       return focusColor;
-    } // The `primary-inverse` background has an info focus outline
+    }
+
+    // The `primary-inverse` background has an info focus outline
     // by default since it is replacing the `light` button variant.
     // Override the focus color with info even though it is
     // an inverse color
-
-
     if (color === 'primary-inverse' && withBackground) {
       return 'info';
     }
-
     return color.includes('inverse') ? 'inverse' : 'info';
   }
-
   get focused() {
     return isActiveElement(this.ref);
   }
-
   focus() {
     this.ref && this.ref.focus();
   }
-
   renderChildren() {
     const _this$props6 = this.props,
-          renderIcon = _this$props6.renderIcon,
-          children = _this$props6.children,
-          styles = _this$props6.styles;
+      renderIcon = _this$props6.renderIcon,
+      children = _this$props6.children,
+      styles = _this$props6.styles;
     const wrappedChildren = jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.children
     }, children);
-
     if (!renderIcon) {
       return wrappedChildren;
     }
-
     const hasOnlyIconVisible = this.hasOnlyIconVisible;
     const wrappedIcon = jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
@@ -230,34 +197,32 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       css: styles === null || styles === void 0 ? void 0 : styles.childrenLayout
     }, flexChildren);
   }
-
   render() {
     const _this$props7 = this.props,
-          type = _this$props7.type,
-          size = _this$props7.size,
-          elementRef = _this$props7.elementRef,
-          as = _this$props7.as,
-          href = _this$props7.href,
-          color = _this$props7.color,
-          focusColor = _this$props7.focusColor,
-          textAlign = _this$props7.textAlign,
-          shape = _this$props7.shape,
-          display = _this$props7.display,
-          withBackground = _this$props7.withBackground,
-          withBorder = _this$props7.withBorder,
-          isCondensed = _this$props7.isCondensed,
-          margin = _this$props7.margin,
-          cursor = _this$props7.cursor,
-          onClick = _this$props7.onClick,
-          renderIcon = _this$props7.renderIcon,
-          tabIndex = _this$props7.tabIndex,
-          styles = _this$props7.styles,
-          makeStyles = _this$props7.makeStyles,
-          props = _objectWithoutProperties(_this$props7, _excluded);
-
+      type = _this$props7.type,
+      size = _this$props7.size,
+      elementRef = _this$props7.elementRef,
+      as = _this$props7.as,
+      href = _this$props7.href,
+      color = _this$props7.color,
+      focusColor = _this$props7.focusColor,
+      textAlign = _this$props7.textAlign,
+      shape = _this$props7.shape,
+      display = _this$props7.display,
+      withBackground = _this$props7.withBackground,
+      withBorder = _this$props7.withBorder,
+      isCondensed = _this$props7.isCondensed,
+      margin = _this$props7.margin,
+      cursor = _this$props7.cursor,
+      onClick = _this$props7.onClick,
+      renderIcon = _this$props7.renderIcon,
+      tabIndex = _this$props7.tabIndex,
+      styles = _this$props7.styles,
+      makeStyles = _this$props7.makeStyles,
+      props = _objectWithoutProperties(_this$props7, _excluded);
     const isDisabled = this.isDisabled,
-          isEnabled = this.isEnabled,
-          isReadOnly = this.isReadOnly;
+      isEnabled = this.isEnabled,
+      isReadOnly = this.isReadOnly;
     const tabIndexNumber = this.tabIndex;
     return jsx(View, Object.assign({}, passthroughProps(props), {
       as: this.elementType,
@@ -284,7 +249,6 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       css: styles === null || styles === void 0 ? void 0 : styles.content
     }, this.renderChildren()));
   }
-
 }, _class2.displayName = "BaseButton", _class2.componentId = 'BaseButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   type: 'button',
   size: 'medium',

package/es/BaseButton/locator.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { BaseButtonLocator } from './BaseButtonLocator';
 export { BaseButtonLocator };
 export default BaseButtonLocator;

package/es/BaseButton/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {

package/es/BaseButton/styles.js

@@ -34,14 +34,14 @@
  */
 const generateStyle = (componentTheme, props, state) => {
   const size = props.size,
-        color = props.color,
-        textAlign = props.textAlign,
-        shape = props.shape,
-        withBackground = props.withBackground,
-        withBorder = props.withBorder,
-        isCondensed = props.isCondensed;
+    color = props.color,
+    textAlign = props.textAlign,
+    shape = props.shape,
+    withBackground = props.withBackground,
+    withBorder = props.withBorder,
+    isCondensed = props.isCondensed;
   const isDisabled = state.isDisabled,
-        hasOnlyIconVisible = state.hasOnlyIconVisible;
+    hasOnlyIconVisible = state.hasOnlyIconVisible;
   const shapeVariants = {
     circle: {
       borderRadius: '50%'
@@ -251,20 +251,16 @@ const generateStyle = (componentTheme, props, state) => {
     baseButton: {
       label: 'baseButton',
       appearance: 'none',
-      textDecoration: 'none'
-      /* for links styled as buttons */
-      ,
+      textDecoration: 'none' /* for links styled as buttons */,
       touchAction: 'manipulation',
       '&::-moz-focus-inner': {
-        border: '0'
-        /* removes default dotted focus outline in Firefox */
-
+        border: '0' /* removes default dotted focus outline in Firefox */
       },
-      '*': {
-        pointerEvents: 'none'
-        /* Ensures that button or link is always the event target */
 
+      '*': {
+        pointerEvents: 'none' /* Ensures that button or link is always the event target */
       },
+
       '&:active > [class$=-baseButton__content]': colorVariants[color].active,
       '&:hover > [class$=-baseButton__content]': colorVariants[color].hover
     },
@@ -368,5 +364,4 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
 };
-
 export default generateStyle;

package/es/BaseButton/theme.js

@@ -21,17 +21,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { alpha, darken } from '@instructure/ui-color-utils';
 const activeShadow = 'inset 0 0 0.1875rem 0.0625rem';
-
 const generateButtonThemeVars = _ref => {
   let style = _ref.style,
-      textColor = _ref.textColor,
-      ghostTextColor = _ref.ghostTextColor,
-      backgroundColor = _ref.backgroundColor,
-      borderColor = _ref.borderColor,
-      _ref$ghostBorderColor = _ref.ghostBorderColor,
-      ghostBorderColor = _ref$ghostBorderColor === void 0 ? borderColor : _ref$ghostBorderColor;
+    textColor = _ref.textColor,
+    ghostTextColor = _ref.ghostTextColor,
+    backgroundColor = _ref.backgroundColor,
+    borderColor = _ref.borderColor,
+    _ref$ghostBorderColor = _ref.ghostBorderColor,
+    ghostBorderColor = _ref$ghostBorderColor === void 0 ? borderColor : _ref$ghostBorderColor;
   return {
     [`${style}Color`]: textColor,
     [`${style}BorderColor`]: darken(borderColor, 10),
@@ -47,22 +47,22 @@ const generateButtonThemeVars = _ref => {
     [`${style}GhostActiveBoxShadow`]: `${activeShadow} ${alpha(ghostBorderColor, 28)}`
   };
 };
+
 /**
  * Generates the theme object for the component from the theme and provided additional information
  * @param  {Object} theme The actual theme object.
  * @return {Object} The final theme object with the overrides and component variables
  */
-
-
 const generateComponentTheme = theme => {
   const borders = theme.borders,
-        colors = theme.colors,
-        forms = theme.forms,
-        spacing = theme.spacing,
-        typography = theme.typography,
-        themeName = theme.key;
+    colors = theme.colors,
+    forms = theme.forms,
+    spacing = theme.spacing,
+    typography = theme.typography,
+    themeName = theme.key;
   const themeSpecificStyle = {
-    canvas: { ...generateButtonThemeVars({
+    canvas: {
+      ...generateButtonThemeVars({
         style: 'primary',
         backgroundColor: theme['ic-brand-button--primary-bgd'],
         borderColor: theme['ic-brand-button--primary-bgd'],
@@ -161,9 +161,9 @@ const generateComponentTheme = theme => {
     // Overrides for ghost hover states to ensure correct color contrast for a11y
     successGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : colors.textSuccess, 1)
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 export default generateComponentTheme;

package/es/Button/ButtonLocator.js

@@ -23,14 +23,14 @@
  */
 import { locator } from '@instructure/ui-test-locator';
 import { find } from '@instructure/ui-test-queries';
-import { Button } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { Button } from './index';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const ButtonLocator = locator(Button.selector, {
   click: async function (element) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
-
     return (await find(element, 'a,button,[role="button"]')).click(...args);
   }
 });

package/es/Button/index.js

@@ -1,8 +1,6 @@
 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;
-
 /*
  * The MIT License (MIT)
  *
@@ -26,6 +24,7 @@ var _dec, _dec2, _class, _class2;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React, { Component } from 'react';
 import { testable } from '@instructure/ui-testable';
 import { getInteraction, passthroughProps } from '@instructure/ui-react-utils';
@@ -33,7 +32,6 @@ import { withStyle } from '@instructure/emotion';
 import generateComponentTheme from './theme';
 import { BaseButton } from '../BaseButton';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -46,51 +44,45 @@ let Button = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable()
     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;
     };
   }
-
   get focused() {
     return this._buttonComponent && this._buttonComponent.focused;
   }
-
   focus() {
     this._buttonComponent && this._buttonComponent.focus();
   }
-
   render() {
     const _this$props = this.props,
-          children = _this$props.children,
-          type = _this$props.type,
-          size = _this$props.size,
-          as = _this$props.as,
-          color = _this$props.color,
-          focusColor = _this$props.focusColor,
-          display = _this$props.display,
-          textAlign = _this$props.textAlign,
-          withBackground = _this$props.withBackground,
-          margin = _this$props.margin,
-          cursor = _this$props.cursor,
-          href = _this$props.href,
-          renderIcon = _this$props.renderIcon,
-          props = _objectWithoutProperties(_this$props, _excluded);
-
+      children = _this$props.children,
+      type = _this$props.type,
+      size = _this$props.size,
+      as = _this$props.as,
+      color = _this$props.color,
+      focusColor = _this$props.focusColor,
+      display = _this$props.display,
+      textAlign = _this$props.textAlign,
+      withBackground = _this$props.withBackground,
+      margin = _this$props.margin,
+      cursor = _this$props.cursor,
+      href = _this$props.href,
+      renderIcon = _this$props.renderIcon,
+      props = _objectWithoutProperties(_this$props, _excluded);
     const interaction = getInteraction({
       props
     });
     const themeOverride = this.props.themeOverride;
-    const buttonProps = { ...passthroughProps(props),
+    const buttonProps = {
+      ...passthroughProps(props),
       type,
       size,
       elementRef: this.handleElementRef,
@@ -110,7 +102,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',

package/es/Button/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {

package/es/Button/theme.js

@@ -21,4 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export { default } from '../BaseButton/theme';

package/es/CloseButton/CloseButtonLocator.js

@@ -21,7 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { locator } from '@instructure/ui-test-locator';
-import { CloseButton } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { CloseButton } from './index';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const CloseButtonLocator = locator(CloseButton.selector);