@moneyforward/mfui-components 3.2.0 → 3.4.0

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

@@ -3,8 +3,61 @@ import { type VirtualizerOptions } from '@tanstack/react-virtual';
 import { type SearchBoxProps } from '../SearchBox';
 import { type MultipleSelectBoxTriggerProps, type PassedProps } from './MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.types';
 import { type PopoverProps } from '../Popover';
+import { type InfiniteScrollDirection } from '../utilities/dom/useInfiniteScroll';
 export type AllowedValueTypes = string | number | undefined;
 export type VirtualOptionTypes = Pick<VirtualizerOptions<HTMLElement, Element>, 'estimateSize' | 'overscan'>;
+export type InfiniteScrollConfig = {
+    /**
+     * Enable infinite scroll functionality.
+     * When enabled, additional options can be loaded dynamically when scrolling.
+     *
+     * @default false
+     */
+    enabled?: boolean;
+    /**
+     * Callback executed when more options need to be loaded.
+     * Called when user scrolls near the top or bottom of the options list.
+     *
+     * @param direction - The direction of loading ('forward' for bottom, 'backward' for top)
+     */
+    onLoadMore?: (direction: InfiniteScrollDirection) => Promise<void>;
+    /**
+     * Whether there are more options available to load in the forward direction (bottom).
+     * Used to determine if infinite scroll should trigger when scrolling down.
+     *
+     * @default true
+     */
+    hasNextPage?: boolean;
+    /**
+     * Whether there are more options available to load in the backward direction (top).
+     * Used to determine if infinite scroll should trigger when scrolling up.
+     *
+     * @default true
+     */
+    hasPreviousPage?: boolean;
+    /**
+     * The scroll threshold in pixels for triggering infinite scroll.
+     * When the scroll position is within this distance from the top or bottom,
+     * the onLoadMore callback will be triggered.
+     *
+     * @default 100
+     */
+    threshold?: number;
+    /**
+     * The error message to display when loading fails.
+     * This message supports internationalization.
+     *
+     * @default "読み込みに失敗しました"
+     */
+    errorMessage?: string;
+    /**
+     * The text for the retry button when loading fails.
+     * This message supports internationalization.
+     *
+     * @default "再読み込み"
+     */
+    retryButtonText?: string;
+};
 export type MultipleSelectBoxOption<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = ({
     /**
      * The label to be displayed in the list.
@@ -253,6 +306,14 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
         minWidth?: PopoverProps['minWidth'];
         allowedPlacements?: PopoverProps['allowedPlacements'];
     };
+    /**
+     * The properties for the popover wrapper element.
+     *
+     * @property maxHeight - The maximum height of the popover wrapper element.
+     */
+    popoverWrapperProps?: {
+        maxHeight?: PopoverProps['maxHeight'];
+    };
     /**
      * Flag to indicate loading state of the options.
      * When true, the MultipleSelectBox will display skeleton placeholders
@@ -334,4 +395,29 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      * ```
      */
     virtualizationOptions?: VirtualOptionTypes;
+    /**
+     * Configuration for infinite scroll behavior.
+     * Allows loading additional options dynamically when scrolling.
+     *
+     * @example
+     * ```tsx
+     * <MultipleSelectBox
+     *   infiniteScroll={{
+     *     enabled: true,
+     *     onLoadMore: async (direction) => {
+     *       // Load more options from API
+     *       const newOptions = await fetchOptions(direction);
+     *       setOptions(prev => direction === 'forward' ?
+     *         [...prev, ...newOptions] :
+     *         [...newOptions, ...prev]
+     *       );
+     *     },
+     *     hasNextPage: true,
+     *     threshold: 100
+     *   }}
+     * />
+     * ```
+     */
+    infiniteScroll?: InfiniteScrollConfig;
 } & Pick<MultipleSelectBoxTriggerProps<T, AdditionalProps>, keyof PassedProps<T, AdditionalProps>>;
+export { type InfiniteScrollDirection } from '../utilities/dom/useInfiniteScroll';

package/dist/src/SelectBox/SelectBox.js

@@ -24,7 +24,7 @@ import { SelectBoxOptionComponent } from './SelectBoxOption';
 import { SelectBoxOptionGroup } from './SelectBoxOptionGroup';
 import { isOptionDisabled } from './utils/isSelectableOption';
 import { useVirtualizedOptions } from './hooks/useVirtualizedOptions';
-import { useInfiniteScroll } from './hooks/useInfiniteScroll';
+import { useInfiniteScroll } from '../utilities/dom/useInfiniteScroll';
 const DEFAULT_SCROLL_OPTIONS = {
     behavior: 'auto',
     block: 'center',
@@ -208,10 +208,10 @@ export const SelectBox = forwardRef((props, ref) => {
         if (renderDisplayValue) {
             return renderDisplayValue(localSelectedOption);
         }
-        if (placeholder && !localSelectedOption) {
-            return _jsx(Typography, { variant: "controlLabel", children: placeholder });
+        if (localSelectedOption) {
+            return (_jsx(Typography, { variant: "controlLabel", className: cx(classes.displayValue, 'mfui-SelectBox__displayValue'), children: localSelectedOption.label }));
         }
-        return (_jsx(Typography, { variant: "controlLabel", children: localSelectedOption ? localSelectedOption.label : placeholder }));
+        return (_jsx(Typography, { variant: "controlLabel", className: cx(classes.placeholder, 'mfui-SelectBox__placeholder'), children: placeholder }));
     };
     const searchNode = enableSearchOptions ? (_jsx("div", { className: cx(classes.menuHeader, 'mfui-SelectBox__menuHeader'), children: _jsx(SearchBox, { ref: searchInputRef, enableClearButton: true, value: searchText, textBoxSize: "small", autoComplete: "off", onChange: onSearchTextChange, ...searchBoxProps }) })) : null;
     // Render virtualized items - extracted for better maintainability

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

@@ -3,7 +3,7 @@ import { type VirtualizerOptions } from '@tanstack/react-virtual';
 import { type SelectBoxSlotRecipeVariant } from '../../styled-system/recipes';
 import { type SearchBoxProps } from '../SearchBox';
 import { type PopoverProps } from '../Popover';
-import { type InfiniteScrollDirection } from './hooks/useInfiniteScroll';
+import { type InfiniteScrollDirection } from '../utilities/dom/useInfiniteScroll';
 type AllowedValueTypes = string | number | undefined;
 export type VirtualOptionTypes = Pick<VirtualizerOptions<HTMLElement, Element>, 'estimateSize' | 'overscan'>;
 export type InfiniteScrollConfig = {
@@ -431,4 +431,4 @@ export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps
      */
     infiniteScroll?: InfiniteScrollConfig;
 };
-export { type InfiniteScrollDirection } from './hooks/useInfiniteScroll';
+export { type InfiniteScrollDirection } from '../utilities/dom/useInfiniteScroll';

package/dist/src/Tag/Tag.js

@@ -22,7 +22,7 @@ export function Tag({ label, onClick, href, customLinkComponent, disabled = fals
         return (_jsx(FocusIndicator, { children: _jsxs("span", { className: cx(classes.root, 'mfui-Tag__root', className), children: [_jsx(Typography, { variant: "condensedInput", children: label }), onClose ? closeButton : null] }) }));
     }
     const InternalTag = href ? (customLinkComponent ?? 'a') : 'button';
-    const tagProps = href ? { href, target, rel } : { disabled, onClick };
+    const tagProps = href ? { href, target, rel } : { disabled, onClick, type: 'button' };
     const WrapperTag = onClose ? 'div' : Fragment;
     const wrapperProps = onClose ? { className: cx(classes.wrapper, 'mfui-Tag__wrapper', className) } : undefined;
     return (_jsxs(WrapperTag, { ...wrapperProps, children: [_jsx(FocusIndicator, { children: _jsx(InternalTag, { className: cx(classes.root, 'mfui-Tag__root'), ...tagProps, children: _jsx(Typography, { variant: "condensedInput", children: label }) }) }), onClose ? closeButton : null] }));

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

@@ -13,7 +13,7 @@ type DisplayTableCellSlotRecipeVariantMap = {
   [key in keyof DisplayTableCellSlotRecipeVariant]: Array<DisplayTableCellSlotRecipeVariant[key]>
 }
 
-type DisplayTableCellSlotRecipeSlot = "root" | "content" | "depthSpacing"
+type DisplayTableCellSlotRecipeSlot = "root" | "content" | "depthSpacing" | "skeletonCell"
 
 export type DisplayTableCellSlotRecipeVariantProps = {
   [key in keyof DisplayTableCellSlotRecipeVariant]?: ConditionalValue<DisplayTableCellSlotRecipeVariant[key]> | undefined

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

@@ -14,6 +14,10 @@ const displayTableCellSlotRecipeSlotNames = [
     [
         "depthSpacing",
         "DisplayTableCell__depthSpacing"
+    ],
+    [
+        "skeletonCell",
+        "DisplayTableCell__skeletonCell"
     ]
 ];
 const displayTableCellSlotRecipeSlotFns = /* @__PURE__ */ displayTableCellSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, displayTableCellSlotRecipeDefaultVariants, getSlotCompoundVariant(displayTableCellSlotRecipeCompoundVariants, slotName))]);

package/dist/styled-system/recipes/multiple-select-box-slot-recipe.d.ts

@@ -10,7 +10,7 @@ type MultipleSelectBoxSlotRecipeVariantMap = {
   [key in keyof MultipleSelectBoxSlotRecipeVariant]: Array<MultipleSelectBoxSlotRecipeVariant[key]>
 }
 
-type MultipleSelectBoxSlotRecipeSlot = "popover" | "menuHeader" | "optionPanel" | "listBox" | "listItem" | "skeletonItem" | "emptyMessage" | "menuFooter"
+type MultipleSelectBoxSlotRecipeSlot = "popover" | "menuHeader" | "optionPanel" | "listBox" | "listItem" | "skeletonItem" | "emptyMessage" | "menuFooter" | "scrollWrapper" | "infiniteScrollError" | "infiniteScrollErrorMessage" | "infiniteScrollErrorButton" | "infiniteScrollErrorIcon" | "infiniteScrollLoading"
 
 export type MultipleSelectBoxSlotRecipeVariantProps = {
   [key in keyof MultipleSelectBoxSlotRecipeVariant]?: ConditionalValue<MultipleSelectBoxSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/multiple-select-box-slot-recipe.js

@@ -34,6 +34,30 @@ const multipleSelectBoxSlotRecipeSlotNames = [
     [
         "menuFooter",
         "MultipleSelectBox__menuFooter"
+    ],
+    [
+        "scrollWrapper",
+        "MultipleSelectBox__scrollWrapper"
+    ],
+    [
+        "infiniteScrollError",
+        "MultipleSelectBox__infiniteScrollError"
+    ],
+    [
+        "infiniteScrollErrorMessage",
+        "MultipleSelectBox__infiniteScrollErrorMessage"
+    ],
+    [
+        "infiniteScrollErrorButton",
+        "MultipleSelectBox__infiniteScrollErrorButton"
+    ],
+    [
+        "infiniteScrollErrorIcon",
+        "MultipleSelectBox__infiniteScrollErrorIcon"
+    ],
+    [
+        "infiniteScrollLoading",
+        "MultipleSelectBox__infiniteScrollLoading"
     ]
 ];
 const multipleSelectBoxSlotRecipeSlotFns = /* @__PURE__ */ multipleSelectBoxSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, multipleSelectBoxSlotRecipeDefaultVariants, getSlotCompoundVariant(multipleSelectBoxSlotRecipeCompoundVariants, slotName))]);

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

@@ -14,7 +14,7 @@ type SelectBoxSlotRecipeVariantMap = {
   [key in keyof SelectBoxSlotRecipeVariant]: Array<SelectBoxSlotRecipeVariant[key]>
 }
 
-type SelectBoxSlotRecipeSlot = "trigger" | "triggerWrapper" | "clearButtonWrapper" | "popover" | "menuHeader" | "optionPanel" | "scrollWrapper" | "listBox" | "listItem" | "skeletonItem" | "emptyMessage" | "infiniteScrollError" | "infiniteScrollErrorMessage" | "infiniteScrollErrorButton" | "infiniteScrollErrorIcon" | "infiniteScrollLoading"
+type SelectBoxSlotRecipeSlot = "trigger" | "triggerWrapper" | "clearButtonWrapper" | "displayValue" | "placeholder" | "popover" | "menuHeader" | "optionPanel" | "scrollWrapper" | "listBox" | "listItem" | "skeletonItem" | "emptyMessage" | "infiniteScrollError" | "infiniteScrollErrorMessage" | "infiniteScrollErrorButton" | "infiniteScrollErrorIcon" | "infiniteScrollLoading"
 
 export type SelectBoxSlotRecipeVariantProps = {
   [key in keyof SelectBoxSlotRecipeVariant]?: ConditionalValue<SelectBoxSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/select-box-slot-recipe.js

@@ -17,6 +17,14 @@ const selectBoxSlotRecipeSlotNames = [
         "clearButtonWrapper",
         "SelectBox__clearButtonWrapper"
     ],
+    [
+        "displayValue",
+        "SelectBox__displayValue"
+    ],
+    [
+        "placeholder",
+        "SelectBox__placeholder"
+    ],
     [
         "popover",
         "SelectBox__popover"

package/dist/styles.css

@@ -720,17 +720,17 @@
   min-height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort);
 }
 
+.mfui-DYOKU:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+  color: var(--mfui-colors-mfui\.color\.disabled\.content);
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
+}
+
 .mfui-DYOKU[data-mfui-focusable=true]:is(:focus-visible, [data-focus-visible]) {
   color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
   z-index: 1;
 }
 
-.mfui-DYOKU[data-mfui-focusable=true]:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
-  color: var(--mfui-colors-mfui\.color\.disabled\.content);
-  background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
-}
-
 .mfui-DYOKU[data-mfui-focusable=true]:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
   color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
@@ -2801,6 +2801,13 @@
   min-width: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-disclosure-inidicator\.width\.comfort);
 }
 
+.mfui-hrJUxa {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.horizontal\.comfort);
+  padding-block: 5px;
+  margin-block: var(--mfui-spacing-mfui\.size\.padding\.display-table-cell\.vertical\.comfort);
+  height: 24px;
+}
+
 .mfui-fXPtIg {
   overflow: auto;
   position: relative;
@@ -3261,6 +3268,50 @@
   bottom: 0;
 }
 
+.mfui-eacekU {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  min-height: 0px;
+}
+
+.mfui-dBhQXV {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.control\.horizontal\.comfort);
+  padding-block: 4px;
+  gap: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.mfui-bdFGwq {
+  gap: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.mfui-bNdwmf {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.mfui-ehdBWy {
+  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.none);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+}
+
+.mfui-bKkNJr {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 32px;
+}
+
+.mfui-bKkNJr .mfui-ProgressIndicator {
+  width: 16px;
+  height: 16px;
+}
+
 .mfui-frSlYl {
   border: 1px solid;
   gap: var(--mfui-spacing-mfui\.size\.spacing\.inline\.horizontal\.comfort);
@@ -4617,6 +4668,11 @@
   vertical-align: top;
 }
 
+.mfui-jypOde {
+  padding-block: 5px;
+  height: 24px;
+}
+
 .mfui-lkSlOI {
   border: 1px solid var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
   display: flex;
@@ -6020,29 +6076,15 @@
 }
 
 .mfui-cKTSwl,.mfui-eguNxK {
-  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.condensed);
-}
-
-.mfui-cKTSwl,.mfui-eguNxK,.mfui-hfZRBD {
   padding-block: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.vertical\.condensed);
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.horizontal\.condensed);
-}
-
-.mfui-hfZRBD {
-  height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.condensed);
+  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.condensed);
 }
 
 .mfui-ifJbzD,.mfui-lagYEk {
-  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.comfort);
-}
-
-.mfui-ifJbzD,.mfui-lagYEk,.mfui-VwckJ {
   padding-block: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.vertical\.comfort);
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.data-grid-cell\.horizontal\.comfort);
-}
-
-.mfui-VwckJ {
-  height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.comfort);
+  min-height: var(--mfui-sizes-mfui\.size\.dimension\.data-grid-cell\.height\.comfort);
 }
 
 .mfui-hCWOMt {
@@ -7106,11 +7148,17 @@
     font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.condensed-input\.narrow);
     line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.condensed-input\.narrow);
 }
-  .mfui-dlFVvi {
+  .mfui-dlFVvi,.mfui-hROZmU,.mfui-iTaRhG {
     font-family: var(--mfui-fonts-mfui\.typography\.font-family\.input\.narrow);
     font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.input\.narrow);
     font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.input\.narrow);
     line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.input\.narrow);
+}
+  .mfui-caqEqS,.mfui-jprhbA {
+    font-family: var(--mfui-fonts-mfui\.typography\.font-family\.condensed-input\.narrow);
+    font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.condensed-input\.narrow);
+    font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.condensed-input\.narrow);
+    line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.condensed-input\.narrow);
 }
   .mfui-iqpTgS {
     align-items: flex-start;
@@ -7120,6 +7168,18 @@
 }
   .mfui-fnKRCp {
     align-items: flex-end;
+}
+  .mfui-eSkNXq,.mfui-fBrVbr,.mfui-bNQKjD {
+    font-family: var(--mfui-fonts-mfui\.typography\.font-family\.input\.narrow);
+    font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.input\.narrow);
+    font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.input\.narrow);
+    line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.input\.narrow);
+}
+  .mfui-fQfOLY,.mfui-ccKtgp,.mfui-iLIvMR {
+    font-family: var(--mfui-fonts-mfui\.typography\.font-family\.condensed-input\.narrow);
+    font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.condensed-input\.narrow);
+    font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.condensed-input\.narrow);
+    line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.condensed-input\.narrow);
 }
   .mfui-dAPpSW,.mfui-edTKLG,.mfui-bRozDV {
     display: none;