@moneyforward/mfui-components 3.37.2 → 4.1.0

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

@@ -1,6 +1,19 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import { type HeadingProps } from '../Heading';
 export type CellDataType = 'text' | 'amount';
+export type DisplayTableRenderOptions = {
+    /**
+     * The original title element wrapped in the heading tag specified by `titleTag`.
+     * This ensures proper semantic HTML structure and accessibility.
+     * It is `null` when `title` is not provided.
+     */
+    headingNode: ReactNode;
+    /**
+     * The original lead element.
+     * It is `null` when `lead` is not provided.
+     */
+    leadNode: ReactNode;
+};
 /**
  * The props for the `DisplayTable` component.
  *
@@ -14,7 +27,7 @@ export type DisplayTableProps = {
      * This is used to provide a title for the table.
      * The title is displayed above the table.
      */
-    title: string;
+    title?: string;
     /**
      * The tag of the title.
      * This is used to determine the HTML tag to be used for the title.
@@ -23,6 +36,35 @@ export type DisplayTableProps = {
      * @default 'h4'
      */
     titleTag?: HeadingProps['tag'];
+    /**
+     * Custom render function for the entire heading area.
+     * It provides the original title and lead elements for flexible layout composition.
+     * When provided, it replaces the default rendering of both `title` and `lead`.
+     *
+     * @param options - Contains the original title and lead elements.
+     *
+     * @returns Custom content for the entire heading area.
+     *
+     * @example
+     * ```tsx
+     * <DisplayTable
+     *   title="Sales report"
+     *   lead="Updated daily"
+     *   renderHeading={({ headingNode, leadNode }) => (
+     *     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+     *       <div>
+     *         {headingNode}
+     *         {leadNode}
+     *       </div>
+     *       <Button>Edit</Button>
+     *     </div>
+     *   )}
+     * >
+     *   ...
+     * </DisplayTable>
+     * ```
+     */
+    renderHeading?: (options: DisplayTableRenderOptions) => ReactNode;
     /**
      * The lead text of the table.
      * This is used to provide additional information about the table.

package/dist/src/EmbeddedSidePane/EmbeddedSidePane.d.ts

@@ -1,3 +1,4 @@
+import { type EmbeddedSidePaneProps } from './EmbeddedSidePane.types';
 /**
  * `EmbeddedSidePane` is a variant of `SidePane` that is positioned absolutely within its container.
  * The container must have `position: relative` for proper positioning and `overflow: hidden/clip` for clipping.
@@ -5,9 +6,7 @@
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
  */
-export declare const EmbeddedSidePane: import("react").ForwardRefExoticComponent<{
-    container?: HTMLElement | null;
-} & Omit<import("..").SidePaneProps, "enableNonModal" | "targetDOMNode"> & import("react").RefAttributes<HTMLDivElement>> & {
+export declare const EmbeddedSidePane: import("react").ForwardRefExoticComponent<EmbeddedSidePaneProps & import("react").RefAttributes<HTMLDivElement>> & {
     /**
      * The `EmbeddedSidePane.Container` component is used to define the container for the `EmbeddedSidePane`.
      * It should be a parent element that has `position: relative` for proper positioning and `overflow: hidden/clip` for clipping.

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

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef } from 'react';
-import { type SidePaneProps } from '../SidePane/SidePane.types';
+import { type SidePaneAccessibleNameProps, type SidePaneBaseProps } from '../SidePane/SidePane.types';
 export type EmbeddedSidePaneProps = {
     /**
      * The container element where the EmbeddedSidePane will be rendered inside and positioned.
@@ -8,5 +8,5 @@ export type EmbeddedSidePaneProps = {
      * @default undefined
      */
     container?: HTMLElement | null;
-} & Omit<SidePaneProps, 'targetDOMNode' | 'enableNonModal'>;
+} & Omit<SidePaneBaseProps, 'targetDOMNode' | 'enableNonModal'> & SidePaneAccessibleNameProps;
 export type EmbeddedSidePaneContainerProps = ComponentPropsWithoutRef<'div'>;

package/dist/src/MainNavigation/BaseMainNavigation.js

@@ -40,7 +40,7 @@ export function BaseMainNavigation({ className, featureShortcut, navigationItems
                             if (navigation.children) {
                                 return (_jsx(NestedNavigationItemRenderer, { navigation: navigation, originalIndex: index, navId: navId, classes: classes, InternalLinkTag: InternalLinkTag, isCollapsed: isCollapsed, nestedNavigationDisplay: nestedNavigationDisplay, openPopoverIndex: openPopoverIndex, setOpenPopoverIndex: setOpenPopoverIndex }, index));
                             }
-                            return (_jsx("li", { className: cx(classes.listItem, 'mfui-BaseMainNavigation__listItem'), children: _jsx(Tooltip, { className: cx(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: !isCollapsed, placement: "right", children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-label": isCollapsed ? navigation.label : undefined, "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }), isCollapsed ? null : _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, !isCollapsed && navigation.statusSlot && navigation.locked !== true
+                            return (_jsx("li", { className: cx(classes.listItem, 'mfui-BaseMainNavigation__listItem'), children: _jsx(Tooltip, { className: cx(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: !isCollapsed, placement: "right", children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-label": isCollapsed ? navigation.label : undefined, "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }), isCollapsed ? null : _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), role: "img", "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, !isCollapsed && navigation.statusSlot && navigation.locked !== true
                                                         ? navigation.statusSlot
                                                         : null] }) }) }) }) }, index));
                         }) }), navigationItems.some((navigation) => 'isGroupMenu' in navigation && navigation.isGroupMenu) && (_jsx("ul", { className: cx(classes.groupMenuList, 'mfui-BaseMainNavigation__groupMenuList'), children: navigationItems.map((navigation, index) => {
@@ -55,7 +55,7 @@ export function BaseMainNavigation({ className, featureShortcut, navigationItems
                                 return null;
                             }
                             const groupLabelId = `${navId}-group-label-${String(index)}`;
-                            return (_jsxs("div", { className: cx(classes.groupLabelSection, 'mfui-BaseMainNavigation__groupLabelSection'), children: [_jsx("div", { className: cx(classes.groupLabel, 'mfui-BaseMainNavigation__groupLabel'), children: _jsx(Typography, { id: groupLabelId, variant: "condensedControlLabel", className: cx(classes.groupLabelText, 'mfui-BaseMainNavigation__groupLabelText'), children: navigation.label }) }), _jsx("ul", { "aria-labelledby": groupLabelId, className: cx(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: child.icon }), _jsx(Typography, { variant: "controlLabel", children: child.label })] }), child.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": child.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, child.statusSlot && child.locked !== true ? child.statusSlot : null] }) }) }) }, childIndex))) })] }, index));
+                            return (_jsxs("div", { className: cx(classes.groupLabelSection, 'mfui-BaseMainNavigation__groupLabelSection'), children: [_jsx("div", { className: cx(classes.groupLabel, 'mfui-BaseMainNavigation__groupLabel'), children: _jsx(Typography, { id: groupLabelId, variant: "condensedControlLabel", className: cx(classes.groupLabelText, 'mfui-BaseMainNavigation__groupLabelText'), children: navigation.label }) }), _jsx("ul", { "aria-labelledby": groupLabelId, className: cx(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: child.icon }), _jsx(Typography, { variant: "controlLabel", children: child.label })] }), child.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), role: "img", "aria-label": child.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, child.statusSlot && child.locked !== true ? child.statusSlot : null] }) }) }) }, childIndex))) })] }, index));
                         })] }), enableCollapsible ? (_jsx("div", { className: cx(classes.footer, 'mfui-BaseMainNavigation__footer'), children: _jsx(Tooltip, { content: toggleButtonLabel, placement: "right", children: _jsx(ToggleButton, { className: cx(classes.toggleButton, 'mfui-BaseMainNavigation__toggleButton'), iconClassName: cx(classes.toggleButtonIcon, 'mfui-BaseMainNavigation__toggleButtonIcon'), isCollapsed: isCollapsed, "aria-label": toggleButtonLabel, targetId: navId, handleClickToggleButton: handleClickToggleButton }) }) })) : null] }));
 }
 /**

package/dist/src/MainNavigation/NarrowViewportMainNavigation.js

@@ -54,13 +54,13 @@ export const NarrowViewportMainNavigation = forwardRef(({ className, featureShor
                                             return null;
                                         }
                                         return (_jsx("li", { className: cx(classes.listItem, 'mfui-NarrowViewportMainNavigation__listItem'), children: navigation.children ? (_jsxs("details", { open: ('isOpenByDefault' in navigation && navigation.isOpenByDefault) ||
-                                                    hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-NarrowViewportMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-NarrowViewportMainNavigation__parentSummary'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.parentSummaryIcon, 'mfui-NarrowViewportMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-NarrowViewportMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-NarrowViewportMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-NarrowViewportMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) : (_jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": navigation.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null] }) }) })) }, index));
+                                                    hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-NarrowViewportMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-NarrowViewportMainNavigation__parentSummary'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.parentSummaryIcon, 'mfui-NarrowViewportMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-NarrowViewportMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-NarrowViewportMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-NarrowViewportMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) : (_jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": navigation.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), role: "img", "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null] }) }) })) }, index));
                                     }) }), navigationItems.map((navigation, index) => {
                                     const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;
                                     if (!isGroupLabel) {
                                         return null;
                                     }
                                     const groupLabelId = `${navId}-group-label-${String(index)}`;
-                                    return (_jsxs("div", { className: cx(classes.groupLabelSection, 'mfui-NarrowViewportMainNavigation__groupLabelSection'), children: [_jsx("div", { className: cx(classes.groupLabel, 'mfui-NarrowViewportMainNavigation__groupLabel'), children: _jsx(Typography, { id: groupLabelId, variant: "condensedControlLabel", className: cx(classes.groupLabelText, 'mfui-NarrowViewportMainNavigation__groupLabelText'), children: navigation.label }) }), _jsx("ul", { "aria-labelledby": groupLabelId, className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: child.icon }), _jsx(Typography, { variant: "controlLabel", children: child.label })] }), child.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": child.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, child.statusSlot && child.locked !== true ? child.statusSlot : null] }) }) }) }, childIndex))) })] }, index));
+                                    return (_jsxs("div", { className: cx(classes.groupLabelSection, 'mfui-NarrowViewportMainNavigation__groupLabelSection'), children: [_jsx("div", { className: cx(classes.groupLabel, 'mfui-NarrowViewportMainNavigation__groupLabel'), children: _jsx(Typography, { id: groupLabelId, variant: "condensedControlLabel", className: cx(classes.groupLabelText, 'mfui-NarrowViewportMainNavigation__groupLabelText'), children: navigation.label }) }), _jsx("ul", { "aria-labelledby": groupLabelId, className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: child.icon }), _jsx(Typography, { variant: "controlLabel", children: child.label })] }), child.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), role: "img", "aria-label": child.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, child.statusSlot && child.locked !== true ? child.statusSlot : null] }) }) }) }, childIndex))) })] }, index));
                                 })] })] })] }) }));
 });

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

@@ -6,5 +6,13 @@
  *
  * @see Textarea
  */
-export { Textarea as MultilineTextBox } from '../Textarea';
-export type { TextareaProps as MultilineTextBoxProps } from '../Textarea';
+export { 
+/**
+ * @deprecated Use `Textarea` instead. `MultilineTextBox` will be removed in v5.0.0.
+ */
+Textarea as MultilineTextBox, } from '../Textarea';
+export type { 
+/**
+ * @deprecated Use `TextareaProps` instead. `MultilineTextBoxProps` will be removed in v5.0.0.
+ */
+TextareaProps as MultilineTextBoxProps, } from '../Textarea';

package/dist/src/MultilineTextBox/index.js

@@ -6,4 +6,8 @@
  *
  * @see Textarea
  */
-export { Textarea as MultilineTextBox } from '../Textarea';
+export { 
+/**
+ * @deprecated Use `Textarea` instead. `MultilineTextBox` will be removed in v5.0.0.
+ */
+Textarea as MultilineTextBox, } from '../Textarea';

package/dist/src/SectionMessage/SectionMessage.js

@@ -25,7 +25,7 @@ export const SectionMessage = forwardRef(({ messageType = 'neutral', region = 'i
     // 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 statusIconA11yProps = statusIconLabel === undefined ? { 'aria-hidden': true } : { role: 'img', 'aria-label': statusIconLabel };
     const StatusIcon = {
         neutral: null,
         info: _jsx(Info, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') }),
@@ -33,7 +33,7 @@ export const SectionMessage = forwardRef(({ messageType = 'neutral', region = 'i
         error: _jsx(Error, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') }),
         caution: (_jsx(Caution, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
         busy: _jsx(Pending, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') }),
-        progress: (_jsx(ProgressIndicator, { role: "img", ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
+        progress: (_jsx(ProgressIndicator, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
     }[messageType];
     const contentIsString = typeof children === 'string';
     return (_jsxs("div", { ref: ref, className: cx(classes.root, 'mfui-SectionMessage__root', className), ...props, role: "alert", children: [_jsxs("div", { className: cx(classes.topSection, 'mfui-SectionMessage__topSection'), children: [_jsxs("div", { className: cx(classes.content, 'mfui-SectionMessage__content'), children: [StatusIcon, contentIsString ? _jsx(Typography, { variant: "body", children: children }) : children] }), _jsxs("div", { className: cx(classes.rightSection, 'mfui-SectionMessage__rightSection'), children: [_jsx("div", { className: cx(classes.actionSlot, classes.desktopActionSlot, 'mfui-SectionMessage__actionSlot'), "data-mfui-content": "SectionMessage-action-slot-desktop", children: actionSlot }), onClose ? (_jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: onClose, children: _jsx(Close, { "aria-hidden": true, className: cx(classes.closeIcon, 'mfui-SectionMessage__closeIcon') }) })) : null] })] }), actionSlot && !disableResponsive ? (_jsx("div", { className: cx(classes.actionSlot, classes.mobileActionSlot, 'mfui-SectionMessage__actionSlot'), "data-mfui-content": "SectionMessage-action-slot-mobile", children: actionSlot })) : null] }));

package/dist/src/SidePane/SidePane.d.ts

@@ -1,32 +1,14 @@
+import { type SidePaneProps } from './SidePane.types';
 /**
  * The general purpose SidePane component.
  * This component extends the props of `<div>` element. The extended props and `ref` are
  * applied to the root overlay element covering the viewport, while `role="dialog"` (and
  * `aria-modal="true"` when `enableModal` is set) are set on the inner pane window element.
+ * The accessible name props (`title` / `aria-labelledby` / `aria-label`) are applied to the
+ * `role="dialog"` element, not the root overlay element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */
-export declare const SidePane: import("react").ForwardRefExoticComponent<{
-    children?: import("react").ReactNode;
-    title?: string;
-    renderHeading?: (options: import("./SidePane.types").SidePaneRenderOptions) => import("react").ReactNode;
-    actionSlot?: import("react").ReactNode;
-    position?: import("../../styled-system/recipes").SidePaneSlotRecipeVariant['position'];
-    closeButtonProps?: {
-        isCollapseIcon?: boolean;
-    } & Pick<import("react").ComponentPropsWithoutRef<'button'>, 'aria-label'>;
-    targetDOMNode?: HTMLElement | null;
-    enableModal?: boolean;
-    disableBackdropClose?: boolean;
-    enableAutoUnmount?: boolean;
-    formFooterProps?: Pick<import("..").FormFooterProps, 'optionsSlot' | 'actionsSlot'> & {
-        position?: import("..").FormFooterProps['position'];
-    };
-    insideProps?: {
-        className?: string;
-    };
-    open?: boolean;
-    onClose?: import("./SidePane.types").OnCloseFunction;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onClose" | "open"> & {
+export declare const SidePane: import("react").ForwardRefExoticComponent<SidePaneProps & {
     ref?: (import("react").RefCallback<HTMLDivElement | null> | import("react").RefObject<HTMLDivElement | null> | null) | undefined;
 } & import("react").Attributes>;

package/dist/src/SidePane/SidePane.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useId, useMemo, useState } from 'react';
 import { Close, PaneExpansionToRight, PaneExpansionToLeft } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { Heading } from '../Heading';
@@ -16,10 +16,12 @@ import { FormFooter } from '../FormFooter';
  * This component extends the props of `<div>` element. The extended props and `ref` are
  * applied to the root overlay element covering the viewport, while `role="dialog"` (and
  * `aria-modal="true"` when `enableModal` is set) are set on the inner pane window element.
+ * The accessible name props (`title` / `aria-labelledby` / `aria-label`) are applied to the
+ * `role="dialog"` element, not the root overlay element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */
-export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onClose, className, children, actionSlot, formFooterProps, position = 'right', enableModal = false, enableAutoUnmount = true, disableBackdropClose = false, closeButtonProps, targetDOMNode, insideProps, ...props }, ref) => {
+export const SidePane = compatibleForwardRef(({ open, title, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, renderHeading, onClose, className, children, actionSlot, formFooterProps, position = 'right', enableModal = false, enableAutoUnmount = true, disableBackdropClose = false, closeButtonProps, targetDOMNode, insideProps, ...props }, ref) => {
     const classes = sidePaneSlotRecipe({ position, nonModal: !enableModal });
     const [insideElement, setInsideElement] = useState(null);
     const { localOpen, handleCloseSidePane, handleStopCloseSidePane, sidePaneElement, setSidePaneElement } = useSidePaneStateController({
@@ -59,9 +61,11 @@ export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onCl
     const targetElement = useAutomaticTargetDomNode(targetDOMNode, sidePaneElement);
     const shouldRenderContent = enableAutoUnmount ? localOpen : true;
     const resolvedFormFooterPosition = formFooterProps?.position ?? 'sticky';
-    const headingNode = title ? (_jsx(Heading, { variant: "pageHeading2", tag: "h2", children: title })) : null;
+    const id = useId();
+    const titleId = `mfui-sidepane-title-${id}`;
+    const headingNode = title ? (_jsx(Heading, { variant: "pageHeading2", tag: "h2", id: titleId, children: title })) : null;
     return (_jsx(TargetDomNodeProvider, { targetDomNode: sidePaneElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setSidePaneElement, ...props, className: cx(classes.root, 'mfui-SidePane__root', className), style: {
                     ...props.style,
                     ...(!enableAutoUnmount && !localOpen && { display: 'none' }),
-                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { ref: setInsideElement, role: "dialog", "aria-modal": enableModal ? 'true' : undefined, tabIndex: -1, "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("div", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), _jsxs("div", { className: cx(classes.content, 'mfui-SidePane__content'), children: [_jsx("div", { className: cx(classes.contentBody, 'mfui-SidePane__contentBody'), children: children }), resolvedFormFooterPosition === 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] }), formFooterProps && resolvedFormFooterPosition !== 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] })] }) })) : null }));
+                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { ref: setInsideElement, role: "dialog", "aria-modal": enableModal ? 'true' : undefined, "aria-labelledby": ariaLabelledby ?? (title ? titleId : undefined), "aria-label": ariaLabel, tabIndex: -1, "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("div", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), _jsxs("div", { className: cx(classes.content, 'mfui-SidePane__content'), children: [_jsx("div", { className: cx(classes.contentBody, 'mfui-SidePane__contentBody'), children: children }), resolvedFormFooterPosition === 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] }), formFooterProps && resolvedFormFooterPosition !== 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] })] }) })) : null }));
 });

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

@@ -10,28 +10,63 @@ export type SidePaneRenderOptions = {
     headingNode: ReactNode;
 };
 /**
- * SidePaneProps is a type that defines the properties for the SidePane component.
+ * Props that provide the accessible name of the side pane dialog.
+ * At least one of `title`, `aria-labelledby`, or `aria-label` is required so that
+ * the `role="dialog"` element always has an accessible name.
+ *
+ * When multiple props are provided, they are applied in this priority order:
+ * 1. `aria-labelledby` — an explicit reference always wins, so a custom visible heading
+ *    rendered via `renderHeading` (without `headingNode`) can name the dialog even when
+ *    `title` is also set. Put an `id` on the custom heading element and pass it here.
+ * 2. `title` — the generated `<h2>` heading is referenced by the dialog via `aria-labelledby`.
+ * 3. `aria-label` — use when the side pane has no visible heading.
+ */
+export type SidePaneAccessibleNameProps = {
+    /**
+     * The heading title of the dialog.
+     * Rendered as an `<h2>` heading and referenced by the dialog element via `aria-labelledby`.
+     */
+    title: string;
+    'aria-labelledby'?: string;
+    'aria-label'?: string;
+} | {
+    title?: string;
+    /**
+     * The id of the visible element that labels the dialog.
+     * Use this when rendering a custom heading via `renderHeading` without `headingNode`.
+     */
+    'aria-labelledby': string;
+    'aria-label'?: string;
+} | {
+    title?: string;
+    'aria-labelledby'?: string;
+    /**
+     * The accessible name of the dialog.
+     * Use this when the side pane has no visible heading.
+     */
+    'aria-label': string;
+};
+/**
+ * SidePaneBaseProps is a type that defines the properties for the SidePane component,
+ * except for the accessible name props (see `SidePaneAccessibleNameProps`).
  *
  * It includes:
- * - `title`: The heading title of the dialog.
  * - `isOpen` and `onClose`: These props are conditionally required based on whether the component is controlled or uncontrolled.
  *   - If `isOpen` is defined, `onClose` is required (controlled component).
  *   - If `isOpen` is undefined, `onClose` is optional (uncontrolled component).
  * - Additional props from `ComponentPropsWithoutRef<'div'>` are also included.
  */
-export type SidePaneProps = {
+export type SidePaneBaseProps = {
     /**
      * The main content of the side pane.
      */
     children?: ReactNode;
-    /**
-     * The heading title of the dialog.
-     */
-    title?: string;
     /**
      * Custom render function for the heading area.
      * Provides the original headingNode wrapped in <h2> tag for flexible layout composition.
      * When provided, this takes precedence over the default title rendering.
+     * If the custom layout does not render `headingNode`, provide `aria-labelledby` or
+     * `aria-label` instead of `title` so the dialog keeps its accessible name.
      *
      * @param options - Contains the headingNode for layout composition
      *
@@ -143,4 +178,11 @@ export type SidePaneProps = {
      * This prop is required when using the side pane as a controlled component.
      */
     onClose?: OnCloseFunction;
-} & Omit<ComponentPropsWithoutRef<'div'>, 'open' | 'onClose'>;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'open' | 'onClose' | 'title' | 'aria-label' | 'aria-labelledby'>;
+/**
+ * SidePaneProps is a type that defines the properties for the SidePane component.
+ *
+ * It requires at least one of `title`, `aria-labelledby`, or `aria-label`
+ * so that the dialog always has an accessible name (see `SidePaneAccessibleNameProps`).
+ */
+export type SidePaneProps = SidePaneBaseProps & SidePaneAccessibleNameProps;

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

@@ -1,2 +1,2 @@
 export { SidePane } from './SidePane';
-export { type SidePaneProps } from './SidePane.types';
+export { type SidePaneProps, type SidePaneBaseProps, type SidePaneAccessibleNameProps } from './SidePane.types';

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

@@ -10,8 +10,6 @@ declare function SidebarBase({ className, logoSlot, mainNavigationItems, extraNa
  * A navigation layout component that combines a logo header, a navigation area,
  * and a footer with icon menu and user information.
  *
- * **EXPERIMENTAL**: This component is experimental and may be changed or removed in the future.
- *
  * The width is resizable via the drag handle on the right edge. See the `WidthPersistence` story for
  * an example of persisting the width across reloads via `onWidthChange` and `defaultWidth`.
  *

package/dist/src/Sidebar/Sidebar.js

@@ -51,8 +51,6 @@ function SidebarToggleButton({ isCollapsed, ariaLabel, navId, onClick, }) {
  * A navigation layout component that combines a logo header, a navigation area,
  * and a footer with icon menu and user information.
  *
- * **EXPERIMENTAL**: This component is experimental and may be changed or removed in the future.
- *
  * The width is resizable via the drag handle on the right edge. See the `WidthPersistence` story for
  * an example of persisting the width across reloads via `onWidthChange` and `defaultWidth`.
  *

package/dist/src/SubNavigation/SubNavigation.js

@@ -39,7 +39,7 @@ const renderNavigationItem = (navigationItem, customLinkComponent, classes, nest
     }
     if (href) {
         // The the parent item will be rendered as a link with separated disclosure icon button.
-        return (_jsxs(_Fragment, { children: [_jsx(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes, renderNavigationLabel: renderNavigationLabel }), _jsx(NestedNavigationList, { summarySlot: _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-label": label }) }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1, renderNavigationLabel: renderNavigationLabel })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes, renderNavigationLabel: renderNavigationLabel }), _jsx(NestedNavigationList, { summarySlot: _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { role: "img", "aria-label": label }) }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1, renderNavigationLabel: renderNavigationLabel })] }));
     }
     // The the parent item will be rendered as a disclosure button with an icon.
     return (_jsx(NestedNavigationList, { summarySlot: _jsxs(_Fragment, { children: [_jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes, renderNavigationLabel }), _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-hidden": "true" }) })] }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1, renderNavigationLabel: renderNavigationLabel }));
@@ -52,7 +52,7 @@ function NavigationLabelGroup({ label, labelIcon, locked, lockIconProps, statusS
     // If locked=true, display <Lock /> icon in preference to any other status of the statusSlot option.
     const renderStatus = () => {
         if (locked) {
-            return (_jsx("div", { className: cx(classes.statusSlot, 'mfui-SubNavigation__statusSlot'), children: _jsx(Lock, { "aria-label": lockIconProps?.['aria-label'] ?? 'ロックされています' }) }));
+            return (_jsx("div", { className: cx(classes.statusSlot, 'mfui-SubNavigation__statusSlot'), children: _jsx(Lock, { role: "img", "aria-label": lockIconProps?.['aria-label'] ?? 'ロックされています' }) }));
         }
         if (statusSlot) {
             return _jsx("div", { className: cx(classes.statusSlot, 'mfui-SubNavigation__statusSlot'), children: statusSlot });

package/dist/src/TextLink/TextLink.js

@@ -14,5 +14,5 @@ import { textLinkSlotRecipe } from '../../styled-system/recipes';
 export const TextLink = forwardRef(({ children, variant = 'inherit', className, customLinkComponent, showExternalIcon, externalIconProps, ...rest }, ref) => {
     const classes = textLinkSlotRecipe({ variant });
     const Tag = customLinkComponent ?? 'a';
-    return (_jsx(FocusIndicator, { children: _jsxs(Tag, { ...rest, ref: ref, className: cx(classes.root, 'mfui-TextLink__root', className), children: [children, showExternalIcon ? (_jsx("span", { className: cx(classes.externalLinkIconContainer, 'mfui-TextLink__externalLinkIconContainer'), children: _jsx(ExternalLink, { className: cx(classes.externalLinkIcon, 'mfui-TextLink__externalLinkIcon'), "aria-label": externalIconProps ?? '別のタブで開きます' }) })) : null] }) }));
+    return (_jsx(FocusIndicator, { children: _jsxs(Tag, { ...rest, ref: ref, className: cx(classes.root, 'mfui-TextLink__root', className), children: [children, showExternalIcon ? (_jsx("span", { className: cx(classes.externalLinkIconContainer, 'mfui-TextLink__externalLinkIconContainer'), children: _jsx(ExternalLink, { className: cx(classes.externalLinkIcon, 'mfui-TextLink__externalLinkIcon'), role: "img", "aria-label": externalIconProps ?? '別のタブで開きます' }) })) : null] }) }));
 });

package/dist/src/Toast/Toast.js

@@ -21,7 +21,7 @@ export const Toast = forwardRef(({ className, type = 'success', actionSlot, mess
     // 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 statusIconA11yProps = statusIconLabel === undefined ? { 'aria-hidden': true } : { role: 'img', 'aria-label': statusIconLabel };
     const icon = (() => {
         if (type === 'success') {
             return _jsx(Approval, { ...statusIconA11yProps });

package/dist/src/index.d.ts

@@ -8,6 +8,7 @@ export * from './CheckboxGroup';
 export * from './DataGrid';
 export * from './DataTable';
 export * from './DateTimeSelection';
+export * from './DecoratedKeyValueList';
 export * from './DeterminateProgressIndicator';
 export * from './Dialog';
 export * from './Disclosure';

package/dist/src/index.js

@@ -8,6 +8,7 @@ export * from './CheckboxGroup';
 export * from './DataGrid';
 export * from './DataTable';
 export * from './DateTimeSelection';
+export * from './DecoratedKeyValueList';
 export * from './DeterminateProgressIndicator';
 export * from './Dialog';
 export * from './Disclosure';

package/dist/styled-system/recipes/data-table-cell-slot-recipe.d.ts

@@ -5,6 +5,7 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 interface DataTableCellSlotRecipeVariant {
   size: "small" | "medium"
 isCheckboxCell: boolean
+isCheckboxCellInteractive: boolean
 rowHighlighted: boolean
 fixedColumn: boolean
 verticalBorder: boolean

package/dist/styled-system/recipes/data-table-cell-slot-recipe.js

@@ -4,6 +4,7 @@ const dataTableCellSlotRecipeDefaultVariants = {};
 const dataTableCellSlotRecipeCompoundVariants = [
     {
         "isCheckboxCell": true,
+        "isCheckboxCellInteractive": true,
         "rowHighlighted": true,
         "css": {
             "defaultCell": {
@@ -74,6 +75,7 @@ const dataTableCellSlotRecipeFn = memo((props = {}) => {
 const dataTableCellSlotRecipeVariantKeys = [
     "size",
     "isCheckboxCell",
+    "isCheckboxCellInteractive",
     "rowHighlighted",
     "fixedColumn",
     "verticalBorder",
@@ -97,6 +99,9 @@ export const dataTableCellSlotRecipe = /* @__PURE__ */ Object.assign(dataTableCe
         "isCheckboxCell": [
             "true"
         ],
+        "isCheckboxCellInteractive": [
+            "true"
+        ],
         "rowHighlighted": [
             "true"
         ],

package/dist/styled-system/recipes/data-table-row-slot-recipe.d.ts

@@ -6,6 +6,7 @@ interface DataTableRowSlotRecipeVariant {
   layout: "default" | "edge-to-edge"
 highlighted: boolean
 interactive: boolean
+rowClickSelectable: boolean
 disabled: boolean
 }
 
@@ -13,7 +14,7 @@ type DataTableRowSlotRecipeVariantMap = {
   [key in keyof DataTableRowSlotRecipeVariant]: Array<DataTableRowSlotRecipeVariant[key]>
 }
 
-type DataTableRowSlotRecipeSlot = "root"
+type DataTableRowSlotRecipeSlot = "root" | "selectionCheckbox"
 
 export type DataTableRowSlotRecipeVariantProps = {
   [key in keyof DataTableRowSlotRecipeVariant]?: DataTableRowSlotRecipeVariant[key] | undefined

package/dist/styled-system/recipes/data-table-row-slot-recipe.js

@@ -33,6 +33,10 @@ const dataTableRowSlotRecipeSlotNames = [
     [
         "root",
         "DataTableRow__root"
+    ],
+    [
+        "selectionCheckbox",
+        "DataTableRow__selectionCheckbox"
     ]
 ];
 const dataTableRowSlotRecipeSlotFns = /* @__PURE__ */ dataTableRowSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableRowSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableRowSlotRecipeCompoundVariants, slotName))]);
@@ -43,6 +47,7 @@ const dataTableRowSlotRecipeVariantKeys = [
     "layout",
     "highlighted",
     "interactive",
+    "rowClickSelectable",
     "disabled"
 ];
 const getVariantProps = (variants) => ({ ...dataTableRowSlotRecipeDefaultVariants, ...compact(variants) });
@@ -65,6 +70,10 @@ export const dataTableRowSlotRecipe = /* @__PURE__ */ Object.assign(dataTableRow
             "true",
             "false"
         ],
+        "rowClickSelectable": [
+            "true",
+            "false"
+        ],
         "disabled": [
             "true",
             "false"

package/dist/styled-system/recipes/decorated-key-value-list-item-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 DecoratedKeyValueListItemSlotRecipeVariant {
+  
+}
+
+type DecoratedKeyValueListItemSlotRecipeVariantMap = {
+  [key in keyof DecoratedKeyValueListItemSlotRecipeVariant]: Array<DecoratedKeyValueListItemSlotRecipeVariant[key]>
+}
+
+type DecoratedKeyValueListItemSlotRecipeSlot = "root" | "keyItem" | "valueGroup" | "valueItem"
+
+export type DecoratedKeyValueListItemSlotRecipeVariantProps = {
+  [key in keyof DecoratedKeyValueListItemSlotRecipeVariant]?: ConditionalValue<DecoratedKeyValueListItemSlotRecipeVariant[key]> | undefined
+}
+
+export interface DecoratedKeyValueListItemSlotRecipeRecipe {
+  __slot: DecoratedKeyValueListItemSlotRecipeSlot
+  __type: DecoratedKeyValueListItemSlotRecipeVariantProps
+  (props?: DecoratedKeyValueListItemSlotRecipeVariantProps): Pretty<Record<DecoratedKeyValueListItemSlotRecipeSlot, string>>
+  raw: (props?: DecoratedKeyValueListItemSlotRecipeVariantProps) => DecoratedKeyValueListItemSlotRecipeVariantProps
+  variantMap: DecoratedKeyValueListItemSlotRecipeVariantMap
+  variantKeys: Array<keyof DecoratedKeyValueListItemSlotRecipeVariant>
+  splitVariantProps<Props extends DecoratedKeyValueListItemSlotRecipeVariantProps>(props: Props): [DecoratedKeyValueListItemSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DecoratedKeyValueListItemSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DecoratedKeyValueListItemSlotRecipeVariantProps) => DecoratedKeyValueListItemSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DecoratedKeyValueListItem component.
+ */
+export declare const decoratedKeyValueListItemSlotRecipe: DecoratedKeyValueListItemSlotRecipeRecipe