@moneyforward/mfui-components 2.48.2 → 3.0.0

package/dist/cjs/src/Tooltip/icons/ArrowRightIcon.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArrowRightIcon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-exports.ArrowRightIcon = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)("svg", { ref: ref, width: "7", height: "10", viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7 5L4.72849e-07 10L9.53674e-07 -2.76839e-07L7 5Z", fill: "#747474" }) })));

package/dist/cjs/src/Tooltip/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
-var Tooltip_1 = require("./Tooltip");
-Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });

package/dist/cjs/src/Typography/Typography.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Typography = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const css_1 = require("../../styled-system/css");
-const recipes_1 = require("../../styled-system/recipes");
-/**
- * The InternalTypography component, to support generic uses based on `as` prop.
- *
- * @param props - The props for the Typography component.
- *
- * @param ref - The ref to the root element.
- *
- * @returns The rendered Typography component.
- */
-function InternalTypography(props, ref) {
-    const { children, as: tag, variant = 'body', className, ...rest } = props;
-    const Tag = (0, react_1.useMemo)(() => {
-        if (tag)
-            return tag;
-        if (rest.href)
-            return 'a';
-        return variant.startsWith('strong') ? 'strong' : 'span';
-    }, [variant, tag, rest.href]);
-    const classes = (0, recipes_1.typographySlotRecipe)({ variant });
-    return (
-    // @ts-expect-error Ignore the error for ref due to the complexion.
-    (0, jsx_runtime_1.jsx)(Tag, { ref: ref, ...rest, className: (0, css_1.cx)(classes.root, 'mfui-Typography__root', className), children: children }));
-}
-/**
- *
- * The general-purpose typography component.
- * This component changes its appearance by means of a prop `variant`.
- * It is rendered as an HTML tag matching the names passed to `as`, and can pass the HTML standard attributes of the specified HTML tag as is.
- */
-exports.Typography = (0, react_1.forwardRef)(InternalTypography);

package/dist/cjs/src/Typography/Typography.types.js

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

package/dist/cjs/src/Typography/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Typography = void 0;
-var Typography_1 = require("./Typography");
-Object.defineProperty(exports, "Typography", { enumerable: true, get: function () { return Typography_1.Typography; } });

package/dist/cjs/src/index.js

@@ -1,68 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Button"), exports);
-__exportStar(require("./Dialog"), exports);
-__exportStar(require("./DropdownMenu"), exports);
-__exportStar(require("./FocusIndicator"), exports);
-__exportStar(require("./GlobalHeader"), exports);
-__exportStar(require("./HelpMessage"), exports);
-__exportStar(require("./IconButton"), exports);
-__exportStar(require("./MultilineTextBox"), exports);
-__exportStar(require("./Panel"), exports);
-__exportStar(require("./SectionMessage"), exports);
-__exportStar(require("./TextBox"), exports);
-__exportStar(require("./TextLink"), exports);
-__exportStar(require("./Tooltip"), exports);
-__exportStar(require("./Typography"), exports);
-__exportStar(require("./Checkbox"), exports);
-__exportStar(require("./Heading"), exports);
-__exportStar(require("./RadioButton"), exports);
-__exportStar(require("./RadioGroup"), exports);
-__exportStar(require("./Badge"), exports);
-__exportStar(require("./MainNavigation"), exports);
-__exportStar(require("./SelectBox"), exports);
-__exportStar(require("./SidePane"), exports);
-__exportStar(require("./Toast"), exports);
-__exportStar(require("./Pagination"), exports);
-__exportStar(require("./Tag"), exports);
-__exportStar(require("./ProgressIndicator"), exports);
-__exportStar(require("./DataGrid"), exports);
-__exportStar(require("./SubNavigation"), exports);
-__exportStar(require("./Tabs"), exports);
-__exportStar(require("./DateTimeSelection"), exports);
-__exportStar(require("./Stack"), exports);
-__exportStar(require("./MultipleSelectBox"), exports);
-__exportStar(require("./SearchBox"), exports);
-__exportStar(require("./CheckboxCard"), exports);
-__exportStar(require("./PageHeader"), exports);
-__exportStar(require("./RadioButtonCard"), exports);
-__exportStar(require("./Disclosure"), exports);
-__exportStar(require("./StatusLabel"), exports);
-__exportStar(require("./FileBox"), exports);
-__exportStar(require("./FilterSelectBox"), exports);
-__exportStar(require("./FilterTrigger"), exports);
-__exportStar(require("./Skeleton"), exports);
-__exportStar(require("./CheckboxGroup"), exports);
-__exportStar(require("./MultipleFilterSelectBox"), exports);
-__exportStar(require("./Popover"), exports);
-__exportStar(require("./Portal"), exports);
-__exportStar(require("./KeyValue"), exports);
-__exportStar(require("./FileDropZone"), exports);
-__exportStar(require("./EmbeddedSidePane"), exports);
-__exportStar(require("./DisplayTable"), exports);
-__exportStar(require("./Accordion"), exports);
-__exportStar(require("./SplitView"), exports);

package/dist/cjs/src/shared/ClearButton/ClearButton.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClearButton = ClearButton;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const IconButton_1 = require("../../IconButton/IconButton");
-function ClearButton({ size = 'default', 'aria-label': ariaLabel = '値をクリアする', ...iconButtonProps }) {
-    return ((0, jsx_runtime_1.jsx)(IconButton_1.InternalIconButton, { size: size, "aria-label": ariaLabel, ...iconButtonProps, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Close, {}) }));
-}

package/dist/cjs/src/shared/ClearButton/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ClearButton"), exports);

package/dist/cjs/src/shared/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ClearButton"), exports);

package/dist/cjs/src/types/helpers.js

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

package/dist/cjs/src/types/responsive.js

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

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

@@ -1,26 +0,0 @@
-"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.js

@@ -1,34 +0,0 @@
-"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.js

@@ -1,20 +0,0 @@
-"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.js

@@ -1,71 +0,0 @@
-"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.js

@@ -1,29 +0,0 @@
-"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.js

@@ -1,39 +0,0 @@
-"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.js

@@ -1,28 +0,0 @@
-"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.js

@@ -1,87 +0,0 @@
-"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.js

@@ -1,90 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFixedColumns = void 0;
-const react_1 = require("react");
-/**
- * A hook to calculate the position of fixed columns in the DataGrid component.
- */
-const useFixedColumns = ({ enableRowSelection = false, columnIndex, leftFixedColumnIndex, rightFixedColumnIndex, }) => {
-    const cellRef = (0, react_1.useRef)(null);
-    const [fixedPositionStyles, setFixedPositionStyles] = (0, react_1.useState)();
-    const isCheckboxColumn = enableRowSelection && columnIndex === 0;
-    // Adjust column index when row selection is enabled to account for the checkbox column
-    const actualColumnIndex = (0, react_1.useMemo)(() => {
-        if (columnIndex === undefined)
-            return;
-        return enableRowSelection && !isCheckboxColumn ? columnIndex - 1 : columnIndex;
-    }, [columnIndex, enableRowSelection, isCheckboxColumn]);
-    // Determine if this cell should be fixed
-    const fixedDirection = (0, react_1.useMemo)(() => {
-        if (columnIndex === undefined)
-            return;
-        // Fix checkbox column only when leftFixedColumnIndex is defined
-        if (isCheckboxColumn && leftFixedColumnIndex !== undefined)
-            return 'left';
-        if (leftFixedColumnIndex !== undefined &&
-            actualColumnIndex !== undefined &&
-            actualColumnIndex <= leftFixedColumnIndex)
-            return 'left';
-        if (rightFixedColumnIndex !== undefined &&
-            actualColumnIndex !== undefined &&
-            actualColumnIndex >= rightFixedColumnIndex)
-            return 'right';
-        // Without this, "Not all code paths return a value. ts(7030)" warning occurs.
-        // eslint-disable-next-line no-useless-return
-        return;
-    }, [columnIndex, actualColumnIndex, leftFixedColumnIndex, rightFixedColumnIndex, isCheckboxColumn]);
-    const [cellRect, setCellRect] = (0, react_1.useState)();
-    // Calculate the position of the cell in the fixed direction
-    (0, react_1.useLayoutEffect)(() => {
-        if (!cellRef.current)
-            return;
-        const cell = cellRef.current;
-        const table = cell.closest('table');
-        if (!table)
-            return;
-        const tableRect = table.getBoundingClientRect();
-        const cellRect = cell.getBoundingClientRect();
-        // Calculate distance from left edge
-        const leftPosition = cellRect.left - tableRect.left;
-        // Calculate distance from right edge
-        const rightPosition = tableRect.right - cellRect.right;
-        setCellRect({
-            left: leftPosition,
-            right: rightPosition,
-        });
-    }, []);
-    (0, react_1.useLayoutEffect)(() => {
-        if (isCheckboxColumn && leftFixedColumnIndex !== undefined) {
-            setFixedPositionStyles({
-                left: 0,
-            });
-            return;
-        }
-        if (!cellRect)
-            return;
-        setFixedPositionStyles({
-            left: fixedDirection === 'left' ? cellRect.left : undefined,
-            right: fixedDirection === 'right' ? cellRect.right : undefined,
-        });
-    }, [cellRect, fixedDirection, isCheckboxColumn, leftFixedColumnIndex]);
-    const isFixedColumn = (0, react_1.useMemo)(() => fixedDirection !== undefined, [fixedDirection]);
-    const isEdgeFixedColumn = (0, react_1.useMemo)(() => {
-        if (!isFixedColumn)
-            return;
-        if (leftFixedColumnIndex !== undefined && actualColumnIndex === leftFixedColumnIndex)
-            return 'left';
-        if (rightFixedColumnIndex !== undefined && actualColumnIndex === rightFixedColumnIndex)
-            return 'right';
-        // Without this, "Not all code paths return a value. ts(7030)" warning occurs.
-        // eslint-disable-next-line no-useless-return
-        return;
-    }, [actualColumnIndex, isFixedColumn, leftFixedColumnIndex, rightFixedColumnIndex]);
-    return {
-        cellRef,
-        isFixedColumn,
-        isEdgeFixedColumn,
-        fixedPositionStyles,
-    };
-};
-exports.useFixedColumns = useFixedColumns;