@carbon/react 1.24.0 → 1.25.0

package/es/components/MultiSelect/MultiSelect.js

@@ -25,7 +25,7 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
-import { Delete } from '../../internal/keyboard/keys.js';
+import { Delete, Escape, Space, ArrowDown } from '../../internal/keyboard/keys.js';
 
 var noop = function noop() {};
 
@@ -111,20 +111,25 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
       isFocused = _useState4[0],
       setIsFocused = _useState4[1];
 
-  var _useState5 = useState(open),
+  var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      isOpen = _useState6[0],
-      setIsOpen = _useState6[1];
+      inputFocused = _useState6[0],
+      setInputFocused = _useState6[1];
 
-  var _useState7 = useState(open),
+  var _useState7 = useState(open || false),
       _useState8 = _slicedToArray(_useState7, 2),
-      prevOpenProp = _useState8[0],
-      setPrevOpenProp = _useState8[1];
+      isOpen = _useState8[0],
+      setIsOpen = _useState8[1];
 
-  var _useState9 = useState([]),
+  var _useState9 = useState(open),
       _useState10 = _slicedToArray(_useState9, 2),
-      topItems = _useState10[0],
-      setTopItems = _useState10[1];
+      prevOpenProp = _useState10[0],
+      setPrevOpenProp = _useState10[1];
+
+  var _useState11 = useState([]),
+      _useState12 = _slicedToArray(_useState11, 2),
+      topItems = _useState12[0],
+      setTopItems = _useState12[1];
 
   var _useSelection = useSelection({
     disabled: disabled,
@@ -164,7 +169,14 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
       getItemProps = _useSelect.getItemProps,
       selectedItem = _useSelect.selectedItem;
 
-  var toggleButtonProps = getToggleButtonProps();
+  var toggleButtonProps = getToggleButtonProps({
+    onFocus: function onFocus() {
+      setInputFocused(true);
+    },
+    onBlur: function onBlur() {
+      setInputFocused(false);
+    }
+  });
   var mergedRef = mergeRefs(toggleButtonProps.ref, ref);
   var selectedItems = selectedItem;
   /**
@@ -196,7 +208,7 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
   var helperId = !helperText ? undefined : "multiselect-helper-text-".concat(multiSelectInstanceId);
   var fieldLabelId = "multiselect-field-label-".concat(multiSelectInstanceId);
   var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var className = cx("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx4, "".concat(prefix, "--multi-select--readonly"), readOnly), _cx4)); // needs to be capitalized for react to render it correctly
+  var className = cx("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid--focused"), invalid && inputFocused), _defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx4, "".concat(prefix, "--multi-select--readonly"), readOnly), _cx4)); // needs to be capitalized for react to render it correctly
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
   var ItemToElement = itemToElement;
@@ -250,12 +262,20 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
   }
 
   var onKeyDown = function onKeyDown(e) {
-    if (match(e, Delete) && !disabled) {
-      clearSelection();
-      e.stopPropagation();
+    if (!disabled) {
+      if (match(e, Delete) || match(e, Escape)) {
+        clearSelection();
+        e.stopPropagation();
+      }
+
+      if (match(e, Space) || match(e, ArrowDown)) {
+        setIsOpenWrapper(true);
+      }
     }
   };
 
+  var multiSelectFieldWrapperClasses = cx("".concat(prefix, "--list-box__field--wrapper"), _defineProperty({}, "".concat(prefix, "--list-box__field--wrapper--input-focused"), inputFocused));
+
   var handleFocus = function handleFocus(evt) {
     evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
   };
@@ -301,6 +321,15 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     className: "".concat(prefix, "--list-box__invalid-icon")
   }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
     className: "".concat(prefix, "--list-box__invalid-icon ").concat(prefix, "--list-box__invalid-icon--warning")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: multiSelectFieldWrapperClasses
+  }, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
+    readOnly: readOnly,
+    clearSelection: !disabled && !readOnly ? clearSelection : noop,
+    selectionCount: selectedItems.length // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    ,
+    translateWithId: translateWithId,
+    disabled: disabled
   }), /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button",
     className: "".concat(prefix, "--list-box__field"),
@@ -309,20 +338,13 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
   }, toggleButtonProps, {
     ref: mergedRef,
     onKeyDown: onKeyDown
-  }, readOnlyEventHandlers), selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
-    readOnly: readOnly,
-    clearSelection: !disabled && !readOnly ? clearSelection : noop,
-    selectionCount: selectedItems.length // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    translateWithId: translateWithId,
-    disabled: disabled
-  }), /*#__PURE__*/React__default.createElement("span", {
+  }, readOnlyEventHandlers), /*#__PURE__*/React__default.createElement("span", {
     id: fieldLabelId,
     className: "".concat(prefix, "--list-box__label")
   }, label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
-    isOpen: !!isOpen,
+    isOpen: isOpen,
     translateWithId: translateWithId
-  })), /*#__PURE__*/React__default.createElement(ListBox.Menu, _extends({
+  }))), /*#__PURE__*/React__default.createElement(ListBox.Menu, _extends({
     "aria-multiselectable": "true"
   }, getMenuProps()), isOpen && // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(items, sortOptions).map(function (item, index) {
@@ -466,7 +488,7 @@ MultiSelect.propTypes = _objectSpread2(_objectSpread2({}, sortingPropTypes), {},
 
   /**
    * `onMenuChange` is a utility for this controlled component to communicate to a
-   * consuming component that the menu was opend(`true`)/closed(`false`).
+   * consuming component that the menu was open(`true`)/closed(`false`).
    */
   onMenuChange: PropTypes.func,
 

package/es/components/Notification/Notification.js

@@ -8,6 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useState, useRef, useEffect } from 'react';
+import deprecate from '../../prop-types/deprecate.js';
 import cx from 'classnames';
 import { Close, WarningAltFilled, InformationFilled, InformationSquareFilled, ErrorFilled, CheckmarkFilled, WarningFilled } from '@carbon/icons-react';
 import Button from '../Button/Button.js';
@@ -18,13 +19,13 @@ import { useId } from '../../internal/useId.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
-var _iconTypes;
+var _NotificationButton$p, _NotificationButton$d, _iconTypes, _ToastNotification$pr, _InlineNotification$p, _ActionableNotificati;
 
 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"];
+    _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
@@ -90,7 +91,8 @@ NotificationActionButton.propTypes = {
   onClick: PropTypes.func
 };
 function NotificationButton(_ref2) {
-  var ariaLabel = _ref2.ariaLabel,
+  var ariaLabel = _ref2['aria-label'],
+      deprecatedAriaLabel = _ref2.ariaLabel,
       className = _ref2.className,
       type = _ref2.type,
       IconTag = _ref2.renderIcon,
@@ -104,53 +106,16 @@ function NotificationButton(_ref2) {
   return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
     // eslint-disable-next-line react/button-has-type
     type: type,
-    "aria-label": ariaLabel,
-    title: ariaLabel,
+    "aria-label": deprecatedAriaLabel || ariaLabel,
+    title: deprecatedAriaLabel || ariaLabel,
     className: buttonClassName
   }), IconTag && /*#__PURE__*/React__default.createElement(IconTag, {
     className: iconClassName,
     name: name
   }));
 }
-NotificationButton.propTypes = {
-  /**
-   * Specify a label to be read by screen readers on the notification button
-   */
-  ariaLabel: PropTypes.string,
-
-  /**
-   * Specify an optional className to be applied to the notification button
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify an optional icon for the Button through a string,
-   * if something but regular "close" icon is desirable
-   */
-  name: PropTypes.string,
-
-  /**
-   * Specify the notification type
-   */
-  notificationType: PropTypes.oneOf(['toast', 'inline', 'actionable']),
-
-  /**
-   * Optional prop to allow overriding the icon rendering.
-   * Can be a React component class
-   */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
-  /**
-   * Optional prop to specify the type of the Button
-   */
-  type: PropTypes.string
-};
-NotificationButton.defaultProps = {
-  ariaLabel: 'close notification',
-  notificationType: 'toast',
-  type: 'button',
-  renderIcon: Close
-};
+NotificationButton.propTypes = (_NotificationButton$p = {}, _defineProperty(_NotificationButton$p, 'aria-label', PropTypes.string), _defineProperty(_NotificationButton$p, "ariaLabel", deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _defineProperty(_NotificationButton$p, "className", PropTypes.string), _defineProperty(_NotificationButton$p, "name", PropTypes.string), _defineProperty(_NotificationButton$p, "notificationType", PropTypes.oneOf(['toast', 'inline', 'actionable'])), _defineProperty(_NotificationButton$p, "renderIcon", PropTypes.oneOfType([PropTypes.func, PropTypes.object])), _defineProperty(_NotificationButton$p, "type", PropTypes.string), _NotificationButton$p);
+NotificationButton.defaultProps = (_NotificationButton$d = {}, _defineProperty(_NotificationButton$d, 'aria-label', 'close notification'), _defineProperty(_NotificationButton$d, "notificationType", 'toast'), _defineProperty(_NotificationButton$d, "type", 'button'), _defineProperty(_NotificationButton$d, "renderIcon", Close), _NotificationButton$d);
 var iconTypes = (_iconTypes = {
   error: ErrorFilled,
   success: CheckmarkFilled,
@@ -182,7 +147,9 @@ NotificationIcon.propTypes = {
 function ToastNotification(_ref4) {
   var _cx4;
 
-  var role = _ref4.role,
+  var ariaLabel = _ref4['aria-label'],
+      deprecatedAriaLabel = _ref4.ariaLabel,
+      role = _ref4.role,
       onClose = _ref4.onClose,
       onCloseButtonClick = _ref4.onCloseButtonClick,
       statusIconDescription = _ref4.statusIconDescription,
@@ -267,81 +234,11 @@ function ToastNotification(_ref4) {
     notificationType: "toast",
     onClick: handleCloseButtonClick,
     "aria-hidden": "true",
+    "aria-label": deprecatedAriaLabel || ariaLabel,
     tabIndex: "-1"
   }));
 }
-ToastNotification.propTypes = {
-  /**
-   * Provide a description for "close" icon button that can be read by screen readers
-   */
-  ariaLabel: PropTypes.string,
-
-  /**
-   * Specify the caption
-   */
-  caption: PropTypes.string,
-
-  /**
-   * Specify the content
-   */
-  children: PropTypes.node,
-
-  /**
-   * Specify an optional className to be applied to the notification box
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify the close button should be disabled, or not
-   */
-  hideCloseButton: PropTypes.bool,
-
-  /**
-   * Specify what state the notification represents
-   */
-  kind: PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']),
-
-  /**
-   * Specify whether you are using the low contrast variant of the ToastNotification.
-   */
-  lowContrast: PropTypes.bool,
-
-  /**
-   * Provide a function that is called when menu is closed
-   */
-  onClose: PropTypes.func,
-
-  /**
-   * Provide a function that is called when the close button is clicked
-   */
-  onCloseButtonClick: PropTypes.func,
-
-  /**
-   * By default, this value is "status". You can also provide an alternate
-   * role if it makes sense from the accessibility-side
-   */
-  role: PropTypes.oneOf(['alert', 'log', 'status']),
-
-  /**
-   * Provide a description for "status" icon that can be read by screen readers
-   */
-  statusIconDescription: PropTypes.string,
-
-  /**
-   * Specify the sub-title
-   */
-  subtitle: PropTypes.string,
-
-  /**
-   * Specify an optional duration the notification should be closed in
-   */
-  timeout: PropTypes.number,
-
-  /**
-   * Specify the title
-   */
-  title: PropTypes.string
-};
+ToastNotification.propTypes = (_ToastNotification$pr = {}, _defineProperty(_ToastNotification$pr, 'aria-label', PropTypes.string), _defineProperty(_ToastNotification$pr, "ariaLabel", deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _defineProperty(_ToastNotification$pr, "caption", PropTypes.string), _defineProperty(_ToastNotification$pr, "children", PropTypes.node), _defineProperty(_ToastNotification$pr, "className", PropTypes.string), _defineProperty(_ToastNotification$pr, "hideCloseButton", PropTypes.bool), _defineProperty(_ToastNotification$pr, "kind", PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt'])), _defineProperty(_ToastNotification$pr, "lowContrast", PropTypes.bool), _defineProperty(_ToastNotification$pr, "onClose", PropTypes.func), _defineProperty(_ToastNotification$pr, "onCloseButtonClick", PropTypes.func), _defineProperty(_ToastNotification$pr, "role", PropTypes.oneOf(['alert', 'log', 'status'])), _defineProperty(_ToastNotification$pr, "statusIconDescription", PropTypes.string), _defineProperty(_ToastNotification$pr, "subtitle", PropTypes.string), _defineProperty(_ToastNotification$pr, "timeout", PropTypes.number), _defineProperty(_ToastNotification$pr, "title", PropTypes.string), _ToastNotification$pr);
 ToastNotification.defaultProps = {
   kind: 'error',
   role: 'status',
@@ -352,7 +249,8 @@ ToastNotification.defaultProps = {
 function InlineNotification(_ref5) {
   var _cx5;
 
-  var children = _ref5.children,
+  var ariaLabel = _ref5['aria-label'],
+      children = _ref5.children,
       title = _ref5.title,
       subtitle = _ref5.subtitle,
       role = _ref5.role,
@@ -414,66 +312,11 @@ function InlineNotification(_ref5) {
     notificationType: "inline",
     onClick: handleCloseButtonClick,
     "aria-hidden": "true",
+    "aria-label": ariaLabel,
     tabIndex: "-1"
   }));
 }
-InlineNotification.propTypes = {
-  /**
-   * Specify the content
-   */
-  children: PropTypes.node,
-
-  /**
-   * Specify an optional className to be applied to the notification box
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify the close button should be disabled, or not
-   */
-  hideCloseButton: PropTypes.bool,
-
-  /**
-   * Specify what state the notification represents
-   */
-  kind: PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']),
-
-  /**
-   * Specify whether you are using the low contrast variant of the InlineNotification.
-   */
-  lowContrast: PropTypes.bool,
-
-  /**
-   * Provide a function that is called when menu is closed
-   */
-  onClose: PropTypes.func,
-
-  /**
-   * Provide a function that is called when the close button is clicked
-   */
-  onCloseButtonClick: PropTypes.func,
-
-  /**
-   * By default, this value is "status". You can also provide an alternate
-   * role if it makes sense from the accessibility-side.
-   */
-  role: PropTypes.oneOf(['alert', 'log', 'status']),
-
-  /**
-   * Provide a description for "status" icon that can be read by screen readers
-   */
-  statusIconDescription: PropTypes.string,
-
-  /**
-   * Specify the sub-title
-   */
-  subtitle: PropTypes.string,
-
-  /**
-   * Specify the title
-   */
-  title: PropTypes.string
-};
+InlineNotification.propTypes = (_InlineNotification$p = {}, _defineProperty(_InlineNotification$p, 'aria-label', PropTypes.string), _defineProperty(_InlineNotification$p, "children", PropTypes.node), _defineProperty(_InlineNotification$p, "className", PropTypes.string), _defineProperty(_InlineNotification$p, "hideCloseButton", PropTypes.bool), _defineProperty(_InlineNotification$p, "kind", PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt'])), _defineProperty(_InlineNotification$p, "lowContrast", PropTypes.bool), _defineProperty(_InlineNotification$p, "onClose", PropTypes.func), _defineProperty(_InlineNotification$p, "onCloseButtonClick", PropTypes.func), _defineProperty(_InlineNotification$p, "role", PropTypes.oneOf(['alert', 'log', 'status'])), _defineProperty(_InlineNotification$p, "statusIconDescription", PropTypes.string), _defineProperty(_InlineNotification$p, "subtitle", PropTypes.string), _defineProperty(_InlineNotification$p, "title", PropTypes.string), _InlineNotification$p);
 InlineNotification.defaultProps = {
   kind: 'error',
   role: 'status',
@@ -484,7 +327,8 @@ function ActionableNotification(_ref6) {
   var _cx6;
 
   var actionButtonLabel = _ref6.actionButtonLabel,
-      ariaLabel = _ref6.ariaLabel,
+      ariaLabel = _ref6['aria-label'],
+      deprecatedAriaLabel = _ref6.ariaLabel,
       children = _ref6.children,
       role = _ref6.role,
       onActionButtonClick = _ref6.onActionButtonClick,
@@ -558,98 +402,17 @@ function ActionableNotification(_ref6) {
     onClick: onActionButtonClick,
     inline: inline
   }, actionButtonLabel), !hideCloseButton && /*#__PURE__*/React__default.createElement(NotificationButton, {
-    "aria-label": ariaLabel,
+    "aria-label": deprecatedAriaLabel || ariaLabel,
     notificationType: "actionable",
     onClick: handleCloseButtonClick
   }));
 }
-ActionableNotification.propTypes = {
+ActionableNotification.propTypes = (_ActionableNotificati = {
   /**
    * Pass in the action button label that will be rendered within the ActionableNotification.
    */
-  actionButtonLabel: PropTypes.string.isRequired,
-
-  /**
-   * Provide a description for "close" icon button that can be read by screen readers
-   */
-  ariaLabel: PropTypes.string,
-
-  /**
-   * Specify the content
-   */
-  children: PropTypes.node,
-
-  /**
-   * Specify an optional className to be applied to the notification box
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify if pressing the escape key should close notifications
-   */
-  closeOnEscape: PropTypes.bool,
-
-  /**
-   * Specify if focus should be moved to the component when the notification contains actions
-   */
-  hasFocus: PropTypes.bool,
-
-  /**
-   * Specify the close button should be disabled, or not
-   */
-  hideCloseButton: PropTypes.bool,
-
-  /*
-   * Specify if the notification should have inline styling applied instead of toast
-   */
-  inline: PropTypes.bool,
-
-  /**
-   * Specify what state the notification represents
-   */
-  kind: PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']).isRequired,
-
-  /**
-   * Specify whether you are using the low contrast variant of the ActionableNotification.
-   */
-  lowContrast: PropTypes.bool,
-
-  /**
-   * Provide a function that is called when the action is clicked
-   */
-  onActionButtonClick: PropTypes.func,
-
-  /**
-   * Provide a function that is called when menu is closed
-   */
-  onClose: PropTypes.func,
-
-  /**
-   * Provide a function that is called when the close button is clicked
-   */
-  onCloseButtonClick: PropTypes.func,
-
-  /**
-   * By default, this value is "alertdialog". You can also provide an alternate
-   * role if it makes sense from the accessibility-side.
-   */
-  role: PropTypes.string,
-
-  /**
-   * Provide a description for "status" icon that can be read by screen readers
-   */
-  statusIconDescription: PropTypes.string,
-
-  /**
-   * Specify the sub-title
-   */
-  subtitle: PropTypes.string,
-
-  /**
-   * Specify the title
-   */
-  title: PropTypes.string
-};
+  actionButtonLabel: PropTypes.string.isRequired
+}, _defineProperty(_ActionableNotificati, 'aria-label', PropTypes.string), _defineProperty(_ActionableNotificati, "ariaLabel", deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _defineProperty(_ActionableNotificati, "children", PropTypes.node), _defineProperty(_ActionableNotificati, "className", PropTypes.string), _defineProperty(_ActionableNotificati, "closeOnEscape", PropTypes.bool), _defineProperty(_ActionableNotificati, "hasFocus", PropTypes.bool), _defineProperty(_ActionableNotificati, "hideCloseButton", PropTypes.bool), _defineProperty(_ActionableNotificati, "inline", PropTypes.bool), _defineProperty(_ActionableNotificati, "kind", PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']).isRequired), _defineProperty(_ActionableNotificati, "lowContrast", PropTypes.bool), _defineProperty(_ActionableNotificati, "onActionButtonClick", PropTypes.func), _defineProperty(_ActionableNotificati, "onClose", PropTypes.func), _defineProperty(_ActionableNotificati, "onCloseButtonClick", PropTypes.func), _defineProperty(_ActionableNotificati, "role", PropTypes.string), _defineProperty(_ActionableNotificati, "statusIconDescription", PropTypes.string), _defineProperty(_ActionableNotificati, "subtitle", PropTypes.string), _defineProperty(_ActionableNotificati, "title", PropTypes.string), _ActionableNotificati);
 ActionableNotification.defaultProps = {
   kind: 'error',
   role: 'alertdialog',