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

package/es/Alert/v2/index.js

@@ -0,0 +1,263 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["margin", "styles", "children", "onDismiss", "variantScreenReaderLabel"];
+var _dec, _dec2, _class, _Alert;
+/*
+ * 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 { Fragment, Component } from 'react';
+import ReactDOM from 'react-dom';
+import keycode from 'keycode';
+import { callRenderProp, withDeterministicId, passthroughProps } from '@instructure/ui-react-utils';
+import { CloseButton } from '@instructure/ui-buttons/latest';
+import { View } from '@instructure/ui-view/latest';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { InfoInstUIIcon, XCircleInstUIIcon, CircleCheckInstUIIcon, TriangleAlertInstUIIcon } from '@instructure/ui-icons';
+import { Transition } from '@instructure/ui-motion';
+import { logError as error } from '@instructure/console';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+**/
+let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_Alert = class Alert extends Component {
+  constructor(props) {
+    super(props);
+    this._timeouts = [];
+    this.srid = void 0;
+    this.variantUI = {
+      error: XCircleInstUIIcon,
+      info: InfoInstUIIcon,
+      success: CircleCheckInstUIIcon,
+      warning: TriangleAlertInstUIIcon
+    };
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this.handleTimeout = () => {
+      if (this.props.timeout > 0) {
+        this._timeouts.push(setTimeout(() => {
+          this.close();
+        }, this.props.timeout));
+      }
+    };
+    this.onExitTransition = () => {
+      if (this.props.onDismiss) {
+        this.props.onDismiss();
+      }
+    };
+    this.close = () => {
+      this.clearTimeouts();
+      this.removeScreenreaderAlert();
+      this.setState({
+        open: false
+      }, () => {
+        if (this.props.onDismiss && (this.props.transition === 'none' || this.props.screenReaderOnly)) {
+          this.props.onDismiss();
+        }
+      });
+    };
+    this.handleKeyUp = event => {
+      if (this.props.renderCloseButtonLabel && event.keyCode === keycode.codes.esc) {
+        this.close();
+      }
+    };
+    this.srid = this.props.deterministicId();
+    this.state = {
+      open: true
+    };
+  }
+  clearTimeouts() {
+    this._timeouts.forEach(timeout => clearTimeout(timeout));
+    this._timeouts = [];
+  }
+  // duck type for a dom node
+  isDOMNode(n) {
+    return n && typeof n === 'object' && n.nodeType === 1;
+  }
+  getLiveRegion() {
+    const lr = typeof this.props.liveRegion === 'function' ? this.props.liveRegion() : this.props.liveRegion;
+    return this.isDOMNode(lr) ? lr : null;
+  }
+  initLiveRegion(liveRegion) {
+    error(liveRegion.getAttribute('role') === 'alert', `[Alert] live region must have role='alert' set on page load in order to announce content`);
+    if (liveRegion) {
+      liveRegion.setAttribute('aria-live', this.props.liveRegionPoliteness);
+      // indicates what notifications the user agent will trigger when the
+      // accessibility tree within a live region is modified.
+      // additions: elements are added, text: Text content is added
+      liveRegion.setAttribute('aria-relevant', 'additions text');
+      liveRegion.setAttribute('aria-atomic', `${this.props.isLiveRegionAtomic}`);
+    }
+  }
+  createScreenreaderContentNode() {
+    return _jsxs(ScreenReaderContent, {
+      children: [this.props.variantScreenReaderLabel || '', " ", this.props.children]
+    });
+  }
+  createScreenreaderAlert() {
+    const liveRegion = this.getLiveRegion();
+    if (liveRegion) {
+      const div = document.createElement('div');
+      div.setAttribute('id', this.srid);
+      liveRegion.appendChild(div);
+    }
+  }
+  removeScreenreaderAlert() {
+    const liveRegion = this.getLiveRegion();
+    if (liveRegion) {
+      const div = document.getElementById(this.srid);
+      if (div) {
+        // Accessibility attributes must be removed for the deletion of the node
+        // and then reapplied because JAWS/IE will not respect the
+        // "aria-relevant" attribute and read when the node is deleted if
+        // the attributes are in place
+        liveRegion.removeAttribute('aria-live');
+        liveRegion.removeAttribute('aria-relevant');
+        liveRegion.removeAttribute('aria-atomic');
+        this.initLiveRegion(liveRegion);
+      }
+    }
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    const liveRegion = this.getLiveRegion();
+    if (liveRegion) {
+      this.initLiveRegion(liveRegion);
+    }
+    this.handleTimeout();
+  }
+  componentWillUnmount() {
+    this.clearTimeouts();
+  }
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    if (!!this.props.open === false && !!this.props.open !== !!prevProps.open) {
+      // this outside world is asking us to close the alert, which needs to
+      // take place internally so the transition runs
+      this.close();
+    }
+  }
+  renderIcon() {
+    const _this$props3 = this.props,
+      renderCustomIcon = _this$props3.renderCustomIcon,
+      variant = _this$props3.variant,
+      styles = _this$props3.styles;
+    const Icon = this.variantUI[variant];
+    return _jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.icon,
+      children: renderCustomIcon ? callRenderProp(renderCustomIcon) : _jsx(Icon, {})
+    });
+  }
+  renderCloseButton() {
+    var _this$props$styles;
+    const closeButtonLabel = this.props.renderCloseButtonLabel && callRenderProp(this.props.renderCloseButtonLabel);
+    return closeButtonLabel ? _jsx("div", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.closeButton,
+      children: _jsx(CloseButton, {
+        onClick: this.close,
+        size: "small",
+        screenReaderLabel: closeButtonLabel
+      })
+    }, "closeButton") : null;
+  }
+  renderAlert() {
+    // prevent onDismiss from being passed to the View component
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const _this$props4 = this.props,
+      margin = _this$props4.margin,
+      styles = _this$props4.styles,
+      children = _this$props4.children,
+      onDismiss = _this$props4.onDismiss,
+      variantScreenReaderLabel = _this$props4.variantScreenReaderLabel,
+      props = _objectWithoutProperties(_this$props4, _excluded);
+    return _jsxs(View, {
+      ...passthroughProps({
+        ...props
+      }),
+      as: "div",
+      margin: margin,
+      css: styles === null || styles === void 0 ? void 0 : styles.alert,
+      onKeyUp: this.handleKeyUp,
+      elementRef: this.handleRef,
+      children: [this.renderIcon(), _jsxs("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.content,
+        children: [variantScreenReaderLabel && _jsx("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.variantScreenReaderLabel,
+          children: variantScreenReaderLabel
+        }), children]
+      }), this.renderCloseButton()]
+    });
+  }
+  createScreenReaderPortal(liveRegion) {
+    const open = this.state.open;
+    return open ? /*#__PURE__*/ReactDOM.createPortal(_jsx("div", {
+      id: this.srid,
+      children: this.createScreenreaderContentNode()
+    }), liveRegion) : null;
+  }
+  render() {
+    const liveRegion = this.getLiveRegion();
+    const screenReaderContent = liveRegion ? this.createScreenReaderPortal(liveRegion) : null;
+    // Don't render anything if screen reader only
+    if (this.props.screenReaderOnly) {
+      error(!!this.getLiveRegion(), `[Alert] The 'screenReaderOnly' prop must be used in conjunction with 'liveRegion'.`);
+      return screenReaderContent;
+    }
+    if (this.props.transition === 'none') {
+      return this.state.open ? _jsxs(Fragment, {
+        children: [screenReaderContent, this.renderAlert()]
+      }) : null;
+    }
+    return _jsxs(Fragment, {
+      children: [screenReaderContent, _jsx(Transition, {
+        type: this.props.transition,
+        transitionOnMount: true,
+        in: this.state.open,
+        unmountOnExit: true,
+        onExited: this.onExitTransition,
+        children: this.renderAlert()
+      })]
+    });
+  }
+}, _Alert.displayName = "Alert", _Alert.componentId = 'Alert', _Alert.allowedProps = allowedProps, _Alert.defaultProps = {
+  variant: 'info',
+  margin: 'x-small 0',
+  timeout: 0,
+  transition: 'fade',
+  open: true,
+  screenReaderOnly: false,
+  liveRegionPoliteness: 'assertive',
+  isLiveRegionAtomic: false,
+  children: null,
+  hasShadow: true
+}, _Alert)) || _class) || _class);
+export default Alert;
+export { Alert };

package/es/Alert/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 = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow', 'renderCustomIcon'];
+export { allowedProps };

package/es/Alert/v2/styles.js

@@ -0,0 +1,134 @@
+/*
+ * 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 { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, sharedTokens) => {
+  const variant = props.variant,
+    hasShadow = props.hasShadow;
+  const variantStyles = {
+    error: {
+      alert: {
+        borderColor: componentTheme.dangerBorderColor
+      },
+      icon: {
+        background: componentTheme.dangerIconBackground,
+        borderRightColor: componentTheme.dangerIconBackground
+      }
+    },
+    info: {
+      alert: {
+        borderColor: componentTheme.infoBorderColor
+      },
+      icon: {
+        background: componentTheme.infoIconBackground,
+        borderRightColor: componentTheme.infoIconBackground
+      }
+    },
+    success: {
+      alert: {
+        borderColor: componentTheme.successBorderColor
+      },
+      icon: {
+        backgroundColor: componentTheme.successIconBackground,
+        borderRightColor: componentTheme.successIconBackground
+      }
+    },
+    warning: {
+      alert: {
+        borderColor: componentTheme.warningBorderColor
+      },
+      icon: {
+        background: componentTheme.warningIconBackground,
+        borderRightColor: componentTheme.warningIconBackground
+      }
+    }
+  };
+  return {
+    alert: {
+      label: 'alert',
+      color: componentTheme.color,
+      background: componentTheme.background,
+      boxSizing: 'border-box',
+      display: 'flex',
+      minWidth: '12rem',
+      borderWidth: componentTheme.borderWidth,
+      borderStyle: componentTheme.borderStyle,
+      borderRadius: componentTheme.borderRadius,
+      ...variantStyles[variant].alert,
+      ...(hasShadow && {
+        boxShadow: boxShadowObjectsToCSSString(sharedTokens.boxShadow.elevation4)
+      })
+    },
+    icon: {
+      color: componentTheme.iconColor,
+      boxSizing: 'border-box',
+      flex: '0 0 2.5rem',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '1.125rem',
+      borderRight: `${componentTheme.borderWidth} ${componentTheme.borderStyle}`,
+      margin: -1,
+      borderStartStartRadius: componentTheme.borderRadius,
+      borderEndStartRadius: componentTheme.borderRadius,
+      ...variantStyles[variant].icon
+    },
+    closeButton: {
+      boxSizing: 'border-box',
+      display: 'flex',
+      alignItems: 'flex-start',
+      order: 1,
+      marginTop: componentTheme.closeButtonMarginTop,
+      marginRight: componentTheme.closeButtonMarginRight
+    },
+    content: {
+      boxSizing: 'border-box',
+      flex: 1,
+      minWidth: '0.0625rem',
+      fontSize: componentTheme.contentFontSize,
+      fontFamily: componentTheme.contentFontFamily,
+      fontWeight: componentTheme.contentFontWeight,
+      lineHeight: componentTheme.contentLineHeight,
+      padding: `${componentTheme.contentPaddingVertical} ${componentTheme.contentPaddingHorizontal}`
+    },
+    variantScreenReaderLabel: {
+      position: 'absolute',
+      height: '1px',
+      width: '1px',
+      overflow: 'hidden',
+      margin: '-1px'
+    }
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Alert } from "./Alert/index.js";
+export { Alert } from "../Alert/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,5 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Alert } from './Alert'
-export type { AlertProps } from './Alert/props'
+export { Alert } from "../Alert/v2/index.js";

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

@@ -12,13 +12,13 @@ var _keycode = _interopRequireDefault(require("keycode"));
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-var _CloseButton = require("@instructure/ui-buttons/lib/CloseButton");
-var _View = require("@instructure/ui-view/lib/View");
+var _v11_ = require("@instructure/ui-buttons/v11_6");
+var _v11_2 = require("@instructure/ui-view/v11_6");
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
-var _IconCheckMarkSolid = require("@instructure/ui-icons/lib/IconCheckMarkSolid.js");
-var _IconInfoBorderlessSolid = require("@instructure/ui-icons/lib/IconInfoBorderlessSolid.js");
-var _IconWarningBorderlessSolid = require("@instructure/ui-icons/lib/IconWarningBorderlessSolid.js");
-var _IconNoSolid = require("@instructure/ui-icons/lib/IconNoSolid.js");
+var _IconCheckMarkSolid = require("@instructure/ui-icons/lib/generated/IconCheckMarkSolid.js");
+var _IconInfoBorderlessSolid = require("@instructure/ui-icons/lib/generated/IconInfoBorderlessSolid.js");
+var _IconWarningBorderlessSolid = require("@instructure/ui-icons/lib/generated/IconWarningBorderlessSolid.js");
+var _IconNoSolid = require("@instructure/ui-icons/lib/generated/IconNoSolid.js");
 var _Transition = require("@instructure/ui-motion/lib/Transition");
 var _console = require("@instructure/console");
 var _emotion = require("@instructure/emotion");
@@ -56,7 +56,7 @@ var _dec, _dec2, _class, _Alert;
 category: components
 ---
 **/
-let Alert = exports.Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Alert = class Alert extends _react.Component {
+let Alert = exports.Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Alert = class Alert extends _react.Component {
   constructor(props) {
     super(props);
     this._timeouts = [];
@@ -193,7 +193,7 @@ let Alert = exports.Alert = (_dec = (0, _withDeterministicId.withDeterministicId
     const closeButtonLabel = this.props.renderCloseButtonLabel && (0, _callRenderProp.callRenderProp)(this.props.renderCloseButtonLabel);
     return closeButtonLabel ? (0, _jsxRuntime.jsx)("div", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.closeButton,
-      children: (0, _jsxRuntime.jsx)(_CloseButton.CloseButton, {
+      children: (0, _jsxRuntime.jsx)(_v11_.CloseButton, {
         onClick: this.close,
         size: "small",
         screenReaderLabel: closeButtonLabel
@@ -210,7 +210,7 @@ let Alert = exports.Alert = (_dec = (0, _withDeterministicId.withDeterministicId
       onDismiss = _this$props4.onDismiss,
       variantScreenReaderLabel = _this$props4.variantScreenReaderLabel,
       props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
-    return (0, _jsxRuntime.jsxs)(_View.View, {
+    return (0, _jsxRuntime.jsxs)(_v11_2.View, {
       ...(0, _passthroughProps.passthroughProps)({
         ...props
       }),