@moneyforward/mfui-components 3.31.1 → 3.32.0

package/dist/src/Breadcrumbs/Breadcrumbs.d.ts

@@ -10,4 +10,5 @@ export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<{
     items: import("./Breadcrumbs.types").BreadcrumbItem[];
     wrap?: boolean;
     customLinkComponent?: import("react").ElementType;
+    truncateButtonProps?: Pick<import("react").ComponentPropsWithoutRef<'button'>, 'aria-label'>;
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/dist/src/Breadcrumbs/Breadcrumbs.js

@@ -30,7 +30,7 @@ function Separator({ className }) {
  * when it has no `href`. If the last item has an `href`, it is rendered as a link and the
  * trail has no current-page item.
  */
-export const Breadcrumbs = forwardRef(({ items, wrap = false, customLinkComponent, className, 'aria-label': ariaLabel = '現在のページ位置', ...rest }, ref) => {
+export const Breadcrumbs = forwardRef(({ items, wrap = false, customLinkComponent, className, 'aria-label': ariaLabel = '現在のページ位置', truncateButtonProps, ...rest }, ref) => {
     const classes = breadcrumbsSlotRecipe({ wrap });
     // Decompose items into logical groups:
     // - rootItem:    items[0] (always shown, link)
@@ -159,7 +159,7 @@ export const Breadcrumbs = forwardRef(({ items, wrap = false, customLinkComponen
         setCurrentTruncated(!!(currentElement && currentElement.scrollWidth > currentElement.clientWidth));
     }, [containerWidth, collapsedCount, wrap]);
     const truncatedItems = middleItems.slice(0, collapsedCount);
-    return (_jsx("nav", { ref: ref, className: cx(classes.root, className), "aria-label": ariaLabel, ...rest, children: _jsxs("ol", { ref: listRef, className: classes.list, "data-mfui-all-collapsed": allCollapsed ? true : undefined, children: [rootItem ? (_jsxs("li", { ref: rootItemLiRef, className: classes.item, style: allCollapsed && rootMinWidth !== undefined ? { minWidth: rootMinWidth } : undefined, children: [_jsx(Tooltip, { hideFromScreenReader: true, content: rootItem.label, disabled: !rootTruncated, placement: "bottom", style: TOOLTIP_TRIGGER_STYLE, children: _jsx(TextLink, { ref: rootLinkRef, href: rootItem.href, variant: "condensedBody", customLinkComponent: customLinkComponent, className: classes.linkText, children: rootItem.label }) }), _jsx(Separator, { className: classes.separator })] })) : null, collapsedCount > 0 ? (_jsxs("li", { className: classes.truncateItem, children: [_jsx(DropdownMenu, { label: "\u7701\u7565\u3055\u308C\u305F\u30A2\u30A4\u30C6\u30E0\u3092\u8868\u793A", icon: _jsx(MoreHorizontal, {}), triggerProps: {
+    return (_jsx("nav", { ref: ref, className: cx(classes.root, className), "aria-label": ariaLabel, ...rest, children: _jsxs("ol", { ref: listRef, className: classes.list, "data-mfui-all-collapsed": allCollapsed ? true : undefined, children: [rootItem ? (_jsxs("li", { ref: rootItemLiRef, className: classes.item, style: allCollapsed && rootMinWidth !== undefined ? { minWidth: rootMinWidth } : undefined, children: [_jsx(Tooltip, { hideFromScreenReader: true, content: rootItem.label, disabled: !rootTruncated, placement: "bottom", style: TOOLTIP_TRIGGER_STYLE, children: _jsx(TextLink, { ref: rootLinkRef, href: rootItem.href, variant: "condensedBody", customLinkComponent: customLinkComponent, className: classes.linkText, children: rootItem.label }) }), _jsx(Separator, { className: classes.separator })] })) : null, collapsedCount > 0 ? (_jsxs("li", { className: classes.truncateItem, children: [_jsx(DropdownMenu, { label: truncateButtonProps?.['aria-label'] ?? '省略されたアイテムを表示', icon: _jsx(MoreHorizontal, {}), triggerProps: {
                                 className: classes.truncateButton,
                             }, children: truncatedItems.map((item, i) => item.href !== undefined ? (_jsx(DropdownMenu.Item, { href: item.href, customLinkComponent: customLinkComponent, children: item.label }, i)) : (_jsx(DropdownMenu.Item, { children: item.label }, i))) }), _jsx(Separator, { className: classes.separator })] })) : null, middleItems.map((item, i) => (_jsxs("li", { className: classes.item, style: i < collapsedCount ? { display: 'none' } : undefined, children: [_jsx(TextLink, { href: item.href, variant: "condensedBody", customLinkComponent: customLinkComponent, className: classes.linkText, children: item.label }), _jsx(Separator, { className: classes.separator })] }, i))), parentItem ? (_jsxs("li", { ref: parentItemLiRef, className: classes.item, style: allCollapsed && parentMinWidth !== undefined ? { minWidth: parentMinWidth } : undefined, children: [_jsx(Tooltip, { hideFromScreenReader: true, content: parentItem.label, disabled: !parentTruncated, placement: "bottom", style: TOOLTIP_TRIGGER_STYLE, children: _jsx(TextLink, { ref: parentLinkRef, href: parentItem.href, variant: "condensedBody", customLinkComponent: customLinkComponent, className: classes.linkText, children: parentItem.label }) }), _jsx(Separator, { className: classes.separator })] })) : null, currentItem ? (_jsx("li", { ref: currentItemLiRef, className: classes.item, "aria-current": lastItemIsCurrentPage ? 'page' : undefined, style: allCollapsed && currentMinWidth !== undefined ? { minWidth: currentMinWidth } : undefined, children: _jsx(Tooltip, { hideFromScreenReader: true, content: currentItem.label, disabled: !currentTruncated, placement: "bottom", style: TOOLTIP_TRIGGER_STYLE, children: lastItemIsCurrentPage ? (_jsx("span", { ref: currentItemRef, className: classes.currentItem, children: currentItem.label })) : (_jsx(TextLink, { ref: currentLinkRef, href: currentItem.href, variant: "condensedBody", customLinkComponent: customLinkComponent, className: classes.linkText, children: currentItem.label })) }) })) : null] }) }));
 });

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

@@ -32,4 +32,11 @@ export type BreadcrumbsProps = {
      * Also applied to truncated items in the DropdownMenu.
      */
     customLinkComponent?: ElementType;
+    /**
+     * The properties for the "…" button that opens the menu of truncated items.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the button. Override this to localize the label. default is '省略されたアイテムを表示'.
+     */
+    truncateButtonProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'>;
 } & ComponentPropsWithoutRef<'nav'>;

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

@@ -71,6 +71,31 @@ export const usePopoverController = ({ placement, open, arrowRef }) => {
     });
     // Convert calculated placement back to original placement
     const originalPlacement = reversePlacementMapping[calculatedPlacement];
+    const isStartPlacement = originalPlacement.endsWith('Start');
+    const isEndPlacement = originalPlacement.endsWith('End');
+    const isVerticalPlacement = originalPlacement.startsWith('top') || originalPlacement.startsWith('bottom');
+    const arrowHorizontalPosition = (() => {
+        if (!isVerticalPlacement)
+            return;
+        if (isStartPlacement)
+            return { left: `${String(ARROW_PADDING)}px`, right: undefined };
+        if (isEndPlacement)
+            return { left: undefined, right: `${String(ARROW_PADDING)}px` };
+        return {
+            left: arrowData?.x ? `${String(arrowData.x)}px` : undefined,
+            right: undefined,
+        };
+    })();
+    const arrowVerticalPosition = (() => {
+        if (originalPlacement.startsWith('top'))
+            return { top: '100%', bottom: undefined };
+        if (originalPlacement.startsWith('bottom'))
+            return { top: undefined, bottom: '100%' };
+        return {
+            top: arrowData?.y ? `${String(arrowData.y)}px` : undefined,
+            bottom: undefined,
+        };
+    })();
     return {
         tooltip: {
             setReference: setFloating,
@@ -82,20 +107,10 @@ export const usePopoverController = ({ placement, open, arrowRef }) => {
         arrow: {
             style: {
                 position: 'absolute',
-                top: (() => {
-                    // When placement is top, the arrow should be at the bottom
-                    if (originalPlacement.startsWith('top'))
-                        return '100%';
-                    return arrowData?.y ? `${String(arrowData.y)}px` : undefined;
-                })(),
-                right: originalPlacement.startsWith('right') ? '100%' : undefined,
-                left: (() => {
-                    // When placement is left, the arrow should be at the right
-                    if (originalPlacement.startsWith('left'))
-                        return '100%';
-                    return arrowData?.x ? `${String(arrowData.x)}px` : undefined;
-                })(),
-                bottom: originalPlacement.startsWith('bottom') ? '100%' : undefined,
+                top: arrowVerticalPosition.top,
+                bottom: arrowVerticalPosition.bottom,
+                left: arrowHorizontalPosition?.left ?? (originalPlacement.startsWith('left') ? '100%' : undefined),
+                right: arrowHorizontalPosition?.right ?? (originalPlacement.startsWith('right') ? '100%' : undefined),
                 // Rotate the arrow if it's on the bottom or right
                 transform: `rotate(${originalPlacement.startsWith('bottom') || originalPlacement.startsWith('right') ? '180deg' : '0'})`,
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.31.1",
+  "version": "3.32.0",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",
@@ -63,7 +63,7 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@tanstack/react-virtual": "^3.13.18",
     "dayjs": "^1.11.13",
-    "@moneyforward/mfui-design-tokens": "^3.3.0",
+    "@moneyforward/mfui-design-tokens": "^3.3.1",
     "@moneyforward/mfui-icons-react": "^3.6.0"
   },
   "scripts": {