@simplysm/solid 13.0.74 → 13.0.76

package/src/components/features/crud-sheet/types.ts

@@ -1,5 +1,4 @@
 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";
 
@@ -49,7 +48,7 @@ export interface CrudSheetCellContext<TItem> {
 
 export interface CrudSheetContext<TItem> {
   items(): TItem[];
-  selectedItems(): TItem[];
+  selection(): TItem[];
   page(): number;
   sorts(): SortingDef[];
   busy(): boolean;
@@ -82,63 +81,30 @@ interface CrudSheetBaseProps<TItem, TFilter extends Record<string, any>> {
     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;
-  isItemSelectable?: (item: TItem) => boolean | string;
+  itemSelectable?: (item: TItem) => boolean | string;
   lastModifiedAtProp?: string;
   lastModifiedByProp?: string;
   filterInitial?: TFilter;
   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/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;
-}
+} & 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 {
-  const [local] = splitProps(props, [
+export function DataSelectButton<
+  TItem,
+  TKey = string | number,
+  TDialogProps extends SelectDialogBaseProps<TKey> = SelectDialogBaseProps<TKey>,
+>(props: DataSelectButtonProps<TItem, TKey, TDialogProps>): JSX.Element {
+  const [local] = splitProps(props as any, [
     "value",
     "onValueChange",
     "load",
     "dialog",
+    "dialogProps",
+    "dialogOptions",
     "renderItem",
     "multiple",
     "required",
@@ -128,7 +128,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
     "inset",
     "validate",
     "touchMode",
-  ]);
+  ]) as unknown as [typeof props];
 
   const i18n = useI18n();
   const dialog = useDialog();
@@ -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,29 +189,22 @@ 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;
       if (local.multiple) {
         setValue(newKeys);
       } else {
-        setValue(newKeys.length > 0 ? newKeys[0] : undefined);
+        setValue((newKeys.length > 0 ? newKeys[0] : undefined) as any);
       }
     }
   };
@@ -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)}
             </>
@@ -260,7 +251,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
 
   return (
     <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
-      <div data-data-select-button class={containerClass}>
+      <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>