@simplysm/solid 13.0.78 → 13.0.81

package/src/components/data/sheet/DataSheet.tsx

@@ -69,13 +69,13 @@ import {
   toolbarClass,
   trRowClass,
 } from "./DataSheet.styles";
-import { useDataSheetSorting } from "./hooks/useDataSheetSorting";
-import { useDataSheetPaging } from "./hooks/useDataSheetPaging";
-import { useDataSheetExpansion } from "./hooks/useDataSheetExpansion";
-import { useDataSheetSelection } from "./hooks/useDataSheetSelection";
-import { useDataSheetReorder } from "./hooks/useDataSheetReorder";
-import { useDataSheetFixedColumns } from "./hooks/useDataSheetFixedColumns";
-import { useDataSheetHeaderCell } from "./hooks/useDataSheetHeaderCell";
+import { createDataSheetSorting } from "./hooks/createDataSheetSorting";
+import { createDataSheetPaging } from "./hooks/createDataSheetPaging";
+import { createDataSheetExpansion } from "./hooks/createDataSheetExpansion";
+import { createDataSheetSelection } from "./hooks/createDataSheetSelection";
+import { createDataSheetReorder } from "./hooks/createDataSheetReorder";
+import { createDataSheetFixedColumns } from "./hooks/createDataSheetFixedColumns";
+import { createDataSheetHeaderCell } from "./hooks/createDataSheetHeaderCell";
 
 
 const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
@@ -221,7 +221,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
     toggleSort,
     sortIndex: sortIndex,
     sortedItems,
-  } = useDataSheetSorting<TItem>({
+  } = createDataSheetSorting<TItem>({
     sorts: () => local.sorts,
     onSortsChange: () => local.onSortsChange,
     items: () => local.items,
@@ -233,7 +233,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
   }
 
   // #region Paging
-  const { currentPage, setCurrentPage, pageCount, pagedItems } = useDataSheetPaging<TItem>({
+  const { currentPage, setCurrentPage, pageCount, pagedItems } = createDataSheetPaging<TItem>({
     page: () => local.page,
     onPageChange: () => local.onPageChange,
     pageSize: () => local.pageSize,
@@ -261,7 +261,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
     getFixedStyle,
     isLastFixed,
     registerColumnRef,
-  } = useDataSheetFixedColumns<TItem>(
+  } = createDataSheetFixedColumns<TItem>(
     {
       get itemChildren() { return local.itemChildren; },
       get selectionMode() { return local.selectionMode; },
@@ -357,7 +357,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
 
   // #region Expanding
   const { expandedItems, flatItems, toggleExpand, isAllExpanded, toggleExpandAll } =
-    useDataSheetExpansion<TItem>(
+    createDataSheetExpansion<TItem>(
       {
         get expandedItems() { return local.expandedItems; },
         get onExpandedItemsChange() { return local.onExpandedItemsChange; },
@@ -380,7 +380,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
     rangeSelect,
     lastClickedRow,
     setLastClickedRow,
-  } = useDataSheetSelection<TItem>(
+  } = createDataSheetSelection<TItem>(
     {
       get selectionMode() { return local.selectionMode; },
       get selection() { return local.selection; },
@@ -403,7 +403,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
   }
 
   // #region Reorder
-  const { dragState, onReorderPointerDown } = useDataSheetReorder<TItem>(
+  const { dragState, onReorderPointerDown } = createDataSheetReorder<TItem>(
     {
       get onItemsReorder() { return local.onItemsReorder; },
       get itemChildren() { return local.itemChildren; },
@@ -466,7 +466,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
 
   // #region Sub-render functions
 
-  const { renderHeaderCell } = useDataSheetHeaderCell({
+  const { renderHeaderCell } = createDataSheetHeaderCell({
     effectiveColumns,
     headerRowTops,
     getFixedStyle,
@@ -584,7 +584,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
             }
           >
             <Checkbox
-              value={isSelected()}
+              checked={isSelected()}
               disabled={selectable() !== true}
               inset
               class={twMerge(
@@ -783,7 +783,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
                       <Show when={local.selectionMode === "multiple"}>
                         <div class={featureCellClickableClass} onClick={() => toggleSelectAll()}>
                           <Checkbox
-                            value={(() => {
+                            checked={(() => {
                               const selectableItems = displayItems()
                                 .map((flat) => flat.item)
                                 .filter((item) => getItemSelectable(item) === true);

package/src/components/data/sheet/DataSheetConfigDialog.tsx

@@ -112,7 +112,7 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
           <DataSheet.Column<EditColumnItem>
             key="header"
             header={i18n.t("dataSheetConfigDialog.column")}
-            class={pad.default}
+            class={pad.md}
             sortable={false}
           >
             {(ctx) => ctx.item.headerText}
@@ -121,8 +121,8 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
             {(ctx) => (
               <Checkbox
                 inset
-                value={ctx.item.fixed}
-                onValueChange={(v) => updateItem(ctx.item.key, "fixed", v)}
+                checked={ctx.item.fixed}
+                onCheckedChange={(v) => updateItem(ctx.item.key, "fixed", v)}
               />
             )}
           </DataSheet.Column>
@@ -130,8 +130,8 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
             {(ctx) => (
               <Checkbox
                 inset
-                value={ctx.item.hidden}
-                onValueChange={(v) => updateItem(ctx.item.key, "hidden", v)}
+                checked={ctx.item.hidden}
+                onCheckedChange={(v) => updateItem(ctx.item.key, "hidden", v)}
               />
             )}
           </DataSheet.Column>

package/src/components/data/sheet/hooks/{useDataSheetExpansion.ts → createDataSheetExpansion.ts}

@@ -3,13 +3,13 @@ import type { FlatItem } from "../DataSheet.types";
 import { collectAllExpandable, flattenTree } from "../DataSheet.utils";
 import { createControllableSignal } from "../../../../hooks/createControllableSignal";
 
-export interface UseDataSheetExpansionProps<TItem> {
+export interface CreateDataSheetExpansionProps<TItem> {
   expandedItems?: TItem[];
   onExpandedItemsChange?: (items: TItem[]) => void;
   itemChildren?: (item: TItem, index: number) => TItem[] | undefined;
 }
 
-export interface UseDataSheetExpansionReturn<TItem> {
+export interface CreateDataSheetExpansionReturn<TItem> {
   expandedItems: Accessor<TItem[]>;
   setExpandedItems: (newValue: TItem[] | ((prev: TItem[]) => TItem[])) => TItem[];
   flatItems: Accessor<FlatItem<TItem>[]>;
@@ -18,11 +18,11 @@ export interface UseDataSheetExpansionReturn<TItem> {
   toggleExpandAll: () => void;
 }
 
-export function useDataSheetExpansion<TItem>(
-  props: UseDataSheetExpansionProps<TItem>,
+export function createDataSheetExpansion<TItem>(
+  props: CreateDataSheetExpansionProps<TItem>,
   pagedItems: Accessor<TItem[]>,
   originalIndexMap: Accessor<Map<TItem, number>>,
-): UseDataSheetExpansionReturn<TItem> {
+): CreateDataSheetExpansionReturn<TItem> {
   const [expandedItems, setExpandedItems] = createControllableSignal({
     value: () => props.expandedItems ?? [],
     onChange: () => props.onExpandedItemsChange,

package/src/components/data/sheet/hooks/{useDataSheetFixedColumns.ts → createDataSheetFixedColumns.ts}

@@ -2,14 +2,14 @@ import { createMemo, createSignal, type Accessor } from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
 import type { DataSheetColumnDef, DataSheetReorderEvent } from "../DataSheet.types";
 
-export interface UseDataSheetFixedColumnsProps<TItem> {
+export interface CreateDataSheetFixedColumnsProps<TItem> {
   itemChildren?: (item: TItem, index: number) => TItem[] | undefined;
   selectionMode?: "single" | "multiple";
   onItemsReorder?: (event: DataSheetReorderEvent<TItem>) => void;
 }
 
-export function useDataSheetFixedColumns<TItem>(
-  props: UseDataSheetFixedColumnsProps<TItem>,
+export function createDataSheetFixedColumns<TItem>(
+  props: CreateDataSheetFixedColumnsProps<TItem>,
   effectiveColumns: Accessor<DataSheetColumnDef<TItem>[]>
 ) {
   // Feature column presence checks

package/src/components/data/sheet/hooks/{useDataSheetHeaderCell.tsx → createDataSheetHeaderCell.tsx}

@@ -6,7 +6,7 @@ import { Icon } from "../../../display/Icon";
 import { IconArrowsSort, IconSortAscending, IconSortDescending } from "@tabler/icons-solidjs";
 import type { HeaderDef, DataSheetColumnDef } from "../DataSheet.types";
 
-export interface UseDataSheetHeaderCellProps<TItem> {
+export interface CreateDataSheetHeaderCellProps<TItem> {
   effectiveColumns: () => DataSheetColumnDef<TItem>[];
   headerRowTops: () => number[];
   getFixedStyle: (colIndex: number) => string | undefined;
@@ -26,7 +26,7 @@ export interface UseDataSheetHeaderCellProps<TItem> {
   sortIconClass: string;
 }
 
-export function useDataSheetHeaderCell<TItem>(props: UseDataSheetHeaderCellProps<TItem>) {
+export function createDataSheetHeaderCell<TItem>(props: CreateDataSheetHeaderCellProps<TItem>) {
   function renderHeaderCell(header: HeaderDef, colIndex: number, rowIndex: number): JSX.Element {
     const isSortable = () =>
       header.isLastRow &&

package/src/components/data/sheet/hooks/{useDataSheetPaging.ts → createDataSheetPaging.ts}

@@ -1,7 +1,7 @@
 import { createMemo, type Accessor } from "solid-js";
 import { createControllableSignal } from "../../../../hooks/createControllableSignal";
 
-export interface UseDataSheetPagingOptions<TItem> {
+export interface CreateDataSheetPagingOptions<TItem> {
   page: Accessor<number | undefined>;
   onPageChange: Accessor<((page: number) => void) | undefined>;
   pageSize: Accessor<number | undefined>;
@@ -10,16 +10,16 @@ export interface UseDataSheetPagingOptions<TItem> {
   sortedItems: Accessor<TItem[]>;
 }
 
-export interface UseDataSheetPagingReturn<TItem> {
+export interface CreateDataSheetPagingReturn<TItem> {
   currentPage: Accessor<number>;
   setCurrentPage: (newValue: number | ((prev: number) => number)) => number;
   pageCount: Accessor<number>;
   pagedItems: Accessor<TItem[]>;
 }
 
-export function useDataSheetPaging<TItem>(
-  options: UseDataSheetPagingOptions<TItem>,
-): UseDataSheetPagingReturn<TItem> {
+export function createDataSheetPaging<TItem>(
+  options: CreateDataSheetPagingOptions<TItem>,
+): CreateDataSheetPagingReturn<TItem> {
   const [currentPage, setCurrentPage] = createControllableSignal({
     value: () => options.page() ?? 1,
     onChange: () => options.onPageChange(),

package/src/components/data/sheet/hooks/{useDataSheetReorder.ts → createDataSheetReorder.ts}

@@ -2,13 +2,13 @@ import { createSignal, type Accessor } from "solid-js";
 import { startPointerDrag } from "../../../../helpers/startPointerDrag";
 import type { DataSheetReorderEvent, FlatItem } from "../DataSheet.types";
 
-export interface UseDataSheetReorderProps<TItem> {
+export interface CreateDataSheetReorderProps<TItem> {
   onItemsReorder?: (event: DataSheetReorderEvent<TItem>) => void;
   itemChildren?: (item: TItem, index: number) => TItem[] | undefined;
 }
 
-export function useDataSheetReorder<TItem>(
-  props: UseDataSheetReorderProps<TItem>,
+export function createDataSheetReorder<TItem>(
+  props: CreateDataSheetReorderProps<TItem>,
   displayItems: Accessor<FlatItem<TItem>[]>
 ) {
   const [dragState, setDragState] = createSignal<{

package/src/components/data/sheet/hooks/{useDataSheetSelection.ts → createDataSheetSelection.ts}

@@ -2,14 +2,14 @@ import { createSignal, type Accessor } from "solid-js";
 import type { FlatItem } from "../DataSheet.types";
 import { createControllableSignal } from "../../../../hooks/createControllableSignal";
 
-export interface UseDataSheetSelectionProps<TItem> {
+export interface CreateDataSheetSelectionProps<TItem> {
   selectionMode?: "single" | "multiple";
   selection?: TItem[];
   onSelectionChange?: (items: TItem[]) => void;
   isItemSelectable?: (item: TItem) => boolean | string;
 }
 
-export interface UseDataSheetSelectionReturn<TItem> {
+export interface CreateDataSheetSelectionReturn<TItem> {
   selection: Accessor<TItem[]>;
   setSelection: (newValue: TItem[] | ((prev: TItem[]) => TItem[])) => TItem[];
   getItemSelectable: (item: TItem) => boolean | string;
@@ -22,10 +22,10 @@ export interface UseDataSheetSelectionReturn<TItem> {
   setLastClickAction: (value: "select" | "deselect") => void;
 }
 
-export function useDataSheetSelection<TItem>(
-  props: UseDataSheetSelectionProps<TItem>,
+export function createDataSheetSelection<TItem>(
+  props: CreateDataSheetSelectionProps<TItem>,
   displayItems: Accessor<FlatItem<TItem>[]>,
-): UseDataSheetSelectionReturn<TItem> {
+): CreateDataSheetSelectionReturn<TItem> {
   const [selection, setSelection] = createControllableSignal({
     value: () => props.selection ?? [],
     onChange: () => props.onSelectionChange,

package/src/components/data/sheet/hooks/{useDataSheetSorting.ts → createDataSheetSorting.ts}

@@ -3,14 +3,14 @@ import { createControllableSignal } from "../../../../hooks/createControllableSi
 import { applySorting } from "../DataSheet.utils";
 import type { SortingDef } from "../DataSheet.types";
 
-export interface UseDataSheetSortingOptions<TItem> {
+export interface CreateDataSheetSortingOptions<TItem> {
   sorts: Accessor<SortingDef[] | undefined>;
   onSortsChange: Accessor<((sorts: SortingDef[]) => void) | undefined>;
   items: Accessor<TItem[] | undefined>;
   autoSort: Accessor<boolean | undefined>;
 }
 
-export interface UseDataSheetSortingReturn<TItem> {
+export interface CreateDataSheetSortingReturn<TItem> {
   sorts: Accessor<SortingDef[]>;
   setSorts: (newValue: SortingDef[] | ((prev: SortingDef[]) => SortingDef[])) => SortingDef[];
   toggleSort: (key: string, multiple: boolean) => void;
@@ -18,9 +18,9 @@ export interface UseDataSheetSortingReturn<TItem> {
   sortedItems: Accessor<TItem[]>;
 }
 
-export function useDataSheetSorting<TItem>(
-  options: UseDataSheetSortingOptions<TItem>,
-): UseDataSheetSortingReturn<TItem> {
+export function createDataSheetSorting<TItem>(
+  options: CreateDataSheetSortingOptions<TItem>,
+): CreateDataSheetSortingReturn<TItem> {
   const [sorts, setSorts] = createControllableSignal({
     value: () => options.sorts() ?? [],
     onChange: () => options.onSortsChange(),

package/src/components/disclosure/Dialog.tsx

@@ -46,7 +46,7 @@ export interface DialogShowOptions {
   /** Dialog header */
   header?: JSX.Element;
   /** Show close button */
-  closable?: boolean;
+  withCloseButton?: boolean;
   /** Close on backdrop click */
   closeOnInteractOutside?: boolean;
   /** Close on ESC key */
@@ -112,7 +112,7 @@ export interface DialogProps {
   /** Callback when open state changes */
   onOpenChange?: (open: boolean) => void;
   /** Show close button (default: true) */
-  closable?: boolean;
+  withCloseButton?: boolean;
   /** Close on backdrop click */
   closeOnInteractOutside?: boolean;
   /** Close on Escape key (default: true) */
@@ -210,7 +210,7 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
   const [local] = splitProps(props, [
     "open",
     "onOpenChange",
-    "closable",
+    "withCloseButton",
     "closeOnInteractOutside",
     "closeOnEscape",
     "resizable",
@@ -575,7 +575,7 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
                     {header()!.children}
                   </h5>
                   <Show when={action()}>{action()!.children}</Show>
-                  <Show when={local.closable ?? true}>
+                  <Show when={local.withCloseButton ?? true}>
                     <Button
                       data-dialog-close
                       size={"sm"}
@@ -726,7 +726,7 @@ export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
                 }
               }}
               onCloseComplete={() => removeEntry(entry.id)}
-              closable={entry.options.closable}
+              withCloseButton={entry.options.withCloseButton}
               closeOnInteractOutside={entry.options.closeOnInteractOutside}
               closeOnEscape={entry.options.closeOnEscape}
               resizable={entry.options.resizable}

package/src/components/disclosure/Tabs.tsx

@@ -32,14 +32,14 @@ function TabsTabInner(props: TabsTabProps) {
   const isSelected = () => ctx.value() === props.value;
 
   const tabSizeClasses: Record<ComponentSize, string> = {
-    default: "px-3 py-1.5 text-sm",
+    md: "px-3 py-1.5 text-sm",
     xs: clsx(pad.sm, "text-xs"),
     sm: "px-2.5 py-1 text-sm",
     lg: "px-4 py-2.5 text-base",
     xl: "px-5 py-3 text-lg",
   };
 
-  const sizeClasses = () => tabSizeClasses[ctx.size() ?? "default"];
+  const sizeClasses = () => tabSizeClasses[ctx.size() ?? "md"];
 
   const stateClass = () =>
     isSelected()
@@ -123,7 +123,7 @@ const TabsInner: ParentComponent<TabsProps> = (props) => {
 
   return (
     <TabsContext.Provider value={contextValue}>
-      <div {...rest} role="tablist" class={twMerge(clsx("inline-flex items-center", gap.default, "border-b", border.default), local.class)} style={local.style}>
+      <div {...rest} role="tablist" class={twMerge(clsx("inline-flex items-center", gap.md, "border-b", border.default), local.class)} style={local.style}>
         {local.children}
       </div>
     </TabsContext.Provider>

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

@@ -677,7 +677,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, unknown>>(
                     ) {
                       return (
                         <Link
-                          class={clsx("flex", gap.default)}
+                          class={clsx("flex", gap.md)}
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -702,7 +702,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, unknown>>(
             <Show when={local.lastModifiedAtProp}>
               <DataSheetColumn<TItem> key={local.lastModifiedAtProp!} header={i18n.t("crudSheet.lastModified")} hidden>
                 {(dsCtx) => (
-                  <div class={clsx(pad.default, "text-center")}>
+                  <div class={clsx(pad.md, "text-center")}>
                     {(
                       obj.getChainValue(dsCtx.item, local.lastModifiedAtProp!, true) as
                         | DateTime
@@ -716,7 +716,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, unknown>>(
             <Show when={local.lastModifiedByProp}>
               <DataSheetColumn<TItem> key={local.lastModifiedByProp!} header={i18n.t("crudSheet.modifiedBy")} hidden>
                 {(dsCtx) => (
-                  <div class={clsx(pad.default, "text-center")}>
+                  <div class={clsx(pad.md, "text-center")}>
                     {obj.getChainValue(dsCtx.item, local.lastModifiedByProp!, true) as string}
                   </div>
                 )}

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

@@ -49,16 +49,12 @@ export type DialogPropsField<P, TKey = string | number> =
     ? { dialogProps?: UserDialogProps<P, TKey> }
     : { dialogProps: UserDialogProps<P, TKey> };
 
-/** DataSelectButton Props */
-export type DataSelectButtonProps<
+/** Common props shared between single and multiple modes */
+interface DataSelectButtonCommonProps<
   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[]>;
   /** Item rendering function */
@@ -67,8 +63,6 @@ export type DataSelectButtonProps<
   dialog: Component<TDialogProps>;
   /** Dialog options (header, size, etc.) */
   dialogOptions?: DialogShowOptions;
-  /** Multiple selection mode */
-  multiple?: boolean;
   /** Required input */
   required?: boolean;
   /** Disabled */
@@ -81,7 +75,44 @@ export type DataSelectButtonProps<
   validate?: (value: unknown) => string | undefined;
   /** lazyValidation: show error only after focus is lost */
   lazyValidation?: boolean;
-} & DialogPropsField<TDialogProps, TKey>;
+}
+
+/** Single select props */
+interface DataSelectButtonSingleProps<
+  TItem,
+  TKey = string | number,
+  TDialogProps extends SelectDialogBaseProps<TKey> = SelectDialogBaseProps<TKey>,
+> extends DataSelectButtonCommonProps<TItem, TKey, TDialogProps> {
+  /** Single select mode */
+  multiple?: false;
+  /** Currently selected key */
+  value?: TKey;
+  /** Value change callback */
+  onValueChange?: (value: TKey | undefined) => void;
+}
+
+/** Multiple select props */
+interface DataSelectButtonMultipleProps<
+  TItem,
+  TKey = string | number,
+  TDialogProps extends SelectDialogBaseProps<TKey> = SelectDialogBaseProps<TKey>,
+> extends DataSelectButtonCommonProps<TItem, TKey, TDialogProps> {
+  /** Multiple select mode */
+  multiple: true;
+  /** Currently selected keys */
+  value?: TKey[];
+  /** Value change callback */
+  onValueChange?: (value: TKey[]) => void;
+}
+
+/** DataSelectButton Props */
+export type DataSelectButtonProps<
+  TItem,
+  TKey = string | number,
+  TDialogProps extends SelectDialogBaseProps<TKey> = SelectDialogBaseProps<TKey>,
+> =
+  | (DataSelectButtonSingleProps<TItem, TKey, TDialogProps> & DialogPropsField<TDialogProps, TKey>)
+  | (DataSelectButtonMultipleProps<TItem, TKey, TDialogProps> & DialogPropsField<TDialogProps, TKey>);
 
 const actionButtonClass = clsx(
   "flex-shrink-0",
@@ -101,7 +132,7 @@ function getTriggerContainerClass(options: {
 }): string {
   return twMerge(
     triggerBaseClass,
-    triggerSizeClasses[options.size ?? "default"],
+    triggerSizeClasses[options.size ?? "md"],
     options.disabled && triggerDisabledClass,
     options.inset && triggerInsetClass,
     options.class,

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

@@ -294,8 +294,8 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
               return (
                 <Show when={hasPermInTree(item, perm)}>
                   <Checkbox
-                    value={isGroupPermChecked(item, perm, currentValue())}
-                    onValueChange={(checked) => handlePermChange(item, perm, checked)}
+                    checked={isGroupPermChecked(item, perm, currentValue())}
+                    onCheckedChange={(checked) => handlePermChange(item, perm, checked)}
                     disabled={local.disabled || isPermDisabled(item, perm, currentValue())}
                     inset
                   />

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

@@ -37,20 +37,14 @@ const Action: Component<ActionProps> = (props) => {
   return ActionSlot(props);
 };
 
-/** SharedDataSelect Props */
-export type SharedDataSelectProps<
+/** Common props shared between single and multiple modes */
+interface SharedDataSelectCommonProps<
   TItem,
-  TKey extends string | number = string | number,
+  _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?: TKey | TKey[];
-  /** Value change callback (receives key, not item) */
-  onValueChange?: (value: TKey | TKey[] | undefined) => void;
-  /** Multiple selection mode */
-  multiple?: boolean;
   /** Required input */
   required?: boolean;
   /** Disabled */
@@ -67,7 +61,44 @@ export type SharedDataSelectProps<
   dialogOptions?: DialogShowOptions;
   /** Compound children: ItemTemplate, Action */
   children: JSX.Element;
-} & DialogPropsField<TDialogProps>;
+}
+
+/** Single select props */
+interface SharedDataSelectSingleProps<
+  TItem,
+  TKey extends string | number = string | number,
+  TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps,
+> extends SharedDataSelectCommonProps<TItem, TKey, TDialogProps> {
+  /** Single select mode */
+  multiple?: false;
+  /** Currently selected key value */
+  value?: TKey;
+  /** Value change callback */
+  onValueChange?: (value: TKey | undefined) => void;
+}
+
+/** Multiple select props */
+interface SharedDataSelectMultipleProps<
+  TItem,
+  TKey extends string | number = string | number,
+  TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps,
+> extends SharedDataSelectCommonProps<TItem, TKey, TDialogProps> {
+  /** Multiple select mode */
+  multiple: true;
+  /** Currently selected key values */
+  value?: TKey[];
+  /** Value change callback */
+  onValueChange?: (value: TKey[]) => void;
+}
+
+/** SharedDataSelect Props */
+export type SharedDataSelectProps<
+  TItem,
+  TKey extends string | number = string | number,
+  TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps,
+> =
+  | (SharedDataSelectSingleProps<TItem, TKey, TDialogProps> & DialogPropsField<TDialogProps>)
+  | (SharedDataSelectMultipleProps<TItem, TKey, TDialogProps> & DialogPropsField<TDialogProps>);
 
 const SharedDataSelectBase = <
   TItem,
@@ -146,9 +177,9 @@ const SharedDataSelectBase = <
     if (result) {
       const newKeys = result.selectedKeys;
       if (rest.multiple) {
-        rest.onValueChange?.(newKeys);
+        (rest.onValueChange as ((value: TKey[]) => void) | undefined)?.(newKeys);
       } else {
-        rest.onValueChange?.(newKeys.length > 0 ? newKeys[0] : undefined);
+        (rest.onValueChange as ((value: TKey | undefined) => void) | undefined)?.(newKeys.length > 0 ? newKeys[0] : undefined);
       }
     }
   };
@@ -160,7 +191,7 @@ const SharedDataSelectBase = <
     get onValueChange() {
       if (!rest.onValueChange) return undefined;
       return (item: TItem | TItem[] | undefined) => {
-        rest.onValueChange!(itemToKey(item));
+        (rest.onValueChange as (value: any) => void)(itemToKey(item));
       };
     },
     get items() {