@simplysm/solid 13.0.75 → 13.0.77

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

@@ -0,0 +1,154 @@
+import { createSignal, type Accessor } from "solid-js";
+import { startPointerDrag } from "../../../../helpers/startPointerDrag";
+import type { DataSheetReorderEvent, FlatItem } from "../DataSheet.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 "../DataSheet.types";
+import { createControllableSignal } from "../../../../hooks/createControllableSignal";
+
+export interface UseDataSheetSelectionProps<TItem> {
+  selectionMode?: "single" | "multiple";
+  selection?: TItem[];
+  onSelectionChange?: (items: TItem[]) => void;
+  isItemSelectable?: (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.isItemSelectable) return true;
+    return props.isItemSelectable(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,
+  };
+}

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

@@ -0,0 +1,68 @@
+import { createMemo, type Accessor } from "solid-js";
+import { createControllableSignal } from "../../../../hooks/createControllableSignal";
+import { applySorting } from "../DataSheet.utils";
+import type { SortingDef } from "../DataSheet.types";
+
+export interface UseDataSheetSortingOptions<TItem> {
+  sorts: Accessor<SortingDef[] | undefined>;
+  onSortsChange: Accessor<((sorts: SortingDef[]) => void) | undefined>;
+  items: Accessor<TItem[] | undefined>;
+  autoSort: Accessor<boolean | undefined>;
+}
+
+export interface UseDataSheetSortingReturn<TItem> {
+  sorts: Accessor<SortingDef[]>;
+  setSorts: (newValue: SortingDef[] | ((prev: SortingDef[]) => SortingDef[])) => SortingDef[];
+  toggleSort: (key: string, multiple: boolean) => void;
+  sortIndex: (key: string) => number | undefined;
+  sortedItems: Accessor<TItem[]>;
+}
+
+export function useDataSheetSorting<TItem>(
+  options: UseDataSheetSortingOptions<TItem>,
+): UseDataSheetSortingReturn<TItem> {
+  const [sorts, setSorts] = createControllableSignal({
+    value: () => options.sorts() ?? [],
+    onChange: () => options.onSortsChange(),
+  });
+
+  function toggleSort(key: string, multiple: boolean): void {
+    const current = sorts();
+    const existing = current.find((s) => s.key === key);
+
+    if (existing) {
+      if (!existing.desc) {
+        // asc → desc
+        const updated = current.map((s) => (s.key === key ? { ...s, desc: true } : s));
+        setSorts(multiple ? updated : [{ key, desc: true }]);
+      } else {
+        // desc → remove
+        const updated = current.filter((s) => s.key !== key);
+        setSorts(multiple ? updated : []);
+      }
+    } else {
+      // none → add asc
+      const newSort: SortingDef = { key, desc: false };
+      setSorts(multiple ? [...current, newSort] : [newSort]);
+    }
+  }
+
+  function sortIndex(key: string): number | undefined {
+    if (sorts().length <= 1) return undefined;
+    const idx = sorts().findIndex((s) => s.key === key);
+    return idx >= 0 ? idx + 1 : undefined;
+  }
+
+  const sortedItems = createMemo(() => {
+    if (!options.autoSort()) return options.items() ?? [];
+    return applySorting(options.items() ?? [], sorts());
+  });
+
+  return {
+    sorts,
+    setSorts,
+    toggleSort,
+    sortIndex,
+    sortedItems,
+  };
+}

package/src/components/disclosure/Collapse.tsx

@@ -7,7 +7,6 @@ import {
   onCleanup,
 } from "solid-js";
 import { createElementSize } from "@solid-primitives/resize-observer";
-import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { mergeStyles } from "../../helpers/mergeStyles";
 
@@ -30,13 +29,6 @@ export interface CollapseProps extends JSX.HTMLAttributes<HTMLDivElement> {
   open?: boolean;
 }
 
-const transitionClass = clsx(
-  "transition-[margin-top]",
-  "duration-200",
-  "ease-out",
-  "motion-reduce:transition-none",
-);
-
 export const Collapse: ParentComponent<CollapseProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "style", "open"]);
 
@@ -69,7 +61,7 @@ export const Collapse: ParentComponent<CollapseProps> = (props) => {
     >
       <div
         ref={setContentRef}
-        class={mounted() ? transitionClass : ""}
+        class={mounted() ? "transition-[margin-top] duration-200 ease-out motion-reduce:transition-none" : ""}
         style={{
           "margin-top": marginTop(),
           // When closed, prevent access to focusable elements and prevent FOUC