@simplysm/solid 13.0.84 → 13.0.86

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

@@ -395,9 +395,8 @@ describe("DataSelectButton", () => {
       />
     ));
 
-    const trigger = container.querySelector("[role='combobox']") as HTMLElement;
-    expect(trigger.getAttribute("aria-disabled")).toBe("true");
-    expect(trigger.tabIndex).toBe(-1);
+    const trigger = container.querySelector("button[data-trigger]") as HTMLButtonElement;
+    expect(trigger.disabled).toBe(true);
   });
 
   it("sets required aria attribute", () => {
@@ -412,11 +411,67 @@ describe("DataSelectButton", () => {
       />
     ));
 
-    const trigger = container.querySelector("[role='combobox']") as HTMLElement;
+    const trigger = container.querySelector("button[data-trigger]") as HTMLElement;
     expect(trigger.getAttribute("aria-required")).toBe("true");
   });
 
-  it("opens dialog on Enter key press", async () => {
+  it("trigger is a button element with aria-haspopup='dialog'", () => {
+    const load = createTestLoad();
+    const { container } = renderWithDialog(() => (
+      <DataSelectButton
+        load={load}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
+        renderItem={(item: TestItem) => <span>{item.name}</span>}
+      />
+    ));
+
+    const trigger = container.querySelector("button[data-trigger]") as HTMLButtonElement;
+    expect(trigger).not.toBeNull();
+    expect(trigger.tagName).toBe("BUTTON");
+    expect(trigger.getAttribute("aria-haspopup")).toBe("dialog");
+    expect(trigger.getAttribute("type")).toBe("button");
+  });
+
+  it("aria-expanded changes dynamically with dialog open state", async () => {
+    const load = createTestLoad();
+
+    const { container } = renderWithDialog(() => (
+      <DataSelectButton
+        load={load}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [1] }}
+        renderItem={(item: TestItem) => <span>{item.name}</span>}
+      />
+    ));
+
+    const trigger = container.querySelector("button[data-trigger]") as HTMLButtonElement;
+
+    // Initially false
+    expect(trigger.getAttribute("aria-expanded")).toBe("false");
+
+    // Open dialog via search button
+    const searchBtn = container.querySelector("[data-search-button]") as HTMLButtonElement;
+    searchBtn.click();
+
+    // While dialog is open, aria-expanded should be true
+    await vi.waitFor(() => {
+      expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    });
+
+    // Confirm dialog to close it
+    const confirmBtn = document.querySelector(
+      "[data-testid='dialog-confirm']",
+    ) as HTMLButtonElement;
+    confirmBtn.click();
+
+    // After dialog closes, aria-expanded should be false again
+    await vi.waitFor(() => {
+      expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    });
+  });
+
+  it("opens dialog on trigger click", async () => {
     const load = createTestLoad();
     const onValueChange = vi.fn();
 
@@ -430,8 +485,8 @@ describe("DataSelectButton", () => {
       />
     ));
 
-    const trigger = container.querySelector("[role='combobox']") as HTMLElement;
-    trigger.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    const trigger = container.querySelector("button[data-trigger]") as HTMLElement;
+    trigger.click();
 
     await vi.waitFor(() => {
       const confirmBtn = document.querySelector(

package/tests/components/form-control/combobox/Combobox.spec.tsx

@@ -143,7 +143,7 @@ describe("Combobox component", () => {
             onValueChange={handleChange}
             allowsCustomValue
             parseCustomValue={(text) => text}
-            renderValue={(v) => <>{v}</>}
+            renderValue={(v: string) => <>{v}</>}
           />
         </I18nProvider></ConfigProvider>
       ));
@@ -178,7 +178,7 @@ describe("Combobox component", () => {
       expect(handleChange).toHaveBeenCalledWith({ name: "테스트", custom: true });
     });
 
-    it("sets undefined when allowsCustomValue is true without parseCustomValue", async () => {
+    it("uses query text as value when allowsCustomValue is true without parseCustomValue", async () => {
       const onValueChange = vi.fn();
       const { container, getByRole } = render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -196,7 +196,7 @@ describe("Combobox component", () => {
       fireEvent.keyDown(getByRole("combobox"), { key: "Enter" });
 
       await waitFor(() => {
-        expect(onValueChange).toHaveBeenCalledWith(undefined);
+        expect(onValueChange).toHaveBeenCalledWith("custom text");
       });
     });
   });

package/tests/components/form-control/date-range-picker/DateRangePicker.spec.tsx

@@ -115,6 +115,62 @@ describe("DateRangePicker component", () => {
     });
   });
 
+  describe("required prop propagation", () => {
+    it("propagates required to child DatePickers in range mode", () => {
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <DateRangePicker periodType="range" required />
+        </I18nProvider></ConfigProvider>
+      ));
+      const wrapper = container.querySelector("[data-date-range-picker]");
+      const dateFields = wrapper?.querySelectorAll("[data-date-field]");
+
+      // range mode has 2 DatePickers (from + to)
+      expect(dateFields?.length).toBe(2);
+
+      // Each DatePicker's hidden input should have the required validation message
+      dateFields?.forEach((field) => {
+        const hiddenInput = field.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+        expect(hiddenInput).toBeTruthy();
+        expect(hiddenInput.validationMessage).toBe("This is a required field");
+      });
+    });
+
+    it("propagates required to child DatePicker in day mode", () => {
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <DateRangePicker periodType="day" required />
+        </I18nProvider></ConfigProvider>
+      ));
+      const wrapper = container.querySelector("[data-date-range-picker]");
+      const dateFields = wrapper?.querySelectorAll("[data-date-field]");
+
+      // day mode has 1 DatePicker
+      expect(dateFields?.length).toBe(1);
+
+      const hiddenInput = dateFields?.[0].querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput).toBeTruthy();
+      expect(hiddenInput.validationMessage).toBe("This is a required field");
+    });
+
+    it("propagates required to child DatePicker in month mode", () => {
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <DateRangePicker periodType="month" required />
+        </I18nProvider></ConfigProvider>
+      ));
+      const wrapper = container.querySelector("[data-date-range-picker]");
+      const dateFields = wrapper?.querySelectorAll("[data-date-field]");
+
+      // month mode has 1 DatePicker
+      expect(dateFields?.length).toBe(1);
+
+      const hiddenInput = dateFields?.[0].querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput).toBeTruthy();
+      expect(hiddenInput.validationMessage).toBe("This is a required field");
+    });
+  });
+
   describe("from change - 'range' mode", () => {
     it("calls onToChange(from) when from > to", () => {
       const onFromChange = vi.fn();

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();
-  });
 });

package/docs/data.md

@@ -1,204 +0,0 @@
-# Data
-
-## Table
-
-```typescript
-interface TableProps extends JSX.HTMLAttributes<HTMLTableElement> {
-  inset?: boolean;
-}
-```
-
-Basic HTML table with consistent styling.
-
-**Sub-components:** `Table.Row`, `Table.HeaderCell`, `Table.Cell`
-
----
-
-## List
-
-```typescript
-interface ListProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  inset?: boolean;
-}
-```
-
-Vertical list with keyboard navigation (ArrowUp/Down, Home/End) and tree-view support (ArrowRight/Left to expand/collapse).
-
-**Sub-component:** `List.Item`
-
----
-
-## Pagination
-
-```typescript
-interface PaginationProps extends JSX.HTMLAttributes<HTMLElement> {
-  page: number;
-  onPageChange?: (page: number) => void;
-  totalPageCount: number;
-  displayPageCount?: number;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-}
-```
-
-Page navigation control. `page` is 1-based. `displayPageCount` controls how many page numbers are visible at once.
-
----
-
-## DataSheet
-
-```typescript
-interface DataSheetProps<TItem> {
-  items?: TItem[];
-  storageKey?: string;
-  hideConfigBar?: boolean;
-  inset?: boolean;
-  contentStyle?: JSX.CSSProperties | string;
-
-  // Sorting
-  sorts?: SortingDef[];
-  onSortsChange?: (sorts: SortingDef[]) => void;
-  autoSort?: boolean;
-
-  // Pagination
-  page?: number;
-  onPageChange?: (page: number) => void;
-  totalPageCount?: number;
-  pageSize?: number;
-  displayPageCount?: number;
-
-  // Selection
-  selectionMode?: "single" | "multiple";
-  selection?: TItem[];
-  onSelectionChange?: (items: TItem[]) => void;
-  autoSelect?: boolean;
-  isItemSelectable?: (item: TItem) => boolean | string;
-
-  // Tree expansion
-  expandedItems?: TItem[];
-  onExpandedItemsChange?: (items: TItem[]) => void;
-  itemChildren?: (item: TItem, index: number) => TItem[] | undefined;
-
-  // Cell styling
-  cellClass?: (item: TItem, colKey: string) => string | undefined;
-  cellStyle?: (item: TItem, colKey: string) => string | undefined;
-
-  // Reordering
-  onItemsReorder?: (event: DataSheetReorderEvent<TItem>) => void;
-
-  class?: string;
-  children: JSX.Element;
-}
-```
-
-Advanced data grid with sorting, pagination, row selection, tree expansion, column reordering, and column configuration persistence.
-
-- `storageKey` — persists column configuration (width, visibility, order) to sync storage
-- `autoSort` — sorts items client-side without `onSortsChange`
-- `autoSelect` — manages selection state internally
-- `itemChildren` — enables tree-structured rows
-
-**Sub-component:** `DataSheet.Column`
-
-```typescript
-interface DataSheetColumnProps<TItem> {
-  key: string;
-  header?: string | string[];
-  headerContent?: () => JSX.Element;
-  headerStyle?: string;
-  summary?: () => JSX.Element;
-  tooltip?: string;
-  fixed?: boolean;
-  hidden?: boolean;
-  collapse?: boolean;
-  width?: string;
-  class?: string;
-  sortable?: boolean;
-  resizable?: boolean;
-  children: (ctx: DataSheetCellContext<TItem>) => JSX.Element;
-}
-
-interface DataSheetCellContext<TItem> {
-  item: TItem;
-  index: number;
-  row: number;
-  depth: number;
-}
-
-interface SortingDef {
-  key: string;
-  desc: boolean;
-}
-
-interface DataSheetReorderEvent<TItem> {
-  item: TItem;
-  targetItem: TItem;
-  position: "before" | "after" | "inside";
-}
-```
-
----
-
-## Calendar
-
-```typescript
-interface CalendarProps<TValue> extends Omit<JSX.HTMLAttributes<HTMLTableElement>, "children"> {
-  items: TValue[];
-  getItemDate: (item: TValue, index: number) => DateOnly;
-  renderItem: (item: TValue, index: number) => JSX.Element;
-  yearMonth?: DateOnly;
-  onYearMonthChange?: (value: DateOnly) => void;
-  weekStartDay?: number;
-  minDaysInFirstWeek?: number;
-}
-```
-
-Monthly calendar view that renders items on their corresponding dates. `getItemDate` maps items to dates. `renderItem` renders each item cell.
-
----
-
-## Kanban
-
-```typescript
-interface KanbanProps<TCardValue, TLaneValue> extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onDrop"> {
-  onDrop?: (info: KanbanDropInfo<TLaneValue, TCardValue>) => void;
-  selectedValues?: TCardValue[];
-  onSelectedValuesChange?: (values: TCardValue[]) => void;
-  children?: JSX.Element;
-}
-```
-
-Kanban board with drag-and-drop card management.
-
-**Sub-components:**
-- `Kanban.Lane` — `{ value?: TLaneValue; busy?: boolean; collapsible?: boolean; collapsed?: boolean; onCollapsedChange?: (collapsed: boolean) => void }`
-- `Kanban.Card` — `{ value?: TCardValue; draggable?: boolean; selectable?: boolean; contentClass?: string }`
-- `Kanban.LaneTitle` — lane title slot
-- `Kanban.LaneTools` — lane toolbar slot
-
----
-
-## Usage Examples
-
-```typescript
-import { DataSheet, Pagination } from "@simplysm/solid";
-
-<DataSheet
-  items={data()}
-  sorts={sorts()}
-  onSortsChange={setSorts}
-  page={page()}
-  onPageChange={setPage}
-  totalPageCount={totalPages()}
-  selectionMode="multiple"
-  selection={selected()}
-  onSelectionChange={setSelected}
-  storageKey="my-table"
->
-  <DataSheet.Column key="name" header="Name" sortable>
-    {(ctx) => ctx.item.name}
-  </DataSheet.Column>
-  <DataSheet.Column key="age" header="Age" sortable width="80px">
-    {(ctx) => ctx.item.age}
-  </DataSheet.Column>
-</DataSheet>
-```

package/docs/disclosure.md

@@ -1,146 +0,0 @@
-# Disclosure
-
-## Collapse
-
-```typescript
-interface CollapseProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  open?: boolean;
-}
-```
-
-Collapsible content panel with CSS transition. Content is hidden when `open` is `false`.
-
----
-
-## Dropdown
-
-```typescript
-interface DropdownProps {
-  position?: { x: number; y: number };
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  maxHeight?: number;
-  disabled?: boolean;
-  keyboardNav?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children: JSX.Element;
-}
-```
-
-Dropdown popup anchored to a trigger element. When `position` is provided instead of a trigger, the popup appears at the given absolute coordinates (useful for context menus). `keyboardNav` enables ArrowUp/Down navigation. Default `maxHeight` is 300px.
-
-**Sub-components:**
-- `Dropdown.Trigger` -- the element that opens the dropdown on click
-- `Dropdown.Content` -- the popup content
-
----
-
-## Dialog
-
-```typescript
-interface DialogProps {
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  withCloseButton?: boolean;
-  closeOnInteractOutside?: boolean;
-  closeOnEscape?: boolean;
-  resizable?: boolean;
-  draggable?: boolean;
-  mode?: "float" | "fill";
-  width?: number;
-  height?: number;
-  minWidth?: number;
-  minHeight?: number;
-  position?: "bottom-right" | "top-right";
-  headerStyle?: JSX.CSSProperties | string;
-  beforeClose?: () => boolean;
-  onCloseComplete?: () => void;
-  class?: string;
-}
-```
-
-Modal dialog with overlay. Supports both declarative (template) and programmatic usage.
-
-- `mode="float"` -- centered floating dialog (default)
-- `mode="fill"` -- full-screen dialog
-- `beforeClose` -- return `false` to prevent closing
-- `resizable` / `draggable` -- enable resize handles / drag-to-move (draggable defaults to `true`)
-- `withCloseButton` -- show close button (defaults to `true`)
-- `closeOnEscape` -- close on Escape key (defaults to `true`)
-
-**Sub-components:**
-- `Dialog.Header` -- dialog title bar
-- `Dialog.Action` -- dialog action buttons area
-
-### Programmatic API
-
-```typescript
-interface DialogContextValue {
-  show<P>(
-    component: Component<P>,
-    props: Omit<P, "close">,
-    options?: DialogShowOptions,
-  ): Promise<ExtractCloseResult<P> | undefined>;
-}
-
-interface DialogProviderProps {
-  closeOnEscape?: boolean;
-  closeOnInteractOutside?: boolean;
-}
-```
-
-Use `DialogProvider` and `useDialog()` for programmatic dialog management. The shown component receives a `close(result?)` prop to close the dialog and return a value. `DialogProvider` accepts default options for `closeOnEscape` and `closeOnInteractOutside`.
-
-```typescript
-const dialog = useDialog();
-const result = await dialog.show(MyDialogContent, { data }, {
-  width: 600,
-  withCloseButton: true,
-});
-```
-
----
-
-## Tabs
-
-```typescript
-interface TabsProps {
-  value?: string;
-  onValueChange?: (value: string) => void;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
-```
-
-Tab navigation. Content rendering is managed externally based on the selected `value`.
-
-**Sub-component:** `Tabs.Tab` -- `{ value: string; disabled?: boolean; class?: string; children?: JSX.Element }`
-
----
-
-## Usage Examples
-
-```typescript
-import { Dialog, Dropdown, Tabs, Collapse } from "@simplysm/solid";
-
-// Declarative dialog
-<Dialog open={isOpen()} onOpenChange={setIsOpen} width={500} withCloseButton>
-  <Dialog.Header>Edit User</Dialog.Header>
-  <form>...</form>
-  <Dialog.Action>
-    <Button onClick={() => setIsOpen(false)}>Cancel</Button>
-    <Button theme="primary" onClick={save}>Save</Button>
-  </Dialog.Action>
-</Dialog>
-
-// Tabs
-<Tabs value={tab()} onValueChange={setTab}>
-  <Tabs.Tab value="general">General</Tabs.Tab>
-  <Tabs.Tab value="settings">Settings</Tabs.Tab>
-</Tabs>
-<Show when={tab() === "general"}>General content</Show>
-<Show when={tab() === "settings"}>Settings content</Show>
-```