@carbon/react 1.13.0-rc.0 → 1.14.0-rc.0

package/es/components/TextArea/TextArea.js

@@ -7,11 +7,12 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState } from 'react';
+import React__default, { useContext, useState } from 'react';
 import cx from 'classnames';
 import { WarningFilled } from '@carbon/icons-react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 
 var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount"];
 var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, ref) {
@@ -33,6 +34,10 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
       other = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
+
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
   var enabled = useFeatureFlag('enable-v11-release');
   var defaultValue = other.defaultValue,
       value = other.value,
@@ -66,7 +71,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     textareaProps.maxLength = maxCount;
   }
 
-  var labelClasses = cx("".concat(prefix, "--label"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
+  var labelClasses = cx("".concat(prefix, "--label"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel && !isFluid), _defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
   var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
     htmlFor: id,
     className: labelClasses
@@ -84,7 +89,9 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     role: "alert",
     className: "".concat(prefix, "--form-requirement"),
     id: errorId
-  }, invalidText) : null;
+  }, invalidText, isFluid && /*#__PURE__*/React__default.createElement(WarningFilled, {
+    className: "".concat(prefix, "--text-area__invalid-icon")
+  })) : null;
   var textareaClasses = cx("".concat(prefix, "--text-area"), [enabled ? null : className], (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--text-area--light"), light), _defineProperty(_classNames4, "".concat(prefix, "--text-area--invalid"), invalid), _classNames4));
   var input = /*#__PURE__*/React__default.createElement("textarea", _extends({}, other, textareaProps, {
     placeholder: placeholder || null,
@@ -100,9 +107,11 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
   }, label, counter), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--text-area__wrapper"),
     "data-invalid": invalid || null
-  }, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
+  }, invalid && !isFluid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
-  }), input), invalid ? error : helper);
+  }), input, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+    className: "".concat(prefix, "--text-area__divider")
+  }), isFluid && invalid ? error : null), invalid && !isFluid ? error : helper);
 });
 TextArea.displayName = 'TextArea';
 TextArea.propTypes = {

package/es/components/TextInput/PasswordInput.js

@@ -69,6 +69,9 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
     warnText: warnText
   });
 
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
   var handleTogglePasswordVisibility = function handleTogglePasswordVisibility(event) {
     setInputType(inputType === 'password' ? 'text' : 'password');
     onTogglePasswordVisibility && onTogglePasswordVisibility(event);
@@ -94,7 +97,7 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
     ref: ref
   }, rest);
 
-  var inputWrapperClasses = cx("".concat(prefix, "--form-item"), "".concat(prefix, "--text-input-wrapper"), "".concat(prefix, "--password-input-wrapper"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _classNames2));
+  var inputWrapperClasses = cx("".concat(prefix, "--form-item"), "".concat(prefix, "--text-input-wrapper"), "".concat(prefix, "--password-input-wrapper"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _defineProperty(_classNames2, "".concat(prefix, "--text-input--fluid"), isFluid), _classNames2));
   var labelClasses = cx("".concat(prefix, "--label"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_classNames3, "".concat(prefix, "--label--inline"), inline), _defineProperty(_classNames3, "".concat(prefix, "--label--inline--").concat(size), inline && !!size), _classNames3));
   var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), disabled), _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
   var fieldOuterWrapperClasses = cx("".concat(prefix, "--text-input__field-outer-wrapper"), _defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
@@ -123,7 +126,9 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
   }), {
     disabled: disabled,
     "data-toggle-password-visibility": inputType === 'password'
-  })), /*#__PURE__*/React__default.createElement("button", {
+  })), isFluid && /*#__PURE__*/React__default.createElement("hr", {
+    className: "".concat(prefix, "--text-input__divider")
+  }), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
     disabled: disabled,
@@ -131,10 +136,6 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
   }, !disabled && /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--assistive-text")
   }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
-
-  var _useContext = useContext(FormContext),
-      isFluid = _useContext.isFluid;
-
   useEffect(function () {
     setInputType(type);
   }, [type]);

package/es/components/Toggle/Toggle.js

@@ -56,7 +56,7 @@ function Toggle(_ref) {
   }
 
   var isSm = size === 'sm';
-  var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
+  var sideLabel = checked ? labelB : labelA;
   var wrapperClasses = cx("".concat(prefix, "--toggle"), _defineProperty({}, "".concat(prefix, "--toggle--disabled"), disabled), className);
   var labelTextClasses = cx("".concat(prefix, "--toggle__label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var appearanceClasses = cx("".concat(prefix, "--toggle__appearance"), _defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));

package/es/index.js

@@ -47,7 +47,6 @@ export { default as OverflowMenuItem } from './components/OverflowMenuItem/index
 export { default as Pagination } from './components/Pagination/index.js';
 export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';
 export { default as PrimaryButton } from './components/PrimaryButton/PrimaryButton.js';
-export { ProgressIndicator } from './components/ProgressIndicator/index.js';
 export { default as RadioButton } from './components/RadioButton/RadioButton.js';
 export { default as RadioButtonGroup } from './components/RadioButtonGroup/RadioButtonGroup.js';
 export { default as Search } from './components/Search/index.js';
@@ -125,6 +124,7 @@ export { default as SideNavItem } from './components/UIShell/SideNavItem.js';
 export { default as SideNavLinkText } from './components/UIShell/SideNavLinkText.js';
 export { default as unstable_useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
+export { default as unstable__FluidTextArea } from './components/FluidTextArea/FluidTextArea.js';
 export { default as unstable_MenuDivider } from './components/Menu/MenuDivider.js';
 export { default as unstable_MenuGroup } from './components/Menu/MenuGroup.js';
 export { default as unstable_MenuItem } from './components/Menu/MenuItem.js';
@@ -172,7 +172,7 @@ export { ActionableNotification, InlineNotification, NotificationActionButton, N
 export { NumberInput } from './components/NumberInput/NumberInput.js';
 export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
 export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
-export { ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';
+export { ProgressIndicator, ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';
 export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
 export { IconTab, TabList, TabPanel, TabPanels } from './components/Tabs/next/Tabs.js';
 export { default as Content } from './components/UIShell/Content.js';

package/lib/components/Accordion/Accordion.Skeleton.js

@@ -25,17 +25,20 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _SkeletonText, _SkeletonText2, _SkeletonText3;
 
-var _excluded = ["align", "open", "count", "className"];
+var _excluded = ["align", "className", "count", "isFlush", "open"];
 
 function AccordionSkeleton(_ref) {
+  var _cx;
+
   var align = _ref.align,
-      open = _ref.open,
-      count = _ref.count,
       className = _ref.className,
+      count = _ref.count,
+      isFlush = _ref.isFlush,
+      open = _ref.open,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var classes = cx__default["default"]("".concat(prefix, "--accordion"), "".concat(prefix, "--skeleton"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--accordion--").concat(align), align));
+  var classes = cx__default["default"]("".concat(prefix, "--accordion"), "".concat(prefix, "--skeleton"), className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--").concat(align), align), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--flush"), isFlush && align !== 'start'), _cx));
   var numSkeletonItems = open ? count - 1 : count;
   return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
     className: classes
@@ -80,6 +83,11 @@ AccordionSkeleton.propTypes = {
    */
   count: PropTypes__default["default"].number,
 
+  /**
+   * Specify whether an individual AccordionItem should be flush, default is false
+   */
+  isFlush: PropTypes__default["default"].bool,
+
   /**
    * `false` to not display the first item opened
    */

package/lib/components/Accordion/Accordion.js

@@ -41,7 +41,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var _excluded = ["align", "children", "className", "disabled", "size"];
+var _excluded = ["align", "children", "className", "disabled", "isFlush", "size"];
 
 function Accordion(_ref) {
   var _cx;
@@ -52,12 +52,14 @@ function Accordion(_ref) {
       customClassName = _ref.className,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$isFlush = _ref.isFlush,
+      isFlush = _ref$isFlush === void 0 ? false : _ref$isFlush,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'md' : _ref$size,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--accordion"), customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--").concat(align), align), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--").concat(size), size), _cx));
+  var className = cx__default["default"]("".concat(prefix, "--accordion"), customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--").concat(align), align), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--flush"), isFlush && align !== 'start'), _cx));
   return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), disabled ? React__default["default"].Children.toArray(children).map(function (child) {
@@ -88,6 +90,11 @@ Accordion.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
 
+  /**
+   * Specify whether Accordion text should be flush, default is false, does not work with align="start"
+   */
+  isFlush: PropTypes__default["default"].bool,
+
   /**
    * Specify the size of the Accordion. Currently supports the following:
    */

package/lib/components/FileUploader/Filename.js

@@ -54,7 +54,9 @@ function Filename(_ref) {
       return /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkFilled, _rollupPluginBabelHelpers["extends"]({
         "aria-label": iconDescription,
         className: "".concat(prefix, "--file-complete")
-      }, rest), iconDescription && /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription));
+      }, rest, {
+        tabIndex: null
+      }), iconDescription && /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription));
 
     default:
       return null;

package/lib/components/FluidTextArea/FluidTextArea.js

@@ -0,0 +1,140 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var TextArea = require('../TextArea/TextArea.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className"];
+
+function FluidTextArea(_ref) {
+  var className = _ref.className,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--text-area--fluid"), className);
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(TextArea["default"], _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other)));
+}
+
+FluidTextArea.propTypes = {
+  /**
+   * Provide a custom className that is applied directly to the underlying
+   * `<textarea>` node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the `cols` attribute for the underlying `<textarea>` node
+   */
+  cols: PropTypes__default["default"].number,
+
+  /**
+   * Optionally provide the default value of the `<textarea>`
+   */
+  defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter: PropTypes__default["default"].bool,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes__default["default"].node,
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a unique identifier for the control
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
+   */
+  light: PropTypes__default["default"].bool,
+
+  /**
+   * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+   */
+  maxCount: PropTypes__default["default"].number,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<textarea>`
+   * is updated
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<textarea>` is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Specify the placeholder attribute for the `<textarea>`
+   */
+  placeholder: PropTypes__default["default"].string,
+
+  /**
+   * Specify the rows attribute for the `<textarea>`
+   */
+  rows: PropTypes__default["default"].number,
+
+  /**
+   * Provide the current value of the `<textarea>`
+   */
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+
+exports["default"] = FluidTextArea;

package/lib/components/FluidTextInput/FluidTextInput.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 require('../TextInput/index.js');
+var PasswordInput = require('../TextInput/PasswordInput.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var TextInput = require('../TextInput/TextInput.js');
@@ -24,19 +25,22 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className"];
+var _excluded = ["className", "isPassword"];
 
 function FluidTextInput(_ref) {
   var className = _ref.className,
+      isPassword = _ref.isPassword,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var classNames = cx__default["default"]("".concat(prefix, "--text-input--fluid"), className);
+  var classNames = cx__default["default"](className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input--fluid"), !isPassword));
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {
       isFluid: true
     }
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput["default"], _rollupPluginBabelHelpers["extends"]({
+  }, isPassword ? /*#__PURE__*/React__default["default"].createElement(PasswordInput["default"], _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other)) : /*#__PURE__*/React__default["default"].createElement(TextInput["default"], _rollupPluginBabelHelpers["extends"]({
     className: classNames
   }, other)));
 }
@@ -72,6 +76,11 @@ FluidTextInput.propTypes = {
    */
   invalidText: PropTypes__default["default"].node,
 
+  /**
+   * Specify whether the control is a password input
+   */
+  isPassword: PropTypes__default["default"].bool,
+
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control

package/lib/components/Notification/Notification.js

@@ -18,6 +18,7 @@ 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 useId = require('../../internal/useId.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -516,6 +517,7 @@ function ActionableNotification(_ref6) {
       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 () {
@@ -544,7 +546,8 @@ function ActionableNotification(_ref6) {
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
     role: role,
-    className: containerClassName
+    className: containerClassName,
+    "aria-labelledby": title ? id : undefined
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--actionable-notification__details")
   }, /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
@@ -556,7 +559,8 @@ function ActionableNotification(_ref6) {
   }, /*#__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")
+    className: "".concat(prefix, "--actionable-notification__title"),
+    id: id
   }, title), subtitle && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--actionable-notification__subtitle")
   }, subtitle), children))), /*#__PURE__*/React__default["default"].createElement(NotificationActionButton, {