@carbon/react 1.26.1 → 1.27.0-rc.0

package/es/components/DatePicker/DatePicker.js

@@ -203,9 +203,24 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
     }
   }, []);
   var endInputField = useRef(null);
+  var lastStartValue = 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 = useRef(null);
   var savedOnChange = useSavedCallback(onChange);
-  var savedOnClose = useSavedCallback(onClose);
+  var savedOnClose = useSavedCallback(datePickerType === 'range' ? onCalendarClose : onClose);
   var savedOnOpen = useSavedCallback(onOpen);
   var datePickerClasses = cx("".concat(prefix, "--date-picker"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--date-picker--short"), short), _defineProperty(_cx, "".concat(prefix, "--date-picker--light"), light), _defineProperty(_cx, "".concat(prefix, "--date-picker--simple"), datePickerType === 'simple'), _defineProperty(_cx, "".concat(prefix, "--date-picker--single"), datePickerType === 'single'), _defineProperty(_cx, "".concat(prefix, "--date-picker--range"), datePickerType === 'range'), _defineProperty(_cx, "".concat(prefix, "--date-picker--nolabel"), datePickerType === 'range' && isLabelTextEmpty(children)), _cx));
   var wrapperClasses = cx("".concat(prefix, "--form-item"), _defineProperty({}, className, className));
@@ -307,7 +322,8 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
       classFlatpickrCurrentMonth: 'cur-month'
     }), carbonFlatpickrFixEventsPlugin({
       inputFrom: startInputField.current,
-      inputTo: endInputField.current
+      inputTo: endInputField.current,
+      lastStartValue: lastStartValue
     })]), _defineProperty(_flatpickr, "clickOpens", !readOnly), _defineProperty(_flatpickr, "noCalendar", readOnly), _defineProperty(_flatpickr, "nextArrow", rightArrowHTML), _defineProperty(_flatpickr, "prevArrow", leftArrowHTML), _defineProperty(_flatpickr, "onChange", function onChange() {
       if (savedOnChange && !readOnly) {
         savedOnChange.apply(void 0, arguments);
@@ -333,11 +349,17 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
       }
     }
 
-    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/es/components/DatePicker/plugins/fixEventsPlugin.js

@@ -51,7 +51,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
 
@@ -76,6 +77,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/es/components/DatePickerInput/DatePickerInput.js

@@ -13,8 +13,10 @@ import React__default, { useContext } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 
 var _excluded = ["datePickerType", "disabled", "helperText", "hideLabel", "id", "invalid", "invalidText", "labelText", "onClick", "onChange", "pattern", "placeholder", "size", "type", "warn", "warnText"];
+var getInstanceId = setupGetInstanceId();
 var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePickerInput(props, ref) {
   var _cx, _cx2, _cx4, _cx5;
 
@@ -48,6 +50,7 @@ var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePicker
   var _useContext = useContext(FormContext),
       isFluid = _useContext.isFluid;
 
+  var datePickerInputInstanceId = getInstanceId();
   var datePickerInputProps = {
     id: id,
     onChange: function onChange(event) {
@@ -69,12 +72,13 @@ var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePicker
   var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
   var inputClasses = cx("".concat(prefix, "--date-picker__input"), (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--").concat(size), size), _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--invalid"), invalid), _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--warn"), warn), _cx4));
   var containerClasses = cx("".concat(prefix, "--date-picker-container"), (_cx5 = {}, _defineProperty(_cx5, "".concat(prefix, "--date-picker--nolabel"), !labelText), _defineProperty(_cx5, "".concat(prefix, "--date-picker--fluid--invalid"), isFluid && invalid), _defineProperty(_cx5, "".concat(prefix, "--date-picker--fluid--warn"), isFluid && warn), _cx5));
+  var datePickerInputHelperId = !helperText ? undefined : "detepicker-input-helper-text-".concat(datePickerInputInstanceId);
 
-  var inputProps = _objectSpread2(_objectSpread2(_objectSpread2({}, rest), datePickerInputProps), {}, {
+  var inputProps = _objectSpread2(_objectSpread2(_objectSpread2({}, rest), datePickerInputProps), {}, _defineProperty({
     className: inputClasses,
     disabled: disabled,
     ref: ref
-  });
+  }, 'aria-describedby', helperText ? datePickerInputHelperId : undefined));
 
   if (invalid) {
     inputProps['data-invalid'] = true;
@@ -103,6 +107,7 @@ var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePicker
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--form-requirement")
   }, warnText)), helperText && /*#__PURE__*/React__default.createElement("div", {
+    id: datePickerInputHelperId,
     className: helperTextClasses
   }, helperText));
 });

package/es/components/Dropdown/Dropdown.js

@@ -6,7 +6,7 @@
  */
 
 import { defineProperty as _defineProperty, typeof as _typeof, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useState, useRef } from 'react';
+import React__default, { useContext, useRef, useState } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -18,11 +18,13 @@ import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
 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();
 
 var defaultItemToString = function defaultItemToString(item) {
   if (typeof item === 'string') {
@@ -83,7 +85,10 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     itemToString: itemToString,
     initialSelectedItem: initialSelectedItem,
     onSelectedItemChange: onSelectedItemChange
-  }); // only set selectedItem if the prop is defined. Setting if it is undefined
+  });
+
+  var _useRef = 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
 
 
@@ -112,11 +117,13 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = cx("".concat(prefix, "--dropdown"), [enabled ? null : containerClassName], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--dropdown--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--dropdown--warning"), showWarning), _defineProperty(_cx, "".concat(prefix, "--dropdown--open"), isOpen), _defineProperty(_cx, "".concat(prefix, "--dropdown--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--dropdown--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--dropdown--light"), light), _defineProperty(_cx, "".concat(prefix, "--dropdown--readonly"), readOnly), _defineProperty(_cx, "".concat(prefix, "--dropdown--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
   var titleClasses = cx("".concat(prefix, "--label"), (_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
   var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var wrapperClasses = cx("".concat(prefix, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _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("".concat(prefix, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _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.createElement("div", {
+    id: helperId,
     className: helperClasses
   }, helperText) : null;
 
@@ -179,11 +186,16 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
     className: "".concat(prefix, "--list-box__invalid-icon ").concat(prefix, "--list-box__invalid-icon--warning")
   }), /*#__PURE__*/React__default.createElement("button", _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/es/components/ErrorBoundary/ErrorBoundary.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, defineProperty as _defineProperty, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import { ErrorBoundaryContext } from './ErrorBoundaryContext.js';

package/es/components/FileUploader/FileUploader.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, defineProperty as _defineProperty, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import * as FeatureFlags from '@carbon/feature-flags';

package/es/components/FluidDatePicker/FluidDatePicker.js

@@ -13,7 +13,7 @@ import DatePicker from '../DatePicker/DatePicker.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-var _excluded = ["className", "children", "invalid", "invalidText", "warn", "warnText"];
+var _excluded = ["className", "children", "invalid", "invalidText", "readOnly", "warn", "warnText"];
 var FluidDatePicker = /*#__PURE__*/React__default.forwardRef(function FluidDatePicker(_ref, ref) {
   var _classnames;
 
@@ -21,12 +21,13 @@ var FluidDatePicker = /*#__PURE__*/React__default.forwardRef(function FluidDateP
       children = _ref.children,
       invalid = _ref.invalid,
       invalidText = _ref.invalidText,
+      readOnly = _ref.readOnly,
       warn = _ref.warn,
       warnText = _ref.warnText,
       other = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var classNames = cx(className, (_classnames = {}, _defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid"), true), _defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--invalid"), invalid), _defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--warn"), warn), _classnames));
+  var classNames = cx(className, (_classnames = {}, _defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid"), true), _defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--invalid"), invalid), _defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--readonly"), readOnly), _defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--warn"), warn), _classnames));
   return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
     value: {
       isFluid: true
@@ -34,6 +35,7 @@ var FluidDatePicker = /*#__PURE__*/React__default.forwardRef(function FluidDateP
   }, /*#__PURE__*/React__default.createElement(DatePicker, _extends({
     invalid: invalid,
     invalidText: invalidText,
+    readOnly: readOnly,
     warn: warn,
     warnText: warnText,
     className: classNames,
@@ -61,6 +63,11 @@ FluidDatePicker.propTypes = {
    */
   invalidText: PropTypes.node,
 
+  /**
+   * Whether the input should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify whether the control is currently in warning state
    */

package/es/components/IconButton/index.js

@@ -9,31 +9,35 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import Button from '../Button/Button.js';
+import cx from 'classnames';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import cx from 'classnames';
 
-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.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 = _objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix();
+  var tooltipClasses = cx(wrapperClasses, "".concat(prefix, "--icon-tooltip"));
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     align: align,
-    className: "".concat(prefix, "--icon-tooltip"),
-    closeOnActivation: true,
+    closeOnActivation: closeOnActivation,
+    className: tooltipClasses,
     defaultOpen: defaultOpen,
     enterDelayMs: enterDelayMs,
     label: label,
@@ -61,6 +65,11 @@ IconButton.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
+   */
+  closeOnActivation: PropTypes.bool,
+
   /**
    * Specify whether the tooltip should be open when it first renders
    */
@@ -92,7 +101,12 @@ IconButton.propTypes = {
   /**
    * Specify the size of the Button. Defaults to `md`.
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Specify an optional className to be added to your Tooltip wrapper
+   */
+  wrapperClasses: PropTypes.string
 };
 
 export { IconButton };

package/es/components/Modal/Modal.js

@@ -17,6 +17,8 @@ import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsT
 import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Escape, Enter } from '../../internal/keyboard/keys.js';
 
 var _Modal$propTypes;
 
@@ -70,11 +72,11 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
 
   function handleKeyDown(evt) {
     if (open) {
-      if (evt.which === 27) {
+      if (match(evt, Escape)) {
         onRequestClose(evt);
       }
 
-      if (evt.which === 13 && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
+      if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
         onRequestSubmit(evt);
       }
     }

package/es/components/ModalWrapper/ModalWrapper.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, defineProperty as _defineProperty, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import Modal from '../Modal/Modal.js';

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -29,7 +29,7 @@ import { match } from '../../internal/keyboard/match.js';
 import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
-import { Space, Enter, Delete, Escape, Tab } from '../../internal/keyboard/keys.js';
+import { Space, Enter, Delete, Escape, Tab, Home, End } from '../../internal/keyboard/keys.js';
 
 var _objectSpread2, _FilterableMultiSelec;
 var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
@@ -324,6 +324,14 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
             if (match(event, Tab)) {
               handleOnMenuChange(false);
             }
+
+            if (match(event, Home)) {
+              event.target.setSelectionRange(0, 0);
+            }
+
+            if (match(event, End)) {
+              event.target.setSelectionRange(event.target.value.length, event.target.value.length);
+            }
           },
           onFocus: function onFocus() {
             setInputFocused(true);

package/es/components/MultiSelect/MultiSelect.js

@@ -332,7 +332,8 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     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/es/components/NumberInput/NumberInput.js

@@ -140,6 +140,10 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
     ariaDescribedBy = normalizedProps.warnId;
   }
 
+  if (!normalizedProps.validation) {
+    ariaDescribedBy = helperText ? normalizedProps.helperId : undefined;
+  }
+
   function handleOnChange(event) {
     if (disabled) {
       return;
@@ -274,6 +278,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
   }))), isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: "".concat(prefix, "--number-input__divider")
   }), normalizedProps.validation ? normalizedProps.validation : /*#__PURE__*/React__default.createElement(HelperText, {
+    id: normalizedProps.helperId,
     disabled: disabled,
     description: helperText
   })));
@@ -442,12 +447,14 @@ Label.propTypes = {
 
 function HelperText(_ref3) {
   var disabled = _ref3.disabled,
-      description = _ref3.description;
+      description = _ref3.description,
+      id = _ref3.id;
   var prefix = usePrefix();
   var className = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
 
   if (description) {
     return /*#__PURE__*/React__default.createElement("div", {
+      id: id,
       className: className
     }, description);
   }
@@ -457,7 +464,8 @@ function HelperText(_ref3) {
 
 HelperText.propTypes = {
   description: PropTypes.node,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  id: PropTypes.string
 };
 /**
  * Determine if the given value is invalid based on the given max, min and

package/es/components/ProgressBar/ProgressBar.js

@@ -32,6 +32,7 @@ function ProgressBar(_ref) {
       value = _ref.value;
   var labelId = useId('progress-bar');
   var helperId = useId('progress-bar-helper');
+  var helperTextId = useId('progress-bar-helper-text');
   var prefix = usePrefix();
   var isFinished = status === 'finished';
   var isError = status === 'error';
@@ -96,6 +97,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
@@ -103,6 +105,7 @@ function ProgressBar(_ref) {
     className: "".concat(prefix, "--progress-bar__bar"),
     ref: ref
   })), helperText && /*#__PURE__*/React__default.createElement("div", {
+    id: helperTextId,
     className: "".concat(prefix, "--progress-bar__helper-text")
   }, helperText, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--visually-hidden"),

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -121,7 +121,8 @@ var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function (props, r
     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.createElement(Legend, {
     className: "".concat(prefix, "--label")
   }, legendText), getRadioButtons()), /*#__PURE__*/React__default.createElement("div", {

package/es/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/es/components/Select/Select.js

@@ -7,7 +7,7 @@
 
 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, { useContext, useState } from 'react';
+import React__default, { useContext, useState, useRef } from 'react';
 import cx from 'classnames';
 import { ChevronDown, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import deprecate from '../../prop-types/deprecate.js';
@@ -15,8 +15,10 @@ import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 
 var _excluded = ["className", "id", "inline", "labelText", "disabled", "children", "noLabel", "hideLabel", "invalid", "invalidText", "helperText", "light", "readOnly", "size", "warn", "warnText"];
+var getInstanceId = setupGetInstanceId();
 var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
   var _classNames, _classNames2, _classNames3;
 
@@ -56,6 +58,9 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
       isFocused = _useState2[0],
       setIsFocused = _useState2[1];
 
+  var _useRef = useRef(getInstanceId()),
+      selectInstanceId = _useRef.current;
+
   var selectClasses = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--select"), true), _defineProperty(_classNames, "".concat(prefix, "--select--inline"), inline), _defineProperty(_classNames, "".concat(prefix, "--select--light"), light), _defineProperty(_classNames, "".concat(prefix, "--select--invalid"), invalid), _defineProperty(_classNames, "".concat(prefix, "--select--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--select--readonly"), readOnly), _defineProperty(_classNames, "".concat(prefix, "--select--warning"), warn), _defineProperty(_classNames, "".concat(prefix, "--select--fluid--invalid"), isFluid && invalid), _defineProperty(_classNames, "".concat(prefix, "--select--fluid--focus"), isFluid && isFocused), _classNames), [enabled ? null : className]);
   var labelClasses = cx("".concat(prefix, "--label"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames2, "".concat(prefix, "--label--disabled"), disabled), _classNames2));
   var inputClasses = cx((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--select-input"), true), _defineProperty(_classNames3, "".concat(prefix, "--select-input--").concat(size), size), _classNames3));
@@ -76,13 +81,17 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
     id: errorId
   }, errorText) : null;
   var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+  var helperId = !helperText ? undefined : "select-helper-text-".concat(selectInstanceId);
   var helper = helperText ? /*#__PURE__*/React__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) {

package/es/components/StructuredList/StructuredList.js

@@ -131,12 +131,13 @@ function StructuredListRow(props) {
       setHasFocusWithin = _useState2[1];
 
   var id = useId('grid-input');
+  var selectedRow = React__default.useContext(GridSelectedRowStateContext);
   var setSelectedRow = React__default.useContext(GridSelectedRowDispatchContext);
   var prefix = usePrefix();
   var value = {
     id: id
   };
-  var classes = cx("".concat(prefix, "--structured-list-row"), className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--header-row"), head), _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--focused-within"), hasFocusWithin), _classNames2));
+  var classes = cx("".concat(prefix, "--structured-list-row"), className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--header-row"), head), _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--focused-within"), hasFocusWithin), _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--selected"), selectedRow === id), _classNames2));
   return head ? /*#__PURE__*/React__default.createElement("div", _extends({
     role: "row"
   }, other, {