@instructure/ui-buttons 11.6.0 → 11.6.1-snapshot-129

package/lib/BaseButton/v2/index.js

@@ -0,0 +1,311 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BaseButton = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _keycode = _interopRequireDefault(require("keycode"));
+var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
+var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
+var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
+var _renderIconWithProps = require("@instructure/ui-icons/lib/IconPropsProvider/renderIconWithProps.js");
+var _latest = require("@instructure/ui-view/latest");
+var _uiUtils = require("@instructure/ui-utils");
+var _combineDataCid = require("@instructure/ui-utils/lib/combineDataCid.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["type", "size", "elementRef", "as", "href", "color", "focusColor", "textAlign", "shape", "display", "withBackground", "withBorder", "isCondensed", "margin", "cursor", "onClick", "renderIcon", "tabIndex", "styles", "makeStyles", "withFocusOutline"];
+var _dec, _class, _BaseButton;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+// TODO these have to be imported in separate lines because otherwise `isSafari` will be missing from the babel build
+// this bug is very likely caused by `babel-plugin-transform-imports` and can be reverted once it is removed from the codebase
+const buttonSizeToIconSize = {
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+  condensedSmall: 'xs',
+  condensedMedium: 'xs'
+};
+const buttonColorToIconColor = {
+  'primary': 'inherit',
+  'primary-inverse': 'inherit',
+  'secondary': 'inherit',
+  'success': 'inherit',
+  'danger': 'inherit',
+  'ai-primary': 'inherit',
+  'ai-secondary': 'ai'
+};
+
+/**
+---
+category: components/utilities
+---
+**/
+let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_BaseButton = class BaseButton extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    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.default.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();
+        }
+      }
+    };
+  }
+  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 makeStylesVariables() {
+    return {
+      isDisabled: this.isDisabled,
+      hasOnlyIconVisible: this.hasOnlyIconVisible,
+      isEnabled: this.isEnabled
+    };
+  }
+  get hasOnlyIconVisible() {
+    const _this$props4 = this.props,
+      children = _this$props4.children,
+      renderIcon = _this$props4.renderIcon;
+    return !!(renderIcon && !(0, _hasVisibleChildren.hasVisibleChildren)(children));
+  }
+  get elementType() {
+    return (0, _getElementType.getElementType)(BaseButton, this.props);
+  }
+  get interaction() {
+    return (0, _getInteraction.getInteraction)({
+      props: this.props
+    });
+  }
+  get isDisabled() {
+    return this.interaction === 'disabled';
+  }
+  get isReadOnly() {
+    return this.interaction === 'readonly';
+  }
+  get isEnabled() {
+    return this.interaction === 'enabled';
+  }
+  get focusColor() {
+    const _this$props5 = this.props,
+      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
+    // 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 (0, _isActiveElement.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,
+      size = _this$props6.size,
+      color = _this$props6.color;
+    const wrappedChildren = (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.children,
+      children: children
+    });
+    if (!renderIcon) {
+      return wrappedChildren;
+    }
+    const hasOnlyIconVisible = this.hasOnlyIconVisible;
+    const iconSize = buttonSizeToIconSize[size];
+    const iconColor = buttonColorToIconColor[color];
+    const wrappedIcon = (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.iconSVG,
+      children: (0, _renderIconWithProps.renderIconWithProps)(renderIcon, iconSize, iconColor)
+    });
+    const flexChildren = hasOnlyIconVisible ? (0, _jsxRuntime.jsxs)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.iconOnly,
+      children: [wrappedIcon, children]
+    }) : [(0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.iconWrapper,
+      children: wrappedIcon
+    }, "icon"), (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.childrenWrapper,
+      children: wrappedChildren
+    }, "children")];
+    return (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.childrenLayout,
+      children: 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,
+      withFocusOutline = _this$props7.withFocusOutline,
+      props = (0, _objectWithoutProperties2.default)(_this$props7, _excluded);
+    const isDisabled = this.isDisabled,
+      isReadOnly = this.isReadOnly,
+      elementType = this.elementType;
+    // only add 0 tabIndex value if it doesn't have it by default, see
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+    let needsZeroTabIndex = true;
+    if (typeof elementType == 'string') {
+      if (['button', 'frame', 'iframe', 'input', 'object', 'select', 'textarea', 'summary'].includes(elementType)) {
+        needsZeroTabIndex = false;
+      }
+      if (href && (elementType === 'a' || elementType === 'area')) {
+        needsZeroTabIndex = false;
+      }
+    }
+    let tabIndexValue = tabIndex;
+    // In Safari, a button cannot get focus unless it has an explicit 0 tabindex
+    if (onClick && as && needsZeroTabIndex || (0, _uiUtils.isSafari)() && as) {
+      tabIndexValue = tabIndex || 0;
+    }
+    return (0, _jsxRuntime.jsx)(_latest.View, {
+      ...(0, _passthroughProps.passthroughProps)(props),
+      as: elementType,
+      focusColor: this.focusColor,
+      position: "relative",
+      display: display,
+      width: display === 'block' ? '100%' : 'auto',
+      borderRadius: shape === 'circle' ? 'circle' : 'medium',
+      background: "transparent",
+      padding: "none",
+      borderWidth: "none",
+      margin: margin,
+      cursor: isDisabled ? 'not-allowed' : cursor,
+      href: href,
+      type: href ? void 0 : type,
+      elementRef: this.handleElementRef,
+      onClick: this.handleClick,
+      onKeyDown: this.handleKeyDown,
+      role: onClick && as !== 'button' ? 'button' : void 0,
+      tabIndex: tabIndexValue,
+      disabled: isDisabled || isReadOnly,
+      css: styles === null || styles === void 0 ? void 0 : styles.baseButton,
+      withFocusOutline: withFocusOutline,
+      "data-cid": (0, _combineDataCid.combineDataCid)('BaseButton', this.props),
+      children: (0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.content,
+        children: this.renderChildren()
+      })
+    });
+  }
+}, _BaseButton.displayName = "BaseButton", _BaseButton.componentId = 'BaseButton', _BaseButton.allowedProps = _props.allowedProps, _BaseButton.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'
+}, _BaseButton)) || _class);
+var _default = exports.default = BaseButton;

package/lib/BaseButton/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+
+const allowedProps = exports.allowedProps = ['as', 'children', 'color', 'cursor', 'display', 'elementRef', 'focusColor', 'href', 'interaction', 'isCondensed', 'margin', 'onClick', 'onKeyDown', 'renderIcon', 'shape', 'size', 'tabIndex', 'textAlign', 'type', 'withBackground', 'withBorder'];