@carbon/react 1.18.0-rc.0 → 1.19.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -28,7 +28,7 @@ import { Text } from '../Text/Text.js';
 import ListBox from '../ListBox/ListBox.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
-var _excluded = ["ariaLabel", "className", "direction", "disabled", "downshiftProps", "helperText", "id", "initialSelectedItem", "invalid", "invalidText", "items", "itemToElement", "itemToString", "light", "onChange", "onInputChange", "onToggleClick", "placeholder", "selectedItem", "shouldFilterItem", "size", "titleText", "translateWithId", "type", "warn", "warnText", "onStateChange"];
+var _excluded = ["ariaLabel", "className", "direction", "disabled", "downshiftProps", "helperText", "id", "initialSelectedItem", "invalid", "invalidText", "items", "itemToElement", "itemToString", "light", "onChange", "onInputChange", "onToggleClick", "placeholder", "readOnly", "selectedItem", "shouldFilterItem", "size", "titleText", "translateWithId", "type", "warn", "warnText", "onStateChange"];
 
 var defaultItemToString = function defaultItemToString(item) {
   if (typeof item === 'string') {
@@ -102,6 +102,7 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       onInputChange = props.onInputChange,
       onToggleClick = props.onToggleClick,
       placeholder = props.placeholder,
+      readOnly = props.readOnly,
       selectedItem = props.selectedItem,
       shouldFilterItem = props.shouldFilterItem,
       size = props.size,
@@ -223,7 +224,7 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
 
   var enabled = useFeatureFlag('enable-v11-release');
   var showWarning = !invalid && warn;
-  var className = cx("".concat(prefix, "--combo-box"), [enabled ? null : containerClassName], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx, "".concat(prefix, "--combo-box--warning"), showWarning), _cx));
+  var className = cx("".concat(prefix, "--combo-box"), [enabled ? null : containerClassName], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx, "".concat(prefix, "--combo-box--warning"), showWarning), _defineProperty(_cx, "".concat(prefix, "--combo-box--readonly"), readOnly), _cx));
   var titleClasses = cx("".concat(prefix, "--label"), _defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
   var comboBoxHelperId = !helperText ? undefined : "combobox-helper-text-".concat(comboBoxInstanceId);
   var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
@@ -269,7 +270,7 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     });
     var labelProps = getLabelProps();
     var buttonProps = getToggleButtonProps({
-      disabled: disabled,
+      disabled: disabled || readOnly,
       onClick: handleToggleClick(isOpen),
       // When we moved the "root node" of Downshift to the <input> for
       // ARIA 1.2 compliance, we unfortunately hit this branch for the
@@ -313,6 +314,14 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       }
     };
 
+    var readOnlyEventHandlers = readOnly ? {
+      onKeyDown: function onKeyDown(evt) {
+        // This prevents the select from opening for the above keys
+        if (evt.key !== 'Tab') {
+          evt.preventDefault();
+        }
+      }
+    } : {};
     return /*#__PURE__*/React__default.createElement("div", {
       className: wrapperClasses
     }, titleText && /*#__PURE__*/React__default.createElement(Text, _extends({
@@ -343,7 +352,8 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       "aria-haspopup": "listbox",
       "aria-controls": inputProps['aria-controls'],
       title: textInput === null || textInput === void 0 ? void 0 : (_textInput$current = textInput.current) === null || _textInput$current === void 0 ? void 0 : _textInput$current.value
-    }, inputProps, rest, {
+    }, inputProps, rest, readOnlyEventHandlers, {
+      readOnly: readOnly,
       ref: mergeRefs(textInput, ref)
     })), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
       className: "".concat(prefix, "--list-box__invalid-icon")
@@ -352,7 +362,7 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     }), inputValue && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
       clearSelection: clearSelection,
       translateWithId: translateWithId,
-      disabled: disabled,
+      disabled: disabled || readOnly,
       onClearSelection: handleSelectionClear
     }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
       isOpen: isOpen,
@@ -493,6 +503,11 @@ ComboBox.propTypes = {
    */
   placeholder: PropTypes.string,
 
+  /**
+   * Is the ComboBox readonly?
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * For full control of the selection
    */

package/es/components/Dropdown/Dropdown.js

@@ -21,7 +21,7 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 import ListBox from '../ListBox/ListBox.js';
 
-var _excluded = ["className", "disabled", "direction", "items", "label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps"];
+var _excluded = ["className", "disabled", "direction", "items", "label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps", "readOnly"];
 
 var defaultItemToString = function defaultItemToString(item) {
   if (typeof item === 'string') {
@@ -59,6 +59,7 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
       initialSelectedItem = _ref.initialSelectedItem,
       controlledSelectedItem = _ref.selectedItem,
       downshiftProps = _ref.downshiftProps,
+      readOnly = _ref.readOnly,
       other = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
@@ -97,7 +98,7 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
       isFocused = _useState2[0],
       setIsFocused = _useState2[1];
 
-  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--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
+  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
@@ -127,6 +128,21 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
     setIsFocused(evt.type === 'focus' ? true : false);
   };
 
+  var readOnlyEventHandlers = readOnly ? {
+    onClick: function onClick(evt) {
+      // NOTE: does not prevent click
+      evt.preventDefault(); // focus on the element as per readonly input behavior
+
+      evt.target.focus();
+    },
+    onKeyDown: function onKeyDown(evt) {
+      var selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; // This prevents the select from opening for the above keys
+
+      if (selectAccessKeys.includes(evt.key)) {
+        evt.preventDefault();
+      }
+    }
+  } : {};
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default.createElement("label", _extends({
@@ -152,9 +168,10 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
     type: "button",
     className: "".concat(prefix, "--list-box__field"),
     disabled: disabled,
-    "aria-disabled": disabled,
+    "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
+    ,
     title: selectedItem ? itemToString(selectedItem) : label
-  }, toggleButtonProps, {
+  }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergeRefs(toggleButtonProps.ref, ref)
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--list-box__label")
@@ -278,6 +295,11 @@ Dropdown.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * An optional callback to render the currently selected item as a react element instead of only
    * as a string.

package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.js

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import '../FluidTextInput/FluidTextInput.js';
+import FluidTextInputSkeleton from '../FluidTextInput/FluidTextInput.Skeleton.js';
+import '../FluidSelect/FluidSelect.js';
+import FluidSelectSkeleton from '../FluidSelect/FluidSelect.Skeleton.js';
+
+var _FluidTextInputSkelet, _FluidSelectSkeleton, _FluidSelectSkeleton2;
+
+var _excluded = ["className", "isOnlyTwo"];
+
+var FluidTimePickerSkeleton = function FluidTimePickerSkeleton(_ref) {
+  var className = _ref.className,
+      isOnlyTwo = _ref.isOnlyTwo,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var wrapperClasses = cx(className, "".concat(prefix, "--time-picker--fluid--skeleton"), _defineProperty({}, "".concat(prefix, "--time-picker--equal-width"), isOnlyTwo));
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: wrapperClasses
+  }, rest), _FluidTextInputSkelet || (_FluidTextInputSkelet = /*#__PURE__*/React__default.createElement(FluidTextInputSkeleton, null)), _FluidSelectSkeleton || (_FluidSelectSkeleton = /*#__PURE__*/React__default.createElement(FluidSelectSkeleton, null)), !isOnlyTwo ? _FluidSelectSkeleton2 || (_FluidSelectSkeleton2 = /*#__PURE__*/React__default.createElement(FluidSelectSkeleton, null)) : null);
+};
+
+FluidTimePickerSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify if there are only two TimePicker elements
+   */
+  isOnlyTwo: PropTypes.bool
+};
+
+export { FluidTimePickerSkeleton as default };

package/es/components/FluidTimePicker/FluidTimePicker.js

@@ -0,0 +1,110 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import FluidTextInput from '../FluidTextInput/FluidTextInput.js';
+import '../FluidTextInput/FluidTextInput.Skeleton.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
+
+var _excluded = ["className", "children", "disabled", "invalid", "invalidText", "warn", "warnText"];
+var FluidTimePicker = /*#__PURE__*/React__default.forwardRef(function FluidTimePicker(_ref, ref) {
+  var _classnames;
+
+  var className = _ref.className,
+      children = _ref.children,
+      disabled = _ref.disabled,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      warn = _ref.warn,
+      warnText = _ref.warnText,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx(className, (_classnames = {}, _defineProperty(_classnames, "".concat(prefix, "--time-picker--fluid"), true), _defineProperty(_classnames, "".concat(prefix, "--time-picker--equal-width"), (children === null || children === void 0 ? void 0 : children.length) !== 2), _defineProperty(_classnames, "".concat(prefix, "--time-picker--fluid--disabled"), disabled), _defineProperty(_classnames, "".concat(prefix, "--time-picker--fluid--invalid"), invalid), _defineProperty(_classnames, "".concat(prefix, "--time-picker--fluid--warning"), warn), _classnames));
+
+  var errorText = function errorText() {
+    if (invalid) {
+      return invalidText;
+    }
+
+    if (warn) {
+      return warnText;
+    }
+  };
+
+  var error = invalid || warn;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--time-picker--fluid__wrapper")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--time-picker__input")
+  }, /*#__PURE__*/React__default.createElement(FluidTextInput, _extends({
+    disabled: disabled,
+    ref: ref
+  }, other))), disabled ? React__default.Children.toArray(children).map(function (child) {
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      disabled: disabled
+    });
+  }) : children), error && /*#__PURE__*/React__default.createElement("hr", {
+    className: "".concat(prefix, "--time-picker__divider")
+  }), error && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, errorText()), error && invalid ? /*#__PURE__*/React__default.createElement(WarningFilled, {
+    className: "".concat(prefix, "--time-picker__icon ").concat(prefix, "--time-picker__icon--invalid")
+  }) : /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+    className: "".concat(prefix, "--time-picker__icon ").concat(prefix, "--time-picker__icon--warn")
+  }));
+});
+FluidTimePicker.propTypes = {
+  /**
+   * The child node(s)
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the outer FluidTimePicker wrapper
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify whether or not the control is invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in error state
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
+};
+
+export { FluidTimePicker as default };

package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js

@@ -0,0 +1,64 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import FluidSelect from '../FluidSelect/FluidSelect.js';
+import '../FluidSelect/FluidSelect.Skeleton.js';
+
+var _excluded = ["children", "className"];
+var FluidTimePickerSelect = /*#__PURE__*/React__default.forwardRef(function FluidTimePickerSelect(_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React__default.createElement(FluidSelect, _extends({
+    className: className,
+    ref: ref
+  }, other), children);
+});
+FluidTimePickerSelect.propTypes = {
+  /**
+   * Provide the contents of your Select
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the node containing the label and the select box
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optionally provide the default value of the `<select>`
+   */
+  defaultValue: PropTypes.any,
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the `<select>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Provide label text to be read by screen readers when interacting with the
+   * control
+   */
+  labelText: PropTypes.node,
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `<input>` changes
+   */
+  onChange: PropTypes.func
+};
+
+export { FluidTimePickerSelect as default };

package/es/components/ListBox/next/ListBoxSelection.js

@@ -90,6 +90,7 @@ function ListBoxSelection(_ref) {
   return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
     "aria-label": description,
     className: className,
+    disabled: disabled,
     onClick: onClick,
     onKeyDown: onKeyDown,
     tabIndex: disabled ? -1 : 0,

package/es/components/Notification/Notification.js

@@ -170,7 +170,8 @@ function NotificationIcon(_ref3) {
   }
 
   return /*#__PURE__*/React__default.createElement(IconForKind, {
-    className: "".concat(prefix, "--").concat(notificationType, "-notification__icon")
+    className: "".concat(prefix, "--").concat(notificationType, "-notification__icon"),
+    size: 20
   }, /*#__PURE__*/React__default.createElement("title", null, iconDescription));
 }
 

package/es/components/NumberInput/NumberInput.js

@@ -51,8 +51,10 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
       _props$invalidText = props.invalidText,
       invalidText = _props$invalidText === void 0 ? enabled ? undefined : 'Provide invalidText' : _props$invalidText,
       light = props.light,
-      max = props.max,
-      min = props.min,
+      _props$max = props.max,
+      max = _props$max === void 0 ? 100 : _props$max,
+      _props$min = props.min,
+      min = _props$min === void 0 ? 0 : _props$min,
       onChange = props.onChange,
       _onClick = props.onClick,
       onKeyUp = props.onKeyUp,

package/es/components/Select/Select.js

@@ -142,9 +142,9 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
     "data-invalid": invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
-  }, input), isFluid && /*#__PURE__*/React__default.createElement("hr", {
+  }, input, isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: "".concat(prefix, "--select__divider")
-  }), !inline && error ? error : helper));
+  }), isFluid && error ? error : null), !inline && !isFluid && error ? error : helper));
 });
 Select.displayName = 'Select';
 Select.propTypes = {

package/es/components/TextArea/TextArea.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, useEffect } from 'react';
+import React__default, { useContext, useState } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { WarningFilled } from '@carbon/icons-react';
@@ -15,6 +15,7 @@ import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import { useAnnouncer } from '../../internal/useAnnouncer.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) {
@@ -50,11 +51,6 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
       textCount = _useState2[0],
       setTextCount = _useState2[1];
 
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      ariaAnnouncement = _useState4[0],
-      setAriaAnnouncement = _useState4[1];
-
   var textareaProps = {
     id: id,
     onChange: function onChange(evt) {
@@ -78,15 +74,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     textareaProps.maxLength = maxCount;
   }
 
-  useEffect(function () {
-    var lastTen = maxCount - 10;
-
-    if (textCount >= lastTen) {
-      setAriaAnnouncement("".concat(maxCount - textCount, " characters left."));
-    } else {
-      setAriaAnnouncement('');
-    }
-  }, [textCount, maxCount]);
+  var ariaAnnouncement = useAnnouncer(textCount, maxCount);
   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,
@@ -115,6 +103,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     "aria-invalid": invalid || null,
     "aria-describedby": invalid ? errorId : null,
     disabled: other.disabled,
+    readOnly: other.readOnly,
     style: other.cols ? {} : {
       width: "100%"
     }
@@ -124,7 +113,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--text-area__label-wrapper")
   }, label, counter), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--text-area__wrapper"),
+    className: cx("".concat(prefix, "--text-area__wrapper"), _defineProperty({}, "".concat(prefix, "--text-area__wrapper--readonly"), other.readOnly)),
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
@@ -222,6 +211,11 @@ TextArea.propTypes = {
    */
   placeholder: PropTypes.string,
 
+  /**
+   * Whether the textarea should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify the rows attribute for the `<textarea>`
    */

package/es/components/TextInput/TextInput.js

@@ -19,6 +19,7 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import * as FeatureFlags from '@carbon/feature-flags';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { useAnnouncer } from '../../internal/useAnnouncer.js';
 
 var _excluded = ["className", "disabled", "helperText", "hideLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "placeholder", "readOnly", "size", "type", "warn", "warnText", "enableCounter", "maxCount"];
 var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref, ref) {
@@ -137,6 +138,7 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
   var _useContext = useContext(FormContext),
       isFluid = _useContext.isFluid;
 
+  var ariaAnnouncement = useAnnouncer(textCount, maxCount);
   return /*#__PURE__*/React__default.createElement("div", {
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default.createElement("div", {
@@ -148,7 +150,10 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
     "data-invalid": normalizedProps.invalid || null
   }, normalizedProps.icon && /*#__PURE__*/React__default.createElement(normalizedProps.icon, {
     className: iconClasses
-  }), input, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+  }), input, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--text-input__counter-alert"),
+    role: "alert"
+  }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: "".concat(prefix, "--text-input__divider")
   }), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
 });

package/es/index.js

@@ -165,6 +165,9 @@ export { default as unstable__FluidTextArea } from './components/FluidTextArea/F
 export { default as unstable__FluidTextAreaSkeleton } from './components/FluidTextArea/FluidTextArea.Skeleton.js';
 export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
 export { default as unstable__FluidTextInputSkeleton } from './components/FluidTextInput/FluidTextInput.Skeleton.js';
+export { default as unstable__FluidTimePicker } from './components/FluidTimePicker/FluidTimePicker.js';
+export { default as unstable__FluidTimePickerSkeleton } from './components/FluidTimePicker/FluidTimePicker.Skeleton.js';
+export { default as unstable__FluidTimePickerSelect } from './components/FluidTimePickerSelect/FluidTimePickerSelect.js';
 export { Heading, Section } from './components/Heading/index.js';
 export { IconButton } from './components/IconButton/index.js';
 export { Layer, useLayer } from './components/Layer/index.js';

package/es/internal/useAnnouncer.js

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+
+function useAnnouncer(textCount, maxCount) {
+  var lastTen = maxCount - 10;
+
+  if (textCount >= lastTen) {
+    return "".concat(maxCount - textCount, " characters left.");
+  }
+}
+
+export { useAnnouncer };

package/es/internal/useNoInteractiveChildren.js

@@ -31,6 +31,10 @@ function useNoInteractiveChildren(ref) {
  */
 
 function getInteractiveContent(node) {
+  if (!node || !node.childNodes) {
+    return null;
+  }
+
   if (isFocusable(node)) {
     return node;
   }

package/lib/components/ComboBox/ComboBox.js

@@ -39,7 +39,7 @@ var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["ariaLabel", "className", "direction", "disabled", "downshiftProps", "helperText", "id", "initialSelectedItem", "invalid", "invalidText", "items", "itemToElement", "itemToString", "light", "onChange", "onInputChange", "onToggleClick", "placeholder", "selectedItem", "shouldFilterItem", "size", "titleText", "translateWithId", "type", "warn", "warnText", "onStateChange"];
+var _excluded = ["ariaLabel", "className", "direction", "disabled", "downshiftProps", "helperText", "id", "initialSelectedItem", "invalid", "invalidText", "items", "itemToElement", "itemToString", "light", "onChange", "onInputChange", "onToggleClick", "placeholder", "readOnly", "selectedItem", "shouldFilterItem", "size", "titleText", "translateWithId", "type", "warn", "warnText", "onStateChange"];
 
 var defaultItemToString = function defaultItemToString(item) {
   if (typeof item === 'string') {
@@ -113,6 +113,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       onInputChange = props.onInputChange,
       onToggleClick = props.onToggleClick,
       placeholder = props.placeholder,
+      readOnly = props.readOnly,
       selectedItem = props.selectedItem,
       shouldFilterItem = props.shouldFilterItem,
       size = props.size,
@@ -234,7 +235,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
 
   var enabled = index.useFeatureFlag('enable-v11-release');
   var showWarning = !invalid && warn;
-  var className = cx__default["default"]("".concat(prefix, "--combo-box"), [enabled ? null : containerClassName], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--combo-box--warning"), showWarning), _cx));
+  var className = cx__default["default"]("".concat(prefix, "--combo-box"), [enabled ? null : containerClassName], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--combo-box--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--combo-box--readonly"), readOnly), _cx));
   var titleClasses = cx__default["default"]("".concat(prefix, "--label"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
   var comboBoxHelperId = !helperText ? undefined : "combobox-helper-text-".concat(comboBoxInstanceId);
   var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
@@ -280,7 +281,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
     });
     var labelProps = getLabelProps();
     var buttonProps = getToggleButtonProps({
-      disabled: disabled,
+      disabled: disabled || readOnly,
       onClick: handleToggleClick(isOpen),
       // When we moved the "root node" of Downshift to the <input> for
       // ARIA 1.2 compliance, we unfortunately hit this branch for the
@@ -324,6 +325,14 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       }
     };
 
+    var readOnlyEventHandlers = readOnly ? {
+      onKeyDown: function onKeyDown(evt) {
+        // This prevents the select from opening for the above keys
+        if (evt.key !== 'Tab') {
+          evt.preventDefault();
+        }
+      }
+    } : {};
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: wrapperClasses
     }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
@@ -354,7 +363,8 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       "aria-haspopup": "listbox",
       "aria-controls": inputProps['aria-controls'],
       title: textInput === null || textInput === void 0 ? void 0 : (_textInput$current = textInput.current) === null || _textInput$current === void 0 ? void 0 : _textInput$current.value
-    }, inputProps, rest, {
+    }, inputProps, rest, readOnlyEventHandlers, {
+      readOnly: readOnly,
       ref: mergeRefs["default"](textInput, ref)
     })), invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
       className: "".concat(prefix, "--list-box__invalid-icon")
@@ -363,7 +373,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
     }), inputValue && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
       clearSelection: clearSelection,
       translateWithId: translateWithId,
-      disabled: disabled,
+      disabled: disabled || readOnly,
       onClearSelection: handleSelectionClear
     }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
       isOpen: isOpen,
@@ -504,6 +514,11 @@ ComboBox.propTypes = {
    */
   placeholder: PropTypes__default["default"].string,
 
+  /**
+   * Is the ComboBox readonly?
+   */
+  readOnly: PropTypes__default["default"].bool,
+
   /**
    * For full control of the selection
    */

package/lib/components/Dropdown/Dropdown.js

@@ -31,7 +31,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["className", "disabled", "direction", "items", "label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps"];
+var _excluded = ["className", "disabled", "direction", "items", "label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps", "readOnly"];
 
 var defaultItemToString = function defaultItemToString(item) {
   if (typeof item === 'string') {
@@ -69,6 +69,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
       initialSelectedItem = _ref.initialSelectedItem,
       controlledSelectedItem = _ref.selectedItem,
       downshiftProps = _ref.downshiftProps,
+      readOnly = _ref.readOnly,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
@@ -107,7 +108,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
       isFocused = _useState2[0],
       setIsFocused = _useState2[1];
 
-  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--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
+  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
@@ -137,6 +138,21 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
     setIsFocused(evt.type === 'focus' ? true : false);
   };
 
+  var readOnlyEventHandlers = readOnly ? {
+    onClick: function onClick(evt) {
+      // NOTE: does not prevent click
+      evt.preventDefault(); // focus on the element as per readonly input behavior
+
+      evt.target.focus();
+    },
+    onKeyDown: function onKeyDown(evt) {
+      var selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; // This prevents the select from opening for the above keys
+
+      if (selectAccessKeys.includes(evt.key)) {
+        evt.preventDefault();
+      }
+    }
+  } : {};
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -162,9 +178,10 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
     type: "button",
     className: "".concat(prefix, "--list-box__field"),
     disabled: disabled,
-    "aria-disabled": disabled,
+    "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
+    ,
     title: selectedItem ? itemToString(selectedItem) : label
-  }, toggleButtonProps, {
+  }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergeRefs["default"](toggleButtonProps.ref, ref)
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--list-box__label")
@@ -288,6 +305,11 @@ Dropdown.propTypes = {
    */
   onChange: PropTypes__default["default"].func,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes__default["default"].bool,
+
   /**
    * An optional callback to render the currently selected item as a react element instead of only
    * as a string.

package/lib/components/FluidTimePicker/FluidTimePicker.Skeleton.js

@@ -0,0 +1,56 @@
+/**
+ * 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 usePrefix = require('../../internal/usePrefix.js');
+require('../FluidTextInput/FluidTextInput.js');
+var FluidTextInput_Skeleton = require('../FluidTextInput/FluidTextInput.Skeleton.js');
+require('../FluidSelect/FluidSelect.js');
+var FluidSelect_Skeleton = require('../FluidSelect/FluidSelect.Skeleton.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 _FluidTextInputSkelet, _FluidSelectSkeleton, _FluidSelectSkeleton2;
+
+var _excluded = ["className", "isOnlyTwo"];
+
+var FluidTimePickerSkeleton = function FluidTimePickerSkeleton(_ref) {
+  var className = _ref.className,
+      isOnlyTwo = _ref.isOnlyTwo,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var wrapperClasses = cx__default["default"](className, "".concat(prefix, "--time-picker--fluid--skeleton"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--time-picker--equal-width"), isOnlyTwo));
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: wrapperClasses
+  }, rest), _FluidTextInputSkelet || (_FluidTextInputSkelet = /*#__PURE__*/React__default["default"].createElement(FluidTextInput_Skeleton["default"], null)), _FluidSelectSkeleton || (_FluidSelectSkeleton = /*#__PURE__*/React__default["default"].createElement(FluidSelect_Skeleton["default"], null)), !isOnlyTwo ? _FluidSelectSkeleton2 || (_FluidSelectSkeleton2 = /*#__PURE__*/React__default["default"].createElement(FluidSelect_Skeleton["default"], null)) : null);
+};
+
+FluidTimePickerSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify if there are only two TimePicker elements
+   */
+  isOnlyTwo: PropTypes__default["default"].bool
+};
+
+exports["default"] = FluidTimePickerSkeleton;

package/lib/components/FluidTimePicker/FluidTimePicker.js

@@ -0,0 +1,120 @@
+/**
+ * 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 FluidTextInput = require('../FluidTextInput/FluidTextInput.js');
+require('../FluidTextInput/FluidTextInput.Skeleton.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var iconsReact = require('@carbon/icons-react');
+
+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", "children", "disabled", "invalid", "invalidText", "warn", "warnText"];
+var FluidTimePicker = /*#__PURE__*/React__default["default"].forwardRef(function FluidTimePicker(_ref, ref) {
+  var _classnames;
+
+  var className = _ref.className,
+      children = _ref.children,
+      disabled = _ref.disabled,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      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, "--time-picker--fluid"), true), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--time-picker--equal-width"), (children === null || children === void 0 ? void 0 : children.length) !== 2), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--time-picker--fluid--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--time-picker--fluid--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--time-picker--fluid--warning"), warn), _classnames));
+
+  var errorText = function errorText() {
+    if (invalid) {
+      return invalidText;
+    }
+
+    if (warn) {
+      return warnText;
+    }
+  };
+
+  var error = invalid || warn;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--time-picker--fluid__wrapper")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--time-picker__input")
+  }, /*#__PURE__*/React__default["default"].createElement(FluidTextInput["default"], _rollupPluginBabelHelpers["extends"]({
+    disabled: disabled,
+    ref: ref
+  }, other))), disabled ? React__default["default"].Children.toArray(children).map(function (child) {
+    return /*#__PURE__*/React__default["default"].cloneElement(child, {
+      disabled: disabled
+    });
+  }) : children), error && /*#__PURE__*/React__default["default"].createElement("hr", {
+    className: "".concat(prefix, "--time-picker__divider")
+  }), error && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, errorText()), error && invalid ? /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+    className: "".concat(prefix, "--time-picker__icon ").concat(prefix, "--time-picker__icon--invalid")
+  }) : /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+    className: "".concat(prefix, "--time-picker__icon ").concat(prefix, "--time-picker__icon--warn")
+  }));
+});
+FluidTimePicker.propTypes = {
+  /**
+   * The child node(s)
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the outer FluidTimePicker wrapper
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether or not the control is invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in error 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,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes__default["default"].node
+};
+
+exports["default"] = FluidTimePicker;

package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.js

@@ -0,0 +1,73 @@
+/**
+ * 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 React = require('react');
+var PropTypes = require('prop-types');
+var FluidSelect = require('../FluidSelect/FluidSelect.js');
+require('../FluidSelect/FluidSelect.Skeleton.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _excluded = ["children", "className"];
+var FluidTimePickerSelect = /*#__PURE__*/React__default["default"].forwardRef(function FluidTimePickerSelect(_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React__default["default"].createElement(FluidSelect["default"], _rollupPluginBabelHelpers["extends"]({
+    className: className,
+    ref: ref
+  }, other), children);
+});
+FluidTimePickerSelect.propTypes = {
+  /**
+   * Provide the contents of your Select
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the node containing the label and the select box
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally provide the default value of the `<select>`
+   */
+  defaultValue: PropTypes__default["default"].any,
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify a custom `id` for the `<select>`
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Provide label text to be read by screen readers when interacting with the
+   * control
+   */
+  labelText: PropTypes__default["default"].node,
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `<input>` changes
+   */
+  onChange: PropTypes__default["default"].func
+};
+
+exports["default"] = FluidTimePickerSelect;

package/lib/components/ListBox/next/ListBoxSelection.js

@@ -100,6 +100,7 @@ function ListBoxSelection(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-label": description,
     className: className,
+    disabled: disabled,
     onClick: onClick,
     onKeyDown: onKeyDown,
     tabIndex: disabled ? -1 : 0,

package/lib/components/Notification/Notification.js

@@ -180,7 +180,8 @@ function NotificationIcon(_ref3) {
   }
 
   return /*#__PURE__*/React__default["default"].createElement(IconForKind, {
-    className: "".concat(prefix, "--").concat(notificationType, "-notification__icon")
+    className: "".concat(prefix, "--").concat(notificationType, "-notification__icon"),
+    size: 20
   }, /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription));
 }
 

package/lib/components/NumberInput/NumberInput.js

@@ -61,8 +61,10 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
       _props$invalidText = props.invalidText,
       invalidText = _props$invalidText === void 0 ? enabled ? undefined : 'Provide invalidText' : _props$invalidText,
       light = props.light,
-      max = props.max,
-      min = props.min,
+      _props$max = props.max,
+      max = _props$max === void 0 ? 100 : _props$max,
+      _props$min = props.min,
+      min = _props$min === void 0 ? 0 : _props$min,
       onChange = props.onChange,
       _onClick = props.onClick,
       onKeyUp = props.onKeyUp,

package/lib/components/Select/Select.js

@@ -152,9 +152,9 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
     "data-invalid": invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
-  }, input), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+  }, input, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: "".concat(prefix, "--select__divider")
-  }), !inline && error ? error : helper));
+  }), isFluid && error ? error : null), !inline && !isFluid && error ? error : helper));
 });
 Select.displayName = 'Select';
 Select.propTypes = {

package/lib/components/TextArea/TextArea.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 useAnnouncer = require('../../internal/useAnnouncer.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -60,11 +61,6 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
       textCount = _useState2[0],
       setTextCount = _useState2[1];
 
-  var _useState3 = React.useState(''),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      ariaAnnouncement = _useState4[0],
-      setAriaAnnouncement = _useState4[1];
-
   var textareaProps = {
     id: id,
     onChange: function onChange(evt) {
@@ -88,15 +84,7 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
     textareaProps.maxLength = maxCount;
   }
 
-  React.useEffect(function () {
-    var lastTen = maxCount - 10;
-
-    if (textCount >= lastTen) {
-      setAriaAnnouncement("".concat(maxCount - textCount, " characters left."));
-    } else {
-      setAriaAnnouncement('');
-    }
-  }, [textCount, maxCount]);
+  var ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
   var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel && !isFluid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
   var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
@@ -125,6 +113,7 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
     "aria-invalid": invalid || null,
     "aria-describedby": invalid ? errorId : null,
     disabled: other.disabled,
+    readOnly: other.readOnly,
     style: other.cols ? {} : {
       width: "100%"
     }
@@ -134,7 +123,7 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--text-area__label-wrapper")
   }, label, counter), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--text-area__wrapper"),
+    className: cx__default["default"]("".concat(prefix, "--text-area__wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-area__wrapper--readonly"), other.readOnly)),
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
@@ -232,6 +221,11 @@ TextArea.propTypes = {
    */
   placeholder: PropTypes__default["default"].string,
 
+  /**
+   * Whether the textarea should be read-only
+   */
+  readOnly: PropTypes__default["default"].bool,
+
   /**
    * Specify the rows attribute for the `<textarea>`
    */

package/lib/components/TextInput/TextInput.js

@@ -23,6 +23,7 @@ var FormContext = require('../FluidForm/FormContext.js');
 var index = require('../FeatureFlags/index.js');
 var FeatureFlags = require('@carbon/feature-flags');
 var usePrefix = require('../../internal/usePrefix.js');
+var useAnnouncer = require('../../internal/useAnnouncer.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -166,6 +167,7 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
   var _useContext = React.useContext(FormContext.FormContext),
       isFluid = _useContext.isFluid;
 
+  var ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default["default"].createElement("div", {
@@ -177,7 +179,10 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
     "data-invalid": normalizedProps.invalid || null
   }, normalizedProps.icon && /*#__PURE__*/React__default["default"].createElement(normalizedProps.icon, {
     className: iconClasses
-  }), input, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+  }), input, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--text-input__counter-alert"),
+    role: "alert"
+  }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: "".concat(prefix, "--text-input__divider")
   }), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
 });

package/lib/index.js

@@ -169,6 +169,9 @@ var FluidTextArea = require('./components/FluidTextArea/FluidTextArea.js');
 var FluidTextArea_Skeleton = require('./components/FluidTextArea/FluidTextArea.Skeleton.js');
 var FluidTextInput = require('./components/FluidTextInput/FluidTextInput.js');
 var FluidTextInput_Skeleton = require('./components/FluidTextInput/FluidTextInput.Skeleton.js');
+var FluidTimePicker = require('./components/FluidTimePicker/FluidTimePicker.js');
+var FluidTimePicker_Skeleton = require('./components/FluidTimePicker/FluidTimePicker.Skeleton.js');
+var FluidTimePickerSelect = require('./components/FluidTimePickerSelect/FluidTimePickerSelect.js');
 var index$a = require('./components/Heading/index.js');
 var index$b = require('./components/IconButton/index.js');
 var index$c = require('./components/Layer/index.js');
@@ -406,6 +409,9 @@ exports.unstable__FluidTextArea = FluidTextArea["default"];
 exports.unstable__FluidTextAreaSkeleton = FluidTextArea_Skeleton["default"];
 exports.unstable__FluidTextInput = FluidTextInput["default"];
 exports.unstable__FluidTextInputSkeleton = FluidTextInput_Skeleton["default"];
+exports.unstable__FluidTimePicker = FluidTimePicker["default"];
+exports.unstable__FluidTimePickerSkeleton = FluidTimePicker_Skeleton["default"];
+exports.unstable__FluidTimePickerSelect = FluidTimePickerSelect["default"];
 exports.Heading = index$a.Heading;
 exports.Section = index$a.Section;
 exports.IconButton = index$b.IconButton;

package/lib/internal/useAnnouncer.js

@@ -0,0 +1,20 @@
+/**
+ * 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 });
+
+function useAnnouncer(textCount, maxCount) {
+  var lastTen = maxCount - 10;
+
+  if (textCount >= lastTen) {
+    return "".concat(maxCount - textCount, " characters left.");
+  }
+}
+
+exports.useAnnouncer = useAnnouncer;

package/lib/internal/useNoInteractiveChildren.js

@@ -35,6 +35,10 @@ function useNoInteractiveChildren(ref) {
  */
 
 function getInteractiveContent(node) {
+  if (!node || !node.childNodes) {
+    return null;
+  }
+
   if (isFocusable(node)) {
     return node;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.18.0-rc.0",
+  "version": "1.19.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,10 +43,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@carbon/feature-flags": "^0.10.0-rc.0",
-    "@carbon/icons-react": "^11.12.0-rc.0",
-    "@carbon/layout": "^11.8.0-rc.0",
-    "@carbon/styles": "^1.18.0-rc.0",
+    "@carbon/feature-flags": "^0.11.0-rc.0",
+    "@carbon/icons-react": "^11.13.0-rc.0",
+    "@carbon/layout": "^11.9.0-rc.0",
+    "@carbon/styles": "^1.19.0-rc.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -73,8 +73,8 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@carbon/test-utils": "^10.26.0",
-    "@carbon/themes": "^11.13.0-rc.0",
-    "@rollup/plugin-babel": "^5.3.0",
+    "@carbon/themes": "^11.14.0-rc.0",
+    "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^9.0.0",
@@ -92,7 +92,7 @@
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
     "autoprefixer": "^10.4.0",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^9.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
     "babel-preset-carbon": "^0.3.0",
     "browserify-zlib": "^0.2.0",
@@ -135,5 +135,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "50cfaf729cfe80fecb6f7371ef13b53b25514145"
+  "gitHead": "a9d6ab5cc79665453f218fd5821c65c399337c15"
 }

package/scss/components/fluid-time-picker/_fluid-time-picker.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/fluid-time-picker/fluid-time-picker';

package/scss/components/fluid-time-picker/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/fluid-time-picker';