@moneyforward/mfui-components 3.29.1 → 3.31.1

package/dist/src/Sidebar/SidebarMenuHeading/SidebarMenuHeading.js

@@ -0,0 +1,113 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Copy, Current } from '@moneyforward/mfui-icons-react';
+import { cx } from '../../../styled-system/css';
+import { sidebarMenuHeadingSlotRecipe } from '../../../styled-system/recipes';
+import { DropdownMenu } from '../../DropdownMenu';
+import { Tooltip } from '../../Tooltip';
+import { CLOSE_DELAY } from '../../Tooltip/Tooltip.constants';
+import { Typography } from '../../Typography';
+// How long the "copied" feedback stays while the user remains on the row.
+const COPIED_FEEDBACK_DURATION_MS = 5000;
+// Copy-to-clipboard feedback for the identification-number row: `copied` drives the tooltip text,
+// the icon swap, and the live region; the handlers are spread onto the `DropdownMenu.Item`.
+function useCopyFeedback(text) {
+    const [copied, setCopied] = useState(false);
+    const timerRef = useRef(undefined);
+    useEffect(() => () => {
+        window.clearTimeout(timerRef.current);
+    }, []);
+    // On blur (keyboard focus moved on), dismiss immediately so the tooltip never lingers next to a
+    // newly focused item; the copy result is still announced by the `role="status"` live region.
+    const onBlur = () => {
+        window.clearTimeout(timerRef.current);
+        setCopied(false);
+    };
+    // On mouse leave, dismiss after the same delay as the Tooltip's own close behavior.
+    const onMouseLeave = () => {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = window.setTimeout(() => {
+            setCopied(false);
+        }, CLOSE_DELAY);
+    };
+    // Copy the text, keep the menu open, and show the "copied" feedback (tooltip + icon) while the
+    // user stays on the row. The feedback only appears once the clipboard write succeeds; on failure
+    // the row keeps its copy label so the user can retry.
+    const onClick = (event) => {
+        event.preventDefault(); // keep the menu open after copying
+        navigator.clipboard
+            .writeText(text ?? '')
+            .then(() => {
+            setCopied(true);
+            window.clearTimeout(timerRef.current);
+            timerRef.current = window.setTimeout(() => {
+                setCopied(false);
+            }, COPIED_FEEDBACK_DURATION_MS);
+        })
+            .catch(() => {
+            // Swallow the rejection (insecure context, missing clipboard-write permission, etc.) so it
+            // does not surface as an unhandled promise rejection.
+        });
+    };
+    return { copied, onClick, onBlur, onMouseLeave };
+}
+function SidebarMenuHeading({ name, identificationNumber, copy }) {
+    const classes = sidebarMenuHeadingSlotRecipe();
+    const { copied, ...copyHandlers } = useCopyFeedback(copy?.text);
+    const copiedLabel = copy?.copiedLabel ?? 'コピーしました';
+    const numberRow = (_jsxs(DropdownMenu.Item, { className: cx(classes.numberRow, 'mfui-SidebarMenuHeading__numberRow'), ...(copy ? copyHandlers : {}), children: [_jsx(Typography, { className: cx(classes.numberText, 'mfui-SidebarMenuHeading__numberText'), children: identificationNumber }), copy ? (copied ? (_jsx(Current, { "aria-hidden": true, className: cx(classes.numberIcon, 'mfui-SidebarMenuHeading__numberIcon') })) : (_jsx(Copy, { "aria-hidden": true, className: cx(classes.numberIcon, 'mfui-SidebarMenuHeading__numberIcon') }))) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DropdownMenu.Heading, { children: name }), copy ? (_jsxs(_Fragment, { children: [_jsx(Tooltip, { content: copied ? copiedLabel : copy.label, open: copied || undefined, placement: "right", targetDOMNode: typeof document === 'undefined' ? undefined : document.body, className: cx(classes.tooltip, 'mfui-SidebarMenuHeading__tooltip'), children: numberRow }), _jsx("span", { role: "status", className: cx(classes.status, 'mfui-SidebarMenuHeading__status'), children: copied ? copiedLabel : '' })] })) : (numberRow)] }));
+}
+/**
+ * The heading block of the Sidebar tenant menu: the tenant name heading and the
+ * identification-number row. Place it as the first child of `Sidebar.TenantMenu`.
+ *
+ * Pass the `copy` prop to make the identification-number row copy its value to the clipboard,
+ * with a tooltip and a screen-reader announcement. The feedback after copying reads `コピーしました`
+ * by default and can be changed via `copy.copiedLabel`. Without `copy`, the row is static text.
+ *
+ * @param props - The props of the `Sidebar.TenantMenuHeading` component.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.TenantMenu name="株式会社サンプル" tooltipLabel="事業者">
+ *   <Sidebar.TenantMenuHeading
+ *     name="株式会社サンプル"
+ *     identificationNumber="事業者番号：0123-4567"
+ *     copy={{ text: '0123-4567', label: '事業者番号をコピーする' }}
+ *   />
+ *   <DropdownMenu.Divider />
+ *   <DropdownMenu.Item href="https://example.com">事業者設定</DropdownMenu.Item>
+ * </Sidebar.TenantMenu>
+ * ```
+ */
+export function SidebarTenantMenuHeading(props) {
+    return _jsx(SidebarMenuHeading, { ...props });
+}
+/**
+ * The heading block of the Sidebar user menu: the user (account) name heading and the
+ * identification-number row. Place it as the first child of `Sidebar.UserMenu`.
+ *
+ * Pass the `copy` prop to make the identification-number row copy its value to the clipboard,
+ * with a tooltip and a screen-reader announcement. The feedback after copying reads `コピーしました`
+ * by default and can be changed via `copy.copiedLabel`. Without `copy`, the row is static text.
+ *
+ * @param props - The props of the `Sidebar.UserMenuHeading` component.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.UserMenu name="山田 太郎" tooltipLabel="アカウント">
+ *   <Sidebar.UserMenuHeading
+ *     name="山田 太郎"
+ *     identificationNumber="従業員番号：1234"
+ *     copy={{ text: '1234', label: '従業員番号をコピーする' }}
+ *   />
+ *   <DropdownMenu.Divider />
+ *   <DropdownMenu.Item onClick={handleLogout}>ログアウト</DropdownMenu.Item>
+ * </Sidebar.UserMenu>
+ * ```
+ */
+export function SidebarUserMenuHeading(props) {
+    return _jsx(SidebarMenuHeading, { ...props });
+}

package/dist/src/Sidebar/SidebarMenuHeading/SidebarMenuHeading.types.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The copy-to-clipboard settings for the identification-number row.
+ */
+export type SidebarMenuHeadingCopy = {
+    /**
+     * The text written to the clipboard when the row is selected (e.g. `"0123-4567"`).
+     */
+    text: string;
+    /**
+     * The tooltip label prompting the copy action (e.g. `"事業者番号をコピーする"`).
+     */
+    label: string;
+    /**
+     * The label shown in the tooltip and announced to screen readers right after copying.
+     *
+     * @default 'コピーしました'
+     */
+    copiedLabel?: string;
+};
+export type SidebarMenuHeadingProps = {
+    /**
+     * The tenant (business) or user (account) name shown as the menu heading.
+     */
+    name: string;
+    /**
+     * The identification-number row text (e.g. `"事業者番号：0123-4567"`).
+     */
+    identificationNumber: string;
+    /**
+     * Enables copy-to-clipboard on the identification-number row: the row becomes a menu item button
+     * with a copy icon, a tooltip, and a screen-reader announcement. When omitted, the row is static text.
+     */
+    copy?: SidebarMenuHeadingCopy;
+};
+export type SidebarTenantMenuHeadingProps = SidebarMenuHeadingProps;
+export type SidebarUserMenuHeadingProps = SidebarMenuHeadingProps;

package/dist/src/Sidebar/SidebarMenuHeading/SidebarMenuHeading.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Sidebar/SidebarMenuHeading/index.d.ts

@@ -0,0 +1,2 @@
+export { SidebarTenantMenuHeading, SidebarUserMenuHeading } from './SidebarMenuHeading';
+export { type SidebarMenuHeadingCopy, type SidebarTenantMenuHeadingProps, type SidebarUserMenuHeadingProps, } from './SidebarMenuHeading.types';

package/dist/src/Sidebar/SidebarMenuHeading/index.js

@@ -0,0 +1 @@
+export { SidebarTenantMenuHeading, SidebarUserMenuHeading } from './SidebarMenuHeading';

package/dist/src/Sidebar/SidebarNavigationItem.js

@@ -1,12 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, useRef, useState } from 'react';
+import { cloneElement, useContext, useRef, useState, } from 'react';
 import { cx } from '../../styled-system/css';
 import { sidebarSlotRecipe } from '../../styled-system/recipes';
 import { FocusIndicator } from '../FocusIndicator';
 import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 import { useIsomorphicLayoutEffect } from '../utilities/react/useIsomorphicLayoutEffect';
+import { SidebarContext } from './SidebarContext';
 /**
  * A single navigation item shown in the Sidebar.
  *
@@ -15,6 +16,7 @@ import { useIsomorphicLayoutEffect } from '../utilities/react/useIsomorphicLayou
  */
 export function SidebarNavigationItem({ label, icon, isCurrent, maxLines, ...rest }) {
     const classes = sidebarSlotRecipe();
+    const { isCollapsed } = useContext(SidebarContext);
     const labelRef = useRef(null);
     const [isTruncated, setIsTruncated] = useState(false);
     useIsomorphicLayoutEffect(() => {
@@ -40,9 +42,10 @@ export function SidebarNavigationItem({ label, icon, isCurrent, maxLines, ...res
     const href = isAnchor ? rest.href : undefined;
     const target = 'target' in rest ? rest.target : undefined;
     const onClick = 'onClick' in rest ? rest.onClick : undefined;
-    return (_jsx("li", { className: cx(classes.navigationListItem, 'mfui-Sidebar__navigationListItem'), style: maxLines !== undefined ? { '--mfui-sidebar-max-lines': maxLines } : undefined, children: _jsx(Tooltip, { content: label, disabled: !isTruncated, placement: "right", children: _jsx(FocusIndicator, { children: _jsx(Tag, { "data-mfui-focusable": true, href: href, target: target, type: isAnchor ? undefined : 'button', "aria-current": isCurrent ? 'page' : undefined, className: cx(classes.navigationLink, 'mfui-Sidebar__navigationLink'), onClick: onClick, children: _jsxs("div", { className: cx(classes.navigationLinkInner, 'mfui-Sidebar__navigationLinkInner'), children: [_jsx("span", { className: cx(classes.navigationLinkIcon, 'mfui-Sidebar__navigationLinkIcon'), children: cloneElement(icon, {
+    const shouldShowTooltip = isCollapsed || isTruncated;
+    return (_jsx("li", { className: cx(classes.navigationListItem, 'mfui-Sidebar__navigationListItem'), style: maxLines !== undefined ? { '--mfui-sidebar-max-lines': maxLines } : undefined, children: _jsx(Tooltip, { content: label, disabled: !shouldShowTooltip, placement: "right", children: _jsx(FocusIndicator, { children: _jsx(Tag, { "data-mfui-focusable": true, href: href, target: target, type: isAnchor ? undefined : 'button', "aria-label": isCollapsed ? label : undefined, "aria-current": isCurrent ? 'page' : undefined, className: cx(classes.navigationLink, 'mfui-Sidebar__navigationLink'), onClick: onClick, children: _jsxs("div", { className: cx(classes.navigationLinkInner, 'mfui-Sidebar__navigationLinkInner'), children: [_jsx("span", { className: cx(classes.navigationLinkIcon, 'mfui-Sidebar__navigationLinkIcon'), children: cloneElement(icon, {
                                     width: 18,
                                     height: 18,
                                     'aria-hidden': true,
-                                }) }), _jsx(Typography, { ref: labelRef, variant: "controlLabel", className: cx(classes.navigationLinkLabel, 'mfui-Sidebar__navigationLinkLabel'), children: label })] }) }) }) }) }));
+                                }) }), isCollapsed ? null : (_jsx(Typography, { ref: labelRef, variant: "controlLabel", className: cx(classes.navigationLinkLabel, 'mfui-Sidebar__navigationLinkLabel'), children: label }))] }) }) }) }) }));
 }

package/dist/src/Sidebar/hooks/useSidebarResize.d.ts

@@ -12,11 +12,12 @@ import { type KeyboardEvent, type PointerEvent as ReactPointerEvent } from 'reac
  *
  * @returns Object containing the current width, resolved bounds, refs, and resize handlers
  */
-export declare function useSidebarResize({ minWidth, maxWidth, defaultWidth, onWidthChange, }?: {
+export declare function useSidebarResize({ minWidth, maxWidth, defaultWidth, onWidthChange, isCollapsed, }?: {
     minWidth?: number;
     maxWidth?: number;
     defaultWidth?: number;
     onWidthChange?: (width: number) => void;
+    isCollapsed?: boolean;
 }): {
     width: number;
     minWidth: number;

package/dist/src/Sidebar/hooks/useSidebarResize.js

@@ -1,7 +1,8 @@
-import { useCallback, useEffect, useRef, useState, } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 const DEFAULT_WIDTH = 200;
 const DEFAULT_MIN_WIDTH = 180;
 const DEFAULT_MAX_WIDTH = 280;
+const COLLAPSED_WIDTH = 48;
 const KEYBOARD_STEP_PX = 14;
 /**
  * Hook to manage the resizable width of the Sidebar via pointer dragging and keyboard control.
@@ -16,10 +17,11 @@ const KEYBOARD_STEP_PX = 14;
  *
  * @returns Object containing the current width, resolved bounds, refs, and resize handlers
  */
-export function useSidebarResize({ minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFAULT_MAX_WIDTH, defaultWidth, onWidthChange, } = {}) {
+export function useSidebarResize({ minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFAULT_MAX_WIDTH, defaultWidth, onWidthChange, isCollapsed = false, } = {}) {
     const rootRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
     const pointerIdRef = useRef(null);
+    const isCollapsedRef = useRef(isCollapsed);
     const onWidthChangeRef = useRef(onWidthChange);
     useEffect(() => {
         onWidthChangeRef.current = onWidthChange;
@@ -37,6 +39,7 @@ export function useSidebarResize({ minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFA
     // not re-synced on later changes, so the user's drag/keyboard adjustments are never overridden.
     const initialWidth = clamp(defaultWidth ?? DEFAULT_WIDTH);
     const widthRef = useRef(initialWidth);
+    const lastExpandedWidthRef = useRef(initialWidth);
     const [width, setWidth] = useState(initialWidth);
     const notify = useCallback((value) => {
         onWidthChangeRef.current?.(value);
@@ -47,6 +50,9 @@ export function useSidebarResize({ minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFA
     }, []);
     // --- Drag ---
     const handlePointerDown = useCallback((event) => {
+        if (isCollapsedRef.current) {
+            return;
+        }
         event.preventDefault();
         event.currentTarget.setPointerCapture(event.pointerId);
         pointerIdRef.current = event.pointerId;
@@ -82,6 +88,9 @@ export function useSidebarResize({ minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFA
     }, [isDragging, handlePointerMove, handlePointerUp]);
     // --- Keyboard ---
     const handleKeyDown = useCallback((event) => {
+        if (isCollapsedRef.current) {
+            return;
+        }
         let newWidth;
         switch (event.key) {
             case 'ArrowRight':
@@ -107,5 +116,24 @@ export function useSidebarResize({ minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFA
             notify(newWidth);
         }
     }, [minWidth, maxWidth, applyWidth, notify]);
-    return { width, minWidth, maxWidth, rootRef, isDragging, handlePointerDown, handleKeyDown };
+    useEffect(() => {
+        if (isCollapsedRef.current === isCollapsed) {
+            return;
+        }
+        if (isCollapsed) {
+            lastExpandedWidthRef.current = widthRef.current;
+            setIsDragging(false);
+            pointerIdRef.current = null;
+        }
+        else {
+            // width/widthRef never change while collapsed (handlePointerDown/handleKeyDown
+            // early-return above), so this is a no-op today. Kept as a defensive restore in
+            // case a future change allows width-affecting state (e.g. minWidth/maxWidth) to
+            // change while collapsed.
+            applyWidth(lastExpandedWidthRef.current);
+        }
+        isCollapsedRef.current = isCollapsed;
+    }, [applyWidth, isCollapsed]);
+    const effectiveWidth = useMemo(() => (isCollapsed ? COLLAPSED_WIDTH : width), [isCollapsed, width]);
+    return { width: effectiveWidth, minWidth, maxWidth, rootRef, isDragging, handlePointerDown, handleKeyDown };
 }

package/dist/src/Sidebar/index.d.ts

@@ -1,6 +1,7 @@
 export { Sidebar } from './Sidebar';
-export type { SidebarProps, SidebarNavigationItem, SidebarNavigationDivider, SidebarNavigationEntry, } from './Sidebar.types';
+export type { SidebarProps, SidebarFooterIconMenuSlotState, SidebarNavigationItem, SidebarNavigationDivider, SidebarNavigationEntry, } from './Sidebar.types';
 export type { SidebarNavigationItemProps } from './SidebarNavigationItem';
 export type { SidebarServiceMenuProps } from './SidebarServiceMenu';
 export type { SidebarTenantMenuProps } from './SidebarTenantMenu';
 export type { SidebarUserMenuProps } from './SidebarUserMenu';
+export type { SidebarTenantMenuHeadingProps, SidebarUserMenuHeadingProps, SidebarMenuHeadingCopy, } from './SidebarMenuHeading';

package/dist/src/Stack/Stack.d.ts

@@ -13,11 +13,11 @@ import { type StackProps } from './Stack.types';
  */
 export declare const Stack: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
-    direction?: import("react").CSSProperties["flexDirection"];
-    gap?: ("horizontal.1" | "horizontal.2" | "horizontal.3" | "horizontal.4" | "horizontal.5" | "horizontal.6" | "horizontal.7" | "horizontal.8" | "horizontal.20" | "horizontal.0-1of8" | "horizontal.0-1of4" | "horizontal.0-1of2" | "horizontal.1-1of2" | "horizontal.2-1of2" | "horizontal.3-1of7" | "horizontal.3-1of2" | "horizontal.4-1of2" | "horizontal.5-1of2" | "horizontal.6-1of2" | "horizontal.7-1of2" | "vertical.1" | "vertical.2" | "vertical.3" | "vertical.0-1of8" | "vertical.0-1of6" | "vertical.0-1of4" | "vertical.0-1of3" | "vertical.0-1of2" | "vertical.0-2of3" | "vertical.0-3of4" | "vertical.0-5of6" | "vertical.0-7of8" | "vertical.1-1of8" | "vertical.1-1of4" | "vertical.1-1of3" | "vertical.1-1of2" | "vertical.1-2of3" | "vertical.2-1of2") | `${number}px` | number;
-    wrap?: import("react").CSSProperties["flexWrap"];
-    alignItems?: import("react").CSSProperties["alignItems"];
-    justifyContent?: import("react").CSSProperties["justifyContent"];
+    direction?: import("react").CSSProperties['flexDirection'];
+    gap?: ("horizontal.0-1of2" | "horizontal.0-1of4" | "horizontal.0-1of8" | "horizontal.1" | "horizontal.1-1of2" | "horizontal.2" | "horizontal.2-1of2" | "horizontal.20" | "horizontal.3" | "horizontal.3-1of2" | "horizontal.3-1of7" | "horizontal.4" | "horizontal.4-1of2" | "horizontal.5" | "horizontal.5-1of2" | "horizontal.6" | "horizontal.6-1of2" | "horizontal.7" | "horizontal.7-1of2" | "horizontal.8" | "vertical.0-1of2" | "vertical.0-1of3" | "vertical.0-1of4" | "vertical.0-1of6" | "vertical.0-1of8" | "vertical.0-2of3" | "vertical.0-3of4" | "vertical.0-5of6" | "vertical.0-7of8" | "vertical.1" | "vertical.1-1of2" | "vertical.1-1of3" | "vertical.1-1of4" | "vertical.1-1of8" | "vertical.1-2of3" | "vertical.2" | "vertical.2-1of2" | "vertical.3") | `${number}px` | number;
+    wrap?: import("react").CSSProperties['flexWrap'];
+    alignItems?: import("react").CSSProperties['alignItems'];
+    justifyContent?: import("react").CSSProperties['justifyContent'];
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * This component is inherited from the Stack component and helps you create a horizontal stack layout.

package/dist/src/StatusLabel/StatusLabel.d.ts

@@ -11,7 +11,7 @@
 export declare const StatusLabel: import("react").ForwardRefExoticComponent<{
     label: string;
     icon?: import("react").ReactNode;
-    status?: import("../../styled-system/recipes").StatusLabelSlotRecipeVariant["status"];
-    size?: import("../../styled-system/recipes").StatusLabelSlotRecipeVariant["size"];
+    status?: import("../../styled-system/recipes").StatusLabelSlotRecipeVariant['status'];
+    size?: import("../../styled-system/recipes").StatusLabelSlotRecipeVariant['size'];
     className?: string;
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/src/Stepper/Step/Step.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, useContext } from 'react';
 import { cx } from '../../../styled-system/css';
 import { stepperSlotRecipe } from '../../../styled-system/recipes';

package/dist/src/SubNavigation/SubNavigation.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DisclosureBasicCollapsed, Lock } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { subNavigationSlotRecipe } from '../../styled-system/recipes';

package/dist/src/Tag/Tag.d.ts

@@ -7,4 +7,4 @@ import { type TagProps } from './Tag.types';
  *  - If `disabled` is `true` and `onClick` is provided, the tag will be displayed as disabled button.
  *  - If `showCloseButton` is `true`, the tag will be displayed with a close button.
  */
-export declare function Tag({ label, onClick, href, customLinkComponent, disabled, onClose, target, rel, className, }: TagProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tag({ label, onClick, href, customLinkComponent, disabled, onClose, closeButtonProps, target, rel, className, }: TagProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Tag/Tag.js

@@ -14,10 +14,10 @@ import { cx } from '../../styled-system/css';
  *  - If `disabled` is `true` and `onClick` is provided, the tag will be displayed as disabled button.
  *  - If `showCloseButton` is `true`, the tag will be displayed with a close button.
  */
-export function Tag({ label, onClick, href, customLinkComponent, disabled = false, onClose, target, rel, className, }) {
+export function Tag({ label, onClick, href, customLinkComponent, disabled = false, onClose, closeButtonProps, target, rel, className, }) {
     const isClickable = !!onClick || !!href;
     const classes = tagSlotRecipe({ interactable: isClickable, showCloseButton: !!onClose });
-    const closeButton = (_jsx(IconButton, { disabled: disabled, className: cx(classes.closeButton, 'mfui-Tag__closeButton'), "aria-label": `${label}を削除する`, onClick: onClose, children: _jsx(Close, {}) }));
+    const closeButton = (_jsx(IconButton, { disabled: disabled, className: cx(classes.closeButton, 'mfui-Tag__closeButton'), "aria-label": closeButtonProps?.['aria-label'] ?? `${label}を削除する`, onClick: onClose, children: _jsx(Close, {}) }));
     if (!isClickable) {
         return (_jsx(FocusIndicator, { children: _jsxs("span", { className: cx(classes.root, 'mfui-Tag__root', className), children: [_jsx(Typography, { variant: "condensedInput", children: label }), onClose ? closeButton : null] }) }));
     }

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

@@ -33,6 +33,13 @@ export type TagProps = {
      * The handler to close the tag. When this prop is provided, the close button will be shown
      */
     onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The properties for the close button.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the close button. default is '{label}を削除する'.
+     */
+    closeButtonProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'>;
     /**
      * Class name to be applied to the wrapper element.
      */

package/dist/src/TextBox/TextBox.d.ts

@@ -9,13 +9,13 @@ import React from 'react';
  */
 export declare const TextBox: React.ForwardRefExoticComponent<{
     enableClearButton?: boolean;
-    onClear?: import("..").IconButtonProps["onClick"];
-    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["invalid"];
-    textBoxSize?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["size"];
-    disabled?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["disabled"];
-    wrapperProps?: React.ComponentPropsWithRef<"div">;
+    onClear?: import("..").IconButtonProps['onClick'];
+    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['invalid'];
+    textBoxSize?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['size'];
+    disabled?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['disabled'];
+    wrapperProps?: React.ComponentPropsWithRef<'div'>;
     prefixSlot?: React.ReactNode;
     suffixSlot?: React.ReactNode;
-    clearButtonProps?: Pick<React.ComponentPropsWithoutRef<"input">, "aria-label">;
+    clearButtonProps?: Pick<React.ComponentPropsWithoutRef<'input'>, 'aria-label'>;
     touchDeviceReadOnly?: boolean;
 } & Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "prefix"> & React.RefAttributes<HTMLInputElement>>;

package/dist/src/TextLink/TextLink.d.ts

@@ -7,9 +7,9 @@
  */
 export declare const TextLink: import("react").ForwardRefExoticComponent<{
     children?: React.ReactNode;
-    variant?: import("../../styled-system/recipes").TextLinkSlotRecipeVariant["variant"];
+    variant?: import("../../styled-system/recipes").TextLinkSlotRecipeVariant['variant'];
     className?: string;
     customLinkComponent?: import("react").ElementType;
     showExternalIcon?: boolean;
-    externalIconProps?: import("react").ComponentPropsWithoutRef<"svg">["aria-label"];
+    externalIconProps?: import("react").ComponentPropsWithoutRef<'svg'>['aria-label'];
 } & Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/src/Textarea/Textarea.d.ts

@@ -10,9 +10,9 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
  */
 export declare const Textarea: import("react").ForwardRefExoticComponent<{
-    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["invalid"];
-    size?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["size"];
-    disabled?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["disabled"];
+    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['invalid'];
+    size?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['size'];
+    disabled?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['disabled'];
     enableAutoResize?: boolean;
-    resize?: "none" | "vertical" | "horizontal" | "both";
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
 } & Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/src/Toast/Toast.d.ts

@@ -3,12 +3,12 @@
  * This component switches the variants of looks depends on the props: type and actionText.
  */
 export declare const Toast: import("react").ForwardRefExoticComponent<{
-    type?: import("../../styled-system/recipes").ToastSlotRecipeVariant["type"];
+    type?: import("../../styled-system/recipes").ToastSlotRecipeVariant['type'];
     message: import("react").ReactNode;
     onClose?: () => void;
     actionSlot?: import("react").ReactNode;
-    statusIconProps?: Pick<import("react").ComponentPropsWithoutRef<"svg">, "aria-label">;
-    closeButtonProps?: Pick<import("react").ComponentPropsWithoutRef<"button">, "aria-label">;
+    statusIconProps?: Pick<import("react").ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
+    closeButtonProps?: Pick<import("react").ComponentPropsWithoutRef<'button'>, 'aria-label'>;
     duration?: number;
     activeElement?: Element | null;
     customIcon?: import("react").ReactElement;

package/dist/src/Toast/Toast.js

@@ -18,20 +18,24 @@ export const Toast = forwardRef(({ className, type = 'success', actionSlot, mess
     const timerRef = useRef(null);
     const startTimeRef = useRef(null);
     const localDurationRef = useRef(null);
+    // The status is conveyed by the message content itself, so the status icon is decorative
+    // and hidden from assistive technology unless a label is explicitly provided.
+    const statusIconLabel = statusIconProps?.['aria-label'];
+    const statusIconA11yProps = statusIconLabel === undefined ? { 'aria-hidden': true } : { 'aria-label': statusIconLabel };
     const icon = (() => {
         if (type === 'success') {
-            return _jsx(Approval, { "aria-label": statusIconProps?.['aria-label'] ?? '完了' });
+            return _jsx(Approval, { ...statusIconA11yProps });
         }
         if (type === 'failure') {
-            return _jsx(Error, { "aria-label": statusIconProps?.['aria-label'] ?? '失敗' });
+            return _jsx(Error, { ...statusIconA11yProps });
         }
         if (type === 'caution') {
-            return _jsx(Caution, { "aria-label": statusIconProps?.['aria-label'] ?? '注意' });
+            return _jsx(Caution, { ...statusIconA11yProps });
         }
         if (type === 'progress') {
-            return _jsx(ProgressIndicator, {});
+            return _jsx(ProgressIndicator, { "aria-hidden": true });
         }
-        return _jsx(Pending, { "aria-label": statusIconProps?.['aria-label'] ?? '進行中' });
+        return _jsx(Pending, { ...statusIconA11yProps });
     })();
     // Handle the duration of the toast
     useEffect(() => {

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

@@ -26,13 +26,11 @@ export type ToastProps = {
     actionSlot?: ReactNode;
     /**
      * The properties for the status icon.
-     * If this prop is not passed, the default values for each property will be applied.
      *
      * @property aria-label - The alternative text for the status icon.
-     * Default is as follows:
-     * - 'success' type: '完了'
-     * - 'failure' type: '失敗'
-     * - 'busy' type: '進行中'
+     * By default, the status icon is decorative and hidden from assistive technology (`aria-hidden`),
+     * because the message content itself conveys the status.
+     * Pass an `aria-label` only when the icon needs to be announced.
      */
     statusIconProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
     /**

package/dist/src/Toast/api/toast.d.ts

@@ -1,11 +1,27 @@
 import { type ToastSlotRecipeVariant } from '../../../styled-system/recipes';
 import { type ToastApiProps } from './toast.types';
+/**
+ * Show a toast message
+ *
+ * @param props - The toast message properties.
+ *
+ * @param type - The type of the toast message.
+ */
+declare const showToast: (props: ToastApiProps | string, type?: ToastSlotRecipeVariant['type']) => void;
+/**
+ * Destroy a toast message.
+ * If the key is not provided, all toasts will be destroyed.
+ *
+ * @param key - The key of the toast message to destroy.
+ */
+declare const destroyToast: (key?: string) => void;
 export declare const toast: {
-    show: (props: ToastApiProps | string, type?: ToastSlotRecipeVariant["type"]) => void;
+    show: typeof showToast;
     success: (props: ToastApiProps | string) => void;
     failure: (props: ToastApiProps | string) => void;
     busy: (props: ToastApiProps | string) => void;
     progress: (props: ToastApiProps | string) => void;
     caution: (props: ToastApiProps | string) => void;
-    destroy: (key?: string) => void;
+    destroy: typeof destroyToast;
 };
+export {};

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

@@ -41,6 +41,6 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     targetDOMNode?: HTMLElement | null;
     disabled?: boolean;
     hideFromScreenReader?: boolean;
-    maxWidth?: import("react").CSSProperties["maxWidth"];
-    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>>;
+    maxWidth?: import("react").CSSProperties['maxWidth'];
+    contentProps?: Pick<import("react").ComponentPropsWithoutRef<'div'>, 'className' | 'id'>;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "content" | "disabled"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useRef, isValidElement, cloneElement, useEffect, useMemo } from 'react';
 import { getOverflowAncestors } from '@floating-ui/react-dom';
 import { cx } from '../../styled-system/css';

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

@@ -16,6 +16,8 @@ export type TooltipProps = {
     /**
      * Controls the visibility of the tooltip.
      * If not specified, the tooltip will automatically show or hidden by using trigger.
+     * When this prop changes back from a boolean to `undefined`, the tooltip closes and
+     * returns to trigger-based control (a fresh hover/focus is required to reopen it).
      *
      * @default undefined
      */

package/dist/src/Tooltip/hooks/useTooltipDisplayController.js

@@ -42,6 +42,7 @@ export function useTooltipDisplayController({ trigger, wrapperProps, tooltipOpen
     const isHoveringTooltip = useRef(false);
     const isHoveringTrigger = useRef(false);
     const previousDisabled = useRef(disabled);
+    const previousTooltipOpen = useRef(tooltipOpen);
     const triggers = useMemo(() => (typeof trigger === 'string' ? [trigger] : trigger), [trigger]);
     const onActualClose = useCallback(() => {
         const id = tooltipId.current;
@@ -218,8 +219,8 @@ export function useTooltipDisplayController({ trigger, wrapperProps, tooltipOpen
     }, [closeImmediate]);
     // Handle programmatic control with TooltipManager integration
     useEffect(() => {
+        const id = tooltipId.current;
         if (tooltipOpen !== undefined) {
-            const id = tooltipId.current;
             if (tooltipOpen) {
                 tooltipManager.requestOpen(id);
             }
@@ -227,7 +228,18 @@ export function useTooltipDisplayController({ trigger, wrapperProps, tooltipOpen
                 tooltipManager.onClose(id);
             }
         }
-    }, [tooltipOpen]);
+        else if (previousTooltipOpen.current !== undefined) {
+            // Leaving controlled mode (`open` became undefined): reset to closed instead of leaking
+            // the last state into uncontrolled mode. Trigger handlers are detached while controlled,
+            // so the hover/focus tracking refs may be stale — clear them and require a fresh trigger.
+            tooltipManager.onClose(id);
+            triggerSource.current = undefined;
+            isHoveringTrigger.current = false;
+            isHoveringTooltip.current = false;
+            closeImmediate();
+        }
+        previousTooltipOpen.current = tooltipOpen;
+    }, [tooltipOpen, closeImmediate]);
     useEffect(() => {
         if (disabled && !previousDisabled.current) {
             const id = tooltipId.current;

package/dist/src/utilities/dom/dispatchNativeInputValueWithEvent.d.ts

@@ -11,4 +11,4 @@
  *
  * @param value - The value to set, is string
  */
-export declare const dispatchNativeInputValueWithEvent: <Element extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(input: Element, value: Element["value"]) => void;
+export declare const dispatchNativeInputValueWithEvent: <Element extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(input: Element, value: Element['value']) => void;

package/dist/src/utilities/dom/useFocusTrap.d.ts

@@ -22,6 +22,6 @@ type Options = {
  * @returns The props for the focus trap.
  */
 export declare function useFocusTrap({ onKeyDown, onPressingTabOnNotFocusableElement }?: Options): {
-    handleOnKeyDown: React.KeyboardEventHandler<HTMLElement>;
+    handleOnKeyDown: KeyboardEventHandler<HTMLElement>;
 };
 export {};