@moneyforward/mfui-components 3.27.2 → 3.28.0

package/dist/src/DataTable/DataTableCell/DataTableCell.js

@@ -11,7 +11,7 @@ import { useFixedColumns } from '../../utilities/dom/useFixedColumns';
 import { handleCheckboxCellClick } from '../utils/handleCheckbox';
 import { mergeRefs } from '../../utilities/dom/mergeRefs';
 export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text', className, isRowHighlighted, disabled = false, depth = 0, columnIndex, disclosureIconProps: nestingIconProps, style, ...props }, ref) => {
-    const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection } = useDataTableContext();
+    const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection, layout } = useDataTableContext();
     const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = useFixedColumns({
         enableRowSelection,
         columnIndex,
@@ -25,6 +25,7 @@ export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text',
         fixedColumn: isFixedColumn,
         edgeFixedColumn: isEdgeFixedColumn,
         isCheckboxCell: enableRowSelection && columnIndex === 0,
+        layout,
     });
     const handleClick = (event) => {
         onClickCell?.(event);

package/dist/src/Popover/Popover.js

@@ -236,7 +236,9 @@ export function Popover({ renderTrigger, renderContent, open, onOpenStateChanged
         const scrollableAncestors = getOverflowAncestors(referenceElement).filter((ancestor) => ancestor instanceof Element);
         const popoverElement = refs.floating.current;
         const preventScroll = (event) => {
-            if (popoverElement?.contains(event.target))
+            // `event.target` is retargeted at shadow boundaries, so use the composed path
+            // to detect events coming from inside the popover across Shadow DOM.
+            if (popoverElement && event.composedPath().includes(popoverElement))
                 return;
             event.preventDefault();
         };

package/dist/src/SelectBox/SelectBox.js

@@ -38,7 +38,7 @@ const SKELETON_ITEM_COUNT = 4;
 export const SelectBox = forwardRef((props, ref) => {
     const { id, triggerProps, clearButtonProps, enableClearButton = false, size, options = [], defaultValue, 
     // eslint-disable-next-line @typescript-eslint/no-deprecated
-    placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderPopoverContent, enableAutoScrollToSelectedOption, popoverContentProps, popoverWrapperProps, onOpenStateChanged, showGroupOptionDivider, triggerWrapperProps, enableAutoUnmount = true, enableConstrainedPopoverWidth = false, enableVirtualization = false, virtualizationOptions, infiniteScroll, } = props;
+    placeholder, emptyMessage, disabled, invalid, required, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderPopoverContent, enableAutoScrollToSelectedOption, popoverContentProps, popoverWrapperProps, onOpenStateChanged, showGroupOptionDivider, triggerWrapperProps, enableAutoUnmount = true, enableConstrainedPopoverWidth = false, enableVirtualization = false, virtualizationOptions, infiniteScroll, } = props;
     const classes = selectBoxSlotRecipe({ size, showGroupOptionDivider });
     const triggerRef = useRef(null);
     const listBoxId = useId();
@@ -328,7 +328,7 @@ export const SelectBox = forwardRef((props, ref) => {
     const hasSelectedValue = value !== undefined || localSelectedOption !== null;
     const showClearButton = enableClearButton && hasSelectedValue;
     // Use Popover's centralized blur handling instead of custom logic
-    return (_jsx(Popover, { open: isOptionPanelOpen, targetDOMNode: targetDOMNode, minWidth: popoverContentProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: popoverContentProps?.allowedPlacements, enableConstrainedContentWidth: enableConstrainedPopoverWidth, renderContent: () => (_jsx("div", { ref: optionPanelRef, id: listBoxId, className: cx(classes.optionPanel, 'mfui-SelectBox__optionPanel', popoverContentProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: renderPopoverContent ? (renderPopoverContent({ searchNode, optionsNode })) : (_jsxs(_Fragment, { children: [searchNode, optionsNode] })) })), renderTrigger: ({ setTriggerRef, togglePopover, isPopoverOpen, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, ...triggerWrapperProps, className: cx(classes.triggerWrapper, 'mfui-SelectBox__triggerWrapper', triggerWrapperProps?.className), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", disabled: disabled, "aria-label": triggerProps?.['aria-label'], "aria-controls": listBoxId, "aria-expanded": isPopoverOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, className: cx(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, onClick: togglePopover, onKeyDown: (event) => {
+    return (_jsx(Popover, { open: isOptionPanelOpen, targetDOMNode: targetDOMNode, minWidth: popoverContentProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: popoverContentProps?.allowedPlacements, enableConstrainedContentWidth: enableConstrainedPopoverWidth, renderContent: () => (_jsx("div", { ref: optionPanelRef, id: listBoxId, className: cx(classes.optionPanel, 'mfui-SelectBox__optionPanel', popoverContentProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: renderPopoverContent ? (renderPopoverContent({ searchNode, optionsNode })) : (_jsxs(_Fragment, { children: [searchNode, optionsNode] })) })), renderTrigger: ({ setTriggerRef, togglePopover, isPopoverOpen, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, ...triggerWrapperProps, className: cx(classes.triggerWrapper, 'mfui-SelectBox__triggerWrapper', triggerWrapperProps?.className), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", disabled: disabled, "aria-label": triggerProps?.['aria-label'], "aria-controls": listBoxId, "aria-expanded": isPopoverOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, "aria-required": required, className: cx(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, onClick: togglePopover, onKeyDown: (event) => {
                             handleTypeAhead(event.nativeEvent);
                             handleTriggerKeyDown(event);
                         }, onBlur: handleTriggerBlur, children: [_jsx("span", { "data-mfui-content": "select-box-trigger-display-value", children: renderTriggerLabel() }), _jsx(DropdownIcon, { "aria-hidden": "true", focusable: false }), _jsx("input", { ref: ref, type: "hidden", value: localSelectedOption?.value ?? '', name: name, disabled: disabled })] }) }), showClearButton ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-SelectBox__clearButtonWrapper'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : size === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "select-box-clear-button", onClick: (event) => {

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

@@ -227,6 +227,12 @@ export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps
      * Whether the trigger is invalid.
      */
     invalid?: boolean;
+    /**
+     * Whether the trigger is required.
+     * When true, `aria-required="true"` is forwarded to the trigger so that
+     * assistive technologies announce the field as required.
+     */
+    required?: boolean;
     /**
      * Whether the popover width should be constrained to match the trigger element width.
      *

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

@@ -8,6 +8,7 @@ isCheckboxCell: boolean
 rowHighlighted: boolean
 fixedColumn: boolean
 edgeFixedColumn: "left" | "right"
+layout: "default" | "edge-to-edge"
 type: "text" | "amount"
 }
 
@@ -18,7 +19,7 @@ type DataTableCellSlotRecipeVariantMap = {
 type DataTableCellSlotRecipeSlot = "root" | "defaultCell" | "interactiveCell" | "disclosureIconWrapper" | "disclosureSpacing" | "skeletonCell"
 
 export type DataTableCellSlotRecipeVariantProps = {
-  [key in keyof DataTableCellSlotRecipeVariant]?: ConditionalValue<DataTableCellSlotRecipeVariant[key]> | undefined
+  [key in keyof DataTableCellSlotRecipeVariant]?: DataTableCellSlotRecipeVariant[key] | undefined
 }
 
 export interface DataTableCellSlotRecipeRecipe {

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

@@ -1,7 +1,22 @@
 import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
 import { createRecipe } from './create-recipe.js';
 const dataTableCellSlotRecipeDefaultVariants = {};
-const dataTableCellSlotRecipeCompoundVariants = [];
+const dataTableCellSlotRecipeCompoundVariants = [
+    {
+        "edgeFixedColumn": [
+            "left",
+            "right"
+        ],
+        "layout": "default",
+        "css": {
+            "root": {
+                "tr:last-child > &::before": {
+                    "height": "[100%]"
+                }
+            }
+        }
+    }
+];
 const dataTableCellSlotRecipeSlotNames = [
     [
         "root",
@@ -38,6 +53,7 @@ const dataTableCellSlotRecipeVariantKeys = [
     "rowHighlighted",
     "fixedColumn",
     "edgeFixedColumn",
+    "layout",
     "type"
 ];
 const getVariantProps = (variants) => ({ ...dataTableCellSlotRecipeDefaultVariants, ...compact(variants) });
@@ -65,6 +81,10 @@ export const dataTableCellSlotRecipe = /* @__PURE__ */ Object.assign(dataTableCe
             "left",
             "right"
         ],
+        "layout": [
+            "default",
+            "edge-to-edge"
+        ],
         "type": [
             "text",
             "amount"

package/dist/styles.css

@@ -636,9 +636,10 @@
 .mfui-ipiOcH {
   display: inline-flex;
   align-items: center;
-  vertical-align: middle;
+  vertical-align: bottom;
   padding-right: var(--mfui-spacing-mfui\.size\.padding\.icon-inline\.horizontal\.comfort);
   padding-left: var(--mfui-spacing-mfui\.size\.padding\.icon-inline\.horizontal\.comfort);
+  height: 1lh;
 }
 
 .mfui-eBBgyo {
@@ -8571,6 +8572,10 @@ li:last-child > .mfui-cXGJls {
   cursor: not-allowed;
 }
 
+tr:last-child > .mfui-gtOHny::before {
+  height: 100%;
+}
+
 .mfui-kSeSQV:is(:focus-visible, [data-focus-visible]),.mfui-dqyxbp:has(input:focus-visible, input[data-focus-visible=true], textarea:focus-visible, textarea[data-focus-visible=true]) {
   outline: 2px solid var(--mfui-colors-mfui\.color\.primary\.border\.none);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.27.2",
+  "version": "3.28.0",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",
@@ -63,8 +63,8 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@tanstack/react-virtual": "^3.13.18",
     "dayjs": "^1.11.13",
-    "@moneyforward/mfui-design-tokens": "^3.2.1",
-    "@moneyforward/mfui-icons-react": "^3.5.0"
+    "@moneyforward/mfui-icons-react": "^3.5.1",
+    "@moneyforward/mfui-design-tokens": "^3.2.1"
   },
   "scripts": {
     "prepare:panda": "panda codegen",