@carbon/react 1.26.1 → 1.27.0

package/lib/components/DataTable/index.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 DataTable = require('./DataTable.js');
+var Table = require('./Table.js');
+var TableActionList = require('./TableActionList.js');
+var TableBatchAction = require('./TableBatchAction.js');
+var TableBatchActions = require('./TableBatchActions.js');
+var TableBody = require('./TableBody.js');
+var TableCell = require('./TableCell.js');
+var TableContainer = require('./TableContainer.js');
+var TableExpandHeader = require('./TableExpandHeader.js');
+var TableExpandRow = require('./TableExpandRow.js');
+var TableExpandedRow = require('./TableExpandedRow.js');
+var TableHead = require('./TableHead.js');
+var TableHeader = require('./TableHeader.js');
+var TableRow = require('./TableRow.js');
+var TableSelectAll = require('./TableSelectAll.js');
+var TableSelectRow = require('./TableSelectRow.js');
+var TableToolbar = require('./TableToolbar.js');
+var TableToolbarAction = require('./TableToolbarAction.js');
+var TableToolbarContent = require('./TableToolbarContent.js');
+var TableToolbarSearch = require('./TableToolbarSearch.js');
+var TableToolbarMenu = require('./TableToolbarMenu.js');
+
+DataTable["default"].Table = Table.Table;
+DataTable["default"].TableActionList = TableActionList["default"];
+DataTable["default"].TableBatchAction = TableBatchAction["default"];
+DataTable["default"].TableBatchActions = TableBatchActions["default"];
+DataTable["default"].TableBody = TableBody["default"];
+DataTable["default"].TableCell = TableCell["default"];
+DataTable["default"].TableContainer = TableContainer["default"];
+DataTable["default"].TableExpandHeader = TableExpandHeader["default"];
+DataTable["default"].TableExpandRow = TableExpandRow["default"];
+DataTable["default"].TableExpandedRow = TableExpandedRow["default"];
+DataTable["default"].TableHead = TableHead["default"];
+DataTable["default"].TableHeader = TableHeader["default"];
+DataTable["default"].TableRow = TableRow["default"];
+DataTable["default"].TableSelectAll = TableSelectAll["default"];
+DataTable["default"].TableSelectRow = TableSelectRow["default"];
+DataTable["default"].TableToolbar = TableToolbar["default"];
+DataTable["default"].TableToolbarAction = TableToolbarAction["default"];
+DataTable["default"].TableToolbarContent = TableToolbarContent["default"];
+DataTable["default"].TableToolbarSearch = TableToolbarSearch["default"];
+DataTable["default"].TableToolbarMenu = TableToolbarMenu["default"];
+
+exports.DataTable = DataTable["default"];
+exports["default"] = DataTable["default"];
+exports.Table = Table.Table;
+exports.TableActionList = TableActionList["default"];
+exports.TableBatchAction = TableBatchAction["default"];
+exports.TableBatchActions = TableBatchActions["default"];
+exports.TableBody = TableBody["default"];
+exports.TableCell = TableCell["default"];
+exports.TableContainer = TableContainer["default"];
+exports.TableExpandHeader = TableExpandHeader["default"];
+exports.TableExpandRow = TableExpandRow["default"];
+exports.TableExpandedRow = TableExpandedRow["default"];
+exports.TableHead = TableHead["default"];
+exports.TableHeader = TableHeader["default"];
+exports.TableRow = TableRow["default"];
+exports.TableSelectAll = TableSelectAll["default"];
+exports.TableSelectRow = TableSelectRow["default"];
+exports.TableToolbar = TableToolbar["default"];
+exports.TableToolbarAction = TableToolbarAction["default"];
+exports.TableToolbarContent = TableToolbarContent["default"];
+exports.TableToolbarSearch = TableToolbarSearch["default"];
+exports.TableToolbarMenu = TableToolbarMenu["default"];

package/lib/components/DatePicker/DatePicker.js

@@ -215,9 +215,24 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
     }
   }, []);
   var endInputField = React.useRef(null);
+  var lastStartValue = React.useRef(''); // fix datepicker deleting the selectedDate when the calendar closes
+
+  var onCalendarClose = function onCalendarClose(selectedDates, dateStr) {
+    setTimeout(function () {
+      if (lastStartValue.current && selectedDates[0] && !startInputField.current.value) {
+        startInputField.current.value = lastStartValue.current;
+        calendarRef.current.setDate([startInputField.current.value, endInputField.current.value], true, calendarRef.current.config.dateFormat);
+      }
+
+      if (onClose) {
+        onClose(calendarRef.current.selectedDates, dateStr, calendarRef.current);
+      }
+    });
+  };
+
   var calendarRef = React.useRef(null);
   var savedOnChange = useSavedCallback.useSavedCallback(onChange);
-  var savedOnClose = useSavedCallback.useSavedCallback(onClose);
+  var savedOnClose = useSavedCallback.useSavedCallback(datePickerType === 'range' ? onCalendarClose : onClose);
   var savedOnOpen = useSavedCallback.useSavedCallback(onOpen);
   var datePickerClasses = cx__default["default"]("".concat(prefix, "--date-picker"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--short"), short), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--simple"), datePickerType === 'simple'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--single"), datePickerType === 'single'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--range"), datePickerType === 'range'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker--nolabel"), datePickerType === 'range' && isLabelTextEmpty(children)), _cx));
   var wrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), _rollupPluginBabelHelpers.defineProperty({}, className, className));
@@ -319,7 +334,8 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
       classFlatpickrCurrentMonth: 'cur-month'
     }), fixEventsPlugin["default"]({
       inputFrom: startInputField.current,
-      inputTo: endInputField.current
+      inputTo: endInputField.current,
+      lastStartValue: lastStartValue
     })]), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "clickOpens", !readOnly), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "noCalendar", readOnly), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "nextArrow", rightArrowHTML), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "prevArrow", leftArrowHTML), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onChange", function onChange() {
       if (savedOnChange && !readOnly) {
         savedOnChange.apply(void 0, arguments);
@@ -345,11 +361,17 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
       }
     }
 
-    function handleOnChange() {
+    function handleOnChange(event) {
       if (datePickerType == 'single') {
         calendar.calendarContainer.classList.remove('open');
       }
 
+      var target = event.target;
+
+      if (target === start) {
+        lastStartValue.current = start.value;
+      }
+
       if (start.value !== '') {
         return;
       }

package/lib/components/DatePicker/plugins/fixEventsPlugin.js

@@ -55,7 +55,8 @@ var carbonFlatpickrFixEventsPlugin = (function (config) {
 
     var handleBlur = function handleBlur(event) {
       var inputFrom = config.inputFrom,
-          inputTo = config.inputTo;
+          inputTo = config.inputTo,
+          lastStartValue = config.lastStartValue;
       var target = event.target; // Only fall into this logic if the event is on the `to` input and there is a
       // `to` date selected
 
@@ -80,6 +81,19 @@ var carbonFlatpickrFixEventsPlugin = (function (config) {
         if (currentEndDate.toString() !== 'Invalid Date') {
           fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
         }
+      } // overriding the flatpickr bug where the startDate gets deleted on blur
+
+
+      if (inputTo === target && !inputFrom.value && lastStartValue.current) {
+        var currentStartDate = new Date(lastStartValue.current);
+
+        if (currentStartDate.toString() !== 'Invalid Date') {
+          inputFrom.value = lastStartValue.current;
+
+          if (inputTo.value) {
+            fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
+          }
+        }
       }
     };
     /**

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -17,6 +17,7 @@ var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,6 +26,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["datePickerType", "disabled", "helperText", "hideLabel", "id", "invalid", "invalidText", "labelText", "onClick", "onChange", "pattern", "placeholder", "size", "type", "warn", "warnText"];
+var getInstanceId = setupGetInstanceId["default"]();
 var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function DatePickerInput(props, ref) {
   var _cx, _cx2, _cx4, _cx5;
 
@@ -58,6 +60,7 @@ var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function
   var _useContext = React.useContext(FormContext.FormContext),
       isFluid = _useContext.isFluid;
 
+  var datePickerInputInstanceId = getInstanceId();
   var datePickerInputProps = {
     id: id,
     onChange: function onChange(event) {
@@ -79,12 +82,13 @@ var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function
   var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
   var inputClasses = cx__default["default"]("".concat(prefix, "--date-picker__input"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--date-picker__input--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--date-picker__input--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--date-picker__input--warn"), warn), _cx4));
   var containerClasses = cx__default["default"]("".concat(prefix, "--date-picker-container"), (_cx5 = {}, _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--date-picker--nolabel"), !labelText), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--date-picker--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--date-picker--fluid--warn"), isFluid && warn), _cx5));
+  var datePickerInputHelperId = !helperText ? undefined : "detepicker-input-helper-text-".concat(datePickerInputInstanceId);
 
-  var inputProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), datePickerInputProps), {}, {
+  var inputProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), datePickerInputProps), {}, _rollupPluginBabelHelpers.defineProperty({
     className: inputClasses,
     disabled: disabled,
     ref: ref
-  });
+  }, 'aria-describedby', helperText ? datePickerInputHelperId : undefined));
 
   if (invalid) {
     inputProps['data-invalid'] = true;
@@ -113,6 +117,7 @@ var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--form-requirement")
   }, warnText)), helperText && /*#__PURE__*/React__default["default"].createElement("div", {
+    id: datePickerInputHelperId,
     className: helperTextClasses
   }, helperText));
 });

package/lib/components/Dropdown/Dropdown.js

@@ -22,6 +22,7 @@ var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -33,6 +34,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var _Dropdown$propTypes;
 
 var _excluded = ["className", "disabled", "direction", "items", "label", "aria-label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps", "readOnly"];
+var getInstanceId = setupGetInstanceId["default"]();
 
 var defaultItemToString = function defaultItemToString(item) {
   if (typeof item === 'string') {
@@ -93,7 +95,10 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     itemToString: itemToString,
     initialSelectedItem: initialSelectedItem,
     onSelectedItemChange: onSelectedItemChange
-  }); // only set selectedItem if the prop is defined. Setting if it is undefined
+  });
+
+  var _useRef = React.useRef(getInstanceId()),
+      dropdownInstanceId = _useRef.current; // only set selectedItem if the prop is defined. Setting if it is undefined
   // will overwrite default selected items from useSelect
 
 
@@ -122,11 +127,13 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   var className = cx__default["default"]("".concat(prefix, "--dropdown"), [enabled ? null : containerClassName], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--open"), isOpen), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
   var titleClasses = cx__default["default"]("".concat(prefix, "--label"), (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
   var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var wrapperClasses = cx__default["default"]("".concat(prefix, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused && !isOpen), _cx4)); // needs to be Capitalized for react to render it correctly
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused && !isOpen), _cx4));
+  var helperId = !helperText ? undefined : "dropdown-helper-text-".concat(dropdownInstanceId); // needs to be Capitalized for react to render it correctly
 
   var ItemToElement = itemToElement;
   var toggleButtonProps = getToggleButtonProps();
   var helper = helperText && !isFluid ? /*#__PURE__*/React__default["default"].createElement("div", {
+    id: helperId,
     className: helperClasses
   }, helperText) : null;
 
@@ -189,11 +196,16 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
     className: "".concat(prefix, "--list-box__invalid-icon ").concat(prefix, "--list-box__invalid-icon--warning")
   }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
-    type: "button",
+    type: "button" // aria-expanded is already being passed through {...toggleButtonProps}
+    ,
+    role: "combobox" // eslint-disable-line jsx-a11y/role-has-required-aria-props
+    ,
+    "aria-controls": getMenuProps().id,
     className: "".concat(prefix, "--list-box__field"),
     disabled: disabled,
     "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
     ,
+    "aria-describedby": !inline && !invalid && !warn && helper ? helperId : undefined,
     title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : label
   }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergedRef

package/lib/components/FluidDatePicker/FluidDatePicker.js

@@ -23,7 +23,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "children", "invalid", "invalidText", "warn", "warnText"];
+var _excluded = ["className", "children", "invalid", "invalidText", "readOnly", "warn", "warnText"];
 var FluidDatePicker = /*#__PURE__*/React__default["default"].forwardRef(function FluidDatePicker(_ref, ref) {
   var _classnames;
 
@@ -31,12 +31,13 @@ var FluidDatePicker = /*#__PURE__*/React__default["default"].forwardRef(function
       children = _ref.children,
       invalid = _ref.invalid,
       invalidText = _ref.invalidText,
+      readOnly = _ref.readOnly,
       warn = _ref.warn,
       warnText = _ref.warnText,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var classNames = cx__default["default"](className, (_classnames = {}, _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid"), true), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--warn"), warn), _classnames));
+  var classNames = cx__default["default"](className, (_classnames = {}, _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid"), true), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--warn"), warn), _classnames));
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {
       isFluid: true
@@ -44,6 +45,7 @@ var FluidDatePicker = /*#__PURE__*/React__default["default"].forwardRef(function
   }, /*#__PURE__*/React__default["default"].createElement(DatePicker["default"], _rollupPluginBabelHelpers["extends"]({
     invalid: invalid,
     invalidText: invalidText,
+    readOnly: readOnly,
     warn: warn,
     warnText: warnText,
     className: classNames,
@@ -71,6 +73,11 @@ FluidDatePicker.propTypes = {
    */
   invalidText: PropTypes__default["default"].node,
 
+  /**
+   * Whether the input should be read-only
+   */
+  readOnly: PropTypes__default["default"].bool,
+
   /**
    * Specify whether the control is currently in warning state
    */

package/lib/components/IconButton/index.js

@@ -13,10 +13,10 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var Button = require('../Button/Button.js');
+var cx = require('classnames');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var cx = require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,26 +24,30 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["align", "children", "className", "defaultOpen", "enterDelayMs", "kind", "label", "leaveDelayMs", "size"];
+var _excluded = ["align", "children", "className", "closeOnActivation", "defaultOpen", "enterDelayMs", "kind", "label", "leaveDelayMs", "wrapperClasses", "size"];
 var IconButton = /*#__PURE__*/React__default["default"].forwardRef(function IconButton(props, ref) {
   var align = props.align,
       children = props.children,
       className = props.className,
+      _props$closeOnActivat = props.closeOnActivation,
+      closeOnActivation = _props$closeOnActivat === void 0 ? true : _props$closeOnActivat,
       _props$defaultOpen = props.defaultOpen,
       defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
       enterDelayMs = props.enterDelayMs,
       kind = props.kind,
       label = props.label,
       leaveDelayMs = props.leaveDelayMs,
+      wrapperClasses = props.wrapperClasses,
       _props$size = props.size,
       size = _props$size === void 0 ? 'md' : _props$size,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
+  var tooltipClasses = cx__default["default"](wrapperClasses, "".concat(prefix, "--icon-tooltip"));
   return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     align: align,
-    className: "".concat(prefix, "--icon-tooltip"),
-    closeOnActivation: true,
+    closeOnActivation: closeOnActivation,
+    className: tooltipClasses,
     defaultOpen: defaultOpen,
     enterDelayMs: enterDelayMs,
     label: label,
@@ -71,6 +75,11 @@ IconButton.propTypes = {
    */
   className: PropTypes__default["default"].string,
 
+  /**
+   * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
+   */
+  closeOnActivation: PropTypes__default["default"].bool,
+
   /**
    * Specify whether the tooltip should be open when it first renders
    */
@@ -102,7 +111,12 @@ IconButton.propTypes = {
   /**
    * Specify the size of the Button. Defaults to `md`.
    */
-  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Specify an optional className to be added to your Tooltip wrapper
+   */
+  wrapperClasses: PropTypes__default["default"].string
 };
 
 exports.IconButton = IconButton;

package/lib/components/Modal/Modal.js

@@ -21,6 +21,8 @@ var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropI
 var wrapFocus = require('../../internal/wrapFocus.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.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 }; }
 
@@ -80,11 +82,11 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_re
 
   function handleKeyDown(evt) {
     if (open) {
-      if (evt.which === 27) {
+      if (match.match(evt, keys.Escape)) {
         onRequestClose(evt);
       }
 
-      if (evt.which === 13 && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
+      if (match.match(evt, keys.Enter) && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
         onRequestSubmit(evt);
       }
     }

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -336,6 +336,14 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
             if (match.match(event, keys.Tab)) {
               handleOnMenuChange(false);
             }
+
+            if (match.match(event, keys.Home)) {
+              event.target.setSelectionRange(0, 0);
+            }
+
+            if (match.match(event, keys.End)) {
+              event.target.setSelectionRange(event.target.value.length, event.target.value.length);
+            }
           },
           onFocus: function onFocus() {
             setInputFocused(true);

package/lib/components/MultiSelect/MultiSelect.js

@@ -344,7 +344,8 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
     type: "button",
     className: "".concat(prefix, "--list-box__field"),
     disabled: disabled,
-    "aria-disabled": disabled || readOnly
+    "aria-disabled": disabled || readOnly,
+    "aria-describedby": !inline && !invalid && !warn && helperText ? helperId : undefined
   }, toggleButtonProps, {
     ref: mergedRef,
     onKeyDown: onKeyDown

package/lib/components/NumberInput/NumberInput.js

@@ -150,6 +150,10 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     ariaDescribedBy = normalizedProps.warnId;
   }
 
+  if (!normalizedProps.validation) {
+    ariaDescribedBy = helperText ? normalizedProps.helperId : undefined;
+  }
+
   function handleOnChange(event) {
     if (disabled) {
       return;
@@ -284,6 +288,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
   }))), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: "".concat(prefix, "--number-input__divider")
   }), normalizedProps.validation ? normalizedProps.validation : /*#__PURE__*/React__default["default"].createElement(HelperText, {
+    id: normalizedProps.helperId,
     disabled: disabled,
     description: helperText
   })));
@@ -452,12 +457,14 @@ Label.propTypes = {
 
 function HelperText(_ref3) {
   var disabled = _ref3.disabled,
-      description = _ref3.description;
+      description = _ref3.description,
+      id = _ref3.id;
   var prefix = usePrefix.usePrefix();
   var className = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
 
   if (description) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
+      id: id,
       className: className
     }, description);
   }
@@ -467,7 +474,8 @@ function HelperText(_ref3) {
 
 HelperText.propTypes = {
   description: PropTypes__default["default"].node,
-  disabled: PropTypes__default["default"].bool
+  disabled: PropTypes__default["default"].bool,
+  id: PropTypes__default["default"].string
 };
 /**
  * Determine if the given value is invalid based on the given max, min and

package/lib/components/ProgressBar/ProgressBar.js

@@ -42,6 +42,7 @@ function ProgressBar(_ref) {
       value = _ref.value;
   var labelId = useId.useId('progress-bar');
   var helperId = useId.useId('progress-bar-helper');
+  var helperTextId = useId.useId('progress-bar-helper-text');
   var prefix = usePrefix.usePrefix();
   var isFinished = status === 'finished';
   var isError = status === 'error';
@@ -106,6 +107,7 @@ function ProgressBar(_ref) {
     "aria-busy": !isFinished,
     "aria-invalid": isError,
     "aria-labelledby": labelId,
+    "aria-describedby": helperText ? helperTextId : undefined,
     "aria-valuemin": !indeterminate ? 0 : null,
     "aria-valuemax": !indeterminate ? max : null,
     "aria-valuenow": !indeterminate ? cappedValue : null
@@ -113,6 +115,7 @@ function ProgressBar(_ref) {
     className: "".concat(prefix, "--progress-bar__bar"),
     ref: ref
   })), helperText && /*#__PURE__*/React__default["default"].createElement("div", {
+    id: helperTextId,
     className: "".concat(prefix, "--progress-bar__helper-text")
   }, helperText, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--visually-hidden"),

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -131,7 +131,8 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
     className: fieldsetClasses,
     disabled: disabled,
     "data-invalid": invalid ? true : undefined,
-    "aria-readonly": readOnly
+    "aria-readonly": readOnly,
+    "aria-describedby": showHelper && helperText ? helperId : undefined
   }, rest), legendText && /*#__PURE__*/React__default["default"].createElement(index.Legend, {
     className: "".concat(prefix, "--label")
   }, legendText), getRadioButtons()), /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/RadioTile/RadioTile.js

@@ -59,7 +59,7 @@ var RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Radio
     }
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", {
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("input", {
     checked: checked,
     className: "".concat(prefix, "--tile-input"),
     disabled: disabled,

package/lib/components/Select/Select.d.ts

@@ -85,5 +85,5 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      */
     warnText?: ReactNode;
 }
-declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "className" | "disabled" | "size" | "form" | "slot" | "style" | "title" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "onAnimationEnd" | "aria-controls" | "aria-expanded" | "onClick" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "inline" | "name" | "readOnly" | "required" | "labelText" | "hideLabel" | "light" | "invalid" | "invalidText" | "warn" | "warnText" | "helperText" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
+declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "className" | "disabled" | "size" | "form" | "slot" | "style" | "title" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "onAnimationEnd" | "aria-controls" | "aria-expanded" | "onClick" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "inline" | "name" | "readOnly" | "required" | "labelText" | "helperText" | "invalid" | "invalidText" | "hideLabel" | "warn" | "warnText" | "light" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/lib/components/Select/Select.js

@@ -19,6 +19,7 @@ var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,6 +28,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className", "id", "inline", "labelText", "disabled", "children", "noLabel", "hideLabel", "invalid", "invalidText", "helperText", "light", "readOnly", "size", "warn", "warnText"];
+var getInstanceId = setupGetInstanceId["default"]();
 var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_ref, ref) {
   var _classNames, _classNames2, _classNames3;
 
@@ -66,6 +68,9 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
       isFocused = _useState2[0],
       setIsFocused = _useState2[1];
 
+  var _useRef = React.useRef(getInstanceId()),
+      selectInstanceId = _useRef.current;
+
   var selectClasses = cx__default["default"]((_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--warning"), warn), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--fluid--focus"), isFluid && isFocused), _classNames), [enabled ? null : className]);
   var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--label--disabled"), disabled), _classNames2));
   var inputClasses = cx__default["default"]((_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--select-input"), true), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--select-input--").concat(size), size), _classNames3));
@@ -86,13 +91,17 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
     id: errorId
   }, errorText) : null;
   var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+  var helperId = !helperText ? undefined : "select-helper-text-".concat(selectInstanceId);
   var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+    id: helperId,
     className: helperTextClasses
   }, helperText) : null;
   var ariaProps = {};
 
   if (invalid) {
     ariaProps['aria-describedby'] = errorId;
+  } else if (!inline && !isFluid) {
+    ariaProps['aria-describedby'] = helper ? helperId : undefined;
   }
 
   var handleFocus = function handleFocus(evt) {