@simplysm/solid 13.0.84 → 13.0.86

package/src/components/data/sheet/hooks/createDataSheetSelection.ts

@@ -57,7 +57,8 @@ export function createDataSheetSelection<TItem>(
     const selectableItems = displayItems()
       .map((flat) => flat.item)
       .filter((item) => getItemSelectable(item) === true);
-    const isAllSelected = selectableItems.every((item) => selection().includes(item));
+    const selectionSet = new Set(selection());
+    const isAllSelected = selectableItems.every((item) => selectionSet.has(item));
     setSelection(isAllSelected ? [] : selectableItems);
   }
 
@@ -74,13 +75,18 @@ export function createDataSheetSelection<TItem>(
       .filter((item) => getItemSelectable(item) === true);
 
     if (lastClickAction() === "select") {
+      const selectionSet = new Set(selection());
       const newItems = [...selection()];
       for (const item of rangeItems) {
-        if (!newItems.includes(item)) newItems.push(item);
+        if (!selectionSet.has(item)) {
+          newItems.push(item);
+          selectionSet.add(item);
+        }
       }
       setSelection(newItems);
     } else {
-      setSelection(selection().filter((item) => !rangeItems.includes(item)));
+      const rangeSet = new Set(rangeItems);
+      setSelection(selection().filter((item) => !rangeSet.has(item)));
     }
   }
 

package/src/components/disclosure/Dialog.tsx

@@ -478,70 +478,38 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
     return style;
   };
 
-  // Animation class
-  const animationClass = () => {
-    const base = clsx("transition-[opacity,transform]", "duration-200", "ease-out");
-    if (animating()) {
-      return clsx(base, "translate-y-0 opacity-100");
-    } else {
-      return clsx(base, "-translate-y-4 opacity-0");
-    }
-  };
-
-  // Wrapper class
-  const wrapperClass = () =>
-    // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0 not supported in Chrome 84
-    clsx(
-      "fixed bottom-0 left-0 right-0 top-0",
-      "flex flex-col items-center",
-      local.mode !== "fill" && "pt-[calc(3rem+0.5rem)]",
-      local.mode === "float" && "pointer-events-none",
-    );
-
-  // Backdrop class
-  const backdropClass = () =>
-    // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0 not supported in Chrome 84
-    clsx(
-      "absolute bottom-0 left-0 right-0 top-0",
-      "bg-black/30",
-      "dark:bg-black/50",
-      "transition-opacity",
-      "duration-200",
-      "ease-out",
-      animating() ? "opacity-100" : "opacity-0",
-    );
-
-  // Dialog class
-  const dialogBaseClass = () =>
-    clsx(
-      "relative",
-      "mx-auto",
-      "w-fit min-w-[200px]",
-      bg.surface,
-      local.mode === "float"
-        ? clsx("shadow-md dark:shadow-black/30", "border", border.subtle)
-        : "shadow-2xl dark:shadow-black/40",
-      local.mode === "fill" ? "rounded-none border-none" : "rounded-lg",
-      "overflow-hidden",
-      "flex flex-col",
-      "focus:outline-none",
-      local.mode === "float" && "pointer-events-auto",
-      animationClass(),
-    );
-
-  // Header class
-  const headerClass = () =>
-    clsx("flex items-center gap-2", "px-3 py-1", "select-none", "border-b", border.subtle);
-
   return (
     <Show when={mounted()}>
       <Portal>
         <HeaderProvider>
           <ActionProvider>
-          <div ref={setWrapperRef} data-dialog class={wrapperClass()}>
+          <div
+            ref={setWrapperRef}
+            data-dialog
+            // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0 not supported in Chrome 84
+            class={clsx(
+              "fixed bottom-0 left-0 right-0 top-0",
+              "flex flex-col items-center",
+              local.mode !== "fill" && "pt-[calc(3rem+0.5rem)]",
+              local.mode === "float" && "pointer-events-none",
+            )}
+          >
             {/* Backdrop */}
             <Show when={local.mode !== "float"}>
-              <div data-dialog-backdrop class={backdropClass()} onClick={handleBackdropClick} />
+              <div
+                data-dialog-backdrop
+                // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0 not supported in Chrome 84
+                class={clsx(
+                  "absolute bottom-0 left-0 right-0 top-0",
+                  "bg-black/30",
+                  "dark:bg-black/50",
+                  "transition-opacity",
+                  "duration-200",
+                  "ease-out",
+                  animating() ? "opacity-100" : "opacity-0",
+                )}
+                onClick={handleBackdropClick}
+              />
             </Show>
 
             {/* Dialog */}
@@ -554,7 +522,25 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
               aria-modal={local.mode === "float" ? undefined : true}
               aria-labelledby={hasHeader() ? headerId : undefined}
               tabIndex={0}
-              class={twMerge(dialogBaseClass(), local.class)}
+              class={twMerge(
+                clsx(
+                  "relative",
+                  "mx-auto",
+                  "w-fit min-w-[200px]",
+                  bg.surface,
+                  local.mode === "float"
+                    ? clsx("shadow-md dark:shadow-black/30", "border", border.subtle)
+                    : "shadow-2xl dark:shadow-black/40",
+                  local.mode === "fill" ? "rounded-none border-none" : "rounded-lg",
+                  "overflow-hidden",
+                  "flex flex-col",
+                  "focus:outline-none",
+                  local.mode === "float" && "pointer-events-auto",
+                  "transition-[opacity,transform] duration-200 ease-out",
+                  animating() ? "translate-y-0 opacity-100" : "-translate-y-4 opacity-0",
+                ),
+                local.class,
+              )}
               style={dialogStyle()}
               onFocus={handleDialogFocus}
               onTransitionEnd={handleTransitionEnd}
@@ -563,7 +549,7 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
               <Show when={hasHeader()}>
                 <div
                   data-dialog-header
-                  class={clsx(headerClass(), "touch-none")}
+                  class={clsx("flex items-center gap-2", "px-3 py-1", "select-none", "border-b", border.subtle, "touch-none")}
                   style={
                     typeof local.headerStyle === "string"
                       ? mergeStyles(local.headerStyle)

package/src/components/disclosure/Dropdown.tsx

@@ -402,19 +402,6 @@ const DropdownInner: ParentComponent<DropdownProps> = (props: DropdownProps) =>
 
   const maxHeight = () => local.maxHeight ?? 300;
 
-  // Animation class (only transition opacity and transform, not position properties)
-  const animationClass = () => {
-    const base = "transition-[opacity,transform] duration-150 ease-out";
-    const visible = animating();
-    const dir = direction();
-
-    if (visible) {
-      return clsx(base, "translate-y-0 opacity-100");
-    } else {
-      return clsx(base, "opacity-0", dir === "down" ? "-translate-y-1" : "translate-y-1");
-    }
-  };
-
   return (
     <TriggerProvider>
       <ContentProvider>
@@ -452,7 +439,10 @@ const DropdownInner: ParentComponent<DropdownProps> = (props: DropdownProps) =>
                   "shadow-lg dark:shadow-black/30",
                   "rounded-md",
                   "overflow-y-auto",
-                  animationClass(),
+                  "transition-[opacity,transform] duration-150 ease-out",
+                  animating()
+                    ? "translate-y-0 opacity-100"
+                    : clsx("opacity-0", direction() === "down" ? "-translate-y-1" : "translate-y-1"),
                 ),
                 local.class,
               )}

package/src/components/disclosure/Tabs.tsx

@@ -39,21 +39,6 @@ function TabsTabInner(props: TabsTabProps) {
     xl: "px-5 py-3 text-lg",
   };
 
-  const sizeClasses = () => tabSizeClasses[ctx.size() ?? "md"];
-
-  const stateClass = () =>
-    isSelected()
-      ? clsx(
-          "border-b-2 border-primary-500 dark:border-primary-400",
-          themeTokens.primary.text,
-        )
-      : clsx(
-          "border-b-2 border-transparent",
-          text.muted,
-          "hover:border-base-300 hover:text-base-700",
-          "dark:hover:border-base-600 dark:hover:text-base-200",
-        );
-
   return (
     <button
       type="button"
@@ -63,8 +48,18 @@ function TabsTabInner(props: TabsTabProps) {
       tabIndex={props.disabled ? -1 : 0}
       class={twMerge(
         "relative cursor-pointer select-none font-medium transition-colors -mb-px",
-        sizeClasses(),
-        stateClass(),
+        tabSizeClasses[ctx.size() ?? "md"],
+        isSelected()
+          ? clsx(
+              "border-b-2 border-primary-500 dark:border-primary-400",
+              themeTokens.primary.text,
+            )
+          : clsx(
+              "border-b-2 border-transparent",
+              text.muted,
+              "hover:border-base-300 hover:text-base-700",
+              "dark:hover:border-base-600 dark:hover:text-base-200",
+            ),
         props.disabled && "opacity-50 pointer-events-none",
         props.class,
       )}

package/src/components/features/crud-detail/CrudDetail.tsx

@@ -201,7 +201,6 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
       <>
         <Show when={showSave()}>
           <Button
-            size="lg"
             variant="ghost"
             theme="primary"
             onClick={() => formRef?.requestSubmit()}
@@ -213,7 +212,6 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         <Show when={showDelete()}>
           {(_) => (
             <Button
-              size="lg"
               variant="ghost"
               theme="danger"
               onClick={() => void handleToggleDelete()}
@@ -223,7 +221,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
             </Button>
           )}
         </Show>
-        <Button size="lg" variant="ghost" theme="info" onClick={() => void handleRefresh()}>
+        <Button variant="ghost" theme="info" onClick={() => void handleRefresh()}>
           <Icon icon={IconRefresh} class="mr-1" />
           {i18n.t("crudDetail.refresh")}
         </Button>
@@ -259,8 +257,9 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
           <BusyContainer
             ready={ready()}
             busy={busyCount() > 0}
-            class={clsx("flex h-full flex-col gap-2", local.class)}
+            class={clsx("flex h-full flex-col", local.class)}
           >
+            <div class="flex min-h-0 flex-1 flex-col gap-2">
             {/* Toolbar */}
             <Show when={(!isInDialog && !topbarCtx) || tools()}>
               <div class="flex gap-2 pb-0">
@@ -318,6 +317,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
 
             {/* After (outside form) */}
             <Show when={after()}>{(afterSlot) => afterSlot().children}</Show>
+            </div>
 
             {/* Dialog mode: bottom bar */}
             <Show when={isInDialog && canEdit()}>

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

@@ -348,6 +348,14 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, unknown>>(
 
     setSelectedKeys(merged);
     setSelection(newSelection);
+
+    // Auto-confirm for single selection mode in dialog
+    if (isInDialog && local.selectionMode === "single" && newSelection.length > 0) {
+      local.onSelect?.({
+        items: newSelection,
+        keys: [...merged],
+      });
+    }
   }
 
   function clearSelection() {
@@ -369,13 +377,13 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, unknown>>(
 
   // -- Keyboard Shortcuts --
   createEventListener(document, "keydown", async (e: KeyboardEvent) => {
-    if (!isActiveCrud(crudId)) return;
-    if (e.ctrlKey && e.key === "s" && !isSelectMode()) {
+    if (!e.ctrlKey || !isActiveCrud(crudId)) return;
+    if (e.key === "s" && !isSelectMode()) {
       e.preventDefault();
       e.stopImmediatePropagation();
       formRef?.requestSubmit();
     }
-    if (e.ctrlKey && e.altKey && e.key === "l") {
+    if (e.altKey && e.key === "l") {
       e.preventDefault();
       e.stopImmediatePropagation();
       if (!checkIgnoreChanges()) return;
@@ -402,7 +410,6 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, unknown>>(
       <>
         <Show when={canEdit() && local.inlineEdit}>
           <Button
-            size="lg"
             variant="ghost"
             theme="primary"
             onClick={() => formRef?.requestSubmit()}
@@ -411,7 +418,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, unknown>>(
             {i18n.t("crudSheet.save")}
           </Button>
         </Show>
-        <Button size="lg" variant="ghost" theme="info" onClick={handleRefresh}>
+        <Button variant="ghost" theme="info" onClick={handleRefresh}>
           <Icon icon={IconRefresh} class="mr-1" />
           {i18n.t("crudSheet.refresh")}
         </Button>

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

@@ -149,7 +149,6 @@ export function DataSelectButton<
     "onValueChange",
     "load",
     "dialog",
-    "dialogProps",
     "dialogOptions",
     "renderItem",
     "multiple",
@@ -174,9 +173,9 @@ export function DataSelectButton<
   // Controlled/uncontrolled pattern
   type ValueType = TKey | TKey[] | undefined;
   const [getValue, setValue] = createControllableSignal<ValueType>({
-    value: () => local.value,
+    value: () => local.value as ValueType,
     onChange: () => local.onValueChange as ((v: ValueType) => void) | undefined,
-  } as Parameters<typeof createControllableSignal<ValueType>>[0]);
+  });
 
   // Track keys for loading
   const [loadKeys, setLoadKeys] = createSignal<TKey[]>(normalizeKeys(local.value));
@@ -216,27 +215,38 @@ export function DataSelectButton<
     return local.validate?.(v);
   });
 
+  // Dialog open state for aria-expanded
+  const [isDialogOpen, setIsDialogOpen] = createSignal(false);
+
   // Open dialog
   const handleOpenDialog = async () => {
     if (local.disabled) return;
 
-    const result = (await dialog.show(
-      local.dialog,
-      {
-        ...((local as any).dialogProps ?? {}),
+    setIsDialogOpen(true);
+    try {
+      const dialogProps =
+        (props as { dialogProps?: Record<string, unknown> }).dialogProps ?? {};
+      const showProps = {
+        ...dialogProps,
         selectionMode: local.multiple ? "multiple" : "single",
         selectedKeys: normalizeKeys(getValue()) as (string | number)[],
-      },
-      local.dialogOptions,
-    )) as DataSelectDialogResult<TKey> | undefined;
+      } as Omit<TDialogProps, "close">;
+      const result = (await dialog.show(
+        local.dialog as Component<SelectDialogBaseProps<TKey>>,
+        showProps as Omit<SelectDialogBaseProps<TKey>, "close">,
+        local.dialogOptions,
+      ));
 
-    if (result) {
-      const newKeys = result.selectedKeys;
-      if (local.multiple) {
-        setValue(newKeys);
-      } else {
-        setValue(newKeys.length > 0 ? newKeys[0] : undefined);
+      if (result) {
+        const newKeys = result.selectedKeys;
+        if (local.multiple) {
+          setValue(newKeys);
+        } else {
+          setValue(newKeys.length > 0 ? newKeys[0] : undefined);
+        }
       }
+    } finally {
+      setIsDialogOpen(false);
     }
   };
 
@@ -283,23 +293,17 @@ export function DataSelectButton<
   return (
     <Invalid message={errorMsg()} variant="border" lazyValidation={local.lazyValidation}>
       <div data-data-select-button class="group inline-flex items-center">
-        <div
-          role="combobox"
+        <button
+          type="button"
+          data-trigger
           aria-haspopup="dialog"
-          aria-expanded={false}
-          aria-disabled={local.disabled || undefined}
+          aria-expanded={isDialogOpen()}
           aria-required={local.required || undefined}
-          tabIndex={local.disabled ? -1 : 0}
-          class={triggerClassName()}
-          onKeyDown={(e) => {
-            if (local.disabled) return;
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              void handleOpenDialog();
-            }
-          }}
+          disabled={local.disabled || undefined}
+          class={twMerge("appearance-none font-inherit text-inherit text-left", triggerClassName())}
+          onClick={() => void handleOpenDialog()}
         >
-          <div class="flex-1 truncate">{renderSelectedDisplay()}</div>
+          <div class="flex-1 whitespace-nowrap">{renderSelectedDisplay()}</div>
           <div class={clsx("flex items-center", gap.sm)}>
             <Show when={clearable()}>
               <button
@@ -318,7 +322,10 @@ export function DataSelectButton<
                 type="button"
                 data-search-button
                 class={twMerge(actionButtonClass, text.muted, "hover:text-primary-500")}
-                onClick={() => void handleOpenDialog()}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  void handleOpenDialog();
+                }}
                 tabIndex={-1}
                 aria-label={i18n.t("dataSelectButton.search")}
               >
@@ -326,7 +333,7 @@ export function DataSelectButton<
               </button>
             </Show>
           </div>
-        </div>
+        </button>
       </div>
     </Invalid>
   );

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

@@ -288,7 +288,7 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
       </DataSheet.Column>
       <For each={allPerms()}>
         {(perm) => (
-          <DataSheet.Column key={`perm-${perm}`} header={perm} sortable={false} resizable={false}>
+          <DataSheet.Column key={`perm-${perm}`} header={(() => { const key = `permissionTable.${perm}`; const translated = i18n.t(key); return translated === key ? perm : translated; })()} sortable={false} resizable={false}>
             {(ctx) => {
               const item = ctx.item as AppPerm;
               return (

package/src/components/feedback/busy/BusyContainer.tsx

@@ -72,27 +72,21 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
     );
   });
 
-   
-  const screenClass = () =>
-    clsx(
-      "absolute inset-0 z-busy bg-white/70 transition-opacity duration-150 dark:bg-base-900/70",
-      animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
-    );
-
-  // spinner: slide down animation
-  const rectClass = () => {
-    if (currVariant() !== "spinner") return "";
-    return clsx(
-      "transition-transform duration-100",
-      animating() ? "translate-y-0 ease-out" : "-translate-y-full ease-in",
-    );
-  };
-
   return (
     <div ref={containerRef} class={twMerge("relative size-full min-h-[70px] min-w-[70px] overflow-auto", local.class)} {...rest}>
       <Show when={mounted()}>
-        <div class={screenClass()} onTransitionEnd={handleTransitionEnd}>
-          <div class={rectClass()}>
+        <div
+          class={clsx(
+            "absolute inset-0 z-busy bg-white/70 transition-opacity duration-150 dark:bg-base-900/70",
+            animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
+          )}
+          onTransitionEnd={handleTransitionEnd}
+        >
+          <div
+            class={currVariant() === "spinner"
+              ? clsx("transition-transform duration-100", animating() ? "translate-y-0 ease-out" : "-translate-y-full ease-in")
+              : ""}
+          >
             <Show when={currVariant() === "spinner"}>
               <div class="mx-auto mt-5 size-8 animate-spin rounded-full border-[6px] border-base-200 border-b-primary-500 shadow-md dark:border-base-700 dark:border-b-primary-400" />
             </Show>

package/src/components/form-control/DropdownTrigger.styles.ts

@@ -5,7 +5,7 @@ import { type ComponentSize, gap, pad } from "../../styles/control.styles";
 
 export const triggerBaseClass = clsx(
   "inline-flex items-center gap-2",
-  "w-40",
+  "min-w-40",
   "border",
   border.default,
   "rounded",

package/src/components/form-control/checkbox/SelectableBase.tsx

@@ -76,20 +76,6 @@ export const SelectableBase: ParentComponent<SelectableBaseProps & { config: Sel
     }
   };
 
-  const getWrapperClass = () =>
-    twMerge(
-      checkboxBaseClass,
-      checkboxSizeClasses[local.size ?? "md"],
-      local.inset && checkboxInsetClass,
-      local.inset && checkboxInsetSizeHeightClasses[local.size ?? "md"],
-      local.inline && checkboxInlineClass,
-      local.disabled && checkboxDisabledClass,
-      local.class,
-    );
-
-  const getIndicatorClass = () =>
-    twMerge(indicatorBaseClass, local.config.indicatorShape, checked() && checkedClass);
-
   const errorMsg = createMemo(() => {
     const v = local.checked ?? false;
     if (local.required && !v) return i18n.t("validation.requiredSelection");
@@ -104,12 +90,20 @@ export const SelectableBase: ParentComponent<SelectableBaseProps & { config: Sel
         role={local.config.role}
         aria-checked={checked()}
         tabIndex={local.disabled ? -1 : 0}
-        class={getWrapperClass()}
+        class={twMerge(
+          checkboxBaseClass,
+          checkboxSizeClasses[local.size ?? "md"],
+          local.inset && checkboxInsetClass,
+          local.inset && checkboxInsetSizeHeightClasses[local.size ?? "md"],
+          local.inline && checkboxInlineClass,
+          local.disabled && checkboxDisabledClass,
+          local.class,
+        )}
         style={local.style}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
       >
-        <div class={getIndicatorClass()}>
+        <div class={twMerge(indicatorBaseClass, local.config.indicatorShape, checked() && checkedClass)}>
           <Show when={checked()}>
             {local.config.indicatorContent}
           </Show>