@simplysm/solid 13.0.75 → 13.0.76

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 "../sheetUtils";
+import type { SortingDef } from "../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/data/sheet/sheetUtils.ts

@@ -102,10 +102,10 @@ function isSameGroup(
 export function flattenTree<TNode>(
   items: TNode[],
   expandedItems: TNode[],
-  getChildren?: (item: TNode, index: number) => TNode[] | undefined,
+  itemChildren?: (item: TNode, index: number) => TNode[] | undefined,
   getOriginalIndex?: (item: TNode) => number,
 ): FlatItem<TNode>[] {
-  if (!getChildren) {
+  if (!itemChildren) {
     return items.map((item, i) => ({
       item,
       index: getOriginalIndex ? getOriginalIndex(item) : i,
@@ -122,7 +122,7 @@ export function flattenTree<TNode>(
     for (let localIdx = 0; localIdx < list.length; localIdx++) {
       const item = list[localIdx];
       const index = depth === 0 && getOriginalIndex ? getOriginalIndex(item) : localIdx;
-      const children = getChildren!(item, index);
+      const children = itemChildren!(item, index);
       const hasChildren = children != null && children.length > 0;
       result.push({ item, index, row, depth, hasChildren, parent });
       row++;
@@ -139,7 +139,7 @@ export function flattenTree<TNode>(
 
 export function collectAllExpandable<TItem>(
   items: TItem[],
-  getChildren: (item: TItem, index: number) => TItem[] | undefined,
+  itemChildren: (item: TItem, index: number) => TItem[] | undefined,
   getOriginalIndex?: (item: TItem) => number,
 ): TItem[] {
   const result: TItem[] = [];
@@ -148,7 +148,7 @@ export function collectAllExpandable<TItem>(
     for (let localIdx = 0; localIdx < list.length; localIdx++) {
       const item = list[localIdx];
       const index = depth === 0 && getOriginalIndex ? getOriginalIndex(item) : localIdx;
-      const children = getChildren(item, index);
+      const children = itemChildren(item, index);
       if (children != null && children.length > 0) {
         result.push(item);
         walk(children, depth + 1);

package/src/components/data/sheet/types.ts

@@ -4,7 +4,7 @@ export interface DataSheetProps<TItem> {
   // Data
   items?: TItem[];
   // Config
-  persistKey?: string;
+  storageKey?: string;
   hideConfigBar?: boolean;
   inset?: boolean;
   contentStyle?: JSX.CSSProperties | string;
@@ -18,20 +18,20 @@ export interface DataSheetProps<TItem> {
   page?: number;
   onPageChange?: (page: number) => void;
   totalPageCount?: number;
-  itemsPerPage?: number;
+  pageSize?: number;
   displayPageCount?: number;
 
   // Selection
-  selectMode?: "single" | "multiple";
-  selectedItems?: TItem[];
-  onSelectedItemsChange?: (items: TItem[]) => void;
+  selectionMode?: "single" | "multiple";
+  selection?: TItem[];
+  onSelectionChange?: (items: TItem[]) => void;
   autoSelect?: "click";
-  isItemSelectable?: (item: TItem) => boolean | string;
+  itemSelectable?: (item: TItem) => boolean | string;
 
   // Tree expansion
   expandedItems?: TItem[];
   onExpandedItemsChange?: (items: TItem[]) => void;
-  getChildren?: (item: TItem, index: number) => TItem[] | undefined;
+  itemChildren?: (item: TItem, index: number) => TItem[] | undefined;
 
   // Cell styling
   cellClass?: (item: TItem, colKey: string) => string | undefined;
@@ -88,7 +88,6 @@ export interface DataSheetConfigColumn {
 }
 
 export interface DataSheetColumnDef<TItem> {
-  __type: "sheet-column";
   key: string;
   header: string[];
   headerContent?: () => JSX.Element;

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

package/src/components/disclosure/Dialog.tsx

@@ -10,33 +10,103 @@ import {
   Show,
   splitProps,
   useContext,
+  type Accessor,
+  type Component,
 } from "solid-js";
-import { Portal } from "solid-js/web";
+import { Portal, Dynamic } from "solid-js/web";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { IconX } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../hooks/createControllableSignal";
-import { createSlotSignal, type SlotAccessor } from "../../hooks/createSlotSignal";
 import { createMountTransition } from "../../hooks/createMountTransition";
 import { startPointerDrag } from "../../helpers/startPointerDrag";
-import { createSlotComponent } from "../../helpers/createSlotComponent";
+import { createSlot } from "../../helpers/createSlot";
 import { mergeStyles } from "../../helpers/mergeStyles";
-import { useI18n } from "../../providers/i18n/I18nContext";
+import { useI18n } from "../../providers/i18n/I18nProvider";
 import { Icon } from "../display/Icon";
-import { borderSubtle } from "../../styles/tokens.styles";
-import { DialogDefaultsContext } from "./DialogContext";
+import { bg, border } from "../../styles/base.styles";
 import { bringToFront, registerDialog, unregisterDialog, isTopmost } from "./dialogZIndex";
 import { Button } from "../form-control/Button";
 
-interface DialogSlotsContextValue {
-  setHeader: (content: SlotAccessor) => void;
-  setAction: (content: SlotAccessor) => void;
+//#region Dialog Context Types & Utilities
+
+/** Dialog default configuration */
+export interface DialogDefaults {
+  /** Allow closing via ESC key */
+  closeOnEscape?: boolean;
+  /** Allow closing via backdrop click */
+  closeOnInteractOutside?: boolean;
 }
 
-const DialogSlotsContext = createContext<DialogSlotsContextValue>();
+/** Dialog default configuration Context */
+export const DialogDefaultsContext = createContext<Accessor<DialogDefaults>>();
 
-const DialogHeader = createSlotComponent(DialogSlotsContext, (ctx) => ctx.setHeader);
-const DialogAction = createSlotComponent(DialogSlotsContext, (ctx) => ctx.setAction);
+/** Programmatic dialog options */
+export interface DialogShowOptions {
+  /** Dialog header */
+  header?: JSX.Element;
+  /** Show close button */
+  closable?: boolean;
+  /** Close on backdrop click */
+  closeOnInteractOutside?: boolean;
+  /** Close on ESC key */
+  closeOnEscape?: boolean;
+  /** Resizable */
+  resizable?: boolean;
+  /** Draggable */
+  draggable?: boolean;
+  /** Floating mode (fixed to bottom-right) */
+  float?: boolean;
+  /** Fill full screen */
+  fill?: boolean;
+  /** Initial width (px) */
+  width?: number;
+  /** Initial height (px) */
+  height?: number;
+  /** Minimum width (px) */
+  minWidth?: number;
+  /** Minimum height (px) */
+  minHeight?: number;
+  /** Floating position */
+  position?: "bottom-right" | "top-right";
+  /** Custom header style */
+  headerStyle?: JSX.CSSProperties | string;
+  /** Confirmation function before closing (return false to cancel) */
+  canDeactivate?: () => boolean;
+}
+
+/** Extract result type from component's close prop */
+export type ExtractCloseResult<P> =
+  P extends { close?: (result?: infer T) => void } ? T : undefined;
+
+/** Programmatic dialog Context value */
+export interface DialogContextValue {
+  /** Open dialog and wait until closing, returns result */
+  show<P extends Record<string, any>>(
+    component: Component<P>,
+    props: "close" extends keyof P ? Omit<P, "close"> : never,
+    options?: DialogShowOptions,
+  ): Promise<ExtractCloseResult<P> | undefined>;
+}
+
+/** Programmatic dialog Context */
+export const DialogContext = createContext<DialogContextValue>();
+
+/**
+ * Hook to access programmatic dialogs
+ *
+ * @throws Throws error if DialogProvider is not present
+ */
+export function useDialog(): DialogContextValue {
+  const ctx = useContext(DialogContext);
+  if (!ctx) throw new Error("useDialog can only be used inside DialogProvider");
+  return ctx;
+}
+
+//#endregion
+
+const [DialogHeader, createHeaderSlotAccessor] = createSlot<{ children: JSX.Element }>();
+const [DialogAction, createActionSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
 export interface DialogProps {
   /** Dialog open state */
@@ -46,13 +116,13 @@ export interface DialogProps {
   /** Show close button (default: true) */
   closable?: boolean;
   /** Close on backdrop click */
-  closeOnBackdrop?: boolean;
+  closeOnInteractOutside?: boolean;
   /** Close on Escape key (default: true) */
   closeOnEscape?: boolean;
   /** Resizable (default: false) */
   resizable?: boolean;
   /** Draggable (default: true) */
-  movable?: boolean;
+  draggable?: boolean;
   /** Floating mode (no backdrop) */
   float?: boolean;
   /** Full-screen mode */
@@ -109,8 +179,6 @@ const resizeCursorMap: Record<ResizeDirection, string> = {
   "bottom-right": "cursor-nwse-resize",
 };
 
-const dialogContentClass = clsx("flex-1", "overflow-auto");
-
 const resizePositionMap: Record<ResizeDirection, string> = {
   "left": clsx("left-0 top-0", "h-full w-1.5"),
   "right": clsx("right-0 top-0", "h-full w-1.5"),
@@ -139,12 +207,7 @@ const resizePositionMap: Record<ResizeDirection, string> = {
  * </Dialog>
  * ```
  */
-interface DialogComponent extends ParentComponent<DialogProps> {
-  Header: typeof DialogHeader;
-  Action: typeof DialogAction;
-}
-
-export const Dialog: DialogComponent = (props) => {
+const DialogInner: ParentComponent<DialogProps> = (props) => {
   const dialogDefaults = useContext(DialogDefaultsContext);
   const i18n = useI18n();
 
@@ -152,10 +215,10 @@ export const Dialog: DialogComponent = (props) => {
     "open",
     "onOpenChange",
     "closable",
-    "closeOnBackdrop",
+    "closeOnInteractOutside",
     "closeOnEscape",
     "resizable",
-    "movable",
+    "draggable",
     "float",
     "fill",
     "width",
@@ -172,8 +235,8 @@ export const Dialog: DialogComponent = (props) => {
 
   const headerId = "dialog-header-" + createUniqueId();
 
-  const [header, setHeader] = createSlotSignal();
-  const [action, setAction] = createSlotSignal();
+  const [header, HeaderProvider] = createHeaderSlotAccessor();
+  const [action, ActionProvider] = createActionSlotAccessor();
   const hasHeader = () => header() !== undefined;
 
   const [open, setOpen] = createControllableSignal({
@@ -216,8 +279,8 @@ export const Dialog: DialogComponent = (props) => {
   const [wrapperRef, setWrapperRef] = createSignal<HTMLDivElement>();
 
   const closeOnEscape = () => local.closeOnEscape ?? dialogDefaults?.().closeOnEscape ?? true;
-  const closeOnBackdrop = () =>
-    local.closeOnBackdrop ?? dialogDefaults?.().closeOnBackdrop ?? false;
+  const closeOnInteractOutside = () =>
+    local.closeOnInteractOutside ?? dialogDefaults?.().closeOnInteractOutside ?? false;
 
   // Detect Escape key
   createEffect(() => {
@@ -256,7 +319,7 @@ export const Dialog: DialogComponent = (props) => {
 
   // Backdrop click handler
   const handleBackdropClick = () => {
-    if (!closeOnBackdrop()) return;
+    if (!closeOnInteractOutside()) return;
     tryClose();
   };
 
@@ -282,8 +345,8 @@ export const Dialog: DialogComponent = (props) => {
 
   // Dragging
   const handleHeaderPointerDown = (event: PointerEvent) => {
-    // movable default is true
-    if (local.movable === false) return;
+    // draggable default is true
+    if (local.draggable === false) return;
     const wrapperEl = wrapperRef();
     if (!dialogRef || !wrapperEl) return;
     // Do not treat events from interactive elements like close button as drag
@@ -459,9 +522,9 @@ export const Dialog: DialogComponent = (props) => {
       "relative",
       "mx-auto",
       "w-fit min-w-[200px]",
-      "bg-white dark:bg-base-800",
+      bg.surface,
       local.float
-        ? clsx("shadow-md dark:shadow-black/30", "border", borderSubtle)
+        ? clsx("shadow-md dark:shadow-black/30", "border", border.subtle)
         : "shadow-2xl dark:shadow-black/40",
       local.fill ? "rounded-none border-none" : "rounded-lg",
       "overflow-hidden",
@@ -473,12 +536,13 @@ export const Dialog: DialogComponent = (props) => {
 
   // Header class
   const headerClass = () =>
-    clsx("flex items-center gap-2", "px-3 py-1", "select-none", "border-b", borderSubtle);
+    clsx("flex items-center gap-2", "px-3 py-1", "select-none", "border-b", border.subtle);
 
   return (
     <Show when={mounted()}>
       <Portal>
-        <DialogSlotsContext.Provider value={{ setHeader, setAction }}>
+        <HeaderProvider>
+          <ActionProvider>
           <div ref={setWrapperRef} data-dialog class={wrapperClass()}>
             {/* Backdrop */}
             <Show when={!local.float}>
@@ -513,9 +577,9 @@ export const Dialog: DialogComponent = (props) => {
                   onPointerDown={handleHeaderPointerDown}
                 >
                   <h5 id={headerId} class={clsx("flex-1 font-bold")}>
-                    {header()!()}
+                    {header()!.children}
                   </h5>
-                  <Show when={action()}>{action()!()}</Show>
+                  <Show when={action()}>{action()!.children}</Show>
                   <Show when={local.closable ?? true}>
                     <Button
                       data-dialog-close
@@ -531,7 +595,7 @@ export const Dialog: DialogComponent = (props) => {
               </Show>
 
               {/* Content */}
-              <div data-dialog-content class={dialogContentClass}>
+              <div data-dialog-content class="flex-1 overflow-auto">
                 {local.children}
               </div>
 
@@ -554,11 +618,148 @@ export const Dialog: DialogComponent = (props) => {
               </Show>
             </div>
           </div>
-        </DialogSlotsContext.Provider>
+          </ActionProvider>
+        </HeaderProvider>
       </Portal>
     </Show>
   );
 };
 
-Dialog.Header = DialogHeader;
-Dialog.Action = DialogAction;
+//#region Export
+export const Dialog = Object.assign(DialogInner, {
+  Header: DialogHeader,
+  Action: DialogAction,
+});
+//#endregion
+
+//#region DialogProvider
+
+interface DialogEntry {
+  id: string;
+  component: Component<any>;
+  props: Record<string, any>;
+  options: DialogShowOptions;
+  resolve: (result: unknown) => void;
+  open: Accessor<boolean>;
+  setOpen: (value: boolean) => void;
+  pendingResult?: unknown;
+}
+
+let nextId = 0;
+
+/**
+ * Programmatic dialog Provider
+ *
+ * Open dialogs with `useDialog().show(component, props, options)`,
+ * and close them with `props.close(result)` to resolve the Promise.
+ *
+ * @example
+ * ```tsx
+ * <DialogProvider>
+ *   <App />
+ * </DialogProvider>
+ * ```
+ */
+export interface DialogProviderProps extends DialogDefaults {}
+
+export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
+  const [local, _rest] = splitProps(props, ["closeOnEscape", "closeOnInteractOutside", "children"]);
+
+  const defaults = () => ({
+    closeOnEscape: local.closeOnEscape,
+    closeOnInteractOutside: local.closeOnInteractOutside,
+  });
+
+  const [entries, setEntries] = createSignal<DialogEntry[]>([]);
+
+  const show = <P extends Record<string, any>,>(
+    component: Component<P>,
+    componentProps: Record<string, any>,
+    options?: DialogShowOptions,
+  ): Promise<any> => {
+    return new Promise((resolve) => {
+      const id = String(nextId++);
+      const [open, setOpen] = createSignal(true);
+      const entry: DialogEntry = {
+        id,
+        component,
+        props: componentProps,
+        options: options ?? {},
+        resolve,
+        open,
+        setOpen,
+      };
+      setEntries((prev) => [...prev, entry]);
+    });
+  };
+
+  // Start close animation (set open to false)
+  const requestClose = (id: string, result?: unknown) => {
+    const entry = entries().find((e) => e.id === id);
+    if (entry) {
+      entry.pendingResult = result;
+      entry.setOpen(false);
+    }
+  };
+
+  // Actually remove after animation completes
+  const removeEntry = (id: string) => {
+    setEntries((prev) => {
+      const entry = prev.find((e) => e.id === id);
+      if (entry) {
+        entry.resolve(entry.pendingResult);
+      }
+      return prev.filter((e) => e.id !== id);
+    });
+  };
+
+  const contextValue: DialogContextValue = {
+    show,
+  };
+
+  return (
+    <DialogDefaultsContext.Provider value={defaults}>
+      <DialogContext.Provider value={contextValue}>
+        {local.children}
+        <For each={entries()}>
+          {(entry) => (
+            <Dialog
+              open={entry.open()}
+              onOpenChange={(open) => {
+                if (!open && entry.pendingResult === undefined) {
+                  requestClose(entry.id);
+                }
+              }}
+              onCloseComplete={() => removeEntry(entry.id)}
+              closable={entry.options.closable}
+              closeOnInteractOutside={entry.options.closeOnInteractOutside}
+              closeOnEscape={entry.options.closeOnEscape}
+              resizable={entry.options.resizable}
+              draggable={entry.options.draggable}
+              float={entry.options.float}
+              fill={entry.options.fill}
+              width={entry.options.width}
+              height={entry.options.height}
+              minWidth={entry.options.minWidth}
+              minHeight={entry.options.minHeight}
+              position={entry.options.position}
+              headerStyle={entry.options.headerStyle}
+              canDeactivate={entry.options.canDeactivate}
+            >
+              <Show when={entry.options.header !== undefined}>
+                <Dialog.Header>{entry.options.header}</Dialog.Header>
+              </Show>
+              <Dynamic
+                component={entry.component}
+                {...entry.props}
+                close={(result?: unknown) => requestClose(entry.id, result)}
+              />
+            </Dialog>
+          )}
+        </For>
+      </DialogContext.Provider>
+    </DialogDefaultsContext.Provider>
+  );
+};
+
+//#endregion