@moneyforward/mfui-components 2.48.2 → 3.0.0

package/dist/cjs/src/SidePane/hooks/useSidePaneOpenStateWithAnimation.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSidePaneOpenStateWithAnimation = useSidePaneOpenStateWithAnimation;
-const react_1 = require("react");
-const constants_1 = require("../constants");
-function useSidePaneOpenStateWithAnimation({ open, sidePaneElement, }) {
-    const [localOpen, setLocalOpen] = (0, react_1.useState)(open);
-    const timerRef = (0, react_1.useRef)(null);
-    const openSidePane = (0, react_1.useCallback)(() => {
-        timerRef.current && clearTimeout(timerRef.current);
-        sidePaneElement?.classList.remove('out');
-        setLocalOpen(true);
-        sidePaneElement?.classList.add('in');
-    }, [sidePaneElement]);
-    const closeSidePane = (0, react_1.useCallback)(() => {
-        // Remove out class and add in class for animation
-        sidePaneElement?.classList.remove('in');
-        sidePaneElement?.classList.add('out');
-        // Clear timer if it exists
-        timerRef.current && clearTimeout(timerRef.current);
-        // MUST set timeout and wait until the animation is finished
-        timerRef.current = setTimeout(() => {
-            setLocalOpen(false);
-        }, constants_1.ANIMATION_DURATION_OUT_IN_MS);
-    }, [sidePaneElement]);
-    // Cleanup timer on unmount
-    (0, react_1.useEffect)(() => () => {
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-            timerRef.current = null;
-        }
-    }, []);
-    return {
-        localOpen,
-        openSidePane,
-        closeSidePane,
-    };
-}

package/dist/cjs/src/SidePane/hooks/useSidePaneStateController.js

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSidePaneStateController = useSidePaneStateController;
-const react_1 = require("react");
-const useUpdateEffect_1 = require("../../utilities/effect/useUpdateEffect");
-const useSidePaneOpenStateWithAnimation_1 = require("./useSidePaneOpenStateWithAnimation");
-/**
- * Custom hook to control the open/close state of a SidePane.
- *
- * This hook provides functionality to open or close a SidePane based on the `open` flag.
- *
- * @param options - The options for controlling the SidePane state.
- *
- * @param options.open - Flag indicating if the SidePane should be open.
- *
- * @param options.onClose - Callback function to execute when closing the SidePane.
- *
- * @returns Object containing functions to handle closing the SidePane and ref Object to attach Dialog element.
- */
-function useSidePaneStateController({ open, onClose, ref }) {
-    const [sidePaneElement, setSidePaneElement] = (0, react_1.useState)(null);
-    const { localOpen, openSidePane, closeSidePane } = (0, useSidePaneOpenStateWithAnimation_1.useSidePaneOpenStateWithAnimation)({ open, sidePaneElement });
-    const setSidePaneElementRef = (0, react_1.useCallback)((element) => {
-        setSidePaneElement(element);
-        const refObject = ref;
-        if (!refObject)
-            return;
-        if (typeof refObject === 'function') {
-            refObject(element);
-        }
-        else {
-            refObject.current = element;
-        }
-    }, [ref]);
-    // Whenever the `open` prop changes, update the local state.
-    (0, useUpdateEffect_1.useUpdateEffect)(() => {
-        open ? openSidePane() : closeSidePane();
-    }, [open, openSidePane, closeSidePane]);
-    /*
-     * Handles the close action for the side pane.
-     */
-    const handleCloseSidePane = (0, react_1.useCallback)(() => {
-        if (open !== undefined) {
-            onClose?.();
-        }
-        else {
-            closeSidePane();
-            onClose?.();
-        }
-    }, [closeSidePane, open, onClose]);
-    // Function to prevent the side pane from closing when clicking inside the side pane.
-    const handleStopCloseSidePane = (0, react_1.useCallback)((event) => {
-        event.stopPropagation();
-    }, []);
-    // Autofocus to the SidePane itself when it opens
-    (0, react_1.useEffect)(() => {
-        if (!localOpen)
-            return;
-        sidePaneElement?.focus();
-    }, [sidePaneElement, localOpen]);
-    return {
-        localOpen,
-        handleCloseSidePane,
-        handleStopCloseSidePane,
-        sidePaneElement,
-        setSidePaneElement: setSidePaneElementRef,
-    };
-}

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

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

package/dist/cjs/src/Skeleton/Skeleton.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Skeleton = 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 Skeleton component is used to indicate loading state of content before the data gets loaded.
- */
-exports.Skeleton = (0, react_1.forwardRef)(({ className }, ref) => {
-    const classes = (0, recipes_1.skeletonSlotRecipe)();
-    return (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, css_1.cx)(classes.root, 'mfui-Skeleton__root', className) });
-});

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

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

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

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

package/dist/cjs/src/SplitView/SplitView.js

@@ -1,176 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SplitView = 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");
-const useSplitViewAnimation_1 = require("./hooks/useSplitViewAnimation");
-const useSplitViewDrag_1 = require("./hooks/useSplitViewDrag");
-const useSplitViewKeyboard_1 = require("./hooks/useSplitViewKeyboard");
-const useSplitViewPanelVisibility_1 = require("./hooks/useSplitViewPanelVisibility");
-const useSplitViewResize_1 = require("./hooks/useSplitViewResize");
-const styles_1 = require("./utils/styles");
-const parseSize_1 = require("./utils/parseSize");
-/**
- * A resizable split layout component with two panels.
- *
- * Users can adjust panel sizes by dragging the divider between panels.
- * The right panel can be shown or hidden using the `isOpen` prop.
- *
- * @example
- * ```tsx
- * const [isOpen, setIsOpen] = useState(true);
- *
- * <SplitView
- *   leftPanelSlot={<div>Left Panel</div>}
- *   rightPanelSlot={<div>Right Panel</div>}
- *   isOpen={isOpen}
- *   initialRightPanelSize={300}
- *   minRightPanelSize={200}
- *   maxRightPanelSize={500}
- *   style={{ minWidth: '600px' }}
- * />
- * ```
- */
-exports.SplitView = (0, react_1.forwardRef)(({ className, leftPanelSlot, rightPanelSlot, isOpen, initialRightPanelSize, minRightPanelSize, maxRightPanelSize, leftPanelProps, rightPanelProps, dividerProps, enableAutoUnmount = true, ...props }, ref) => {
-    // Convert CSS width values to numbers for internal calculations
-    const initialRightPanelSizeNumber = (0, parseSize_1.parseSizeToNumber)(initialRightPanelSize, 'initialRightPanelSize');
-    const minRightPanelSizeNumber = (0, parseSize_1.parseSizeToNumber)(minRightPanelSize, 'minRightPanelSize');
-    const maxRightPanelSizeNumber = (0, parseSize_1.parseSizeToNumber)(maxRightPanelSize, 'maxRightPanelSize');
-    // Prop validation
-    (0, react_1.useEffect)(() => {
-        if (minRightPanelSizeNumber < 0) {
-            console.error(`SplitView: minRightPanelSize must be non-negative, but got ${String(minRightPanelSize)}.`);
-        }
-        if (maxRightPanelSizeNumber < 0) {
-            console.error(`SplitView: maxRightPanelSize must be non-negative, but got ${String(maxRightPanelSize)}.`);
-        }
-        if (initialRightPanelSizeNumber < 0) {
-            console.error(`SplitView: initialRightPanelSize must be non-negative, but got ${String(initialRightPanelSize)}.`);
-        }
-        if (minRightPanelSizeNumber > maxRightPanelSizeNumber) {
-            console.error(`SplitView: minRightPanelSize (${String(minRightPanelSize)}) must be less than or equal to maxRightPanelSize (${String(maxRightPanelSize)}).`);
-        }
-        if (initialRightPanelSizeNumber < minRightPanelSizeNumber) {
-            console.error(`SplitView: initialRightPanelSize (${String(initialRightPanelSize)}) must be greater than or equal to minRightPanelSize (${String(minRightPanelSize)}).`);
-        }
-        if (initialRightPanelSizeNumber > maxRightPanelSizeNumber) {
-            console.error(`SplitView: initialRightPanelSize (${String(initialRightPanelSize)}) must be less than or equal to maxRightPanelSize (${String(maxRightPanelSize)}).`);
-        }
-    }, [
-        initialRightPanelSize,
-        minRightPanelSize,
-        maxRightPanelSize,
-        initialRightPanelSizeNumber,
-        minRightPanelSizeNumber,
-        maxRightPanelSizeNumber,
-    ]);
-    const classes = (0, recipes_1.splitViewSlotRecipe)();
-    const containerRef = (0, react_1.useRef)(null);
-    const [rightPanelSize, setRightPanelSize] = (0, react_1.useState)();
-    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
-    const [animatedRightPanelSize, setAnimatedRightPanelSize] = (0, react_1.useState)();
-    const [isSlideOutAnimating, setIsSlideOutAnimating] = (0, react_1.useState)(false);
-    // Store last known right panel size for slide-out animation
-    const lastRightPanelSizeRef = (0, react_1.useRef)(undefined);
-    // Memoized callback to update last right panel size
-    const setLastRightPanelSize = (0, react_1.useCallback)((size) => {
-        lastRightPanelSizeRef.current = size;
-    }, []);
-    // Panel visibility management
-    const { isRightPanelVisible, isInitialMountRef, wasRightPanelVisibleOnMountRef, hasRightPanelBeenVisible, setHasRightPanelBeenVisible, previousIsRightPanelVisibleRef, lastRightPanelRef, } = (0, useSplitViewPanelVisibility_1.useSplitViewPanelVisibility)(isOpen, rightPanelSlot);
-    // Determine if right panel should be rendered based on enableAutoUnmount
-    const shouldRenderRightPanel = enableAutoUnmount ? isRightPanelVisible : true;
-    // Animation management
-    (0, useSplitViewAnimation_1.useSplitViewAnimation)({
-        isRightPanelVisible,
-        containerRef,
-        initialRightPanelSize: initialRightPanelSizeNumber,
-        minRightPanelSize: minRightPanelSizeNumber,
-        isInitialMountRef,
-        wasRightPanelVisibleOnMountRef,
-        previousIsRightPanelVisibleRef,
-        hasRightPanelBeenVisible,
-        isAnimating,
-        rightPanelSize,
-        lastRightPanelSizeRef,
-        lastRightPanelRef,
-        setRightPanelSize,
-        setIsAnimating,
-        setAnimatedRightPanelSize,
-        setHasRightPanelBeenVisible,
-        setIsSlideOutAnimating,
-    });
-    // Drag management
-    const { isDragging, handleMouseDown } = (0, useSplitViewDrag_1.useSplitViewDrag)({
-        containerRef,
-        minRightPanelSize: minRightPanelSizeNumber,
-        maxRightPanelSize: maxRightPanelSizeNumber,
-        setRightPanelSize,
-        setLastRightPanelSize,
-    });
-    // Keyboard navigation
-    const { handleKeyDown } = (0, useSplitViewKeyboard_1.useSplitViewKeyboard)({
-        containerRef,
-        rightPanelSize,
-        initialRightPanelSize: initialRightPanelSizeNumber,
-        minRightPanelSize: minRightPanelSizeNumber,
-        maxRightPanelSize: maxRightPanelSizeNumber,
-        setRightPanelSize,
-        setLastRightPanelSize,
-    });
-    // Resize management
-    (0, useSplitViewResize_1.useSplitViewResize)({
-        isRightPanelVisible,
-        containerRef,
-        isAnimating,
-        isDragging,
-        rightPanelSize,
-        minRightPanelSize: minRightPanelSizeNumber,
-        maxRightPanelSize: maxRightPanelSizeNumber,
-        setRightPanelSize,
-        setLastRightPanelSize,
-    });
-    // Calculate current right panel size based on animation and visibility state
-    let currentRightPanelSize;
-    if (isAnimating) {
-        currentRightPanelSize = animatedRightPanelSize;
-    }
-    else if (isRightPanelVisible) {
-        // Use rightPanelSize if set, otherwise fallback to initialRightPanelSize directly
-        currentRightPanelSize = rightPanelSize ?? initialRightPanelSizeNumber;
-    }
-    else {
-        currentRightPanelSize = undefined;
-    }
-    const rightPanelStyle = (0, styles_1.calculateRightPanelStyleUnified)({
-        currentSize: currentRightPanelSize,
-        enableAutoUnmount,
-        isRightPanelVisible,
-        isSlideOutAnimating,
-        hasRightPanelBeenVisible,
-        isAnimating,
-        rightPanelPropsStyle: rightPanelProps?.style,
-    });
-    const dividerStyle = (0, styles_1.calculateDividerStyle)({
-        hasRightPanelBeenVisible,
-        isAnimating,
-        isDragging,
-        dividerPropsStyle: dividerProps?.style,
-    });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: (node) => {
-            // Handle both refs
-            if (typeof ref === 'function') {
-                ref(node);
-            }
-            else if (ref) {
-                // eslint-disable-next-line no-param-reassign
-                ref.current = node;
-            }
-            containerRef.current = node;
-        }, className: (0, css_1.cx)(classes.root, 'mfui-SplitView__root', className), ...props, children: [(0, jsx_runtime_1.jsx)("div", { ...leftPanelProps, className: (0, css_1.cx)(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), children: leftPanelSlot }), isRightPanelVisible || isSlideOutAnimating ? ((0, jsx_runtime_1.jsx)("div", { ...dividerProps, className: (0, css_1.cx)(classes.divider, 'mfui-SplitView__divider', dividerProps?.className), role: "separator", "aria-orientation": "vertical", "aria-label": dividerProps?.['aria-label'] ?? '左右のパネルを調整', 
-                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                tabIndex: 0, style: dividerStyle, onPointerDown: handleMouseDown, onKeyDown: handleKeyDown })) : null, shouldRenderRightPanel || isSlideOutAnimating ? ((0, jsx_runtime_1.jsx)("div", { ...rightPanelProps, className: (0, css_1.cx)(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: rightPanelStyle, children: enableAutoUnmount ? (rightPanelSlot ?? lastRightPanelRef.current) : rightPanelSlot })) : null] }));
-});

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

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

package/dist/cjs/src/SplitView/constants.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.animationEasing = exports.ANIMATION_SIZE_THRESHOLD_PX = exports.KEYBOARD_STEP_PX = exports.ANIMATION_DURATION_OUT_MS = exports.ANIMATION_DURATION_IN_MS = void 0;
-/**
- * Animation duration for the slide-in animation in milliseconds.
- * Uses MFUI design token: `durations.mfui.transition.duration.split-view.in` (350ms)
- */
-exports.ANIMATION_DURATION_IN_MS = 350;
-/**
- * Animation duration for the slide-out animation in milliseconds.
- * Uses MFUI design token: `durations.mfui.transition.duration.split-view.out` (200ms)
- */
-exports.ANIMATION_DURATION_OUT_MS = 200;
-/**
- * Keyboard step size in pixels for resizing via arrow keys.
- * Uses MFUI design token: `sizes.mfui.layout.grid.scale.horizontal.1` (14px)
- */
-exports.KEYBOARD_STEP_PX = 14;
-/**
- * Minimum size difference in pixels required to trigger an animation.
- * If the difference between start and target sizes is less than this threshold,
- * the animation is skipped and the size is set directly.
- */
-exports.ANIMATION_SIZE_THRESHOLD_PX = 1;
-/**
- * Easing function for slide-in and slide-out animations.
- * Approximates `cubic-bezier(0.5, 0, 0.25, 1)` from MFUI design tokens.
- *
- * @param t - The animation progress from 0 to 1
- *
- * @returns The eased progress value (0 to 1)
- */
-const animationEasing = (t) => {
-    // Approximate cubic-bezier(0.5, 0, 0.25, 1) from transition.easing.split-view.in/out tokens
-    if (t <= 0)
-        return 0;
-    if (t >= 1)
-        return 1;
-    // Polynomial approximation of cubic-bezier(0.5, 0, 0.25, 1)
-    const t2 = t * t;
-    const t3 = t2 * t;
-    return 3 * t2 - 2 * t3 + (1 - t) * (1 - t) * t * 2;
-};
-exports.animationEasing = animationEasing;

package/dist/cjs/src/SplitView/hooks/useSplitViewAnimation.js

@@ -1,129 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSplitViewAnimation = useSplitViewAnimation;
-const react_1 = require("react");
-const constants_1 = require("../constants");
-const calculatePanelSize_1 = require("../utils/calculatePanelSize");
-const animation_1 = require("../utils/animation");
-/**
- * Hook to handle slide-in and slide-out animations for the split view.
- *
- * @param options - Animation hook options
- */
-function useSplitViewAnimation(options) {
-    const { isRightPanelVisible, containerRef, initialRightPanelSize, minRightPanelSize, isInitialMountRef, wasRightPanelVisibleOnMountRef, previousIsRightPanelVisibleRef, hasRightPanelBeenVisible, isAnimating, rightPanelSize, lastRightPanelSizeRef, lastRightPanelRef, setRightPanelSize, setIsAnimating, setAnimatedRightPanelSize, setHasRightPanelBeenVisible, setIsSlideOutAnimating, } = options;
-    // Track when right panel becomes visible to trigger animation (only when opened by trigger, not on initial mount)
-    (0, react_1.useLayoutEffect)(() => {
-        const isInitialMount = isInitialMountRef.current;
-        const previousIsRightPanelVisible = previousIsRightPanelVisibleRef.current;
-        // Update previous visibility state at the start of layout effect
-        previousIsRightPanelVisibleRef.current = isRightPanelVisible;
-        // Handle initial mount: if right panel is already visible, set size without animation
-        if (isInitialMount && isRightPanelVisible && wasRightPanelVisibleOnMountRef.current) {
-            // Use saved right panel size if available, otherwise use initialRightPanelSize
-            const savedRightPanelSize = lastRightPanelSizeRef.current;
-            const targetRightPanelSize = (0, calculatePanelSize_1.calculateInitialRightPanelSize)(initialRightPanelSize, savedRightPanelSize);
-            setRightPanelSize(targetRightPanelSize);
-            lastRightPanelSizeRef.current = targetRightPanelSize;
-            // hasRightPanelBeenVisible is already true from initial state, no need to set it
-            isInitialMountRef.current = false;
-            return;
-        }
-        // Mark initial mount as complete after first render
-        if (isInitialMount) {
-            isInitialMountRef.current = false;
-        }
-        // Animate slide-in only when right panel becomes visible after initial mount (triggered by user action)
-        // Check if right panel just became visible (transition from hidden to visible)
-        const justBecameVisible = isRightPanelVisible && !previousIsRightPanelVisible && !hasRightPanelBeenVisible;
-        if (justBecameVisible && !isAnimating && !isInitialMount) {
-            // Use saved right panel size if available, otherwise use initialRightPanelSize
-            const savedRightPanelSize = lastRightPanelSizeRef.current;
-            const targetRightPanelSize = (0, calculatePanelSize_1.calculateInitialRightPanelSize)(initialRightPanelSize, savedRightPanelSize);
-            // Start animation from 0px (right panel hidden)
-            const startSize = 0;
-            // Only animate if there's a visual difference
-            if (Math.abs(targetRightPanelSize - startSize) < constants_1.ANIMATION_SIZE_THRESHOLD_PX) {
-                // No animation needed, set directly
-                setRightPanelSize(targetRightPanelSize);
-                lastRightPanelSizeRef.current = targetRightPanelSize;
-                setHasRightPanelBeenVisible(true);
-                return;
-            }
-            // Immediately set the right panel size to avoid layout shift flash
-            setRightPanelSize(startSize);
-            setIsAnimating(true);
-            setAnimatedRightPanelSize(startSize);
-            setHasRightPanelBeenVisible(true);
-            (0, animation_1.createSlideInAnimation)({
-                startSize,
-                targetSize: targetRightPanelSize,
-                onUpdate: (size) => {
-                    setAnimatedRightPanelSize(size);
-                },
-                onComplete: () => {
-                    setIsAnimating(false);
-                    setAnimatedRightPanelSize(undefined);
-                    setRightPanelSize(targetRightPanelSize);
-                    lastRightPanelSizeRef.current = targetRightPanelSize;
-                },
-            });
-        }
-        // Slide-out animation: right panel becomes hidden
-        if (!isRightPanelVisible && hasRightPanelBeenVisible) {
-            if (containerRef.current && !isAnimating) {
-                // Start from current right panel size
-                const startSize = lastRightPanelSizeRef.current ?? rightPanelSize ?? 0;
-                // Animate to 0px (right panel hidden)
-                const targetSize = 0;
-                setIsAnimating(true);
-                setIsSlideOutAnimating(true);
-                setAnimatedRightPanelSize(startSize);
-                (0, animation_1.createSlideOutAnimation)({
-                    startSize,
-                    targetSize,
-                    onUpdate: (size) => {
-                        setAnimatedRightPanelSize(size);
-                    },
-                    onComplete: () => {
-                        setIsAnimating(false);
-                        setIsSlideOutAnimating(false);
-                        setAnimatedRightPanelSize(undefined);
-                        setRightPanelSize(undefined);
-                        setHasRightPanelBeenVisible(false);
-                        // Clear stored content after animation completes
-                        lastRightPanelRef.current = null;
-                    },
-                });
-            }
-            else {
-                // No animation - immediately reset
-                // Save current right panel size before closing
-                if (rightPanelSize !== undefined) {
-                    lastRightPanelSizeRef.current = rightPanelSize;
-                }
-                setHasRightPanelBeenVisible(false);
-                // Reset right panel size to allow left panel to take full width
-                setRightPanelSize(undefined);
-            }
-        }
-    }, [
-        isRightPanelVisible,
-        containerRef,
-        initialRightPanelSize,
-        minRightPanelSize,
-        isInitialMountRef,
-        wasRightPanelVisibleOnMountRef,
-        previousIsRightPanelVisibleRef,
-        hasRightPanelBeenVisible,
-        isAnimating,
-        rightPanelSize,
-        lastRightPanelSizeRef,
-        lastRightPanelRef,
-        setRightPanelSize,
-        setIsAnimating,
-        setAnimatedRightPanelSize,
-        setHasRightPanelBeenVisible,
-        setIsSlideOutAnimating,
-    ]);
-}

package/dist/cjs/src/SplitView/hooks/useSplitViewDrag.js

@@ -1,66 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSplitViewDrag = useSplitViewDrag;
-const react_1 = require("react");
-const calculatePanelSize_1 = require("../utils/calculatePanelSize");
-/**
- * Hook to handle drag interactions for resizing the split view.
- *
- * @param options - Drag hook options
- */
-function useSplitViewDrag(options) {
-    const { containerRef, minRightPanelSize, maxRightPanelSize, setRightPanelSize, setLastRightPanelSize } = options;
-    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
-    const pointerIdRef = (0, react_1.useRef)(null);
-    /**
-     * Handle pointer down on the divider
-     */
-    const handlePointerDown = (0, react_1.useCallback)((event) => {
-        event.preventDefault();
-        // Capture pointer to ensure we receive all events including pointerup
-        event.currentTarget.setPointerCapture(event.pointerId);
-        pointerIdRef.current = event.pointerId;
-        setIsDragging(true);
-    }, []);
-    /**
-     * Handle pointer move during drag
-     */
-    const handlePointerMove = (0, react_1.useCallback)((event) => {
-        if (!isDragging || pointerIdRef.current !== event.pointerId)
-            return;
-        if (!containerRef.current)
-            return;
-        const containerRect = containerRef.current.getBoundingClientRect();
-        const containerSize = containerRect.width;
-        const rawRightPanelSize = containerSize - (event.clientX - containerRect.left);
-        // Apply min/max constraints directly to right panel size
-        const constrainedRightPanelSize = (0, calculatePanelSize_1.calculateConstrainedRightPanelSize)(rawRightPanelSize, minRightPanelSize, maxRightPanelSize);
-        setRightPanelSize(constrainedRightPanelSize);
-        setLastRightPanelSize(constrainedRightPanelSize);
-    }, [isDragging, containerRef, minRightPanelSize, maxRightPanelSize, setRightPanelSize, setLastRightPanelSize]);
-    /**
-     * Handle pointer up to stop dragging
-     */
-    const handlePointerUp = (0, react_1.useCallback)((event) => {
-        if (pointerIdRef.current === event.pointerId) {
-            setIsDragging(false);
-            pointerIdRef.current = null;
-        }
-    }, []);
-    /**
-     * Set up pointer event listeners
-     */
-    (0, react_1.useEffect)(() => {
-        if (!isDragging)
-            return;
-        document.addEventListener('pointermove', handlePointerMove);
-        document.addEventListener('pointerup', handlePointerUp);
-        document.addEventListener('pointercancel', handlePointerUp);
-        return () => {
-            document.removeEventListener('pointermove', handlePointerMove);
-            document.removeEventListener('pointerup', handlePointerUp);
-            document.removeEventListener('pointercancel', handlePointerUp);
-        };
-    }, [isDragging, handlePointerMove, handlePointerUp]);
-    return { isDragging, handleMouseDown: handlePointerDown };
-}

package/dist/cjs/src/SplitView/hooks/useSplitViewKeyboard.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSplitViewKeyboard = useSplitViewKeyboard;
-const react_1 = require("react");
-const constants_1 = require("../constants");
-const calculatePanelSize_1 = require("../utils/calculatePanelSize");
-/**
- * Hook to handle keyboard navigation for resizing the split view.
- *
- * @param options - Keyboard hook options
- */
-function useSplitViewKeyboard(options) {
-    const { containerRef, rightPanelSize, initialRightPanelSize, minRightPanelSize, maxRightPanelSize, setRightPanelSize, setLastRightPanelSize, } = options;
-    /**
-     * Handle keyboard navigation for the divider
-     */
-    const handleKeyDown = (0, react_1.useCallback)((event) => {
-        if (!containerRef.current)
-            return;
-        const increaseKeys = ['ArrowLeft'];
-        const decreaseKeys = ['ArrowRight'];
-        if (![...increaseKeys, ...decreaseKeys].includes(event.key))
-            return;
-        event.preventDefault();
-        const currentSize = rightPanelSize ?? initialRightPanelSize;
-        let newSize = currentSize;
-        if (increaseKeys.includes(event.key)) {
-            newSize = currentSize + constants_1.KEYBOARD_STEP_PX;
-        }
-        else if (decreaseKeys.includes(event.key)) {
-            newSize = currentSize - constants_1.KEYBOARD_STEP_PX;
-        }
-        // Apply min/max constraints directly to right panel size
-        const constrainedSize = (0, calculatePanelSize_1.calculateConstrainedRightPanelSize)(newSize, minRightPanelSize, maxRightPanelSize);
-        setRightPanelSize(constrainedSize);
-        setLastRightPanelSize(constrainedSize);
-    }, [
-        containerRef,
-        rightPanelSize,
-        initialRightPanelSize,
-        minRightPanelSize,
-        maxRightPanelSize,
-        setRightPanelSize,
-        setLastRightPanelSize,
-    ]);
-    return { handleKeyDown };
-}

package/dist/cjs/src/SplitView/hooks/useSplitViewPanelVisibility.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSplitViewPanelVisibility = useSplitViewPanelVisibility;
-const react_1 = require("react");
-/**
- * Hook to manage the visibility state of the right panel.
- *
- * @param isOpen - Controlled visibility state (optional)
- *
- * @param rightPanelSlot - The right panel content
- *
- * @returns Object containing visibility state and related refs
- */
-function useSplitViewPanelVisibility(isOpen, rightPanelSlot) {
-    // Determine if right panel should be visible (controlled by isOpen prop only)
-    const isRightPanelVisible = isOpen ?? true;
-    // Track if this is the initial mount
-    const isInitialMountRef = (0, react_1.useRef)(true);
-    // Track if right panel was visible on initial mount
-    const wasRightPanelVisibleOnMountRef = (0, react_1.useRef)(null);
-    // Initialize wasRightPanelVisibleOnMountRef on first render only
-    if (wasRightPanelVisibleOnMountRef.current === null) {
-        wasRightPanelVisibleOnMountRef.current = isRightPanelVisible;
-    }
-    // Initialize hasRightPanelBeenVisible based on initial render state
-    const [hasRightPanelBeenVisible, setHasRightPanelBeenVisible] = (0, react_1.useState)(() => wasRightPanelVisibleOnMountRef.current ?? false);
-    // Track previous visibility state
-    // Note: This ref is updated in useSplitViewAnimation hook to ensure correct timing
-    const previousIsRightPanelVisibleRef = (0, react_1.useRef)(isRightPanelVisible);
-    // Store last seen right panel for slide-out animation
-    const lastRightPanelRef = (0, react_1.useRef)(null);
-    // Store right panel when visible for slide-out animation
-    (0, react_1.useEffect)(() => {
-        if (isRightPanelVisible) {
-            lastRightPanelRef.current = rightPanelSlot;
-        }
-    }, [rightPanelSlot, isRightPanelVisible]);
-    return {
-        isRightPanelVisible,
-        isInitialMountRef,
-        wasRightPanelVisibleOnMountRef,
-        hasRightPanelBeenVisible,
-        setHasRightPanelBeenVisible,
-        previousIsRightPanelVisibleRef,
-        lastRightPanelRef,
-    };
-}