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

package/es/IconButton/v2/index.js

@@ -0,0 +1,121 @@
+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, _class, _IconButton;
+/*
+ * 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.
+ */
+
+import { Component } from 'react';
+import { passthroughProps } from '@instructure/ui-react-utils';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { combineDataCid } from '@instructure/ui-utils';
+import { withStyle } from '@instructure/emotion';
+import { BaseButton } from "../../BaseButton/v2/index.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+**/
+// needed for listing the available theme variables on docs page
+let IconButton = (_dec = withStyle(null, 'BaseButton'), _dec(_class = (_IconButton = class IconButton extends Component {
+  constructor(...args) {
+    super(...args);
+    this._baseButton = null;
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  get focused() {
+    return this._baseButton && this._baseButton.focused;
+  }
+  focus() {
+    this._baseButton && this._baseButton.focus();
+  }
+  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 themeOverride = this.props.themeOverride;
+    return _jsx(BaseButton, {
+      ...passthroughProps(props),
+      type: type,
+      size: size,
+      elementRef: this.handleRef,
+      as: as,
+      interaction: interaction,
+      color: color,
+      focusColor: focusColor,
+      shape: shape,
+      withBackground: withBackground,
+      withBorder: withBorder,
+      margin: margin,
+      cursor: cursor,
+      href: href,
+      renderIcon: children || renderIcon,
+      themeOverride: themeOverride,
+      ref: component => {
+        this._baseButton = component;
+      },
+      "data-cid": combineDataCid('IconButton', this.props),
+      children: _jsx(ScreenReaderContent, {
+        children: screenReaderLabel
+      })
+    });
+  }
+}, _IconButton.displayName = "IconButton", _IconButton.componentId = 'IconButton', _IconButton.allowedProps = allowedProps, _IconButton.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'
+}, _IconButton)) || _class);
+export default IconButton;
+export { IconButton };

package/es/IconButton/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * 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 = ['as', 'children', 'color', 'cursor', 'elementRef', 'focusColor', 'href', 'interaction', 'margin', 'renderIcon', 'screenReaderLabel', 'shape', 'size', 'type', 'withBackground', 'withBorder', 'onClick'];
+export { allowedProps };

package/es/ToggleButton/{index.js → v1/index.js}

@@ -26,8 +26,8 @@ const _excluded = ["as", "color", "elementRef", "size", "interaction", "mountNod
 
 import { Component } from 'react';
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
-import { Tooltip } from '@instructure/ui-tooltip';
-import { IconButton } from "../IconButton/index.js";
+import { Tooltip } from '@instructure/ui-tooltip/v11_6';
+import { IconButton } from "../../IconButton/v1/index.js";
 import { allowedProps } from "./props.js";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**

package/es/ToggleButton/v2/index.js

@@ -0,0 +1,121 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["as", "color", "elementRef", "size", "interaction", "mountNode", "renderIcon", "renderTooltipContent", "screenReaderLabel", "status", "placement", "onClick"];
+/*
+ * 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.
+ */
+
+import { Component } from 'react';
+import { passthroughProps } from '@instructure/ui-react-utils';
+import { Tooltip } from '@instructure/ui-tooltip/latest';
+import { IconButton } from "../../IconButton/v2/index.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+**/
+
+class ToggleButton extends Component {
+  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
+    };
+  }
+  get isShowingTooltip() {
+    return typeof this.props.isShowingTooltip === 'undefined' ? this.state.isShowingTooltip : this.props.isShowingTooltip;
+  }
+  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);
+    return _jsx(Tooltip, {
+      renderTip: renderTooltipContent,
+      on: ['hover', 'focus'],
+      placement: placement,
+      color: color === 'primary-inverse' ? 'primary-inverse' : 'primary',
+      isShowingContent: this.isShowingTooltip,
+      onShowContent: () => {
+        this.setState({
+          isShowingTooltip: true
+        });
+      },
+      onHideContent: () => {
+        this.setState({
+          isShowingTooltip: false
+        });
+      },
+      mountNode: mountNode,
+      elementRef: el => this.ref = el,
+      children: _jsx(IconButton, {
+        ...passthroughProps(props),
+        screenReaderLabel: screenReaderLabel,
+        withBackground: false,
+        withBorder: false,
+        color: color,
+        size: size,
+        elementRef: this.handleRef,
+        as: as,
+        onClick: onClick,
+        interaction: interaction,
+        "aria-pressed": status === 'pressed',
+        "data-cid": "ToggleButton",
+        renderIcon: renderIcon
+      })
+    });
+  }
+}
+ToggleButton.displayName = "ToggleButton";
+ToggleButton.componentId = 'ToggleButton';
+ToggleButton.allowedProps = allowedProps;
+ToggleButton.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'
+};
+export { ToggleButton };
+export default ToggleButton;

package/es/ToggleButton/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * 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 = ['as', 'color', 'constrain', 'elementRef', 'interaction', 'isShowingTooltip', 'mountNode', 'onClick', 'placement', 'renderIcon', 'renderTooltipContent', 'screenReaderLabel', 'size', 'status'];
+export { allowedProps };

package/es/exports/a.js

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+export { BaseButton } from "../BaseButton/v1/index.js";
+export { Button } from "../Button/v1/index.js";
+export { CloseButton } from "../CloseButton/v1/index.js";
+export { CondensedButton } from "../CondensedButton/v1/index.js";
+export { IconButton } from "../IconButton/v1/index.js";
+export { ToggleButton } from "../ToggleButton/v1/index.js";

package/es/exports/b.js

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+export { BaseButton } from "../BaseButton/v2/index.js";
+export { Button } from "../Button/v2/index.js";
+export { CloseButton } from "../CloseButton/v2/index.js";
+export { CondensedButton } from "../CondensedButton/v2/index.js";
+export { IconButton } from "../IconButton/v2/index.js";
+export { ToggleButton } from "../ToggleButton/v2/index.js";

package/lib/BaseButton/{index.js → v1/index.js}

@@ -14,7 +14,7 @@ var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProp
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
 var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
-var _View = require("@instructure/ui-view/lib/View");
+var _v11_ = require("@instructure/ui-view/v11_6");
 var _uiUtils = require("@instructure/ui-utils");
 var _combineDataCid = require("@instructure/ui-utils/lib/combineDataCid.js");
 var _emotion = require("@instructure/emotion");
@@ -54,7 +54,7 @@ var _dec, _class, _BaseButton;
 category: components/utilities
 ---
 **/
-let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_BaseButton = class BaseButton extends _react.Component {
+let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_BaseButton = class BaseButton extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -242,7 +242,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
     if (onClick && as && needsZeroTabIndex || (0, _uiUtils.isSafari)() && as) {
       tabIndexValue = tabIndex || 0;
     }
-    return (0, _jsxRuntime.jsx)(_View.View, {
+    return (0, _jsxRuntime.jsx)(_v11_.View, {
       ...(0, _passthroughProps.passthroughProps)(props),
       as: elementType,
       focusColor: this.focusColor,