@carbon/react 1.99.0-rc.0 → 1.100.0-rc.0

package/lib/components/NumberInput/NumberInput.js

@@ -45,8 +45,41 @@ const getSeparators = locale => {
   const numberWithGroupAndDecimal = 1234567.89;
   const formatted = new Intl.NumberFormat(locale).format(numberWithGroupAndDecimal);
 
-  // Extract separators using regex
-  const match = formatted.match(/(\D+)\d{3}(\D+)\d{2}$/);
+  // Comprehensive Unicode digit pattern that includes all common numeral systems
+  // supported by Intl.NumberFormat across different locales
+  const digitPattern = '[' + '\\u0030-\\u0039' +
+  // Western
+  '\\u0660-\\u0669' +
+  // Eastern Arabic
+  '\\u0966-\\u096F' +
+  // Devanagari
+  '\\u09E6-\\u09EF' +
+  // Bengali
+  '\\uFF10-\\uFF19' +
+  // Fullwidth Japanese ０-９
+  '一二三四五六七八九〇零' +
+  // Kanji digits
+  ']';
+
+  // Non-digit pattern that excludes ALL digit types (not just ASCII 0-9)
+  const nonDigitPattern = '[^' + '\\u0030-\\u0039' +
+  // Western
+  '\\u0660-\\u0669' +
+  // Eastern Arabic
+  '\\u0966-\\u096F' +
+  // Devanagari
+  '\\u09E6-\\u09EF' +
+  // Bengali
+  '\\uFF10-\\uFF19' +
+  // Fullwidth Japanese ０-９
+  '一二三四五六七八九〇零' +
+  // Kanji digits
+  ']+';
+
+  // Extract separators using regex that handles all numeral systems
+  // Use nonDigitPattern instead of \D+ to correctly identify separators
+  const regex = new RegExp(`(${nonDigitPattern})${digitPattern}{3}(${nonDigitPattern})${digitPattern}{2}$`);
+  const match = formatted.match(regex);
   if (match) {
     const groupSeparator = match[1];
     const decimalSeparator = match[2];
@@ -61,11 +94,116 @@ const getSeparators = locale => {
     };
   }
 };
+
+// Normalizes all Unicode minus variants to ASCII hyphen-minus (-)
+const normalizeMinus = value => value.replace(/[\u2212\u2012\u2013\u2014\uFE63\uFF0D]/g, '-');
+const normalizeNumericInput = value => value
+// Remove bidi / direction control characters (Arabic keyboards)
+.replace(/[\u061C\u200E\u200F\u202A-\u202E\u2066-\u2069]/g, '')
+// Normalize Unicode minus variants to ASCII "-"
+.replace(/[\u2212\u2012\u2013\u2014\uFE63\uFF0D]/g, '-');
+/**
+ * Converts a string with any Unicode numeral system to a JavaScript number.
+ * Handles all numeral systems supported by Intl.NumberFormat.
+ *
+ * @param {string} input - The input string with numerals in any Unicode system
+ * @param {string} locale - The locale for parsing separators
+ * @returns {number} The parsed number, or NaN if invalid
+ */
+const parseNumberWithLocale = (input, locale) => {
+  // Handle empty, null, or undefined inputs
+  if (input === '' || input === undefined || input === null) {
+    return NaN;
+  }
+  input = normalizeNumericInput(input);
+  const {
+    groupSeparator,
+    decimalSeparator
+  } = getSeparators(locale);
+
+  // Kanji digit map
+  const kanjiMap = {
+    零: '0',
+    〇: '0',
+    一: '1',
+    二: '2',
+    三: '3',
+    四: '4',
+    五: '5',
+    六: '6',
+    七: '7',
+    八: '8',
+    九: '9'
+  };
+  const digitRanges = [{
+    start: 0x0030,
+    end: 0x0039,
+    base: 0x0030
+  }, {
+    start: 0x0660,
+    end: 0x0669,
+    base: 0x0660
+  }, {
+    start: 0x0966,
+    end: 0x096f,
+    base: 0x0966
+  }, {
+    start: 0x09e6,
+    end: 0x09ef,
+    base: 0x09e6
+  }, {
+    start: 0xff10,
+    end: 0xff19,
+    base: 0xff10
+  }];
+  let normalized = Array.from(input).map(char => {
+    // Preserve scientific notation characters
+    if (char === 'e' || char === 'E' || char === '+' || char === '-') {
+      return char;
+    }
+
+    // Check Kanji first
+    if (kanjiMap[char] !== undefined) {
+      return kanjiMap[char];
+    }
+    const code = char.charCodeAt(0);
+    for (const range of digitRanges) {
+      if (code >= range.start && code <= range.end) {
+        return String(code - range.start);
+      }
+    }
+    return char;
+  }).join('');
+
+  // Remove grouping separators
+  if (groupSeparator) {
+    if (groupSeparator?.trim() === '') {
+      normalized = normalized?.replace(/[\u00A0\u202F\s]/g, '');
+    } else {
+      if (decimalSeparator !== ',' && decimalSeparator !== '٬') {
+        normalized = normalized?.replace(/[,٬]/g, '');
+      }
+      if (groupSeparator !== ',' && groupSeparator !== '٬') {
+        const escaped = groupSeparator?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        normalized = normalized?.replace(new RegExp(escaped, 'g'), '');
+      }
+    }
+  }
+  normalized = normalized.replace(/٫/g, '.');
+  if (decimalSeparator && decimalSeparator !== '.' && decimalSeparator !== '٫') {
+    const escaped = decimalSeparator.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    normalized = normalized.replace(new RegExp(escaped, 'g'), '.');
+  }
+  normalized = normalizeMinus(normalized);
+  return Number(normalized);
+};
 const validateNumberSeparators = (input, locale) => {
-  // allow empty string
-  if (input === '' || Number.isNaN(input)) {
+  if (input === '') {
     return true;
   }
+
+  // Normalize bidi marks + minus signs FIRST
+  input = normalizeNumericInput(input);
   const {
     groupSeparator,
     decimalSeparator
@@ -74,35 +212,54 @@ const validateNumberSeparators = (input, locale) => {
     return !isNaN(Number(input));
   }
   const esc = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const digit = '[' + '\\u0030-\\u0039' + '\\u0660-\\u0669' + '\\u0966-\\u096F' + '\\u09E6-\\u09EF' + '\\uFF10-\\uFF19' + '一二三四五六七八九〇零' + ']';
+
+  // Group separator regex
   let group = '';
   if (groupSeparator) {
-    if (groupSeparator.trim() === '') {
-      group = '[\\u00A0\\u202F\\s]'; // handle NBSP, narrow NBSP, space
+    if (groupSeparator?.trim() === '') {
+      group = '[\\u00A0\\u202F\\s]';
+    } else if (groupSeparator === ',' || groupSeparator === '٬') {
+      group = '[,٬]';
     } else {
       group = esc(groupSeparator);
     }
   }
-  const decimal = esc(decimalSeparator);
 
-  // Regex for:
-  // - integers (with/without grouping)
-  // - optional decimal with 0+ digits after separator
-  const regex = new RegExp(`^-?\\d{1,3}(${group}\\d{3})*(${decimal}\\d*)?$|^-?\\d+(${decimal}\\d*)?$`);
-  if (!regex.test(input)) {
-    return false;
+  // Decimal separator regex
+  let decimal = esc(decimalSeparator);
+  if (decimalSeparator === '.' || decimalSeparator === '٫') {
+    decimal = '[.٫]';
   }
+  const sign = '[\\-\\u2212]?';
+  const scientific = `([eE][+-]?${digit}+)?`;
 
-  // Normalize
-  let normalized = input;
-  if (groupSeparator) {
-    if (groupSeparator.trim() === '') {
-      normalized = normalized?.replace(/[\u00A0\u202F\s]/g, '');
-    } else {
-      normalized = normalized?.split(groupSeparator).join('');
-    }
+  // Detect if grouping is used AT ALL
+  const usesGrouping = group && (groupSeparator?.trim() === '' ? /[\u00A0\u202F\s]/.test(input) : groupSeparator === ',' || groupSeparator === '٬' ? /[,٬]/.test(input) : groupSeparator ? input.includes(groupSeparator) : false);
+  const scientificMatch = input?.match(/^([^eE]+)([eE][+-]?.*)?$/);
+  const baseNumber = scientificMatch ? scientificMatch[1] : input;
+
+  // Split integer part from the base number - handle both decimal separator variants
+  let integerPart;
+  if (decimalSeparator === '.' || decimalSeparator === '٫') {
+    // Split by either . or ٫
+    integerPart = baseNumber?.split(/[.,]/)[0];
+  } else {
+    integerPart = baseNumber?.split(decimalSeparator)[0];
   }
-  normalized = normalized?.replace(decimalSeparator, '.');
-  return !isNaN(Number(normalized));
+
+  // STEP 1: strict integer validation
+  // When grouping is used, we need to handle two cases:
+  // 1. Numbers with 1-3 digits (no separator required): 1, 12, 123
+  // 2. Numbers with 4+ digits (separator required): 1,234 or 12,345 or 123,456
+  const integerRegex = usesGrouping ? new RegExp(`^${sign}(${digit}{1,3}|${digit}{1,3}(${group}${digit}{3})+)$`) : new RegExp(`^${sign}${digit}+$`);
+  if (!integerRegex.test(integerPart)) {
+    return false;
+  }
+
+  // STEP 2: full number validation
+  const fullRegex = new RegExp(`^${sign}${digit}+` + (usesGrouping ? `(${group}${digit}{3})*` : '') + `(${decimal}${digit}+)?${scientific}$`);
+  return fullRegex.test(input);
 };
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
@@ -294,8 +451,9 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     }
   };
   const outerElementClasses = cx(`${prefix}--form-item`, {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    [customClassName]: !!customClassName,
+    ...(customClassName ? {
+      [customClassName]: true
+    } : {}),
     [`${prefix}--number-input--fluid--invalid`]: isFluid && normalizedProps.invalid,
     [`${prefix}--number-input--fluid--focus`]: isFluid && isFocused,
     [`${prefix}--number-input--fluid--disabled`]: isFluid && disabled
@@ -766,23 +924,33 @@ function getInputValidity({
   validate,
   locale
 }) {
-  if (typeof validate === 'function') {
-    const result = validate(value, locale);
-    if (result === false) {
-      return false; // immediate invalid
-    }
-    // If true or undefined, continue to further validations
-  }
   if (invalid) {
     return false;
   }
-  if (value === '') {
-    return allowEmpty;
+
+  // Skip validation if value is empty and allowEmpty
+  if (value === '') return allowEmpty;
+
+  // Normalize the value
+  let numericValue;
+  if (typeof value === 'string') {
+    numericValue = parseNumberWithLocale(value, locale); // safe: handles Arabic, Kanji, etc.
+  } else {
+    numericValue = value;
   }
-  if (value > max || value < min) {
-    return false;
+
+  // Use custom validate ONLY for formatting, not numeric comparison
+  if (validate && typeof value === 'string') {
+    const isFormatValid = validate(value, locale);
+    if (isFormatValid === false) {
+      return false; // invalid format
+    }
   }
-  return true;
+
+  // Check min/max bounds
+  if (max !== undefined && numericValue > max) return false;
+  if (min !== undefined && numericValue < min) return false;
+  return true; // valid
 }
 
 /**
@@ -804,4 +972,5 @@ function disableWheel(e) {
 }
 
 exports.NumberInput = NumberInput;
+exports.parseNumberWithLocale = parseNumberWithLocale;
 exports.validateNumberSeparators = validateNumberSeparators;

package/lib/components/OverflowMenu/OverflowMenu.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -79,7 +79,6 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
     case 'top':
     case 'bottom':
       {
-        // TODO: Ensure `trigger` is there for `<OverflowMenu open>`
         const triggerWidth = !trigger ? 0 : trigger.offsetWidth;
         return {
           left: (!flip ? 1 : -1) * (menuWidth / 2 - triggerWidth / 2),

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

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

@@ -4,7 +4,7 @@
  * 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 React, { type ComponentType, type FunctionComponent } from 'react';
+import React, { type ElementType } from 'react';
 import PropTypes from 'prop-types';
 import { TYPES } from '../Tag/Tag';
 /**
@@ -32,7 +32,7 @@ interface PageHeaderBreadcrumbBarProps {
     /**
      * Provide an optional icon to render in front of the PageHeaderContent's title.
      */
-    renderIcon?: ComponentType | FunctionComponent;
+    renderIcon?: ElementType;
     /**
      * The PageHeaderBreadcrumbBar's content actions
      */
@@ -68,7 +68,7 @@ interface PageHeaderContentProps {
     /**
      * Provide an optional icon to render in front of the PageHeaderContent's title.
      */
-    renderIcon?: ComponentType | FunctionComponent;
+    renderIcon?: ElementType;
     /**
      * The PageHeaderContent's title
      */

package/lib/components/Popover/index.js

@@ -149,7 +149,9 @@ forwardRef) {
     refs,
     floatingStyles,
     placement,
-    middlewareData
+    middlewareData,
+    elements,
+    update
   } = react.useFloating(enableFloatingStyles ? {
     placement: align,
     // The floating element is positioned relative to its nearest
@@ -169,12 +171,18 @@ forwardRef) {
     }), react.arrow({
       element: caretRef,
       padding: 16
-    }), autoAlign && react.hide()],
-    whileElementsMounted: react.autoUpdate
+    }), autoAlign && react.hide()]
   } : {}
   // When autoAlign is turned off & the `enable-v12-dynamic-floating-styles` feature flag is not
   // enabled, floating-ui will not be used
   );
+  React.useEffect(() => {
+    if (!enableFloatingStyles) return;
+    if (open && elements.reference && elements.floating) {
+      const cleanup = react.autoUpdate(elements.reference, elements.floating, update);
+      return cleanup;
+    }
+  }, [enableFloatingStyles, open, elements, update]);
   const value = React.useMemo(() => {
     return {
       floating,
@@ -399,11 +407,13 @@ Popover.propTypes = {
    */
   open: PropTypes.bool.isRequired
 };
-function PopoverContentRenderFunction({
-  className,
-  children,
-  ...rest
-}, forwardRef) {
+const frFn = React.forwardRef;
+const PopoverContent = frFn((props, forwardRef) => {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
   const prefix = usePrefix.usePrefix();
   const {
     setFloating,
@@ -429,8 +439,7 @@ function PopoverContentRenderFunction({
     }),
     ref: caretRef
   }));
-}
-const PopoverContent = /*#__PURE__*/React.forwardRef(PopoverContentRenderFunction);
+});
 PopoverContent.displayName = 'PopoverContent';
 PopoverContent.propTypes = {
   /**

package/lib/components/Search/Search.d.ts

@@ -4,7 +4,7 @@
  * 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 React, { type ChangeEvent, type ComponentType, type FunctionComponent, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
+import React, { type ChangeEvent, type ElementType, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
 type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
 export interface SearchProps extends InputPropsBase {
     /**
@@ -61,7 +61,7 @@ export interface SearchProps extends InputPropsBase {
     /**
      * A component used to render an icon.
      */
-    renderIcon?: ComponentType | FunctionComponent;
+    renderIcon?: ElementType;
     /**
      * @deprecated Specify the role for the underlying `<input>`.
      * No longer needed since `<input type="search">` already provides the correct semantics.

package/lib/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/SkeletonIcon/SkeletonIcon.d.ts

@@ -1,9 +1,23 @@
-import React from 'react';
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * 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 PropTypes from 'prop-types';
 export interface SkeletonIconProps {
     /**
      * Specify an optional className to add.
      */
     className?: string;
 }
-declare const SkeletonIcon: React.FC<SkeletonIconProps>;
+declare const SkeletonIcon: {
+    ({ className, ...other }: SkeletonIconProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default SkeletonIcon;

package/lib/components/SkeletonText/SkeletonText.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Tag/Tag.d.ts

@@ -72,7 +72,7 @@ export interface TagBaseProps {
      */
     slug?: ReactNode;
     /**
-     * @deprecated The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `title` prop has been deprecated and will be removed in the next major version. Use `children` instead.
      */
     title?: string;
     /**

package/lib/components/Tag/Tag.js

@@ -156,6 +156,8 @@ const TagBase = /*#__PURE__*/React.forwardRef(({
   }, normalizedDecorator) : '');
 });
 const Tag = TagBase;
+
+// @ts-expect-error - `propTypes` isn't typed.
 Tag.propTypes = {
   /**
    * Provide an alternative tag or component to use instead of the default

package/lib/components/Text/Text.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Text/Text.js

@@ -13,7 +13,7 @@ var React = require('react');
 var TextDirectionContext = require('./TextDirectionContext.js');
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
-const TextBase = /*#__PURE__*/React.forwardRef(({
+const Text = /*#__PURE__*/React.forwardRef(({
   as,
   children,
   dir = 'auto',
@@ -55,7 +55,8 @@ const TextBase = /*#__PURE__*/React.forwardRef(({
     ref: ref
   }, rest, textProps), children));
 });
-const Text = TextBase;
+
+// @ts-expect-error - `propTypes` isn't typed.
 Text.propTypes = {
   /**
    * Provide a custom element type used to render the outermost node

package/lib/components/Text/TextDirection.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Text/TextDirection.js

@@ -25,9 +25,7 @@ const TextDirection = ({
   }, [dir]);
   React.useEffect(() => {
     savedCallback.current = getTextDirection;
-    // TODO: Is this `useEffect` supposed to have a dependency on
-    // `getTextDirection`?
-  });
+  }, [getTextDirection]);
   return /*#__PURE__*/React.createElement(TextDirectionContext.TextDirectionContext.Provider, {
     value: value
   }, children);

package/lib/components/Text/TextDirectionContext.d.ts

@@ -1,14 +1,14 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 { type MutableRefObject } from 'react';
+import { type RefObject } from 'react';
 export type TextDir = 'ltr' | 'rtl' | 'auto' | string;
 export type GetTextDirection = (text: string | string[] | undefined) => TextDir;
 export interface TextDirectionContextType {
     direction: TextDir;
-    getTextDirection: MutableRefObject<GetTextDirection | undefined>;
+    getTextDirection: RefObject<GetTextDirection | undefined>;
 }
 export declare const TextDirectionContext: import("react").Context<TextDirectionContextType>;

package/lib/components/TextInput/ControlledPasswordInput.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2025
+ * Copyright IBM Corp. 2023, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/TextInput/PasswordInput.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2025
+ * Copyright IBM Corp. 2023, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/TextInput/TextInput.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Toggle/Toggle.Skeleton.d.ts

@@ -1,14 +1,20 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 React from 'react';
+import PropTypes from 'prop-types';
 export interface ToggleSkeletonProps {
     'aria-label'?: string;
     className?: string;
 }
-declare const ToggleSkeleton: React.FC<ToggleSkeletonProps>;
+declare const ToggleSkeleton: {
+    ({ className, ...rest }: ToggleSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default ToggleSkeleton;
 export { ToggleSkeleton };

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Toggletip/index.js

@@ -188,7 +188,6 @@ Toggletip.propTypes = {
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-
 const ToggletipButton = /*#__PURE__*/React.forwardRef(function ToggletipButton({
   children,
   className: customClassName,
@@ -229,15 +228,18 @@ ToggletipButton.propTypes = {
   label: PropTypes.string
 };
 ToggletipButton.displayName = 'ToggletipButton';
+const frFn = React.forwardRef;
+
 /**
  * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-const ToggletipContent = /*#__PURE__*/React.forwardRef(function ToggletipContent({
-  children,
-  className: customClassName
-}, ref) {
+const ToggletipContent = frFn((props, ref) => {
+  const {
+    children,
+    className: customClassName
+  } = props;
   const toggletip = useToggletip();
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React.createElement(index.PopoverContent, _rollupPluginBabelHelpers.extends({