@carbon/react 1.18.0-rc.0 → 1.18.0

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/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,

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/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/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,

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/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.18.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.10.0",
+    "@carbon/icons-react": "^11.12.0",
+    "@carbon/layout": "^11.8.0",
+    "@carbon/styles": "^1.18.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -73,7 +73,7 @@
     "@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",
+    "@carbon/themes": "^11.13.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -135,5 +135,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "50cfaf729cfe80fecb6f7371ef13b53b25514145"
+  "gitHead": "00fdab625998b2ae048814059ae8447435d6c7cd"
 }

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';