@simplysm/solid 13.0.84 → 13.0.85

package/src/components/form-control/field/Textarea.tsx

@@ -59,13 +59,6 @@ export interface TextareaProps {
   style?: JSX.CSSProperties;
 }
 
-const textareaBaseClass = clsx(
-  "absolute left-0 top-0",
-  "size-full",
-  "resize-none overflow-hidden",
-  "bg-transparent",
-  text.placeholder,
-);
 
 /**
  * Textarea component
@@ -164,8 +157,6 @@ export const Textarea: Component<TextareaProps> = (props) => {
       "whitespace-pre-wrap break-all",
     );
 
-  const getTextareaClass = () =>
-    twMerge(textareaBaseClass, textAreaSizeClasses[local.size ?? "md"], local.inset && "p-0");
 
   // Whether editable
   const isEditable = () => !local.disabled && !local.readOnly;
@@ -228,7 +219,17 @@ export const Textarea: Component<TextareaProps> = (props) => {
         {contentForHeight()}
       </div>
       <textarea
-        class={getTextareaClass()}
+        class={twMerge(
+          clsx(
+            "absolute left-0 top-0",
+            "size-full",
+            "resize-none overflow-hidden",
+            "bg-transparent",
+            text.placeholder,
+          ),
+          textAreaSizeClasses[local.size ?? "md"],
+          local.inset && "p-0",
+        )}
         value={value()}
         placeholder={local.placeholder}
         title={local.title}

package/src/components/form-control/select/Select.tsx

@@ -32,6 +32,7 @@ import { TextInput } from "../field/TextInput";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
 import {
   listItemBaseClass,
+  listItemSizeClasses,
   listItemSelectedClass,
   listItemDisabledClass,
   listItemIndentGuideClass,
@@ -65,13 +66,15 @@ export interface SelectContextValue<TValue = unknown> {
 
   /** Register item template */
   setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
+
+  /** Trigger size */
+  size: Accessor<ComponentSize>;
 }
 
 export const SelectContext = createContext<SelectContextValue>();
-const SelectCtx = SelectContext;
 
 function useSelectContext<TValue = unknown>(): SelectContextValue<TValue> {
-  const context = useContext(SelectCtx);
+  const context = useContext(SelectContext);
   if (!context) {
     throw new Error("useSelectContext can only be used inside Select component");
   }
@@ -90,6 +93,7 @@ const [SelectActionSlot, createActionSlotAccessor] = createSlot<{ children: JSX.
 
 const SelectAction = (props: SelectActionProps) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
+  const ctx = useSelectContext();
 
   const handleClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (e) => {
     if (typeof rest.onClick === "function") {
@@ -105,7 +109,15 @@ const SelectAction = (props: SelectActionProps) => {
         {...rest}
         type="button"
         onClick={handleClick}
-        class={twMerge("p-2", themeTokens.base.hoverBg, local.class)}
+        class={twMerge(
+          "inline-flex items-center",
+          pad[ctx.size()],
+          "border",
+          border.default,
+          groupFocusBorderClass,
+          themeTokens.base.hoverBg,
+          local.class,
+        )}
         data-select-action
       >
         {local.children}
@@ -116,6 +128,8 @@ const SelectAction = (props: SelectActionProps) => {
 
 //#endregion
 
+const groupFocusBorderClass = "group-focus-within:border-primary-400 dark:group-focus-within:border-primary-400";
+
 const selectAllBtnClass = clsx(
   "text-primary-500",
   "hover:text-primary-600 dark:hover:text-primary-400",
@@ -186,13 +200,12 @@ const SelectItemInner = <TValue,>(
   const getClassName = () =>
     twMerge(
       listItemBaseClass,
+      listItemSizeClasses[context.size()],
       isSelected() && listItemSelectedClass,
       local.disabled && listItemDisabledClass,
       local.class,
     );
 
-  const getCheckIconClass = () => getListItemSelectedIconClass(isSelected());
-
   return (
     <ItemChildrenProvider>
       <button
@@ -209,7 +222,7 @@ const SelectItemInner = <TValue,>(
         onClick={handleClick}
       >
         <Show when={context.multiple() && !hasChildren()}>
-          <Icon icon={IconCheck} class={getCheckIconClass()} />
+          <Icon icon={IconCheck} class={getListItemSelectedIconClass(isSelected())} />
         </Show>
         <span class={listItemContentClass}>{local.children}</span>
       </button>
@@ -440,6 +453,7 @@ const SelectInnerComponent = <TValue,>(props: SelectProps<TValue>) => {
     toggleValue,
     closeDropdown,
     setItemTemplate,
+    size: () => local.size ?? "md",
   };
 
   // Trigger keyboard handling (only Enter/Space, ArrowUp/Down handled by Dropdown)
@@ -624,7 +638,7 @@ const SelectInnerComponent = <TValue,>(props: SelectProps<TValue>) => {
                 action() !== undefined &&
                   clsx(
                     "rounded-r-none border-r-0",
-                    "group-focus-within:border-primary-400 dark:group-focus-within:border-primary-400",
+                    groupFocusBorderClass,
                   ),
               )}
               style={local.style}
@@ -698,13 +712,13 @@ const SelectInnerComponent = <TValue,>(props: SelectProps<TValue>) => {
 
   return (
     <Invalid message={errorMsg()} variant="border" lazyValidation={local.lazyValidation}>
-      <SelectCtx.Provider value={contextValue as SelectContextValue}>
+      <SelectContext.Provider value={contextValue as SelectContextValue}>
         <HeaderProvider>
           <ActionProvider>
             <SelectInnerRender>{local.children}</SelectInnerRender>
           </ActionProvider>
         </HeaderProvider>
-      </SelectCtx.Provider>
+      </SelectContext.Provider>
     </Invalid>
   );
 };

package/src/components/form-control/state-preset/StatePreset.tsx

@@ -191,33 +191,18 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
 
   // ── Render ──
 
-  const containerClass = () => twMerge(clsx("inline-flex items-center", gap.lg, "flex-wrap"), local.class);
-
-  const resolvedChipClass = () => twMerge(
-    clsx("inline-flex items-center", gap.md, "rounded-full", bg.subtle, text.default, "cursor-default"),
-    chipSizeClasses[local.size ?? "md"],
-  );
-
   const resolvedIconBtnClass = () =>
     twMerge("rounded-full", iconBtnSizeClasses[local.size ?? "md"]);
 
-  const resolvedStarBtnClass = () =>
-    twMerge(
-      clsx("inline-flex cursor-pointer items-center justify-center rounded-full text-warning-500 transition-colors focus:outline-none", themeTokens.warning.hoverBg),
-      starBtnSizeClasses[local.size ?? "md"],
-    );
-
-  const resolvedInputClass = () => twMerge(
-    clsx("rounded-full", bg.subtle, text.default, "border border-transparent focus:outline-none focus:ring-1 focus:ring-primary-400", text.placeholder),
-    inputSizeClasses[local.size ?? "md"],
-  );
-
   return (
-    <div class={containerClass()} style={local.style}>
+    <div class={twMerge(clsx("inline-flex items-center", gap.lg, "flex-wrap"), local.class)} style={local.style}>
       {/* Star button - add preset */}
       <button
         type="button"
-        class={resolvedStarBtnClass()}
+        class={twMerge(
+          clsx("inline-flex cursor-pointer items-center justify-center rounded-full text-warning-500 transition-colors focus:outline-none", themeTokens.warning.hoverBg),
+          starBtnSizeClasses[local.size ?? "md"],
+        )}
         onClick={handleStartAdd}
         title={i18n.t("statePreset.addPreset")}
       >
@@ -227,7 +212,12 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
       {/* Preset chips */}
       <For each={presets()}>
         {(preset, index) => (
-          <span class={resolvedChipClass()}>
+          <span
+            class={twMerge(
+              clsx("inline-flex items-center", gap.md, "rounded-full", bg.subtle, text.default, "cursor-default"),
+              chipSizeClasses[local.size ?? "md"],
+            )}
+          >
             <button
               type="button"
               class="cursor-pointer hover:underline focus:outline-none"
@@ -266,7 +256,10 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
             requestAnimationFrame(() => el.focus());
           }}
           type="text"
-          class={resolvedInputClass()}
+          class={twMerge(
+            clsx("rounded-full", bg.subtle, text.default, "border border-transparent focus:outline-none focus:ring-1 focus:ring-primary-400", text.placeholder),
+            inputSizeClasses[local.size ?? "md"],
+          )}
           placeholder={i18n.t("statePreset.namePlaceholder")}
           autocomplete="one-time-code"
           value={inputValue()}

package/src/components/layout/topbar/Topbar.tsx

@@ -133,8 +133,8 @@ const TopbarInner: ParentComponent<TopbarProps> = (props) => {
   return (
     <header {...rest} data-topbar class={getClassName()}>
       <Show when={sidebarContext}>
-        <Button variant="ghost" onClick={handleToggle} class="p-2" aria-label={i18n.t("topbar.toggleSidebar")}>
-          <Icon icon={IconMenu2} size="1.5em" />
+        <Button variant="ghost" onClick={handleToggle} aria-label={i18n.t("topbar.toggleSidebar")}>
+          <Icon icon={IconMenu2} />
         </Button>
       </Show>
       {local.children}

package/src/hooks/createControllableStore.ts

@@ -39,10 +39,14 @@ export function createControllableStore<TValue extends object>(options: {
 
   // Wrap setter with a function wrapper to add onChange notification
   const wrappedSet = ((...args: any[]) => {
-    const before = obj.clone(unwrap(store));
-    (rawSet as any)(...args);
-    if (!obj.equal(before, unwrap(store))) {
-      options.onChange()?.(obj.clone(unwrap(store)));
+    if (options.onChange() != null) {
+      const before = obj.clone(unwrap(store));
+      (rawSet as any)(...args);
+      if (!obj.equal(before, unwrap(store))) {
+        options.onChange()!(obj.clone(unwrap(store)));
+      }
+    } else {
+      (rawSet as any)(...args);
     }
   }) as SetStoreFunction<TValue>;
 

package/src/hooks/useLocalStorage.ts

@@ -1,4 +1,5 @@
 import { type Accessor, createSignal } from "solid-js";
+import { json } from "@simplysm/core-common";
 import { useConfig } from "../providers/ConfigContext";
 
 type StorageSetter<TValue> = (
@@ -43,7 +44,7 @@ export function useLocalStorage<TValue>(
   try {
     const item = localStorage.getItem(prefixedKey);
     if (item !== null) {
-      storedValue = JSON.parse(item) as TValue;
+      storedValue = json.parse<TValue>(item);
     }
   } catch {
     // Use initial value on JSON parse failure
@@ -67,7 +68,7 @@ export function useLocalStorage<TValue>(
     if (resolved === undefined) {
       localStorage.removeItem(prefixedKey);
     } else {
-      localStorage.setItem(prefixedKey, JSON.stringify(resolved));
+      localStorage.setItem(prefixedKey, json.stringify(resolved));
     }
 
     return resolved;

package/src/hooks/useSyncConfig.ts

@@ -1,4 +1,5 @@
 import { type Accessor, type Setter, createEffect, createSignal, untrack } from "solid-js";
+import { json } from "@simplysm/core-common";
 import { useConfig } from "../providers/ConfigContext";
 import { useSyncStorage } from "../providers/SyncStorageProvider";
 
@@ -49,7 +50,7 @@ export function useSyncConfig<TValue>(
         try {
           const stored = localStorage.getItem(prefixedKey);
           if (stored !== null && writeVersion === versionBefore) {
-            setValue(() => JSON.parse(stored) as TValue);
+            setValue(() => json.parse<TValue>(stored));
           }
         } catch {
           // Ignore parse errors, keep default value
@@ -62,14 +63,14 @@ export function useSyncConfig<TValue>(
       try {
         const stored = await currentAdapter.getItem(prefixedKey);
         if (stored !== null && writeVersion === versionBefore) {
-          setValue(() => JSON.parse(stored) as TValue);
+          setValue(() => json.parse<TValue>(stored));
         }
       } catch {
         // Fall back to localStorage on error
         try {
           const stored = localStorage.getItem(prefixedKey);
           if (stored !== null && writeVersion === versionBefore) {
-            setValue(() => JSON.parse(stored) as TValue);
+            setValue(() => json.parse<TValue>(stored));
           }
         } catch {
           // Ignore parse errors
@@ -84,7 +85,7 @@ export function useSyncConfig<TValue>(
   createEffect(() => {
     if (!ready()) return; // Don't save until storage has been read
     const currentValue = value();
-    const serialized = JSON.stringify(currentValue);
+    const serialized = json.stringify(currentValue);
 
     // Read adapter untracked to avoid re-running save effect when adapter changes
     const currentAdapter = untrack(() => syncStorageCtx?.adapter());

package/src/providers/shared-data/SharedDataProvider.tsx

@@ -302,7 +302,6 @@ export function SharedDataProvider(props: { children: JSX.Element }): JSX.Elemen
       const entry = createSharedDataEntry(name, def, client);
       entries.set(name, entry);
       accessors[name] = entry;
-      void entry.initialize();
     }
   }
 

package/tests/components/features/crud-detail/CrudDetail.spec.tsx

@@ -5,6 +5,7 @@ import { CrudDetailTools } from "../../../../src/components/features/crud-detail
 import { CrudDetailBefore } from "../../../../src/components/features/crud-detail/CrudDetailBefore";
 import { CrudDetailAfter } from "../../../../src/components/features/crud-detail/CrudDetailAfter";
 import { CrudDetail } from "../../../../src/components/features/crud-detail/CrudDetail";
+import { Dialog } from "../../../../src/components/disclosure/Dialog";
 import { ConfigContext, ConfigProvider } from "../../../../src/providers/ConfigContext";
 import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
 import { Topbar } from "../../../../src/components/layout/topbar/Topbar";
@@ -474,3 +475,51 @@ describe("CrudDetail button layout by mode", () => {
     expect(container.textContent).toContain("커스텀도구");
   });
 });
+
+describe("CrudDetail dialog mode layout", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
+  afterEach(() => {
+    localStorage.removeItem("test.i18n-locale");
+  });
+
+  it("bottom bar's direct parent should not have gap-2 class", async () => {
+    render(() => (
+      <ConfigProvider clientName="test"><I18nProvider>
+        <TestWrapper>
+        <Dialog open={true}>
+          <Dialog.Header>Test</Dialog.Header>
+          <CrudDetail<TestData>
+            load={() =>
+              Promise.resolve({
+                data: { id: 1, name: "홍길동" },
+                info: { isNew: false, isDeleted: false },
+              })
+            }
+            submit={() => Promise.resolve(true)}
+            close={() => {}}
+          >
+            {(ctx) => <div>{ctx.data.name}</div>}
+          </CrudDetail>
+        </Dialog>
+      </TestWrapper>
+      </I18nProvider></ConfigProvider>
+    ));
+
+    await new Promise((r) => setTimeout(r, 100));
+
+    // Find the bottom bar via Confirm button
+    const confirmBtn = Array.from(document.querySelectorAll("button")).find(
+      (btn) => btn.textContent.includes("Confirm"),
+    );
+    expect(confirmBtn).toBeTruthy();
+
+    const bottomBar = confirmBtn!.closest(".border-t");
+    expect(bottomBar).toBeTruthy();
+
+    // Bottom bar's direct parent should NOT have gap-2 class
+    expect(bottomBar!.parentElement!.classList.contains("gap-2")).toBe(false);
+  });
+});

package/tests/components/form-control/select/SelectItem.spec.tsx

@@ -23,6 +23,7 @@ describe("SelectItem component", () => {
         toggleValue,
         closeDropdown: vi.fn(),
         setItemTemplate: vi.fn(),
+        size: () => "md" as const,
       };
 
       const { getByText } = render(() => (
@@ -43,6 +44,7 @@ describe("SelectItem component", () => {
         toggleValue: vi.fn(),
         closeDropdown,
         setItemTemplate: vi.fn(),
+        size: () => "md" as const,
       };
 
       const { getByText } = render(() => (
@@ -63,6 +65,7 @@ describe("SelectItem component", () => {
         toggleValue: vi.fn(),
         closeDropdown,
         setItemTemplate: vi.fn(),
+        size: () => "md" as const,
       };
 
       const { getByText } = render(() => (
@@ -84,6 +87,7 @@ describe("SelectItem component", () => {
         toggleValue: vi.fn(),
         closeDropdown: vi.fn(),
         setItemTemplate: vi.fn(),
+        size: () => "md" as const,
       };
 
       render(() => (
@@ -106,6 +110,7 @@ describe("SelectItem component", () => {
         toggleValue,
         closeDropdown: vi.fn(),
         setItemTemplate: vi.fn(),
+        size: () => "md" as const,
       };
 
       const { getByText } = render(() => (

package/tests/providers/shared-data/SharedDataProvider.spec.tsx

@@ -418,108 +418,4 @@ describe("SharedDataProvider", () => {
     result.unmount();
   });
 
-  it("fetches eagerly after configure()", async () => {
-    const { serviceClientValue, mockClient } = createMockServiceClient();
-    const mockUsers: TestUser[] = [{ id: 1, name: "Alice" }];
-
-    const fetchFn = vi.fn(() => Promise.resolve(mockUsers));
-
-    const definitions: { user: SharedDataDefinition<TestUser> } = {
-      user: {
-        fetch: fetchFn,
-        getKey: (item) => item.id,
-        orderBy: [[(item) => item.name, "asc"]],
-      },
-    };
-
-    function ConfigureOnly() {
-      const shared = useTestSharedData();
-      shared.configure(() => definitions);
-      return <div data-testid="configured">configured</div>;
-    }
-
-    const result = render(() => (
-      <NotificationContext.Provider value={createMockNotification()}>
-        <ServiceClientContext.Provider value={serviceClientValue}>
-          <SharedDataProvider>
-            <ConfigureOnly />
-          </SharedDataProvider>
-        </ServiceClientContext.Provider>
-      </NotificationContext.Provider>
-    ));
-
-    await vi.waitFor(() => {
-      expect(result.getByTestId("configured").textContent).toBe("configured");
-    });
-
-    // Now configure() triggers eager init
-    await vi.waitFor(() => {
-      expect(fetchFn).toHaveBeenCalledTimes(1);
-      expect(mockClient.addListener).toHaveBeenCalledTimes(1);
-    });
-
-    result.unmount();
-  });
-
-  it("wait() resolves after data is loaded even without items() access", async () => {
-    const { serviceClientValue } = createMockServiceClient();
-
-    let resolveUsers!: (value: TestUser[]) => void;
-    const fetchPromise = new Promise<TestUser[]>((resolve) => {
-      resolveUsers = resolve;
-    });
-
-    const fetchFn = vi.fn(() => fetchPromise);
-
-    const definitions: { user: SharedDataDefinition<TestUser> } = {
-      user: {
-        fetch: fetchFn,
-        getKey: (item) => item.id,
-        orderBy: [[(item) => item.name, "asc"]],
-      },
-    };
-
-    let waitResolved = false;
-
-    // Component that calls configure() + wait() but never accesses items()
-    function ConfigureAndWait() {
-      const shared = useTestSharedData();
-      shared.configure(() => definitions);
-
-      // Call wait() immediately — should NOT resolve until fetch completes
-      void shared.wait().then(() => {
-        waitResolved = true;
-      });
-
-      return <div data-testid="ready">{String(waitResolved)}</div>;
-    }
-
-    const result = render(() => (
-      <NotificationContext.Provider value={createMockNotification()}>
-        <ServiceClientContext.Provider value={serviceClientValue}>
-          <SharedDataProvider>
-            <ConfigureAndWait />
-          </SharedDataProvider>
-        </ServiceClientContext.Provider>
-      </NotificationContext.Provider>
-    ));
-
-    // fetch should have been called (eager init)
-    await vi.waitFor(() => {
-      expect(fetchFn).toHaveBeenCalledTimes(1);
-    });
-
-    // wait() should NOT have resolved yet (fetch still pending)
-    expect(waitResolved).toBe(false);
-
-    // Resolve the fetch
-    resolveUsers([{ id: 1, name: "Alice" }]);
-
-    // wait() should now resolve
-    await vi.waitFor(() => {
-      expect(waitResolved).toBe(true);
-    });
-
-    result.unmount();
-  });
 });