@simplysm/solid 13.0.74 → 13.0.76

package/tests/components/disclosure/Dialog.spec.tsx

@@ -1,7 +1,7 @@
 import { render, fireEvent, waitFor } from "@solidjs/testing-library";
 import { describe, it, expect, vi } from "vitest";
 import { Dialog } from "../../../src/components/disclosure/Dialog";
-import { I18nProvider } from "../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../src/providers/ConfigContext";
 
 describe("Dialog", () => {
@@ -34,21 +34,6 @@ describe("Dialog", () => {
       expect(content).toBeNull();
     });
 
-    it("sets data-dialog attribute", async () => {
-      render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Dialog open={true}>
-          <Dialog.Header>테스트 다이얼로그</Dialog.Header>
-          <div>내용</div>
-        </Dialog>
-        </I18nProvider></ConfigProvider>
-      ));
-      await waitFor(() => {
-        const dialog = document.querySelector("[data-dialog]");
-        expect(dialog).not.toBeNull();
-      });
-    });
-
     it("renders Dialog.Header slot in header", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -137,11 +122,11 @@ describe("Dialog", () => {
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
-    it("closes on backdrop click when closeOnBackdrop=true", async () => {
+    it("closes on backdrop click when closeOnInteractOutside=true", async () => {
       const handleOpenChange = vi.fn();
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
-          <Dialog open={true} closeOnBackdrop onOpenChange={handleOpenChange}>
+          <Dialog open={true} closeOnInteractOutside onOpenChange={handleOpenChange}>
           <Dialog.Header>테스트</Dialog.Header>
           <div>내용</div>
         </Dialog>
@@ -154,7 +139,7 @@ describe("Dialog", () => {
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
-    it("does not close on backdrop click when closeOnBackdrop is not set", async () => {
+    it("does not close on backdrop click when closeOnInteractOutside is not set", async () => {
       const handleOpenChange = vi.fn();
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -241,23 +226,6 @@ describe("Dialog", () => {
   });
 
   describe("accessibility", () => {
-    it("sets role=dialog and aria-modal attributes", async () => {
-      render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Dialog open={true}>
-          <Dialog.Header>접근성 테스트</Dialog.Header>
-          <div>내용</div>
-        </Dialog>
-        </I18nProvider></ConfigProvider>
-      ));
-      await waitFor(() => {
-        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
-        expect(dialog).not.toBeNull();
-        expect(dialog.getAttribute("role")).toBe("dialog");
-        expect(dialog.getAttribute("aria-modal")).toBe("true");
-      });
-    });
-
     it("aria-labelledby references the Dialog.Header element", async () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -417,22 +385,4 @@ describe("Dialog", () => {
     });
   });
 
-  describe("animation", () => {
-    it("applies transition classes on open", async () => {
-      render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Dialog open={true}>
-          <Dialog.Header>테스트</Dialog.Header>
-          <div>내용</div>
-        </Dialog>
-        </I18nProvider></ConfigProvider>
-      ));
-      await waitFor(() => {
-        const dialog = document.querySelector("[data-dialog-panel]") as HTMLElement;
-        expect(dialog).not.toBeNull();
-        expect(dialog.classList.contains("transition-[opacity,transform]")).toBe(true);
-        expect(dialog.classList.contains("duration-200")).toBe(true);
-      });
-    });
-  });
 });

package/tests/components/disclosure/DialogProvider.spec.tsx

@@ -1,21 +1,18 @@
 import { render, fireEvent, waitFor } from "@solidjs/testing-library";
 import { describe, it, expect, beforeEach } from "vitest";
-import { DialogProvider } from "../../../src/components/disclosure/DialogProvider";
-import { useDialog } from "../../../src/components/disclosure/DialogContext";
-import { useDialogInstance } from "../../../src/components/disclosure/DialogInstanceContext";
-import { I18nProvider } from "../../../src/providers/i18n/I18nContext";
+import { DialogProvider, useDialog } from "../../../src/components/disclosure/Dialog";
+import { I18nProvider } from "../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../src/providers/ConfigContext";
 
 // dialog content component for testing
-function TestContent() {
-  const dialog = useDialogInstance<string>();
+function TestContent(props: { close?: (result?: string) => void }) {
   return (
     <div>
       <span data-testid="dialog-content">다이얼로그 내용</span>
-      <button data-testid="close-btn" onClick={() => dialog?.close("result")}>
+      <button data-testid="close-btn" onClick={() => props.close?.("result")}>
         닫기
       </button>
-      <button data-testid="close-no-result" onClick={() => dialog?.close()}>
+      <button data-testid="close-no-result" onClick={() => props.close?.()}>
         취소
       </button>
     </div>
@@ -30,7 +27,7 @@ function TestApp() {
     <button
       data-testid="open-btn"
       onClick={() => {
-        void dialog.show<string>(() => <TestContent />, { header: "테스트 다이얼로그" });
+        void dialog.show(TestContent, {}, { header: "테스트 다이얼로그" });
       }}
     >
       다이얼로그 열기
@@ -46,7 +43,7 @@ function TestAppNoHeader() {
     <button
       data-testid="open-btn"
       onClick={() => {
-        void dialog.show<string>(() => <TestContent />, {});
+        void dialog.show(TestContent, {}, {});
       }}
     >
       다이얼로그 열기
@@ -77,7 +74,7 @@ describe("DialogProvider", () => {
     });
   });
 
-  it("closes dialog when close is called via useDialogInstance", async () => {
+  it("closes dialog when close is called via props", async () => {
     render(() => (
       <ConfigProvider clientName="test">
         <I18nProvider>
@@ -102,7 +99,7 @@ describe("DialogProvider", () => {
     });
   });
 
-  it("closes dialog when close() is called", async () => {
+  it("closes dialog when close() is called without result", async () => {
     render(() => (
       <ConfigProvider clientName="test">
         <I18nProvider>

package/tests/components/disclosure/Tabs.spec.tsx

@@ -4,37 +4,6 @@ import { createSignal } from "solid-js";
 import { Tabs } from "../../../src/components/disclosure/Tabs";
 
 describe("Tabs", () => {
-  describe("basic rendering", () => {
-    it("renders with tablist role", () => {
-      const { getByRole } = render(() => (
-        <Tabs>
-          <Tabs.Tab value="a">A</Tabs.Tab>
-        </Tabs>
-      ));
-      expect(getByRole("tablist")).toBeTruthy();
-    });
-
-    it("renders Tabs.Tab with tab role", () => {
-      const { getByRole } = render(() => (
-        <Tabs>
-          <Tabs.Tab value="a">A</Tabs.Tab>
-        </Tabs>
-      ));
-      expect(getByRole("tab")).toBeTruthy();
-    });
-
-    it("renders children", () => {
-      const { getByText } = render(() => (
-        <Tabs>
-          <Tabs.Tab value="a">탭 A</Tabs.Tab>
-          <Tabs.Tab value="b">탭 B</Tabs.Tab>
-        </Tabs>
-      ));
-      expect(getByText("탭 A")).toBeTruthy();
-      expect(getByText("탭 B")).toBeTruthy();
-    });
-  });
-
   describe("selection behavior", () => {
     it("sets aria-selected to true on click", () => {
       const { getAllByRole } = render(() => (
@@ -149,72 +118,4 @@ describe("Tabs", () => {
     });
   });
 
-  describe("size", () => {
-    it("applies different styles per size prop", () => {
-      const { getAllByRole: getDefault } = render(() => (
-        <Tabs>
-          <Tabs.Tab value="a">A</Tabs.Tab>
-        </Tabs>
-      ));
-      const { getAllByRole: getSm } = render(() => (
-        <Tabs size="sm">
-          <Tabs.Tab value="a">A</Tabs.Tab>
-        </Tabs>
-      ));
-
-      expect(getDefault("tab")[0].className).not.toBe(getSm("tab")[0].className);
-    });
-  });
-
-  describe("accessibility", () => {
-    it("sets aria-disabled on disabled tab", () => {
-      const { getAllByRole } = render(() => (
-        <Tabs>
-          <Tabs.Tab value="a">A</Tabs.Tab>
-          <Tabs.Tab value="b" disabled>
-            B
-          </Tabs.Tab>
-        </Tabs>
-      ));
-
-      expect(getAllByRole("tab")[1].getAttribute("aria-disabled")).toBe("true");
-    });
-
-    it("sets tabIndex to -1 on disabled tab", () => {
-      const { getAllByRole } = render(() => (
-        <Tabs>
-          <Tabs.Tab value="a">A</Tabs.Tab>
-          <Tabs.Tab value="b" disabled>
-            B
-          </Tabs.Tab>
-        </Tabs>
-      ));
-
-      expect(getAllByRole("tab")[1].getAttribute("tabindex")).toBe("-1");
-    });
-  });
-
-  describe("class merging", () => {
-    it("merges custom class on Tabs", () => {
-      const { getByRole } = render(() => (
-        // eslint-disable-next-line tailwindcss/no-custom-classname
-        <Tabs class="my-tab-class">
-          <Tabs.Tab value="a">A</Tabs.Tab>
-        </Tabs>
-      ));
-      expect(getByRole("tablist").classList.contains("my-tab-class")).toBe(true);
-    });
-
-    it("merges custom class on Tabs.Tab", () => {
-      const { getByRole } = render(() => (
-        <Tabs>
-          {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
-          <Tabs.Tab value="a" class="my-item-class">
-            A
-          </Tabs.Tab>
-        </Tabs>
-      ));
-      expect(getByRole("tab").classList.contains("my-item-class")).toBe(true);
-    });
-  });
 });

package/tests/components/display/Barcode.spec.tsx

@@ -5,11 +5,6 @@ import { Barcode } from "../../../src/components/display/Barcode";
 
 describe("Barcode", () => {
   describe("basic rendering", () => {
-    it("renders with data-barcode attribute", () => {
-      const { container } = render(() => <Barcode type="qrcode" value="test" />);
-      expect(container.querySelector("[data-barcode]")).toBeTruthy();
-    });
-
     it("renders SVG when value is provided", () => {
       const { container } = render(() => <Barcode type="qrcode" value="hello" />);
       const el = container.querySelector("[data-barcode]")!;
@@ -49,13 +44,4 @@ describe("Barcode", () => {
       expect(el.innerHTML).toBe("");
     });
   });
-
-  describe("class merging", () => {
-    it("merges custom classes", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <Barcode type="qrcode" value="test" class="my-custom" />);
-      const el = container.querySelector("[data-barcode]")!;
-      expect(el.classList.contains("my-custom")).toBe(true);
-    });
-  });
 });

package/tests/components/features/address/AddressSearch.spec.tsx

@@ -1,9 +1,8 @@
 import { render, waitFor } from "@solidjs/testing-library";
 import { describe, it, expect, beforeEach } from "vitest";
-import { DialogProvider } from "../../../../src/components/disclosure/DialogProvider";
-import { useDialog } from "../../../../src/components/disclosure/DialogContext";
+import { DialogProvider, useDialog } from "../../../../src/components/disclosure/Dialog";
 import { AddressSearchContent } from "../../../../src/components/features/address/AddressSearch";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 function TestApp() {
@@ -13,7 +12,7 @@ function TestApp() {
     <button
       data-testid="open-btn"
       onClick={() => {
-        void dialog.show(() => <AddressSearchContent />, {
+        void dialog.show(AddressSearchContent, {}, {
           header: "주소 검색",
         });
       }}

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

@@ -1,34 +1,20 @@
 import { describe, it, expect, beforeEach, afterEach } from "vitest";
 import { type Accessor, type JSX } from "solid-js";
 import { render } from "@solidjs/testing-library";
-import type {
-  CrudDetailToolsDef,
-  CrudDetailBeforeDef,
-  CrudDetailAfterDef,
-} from "../../../../src/components/features/crud-detail/types";
-import {
-  CrudDetailTools,
-  isCrudDetailToolsDef,
-} from "../../../../src/components/features/crud-detail/CrudDetailTools";
-import {
-  CrudDetailBefore,
-  isCrudDetailBeforeDef,
-} from "../../../../src/components/features/crud-detail/CrudDetailBefore";
-import {
-  CrudDetailAfter,
-  isCrudDetailAfterDef,
-} from "../../../../src/components/features/crud-detail/CrudDetailAfter";
+import { CrudDetailTools } from "../../../../src/components/features/crud-detail/CrudDetailTools";
+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 { ConfigContext, ConfigProvider } from "../../../../src/providers/ConfigContext";
 import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
 import { Topbar } from "../../../../src/components/layout/topbar/Topbar";
-import { useTopbarActionsAccessor } from "../../../../src/components/layout/topbar/TopbarContext";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { useTopbarActionsAccessor } from "../../../../src/components/layout/topbar/Topbar";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 
 // Helper: extract actions accessor from TopbarContext
 function ActionsReader(props: { onCapture: (actions: Accessor<JSX.Element | undefined>) => void }) {
   const actions = useTopbarActionsAccessor();
-   
+
   props.onCapture(actions);
   return null;
 }
@@ -46,65 +32,17 @@ function TestWrapper(props: { children: JSX.Element }) {
   );
 }
 
-describe("CrudDetail types", () => {
-  it("CrudDetailToolsDef type has __type field", () => {
-    const def: CrudDetailToolsDef = {
-      __type: "crud-detail-tools",
-      children: null as any,
-    };
-    expect(def.__type).toBe("crud-detail-tools");
-  });
-
-  it("CrudDetailBeforeDef type has __type field", () => {
-    const def: CrudDetailBeforeDef = {
-      __type: "crud-detail-before",
-      children: null as any,
-    };
-    expect(def.__type).toBe("crud-detail-before");
-  });
-
-  it("CrudDetailAfterDef type has __type field", () => {
-    const def: CrudDetailAfterDef = {
-      __type: "crud-detail-after",
-      children: null as any,
-    };
-    expect(def.__type).toBe("crud-detail-after");
-  });
-});
-
 describe("CrudDetail sub-components", () => {
-  it("CrudDetailTools: returns plain object and is identifiable by type guard", () => {
-    const def = CrudDetailTools({
-      children: <div>tools</div>,
-    });
-
-    expect(isCrudDetailToolsDef(def)).toBe(true);
-    expect((def as any).__type).toBe("crud-detail-tools");
-  });
-
-  it("CrudDetailBefore: returns plain object and is identifiable by type guard", () => {
-    const def = CrudDetailBefore({
-      children: <div>before</div>,
-    });
-
-    expect(isCrudDetailBeforeDef(def)).toBe(true);
-    expect((def as any).__type).toBe("crud-detail-before");
+  it("CrudDetailTools: is a valid slot component (function)", () => {
+    expect(typeof CrudDetailTools).toBe("function");
   });
 
-  it("CrudDetailAfter: returns plain object and is identifiable by type guard", () => {
-    const def = CrudDetailAfter({
-      children: <div>after</div>,
-    });
-
-    expect(isCrudDetailAfterDef(def)).toBe(true);
-    expect((def as any).__type).toBe("crud-detail-after");
+  it("CrudDetailBefore: is a valid slot component (function)", () => {
+    expect(typeof CrudDetailBefore).toBe("function");
   });
 
-  it("type guard: returns false for plain objects", () => {
-    expect(isCrudDetailToolsDef({})).toBe(false);
-    expect(isCrudDetailToolsDef(null)).toBe(false);
-    expect(isCrudDetailBeforeDef("string")).toBe(false);
-    expect(isCrudDetailAfterDef(42)).toBe(false);
+  it("CrudDetailAfter: is a valid slot component (function)", () => {
+    expect(typeof CrudDetailAfter).toBe("function");
   });
 });
 

package/tests/components/features/crud-sheet/CrudSheet.spec.tsx

@@ -1,28 +1,11 @@
 import { describe, it, expect, beforeEach, afterEach } from "vitest";
 import type { JSX } from "solid-js";
 import { render } from "@solidjs/testing-library";
-import {
-  CrudSheetColumn,
-  isCrudSheetColumnDef,
-} from "../../../../src/components/features/crud-sheet/CrudSheetColumn";
-import {
-  CrudSheetFilter,
-  isCrudSheetFilterDef,
-} from "../../../../src/components/features/crud-sheet/CrudSheetFilter";
-import {
-  CrudSheetTools,
-  isCrudSheetToolsDef,
-} from "../../../../src/components/features/crud-sheet/CrudSheetTools";
-import {
-  CrudSheetHeader,
-  isCrudSheetHeaderDef,
-} from "../../../../src/components/features/crud-sheet/CrudSheetHeader";
 import { CrudSheet } from "../../../../src/components/features/crud-sheet/CrudSheet";
 import { ConfigContext, ConfigProvider } from "../../../../src/providers/ConfigContext";
 import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
-import { DialogInstanceContext } from "../../../../src/components/disclosure/DialogInstanceContext";
 import { Dialog } from "../../../../src/components/disclosure/Dialog";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 
 interface TestItem {
   id?: number;
@@ -44,52 +27,13 @@ function DialogWrapper(props: { children: JSX.Element }) {
       <NotificationProvider>
         <Dialog open fill>
           <Dialog.Header>Test Dialog</Dialog.Header>
-          <DialogInstanceContext.Provider value={{ close: () => {} }}>
-            {props.children}
-          </DialogInstanceContext.Provider>
+          {props.children}
         </Dialog>
       </NotificationProvider>
     </ConfigContext.Provider>
   );
 }
 
-describe("CrudSheet types", () => {
-  it("CrudSheetColumn: returns plain object and is identifiable by type guard", () => {
-    const def = CrudSheetColumn<TestItem>({
-      key: "name",
-      header: "이름",
-      children: (ctx) => <div>{ctx.item.name}</div>,
-    });
-
-    expect(isCrudSheetColumnDef(def)).toBe(true);
-    expect((def as any).key).toBe("name");
-  });
-
-  it("CrudSheetFilter: returns plain object and is identifiable by type guard", () => {
-    const def = CrudSheetFilter({
-      children: (_filter, _setFilter) => <div>filter</div>,
-    });
-
-    expect(isCrudSheetFilterDef(def)).toBe(true);
-  });
-
-  it("CrudSheetTools: returns plain object and is identifiable by type guard", () => {
-    const def = CrudSheetTools({
-      children: (_ctx) => <div>tools</div>,
-    });
-
-    expect(isCrudSheetToolsDef(def)).toBe(true);
-  });
-
-  it("CrudSheetHeader: returns plain object and is identifiable by type guard", () => {
-    const def = CrudSheetHeader({
-      children: <div>header</div>,
-    });
-
-    expect(isCrudSheetHeaderDef(def)).toBe(true);
-  });
-});
-
 describe("CrudSheet rendering", () => {
   beforeEach(() => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
@@ -351,15 +295,16 @@ describe("CrudSheet select mode", () => {
     localStorage.removeItem("test.i18n-locale");
   });
 
-  it("toolbar is hidden when selectMode is set inside Dialog", async () => {
+  it("toolbar is hidden when selectionMode is set inside Dialog", async () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <DialogWrapper>
         <CrudSheet<TestItem, Record<string, never>>
           search={() => Promise.resolve({ items: [{ id: 1, name: "홍길동", isDeleted: false }] })}
           getItemKey={(item) => item.id}
-          selectMode="single"
+          selectionMode="single"
           onSelect={() => {}}
+          close={() => {}}
           inlineEdit={{
             submit: () => Promise.resolve(),
             newItem: () => ({ name: "", isDeleted: false }),
@@ -377,15 +322,16 @@ describe("CrudSheet select mode", () => {
     expect(container.textContent).not.toContain("Add Row");
   });
 
-  it("Confirm button is displayed when selectMode='multiple'", async () => {
+  it("Confirm button is displayed when selectionMode='multiple'", async () => {
     render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <DialogWrapper>
         <CrudSheet<TestItem, Record<string, never>>
           search={() => Promise.resolve({ items: [{ id: 1, name: "홍길동", isDeleted: false }] })}
           getItemKey={(item) => item.id}
-          selectMode="multiple"
+          selectionMode="multiple"
           onSelect={() => {}}
+          close={() => {}}
         >
           <CrudSheet.Column<TestItem> key="name" header="이름">
             {(ctx) => <div>{ctx.item.name}</div>}
@@ -467,15 +413,16 @@ describe("CrudSheet dialog mode", () => {
     localStorage.removeItem("test.i18n-locale");
   });
 
-  it("bottom bar is displayed when selectMode='multiple' inside Dialog", async () => {
+  it("bottom bar is displayed when selectionMode='multiple' inside Dialog", async () => {
     render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <DialogWrapper>
         <CrudSheet<TestItem, Record<string, never>>
           search={() => Promise.resolve({ items: [{ id: 1, name: "홍길동", isDeleted: false }] })}
           getItemKey={(item) => item.id}
-          selectMode="multiple"
+          selectionMode="multiple"
           onSelect={() => {}}
+          close={() => {}}
         >
           <CrudSheet.Column<TestItem> key="name" header="이름">
             {(ctx) => <div>{ctx.item.name}</div>}
@@ -491,14 +438,14 @@ describe("CrudSheet dialog mode", () => {
     expect(dialogContent?.textContent).toContain("Confirm");
   });
 
-  it("bottom bar is not displayed when selectMode='multiple' without Dialog", async () => {
+  it("bottom bar is not displayed when selectionMode='multiple' without Dialog", async () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <TestWrapper>
         <CrudSheet<TestItem, Record<string, never>>
           search={() => Promise.resolve({ items: [{ id: 1, name: "홍길동", isDeleted: false }] })}
           getItemKey={(item) => item.id}
-          selectMode="multiple"
+          selectionMode="multiple"
           onSelect={() => {}}
         >
           <CrudSheet.Column<TestItem> key="name" header="이름">