@simplysm/solid 13.0.75 → 13.0.77

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;
@@ -42,54 +25,15 @@ function DialogWrapper(props: { children: JSX.Element }) {
   return (
     <ConfigContext.Provider value={{ clientName: "test" }}>
       <NotificationProvider>
-        <Dialog open fill>
+        <Dialog open mode="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"));
@@ -230,7 +174,7 @@ describe("CrudSheet inline edit", () => {
         <CrudSheet<TestItem, Record<string, never>>
           search={searchFn}
           getItemKey={(item) => item.id}
-          itemDeleted={(item) => item.isDeleted}
+          isItemDeleted={(item) => item.isDeleted}
           inlineEdit={{
             submit: () => Promise.resolve(),
             newItem: () => ({ name: "", isDeleted: false }),
@@ -252,7 +196,7 @@ describe("CrudSheet inline edit", () => {
   });
 });
 
-describe("CrudSheet itemDeletable", () => {
+describe("CrudSheet isItemDeletable", () => {
   beforeEach(() => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
@@ -261,7 +205,7 @@ describe("CrudSheet itemDeletable", () => {
     localStorage.removeItem("test.i18n-locale");
   });
 
-  it("inline delete button is disabled for items where itemDeletable=false", async () => {
+  it("inline delete button is disabled for items where isItemDeletable=false", async () => {
     const searchFn = () =>
       Promise.resolve({
         items: [
@@ -277,8 +221,8 @@ describe("CrudSheet itemDeletable", () => {
         <CrudSheet<TestItem, Record<string, never>>
           search={searchFn}
           getItemKey={(item) => item.id}
-          itemDeletable={(item) => item.id !== 1}
-          itemDeleted={(item) => item.isDeleted}
+          isItemDeletable={(item) => item.id !== 1}
+          isItemDeleted={(item) => item.isDeleted}
           inlineEdit={{
             submit: () => Promise.resolve(),
             newItem: () => ({ name: "", isDeleted: false }),
@@ -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="이름">

package/tests/components/features/data-select-button/DataSelectButton.spec.tsx

@@ -1,9 +1,9 @@
 import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
 import { render, cleanup } from "@solidjs/testing-library";
 import { createSignal, type JSX } from "solid-js";
-import { DataSelectButton, type InjectedSelectProps } from "@simplysm/solid";
-import { DialogProvider } from "../../../../src/components/disclosure/DialogProvider";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { DataSelectButton, type SelectDialogBaseProps } from "@simplysm/solid";
+import { DialogProvider } from "../../../../src/components/disclosure/Dialog";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 // item type for tests
@@ -26,13 +26,13 @@ function createTestLoad() {
   return loadFn;
 }
 
-// Dialog component for tests — receives InjectedSelectProps automatically
-function TestDialogComponent(props: { confirmKeys: number[] } & InjectedSelectProps) {
+// Dialog component for tests — uses close prop directly
+function TestDialogComponent(props: SelectDialogBaseProps<number> & { confirmKeys: number[] }) {
   return (
     <div data-testid="dialog-content">
-      <div data-testid="select-mode">{props.selectMode}</div>
+      <div data-testid="select-mode">{props.selectionMode}</div>
       <div data-testid="selected-keys">{JSON.stringify([...props.selectedKeys])}</div>
-      <button data-testid="dialog-confirm" onClick={() => props.onSelect({ keys: props.confirmKeys })}>
+      <button data-testid="dialog-confirm" onClick={() => props.close?.({ selectedKeys: props.confirmKeys })}>
         confirm
       </button>
     </div>
@@ -62,7 +62,8 @@ describe("DataSelectButton", () => {
     const { container } = renderWithDialog(() => (
       <DataSelectButton
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -79,7 +80,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         value={1}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -96,7 +98,8 @@ describe("DataSelectButton", () => {
         value={[1, 3]}
         multiple
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -117,7 +120,8 @@ describe("DataSelectButton", () => {
         value={value()}
         onValueChange={setValue}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -137,7 +141,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         value={1}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -154,7 +159,8 @@ describe("DataSelectButton", () => {
         value={1}
         required
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -173,7 +179,8 @@ describe("DataSelectButton", () => {
         value={1}
         onValueChange={onValueChange}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -197,7 +204,8 @@ describe("DataSelectButton", () => {
         multiple
         onValueChange={onValueChange}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -217,7 +225,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         disabled
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -231,7 +240,8 @@ describe("DataSelectButton", () => {
     const { container } = renderWithDialog(() => (
       <DataSelectButton
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -248,7 +258,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         onValueChange={onValueChange}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [2] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [2] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -279,7 +290,8 @@ describe("DataSelectButton", () => {
         multiple
         onValueChange={onValueChange}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [1, 3] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [1, 3] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -309,7 +321,8 @@ describe("DataSelectButton", () => {
         value={1}
         onValueChange={onValueChange}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [2] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [2] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -335,7 +348,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         required
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -352,7 +366,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         value={1}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
         validate={(v) => (v === 1 ? "1은 선택할 수 없습니다" : undefined)}
       />
@@ -371,7 +386,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         disabled
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -387,7 +403,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         required
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -404,7 +421,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         onValueChange={onValueChange}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [3] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [3] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -435,7 +453,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         value={2}
         load={asyncLoad}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -450,7 +469,8 @@ describe("DataSelectButton", () => {
     const { container } = renderWithDialog(() => (
       <DataSelectButton
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -466,7 +486,8 @@ describe("DataSelectButton", () => {
         value={1}
         disabled
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -484,7 +505,8 @@ describe("DataSelectButton", () => {
         value={1}
         multiple
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));

package/tests/components/features/permission-table/PermissionTable.spec.tsx

@@ -8,7 +8,7 @@ import {
   changePermCheck,
 } from "../../../../src/components/features/permission-table/PermissionTable";
 import type { AppPerm } from "../../../../src/helpers/createAppStructure";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 // --- test data ---
@@ -176,32 +176,6 @@ describe("PermissionTable component", () => {
   });
 
   describe("basic rendering", () => {
-    it("renders as DataSheet (div with data-sheet attribute)", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
-      const wrapper = container.querySelector("[data-sheet]");
-      expect(wrapper).toBeTruthy();
-      expect(wrapper!.tagName).toBe("DIV");
-    });
-
-    it("renders a table inside DataSheet", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
-      const table = container.querySelector("[data-sheet] table");
-      expect(table).toBeTruthy();
-    });
-
-    it("displays perm type columns in header", () => {
-      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
-      expect(getByText("use")).toBeTruthy();
-      expect(getByText("edit")).toBeTruthy();
-      expect(getByText("approve")).toBeTruthy();
-    });
-
-    it("displays item titles", () => {
-      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
-      expect(getByText("사용자 관리")).toBeTruthy();
-      expect(getByText("시스템")).toBeTruthy();
-    });
-
     it("child items are expanded by default", () => {
       const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
       expect(getByText("권한 설정")).toBeTruthy();
@@ -259,13 +233,14 @@ describe("PermissionTable component", () => {
       expect(getByText("권한 설정")).toBeTruthy();
       expect(getByText("사용자 목록")).toBeTruthy();
 
-      // click collapse button (expand toggle on "사용자 관리" row)
+      // find the expand toggle in the expand feature column (first td) of "사용자 관리" row
       const titleEl = getByText("사용자 관리");
       const row = titleEl.closest("tr")!;
-      const expandButton = row.querySelector("button")!;
+      const expandTd = row.querySelector("td")!;
+      const expandButton = expandTd.querySelector("button")!;
       fireEvent.click(expandButton);
 
-      // children are removed from the DOM (Sheet does not render collapsed items)
+      // collapsed children are removed from the DOM (flattenTree excludes them)
       expect(queryByText("권한 설정")).toBeNull();
       expect(queryByText("사용자 목록")).toBeNull();
     });

package/tests/components/features/shared-data/SharedDataSelect.spec.tsx

@@ -3,11 +3,11 @@ import { render, cleanup } from "@solidjs/testing-library";
 import { createSignal, type Accessor } from "solid-js";
 import {
   SharedDataSelect,
-  type InjectedSelectProps,
+  type SelectDialogBaseProps,
 } from "@simplysm/solid";
-import { type SharedDataAccessor } from "../../../../src/providers/shared-data/SharedDataContext";
-import { DialogProvider } from "../../../../src/components/disclosure/DialogProvider";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { type SharedDataAccessor } from "../../../../src/providers/shared-data/SharedDataProvider";
+import { DialogProvider } from "../../../../src/components/disclosure/Dialog";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 interface TestItem {
@@ -24,21 +24,21 @@ const testItems: TestItem[] = [
 function createMockAccessor(itemsSignal: Accessor<TestItem[]>): SharedDataAccessor<TestItem> {
   return {
     items: itemsSignal,
-    get: (key) => itemsSignal().find((item) => item.id === key),
+    get: (key: string | number | undefined) => itemsSignal().find((item: TestItem) => item.id === key),
     emit: vi.fn(async () => {}),
-    getKey: (item) => item.id,
-    getSearchText: (item) => item.name,
+    getKey: (item: TestItem) => item.id,
+    itemSearchText: (item: TestItem) => item.name,
   };
 }
 
-function TestDialogComponent(props: { confirmKeys: number[] } & InjectedSelectProps) {
+function TestDialogComponent(props: SelectDialogBaseProps & { confirmKeys: number[] }) {
   return (
     <div data-testid="dialog-content">
-      <div data-testid="select-mode">{props.selectMode}</div>
+      <div data-testid="select-mode">{props.selectionMode}</div>
       <div data-testid="selected-keys">{JSON.stringify([...props.selectedKeys])}</div>
       <button
         data-testid="dialog-confirm"
-        onClick={() => props.onSelect({ keys: props.confirmKeys })}
+        onClick={() => props.close?.({ selectedKeys: props.confirmKeys })}
       >
         confirm
       </button>
@@ -109,11 +109,9 @@ describe("SharedDataSelect", () => {
         data={accessor}
         value={1}
         onValueChange={onValueChange}
-        dialog={{
-          component: TestDialogComponent,
-          props: { confirmKeys: [2] },
-          option: { header: "Select Item" },
-        }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [2] }}
+        dialogOptions={{ header: "Select Item" }}
       >
         <SharedDataSelect.ItemTemplate>
           {(item: TestItem) => <span>{item.name}</span>}
@@ -147,10 +145,8 @@ describe("SharedDataSelect", () => {
         data={accessor}
         value={3}
         onValueChange={() => {}}
-        dialog={{
-          component: TestDialogComponent,
-          props: { confirmKeys: [] },
-        }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
       >
         <SharedDataSelect.ItemTemplate>
           {(item: TestItem) => <span>{item.name}</span>}