@moneyforward/mfui-components 2.48.2 → 3.0.0

package/dist/esm/src/FileDropZone/FileDropZone.types.d.ts

@@ -1,194 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import { type TextBoxSlotRecipeVariant } from '../../styled-system/recipes';
-import { type IconButtonProps } from '../IconButton/IconButton.types';
-/**
- * The props for the FileBox component.
- */
-export type FileDropZoneProps = {
-    /**
-     * Whether the file input is invalid or not.
-     * This will change the style of the file box.
-     *
-     * @default false
-     */
-    invalid?: TextBoxSlotRecipeVariant['invalid'];
-    /**
-     * Whether the file input is disabled or not.
-     * If disabled, users cannot select files.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Allow users to select multiple files.
-     *
-     * @default false
-     */
-    multiple?: ComponentPropsWithoutRef<'input'>['multiple'];
-    /**
-     * Accept attribute for the file input.
-     *
-     * @default undefined
-     */
-    accept?: ComponentPropsWithoutRef<'input'>['accept'];
-    /**
-     * The properties for the clear button.
-     * If this prop is not passed, the default values for each property will be applied.
-     *
-     * @property aria-label - The alternative text for the clear button.
-     *
-     * @default "ファイルをクリアする"
-     */
-    clearButtonProps?: Pick<IconButtonProps, 'aria-label'>;
-    /**
-     * The error message for the file drop zone.
-     *
-     * @default undefined
-     */
-    errorMessage?: string;
-    /**
-     * The helper message for the file drop zone.
-     *
-     * @default undefined
-     */
-    helperMessage?: string;
-    /**
-     * The image url for the illustration.
-     *
-     * @default undefined
-     */
-    illustrationUrl?: string;
-    /**
-     * The prop to add extra element.
-     *
-     * @default undefined
-     */
-    extraElement?: React.ReactNode;
-    /**
-     * The selected file names (controlled mode).
-     * If provided, the component is controlled and displays these file names.
-     * If not provided, the component manages its own state.
-     *
-     * **Important:** This prop accepts file names as strings for display purposes only.
-     * These strings should correspond to actual files but are not validated against
-     * the underlying file input state. Ensure consistency between displayed names
-     * and actual selected files in your application logic.
-     *
-     * **Expected format:** Array of non-empty file name strings.
-     * Example: `['document.pdf', 'image.jpg']`
-     *
-     * @default undefined
-     */
-    value?: string[] | undefined;
-    /**
-     * The initial file names (uncontrolled mode).
-     * Only used when value is not provided.
-     *
-     * **Expected format:** Array of valid, non-empty file name strings.
-     * Example: `['document.pdf', 'image.jpg']`
-     *
-     * **Note:** Invalid values (empty strings, non-strings, null, undefined)
-     * may cause unexpected display behavior. Validate your data before passing it to this prop.
-     *
-     * @default undefined
-     */
-    defaultValue?: string[] | undefined;
-    /**
-     * The callback function to be called when files are selected through dialog or drag-and-drop.
-     * This is the standard HTML input onChange event.
-     *
-     * @param event - The change event from the file input element
-     *
-     * @default undefined
-     */
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    /**
-     * The callback function to be called when the file is cleared.
-     *
-     * @default undefined
-     */
-    onClear?: () => void;
-    /**
-     * The callback function to be called when the controlled value becomes empty.
-     * Only called in controlled mode when value transitions from non-empty to empty.
-     * Separate from onClear to distinguish between user actions and programmatic changes.
-     *
-     * @default undefined
-     */
-    onValueCleared?: () => void;
-    /**
-     * The width of the filebox element.
-     *
-     * @default 280
-     */
-    fileBoxWidth?: number;
-    /**
-     * Custom text for the file selection button.
-     *
-     * @default "ファイルを選択"
-     *
-     * @example "Select files" // English
-     */
-    fileSelectButtonLabel?: string;
-    /**
-     * Custom text for drag and drop instruction area.
-     * Use line breaks (`\n`) to control multi-line display.
-     *
-     * @default "ファイルを\nドラッグアンドドロップ\nまたは"
-     *
-     * @example "Drag files here\nor" // English (single line break)
-     */
-    instructionText?: string;
-    /**
-     * Custom function to generate file count display text.
-     * Used when multiple files are selected to show count.
-     *
-     * @param count - Number of selected files
-     *
-     * @returns Text to display for file count
-     *
-     * @default (count) => `${count}ファイル`
-     *
-     * @example
-     * // English
-     * (count) => `${count} files`
-     */
-    fileCountLabel?: (count: number) => string;
-    /**
-     * Custom screen reader announcements for selected files.
-     * Used for accessibility - announced when files are selected.
-     *
-     * @example
-     * // English
-     * {
-     *   single: (filename) => `Selected file: ${filename}`,
-     *   multiple: (count) => `Selected files: ${count} files`
-     * }
-     */
-    screenReaderTexts?: {
-        /**
-         * Screen reader text for single file selection.
-         *
-         * @param filename - Name of the selected file
-         *
-         * @returns Announcement text for screen readers
-         *
-         * @default (filename) => `選択済みファイル: ${filename}`
-         *
-         * @example (filename) => `Selected file: ${filename}` // English
-         */
-        single?: (filename: string) => string;
-        /**
-         * Screen reader text for multiple file selection.
-         *
-         * @param count - Number of selected files
-         *
-         * @returns Announcement text for screen readers
-         *
-         * @default (count) => `選択済みファイル: ${count}個のファイル`
-         *
-         * @example (count) => `Selected files: ${count} files` // English
-         */
-        multiple?: (count: number) => string;
-    };
-} & ComponentPropsWithoutRef<'input'>;

package/dist/esm/src/FileDropZone/index.d.ts

@@ -1,4 +0,0 @@
-export type { FileDropZoneProps } from './FileDropZone.types';
-export { FileDropZone } from './FileDropZone';
-export { getFilesFromEvent, formatFileSize, getFileExtension, matchesMimeType, hasExtension, getTotalFileSize, createValidationResult, FILE_TYPES, } from './utils/fileHelpers';
-export type { FileValidationResult } from './utils/fileHelpers';

package/dist/esm/src/FileDropZone/utils/fileHelpers.d.ts

@@ -1,87 +0,0 @@
-/**
- * Extract files from a file input change event
- *
- * @param event - The file input change event
- *
- * @returns The files from the event
- */
-export declare function getFilesFromEvent(event: React.ChangeEvent<HTMLInputElement>): File[];
-/**
- * Format file size in human-readable format
- *
- * @param bytes - The size in bytes
- *
- * @returns The formatted file size
- */
-export declare function formatFileSize(bytes: number): string;
-/**
- * Get file extension from filename
- *
- * @param filename - The name of the file
- *
- * @returns The file extension including the dot
- */
-export declare function getFileExtension(filename: string): string;
-/**
- * Check if file matches a MIME type pattern
- *
- * @param file - The file to check
- *
- * @param pattern - The MIME type pattern
- *
- * @returns True if the file matches the pattern
- */
-export declare function matchesMimeType(file: File, pattern: string): boolean;
-/**
- * Check if file has specific extension
- *
- * @param file - The file to check
- *
- * @param extension - The extension to check
- *
- * @returns True if the file has the extension
- */
-export declare function hasExtension(file: File, extension: string): boolean;
-/**
- * Get total size of multiple files
- *
- * @param files - The files to get the total size of
- *
- * @returns The total size of the files
- */
-export declare function getTotalFileSize(files: File[]): number;
-/**
- * Simple validation result type
- *
- * @property isValid - Whether the file is valid
- *
- * @property error - The error message
- */
-export type FileValidationResult = {
-    isValid: boolean;
-    error?: string;
-};
-/**
- * Helper to create validation results
- *
- * @param isValid - Whether the file is valid
- *
- * @param error - The error message
- *
- * @returns The validation result
- */
-export declare function createValidationResult(isValid: boolean, error?: string): FileValidationResult;
-/**
- * Common file type groups
- *
- * @property IMAGES - The image file types
- *
- * @property DOCUMENTS - The document file types
- *
- * @property ARCHIVES - The archive file types
- */
-export declare const FILE_TYPES: {
-    readonly IMAGES: readonly ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"];
-    readonly DOCUMENTS: readonly ["application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "text/plain"];
-    readonly ARCHIVES: readonly ["application/zip", "application/x-rar-compressed", "application/x-tar"];
-};

package/dist/esm/src/FilterSelectBox/FilterSelectBox.d.ts

@@ -1,7 +0,0 @@
-import { type FilterSelectBoxProps } from './FilterSelectBox.types';
-/**
- * The FilterSelectBox component.
- * This component extends SelectBox with custom styling and display value formatting.
- * This component switches the variants of looks and behaviors depends on the props: size, disabled.
- */
-export declare function FilterSelectBox({ label, onOpenStateChanged, className, enableClearButton, clearButtonProps, ...props }: FilterSelectBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/FilterSelectBox/FilterSelectBox.types.d.ts

@@ -1,17 +0,0 @@
-import { type SelectBoxProps } from '../SelectBox';
-export type FilterSelectBoxProps = {
-    /**
-     * The label to display for the filter
-     */
-    label: string;
-    /**
-     * The class name to apply to the component
-     */
-    className?: string;
-    /**
-     * Callback fired when the open state of the FilterSelectBox changes.
-     *
-     * @param open - The new open state of the FilterSelectBox.
-     */
-    onOpenStateChanged?: (open: boolean) => void;
-} & Omit<SelectBoxProps, 'renderDisplayValue' | 'placeholder' | 'invalid' | 'triggerProps'>;

package/dist/esm/src/FilterSelectBox/index.d.ts

@@ -1,2 +0,0 @@
-export { FilterSelectBox } from './FilterSelectBox';
-export type { FilterSelectBoxProps } from './FilterSelectBox.types';

package/dist/esm/src/FilterTrigger/FilterTrigger.d.ts

@@ -1,15 +0,0 @@
-/**
- * A trigger component that has the same visual style as FilterSelectBox's trigger.
- * It does not manage popover state internally and is intended to be used with the Popover component.
- */
-export declare const FilterTrigger: import("react").ForwardRefExoticComponent<{
-    label: string;
-    value?: string;
-    inputProps?: Omit<import("react").ComponentPropsWithoutRef<"input">, "type">;
-    className?: string;
-    enableClearButton?: boolean;
-    clearButtonProps?: {
-        "aria-label"?: string;
-        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    };
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/src/FilterTrigger/FilterTrigger.types.d.ts

@@ -1,37 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-export type FilterTriggerProps = {
-    /**
-     * The label to display for the filter.
-     */
-    label: string;
-    /**
-     * The selected value to display. If not provided, only the label will be shown.
-     */
-    value?: string;
-    /**
-     * Props for the hidden input element.
-     */
-    inputProps?: Omit<ComponentPropsWithoutRef<'input'>, 'type'>;
-    /**
-     * Additional class name for the trigger button.
-     */
-    className?: string;
-    /**
-     * Whether the clear button should be displayed.
-     *
-     * @default false
-     */
-    enableClearButton?: boolean;
-    /**
-     * Props for the clear button.
-     * If this prop is not passed, the clear button will not be displayed.
-     *
-     * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
-     *
-     * @property onClick - The callback function when the clear button is clicked.
-     */
-    clearButtonProps?: {
-        'aria-label'?: string;
-        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    };
-} & Omit<ComponentPropsWithoutRef<'button'>, 'children'>;

package/dist/esm/src/FilterTrigger/index.d.ts

@@ -1,2 +0,0 @@
-export { FilterTrigger } from './FilterTrigger';
-export type { FilterTriggerProps } from './FilterTrigger.types';

package/dist/esm/src/FocusIndicator/FocusIndicator.d.ts

@@ -1,27 +0,0 @@
-import { type FocusIndicatorProps } from './FocusIndicator.types';
-/**
- * The component for display focus indicator.
- *
- * A focus indicator is displayed when the child component is focused.
- * This component can only wrap one child component that can be focused.
- *
- * @example
- * ```tsx
- * // Standard outline (default) - for most components
- * <FocusIndicator>
- *   <button>Click me</button>
- * </FocusIndicator>
- *
- * // Hide white border - for small elements like checkboxes
- * // Note: May not be visible in containers with overflow:hidden in some browsers
- * <FocusIndicator hideWhiteBorder>
- *   <input type="checkbox" />
- * </FocusIndicator>
- *
- * // Inside position - for adjacent elements like tabs
- * <FocusIndicator position="inside">
- *   <button role="tab">Tab Item</button>
- * </FocusIndicator>
- * ```
- */
-export declare const FocusIndicator: ({ position, hideWhiteBorder, disableNestedFocus, children, }: FocusIndicatorProps) => import("react").ReactElement<import("react").HTMLProps<HTMLElement>, string | import("react").JSXElementConstructor<any>>;

package/dist/esm/src/FocusIndicator/FocusIndicator.types.d.ts

@@ -1,36 +0,0 @@
-import { type HTMLProps, type ReactElement } from 'react';
-import { type FocusIndicatorSlotRecipeVariant } from '../../styled-system/recipes';
-type FocusableChildProps = HTMLProps<HTMLElement>;
-export type FocusIndicatorProps = {
-    /**
-     * The position of the FocusIndicator.
-     * This prop changes the focus indicator style between 'outside' and 'inside'.
-     *
-     * When the focusable element is adjacent to other elements, set position to 'inside'
-     * to prevent the focus indicator from overlapping with neighboring elements.
-     *
-     * @default 'outside'
-     */
-    position?: FocusIndicatorSlotRecipeVariant['position'];
-    /**
-     * Hide the white border from the focus outline.
-     *
-     * When true, uses a seamless outline without white border, suitable for small elements like checkboxes.
-     * When false (default), uses standard outline with white border for better contrast.
-     *
-     * @default false
-     */
-    hideWhiteBorder?: boolean;
-    /**
-     * Disables the nested focus indicator.
-     *
-     * @default false
-     */
-    disableNestedFocus?: boolean;
-    /**
-     * The children to be wrapped by the FocusIndicator.
-     * Must be able to receive `onFocus` and `onBlur` props.
-     */
-    children: ReactElement<FocusableChildProps>;
-};
-export {};

package/dist/esm/src/FocusIndicator/index.d.ts

@@ -1,2 +0,0 @@
-export { FocusIndicator } from './FocusIndicator';
-export type { FocusIndicatorProps } from './FocusIndicator.types';

package/dist/esm/src/GlobalHeader/GlobalHeader.d.ts

@@ -1,6 +0,0 @@
-import { type GlobalHeaderProps } from './GlobalHeader.types';
-/**
- * The global header component.
- * The global header component is a top-level navigation component that is used to display the application's logo and navigation elements.
- */
-export declare function GlobalHeader({ className, mainNavigationButtonProps, applicationsMenuSlot, logoSlot, rightPaneSlot, disableResponsive, }: GlobalHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/GlobalHeader/GlobalHeader.types.d.ts

@@ -1,64 +0,0 @@
-import { type ReactNode } from 'react';
-import { type IconButtonProps } from '../IconButton';
-import { type ResponsiveSlot } from '../types/responsive';
-type MainNavigationButtonProps = {
-    /**
-     * The handler to be called when the main navigation button is clicked.
-     */
-    onClick: IconButtonProps['onClick'];
-    /**
-     * The accessible label to specify how you want the main navigation button to be recognized and read by screen readers.
-     * This prop is required.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
-     *
-     * @example
-     * ```jsx
-     *  <GlobalHeader mainNavigationButtonProps={{ onClick, 'aria-label': 'ナビゲーションを開く' }} />
-     *
-     * // The button will be described as "ナビゲーションを開く" by screen readers.
-     * ```
-     */
-    'aria-label': IconButtonProps['aria-label'];
-};
-export type GlobalHeaderProps = {
-    /**
-     * The class name of the global header.
-     */
-    className?: string;
-    /**
-     * The properties of the main navigation button.
-     *
-     * If this value is provided, the main navigation button is displayed on the left side of the global header.
-     */
-    mainNavigationButtonProps?: MainNavigationButtonProps;
-    /**
-     * Elements to be displayed on the applications menu slot area where the left side of the global header.
-     * This slot is displayed when the viewport width is the breakpoint or larger.
-     *
-     * This element must be an applications dropdown menu as defined in Figma.
-     */
-    applicationsMenuSlot?: ReactNode;
-    /**
-     * Elements to be displayed on the logo area where the left side of the global header.
-     *
-     * If the viewport width is smaller than the breakpoint, the narrowViewport value is displayed, otherwise the base value is displayed.
-     */
-    logoSlot: ResponsiveSlot;
-    /**
-     * Elements to be displayed on the right side of the global header.
-     *
-     * If the viewport width is smaller than the breakpoint, the narrowViewport value is displayed, otherwise the base value is displayed.
-     */
-    rightPaneSlot: ResponsiveSlot;
-    /**
-     * Whether to disable the responsive behavior.
-     *
-     * If this property is set to `true`, the main navigation button and the
-     * narrow viewport layout will not be displayed.
-     *
-     * @default false
-     */
-    disableResponsive?: boolean;
-};
-export {};

package/dist/esm/src/GlobalHeader/index.d.ts

@@ -1,2 +0,0 @@
-export { GlobalHeader } from './GlobalHeader';
-export type { GlobalHeaderProps } from './GlobalHeader.types';

package/dist/esm/src/Heading/Heading.d.ts

@@ -1,16 +0,0 @@
-/**
- * The wrapper component for the Typography component that renders as an HTML heading tag.
- * This component is used to create specific headings in the UI.
- * This component changes its appearance by means of a prop `variant`.
- * It is rendered as an HTML tag matching the names passed to `tag`, and can pass the HTML standard attributes of the
- * specified HTML heading tag as is.
- * h1, h2, h3, h4, h5, h6
- *
- * Also extends the props of heading elements.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
- */
-export declare const Heading: import("react").ForwardRefExoticComponent<{
-    variant: "pageHeading1" | "pageHeading2" | "sectionHeading1" | "sectionHeading2" | "contentHeading";
-    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/esm/src/Heading/Heading.types.d.ts

@@ -1,11 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-export type HeadingProps = {
-    /**
-     * Specify the variant of heading from pageHeading1, pageHeading2, sectionHeading1, sectionHeading2 and contentHeading.
-     */
-    variant: 'pageHeading1' | 'pageHeading2' | 'sectionHeading1' | 'sectionHeading2' | 'contentHeading';
-    /**
-     * Specify the tag of heading component.
-     */
-    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-} & ComponentPropsWithoutRef<'h1'>;

package/dist/esm/src/Heading/index.d.ts

@@ -1,2 +0,0 @@
-export { Heading } from './Heading';
-export type { HeadingProps } from './Heading.types';

package/dist/esm/src/HelpMessage/HelpMessage.d.ts

@@ -1,13 +0,0 @@
-/**
- * The HelpMessage component
- * This component switches the variants of looks depends on the props: messageType.
- *
- * Also extends the props of the `<div>` element.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
- */
-export declare const HelpMessage: import("react").ForwardRefExoticComponent<{
-    messageType?: import("../../styled-system/recipes").HelpMessageRecipeVariant["messageType"];
-    messageAlign?: "left" | "center";
-    children?: import("../Typography").TypographyProps["children"];
-} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/src/HelpMessage/HelpMessage.types.d.ts

@@ -1,28 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import { type HelpMessageRecipeVariant } from '../../styled-system/recipes';
-import { type TypographyProps } from '../Typography';
-/**
- * Props for the HelpMessage component
- */
-export type HelpMessageProps = {
-    /**
-     * The type of message to display.
-     * The color of the message will change based on this value.
-     * The error icon will be displayed next to the message if this value is 'error'.
-     *
-     * @default 'neutral'
-     */
-    messageType?: HelpMessageRecipeVariant['messageType'];
-    /**
-     * The alignment of the message.
-     *
-     * @default 'left'
-     */
-    messageAlign?: 'left' | 'center';
-    /**
-     * The content of the message.
-     *
-     * @default null
-     */
-    children?: TypographyProps['children'];
-} & ComponentPropsWithoutRef<'div'>;

package/dist/esm/src/HelpMessage/index.d.ts

@@ -1,2 +0,0 @@
-export { HelpMessage } from './HelpMessage';
-export type { HelpMessageProps } from './HelpMessage.types';

package/dist/esm/src/IconButton/IconButton.d.ts

@@ -1,16 +0,0 @@
-export declare const InternalIconButton: import("react").ForwardRefExoticComponent<{
-    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["outlined"];
-    children: React.ReactNode;
-    disabled?: boolean;
-    href?: string;
-    customLinkComponent?: import("react").ElementType;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & {
-    size?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["size"];
-} & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export declare const IconButton: import("react").ForwardRefExoticComponent<{
-    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["outlined"];
-    children: React.ReactNode;
-    disabled?: boolean;
-    href?: string;
-    customLinkComponent?: import("react").ElementType;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;