@simplysm/solid 13.0.78 → 13.0.81

package/src/components/layout/topbar/Topbar.tsx

@@ -215,7 +215,7 @@ const TopbarMenu: Component<TopbarMenuProps> = (props) => {
   return (
     <>
       {/* Desktop menu (shown only on 640px and above) */}
-      <nav {...rest} data-topbar-menu class={twMerge(clsx("hidden flex-row sm:flex", gap.default, "items-center"), local.class)}>
+      <nav {...rest} data-topbar-menu class={twMerge(clsx("hidden flex-row sm:flex", gap.md, "items-center"), local.class)}>
         <For each={local.menus}>{(menu) => <TopbarMenuButton menu={menu} />}</For>
       </nav>
 
@@ -291,7 +291,7 @@ const TopbarMenuButton: Component<TopbarMenuButtonProps> = (props) => {
     <Button
       variant={isSelected() ? "solid" : "ghost"}
       theme={isSelected() ? "primary" : "base"}
-      class={clsx("flex items-center", gap.default)}
+      class={clsx("flex items-center", gap.md)}
       aria-haspopup={hasChildren() ? "menu" : undefined}
       aria-expanded={hasChildren() ? open() : undefined}
       onClick={hasChildren() ? undefined : handleNavigate}
@@ -410,7 +410,7 @@ const TopbarUser: ParentComponent<TopbarUserProps> = (props) => {
   const buttonContent = () => (
     <Button
       variant="ghost"
-      class={clsx("flex items-center", gap.default)}
+      class={clsx("flex items-center", gap.md)}
       aria-haspopup={hasMenus() ? "menu" : undefined}
       aria-expanded={hasMenus() ? open() : undefined}
     >

package/src/providers/PwaUpdateProvider.tsx

@@ -16,6 +16,7 @@ export const PwaUpdateProvider: ParentComponent = (props) => {
   if (typeof navigator !== "undefined" && "serviceWorker" in navigator) {
     const notification = useNotification();
     let intervalId: ReturnType<typeof setInterval> | undefined;
+    const cleanups: (() => void)[] = [];
 
     void navigator.serviceWorker.getRegistration().then((registration) => {
       if (registration == null) return;
@@ -28,17 +29,22 @@ export const PwaUpdateProvider: ParentComponent = (props) => {
         promptUpdate(registration.waiting);
       }
 
-      registration.addEventListener("updatefound", () => {
+      const onUpdateFound = () => {
         const newSW = registration.installing;
         if (newSW == null) return;
 
-        newSW.addEventListener("statechange", () => {
+        const onStateChange = () => {
           if (newSW.state === "installed" && navigator.serviceWorker.controller != null) {
             promptUpdate(newSW);
           }
-        });
-      });
-    });
+        };
+        newSW.addEventListener("statechange", onStateChange);
+        cleanups.push(() => newSW.removeEventListener("statechange", onStateChange));
+      };
+
+      registration.addEventListener("updatefound", onUpdateFound);
+      cleanups.push(() => registration.removeEventListener("updatefound", onUpdateFound));
+    }).catch(() => {});
 
     const onControllerChange = () => {
       window.location.reload();
@@ -50,6 +56,7 @@ export const PwaUpdateProvider: ParentComponent = (props) => {
         clearInterval(intervalId);
       }
       navigator.serviceWorker.removeEventListener("controllerchange", onControllerChange);
+      for (const fn of cleanups) fn();
     });
 
     function promptUpdate(waitingSW: ServiceWorker): void {

package/src/styles/control.styles.ts

@@ -6,10 +6,10 @@ export const state = {
 };
 
 // ── Size ──
-export type ComponentSize = "default" | "xs" | "sm" | "lg" | "xl";
+export type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl";
 
 export const pad = {
-  default: clsx`px-2 py-1`,
+  md: clsx`px-2 py-1`,
   xs: clsx`px-1 py-0`,
   sm: clsx`px-1.5 py-0.5`,
   lg: clsx`px-3 py-2`,
@@ -17,7 +17,7 @@ export const pad = {
 };
 
 export const gap = {
-  default: clsx`gap-1`,
+  md: clsx`gap-1`,
   xs: clsx`gap-0`,
   sm: clsx`gap-0.5`,
   lg: clsx`gap-1.5`,

package/tests/components/data/sheet/hooks/{useDataSheetExpansion.spec.ts → createDataSheetExpansion.spec.ts}

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { createRoot } from "solid-js";
-import { useDataSheetExpansion } from "../../../../../src/components/data/sheet/hooks/useDataSheetExpansion";
+import { createDataSheetExpansion } from "../../../../../src/components/data/sheet/hooks/createDataSheetExpansion";
 
 interface TestNode {
   id: string;
@@ -32,11 +32,11 @@ function itemChildren(item: TestNode, _index: number): TestNode[] | undefined {
   return item.children;
 }
 
-describe("useDataSheetExpansion", () => {
+describe("createDataSheetExpansion", () => {
   it("should initialize with empty expanded items by default", () => {
     createRoot(() => {
       const createIndexMap = () => new Map<TestNode, number>();
-      const result = useDataSheetExpansion(
+      const result = createDataSheetExpansion(
         { itemChildren },
         () => treeData,
         createIndexMap,
@@ -50,7 +50,7 @@ describe("useDataSheetExpansion", () => {
     createRoot(() => {
       const createIndexMap = () => new Map<TestNode, number>();
       const expandedItems = [treeData[0]];
-      const result = useDataSheetExpansion(
+      const result = createDataSheetExpansion(
         { expandedItems, itemChildren },
         () => treeData,
         createIndexMap,
@@ -63,7 +63,7 @@ describe("useDataSheetExpansion", () => {
   it("toggleExpand should add item when not expanded", () => {
     createRoot(() => {
       const createIndexMap = () => new Map<TestNode, number>();
-      const result = useDataSheetExpansion(
+      const result = createDataSheetExpansion(
         { itemChildren },
         () => treeData,
         createIndexMap,
@@ -80,7 +80,7 @@ describe("useDataSheetExpansion", () => {
     createRoot(() => {
       const createIndexMap = () => new Map<TestNode, number>();
       const expandedItems = [treeData[0]];
-      const result = useDataSheetExpansion(
+      const result = createDataSheetExpansion(
         { expandedItems: [...expandedItems], itemChildren },
         () => treeData,
         createIndexMap,
@@ -95,7 +95,7 @@ describe("useDataSheetExpansion", () => {
   it("flatItems should include children when item is expanded", () => {
     createRoot(() => {
       const createIndexMap = () => new Map<TestNode, number>();
-      const result = useDataSheetExpansion(
+      const result = createDataSheetExpansion(
         { expandedItems: [treeData[0]], itemChildren },
         () => treeData,
         createIndexMap,
@@ -114,7 +114,7 @@ describe("useDataSheetExpansion", () => {
   it("flatItems should not include children when item is not expanded", () => {
     createRoot(() => {
       const createIndexMap = () => new Map<TestNode, number>();
-      const result = useDataSheetExpansion(
+      const result = createDataSheetExpansion(
         { itemChildren },
         () => treeData,
         createIndexMap,
@@ -131,7 +131,7 @@ describe("useDataSheetExpansion", () => {
   it("isAllExpanded should be false when no items are expanded", () => {
     createRoot(() => {
       const createIndexMap = () => new Map<TestNode, number>();
-      const result = useDataSheetExpansion(
+      const result = createDataSheetExpansion(
         { itemChildren },
         () => treeData,
         createIndexMap,
@@ -146,7 +146,7 @@ describe("useDataSheetExpansion", () => {
       const createIndexMap = () => new Map<TestNode, number>();
       // collectAllExpandable will find root1, child1-2, and root2 as expandable
       const allExpandable = [treeData[0], treeData[0].children![1], treeData[1]];
-      const result = useDataSheetExpansion(
+      const result = createDataSheetExpansion(
         { expandedItems: allExpandable, itemChildren },
         () => treeData,
         createIndexMap,
@@ -159,7 +159,7 @@ describe("useDataSheetExpansion", () => {
   it("isAllExpanded should be false when only some items are expanded", () => {
     createRoot(() => {
       const createIndexMap = () => new Map<TestNode, number>();
-      const result = useDataSheetExpansion(
+      const result = createDataSheetExpansion(
         { expandedItems: [treeData[0]], itemChildren },
         () => treeData,
         createIndexMap,
@@ -172,7 +172,7 @@ describe("useDataSheetExpansion", () => {
   it("toggleExpandAll should expand all items when not all are expanded", () => {
     createRoot(() => {
       const createIndexMap = () => new Map<TestNode, number>();
-      const result = useDataSheetExpansion(
+      const result = createDataSheetExpansion(
         { itemChildren },
         () => treeData,
         createIndexMap,
@@ -190,7 +190,7 @@ describe("useDataSheetExpansion", () => {
       const createIndexMap = () => new Map<TestNode, number>();
       // collectAllExpandable will find root1, child1-2, and root2 as expandable
       const allExpandable = [treeData[0], treeData[0].children![1], treeData[1]];
-      const result = useDataSheetExpansion(
+      const result = createDataSheetExpansion(
         { expandedItems: allExpandable, itemChildren },
         () => treeData,
         createIndexMap,
@@ -206,7 +206,7 @@ describe("useDataSheetExpansion", () => {
   it("flatItems should have correct depth values", () => {
     createRoot(() => {
       const createIndexMap = () => new Map<TestNode, number>();
-      const result = useDataSheetExpansion(
+      const result = createDataSheetExpansion(
         { expandedItems: [treeData[0]], itemChildren },
         () => treeData,
         createIndexMap,
@@ -225,7 +225,7 @@ describe("useDataSheetExpansion", () => {
   it("should work with flat list (no children)", () => {
     createRoot(() => {
       const createIndexMap = () => new Map<TestNode, number>();
-      const result = useDataSheetExpansion({}, () => flatListData, createIndexMap);
+      const result = createDataSheetExpansion({}, () => flatListData, createIndexMap);
 
       expect(result.flatItems().length).toBe(flatListData.length);
       expect(result.isAllExpanded()).toBe(false);
@@ -240,7 +240,7 @@ describe("useDataSheetExpansion", () => {
         lastCalledWith = items;
       };
 
-      const result = useDataSheetExpansion(
+      const result = createDataSheetExpansion(
         { itemChildren, onExpandedItemsChange },
         () => treeData,
         createIndexMap,

package/tests/components/data/sheet/hooks/{useDataSheetFixedColumns.spec.ts → createDataSheetFixedColumns.spec.ts}

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { createRoot } from "solid-js";
-import { useDataSheetFixedColumns } from "../../../../../src/components/data/sheet/hooks/useDataSheetFixedColumns";
+import { createDataSheetFixedColumns } from "../../../../../src/components/data/sheet/hooks/createDataSheetFixedColumns";
 import type { DataSheetColumnDef } from "../../../../../src/components/data/sheet/DataSheet.types";
 
 interface TestItem {
@@ -8,13 +8,13 @@ interface TestItem {
   name: string;
 }
 
-describe("useDataSheetFixedColumns", () => {
+describe("createDataSheetFixedColumns", () => {
   describe("feature column tracking", () => {
     it("should detect expand feature when itemChildren is provided", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { hasExpandFeature } = useDataSheetFixedColumns(
+        const { hasExpandFeature } = createDataSheetFixedColumns(
           {
             itemChildren: () => undefined,
           },
@@ -29,7 +29,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { hasExpandFeature } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { hasExpandFeature } = createDataSheetFixedColumns({}, effectiveColumns);
 
         expect(hasExpandFeature()).toBe(false);
       });
@@ -39,7 +39,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { hasSelectFeature } = useDataSheetFixedColumns(
+        const { hasSelectFeature } = createDataSheetFixedColumns(
           {
             selectionMode: "single",
           },
@@ -54,7 +54,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { hasSelectFeature } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { hasSelectFeature } = createDataSheetFixedColumns({}, effectiveColumns);
 
         expect(hasSelectFeature()).toBe(false);
       });
@@ -64,7 +64,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { hasReorderFeature } = useDataSheetFixedColumns(
+        const { hasReorderFeature } = createDataSheetFixedColumns(
           {
             onItemsReorder: () => {},
           },
@@ -79,7 +79,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { hasReorderFeature } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { hasReorderFeature } = createDataSheetFixedColumns({}, effectiveColumns);
 
         expect(hasReorderFeature()).toBe(false);
       });
@@ -91,7 +91,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { expandColWidth, selectColWidth, reorderColWidth } = useDataSheetFixedColumns(
+        const { expandColWidth, selectColWidth, reorderColWidth } = createDataSheetFixedColumns(
           {
             itemChildren: () => undefined,
             selectionMode: "single",
@@ -112,7 +112,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { selectColLeft } = useDataSheetFixedColumns(
+        const { selectColLeft } = createDataSheetFixedColumns(
           {
             selectionMode: "single",
           },
@@ -127,7 +127,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { selectColLeft, expandColWidth: _expandColWidth } = useDataSheetFixedColumns(
+        const { selectColLeft, expandColWidth: _expandColWidth } = createDataSheetFixedColumns(
           {
             itemChildren: () => undefined,
             selectionMode: "single",
@@ -144,7 +144,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { reorderColLeft } = useDataSheetFixedColumns(
+        const { reorderColLeft } = createDataSheetFixedColumns(
           {
             itemChildren: () => undefined,
             selectionMode: "single",
@@ -163,7 +163,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { featureColTotalWidth } = useDataSheetFixedColumns(
+        const { featureColTotalWidth } = createDataSheetFixedColumns(
           {
             itemChildren: () => undefined,
             selectionMode: "single",
@@ -181,7 +181,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { featureColTotalWidth } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { featureColTotalWidth } = createDataSheetFixedColumns({}, effectiveColumns);
 
         expect(featureColTotalWidth()).toBe(0);
       });
@@ -208,7 +208,7 @@ describe("useDataSheetFixedColumns", () => {
           createColumn("col2", false),
         ];
 
-        const { fixedLeftMap } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { fixedLeftMap } = createDataSheetFixedColumns({}, effectiveColumns);
 
         expect(fixedLeftMap().size).toBe(0);
       });
@@ -234,7 +234,7 @@ describe("useDataSheetFixedColumns", () => {
           createColumn("col3", false),
         ];
 
-        const { fixedLeftMap } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { fixedLeftMap } = createDataSheetFixedColumns({}, effectiveColumns);
 
         const map = fixedLeftMap();
         expect(map.has(0)).toBe(true);
@@ -263,7 +263,7 @@ describe("useDataSheetFixedColumns", () => {
           createColumn("col3", true),
         ];
 
-        const { fixedLeftMap } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { fixedLeftMap } = createDataSheetFixedColumns({}, effectiveColumns);
 
         const map = fixedLeftMap();
         expect(map.has(0)).toBe(true);
@@ -293,7 +293,7 @@ describe("useDataSheetFixedColumns", () => {
           createColumn("col2", false),
         ];
 
-        const { lastFixedIndex } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { lastFixedIndex } = createDataSheetFixedColumns({}, effectiveColumns);
 
         expect(lastFixedIndex()).toBe(-1);
       });
@@ -319,7 +319,7 @@ describe("useDataSheetFixedColumns", () => {
           createColumn("col3", false),
         ];
 
-        const { lastFixedIndex } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { lastFixedIndex } = createDataSheetFixedColumns({}, effectiveColumns);
 
         expect(lastFixedIndex()).toBe(1);
       });
@@ -345,7 +345,7 @@ describe("useDataSheetFixedColumns", () => {
           createColumn("col3", true),
         ];
 
-        const { lastFixedIndex } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { lastFixedIndex } = createDataSheetFixedColumns({}, effectiveColumns);
 
         expect(lastFixedIndex()).toBe(0);
       });
@@ -357,7 +357,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { getFixedStyle } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { getFixedStyle } = createDataSheetFixedColumns({}, effectiveColumns);
 
         expect(getFixedStyle(0)).toBeUndefined();
       });
@@ -382,7 +382,7 @@ describe("useDataSheetFixedColumns", () => {
           createColumn("col2", false),
         ];
 
-        const { getFixedStyle } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { getFixedStyle } = createDataSheetFixedColumns({}, effectiveColumns);
 
         const style = getFixedStyle(0);
         expect(style).toMatch(/^left: \d+px$/);
@@ -411,7 +411,7 @@ describe("useDataSheetFixedColumns", () => {
           createColumn("col3", false),
         ];
 
-        const { isLastFixed } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { isLastFixed } = createDataSheetFixedColumns({}, effectiveColumns);
 
         expect(isLastFixed(1)).toBe(true);
         expect(isLastFixed(0)).toBe(false);
@@ -438,7 +438,7 @@ describe("useDataSheetFixedColumns", () => {
           createColumn("col2", false),
         ];
 
-        const { isLastFixed } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { isLastFixed } = createDataSheetFixedColumns({}, effectiveColumns);
 
         expect(isLastFixed(1)).toBe(false);
       });
@@ -450,7 +450,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { columnRefs } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { columnRefs } = createDataSheetFixedColumns({}, effectiveColumns);
 
         expect(columnRefs.size).toBe(0);
       });
@@ -460,7 +460,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { columnRefs: _columnRefs, registerColumnRef } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { columnRefs: _columnRefs, registerColumnRef } = createDataSheetFixedColumns({}, effectiveColumns);
 
         const _mockElement = {
           offsetWidth: 100,
@@ -479,7 +479,7 @@ describe("useDataSheetFixedColumns", () => {
       createRoot(() => {
         const effectiveColumns = () => [];
 
-        const { columnWidths } = useDataSheetFixedColumns({}, effectiveColumns);
+        const { columnWidths } = createDataSheetFixedColumns({}, effectiveColumns);
 
         expect(columnWidths().size).toBe(0);
       });

package/tests/components/data/sheet/hooks/{useDataSheetPaging.spec.ts → createDataSheetPaging.spec.ts}

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { createRoot, createSignal } from "solid-js";
-import { useDataSheetPaging } from "../../../../../src/components/data/sheet/hooks/useDataSheetPaging";
+import { createDataSheetPaging } from "../../../../../src/components/data/sheet/hooks/createDataSheetPaging";
 
 interface TestItem {
   id: number;
@@ -16,7 +16,7 @@ const testData: TestItem[] = [
   { id: 6, name: "Item 6" },
 ];
 
-describe("useDataSheetPaging", () => {
+describe("createDataSheetPaging", () => {
   it("initializes with page 1", () => {
     createRoot(() => {
       const [page] = createSignal<number | undefined>(undefined);
@@ -26,7 +26,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>(testData);
       const [sortedItems] = createSignal<TestItem[]>(testData);
 
-      const { currentPage } = useDataSheetPaging({
+      const { currentPage } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,
@@ -48,7 +48,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>(testData);
       const [sortedItems] = createSignal<TestItem[]>(testData);
 
-      const { pageCount } = useDataSheetPaging({
+      const { pageCount } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,
@@ -71,7 +71,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>(testData);
       const [sortedItems] = createSignal<TestItem[]>(testData);
 
-      const { pageCount } = useDataSheetPaging({
+      const { pageCount } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,
@@ -93,7 +93,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>([]);
       const [sortedItems] = createSignal<TestItem[]>([]);
 
-      const { pageCount } = useDataSheetPaging({
+      const { pageCount } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,
@@ -115,7 +115,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>(testData);
       const [sortedItems] = createSignal<TestItem[]>(testData);
 
-      const { pageCount } = useDataSheetPaging({
+      const { pageCount } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,
@@ -137,7 +137,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>(testData);
       const [sortedItems] = createSignal<TestItem[]>(testData);
 
-      const { pagedItems } = useDataSheetPaging({
+      const { pagedItems } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,
@@ -164,7 +164,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>(testData);
       const [sortedItems] = createSignal<TestItem[]>(testData);
 
-      const { pagedItems } = useDataSheetPaging({
+      const { pagedItems } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,
@@ -186,7 +186,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>(testData);
       const [sortedItems] = createSignal<TestItem[]>(testData);
 
-      const { pagedItems } = useDataSheetPaging({
+      const { pagedItems } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,
@@ -208,7 +208,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>([]);
       const [sortedItems] = createSignal<TestItem[]>([]);
 
-      const { pagedItems } = useDataSheetPaging({
+      const { pagedItems } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,
@@ -230,7 +230,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>(testData);
       const [sortedItems] = createSignal<TestItem[]>(testData);
 
-      const { pagedItems } = useDataSheetPaging({
+      const { pagedItems } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,
@@ -257,7 +257,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>(testData);
       const [sortedItems] = createSignal<TestItem[]>(testData);
 
-      const { pagedItems } = useDataSheetPaging({
+      const { pagedItems } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,
@@ -284,7 +284,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>(testData);
       const [sortedItems] = createSignal<TestItem[]>(testData);
 
-      const { pagedItems } = useDataSheetPaging({
+      const { pagedItems } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,
@@ -311,7 +311,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>(testData);
       const [sortedItems] = createSignal<TestItem[]>(testData);
 
-      const { setCurrentPage, pagedItems } = useDataSheetPaging({
+      const { setCurrentPage, pagedItems } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,
@@ -342,7 +342,7 @@ describe("useDataSheetPaging", () => {
       const [items] = createSignal<TestItem[] | undefined>(testData);
       const [sortedItems] = createSignal<TestItem[]>(testData);
 
-      const { setCurrentPage, pagedItems } = useDataSheetPaging({
+      const { setCurrentPage, pagedItems } = createDataSheetPaging({
         page,
         onPageChange,
         pageSize,