@simplysm/solid 13.0.75 → 13.0.77

package/src/components/features/crud-sheet/{types.ts → CrudSheet.types.ts}

@@ -1,7 +1,6 @@
 import type { JSX } from "solid-js";
-import type { SetStoreFunction } from "solid-js/store";
-import type { ArrayDiffs2Result } from "@simplysm/core-common";
-import type { DataSheetColumnProps, SortingDef } from "../../data/sheet/types";
+import type { ArrayOneWayDiffResult } from "@simplysm/core-common";
+import type { DataSheetColumnProps, SortingDef } from "../../data/sheet/DataSheet.types";
 
 // ── Search ──
 
@@ -13,7 +12,7 @@ export interface SearchResult<TItem> {
 // ── Feature Configs ──
 
 export interface InlineEditConfig<TItem> {
-  submit: (diffs: ArrayDiffs2Result<TItem>[]) => Promise<void>;
+  submit: (diffs: ArrayOneWayDiffResult<TItem>[]) => Promise<void>;
   newItem: () => TItem;
   deleteProp?: keyof TItem & string;
   diffsExcludes?: string[];
@@ -49,7 +48,7 @@ export interface CrudSheetCellContext<TItem> {
 
 export interface CrudSheetContext<TItem> {
   items(): TItem[];
-  selectedItems(): TItem[];
+  selection(): TItem[];
   page(): number;
   sorts(): SortingDef[];
   busy(): boolean;
@@ -65,7 +64,7 @@ export interface CrudSheetContext<TItem> {
 
 // ── Props ──
 
-export type CrudSheetProps<TItem, TFilter extends Record<string, any>> = CrudSheetBaseProps<
+export type CrudSheetProps<TItem, TFilter extends Record<string, unknown>> = CrudSheetBaseProps<
   TItem,
   TFilter
 > &
@@ -75,18 +74,18 @@ export type CrudSheetProps<TItem, TFilter extends Record<string, any>> = CrudShe
     | { inlineEdit?: never; dialogEdit?: never }
   );
 
-interface CrudSheetBaseProps<TItem, TFilter extends Record<string, any>> {
+interface CrudSheetBaseProps<TItem, TFilter extends Record<string, unknown>> {
   search: (
     filter: TFilter,
     page: number | undefined,
     sorts: SortingDef[],
   ) => Promise<SearchResult<TItem>>;
   getItemKey: (item: TItem) => string | number | undefined;
-  persistKey?: string;
+  storageKey?: string;
   editable?: boolean;
-  itemEditable?: (item: TItem) => boolean;
-  itemDeletable?: (item: TItem) => boolean;
-  itemDeleted?: (item: TItem) => boolean;
+  isItemEditable?: (item: TItem) => boolean;
+  isItemDeletable?: (item: TItem) => boolean;
+  isItemDeleted?: (item: TItem) => boolean;
   isItemSelectable?: (item: TItem) => boolean | string;
   lastModifiedAtProp?: string;
   lastModifiedByProp?: string;
@@ -94,51 +93,18 @@ interface CrudSheetBaseProps<TItem, TFilter extends Record<string, any>> {
   items?: TItem[];
   onItemsChange?: (items: TItem[]) => void;
   excel?: ExcelConfig<TItem>;
-  selectMode?: "single" | "multiple";
+  selectionMode?: "single" | "multiple";
   onSelect?: (result: SelectResult<TItem>) => void;
-  onSubmitted?: () => void;
+  onSubmitComplete?: () => void;
   hideAutoTools?: boolean;
+  close?: () => void;
   class?: string;
   children: JSX.Element;
 }
 
 // ── Sub-component Defs ──
 
-export interface CrudSheetColumnDef<TItem> {
-  __type: "crud-sheet-column";
-  key: string;
-  header: string[];
-  headerContent?: () => JSX.Element;
-  headerStyle?: string;
-  summary?: () => JSX.Element;
-  tooltip?: string;
-  fixed: boolean;
-  hidden: boolean;
-  collapse: boolean;
-  width?: string;
-  class?: string;
-  sortable: boolean;
-  resizable: boolean;
-  editTrigger: boolean;
-  cell: (ctx: CrudSheetCellContext<TItem>) => JSX.Element;
-}
-
 export interface CrudSheetColumnProps<TItem> extends Omit<DataSheetColumnProps<TItem>, "children"> {
   editTrigger?: boolean;
   children: (ctx: CrudSheetCellContext<TItem>) => JSX.Element;
 }
-
-export interface CrudSheetFilterDef<TFilter> {
-  __type: "crud-sheet-filter";
-  children: (filter: TFilter, setFilter: SetStoreFunction<TFilter>) => JSX.Element;
-}
-
-export interface CrudSheetToolsDef<TItem> {
-  __type: "crud-sheet-tools";
-  children: (ctx: CrudSheetContext<TItem>) => JSX.Element;
-}
-
-export interface CrudSheetHeaderDef {
-  __type: "crud-sheet-header";
-  children: JSX.Element;
-}

package/src/components/features/crud-sheet/CrudSheetColumn.tsx

@@ -1,34 +1,11 @@
 import type { JSX } from "solid-js";
-import type { CrudSheetColumnDef, CrudSheetColumnProps } from "./types";
-import { normalizeHeader } from "../../data/sheet/sheetUtils";
+import { createSlots } from "../../../helpers/createSlots";
+import type { CrudSheetColumnProps } from "./CrudSheet.types";
 
-export function isCrudSheetColumnDef(value: unknown): value is CrudSheetColumnDef<unknown> {
-  return (
-    value != null &&
-    typeof value === "object" &&
-    (value as Record<string, unknown>)["__type"] === "crud-sheet-column"
-  );
-}
+const [SlotComponent, createCrudSheetColumnSlotsAccessor] = createSlots<CrudSheetColumnProps<any>>();
 
-/* eslint-disable solid/reactivity -- plain object return pattern, reactive context not needed */
-export function CrudSheetColumn<TItem>(props: CrudSheetColumnProps<TItem>): JSX.Element {
-  return {
-    __type: "crud-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,
-    editTrigger: props.editTrigger ?? false,
-  } as unknown as JSX.Element;
+function CrudSheetColumn<TItem>(props: CrudSheetColumnProps<TItem>): JSX.Element {
+  return SlotComponent(props as CrudSheetColumnProps<any>);
 }
-/* eslint-enable solid/reactivity */
+
+export { CrudSheetColumn, createCrudSheetColumnSlotsAccessor };

package/src/components/features/crud-sheet/CrudSheetFilter.tsx

@@ -1,21 +1,17 @@
 import type { JSX } from "solid-js";
-import type { CrudSheetFilterDef } from "./types";
+import type { SetStoreFunction } from "solid-js/store";
+import { createSlot } from "../../../helpers/createSlot";
 
-export function isCrudSheetFilterDef(value: unknown): value is CrudSheetFilterDef<any> {
-  return (
-    value != null &&
-    typeof value === "object" &&
-    (value as Record<string, unknown>)["__type"] === "crud-sheet-filter"
-  );
+export interface CrudSheetFilterSlotProps<TFilter> {
+  children: (filter: TFilter, setFilter: SetStoreFunction<TFilter>) => JSX.Element;
 }
 
-/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
-export function CrudSheetFilter<TFilter>(props: {
-  children: (filter: TFilter, setFilter: any) => JSX.Element;
-}): JSX.Element {
-  return {
-    __type: "crud-sheet-filter",
-    children: props.children,
-  } as unknown as JSX.Element;
+const [CrudSheetFilterBase, createCrudSheetFilterSlotAccessor] = createSlot<
+  CrudSheetFilterSlotProps<any>
+>();
+
+function CrudSheetFilter<TFilter>(props: CrudSheetFilterSlotProps<TFilter>): JSX.Element {
+  return CrudSheetFilterBase(props as CrudSheetFilterSlotProps<any>);
 }
-/* eslint-enable solid/reactivity */
+
+export { CrudSheetFilter, createCrudSheetFilterSlotAccessor };

package/src/components/features/crud-sheet/CrudSheetHeader.tsx

@@ -1,19 +1,6 @@
 import type { JSX } from "solid-js";
-import type { CrudSheetHeaderDef } from "./types";
+import { createSlot } from "../../../helpers/createSlot";
 
-export function isCrudSheetHeaderDef(value: unknown): value is CrudSheetHeaderDef {
-  return (
-    value != null &&
-    typeof value === "object" &&
-    (value as Record<string, unknown>)["__type"] === "crud-sheet-header"
-  );
-}
+const [CrudSheetHeader, createCrudSheetHeaderSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
-/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
-export function CrudSheetHeader(props: { children: JSX.Element }): JSX.Element {
-  return {
-    __type: "crud-sheet-header",
-    children: props.children,
-  } as unknown as JSX.Element;
-}
-/* eslint-enable solid/reactivity */
+export { CrudSheetHeader, createCrudSheetHeaderSlotAccessor };

package/src/components/features/crud-sheet/CrudSheetTools.tsx

@@ -1,21 +1,17 @@
 import type { JSX } from "solid-js";
-import type { CrudSheetToolsDef } from "./types";
+import type { CrudSheetContext } from "./CrudSheet.types";
+import { createSlot } from "../../../helpers/createSlot";
 
-export function isCrudSheetToolsDef(value: unknown): value is CrudSheetToolsDef<any> {
-  return (
-    value != null &&
-    typeof value === "object" &&
-    (value as Record<string, unknown>)["__type"] === "crud-sheet-tools"
-  );
+export interface CrudSheetToolsSlotProps<TItem> {
+  children: (ctx: CrudSheetContext<TItem>) => JSX.Element;
 }
 
-/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
-export function CrudSheetTools<_TItem>(props: {
-  children: (ctx: any) => JSX.Element;
-}): JSX.Element {
-  return {
-    __type: "crud-sheet-tools",
-    children: props.children,
-  } as unknown as JSX.Element;
+const [CrudSheetToolsBase, createCrudSheetToolsSlotAccessor] = createSlot<
+  CrudSheetToolsSlotProps<any>
+>();
+
+function CrudSheetTools<TItem>(props: CrudSheetToolsSlotProps<TItem>): JSX.Element {
+  return CrudSheetToolsBase(props as CrudSheetToolsSlotProps<any>);
 }
-/* eslint-enable solid/reactivity */
+
+export { CrudSheetTools, createCrudSheetToolsSlotAccessor };

package/src/components/features/data-select-button/DataSelectButton.tsx

@@ -15,11 +15,12 @@ import { twMerge } from "tailwind-merge";
 import { IconSearch, IconX } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
 import { Invalid } from "../../form-control/Invalid";
-import { useDialog, type DialogShowOptions } from "../../disclosure/DialogContext";
-import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useDialog, type DialogShowOptions } from "../../disclosure/Dialog";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { type ComponentSize, textMuted } from "../../../styles/tokens.styles";
+import { text } from "../../../styles/base.styles";
+import { gap, type ComponentSize } from "../../../styles/control.styles";
+import { themeTokens } from "../../../styles/theme.styles";
 import {
   triggerBaseClass,
   triggerDisabledClass,
@@ -32,40 +33,40 @@ export interface DataSelectDialogResult<TKey> {
   selectedKeys: TKey[];
 }
 
-/** Props automatically injected into dialog component by DataSelectButton/SharedDataSelect */
-export interface InjectedSelectProps {
-  /** Selection mode */
-  selectMode: "single" | "multiple";
-  /** Currently selected keys */
-  selectedKeys: (string | number)[];
-  /** Selection callback — automatically closes dialog with result */
-  onSelect: (result: { keys: (string | number)[] }) => void;
+/** Base props for select dialog components (injected by DataSelectButton/SharedDataSelect + DialogProvider) */
+export interface SelectDialogBaseProps<TKey = string | number> {
+  close?: (result?: DataSelectDialogResult<TKey>) => void;
+  selectionMode: "single" | "multiple";
+  selectedKeys: TKey[];
 }
 
-/** Declarative dialog configuration */
-export interface DialogConfig<TUserProps = any> {
-  /** Dialog component (must accept InjectedSelectProps) */
-  component: Component<TUserProps & InjectedSelectProps>;
-  /** User-defined props for the component */
-  props?: TUserProps;
-  /** Dialog options (header, size, etc.) */
-  option?: DialogShowOptions;
-}
+/** Extract user-specific props from dialog component (exclude injected base props) */
+type UserDialogProps<P, TKey = string | number> = Omit<P, keyof SelectDialogBaseProps<TKey>>;
+
+/** dialogProps: required when user props have required keys, optional otherwise */
+export type DialogPropsField<P, TKey = string | number> =
+  {} extends UserDialogProps<P, TKey>
+    ? { dialogProps?: UserDialogProps<P, TKey> }
+    : { dialogProps: UserDialogProps<P, TKey> };
 
 /** DataSelectButton Props */
-export interface DataSelectButtonProps<TItem, TKey = string | number> {
+export type DataSelectButtonProps<
+  TItem,
+  TKey = string | number,
+  TDialogProps extends SelectDialogBaseProps<TKey> = SelectDialogBaseProps<TKey>,
+> = {
   /** Currently selected key(s) (single or multiple) */
   value?: TKey | TKey[];
   /** Value change callback */
   onValueChange?: (value: TKey | TKey[] | undefined) => void;
-
   /** Function to load items by key */
   load: (keys: TKey[]) => TItem[] | Promise<TItem[]>;
-  /** Selection dialog configuration */
-  dialog: DialogConfig;
   /** Item rendering function */
   renderItem: (item: TItem) => JSX.Element;
-
+  /** Selection dialog component */
+  dialog: Component<TDialogProps>;
+  /** Dialog options (header, size, etc.) */
+  dialogOptions?: DialogShowOptions;
   /** Multiple selection mode */
   multiple?: boolean;
   /** Required input */
@@ -76,23 +77,19 @@ export interface DataSelectButtonProps<TItem, TKey = string | number> {
   size?: ComponentSize;
   /** Borderless style */
   inset?: boolean;
-
   /** Custom validation function */
   validate?: (value: unknown) => string | undefined;
-  /** touchMode: show error only after focus is lost */
-  touchMode?: boolean;
-}
+  /** lazyValidation: show error only after focus is lost */
+  lazyValidation?: boolean;
+} & DialogPropsField<TDialogProps, TKey>;
 
-// Styles
-const containerClass = clsx("inline-flex items-center", "group");
-const selectedValueClass = clsx("flex-1", "whitespace-nowrap", "overflow-hidden", "text-ellipsis");
 const actionButtonClass = clsx(
   "flex-shrink-0",
   "p-0.5",
   "rounded",
   "cursor-pointer",
   "transition-colors",
-  "hover:bg-base-200 dark:hover:bg-base-700",
+  themeTokens.base.hoverBg,
   "focus:outline-none",
 );
 
@@ -104,22 +101,25 @@ function getTriggerContainerClass(options: {
 }): string {
   return twMerge(
     triggerBaseClass,
-    "px-2 py-1",
-    options.size && triggerSizeClasses[options.size],
+    triggerSizeClasses[options.size ?? "default"],
     options.disabled && triggerDisabledClass,
     options.inset && triggerInsetClass,
     options.class,
   );
 }
 
-export function DataSelectButton<TItem, TKey = string | number>(
-  props: DataSelectButtonProps<TItem, TKey>,
-): JSX.Element {
+export function DataSelectButton<
+  TItem,
+  TKey = string | number,
+  TDialogProps extends SelectDialogBaseProps<TKey> = SelectDialogBaseProps<TKey>,
+>(props: DataSelectButtonProps<TItem, TKey, TDialogProps>): JSX.Element {
   const [local] = splitProps(props, [
     "value",
     "onValueChange",
     "load",
     "dialog",
+    "dialogProps",
+    "dialogOptions",
     "renderItem",
     "multiple",
     "required",
@@ -127,7 +127,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
     "size",
     "inset",
     "validate",
-    "touchMode",
+    "lazyValidation",
   ]);
 
   const i18n = useI18n();
@@ -148,7 +148,6 @@ export function DataSelectButton<TItem, TKey = string | number>(
   } as Parameters<typeof createControllableSignal<ValueType>>[0]);
 
   // Track keys for loading
-  // eslint-disable-next-line solid/reactivity -- initial value read once at mount time
   const [loadKeys, setLoadKeys] = createSignal<TKey[]>(normalizeKeys(local.value));
 
   // Update loadKeys when value changes
@@ -162,7 +161,6 @@ export function DataSelectButton<TItem, TKey = string | number>(
   );
 
   // Call load via createResource
-  // eslint-disable-next-line solid/reactivity -- createResource fetcher is called when source changes
   const [selectedItems] = createResource(loadKeys, async (keys) => {
     if (keys.length === 0) return [];
     return Promise.resolve(local.load(keys));
@@ -191,22 +189,15 @@ export function DataSelectButton<TItem, TKey = string | number>(
   const handleOpenDialog = async () => {
     if (local.disabled) return;
 
-    const result = await dialog.show<DataSelectDialogResult<TKey>>(
-      () => {
-        const instance = useDialogInstance<DataSelectDialogResult<TKey>>();
-        return (
-          <local.dialog.component
-            {...(local.dialog.props ?? {})}
-            selectMode={local.multiple ? "multiple" : "single"}
-            selectedKeys={normalizeKeys(getValue()) as (string | number)[]}
-            onSelect={(r: { keys: (string | number)[] }) =>
-              instance?.close({ selectedKeys: r.keys as TKey[] })
-            }
-          />
-        );
+    const result = (await dialog.show(
+      local.dialog,
+      {
+        ...((local as any).dialogProps ?? {}),
+        selectionMode: local.multiple ? "multiple" : "single",
+        selectedKeys: normalizeKeys(getValue()) as (string | number)[],
       },
-      local.dialog.option ?? {},
-    );
+      local.dialogOptions,
+    )) as DataSelectDialogResult<TKey> | undefined;
 
     if (result) {
       const newKeys = result.selectedKeys;
@@ -222,7 +213,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
   const handleClear = (e: MouseEvent) => {
     e.stopPropagation();
     if (local.multiple) {
-      setValue([] as unknown as TKey[]);
+      setValue([] as TKey[]);
     } else {
       setValue(undefined);
     }
@@ -232,7 +223,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
   const renderSelectedDisplay = (): JSX.Element => {
     const items = selectedItems();
     if (!items || items.length === 0) {
-      return <span class={textMuted} />;
+      return <span class={text.muted} />;
     }
     return (
       <span class="flex items-center gap-1">
@@ -240,7 +231,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
           {(item, index) => (
             <>
               <Show when={index() > 0}>
-                <span class={textMuted}>,</span>
+                <span class={text.muted}>,</span>
               </Show>
               {local.renderItem(item)}
             </>
@@ -259,8 +250,8 @@ export function DataSelectButton<TItem, TKey = string | number>(
     });
 
   return (
-    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
-      <div data-data-select-button class={containerClass}>
+    <Invalid message={errorMsg()} variant="border" lazyValidation={local.lazyValidation}>
+      <div data-data-select-button class="group inline-flex items-center">
         <div
           role="combobox"
           aria-haspopup="dialog"
@@ -277,13 +268,13 @@ export function DataSelectButton<TItem, TKey = string | number>(
             }
           }}
         >
-          <div class={selectedValueClass}>{renderSelectedDisplay()}</div>
-          <div class="flex items-center gap-0.5">
+          <div class="flex-1 truncate">{renderSelectedDisplay()}</div>
+          <div class={clsx("flex items-center", gap.sm)}>
             <Show when={clearable()}>
               <button
                 type="button"
                 data-clear-button
-                class={twMerge(actionButtonClass, "text-base-400 hover:text-danger-500")}
+                class={twMerge(actionButtonClass, text.muted, "hover:text-danger-500")}
                 onClick={handleClear}
                 tabIndex={-1}
                 aria-label={i18n.t("dataSelectButton.deselect")}
@@ -295,7 +286,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
               <button
                 type="button"
                 data-search-button
-                class={twMerge(actionButtonClass, "text-base-400 hover:text-primary-500")}
+                class={twMerge(actionButtonClass, text.muted, "hover:text-primary-500")}
                 onClick={() => void handleOpenDialog()}
                 tabIndex={-1}
                 aria-label={i18n.t("dataSelectButton.search")}

package/src/components/features/permission-table/PermissionTable.tsx

@@ -12,13 +12,9 @@ import {
 import clsx from "clsx";
 import { DataSheet } from "../../data/sheet/DataSheet";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
-import { borderDefault } from "../../../styles/tokens.styles";
+import { border } from "../../../styles/base.styles";
 import type { AppPerm } from "../../../helpers/createAppStructure";
-import { useI18n } from "../../../providers/i18n/I18nContext";
-
-const titleCellClass = clsx("flex items-stretch", "px-2");
-const indentGuideWrapperClass = clsx("mr-1 flex w-3", "justify-center");
-const indentGuideLineClass = clsx("w-0 self-stretch", "border-r", borderDefault);
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 // --- Types ---
 
@@ -224,8 +220,8 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
     return items.filter((item) => isItemVisible(item, local.modules));
   });
 
-  // Sheet's getChildren — apply module filter, preserve object reference
-  const getChildren = (item: AppPerm): AppPerm[] | undefined => {
+  // Sheet's itemChildren — apply module filter, preserve object reference
+  const itemChildren = (item: AppPerm): AppPerm[] | undefined => {
     if (!item.children || item.children.length === 0) return undefined;
     const modules = local.modules;
     if (!modules || modules.length === 0) return item.children;
@@ -239,7 +235,7 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
   const currentValue = createMemo(() => local.value ?? {});
 
   // Expanded state — all expanded by default
-  const getAllExpandable = () => collectExpandable(visibleItems(), getChildren);
+  const getAllExpandable = () => collectExpandable(visibleItems(), itemChildren);
 
   const [expandedItems, setExpandedItems] = createSignal<AppPerm[]>(getAllExpandable());
 
@@ -263,7 +259,7 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
     <DataSheet
       data-permission-table
       items={visibleItems()}
-      getChildren={getChildren}
+      itemChildren={itemChildren}
       expandedItems={expandedItems()}
       onExpandedItemsChange={setExpandedItems}
       hideConfigBar
@@ -277,11 +273,11 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
         {(ctx) => {
           const item = ctx.item as AppPerm;
           return (
-            <div class={titleCellClass}>
+            <div class="flex items-stretch px-2">
               <For each={Array.from({ length: ctx.depth })}>
                 {() => (
-                  <div class={indentGuideWrapperClass}>
-                    <div class={indentGuideLineClass} />
+                  <div class="mr-1 flex w-3 justify-center">
+                    <div class={clsx("w-0 self-stretch border-r", border.default)} />
                   </div>
                 )}
               </For>