@carbon/react 1.83.0 → 1.84.0

package/lib/components/Tabs/Tabs.js

@@ -78,15 +78,14 @@ const TabPanelContext = /*#__PURE__*/React__default["default"].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.useId('ccs');
   if (dismissable && !onTabCloseRequest) {
     console.error('dismissable property specified without also providing an onTabCloseRequest property.');
@@ -151,15 +150,14 @@ Tabs.propTypes = {
    */
   selectedIndex: PropTypes__default["default"].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.useControllableState({
     value: controlledSelectedIndex,
     defaultValue: defaultSelectedIndex,
@@ -170,12 +168,9 @@ function TabsVertical(_ref2) {
   const props = {
     ...rest,
     selectedIndex,
-    onChange: _ref3 => {
-      let {
-        selectedIndex
-      } = _ref3;
-      return setSelectedIndex(selectedIndex);
-    }
+    onChange: ({
+      selectedIndex
+    }) => setSelectedIndex(selectedIndex)
   };
   const isSm = useMatchMedia.useMatchMedia(smMediaQuery);
   if (!isSm) {
@@ -260,22 +255,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,
@@ -351,10 +345,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;
     }
@@ -465,10 +458,9 @@ function TabList(_ref4) {
     scrollTabIntoView(tab);
   }, [selectedIndex, isScrollable, children]);
   usePressable.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));
       }
@@ -478,10 +470,9 @@ function TabList(_ref4) {
     }
   });
   usePressable.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));
       }
@@ -591,15 +582,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,
@@ -628,10 +618,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;
     }
@@ -790,18 +779,17 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
  * Tab
  */
 
-const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
-  let {
-    as = 'button',
-    children,
-    className: customClassName,
-    disabled,
-    onClick,
-    onKeyDown,
-    secondaryLabel,
-    renderIcon: Icon,
-    ...rest
-  } = _ref10;
+const Tab = /*#__PURE__*/React.forwardRef(function Tab({
+  as = 'button',
+  children,
+  className: customClassName,
+  disabled,
+  onClick,
+  onKeyDown,
+  secondaryLabel,
+  renderIcon: Icon,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix.usePrefix();
   const {
     selectedIndex,
@@ -1044,17 +1032,16 @@ Tab.propTypes = {
  */
 
 const IconTabContext = /*#__PURE__*/React.createContext(false);
-const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab(_ref11, ref) {
-  let {
-    badgeIndicator,
-    children,
-    className: customClassName,
-    defaultOpen = false,
-    enterDelayMs,
-    leaveDelayMs,
-    label,
-    ...rest
-  } = _ref11;
+const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab({
+  badgeIndicator,
+  children,
+  className: customClassName,
+  defaultOpen = false,
+  enterDelayMs,
+  leaveDelayMs,
+  label,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const value = React.useMemo(() => ({
     badgeIndicator
@@ -1116,12 +1103,11 @@ IconTab.propTypes = {
  * TabPanel
  */
 
-const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPanel(_ref12, forwardRef) {
-  let {
-    children,
-    className: customClassName,
-    ...rest
-  } = _ref12;
+const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPanel({
+  children,
+  className: customClassName,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix.usePrefix();
   const panel = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, panel]);
@@ -1196,10 +1182,9 @@ TabPanel.propTypes = {
  * TabPanels
  */
 
-function TabPanels(_ref13) {
-  let {
-    children
-  } = _ref13;
+function TabPanels({
+  children
+}) {
   const prefix = usePrefix.usePrefix();
   const refs = React.useRef([]);
   const hiddenStates = React.useRef([]);

package/lib/components/Tabs/usePressable.js

@@ -24,14 +24,13 @@ var React = require('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 = React.useRef(onPress);
   const savedOnPressIn = React.useRef(onPressIn);
   const savedOnPressOut = React.useRef(onPressOut);

package/lib/components/Tag/DismissibleTag.js

@@ -32,23 +32,22 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Close;
-const DismissibleTag = /*#__PURE__*/React.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__*/React.forwardRef(({
+  className,
+  decorator,
+  disabled,
+  id,
+  renderIcon,
+  title = 'Dismiss',
+  onClose,
+  slug,
+  size,
+  text,
+  tagTitle,
+  type,
+  dismissTooltipLabel = 'Dismiss tag',
+  ...other
+}, forwardRef) => {
   const prefix = usePrefix.usePrefix();
   const tagLabelRef = React.useRef(null);
   const tagId = id || `tag-${useId.useId()}`;

package/lib/components/Tag/OperationalTag.js

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

package/lib/components/Tag/SelectableTag.js

@@ -30,20 +30,19 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const SelectableTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
-  let {
-    className,
-    disabled,
-    id,
-    renderIcon,
-    onChange,
-    onClick,
-    selected,
-    size,
-    text,
-    defaultSelected = false,
-    ...other
-  } = _ref;
+const SelectableTag = /*#__PURE__*/React.forwardRef(({
+  className,
+  disabled,
+  id,
+  renderIcon,
+  onChange,
+  onClick,
+  selected,
+  size,
+  text,
+  defaultSelected = false,
+  ...other
+}, forwardRef) => {
   const prefix = usePrefix.usePrefix();
   const tagRef = React.useRef(null);
   const tagId = id || `tag-${useId.useId()}`;

package/lib/components/Tag/Tag.Skeleton.js

@@ -21,12 +21,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function TagSkeleton(_ref) {
-  let {
-    className,
-    size,
-    ...rest
-  } = _ref;
+function TagSkeleton({
+  className,
+  size,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const tagClasses = cx__default["default"](`${prefix}--tag`, `${prefix}--skeleton`, className, {
     [`${prefix}--tag--${size}`]: size,

package/lib/components/Tag/Tag.js

@@ -50,26 +50,25 @@ const SIZES = {
   md: 'md',
   lg: 'lg'
 };
-const TagBase = /*#__PURE__*/React__default["default"].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__default["default"].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.usePrefix();
   const tagRef = React.useRef(null);
   if (filter) {

package/lib/components/Text/Text.js

@@ -20,13 +20,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TextBase = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    as,
-    children,
-    dir = 'auto',
-    ...rest
-  } = _ref;
+const TextBase = /*#__PURE__*/React__default["default"].forwardRef(({
+  as,
+  children,
+  dir = 'auto',
+  ...rest
+}, ref) => {
   const context = React.useContext(TextDirectionContext.TextDirectionContext);
   const textProps = {};
   const BaseComponent = as ?? 'span';

package/lib/components/Text/TextDirection.js

@@ -19,12 +19,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TextDirection = _ref => {
-  let {
-    children,
-    dir = 'auto',
-    getTextDirection
-  } = _ref;
+const TextDirection = ({
+  children,
+  dir = 'auto',
+  getTextDirection
+}) => {
   const savedCallback = React.useRef(getTextDirection);
   const value = React.useMemo(() => {
     return {

package/lib/components/TextArea/TextArea.js

@@ -18,7 +18,7 @@ var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var useAnnouncer = require('../../internal/useAnnouncer.js');
+var getAnnouncement = require('../../internal/getAnnouncement.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var useId = require('../../internal/useId.js');
@@ -50,7 +50,7 @@ const TextArea = frFn((props, forwardRef) => {
     light,
     placeholder = '',
     enableCounter = false,
-    maxCount = undefined,
+    maxCount,
     counterMode = 'character',
     warn = false,
     warnText = '',
@@ -75,7 +75,7 @@ const TextArea = frFn((props, forwardRef) => {
     if (counterMode === 'character') {
       return strValue.length;
     } else {
-      return strValue.match(/\w+/g)?.length || 0;
+      return strValue.match(/\p{L}+/gu)?.length || 0;
     }
   }
   const [textCount, setTextCount] = React.useState(getInitialTextCount());
@@ -107,8 +107,8 @@ const TextArea = frFn((props, forwardRef) => {
     onPaste: evt => {
       if (!disabled) {
         if (counterMode === 'word' && enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
-          const existingWords = textareaRef.current.value.match(/\w+/g) || [];
-          const pastedWords = evt.clipboardData.getData('Text').match(/\w+/g) || [];
+          const existingWords = textareaRef.current.value.match(/\p{L}+/gu) || [];
+          const pastedWords = evt.clipboardData.getData('Text').match(/\p{L}+/gu) || [];
           const totalWords = existingWords.length + pastedWords.length;
           if (totalWords > maxCount) {
             evt.preventDefault();
@@ -137,7 +137,7 @@ const TextArea = frFn((props, forwardRef) => {
             return;
           }
           if (enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
-            const matchedWords = evt.target?.value?.match(/\w+/g);
+            const matchedWords = evt.target?.value?.match(/\p{L}+/gu);
             if (matchedWords && matchedWords.length <= maxCount) {
               textareaRef.current.removeAttribute('maxLength');
               setTimeout(() => {
@@ -230,7 +230,7 @@ const TextArea = frFn((props, forwardRef) => {
   }
   const announcerRef = React.useRef(null);
   const [prevAnnouncement, setPrevAnnouncement] = React.useState('');
-  const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount, counterMode === 'word' ? 'words' : undefined);
+  const ariaAnnouncement = getAnnouncement.getAnnouncement(textCount, maxCount, counterMode === 'word' ? 'word' : undefined, counterMode === 'word' ? 'words' : undefined);
   React.useEffect(() => {
     if (ariaAnnouncement && ariaAnnouncement !== prevAnnouncement) {
       const announcer = announcerRef.current;

package/lib/components/TextInput/ControlledPasswordInput.js

@@ -26,31 +26,30 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-const ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function ControlledPasswordInput(_ref, ref) {
-  let {
-    labelText,
-    className,
-    id,
-    placeholder,
-    onChange = noopFn.noopFn,
-    onClick = noopFn.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__default["default"].forwardRef(function ControlledPasswordInput({
+  labelText,
+  className,
+  id,
+  placeholder,
+  onChange = noopFn.noopFn,
+  onClick = noopFn.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.usePrefix();
   const controlledPasswordInstanceId = useId.useId();
   const errorId = id + '-error-msg';