@moneyforward/mfui-components 2.48.1

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

@@ -0,0 +1,63 @@
+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/cjs/src/types/helpers.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,19 @@
+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/cjs/src/types/responsive.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/cjs/src/utilities/date/dayjs.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dayjs = void 0;
+const dayjs_1 = __importDefault(require("dayjs"));
+const ja_1 = __importDefault(require("dayjs/locale/ja"));
+const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+/**
+ * dayjs instance with ja locale and customParseFormat plugin
+ * We use customParseFormat plugin to parse date string with format strictly
+ *
+ * For example,
+ * Without customParseFormat: dayjs('1', 'YYYY-MM-DD').isValid() // true
+ * With customParseFormat: dayjs('1', 'YYYY-MM-DD').isValid() // false
+ *
+ * @see https://day.js.org/docs/en/plugin/custom-parse-format
+ */
+dayjs_1.default.extend(customParseFormat_1.default);
+/**
+ * Set ja locale as default
+ */
+dayjs_1.default.locale(ja_1.default);
+var dayjs_2 = require("dayjs");
+Object.defineProperty(exports, "dayjs", { enumerable: true, get: function () { return __importDefault(dayjs_2).default; } });

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

@@ -0,0 +1,14 @@
+/**
+ * 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/cjs/src/utilities/dom/dispatchNativeInputValueWithEvent.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dispatchNativeInputValueWithEvent = void 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
+ */
+const dispatchNativeInputValueWithEvent = (input, value) => {
+    const isTextArea = input.tagName === 'TEXTAREA';
+    /*
+     * To set value to a native element, we must call it via the descriptor
+     * This is kind of a workaround, but confirmed from the React author @gaearon
+     * After the user click `Clear`, the `onChange` event will be triggered
+     *
+     * If we don't apply this workaround, the `onChange` event or 'change' listener will not be triggered
+     *
+     * @see https://github.com/facebook/react/issues/11600
+     */
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const setValue = Object.getOwnPropertyDescriptor(isTextArea ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype, 'value')?.set;
+    setValue?.call(input, value);
+    const event = new Event('input', { bubbles: true });
+    input.dispatchEvent(event);
+};
+exports.dispatchNativeInputValueWithEvent = dispatchNativeInputValueWithEvent;

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

@@ -0,0 +1,10 @@
+/**
+ * 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/cjs/src/utilities/dom/findSiblingElements.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findSiblingElements = void 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.
+ */
+const findSiblingElements = (currentElement, selector) => {
+    const parent = currentElement.parentElement;
+    if (!parent) {
+        return [];
+    }
+    return [...parent.querySelectorAll(selector)];
+};
+exports.findSiblingElements = findSiblingElements;

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

@@ -0,0 +1,8 @@
+/**
+ * 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/cjs/src/utilities/dom/getFocusableNodes.js

@@ -0,0 +1,71 @@
+"use strict";
+/*
+ * This logic is copied and inspired by: https://github.com/mui/material-ui/blob/master/packages/mui-base/src/FocusTrap/FocusTrap.tsx
+ * Copyright (c) 2014 Call-Em-All
+ *
+ * Licensed under MIT License: https://github.com/mui/material-ui/blob/master/LICENSE
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFocusableNodes = void 0;
+// Selector for focusable nodes
+const candidatesSelector = [
+    'input',
+    'select',
+    'textarea',
+    'a[href]',
+    'button',
+    '[tabindex]',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+].join(',');
+// This function ensure that only one radio button in a group is tabbable at a time.
+const isNonTabbableRadio = (node) => {
+    if (node.tagName !== 'INPUT' || node.type !== 'radio') {
+        return false;
+    }
+    if (!node.name) {
+        return false;
+    }
+    const getRadio = (selector) => node.ownerDocument.querySelector(`input[type="radio"]${selector}`);
+    let roving = getRadio(`[name="${node.name}"]:checked`);
+    if (!roving) {
+        roving = getRadio(`[name="${node.name}"]`);
+    }
+    return roving !== node;
+};
+// This function ensures that the node is focusable by checking if it is disabled, hidden, or a non-tabbable radio button.
+const isNodeMatchingSelectorFocusable = (node) => {
+    if (node.disabled || (node.tagName === 'INPUT' && node.type === 'hidden') || isNonTabbableRadio(node)) {
+        return false;
+    }
+    return true;
+};
+// Since the tabindex attribute only returns the value as a string,
+// There is a need to verify the number value from the string.
+const getTabIndex = (element) => {
+    const tabindexAttribute = element.getAttribute('tabindex');
+    if (!Number.isNaN(Number(tabindexAttribute))) {
+        return Number(tabindexAttribute);
+    }
+    return 0;
+};
+/**
+ * Get the candidates of focusable nodes in the target element
+ *
+ * @param targetElement - The target element
+ *
+ * @returns The array of focusable nodes
+ */
+const getFocusableNodes = (targetElement) => {
+    const focusableNodes = [];
+    [...targetElement.querySelectorAll(candidatesSelector)].forEach((node) => {
+        const nodeTabIndex = getTabIndex(node);
+        if (nodeTabIndex === -1 || !isNodeMatchingSelectorFocusable(node)) {
+            return;
+        }
+        focusableNodes.push(node);
+    });
+    return focusableNodes;
+};
+exports.getFocusableNodes = getFocusableNodes;

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

@@ -0,0 +1,26 @@
+/**
+ * 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/cjs/src/utilities/dom/getRootNode.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRootNode = getRootNode;
+/**
+ * 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.
+ */
+function getRootNode(element, options = {}) {
+    const { allowDetached = false } = options;
+    if (element) {
+        const rootNode = element.getRootNode();
+        if (!allowDetached && !(rootNode instanceof ShadowRoot) && !(rootNode instanceof Document)) {
+            throw new TypeError('The element is not connected to the DOM tree.');
+        }
+        return rootNode;
+    }
+    return typeof document !== 'undefined' ? document : undefined;
+}

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

@@ -0,0 +1,12 @@
+/**
+ * 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/cjs/src/utilities/dom/getTargetDomNode.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTargetDomNode = getTargetDomNode;
+const getRootNode_1 = require("./getRootNode");
+/**
+ * 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
+ */
+function getTargetDomNode(fallbackTargetDOMNode, hangingElement) {
+    if (fallbackTargetDOMNode) {
+        return fallbackTargetDOMNode;
+    }
+    const rootNode = (0, getRootNode_1.getRootNode)(hangingElement);
+    // When rootNode is not available, it means it running on server side, force assign it as HTMLElement to satisfies TypeScript
+    if (!rootNode) {
+        return undefined;
+    }
+    // If rootNode is ShadowRoot, create an element inside shadow root and return it, make sure the element is available
+    if (rootNode instanceof ShadowRoot) {
+        let shadowDomRoot = rootNode.querySelector('#mfui-shadow-dom-root');
+        if (!shadowDomRoot) {
+            shadowDomRoot = document.createElement('div');
+            shadowDomRoot.id = 'mfui-shadow-dom-root';
+            rootNode.append(shadowDomRoot);
+        }
+        return shadowDomRoot;
+    }
+    if (rootNode instanceof Document) {
+        return rootNode.body;
+    }
+    return rootNode;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * 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/cjs/src/utilities/dom/mergeRefs.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeRefs = void 0;
+/**
+ * This function merges multiple refs into a single ref.
+ *
+ * @param refs - The refs to merge.
+ *
+ * @returns A merged ref.
+ */
+const mergeRefs = (...refs) => {
+    const nonNullableRefs = refs.filter((ref) => ref != null);
+    if (nonNullableRefs.length <= 1) {
+        return nonNullableRefs[0] ?? null;
+    }
+    return (value) => {
+        refs.forEach((ref) => {
+            const currentRef = ref;
+            if (typeof currentRef === 'function') {
+                currentRef(value);
+            }
+            else if (currentRef != null) {
+                currentRef.current = value;
+            }
+        });
+    };
+};
+exports.mergeRefs = mergeRefs;

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

@@ -0,0 +1,21 @@
+/**
+ * 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/cjs/src/utilities/dom/observeRect.js

@@ -0,0 +1,87 @@
+"use strict";
+/**
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.observeRect = observeRect;
+/**
+ * The properties of the DOMRect object
+ */
+const props = ['top', 'right', 'bottom', 'left', 'width', 'height'];
+/**
+ * Check if the rect has changed by shallow comparison
+ *
+ * @param a - The first rect
+ *
+ * @param b - The second rect
+ *
+ * @returns `true` if the rect has changed, `false` otherwise
+ */
+const rectChanged = (a = {}, b = {}) => props.some((prop) => a[prop] !== b[prop]);
+const observedNodes = new Map();
+let rafId;
+/**
+ * Set observed nodes and changed states, then run the callbacks for the changed states
+ * and request the next animation frame
+ */
+function run() {
+    const changedStates = [];
+    observedNodes.forEach((state, node) => {
+        const newRect = node.getBoundingClientRect();
+        if (rectChanged(newRect, state.rect)) {
+            // eslint-disable-next-line no-param-reassign -- Assign the new rect to the state
+            state.rect = newRect;
+            changedStates.push(state);
+        }
+    });
+    changedStates.forEach((state) => {
+        state.callbacks.forEach((callback) => {
+            callback(state.rect);
+        });
+    });
+    rafId = window.requestAnimationFrame(run);
+}
+/**
+ * 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
+ */
+function observeRect(node, callback) {
+    return {
+        observe() {
+            const wasEmpty = observedNodes.size === 0;
+            const observedNode = observedNodes.get(node);
+            if (observedNode) {
+                observedNode.callbacks.push(callback);
+            }
+            else {
+                observedNodes.set(node, {
+                    rect: undefined,
+                    callbacks: [callback],
+                });
+            }
+            if (wasEmpty)
+                run();
+        },
+        unobserve() {
+            const state = observedNodes.get(node);
+            if (state) {
+                // Remove the callback
+                const index = state.callbacks.indexOf(callback);
+                if (index !== -1)
+                    state.callbacks.splice(index, 1);
+                // Remove the node reference
+                if (state.callbacks.length === 0)
+                    observedNodes.delete(node);
+                // Stop the loop
+                if (observedNodes.size === 0)
+                    cancelAnimationFrame(rafId);
+            }
+        },
+    };
+}

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

@@ -0,0 +1,47 @@
+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 {};