@carbon/react 1.29.1 → 1.30.0-rc.0

package/lib/components/Tabs/usePressable.js

@@ -43,64 +43,53 @@ function usePressable(ref) {
   React.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);
@@ -129,10 +118,8 @@ function usePressable(ref) {
   }, [pendingLongPress, delayLongPressMs]);
   React.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/lib/components/Tag/Tag.Skeleton.js

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

package/lib/components/Tag/Tag.js

@@ -39,7 +39,6 @@ const TYPES = {
   'high-contrast': 'High-Contrast',
   outline: 'Outline'
 };
-
 const Tag = _ref => {
   let {
     children,
@@ -63,18 +62,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["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
       className: tagClasses,
-      "aria-label": title !== undefined ? `${title} ${children}` : `Clear filter ${children}`,
       id: tagId
     }, other), /*#__PURE__*/React__default["default"].createElement("span", {
       className: `${prefix}--tag__label`,
@@ -88,7 +84,6 @@ const Tag = _ref => {
       title: title
     }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
   }
-
   const ComponentTag = other.onClick ? 'button' : 'div';
   return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
     disabled: ComponentTag === 'button' ? disabled : null,
@@ -100,55 +95,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__default["default"].node,
-
   /**
    * Provide a custom className that is applied to the containing <span>
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify if the <Tag> is disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Determine if <Tag> is a filter/chip
    */
   filter: PropTypes__default["default"].bool,
-
   /**
    * Specify the id for the tag.
    */
   id: PropTypes__default["default"].string,
-
   /**
    * Click handler for filter tag close button.
    */
   onClose: PropTypes__default["default"].func,
-
   /**
    * Optional prop to render a custom icon.
    * Can be a React component class
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
-
   /**
    * Specify the size of the Tag. Currently supports either `sm` or
    * 'md' (default) sizes.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md']),
-
   /**
    * Text to show on clear filters
    */
   title: PropTypes__default["default"].string,
-
   /**
    * Specify the type of the <Tag>
    */

package/lib/components/Text/Text.js

@@ -30,9 +30,9 @@ function Text(_ref) {
   const context = React.useContext(TextDirectionContext.TextDirectionContext);
   const textProps = {};
   const BaseComponent = as ?? 'span';
-  const value = { ...context
+  const value = {
+    ...context
   };
-
   if (!context) {
     textProps.dir = dir;
     value.direction = dir;
@@ -41,11 +41,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;
@@ -59,51 +57,40 @@ function Text(_ref) {
       textProps.dir = dir;
     }
   }
-
   return /*#__PURE__*/React__default["default"].createElement(TextDirectionContext.TextDirectionContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, textProps), children));
 }
-
 Text.propTypes = {
   /**
    * Provide a custom element type used to render the outermost node
    */
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
-
   /**
    * Provide child elements or text to be rendered inside of this component
    */
   children: PropTypes__default["default"].node.isRequired,
-
   /**
    * Specify the text direction to be used for this component and any of its
    * children
    */
   dir: PropTypes__default["default"].oneOf(['ltr', 'rtl', 'auto'])
 };
-
 function getTextFromChildren(children) {
-  var _React$Children$map;
-
   if (typeof children === 'string') {
     return children;
   }
-
-  const text = (_React$Children$map = React__default["default"].Children.map(children, child => {
+  const text = React__default["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/lib/components/Text/TextDirection.js

@@ -38,18 +38,15 @@ function TextDirection(_ref) {
     value: value
   }, children);
 }
-
 TextDirection.propTypes = {
   /**
    * Provide children to be rendered inside of this component
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify the text direction for rendered children
    */
   dir: PropTypes__default["default"].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/lib/components/Text/TextDirectionContext.js

@@ -12,7 +12,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 /** @type any */
-
 const TextDirectionContext = /*#__PURE__*/React.createContext(null);
 
 exports.TextDirectionContext = TextDirectionContext;

package/lib/components/Text/createTextComponent.js

@@ -23,18 +23,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * @param {string} element
  * @param {string} displayName
  */
-
 function createTextComponent(element, displayName) {
   function TextWrapper(props) {
     return /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
       as: element
     }, props));
   }
-
   if (process.env.NODE_ENV !== "production") {
     TextWrapper.displayName = displayName;
   }
-
   return TextWrapper;
 }
 

package/lib/components/TextArea/TextArea.Skeleton.js

@@ -36,13 +36,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__default["default"].string,
-
   /**
    * Specify whether the label should be hidden, or not
    */

package/lib/components/TextArea/TextArea.js

@@ -15,7 +15,6 @@ var React = require('react');
 var cx = require('classnames');
 var deprecate = require('../../prop-types/deprecate.js');
 var iconsReact = require('@carbon/icons-react');
-var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
@@ -54,23 +53,26 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
-  const enabled = index.useFeatureFlag('enable-v11-release');
   const {
     defaultValue,
     value,
     disabled
   } = other;
-  const [textCount, setTextCount] = React.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] = React.useState(defaultValue?.toString()?.length || value?.toString()?.length || 0);
   const {
     current: textAreaInstanceId
   } = React.useRef(getInstanceId());
+  React.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);
       }
     },
@@ -80,11 +82,9 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
       }
     }
   };
-
   if (enableCounter) {
     textareaProps.maxLength = maxCount;
   }
-
   const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
   const labelClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel && !isFluid,
@@ -122,7 +122,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
   }, warnText, isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   })) : null;
-  const textareaClasses = cx__default["default"](`${prefix}--text-area`, [enabled ? null : className], {
+  const textareaClasses = cx__default["default"](`${prefix}--text-area`, {
     [`${prefix}--text-area--light`]: light,
     [`${prefix}--text-area--invalid`]: invalid,
     [`${prefix}--text-area--warn`]: warn
@@ -138,13 +138,11 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     }
   }, [other.cols]);
   let ariaDescribedBy;
-
   if (invalid) {
     ariaDescribedBy = errorId;
   } else if (!invalid && !warn && !isFluid && helperText) {
     ariaDescribedBy = helperId;
   }
-
   const input = /*#__PURE__*/React__default["default"].createElement("textarea", _rollupPluginBabelHelpers["extends"]({}, other, textareaProps, {
     placeholder: placeholder,
     className: textareaClasses,
@@ -155,7 +153,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     ref: ref
   }));
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: enabled ? cx__default["default"](`${prefix}--form-item`, className) : `${prefix}--form-item`
+    className: cx__default["default"](`${prefix}--form-item`, className)
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--text-area__label-wrapper`
   }, label, counter), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -182,106 +180,86 @@ TextArea.propTypes = {
    * `<textarea>` node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify the `cols` attribute for the underlying `<textarea>` node
    */
   cols: PropTypes__default["default"].number,
-
   /**
    * Optionally provide the default value of the `<textarea>`
    */
   defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-
   /**
    * Specify whether the control is disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Specify whether to display the character counter
    */
   enableCounter: PropTypes__default["default"].bool,
-
   /**
    * Provide text that is used alongside the control label for additional help
    */
   helperText: PropTypes__default["default"].node,
-
   /**
    * Specify whether you want the underlying label to be visually hidden
    */
   hideLabel: PropTypes__default["default"].bool,
-
   /**
    * Provide a unique identifier for the control
    */
   id: PropTypes__default["default"].string,
-
   /**
    * 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 the text that will be read by a screen reader when visiting this
    * control
    */
   labelText: PropTypes__default["default"].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["default"](PropTypes__default["default"].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__default["default"].number,
-
   /**
    * Optionally provide an `onChange` handler that is called whenever `<textarea>`
    * is updated
    */
   onChange: PropTypes__default["default"].func,
-
   /**
    * Optionally provide an `onClick` handler that is called whenever the
    * `<textarea>` is clicked
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * Specify the placeholder attribute for the `<textarea>`
    */
   placeholder: PropTypes__default["default"].string,
-
   /**
    * Whether the textarea should be read-only
    */
   readOnly: PropTypes__default["default"].bool,
-
   /**
    * Specify the rows attribute for the `<textarea>`
    */
   rows: PropTypes__default["default"].number,
-
   /**
    * Provide the current value of the `<textarea>`
    */
   value: 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
    */

package/lib/components/TextInput/ControlledPasswordInput.js

@@ -56,12 +56,10 @@ const ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRe
   const {
     current: controlledPasswordInstanceId
   } = React.useRef(getInstanceId());
-
   if (process.env.NODE_ENV !== "production") {
     process.env.NODE_ENV !== "production" ? warning.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__default["default"](`${prefix}--text-input`, `${prefix}--password-input`, className, {
     [`${prefix}--text-input--light`]: light,
@@ -147,98 +145,80 @@ ControlledPasswordInput.propTypes = {
    * `<input>` node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Optionally provide the default value of the `<input>`
    */
   defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-
   /**
    * Specify whether the control is disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Provide text that is used alongside the control label for additional help
    */
   helperText: PropTypes__default["default"].node,
-
   /**
    * Specify whether or not the underlying label is visually hidden
    */
   hideLabel: PropTypes__default["default"].bool,
-
   /**
    * "Hide password" tooltip text on password visibility toggle
    */
   hidePasswordLabel: PropTypes__default["default"].string,
-
   /**
    * Provide a unique identifier for the input field
    */
   id: PropTypes__default["default"].string.isRequired,
-
   /**
    * 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 the text that will be read by a screen reader when visiting this
    * control
    */
   labelText: PropTypes__default["default"].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["default"](PropTypes__default["default"].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__default["default"].func,
-
   /**
    * Optionally provide an `onClick` handler that is called whenever the
    * `<input>` is clicked
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * Specify the placeholder attribute for the `<input>`
    */
   placeholder: PropTypes__default["default"].string,
-
   /**
    * "Show password" tooltip text on password visibility toggle
    */
   showPasswordLabel: PropTypes__default["default"].string,
-
   /**
    * Specify the size of the Text Input.
    */
   size: PropTypes__default["default"].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__default["default"].oneOf(['start', 'center', 'end']),
-
   /**
    * Specify the direction of the tooltip for icon-only buttons.
    * Can be either top, right, bottom, or left.
    */
   tooltipPosition: PropTypes__default["default"].oneOf(['top', 'right', 'bottom', 'left']),
-
   /**
    * Provide the current value of the `<input>`
    */