@carbon/react 1.25.0 → 1.26.0

package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { ReactNodeLike } from 'prop-types';
+import React from 'react';
+export declare const RadioButtonGroupContext: React.Context<null>;
+type ExcludedAttributes = 'onChange';
+export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HTMLFieldSetElement>, ExcludedAttributes> {
+    /**
+     * Provide a collection of `<RadioButton>` components to render in the group
+     */
+    children?: ReactNodeLike;
+    /**
+     * Provide an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify the `<RadioButton>` to be selected by default
+     */
+    defaultSelected?: string | number;
+    /**
+     * Specify whether the group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNodeLike;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: ReactNodeLike;
+    /**
+     * Provide where label text should be placed
+     */
+    labelPosition?: 'left' | 'right';
+    /**
+     * Provide a legend to the RadioButtonGroup input that you are
+     * exposing to the user
+     */
+    legendText?: ReactNodeLike;
+    /**
+     * Specify the name of the underlying `<input>` nodes
+     */
+    name: string;
+    /**
+     * Provide an optional `onChange` hook that is called whenever the value of
+     * the group changes
+     */
+    onChange?: (selection: unknown, name: string, evt: unknown) => void;
+    /**
+     * Provide where radio buttons should be placed
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether the RadioButtonGroup should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNodeLike;
+    /**
+     * Specify the value that is currently selected in the group
+     */
+    valueSelected?: string | number;
+}
+declare const RadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<unknown>>;
+export default RadioButtonGroup;

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -15,6 +15,9 @@ var React = require('react');
 var cx = require('classnames');
 var index = require('../Text/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var iconsReact = require('@carbon/icons-react');
+var mergeRefs = require('../../tools/mergeRefs.js');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,25 +25,33 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["children", "className", "defaultSelected", "disabled", "labelPosition", "legendText", "name", "onChange", "orientation", "readOnly", "valueSelected"];
-var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(function RadioButtonGroup(_ref, ref) {
+var _excluded = ["children", "className", "defaultSelected", "disabled", "helperText", "invalid", "invalidText", "labelPosition", "legendText", "name", "onChange", "orientation", "readOnly", "valueSelected", "warn", "warnText"];
+var getInstanceId = setupGetInstanceId["default"]();
+var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
   var _classNames;
 
-  var children = _ref.children,
-      className = _ref.className,
-      defaultSelected = _ref.defaultSelected,
-      disabled = _ref.disabled,
-      _ref$labelPosition = _ref.labelPosition,
-      labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
-      legendText = _ref.legendText,
-      name = _ref.name,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$orientation = _ref.orientation,
-      orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
-      readOnly = _ref.readOnly,
-      valueSelected = _ref.valueSelected,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var children = props.children,
+      className = props.className,
+      defaultSelected = props.defaultSelected,
+      disabled = props.disabled,
+      helperText = props.helperText,
+      _props$invalid = props.invalid,
+      invalid = _props$invalid === void 0 ? false : _props$invalid,
+      invalidText = props.invalidText,
+      _props$labelPosition = props.labelPosition,
+      labelPosition = _props$labelPosition === void 0 ? 'right' : _props$labelPosition,
+      legendText = props.legendText,
+      name = props.name,
+      _props$onChange = props.onChange,
+      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      _props$orientation = props.orientation,
+      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
+      readOnly = props.readOnly,
+      valueSelected = props.valueSelected,
+      _props$warn = props.warn,
+      warn = _props$warn === void 0 ? false : _props$warn,
+      warnText = props.warnText,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
 
@@ -53,6 +64,9 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
       _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
       prevValueSelected = _useState4[0],
       setPrevValueSelected = _useState4[1];
+
+  var _useRef = React.useRef(getInstanceId()),
+      radioButtonGroupInstanceId = _useRef.current;
   /**
    * prop + state alignment - getDerivedStateFromProps
    * only update if selected prop changes
@@ -66,7 +80,11 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
 
   function getRadioButtons() {
     var mappedChildren = React__default["default"].Children.map(children, function (radioButton) {
-      var value = radioButton.props.value;
+      var _props;
+
+      var _ref = (_props = radioButton === null || radioButton === void 0 ? void 0 : radioButton.props) !== null && _props !== void 0 ? _props : undefined,
+          value = _ref.value;
+
       var newProps = {
         name: name,
         key: value,
@@ -75,11 +93,13 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
         checked: value === selected
       };
 
-      if (!selected && radioButton.props.checked) {
+      if (!selected && radioButton !== null && radioButton !== void 0 && radioButton.props.checked) {
         newProps.checked = true;
       }
 
-      return /*#__PURE__*/React__default["default"].cloneElement(radioButton, newProps);
+      if (radioButton) {
+        return /*#__PURE__*/React__default["default"].cloneElement(radioButton, newProps);
+      }
     });
     return mappedChildren;
   }
@@ -93,18 +113,38 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
     }
   }
 
-  var fieldsetClasses = cx__default["default"]("".concat(prefix, "--radio-button-group"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--readonly"), readOnly), _classNames));
+  var showWarning = !readOnly && !invalid && warn;
+  var showHelper = !invalid && !disabled && !warn;
   var wrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), className);
+  var fieldsetClasses = cx__default["default"]("".concat(prefix, "--radio-button-group"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--invalid"), !readOnly && invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--warning"), showWarning), _classNames));
+  var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+  var helperId = !helperText ? undefined : "radio-button-group-helper-text-".concat(radioButtonGroupInstanceId);
+  var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+    id: helperId,
+    className: helperClasses
+  }, helperText) : null;
+  var divRef = React.useRef(null);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses,
-    ref: ref
+    ref: mergeRefs["default"](divRef, ref)
   }, /*#__PURE__*/React__default["default"].createElement("fieldset", _rollupPluginBabelHelpers["extends"]({
     className: fieldsetClasses,
     disabled: disabled,
+    "data-invalid": invalid ? true : undefined,
     "aria-readonly": readOnly
   }, rest), legendText && /*#__PURE__*/React__default["default"].createElement(index.Legend, {
     className: "".concat(prefix, "--label")
-  }, legendText), getRadioButtons()));
+  }, legendText), getRadioButtons()), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--radio-button__validation-msg")
+  }, !readOnly && invalid && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+    className: "".concat(prefix, "--radio-button__invalid-icon")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, invalidText)), showWarning && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+    className: "".concat(prefix, "--radio-button__invalid-icon ").concat(prefix, "--radio-button__invalid-icon--warning")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, warnText))), showHelper && helper);
 });
 RadioButtonGroup.propTypes = {
   /**
@@ -127,6 +167,21 @@ RadioButtonGroup.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
 
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes__default["default"].node,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes__default["default"].node,
+
   /**
    * Provide where label text should be placed
    */
@@ -162,8 +217,19 @@ RadioButtonGroup.propTypes = {
   /**
    * Specify the value that is currently selected in the group
    */
-  valueSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+  valueSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * 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
 };
+RadioButtonGroup.displayName = 'RadioButtonGroup';
 var RadioButtonGroup$1 = RadioButtonGroup;
 
 exports["default"] = RadioButtonGroup$1;

package/lib/components/Search/Search.Skeleton.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+export interface SearchSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Specify whether the Search should be a small variant.
+     */
+    small?: boolean;
+}
+declare const SearchSkeleton: {
+    ({ small, className, ...rest }: SearchSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the Search should be a small variant
+         */
+        small: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        small: boolean;
+    };
+};
+export default SearchSkeleton;
+export { SearchSkeleton };

package/lib/components/Search/Search.js

@@ -54,7 +54,7 @@ var Search = /*#__PURE__*/React__default["default"].forwardRef(function Search(_
       onKeyDown = _ref.onKeyDown,
       onExpand = _ref.onExpand,
       _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+      placeholder = _ref$placeholder === void 0 ? 'Search' : _ref$placeholder,
       renderIcon = _ref.renderIcon,
       _ref$role = _ref.role,
       role = _ref$role === void 0 ? 'searchbox' : _ref$role,
@@ -125,9 +125,10 @@ var Search = /*#__PURE__*/React__default["default"].forwardRef(function Search(_
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
     role: "search",
-    "aria-labelledby": searchId,
+    "aria-label": placeholder,
     className: searchClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "aria-labelledby": uniqueId,
     role: onExpand ? 'button' : null,
     className: "".concat(prefix, "--search-magnifier"),
     onClick: onExpand

package/lib/components/Search/index.js

@@ -10,8 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Search = require('./Search.js');
+var Search_Skeleton = require('./Search.Skeleton.js');
 
 
 
 exports.Search = Search["default"];
 exports["default"] = Search["default"];
+exports.SearchSkeleton = Search_Skeleton["default"];

package/lib/components/StructuredList/StructuredList.js

@@ -256,7 +256,7 @@ StructuredListInput.propTypes = {
   /**
    * Provide an optional hook that is called each time the input is updated
    */
-  onChange: deprecate["default"](PropTypes__default["default"].func, "\nThe prop `onChange` will be removed in the next major version of Carbon."),
+  onChange: PropTypes__default["default"].func,
 
   /**
    * Provide a `title` for the input

package/lib/components/Tabs/Tabs.js

@@ -39,7 +39,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _ChevronLeft, _ChevronRight;
 
 var _excluded = ["activation", "aria-label", "children", "className", "contained", "iconSize", "leftOverflowButtonProps", "light", "rightOverflowButtonProps", "scrollDebounceWait", "scrollIntoView"],
-    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown"],
+    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown", "secondaryLabel", "hasSecondaryLabel"],
     _excluded3 = ["children", "className", "defaultOpen", "enterDelayMs", "leaveDelayMs", "label"],
     _excluded4 = ["children", "className"];
 
@@ -177,7 +177,10 @@ function TabList(_ref2) {
       scrollLeft = _useState6[0],
       setScrollLeft = _useState6[1];
 
-  var className = cx__default["default"]("".concat(prefix, "--tabs"), customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs--contained"), contained), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs__icon--default"), iconSize === 'default'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs__icon--lg"), iconSize === 'lg'), _cx)); // Previous Button
+  var hasSecondaryLabelTabs = contained && !!React__default["default"].Children.toArray(children).filter(function (child) {
+    return child.props.secondaryLabel;
+  }).length;
+  var className = cx__default["default"]("".concat(prefix, "--tabs"), customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs--contained"), contained), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs__icon--default"), iconSize === 'default'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs__icon--lg"), iconSize === 'lg'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tabs--tall"), hasSecondaryLabelTabs), _cx)); // Previous Button
   // VISIBLE IF:
   //   SCROLLABLE
   //   AND SCROLL_LEFT > 0
@@ -337,7 +340,8 @@ function TabList(_ref2) {
     }, /*#__PURE__*/React__default["default"].cloneElement(child, {
       ref: function ref(node) {
         tabs.current[index] = node;
-      }
+      },
+      hasSecondaryLabel: hasSecondaryLabelTabs
     }));
   })), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     "aria-hidden": "true",
@@ -462,6 +466,8 @@ var Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5,
       disabled = _ref5.disabled,
       _onClick = _ref5.onClick,
       onKeyDown = _ref5.onKeyDown,
+      secondaryLabel = _ref5.secondaryLabel,
+      hasSecondaryLabel = _ref5.hasSecondaryLabel,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded2);
 
   var prefix = usePrefix.usePrefix();
@@ -498,7 +504,11 @@ var Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5,
     onKeyDown: onKeyDown,
     tabIndex: selectedIndex === index ? '0' : '-1',
     type: "button"
-  }), children);
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--tabs__nav-item-label")
+  }, children), hasSecondaryLabel && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--tabs__nav-item-secondary-label")
+  }, secondaryLabel));
 });
 Tab.propTypes = {
   /**
@@ -521,6 +531,11 @@ Tab.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
 
+  /*
+   * Internal use only, determines wether a tab should render as a secondary label tab
+   **/
+  hasSecondaryLabel: PropTypes__default["default"].bool,
+
   /**
    * Provide a handler that is invoked when a user clicks on the control
    */
@@ -536,7 +551,13 @@ Tab.propTypes = {
    * Useful for using Tab along with react-router or other client
    * side router libraries.
    **/
-  renderButton: PropTypes__default["default"].func
+  renderButton: PropTypes__default["default"].func,
+
+  /*
+   * An optional label to render under the primary tab label.
+  /* This prop is only useful for conained tabs
+   **/
+  secondaryLabel: PropTypes__default["default"].string
 };
 var IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab(_ref6, ref) {
   var children = _ref6.children,

package/lib/components/TextInput/PasswordInput.d.ts

@@ -0,0 +1,125 @@
+import React, { InputHTMLAttributes } from 'react';
+import { ReactNodeLike } from 'prop-types';
+type ExcludedAttributes = 'size';
+export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * Provide a custom className that is applied directly to the underlyling `<input>` node
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<input>`
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether to display the character counter
+     */
+    enableCounter?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNodeLike;
+    /**
+     * Specify whether or not the underlying label is visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * "Hide password" tooltip text on password visibility toggle
+     */
+    hidePasswordLabel?: string;
+    /**
+     * Provide a unique identifier for the input field
+     */
+    id: string;
+    /**
+     * `true` to use the inline version
+     */
+    inline?: boolean;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: ReactNodeLike;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this control
+     */
+    labelText: ReactNodeLike;
+    /**
+     * @deprecated The `light` prop for `PasswordInput` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make tile background color same as container background color.
+     */
+    light?: boolean;
+    /**
+     * Max character count allowed for the input. This is needed in order for enableCounter to display
+     */
+    maxCount?: number;
+    /**
+     * Optionally provide an `onChange` handler that is called whenever `<input>` is updated
+     * @param evt Change event triggered by `<input>`
+     * @returns {void}
+     */
+    onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Optionally provide an `onClick` handler that is called whenever the `<input>` is returned
+     * @param evt Mouse event triggered by `<input>`
+     * @returns {void}
+     */
+    onClick?: (evt: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function that is called whenever the toggle password visibility button is clicked
+     * @param evt Mouse event triggered by the password visibility `<button>`
+     * @returns {void}
+     */
+    onTogglePasswordVisibility?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Specify the placeholder attribute for the `<input>`
+     */
+    placeholder?: string;
+    /**
+     * Whether the input should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * "Show password" tooltip text on password visibility toggle
+     */
+    showPasswordLabel?: string;
+    /**
+     * Specify the size of the Text Input. Supports `sm`, `md`, or `lg`.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify the alignment of the tooltip to the icon-only button.
+     * Can be one of: `start`, `center`, or `end`.
+     */
+    tooltipAlignment?: 'start' | 'center' | 'end';
+    /**
+     * Specify the direction of the tooltip for the icon-only button.
+     * Can be either `top`, `right`, `bottom`, or `left`
+     */
+    tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * The input type, either `password` or `text`
+     */
+    type?: 'password' | 'text';
+    /**
+     * Provide the current value of the `<input>`
+     */
+    value?: string | number;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNodeLike;
+}
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<unknown>>;
+export default PasswordInput;

package/lib/components/TextInput/PasswordInput.js

@@ -18,36 +18,16 @@ var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js
 var util = require('./util.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var FeatureFlags = require('@carbon/feature-flags');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var _excluded = ["className", "disabled", "helperText", "hideLabel", "hidePasswordLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "onTogglePasswordVisibility", "placeholder", "size", "showPasswordLabel", "tooltipPosition", "tooltipAlignment", "type", "warn", "warnText"];
+var _excluded = ["className", "disabled", "helperText", "hideLabel", "hidePasswordLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "onTogglePasswordVisibility", "placeholder", "readOnly", "size", "showPasswordLabel", "tooltipPosition", "tooltipAlignment", "type", "warn", "warnText"];
 var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function PasswordInput(_ref, ref) {
   var _classNames, _classNames2, _classNames3, _classNames4, _classNames7, _classNames8;
 
@@ -71,6 +51,7 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
       _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
       onTogglePasswordVisibility = _ref.onTogglePasswordVisibility,
       placeholder = _ref.placeholder,
+      readOnly = _ref.readOnly,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'md' : _ref$size,
       _ref$showPasswordLabe = _ref.showPasswordLabel,
@@ -81,7 +62,8 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
       tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'center' : _ref$tooltipAlignment,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'password' : _ref$type,
-      warn = _ref.warn,
+      _ref$warn = _ref.warn,
+      warn = _ref$warn === void 0 ? false : _ref$warn,
       warnText = _ref.warnText,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
@@ -96,7 +78,9 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
     invalid: invalid,
     invalidText: invalidText,
     warn: warn,
-    warnText: warnText
+    warnText: warnText,
+    readOnly: readOnly,
+    disabled: disabled
   });
 
   var _useContext = React.useContext(FormContext.FormContext),
@@ -169,6 +153,7 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
   React.useEffect(function () {
     setInputType(type);
   }, [type]);
+  var Icon = normalizedProps.icon;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: inputWrapperClasses
   }, !inline ? label : /*#__PURE__*/React__default["default"].createElement("div", {
@@ -178,7 +163,7 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: fieldWrapperClasses,
     "data-invalid": normalizedProps.invalid || null
-  }, normalizedProps.icon && /*#__PURE__*/React__default["default"].createElement(normalizedProps.icon, {
+  }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: iconClasses
   }), input, isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
 });
@@ -278,7 +263,7 @@ PasswordInput.propTypes = {
   /**
    * Specify the size of the Text Input. Supports `sm`, `md`, or `lg`.
    */
-  size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['sm', 'md', 'lg']) : PropTypes__default["default"].string,
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
 
   /**
    * Specify the alignment of the tooltip to the icon-only button.