@simplysm/solid 13.0.85 → 13.0.88

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

@@ -9,7 +9,6 @@ import { useNotification } from "../../feedback/notification/NotificationProvide
 import { Icon } from "../../display/Icon";
 import { bg, text } from "../../../styles/base.styles";
 import { type ComponentSize, gap, pad } from "../../../styles/control.styles";
-import { themeTokens } from "../../../styles/theme.styles";
 import { Button } from "../Button";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
 
@@ -20,53 +19,33 @@ interface StatePresetItem<TValue> {
   state: TValue;
 }
 
-type StatePresetSize = ComponentSize;
-
 export interface StatePresetProps<TValue> {
   storageKey: string;
   value: TValue;
   onValueChange: (value: TValue) => void;
-  size?: StatePresetSize;
+  size?: ComponentSize;
   class?: string;
   style?: JSX.CSSProperties;
 }
 
 // ── Style constants ──
 
-const chipSizeClasses: Record<StatePresetSize, string> = {
+const sizeClasses: Record<ComponentSize, string> = {
   md: pad.md,
-  xs: clsx(pad.xs, "text-sm"),
+  xs: pad.xs,
   sm: pad.sm,
   lg: pad.lg,
-  xl: clsx(pad.xl, "text-lg"),
-};
-
-const iconBtnSizeClasses: Record<StatePresetSize, string> = {
-  md: "p-0.5",
-  xs: "p-0",
-  sm: "p-0.5",
-  lg: "p-1",
-  xl: "p-1.5",
+  xl: pad.xl,
 };
 
-const starBtnSizeClasses: Record<StatePresetSize, string> = {
-  md: "p-1",
-  xs: "p-0",
-  sm: "p-0.5",
-  lg: "p-1.5",
-  xl: "p-2",
+const iconSizeMap: Record<ComponentSize, string> = {
+  xs: "0.875em",
+  sm: "1em",
+  md: "1.25em",
+  lg: "1.5em",
+  xl: "1.75em",
 };
 
-const inputSizeClasses: Record<StatePresetSize, string> = {
-  md: clsx(pad.md, "w-24"),
-  xs: clsx("w-16", pad.xs, "text-sm"),
-  sm: clsx(pad.sm, "w-20"),
-  lg: clsx(pad.lg, "w-32"),
-  xl: clsx(pad.xl, "w-36 text-lg"),
-};
-
-const iconSize = "0.85em";
-
 // ── Component ──
 
 function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element {
@@ -191,31 +170,29 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
 
   // ── Render ──
 
-  const resolvedIconBtnClass = () =>
-    twMerge("rounded-full", iconBtnSizeClasses[local.size ?? "md"]);
+  const resolvedSize = () => local.size ?? "md";
 
   return (
     <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={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"],
-        )}
+      <Button
+        size={local.size}
+        variant="ghost"
+        class="rounded-full text-warning-500"
         onClick={handleStartAdd}
         title={i18n.t("statePreset.addPreset")}
       >
-        <Icon icon={IconStar} size={iconSize} />
-      </button>
+        {"\u200B"}
+        <Icon icon={IconStar} size={iconSizeMap[resolvedSize()]} />
+      </Button>
 
       {/* Preset chips */}
       <For each={presets()}>
         {(preset, index) => (
           <span
             class={twMerge(
-              clsx("inline-flex items-center", gap.md, "rounded-full", bg.subtle, text.default, "cursor-default"),
-              chipSizeClasses[local.size ?? "md"],
+              clsx("inline-flex items-center", gap.md, "rounded-full border border-transparent", bg.subtle, text.default, "cursor-default"),
+              sizeClasses[resolvedSize()],
             )}
           >
             <button
@@ -226,24 +203,22 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
             >
               {preset.name}
             </button>
-            <Button
-              variant="ghost"
-              size="xs"
-              class={resolvedIconBtnClass()}
+            <button
+              type="button"
+              class="cursor-pointer rounded-full opacity-50 hover:opacity-100 focus:outline-none"
               onClick={() => handleOverwrite(index())}
               title={i18n.t("statePreset.overwrite")}
             >
-              <Icon icon={IconDeviceFloppy} size={iconSize} />
-            </Button>
-            <Button
-              variant="ghost"
-              size="xs"
-              class={resolvedIconBtnClass()}
+              <Icon icon={IconDeviceFloppy} size={iconSizeMap[resolvedSize()]} />
+            </button>
+            <button
+              type="button"
+              class="cursor-pointer rounded-full opacity-50 hover:opacity-100 focus:outline-none"
               onClick={() => handleDelete(index())}
               title={i18n.t("statePreset.deletePreset")}
             >
-              <Icon icon={IconX} size={iconSize} />
-            </Button>
+              <Icon icon={IconX} size={iconSizeMap[resolvedSize()]} />
+            </button>
           </span>
         )}
       </For>
@@ -257,8 +232,8 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
           }}
           type="text"
           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"],
+            clsx("inline-flex items-center rounded-full leading-normal", bg.subtle, text.default, "border border-transparent focus:outline-none focus:ring-1 focus:ring-primary-400", text.placeholder),
+            sizeClasses[resolvedSize()],
           )}
           placeholder={i18n.t("statePreset.namePlaceholder")}
           autocomplete="one-time-code"

package/src/components/layout/FormGroup.tsx

@@ -43,7 +43,7 @@ const FormGroupBase: ParentComponent<FormGroupProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "inline"]);
 
   const getClassName = () => twMerge(
-    local.inline ? "inline-flex flex-row flex-wrap items-center gap-2" : "inline-flex flex-col gap-2",
+    local.inline ? "inline-flex flex-row flex-wrap items-center gap-x-2 gap-y-1" : "inline-flex flex-col gap-2",
     local.class,
   );
 

package/src/components/layout/FormTable.tsx

@@ -11,7 +11,7 @@ export interface FormTableItemProps extends JSX.TdHTMLAttributes<HTMLTableCellEl
 
 const FormTableRow: ParentComponent<JSX.HTMLAttributes<HTMLTableRowElement>> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
-  return <tr class={twMerge("[&>*:last-child]:pr-0 last:[&>*]:pb-0", local.class)} {...rest}>{local.children}</tr>;
+  return <tr class={twMerge("[&>td:last-child]:pr-0 [&:last-child>*]:pb-0", local.class)} {...rest}>{local.children}</tr>;
 };
 
 const FormTableItem: ParentComponent<FormTableItemProps> = (props) => {
@@ -26,9 +26,9 @@ const FormTableItem: ParentComponent<FormTableItemProps> = (props) => {
   return (
     <>
       <Show when={local.label}>
-        <th class="w-0 whitespace-nowrap pb-1 pl-1 pr-1.5 text-right align-middle">{local.label}</th>
+        <th class="w-0 whitespace-nowrap pb-1 pr-2 text-right align-middle">{local.label}</th>
       </Show>
-      <td class={twMerge("pb-1 pr-1.5 align-middle", local.class)} colspan={effectiveColspan()} {...rest}>
+      <td class={twMerge("pb-1 pr-2 align-middle", local.class)} colspan={effectiveColspan()} {...rest}>
         {local.children}
       </td>
     </>

package/src/components/layout/sidebar/Sidebar.tsx

@@ -216,7 +216,6 @@ const MenuContext = createContext<MenuContextValue>();
  */
 const SidebarMenu: Component<SidebarMenuProps> = (props) => {
   const [local, rest] = splitProps(props, ["menus", "class"]);
-  const i18n = useI18n();
 
   const location = useLocation();
 
@@ -252,9 +251,9 @@ const SidebarMenu: Component<SidebarMenuProps> = (props) => {
   return (
     <MenuContext.Provider value={{ initialOpenItems }}>
       <div {...rest} data-sidebar-menu class={getClassName()}>
-        <div class={clsx("px-4 py-2 text-xs font-bold", text.muted, "uppercase tracking-wider")}>{i18n.t("sidebarMenu.menu")}</div>
+        <div class={clsx("px-3.5 py-1 text-sm font-bold", text.muted, "uppercase tracking-wider")}>MENU</div>
         <List inset>
-          <For each={local.menus}>{(menu) => <MenuItem menu={menu} size="lg" />}</For>
+          <For each={local.menus}>{(menu) => <MenuItem menu={menu} />}</For>
         </List>
       </div>
     </MenuContext.Provider>

package/src/providers/i18n/locales/en.ts

@@ -83,6 +83,8 @@ export default {
   },
   permissionTable: {
     permissionItem: "Permission Item",
+    use: "Use",
+    edit: "Edit",
   },
   crudSheet: {
     save: "Save",
@@ -180,9 +182,6 @@ export default {
   numpad: {
     enter: "ENT",
   },
-  sidebarMenu: {
-    menu: "MENU",
-  },
   validation: {
     required: "This is a required field",
     requiredField: "Required field",

package/src/providers/i18n/locales/ko.ts

@@ -83,6 +83,8 @@ export default {
   },
   permissionTable: {
     permissionItem: "권한 항목",
+    use: "사용",
+    edit: "편집",
   },
   crudSheet: {
     save: "저장",
@@ -180,9 +182,6 @@ export default {
   numpad: {
     enter: "입력",
   },
-  sidebarMenu: {
-    menu: "메뉴",
-  },
   validation: {
     required: "필수 입력 항목입니다",
     requiredField: "필수 항목",

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/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>
-```