@simplysm/solid 13.0.76 → 13.0.77

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

@@ -3,7 +3,6 @@ import {
   createSignal,
   createUniqueId,
   For,
-  type JSX,
   onCleanup,
   Show,
   splitProps,
@@ -12,19 +11,20 @@ import {
 import { createStore, produce, reconcile } from "solid-js/store";
 import { createControllableStore } from "../../../hooks/createControllableStore";
 import type { DateTime } from "@simplysm/core-common";
-import { objClone, objGetChainValue } from "@simplysm/core-common";
+import { obj } from "@simplysm/core-common";
 import "@simplysm/core-common"; // register extensions
-import type { SortingDef } from "../../data/sheet/types";
+import { openFileDialog } from "@simplysm/core-browser";
+import type { SortingDef } from "../../data/sheet/DataSheet.types";
 import { DataSheet } from "../../data/sheet/DataSheet";
 import { DataSheetColumn } from "../../data/sheet/DataSheetColumn";
-import { normalizeHeader } from "../../data/sheet/sheetUtils";
+import { normalizeHeader } from "../../data/sheet/DataSheet.utils";
 import { BusyContainer } from "../../feedback/busy/BusyContainer";
 import { useNotification } from "../../feedback/notification/NotificationProvider";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { Button } from "../../form-control/Button";
 import { Icon } from "../../display/Icon";
 import { FormGroup } from "../../layout/FormGroup";
-import { createTopbarActions, TopbarContext } from "../../layout/topbar/Topbar";
+import { useTopbarActions, TopbarContext } from "../../layout/topbar/Topbar";
 import { Dialog } from "../../disclosure/Dialog";
 import { Link } from "../../display/Link";
 import { createEventListener } from "@solid-primitives/event-listener";
@@ -53,17 +53,9 @@ import type {
   CrudSheetContext,
   CrudSheetProps,
   SearchResult,
-} from "./types";
+} from "./CrudSheet.types";
 
-interface CrudSheetComponent {
-  <TItem, TFilter extends Record<string, any>>(props: CrudSheetProps<TItem, TFilter>): JSX.Element;
-  Column: typeof CrudSheetColumn;
-  Filter: typeof CrudSheetFilter;
-  Tools: typeof CrudSheetTools;
-  Header: typeof CrudSheetHeader;
-}
-
-const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
+const CrudSheetBase = <TItem, TFilter extends Record<string, unknown>>(
   props: CrudSheetProps<TItem, TFilter>,
 ) => {
   const [local] = splitProps(props, [
@@ -71,10 +63,10 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     "getItemKey",
     "storageKey",
     "editable",
-    "itemEditable",
-    "itemDeletable",
-    "itemDeleted",
-    "itemSelectable",
+    "isItemEditable",
+    "isItemDeletable",
+    "isItemDeleted",
+    "isItemSelectable",
     "lastModifiedAtProp",
     "lastModifiedByProp",
     "onSubmitComplete",
@@ -113,13 +105,26 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   let originalItems: TItem[] = [];
 
   const [filter, setFilter] = createStore<TFilter>((local.filterInitial ?? {}) as TFilter);
-  const [lastFilter, setLastFilter] = createSignal<TFilter>(objClone(filter));
+  const [lastFilter, setLastFilter] = createSignal<TFilter>(obj.clone(filter));
 
   const [page, setPage] = createSignal(1);
   const [totalPageCount, setTotalPageCount] = createSignal(0);
   const [sorts, setSorts] = createSignal<SortingDef[]>([]);
 
   const [busyCount, setBusyCount] = createSignal(0);
+
+  async function withBusy<T>(fn: () => Promise<T>, errorMessage?: string): Promise<T | undefined> {
+    setBusyCount((c) => c + 1);
+    try {
+      return await fn();
+    } catch (err) {
+      noti.error(err, errorMessage);
+      return undefined;
+    } finally {
+      setBusyCount((c) => c - 1);
+    }
+  }
+
   const [ready, setReady] = createSignal(false);
 
   const [selection, setSelection] = createSignal<TItem[]>([]);
@@ -132,13 +137,15 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   createEventListener(() => formRef, "pointerdown", () => activateCrud(crudId));
   createEventListener(() => formRef, "focusin", () => activateCrud(crudId));
 
+  let refreshVersion = 0;
+
   createEffect(() => {
     void doRefresh();
   });
 
   // -- Key-based selection: restore selection when items change --
   createEffect(() => {
-    const currentItems = items as unknown as TItem[];
+    const currentItems = items;
     const keys = selectedKeys();
     if (keys.size === 0) {
       if (selection().length > 0) {
@@ -154,20 +161,24 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   });
 
   async function doRefresh() {
+    const version = ++refreshVersion;
     setBusyCount((c) => c + 1);
     try {
       await refresh();
+      if (version !== refreshVersion) return;
+      setReady(true);
     } catch (err) {
+      if (version !== refreshVersion) return;
       noti.error(err, i18n.t("crudSheet.lookupFailed"));
+    } finally {
+      setBusyCount((c) => c - 1);
     }
-    setBusyCount((c) => c - 1);
-    setReady(true);
   }
 
   async function refresh() {
     const result: SearchResult<TItem> = await local.search(lastFilter(), page(), sorts());
     setItems(reconcile(result.items));
-    originalItems = objClone(result.items);
+    originalItems = obj.clone(result.items);
     setTotalPageCount(result.pageCount ?? 0);
   }
 
@@ -188,7 +199,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     e.preventDefault();
     if (!checkIgnoreChanges()) return;
     setPage(1);
-    setLastFilter(() => objClone(filter));
+    setLastFilter(() => obj.clone(filter));
   }
 
   async function handleRefresh() {
@@ -207,7 +218,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   }
 
   function handleToggleDelete(item: TItem, index: number) {
-    if (!(local.itemDeletable?.(item) ?? true)) return;
+    if (!(local.isItemDeletable?.(item) ?? true)) return;
     if (local.inlineEdit?.deleteProp == null) return;
     const dp = local.inlineEdit.deleteProp;
 
@@ -220,7 +231,11 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       return;
     }
 
-    setItems(index as any, dp as any, !(item[dp] as boolean) as any);
+    setItems(
+      produce((draft) => {
+        (draft[index] as Record<string, unknown>)[dp] = !(item[dp] as boolean);
+      }),
+    );
   }
 
   async function handleSave() {
@@ -235,16 +250,12 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       return;
     }
 
-    setBusyCount((c) => c + 1);
-    try {
-      await local.inlineEdit.submit(diffs);
+    await withBusy(async () => {
+      await local.inlineEdit!.submit(diffs);
       noti.success(i18n.t("crudSheet.saveCompleted"), i18n.t("crudSheet.saveSuccess"));
       await refresh();
       local.onSubmitComplete?.();
-    } catch (err) {
-      noti.error(err, i18n.t("crudSheet.saveFailed"));
-    }
-    setBusyCount((c) => c - 1);
+    }, i18n.t("crudSheet.saveFailed"));
   }
 
   async function handleFormSubmit(e: Event) {
@@ -258,13 +269,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     const result = await local.dialogEdit.editItem(item);
     if (!result) return;
 
-    setBusyCount((c) => c + 1);
-    try {
-      await refresh();
-    } catch (err) {
-      noti.error(err, i18n.t("crudSheet.lookupFailed"));
-    }
-    setBusyCount((c) => c - 1);
+    await withBusy(() => refresh(), i18n.t("crudSheet.lookupFailed"));
   }
 
   async function handleDeleteItems() {
@@ -272,14 +277,10 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     const result = await local.dialogEdit.deleteItems(selection());
     if (!result) return;
 
-    setBusyCount((c) => c + 1);
-    try {
+    await withBusy(async () => {
       await refresh();
       noti.success(i18n.t("crudSheet.deleteCompleted"), i18n.t("crudSheet.deleteSuccess"));
-    } catch (err) {
-      noti.error(err, i18n.t("crudSheet.deleteFailed"));
-    }
-    setBusyCount((c) => c - 1);
+    }, i18n.t("crudSheet.deleteFailed"));
   }
 
   async function handleRestoreItems() {
@@ -287,57 +288,40 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     const result = await local.dialogEdit.restoreItems(selection());
     if (!result) return;
 
-    setBusyCount((c) => c + 1);
-    try {
+    await withBusy(async () => {
       await refresh();
       noti.success(i18n.t("crudSheet.restoreCompleted"), i18n.t("crudSheet.restoreSuccess"));
-    } catch (err) {
-      noti.error(err, i18n.t("crudSheet.restoreFailed"));
-    }
-    setBusyCount((c) => c - 1);
+    }, i18n.t("crudSheet.restoreFailed"));
   }
 
   // -- Excel --
   async function handleExcelDownload() {
     if (!local.excel) return;
 
-    setBusyCount((c) => c + 1);
-    try {
+    await withBusy(async () => {
       const result = await local.search(lastFilter(), undefined, sorts());
-      await local.excel.download(result.items);
-    } catch (err) {
-      noti.error(err, i18n.t("crudSheet.excelDownloadFailed"));
-    }
-    setBusyCount((c) => c - 1);
+      await local.excel!.download(result.items);
+    }, i18n.t("crudSheet.excelDownloadFailed"));
   }
 
-  function handleExcelUpload() {
+  async function handleExcelUpload() {
     if (!local.excel?.upload) return;
 
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".xlsx";
-    input.onchange = async () => {
-      const file = input.files?.[0];
-      if (file == null) return;
-
-      setBusyCount((c) => c + 1);
-      try {
-        await local.excel!.upload!(file);
-        noti.success(i18n.t("crudSheet.excelCompleted"), i18n.t("crudSheet.excelUploadSuccess"));
-        await refresh();
-      } catch (err) {
-        noti.error(err, i18n.t("crudSheet.excelUploadFailed"));
-      }
-      setBusyCount((c) => c - 1);
-    };
-    input.click();
+    const files = await openFileDialog({ accept: ".xlsx" });
+    const file = files?.[0];
+    if (file == null) return;
+
+    await withBusy(async () => {
+      await local.excel!.upload!(file);
+      noti.success(i18n.t("crudSheet.excelCompleted"), i18n.t("crudSheet.excelUploadSuccess"));
+      await refresh();
+    }, i18n.t("crudSheet.excelUploadFailed"));
   }
 
   // -- Select Mode --
   function handleSelectionChange(newSelection: TItem[]) {
     // Current page items key Set
-    const currentItems = items as unknown as TItem[];
+    const currentItems = items;
     const currentKeys = new Set<string | number>();
     for (const item of currentItems) {
       const key = local.getItemKey(item);
@@ -414,7 +398,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   // -- Topbar Actions --
   if (topbarCtx) {
-    createTopbarActions(() => (
+    useTopbarActions(() => (
       <>
         <Show when={canEdit() && local.inlineEdit}>
           <Button
@@ -437,7 +421,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   // -- Context for Tools --
   const ctx: CrudSheetContext<TItem> = {
-    items: () => items as unknown as TItem[],
+    items: () => items,
     selection,
     page,
     sorts,
@@ -458,7 +442,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   // -- Render --
   const deleteProp = () => local.inlineEdit?.deleteProp;
-  const isItemDeleted = (item: TItem) => local.itemDeleted?.(item) ?? false;
+  const isItemDeleted = (item: TItem) => local.isItemDeleted?.(item) ?? false;
 
   return (
     <>
@@ -561,8 +545,8 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                     selection().length === 0 ||
                     !selection().some(
                       (item) =>
-                        (local.itemDeletable?.(item) ?? true) &&
-                        !(local.itemDeleted?.(item) ?? false),
+                        (local.isItemDeletable?.(item) ?? true) &&
+                        !(local.isItemDeleted?.(item) ?? false),
                     )
                   }
                 >
@@ -578,7 +562,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   onClick={handleRestoreItems}
                   disabled={
                     selection().length === 0 ||
-                    !selection().some((item) => local.itemDeleted?.(item) ?? false)
+                    !selection().some((item) => local.isItemDeleted?.(item) ?? false)
                   }
                 >
                   <Icon icon={IconTrashOff} class="mr-1" />
@@ -617,7 +601,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             totalPageCount={totalPageCount()}
             sorts={sorts()}
             onSortsChange={setSorts}
-            itemSelectable={local.itemSelectable}
+            isItemSelectable={local.isItemSelectable}
             selectionMode={
               isSelectMode()
                 ? local.selectionMode
@@ -627,7 +611,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             }
             selection={selection()}
             onSelectionChange={handleSelectionChange}
-            autoSelect={isSelectMode() && local.selectionMode === "single" ? "click" : undefined}
+            autoSelect={isSelectMode() && local.selectionMode === "single" ? true : undefined}
             cellClass={(item) => {
               if (isItemDeleted(item)) {
                 return "line-through";
@@ -648,7 +632,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   <div class="flex items-center justify-center px-1 py-0.5">
                     <Link
                       theme="danger"
-                      disabled={!(local.itemDeletable?.(dsCtx.item) ?? true)}
+                      disabled={!(local.isItemDeletable?.(dsCtx.item) ?? true)}
                       onClick={() => handleToggleDelete(dsCtx.item, dsCtx.index)}
                     >
                       <Icon icon={isItemDeleted(dsCtx.item) ? IconTrashOff : IconTrash} />
@@ -689,7 +673,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                       local.dialogEdit &&
                       (col.editTrigger ?? false) &&
                       canEdit() &&
-                      (local.itemEditable?.(dsCtx.item) ?? true)
+                      (local.isItemEditable?.(dsCtx.item) ?? true)
                     ) {
                       return (
                         <Link
@@ -720,7 +704,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                 {(dsCtx) => (
                   <div class={clsx(pad.default, "text-center")}>
                     {(
-                      objGetChainValue(dsCtx.item, local.lastModifiedAtProp!, true) as
+                      obj.getChainValue(dsCtx.item, local.lastModifiedAtProp!, true) as
                         | DateTime
                         | undefined
                     )?.toFormatString("yyyy-MM-dd HH:mm")}
@@ -733,7 +717,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
               <DataSheetColumn<TItem> key={local.lastModifiedByProp!} header={i18n.t("crudSheet.modifiedBy")} hidden>
                 {(dsCtx) => (
                   <div class={clsx(pad.default, "text-center")}>
-                    {objGetChainValue(dsCtx.item, local.lastModifiedByProp!, true) as string}
+                    {obj.getChainValue(dsCtx.item, local.lastModifiedByProp!, true) as string}
                   </div>
                 )}
               </DataSheetColumn>
@@ -763,7 +747,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 };
 
 //#region Export
-export const CrudSheet = Object.assign(CrudSheetBase as unknown as CrudSheetComponent, {
+export const CrudSheet = Object.assign(CrudSheetBase, {
   Column: CrudSheetColumn,
   Filter: CrudSheetFilter,
   Tools: CrudSheetTools,

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

@@ -1,6 +1,6 @@
 import type { JSX } from "solid-js";
-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 ──
 
@@ -12,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[];
@@ -64,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
 > &
@@ -74,7 +74,7 @@ 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,
@@ -83,10 +83,10 @@ interface CrudSheetBaseProps<TItem, TFilter extends Record<string, any>> {
   getItemKey: (item: TItem) => string | number | undefined;
   storageKey?: string;
   editable?: boolean;
-  itemEditable?: (item: TItem) => boolean;
-  itemDeletable?: (item: TItem) => boolean;
-  itemDeleted?: (item: TItem) => boolean;
-  itemSelectable?: (item: TItem) => boolean | string;
+  isItemEditable?: (item: TItem) => boolean;
+  isItemDeletable?: (item: TItem) => boolean;
+  isItemDeleted?: (item: TItem) => boolean;
+  isItemSelectable?: (item: TItem) => boolean | string;
   lastModifiedAtProp?: string;
   lastModifiedByProp?: string;
   filterInitial?: TFilter;

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

@@ -1,6 +1,6 @@
 import type { JSX } from "solid-js";
 import { createSlots } from "../../../helpers/createSlots";
-import type { CrudSheetColumnProps } from "./types";
+import type { CrudSheetColumnProps } from "./CrudSheet.types";
 
 const [SlotComponent, createCrudSheetColumnSlotsAccessor] = createSlots<CrudSheetColumnProps<any>>();
 

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

@@ -1,5 +1,5 @@
 import type { JSX } from "solid-js";
-import type { CrudSheetContext } from "./types";
+import type { CrudSheetContext } from "./CrudSheet.types";
 import { createSlot } from "../../../helpers/createSlot";
 
 export interface CrudSheetToolsSlotProps<TItem> {

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

@@ -79,8 +79,8 @@ export type DataSelectButtonProps<
   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>;
 
 const actionButtonClass = clsx(
@@ -113,7 +113,7 @@ export function DataSelectButton<
   TKey = string | number,
   TDialogProps extends SelectDialogBaseProps<TKey> = SelectDialogBaseProps<TKey>,
 >(props: DataSelectButtonProps<TItem, TKey, TDialogProps>): JSX.Element {
-  const [local] = splitProps(props as any, [
+  const [local] = splitProps(props, [
     "value",
     "onValueChange",
     "load",
@@ -127,8 +127,8 @@ export function DataSelectButton<
     "size",
     "inset",
     "validate",
-    "touchMode",
-  ]) as unknown as [typeof props];
+    "lazyValidation",
+  ]);
 
   const i18n = useI18n();
   const dialog = useDialog();
@@ -204,7 +204,7 @@ export function DataSelectButton<
       if (local.multiple) {
         setValue(newKeys);
       } else {
-        setValue((newKeys.length > 0 ? newKeys[0] : undefined) as any);
+        setValue(newKeys.length > 0 ? newKeys[0] : undefined);
       }
     }
   };
@@ -213,7 +213,7 @@ export function DataSelectButton<
   const handleClear = (e: MouseEvent) => {
     e.stopPropagation();
     if (local.multiple) {
-      setValue([] as unknown as TKey[]);
+      setValue([] as TKey[]);
     } else {
       setValue(undefined);
     }
@@ -250,7 +250,7 @@ export function DataSelectButton<
     });
 
   return (
-    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+    <Invalid message={errorMsg()} variant="border" lazyValidation={local.lazyValidation}>
       <div data-data-select-button class="group inline-flex items-center">
         <div
           role="combobox"

package/src/components/features/shared-data/SharedDataSelect.tsx

@@ -40,14 +40,15 @@ const Action: Component<ActionProps> = (props) => {
 /** SharedDataSelect Props */
 export type SharedDataSelectProps<
   TItem,
+  TKey extends string | number = string | number,
   TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps,
 > = {
   /** Shared data accessor */
   data: SharedDataAccessor<TItem>;
   /** Currently selected key value (translated to item internally) */
-  value?: unknown;
+  value?: TKey | TKey[];
   /** Value change callback (receives key, not item) */
-  onValueChange?: (value: unknown) => void;
+  onValueChange?: (value: TKey | TKey[] | undefined) => void;
   /** Multiple selection mode */
   multiple?: boolean;
   /** Required input */
@@ -68,34 +69,21 @@ export type SharedDataSelectProps<
   children: JSX.Element;
 } & DialogPropsField<TDialogProps>;
 
-interface SharedDataSelectComponent {
-  <TItem, TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps>(
-    props: SharedDataSelectProps<TItem, TDialogProps>,
-  ): JSX.Element;
-  ItemTemplate: typeof ItemTemplate;
-  Action: typeof Action;
-}
-
 const SharedDataSelectBase = <
   TItem,
+  TKey extends string | number = string | number,
   TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps,
 >(
-  props: SharedDataSelectProps<TItem, TDialogProps>,
+  props: SharedDataSelectProps<TItem, TKey, TDialogProps>,
 ): JSX.Element => {
-  const [local, rest] = splitProps(props as any, [
+  const [local, rest] = splitProps(props, [
     "data",
     "filterFn",
     "dialog",
     "dialogProps",
     "dialogOptions",
     "children",
-  ]) as unknown as [
-    typeof props,
-    Omit<
-      typeof props,
-      "data" | "filterFn" | "dialog" | "dialogProps" | "dialogOptions" | "children"
-    >,
-  ];
+  ]);
 
   const i18n = useI18n();
   const dialog = useDialog();
@@ -112,33 +100,33 @@ const SharedDataSelectBase = <
   });
 
   // Normalize value to keys array
-  const normalizeKeys = (value: unknown): (string | number)[] => {
+  const normalizeKeys = (value: TKey | TKey[] | undefined | null): TKey[] => {
     if (value === undefined || value === null) return [];
     if (Array.isArray(value)) return value;
-    return [value as string | number];
+    return [value];
   };
 
   // Translate key(s) to item(s) for Select's value prop
-  const keyToItem = (key: string | number): TItem | undefined => {
+  const keyToItem = (key: TKey): TItem | undefined => {
     return local.data.get(key);
   };
 
   const valueAsItem = createMemo((): TItem | TItem[] | undefined => {
-    const key = rest.value;
-    if (key === undefined || key === null) return undefined;
+    const key = rest.value as TKey | TKey[] | undefined;
+    if (key === undefined) return undefined;
     if (Array.isArray(key)) {
       return key
-        .map((k) => keyToItem(k as string | number))
+        .map((k) => keyToItem(k))
         .filter((v): v is TItem => v !== undefined);
     }
-    return keyToItem(key as string | number);
+    return keyToItem(key);
   });
 
   // Translate item back to key for onValueChange callback
-  const itemToKey = (item: TItem | TItem[] | undefined): unknown => {
+  const itemToKey = (item: TItem | TItem[] | undefined): TKey | TKey[] | undefined => {
     if (item === undefined || item === null) return undefined;
-    if (Array.isArray(item)) return item.map((i) => local.data.getKey(i));
-    return local.data.getKey(item);
+    if (Array.isArray(item)) return item.map((i) => local.data.getKey(i) as TKey);
+    return local.data.getKey(item) as TKey;
   };
 
   // Open dialog and handle selection result
@@ -153,7 +141,7 @@ const SharedDataSelectBase = <
         selectedKeys: normalizeKeys(rest.value),
       },
       local.dialogOptions,
-    )) as { selectedKeys: (string | number)[] } | undefined;
+    )) as { selectedKeys: TKey[] } | undefined;
 
     if (result) {
       const newKeys = result.selectedKeys;
@@ -191,7 +179,7 @@ const SharedDataSelectBase = <
     get isItemHidden() {
       return local.data.isItemHidden;
     },
-  }) as unknown as SelectProps;
+  }) as SelectProps<TItem>;
 
   return (
     <ItemTemplateProvider>
@@ -218,6 +206,7 @@ const SharedDataSelectBase = <
   );
 };
 
-export const SharedDataSelect: SharedDataSelectComponent = SharedDataSelectBase as any;
-SharedDataSelect.ItemTemplate = ItemTemplate;
-SharedDataSelect.Action = Action;
+export const SharedDataSelect = Object.assign(SharedDataSelectBase, {
+  ItemTemplate,
+  Action,
+});

package/src/components/features/shared-data/SharedDataSelectButton.tsx

@@ -44,10 +44,7 @@ export function SharedDataSelectButton<
 >(
   props: SharedDataSelectButtonProps<TItem, TDialogProps>,
 ): JSX.Element {
-  const [local, rest] = splitProps(props as any, ["data", "children"]) as unknown as [
-    Pick<typeof props, "data" | "children">,
-    Omit<typeof props, "data" | "children">,
-  ];
+  const [local, rest] = splitProps(props, ["data", "children"]);
 
   return (
     <DataSelectButton