@carbon/react 1.29.0 → 1.30.0-rc.0

package/es/components/Tabs/usePressable.js

@@ -39,64 +39,53 @@ function usePressable(ref) {
   useEffect(() => {
     const {
       current: element
-    } = ref; // Fired when a pointer becomes active buttons state.
+    } = ref;
 
+    // Fired when a pointer becomes active buttons state.
     function onPointerDown(event) {
-      var _savedOnPressIn$curre;
-
       setPendingLongPress(true);
-      (_savedOnPressIn$curre = savedOnPressIn.current) === null || _savedOnPressIn$curre === void 0 ? void 0 : _savedOnPressIn$curre.call(savedOnPressIn);
+      savedOnPressIn.current?.();
       event.preventDefault();
-    } // Fired when a pointer is no longer active buttons state.
-
+    }
 
+    // Fired when a pointer is no longer active buttons state.
     function onPointerUp() {
-      var _savedOnPressOut$curr;
-
       setPendingLongPress(false);
       setLongPress(false);
-      (_savedOnPressOut$curr = savedOnPressOut.current) === null || _savedOnPressOut$curr === void 0 ? void 0 : _savedOnPressOut$curr.call(savedOnPressOut, state.current);
-    } // A browser fires this event if it concludes the pointer
+      savedOnPressOut.current?.(state.current);
+    }
+
+    // A browser fires this event if it concludes the pointer
     // will no longer be able to generate events (for example
     // the related device is deactivated).
-
-
     function onPointerCancel() {
-      var _savedOnPressOut$curr2;
-
       setPendingLongPress(false);
       setLongPress(false);
-      (_savedOnPressOut$curr2 = savedOnPressOut.current) === null || _savedOnPressOut$curr2 === void 0 ? void 0 : _savedOnPressOut$curr2.call(savedOnPressOut);
+      savedOnPressOut.current?.();
       state.current.longPress = false;
-    } // Fired when a pointer is moved out of the hit test
+    }
+
+    // Fired when a pointer is moved out of the hit test
     // boundaries of an element. For pen devices, this event
     // is fired when the stylus leaves the hover range
     // detectable by the digitizer.
-
-
     function onPointerLeave() {
-      var _savedOnPressOut$curr3;
-
       setPendingLongPress(false);
       setLongPress(false);
-      (_savedOnPressOut$curr3 = savedOnPressOut.current) === null || _savedOnPressOut$curr3 === void 0 ? void 0 : _savedOnPressOut$curr3.call(savedOnPressOut);
+      savedOnPressOut.current?.();
       state.current.longPress = false;
     }
-
     function onClick() {
-      var _savedOnPress$current;
-
       setLongPress(false);
       setPendingLongPress(false);
-      (_savedOnPress$current = savedOnPress.current) === null || _savedOnPress$current === void 0 ? void 0 : _savedOnPress$current.call(savedOnPress, state.current);
+      savedOnPress.current?.(state.current);
       state.current.longPress = false;
-    } // Certain devices treat long press events as context menu triggers
-
+    }
 
+    // Certain devices treat long press events as context menu triggers
     function onContextMenu(event) {
       event.preventDefault();
     }
-
     element.addEventListener('pointerdown', onPointerDown);
     element.addEventListener('pointerup', onPointerUp);
     element.addEventListener('pointercancel', onPointerCancel);
@@ -125,10 +114,8 @@ function usePressable(ref) {
   }, [pendingLongPress, delayLongPressMs]);
   useEffect(() => {
     if (longPress) {
-      var _savedOnLongPress$cur;
-
       state.current.longPress = true;
-      return (_savedOnLongPress$cur = savedOnLongPress.current) === null || _savedOnLongPress$cur === void 0 ? void 0 : _savedOnLongPress$cur.call(savedOnLongPress);
+      return savedOnLongPress.current?.();
     }
   }, [longPress]);
 }

package/es/components/Tag/Tag.Skeleton.js

@@ -24,13 +24,11 @@ function TagSkeleton(_ref) {
     })
   }, rest));
 }
-
 TagSkeleton.propTypes = {
   /**
    * Specify an optional className to add.
    */
   className: PropTypes.string,
-
   /**
    * Specify the size of the Tag. Currently supports either `sm` or
    * default sizes.

package/es/components/Tag/Tag.js

@@ -29,7 +29,6 @@ const TYPES = {
   'high-contrast': 'High-Contrast',
   outline: 'Outline'
 };
-
 const Tag = _ref => {
   let {
     children,
@@ -53,18 +52,15 @@ const Tag = _ref => {
     [`${prefix}--tag--${type}`]: type,
     [`${prefix}--tag--interactive`]: other.onClick && !filter
   });
-
   const handleClose = event => {
     if (onClose) {
       event.stopPropagation();
       onClose(event);
     }
   };
-
   if (filter) {
     return /*#__PURE__*/React__default.createElement("div", _extends({
       className: tagClasses,
-      "aria-label": title !== undefined ? `${title} ${children}` : `Clear filter ${children}`,
       id: tagId
     }, other), /*#__PURE__*/React__default.createElement("span", {
       className: `${prefix}--tag__label`,
@@ -78,7 +74,6 @@ const Tag = _ref => {
       title: title
     }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
   }
-
   const ComponentTag = other.onClick ? 'button' : 'div';
   return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
     disabled: ComponentTag === 'button' ? disabled : null,
@@ -90,55 +85,45 @@ const Tag = _ref => {
     title: typeof children === 'string' ? children : null
   }, children !== null && children !== undefined ? children : TYPES[type]));
 };
-
 Tag.propTypes = {
   /**
    * Provide content to be rendered inside of a <Tag>
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom className that is applied to the containing <span>
    */
   className: PropTypes.string,
-
   /**
    * Specify if the <Tag> is disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Determine if <Tag> is a filter/chip
    */
   filter: PropTypes.bool,
-
   /**
    * Specify the id for the tag.
    */
   id: PropTypes.string,
-
   /**
    * Click handler for filter tag close button.
    */
   onClose: PropTypes.func,
-
   /**
    * Optional prop to render a custom icon.
    * Can be a React component class
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
   /**
    * Specify the size of the Tag. Currently supports either `sm` or
    * 'md' (default) sizes.
    */
   size: PropTypes.oneOf(['sm', 'md']),
-
   /**
    * Text to show on clear filters
    */
   title: PropTypes.string,
-
   /**
    * Specify the type of the <Tag>
    */

package/es/components/Text/Text.js

@@ -21,9 +21,9 @@ function Text(_ref) {
   const context = useContext(TextDirectionContext);
   const textProps = {};
   const BaseComponent = as ?? 'span';
-  const value = { ...context
+  const value = {
+    ...context
   };
-
   if (!context) {
     textProps.dir = dir;
     value.direction = dir;
@@ -32,11 +32,9 @@ function Text(_ref) {
       direction: parentDirection,
       getTextDirection
     } = context;
-
     if (getTextDirection && getTextDirection.current) {
       const text = getTextFromChildren(children);
       const override = getTextDirection.current(text);
-
       if (parentDirection !== override) {
         textProps.dir = override;
         value.direction = override;
@@ -50,51 +48,40 @@ function Text(_ref) {
       textProps.dir = dir;
     }
   }
-
   return /*#__PURE__*/React__default.createElement(TextDirectionContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, textProps), children));
 }
-
 Text.propTypes = {
   /**
    * Provide a custom element type used to render the outermost node
    */
   as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
-
   /**
    * Provide child elements or text to be rendered inside of this component
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Specify the text direction to be used for this component and any of its
    * children
    */
   dir: PropTypes.oneOf(['ltr', 'rtl', 'auto'])
 };
-
 function getTextFromChildren(children) {
-  var _React$Children$map;
-
   if (typeof children === 'string') {
     return children;
   }
-
-  const text = (_React$Children$map = React__default.Children.map(children, child => {
+  const text = React__default.Children.map(children, child => {
     if (typeof child === 'string') {
       return child;
     }
-
     return null;
-  })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(text => {
+  })?.filter(text => {
     return text !== null;
   });
-
-  if ((text === null || text === void 0 ? void 0 : text.length) === 1) {
+  if (text?.length === 1) {
     return text[0];
   }
-
   return text;
 }
 

package/es/components/Text/TextDirection.js

@@ -29,18 +29,15 @@ function TextDirection(_ref) {
     value: value
   }, children);
 }
-
 TextDirection.propTypes = {
   /**
    * Provide children to be rendered inside of this component
    */
   children: PropTypes.node,
-
   /**
    * Specify the text direction for rendered children
    */
   dir: PropTypes.oneOf(['ltr', 'rtl', 'auto']),
-
   /**
    * Optionally provide a custom function to get the text direction for a piece
    * of text. Whatever is returned will become the value of the `dir` attribute

package/es/components/Text/TextDirectionContext.js

@@ -8,7 +8,6 @@
 import { createContext } from 'react';
 
 /** @type any */
-
 const TextDirectionContext = /*#__PURE__*/createContext(null);
 
 export { TextDirectionContext };

package/es/components/Text/createTextComponent.js

@@ -15,18 +15,15 @@ import { Text } from './Text.js';
  * @param {string} element
  * @param {string} displayName
  */
-
 function createTextComponent(element, displayName) {
   function TextWrapper(props) {
     return /*#__PURE__*/React__default.createElement(Text, _extends({
       as: element
     }, props));
   }
-
   if (process.env.NODE_ENV !== "production") {
     TextWrapper.displayName = displayName;
   }
-
   return TextWrapper;
 }
 

package/es/components/TextArea/TextArea.Skeleton.js

@@ -26,13 +26,11 @@ const TextAreaSkeleton = props => {
     className: `${prefix}--skeleton ${prefix}--text-area`
   }));
 };
-
 TextAreaSkeleton.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/TextArea/TextArea.js

@@ -7,11 +7,10 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState, useRef } from 'react';
+import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
@@ -44,23 +43,26 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   const {
     isFluid
   } = useContext(FormContext);
-  const enabled = useFeatureFlag('enable-v11-release');
   const {
     defaultValue,
     value,
     disabled
   } = other;
-  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 {
     current: textAreaInstanceId
   } = useRef(getInstanceId());
+  useEffect(() => {
+    setTextCount(defaultValue?.toString()?.length || value?.toString()?.length || 0);
+  }, [value, defaultValue]);
   const textareaProps = {
     id,
     onChange: evt => {
       if (!other.disabled && onChange) {
-        var _evt$target$value;
-
-        setTextCount((_evt$target$value = evt.target.value) === null || _evt$target$value === void 0 ? void 0 : _evt$target$value.length);
+        // delay textCount assignation to give the textarea element value time to catch up if is a controlled input
+        setTimeout(() => {
+          setTextCount(evt.target.value?.length);
+        }, 0);
         onChange(evt);
       }
     },
@@ -70,11 +72,9 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
       }
     }
   };
-
   if (enableCounter) {
     textareaProps.maxLength = maxCount;
   }
-
   const ariaAnnouncement = useAnnouncer(textCount, maxCount);
   const labelClasses = cx(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel && !isFluid,
@@ -112,7 +112,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   }, warnText, isFluid && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   })) : null;
-  const textareaClasses = cx(`${prefix}--text-area`, [enabled ? null : className], {
+  const textareaClasses = cx(`${prefix}--text-area`, {
     [`${prefix}--text-area--light`]: light,
     [`${prefix}--text-area--invalid`]: invalid,
     [`${prefix}--text-area--warn`]: warn
@@ -128,13 +128,11 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     }
   }, [other.cols]);
   let ariaDescribedBy;
-
   if (invalid) {
     ariaDescribedBy = errorId;
   } else if (!invalid && !warn && !isFluid && helperText) {
     ariaDescribedBy = helperId;
   }
-
   const input = /*#__PURE__*/React__default.createElement("textarea", _extends({}, other, textareaProps, {
     placeholder: placeholder,
     className: textareaClasses,
@@ -145,7 +143,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     ref: ref
   }));
   return /*#__PURE__*/React__default.createElement("div", {
-    className: enabled ? cx(`${prefix}--form-item`, className) : `${prefix}--form-item`
+    className: cx(`${prefix}--form-item`, className)
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--text-area__label-wrapper`
   }, label, counter), /*#__PURE__*/React__default.createElement("div", {
@@ -172,106 +170,86 @@ TextArea.propTypes = {
    * `<textarea>` node
    */
   className: PropTypes.string,
-
   /**
    * Specify the `cols` attribute for the underlying `<textarea>` node
    */
   cols: PropTypes.number,
-
   /**
    * Optionally provide the default value of the `<textarea>`
    */
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /**
    * Specify whether the control is 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,
-
   /**
    * Provide a unique identifier for the control
    */
   id: PropTypes.string,
-
   /**
    * 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 `TextArea` 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 textarea. This is needed in order for enableCounter to display
    */
   maxCount: PropTypes.number,
-
   /**
    * Optionally provide an `onChange` handler that is called whenever `<textarea>`
    * is updated
    */
   onChange: PropTypes.func,
-
   /**
    * Optionally provide an `onClick` handler that is called whenever the
    * `<textarea>` is clicked
    */
   onClick: PropTypes.func,
-
   /**
    * Specify the placeholder attribute for the `<textarea>`
    */
   placeholder: PropTypes.string,
-
   /**
    * Whether the textarea should be read-only
    */
   readOnly: PropTypes.bool,
-
   /**
    * Specify the rows attribute for the `<textarea>`
    */
   rows: PropTypes.number,
-
   /**
    * Provide the current value of the `<textarea>`
    */
   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/ControlledPasswordInput.js

@@ -46,12 +46,10 @@ const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function
   const {
     current: controlledPasswordInstanceId
   } = useRef(getInstanceId());
-
   if (process.env.NODE_ENV !== "production") {
     process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<TextInput.ControlledPasswordInput>` has been deprecated in favor of `<TextInput.PasswordInput />` and will be removed in the next major release of `carbon-components-react`') : void 0;
     didWarnAboutDeprecation = true;
   }
-
   const errorId = id + '-error-msg';
   const textInputClasses = cx(`${prefix}--text-input`, `${prefix}--password-input`, className, {
     [`${prefix}--text-input--light`]: light,
@@ -137,98 +135,80 @@ ControlledPasswordInput.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,
-
   /**
    * 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 `ControlledPasswordInput` 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,
-
   /**
    * 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.
    */
   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']),
-
   /**
    * Provide the current value of the `<input>`
    */