@threestarsoftware/tssgrid 0.1.35 → 0.1.37

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.37] - 2026-11-06
+
+### 追加（公式フレームワークアダプタ）
+- **React / Vue 3 の薄い公式アダプタを追加**（`@threestarsoftware/tssgrid/react`・`@threestarsoftware/tssgrid/vue`）。競合（`ag-grid-react` / `@handsontable/react`）と同じ「コアはフレームワーク非依存のまま・薄いコンポーネントがライフサイクルと props を橋渡し」の形。**コアは無依存を維持**＝`react` / `vue` は **peerDependency（任意・`peerDependenciesMeta.optional`）**、アダプタは `React.createElement` / `Vue.h` で手書き＝**ビルド不要（UMD）**。
+  - グリッドは**アンコントロールド**：マウントで生成・アンマウントで `destroy()`、**cell を React/Vue で描かない**（高速）。値は **ref で公開した grid 本体（命令API）** ＋ `onAfterChange` 等のコールバック。`data` プロップは参照が変わった時だけ `setData`（毎レンダー新配列を渡すとリセット＝頻繁な更新は命令APIで）。
+  - React: `<TssGridReact columns={..} data={..} onAfterChange={..} ref={ref} />`、`ref.current` が grid 本体。StrictMode 二重マウント安全（`destroy` 冪等）、SSR/Next 安全（構築は `useEffect`＝クライアント専用）。
+  - Vue: `<TssGridVue :columns :data :options="{ onAfterChange }" ref="g" />`、`g.grid()` が grid 本体。
+  - `columns/data/plugins/options` と全 `on*` コールバックをそのまま透過。型（`.d.ts`）付き。例 `examples/react.html` / `examples/vue.html`（CDN UMD のノービルドデモ）。
+
+## [0.1.36] - 2026-11-06
+
+inline ピッカー3兄弟（**tss-time / tss-calendar / tss-datetime**）に共通して潜んでいた「ポップアップの `<select>` が使えない／確定がピッカー内部の値を書き戻す／編集中の表示が食い違う」を一掃。土台としてコアに2つの affordance を追加。
+
+### 修正（コア）
+- **inline エディタの補助ポップアップ（`<select>` 等 focus を奪う要素を含む）へフォーカスが移っても編集を閉じない**ようにした。従来は共有 input が blur した瞬間に確定＋ポップアップ破棄だったため、**時/分/年/月のプルダウンを開こうとクリックすると閉じてしまい選べなかった**。inline ctx に `setPopup(el)` を追加し、`blur` の `relatedTarget` が登録ポップアップ内なら編集継続。
+- **カスタム `editor` を付けた date/time 列はネイティブ `<input type="date|time">` を重ねない**ようにした（`_nativeInputType` が `cfg.editor` を見る）。従来は `picker:false` を書き忘れるとネイティブ入力が裏に残り、**ブラウザのロケールで `09:00 AM` のように AM/PM 表示が出てセル表示（24h）と食い違っていた**。`picker:false` が無くてもカスタムエディタが入力/表示を一貫して握る。
+
+### 修正（プラグイン）
+- **`tss-time`**: inline で**打鍵後にポップアップの［決定］/Enter を押すと、select が持つ元の値を書き戻して打鍵が消えていた**のを修正（inline は共有 input を確定・select を触ったら input へミラー＋フォーカスを input へ戻す）。`hour12` 列で **AM/PM を切り替えると編集中だけ 24h 表記（`06:30`）がちらついた**のも、ミラーを 12h 表示形（`6:30 AM`・parser も受ける）にして解消。上記コア修正と合わせ、**時/分のプルダウンが選べる**ように。
+- **`tss-calendar`**: **年/月のプルダウンを押すとポップアップが閉じて選べなかった**のを修正（`setPopup` 登録＋選択後に共有 input へフォーカスを戻す）。値の確定（日クリック）・打鍵追従（`onInput`）は従来どおり。
+- **`tss-datetime`**: 同じく**年/月/時/分のプルダウンが選べなかった**のに加え、**打鍵がピッカーに反映されない／ピッカー操作が共有 input に出ない／`<select>` 変更後にクリックアウトすると表示文字列がそのまま生保存されて保存値が壊れる**（`YYYY-MM-DDTHH:MM` にならない）という問題を一括修正。**`TssDatetime.parse`（表示形→保存形。`format` の逆）を新設**し、列に `parse` が無ければ自動付与＝打鍵追従も確定（blur/Enter/決定）の round-trip も成立。ピッカー操作は表示形で共有 input にミラー＋フォーカスを戻す。保存値は常に `YYYY-MM-DDTHH:MM`。
+
 ## [0.1.35] - 2026-11-06
 
 ### 追加（プラグイン）

package/README.md

@@ -78,9 +78,39 @@ const { TssGrid, HistoryManager } = require('@threestarsoftware/tssgrid');
 
 ## フレームワークで使う（React / Vue / Angular）
 
-専用ラッパーは**作りません**。vanilla on DOM なので CRA/Vite/Next/Webpack/Angular/Nuxt でそのまま動きます。コツは **マウント時に生成し、アンマウント時に `grid.destroy()`** するだけ（リスナ・ResizeObserver・DOM を後始末。idempotent）。
+**React / Vue には薄い公式アダプタ**（`@threestarsoftware/tssgrid/react`・`/vue`）があります。コアは無依存のまま＝`react`・`vue` は **peerDependency（任意）**、アダプタは `React.createElement` / `Vue.h` で手書き＝**ノービルド**。グリッドは「アンコントロールド」（マウントで生成・アンマウントで `destroy()`・**cell は React/Vue で描かない**＝高速）、値は **ref で公開した grid 本体（命令API）** ＋ `onAfterChange` 等のコールバック、`data` プロップは「差し替え」用（参照が変わった時だけ `setData`）。動く例: [`examples/react.html`](https://tssgrid.threestarsoftware.co.jp/examples/react.html) / [`examples/vue.html`](https://tssgrid.threestarsoftware.co.jp/examples/vue.html)。
 
-**React**:
+**React（公式アダプタ）**:
+```jsx
+import { useRef } from 'react';
+import { TssGridReact } from '@threestarsoftware/tssgrid/react';
+import '@threestarsoftware/tssgrid/tssgrid.css';
+
+function Grid({ columns, data }) {
+  const ref = useRef(null);   // ref.current = grid 本体（命令API）
+  return <TssGridReact columns={columns} data={data}
+    onAfterChange={(ch, src) => console.log(ch, src)} ref={ref} />;
+  // 例: ref.current.sortBy('age','desc') / ref.current.getRows()
+}
+```
+
+**Vue 3（公式アダプタ）**:
+```vue
+<script setup>
+import { ref } from 'vue';
+import { TssGridVue } from '@threestarsoftware/tssgrid/vue';
+import '@threestarsoftware/tssgrid/tssgrid.css';
+const g = ref(null);   // g.value.grid() = grid 本体
+</script>
+<template>
+  <TssGridVue :columns="columns" :data="data"
+    :options="{ onAfterChange: (ch, src) => console.log(ch, src) }" ref="g" />
+</template>
+```
+
+アダプタを使わず**依存ゼロで直接**使うこともできます（vanilla on DOM。CRA/Vite/Next/Webpack/Angular/Nuxt でそのまま。コツは **マウント時に生成し、アンマウント時に `grid.destroy()`**）。
+
+**React（直接）**:
 ```jsx
 import { useEffect, useRef } from 'react';
 import { TssGrid } from '@threestarsoftware/tssgrid';
@@ -562,6 +592,8 @@ new TssGrid(el, { columns: [{ type: 'time', editor: t }] });
 ```
 - `opts`: `step`(分刻み, 既定1) / `hour12`(AM/PM 表示, 既定false) / `icon`(既定 `'🕐'`) / `openOnClick`(既定true) / `className`。
 - 🕐 を**シングルクリックで開閉**、**現在**/**決定**ボタン、キーボード（Enter 決定 / Esc 取消）、外側クリックで採用、フィルで下へコピー。見た目は `--time-*` 変数と `tss-time-*` クラスで自由に。
+- カスタム `editor` を付けた列は**ネイティブ `<input type="time">` を重ねません**（`picker:false` を書かなくてもOK）。`hour12` 列は編集中も **12h 表示**で一貫（保存は 24h）。
+- **日付＋時刻**は姉妹プラグイン `tss-datetime`（`editor: TssDatetime({ step: 5 }), format: TssDatetime.format`）。保存値は `'YYYY-MM-DDTHH:MM'`、表示は曜日つき。表示形→保存形の逆変換 **`TssDatetime.parse`**（列に `parse` 未指定なら自動付与）で、打鍵追従も確定の round-trip も成立。年/月/時/分のプルダウンは inline でもそのまま選べます。
 
 ### 同梱プラグイン: セルのコメント（tss-comment・Excel のメモ風）
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
   "license": "MIT",
   "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",
@@ -67,9 +67,29 @@
       "types": "./plugins/tss-comment.d.ts",
       "default": "./plugins/tss-comment.js"
     },
+    "./react": {
+      "types": "./react/index.d.ts",
+      "default": "./react/index.js"
+    },
+    "./vue": {
+      "types": "./vue/index.d.ts",
+      "default": "./vue/index.js"
+    },
     "./plugins/*": "./plugins/*",
     "./package.json": "./package.json"
   },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
   "unpkg": "src/tssgrid.js",
   "jsdelivr": "src/tssgrid.js",
   "sideEffects": [
@@ -83,6 +103,8 @@
     "src/tssgrid.css",
     "src/tssgrid.d.ts",
     "plugins/",
+    "react/",
+    "vue/",
     "README.md",
     "CHANGELOG.md",
     "LICENSE"

package/plugins/tss-calendar.js

@@ -34,7 +34,7 @@
     var ty = new Date().getFullYear();
     var yrLo = opts.yearMin || (minD ? minD.getFullYear() : ty - 12);
     var yrHi = opts.yearMax || (maxD ? maxD.getFullYear() : ty + 12);
-    var pop = null, view = null, sel = null, focus = null, ref = null, done = false, outside = null;
+    var pop = null, view = null, sel = null, focus = null, ref = null, done = false, outside = null, ictx = null;
     var inline = opts.inline !== false;   // true=共有 input に乗る（直打ち可・矢印は本体に返す）／false=従来のフォーカス奪取型
 
     // ── 範囲選択（range）: 連続した日を1回の編集で選ぶ（休暇申請の開始〜終了 等）───────────
@@ -134,6 +134,8 @@
       var t = e.target;
       if (t.classList && t.classList.contains('tss-cal-sel-yr')) { view = new Date(+t.value, view.getMonth(), 1); render(); }
       else if (t.classList && t.classList.contains('tss-cal-sel-mon')) { view = new Date(view.getFullYear(), +t.value, 1); render(); }
+      // 年/月を選んだ後は共有 input にフォーカスを戻す（select は render で作り直され、残すと焦点が宙に浮く）。
+      if (ictx && ictx.inline && ictx.input) { try { ictx.input.focus(); } catch (err) {} }
     }
     function onKey(e) {
       if (e.target && e.target.tagName === 'SELECT') return;   // 年/月プルダウン操作中は日移動しない
@@ -161,9 +163,9 @@
       try { rc.td.title = rangeTipOf(aIso, bIso); } catch (e) { /* noop */ }
     }
     function clearTip() { if (rc && rc.td) { try { rc.td.title = ''; } catch (e) { /* noop */ } } }
-    function show(anchor, value, onPick, onCancel, rangeCfg) {
+    function show(anchor, value, onPick, onCancel, rangeCfg, ctx) {
       teardown();   // 既に開いていれば先に片付ける（前の pop 除去＋outside リスナ解除・open-while-open の取り残し防止）
-      done = false; rc = rangeCfg || null; rangeStart = null; hoverEnd = null;
+      done = false; rc = rangeCfg || null; rangeStart = null; hoverEnd = null; ictx = ctx || null;
       rangeActive = rc ? (isRangeValue(value) || !!rc.def) : false;   // 既存値が範囲 or rangeDefault なら ON で開く
       sel = parseISO(value);
       // range の既存値（'YYYY/MM/DD～…' 等）は parseISO では取れない＝先頭日を緩く読んで月を合わせる。
@@ -181,13 +183,14 @@
       ref = { pick: onPick, cancel: onCancel };
       // inline は「外側クリック/フォーカス」を本体（_commitActive / blur）が持つ＝二重に閉じない・共有 input から
       // フォーカスを奪わない（＝打ち続けられる）。矢印/Enter/Esc も本体の既定に返す（onKey は pop 未フォーカスなので発火しない）。
-      if (inline) return;
+      // ★ ポップアップを本体に登録＝年/月の <select> へフォーカスが移っても編集を閉じない（②）。
+      if (inline) { if (ictx && ictx.inline && ictx.setPopup) ictx.setPopup(pop); return; }
       // 外側クリックで閉じる。ただしアンカー（開いた元セル）は除外＝再クリックはグリッド側でトグル処理させる
       outside = function (e) { if (pop && !pop.contains(e.target) && !(anchor && anchor.contains && anchor.contains(e.target))) cancel(); };
       setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
       pop.focus();
     }
-    function teardown() { clearTip(); if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } }
+    function teardown() { clearTip(); if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } ictx = null; }
     function pick(d) {
       if (done) return;
       if (rc && rangeActive) {   // トグル ON＝2クリック範囲
@@ -206,7 +209,7 @@
         var rangeMode = typeof rangeOpt === 'function' ? !!rangeOpt(ctx) : !!rangeOpt;   // この行で範囲を使えるか（半休行は false＝トグル無し）
         var def = typeof rangeDefault === 'function' ? !!rangeDefault(ctx) : !!rangeDefault;  // トグル初期ON/OFF（行ごと可）
         var cfg = rangeMode ? { td: ctx.td, def: def } : null;
-        show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }, cfg);
+        show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }, cfg, ctx);
       },
       close: function () { teardown(); },
       icon: opts.icon != null ? opts.icon : '📅',     // セル右端に表示する合図（opts.icon:'' で消せる）

package/plugins/tss-datetime.js

@@ -38,8 +38,16 @@
     var yrLo = opts.yearMin || (minD ? minD.getFullYear() : ty - 12);
     var yrHi = opts.yearMax || (maxD ? maxD.getFullYear() : ty + 12);
 
-    var pop = null, view = null, selD = null, selH = null, selM = null, ref = null, done = false, outside = null;
+    var pop = null, view = null, selD = null, selH = null, selM = null, ref = null, done = false, outside = null, ictx = null;
     var inline = opts.inline !== false;   // true=共有 input に乗る（直打ち可・矢印は本体に返す）／false=従来のフォーカス奪取型
+    // inline: ピッカー操作の結果を共有 input に「表示形」で反映＋フォーカスを input に戻す。
+    // これで select へ移っても閉じず（②）、編集中の表示も一致（④）、クリックアウト確定も壊れない。
+    function syncInput() {
+      if (!(ictx && ictx.inline && ictx.input)) return;
+      var v = value();
+      ictx.input.value = v === '' ? '' : TssDatetime.format(v, { weekLabels: weekLabels });
+      try { ictx.input.focus(); } catch (e) {}
+    }
 
     function dDisabled(d) { if (minD && d < minD) return true; if (maxD && d > maxD) return true; return false; }
 
@@ -123,10 +131,10 @@
     function onClick(e) {
       var t = e.target;
       var nav = t.getAttribute && t.getAttribute('data-nav');
-      if (nav) { view = new Date(view.getFullYear(), view.getMonth() + (+nav), 1); render(); return; }
+      if (nav) { view = new Date(view.getFullYear(), view.getMonth() + (+nav), 1); render(); syncInput(); return; }
       var dd = t.getAttribute && t.getAttribute('data-d');
-      if (dd) { readTime(); var d = parseISOd(dd); if (!dDisabled(d)) { selD = d; render(); } return; }   // 日付選択しても閉じない（時刻も決めるため）
-      if (t.classList.contains('tss-dt-now')) { var now = new Date(); selD = now; selH = now.getHours(); selM = Math.round(now.getMinutes() / step) * step; if (selM >= 60) selM = 60 - step; view = new Date(now.getFullYear(), now.getMonth(), 1); render(); return; }
+      if (dd) { readTime(); var d = parseISOd(dd); if (!dDisabled(d)) { selD = d; render(); syncInput(); } return; }   // 日付選択しても閉じない（時刻も決めるため）
+      if (t.classList.contains('tss-dt-now')) { var now = new Date(); selD = now; selH = now.getHours(); selM = Math.round(now.getMinutes() / step) * step; if (selM >= 60) selM = 60 - step; view = new Date(now.getFullYear(), now.getMonth(), 1); render(); syncInput(); return; }
       if (t.classList.contains('tss-dt-clear')) { commit(''); return; }
       if (t.classList.contains('tss-dt-ok')) { commit(value()); return; }
     }
@@ -135,14 +143,15 @@
       if (t.classList.contains('tss-cal-sel-yr')) { view = new Date(+t.value, view.getMonth(), 1); render(); }
       else if (t.classList.contains('tss-cal-sel-mon')) { view = new Date(view.getFullYear(), +t.value, 1); render(); }
       else if (t.classList.contains('tss-time-h') || t.classList.contains('tss-time-m') || t.classList.contains('tss-time-ap')) { readTime(); var ro = pop.querySelector('.tss-dt-readout'); if (ro) ro.innerHTML = readoutHTML(); }
+      syncInput();   // 年/月/時/分/AM-PM いずれの変更も共有 input（表示形）へ反映＋input へフォーカスを戻す
     }
     function onKey(e) {
       if (e.key === 'Escape') { e.preventDefault(); cancel(); }
       else if (e.key === 'Enter') { e.preventDefault(); commit(value()); }
     }
-    function show(anchor, val, onPick, onCancel) {
+    function show(anchor, val, onPick, onCancel, ctx) {
       teardown();   // 既に開いていれば先に片付ける（open-while-open の取り残し防止・tss-calendar と同方針）
-      done = false;
+      done = false; ictx = ctx || null;
       var p = parseDT(val), tp = p ? null : parseTimeOnly(val);   // 日付付き or 時刻のみ
       selD = p ? p.d : null;
       selH = p ? p.h : (tp ? tp.h : null);
@@ -156,21 +165,36 @@
       pop.addEventListener('keydown', onKey);
       render(); place(anchor);
       ref = { pick: onPick, cancel: onCancel };
-      if (inline) return;   // inline は外側クリック/フォーカスを本体が持つ＝共有 input から奪わない（打ち続けられる）
+      // ★ ポップアップを本体に登録＝年/月/時/分の <select> へフォーカスが移っても編集を閉じない（②）。
+      if (inline) { if (ictx && ictx.inline && ictx.setPopup) ictx.setPopup(pop); return; }   // inline は外側クリック/フォーカスを本体が持つ（打ち続けられる）
       outside = function (e) { if (pop && !pop.contains(e.target) && !(anchor && anchor.contains && anchor.contains(e.target))) commit(value()); };   // 外側クリックは確定（time と同方針）
       setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
       pop.focus();
     }
-    function teardown() { if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } }
+    function teardown() { if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } ictx = null; }
     function commit(v) { if (done) return; done = true; var f = ref.pick; teardown(); f(v); }
     function cancel() { if (done) return; done = true; var f = ref.cancel; teardown(); if (f) f(); }
 
     return {
-      open: function (ctx) { show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }); },
+      open: function (ctx) {
+        // 列に parse が無ければ付与＝表示形↔保存形の round-trip（打鍵追従・blur/Enter 確定）を成立させる。
+        if (ctx.grid && typeof ctx.c === 'number') { var cc = ctx.grid.colCfg(ctx.c); if (cc && typeof cc.parse !== 'function') cc.parse = TssDatetime.parse; }
+        show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }, ctx);
+      },
       close: function () { teardown(); },
       icon: opts.icon != null ? opts.icon : '📅',
       openOnClick: opts.openOnClick !== false,
       inline: inline,   // true=共有 input に乗る＝日時をそのまま直打ちできる（矢印/Enter/Esc は本体の既定）
+      // inline のみ: 打った内容にピッカーが追従（ctx.parseCell＝セルの確定と同じ読み方。上で付けた parse を使う）。
+      onInput: inline ? function (v, ctx) {
+        if (!pop) return;
+        var iso = null; try { iso = ctx.parseCell ? ctx.parseCell(v) : v; } catch (e) { iso = null; }
+        var p = parseDT(iso), tp = p ? null : parseTimeOnly(iso);
+        if (!p && !tp) return;   // 打ちかけ/不正はピッカーを動かさない
+        if (p) { selD = p.d; if (p.h != null) selH = p.h; if (p.mi != null) selM = p.mi; view = new Date(p.d.getFullYear(), p.d.getMonth(), 1); }
+        else { selH = tp.h; selM = tp.m; }
+        render();
+      } : undefined,
       openAt: function (anchorEl, val, onPick) { show(anchorEl, val, function (v) { onPick(v); }, null); },
     };
   }
@@ -185,6 +209,23 @@
     return d.getFullYear() + '/' + pad(d.getMonth() + 1) + '/' + pad(d.getDate()) + wd + t;
   };
 
+  // 表示形 → 保存形。format の逆。'YYYY/MM/DD(曜) HH:MM'・'YYYY-MM-DDTHH:MM'・'YYYY/MM/DD'・'HH:MM' を受け、
+  // 'YYYY-MM-DDTHH:MM'（または 'YYYY-MM-DD' / 'HH:MM'）へ正規化。これを列 parse に付けると、打鍵追従も
+  // 確定（blur/Enter/決定）の round-trip も成立する（inline で editor が入力/表示を握るのに必須）。解釈不可は素通し。
+  TssDatetime.parse = function (v) {
+    var s = String(v == null ? '' : v).trim();
+    if (s === '') return '';
+    var m = /^(\d{4})[\/\-](\d{1,2})[\/\-](\d{1,2})(?:\s*\([^)]*\))?(?:[ T]+(\d{1,2}):(\d{2}))?/.exec(s);
+    if (m) {
+      var iso = m[1] + '-' + pad(+m[2]) + '-' + pad(+m[3]);
+      if (m[4] != null) iso += 'T' + pad(+m[4]) + ':' + pad(+m[5]);
+      return iso;
+    }
+    var t = /^(\d{1,2}):(\d{2})$/.exec(s);
+    if (t) return pad(+t[1]) + ':' + pad(+t[2]);
+    return s;
+  };
+
   if (typeof module !== 'undefined' && module.exports) module.exports = TssDatetime;
   else root.TssDatetime = TssDatetime;
 })(typeof self !== 'undefined' ? self : this);

package/plugins/tss-time.js

@@ -15,7 +15,7 @@
     opts = opts || {};
     var step = Math.max(1, opts.step || 1);
     var hour12 = !!opts.hour12;
-    var pop = null, ref = null, done = false, outside = null;
+    var pop = null, ref = null, done = false, outside = null, ictx = null;   // ictx: inline の ctx（共有 input が真実）
     var inline = opts.inline !== false;   // true=共有 input に乗る（直打ち可・矢印は本体に返す）／false=従来のフォーカス奪取型
 
     function opt(val, label, sel) { return '<option value="' + val + '"' + (sel ? ' selected' : '') + '>' + label + '</option>'; }
@@ -45,10 +45,24 @@
       if (hour12 && aS) { var ap = aS.value; h = ap === 'PM' ? (h === 12 ? 12 : h + 12) : (h === 12 ? 0 : h); }
       return pad(h) + ':' + pad(m);
     }
+    // 共有 input に見せる文字列。hour12 は 12h 表示形（"6:30 PM"＝列のセル表示と一致・parser も受ける）、
+    // それ以外は 24h（= 保存値 = 表示）。これで編集中に 24h がちらっと出る食い違いを無くす。
+    function readDisplay() {
+      var hS = pop.querySelector('.tss-time-h'), mS = pop.querySelector('.tss-time-m'), aS = pop.querySelector('.tss-time-ap');
+      if (!hS || hS.value === '' || mS.value === '') return readValue();
+      if (hour12 && aS) return (+hS.value) + ':' + pad(+mS.value) + ' ' + aS.value;
+      return readValue();
+    }
     function setNow() {
       var d = new Date(), m = Math.round(d.getMinutes() / step) * step; if (m >= 60) m = 60 - step;
       render({ h: d.getHours(), m: m });
+      mirrorToInput();   // inline: 現在ボタンの結果も共有 input へ
     }
+    // inline のとき、select の内容を共有 input に流し込む（確定はしない）。これで「打つ」と「選ぶ」が input に集約。
+    // 選び終えたらフォーカスを共有 input に戻す＝以降の「外クリックで確定」等が本体の既定どおり効く。
+    function mirrorToInput() { if (ictx && ictx.inline && ictx.input) { if (ictx.setValue) { var v = readDisplay(); if (v !== '') ictx.input.value = v; } try { ictx.input.focus(); } catch (e) {} } }
+    // 確定: inline は共有 input（打鍵 or ミラー済み）を真実として確定／非 inline は select を真実に。
+    function commitFinal() { if (ictx && ictx.inline && ictx.input) commit(ictx.input.value); else commit(readValue()); }
     function place(anchor) {
       var r = anchor.getBoundingClientRect();
       pop.style.left = Math.max(2, Math.min(r.left, window.innerWidth - pop.offsetWidth - 6)) + 'px';
@@ -58,34 +72,35 @@
     }
     function onClick(e) {
       if (e.target.classList.contains('tss-time-now')) { setNow(); return; }
-      if (e.target.classList.contains('tss-time-ok')) { commit(readValue()); }
+      if (e.target.classList.contains('tss-time-ok')) { commitFinal(); }
     }
     function onKey(e) {
       if (e.key === 'Escape') { e.preventDefault(); cancel(); }
-      else if (e.key === 'Enter') { e.preventDefault(); commit(readValue()); }
+      else if (e.key === 'Enter') { e.preventDefault(); commitFinal(); }
     }
-    function show(anchor, value, onPick, onCancel) {
+    function show(anchor, value, onPick, onCancel, ctx) {
       teardown();   // 既に開いていれば先に片付ける（open-while-open の取り残し防止・tss-calendar と同方針）
-      done = false;
+      done = false; ictx = ctx || null;
       pop = document.createElement('div'); pop.className = 'tss-time' + (opts.className ? ' ' + opts.className : ''); pop.tabIndex = -1;
       document.body.appendChild(pop);
       pop.addEventListener('mousedown', function (e) { if (e.target.tagName !== 'SELECT') e.preventDefault(); });
       pop.addEventListener('click', onClick);
       pop.addEventListener('keydown', onKey);
+      pop.addEventListener('change', function (e) { if (e.target.tagName === 'SELECT') mirrorToInput(); });   // inline: select を選んだら共有 input に反映（打鍵と集約）
       render(parseHM(value)); place(anchor);
       ref = { pick: onPick, cancel: onCancel };
-      if (inline) return;   // inline は外側クリック/フォーカスを本体が持つ＝共有 input から奪わない（打ち続けられる）
+      if (inline) { if (ictx && ictx.inline && ictx.setPopup) ictx.setPopup(pop); return; }   // inline: ポップアップを本体に登録＝select へフォーカスが移っても編集を閉じない。外側クリック/フォーカスは本体が持つ（打ち続けられる）
       // 外側クリックは「確定」（時/分を選んで離す＝採用）。未変更なら同値 commit＝実質no-op。アンカーは除外（再クリックはグリッドがトグル）
       outside = function (e) { if (pop && !pop.contains(e.target) && !(anchor && anchor.contains && anchor.contains(e.target))) commit(readValue()); };
       setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
       pop.focus();
     }
-    function teardown() { if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } }
+    function teardown() { if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } ictx = null; }
     function commit(v) { if (done) return; done = true; var f = ref.pick; teardown(); f(v); }
     function cancel() { if (done) return; done = true; var f = ref.cancel; teardown(); if (f) f(); }
 
     return {
-      open: function (ctx) { show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }); },
+      open: function (ctx) { show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }, ctx); },
       close: function () { teardown(); },
       icon: opts.icon != null ? opts.icon : '🕐',
       openOnClick: opts.openOnClick !== false,

package/react/index.d.ts

@@ -0,0 +1,19 @@
+// TssGridReact — TssGrid の薄い React アダプタの型。
+import * as React from 'react';
+import { TssGrid, TssGridOptions } from '../src/tssgrid';
+
+// トップレベルに書ける定番オプション＋全 on* コールバックは Partial<TssGridOptions> として受ける。
+// それ以外は options={{…}} でまとめて渡す。className / style は host の <div> に付く。
+export interface TssGridReactProps extends Partial<TssGridOptions> {
+  className?: string;
+  style?: React.CSSProperties;
+  options?: TssGridOptions;
+}
+
+// ref には grid 本体（命令API）が入る。
+declare const TssGridReact: React.ForwardRefExoticComponent<
+  TssGridReactProps & React.RefAttributes<TssGrid>
+>;
+
+export default TssGridReact;
+export { TssGridReact };

package/react/index.js

@@ -0,0 +1,74 @@
+/*! TssGridReact — TssGrid の薄い React アダプタ（UMD・ノービルド・react は peerDependency）
+ *
+ *  方針（競合 ag-grid-react / @handsontable/react と同じ）:
+ *   - グリッドは「アンコントロールド」= マウント時に1回生成し、アンマウントで destroy()。cell を React で描かない（高速）。
+ *   - 値の読み書きは ref 経由の命令API（grid 本体）＋ onAfterChange 等のコールバック。data プロップは「差し替え」用。
+ *   - 全ての on* コールバック（onAfterChange / onEditEnd …）と columns/data/plugins/options をそのまま TssGrid へ渡す。
+ *
+ *  使い方:
+ *    import { TssGridReact } from '@threestarsoftware/tssgrid/react';
+ *    import '@threestarsoftware/tssgrid/tssgrid.css';
+ *    const ref = useRef(null);
+ *    <TssGridReact columns={cols} data={rows} plugins={[...]}
+ *                  onAfterChange={(ch, src) => ...} ref={ref} />
+ *    // 命令API: ref.current.sortBy('col','desc') / ref.current.getRows() など（grid 本体）
+ *
+ *  注意:
+ *   - data は「参照が変わった時だけ」setData されます（毎レンダー新配列を渡すと毎回リセット＝カーソルも飛ぶ）。
+ *     頻繁な更新は ref の命令API（setValue/ appendRows 等）を使うのが定石。
+ *   - 構築は useEffect（クライアント専用）なので SSR/Next でもそのまま（サーバでは空 div）。columns を変えたい時は key で remount。
+ */
+(function (root, factory) {
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = factory(require('react'), require('../src/tssgrid.js'));
+  } else {
+    root.TssGridReact = factory(root.React, { TssGrid: root.TssGrid });
+  }
+})(typeof self !== 'undefined' ? self : this, function (React, core) {
+  'use strict';
+  var TssGrid = core && (core.TssGrid || core);
+  var h = React.createElement;
+  // トップレベルに書ける定番オプション（それ以外は options={{…}} で）。
+  var PASS = { columns: 1, headers: 1, data: 1, plugins: 1, name: 1, width: 1, height: 1, rowHeight: 1, rowHeaders: 1, colHeaders: 1, minSpareRows: 1, maxRows: 1, history: 1, virtual: 1, hiddenColumns: 1 };
+
+  function buildOptions(props) {
+    var o = {};
+    if (props.options) for (var k in props.options) o[k] = props.options[k];
+    for (var key in props) {
+      if (PASS[key]) o[key] = props[key];
+      else if (/^on[A-Z]/.test(key) && typeof props[key] === 'function') o[key] = props[key];   // on* コールバック総通し
+    }
+    return o;
+  }
+
+  var TssGridReact = React.forwardRef(function (props, ref) {
+    var hostRef = React.useRef(null);
+    var gridRef = React.useRef(null);
+    var propsRef = React.useRef(props);
+    propsRef.current = props;
+    var firstData = React.useRef(true);
+    var readyState = React.useState(0);                           // grid 生成後に ref（命令API）を更新させるためのバンプ
+
+    React.useEffect(function () {                                  // 生成は1回（アンコントロールド）。StrictMode 二重でも destroy が冪等。
+      var grid = new TssGrid(hostRef.current, buildOptions(propsRef.current));
+      gridRef.current = grid;
+      firstData.current = true;
+      readyState[1](function (n) { return n + 1; });              // ref.current = grid 本体 に更新（useImperativeHandle を再評価）
+      return function () { try { grid.destroy(); } catch (e) {} if (gridRef.current === grid) gridRef.current = null; };
+    }, []);
+
+    React.useEffect(function () {                                  // data の参照が変わったら差し替え（初回=生成時の data を使うのでスキップ）
+      if (firstData.current) { firstData.current = false; return; }
+      var g = gridRef.current;
+      if (g && propsRef.current.data != null) g.setData(propsRef.current.data);
+    }, [props.data]);
+
+    React.useImperativeHandle(ref, function () { return gridRef.current; }, [readyState[0]]);   // grid 本体を命令API として公開（生成後に更新）
+
+    return h('div', { ref: hostRef, className: props.className, style: props.style });
+  });
+  TssGridReact.displayName = 'TssGridReact';
+  TssGridReact.TssGridReact = TssGridReact;   // import { TssGridReact } / import TssGridReact どちらも通す
+  TssGridReact.default = TssGridReact;
+  return TssGridReact;
+});

package/src/tssgrid.js

@@ -159,7 +159,7 @@
       this._headerSel = null;   // 'col'/'row'/'all'=列/行/全選択モード（結合に拡張せず実列/行にクランプ＝Excel流）。null=通常セル選択
       this._selCols = new Set(); // 飛び飛びの列選択（Ctrl+ヘッダクリック）。_headerSel==='col' の時だけ有効。連続選択は矩形と一致
       this._selRows = new Set(); // 飛び飛びの行選択（Ctrl+行ヘッダクリック）。_headerSel==='row' の時だけ有効
-      this._inlineEd = null; this._inlineCtx = null;   // inline エディタ（editor.inline=true）: 共有 input に乗るエディタの現在値
+      this._inlineEd = null; this._inlineCtx = null; this._inlineEl = null;   // inline エディタ（editor.inline=true）: 共有 input に乗るエディタ。_inlineEl=補助ポップアップ参照
       this.disjointSelect = opts.disjointSelect !== false;   // Ctrl+ヘッダで行/列を飛び飛び複数選択（false で無効＝Ctrl+クリックは単一選択に戻る）
       // リサイズ（列幅・行高）
       // 列幅 colW[c]=px（未指定は既定）。指定方法は3通り、優先度＝実行時リサイズ/明示colW > columns[c].width > 既定:
@@ -1158,7 +1158,9 @@
     // ネイティブ入力(date/time ピッカー)を使う列か。使わない=テキスト入力。
     _nativeInputType(c) {
       const cfg = this.colCfg(c), t = cfg.type;
-      if ((t === 'date' || t === 'time') && cfg.picker !== false && !cfg.format && typeof cfg.parse !== 'function' && !cfg.hour12) return t;
+      // カスタム editor を付けた列は、そのエディタが入力/表示を握る＝ネイティブ picker を重ねない
+      // （重ねるとブラウザのロケールで AM/PM 等が出て、セル表示と食い違う）。picker:false を書き忘れても破綻しない。
+      if ((t === 'date' || t === 'time') && cfg.picker !== false && !cfg.format && typeof cfg.parse !== 'function' && !cfg.hour12 && !cfg.editor) return t;
       return null;
     }
     _usesTextEditor(c) {
@@ -2003,12 +2005,15 @@
         setValue(v) { grid.editor.value = grid._cellStr(v); },  // 候補で置き換える用（確定はしない）
         commit(v) { if (v != null) grid.editor.value = grid._cellStr(v); grid.commit(); grid.toNav(); grid.updateSelectionUI(); },
         cancel() { grid.setActive(r, c); },                     // 元値に戻して nav（Esc 相当）
+        // inline 補助ポップアップ（<select> 等 focus を奪う要素を含む）を登録＝その中へフォーカスが移っても編集を閉じない。
+        setPopup(el) { grid._inlineEl = el || null; },
       };
       this._inlineEd = ed; this._inlineCtx = ctx;
       try { ed.open(ctx); } catch (_) { this._inlineEd = null; this._inlineCtx = null; }
     }
     _closeInlineEditor() {
       const ed = this._inlineEd;
+      this._inlineEl = null;   // 登録された補助ポップアップ参照を解除
       if (!ed) return;
       this._inlineEd = null; this._inlineCtx = null;
       if (ed.close) { try { ed.close(); } catch (_) {} }
@@ -3095,8 +3100,11 @@
           else if (t === 'date' || t === 'time') this.toEdit(this.data[this.active.r][c], true);  // ネイティブピッカー
           // checkbox は文字入力を無視（Space / クリックでトグル）
         });
-        ed.addEventListener('blur', () => {
+        ed.addEventListener('blur', (e) => {
           if (this._customEditor) return;   // カスタムエディタが奪ったフォーカスでの blur は無視
+          // inline エディタの補助ポップアップ（<select> 等）へフォーカスが移った blur は編集継続（閉じない）。
+          const to = (e && e.relatedTarget) || document.activeElement;
+          if (this._inlineEl && to && this._inlineEl.contains(to)) return;
           if (this.mode === 'edit' && (!this.select || this.select.style.display === 'none')) { this.commit(); this.toNav(); this.updateSelectionUI(); }
         });
       });

package/vue/index.d.ts

@@ -0,0 +1,15 @@
+// TssGridVue — TssGrid の薄い Vue 3 アダプタの型。
+import { DefineComponent } from 'vue';
+import { TssGrid, TssGridOptions } from '../src/tssgrid';
+
+export type TssGridVueProps = Partial<TssGridOptions> & { options?: TssGridOptions };
+
+// expose: grid() で grid 本体（命令API）を返す。
+export interface TssGridVueExposed {
+  grid(): TssGrid | null;
+}
+
+declare const TssGridVue: DefineComponent<TssGridVueProps>;
+
+export default TssGridVue;
+export { TssGridVue };

package/vue/index.js

@@ -0,0 +1,56 @@
+/*! TssGridVue — TssGrid の薄い Vue 3 アダプタ（UMD・ノービルド・vue は peerDependency）
+ *
+ *  方針（React アダプタと同じ）: グリッドはアンコントロールド。マウントで生成・アンマウントで destroy()。
+ *   値の読み書きは expose した grid 本体（命令API）＋ on* コールバック。data プロップは「差し替え」用。
+ *
+ *  使い方:
+ *    import { TssGridVue } from '@threestarsoftware/tssgrid/vue';
+ *    import '@threestarsoftware/tssgrid/tssgrid.css';
+ *    <TssGridVue :columns="cols" :data="rows" :plugins="[...]" :options="{ onAfterChange }" ref="g" />
+ *    // 命令API: this.$refs.g.grid().sortBy('col','desc') など（grid 本体を返す）
+ *
+ *  注意: on* コールバックは :options（例 :options="{ onAfterChange: fn }"）か、@after-change などの属性で渡せます。
+ *        data は参照が変わった時だけ setData（毎回新配列はリセット＝カーソルが飛ぶ）。頻繁な更新は grid の命令APIで。
+ */
+(function (root, factory) {
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = factory(require('vue'), require('../src/tssgrid.js'));
+  } else {
+    root.TssGridVue = factory(root.Vue, { TssGrid: root.TssGrid });
+  }
+})(typeof self !== 'undefined' ? self : this, function (Vue, core) {
+  'use strict';
+  var TssGrid = core && (core.TssGrid || core);
+  var PASS = ['columns', 'data', 'plugins', 'headers', 'name', 'width', 'height', 'rowHeight', 'rowHeaders', 'colHeaders', 'minSpareRows', 'maxRows', 'history', 'virtual', 'hiddenColumns'];
+
+  var TssGridVue = Vue.defineComponent({
+    name: 'TssGridVue',
+    inheritAttrs: false,   // on* 属性を div に二重付けしない
+    props: {
+      columns: Array, data: Array, plugins: Array, options: Object, headers: Array,
+      name: String, width: [Number, String], height: [Number, String],
+      rowHeight: Number, rowHeaders: { type: Boolean, default: undefined }, minSpareRows: Number,
+    },
+    setup: function (props, ctx) {
+      var el = Vue.ref(null);
+      var grid = null;
+      function buildOptions() {
+        var o = {};
+        if (props.options) for (var k in props.options) o[k] = props.options[k];
+        PASS.forEach(function (key) { if (props[key] !== undefined) o[key] = props[key]; });
+        var attrs = ctx.attrs || {};
+        for (var a in attrs) { if (/^on[A-Z]/.test(a) && typeof attrs[a] === 'function') o[a] = attrs[a]; }   // @after-change 等＝attrs の onAfterChange
+        return o;
+      }
+      Vue.onMounted(function () { grid = new TssGrid(el.value, buildOptions()); });
+      Vue.onBeforeUnmount(function () { if (grid) { try { grid.destroy(); } catch (e) {} grid = null; } });
+      Vue.watch(function () { return props.data; }, function (d) { if (grid && d != null) grid.setData(d); });   // 参照が変わったら差し替え
+      ctx.expose({ grid: function () { return grid; } });                                                       // grid 本体を命令API として公開
+      return function () { return Vue.h('div', { ref: el }); };
+    },
+  });
+
+  TssGridVue.TssGridVue = TssGridVue;
+  TssGridVue.default = TssGridVue;
+  return TssGridVue;
+});