@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/lib/components/Notification/Notification.js

@@ -29,13 +29,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _NotificationButton$p, _NotificationButton$d, _iconTypes, _ToastNotification$pr, _InlineNotification$p, _ActionableNotificati;
-
-var _excluded = ["children", "className", "onClick", "inline"],
-    _excluded2 = ["aria-label", "ariaLabel", "className", "type", "renderIcon", "name", "notificationType"],
-    _excluded3 = ["aria-label", "ariaLabel", "role", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "children", "kind", "lowContrast", "hideCloseButton", "timeout", "title", "caption", "subtitle"],
-    _excluded4 = ["aria-label", "children", "title", "subtitle", "role", "onClose", "onCloseButtonClick", "statusIconDescription", "className", "kind", "lowContrast", "hideCloseButton"],
-    _excluded5 = ["actionButtonLabel", "aria-label", "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
@@ -44,34 +37,35 @@ var _excluded = ["children", "className", "onClick", "inline"],
  */
 
 function useEscapeToClose(ref, callback) {
-  var override = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let override = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
 
-  var handleKeyDown = function handleKeyDown(event) {
+  const 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);
+    const 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 () {
+  useIsomorphicEffect["default"](() => {
     document.addEventListener('keydown', handleKeyDown, false);
-    return function () {
-      return document.removeEventListener('keydown', handleKeyDown, false);
-    };
+    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, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--actionable-notification__action-button"), true));
+  let {
+    children,
+    className: customClassName,
+    onClick,
+    inline,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](customClassName, {
+    [`${prefix}--actionable-notification__action-button`]: true
+  });
   return /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
     className: className,
     kind: inline ? 'ghost' : 'tertiary',
@@ -101,18 +95,23 @@ NotificationActionButton.propTypes = {
   onClick: PropTypes__default["default"].func
 };
 function NotificationButton(_ref2) {
-  var ariaLabel = _ref2['aria-label'],
-      deprecatedAriaLabel = _ref2.ariaLabel,
-      className = _ref2.className,
-      type = _ref2.type,
-      IconTag = _ref2.renderIcon,
-      name = _ref2.name,
-      notificationType = _ref2.notificationType,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-
-  var prefix = usePrefix.usePrefix();
-  var buttonClassName = cx__default["default"](className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--").concat(notificationType, "-notification__close-button"), notificationType));
-  var iconClassName = cx__default["default"](_rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--").concat(notificationType, "-notification__close-icon"), notificationType));
+  let {
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
+    className,
+    type,
+    renderIcon: IconTag,
+    name,
+    notificationType,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
+  const buttonClassName = cx__default["default"](className, {
+    [`${prefix}--${notificationType}-notification__close-button`]: notificationType
+  });
+  const iconClassName = cx__default["default"]({
+    [`${prefix}--${notificationType}-notification__close-icon`]: notificationType
+  });
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
     // eslint-disable-next-line react/button-has-type
     type: type,
@@ -124,27 +123,75 @@ function NotificationButton(_ref2) {
     name: name
   }));
 }
-NotificationButton.propTypes = (_NotificationButton$p = {}, _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, "name", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, "notificationType", PropTypes__default["default"].oneOf(['toast', 'inline', 'actionable'])), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, "renderIcon", PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$p, "type", PropTypes__default["default"].string), _NotificationButton$p);
-NotificationButton.defaultProps = (_NotificationButton$d = {}, _rollupPluginBabelHelpers.defineProperty(_NotificationButton$d, 'aria-label', 'close notification'), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$d, "notificationType", 'toast'), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$d, "type", 'button'), _rollupPluginBabelHelpers.defineProperty(_NotificationButton$d, "renderIcon", iconsReact.Close), _NotificationButton$d);
-var iconTypes = (_iconTypes = {
+NotificationButton.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the container node
+   */
+  ['aria-label']: PropTypes__default["default"].string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container note.
+   */
+  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+
+  /**
+   * Specify an optional className to be applied to the notification button
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify an optional icon for the Button through a string,
+   * if something but regular "close" icon is desirable
+   */
+  name: PropTypes__default["default"].string,
+
+  /**
+   * Specify the notification type
+   */
+  notificationType: PropTypes__default["default"].oneOf(['toast', 'inline', 'actionable']),
+
+  /**
+   * Optional prop to allow overriding the icon rendering.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
+  /**
+   * Optional prop to specify the type of the Button
+   */
+  type: PropTypes__default["default"].string
+};
+NotificationButton.defaultProps = {
+  ['aria-label']: 'close notification',
+  notificationType: 'toast',
+  type: 'button',
+  renderIcon: iconsReact.Close
+};
+const 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);
+  warning: iconsReact.WarningFilled,
+  ['warning-alt']: iconsReact.WarningAltFilled,
+  info: iconsReact.InformationFilled,
+  ['info-square']: iconsReact.InformationSquareFilled
+};
 
 function NotificationIcon(_ref3) {
-  var iconDescription = _ref3.iconDescription,
-      kind = _ref3.kind,
-      notificationType = _ref3.notificationType;
-  var prefix = usePrefix.usePrefix();
-  var IconForKind = iconTypes[kind];
+  let {
+    iconDescription,
+    kind,
+    notificationType
+  } = _ref3;
+  const prefix = usePrefix.usePrefix();
+  const IconForKind = iconTypes[kind];
 
   if (!IconForKind) {
     return null;
   }
 
   return /*#__PURE__*/React__default["default"].createElement(IconForKind, {
-    className: "".concat(prefix, "--").concat(notificationType, "-notification__icon"),
+    className: `${prefix}--${notificationType}-notification__icon`,
     size: 20
   }, /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription));
 }
@@ -155,65 +202,64 @@ NotificationIcon.propTypes = {
   notificationType: PropTypes__default["default"].oneOf(['inline', 'toast']).isRequired
 };
 function ToastNotification(_ref4) {
-  var _cx4;
-
-  var ariaLabel = _ref4['aria-label'],
-      deprecatedAriaLabel = _ref4.ariaLabel,
-      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 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);
+  let {
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
+    role,
+    onClose,
+    onCloseButtonClick,
+    statusIconDescription,
+    className,
+    children,
+    kind,
+    lowContrast,
+    hideCloseButton,
+    timeout,
+    title,
+    caption,
+    subtitle,
+    ...rest
+  } = _ref4;
+  const [isOpen, setIsOpen] = React.useState(true);
+  const prefix = usePrefix.usePrefix();
+  const containerClassName = cx__default["default"](className, {
+    [`${prefix}--toast-notification`]: true,
+    [`${prefix}--toast-notification--low-contrast`]: lowContrast,
+    [`${prefix}--toast-notification--${kind}`]: kind
+  });
+  const contentRef = React.useRef(null);
   useNoInteractiveChildren.useNoInteractiveChildren(contentRef);
 
-  var handleClose = function handleClose(evt) {
+  const handleClose = evt => {
     if (!onClose || onClose(evt) !== false) {
       setIsOpen(false);
     }
   };
 
-  var ref = React.useRef(null);
+  const ref = React.useRef(null);
 
   function handleCloseButtonClick(event) {
     onCloseButtonClick(event);
     handleClose(event);
   }
 
-  var savedOnClose = React.useRef(onClose);
-  React.useEffect(function () {
+  const savedOnClose = React.useRef(onClose);
+  React.useEffect(() => {
     savedOnClose.current = onClose;
   });
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!timeout) {
       return;
     }
 
-    var timeoutId = window.setTimeout(function (event) {
+    const timeoutId = window.setTimeout(event => {
       setIsOpen(false);
 
       if (savedOnClose.current) {
         savedOnClose.current(event);
       }
     }, timeout);
-    return function () {
+    return () => {
       window.clearTimeout(timeoutId);
     };
   }, [timeout]);
@@ -230,16 +276,16 @@ function ToastNotification(_ref4) {
   }), /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
     notificationType: "toast",
     kind: kind,
-    iconDescription: statusIconDescription || "".concat(kind, " icon")
+    iconDescription: statusIconDescription || `${kind} icon`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: contentRef,
-    className: "".concat(prefix, "--toast-notification__details")
+    className: `${prefix}--toast-notification__details`
   }, title && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--toast-notification__title")
+    className: `${prefix}--toast-notification__title`
   }, title), subtitle && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--toast-notification__subtitle")
+    className: `${prefix}--toast-notification__subtitle`
   }, subtitle), caption && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--toast-notification__caption")
+    className: `${prefix}--toast-notification__caption`
   }, caption), children), !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
     notificationType: "toast",
     onClick: handleCloseButtonClick,
@@ -248,48 +294,125 @@ function ToastNotification(_ref4) {
     tabIndex: "-1"
   }));
 }
-ToastNotification.propTypes = (_ToastNotification$pr = {}, _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "caption", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "hideCloseButton", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "kind", PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt'])), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "lowContrast", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "onCloseButtonClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "role", PropTypes__default["default"].oneOf(['alert', 'log', 'status'])), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "statusIconDescription", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "subtitle", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "timeout", PropTypes__default["default"].number), _rollupPluginBabelHelpers.defineProperty(_ToastNotification$pr, "title", PropTypes__default["default"].string), _ToastNotification$pr);
+ToastNotification.propTypes = {
+  /**
+   * Provide a description for "close" icon button that can be read by screen readers
+   */
+  ['aria-label']: PropTypes__default["default"].string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Provide a description for "close" icon button that can be read by screen readers
+   */
+  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+
+  /**
+   * Specify the caption
+   */
+  caption: PropTypes__default["default"].string,
+
+  /**
+   * 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 ToastNotification.
+   */
+  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 an optional duration the notification should be closed in
+   */
+  timeout: PropTypes__default["default"].number,
+
+  /**
+   * Specify the title
+   */
+  title: PropTypes__default["default"].string
+};
 ToastNotification.defaultProps = {
   kind: 'error',
   role: 'status',
-  onCloseButtonClick: function onCloseButtonClick() {},
+  onCloseButtonClick: () => {},
   hideCloseButton: false,
   timeout: 0
 };
 function InlineNotification(_ref5) {
-  var _cx5;
-
-  var ariaLabel = _ref5['aria-label'],
-      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);
+  let {
+    ['aria-label']: ariaLabel,
+    children,
+    title,
+    subtitle,
+    role,
+    onClose,
+    onCloseButtonClick,
+    statusIconDescription,
+    className,
+    kind,
+    lowContrast,
+    hideCloseButton,
+    ...rest
+  } = _ref5;
+  const [isOpen, setIsOpen] = React.useState(true);
+  const prefix = usePrefix.usePrefix();
+  const containerClassName = cx__default["default"](className, {
+    [`${prefix}--inline-notification`]: true,
+    [`${prefix}--inline-notification--low-contrast`]: lowContrast,
+    [`${prefix}--inline-notification--${kind}`]: kind,
+    [`${prefix}--inline-notification--hide-close-button`]: hideCloseButton
+  });
+  const contentRef = React.useRef(null);
   useNoInteractiveChildren.useNoInteractiveChildren(contentRef);
 
-  var handleClose = function handleClose(evt) {
+  const handleClose = evt => {
     if (!onClose || onClose(evt) !== false) {
       setIsOpen(false);
     }
   };
 
-  var ref = React.useRef(null);
+  const ref = React.useRef(null);
 
   function handleCloseButtonClick(event) {
     onCloseButtonClick(event);
@@ -306,18 +429,18 @@ function InlineNotification(_ref5) {
     role: role,
     className: containerClassName
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--inline-notification__details")
+    className: `${prefix}--inline-notification__details`
   }, /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
     notificationType: "inline",
     kind: kind,
-    iconDescription: statusIconDescription || "".concat(kind, " icon")
+    iconDescription: statusIconDescription || `${kind} icon`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: contentRef,
-    className: "".concat(prefix, "--inline-notification__text-wrapper")
+    className: `${prefix}--inline-notification__text-wrapper`
   }, title && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--inline-notification__title")
+    className: `${prefix}--inline-notification__title`
   }, title), subtitle && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--inline-notification__subtitle")
+    className: `${prefix}--inline-notification__subtitle`
   }, subtitle), children)), !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
     notificationType: "inline",
     onClick: handleCloseButtonClick,
@@ -326,52 +449,114 @@ function InlineNotification(_ref5) {
     tabIndex: "-1"
   }));
 }
-InlineNotification.propTypes = (_InlineNotification$p = {}, _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "hideCloseButton", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "kind", PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt'])), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "lowContrast", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "onCloseButtonClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "role", PropTypes__default["default"].oneOf(['alert', 'log', 'status'])), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "statusIconDescription", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "subtitle", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_InlineNotification$p, "title", PropTypes__default["default"].string), _InlineNotification$p);
+InlineNotification.propTypes = {
+  /**
+   * Provide a description for "close" icon button that can be read by screen readers
+   */
+  ['aria-label']: PropTypes__default["default"].string,
+
+  /**
+   * 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() {},
+  onCloseButtonClick: () => {},
   hideCloseButton: false
 };
 function ActionableNotification(_ref6) {
-  var _cx6;
-
-  var actionButtonLabel = _ref6.actionButtonLabel,
-      ariaLabel = _ref6['aria-label'],
-      deprecatedAriaLabel = _ref6.ariaLabel,
-      children = _ref6.children,
-      role = _ref6.role,
-      onActionButtonClick = _ref6.onActionButtonClick,
-      onClose = _ref6.onClose,
-      onCloseButtonClick = _ref6.onCloseButtonClick,
-      statusIconDescription = _ref6.statusIconDescription,
-      className = _ref6.className,
-      inline = _ref6.inline,
-      kind = _ref6.kind,
-      lowContrast = _ref6.lowContrast,
-      hideCloseButton = _ref6.hideCloseButton,
-      hasFocus = _ref6.hasFocus,
-      closeOnEscape = _ref6.closeOnEscape,
-      title = _ref6.title,
-      subtitle = _ref6.subtitle,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref6, _excluded5);
-
-  var _useState5 = React.useState(true),
-      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      isOpen = _useState6[0],
-      setIsOpen = _useState6[1];
-
-  var prefix = usePrefix.usePrefix();
-  var id = useId.useId('actionable-notification');
-  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 () {
+  let {
+    actionButtonLabel,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
+    children,
+    role,
+    onActionButtonClick,
+    onClose,
+    onCloseButtonClick,
+    statusIconDescription,
+    className,
+    inline,
+    kind,
+    lowContrast,
+    hideCloseButton,
+    hasFocus,
+    closeOnEscape,
+    title,
+    subtitle,
+    ...rest
+  } = _ref6;
+  const [isOpen, setIsOpen] = React.useState(true);
+  const prefix = usePrefix.usePrefix();
+  const id = useId.useId('actionable-notification');
+  const containerClassName = cx__default["default"](className, {
+    [`${prefix}--actionable-notification`]: true,
+    [`${prefix}--actionable-notification--toast`]: !inline,
+    [`${prefix}--actionable-notification--low-contrast`]: lowContrast,
+    [`${prefix}--actionable-notification--${kind}`]: kind,
+    [`${prefix}--actionable-notification--hide-close-button`]: hideCloseButton
+  });
+  const ref = React.useRef(null);
+  useIsomorphicEffect["default"](() => {
     if (ref.current && hasFocus) {
       ref.current.focus();
     }
   });
 
-  var handleClose = function handleClose(evt) {
+  const handleClose = evt => {
     if (!onClose || onClose(evt) !== false) {
       setIsOpen(false);
     }
@@ -394,20 +579,20 @@ function ActionableNotification(_ref6) {
     className: containerClassName,
     "aria-labelledby": title ? id : undefined
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--actionable-notification__details")
+    className: `${prefix}--actionable-notification__details`
   }, /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
     notificationType: inline ? 'inline' : 'toast',
     kind: kind,
-    iconDescription: statusIconDescription || "".concat(kind, " icon")
+    iconDescription: statusIconDescription || `${kind} icon`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--actionable-notification__text-wrapper")
+    className: `${prefix}--actionable-notification__text-wrapper`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--actionable-notification__content")
+    className: `${prefix}--actionable-notification__content`
   }, title && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--actionable-notification__title"),
+    className: `${prefix}--actionable-notification__title`,
     id: id
   }, title), subtitle && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--actionable-notification__subtitle")
+    className: `${prefix}--actionable-notification__subtitle`
   }, subtitle), children))), /*#__PURE__*/React__default["default"].createElement(NotificationActionButton, {
     onClick: onActionButtonClick,
     inline: inline
@@ -417,16 +602,103 @@ function ActionableNotification(_ref6) {
     onClick: handleCloseButtonClick
   }));
 }
-ActionableNotification.propTypes = (_ActionableNotificati = {
+ActionableNotification.propTypes = {
   /**
    * Pass in the action button label that will be rendered within the ActionableNotification.
    */
-  actionButtonLabel: PropTypes__default["default"].string.isRequired
-}, _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "closeOnEscape", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "hasFocus", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "hideCloseButton", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "inline", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "kind", PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']).isRequired), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "lowContrast", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "onActionButtonClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "onCloseButtonClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "role", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "statusIconDescription", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "subtitle", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ActionableNotificati, "title", PropTypes__default["default"].string), _ActionableNotificati);
+  actionButtonLabel: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Provide a description for "close" icon button that can be read by screen readers
+   */
+  ['aria-label']: PropTypes__default["default"].string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Provide a description for "close" icon button that can be read by screen readers
+   */
+  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+
+  /**
+   * 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 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,
+
+  /*
+   * Specify if the notification should have inline styling applied instead of toast
+   */
+  inline: PropTypes__default["default"].bool,
+
+  /**
+   * Specify what state the notification represents
+   */
+  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 ActionableNotification.
+   */
+  lowContrast: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a function that is called when the action is clicked
+   */
+  onActionButtonClick: PropTypes__default["default"].func,
+
+  /**
+   * 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 "alertdialog". You can also provide an alternate
+   * role if it makes sense from the accessibility-side.
+   */
+  role: PropTypes__default["default"].string,
+
+  /**
+   * 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
+};
 ActionableNotification.defaultProps = {
   kind: 'error',
   role: 'alertdialog',
-  onCloseButtonClick: function onCloseButtonClick() {},
+  onCloseButtonClick: () => {},
   hideCloseButton: false,
   hasFocus: true,
   closeOnEscape: true,