@moneyforward/mfui-components 3.11.0 → 3.12.0

package/dist/src/SplitView/utils/styles.js

@@ -24,32 +24,55 @@ export function calculateDividerStyle(options) {
     };
 }
 /**
- * Calculate the right panel style based on the current size state, visibility, and animation state.
+ * Calculate the controlled panel style based on the current size state, visibility, and animation state.
  *
  * @param options - Style calculation options
  *
- * @returns The style object for the right panel
+ * @returns Styles for the outer panel div and the inner content wrapper div.
  */
-export function calculateRightPanelStyleUnified(options) {
-    const { currentSize, enableAutoUnmount, isRightPanelVisible, isSlideOutAnimating, hasRightPanelBeenVisible, isAnimating, rightPanelPropsStyle, } = options;
-    // Base size styles (width, flex, flexShrink)
-    const baseStyle = {
+export function calculateControlledPanelStyle(options) {
+    const { currentSize, fullPanelSize, targetPanel, enableAutoUnmount, isRightPanelVisible, isSlideOutAnimating, hasRightPanelBeenVisible, isAnimating, panelPropsStyle, } = options;
+    // Base outer style (width, flex, flexShrink).
+    // During animation, overflow:hidden clips the inner wrapper so content is masked rather than reflowed.
+    const baseOuterStyle = {
         flexShrink: 0,
         ...(currentSize !== undefined ? { width: `${String(currentSize)}px`, flex: 'none' } : { width: 0, flex: 0 }),
+        ...(isAnimating && { overflow: 'hidden' }),
     };
-    // State preservation mode (enableAutoUnmount=false)
-    if (!enableAutoUnmount && // Hide the panel when not visible (but keep it mounted for state preservation)
-        !isRightPanelVisible &&
-        !isSlideOutAnimating) {
+    // Inner wrapper: fixed width during animation so content never reflows as the outer div shrinks.
+    //
+    // For targetPanel="left" during slide-OUT, the inner div is shifted left via a negative marginLeft
+    // so that the RIGHT portion of the content stays visible until the end — matching the visual
+    // expectation of a panel that slides off to the left.
+    // For all other cases (slide-in, targetPanel="right"), the inner div is left-aligned (default).
+    const innerStyle = isAnimating
+        ? {
+            width: `${String(fullPanelSize)}px`,
+            height: '100%',
+            // For targetPanel="left", shift the inner div left so its right edge always aligns
+            // with the outer div's right edge. This makes the panel appear to slide in/out
+            // from the left: on slide-in the right portion is revealed first, and on slide-out
+            // the right portion stays visible last.
+            ...(targetPanel === 'left' &&
+                currentSize !== undefined && {
+                marginLeft: `${String(currentSize - fullPanelSize)}px`,
+            }),
+        }
+        : { width: '100%', height: '100%' };
+    // State preservation mode (enableAutoUnmount=false): hide but keep mounted
+    if (!enableAutoUnmount && !isRightPanelVisible && !isSlideOutAnimating) {
         return {
-            ...baseStyle,
-            minWidth: 0,
-            overflow: 'hidden',
-            opacity: 0,
-            visibility: 'hidden',
-            pointerEvents: 'none',
-            display: 'none',
-            ...rightPanelPropsStyle,
+            outer: {
+                ...baseOuterStyle,
+                minWidth: 0,
+                overflow: 'hidden',
+                opacity: 0,
+                visibility: 'hidden',
+                pointerEvents: 'none',
+                display: 'none',
+                ...panelPropsStyle,
+            },
+            inner: innerStyle,
         };
     }
     // Animation-related styles (common for both modes)
@@ -66,8 +89,11 @@ export function calculateRightPanelStyleUnified(options) {
         }
     }
     return {
-        ...baseStyle,
-        ...animationStyle,
-        ...rightPanelPropsStyle,
+        outer: {
+            ...baseOuterStyle,
+            ...animationStyle,
+            ...panelPropsStyle,
+        },
+        inner: innerStyle,
     };
 }

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

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

package/dist/src/Tooltip/Tooltip.js

@@ -43,7 +43,7 @@ export const DEFAULT_MAX_WIDTH = '268px';
  * </Tooltip>
  * ```
  */
-export const Tooltip = forwardRef(({ children, open, onOpenStateChanged, content, targetDOMNode, placement, trigger = ['hover', 'focus'], disabled = false, maxWidth = DEFAULT_MAX_WIDTH, className, contentProps, ...wrapperProps }, ref) => {
+export const Tooltip = forwardRef(({ children, open, onOpenStateChanged, content, targetDOMNode, placement, trigger = ['hover', 'focus'], disabled = false, hideFromScreenReader = false, maxWidth = DEFAULT_MAX_WIDTH, className, contentProps, ...wrapperProps }, ref) => {
     const rootRef = useRef(null);
     const arrowRef = useRef(null);
     const tooltipId = useId();
@@ -79,5 +79,7 @@ export const Tooltip = forwardRef(({ children, open, onOpenStateChanged, content
     }, [calculatedOpen, closeImmediate]);
     const triggerRef = mergeRefs(setTriggerReference, rootRef, ref);
     const classes = tooltipSlotRecipe();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, ...wrapperProps, className: cx(classes.root, 'mfui-Tooltip__root', className), ...rootAttributes, children: isValidElement(children) ? (cloneElement(children, calculatedOpen ? { 'aria-describedby': tooltipId } : undefined)) : (_jsx("span", { ...(calculatedOpen ? { 'aria-describedby': tooltipId } : undefined), children: children })) }), calculatedOpen ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setTooltipReference, className: cx(classes.tooltip, 'mfui-Tooltip__tooltip', contentProps?.className), role: "tooltip", id: tooltipId, style: { maxWidth, ...tooltipStyles }, ...tooltipAttributes, children: [typeof content === 'string' ? _jsx(Typography, { variant: "helpMessage", children: content }) : content, _jsx(ArrowIcon, { ref: arrowRef, "aria-hidden": true, placement: calculatedPlacement, className: cx(classes.arrow, 'mfui-Tooltip__arrow'), style: arrowStyles })] }) })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, ...wrapperProps, className: cx(classes.root, 'mfui-Tooltip__root', className), ...rootAttributes, children: isValidElement(children) ? (cloneElement(children, calculatedOpen && !hideFromScreenReader
+                    ? { 'aria-describedby': tooltipId }
+                    : undefined)) : (_jsx("span", { ...(calculatedOpen && !hideFromScreenReader ? { 'aria-describedby': tooltipId } : undefined), children: children })) }), calculatedOpen ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setTooltipReference, className: cx(classes.tooltip, 'mfui-Tooltip__tooltip', contentProps?.className), role: "tooltip", id: tooltipId, "aria-hidden": hideFromScreenReader ? true : undefined, style: { maxWidth, ...tooltipStyles }, ...tooltipAttributes, children: [typeof content === 'string' ? _jsx(Typography, { variant: "helpMessage", children: content }) : content, _jsx(ArrowIcon, { ref: arrowRef, "aria-hidden": true, placement: calculatedPlacement, className: cx(classes.arrow, 'mfui-Tooltip__arrow'), style: arrowStyles })] }) })) : null] }));
 });

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

@@ -78,6 +78,17 @@ export type TooltipProps = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * If `true`, the tooltip will be hidden from screen readers.
+     * `aria-describedby` will not be added to the trigger element, and the tooltip content
+     * 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.
+     *
+     * @default false
+     */
+    hideFromScreenReader?: boolean;
     /**
      * Sets the maximum width of the tooltip content.
      *

package/dist/src/index.d.ts

@@ -1,3 +1,4 @@
+export * from './Breadcrumbs';
 export * from './Button';
 export * from './Dialog';
 export * from './DropdownMenu';

package/dist/src/index.js

@@ -1,3 +1,4 @@
+export * from './Breadcrumbs';
 export * from './Button';
 export * from './Dialog';
 export * from './DropdownMenu';

package/dist/styled-system/recipes/breadcrumbs-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface BreadcrumbsSlotRecipeVariant {
+  wrap: boolean
+}
+
+type BreadcrumbsSlotRecipeVariantMap = {
+  [key in keyof BreadcrumbsSlotRecipeVariant]: Array<BreadcrumbsSlotRecipeVariant[key]>
+}
+
+type BreadcrumbsSlotRecipeSlot = "root" | "list" | "item" | "truncateItem" | "separator" | "linkText" | "currentItem" | "truncateButton"
+
+export type BreadcrumbsSlotRecipeVariantProps = {
+  [key in keyof BreadcrumbsSlotRecipeVariant]?: ConditionalValue<BreadcrumbsSlotRecipeVariant[key]> | undefined
+}
+
+export interface BreadcrumbsSlotRecipeRecipe {
+  __slot: BreadcrumbsSlotRecipeSlot
+  __type: BreadcrumbsSlotRecipeVariantProps
+  (props?: BreadcrumbsSlotRecipeVariantProps): Pretty<Record<BreadcrumbsSlotRecipeSlot, string>>
+  raw: (props?: BreadcrumbsSlotRecipeVariantProps) => BreadcrumbsSlotRecipeVariantProps
+  variantMap: BreadcrumbsSlotRecipeVariantMap
+  variantKeys: Array<keyof BreadcrumbsSlotRecipeVariant>
+  splitVariantProps<Props extends BreadcrumbsSlotRecipeVariantProps>(props: Props): [BreadcrumbsSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof BreadcrumbsSlotRecipeVariantProps>>]
+  getVariantProps: (props?: BreadcrumbsSlotRecipeVariantProps) => BreadcrumbsSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI Breadcrumbs component.
+ */
+export declare const breadcrumbsSlotRecipe: BreadcrumbsSlotRecipeRecipe

package/dist/styled-system/recipes/breadcrumbs-slot-recipe.js

@@ -0,0 +1,63 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const breadcrumbsSlotRecipeDefaultVariants = {};
+const breadcrumbsSlotRecipeCompoundVariants = [];
+const breadcrumbsSlotRecipeSlotNames = [
+    [
+        "root",
+        "Breadcrumbs__root"
+    ],
+    [
+        "list",
+        "Breadcrumbs__list"
+    ],
+    [
+        "item",
+        "Breadcrumbs__item"
+    ],
+    [
+        "truncateItem",
+        "Breadcrumbs__truncateItem"
+    ],
+    [
+        "separator",
+        "Breadcrumbs__separator"
+    ],
+    [
+        "linkText",
+        "Breadcrumbs__linkText"
+    ],
+    [
+        "currentItem",
+        "Breadcrumbs__currentItem"
+    ],
+    [
+        "truncateButton",
+        "Breadcrumbs__truncateButton"
+    ]
+];
+const breadcrumbsSlotRecipeSlotFns = /* @__PURE__ */ breadcrumbsSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, breadcrumbsSlotRecipeDefaultVariants, getSlotCompoundVariant(breadcrumbsSlotRecipeCompoundVariants, slotName))]);
+const breadcrumbsSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(breadcrumbsSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const breadcrumbsSlotRecipeVariantKeys = [
+    "wrap"
+];
+const getVariantProps = (variants) => ({ ...breadcrumbsSlotRecipeDefaultVariants, ...compact(variants) });
+export const breadcrumbsSlotRecipe = /* @__PURE__ */ Object.assign(breadcrumbsSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'breadcrumbsSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: breadcrumbsSlotRecipeVariantKeys,
+    variantMap: {
+        "wrap": [
+            "true",
+            "false"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, breadcrumbsSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/index.d.ts

@@ -1,4 +1,5 @@
 /* eslint-disable */
+export * from './breadcrumbs-slot-recipe';
 export * from './icon-button-slot-recipe';
 export * from './focus-indicator-slot-recipe';
 export * from './typography-slot-recipe';

package/dist/styled-system/recipes/index.js

@@ -1,3 +1,4 @@
+export * from './breadcrumbs-slot-recipe.js';
 export * from './icon-button-slot-recipe.js';
 export * from './focus-indicator-slot-recipe.js';
 export * from './typography-slot-recipe.js';

package/dist/styles.css

@@ -252,8 +252,11 @@
   --mfui-sizes-mfui\.layout\.area\.horizontal\.floating-default: 448px;
   --mfui-sizes-mfui\.layout\.area\.horizontal\.fixed: 588px;
   --mfui-sizes-mfui\.layout\.area\.vertical\.global-header: 48px;
-                                                --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.2: 48px;
-          --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of3: 8px;
+      --mfui-sizes-mfui\.layout\.grid\.scale\.horizontal\.1: 14px;
+                                        --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1: 24px;
+  --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.2: 48px;
+      --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of6: 4px;
+    --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of3: 8px;
               --mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1-1of4: 30px;
           --mfui-sizes-mfui\.layout\.safe-area\.edge\.horizontal: 49px;
   --mfui-sizes-mfui\.layout\.safe-area\.edge\.vertical: 48px;
@@ -471,6 +474,76 @@
   --mfui-line-heights-mfui\.typography\.line-height\.condensed-input\.narrow: 21px;
         }
 
+.mfui-dOaOSF {
+  margin: 0;
+  list-style: none;
+  padding-inline: var(--mfui-sizes-mfui\.layout\.grid\.scale\.horizontal\.1);
+  padding-block: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.0-1of6);
+  display: flex;
+  align-items: center;
+}
+
+.mfui-czEBLe {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: 0;
+  height: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1);
+}
+
+[data-mfui-all-collapsed] .mfui-czEBLe {
+  flex-shrink: 1;
+}
+
+.mfui-fSvpzs {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: 0;
+  height: var(--mfui-sizes-mfui\.layout\.grid\.scale\.vertical\.1);
+}
+
+.mfui-fMjXdK {
+  padding-inline: var(--mfui-spacing-mfui\.size\.spacing\.inline\.horizontal\.comfort);
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+}
+
+.mfui-iMiGMy {
+  --mfui-colors-mfui\.color\.link\.content\.none: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+  --mfui-colors-mfui\.color\.link\.content\.hovered: var(--mfui-colors-mfui\.color\.neutral\.content\.hovered);
+  --mfui-colors-mfui\.color\.link\.content\.pressed: var(--mfui-colors-mfui\.color\.neutral\.content\.pressed);
+  text-decoration: underline;
+  cursor: pointer;
+  font-family: var(--mfui-fonts-mfui\.typography\.font-family\.condensed-link-body);
+  font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.condensed-link-body);
+  font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.condensed-link-body);
+  line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.condensed-link-body);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.mfui-iMiGMy,.mfui-jnwedv {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+
+.mfui-jnwedv {
+  font-family: var(--mfui-fonts-mfui\.typography\.font-family\.condensed-body);
+  font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.condensed-body);
+  font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.condensed-body);
+  line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.condensed-body);
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+}
+
+.mfui-cdQcHH {
+  flex-shrink: 0;
+}
+
 .mfui-iTZtNc {
   border: none;
   padding: 0;
@@ -538,8 +611,7 @@
 
 .mfui-fNikSU {
   text-decoration: underline;
-  align-items: center;
-  display: inline-flex;
+  display: inline;
   font-family: var(--mfui-fonts-mfui\.typography\.font-family\.link-body);
   cursor: pointer;
   color: var(--mfui-colors-mfui\.color\.link\.content\.none);
@@ -554,8 +626,9 @@
 }
 
 .mfui-ipiOcH {
-  display: flex;
+  display: inline-flex;
   align-items: center;
+  vertical-align: middle;
   padding-right: var(--mfui-spacing-mfui\.size\.padding\.icon-inline\.horizontal\.comfort);
   padding-left: var(--mfui-spacing-mfui\.size\.padding\.icon-inline\.horizontal\.comfort);
 }
@@ -5072,6 +5145,14 @@ li:last-child > .mfui-cXGJls {
 }
 }
 
+.mfui-bTxnBg {
+  flex-wrap: wrap;
+}
+
+.mfui-iuLcfv {
+  flex-wrap: nowrap;
+}
+
 .mfui-fSrZsx {
   border-radius: 12px;
   width: 24px;
@@ -6299,7 +6380,7 @@ li:last-child > .mfui-cXGJls {
 }
 
 .mfui-cVbPhZ {
-  height: calc(var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort) - 2px);
+  height: calc(100% - 2px);
 }
 
 .mfui-eSkNXq,.mfui-bNQKjD,.mfui-fTTJNR {
@@ -6317,7 +6398,7 @@ li:last-child > .mfui-cXGJls {
 }
 
 .mfui-gptIZX {
-  height: calc(var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.condensed) - 2px);
+  height: calc(100% - 2px);
 }
 
 .mfui-ccKtgp span {