@moneyforward/mfui-components 3.23.0 → 3.24.0

package/dist/src/Tooltip/Tooltip.d.ts

@@ -42,5 +42,5 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     disabled?: boolean;
     hideFromScreenReader?: boolean;
     maxWidth?: import("react").CSSProperties["maxWidth"];
-    contentProps?: Pick<import("react").ComponentPropsWithoutRef<"div">, "className">;
+    contentProps?: Pick<import("react").ComponentPropsWithoutRef<"div">, "className" | "id">;
 } & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "disabled" | "content"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/Tooltip/Tooltip.js

@@ -48,7 +48,10 @@ export const Tooltip = forwardRef(({ children, open, onOpenStateChanged, content
     const rootRef = useRef(null);
     const arrowRef = useRef(null);
     const tooltipRef = useRef(null);
-    const tooltipId = useId();
+    const generatedId = useId();
+    // Allow consumers to control the content id so an external element (e.g. a form field)
+    // can reference the single accessible copy of the content via its own aria-describedby.
+    const tooltipId = contentProps?.id ?? generatedId;
     // Use automatic target resolution matching Portal.tsx pattern
     // Resolution order: explicit prop → parent context → document.body fallback
     const targetElement = useAutomaticTargetDomNode(targetDOMNode, rootRef.current);

package/dist/src/Tooltip/Tooltip.types.d.ts

@@ -84,7 +84,8 @@ export type TooltipProps = {
      * will have `aria-hidden="true"`.
      *
      * Use this when the tooltip content is redundant with the trigger's accessible name
-     * (e.g., showing the full text of a truncated label), to avoid double announcement.
+     * (e.g., showing the full text of a truncated label, as in the `Breadcrumbs` component),
+     * to avoid double announcement.
      *
      * @default false
      */
@@ -103,6 +104,11 @@ export type TooltipProps = {
      *
      * @property className - The class name for the tooltip content element (not the root wrapper).
      *
+     * @property id - The id of the tooltip content element. When provided, it overrides the
+     * auto-generated id used internally. Provide this when an external element (e.g. a form
+     * field) needs to reference the tooltip content via its own `aria-describedby`, so the
+     * single accessible copy of the content can be shared instead of duplicated.
+     *
      * @example
      * ```tsx
      * // Applies custom styling to the tooltip content
@@ -121,8 +127,16 @@ export type TooltipProps = {
      * >
      *   <Button>Hover me</Button>
      * </Tooltip>
+     *
+     * // Share the tooltip content with an external element via a known id.
+     * // Useful for a non-interactive help icon describing a separate form field.
+     * const helpId = useId();
+     * <Tooltip content="Help text" contentProps={{ id: helpId }} trigger="hover">
+     *   <Info aria-hidden />
+     * </Tooltip>
+     * <TextBox aria-describedby={helpId} />
      * ```
      */
-    contentProps?: Pick<ComponentPropsWithoutRef<'div'>, 'className'>;
+    contentProps?: Pick<ComponentPropsWithoutRef<'div'>, 'className' | 'id'>;
 } & Omit<ComponentPropsWithoutRef<'span'>, 'content' | 'disabled'>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.23.0",
+  "version": "3.24.0",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",