@byeolnaerim/flex-layout 0.0.2 → 0.0.3

package/dist/index.d.cts

@@ -1,7 +1,74 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import { HTMLAttributes, MouseEvent, TouchEvent, CSSProperties, ReactElement, ReactNode, RefObject } from 'react';
+import React__default, { ReactElement, ReactNode, HTMLAttributes, MouseEvent, TouchEvent, CSSProperties, RefObject, MutableRefObject } from 'react';
 import * as rxjs from 'rxjs';
-import { Subject, BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
+
+type ResizePanelMode =
+    | 'default'
+    | 'bottom-cylinder'
+    | 'bottom-cylinder-reverse'
+    | 'top-cylinder'
+    | 'left-cylinder'
+    | 'right-cylinder';
+
+type Direction = 'row' | 'column';
+type PanelMovementMode = 'bulldozer' | 'divorce' | 'stalker';
+type FitContent = 'width' | 'height';
+
+interface FlexLayoutChildrenType {
+    isInitialResizable?: boolean;
+    grow?: number;
+    prevGrow?: number;
+    panelMode?: ResizePanelMode;
+    isFitContent?: boolean;
+    isFitResize?: boolean;
+    isResizePanel?: boolean;
+    containerName: string;
+    children: ReactNode;
+    className?: string;
+}
+
+interface FlexContainerProps extends FlexLayoutChildrenType {
+    readonly fitContent?: FitContent;
+    readonly containerCount?: number;
+    readonly layoutName?: string;
+}
+
+interface FlexLayoutProps
+    extends Omit<
+        React.HTMLAttributes<HTMLDivElement>,
+        'children',
+        'id',
+        'panelClassName'
+    > {
+    direction: Direction;
+    children:
+        | ReactElement<FlexLayoutChildrenType>[]
+        | ReactElement<FlexLayoutChildrenType>;
+    layoutName: string;
+    isSplitScreen?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+    className?: string;
+    panelClassName?: string;
+    panelMovementMode?: PanelMovementMode;
+}
+
+type FlexLayoutResizePanelProps = {
+    direction: string;
+    containerCount: number;
+    panelMode?: ResizePanelMode;
+    containerName: string;
+    layoutName: string;
+    panelMovementMode: PanelMovementMode;
+    panelClassName?: string;
+};
+
+declare const FlexLayout: ({ layoutName, direction, children, ref, className, panelClassName, panelMovementMode, ...props }: FlexLayoutProps) => react_jsx_runtime.JSX.Element | null;
+
+declare const FlexLayoutContainer: ({ isFitContent, isFitResize, containerName, grow: initialGrow, prevGrow: initialPrevGrow, isInitialResizable, isResizePanel, children, className, panelMode, }: FlexContainerProps) => react_jsx_runtime.JSX.Element;
+
+declare const FlexLayoutResizePanel: ({ direction, containerCount, panelMode, containerName, layoutName, panelClassName, panelMovementMode, }: FlexLayoutResizePanelProps) => react_jsx_runtime.JSX.Element;
 
 interface FlexLayoutSplitScreenDragBoxProps<E extends HTMLElement = HTMLElement> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
@@ -28,6 +95,7 @@ interface DropDocumentOutsideOption {
     heightRatio?: number;
     isNewTap?: boolean;
 }
+declare function FlexLayoutSplitScreenDragBox<E extends HTMLElement>({ onMouseDown, onTouchStart, dropEndCallback, style, navigationTitle, targetComponent, containerName, children, className, dropDocumentOutsideOption, screenKey, isBlockingActiveInput, customData, scrollTargetRef, ...props }: FlexLayoutSplitScreenDragBoxProps): react_jsx_runtime.JSX.Element;
 
 type FlexLayoutSplitScreenProps = {
     layoutName: string;
@@ -37,6 +105,10 @@ type FlexLayoutSplitScreenProps = {
     dropDocumentOutsideOption?: DropDocumentOutsideOption;
     screenKey?: string;
 };
+declare function FlexLayoutSplitScreen({ children, containerName, layoutName, navigationTitle, dropDocumentOutsideOption, screenKey, }: FlexLayoutSplitScreenProps): react_jsx_runtime.JSX.Element;
+declare namespace FlexLayoutSplitScreen {
+    var displayName: string;
+}
 
 interface FlexLayoutSplitScreenScrollBoxProps extends HTMLAttributes<HTMLDivElement> {
     keyName: string;
@@ -44,56 +116,35 @@ interface FlexLayoutSplitScreenScrollBoxProps extends HTMLAttributes<HTMLDivElem
     direction?: "x" | "y";
     isDefaultScrollStyle?: boolean;
 }
+declare const _default: React$1.MemoExoticComponent<({ className, children, keyName, direction, isDefaultScrollStyle, ...props }: FlexLayoutSplitScreenScrollBoxProps) => react_jsx_runtime.JSX.Element>;
 
-type SubjectMap<T> = Record<string, Subject<T>>;
-interface ContainerStateRequest {
-    mode: "toggle" | "open" | "close";
-    initOpenState?: boolean;
-    onOpen?: () => void;
-    onClose?: () => void;
-    openOption?: {
-        isPrevSizeOpen?: boolean;
-        isResize?: boolean;
-        openGrowImportant?: number;
-    };
-    closeOption?: {
-        isResize?: boolean;
-        isDsiabledResizePanel?: boolean;
-    };
+type Edge = 'auto' | 'top' | 'bottom' | 'left' | 'right';
+interface FlexLayoutStickyBoxProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    /** 어느 방향으로 붙일지. 기본은 'auto' (세로 스크롤이면 top, 가로 스크롤이면 left) */
+    edge?: Edge;
+    /** 화면 모서리와의 여백(px). 기본 16 */
+    offset?: number;
+    /** 스크롤 루트. 명시 안 하면 가장 흔한 케이스인 <main> → 없으면 window(=viewport) */
+    scrollRoot?: Element | null;
+    /** 디버그 보조선 표시 */
+    debug?: boolean;
+    /** 자식 */
+    children: React__default.ReactNode;
+    onTranslateChange?: (value: number, rootRef: React__default.RefObject<HTMLDivElement | null>, contentRef: React__default.RefObject<HTMLDivElement | null>) => void;
 }
-interface ContainerState {
-    isOpen: boolean;
-    targetContainer: HTMLElement;
-    grow: number;
-}
-declare const containerOpenCloseSubjectMap: SubjectMap<ContainerStateRequest>;
-declare const containerSpreadSubjectMap: SubjectMap<ContainerState>;
-declare const ContainerOpenCloseProvider: ({ layoutName, containerName, sizeName, }: {
-    layoutName: string;
-    containerName: string;
-    sizeName: "width" | "height";
-}) => null;
-declare const useContainers: (layoutName: string) => HTMLElement[];
-declare const useLayoutName: (containerName: string) => string | undefined;
-declare const useDecompositionLayout: ({ layoutName: initialLayoutName, containerName, }: {
-    layoutName?: string;
-    containerName: string;
-}) => {
-    layout: HTMLElement[];
-    container: HTMLElement | undefined;
-    resizePanel: HTMLElement | undefined;
-};
-declare const useContainerSize: (containerName: string) => {
-    size: {
-        width: number;
-        height: number;
-    } | undefined;
-};
-declare const useDoubleClick: (containerName: string, opt: ContainerStateRequest) => {
-    isOpen: boolean | undefined;
-    isDoubleClick: boolean | undefined;
-    setIsDoubleClick: React$1.Dispatch<React$1.SetStateAction<boolean | undefined>>;
-};
+/**
+ * FlexLayoutStickyBox
+ * 부모(실제 경계) 안에서만 움직이며, `transform`을 동적으로 부여해
+ * “sticky처럼 보이도록” 만든다.
+ *
+ * 구조:
+ * <div data-root>      // 이 박스가 부모 경계 안에서 공간을 차지
+ * <div data-content> // 이 박스가 transform으로 부드럽게 움직임
+ * {children}
+ * </div>
+ * </div>
+ */
+declare const FlexLayoutStickyBox: React__default.FC<FlexLayoutStickyBoxProps>;
 
 interface DragStateType {
     isDragging: boolean;
@@ -198,6 +249,113 @@ declare const useFolderEvent: () => {
     folderEvent: FolderEventType | null;
 };
 
+type OnReachTerminalType = {
+    isFirst: boolean;
+    isLast: boolean;
+    observer: IntersectionObserver;
+};
+interface UseListPagingForInfinityProps {
+    onReachTerminal?: (onReachTerminalData: OnReachTerminalType) => void;
+}
+declare const useListPagingForSentinel: <E extends HTMLElement>({ onReachTerminal, }: UseListPagingForInfinityProps) => {
+    firstChildRef: (node: E | null) => void;
+    lastChildRef: (node: E | null) => void;
+};
+declare const usePaginationViewNumber: ({ initPageNumber, }: {
+    initPageNumber: number;
+}) => {
+    showCurrentPageNumber: number;
+    showCurrentPageObserveTarget: (node: HTMLElement | null) => void;
+};
+declare const usePagingHandler: <T>({ lastCallPageNumber, dataListRef, }: {
+    lastCallPageNumber: number;
+    dataListRef: MutableRefObject<Array<T[] | null>>;
+}) => {
+    jumpingPageNumberRef: MutableRefObject<number | null>;
+    paginationScrollIntoViewTarget: MutableRefObject<Record<number, HTMLDivElement | null>>;
+    pageNumberRef: MutableRefObject<number>;
+    setPaginationRef: (i: number) => (node: HTMLDivElement | null) => void;
+    handleReachTerminal: ({ isFirst, isLast, observer }: OnReachTerminalType, dataCallFetch: (callPageNumber: number) => void) => void;
+    handleClickPageChange: (page: number, dataCallFetch: (callPageNumber: number) => void) => void;
+};
+
+type SubjectMap<T> = Record<string, Subject<T>>;
+interface ContainerStateRequest {
+    mode: "toggle" | "open" | "close";
+    initOpenState?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    openOption?: {
+        isPrevSizeOpen?: boolean;
+        isResize?: boolean;
+        openGrowImportant?: number;
+    };
+    closeOption?: {
+        isResize?: boolean;
+        isDsiabledResizePanel?: boolean;
+    };
+}
+interface ContainerState {
+    isOpen: boolean;
+    targetContainer: HTMLElement;
+    grow: number;
+}
+declare const containerOpenCloseSubjectMap: SubjectMap<ContainerStateRequest>;
+declare const containerSpreadSubjectMap: SubjectMap<ContainerState>;
+declare const ContainerOpenCloseProvider: ({ layoutName, containerName, sizeName, }: {
+    layoutName: string;
+    containerName: string;
+    sizeName: "width" | "height";
+}) => null;
+declare const useContainers: (layoutName: string) => HTMLElement[];
+declare const useLayoutName: (containerName: string) => string | undefined;
+declare const useDecompositionLayout: ({ layoutName: initialLayoutName, containerName, }: {
+    layoutName?: string;
+    containerName: string;
+}) => {
+    layout: HTMLElement[];
+    container: HTMLElement | undefined;
+    resizePanel: HTMLElement | undefined;
+};
+declare const useContainerSize: (containerName: string) => {
+    size: {
+        width: number;
+        height: number;
+    } | undefined;
+};
+declare const useDoubleClick: (containerName: string, opt: ContainerStateRequest) => {
+    isOpen: boolean | undefined;
+    isDoubleClick: boolean | undefined;
+    setIsDoubleClick: React$1.Dispatch<React$1.SetStateAction<boolean | undefined>>;
+};
+
+declare function isDocumentOut({ x, y }: {
+    x: number;
+    y: number;
+}): boolean | undefined;
+declare function getClientXy(event: Event): {
+    clientX: number;
+    clientY: number;
+} | undefined;
+declare function isOverMove(elementSize: number, elementMinSize: number): boolean;
+declare function findNotCloseFlexContent(target: HTMLElement | Element | null, direction: 'previousElementSibling' | 'nextElementSibling'): HTMLElement | null;
+declare function remain(flexContainerList: Array<HTMLElement>): Promise<unknown>;
+declare function resize(list: Array<HTMLElement>, totalGrow: number): Promise<unknown>;
+declare function mathWeight(totalCount: number, totalGrow: number): number;
+declare function mathGrow(childSize: number, parentSize: number, containerCount: number): number;
+declare function getGrow(growTarget: HTMLElement | Element): number;
+declare function closeFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isResize, isDsiabledResizePanel, sizeName, }: {
+    isResize?: boolean;
+    isDsiabledResizePanel?: boolean;
+    sizeName: 'width' | 'height';
+}): Promise<unknown>;
+declare function openFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isPrevSizeOpen, isResize, openGrowImportant, sizeName, }: {
+    isPrevSizeOpen?: boolean;
+    isResize?: boolean;
+    openGrowImportant?: number;
+    sizeName?: 'width' | 'height';
+}): Promise<unknown>;
+
 interface ScrollPosition {
     x: number;
     y: number;
@@ -257,31 +415,4 @@ declare const getResizePanelRef: ({ containerName, layoutName, }: {
     layoutName?: string;
 }) => rxjs.Observable<RefObject<HTMLElement | null> | undefined>;
 
-declare function isDocumentOut({ x, y }: {
-    x: number;
-    y: number;
-}): boolean | undefined;
-declare function getClientXy(event: Event): {
-    clientX: number;
-    clientY: number;
-} | undefined;
-declare function isOverMove(elementSize: number, elementMinSize: number): boolean;
-declare function findNotCloseFlexContent(target: HTMLElement | Element | null, direction: 'previousElementSibling' | 'nextElementSibling'): HTMLElement | null;
-declare function remain(flexContainerList: Array<HTMLElement>): Promise<unknown>;
-declare function resize(list: Array<HTMLElement>, totalGrow: number): Promise<unknown>;
-declare function mathWeight(totalCount: number, totalGrow: number): number;
-declare function mathGrow(childSize: number, parentSize: number, containerCount: number): number;
-declare function getGrow(growTarget: HTMLElement | Element): number;
-declare function closeFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isResize, isDsiabledResizePanel, sizeName, }: {
-    isResize?: boolean;
-    isDsiabledResizePanel?: boolean;
-    sizeName: 'width' | 'height';
-}): Promise<unknown>;
-declare function openFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isPrevSizeOpen, isResize, openGrowImportant, sizeName, }: {
-    isPrevSizeOpen?: boolean;
-    isResize?: boolean;
-    openGrowImportant?: number;
-    sizeName?: 'width' | 'height';
-}): Promise<unknown>;
-
-export { ContainerOpenCloseProvider, type DragStateResultType, type DragStateType, type DropDocumentOutsideOption, type DropMovementEventType, type DropPositionOrderName, type DropTargetComponent, type DropTargetComponentEvent, type FlexLayoutSplitScreenDragBoxProps, type FlexLayoutSplitScreenProps, type FlexLayoutSplitScreenScrollBoxProps, type FolderEventType, type LayoutSplitScreenState, type PositionName, type ScrollPosition, type SplitScreenComponents, type SubjectMap, allSplitScreenCount, closeFlex, containerOpenCloseSubjectMap, containerSpreadSubjectMap, dragState, dropMovementEventSubject, findNotCloseFlexContent, flexContainerStore, flexResizePanelStore, folderEventSubject, getClientXy, getContainerRef, getCurrentSplitScreenComponents, getGrow, getLayoutInfos, getResizePanelRef, getScrollPosition, getSplitScreen, isDocumentOut, isOverMove, layoutSplitScreenStore, mathGrow, mathWeight, openFlex, remain, removeScrollPosition, removeSplitScreenChild, resetRootSplitScreen, resize, scrollPositions, setContainerRef, setFolderEvent, setResizePanelRef, setScrollPosition, setSplitScreen, useContainerSize, useContainers, useDecompositionLayout, useDoubleClick, useDragCapture, useDragEvents, useFolderEvent, useLayoutName };
+export { ContainerOpenCloseProvider, type DragStateResultType, type DragStateType, type DropMovementEventType, type DropPositionOrderName, type DropTargetComponent, type DropTargetComponentEvent, FlexLayout, FlexLayoutContainer, FlexLayoutResizePanel, FlexLayoutSplitScreen, FlexLayoutSplitScreenDragBox, _default as FlexLayoutSplitScreenScrollBox, FlexLayoutStickyBox, type FolderEventType, type LayoutSplitScreenState, type OnReachTerminalType, type PositionName, type ScrollPosition, type SplitScreenComponents, type SubjectMap, allSplitScreenCount, closeFlex, containerOpenCloseSubjectMap, containerSpreadSubjectMap, dragState, dropMovementEventSubject, findNotCloseFlexContent, flexContainerStore, flexResizePanelStore, folderEventSubject, getClientXy, getContainerRef, getCurrentSplitScreenComponents, getGrow, getLayoutInfos, getResizePanelRef, getScrollPosition, getSplitScreen, isDocumentOut, isOverMove, layoutSplitScreenStore, mathGrow, mathWeight, openFlex, remain, removeScrollPosition, removeSplitScreenChild, resetRootSplitScreen, resize, scrollPositions, setContainerRef, setFolderEvent, setResizePanelRef, setScrollPosition, setSplitScreen, useContainerSize, useContainers, useDecompositionLayout, useDoubleClick, useDragCapture, useDragEvents, useFolderEvent, useLayoutName, useListPagingForSentinel, usePaginationViewNumber, usePagingHandler };

package/dist/index.d.ts

@@ -1,7 +1,74 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import { HTMLAttributes, MouseEvent, TouchEvent, CSSProperties, ReactElement, ReactNode, RefObject } from 'react';
+import React__default, { ReactElement, ReactNode, HTMLAttributes, MouseEvent, TouchEvent, CSSProperties, RefObject, MutableRefObject } from 'react';
 import * as rxjs from 'rxjs';
-import { Subject, BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
+
+type ResizePanelMode =
+    | 'default'
+    | 'bottom-cylinder'
+    | 'bottom-cylinder-reverse'
+    | 'top-cylinder'
+    | 'left-cylinder'
+    | 'right-cylinder';
+
+type Direction = 'row' | 'column';
+type PanelMovementMode = 'bulldozer' | 'divorce' | 'stalker';
+type FitContent = 'width' | 'height';
+
+interface FlexLayoutChildrenType {
+    isInitialResizable?: boolean;
+    grow?: number;
+    prevGrow?: number;
+    panelMode?: ResizePanelMode;
+    isFitContent?: boolean;
+    isFitResize?: boolean;
+    isResizePanel?: boolean;
+    containerName: string;
+    children: ReactNode;
+    className?: string;
+}
+
+interface FlexContainerProps extends FlexLayoutChildrenType {
+    readonly fitContent?: FitContent;
+    readonly containerCount?: number;
+    readonly layoutName?: string;
+}
+
+interface FlexLayoutProps
+    extends Omit<
+        React.HTMLAttributes<HTMLDivElement>,
+        'children',
+        'id',
+        'panelClassName'
+    > {
+    direction: Direction;
+    children:
+        | ReactElement<FlexLayoutChildrenType>[]
+        | ReactElement<FlexLayoutChildrenType>;
+    layoutName: string;
+    isSplitScreen?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+    className?: string;
+    panelClassName?: string;
+    panelMovementMode?: PanelMovementMode;
+}
+
+type FlexLayoutResizePanelProps = {
+    direction: string;
+    containerCount: number;
+    panelMode?: ResizePanelMode;
+    containerName: string;
+    layoutName: string;
+    panelMovementMode: PanelMovementMode;
+    panelClassName?: string;
+};
+
+declare const FlexLayout: ({ layoutName, direction, children, ref, className, panelClassName, panelMovementMode, ...props }: FlexLayoutProps) => react_jsx_runtime.JSX.Element | null;
+
+declare const FlexLayoutContainer: ({ isFitContent, isFitResize, containerName, grow: initialGrow, prevGrow: initialPrevGrow, isInitialResizable, isResizePanel, children, className, panelMode, }: FlexContainerProps) => react_jsx_runtime.JSX.Element;
+
+declare const FlexLayoutResizePanel: ({ direction, containerCount, panelMode, containerName, layoutName, panelClassName, panelMovementMode, }: FlexLayoutResizePanelProps) => react_jsx_runtime.JSX.Element;
 
 interface FlexLayoutSplitScreenDragBoxProps<E extends HTMLElement = HTMLElement> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
@@ -28,6 +95,7 @@ interface DropDocumentOutsideOption {
     heightRatio?: number;
     isNewTap?: boolean;
 }
+declare function FlexLayoutSplitScreenDragBox<E extends HTMLElement>({ onMouseDown, onTouchStart, dropEndCallback, style, navigationTitle, targetComponent, containerName, children, className, dropDocumentOutsideOption, screenKey, isBlockingActiveInput, customData, scrollTargetRef, ...props }: FlexLayoutSplitScreenDragBoxProps): react_jsx_runtime.JSX.Element;
 
 type FlexLayoutSplitScreenProps = {
     layoutName: string;
@@ -37,6 +105,10 @@ type FlexLayoutSplitScreenProps = {
     dropDocumentOutsideOption?: DropDocumentOutsideOption;
     screenKey?: string;
 };
+declare function FlexLayoutSplitScreen({ children, containerName, layoutName, navigationTitle, dropDocumentOutsideOption, screenKey, }: FlexLayoutSplitScreenProps): react_jsx_runtime.JSX.Element;
+declare namespace FlexLayoutSplitScreen {
+    var displayName: string;
+}
 
 interface FlexLayoutSplitScreenScrollBoxProps extends HTMLAttributes<HTMLDivElement> {
     keyName: string;
@@ -44,56 +116,35 @@ interface FlexLayoutSplitScreenScrollBoxProps extends HTMLAttributes<HTMLDivElem
     direction?: "x" | "y";
     isDefaultScrollStyle?: boolean;
 }
+declare const _default: React$1.MemoExoticComponent<({ className, children, keyName, direction, isDefaultScrollStyle, ...props }: FlexLayoutSplitScreenScrollBoxProps) => react_jsx_runtime.JSX.Element>;
 
-type SubjectMap<T> = Record<string, Subject<T>>;
-interface ContainerStateRequest {
-    mode: "toggle" | "open" | "close";
-    initOpenState?: boolean;
-    onOpen?: () => void;
-    onClose?: () => void;
-    openOption?: {
-        isPrevSizeOpen?: boolean;
-        isResize?: boolean;
-        openGrowImportant?: number;
-    };
-    closeOption?: {
-        isResize?: boolean;
-        isDsiabledResizePanel?: boolean;
-    };
+type Edge = 'auto' | 'top' | 'bottom' | 'left' | 'right';
+interface FlexLayoutStickyBoxProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    /** 어느 방향으로 붙일지. 기본은 'auto' (세로 스크롤이면 top, 가로 스크롤이면 left) */
+    edge?: Edge;
+    /** 화면 모서리와의 여백(px). 기본 16 */
+    offset?: number;
+    /** 스크롤 루트. 명시 안 하면 가장 흔한 케이스인 <main> → 없으면 window(=viewport) */
+    scrollRoot?: Element | null;
+    /** 디버그 보조선 표시 */
+    debug?: boolean;
+    /** 자식 */
+    children: React__default.ReactNode;
+    onTranslateChange?: (value: number, rootRef: React__default.RefObject<HTMLDivElement | null>, contentRef: React__default.RefObject<HTMLDivElement | null>) => void;
 }
-interface ContainerState {
-    isOpen: boolean;
-    targetContainer: HTMLElement;
-    grow: number;
-}
-declare const containerOpenCloseSubjectMap: SubjectMap<ContainerStateRequest>;
-declare const containerSpreadSubjectMap: SubjectMap<ContainerState>;
-declare const ContainerOpenCloseProvider: ({ layoutName, containerName, sizeName, }: {
-    layoutName: string;
-    containerName: string;
-    sizeName: "width" | "height";
-}) => null;
-declare const useContainers: (layoutName: string) => HTMLElement[];
-declare const useLayoutName: (containerName: string) => string | undefined;
-declare const useDecompositionLayout: ({ layoutName: initialLayoutName, containerName, }: {
-    layoutName?: string;
-    containerName: string;
-}) => {
-    layout: HTMLElement[];
-    container: HTMLElement | undefined;
-    resizePanel: HTMLElement | undefined;
-};
-declare const useContainerSize: (containerName: string) => {
-    size: {
-        width: number;
-        height: number;
-    } | undefined;
-};
-declare const useDoubleClick: (containerName: string, opt: ContainerStateRequest) => {
-    isOpen: boolean | undefined;
-    isDoubleClick: boolean | undefined;
-    setIsDoubleClick: React$1.Dispatch<React$1.SetStateAction<boolean | undefined>>;
-};
+/**
+ * FlexLayoutStickyBox
+ * 부모(실제 경계) 안에서만 움직이며, `transform`을 동적으로 부여해
+ * “sticky처럼 보이도록” 만든다.
+ *
+ * 구조:
+ * <div data-root>      // 이 박스가 부모 경계 안에서 공간을 차지
+ * <div data-content> // 이 박스가 transform으로 부드럽게 움직임
+ * {children}
+ * </div>
+ * </div>
+ */
+declare const FlexLayoutStickyBox: React__default.FC<FlexLayoutStickyBoxProps>;
 
 interface DragStateType {
     isDragging: boolean;
@@ -198,6 +249,113 @@ declare const useFolderEvent: () => {
     folderEvent: FolderEventType | null;
 };
 
+type OnReachTerminalType = {
+    isFirst: boolean;
+    isLast: boolean;
+    observer: IntersectionObserver;
+};
+interface UseListPagingForInfinityProps {
+    onReachTerminal?: (onReachTerminalData: OnReachTerminalType) => void;
+}
+declare const useListPagingForSentinel: <E extends HTMLElement>({ onReachTerminal, }: UseListPagingForInfinityProps) => {
+    firstChildRef: (node: E | null) => void;
+    lastChildRef: (node: E | null) => void;
+};
+declare const usePaginationViewNumber: ({ initPageNumber, }: {
+    initPageNumber: number;
+}) => {
+    showCurrentPageNumber: number;
+    showCurrentPageObserveTarget: (node: HTMLElement | null) => void;
+};
+declare const usePagingHandler: <T>({ lastCallPageNumber, dataListRef, }: {
+    lastCallPageNumber: number;
+    dataListRef: MutableRefObject<Array<T[] | null>>;
+}) => {
+    jumpingPageNumberRef: MutableRefObject<number | null>;
+    paginationScrollIntoViewTarget: MutableRefObject<Record<number, HTMLDivElement | null>>;
+    pageNumberRef: MutableRefObject<number>;
+    setPaginationRef: (i: number) => (node: HTMLDivElement | null) => void;
+    handleReachTerminal: ({ isFirst, isLast, observer }: OnReachTerminalType, dataCallFetch: (callPageNumber: number) => void) => void;
+    handleClickPageChange: (page: number, dataCallFetch: (callPageNumber: number) => void) => void;
+};
+
+type SubjectMap<T> = Record<string, Subject<T>>;
+interface ContainerStateRequest {
+    mode: "toggle" | "open" | "close";
+    initOpenState?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    openOption?: {
+        isPrevSizeOpen?: boolean;
+        isResize?: boolean;
+        openGrowImportant?: number;
+    };
+    closeOption?: {
+        isResize?: boolean;
+        isDsiabledResizePanel?: boolean;
+    };
+}
+interface ContainerState {
+    isOpen: boolean;
+    targetContainer: HTMLElement;
+    grow: number;
+}
+declare const containerOpenCloseSubjectMap: SubjectMap<ContainerStateRequest>;
+declare const containerSpreadSubjectMap: SubjectMap<ContainerState>;
+declare const ContainerOpenCloseProvider: ({ layoutName, containerName, sizeName, }: {
+    layoutName: string;
+    containerName: string;
+    sizeName: "width" | "height";
+}) => null;
+declare const useContainers: (layoutName: string) => HTMLElement[];
+declare const useLayoutName: (containerName: string) => string | undefined;
+declare const useDecompositionLayout: ({ layoutName: initialLayoutName, containerName, }: {
+    layoutName?: string;
+    containerName: string;
+}) => {
+    layout: HTMLElement[];
+    container: HTMLElement | undefined;
+    resizePanel: HTMLElement | undefined;
+};
+declare const useContainerSize: (containerName: string) => {
+    size: {
+        width: number;
+        height: number;
+    } | undefined;
+};
+declare const useDoubleClick: (containerName: string, opt: ContainerStateRequest) => {
+    isOpen: boolean | undefined;
+    isDoubleClick: boolean | undefined;
+    setIsDoubleClick: React$1.Dispatch<React$1.SetStateAction<boolean | undefined>>;
+};
+
+declare function isDocumentOut({ x, y }: {
+    x: number;
+    y: number;
+}): boolean | undefined;
+declare function getClientXy(event: Event): {
+    clientX: number;
+    clientY: number;
+} | undefined;
+declare function isOverMove(elementSize: number, elementMinSize: number): boolean;
+declare function findNotCloseFlexContent(target: HTMLElement | Element | null, direction: 'previousElementSibling' | 'nextElementSibling'): HTMLElement | null;
+declare function remain(flexContainerList: Array<HTMLElement>): Promise<unknown>;
+declare function resize(list: Array<HTMLElement>, totalGrow: number): Promise<unknown>;
+declare function mathWeight(totalCount: number, totalGrow: number): number;
+declare function mathGrow(childSize: number, parentSize: number, containerCount: number): number;
+declare function getGrow(growTarget: HTMLElement | Element): number;
+declare function closeFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isResize, isDsiabledResizePanel, sizeName, }: {
+    isResize?: boolean;
+    isDsiabledResizePanel?: boolean;
+    sizeName: 'width' | 'height';
+}): Promise<unknown>;
+declare function openFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isPrevSizeOpen, isResize, openGrowImportant, sizeName, }: {
+    isPrevSizeOpen?: boolean;
+    isResize?: boolean;
+    openGrowImportant?: number;
+    sizeName?: 'width' | 'height';
+}): Promise<unknown>;
+
 interface ScrollPosition {
     x: number;
     y: number;
@@ -257,31 +415,4 @@ declare const getResizePanelRef: ({ containerName, layoutName, }: {
     layoutName?: string;
 }) => rxjs.Observable<RefObject<HTMLElement | null> | undefined>;
 
-declare function isDocumentOut({ x, y }: {
-    x: number;
-    y: number;
-}): boolean | undefined;
-declare function getClientXy(event: Event): {
-    clientX: number;
-    clientY: number;
-} | undefined;
-declare function isOverMove(elementSize: number, elementMinSize: number): boolean;
-declare function findNotCloseFlexContent(target: HTMLElement | Element | null, direction: 'previousElementSibling' | 'nextElementSibling'): HTMLElement | null;
-declare function remain(flexContainerList: Array<HTMLElement>): Promise<unknown>;
-declare function resize(list: Array<HTMLElement>, totalGrow: number): Promise<unknown>;
-declare function mathWeight(totalCount: number, totalGrow: number): number;
-declare function mathGrow(childSize: number, parentSize: number, containerCount: number): number;
-declare function getGrow(growTarget: HTMLElement | Element): number;
-declare function closeFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isResize, isDsiabledResizePanel, sizeName, }: {
-    isResize?: boolean;
-    isDsiabledResizePanel?: boolean;
-    sizeName: 'width' | 'height';
-}): Promise<unknown>;
-declare function openFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isPrevSizeOpen, isResize, openGrowImportant, sizeName, }: {
-    isPrevSizeOpen?: boolean;
-    isResize?: boolean;
-    openGrowImportant?: number;
-    sizeName?: 'width' | 'height';
-}): Promise<unknown>;
-
-export { ContainerOpenCloseProvider, type DragStateResultType, type DragStateType, type DropDocumentOutsideOption, type DropMovementEventType, type DropPositionOrderName, type DropTargetComponent, type DropTargetComponentEvent, type FlexLayoutSplitScreenDragBoxProps, type FlexLayoutSplitScreenProps, type FlexLayoutSplitScreenScrollBoxProps, type FolderEventType, type LayoutSplitScreenState, type PositionName, type ScrollPosition, type SplitScreenComponents, type SubjectMap, allSplitScreenCount, closeFlex, containerOpenCloseSubjectMap, containerSpreadSubjectMap, dragState, dropMovementEventSubject, findNotCloseFlexContent, flexContainerStore, flexResizePanelStore, folderEventSubject, getClientXy, getContainerRef, getCurrentSplitScreenComponents, getGrow, getLayoutInfos, getResizePanelRef, getScrollPosition, getSplitScreen, isDocumentOut, isOverMove, layoutSplitScreenStore, mathGrow, mathWeight, openFlex, remain, removeScrollPosition, removeSplitScreenChild, resetRootSplitScreen, resize, scrollPositions, setContainerRef, setFolderEvent, setResizePanelRef, setScrollPosition, setSplitScreen, useContainerSize, useContainers, useDecompositionLayout, useDoubleClick, useDragCapture, useDragEvents, useFolderEvent, useLayoutName };
+export { ContainerOpenCloseProvider, type DragStateResultType, type DragStateType, type DropMovementEventType, type DropPositionOrderName, type DropTargetComponent, type DropTargetComponentEvent, FlexLayout, FlexLayoutContainer, FlexLayoutResizePanel, FlexLayoutSplitScreen, FlexLayoutSplitScreenDragBox, _default as FlexLayoutSplitScreenScrollBox, FlexLayoutStickyBox, type FolderEventType, type LayoutSplitScreenState, type OnReachTerminalType, type PositionName, type ScrollPosition, type SplitScreenComponents, type SubjectMap, allSplitScreenCount, closeFlex, containerOpenCloseSubjectMap, containerSpreadSubjectMap, dragState, dropMovementEventSubject, findNotCloseFlexContent, flexContainerStore, flexResizePanelStore, folderEventSubject, getClientXy, getContainerRef, getCurrentSplitScreenComponents, getGrow, getLayoutInfos, getResizePanelRef, getScrollPosition, getSplitScreen, isDocumentOut, isOverMove, layoutSplitScreenStore, mathGrow, mathWeight, openFlex, remain, removeScrollPosition, removeSplitScreenChild, resetRootSplitScreen, resize, scrollPositions, setContainerRef, setFolderEvent, setResizePanelRef, setScrollPosition, setSplitScreen, useContainerSize, useContainers, useDecompositionLayout, useDoubleClick, useDragCapture, useDragEvents, useFolderEvent, useLayoutName, useListPagingForSentinel, usePaginationViewNumber, usePagingHandler };