@carbon/react 1.29.1 → 1.30.0

package/es/components/TextInput/PasswordInput.js

@@ -58,12 +58,10 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
   const {
     isFluid
   } = useContext(FormContext);
-
   const handleTogglePasswordVisibility = event => {
     setInputType(inputType === 'password' ? 'text' : 'password');
     onTogglePasswordVisibility && onTogglePasswordVisibility(event);
   };
-
   const textInputClasses = cx(`${prefix}--text-input`, `${prefix}--password-input`, className, {
     [`${prefix}--text-input--light`]: light,
     [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
@@ -177,124 +175,101 @@ PasswordInput.propTypes = {
    * `<input>` node
    */
   className: PropTypes.string,
-
   /**
    * Optionally provide the default value of the `<input>`
    */
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /**
    * Specify whether the control is disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Provide text that is used alongside the control label for additional help
    */
   helperText: PropTypes.node,
-
   /**
    * Specify whether or not the underlying label is visually hidden
    */
   hideLabel: PropTypes.bool,
-
   /**
    * "Hide password" tooltip text on password visibility toggle
    */
   hidePasswordLabel: PropTypes.string,
-
   /**
    * Provide a unique identifier for the input field
    */
   id: PropTypes.string.isRequired,
-
   /**
    * `true` to use the inline version.
    */
   inline: PropTypes.bool,
-
   /**
    * Specify whether the control is currently invalid
    */
   invalid: PropTypes.bool,
-
   /**
    * Provide the text that is displayed when the control is in an invalid state
    */
   invalidText: PropTypes.node,
-
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control
    */
   labelText: PropTypes.node.isRequired,
-
   /**
    * `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: deprecate(PropTypes.bool, 'The `light` prop for `PasswordInput` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
-
   /**
    * Optionally provide an `onChange` handler that is called whenever `<input>`
    * is updated
    */
   onChange: PropTypes.func,
-
   /**
    * Optionally provide an `onClick` handler that is called whenever the
    * `<input>` is clicked
    */
   onClick: PropTypes.func,
-
   /**
    * Callback function that is called whenever the toggle password visibility
    * button is clicked
    */
   onTogglePasswordVisibility: PropTypes.func,
-
   /**
    * Specify the placeholder attribute for the `<input>`
    */
   placeholder: PropTypes.string,
-
   /**
    * "Show password" tooltip text on password visibility toggle
    */
   showPasswordLabel: PropTypes.string,
-
   /**
    * Specify the size of the Text Input. Supports `sm`, `md`, or `lg`.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-
   /**
    * Specify the alignment of the tooltip to the icon-only button.
    * Can be one of: start, center, or end.
    */
   tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
-
   /**
    * Specify the direction of the tooltip for icon-only buttons.
    * Can be either top, right, bottom, or left.
    */
   tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-
   /**
    * The input type, either password or text
    */
   type: PropTypes.oneOf(['password', 'text']),
-
   /**
    * Provide the current value of the `<input>`
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /**
    * 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
    */

package/es/components/TextInput/TextInput.Skeleton.js

@@ -26,13 +26,11 @@ const TextInputSkeleton = _ref => {
     className: `${prefix}--skeleton ${prefix}--text-input`
   }));
 };
-
 TextInputSkeleton.propTypes = {
   /**
    * Specify an optional className to add to the form item wrapper.
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the label should be hidden, or not
    */

package/es/components/TextInput/TextInput.d.ts

@@ -67,7 +67,7 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
      * Optionally provide an `onChange` handler that is called whenever `<input>`
      * is updated
      */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Optionally provide an `onClick` handler that is called whenever the
      * `<input>` is clicked

package/es/components/TextInput/TextInput.js

@@ -15,8 +15,6 @@ import deprecate from '../../prop-types/deprecate.js';
 import { textInputProps } from './util.js';
 import '../FluidForm/FluidForm.js';
 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';
 
@@ -45,12 +43,11 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const enabled = useFeatureFlag('enable-v11-release');
   const {
     defaultValue,
     value
   } = rest;
-  const [textCount, setTextCount] = useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString().length) || (value === null || value === void 0 ? void 0 : value.toString().length) || 0);
+  const [textCount, setTextCount] = useState(defaultValue?.toString().length || value?.toString().length || 0);
   const normalizedProps = useNormalizedInputProps({
     id,
     readOnly,
@@ -60,7 +57,7 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     warn,
     warnText
   });
-  const textInputClasses = cx(`${prefix}--text-input`, [enabled ? null : className], {
+  const textInputClasses = cx(`${prefix}--text-input`, {
     [`${prefix}--text-input--light`]: light,
     [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
     [`${prefix}--text-input--warning`]: normalizedProps.warn,
@@ -70,9 +67,7 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     id,
     onChange: evt => {
       if (!normalizedProps.disabled) {
-        var _evt$target$value;
-
-        setTextCount((_evt$target$value = evt.target.value) === null || _evt$target$value === void 0 ? void 0 : _evt$target$value.length);
+        setTextCount(evt.target.value?.length);
         onChange(evt);
       }
     },
@@ -91,12 +86,10 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     ['aria-describedby']: helperText && normalizedProps.helperId,
     ...rest
   };
-
   if (enableCounter) {
     sharedTextInputProps.maxLength = maxCount;
   }
-
-  const inputWrapperClasses = cx([enabled ? cx(`${prefix}--form-item`, className) : `${prefix}--form-item`], `${prefix}--text-input-wrapper`, {
+  const inputWrapperClasses = cx([cx(`${prefix}--form-item`, className)], `${prefix}--text-input-wrapper`, {
     [`${prefix}--text-input-wrapper--readonly`]: readOnly,
     [`${prefix}--text-input-wrapper--light`]: light,
     [`${prefix}--text-input-wrapper--inline`]: inline,
@@ -178,111 +171,90 @@ TextInput.propTypes = {
    * Specify an optional className to be applied to the `<input>` node
    */
   className: PropTypes.string,
-
   /**
    * Optionally provide the default value of the `<input>`
    */
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /**
    * Specify whether the `<input>` should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Specify whether to display the character counter
    */
   enableCounter: PropTypes.bool,
-
   /**
    * Provide text that is used alongside the control label for additional help
    */
   helperText: PropTypes.node,
-
   /**
    * Specify whether you want the underlying label to be visually hidden
    */
   hideLabel: PropTypes.bool,
-
   /**
    * Specify a custom `id` for the `<input>`
    */
   id: PropTypes.string.isRequired,
-
   /**
    * `true` to use the inline version.
    */
   inline: PropTypes.bool,
-
   /**
    * Specify whether the control is currently invalid
    */
   invalid: PropTypes.bool,
-
   /**
    * Provide the text that is displayed when the control is in an invalid state
    */
   invalidText: PropTypes.node,
-
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control
    */
   labelText: PropTypes.node.isRequired,
-
   /**
    * `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: deprecate(PropTypes.bool, 'The `light` prop for `TextInput` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
-
   /**
    * Max character count allowed for the input. This is needed in order for enableCounter to display
    */
   maxCount: PropTypes.number,
-
   /**
    * Optionally provide an `onChange` handler that is called whenever `<input>`
    * is updated
    */
   onChange: PropTypes.func,
-
   /**
    * Optionally provide an `onClick` handler that is called whenever the
    * `<input>` is clicked
    */
   onClick: PropTypes.func,
-
   /**
    * Specify the placeholder attribute for the `<input>`
    */
   placeholder: PropTypes.string,
-
   /**
    * Whether the input should be read-only
    */
   readOnly: PropTypes.bool,
-
   /**
    * Specify the size of the Text Input. Currently supports the following:
    */
-  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg']) : PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
-
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
    * Specify the type of the `<input>`
    */
   type: PropTypes.string,
-
   /**
    * Specify the value of the `<input>`
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /**
    * 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
    */

package/es/components/TextInput/util.js

@@ -10,20 +10,17 @@ const invalidProps = invalidId => ({
   'aria-invalid': true,
   'aria-describedby': invalidId
 });
-
 const warnProps = warnId => ({
   'aria-describedby': warnId
 });
-
 const helperProps = helperId => ({
   'aria-describedby': helperId
 });
+
 /**
  * @param {{sharedTextInputProps: object, invalid?: boolean, invalidId?: string, warn?: boolean, warnId?: string, hasHelper?: boolean, helperId?: string}} config
  * @returns {object}
  */
-
-
 const textInputProps = _ref => {
   let {
     sharedTextInputProps,
@@ -34,7 +31,8 @@ const textInputProps = _ref => {
     hasHelper,
     helperId
   } = _ref;
-  return { ...sharedTextInputProps,
+  return {
+    ...sharedTextInputProps,
     ...(invalid ? invalidProps(invalidId) : {}),
     ...(warn ? warnProps(warnId) : {}),
     ...(hasHelper ? helperProps(helperId) : {})

package/es/components/Theme/index.js

@@ -35,13 +35,11 @@ GlobalTheme.propTypes = {
    * typically the root of your app
    */
   children: PropTypes.node,
-
   /**
    * Specify the global theme for your app
    */
   theme: PropTypes.oneOf(['white', 'g10', 'g90', 'g100'])
 };
-
 /**
  * Specify the theme to be applied to a page, or a region in a page
  */
@@ -80,27 +78,24 @@ Theme.propTypes = {
    * element in the component
    */
   as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
-
   /**
    * Provide child elements to be rendered inside of `Theme`
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom class name to be used on the outermost element rendered by
    * the component
    */
   className: PropTypes.string,
-
   /**
    * Specify the theme
    */
   theme: PropTypes.oneOf(['white', 'g10', 'g90', 'g100'])
 };
+
 /**
  * Get access to the current theme
  */
-
 function useTheme() {
   return React__default.useContext(ThemeContext);
 }