@simplysm/solid 13.0.74 → 13.0.76

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

@@ -1,33 +1,11 @@
 import type { JSX } from "solid-js";
-import type { DataSheetColumnDef, DataSheetColumnProps } from "./types";
-import { normalizeHeader } from "./sheetUtils";
+import { createSlots } from "../../../helpers/createSlots";
+import type { DataSheetColumnProps } from "./types";
 
-export function isDataSheetColumnDef(value: unknown): value is DataSheetColumnDef<unknown> {
-  return (
-    value != null &&
-    typeof value === "object" &&
-    (value as Record<string, unknown>)["__type"] === "sheet-column"
-  );
-}
+const [SlotComponent, createColumnSlotsAccessor] = createSlots<DataSheetColumnProps<any>>();
 
-/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
-export function DataSheetColumn<TItem>(props: DataSheetColumnProps<TItem>): JSX.Element {
-  return {
-    __type: "sheet-column",
-    key: props.key,
-    header: normalizeHeader(props.header),
-    headerContent: props.headerContent,
-    headerStyle: props.headerStyle,
-    summary: props.summary,
-    tooltip: props.tooltip,
-    cell: props.children,
-    class: props.class,
-    fixed: props.fixed ?? false,
-    hidden: props.hidden ?? false,
-    collapse: props.collapse ?? false,
-    width: props.width,
-    sortable: props.sortable ?? true,
-    resizable: props.resizable ?? true,
-  } as unknown as JSX.Element;
+function DataSheetColumn<TItem>(props: DataSheetColumnProps<TItem>): JSX.Element {
+  return SlotComponent(props as DataSheetColumnProps<any>);
 }
-/* eslint-enable solid/reactivity */
+
+export { DataSheetColumn, createColumnSlotsAccessor };

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

@@ -1,7 +1,6 @@
 import { type Component } from "solid-js";
 import { createStore, reconcile } from "solid-js/store";
 import clsx from "clsx";
-import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
 import type {
   DataSheetConfig,
   DataSheetConfigColumn,
@@ -12,13 +11,9 @@ import { DataSheet } from "./DataSheet";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { TextInput } from "../../form-control/field/TextInput";
 import { Button } from "../../form-control/Button";
-import { borderSubtle } from "../../../styles/tokens.styles";
-import { useI18n } from "../../../providers/i18n/I18nContext";
-
-const containerClass = clsx("flex flex-col", "gap-2", "p-2");
-const sheetWrapperClass = clsx("rounded border", borderSubtle);
-const footerClass = clsx("flex justify-between", "gap-2");
-const footerActionsClass = clsx("flex gap-2");
+import { border } from "../../../styles/base.styles";
+import { pad } from "../../../styles/control.styles";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 interface EditColumnItem {
   key: string;
@@ -31,13 +26,12 @@ interface EditColumnItem {
 export interface DataSheetConfigDialogProps {
   columnInfos: DataSheetConfigColumnInfo[];
   currentConfig: DataSheetConfig;
+  close?: (result?: DataSheetConfig) => void;
 }
 
 export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (props) => {
-  const dialog = useDialogInstance<DataSheetConfig>();
   const i18n = useI18n();
 
-  /* eslint-disable solid/reactivity -- dialog props are static values only used once at mount time */
   const initialItems: EditColumnItem[] = props.columnInfos
     .filter((info) => !info.collapse)
     .map((info) => {
@@ -55,7 +49,6 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
       const orderB = props.currentConfig.columnRecord?.[b.key]?.displayOrder ?? Infinity;
       return orderA - orderB;
     });
-  /* eslint-enable solid/reactivity */
 
   const [editItems, setEditItems] = createStore<EditColumnItem[]>(initialItems);
 
@@ -89,7 +82,8 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
 
     for (let i = 0; i < editItems.length; i++) {
       const item = editItems[i];
-      const info = props.columnInfos.find((c) => c.key === item.key)!;
+      const info = props.columnInfos.find((c) => c.key === item.key);
+      if (!info) continue;
 
       const entry: DataSheetConfigColumn = {};
 
@@ -103,22 +97,22 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
       }
     }
 
-    dialog?.close({ columnRecord });
+    props.close?.({ columnRecord });
   }
 
   function handleReset(): void {
     if (!confirm(i18n.t("dataSheetConfigDialog.resetConfirm"))) return;
-    dialog?.close({ columnRecord: {} });
+    props.close?.({ columnRecord: {} });
   }
 
   return (
-    <div class={containerClass}>
-      <div class={sheetWrapperClass}>
+    <div class="flex flex-col gap-2 p-2">
+      <div class={clsx("rounded border", border.subtle)}>
         <DataSheet items={editItems} inset hideConfigBar onItemsReorder={handleReorder}>
           <DataSheet.Column<EditColumnItem>
             key="header"
             header={i18n.t("dataSheetConfigDialog.column")}
-            class="px-2 py-1"
+            class={pad.default}
             sortable={false}
           >
             {(ctx) => ctx.item.headerText}
@@ -154,12 +148,12 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
         </DataSheet>
       </div>
 
-      <div class={footerClass}>
+      <div class="flex justify-between gap-2">
         <Button onClick={handleReset} theme="warning" variant="solid">
           {i18n.t("dataSheetConfigDialog.reset")}
         </Button>
-        <div class={footerActionsClass}>
-          <Button onClick={() => dialog?.close(undefined)}>{i18n.t("dataSheetConfigDialog.cancel")}</Button>
+        <div class="flex gap-2">
+          <Button onClick={() => props.close?.(undefined)}>{i18n.t("dataSheetConfigDialog.cancel")}</Button>
           <Button onClick={handleOk} theme="primary" variant="solid">
             {i18n.t("dataSheetConfigDialog.confirm")}
           </Button>

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

@@ -0,0 +1,85 @@
+import { createMemo, type Accessor } from "solid-js";
+import type { FlatItem } from "../types";
+import { collectAllExpandable, flattenTree } from "../sheetUtils";
+import { createControllableSignal } from "../../../../hooks/createControllableSignal";
+
+export interface UseDataSheetExpansionProps<TItem> {
+  expandedItems?: TItem[];
+  onExpandedItemsChange?: (items: TItem[]) => void;
+  itemChildren?: (item: TItem, index: number) => TItem[] | undefined;
+}
+
+export interface UseDataSheetExpansionReturn<TItem> {
+  expandedItems: Accessor<TItem[]>;
+  setExpandedItems: (newValue: TItem[] | ((prev: TItem[]) => TItem[])) => TItem[];
+  flatItems: Accessor<FlatItem<TItem>[]>;
+  toggleExpand: (item: TItem) => void;
+  isAllExpanded: Accessor<boolean>;
+  toggleExpandAll: () => void;
+}
+
+export function useDataSheetExpansion<TItem>(
+  props: UseDataSheetExpansionProps<TItem>,
+  pagedItems: Accessor<TItem[]>,
+  originalIndexMap: Accessor<Map<TItem, number>>,
+): UseDataSheetExpansionReturn<TItem> {
+  const [expandedItems, setExpandedItems] = createControllableSignal({
+    value: () => props.expandedItems ?? [],
+    onChange: () => props.onExpandedItemsChange,
+  });
+
+  function toggleExpand(item: TItem): void {
+    const current = expandedItems();
+    if (current.includes(item)) {
+      setExpandedItems(current.filter((i) => i !== item));
+    } else {
+      setExpandedItems([...current, item]);
+    }
+  }
+
+  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(
+      pagedItems(),
+      expandedItems(),
+      props.itemChildren,
+      (item) => indexMap.get(item) ?? -1,
+    );
+  });
+
+  const isAllExpanded = createMemo(() => {
+    if (!props.itemChildren) return false;
+    const indexMap = originalIndexMap();
+    const allExpandable = collectAllExpandable(
+      pagedItems(),
+      props.itemChildren,
+      (item) => indexMap.get(item) ?? -1,
+    );
+    return (
+      allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item))
+    );
+  });
+
+  return {
+    expandedItems,
+    setExpandedItems,
+    flatItems,
+    toggleExpand,
+    isAllExpanded,
+    toggleExpandAll,
+  };
+}

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

@@ -0,0 +1,131 @@
+import { createMemo, createSignal, type Accessor } from "solid-js";
+import { createResizeObserver } from "@solid-primitives/resize-observer";
+import type { DataSheetColumnDef } from "../types";
+
+export interface UseDataSheetFixedColumnsProps<TItem> {
+  itemChildren?: (item: TItem, index: number) => TItem[] | undefined;
+  selectionMode?: "single" | "multiple";
+  onItemsReorder?: (event: any) => void;
+}
+
+export function useDataSheetFixedColumns<TItem>(
+  props: UseDataSheetFixedColumnsProps<TItem>,
+  effectiveColumns: Accessor<DataSheetColumnDef<TItem>[]>
+) {
+  // Feature column presence checks
+  const hasExpandFeature = () => props.itemChildren != null;
+  const hasSelectFeature = () => props.selectionMode != null;
+  const hasReorderFeature = () => props.onItemsReorder != null;
+
+  // Feature column width tracking helper
+  function createTrackedWidth(): [() => number, (el: HTMLElement) => void] {
+    const [width, setWidth] = createSignal(0);
+    const register = (el: HTMLElement) => {
+      createResizeObserver(el, () => {
+        setWidth(el.offsetWidth);
+      });
+    };
+    return [width, register];
+  }
+
+  const [expandColWidth, registerExpandColRef] = createTrackedWidth();
+  const [selectColWidth, registerSelectColRef] = createTrackedWidth();
+  const [reorderColWidth, registerReorderColRef] = createTrackedWidth();
+
+  // Feature column left position (used in select/reorder column style)
+  const selectColLeft = createMemo(() => (hasExpandFeature() ? `${expandColWidth()}px` : "0"));
+
+  const reorderColLeft = createMemo(() => {
+    let left = 0;
+    if (hasExpandFeature()) left += expandColWidth();
+    if (hasSelectFeature()) left += selectColWidth();
+    return `${left}px`;
+  });
+
+  // Column cell refs — for width measurement
+  const columnRefs = new Map<number, HTMLElement>();
+
+  // Measured width of each column
+  const [columnWidths, setColumnWidths] = createSignal<Map<number, number>>(new Map());
+
+  // Total width of feature columns (expand, etc.) — used for fixed column left offset
+  const featureColTotalWidth = createMemo(() => {
+    let w = 0;
+    if (hasExpandFeature()) w += expandColWidth();
+    if (hasSelectFeature()) w += selectColWidth();
+    if (hasReorderFeature()) w += reorderColWidth();
+    return w;
+  });
+
+  // Calculate left position of fixed columns
+  const fixedLeftMap = createMemo(() => {
+    const map = new Map<number, number>();
+    const cols = effectiveColumns();
+    const widths = columnWidths();
+    let left = featureColTotalWidth();
+    for (let c = 0; c < cols.length; c++) {
+      if (!cols[c].fixed) break; // Fixed columns are placed continuously at front
+      map.set(c, left);
+      left += widths.get(c) ?? 0;
+    }
+    return map;
+  });
+
+  // Last fixed column index
+  const lastFixedIndex = createMemo(() => {
+    const cols = effectiveColumns();
+    let last = -1;
+    for (let c = 0; c < cols.length; c++) {
+      if (cols[c].fixed) last = c;
+      else break;
+    }
+    return last;
+  });
+
+  function getFixedStyle(colIndex: number): string | undefined {
+    const leftVal = fixedLeftMap().get(colIndex);
+    if (leftVal == null) return undefined;
+    return `left: ${leftVal}px`;
+  }
+
+  function isLastFixed(colIndex: number): boolean {
+    return colIndex === lastFixedIndex();
+  }
+
+  // Register ResizeObserver for fixed column cells
+  function registerColumnRef(colIndex: number, el: HTMLElement): void {
+    columnRefs.set(colIndex, el);
+    createResizeObserver(el, () => {
+      setColumnWidths((prev) => {
+        const next = new Map(prev);
+        next.set(colIndex, el.offsetWidth);
+        return next;
+      });
+    });
+  }
+
+  return {
+    // Feature column tracking
+    hasExpandFeature,
+    hasSelectFeature,
+    hasReorderFeature,
+    expandColWidth,
+    selectColWidth,
+    reorderColWidth,
+    registerExpandColRef,
+    registerSelectColRef,
+    registerReorderColRef,
+    selectColLeft,
+    reorderColLeft,
+
+    // Fixed columns
+    columnRefs,
+    columnWidths,
+    featureColTotalWidth,
+    fixedLeftMap,
+    lastFixedIndex,
+    getFixedStyle,
+    isLastFixed,
+    registerColumnRef,
+  };
+}

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

@@ -0,0 +1,51 @@
+import { createMemo, type Accessor } from "solid-js";
+import { createControllableSignal } from "../../../../hooks/createControllableSignal";
+
+export interface UseDataSheetPagingOptions<TItem> {
+  page: Accessor<number | undefined>;
+  onPageChange: Accessor<((page: number) => void) | undefined>;
+  pageSize: Accessor<number | undefined>;
+  totalPageCount: Accessor<number | undefined>;
+  items: Accessor<TItem[] | undefined>;
+  sortedItems: Accessor<TItem[]>;
+}
+
+export interface UseDataSheetPagingReturn<TItem> {
+  currentPage: Accessor<number>;
+  setCurrentPage: (newValue: number | ((prev: number) => number)) => number;
+  pageCount: Accessor<number>;
+  pagedItems: Accessor<TItem[]>;
+}
+
+export function useDataSheetPaging<TItem>(
+  options: UseDataSheetPagingOptions<TItem>,
+): UseDataSheetPagingReturn<TItem> {
+  const [currentPage, setCurrentPage] = createControllableSignal({
+    value: () => options.page() ?? 1,
+    onChange: () => options.onPageChange(),
+  });
+
+  const pageCount = createMemo(() => {
+    const ipp = options.pageSize();
+    if (ipp != null && ipp !== 0 && (options.items() ?? []).length > 0) {
+      return Math.ceil((options.items() ?? []).length / ipp);
+    }
+    return options.totalPageCount() ?? 0;
+  });
+
+  const pagedItems = createMemo(() => {
+    const ipp = options.pageSize();
+    if (ipp == null || ipp === 0) return options.sortedItems();
+    if ((options.items() ?? []).length <= 0) return options.sortedItems();
+
+    const page = Math.max(1, currentPage());
+    return options.sortedItems().slice((page - 1) * ipp, page * ipp);
+  });
+
+  return {
+    currentPage,
+    setCurrentPage,
+    pageCount,
+    pagedItems,
+  };
+}

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

@@ -0,0 +1,155 @@
+import { createSignal, type Accessor } from "solid-js";
+import { startPointerDrag } from "../../../../helpers/startPointerDrag";
+import type { DataSheetReorderEvent } from "../types";
+import type { FlatItem } from "../types";
+
+export interface UseDataSheetReorderProps<TItem> {
+  onItemsReorder?: (event: DataSheetReorderEvent<TItem>) => void;
+  itemChildren?: (item: TItem, index: number) => TItem[] | undefined;
+}
+
+export function useDataSheetReorder<TItem>(
+  props: UseDataSheetReorderProps<TItem>,
+  displayItems: Accessor<FlatItem<TItem>[]>
+) {
+  const [dragState, setDragState] = createSignal<{
+    draggingItem: TItem;
+    targetItem: TItem | null;
+    position: "before" | "after" | "inside" | null;
+  } | null>(null);
+
+  function isDescendant(parent: TItem, child: TItem, visited = new Set<TItem>()): boolean {
+    if (visited.has(parent)) return false;
+    visited.add(parent);
+    if (!props.itemChildren) return false;
+    const childItems = props.itemChildren(parent, 0);
+    if (!childItems) return false;
+    for (const c of childItems) {
+      if (c === child) return true;
+      if (isDescendant(c, child, visited)) return true;
+    }
+    return false;
+  }
+
+  function onReorderPointerDown(e: PointerEvent, item: TItem): void {
+    e.preventDefault();
+    const target = e.currentTarget as HTMLElement;
+
+    const tableEl = target.closest("table")!;
+    const tbody = tableEl.querySelector("tbody")!;
+    const rows = Array.from(tbody.rows);
+
+    setDragState({ draggingItem: item, targetItem: null, position: null });
+
+    startPointerDrag(target, e.pointerId, {
+      onMove(ev) {
+        let foundTarget: TItem | 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;
+
+          // Cannot drop to child items of self
+          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 = props.itemChildren
+              ? "inside"
+              : relY < rect.height / 2
+                ? "before"
+                : "after";
+          }
+          foundTarget = flat.item;
+          break;
+        }
+
+        setDragState({ draggingItem: item, targetItem: foundTarget, position: foundPosition });
+
+        // Update indicator 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");
+            }
+          }
+        }
+
+        // before/after indicator
+        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) {
+          props.onItemsReorder?.({
+            item: state.draggingItem,
+            targetItem: state.targetItem,
+            position: state.position,
+          } as DataSheetReorderEvent<TItem>);
+        }
+
+        // Clean up
+        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";
+        }
+
+        setDragState(null);
+      },
+    });
+  }
+
+  return {
+    dragState,
+    setDragState,
+    onReorderPointerDown,
+  };
+}

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

@@ -0,0 +1,99 @@
+import { createSignal, type Accessor } from "solid-js";
+import type { FlatItem } from "../types";
+import { createControllableSignal } from "../../../../hooks/createControllableSignal";
+
+export interface UseDataSheetSelectionProps<TItem> {
+  selectionMode?: "single" | "multiple";
+  selection?: TItem[];
+  onSelectionChange?: (items: TItem[]) => void;
+  itemSelectable?: (item: TItem) => boolean | string;
+}
+
+export interface UseDataSheetSelectionReturn<TItem> {
+  selection: Accessor<TItem[]>;
+  setSelection: (newValue: TItem[] | ((prev: TItem[]) => TItem[])) => TItem[];
+  getItemSelectable: (item: TItem) => boolean | string;
+  toggleSelect: (item: TItem) => void;
+  toggleSelectAll: () => void;
+  rangeSelect: (targetRow: number) => void;
+  lastClickedRow: Accessor<number | null>;
+  setLastClickedRow: (value: number | null) => void;
+  lastClickAction: Accessor<"select" | "deselect">;
+  setLastClickAction: (value: "select" | "deselect") => void;
+}
+
+export function useDataSheetSelection<TItem>(
+  props: UseDataSheetSelectionProps<TItem>,
+  displayItems: Accessor<FlatItem<TItem>[]>,
+): UseDataSheetSelectionReturn<TItem> {
+  const [selection, setSelection] = createControllableSignal({
+    value: () => props.selection ?? [],
+    onChange: () => props.onSelectionChange,
+  });
+
+  const [lastClickedRow, setLastClickedRow] = createSignal<number | null>(null);
+  const [lastClickAction, setLastClickAction] = createSignal<"select" | "deselect">("select");
+
+  function getItemSelectable(item: TItem): boolean | string {
+    if (!props.itemSelectable) return true;
+    return props.itemSelectable(item);
+  }
+
+  function toggleSelect(item: TItem): void {
+    if (getItemSelectable(item) !== true) return;
+    const isSelected = selection().includes(item);
+    setLastClickAction(isSelected ? "deselect" : "select");
+
+    if (props.selectionMode === "single") {
+      setSelection(isSelected ? [] : [item]);
+    } else {
+      setSelection(
+        isSelected ? selection().filter((i) => i !== item) : [...selection(), item],
+      );
+    }
+  }
+
+  function toggleSelectAll(): void {
+    const selectableItems = displayItems()
+      .map((flat) => flat.item)
+      .filter((item) => getItemSelectable(item) === true);
+    const isAllSelected = selectableItems.every((item) => selection().includes(item));
+    setSelection(isAllSelected ? [] : selectableItems);
+  }
+
+  function rangeSelect(targetRow: number): void {
+    const lastRow = lastClickedRow();
+    if (lastRow == null) return;
+
+    const start = Math.min(lastRow, targetRow);
+    const end = Math.max(lastRow, targetRow);
+
+    const rangeItems = displayItems()
+      .slice(start, end + 1)
+      .map((flat) => flat.item)
+      .filter((item) => getItemSelectable(item) === true);
+
+    if (lastClickAction() === "select") {
+      const newItems = [...selection()];
+      for (const item of rangeItems) {
+        if (!newItems.includes(item)) newItems.push(item);
+      }
+      setSelection(newItems);
+    } else {
+      setSelection(selection().filter((item) => !rangeItems.includes(item)));
+    }
+  }
+
+  return {
+    selection,
+    setSelection,
+    getItemSelectable,
+    toggleSelect,
+    toggleSelectAll,
+    rangeSelect,
+    lastClickedRow,
+    setLastClickedRow,
+    lastClickAction,
+    setLastClickAction,
+  };
+}