@simplysm/angular 14.0.56 → 14.0.58

package/dist/data/sheet/sd-sheet.js

@@ -410,7 +410,7 @@ export class SdSheet {
     // Inputs
     key = input(...(ngDevMode ? [undefined, { debugName: "key" }] : /* istanbul ignore next */ []));
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    trackByFn = input.required(...(ngDevMode ? [{ debugName: "trackByFn" }] : /* istanbul ignore next */ []));
+    trackByFn = input((item) => item, ...(ngDevMode ? [{ debugName: "trackByFn" }] : /* istanbul ignore next */ []));
     selectMode = input(...(ngDevMode ? [undefined, { debugName: "selectMode" }] : /* istanbul ignore next */ []));
     autoSelect = input(...(ngDevMode ? [undefined, { debugName: "autoSelect" }] : /* istanbul ignore next */ []));
     getItemSelectableFn = input(...(ngDevMode ? [undefined, { debugName: "getItemSelectableFn" }] : /* istanbul ignore next */ []));
@@ -649,6 +649,14 @@ export class SdSheet {
             return;
         event.preventDefault();
         event.stopPropagation();
+        // SdCheckbox host의 (click) 자체 토글이 microtask로 적용한 범위 selection을 되돌리는 것을 방지
+        const checkboxEl = event.currentTarget;
+        if (checkboxEl instanceof HTMLElement) {
+            checkboxEl.addEventListener("click", (e) => {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            }, { once: true, capture: true });
+        }
         const focusedEl = document.activeElement;
         if (!(focusedEl instanceof HTMLElement))
             return;
@@ -1053,5 +1061,5 @@ export class SdSheet {
       <div class="_select-row-indicator-container"></div>
     </div>
   `, styles: ["sd-sheet {\n  border: 1px solid var(--theme-gray-lighter);\n  border-radius: var(--border-radius-default);\n}\nsd-sheet > ._tool {\n  background: var(--control-color);\n  border-top-left-radius: var(--border-radius-default);\n  border-top-right-radius: var(--border-radius-default);\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container {\n  position: relative;\n  background: var(--sheet-bg);\n  border-bottom-left-radius: var(--border-radius-default);\n  border-bottom-right-radius: var(--border-radius-default);\n  overflow: auto;\n}\nsd-sheet > ._sheet-container > table {\n  border-spacing: 0;\n  table-layout: fixed;\n  margin-right: 2px;\n  margin-bottom: 2px;\n  border-bottom-right-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > table > * > tr > *:last-child {\n  border-right: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr:last-child > * {\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > *:last-child > tr:last-child > td:last-child {\n  border-bottom-right-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-sheet > ._sheet-container > table > * > tr > * {\n  border-right: 1px solid var(--theme-gray-lighter);\n  border-bottom: 1px solid var(--theme-gray-lighter);\n  white-space: nowrap;\n  overflow: hidden;\n  padding: 0;\n  position: relative;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) + :not(._fixed):not([data-c=\"0\"]) {\n  border-left: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell {\n  background: var(--theme-gray-lightest);\n  min-width: calc(var(--font-size-default) + 2px + var(--sheet-ph) * 2);\n  padding: var(--sheet-pv) var(--sheet-ph);\n  text-align: left;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell > ng-icon {\n  cursor: pointer;\n  color: var(--text-trans-lightest);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed {\n  position: sticky;\n  left: 0;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) {\n  border-right: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > thead {\n  position: sticky;\n  top: 0;\n  z-index: 3;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th {\n  position: relative;\n  background: var(--theme-gray-lightest);\n  vertical-align: middle;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._fixed {\n  z-index: 4;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._last-depth {\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._feature-cell {\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort {\n  cursor: pointer;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort:hover {\n  text-decoration: underline;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._headerContent > ._sort-icon {\n  padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) 0;\n  background-color: var(--theme-gray-lightest);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._resizer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 2px;\n  cursor: ew-resize;\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr > th._last-depth {\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr._summary-row > th {\n  background: var(--theme-warning-lightest);\n  text-align: left;\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td {\n  background: var(--control-color);\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td._fixed {\n  z-index: 2;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td > ._depth-indicator {\n  display: inline-block;\n  margin-top: 0.4em;\n  width: 0.5em;\n  height: 0.5em;\n  border-left: 1px solid var(--text-trans-default);\n  border-bottom: 1px solid var(--text-trans-default);\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  background: rgba(158, 158, 158, 0.1);\n  z-index: 6;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  position: absolute;\n  border: 2px solid var(--theme-primary-default);\n  border-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > ._resize-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  height: 100%;\n  border: 1px dotted var(--theme-gray-light);\n  z-index: 7;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container > ._select-row-indicator {\n  display: block;\n  left: 0;\n  position: absolute;\n  pointer-events: none;\n  background: var(--theme-primary-default);\n  opacity: 0.1;\n}\nsd-sheet ._p-sheet {\n  padding: var(--sheet-pv) var(--sheet-ph);\n}\nsd-sheet[data-sd-focus-mode=row] > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  display: none !important;\n}\nsd-sheet[data-sd-inset=true] {\n  border: none;\n  border-radius: 0;\n}"] }]
-    }], null, { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: true }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], getItemSelectableFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemSelectableFn", required: false }] }], getChildrenFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildrenFn", required: false }] }], useAutoSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAutoSort", required: false }] }], visiblePageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePageCount", required: false }] }], totalPageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPageCount", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], focusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusMode", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], getItemCellClassFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemCellClassFn", required: false }] }], getItemCellStyleFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemCellStyleFn", required: false }] }], hideConfigBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideConfigBar", required: false }] }], itemKeydown: [{ type: i0.Output, args: ["itemKeydown"] }], cellKeydown: [{ type: i0.Output, args: ["cellKeydown"] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }, { type: i0.Output, args: ["selectedKeysChange"] }], expandedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedItems", required: false }] }, { type: i0.Output, args: ["expandedItemsChange"] }], sorts: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorts", required: false }] }, { type: i0.Output, args: ["sortsChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], columnControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdSheetColumn), { isSignal: true }] }], columnControlsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnControlsInput", required: false }] }] }); })();
+    }], null, { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], getItemSelectableFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemSelectableFn", required: false }] }], getChildrenFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildrenFn", required: false }] }], useAutoSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAutoSort", required: false }] }], visiblePageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePageCount", required: false }] }], totalPageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPageCount", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], focusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusMode", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], getItemCellClassFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemCellClassFn", required: false }] }], getItemCellStyleFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemCellStyleFn", required: false }] }], hideConfigBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideConfigBar", required: false }] }], itemKeydown: [{ type: i0.Output, args: ["itemKeydown"] }], cellKeydown: [{ type: i0.Output, args: ["cellKeydown"] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }, { type: i0.Output, args: ["selectedKeysChange"] }], expandedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedItems", required: false }] }, { type: i0.Output, args: ["expandedItemsChange"] }], sorts: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorts", required: false }] }, { type: i0.Output, args: ["sortsChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], columnControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdSheetColumn), { isSignal: true }] }], columnControlsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnControlsInput", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSheet, { className: "SdSheet", filePath: "packages/angular/src/data/sheet/sd-sheet.ts", lineNumber: 585 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.0.56",
+  "version": "14.0.58",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -50,10 +50,10 @@
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.4.0",
-    "@simplysm/core-browser": "14.0.56",
-    "@simplysm/core-common": "14.0.56",
-    "@simplysm/service-client": "14.0.56",
-    "@simplysm/service-common": "14.0.56"
+    "@simplysm/core-common": "14.0.58",
+    "@simplysm/core-browser": "14.0.58",
+    "@simplysm/service-common": "14.0.58",
+    "@simplysm/service-client": "14.0.58"
   },
   "devDependencies": {
     "@angular/compiler": "^21.2.10",

package/src/core/selection/useSelectionManager.ts

@@ -3,7 +3,7 @@ import { obj } from "@simplysm/core-common";
 
 export function useSelectionManager<TItem, TKey>(options: {
   displayItems: Signal<TItem[]>;
-  selectedKeys: WritableSignal<NonNullable<TKey>[]>;
+  selectedKeys: WritableSignal<TKey[]>;
   selectMode: Signal<"single" | "multi" | undefined>;
   getItemSelectableFn: Signal<((item: TItem) => boolean | string) | undefined>;
   trackByFn: Signal<(item: TItem, index: number) => TKey>;
@@ -128,7 +128,7 @@ export function useSelectionManager<TItem, TKey>(options: {
       options.selectedKeys.update((arr) => {
         const newKeys = selectable
           .map((it) => fn(it, idxMap.get(it) ?? 0))
-          .filter((k): k is NonNullable<TKey> => k != null)
+          .filter((k): k is TKey => k != null)
           .filter((k) => !arr.some((ek) => isKeyEqual(ek, k)));
         return [...arr, ...newKeys];
       });

package/src/data/crud/sd-base-container.ts

@@ -6,7 +6,7 @@ import {
   inject,
   input,
   model,
-  TemplateRef,
+  type TemplateRef,
   untracked,
   ViewEncapsulation,
 } from "@angular/core";
@@ -63,7 +63,9 @@ import { NgTemplateOutlet } from "@angular/common";
         }
 
         <div class="flex-fill">
-          <ng-content />
+          @if (contentTplRef()) {
+            <ng-template [ngTemplateOutlet]="contentTplRef()" />
+          }
         </div>
 
         @if (bottomCommandTplRef()) {
@@ -91,6 +93,7 @@ export class SdBaseContainer {
 
   topbarTplRef = contentChild<TemplateRef<void>>("topbarTpl");
   commandTplRef = contentChild<TemplateRef<void>>("commandTpl");
+  contentTplRef = contentChild<TemplateRef<void>>("contentTpl");
   bottomCommandTplRef = contentChild<TemplateRef<void>>("bottomCommandTpl");
 
   constructor() {

package/src/data/crud/sd-crud-detail.ts

@@ -82,19 +82,18 @@ import { tablerDeviceFloppy } from "@ng-icons/tabler-icons";
         </ng-template>
       }
 
-      <!-- CONTENT -->
-      <ng-template #contentTpl>
-        <ng-content />
-      </ng-template>
-
-      @if (readonly()) {
-        <div class="fill">
-          <ng-template [ngTemplateOutlet]="contentTpl" />
-        </div>
-      } @else {
-        <sd-form #formCtrl (formSubmit)="submit.emit()" class="block fill">
-          <ng-template [ngTemplateOutlet]="contentTpl" />
-        </sd-form>
+      @if (contentTplRef()) {
+        <ng-template #contentTpl>
+          @if (readonly()) {
+            <div class="fill">
+              <ng-template [ngTemplateOutlet]="contentTplRef()" />
+            </div>
+          } @else {
+            <sd-form #formCtrl (formSubmit)="submit.emit()" class="block fill">
+              <ng-template [ngTemplateOutlet]="contentTplRef()" />
+            </sd-form>
+          }
+        </ng-template>
       }
     </sd-base-container>
   `,
@@ -112,6 +111,7 @@ export class SdCrudDetail {
   submit = output();
 
   commandTplRef = contentChild<TemplateRef<void>>("commandTpl");
+  contentTplRef = contentChild<TemplateRef<void>>("contentTpl");
   bottomCommandTplRef = contentChild<TemplateRef<void>>("bottomCommandTpl");
 
   onSaveButtonClick() {

package/src/data/crud/sd-crud-list.ts

@@ -8,7 +8,7 @@ import {
   input,
   model,
   output,
-  TemplateRef,
+  type TemplateRef,
   viewChild,
   ViewEncapsulation,
 } from "@angular/core";
@@ -115,68 +115,69 @@ import {
         </ng-template>
       }
 
-      <!-- CONTENT -->
-      <div class="flex-column fill">
-        @if (filterTplRef()) {
-          <sd-form (formSubmit)="filterSubmit.emit()" class="block p-default">
-            <div class="form-box-inline">
-              <div>
-                <sd-button [type]="'submit'" [theme]="'info'">
-                  <ng-icon [svg]="tablerSearch" />
-                  조회
-                </sd-button>
+      <ng-template #contentTpl>
+        <div class="flex-column fill">
+          @if (filterTplRef()) {
+            <sd-form (formSubmit)="filterSubmit.emit()" class="block p-default">
+              <div class="form-box-inline">
+                <div>
+                  <sd-button [type]="'submit'" [theme]="'info'">
+                    <ng-icon [svg]="tablerSearch" />
+                    조회
+                  </sd-button>
+                </div>
+                <ng-template [ngTemplateOutlet]="filterTplRef()" />
               </div>
-              <ng-template [ngTemplateOutlet]="filterTplRef()" />
-            </div>
-          </sd-form>
-        }
+            </sd-form>
+          }
 
-        @if (!readonly() || toolTplRef()) {
-          <div class="flex-row gap-sm p-xs-default">
-            @if (!readonly()) {
-              <sd-button [size]="'sm'" [theme]="'link-primary'" (click)="create.emit()">
-                <ng-icon [svg]="tablerCirclePlus" />
-                등록
-              </sd-button>
-              @if (selectMode() !== "single") {
-                <sd-button
-                  [size]="'sm'"
-                  [theme]="'link-danger'"
-                  (click)="delete.emit(currSelectedItems())"
-                  [disabled]="!hasSelectedNotDeleted()"
-                >
-                  <ng-icon [svg]="tablerEraser" />
-                  선택 삭제
+          @if (!readonly() || toolTplRef()) {
+            <div class="flex-row gap-sm p-xs-default">
+              @if (!readonly()) {
+                <sd-button [size]="'sm'" [theme]="'link-primary'" (click)="create.emit()">
+                  <ng-icon [svg]="tablerCirclePlus" />
+                  등록
                 </sd-button>
-                @if (hasSelectedDeleted()) {
+                @if (selectMode() !== "single") {
                   <sd-button
                     [size]="'sm'"
-                    [theme]="'link-warning'"
-                    (click)="restore.emit(currSelectedItems())"
+                    [theme]="'link-danger'"
+                    (click)="delete.emit(currSelectedItems())"
+                    [disabled]="!hasSelectedNotDeleted()"
                   >
-                    <ng-icon [svg]="tablerRestore" />
-                    선택 복구
+                    <ng-icon [svg]="tablerEraser" />
+                    선택 삭제
                   </sd-button>
+                  @if (hasSelectedDeleted()) {
+                    <sd-button
+                      [size]="'sm'"
+                      [theme]="'link-warning'"
+                      (click)="restore.emit(currSelectedItems())"
+                    >
+                      <ng-icon [svg]="tablerRestore" />
+                      선택 복구
+                    </sd-button>
+                  }
                 }
               }
-            }
 
-            @if (toolTplRef()) {
-              <ng-template [ngTemplateOutlet]="toolTplRef()" />
-            }
-          </div>
-        }
+              @if (toolTplRef()) {
+                <ng-template [ngTemplateOutlet]="toolTplRef()" />
+              }
+            </div>
+          }
 
-        @if (readonly()) {
-          <div class="flex-fill p-default pt-0">
-            <ng-template [ngTemplateOutlet]="sheet" />
-          </div>
-        } @else {
-          <sd-form #formCtrl (formSubmit)="submit.emit()" class="flex-fill p-default pt-0">
-            <ng-template [ngTemplateOutlet]="sheet" />
-          </sd-form>
-        }
-      </div>
+          @if (readonly()) {
+            <div class="flex-fill p-default pt-0">
+              <ng-template [ngTemplateOutlet]="sheet" />
+            </div>
+          } @else {
+            <sd-form #formCtrl (formSubmit)="submit.emit()" class="flex-fill p-default pt-0">
+              <ng-template [ngTemplateOutlet]="sheet" />
+            </sd-form>
+          }
+        </div>
+      </ng-template>
     </sd-base-container>
 
     <ng-template #sheet>

package/src/data/sheet/injectSheetSelectRowIndicator.ts

@@ -9,7 +9,7 @@ function isKeyEqual(a: unknown, b: unknown): boolean {
 
 export function injectSheetSelectRowIndicator<TItem, TKey>(options: {
   domAccessor: ReturnType<typeof injectSheetDomAccessor>;
-  selectedKeys: Signal<NonNullable<TKey>[]>;
+  selectedKeys: Signal<TKey[]>;
   displayItems: Signal<TItem[]>;
   trackByFn: Signal<(item: TItem, index: number) => TKey>;
 }) {

package/src/data/sheet/sd-sheet.ts

@@ -582,11 +582,11 @@ import { SdEvents } from "../../core/events/sd-events";
     `,
   ],
 })
-export class SdSheet<TItem, TKey> {
+export class SdSheet<TItem> {
   // Inputs
   key = input<string>();
   items = input<TItem[]>([]);
-  trackByFn = input.required<(item: TItem, index: number) => TKey>();
+  trackByFn = input<(item: TItem, index: number) => unknown>((item) => item);
   selectMode = input<"single" | "multi">();
   autoSelect = input<"click" | "focus">();
   getItemSelectableFn = input<(item: TItem) => boolean | string>();
@@ -607,7 +607,7 @@ export class SdSheet<TItem, TKey> {
   cellKeydown = output<SdSheetCellKeydownEventParam<TItem>>();
 
   // Models
-  selectedKeys = model<NonNullable<TKey>[]>([]);
+  selectedKeys = model<unknown[]>([]);
   expandedItems = model<TItem[]>([]);
   sorts = model<SortingDef[]>([]); // Re-exported from useSortingManager
   currentPage = model(0);
@@ -699,7 +699,7 @@ export class SdSheet<TItem, TKey> {
   });
 
   // Select row indicator
-  private readonly _selectRowIndicator = injectSheetSelectRowIndicator<TItem, TKey>({
+  private readonly _selectRowIndicator = injectSheetSelectRowIndicator<TItem, unknown>({
     domAccessor: this.domAccessor,
     selectedKeys: this.selectedKeys,
     displayItems: this.displayItems,
@@ -707,7 +707,7 @@ export class SdSheet<TItem, TKey> {
   });
 
   // Selection manager
-  selection = useSelectionManager<TItem, TKey>({
+  selection = useSelectionManager<TItem, unknown>({
     displayItems: this.displayItems,
     selectedKeys: this.selectedKeys,
     selectMode: this.selectMode,
@@ -856,6 +856,19 @@ export class SdSheet<TItem, TKey> {
     event.preventDefault();
     event.stopPropagation();
 
+    // SdCheckbox host의 (click) 자체 토글이 microtask로 적용한 범위 selection을 되돌리는 것을 방지
+    const checkboxEl = event.currentTarget;
+    if (checkboxEl instanceof HTMLElement) {
+      checkboxEl.addEventListener(
+        "click",
+        (e) => {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+        },
+        { once: true, capture: true },
+      );
+    }
+
     const focusedEl = document.activeElement;
     if (!(focusedEl instanceof HTMLElement)) return;