@geckou/ui-core 0.5.0 → 0.7.0

package/README.md

@@ -36,6 +36,7 @@ import {
   formatDateValue,
   splitDate,
   composeDateValue,
+  normalizeDateObject,
   validateDateObject,
   daysInMonth,
 } from '@geckou/ui-core'
@@ -46,6 +47,7 @@ import {
 | `formatDateValue(value, type?)` | `YYYY-MM-DD`（`type='month'` なら `YYYY-MM`）へ正規化。**`toISOString()` を使わないためタイムゾーンで日付がずれない**。不正な文字列は空文字を返す |
 | `splitDate(value)` | `YYYY-MM-DD` を `{ year, month, day }` へ分解 |
 | `composeDateValue(dateObject, type?)` | 年月日から日付文字列を組み立てる。要素が欠けていれば空文字 |
+| `normalizeDateObject(dateObject)` | 月・日を 2 桁へゼロ埋めする（`'1'` → `'01'`）。入力途中の値を検証する前に通す |
 | `validateDateObject(dateObject, { type, isRequired })` | 桁数・月の範囲・その月に存在する日かを検証し `{ isValid, message }` を返す |
 | `daysInMonth(year, month)` | 指定した年月の日数（`month` は 1 始まり。うるう年を考慮） |
 
@@ -124,7 +126,37 @@ const onKeyDown = (event: KeyboardEvent) => {
 |---|---|
 | `handleTabKey(container, event, activeElement?)` | Tab / Shift+Tab を端で折り返す。フォーカスを移して既定動作を止めたら `true` を返す。Tab 以外と `container` が無い場合は何もしない |
 | `getFocusableElements(container)` | コンテナ内のフォーカス可能な要素を DOM 順（= Tab 順）で返す。`inert` が付いたものは除く |
-| `FOCUSABLE_SELECTOR` | 上記で使うセレクタ（`tabindex="-1"` と `disabled` を除く） |
+| `FOCUSABLE_SELECTOR` | 上記で使うセレクタ（`tabindex="-1"` と `disabled` を除く。`contenteditable` / `audio[controls]` / `video[controls]` / `summary` / `iframe` を含む） |
+
+`ModalBox`（Vue / React）はこれを使っています。
+
+### モーダルの重なり順
+
+```ts
+import { createModalLayer } from '@geckou/ui-core'
+
+const layer = createModalLayer()
+layer.toggle(isOpen, dialogElement) // 表示状態と、判定に使う要素（要素は必須）
+layer.isTopmost() // キー入力を処理してよいのは true のときだけ
+layer.release() // アンマウント時
+```
+
+モーダルを重ねたとき、Escape や Tab を処理してよいのは最前面の 1 枚だけです。
+`ModalBox` はハンドラを `document` に bubble で登録するため、重なると全部が同じ
+イベントを受け取ります。実行順は DOM の深さではなく登録順で決まる（React は
+`onClose` の同一性が変わると再登録され、effect は子から先に走る）ので、
+順序には頼れません。
+
+判定の決め手は **DOM の包含関係**です。入れ子のモーダルは内側が外側の中に
+描画されるので、他のレイヤーを内包しているものは外側だと分かります。
+互いに内包しない（入れ子でない）モーダルが並んだときだけ、後から開いたものを
+最前面とします。
+
+| メソッド | 説明 |
+|---|---|
+| `toggle(shouldBeActive, element)` | 真偽で登録・解除する。`element` は最前面判定に使う要素（ダイアログ本体）。省略可にすると要素の無いレイヤーが積まれて包含判定が効かなくなるため必須（未取得なら明示的に `null`） |
+| `isTopmost()` | このレイヤーが最前面か。登録していなければ `false` |
+| `release()` | アンマウント時に呼ぶ。登録中なら解除する |
 
 `ModalBox`（Vue / React）はこれを使っています。
 
@@ -139,6 +171,18 @@ import type { Validates, Option, StateVariation, DateObject } from '@geckou/ui-c
 
 型の一覧は [Vue パッケージの README](../vue/README.md#types) を参照してください。
 
+## 0.7.0 の変更
+
+- `normalizeDateObject()` を追加（`DatePicker` が blur 時の正規化に使う）
+- `FOCUSABLE_SELECTOR` に `[contenteditable]` / `audio[controls]` / `video[controls]` /
+  `summary` / `iframe` を追加。ダイアログ末尾がリッチエディタや埋め込みのときに
+  その手前で折り返していたのが直る
+
+## 0.6.0 の変更
+
+- `modal-stack` を追加（`createModalLayer`）。重なったモーダルのうち最前面の 1 枚を
+  DOM の包含関係で決める。React / Vue の `ModalBox` が Escape / Tab の担当判定に使う
+
 ## 0.4.0 の変更
 
 - `focus-trap` を追加（`handleTabKey` / `getFocusableElements` / `FOCUSABLE_SELECTOR`）。

package/dist/date.d.ts

@@ -17,6 +17,13 @@ export declare function splitDate(value: string): DateObject;
  * 月・日は 2 桁へゼロ埋めする（'2024-1-5' ではなく '2024-01-05'）
  */
 export declare function composeDateValue(dateObject: DateObject, type?: DateType): string;
+/**
+ * 月・日を 2 桁へゼロ埋めする（'1' → '01'）。年はそのまま。
+ *
+ * 入力途中の値をそのまま検証すると「月は2桁の数字で入力してください」になるため、
+ * 欄を離れた時点でこれを通してから検証する
+ */
+export declare function normalizeDateObject(dateObject: DateObject): DateObject;
 /**
  * 年・月・日の入力内容を検証する。
  * type='month' のときは日を見ない。

package/dist/date.js

@@ -85,6 +85,20 @@ export function composeDateValue(dateObject, type = 'date') {
     const [yearPart, ...rest] = parts;
     return [yearPart, ...rest.map((part) => pad(Number(part)))].join('-');
 }
+/**
+ * 月・日を 2 桁へゼロ埋めする（'1' → '01'）。年はそのまま。
+ *
+ * 入力途中の値をそのまま検証すると「月は2桁の数字で入力してください」になるため、
+ * 欄を離れた時点でこれを通してから検証する
+ */
+export function normalizeDateObject(dateObject) {
+    const padPart = (value) => value.length === 1 && isNumeric(value) ? pad(Number(value)) : value;
+    return {
+        year: dateObject.year,
+        month: padPart(dateObject.month),
+        day: padPart(dateObject.day),
+    };
+}
 /**
  * 年・月・日の入力内容を検証する。
  * type='month' のときは日を見ない。

package/dist/focus-trap.js

@@ -15,6 +15,13 @@ export const FOCUSABLE_SELECTOR = [
     'input:not([disabled]):not([type="hidden"])',
     'select:not([disabled])',
     'textarea:not([disabled])',
+    // 既定でフォーカスを受ける要素。漏らすと、ダイアログの末尾がリッチエディタ
+    // （contenteditable）や埋め込み（iframe）のときにその手前で折り返してしまう
+    '[contenteditable]:not([contenteditable="false"])',
+    'audio[controls]',
+    'video[controls]',
+    'summary',
+    'iframe',
     '[tabindex]:not([tabindex="-1"])',
 ].join(', ');
 /**

package/dist/index.d.ts

@@ -6,3 +6,4 @@ export * from './text.js';
 export * from './form-validation-store.js';
 export * from './scroll-lock.js';
 export * from './focus-trap.js';
+export * from './modal-stack.js';

package/dist/index.js

@@ -6,3 +6,4 @@ export * from './text.js';
 export * from './form-validation-store.js';
 export * from './scroll-lock.js';
 export * from './focus-trap.js';
+export * from './modal-stack.js';

package/dist/modal-stack.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 開いているモーダルの重なり順。
+ *
+ * ModalBox は Escape / Tab のハンドラを `document` に bubble で登録するため、
+ * モーダルを重ねると全部のハンドラが同じイベントを受け取る。実行順は DOM の
+ * 深さではなく登録順で決まる（React は onClose の同一性が変わると再登録されて
+ * 順序が入れ替わり、React の effect は子から先に走る）ので、順序には頼れない。
+ *
+ * そこで「誰が最前面か」をここで判定する。決め手は DOM の包含関係。
+ * 入れ子のモーダルは内側が外側の中に描画されるので、他のレイヤーを内包している
+ * ものは外側だと分かる。互いに内包しない（入れ子でない）モーダルが並んだときだけ、
+ * 後から開いたものを最前面とする。
+ *
+ * 呼び出し側は 1 コンポーネント 1 ハンドルを持ち、表示状態と自分の要素を
+ * `toggle()` に渡して、アンマウント時に `release()` する。
+ */
+/**
+ * 包含判定しか使わないので、DOM の型は要求しない
+ * （core をフレームワーク・実行環境から独立に保つため。lib に DOM を足さない）。
+ * メソッド記法なので引数は双変になり、`HTMLElement` をそのまま渡せる
+ */
+type ElementLike = {
+    contains(other: ElementLike | null): boolean;
+};
+export type ModalLayer = {
+    /**
+     * 引数の真偽で登録・解除を切り替える。
+     * `element` には最前面判定に使う要素（ダイアログ本体）を渡す。
+     * 省略可にすると `toggle(true)` だけで要素の無いレイヤーが積まれ、
+     * 包含判定が効かなくなるので必須にしている（未取得なら明示的に null）
+     */
+    toggle: (shouldBeActive: boolean, element: ElementLike | null) => void;
+    /** このレイヤーが最前面か。キーイベントを処理してよいのは true のときだけ */
+    isTopmost: () => boolean;
+    /** アンマウント時に呼ぶ。登録中なら解除する */
+    release: () => void;
+};
+export declare function createModalLayer(): ModalLayer;
+export {};

package/dist/modal-stack.js

@@ -0,0 +1,46 @@
+/**
+ * 開いているモーダルの重なり順。
+ *
+ * ModalBox は Escape / Tab のハンドラを `document` に bubble で登録するため、
+ * モーダルを重ねると全部のハンドラが同じイベントを受け取る。実行順は DOM の
+ * 深さではなく登録順で決まる（React は onClose の同一性が変わると再登録されて
+ * 順序が入れ替わり、React の effect は子から先に走る）ので、順序には頼れない。
+ *
+ * そこで「誰が最前面か」をここで判定する。決め手は DOM の包含関係。
+ * 入れ子のモーダルは内側が外側の中に描画されるので、他のレイヤーを内包している
+ * ものは外側だと分かる。互いに内包しない（入れ子でない）モーダルが並んだときだけ、
+ * 後から開いたものを最前面とする。
+ *
+ * 呼び出し側は 1 コンポーネント 1 ハンドルを持ち、表示状態と自分の要素を
+ * `toggle()` に渡して、アンマウント時に `release()` する。
+ */
+const layers = [];
+function contains(layer, other) {
+    return Boolean(layer.element && other.element && layer.element.contains(other.element));
+}
+export function createModalLayer() {
+    const layer = { element: null };
+    let isActive = false;
+    const toggle = (shouldBeActive, element) => {
+        // 要素は再描画で差し替わりうるので、状態が変わらなくても取り直す
+        layer.element = shouldBeActive ? element : null;
+        if (isActive === shouldBeActive)
+            return;
+        isActive = shouldBeActive;
+        if (shouldBeActive) {
+            layers.push(layer);
+            return;
+        }
+        const index = layers.lastIndexOf(layer);
+        if (index >= 0)
+            layers.splice(index, 1);
+    };
+    const isTopmost = () => {
+        if (!isActive)
+            return false;
+        // 他のレイヤーを内包しているものは「外側」なので候補から外す
+        const innermost = layers.filter((candidate) => !layers.some((other) => other !== candidate && contains(candidate, other)));
+        return innermost[innermost.length - 1] === layer;
+    };
+    return { toggle, isTopmost, release: () => toggle(false, null) };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geckou/ui-core",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Framework-agnostic logic shared by @geckou/ui-vue and @geckou/ui-react",
   "type": "module",
   "main": "dist/index.js",