@simplysm/solid 13.0.29 → 13.0.31

package/src/components/data/sheet/DataSheet.tsx

@@ -33,6 +33,7 @@ import type {
 import { isDataSheetColumnDef, DataSheetColumn } from "./DataSheetColumn";
 import { applySorting, buildHeaderTable, collectAllExpandable, flattenTree } from "./sheetUtils";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createPointerDrag } from "../../../hooks/createPointerDrag";
 import { Icon } from "../../display/Icon";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { Pagination } from "../Pagination";
@@ -89,8 +90,8 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     "sorts",
     "onSortsChange",
     "autoSort",
-    "pageIndex",
-    "onPageIndexChange",
+    "page",
+    "onPageChange",
     "totalPageCount",
     "itemsPerPage",
     "displayPageCount",
@@ -245,8 +246,8 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
   // #region Paging
   const [currentPage, setCurrentPage] = createControllableSignal({
-    value: () => local.pageIndex ?? 0,
-    onChange: () => local.onPageIndexChange,
+    value: () => local.page ?? 1,
+    onChange: () => local.onPageChange,
   });
 
   const effectivePageCount = createMemo(() => {
@@ -263,7 +264,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     if ((local.items ?? []).length <= 0) return sortedItems();
 
     const page = currentPage();
-    return sortedItems().slice(page * ipp, (page + 1) * ipp);
+    return sortedItems().slice((page - 1) * ipp, page * ipp);
   });
 
   // #region Feature Column Setup (확장/선택 기능 컬럼 공통)
@@ -367,7 +368,6 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   function onResizerPointerdown(event: PointerEvent, colKey: string): void {
     event.preventDefault();
     const target = event.target as HTMLElement;
-    target.setPointerCapture(event.pointerId);
 
     const th = target.closest("th")!;
     const container = th
@@ -385,32 +385,28 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
       height: `${container.scrollHeight}px`,
     });
 
-    const onPointerMove = (e: PointerEvent) => {
-      const delta = e.clientX - startX;
-      const newWidth = Math.max(30, startWidth + delta);
-      const currentRect = container.getBoundingClientRect();
-      setResizeIndicatorStyle({
-        display: "block",
-        left: `${th.getBoundingClientRect().left - currentRect.left + container.scrollLeft + newWidth}px`,
-        top: "0",
-        height: `${container.scrollHeight}px`,
-      });
-    };
-
-    const onPointerUp = (e: PointerEvent) => {
-      const delta = e.clientX - startX;
-      // 실제 드래그가 발생한 경우에만 너비 저장 (더블클릭 시 DOM 재생성으로 dblclick 유실 방지)
-      if (delta !== 0) {
+    createPointerDrag(target, event.pointerId, {
+      onMove(e) {
+        const delta = e.clientX - startX;
         const newWidth = Math.max(30, startWidth + delta);
-        saveColumnWidth(colKey, `${newWidth}px`);
-      }
-      setResizeIndicatorStyle({ display: "none" });
-      target.removeEventListener("pointermove", onPointerMove);
-      target.removeEventListener("pointerup", onPointerUp);
-    };
-
-    target.addEventListener("pointermove", onPointerMove);
-    target.addEventListener("pointerup", onPointerUp);
+        const currentRect = container.getBoundingClientRect();
+        setResizeIndicatorStyle({
+          display: "block",
+          left: `${th.getBoundingClientRect().left - currentRect.left + container.scrollLeft + newWidth}px`,
+          top: "0",
+          height: `${container.scrollHeight}px`,
+        });
+      },
+      onEnd(e) {
+        const delta = e.clientX - startX;
+        // 실제 드래그가 발생한 경우에만 너비 저장 (더블클릭 시 DOM 재생성으로 dblclick 유실 방지)
+        if (delta !== 0) {
+          const newWidth = Math.max(30, startWidth + delta);
+          saveColumnWidth(colKey, `${newWidth}px`);
+        }
+        setResizeIndicatorStyle({ display: "none" });
+      },
+    });
   }
 
   function onResizerDoubleClick(colKey: string): void {
@@ -567,7 +563,6 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   function onReorderPointerDown(e: PointerEvent, item: T): void {
     e.preventDefault();
     const target = e.currentTarget as HTMLElement;
-    target.setPointerCapture(e.pointerId);
 
     const tableEl = target.closest("table")!;
     const tbody = tableEl.querySelector("tbody")!;
@@ -575,114 +570,110 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
     setDragState({ draggingItem: item, targetItem: null, position: null });
 
-    const onPointerMove = (ev: PointerEvent) => {
-      let foundTarget: T | null = null;
-      let foundPosition: "before" | "after" | "inside" | null = null;
-
-      for (let i = 0; i < rows.length; i++) {
-        const row = rows[i];
-        const rect = row.getBoundingClientRect();
-        if (ev.clientY < rect.top || ev.clientY > rect.bottom) continue;
-
-        if (i >= displayItems().length) break;
-        const flat = displayItems()[i];
-        if (flat.item === item) break;
-
-        // 자기 자신의 하위 항목으로는 드롭 불가
-        if (isDescendant(item, flat.item)) break;
-
-        const relY = ev.clientY - rect.top;
-        const third = rect.height / 3;
-
-        if (relY < third) {
-          foundPosition = "before";
-        } else if (relY > third * 2) {
-          foundPosition = "after";
-        } else {
-          foundPosition = local.getChildren
-            ? "inside"
-            : relY < rect.height / 2
-              ? "before"
-              : "after";
-        }
-        foundTarget = flat.item;
-        break;
-      }
-
-      setDragState({ draggingItem: item, targetItem: foundTarget, position: foundPosition });
+    createPointerDrag(target, e.pointerId, {
+      onMove(ev) {
+        let foundTarget: T | null = null;
+        let foundPosition: "before" | "after" | "inside" | null = null;
 
-      // 인디케이터 DOM 업데이트
-      for (let i = 0; i < rows.length; i++) {
-        rows[i].removeAttribute("data-dragging");
-        rows[i].removeAttribute("data-drag-over");
+        for (let i = 0; i < rows.length; i++) {
+          const row = rows[i];
+          const rect = row.getBoundingClientRect();
+          if (ev.clientY < rect.top || ev.clientY > rect.bottom) continue;
 
-        if (i < displayItems().length) {
+          if (i >= displayItems().length) break;
           const flat = displayItems()[i];
-          if (flat.item === item) {
-            rows[i].setAttribute("data-dragging", "");
-          }
-          if (flat.item === foundTarget && foundPosition === "inside") {
-            rows[i].setAttribute("data-drag-over", "inside");
+          if (flat.item === item) break;
+
+          // 자기 자신의 하위 항목으로는 드롭 불가
+          if (isDescendant(item, flat.item)) break;
+
+          const relY = ev.clientY - rect.top;
+          const third = rect.height / 3;
+
+          if (relY < third) {
+            foundPosition = "before";
+          } else if (relY > third * 2) {
+            foundPosition = "after";
+          } else {
+            foundPosition = local.getChildren
+              ? "inside"
+              : relY < rect.height / 2
+                ? "before"
+                : "after";
           }
+          foundTarget = flat.item;
+          break;
         }
-      }
 
-      // before/after 인디케이터
-      const indicatorEl = tableEl
-        .closest("[data-sheet-scroll]")
-        ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
-      if (indicatorEl) {
-        if (foundTarget != null && foundPosition != null && foundPosition !== "inside") {
-          const targetIdx = displayItems().findIndex((f) => f.item === foundTarget);
-          if (targetIdx >= 0) {
-            const targetRow = rows[targetIdx];
-            const containerRect = tableEl.closest("[data-sheet-scroll]")!.getBoundingClientRect();
-            const rowRect = targetRow.getBoundingClientRect();
-            const scrollEl = tableEl.closest("[data-sheet-scroll]") as HTMLElement;
-
-            const top =
-              foundPosition === "before"
-                ? rowRect.top - containerRect.top + scrollEl.scrollTop
-                : rowRect.bottom - containerRect.top + scrollEl.scrollTop;
-
-            indicatorEl.style.display = "block";
-            indicatorEl.style.top = `${top}px`;
+        setDragState({ draggingItem: item, targetItem: foundTarget, position: foundPosition });
+
+        // 인디케이터 DOM 업데이트
+        for (let i = 0; i < rows.length; i++) {
+          rows[i].removeAttribute("data-dragging");
+          rows[i].removeAttribute("data-drag-over");
+
+          if (i < displayItems().length) {
+            const flat = displayItems()[i];
+            if (flat.item === item) {
+              rows[i].setAttribute("data-dragging", "");
+            }
+            if (flat.item === foundTarget && foundPosition === "inside") {
+              rows[i].setAttribute("data-drag-over", "inside");
+            }
           }
-        } else {
-          indicatorEl.style.display = "none";
         }
-      }
-    };
-
-    const onPointerUp = () => {
-      const state = dragState();
-      if (state?.targetItem != null && state.position != null) {
-        local.onItemsReorder?.({
-          item: state.draggingItem,
-          targetItem: state.targetItem,
-          position: state.position,
-        } as DataSheetReorderEvent<T>);
-      }
 
-      // 클린업
-      for (const row of rows) {
-        row.removeAttribute("data-dragging");
-        row.removeAttribute("data-drag-over");
-      }
-      const indicatorEl = tableEl
-        .closest("[data-sheet-scroll]")
-        ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
-      if (indicatorEl) {
-        indicatorEl.style.display = "none";
-      }
+        // before/after 인디케이터
+        const indicatorEl = tableEl
+          .closest("[data-sheet-scroll]")
+          ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
+        if (indicatorEl) {
+          if (foundTarget != null && foundPosition != null && foundPosition !== "inside") {
+            const targetIdx = displayItems().findIndex((f) => f.item === foundTarget);
+            if (targetIdx >= 0) {
+              const targetRow = rows[targetIdx];
+              const containerRect = tableEl.closest("[data-sheet-scroll]")!.getBoundingClientRect();
+              const rowRect = targetRow.getBoundingClientRect();
+              const scrollEl = tableEl.closest("[data-sheet-scroll]") as HTMLElement;
+
+              const top =
+                foundPosition === "before"
+                  ? rowRect.top - containerRect.top + scrollEl.scrollTop
+                  : rowRect.bottom - containerRect.top + scrollEl.scrollTop;
+
+              indicatorEl.style.display = "block";
+              indicatorEl.style.top = `${top}px`;
+            }
+          } else {
+            indicatorEl.style.display = "none";
+          }
+        }
+      },
+      onEnd() {
+        const state = dragState();
+        if (state?.targetItem != null && state.position != null) {
+          local.onItemsReorder?.({
+            item: state.draggingItem,
+            targetItem: state.targetItem,
+            position: state.position,
+          } as DataSheetReorderEvent<T>);
+        }
 
-      setDragState(null);
-      target.removeEventListener("pointermove", onPointerMove);
-      target.removeEventListener("pointerup", onPointerUp);
-    };
+        // 클린업
+        for (const row of rows) {
+          row.removeAttribute("data-dragging");
+          row.removeAttribute("data-drag-over");
+        }
+        const indicatorEl = tableEl
+          .closest("[data-sheet-scroll]")
+          ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
+        if (indicatorEl) {
+          indicatorEl.style.display = "none";
+        }
 
-    target.addEventListener("pointermove", onPointerMove);
-    target.addEventListener("pointerup", onPointerUp);
+        setDragState(null);
+      },
+    });
   }
 
   // #region Keyboard Navigation (Enter/Shift+Enter로 행 이동)
@@ -760,8 +751,8 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
         <div class={toolbarClass}>
           <Show when={effectivePageCount() > 1}>
             <Pagination
-              pageIndex={currentPage()}
-              onPageIndexChange={setCurrentPage}
+              page={currentPage()}
+              onPageChange={setCurrentPage}
               totalPageCount={effectivePageCount()}
               displayPageCount={local.displayPageCount}
               size="sm"

package/src/components/data/sheet/types.ts

@@ -15,8 +15,8 @@ export interface DataSheetProps<TItem> {
   autoSort?: boolean;
 
   // 페이지네이션
-  pageIndex?: number;
-  onPageIndexChange?: (pageIndex: number) => void;
+  page?: number;
+  onPageChange?: (page: number) => void;
   totalPageCount?: number;
   itemsPerPage?: number;
   displayPageCount?: number;

package/src/components/disclosure/Dialog.tsx

@@ -14,6 +14,7 @@ import { twMerge } from "tailwind-merge";
 import { IconX } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../hooks/createControllableSignal";
 import { createMountTransition } from "../../hooks/createMountTransition";
+import { createPointerDrag } from "../../hooks/createPointerDrag";
 import { mergeStyles } from "../../helpers/mergeStyles";
 import { Icon } from "../display/Icon";
 import { borderSubtle } from "../../styles/tokens.styles";
@@ -43,14 +44,14 @@ export interface DialogProps {
   float?: boolean;
   /** 전체 화면 모드 */
   fill?: boolean;
-  /** 너비 (px) */
-  widthPx?: number;
-  /** 높이 (px) */
-  heightPx?: number;
-  /** 최소 너비 (px) */
-  minWidthPx?: number;
-  /** 최소 높이 (px) */
-  minHeightPx?: number;
+  /** 너비 */
+  width?: number;
+  /** 높이 */
+  height?: number;
+  /** 최소 너비 */
+  minWidth?: number;
+  /** 최소 높이 */
+  minHeight?: number;
   /** 고정 위치 */
   position?: "bottom-right" | "top-right";
   /** 헤더 스타일 */
@@ -143,10 +144,10 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
     "movable",
     "float",
     "fill",
-    "widthPx",
-    "heightPx",
-    "minWidthPx",
-    "minHeightPx",
+    "width",
+    "height",
+    "minWidth",
+    "minHeight",
     "position",
     "headerStyle",
     "headerAction",
@@ -256,8 +257,6 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
     if ((event.target as HTMLElement).closest("button")) return;
 
     const target = event.currentTarget as HTMLElement;
-    target.setPointerCapture(event.pointerId);
-
     const dialogEl = dialogRef;
     const wrapperEl = wrapperRef;
 
@@ -266,42 +265,37 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
     const startTop = dialogEl.offsetTop;
     const startLeft = dialogEl.offsetLeft;
 
-    const doDrag = (e: PointerEvent): void => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      dialogEl.style.position = "absolute";
-      dialogEl.style.left = `${startLeft + e.clientX - startX}px`;
-      dialogEl.style.top = `${startTop + e.clientY - startY}px`;
-      dialogEl.style.right = "auto";
-      dialogEl.style.bottom = "auto";
-      dialogEl.style.margin = "0";
-
-      // 화면 밖 방지
-      if (dialogEl.offsetLeft > wrapperEl.offsetWidth - 100) {
-        dialogEl.style.left = wrapperEl.offsetWidth - 100 + "px";
-      }
-      if (dialogEl.offsetTop > wrapperEl.offsetHeight - 100) {
-        dialogEl.style.top = wrapperEl.offsetHeight - 100 + "px";
-      }
-      if (dialogEl.offsetTop < 0) {
-        dialogEl.style.top = "0";
-      }
-      if (dialogEl.offsetLeft < -dialogEl.offsetWidth + 100) {
-        dialogEl.style.left = -dialogEl.offsetWidth + 100 + "px";
-      }
-    };
-
-    const stopDrag = (e: PointerEvent): void => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      target.removeEventListener("pointermove", doDrag);
-      target.removeEventListener("pointerup", stopDrag);
-    };
-
-    target.addEventListener("pointermove", doDrag);
-    target.addEventListener("pointerup", stopDrag);
+    createPointerDrag(target, event.pointerId, {
+      onMove(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        dialogEl.style.position = "absolute";
+        dialogEl.style.left = `${startLeft + e.clientX - startX}px`;
+        dialogEl.style.top = `${startTop + e.clientY - startY}px`;
+        dialogEl.style.right = "auto";
+        dialogEl.style.bottom = "auto";
+        dialogEl.style.margin = "0";
+
+        // 화면 밖 방지
+        if (dialogEl.offsetLeft > wrapperEl.offsetWidth - 100) {
+          dialogEl.style.left = wrapperEl.offsetWidth - 100 + "px";
+        }
+        if (dialogEl.offsetTop > wrapperEl.offsetHeight - 100) {
+          dialogEl.style.top = wrapperEl.offsetHeight - 100 + "px";
+        }
+        if (dialogEl.offsetTop < 0) {
+          dialogEl.style.top = "0";
+        }
+        if (dialogEl.offsetLeft < -dialogEl.offsetWidth + 100) {
+          dialogEl.style.left = -dialogEl.offsetWidth + 100 + "px";
+        }
+      },
+      onEnd(e) {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+    });
   };
 
   // 리사이즈
@@ -310,8 +304,6 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
     if (!dialogRef) return;
 
     const target = event.currentTarget as HTMLElement;
-    target.setPointerCapture(event.pointerId);
-
     const dialogEl = dialogRef;
 
     const startX = event.clientX;
@@ -321,47 +313,42 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
     const startTop = dialogEl.offsetTop;
     const startLeft = dialogEl.offsetLeft;
 
-    const doDrag = (e: PointerEvent): void => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      if (direction === "top" || direction === "top-right" || direction === "top-left") {
-        if (dialogEl.style.position === "absolute") {
-          dialogEl.style.top = startTop + (e.clientY - startY) + "px";
-          dialogEl.style.bottom = "auto";
+    createPointerDrag(target, event.pointerId, {
+      onMove(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (direction === "top" || direction === "top-right" || direction === "top-left") {
+          if (dialogEl.style.position === "absolute") {
+            dialogEl.style.top = startTop + (e.clientY - startY) + "px";
+            dialogEl.style.bottom = "auto";
+          }
+          dialogEl.style.height = `${Math.max(startHeight - (e.clientY - startY), local.minHeight ?? 0)}px`;
         }
-        dialogEl.style.height = `${Math.max(startHeight - (e.clientY - startY), local.minHeightPx ?? 0)}px`;
-      }
-      if (direction === "bottom" || direction === "bottom-right" || direction === "bottom-left") {
-        dialogEl.style.height = `${Math.max(startHeight + e.clientY - startY, local.minHeightPx ?? 0)}px`;
-      }
-      if (direction === "right" || direction === "bottom-right" || direction === "top-right") {
-        dialogEl.style.width = `${Math.max(
-          startWidth + (e.clientX - startX) * (dialogEl.style.position === "absolute" ? 1 : 2),
-          local.minWidthPx ?? 0,
-        )}px`;
-      }
-      if (direction === "left" || direction === "bottom-left" || direction === "top-left") {
-        if (dialogEl.style.position === "absolute") {
-          dialogEl.style.left = startLeft + (e.clientX - startX) + "px";
+        if (direction === "bottom" || direction === "bottom-right" || direction === "bottom-left") {
+          dialogEl.style.height = `${Math.max(startHeight + e.clientY - startY, local.minHeight ?? 0)}px`;
         }
-        dialogEl.style.width = `${Math.max(
-          startWidth - (e.clientX - startX) * (dialogEl.style.position === "absolute" ? 1 : 2),
-          local.minWidthPx ?? 0,
-        )}px`;
-      }
-    };
-
-    const stopDrag = (e: PointerEvent): void => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      target.removeEventListener("pointermove", doDrag);
-      target.removeEventListener("pointerup", stopDrag);
-    };
-
-    target.addEventListener("pointermove", doDrag);
-    target.addEventListener("pointerup", stopDrag);
+        if (direction === "right" || direction === "bottom-right" || direction === "top-right") {
+          dialogEl.style.width = `${Math.max(
+            startWidth + (e.clientX - startX) * (dialogEl.style.position === "absolute" ? 1 : 2),
+            local.minWidth ?? 0,
+          )}px`;
+        }
+        if (direction === "left" || direction === "bottom-left" || direction === "top-left") {
+          if (dialogEl.style.position === "absolute") {
+            dialogEl.style.left = startLeft + (e.clientX - startX) + "px";
+          }
+          dialogEl.style.width = `${Math.max(
+            startWidth - (e.clientX - startX) * (dialogEl.style.position === "absolute" ? 1 : 2),
+            local.minWidth ?? 0,
+          )}px`;
+        }
+      },
+      onEnd(e) {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+    });
   };
 
   // dialog 인라인 스타일 계산
@@ -372,19 +359,19 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
       style.width = "100%";
       style.height = "100%";
     } else {
-      if (local.widthPx !== undefined) {
-        style.width = `${local.widthPx}px`;
+      if (local.width !== undefined) {
+        style.width = `${local.width}px`;
       }
-      if (local.heightPx !== undefined) {
-        style.height = `${local.heightPx}px`;
+      if (local.height !== undefined) {
+        style.height = `${local.height}px`;
       }
     }
 
-    if (local.minWidthPx !== undefined) {
-      style["min-width"] = `${local.minWidthPx}px`;
+    if (local.minWidth !== undefined) {
+      style["min-width"] = `${local.minWidth}px`;
     }
-    if (local.minHeightPx !== undefined) {
-      style["min-height"] = `${local.minHeightPx}px`;
+    if (local.minHeight !== undefined) {
+      style["min-height"] = `${local.minHeight}px`;
     }
 
     // position 모드
@@ -497,7 +484,7 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
                 }
                 onPointerDown={handleHeaderPointerDown}
               >
-                <h5 class={clsx("flex-1", "px-4 py-2", "text-sm font-semibold")}>{local.title}</h5>
+                <h5 class={clsx("flex-1", "px-4 py-2", "text-sm font-bold")}>{local.title}</h5>
                 {local.headerAction}
                 <Show when={local.closable ?? true}>
                   <button

package/src/components/disclosure/DialogContext.ts

@@ -17,10 +17,10 @@ export interface DialogShowOptions {
   movable?: boolean;
   float?: boolean;
   fill?: boolean;
-  widthPx?: number;
-  heightPx?: number;
-  minWidthPx?: number;
-  minHeightPx?: number;
+  width?: number;
+  height?: number;
+  minWidth?: number;
+  minHeight?: number;
   position?: "bottom-right" | "top-right";
   headerStyle?: JSX.CSSProperties | string;
   canDeactivate?: () => boolean;

package/src/components/disclosure/DialogProvider.tsx

@@ -124,10 +124,10 @@ export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
                 movable={entry.options.movable}
                 float={entry.options.float}
                 fill={entry.options.fill}
-                widthPx={entry.options.widthPx}
-                heightPx={entry.options.heightPx}
-                minWidthPx={entry.options.minWidthPx}
-                minHeightPx={entry.options.minHeightPx}
+                width={entry.options.width}
+                height={entry.options.height}
+                minWidth={entry.options.minWidth}
+                minHeight={entry.options.minHeight}
                 position={entry.options.position}
                 headerStyle={entry.options.headerStyle}
                 canDeactivate={entry.options.canDeactivate}