@kahitsan/ksui 0.45.0 → 0.46.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.45.0",
+  "version": "0.46.1",
   "description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/base/Modal.test.tsx

@@ -1,6 +1,5 @@
-import { describe, expect, it, vi } from "vitest";
-import { render } from "@solidjs/testing-library";
-import { Show, createSignal } from "solid-js";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render } from "@solidjs/testing-library";
 import Modal from "./Modal";
 
 // Modal is the most critical shared widget — it wraps a native <dialog> with
@@ -68,4 +67,71 @@ describe("Modal", () => {
     const card = container.querySelector(".ksui-modal-card")!;
     expect(card.className).toContain("danger");
   });
+
+  describe("sheet variant", () => {
+    // jsdom has no showModal()/close(); stand them in so a stacked dialog is open.
+    const proto = HTMLDialogElement.prototype;
+    const original = { showModal: proto.showModal, close: proto.close };
+    beforeEach(() => {
+      proto.showModal = function (this: HTMLDialogElement) {
+        this.setAttribute("open", "");
+      };
+      proto.close = function (this: HTMLDialogElement) {
+        this.removeAttribute("open");
+      };
+    });
+    afterEach(() => {
+      cleanup(); // unmount while the stubs still exist
+      proto.showModal = original.showModal;
+      proto.close = original.close;
+    });
+
+    it("calls onClose on Escape", () => {
+      const onClose = vi.fn();
+      render(() => (
+        <Modal variant="sheet" onClose={onClose}>
+          <p>sheet</p>
+        </Modal>
+      ));
+      window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+      expect(onClose).toHaveBeenCalledOnce();
+    });
+
+    it("leaves Escape to a dialog opened on top of it", () => {
+      const onSheetClose = vi.fn();
+      const onDialogClose = vi.fn();
+      const { container } = render(() => (
+        <Modal variant="sheet" onClose={onSheetClose}>
+          <Modal onClose={onDialogClose}>
+            <button type="button">inside</button>
+          </Modal>
+        </Modal>
+      ));
+      const dialog = container.querySelector("dialog")!;
+      expect(dialog.open).toBe(true);
+
+      // A browser delivers Escape as keydown (bubbling to window) and then
+      // fires cancel on the topmost modal dialog.
+      dialog
+        .querySelector("button")!
+        .dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+      dialog.dispatchEvent(new Event("cancel", { cancelable: true }));
+
+      expect(onSheetClose).not.toHaveBeenCalled();
+      expect(onDialogClose).toHaveBeenCalledOnce();
+    });
+
+    it("ignores an Escape keydown another handler already consumed", () => {
+      const onClose = vi.fn();
+      render(() => (
+        <Modal variant="sheet" onClose={onClose}>
+          <p>sheet</p>
+        </Modal>
+      ));
+      const e = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
+      e.preventDefault();
+      window.dispatchEvent(e);
+      expect(onClose).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/components/base/Modal.tsx

@@ -155,13 +155,28 @@ function DialogModal(local: LocalProps): JSX.Element {
   );
 }
 
+function openModalDialogs(): HTMLDialogElement[] {
+  const open = [...document.querySelectorAll<HTMLDialogElement>("dialog[open]")];
+  try {
+    return open.filter((d) => d.matches(":modal"));
+  } catch {
+    // Engines without :modal support; treat every open dialog as modal.
+    return open;
+  }
+}
+
 function SheetModal(local: LocalProps, size?: ModalSize): JSX.Element {
+  let overlayEl: HTMLDivElement | undefined;
+
   lockPullToRefresh();
   onCleanup(unlockPullToRefresh);
 
   const handleKey = (e: KeyboardEvent) => {
-    if (e.key !== "Escape") return;
+    if (e.key !== "Escape" || e.defaultPrevented) return;
     if (local.dismissable === false) return;
+    // A modal <dialog> stacked above this sheet owns Escape (it gets `cancel`);
+    // closing here too would discard the sheet underneath.
+    if (openModalDialogs().some((d) => !d.contains(overlayEl ?? null))) return;
     local.onClose();
   };
   if (typeof window !== "undefined") {
@@ -179,7 +194,7 @@ function SheetModal(local: LocalProps, size?: ModalSize): JSX.Element {
   // ModalLayerContext value is already ambient (an outer DialogModal's
   // dialogEl if nested inside one, otherwise the default null/document.body).
   return (
-    <div class="ksui-modal-sheet-overlay">
+    <div ref={overlayEl} class="ksui-modal-sheet-overlay">
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div class="ksui-modal-sheet-backdrop" onClick={handleBackdropClick} />
       <div

package/src/components/composite/TransactionForm.datetime.test.tsx

@@ -0,0 +1,130 @@
+// The date field is a date-only picker by default; supplying `setTime` turns it
+// into one native date-and-time input.
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@solidjs/testing-library";
+import TransactionForm, { type TransactionFormProps } from "./TransactionForm";
+
+function baseProps(overrides: Partial<TransactionFormProps> = {}): TransactionFormProps {
+  const noop = vi.fn();
+  return {
+    error: "",
+    saving: false,
+    category: "expense",
+    setCategory: noop,
+    subcategory: "",
+    setSubcategory: noop,
+    sourceAccount: "",
+    setSourceAccount: noop,
+    destAccount: "",
+    setDestAccount: noop,
+    amount: "",
+    setAmount: noop,
+    description: "",
+    setDescription: noop,
+    notes: "",
+    setNotes: noop,
+    date: "2026-09-10",
+    setDate: noop,
+    isPrivate: false,
+    setIsPrivate: noop,
+    sharedWith: [],
+    setSharedWith: noop,
+    sharedRoleCodes: [],
+    setSharedRoleCodes: noop,
+    backdateReason: "",
+    setBackdateReason: noop,
+    payee: "",
+    setPayee: noop,
+    payeeId: null,
+    setPayeeId: noop,
+    refNumber: "",
+    setRefNumber: noop,
+    taxType: "vat_inclusive",
+    setTaxType: noop,
+    hasEwt: false,
+    setHasEwt: noop,
+    ewtRate: "",
+    setEwtRate: noop,
+    payableKind: "",
+    setPayableKind: noop,
+    dueDate: "",
+    setDueDate: noop,
+    chequeNumber: "",
+    setChequeNumber: noop,
+    pdcStatus: "",
+    setPdcStatus: noop,
+    transferFeeEnabled: false,
+    setTransferFeeEnabled: noop,
+    transferFeeAmount: "",
+    setTransferFeeAmount: noop,
+    allowTransferFee: false,
+    pendingFiles: [],
+    setPendingFiles: noop,
+    accounts: [],
+    orgMembers: [],
+    shareableRoles: [],
+    isAdmin: true,
+    canShare: false,
+    isBackdated: false,
+    saleItems: [],
+    setSaleItems: noop,
+    saleClient: null,
+    setSaleClient: noop,
+    saleVoucher: null,
+    setSaleVoucher: noop,
+    saleManualDiscount: "",
+    setSaleManualDiscount: noop,
+    onSubmit: noop,
+    submitLabel: "Save",
+    ...overrides,
+  };
+}
+
+describe("TransactionForm date and time", () => {
+  it("keeps the date-only picker when no time setter is supplied", () => {
+    const { queryByTestId, getByText } = render(() => <TransactionForm {...baseProps()} />);
+    expect(queryByTestId("transactions-form-datetime")).toBeNull();
+    expect(getByText("Date *")).toBeTruthy();
+  });
+
+  it("shows one date-and-time input holding both values", () => {
+    const { getByTestId, getByText } = render(() => (
+      <TransactionForm {...baseProps({ time: "09:30:15", setTime: vi.fn() })} />
+    ));
+    const input = getByTestId("transactions-form-datetime") as HTMLInputElement;
+    expect(input.type).toBe("datetime-local");
+    expect(input.value).toBe("2026-09-10T09:30");
+    expect(getByText("Date & time *")).toBeTruthy();
+  });
+
+  it("splits an edit into the date and the time", () => {
+    const setDate = vi.fn();
+    const setTime = vi.fn();
+    const { getByTestId } = render(() => (
+      <TransactionForm {...baseProps({ time: "09:30", setDate, setTime })} />
+    ));
+    const input = getByTestId("transactions-form-datetime") as HTMLInputElement;
+    fireEvent.input(input, { target: { value: "2026-09-11T18:45" } });
+    expect(setDate).toHaveBeenCalledWith("2026-09-11");
+    expect(setTime).toHaveBeenCalledWith("18:45");
+  });
+
+  it("ignores a cleared value instead of wiping the date", () => {
+    const setDate = vi.fn();
+    const setTime = vi.fn();
+    const { getByTestId } = render(() => (
+      <TransactionForm {...baseProps({ time: "09:30", setDate, setTime })} />
+    ));
+    fireEvent.input(getByTestId("transactions-form-datetime"), { target: { value: "" } });
+    expect(setDate).not.toHaveBeenCalled();
+    expect(setTime).not.toHaveBeenCalled();
+  });
+
+  it("locks the field and says why for non-admins", () => {
+    const { getByTestId, getByText } = render(() => (
+      <TransactionForm {...baseProps({ time: "09:30", setTime: vi.fn(), isAdmin: false })} />
+    ));
+    expect((getByTestId("transactions-form-datetime") as HTMLInputElement).disabled).toBe(true);
+    expect(getByText("Only admins can change the date and time")).toBeTruthy();
+  });
+});

package/src/components/composite/TransactionForm.tsx

@@ -231,6 +231,11 @@ export interface TransactionFormProps {
   setNotes: (v: string) => void;
   date: string;
   setDate: (v: string) => void;
+  /** Wall-clock time of day for the transaction, `HH:MM` or `HH:MM:SS`.
+   *  Supplying `setTime` switches the date field to a single native
+   *  date-and-time input; leave both out to keep the date-only picker. */
+  time?: string;
+  setTime?: (v: string) => void;
   isPrivate: boolean;
   setIsPrivate: (v: boolean) => void;
   sharedWith: string[];
@@ -329,6 +334,10 @@ export default function TransactionForm(props: TransactionFormProps) {
 `,
   );
   const compact = () => props.layout === "compact";
+  const withTime = () => typeof props.setTime === "function";
+  // datetime-local wants exactly YYYY-MM-DDTHH:MM; a missing date reads as empty.
+  const dateTimeValue = () =>
+    props.date ? `${props.date}T${(props.time || "00:00").slice(0, 5)}` : "";
   const catConfig = () =>
     CATEGORY_FORM[props.category] || CATEGORY_FORM.expense;
   const [dragging, setDragging] = createSignal(false);
@@ -639,15 +648,48 @@ export default function TransactionForm(props: TransactionFormProps) {
           </Show>
 
           <div class={compact() ? "ks-transaction-compact-date" : undefined}>
-          <FormField label={compact() ? "TRANSACTION DATE" : "Date *"}>
-            <DatePicker
-              value={props.date}
-              onChange={(d: string | null) => d && props.setDate(d)}
-              disabled={!props.isAdmin}
-            />
+          <FormField
+            label={
+              withTime()
+                ? compact()
+                  ? "TRANSACTION DATE & TIME"
+                  : "Date & time *"
+                : compact()
+                ? "TRANSACTION DATE"
+                : "Date *"
+            }
+          >
+            <Show
+              when={withTime()}
+              fallback={
+                <DatePicker
+                  value={props.date}
+                  onChange={(d: string | null) => d && props.setDate(d)}
+                  disabled={!props.isAdmin}
+                />
+              }
+            >
+              <input
+                type="datetime-local"
+                data-testid="transactions-form-datetime"
+                aria-label="Transaction date and time"
+                value={dateTimeValue()}
+                disabled={!props.isAdmin}
+                required
+                onInput={(e) => {
+                  const v = e.currentTarget.value;
+                  if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(v)) return;
+                  props.setDate(v.slice(0, 10));
+                  props.setTime?.(v.slice(11, 16));
+                }}
+                class="w-full bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-3 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)] disabled:opacity-60"
+              />
+            </Show>
             <Show when={!props.isAdmin}>
               <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mt-0.5">
-                Only admins can change the date
+                {withTime()
+                  ? "Only admins can change the date and time"
+                  : "Only admins can change the date"}
               </p>
             </Show>
           </FormField>