@carbon/react 1.83.0 → 1.84.0-rc.0

package/es/components/Tabs/Tabs.js

@@ -68,15 +68,14 @@ const TabPanelContext = /*#__PURE__*/React.createContext(0);
  * Tabs
  */
 
-function Tabs(_ref) {
-  let {
-    children,
-    defaultSelectedIndex = 0,
-    onChange,
-    selectedIndex: controlledSelectedIndex,
-    dismissable,
-    onTabCloseRequest
-  } = _ref;
+function Tabs({
+  children,
+  defaultSelectedIndex = 0,
+  onChange,
+  selectedIndex: controlledSelectedIndex,
+  dismissable,
+  onTabCloseRequest
+}) {
   const baseId = useId('ccs');
   if (dismissable && !onTabCloseRequest) {
     console.error('dismissable property specified without also providing an onTabCloseRequest property.');
@@ -141,15 +140,14 @@ Tabs.propTypes = {
    */
   selectedIndex: PropTypes.number
 };
-function TabsVertical(_ref2) {
-  let {
-    children,
-    height,
-    defaultSelectedIndex = 0,
-    onChange,
-    selectedIndex: controlledSelectedIndex,
-    ...rest
-  } = _ref2;
+function TabsVertical({
+  children,
+  height,
+  defaultSelectedIndex = 0,
+  onChange,
+  selectedIndex: controlledSelectedIndex,
+  ...rest
+}) {
   const [selectedIndex, setSelectedIndex] = useControllableState({
     value: controlledSelectedIndex,
     defaultValue: defaultSelectedIndex,
@@ -160,12 +158,9 @@ function TabsVertical(_ref2) {
   const props = {
     ...rest,
     selectedIndex,
-    onChange: _ref3 => {
-      let {
-        selectedIndex
-      } = _ref3;
-      return setSelectedIndex(selectedIndex);
-    }
+    onChange: ({
+      selectedIndex
+    }) => setSelectedIndex(selectedIndex)
   };
   const isSm = useMatchMedia(smMediaQuery);
   if (!isSm) {
@@ -250,22 +245,21 @@ function getNextIndexVertical(event, total, index) {
  * TabList
  */
 
-function TabList(_ref4) {
-  let {
-    activation = 'automatic',
-    'aria-label': label,
-    children,
-    className: customClassName,
-    contained = false,
-    fullWidth = false,
-    iconSize,
-    leftOverflowButtonProps,
-    light,
-    rightOverflowButtonProps,
-    scrollDebounceWait = 200,
-    scrollIntoView,
-    ...rest
-  } = _ref4;
+function TabList({
+  activation = 'automatic',
+  'aria-label': label,
+  children,
+  className: customClassName,
+  contained = false,
+  fullWidth = false,
+  iconSize,
+  leftOverflowButtonProps,
+  light,
+  rightOverflowButtonProps,
+  scrollDebounceWait = 200,
+  scrollIntoView,
+  ...rest
+}) {
   const {
     activeIndex,
     selectedIndex,
@@ -341,10 +335,9 @@ function TabList(_ref4) {
       tabs.current[nextIndex]?.focus();
     }
   }
-  function handleBlur(_ref5) {
-    let {
-      relatedTarget: currentActiveNode
-    } = _ref5;
+  function handleBlur({
+    relatedTarget: currentActiveNode
+  }) {
     if (ref.current?.contains(currentActiveNode)) {
       return;
     }
@@ -455,10 +448,9 @@ function TabList(_ref4) {
     scrollTabIntoView(tab);
   }, [selectedIndex, isScrollable, children]);
   usePressable(previousButton, {
-    onPress(_ref6) {
-      let {
-        longPress
-      } = _ref6;
+    onPress({
+      longPress
+    }) {
       if (!longPress && ref.current) {
         setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
       }
@@ -468,10 +460,9 @@ function TabList(_ref4) {
     }
   });
   usePressable(nextButton, {
-    onPress(_ref7) {
-      let {
-        longPress
-      } = _ref7;
+    onPress({
+      longPress
+    }) {
       if (!longPress && ref.current) {
         setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.current.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
       }
@@ -581,15 +572,14 @@ TabList.propTypes = {
 
 // type TabElement = HTMLElement & { disabled?: boolean };
 
-function TabListVertical(_ref8) {
-  let {
-    activation = 'automatic',
-    'aria-label': label,
-    children,
-    className: customClassName,
-    scrollIntoView,
-    ...rest
-  } = _ref8;
+function TabListVertical({
+  activation = 'automatic',
+  'aria-label': label,
+  children,
+  className: customClassName,
+  scrollIntoView,
+  ...rest
+}) {
   const {
     activeIndex,
     selectedIndex,
@@ -618,10 +608,9 @@ function TabListVertical(_ref8) {
       tabs.current[nextIndex]?.focus();
     }
   }
-  function handleBlur(_ref9) {
-    let {
-      relatedTarget: currentActiveNode
-    } = _ref9;
+  function handleBlur({
+    relatedTarget: currentActiveNode
+  }) {
     if (ref.current?.contains(currentActiveNode)) {
       return;
     }
@@ -780,18 +769,17 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
  * Tab
  */
 
-const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
-  let {
-    as = 'button',
-    children,
-    className: customClassName,
-    disabled,
-    onClick,
-    onKeyDown,
-    secondaryLabel,
-    renderIcon: Icon,
-    ...rest
-  } = _ref10;
+const Tab = /*#__PURE__*/forwardRef(function Tab({
+  as = 'button',
+  children,
+  className: customClassName,
+  disabled,
+  onClick,
+  onKeyDown,
+  secondaryLabel,
+  renderIcon: Icon,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix();
   const {
     selectedIndex,
@@ -1034,17 +1022,16 @@ Tab.propTypes = {
  */
 
 const IconTabContext = /*#__PURE__*/createContext(false);
-const IconTab = /*#__PURE__*/React.forwardRef(function IconTab(_ref11, ref) {
-  let {
-    badgeIndicator,
-    children,
-    className: customClassName,
-    defaultOpen = false,
-    enterDelayMs,
-    leaveDelayMs,
-    label,
-    ...rest
-  } = _ref11;
+const IconTab = /*#__PURE__*/React.forwardRef(function IconTab({
+  badgeIndicator,
+  children,
+  className: customClassName,
+  defaultOpen = false,
+  enterDelayMs,
+  leaveDelayMs,
+  label,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const value = useMemo(() => ({
     badgeIndicator
@@ -1106,12 +1093,11 @@ IconTab.propTypes = {
  * TabPanel
  */
 
-const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(_ref12, forwardRef) {
-  let {
-    children,
-    className: customClassName,
-    ...rest
-  } = _ref12;
+const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel({
+  children,
+  className: customClassName,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix();
   const panel = useRef(null);
   const ref = useMergedRefs([forwardRef, panel]);
@@ -1186,10 +1172,9 @@ TabPanel.propTypes = {
  * TabPanels
  */
 
-function TabPanels(_ref13) {
-  let {
-    children
-  } = _ref13;
+function TabPanels({
+  children
+}) {
   const prefix = usePrefix();
   const refs = useRef([]);
   const hiddenStates = useRef([]);

package/es/components/Tabs/usePressable.js

@@ -20,14 +20,13 @@ import { useRef, useState, useEffect } from 'react';
  *   delayLongPressMs?: number,
  * }} options
  */
-function usePressable(ref) {
-  let {
-    onPress,
-    onPressIn,
-    onPressOut,
-    onLongPress,
-    delayLongPressMs = 500
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function usePressable(ref, {
+  onPress,
+  onPressIn,
+  onPressOut,
+  onLongPress,
+  delayLongPressMs = 500
+} = {}) {
   const savedOnPress = useRef(onPress);
   const savedOnPressIn = useRef(onPressIn);
   const savedOnPressOut = useRef(onPressOut);

package/es/components/Tag/DismissibleTag.js

@@ -22,23 +22,22 @@ import mergeRefs from '../../tools/mergeRefs.js';
 import { Text } from '../Text/Text.js';
 
 var _Close;
-const DismissibleTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
-  let {
-    className,
-    decorator,
-    disabled,
-    id,
-    renderIcon,
-    title = 'Dismiss',
-    onClose,
-    slug,
-    size,
-    text,
-    tagTitle,
-    type,
-    dismissTooltipLabel = 'Dismiss tag',
-    ...other
-  } = _ref;
+const DismissibleTag = /*#__PURE__*/forwardRef(({
+  className,
+  decorator,
+  disabled,
+  id,
+  renderIcon,
+  title = 'Dismiss',
+  onClose,
+  slug,
+  size,
+  text,
+  tagTitle,
+  type,
+  dismissTooltipLabel = 'Dismiss tag',
+  ...other
+}, forwardRef) => {
   const prefix = usePrefix();
   const tagLabelRef = useRef(null);
   const tagId = id || `tag-${useId()}`;

package/es/components/Tag/OperationalTag.js

@@ -31,17 +31,16 @@ const TYPES = {
   'cool-gray': 'Cool-Gray',
   'warm-gray': 'Warm-Gray'
 };
-const OperationalTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
-  let {
-    className,
-    disabled,
-    id,
-    renderIcon,
-    size,
-    text,
-    type = 'gray',
-    ...other
-  } = _ref;
+const OperationalTag = /*#__PURE__*/forwardRef(({
+  className,
+  disabled,
+  id,
+  renderIcon,
+  size,
+  text,
+  type = 'gray',
+  ...other
+}, forwardRef) => {
   const prefix = usePrefix();
   const tagRef = useRef(null);
   const tagId = id || `tag-${useId()}`;

package/es/components/Tag/SelectableTag.js

@@ -20,20 +20,19 @@ import mergeRefs from '../../tools/mergeRefs.js';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { Text } from '../Text/Text.js';
 
-const SelectableTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
-  let {
-    className,
-    disabled,
-    id,
-    renderIcon,
-    onChange,
-    onClick,
-    selected,
-    size,
-    text,
-    defaultSelected = false,
-    ...other
-  } = _ref;
+const SelectableTag = /*#__PURE__*/forwardRef(({
+  className,
+  disabled,
+  id,
+  renderIcon,
+  onChange,
+  onClick,
+  selected,
+  size,
+  text,
+  defaultSelected = false,
+  ...other
+}, forwardRef) => {
   const prefix = usePrefix();
   const tagRef = useRef(null);
   const tagId = id || `tag-${useId()}`;

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

@@ -11,12 +11,11 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function TagSkeleton(_ref) {
-  let {
-    className,
-    size,
-    ...rest
-  } = _ref;
+function TagSkeleton({
+  className,
+  size,
+  ...rest
+}) {
   const prefix = usePrefix();
   const tagClasses = cx(`${prefix}--tag`, `${prefix}--skeleton`, className, {
     [`${prefix}--tag--${size}`]: size,

package/es/components/Tag/Tag.js

@@ -40,26 +40,25 @@ const SIZES = {
   md: 'md',
   lg: 'lg'
 };
-const TagBase = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
-  let {
-    children,
-    className,
-    decorator,
-    id,
-    type,
-    filter,
-    // remove filter in next major release - V12
-    renderIcon: CustomIconElement,
-    title = 'Clear filter',
-    // remove title in next major release - V12
-    disabled,
-    onClose,
-    // remove onClose in next major release - V12
-    size,
-    as: BaseComponent,
-    slug,
-    ...other
-  } = _ref;
+const TagBase = /*#__PURE__*/React.forwardRef(({
+  children,
+  className,
+  decorator,
+  id,
+  type,
+  filter,
+  // remove filter in next major release - V12
+  renderIcon: CustomIconElement,
+  title = 'Clear filter',
+  // remove title in next major release - V12
+  disabled,
+  onClose,
+  // remove onClose in next major release - V12
+  size,
+  as: BaseComponent,
+  slug,
+  ...other
+}, forwardRef) => {
   const prefix = usePrefix();
   const tagRef = useRef(null);
   if (filter) {

package/es/components/Text/Text.js

@@ -11,13 +11,12 @@ import React, { useContext, Children } from 'react';
 import './index.js';
 import { TextDirectionContext } from './TextDirectionContext.js';
 
-const TextBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    as,
-    children,
-    dir = 'auto',
-    ...rest
-  } = _ref;
+const TextBase = /*#__PURE__*/React.forwardRef(({
+  as,
+  children,
+  dir = 'auto',
+  ...rest
+}, ref) => {
   const context = useContext(TextDirectionContext);
   const textProps = {};
   const BaseComponent = as ?? 'span';

package/es/components/Text/TextDirection.js

@@ -10,12 +10,11 @@ import React, { useRef, useMemo, useEffect } from 'react';
 import './index.js';
 import { TextDirectionContext } from './TextDirectionContext.js';
 
-const TextDirection = _ref => {
-  let {
-    children,
-    dir = 'auto',
-    getTextDirection
-  } = _ref;
+const TextDirection = ({
+  children,
+  dir = 'auto',
+  getTextDirection
+}) => {
   const savedCallback = useRef(getTextDirection);
   const value = useMemo(() => {
     return {

package/es/components/TextArea/TextArea.js

@@ -14,7 +14,7 @@ import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import { useAnnouncer } from '../../internal/useAnnouncer.js';
+import { getAnnouncement } from '../../internal/getAnnouncement.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useId } from '../../internal/useId.js';
@@ -40,7 +40,7 @@ const TextArea = frFn((props, forwardRef) => {
     light,
     placeholder = '',
     enableCounter = false,
-    maxCount = undefined,
+    maxCount,
     counterMode = 'character',
     warn = false,
     warnText = '',
@@ -220,7 +220,7 @@ const TextArea = frFn((props, forwardRef) => {
   }
   const announcerRef = useRef(null);
   const [prevAnnouncement, setPrevAnnouncement] = useState('');
-  const ariaAnnouncement = useAnnouncer(textCount, maxCount, counterMode === 'word' ? 'words' : undefined);
+  const ariaAnnouncement = getAnnouncement(textCount, maxCount, counterMode === 'word' ? 'word' : undefined, counterMode === 'word' ? 'words' : undefined);
   useEffect(() => {
     if (ariaAnnouncement && ariaAnnouncement !== prevAnnouncement) {
       const announcer = announcerRef.current;

package/es/components/TextInput/ControlledPasswordInput.js

@@ -16,31 +16,30 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
 
-const ControlledPasswordInput = /*#__PURE__*/React.forwardRef(function ControlledPasswordInput(_ref, ref) {
-  let {
-    labelText,
-    className,
-    id,
-    placeholder,
-    onChange = noopFn,
-    onClick = noopFn,
-    disabled = false,
-    hideLabel,
-    invalid = false,
-    invalidText = '',
-    helperText = '',
-    light,
-    // eslint-disable-next-line react/prop-types
-    type = 'password',
-    // eslint-disable-next-line react/prop-types
-    togglePasswordVisibility,
-    tooltipPosition = 'bottom',
-    tooltipAlignment = 'center',
-    hidePasswordLabel = 'Hide password',
-    showPasswordLabel = 'Show password',
-    size = undefined,
-    ...other
-  } = _ref;
+const ControlledPasswordInput = /*#__PURE__*/React.forwardRef(function ControlledPasswordInput({
+  labelText,
+  className,
+  id,
+  placeholder,
+  onChange = noopFn,
+  onClick = noopFn,
+  disabled = false,
+  hideLabel,
+  invalid = false,
+  invalidText = '',
+  helperText = '',
+  light,
+  // eslint-disable-next-line react/prop-types
+  type = 'password',
+  // eslint-disable-next-line react/prop-types
+  togglePasswordVisibility,
+  tooltipPosition = 'bottom',
+  tooltipAlignment = 'center',
+  hidePasswordLabel = 'Hide password',
+  showPasswordLabel = 'Show password',
+  size = undefined,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const controlledPasswordInstanceId = useId();
   const errorId = id + '-error-msg';

package/es/components/TextInput/PasswordInput.js

@@ -19,33 +19,32 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const PasswordInput = /*#__PURE__*/React.forwardRef(function PasswordInput(_ref, ref) {
-  let {
-    className,
-    disabled = false,
-    helperText,
-    hideLabel,
-    hidePasswordLabel = 'Hide password',
-    id,
-    inline,
-    invalid = false,
-    invalidText,
-    labelText,
-    light,
-    onChange = () => {},
-    onClick = () => {},
-    onTogglePasswordVisibility,
-    placeholder,
-    readOnly,
-    size = 'md',
-    showPasswordLabel = 'Show password',
-    tooltipPosition = 'bottom',
-    tooltipAlignment = 'end',
-    type = 'password',
-    warn = false,
-    warnText,
-    ...rest
-  } = _ref;
+const PasswordInput = /*#__PURE__*/React.forwardRef(function PasswordInput({
+  className,
+  disabled = false,
+  helperText,
+  hideLabel,
+  hidePasswordLabel = 'Hide password',
+  id,
+  inline,
+  invalid = false,
+  invalidText,
+  labelText,
+  light,
+  onChange = () => {},
+  onClick = () => {},
+  onTogglePasswordVisibility,
+  placeholder,
+  readOnly,
+  size = 'md',
+  showPasswordLabel = 'Show password',
+  tooltipPosition = 'bottom',
+  tooltipAlignment = 'end',
+  type = 'password',
+  warn = false,
+  warnText,
+  ...rest
+}, ref) {
   const [inputType, setInputType] = useState(type);
   const prefix = usePrefix();
   const normalizedProps = useNormalizedInputProps({

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

@@ -11,12 +11,11 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const TextInputSkeleton = _ref => {
-  let {
-    hideLabel,
-    className,
-    ...rest
-  } = _ref;
+const TextInputSkeleton = ({
+  hideLabel,
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--form-item`, className)