@carbon/react 1.7.0 → 1.8.0-rc.0

package/lib/components/Notification/Notification.js

@@ -15,7 +15,11 @@ var React = require('react');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var Button = require('../Button/Button.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
+var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,24 +29,52 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _iconTypes;
 
-var _excluded = ["children", "className", "onClick"],
-    _excluded2 = ["ariaLabel", "className", "iconDescription", "type", "renderIcon", "name", "notificationType"],
-    _excluded3 = ["title", "subtitle", "caption", "notificationType", "children"],
-    _excluded4 = ["role", "notificationType", "onClose", "onCloseButtonClick", "iconDescription", "statusIconDescription", "className", "caption", "subtitle", "title", "kind", "lowContrast", "hideCloseButton", "children", "timeout"],
-    _excluded5 = ["actions", "role", "notificationType", "onClose", "onCloseButtonClick", "iconDescription", "statusIconDescription", "className", "subtitle", "title", "kind", "lowContrast", "hideCloseButton", "children"];
+var _excluded = ["children", "className", "onClick", "inline"],
+    _excluded2 = ["ariaLabel", "className", "type", "renderIcon", "name", "notificationType"],
+    _excluded3 = ["role", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "children", "kind", "lowContrast", "hideCloseButton", "timeout", "title", "caption", "subtitle"],
+    _excluded4 = ["children", "title", "subtitle", "role", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "kind", "lowContrast", "hideCloseButton"],
+    _excluded5 = ["actionButtonLabel", "ariaLabel", "children", "role", "onActionButtonClick", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "inline", "kind", "lowContrast", "hideCloseButton", "hasFocus", "closeOnEscape", "title", "subtitle"];
+/**
+ * Conditionally call a callback when the escape key is pressed
+ * @param {node} ref - ref of the container element to scope the functionality to
+ * @param {func} callback - function to be called
+ * @param {bool} override - escape hatch to conditionally call the callback
+ */
+
+function useEscapeToClose(ref, callback) {
+  var override = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+
+  var handleKeyDown = function handleKeyDown(event) {
+    // The callback should only be called when focus is on or within the container
+    var elementContainsFocus = ref.current && document.activeElement === ref.current || ref.current.contains(document.activeElement);
+
+    if (match.matches(event, [keys.Escape]) && override && elementContainsFocus) {
+      callback(event);
+    }
+  };
+
+  useIsomorphicEffect["default"](function () {
+    document.addEventListener('keydown', handleKeyDown, false);
+    return function () {
+      return document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  });
+}
+
 function NotificationActionButton(_ref) {
   var children = _ref.children,
       customClassName = _ref.className,
       onClick = _ref.onClick,
+      inline = _ref.inline,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](customClassName, "".concat(prefix, "--inline-notification__action-button"));
+  var className = cx__default["default"](customClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--actionable-notification__action-button"), true));
   return /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
     className: className,
-    kind: "ghost",
+    kind: inline ? 'ghost' : 'tertiary',
     onClick: onClick,
-    size: "small"
+    size: "sm"
   }, rest), children);
 }
 NotificationActionButton.propTypes = {
@@ -56,6 +88,11 @@ NotificationActionButton.propTypes = {
    */
   className: PropTypes__default["default"].string,
 
+  /**
+   * Specify if the visual treatment of the button should be for an inline notification
+   */
+  inline: PropTypes__default["default"].bool,
+
   /**
    * Optionally specify a click handler for the notification action button.
    */
@@ -64,7 +101,6 @@ NotificationActionButton.propTypes = {
 function NotificationButton(_ref2) {
   var ariaLabel = _ref2.ariaLabel,
       className = _ref2.className,
-      iconDescription = _ref2.iconDescription,
       type = _ref2.type,
       IconTag = _ref2.renderIcon,
       name = _ref2.name,
@@ -77,11 +113,10 @@ function NotificationButton(_ref2) {
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
     // eslint-disable-next-line react/button-has-type
     type: type,
-    "aria-label": iconDescription,
-    title: iconDescription,
+    "aria-label": ariaLabel,
+    title: ariaLabel,
     className: buttonClassName
   }), IconTag && /*#__PURE__*/React__default["default"].createElement(IconTag, {
-    "aria-label": ariaLabel,
     className: iconClassName,
     name: name
   }));
@@ -97,11 +132,6 @@ NotificationButton.propTypes = {
    */
   className: PropTypes__default["default"].string,
 
-  /**
-   * Provide a description for "close" icon that can be read by screen readers
-   */
-  iconDescription: PropTypes__default["default"].string,
-
   /**
    * Specify an optional icon for the Button through a string,
    * if something but regular "close" icon is desirable
@@ -111,7 +141,7 @@ NotificationButton.propTypes = {
   /**
    * Specify the notification type
    */
-  notificationType: PropTypes__default["default"].oneOf(['toast', 'inline']),
+  notificationType: PropTypes__default["default"].oneOf(['toast', 'inline', 'actionable']),
 
   /**
    * Optional prop to allow overriding the icon rendering.
@@ -126,84 +156,20 @@ NotificationButton.propTypes = {
 };
 NotificationButton.defaultProps = {
   ariaLabel: 'close notification',
-  // TODO: deprecate this prop
   notificationType: 'toast',
   type: 'button',
-  iconDescription: 'close icon',
   renderIcon: iconsReact.Close
 };
-function NotificationTextDetails(_ref3) {
-  var title = _ref3.title,
-      subtitle = _ref3.subtitle,
-      caption = _ref3.caption,
-      notificationType = _ref3.notificationType,
-      children = _ref3.children,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
-
-  var prefix = usePrefix.usePrefix();
-
-  if (notificationType === 'toast') {
-    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-      className: "".concat(prefix, "--toast-notification__details")
-    }), /*#__PURE__*/React__default["default"].createElement("h3", {
-      className: "".concat(prefix, "--toast-notification__title")
-    }, title), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(prefix, "--toast-notification__subtitle")
-    }, subtitle), caption && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(prefix, "--toast-notification__caption")
-    }, caption), children);
-  }
-
-  if (notificationType === 'inline') {
-    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-      className: "".concat(prefix, "--inline-notification__text-wrapper")
-    }), /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "".concat(prefix, "--inline-notification__title")
-    }, title), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(prefix, "--inline-notification__subtitle")
-    }, subtitle), children);
-  }
-}
-NotificationTextDetails.propTypes = {
-  /**
-   * Specify the caption
-   */
-  caption: PropTypes__default["default"].node,
-
-  /**
-   * Pass in the children that will be rendered in NotificationTextDetails
-   */
-  children: PropTypes__default["default"].node,
-
-  /**
-   * Specify the notification type
-   */
-  notificationType: PropTypes__default["default"].oneOf(['toast', 'inline']),
-
-  /**
-   * Specify the sub-title
-   */
-  subtitle: PropTypes__default["default"].node,
-
-  /**
-   * Specify the title
-   */
-  title: PropTypes__default["default"].string
-};
-NotificationTextDetails.defaultProps = {
-  title: 'title',
-  notificationType: 'toast'
-};
 var iconTypes = (_iconTypes = {
   error: iconsReact.ErrorFilled,
   success: iconsReact.CheckmarkFilled,
   warning: iconsReact.WarningFilled
 }, _rollupPluginBabelHelpers.defineProperty(_iconTypes, 'warning-alt', iconsReact.WarningAltFilled), _rollupPluginBabelHelpers.defineProperty(_iconTypes, "info", iconsReact.InformationFilled), _rollupPluginBabelHelpers.defineProperty(_iconTypes, 'info-square', iconsReact.InformationSquareFilled), _iconTypes);
 
-function NotificationIcon(_ref4) {
-  var iconDescription = _ref4.iconDescription,
-      kind = _ref4.kind,
-      notificationType = _ref4.notificationType;
+function NotificationIcon(_ref3) {
+  var iconDescription = _ref3.iconDescription,
+      kind = _ref3.kind,
+      notificationType = _ref3.notificationType;
   var prefix = usePrefix.usePrefix();
   var IconForKind = iconTypes[kind];
 
@@ -221,34 +187,33 @@ NotificationIcon.propTypes = {
   kind: PropTypes__default["default"].oneOf(['error', 'success', 'warning', 'warning-alt', 'info', 'info-square']).isRequired,
   notificationType: PropTypes__default["default"].oneOf(['inline', 'toast']).isRequired
 };
-function ToastNotification(_ref5) {
-  var _cx3;
-
-  var role = _ref5.role,
-      notificationType = _ref5.notificationType,
-      onClose = _ref5.onClose,
-      onCloseButtonClick = _ref5.onCloseButtonClick,
-      iconDescription = _ref5.iconDescription,
-      statusIconDescription = _ref5.statusIconDescription,
-      className = _ref5.className,
-      caption = _ref5.caption,
-      subtitle = _ref5.subtitle,
-      title = _ref5.title,
-      kind = _ref5.kind,
-      lowContrast = _ref5.lowContrast,
-      hideCloseButton = _ref5.hideCloseButton,
-      children = _ref5.children,
-      timeout = _ref5.timeout,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded4);
+function ToastNotification(_ref4) {
+  var _cx4;
 
-  var prefix = usePrefix.usePrefix();
+  var role = _ref4.role,
+      onClose = _ref4.onClose,
+      onCloseButtonClick = _ref4.onCloseButtonClick,
+      statusIconDescription = _ref4.statusIconDescription,
+      className = _ref4.className,
+      children = _ref4.children,
+      kind = _ref4.kind,
+      lowContrast = _ref4.lowContrast,
+      hideCloseButton = _ref4.hideCloseButton,
+      timeout = _ref4.timeout,
+      title = _ref4.title,
+      caption = _ref4.caption,
+      subtitle = _ref4.subtitle,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded3);
 
   var _useState = React.useState(true),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
-  var containerClassName = cx__default["default"](className, (_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--toast-notification"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--toast-notification--low-contrast"), lowContrast), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--toast-notification--").concat(kind), kind), _cx3));
+  var prefix = usePrefix.usePrefix();
+  var containerClassName = cx__default["default"](className, (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--toast-notification"), true), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--toast-notification--low-contrast"), lowContrast), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--toast-notification--").concat(kind), kind), _cx4));
+  var contentRef = React.useRef(null);
+  useNoInteractiveChildren.useNoInteractiveChildren(contentRef);
 
   var handleClose = function handleClose(evt) {
     if (!onClose || onClose(evt) !== false) {
@@ -256,6 +221,8 @@ function ToastNotification(_ref5) {
     }
   };
 
+  var ref = React.useRef(null);
+
   function handleCloseButtonClick(event) {
     onCloseButtonClick(event);
     handleClose(event);
@@ -286,33 +253,44 @@ function ToastNotification(_ref5) {
     return null;
   }
 
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    ref: ref
+  }, rest, {
     role: role,
-    kind: kind,
     className: containerClassName
   }), /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
-    notificationType: notificationType,
+    notificationType: "toast",
     kind: kind,
     iconDescription: statusIconDescription || "".concat(kind, " icon")
-  }), /*#__PURE__*/React__default["default"].createElement(NotificationTextDetails, {
-    title: title,
-    subtitle: subtitle,
-    caption: caption,
-    notificationType: notificationType
-  }, children), !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
-    iconDescription: iconDescription,
-    notificationType: notificationType,
-    onClick: handleCloseButtonClick
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: contentRef,
+    className: "".concat(prefix, "--toast-notification__details")
+  }, title && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--toast-notification__title")
+  }, title), subtitle && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--toast-notification__subtitle")
+  }, subtitle), caption && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--toast-notification__caption")
+  }, caption), children), !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
+    notificationType: "toast",
+    onClick: handleCloseButtonClick,
+    "aria-hidden": "true",
+    tabIndex: "-1"
   }));
 }
 ToastNotification.propTypes = {
+  /**
+   * Provide a description for "close" icon button that can be read by screen readers
+   */
+  ariaLabel: PropTypes__default["default"].string,
+
   /**
    * Specify the caption
    */
-  caption: PropTypes__default["default"].node,
+  caption: PropTypes__default["default"].string,
 
   /**
-   * Pass in the children that will be rendered within the ToastNotification
+   * Specify the content
    */
   children: PropTypes__default["default"].node,
 
@@ -326,27 +304,16 @@ ToastNotification.propTypes = {
    */
   hideCloseButton: PropTypes__default["default"].bool,
 
-  /**
-   * Provide a description for "close" icon that can be read by screen readers
-   */
-  iconDescription: PropTypes__default["default"].string,
-
   /**
    * Specify what state the notification represents
    */
-  kind: PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']).isRequired,
+  kind: PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']),
 
   /**
    * Specify whether you are using the low contrast variant of the ToastNotification.
    */
   lowContrast: PropTypes__default["default"].bool,
 
-  /**
-   * By default, this value is "toast". You can also provide an alternate type
-   * if it makes sense for the underlying `<NotificationTextDetails>` and `<NotificationButton>`
-   */
-  notificationType: PropTypes__default["default"].string,
-
   /**
    * Provide a function that is called when menu is closed
    */
@@ -358,10 +325,10 @@ ToastNotification.propTypes = {
   onCloseButtonClick: PropTypes__default["default"].func,
 
   /**
-   * By default, this value is "alert". You can also provide an alternate
+   * By default, this value is "status". You can also provide an alternate
    * role if it makes sense from the accessibility-side
    */
-  role: PropTypes__default["default"].string.isRequired,
+  role: PropTypes__default["default"].oneOf(['alert', 'log', 'status']),
 
   /**
    * Provide a description for "status" icon that can be read by screen readers
@@ -371,7 +338,7 @@ ToastNotification.propTypes = {
   /**
    * Specify the sub-title
    */
-  subtitle: PropTypes__default["default"].node,
+  subtitle: PropTypes__default["default"].string,
 
   /**
    * Specify an optional duration the notification should be closed in
@@ -381,45 +348,181 @@ ToastNotification.propTypes = {
   /**
    * Specify the title
    */
-  title: PropTypes__default["default"].string.isRequired
+  title: PropTypes__default["default"].string
 };
 ToastNotification.defaultProps = {
   kind: 'error',
-  title: 'provide a title',
-  role: 'alert',
-  notificationType: 'toast',
-  iconDescription: 'closes notification',
+  role: 'status',
   onCloseButtonClick: function onCloseButtonClick() {},
   hideCloseButton: false,
   timeout: 0
 };
-function InlineNotification(_ref6) {
-  var _cx4;
+function InlineNotification(_ref5) {
+  var _cx5;
+
+  var children = _ref5.children,
+      title = _ref5.title,
+      subtitle = _ref5.subtitle,
+      role = _ref5.role,
+      onClose = _ref5.onClose,
+      onCloseButtonClick = _ref5.onCloseButtonClick,
+      statusIconDescription = _ref5.statusIconDescription,
+      className = _ref5.className,
+      kind = _ref5.kind,
+      lowContrast = _ref5.lowContrast,
+      hideCloseButton = _ref5.hideCloseButton,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded4);
+
+  var _useState3 = React.useState(true),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
+
+  var prefix = usePrefix.usePrefix();
+  var containerClassName = cx__default["default"](className, (_cx5 = {}, _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--inline-notification"), true), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--inline-notification--low-contrast"), lowContrast), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--inline-notification--").concat(kind), kind), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--inline-notification--hide-close-button"), hideCloseButton), _cx5));
+  var contentRef = React.useRef(null);
+  useNoInteractiveChildren.useNoInteractiveChildren(contentRef);
+
+  var handleClose = function handleClose(evt) {
+    if (!onClose || onClose(evt) !== false) {
+      setIsOpen(false);
+    }
+  };
+
+  var ref = React.useRef(null);
+
+  function handleCloseButtonClick(event) {
+    onCloseButtonClick(event);
+    handleClose(event);
+  }
 
-  var actions = _ref6.actions,
+  if (!isOpen) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    ref: ref
+  }, rest, {
+    role: role,
+    className: containerClassName
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--inline-notification__details")
+  }, /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
+    notificationType: "inline",
+    kind: kind,
+    iconDescription: statusIconDescription || "".concat(kind, " icon")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: contentRef,
+    className: "".concat(prefix, "--inline-notification__text-wrapper")
+  }, title && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--inline-notification__title")
+  }, title), subtitle && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--inline-notification__subtitle")
+  }, subtitle), children)), !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
+    notificationType: "inline",
+    onClick: handleCloseButtonClick,
+    "aria-hidden": "true",
+    tabIndex: "-1"
+  }));
+}
+InlineNotification.propTypes = {
+  /**
+   * Specify the content
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the notification box
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the close button should be disabled, or not
+   */
+  hideCloseButton: PropTypes__default["default"].bool,
+
+  /**
+   * Specify what state the notification represents
+   */
+  kind: PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']),
+
+  /**
+   * Specify whether you are using the low contrast variant of the InlineNotification.
+   */
+  lowContrast: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a function that is called when menu is closed
+   */
+  onClose: PropTypes__default["default"].func,
+
+  /**
+   * Provide a function that is called when the close button is clicked
+   */
+  onCloseButtonClick: PropTypes__default["default"].func,
+
+  /**
+   * By default, this value is "status". You can also provide an alternate
+   * role if it makes sense from the accessibility-side.
+   */
+  role: PropTypes__default["default"].oneOf(['alert', 'log', 'status']),
+
+  /**
+   * Provide a description for "status" icon that can be read by screen readers
+   */
+  statusIconDescription: PropTypes__default["default"].string,
+
+  /**
+   * Specify the sub-title
+   */
+  subtitle: PropTypes__default["default"].string,
+
+  /**
+   * Specify the title
+   */
+  title: PropTypes__default["default"].string
+};
+InlineNotification.defaultProps = {
+  kind: 'error',
+  role: 'status',
+  onCloseButtonClick: function onCloseButtonClick() {},
+  hideCloseButton: false
+};
+function ActionableNotification(_ref6) {
+  var _cx6;
+
+  var actionButtonLabel = _ref6.actionButtonLabel,
+      ariaLabel = _ref6.ariaLabel,
+      children = _ref6.children,
       role = _ref6.role,
-      notificationType = _ref6.notificationType,
+      onActionButtonClick = _ref6.onActionButtonClick,
       onClose = _ref6.onClose,
       onCloseButtonClick = _ref6.onCloseButtonClick,
-      iconDescription = _ref6.iconDescription,
       statusIconDescription = _ref6.statusIconDescription,
       className = _ref6.className,
-      subtitle = _ref6.subtitle,
-      title = _ref6.title,
+      inline = _ref6.inline,
       kind = _ref6.kind,
       lowContrast = _ref6.lowContrast,
       hideCloseButton = _ref6.hideCloseButton,
-      children = _ref6.children,
+      hasFocus = _ref6.hasFocus,
+      closeOnEscape = _ref6.closeOnEscape,
+      title = _ref6.title,
+      subtitle = _ref6.subtitle,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref6, _excluded5);
 
-  var prefix = usePrefix.usePrefix();
-
-  var _useState3 = React.useState(true),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      isOpen = _useState4[0],
-      setIsOpen = _useState4[1];
+  var _useState5 = React.useState(true),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
 
-  var containerClassName = cx__default["default"](className, (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--inline-notification"), true), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--inline-notification--low-contrast"), lowContrast), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--inline-notification--").concat(kind), kind), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--inline-notification--hide-close-button"), hideCloseButton), _cx4));
+  var prefix = usePrefix.usePrefix();
+  var containerClassName = cx__default["default"](className, (_cx6 = {}, _rollupPluginBabelHelpers.defineProperty(_cx6, "".concat(prefix, "--actionable-notification"), true), _rollupPluginBabelHelpers.defineProperty(_cx6, "".concat(prefix, "--actionable-notification--toast"), !inline), _rollupPluginBabelHelpers.defineProperty(_cx6, "".concat(prefix, "--actionable-notification--low-contrast"), lowContrast), _rollupPluginBabelHelpers.defineProperty(_cx6, "".concat(prefix, "--actionable-notification--").concat(kind), kind), _rollupPluginBabelHelpers.defineProperty(_cx6, "".concat(prefix, "--actionable-notification--hide-close-button"), hideCloseButton), _cx6));
+  var ref = React.useRef(null);
+  useIsomorphicEffect["default"](function () {
+    if (ref.current && hasFocus) {
+      ref.current.focus();
+    }
+  });
 
   var handleClose = function handleClose(evt) {
     if (!onClose || onClose(evt) !== false) {
@@ -427,6 +530,8 @@ function InlineNotification(_ref6) {
     }
   };
 
+  useEscapeToClose(ref, handleCloseButtonClick, closeOnEscape);
+
   function handleCloseButtonClick(event) {
     onCloseButtonClick(event);
     handleClose(event);
@@ -437,33 +542,50 @@ function InlineNotification(_ref6) {
   }
 
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    ref: ref,
     role: role,
-    kind: kind,
     className: containerClassName
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--inline-notification__details")
+    className: "".concat(prefix, "--actionable-notification__details")
   }, /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
-    notificationType: notificationType,
+    notificationType: inline ? 'inline' : 'toast',
     kind: kind,
     iconDescription: statusIconDescription || "".concat(kind, " icon")
-  }), /*#__PURE__*/React__default["default"].createElement(NotificationTextDetails, {
-    title: title,
-    subtitle: subtitle,
-    notificationType: notificationType
-  }, children)), actions, !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
-    iconDescription: iconDescription,
-    notificationType: notificationType,
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--actionable-notification__text-wrapper")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--actionable-notification__content")
+  }, title && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--actionable-notification__title")
+  }, title), subtitle && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--actionable-notification__subtitle")
+  }, subtitle), children))), /*#__PURE__*/React__default["default"].createElement(NotificationActionButton, {
+    onClick: onActionButtonClick,
+    inline: inline
+  }, actionButtonLabel), !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
+    "aria-label": ariaLabel,
+    notificationType: "actionable",
     onClick: handleCloseButtonClick
   }));
 }
-InlineNotification.propTypes = {
+ActionableNotification.propTypes = {
+  /**
+   * Pass in the action button label that will be rendered within the ActionableNotification.
+   */
+  actionButtonLabel: PropTypes__default["default"].string.isRequired,
+
   /**
-   * Pass in the action nodes that will be rendered within the InlineNotification
+   * Provide a description for "close" icon button that can be read by screen readers
+   */
+  ariaLabel: PropTypes__default["default"].string,
+
+  /**
+   * Specify the caption
    */
-  actions: PropTypes__default["default"].node,
+  caption: PropTypes__default["default"].string,
 
   /**
-   * Pass in the children that will be rendered within the InlineNotification
+   * Specify the content
    */
   children: PropTypes__default["default"].node,
 
@@ -472,15 +594,25 @@ InlineNotification.propTypes = {
    */
   className: PropTypes__default["default"].string,
 
+  /**
+   * Specify if pressing the escape key should close notifications
+   */
+  closeOnEscape: PropTypes__default["default"].bool,
+
+  /**
+   * Specify if focus should be moved to the component when the notification contains actions
+   */
+  hasFocus: PropTypes__default["default"].bool,
+
   /**
    * Specify the close button should be disabled, or not
    */
   hideCloseButton: PropTypes__default["default"].bool,
 
-  /**
-   * Provide a description for "close" icon that can be read by screen readers
+  /*
+   * Specify if the notification should have inline styling applied instead of toast
    */
-  iconDescription: PropTypes__default["default"].string,
+  inline: PropTypes__default["default"].bool,
 
   /**
    * Specify what state the notification represents
@@ -488,15 +620,14 @@ InlineNotification.propTypes = {
   kind: PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']).isRequired,
 
   /**
-   * Specify whether you are using the low contrast variant of the InlineNotification.
+   * Specify whether you are using the low contrast variant of the ActionableNotification.
    */
   lowContrast: PropTypes__default["default"].bool,
 
   /**
-   * By default, this value is "inline". You can also provide an alternate type
-   * if it makes sense for the underlying `<NotificationTextDetails>` and `<NotificationButton>`
+   * Provide a function that is called when the action is clicked
    */
-  notificationType: PropTypes__default["default"].string,
+  onActionButtonClick: PropTypes__default["default"].func,
 
   /**
    * Provide a function that is called when menu is closed
@@ -509,10 +640,10 @@ InlineNotification.propTypes = {
   onCloseButtonClick: PropTypes__default["default"].func,
 
   /**
-   * By default, this value is "alert". You can also provide an alternate
-   * role if it makes sense from the accessibility-side
+   * By default, this value is "alertdialog". You can also provide an alternate
+   * role if it makes sense from the accessibility-side.
    */
-  role: PropTypes__default["default"].string.isRequired,
+  role: PropTypes__default["default"].string,
 
   /**
    * Provide a description for "status" icon that can be read by screen readers
@@ -522,23 +653,25 @@ InlineNotification.propTypes = {
   /**
    * Specify the sub-title
    */
-  subtitle: PropTypes__default["default"].node,
+  subtitle: PropTypes__default["default"].string,
 
   /**
    * Specify the title
    */
-  title: PropTypes__default["default"].string.isRequired
+  title: PropTypes__default["default"].string
 };
-InlineNotification.defaultProps = {
-  role: 'alert',
-  notificationType: 'inline',
-  iconDescription: 'closes notification',
+ActionableNotification.defaultProps = {
+  kind: 'error',
+  role: 'alertdialog',
   onCloseButtonClick: function onCloseButtonClick() {},
-  hideCloseButton: false
+  hideCloseButton: false,
+  hasFocus: true,
+  closeOnEscape: true,
+  inline: false
 };
 
+exports.ActionableNotification = ActionableNotification;
 exports.InlineNotification = InlineNotification;
 exports.NotificationActionButton = NotificationActionButton;
 exports.NotificationButton = NotificationButton;
-exports.NotificationTextDetails = NotificationTextDetails;
 exports.ToastNotification = ToastNotification;