@carbon/react 1.84.0-rc.0 → 1.84.0

package/es/internal/useOverflowItems.js

@@ -0,0 +1,122 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useRef, useState, useMemo, useEffect } from 'react';
+import { useResizeObserver } from './useResizeObserver.js';
+import { usePreviousValue } from './usePreviousValue.js';
+
+/**
+ * Manages overflow items in a container by automatically hiding items that don't fit.
+ * @param items - Array of items to manage for overflow, each must have an `id` property.
+ * @param containerRef - React ref to the container element that holds the items.
+ * @param offsetRef - Optional ref to an offset element (like a "more" button) whose width is reserved when calculating available space.
+ * @param maxItems - Optional maximum number of visible items. If undefined, only container space constrains visibility.
+ * @param onChange - Optional callback called when hidden items change. Receives array of currently hidden items.
+ * @returns Object with `visibleItems` (items to display), `hiddenItems` (items that don't fit), and `itemRefHandler` (function to attach refs to items for width measurement).
+ */
+
+const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) => {
+  const itemsRef = useRef(null);
+  const [maxWidth, setMaxWidth] = useState(0);
+  if (!items || !Array.isArray(items)) {
+    return {
+      visibleItems: [],
+      hiddenItems: [],
+      itemRefHandler: () => {}
+    };
+  }
+  const handleResize = () => {
+    if (containerRef.current) {
+      const offset = offsetRef?.current?.offsetWidth || 0;
+      const newMax = containerRef.current.offsetWidth - offset;
+      setMaxWidth(newMax);
+    }
+  };
+  useResizeObserver({
+    ref: containerRef,
+    onResize: handleResize
+  });
+  const getMap = () => {
+    if (!itemsRef.current) {
+      itemsRef.current = new Map();
+    }
+    return itemsRef.current;
+  };
+  const itemRefHandler = (id, node) => {
+    const map = getMap();
+    if (node) {
+      const style = getComputedStyle?.(node);
+      const totalWidth = node.offsetWidth + parseInt(style.marginLeft) + parseInt(style.marginRight);
+      map.set(id, totalWidth);
+    }
+    return () => {
+      map.delete(id);
+    };
+  };
+  const getVisibleItems = () => {
+    if (!items || Array.isArray(items) === false) {
+      return [];
+    }
+    if (!containerRef) {
+      return items;
+    }
+    const map = getMap();
+    let maxReached = false;
+    let accumulatedWidth = 0;
+    const visibleItems = items.slice(0, maxItems).reduce((prev, cur) => {
+      if (maxReached) {
+        return prev;
+      }
+      const itemWidth = map.get(cur.id) || 0;
+      const willFit = accumulatedWidth + itemWidth <= maxWidth;
+      if (willFit) {
+        accumulatedWidth += itemWidth;
+        prev.push(cur);
+      } else {
+        maxReached = true;
+      }
+      return prev;
+    }, []);
+    return visibleItems;
+  };
+
+  // Memoize visible items calculation to avoid recalculating on every render
+  const visibleItems = useMemo(() => {
+    if (!Array.isArray(items)) {
+      return [];
+    }
+    return getVisibleItems();
+  }, [items, maxWidth, maxItems]);
+
+  // Memoize hidden items calculation
+  const hiddenItems = useMemo(() => {
+    if (!Array.isArray(items)) {
+      return [];
+    }
+    return items.slice(visibleItems.length);
+  }, [items, visibleItems]);
+
+  // Use previous value to compare and only call onChange when needed
+  const previousHiddenItems = usePreviousValue(hiddenItems);
+
+  // Only call onChange if hidden items actually changed
+  useEffect(() => {
+    if (previousHiddenItems && onChange) {
+      const hasChanged = hiddenItems.length !== previousHiddenItems.length || hiddenItems.some((item, index) => item !== previousHiddenItems[index]);
+      if (hasChanged) {
+        onChange(hiddenItems);
+      }
+    }
+  }, [hiddenItems, previousHiddenItems, onChange]);
+  return {
+    visibleItems,
+    itemRefHandler,
+    hiddenItems
+  };
+};
+
+export { useOverflowItems as default };

package/lib/components/ComposedModal/ComposedModal.js

@@ -186,7 +186,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     target: oldActiveNode,
     relatedTarget: currentActiveNode
   }) {
-    if (open && currentActiveNode && oldActiveNode && innerModal.current) {
+    if (!enableDialogElement && !focusTrapWithoutSentinels && open && currentActiveNode && oldActiveNode && innerModal.current) {
       const {
         current: bodyNode
       } = innerModal;
@@ -205,6 +205,23 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
         selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean)
       });
     }
+
+    // Adjust scroll if needed so that element with focus is not obscured by gradient
+    const modalContent = document.querySelector(`.${prefix}--modal-content`);
+    if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) {
+      return;
+    }
+    const lastContent = modalContent.children[modalContent.children.length - 1];
+    const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
+    for (let elem of modalContent.children) {
+      if (elem.contains(currentActiveNode)) {
+        const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
+        if (spaceBelow < gradientSpacing) {
+          modalContent.scrollTop = modalContent.scrollTop + (gradientSpacing - spaceBelow);
+        }
+        break;
+      }
+    }
   }
   function closeModal(evt) {
     if (!onClose || onClose(evt) !== false) {
@@ -319,7 +336,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,
-    onBlur: !enableDialogElement && !focusTrapWithoutSentinels ? handleBlur : () => {},
+    onBlur: handleBlur,
     onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
     onMouseDown: events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,

package/lib/components/Modal/Modal.js

@@ -139,7 +139,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
     target: oldActiveNode,
     relatedTarget: currentActiveNode
   }) {
-    if (open && oldActiveNode instanceof HTMLElement && currentActiveNode instanceof HTMLElement) {
+    if (!enableDialogElement && open && oldActiveNode instanceof HTMLElement && currentActiveNode instanceof HTMLElement) {
       const {
         current: bodyNode
       } = innerModal;
@@ -158,6 +158,23 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
         selectorsFloatingMenus
       });
     }
+
+    // Adjust scroll if needed so that element with focus is not obscured by gradient
+    const modalContent = document.querySelector(`.${prefix}--modal-content`);
+    if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) {
+      return;
+    }
+    const lastContent = modalContent.children[modalContent.children.length - 1];
+    const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
+    for (let elem of modalContent.children) {
+      if (elem.contains(currentActiveNode)) {
+        const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
+        if (spaceBelow < gradientSpacing) {
+          modalContent.scrollTop = modalContent.scrollTop + (gradientSpacing - spaceBelow);
+        }
+        break;
+      }
+    }
   }
   const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
   const modalClasses = cx__default["default"](`${prefix}--modal`, {
@@ -414,7 +431,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
     level: 0,
     onKeyDown: handleKeyDown,
     onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
-    onBlur: !enableDialogElement ? handleBlur : () => {},
+    onBlur: handleBlur,
     className: modalClasses,
     role: "presentation",
     ref: ref

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -260,6 +260,27 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       onMenuChange?.(isOpen);
     }
   }, [isOpen, onMenuChange, open]);
+  React.useEffect(() => {
+    const handleClickOutside = event => {
+      const target = event.target;
+      const wrapper = document.getElementById(id)?.closest(`.${prefix}--multi-select__wrapper`);
+
+      // If click is outside our component and menu is open or input is focused
+      if (wrapper && !wrapper.contains(target)) {
+        if (isOpen || inputFocused) {
+          setIsOpen(false);
+          setInputFocused(false);
+          setInputValue('');
+        }
+      }
+    };
+    if (inputFocused || isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, inputFocused]);
   const {
     getToggleButtonProps,
     getLabelProps,

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -154,14 +154,14 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
       setHasMountedTrigger(true);
     }
   }, []);
-
-  // Call `onClose` when menu closes.
   React.useEffect(() => {
-    if (!open && prevOpenState.current) {
+    if (open && !prevOpenState.current) {
+      onOpen();
+    } else if (!open && prevOpenState.current) {
       onClose();
     }
     prevOpenState.current = open;
-  }, [open, onClose]);
+  }, [open, onClose, onOpen]);
   useOutsideClick.useOutsideClick(wrapperRef, ({
     target
   }) => {
@@ -270,7 +270,6 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
         }
       }
     }, !hasFocusin);
-    onOpen();
   };
   const getTarget = () => {
     const triggerEl = triggerRef.current;

package/lib/components/PageHeader/PageHeader.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Tabs as BaseTabs } from '../Tabs/Tabs';
+import { TYPES } from '../Tag/Tag';
 /**
  * ----------
  * PageHeader
@@ -199,16 +199,18 @@ declare const PageHeaderHeroImage: {
  * PageHeaderTabBar
  * ----------------
  */
+interface TagItem {
+    type: keyof typeof TYPES;
+    text: string;
+    size?: 'sm' | 'md' | 'lg';
+    id: string;
+}
 interface PageHeaderTabBarProps {
     children?: React.ReactNode;
     className?: string;
+    tags?: TagItem[];
 }
 declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-interface PageHeaderTabsProps extends React.ComponentProps<typeof BaseTabs> {
-    children?: React.ReactNode;
-    className?: string;
-}
-declare const PageHeaderTabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * -------
  * Exports
@@ -272,6 +274,5 @@ declare const HeroImage: {
     };
 };
 declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-declare const Tabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, Tabs, };
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderTabsProps, };
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, };
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, };

package/lib/components/PageHeader/PageHeader.js

@@ -24,7 +24,14 @@ var DefinitionTooltip = require('../Tooltip/DefinitionTooltip.js');
 require('../Tooltip/Tooltip.js');
 var AspectRatio = require('../AspectRatio/AspectRatio.js');
 var utilities = require('@carbon/utilities');
-var Tabs$1 = require('../Tabs/Tabs.js');
+var Tag = require('../Tag/Tag.js');
+require('../Tag/DismissibleTag.js');
+var OperationalTag = require('../Tag/OperationalTag.js');
+require('../Tag/SelectableTag.js');
+require('../Tag/Tag.Skeleton.js');
+var useOverflowItems = require('../../internal/useOverflowItems.js');
+var index$1 = require('../Popover/index.js');
+var useId = require('../../internal/useId.js');
 require('../Grid/FlexGrid.js');
 var Grid = require('../Grid/Grid.js');
 require('../Grid/Row.js');
@@ -365,46 +372,101 @@ PageHeaderHeroImage.propTypes = {
 const PageHeaderTabBar = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabBar({
   className,
   children,
+  tags = [],
   ...other
 }, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--page-header__tab-bar`]: true
   }, className);
+  // Early return if no tags are provided
+  if (!tags.length) {
+    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+      className: classNames,
+      ref: ref
+    }, other), /*#__PURE__*/React__default["default"].createElement(Grid.Grid, null, /*#__PURE__*/React__default["default"].createElement(Column["default"], {
+      lg: 16,
+      md: 8,
+      sm: 4
+    }, children)));
+  }
+  const [openPopover, setOpenPopover] = React.useState(false);
+  const tagSize = tags[0]?.size || 'md';
+  const instanceId = useId.useId('PageHeaderTabBar');
+  const tagsWithIds = React.useMemo(() => {
+    return tags.map((tag, index) => ({
+      ...tag,
+      id: tag.id || `tag-${index}-${instanceId}`
+    }));
+  }, [tags]);
+  const tagsContainerRef = React.useRef(null);
+  const offsetRef = React.useRef(null);
+  // To close popover when window resizes
+  React.useEffect(() => {
+    const handleResize = () => {
+      // Close the popover when window resizes to prevent unwanted opens
+      setOpenPopover(false);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  // overflow items hook
+  const {
+    visibleItems = [],
+    hiddenItems = [],
+    itemRefHandler = () => {}
+  } = useOverflowItems["default"](tagsWithIds, tagsContainerRef, offsetRef) || {
+    visibleItems: [],
+    hiddenItems: [],
+    itemRefHandler: () => {}
+  };
+  const handleOverflowClick = React.useCallback(event => {
+    event.stopPropagation();
+    setOpenPopover(prev => !prev);
+  }, []);
+
+  // Function to render tags
+  const renderTags = () => /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__tags`,
+    ref: tagsContainerRef
+  }, visibleItems.map(tag => /*#__PURE__*/React__default["default"].createElement(Tag["default"], {
+    key: tag.id,
+    ref: node => itemRefHandler(tag.id, node),
+    type: tag.type,
+    size: tag.size,
+    className: `${prefix}--page-header__tag-item`
+  }, tag.text)), hiddenItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index$1.Popover, {
+    open: openPopover,
+    onRequestClose: () => setOpenPopover(false)
+  }, /*#__PURE__*/React__default["default"].createElement(OperationalTag["default"], {
+    onClick: handleOverflowClick,
+    "aria-expanded": openPopover,
+    text: `+${hiddenItems.length}`,
+    size: tagSize
+  }), /*#__PURE__*/React__default["default"].createElement(index$1.PopoverContent, {
+    className: "tag-popover-content"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__tags-popover-list`
+  }, hiddenItems.map(tag => /*#__PURE__*/React__default["default"].createElement(Tag["default"], {
+    key: tag.id,
+    type: tag.type,
+    size: tag.size
+  }, tag.text))))));
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classNames,
     ref: ref
-  }, other), children);
-});
-PageHeaderTabBar.displayName = 'PageHeaderTabBar';
-const PageHeaderTabs = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabs({
-  className,
-  children,
-  ...other
-}, ref) {
-  const prefix = usePrefix.usePrefix();
-  const childrenArray = React__default["default"].Children.toArray(children);
-  let tabListElement = null;
-  const otherChildren = [];
-
-  // extract the TabList component so we can wrap a needed div around for
-  // layout purposes
-  childrenArray.forEach(child => {
-    if (child?.type?.displayName === 'TabList' || child?.type?.name === 'TabList') {
-      tabListElement = child;
-    } else {
-      otherChildren.push(child);
-    }
-  });
-  return /*#__PURE__*/React__default["default"].createElement(Tabs$1.Tabs, other, tabListElement && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--page-header__tablist-wrapper`
-  }, /*#__PURE__*/React__default["default"].createElement(Grid.Grid, null, /*#__PURE__*/React__default["default"].createElement(Column["default"], {
+  }, other), /*#__PURE__*/React__default["default"].createElement(Grid.Grid, null, /*#__PURE__*/React__default["default"].createElement(Column["default"], {
     lg: 16,
     md: 8,
     sm: 4
-  }, tabListElement))), otherChildren);
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__tab-bar--tablist`
+  }, children, tags.length > 0 && renderTags()))));
 });
-PageHeaderTabs.displayName = 'PageHeaderTabs';
+PageHeaderTabBar.displayName = 'PageHeaderTabBar';
 
 /**
  * -------
@@ -425,8 +487,6 @@ const HeroImage = PageHeaderHeroImage;
 HeroImage.displayName = 'PageHeaderHeroImage';
 const TabBar = PageHeaderTabBar;
 TabBar.displayName = 'PageHeaderTabBar';
-const Tabs = PageHeaderTabs;
-Tabs.displayName = 'PageHeader.Tabs';
 
 exports.BreadcrumbBar = BreadcrumbBar;
 exports.Content = Content;
@@ -440,7 +500,5 @@ exports.PageHeaderContentPageActions = PageHeaderContentPageActions;
 exports.PageHeaderContentText = PageHeaderContentText;
 exports.PageHeaderHeroImage = PageHeaderHeroImage;
 exports.PageHeaderTabBar = PageHeaderTabBar;
-exports.PageHeaderTabs = PageHeaderTabs;
 exports.Root = Root;
 exports.TabBar = TabBar;
-exports.Tabs = Tabs;

package/lib/components/PageHeader/index.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderTabs, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, Tabs, } from './PageHeader';
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderTabsProps, } from './PageHeader';
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, } from './PageHeader';
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, } from './PageHeader';

package/lib/components/PageHeader/index.js

@@ -25,7 +25,5 @@ exports.PageHeaderContentPageActions = PageHeader.PageHeaderContentPageActions;
 exports.PageHeaderContentText = PageHeader.PageHeaderContentText;
 exports.PageHeaderHeroImage = PageHeader.PageHeaderHeroImage;
 exports.PageHeaderTabBar = PageHeader.PageHeaderTabBar;
-exports.PageHeaderTabs = PageHeader.PageHeaderTabs;
 exports.Root = PageHeader.Root;
 exports.TabBar = PageHeader.TabBar;
-exports.Tabs = PageHeader.Tabs;

package/lib/components/Search/Search.js

@@ -144,7 +144,6 @@ const Search = /*#__PURE__*/React__default["default"].forwardRef(function Search
     "aria-label": placeholder,
     className: searchClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "aria-label": onExpand ? 'button' : undefined,
     "aria-labelledby": onExpand ? searchId : undefined,
     role: onExpand ? 'button' : undefined,
     className: `${prefix}--search-magnifier`,

package/lib/components/Slider/Slider.js

@@ -768,6 +768,9 @@ class Slider extends React.PureComponent {
           valueUpper,
           leftUpper
         });
+        if (this.filledTrackRef.current) {
+          this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(${100 - this.state.leftUpper}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})` : `translate(${this.state.left}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})`;
+        }
       } else {
         const {
           value,
@@ -781,6 +784,9 @@ class Slider extends React.PureComponent {
           value,
           left
         });
+        if (this.filledTrackRef.current) {
+          this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(100%, -50%) scaleX(-${this.state.left / 100})` : `translate(0%, -50%) scaleX(${this.state.left / 100})`;
+        }
       }
     }
   }

package/lib/components/TextArea/TextArea.js

@@ -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(() => {

package/lib/components/TileGroup/TileGroup.d.ts

@@ -45,8 +45,9 @@ export interface TileGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>
      */
     required?: boolean;
 }
-declare const TileGroup: {
-    (props: any): import("react/jsx-runtime").JSX.Element;
+export declare const TileGroup: {
+    ({ children, className, defaultSelected, disabled, legend, name, onChange, valueSelected, required, }: TileGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
     propTypes: {
         /**
          * Provide a collection of <RadioTile> components to render in the group
@@ -86,6 +87,5 @@ declare const TileGroup: {
          */
         valueSelected: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
     };
-    displayName: string;
 };
-export default TileGroup;
+export {};