@simplysm/solid 13.0.84 → 13.0.86

package/docs/providers-hooks.md

@@ -0,0 +1,411 @@
+# 프로바이더 & 훅
+
+## SystemProvider
+
+모든 필수 프로바이더를 한 번에 감싸는 편의 컴포넌트. 대부분의 앱에서는 이것 하나로 충분하다.
+
+```tsx
+import { SystemProvider } from "@simplysm/solid";
+
+<SystemProvider clientName="my-app" busyVariant="spinner">
+  <App />
+</SystemProvider>
+```
+
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `clientName` | `string` | 클라이언트 식별 이름 (localStorage 키 접두사 등에 사용) |
+| `busyVariant` | `"spinner" \| "bar"` | 글로벌 BusyProvider 변형 |
+
+내부 프로바이더 스택 (위에서 아래 순서):
+`ConfigProvider` > `I18nProvider` > `SyncStorageProvider` > `LoggerProvider` > `NotificationProvider` + `NotificationBanner` > `ErrorLoggerProvider` > `PwaUpdateProvider` > `ClipboardProvider` > `ThemeProvider` > `ServiceClientProvider` > `SharedDataProvider` > `BusyProvider`
+
+---
+
+## ThemeProvider
+
+라이트/다크/시스템 테마 관리. localStorage에 설정 저장.
+
+```tsx
+import { ThemeProvider, useTheme } from "@simplysm/solid";
+
+<ThemeProvider>
+  <App />
+</ThemeProvider>
+
+const theme = useTheme();
+
+theme.mode();           // "light" | "dark" | "system"
+theme.resolvedTheme();  // "light" | "dark" (OS 설정 반영)
+theme.setMode("dark");
+theme.cycleMode();      // light → system → dark → light
+```
+
+---
+
+## I18nProvider
+
+다국어 지원. 한국어(ko), 영어(en) 내장.
+
+```tsx
+import { I18nProvider, useI18n } from "@simplysm/solid";
+
+<I18nProvider>
+  <App />
+</I18nProvider>
+
+const i18n = useI18n();
+
+i18n.t("save");                    // 번역 조회
+i18n.t("greeting", { name: "Alice" }); // 파라미터 치환
+i18n.locale();                     // 현재 로케일
+i18n.setLocale("en");
+
+// 사전 확장
+i18n.configure({
+  dictionaries: {
+    ko: { myKey: "내 값" },
+    en: { myKey: "My Value" },
+  },
+});
+```
+
+---
+
+## SharedDataProvider
+
+서버 데이터를 구독하고 실시간 동기화하는 프로바이더. `ServiceClientProvider`와 `NotificationProvider` 내부에서 사용해야 한다.
+
+```tsx
+import { SharedDataProvider, useSharedData } from "@simplysm/solid";
+
+// 프로바이더 설정 (SystemProvider 사용 시 자동 포함)
+<SharedDataProvider>
+  <App />
+</SharedDataProvider>
+
+// 데이터 정의 (자식 컴포넌트에서 한 번만 호출)
+const sharedData = useSharedData<{
+  users: User;
+  departments: Department;
+}>();
+
+sharedData.configure(() => ({
+  users: {
+    fetch: async (changeKeys) => await api.getUsers(changeKeys),
+    getKey: (item) => item.id,
+    orderBy: [[(item) => item.name, "asc"]],
+    itemSearchText: (item) => item.name,
+    isItemHidden: (item) => item.isDeleted,
+  },
+  departments: {
+    fetch: async (changeKeys) => await api.getDepartments(changeKeys),
+    getKey: (item) => item.id,
+    orderBy: [[(item) => item.sortOrder, "asc"]],
+    getParentKey: (item) => item.parentId,  // 트리 구조 지원
+  },
+}));
+
+// 데이터 사용
+const users = sharedData.users.items();     // 반응형 배열
+const user = sharedData.users.get(userId);  // 키로 조회
+
+// 변경 이벤트 발행 (서버의 모든 구독자에게 전파)
+await sharedData.users.emit([changedUserId]);
+
+// 전체 로딩 대기
+await sharedData.wait();
+```
+
+### SharedDataDefinition
+
+| 속성 | 타입 | 설명 |
+|------|------|------|
+| `fetch` | `(changeKeys?) => Promise<TData[]>` | 데이터 조회 함수 |
+| `getKey` | `(item) => string \| number` | 항목 고유 키 추출 |
+| `orderBy` | `[(item) => unknown, "asc" \| "desc"][]` | 정렬 기준 (다중) |
+| `serviceKey` | `string` | 서비스 연결 키 (기본: `"default"`) |
+| `filter` | `unknown` | 서버 이벤트 필터 |
+| `itemSearchText` | `(item) => string` | 검색 텍스트 추출 |
+| `isItemHidden` | `(item) => boolean` | 숨김 여부 |
+| `getParentKey` | `(item) => string \| number \| undefined` | 부모 키 (트리 구조) |
+
+### SharedDataAccessor
+
+| 메서드/속성 | 타입 | 설명 |
+|------------|------|------|
+| `items()` | `Accessor<TData[]>` | 반응형 데이터 배열 |
+| `get(key)` | `(key) => TData \| undefined` | 키로 단건 조회 |
+| `emit(changeKeys?)` | `(keys?) => Promise<void>` | 변경 이벤트 발행 |
+| `getKey` | `(item) => string \| number` | 키 추출 함수 |
+
+---
+
+## 기타 프로바이더
+
+| 프로바이더 | 설명 |
+|-----------|------|
+| `ConfigProvider` | 클라이언트 설정 (localStorage 키 접두사). prop: `clientName: string` |
+| `ServiceClientProvider` | `@simplysm/service-client` WebSocket 연결 통합 |
+| `SyncStorageProvider` | localStorage 동기화 |
+| `LoggerProvider` | 로깅 설정 |
+| `ErrorLoggerProvider` | 글로벌 에러 핸들링 (window.onerror 등) |
+| `ClipboardProvider` | 클립보드 기능 |
+| `PwaUpdateProvider` | PWA Service Worker 업데이트 감지 (5분 간격 폴링, 알림 표시) |
+
+---
+
+## 훅
+
+### createControllableSignal
+
+제어/비제어 컴포넌트 패턴 구현.
+
+```typescript
+import { createControllableSignal } from "@simplysm/solid";
+
+const [value, setValue] = createControllableSignal({
+  value: () => props.value,
+  onChange: () => props.onValueChange,
+});
+```
+
+### createControllableStore
+
+객체 상태용 제어/비제어 패턴.
+
+### createIMEHandler
+
+IME(한글 등) 입력 처리.
+
+```typescript
+const ime = createIMEHandler();
+// ime.handleCompositionStart()
+// ime.handleCompositionEnd()
+// ime.handleInput()
+// ime.composingValue()
+```
+
+### useLocalStorage
+
+반응형 localStorage.
+
+```typescript
+import { useLocalStorage } from "@simplysm/solid";
+
+const [theme, setTheme] = useLocalStorage("theme", "light");
+```
+
+### useSyncConfig
+
+클라이언트명 접두사 붙은 localStorage 동기화.
+
+```typescript
+const [config, setConfig] = useSyncConfig("my-setting", defaultValue);
+```
+
+### useLogger
+
+```typescript
+const logger = useLogger();
+```
+
+### useRouterLink
+
+```typescript
+const navigate = useRouterLink();
+navigate("/users");
+```
+
+### createMountTransition
+
+마운트 애니메이션 상태 관리.
+
+```typescript
+const { mounted, animating, unmount } = createMountTransition(() => isVisible());
+```
+
+---
+
+## createAppStructure
+
+앱 메뉴, 라우트, 권한 구조를 선언적으로 정의한다. 모듈별 필터링과 권한 기반 접근 제어를 지원한다.
+
+```typescript
+import { createAppStructure } from "@simplysm/solid";
+import type { AppStructureItem } from "@simplysm/solid";
+
+type Module = "basic" | "pro" | "enterprise";
+
+const items: AppStructureItem<Module>[] = [
+  {
+    code: "admin",
+    title: "관리",
+    children: [
+      {
+        code: "users",
+        title: "사용자 관리",
+        component: UserPage,
+        perms: ["use", "edit"],
+        modules: ["basic"],
+      },
+      {
+        code: "roles",
+        title: "역할 관리",
+        component: RolePage,
+        perms: ["use", "edit"],
+        modules: ["pro"],
+        subPerms: [
+          { code: "advanced", title: "고급 설정", perms: ["use", "edit"], modules: ["enterprise"] },
+        ],
+      },
+    ],
+  },
+];
+
+const { AppStructureProvider, useAppStructure } = createAppStructure(() => ({
+  items,
+  usableModules: () => activeModules(),
+  permRecord: () => userPermissions(),
+}));
+
+// 프로바이더 설정
+<AppStructureProvider>
+  <App />
+</AppStructureProvider>
+
+// 사용
+const app = useAppStructure();
+
+app.usableRoutes();     // 접근 가능한 라우트 배열
+app.usableMenus();      // 접근 가능한 메뉴 트리
+app.usableFlatMenus();  // 플랫 메뉴 배열 (검색용)
+app.usablePerms();      // 권한 트리 (PermissionTable에 전달)
+app.allFlatPerms;       // 모든 권한 목록 (관리용)
+app.perms;              // 타입 안전한 권한 객체 (app.perms.admin.users.use)
+
+app.getTitleChainByHref("/admin/users");  // ["관리", "사용자 관리"]
+```
+
+### AppStructure 반환 타입
+
+| 속성 | 타입 | 설명 |
+|------|------|------|
+| `usableRoutes` | `Accessor<AppRoute[]>` | 모듈/권한 필터링된 라우트 |
+| `usableMenus` | `Accessor<AppMenu[]>` | 필터링된 메뉴 트리 |
+| `usableFlatMenus` | `Accessor<AppFlatMenu[]>` | 플랫 메뉴 배열 |
+| `usablePerms` | `Accessor<AppPerm[]>` | 필터링된 권한 트리 |
+| `allFlatPerms` | `AppFlatPerm[]` | 전체 권한 목록 |
+| `perms` | `InferPerms<TItems>` | 타입 추론된 권한 접근 객체 |
+| `getTitleChainByHref` | `(href: string) => string[]` | href로 타이틀 체인 조회 |
+
+---
+
+## 스타일 유틸리티
+
+### 기본 스타일
+
+```typescript
+import { bg, border, text } from "@simplysm/solid";
+
+// Tailwind 클래스 프리셋
+bg.surface   // bg-white dark:bg-base-900
+bg.muted     // bg-base-100 dark:bg-base-800
+bg.subtle    // bg-base-200 dark:bg-base-700
+border.default // border-base-200 dark:border-base-700
+text.default   // text-base-900 dark:text-base-100
+text.muted     // text-base-400 dark:text-base-500
+```
+
+### 컨트롤 스타일
+
+```typescript
+import { pad, gap } from "@simplysm/solid";
+
+pad.xs  // px-1 py-0
+pad.sm  // px-1.5 py-0.5
+pad.md  // px-2 py-1
+pad.lg  // px-3 py-2
+pad.xl  // px-4 py-3
+
+gap.xs  // gap-0
+gap.sm  // gap-0.5
+gap.md  // gap-1
+gap.lg  // gap-1.5
+gap.xl  // gap-2
+```
+
+### 테마 토큰
+
+```typescript
+import { themeTokens, type SemanticTheme } from "@simplysm/solid";
+
+// 각 semantic theme(base, primary, success, warning, danger, info)별:
+themeTokens.primary.solid      // bg-primary-500 text-white
+themeTokens.primary.solidHover // hover:bg-primary-600 dark:hover:bg-primary-400
+themeTokens.primary.light      // bg-primary-100 text-primary-900 ...
+themeTokens.primary.text       // text-primary-600 dark:text-primary-400
+themeTokens.primary.hoverBg    // hover:bg-primary-100 ...
+themeTokens.primary.border     // border-primary-300 ...
+```
+
+---
+
+## 디렉티브
+
+### ripple
+
+Material Design 스타일 리플 효과.
+
+```tsx
+import { ripple } from "@simplysm/solid";
+
+<button use:ripple>클릭</button>
+```
+
+---
+
+## 헬퍼
+
+### mergeStyles
+
+인라인 CSS 문자열 병합.
+
+```typescript
+import { mergeStyles } from "@simplysm/solid";
+
+mergeStyles("color: red", "font-size: 14px"); // "color: red; font-size: 14px"
+```
+
+### createSlot / createSlots
+
+컴포넌트 합성을 위한 슬롯 패턴. `createSlot`은 단일 슬롯, `createSlots`는 복수 슬롯을 지원한다.
+
+```typescript
+import { createSlot } from "@simplysm/solid";
+
+// 슬롯 정의
+const [MySlot, createMySlotAccessor] = createSlot<{ children: JSX.Element }>();
+
+// 컴포넌트 내부에서 슬롯 접근
+const [slotValue, SlotProvider] = createMySlotAccessor();
+
+// 사용
+<SlotProvider>
+  <MySlot><span>슬롯 내용</span></MySlot>
+  {/* slotValue()로 접근 */}
+</SlotProvider>
+```
+
+### startPointerDrag
+
+포인터 드래그 인터랙션 관리. 포인터 캡처를 설정하고 move/end 이벤트를 관리한다.
+
+```typescript
+import { startPointerDrag } from "@simplysm/solid";
+
+startPointerDrag(element, event.pointerId, {
+  onMove: (e) => { /* 드래그 중 */ },
+  onEnd: (e) => { /* 드래그 종료 */ },
+});
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/solid",
-  "version": "13.0.84",
+  "version": "13.0.86",
   "description": "Simplysm package - SolidJS library",
   "author": "simplysm",
   "license": "Apache-2.0",
@@ -52,10 +52,10 @@
     "tabbable": "^6.4.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^3.4.19",
-    "@simplysm/core-browser": "13.0.84",
-    "@simplysm/core-common": "13.0.84",
-    "@simplysm/service-client": "13.0.84",
-    "@simplysm/service-common": "13.0.84"
+    "@simplysm/core-browser": "13.0.86",
+    "@simplysm/core-common": "13.0.86",
+    "@simplysm/service-client": "13.0.86",
+    "@simplysm/service-common": "13.0.86"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"

package/src/components/data/list/ListItem.styles.ts

@@ -40,8 +40,20 @@ export const listItemDisabledClass = clsx("pointer-events-none cursor-auto opaci
 // Readonly state
 export const listItemReadonlyClass = clsx("cursor-auto select-text hover:bg-transparent");
 
-// Indent guide (for nested items)
-export const listItemIndentGuideClass = clsx("ml-4 w-2 border-l", border.default);
+// Indent guide (for nested items, absolutely positioned)
+export const listItemIndentGuideClass = clsx("absolute inset-y-0 border-l", border.default);
+
+// Base left padding per size (rem) for indent calculation
+export const listItemBasePadLeft: Record<ComponentSize, number> = {
+  xs: 0.25,
+  sm: 0.375,
+  md: 0.5,
+  lg: 0.75,
+  xl: 1,
+};
+
+// Indent size per nesting level (rem)
+export const LIST_ITEM_INDENT_SIZE = 1.5;
 
 // Item content area
 export const listItemContentClass = clsx("flex flex-1 flex-row", "items-center gap-1", "text-left");

package/src/components/data/list/ListItem.tsx

@@ -23,6 +23,8 @@ import {
   listItemIndentGuideClass,
   listItemContentClass,
   getListItemSelectedIconClass,
+  listItemBasePadLeft,
+  LIST_ITEM_INDENT_SIZE,
 } from "./ListItem.styles";
 import type { ComponentSize } from "../../../styles/control.styles";
 
@@ -153,6 +155,13 @@ const ListItemInner: ParentComponent<ListItemProps> = (props) => {
 
   const getSelectedIconClassName = () => getListItemSelectedIconClass(local.selected ?? false);
 
+  const indentPaddingLeft = level > 1
+    ? `${listItemBasePadLeft[local.size ?? "md"] + (level - 1) * LIST_ITEM_INDENT_SIZE}rem`
+    : undefined;
+
+  const getGuideLeft = () =>
+    `${listItemBasePadLeft[local.size ?? "md"] + (level - 1) * LIST_ITEM_INDENT_SIZE + LIST_ITEM_INDENT_SIZE * 0.5}rem`;
+
   return (
     <ChildrenProvider>
       <button
@@ -160,7 +169,7 @@ const ListItemInner: ParentComponent<ListItemProps> = (props) => {
         type="button"
         use:ripple={useRipple()}
         class={getHeaderClassName()}
-        style={local.style}
+        style={{ ...(local.style as JSX.CSSProperties), "padding-left": indentPaddingLeft }}
         data-list-item
         role="treeitem"
         aria-expanded={hasChildren() ? openState() : undefined}
@@ -187,9 +196,9 @@ const ListItemInner: ParentComponent<ListItemProps> = (props) => {
       </button>
       <Show when={hasChildren()}>
         <Collapse open={openState()} data-collapsed={!openState() || undefined}>
-          <div class="flex">
-            <div class={listItemIndentGuideClass} />
-            <List inset class="flex-1">
+          <div class="relative">
+            <div class={listItemIndentGuideClass} style={{ left: getGuideLeft() }} />
+            <List inset>
               {childrenSlot()!.children}
             </List>
           </div>

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

@@ -368,7 +368,6 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
     );
 
   // #region Display
-  const displayItems = flatItems;
 
   // #region Selection
   const {
@@ -387,7 +386,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
       get onSelectionChange() { return local.onSelectionChange; },
       get isItemSelectable() { return local.isItemSelectable; },
     },
-    displayItems,
+    flatItems,
   );
 
   // #region AutoSelect
@@ -408,7 +407,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
       get onItemsReorder() { return local.onItemsReorder; },
       get itemChildren() { return local.itemChildren; },
     },
-    displayItems,
+    flatItems,
   );
 
   // #region Keyboard Navigation (move rows with Enter/Shift+Enter)
@@ -428,11 +427,8 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
     if (!tbody) return;
 
     const rows = tbody.rows;
-    const rowIndex = Array.from(rows).indexOf(tr);
-    if (rowIndex < 0) return;
-
-    const cellIndex = Array.from(tr.cells).indexOf(td);
-    if (cellIndex < 0) return;
+    const rowIndex = tr.sectionRowIndex;
+    const cellIndex = td.cellIndex;
 
     const targetRowIndex = e.shiftKey ? rowIndex - 1 : rowIndex + 1;
     if (targetRowIndex < 0 || targetRowIndex >= rows.length) return;
@@ -784,7 +780,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
                         <div class={featureCellClickableClass} onClick={() => toggleSelectAll()}>
                           <Checkbox
                             checked={(() => {
-                              const selectableItems = displayItems()
+                              const selectableItems = flatItems()
                                 .map((flat) => flat.item)
                                 .filter((item) => getItemSelectable(item) === true);
                               return (
@@ -829,7 +825,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
             {renderSummaryRow()}
           </thead>
           <tbody>
-            <For each={displayItems()}>
+            <For each={flatItems()}>
               {(flat) => (
                 <tr
                   data-selected={selection().includes(flat.item) ? "" : undefined}

package/src/components/data/sheet/hooks/createDataSheetExpansion.ts

@@ -37,20 +37,6 @@ export function createDataSheetExpansion<TItem>(
     }
   }
 
-  function toggleExpandAll(): void {
-    if (!props.itemChildren) return;
-    const indexMap = originalIndexMap();
-    const allExpandable = collectAllExpandable(
-      pagedItems(),
-      props.itemChildren,
-      (item) => indexMap.get(item) ?? -1,
-    );
-    const isAllCurrentlyExpanded = allExpandable.every((item) =>
-      expandedItems().includes(item),
-    );
-    setExpandedItems(isAllCurrentlyExpanded ? [] : allExpandable);
-  }
-
   const flatItems = createMemo((): FlatItem<TItem>[] => {
     const indexMap = originalIndexMap();
     return flattenTree(
@@ -61,16 +47,29 @@ export function createDataSheetExpansion<TItem>(
     );
   });
 
-  const isAllExpanded = createMemo(() => {
-    if (!props.itemChildren) return false;
+  const allExpandable = createMemo(() => {
+    if (!props.itemChildren) return [];
     const indexMap = originalIndexMap();
-    const allExpandable = collectAllExpandable(
+    return collectAllExpandable(
       pagedItems(),
       props.itemChildren,
       (item) => indexMap.get(item) ?? -1,
     );
+  });
+
+  function toggleExpandAll(): void {
+    const items = allExpandable();
+    if (items.length === 0) return;
+    const isAllCurrentlyExpanded = items.every((item) =>
+      expandedItems().includes(item),
+    );
+    setExpandedItems(isAllCurrentlyExpanded ? [] : items);
+  }
+
+  const isAllExpanded = createMemo(() => {
+    const items = allExpandable();
     return (
-      allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item))
+      items.length > 0 && items.every((item) => expandedItems().includes(item))
     );
   });
 

package/src/components/data/sheet/hooks/createDataSheetReorder.ts

@@ -37,11 +37,13 @@ export function createDataSheetReorder<TItem>(
     const tableEl = target.closest("table")!;
     const tbody = tableEl.querySelector("tbody")!;
     const rows = Array.from(tbody.rows);
+    const scrollContainer = tableEl.closest<HTMLElement>("[data-sheet-scroll]");
 
     setDragState({ draggingItem: item, targetItem: null, position: null });
 
     startPointerDrag(target, e.pointerId, {
       onMove(ev) {
+        const items = displayItems();
         let foundTarget: TItem | null = null;
         let foundPosition: "before" | "after" | "inside" | null = null;
 
@@ -50,8 +52,8 @@ export function createDataSheetReorder<TItem>(
           const rect = row.getBoundingClientRect();
           if (ev.clientY < rect.top || ev.clientY > rect.bottom) continue;
 
-          if (i >= displayItems().length) break;
-          const flat = displayItems()[i];
+          if (i >= items.length) break;
+          const flat = items[i];
           if (flat.item === item) break;
 
           // Cannot drop to child items of self
@@ -82,8 +84,8 @@ export function createDataSheetReorder<TItem>(
           rows[i].removeAttribute("data-dragging");
           rows[i].removeAttribute("data-drag-over");
 
-          if (i < displayItems().length) {
-            const flat = displayItems()[i];
+          if (i < items.length) {
+            const flat = items[i];
             if (flat.item === item) {
               rows[i].setAttribute("data-dragging", "");
             }
@@ -94,22 +96,20 @@ export function createDataSheetReorder<TItem>(
         }
 
         // before/after indicator
-        const indicatorEl = tableEl
-          .closest("[data-sheet-scroll]")
+        const indicatorEl = scrollContainer
           ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
         if (indicatorEl) {
           if (foundTarget != null && foundPosition != null && foundPosition !== "inside") {
-            const targetIdx = displayItems().findIndex((f) => f.item === foundTarget);
+            const targetIdx = items.findIndex((f) => f.item === foundTarget);
             if (targetIdx >= 0) {
               const targetRow = rows[targetIdx];
-              const containerRect = tableEl.closest("[data-sheet-scroll]")!.getBoundingClientRect();
+              const containerRect = scrollContainer!.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;
+                  ? rowRect.top - containerRect.top + scrollContainer!.scrollTop
+                  : rowRect.bottom - containerRect.top + scrollContainer!.scrollTop;
 
               indicatorEl.style.display = "block";
               indicatorEl.style.top = `${top}px`;
@@ -134,8 +134,7 @@ export function createDataSheetReorder<TItem>(
           row.removeAttribute("data-dragging");
           row.removeAttribute("data-drag-over");
         }
-        const indicatorEl = tableEl
-          .closest("[data-sheet-scroll]")
+        const indicatorEl = scrollContainer
           ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
         if (indicatorEl) {
           indicatorEl.style.display = "none";