@moneyforward/mfui-components 2.48.2 → 3.1.0

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

@@ -1,63 +0,0 @@
-import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ElementType } from 'react';
-export type AsProp<As extends ElementType> = {
-    /**
-     * An override of the default HTML tag.
-     * Can also be another React component.
-     */
-    as?: As;
-};
-/**
- * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
- * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
- * set of props.
- */
-export type ExtendableProps<ExtendedProps = object, OverrideProps = object> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>;
-/**
- * Allows for inheriting the props from the specified element type so that
- * props like children, className & style work, as well as element-specific
- * attributes like aria roles. The component (`C`) must be passed in.
- */
-export type InheritableElementProps<C extends ElementType, Props = object> = ExtendableProps<ComponentPropsWithoutRef<C>, Props>;
-/**
- * A more sophisticated version of `InheritableElementProps` where
- * the passed in `as` prop will determine which props can be included
- */
-export type PolymorphicComponentProps<C extends ElementType, Props = object> = InheritableElementProps<C, Props & AsProp<C>>;
-/**
- * Utility type to extract the `ref` prop from a polymorphic component
- */
-export type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];
-export type RefProps<C extends ElementType> = {
-    /**
-     * A ref to the root element.
-     */
-    ref?: PolymorphicRef<C>;
-};
-/**
- * A wrapper of `PolymorphicComponentProps` that also includes the `ref`
- * prop for the polymorphic component
- */
-export type PolymorphicComponentPropsWithRef<C extends ElementType, Props = object> = PolymorphicComponentProps<C, Props> & RefProps<C>;
-/**
- * A type that represents the exclusive props of `T` and `U`.
- *
- * Example usage:
- *
- * ```typescript
- * type A = { a: string, b: number };
- * type B = { b: string, c: boolean };
- *
- * type ExclusiveAB = Exclusive<A, B>;
- *
- * // ExclusiveAB will be either:
- * // { a: string, b: number, c?: undefined }
- * // or
- * // { b: string, c: boolean, a?: undefined }
- * ```
- */
-export type Exclusive<T, U> = (T & {
-    [K in keyof U]?: undefined;
-}) | (U & {
-    [K in keyof T]?: undefined;
-});
-export type SetTimeoutReturn = ReturnType<typeof setTimeout>;

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

@@ -1,19 +0,0 @@
-import { type ReactNode } from 'react';
-/**
- * Type for responsive content slots that can display different content based on viewport width.
- * This enables responsive behavior without requiring separate components or media queries.
- *
- * @template T - The type of content that can be stored in the responsive slots. Defaults to ReactNode.
- */
-export type ResponsiveSlot<T = ReactNode> = {
-    /**
-     * A value to be used when the viewport width is the breakpoint or larger.
-     */
-    base: T;
-    /**
-     * A value to be used when the viewport width is smaller than the breakpoint.
-     *
-     * When this value is not provided, the base value is used across all viewports.
-     */
-    narrowViewport?: T;
-};

package/dist/esm/src/utilities/date/dayjs.d.ts

@@ -1 +0,0 @@
-export { default as dayjs } from 'dayjs';

package/dist/esm/src/utilities/dom/dispatchNativeInputValueWithEvent.d.ts

@@ -1,14 +0,0 @@
-/**
- * Dispatches a native input event with the given value
- *
- * There no ways to dispatch a native input event with the given value without setting it via the descriptor;
- * this is the utility function to do that
- *
- * If you dispatch by traditional way (e.g. `input.value = 'value'; input.dispatchEvent(new Event('input'))`),
- * the `onChange` and `change` event will not be triggered
- *
- * @param input - The input element, either `HTMLInputElement` or `HTMLTextAreaElement`
- *
- * @param value - The value to set, is string
- */
-export declare const dispatchNativeInputValueWithEvent: <Element extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(input: Element, value: Element["value"]) => void;

package/dist/esm/src/utilities/dom/findSiblingElements.d.ts

@@ -1,10 +0,0 @@
-/**
- * Find sibling elements of the current element include the current element.
- *
- * @param currentElement - The current element.
- *
- * @param selector - A CSS selector string.
- *
- * @returns An array of sibling elements include the current element.
- */
-export declare const findSiblingElements: (currentElement: HTMLElement, selector: string) => HTMLElement[];

package/dist/esm/src/utilities/dom/getFocusableNodes.d.ts

@@ -1,8 +0,0 @@
-/**
- * Get the candidates of focusable nodes in the target element
- *
- * @param targetElement - The target element
- *
- * @returns The array of focusable nodes
- */
-export declare const getFocusableNodes: (targetElement: HTMLElement) => HTMLElement[];

package/dist/esm/src/utilities/dom/getRootNode.d.ts

@@ -1,26 +0,0 @@
-/**
- * Options for getRootNode
- */
-type GetRootNodeOptions = {
-    /**
-     * Allow the function to return the document object even if the element is not attached to the DOM tree.
-     */
-    allowDetached?: boolean;
-};
-/**
- * Returns the the RootNode of the given element.
- *
- * If the element is not provided, it will return the global document object.
- * If the document object is not available (such as React Server Components, Server Side Rendering, etc.), it will return undefined.
- *
- * ** Why do we need rootNode? **
- * - When the element is inside a Shadow DOM, the rootNode is the shadowRoot instead of Document, so we should handle everything inside it.
- *
- * @param element - The element to get the document object from.
- *
- * @param options - Advanced options for getting root node
- *
- * @returns The Document object or ShadowRoot or undefined if not available.
- */
-export declare function getRootNode(element?: HTMLElement | null, options?: GetRootNodeOptions): Node | undefined;
-export {};

package/dist/esm/src/utilities/dom/getTargetDomNode.d.ts

@@ -1,12 +0,0 @@
-/**
- * Returns the target DOM node to append the element to.
- * If the fallbackTargetDOMNode is provided, it will return the fallbackTargetDOMNode.
- * If the fallbackTargetDOMNode is not provided, it will return the body element of the ownerDocument, or automatically create & choose the custom element under ShadowDOM.
- *
- * @param fallbackTargetDOMNode - The fallback target DOM node, if specified, it will return this node.
- *
- * @param hangingElement - The element to detect the rootNode, if not provided, it will return the body element of the ownerDocument, or automatically create & choose the custom element under ShadowDOM.
- *
- * @returns The target DOM node
- */
-export declare function getTargetDomNode(fallbackTargetDOMNode?: HTMLElement | null, hangingElement?: HTMLElement | null): HTMLElement;

package/dist/esm/src/utilities/dom/mergeRefs.d.ts

@@ -1,8 +0,0 @@
-/**
- * This function merges multiple refs into a single ref.
- *
- * @param refs - The refs to merge.
- *
- * @returns A merged ref.
- */
-export declare const mergeRefs: <T>(...refs: (React.RefObject<T> | React.RefCallback<T> | null | undefined)[]) => React.Ref<T>;

package/dist/esm/src/utilities/dom/observeRect.d.ts

@@ -1,21 +0,0 @@
-/**
- * This file is inspired by Reach's `observeRect`
- * I just copied the code and made some modifications to make it work with TypeScript and our codebase
- *
- * @see https://github.com/reach/observe-rect
- */
-export type RectProps = {
-    rect: DOMRect | undefined;
-    callbacks: ((domRect: DOMRect | undefined) => void)[];
-};
-/**
- * Observe the rect of the given node and run the callback when the rect changes
- *
- * @param node - The node to observe
- *
- * @param callback - The callback to run when the rect changes
- */
-export declare function observeRect(node: Element, callback: (rect: DOMRect | undefined) => void): {
-    observe(): void;
-    unobserve(): void;
-};

package/dist/esm/src/utilities/dom/useFixedColumns.d.ts

@@ -1,47 +0,0 @@
-type UseFixedColumnsProps = {
-    /**
-     * Whether the table rows are selectable.
-     * If `true`, the checkbox cell will be added to the first column of header and each row.
-     *
-     * @default false
-     */
-    enableRowSelection?: boolean;
-    /**
-     * The index of the column.
-     */
-    columnIndex?: number;
-    /**
-     * The index of the leftmost fixed column.
-     */
-    leftFixedColumnIndex?: number;
-    /**
-     * The index of the rightmost fixed column.
-     */
-    rightFixedColumnIndex?: number;
-};
-type UseFixedColumnsReturn = {
-    /**
-     * A ref to the cell element.
-     */
-    cellRef: React.RefObject<HTMLTableCellElement | null>;
-    /**
-     * Whether the column is fixed.
-     */
-    isFixedColumn: boolean;
-    /**
-     * Whether the column is an edge fixed column.
-     */
-    isEdgeFixedColumn?: 'left' | 'right';
-    /**
-     * The styles to apply to the cell.
-     */
-    fixedPositionStyles?: {
-        left?: number;
-        right?: number;
-    };
-};
-/**
- * A hook to calculate the position of fixed columns in the DataGrid component.
- */
-export declare const useFixedColumns: ({ enableRowSelection, columnIndex, leftFixedColumnIndex, rightFixedColumnIndex, }: UseFixedColumnsProps) => UseFixedColumnsReturn;
-export {};

package/dist/esm/src/utilities/dom/useFocusTrap.d.ts

@@ -1,27 +0,0 @@
-import type React from 'react';
-import { type KeyboardEventHandler } from 'react';
-type Options = {
-    /**
-     * Callback when the key is pressed on the container.
-     * This is called before the focus trap logic, useful when you need to handle some key events before the focus trap.
-     */
-    onKeyDown?: KeyboardEventHandler<HTMLElement>;
-    /**
-     * Callback when the Tab key is pressed on a not-focusable element.
-     * Usually used when you need to handle Focus Trap with elements which are focused manually by arrow keys or mouse clicks;
-     *
-     * @param event - The keyboard event.
-     */
-    onPressingTabOnNotFocusableElement?: (event: React.KeyboardEvent) => void;
-};
-/**
- * Hook to trap focus within a container.
- *
- * @param options - The options for the focus trap.
- *
- * @returns The props for the focus trap.
- */
-export declare function useFocusTrap({ onKeyDown, onPressingTabOnNotFocusableElement }?: Options): {
-    handleOnKeyDown: React.KeyboardEventHandler<HTMLElement>;
-};
-export {};

package/dist/esm/src/utilities/dom/useIsTextOverflowed.d.ts

@@ -1,11 +0,0 @@
-import { type RefObject } from 'react';
-/**
- * Hook to check if text is overflowing a container.
- *
- * @param text - The text to check.
- *
- * @param ref - The ref of the container.
- *
- * @param subtractWidth - The width to subtract from the container width.
- */
-export declare const useIsTextOverflowed: (text: string, ref: RefObject<HTMLSpanElement | null>, subtractWidth?: number) => boolean;

package/dist/esm/src/utilities/dom/useIsTouchDevice.d.ts

@@ -1,24 +0,0 @@
-/**
- * Hook to detect if the current device is a touch device.
- * Uses the CSS media query `(pointer: coarse)` to detect coarse pointer devices (typically touch screens).
- *
- * Note: To avoid hydration mismatches in SSR environments (e.g., Next.js),
- * this hook always returns `false` on the initial render (both server and client).
- * The correct value is set after the first client-side render via useEffect.
- *
- * @returns true if the device has a coarse pointer (touch device), false otherwise
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const isTouchDevice = useIsTouchDevice();
- *
- *   return (
- *     <div>
- *       {isTouchDevice ? 'Touch Device' : 'Desktop Device'}
- *     </div>
- *   );
- * }
- * ```
- */
-export declare function useIsTouchDevice(): boolean;

package/dist/esm/src/utilities/dom/useMiddleTruncatedText.d.ts

@@ -1,21 +0,0 @@
-import { type RefObject } from 'react';
-/**
- * Hook to return a middle-truncated string that fits within the available width of the span's container.
- * Truncation respects grapheme cluster boundaries when possible (via Intl.Segmenter),
- * and falls back to iterating over code points where Segmenter is not available.
- *
- * The available width is computed as parentElement.offsetWidth - subtractWidth.
- * Measurement is done by creating an offscreen span copying relevant computed font styles
- * from the referenced span to ensure accurate width measurement.
- *
- * @param text - The text to truncate.
- *
- * @param ref - The ref to the span element.
- *
- * @param subtractWidth - The width to subtract from the available width.
- *
- * @param ellipsis - The ellipsis to use when truncating.
- *
- * @returns The truncated text.
- */
-export declare const useMiddleTruncatedText: (text: string, ref: RefObject<HTMLSpanElement | null>, subtractWidth?: number, ellipsis?: string) => string;

package/dist/esm/src/utilities/dom/useOnClickOutside.d.ts

@@ -1,24 +0,0 @@
-import { type RefObject } from 'react';
-type UseOnClickOutsideOptions = {
-    /**
-     * Whether or not a click outside the element can be performed
-     */
-    ignoreRefs?: RefObject<HTMLElement | null>[];
-    /**
-     * Elements to Ignore Determination
-     */
-    disabled?: boolean;
-};
-/**
- * Hooks to detect clicks outside the element specified by ref
- *
- * {@link https://usehooks.com/useOnClickOutside/}
- *
- * @param ref - target element
- *
- * @param handler - Function to be executed when a click is detected
- *
- * @param options - An object of the following properties: ignoreRefs, disabled
- */
-export declare const useOnClickOutside: (ref: RefObject<HTMLElement | null>, handler: EventListener, options?: UseOnClickOutsideOptions) => void;
-export {};

package/dist/esm/src/utilities/dom/usePopoverMenuPlacement.d.ts

@@ -1,58 +0,0 @@
-import { type CSSProperties } from 'react';
-import { type PopoverPlacement } from '../../Popover/Popover.types';
-type Options = {
-    minWidth?: CSSProperties['minWidth'];
-    maxHeight?: CSSProperties['maxHeight'];
-    /**
-     * Allowed placements for the popover menu.
-     * When provided, the popover will try each placement in order until it finds one that fits.
-     *
-     * @default ['bottom-start', 'bottom-end', 'top-start', 'top-end']
-     */
-    allowedPlacements?: PopoverPlacement[];
-    /**
-     * Whether to enable viewport constraint for the popover content.
-     * When enabled, the popover will be constrained to fit within the viewport.
-     * When disabled, the popover content can overflow the viewport boundaries.
-     *
-     * @default true
-     */
-    enableViewportConstraint?: boolean;
-    /**
-     * Whether to constrain the popover width to exactly match the reference element width.
-     * When enabled, both minWidth and maxWidth will be set to the reference width.
-     *
-     * @default false
-     */
-    constrainToTriggerWidth?: boolean;
-    /**
-     * Enable centered layout on narrow viewport (< 600px).
-     * When enabled, the popover will be centered horizontally on the screen
-     * with 14px margins on both sides, instead of being positioned relative to the trigger.
-     *
-     * @default false
-     */
-    enableCenteredLayoutOnNarrowViewport?: boolean;
-};
-/**
- * Manages the placement of a popover menu relative to a target element and trigger element.
- *
- * @param options - Configuration options
- *
- * @param options.minWidth - The minimum width of the popover menu. Default is the width of the trigger element.
- *
- * @param options.allowedPlacements - The allowed placements for the popover menu. Default is ['bottom-start', 'bottom-end', 'top-start', 'top-end'].
- *
- * @param options.enableViewportConstraint - Whether to enable viewport constraint for the popover content. Default is true.
- */
-export declare function usePopoverMenuPlacement({ minWidth, maxHeight, allowedPlacements, enableViewportConstraint, constrainToTriggerWidth, enableCenteredLayoutOnNarrowViewport, }?: Options): {
-    refs: {
-        reference: import("react").MutableRefObject<HTMLElement | null>;
-        floating: React.MutableRefObject<HTMLElement | null>;
-        setReference: (node: HTMLElement | null) => void;
-        setFloating: (node: HTMLElement | null) => void;
-    };
-    floatingStyles: CSSProperties;
-    update: () => void;
-};
-export {};

package/dist/esm/src/utilities/effect/useUpdateEffect.d.ts

@@ -1,14 +0,0 @@
-import { useEffect } from 'react';
-/**
- * A hook to call the effect only when the dependencies are updated (not when mounted).
- * This hook will work in both React non-StrictMode and StrictMode.
- *
- * This hook is inspired by this answer on React issue,
- * where use two useEffect to make sure if it is running on StrictMode or not.
- * https://github.com/facebook/react/issues/24527
- *
- * @param effect - same as useEffect effect
- *
- * @param deps - same as useEffect deps
- */
-export declare const useUpdateEffect: typeof useEffect;

package/dist/esm/src/utilities/pandacss/index.d.ts

@@ -1,11 +0,0 @@
-import type * as Panda from '@pandacss/dev';
-import { type SlotRecipeConfig, type SlotRecipeVariantRecord } from '../../../styled-system/types';
-/**
- * A wrapper for `defineSlotRecipe` that allows IDEs & Editors to read the type.
- * Because we are not sure why IDEs & Editors didn't read the types in the `styled-system/types` files.
- *
- * @param config - The slot recipe config.
- *
- * @returns The slot recipe config.
- */
-export declare const mfuiDefineSlotRecipe: <S extends string, V extends SlotRecipeVariantRecord<S>>(config: SlotRecipeConfig<S, V>) => Panda.SlotRecipeConfig;

package/dist/esm/src/utilities/react/compatibleForwardRef.d.ts

@@ -1,17 +0,0 @@
-import { type Attributes, type ForwardRefExoticComponent, type ForwardRefRenderFunction, type PropsWithoutRef, type RefCallback, type RefObject } from 'react';
-/**
- * From React 19+, The `Ref<T>` type include `RefObject<T | null>` instead of `RefObject<T>`,
- * which make some of our components/hooks incompatible with React 18.
- *
- * @see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#useref-requires-argument
- */
-type CompatibleRef<T> = RefCallback<T> | RefObject<T | null> | null;
-type CompatibleRefAttributes<T> = {
-    ref?: CompatibleRef<T> | undefined;
-} & Attributes;
-type CompatibleForwardRef = <T, P = object>(render: ForwardRefRenderFunction<T, PropsWithoutRef<P>>) => ForwardRefExoticComponent<PropsWithoutRef<P> & CompatibleRefAttributes<T>>;
-/**
- * A forwardRef function that is compatible with both React 18 and 19+.
- */
-export declare const compatibleForwardRef: CompatibleForwardRef;
-export {};

package/dist/esm/src/utilities/react/isComponentOrWrapped.d.ts

@@ -1,54 +0,0 @@
-/**
- * Checks if a React element is of a specific component type or wraps that component.
- *
- * This utility is useful when you need to identify components in `Children.map` or similar scenarios,
- * especially when components use composition patterns.
- *
- * **Detection Strategy (Hybrid Approach):**
- * 1. **Direct type matching** - Fast and reliable
- * 2. **displayName matching** - Recommended for wrapper components (avoids hooks violations)
- * 3. **Fallback rendering** - For backward compatibility with simple wrappers without displayName
- * 4. **Graceful failure** - If rendering throws (e.g., hooks error), returns false
- *
- * **Best Practice**: Set `displayName` on wrapper components to match the target component's `displayName`.
- * This is especially important for wrappers that use React hooks, as rendering them outside of
- * React's component lifecycle will cause errors.
- *
- * @param element - The React element to check
- *
- * @param targetComponent - The component type to check against
- *
- * @returns `true` if the element is the target component or wraps it, `false` otherwise
- *
- * @example
- *
- * ```tsx
- * // Direct usage
- * if (isComponentOrWrapped(child, MyComponent)) {
- *   // child is MyComponent or wraps MyComponent
- * }
- *
- * // In Children.map
- * Children.map(children, (child) => {
- *   if (!isValidElement(child)) return child;
- *   if (isComponentOrWrapped(child, DataGridCell)) {
- *     return cloneElement(child, { ...additionalProps });
- *   }
- *   return child;
- * });
- *
- * // Creating a wrapper component (recommended approach)
- * const WrappedDataGridCell = (props) => {
- *   return <DataGridCell {...props} customProp="value" />;
- * };
- * WrappedDataGridCell.displayName = 'DataGridCell'; // Recommended for detection
- *
- * // Wrapper with hooks (displayName is required)
- * const WrappedDataGridCellWithHooks = (props) => {
- *   const [state, setState] = useState(initialState);
- *   return <DataGridCell {...props} state={state} />;
- * };
- * WrappedDataGridCellWithHooks.displayName = 'DataGridCell'; // Required to avoid hooks error
- * ```
- */
-export declare function isComponentOrWrapped<P = unknown>(element: React.ReactElement, targetComponent: React.ComponentType<P>): boolean;

package/dist/esm/src/utilities/responsive/index.d.ts

@@ -1,15 +0,0 @@
-import { type ReactNode } from 'react';
-import { type ResponsiveSlot } from '../../types/responsive';
-/**
- * Generic type guard function to check if a value is a ResponsiveSlot-like object.
- * This function checks for the structural pattern of having 'base' and optionally 'narrowViewport' properties,
- * making it compatible with both ResponsiveSlot and other similar responsive slot types.
- *
- * @param value - The value to check
- *
- * @returns true if the value has the ResponsiveSlot structure, false otherwise
- */
-export declare const isResponsiveSlot: <TSlot extends {
-    base: unknown;
-    narrowViewport?: unknown;
-} = ResponsiveSlot>(value: TSlot | ReactNode | ((...args: any[]) => ReactNode)) => value is TSlot;

package/dist/esm/src/utilities/responsive/useIsNarrowViewport.d.ts

@@ -1,39 +0,0 @@
-/**
- * Hook to detect if the current viewport is narrow (below specified breakpoint).
- * Uses the same pattern as ToastContainer with window.innerWidth and resize event.
- *
- * According to MFUI Guidelines (Screen Layout and Patterns - Responsive and Breakpoints):
- * - Wide layout components (e.g., GlobalHeader): 1200px breakpoint
- * - Other mobile-responsive components: 600px breakpoint (sm breakpoint in panda.config.ts)
- *
- * @param breakpoint - The breakpoint width in pixels. Default is 600px (sm breakpoint).
- *                     Use 1200px for wide layout components like GlobalHeader.
- *
- * @returns true if the viewport width is less than the breakpoint, false otherwise
- *
- * @example
- * ```tsx
- * // Default 600px breakpoint (most mobile components)
- * function MyComponent() {
- *   const isNarrow = useIsNarrowViewport();
- *
- *   return (
- *     <div>
- *       {isNarrow ? 'Narrow Viewport' : 'Wide Viewport'}
- *     </div>
- *   );
- * }
- *
- * // 1200px breakpoint (GlobalHeader, wide layout components)
- * function WideLayoutComponent() {
- *   const isNarrow = useIsNarrowViewport(1200);
- *
- *   return (
- *     <div>
- *       {isNarrow ? 'Below 1200px' : 'Above 1200px'}
- *     </div>
- *   );
- * }
- * ```
- */
-export declare const useIsNarrowViewport: (breakpoint?: number) => boolean;

package/dist/esm/src/utilities/state/useDisclosure.d.ts

@@ -1,41 +0,0 @@
-type UseDisclosureProps = {
-    /**
-     * The initial open state.
-     */
-    value?: boolean;
-    /**
-     * Callback when the option panel is opened.
-     */
-    onOpen?: () => void;
-    /**
-     * Callback when the option panel is closed.
-     */
-    onClose?: () => void;
-    /**
-     * Callback when the option panel is toggled.
-     *
-     * @param nextValue - The next open state.
-     */
-    onToggle?: (nextValue: boolean) => void;
-};
-/**
- * Custom hook to manage the disclosure state.
- * Use this only inside the client component.
- *
- * @property isOpen - Indicates whether the option panel is open
- *
- * @property  toggle - Function to toggle the option panel open/closed state
- *
- * @property  open - Function to open the option panel
- *
- * @property  close - Function to close the option panel
- *
- * @returns  The list box state and control functions
- */
-export declare const useDisclosure: ({ value, onOpen, onClose, onToggle }?: UseDisclosureProps) => {
-    isOpen: boolean;
-    toggle: () => void;
-    open: () => void;
-    close: () => void;
-};
-export {};