@geckou/ui-react 0.5.1 → 0.6.0

package/README.md

@@ -108,6 +108,21 @@ props は Vue 版（`@geckou/ui-vue`）と揃えている。`v-model` にあた
 yarn workspace @geckou/ui-react test
 ```
 
+## 0.6.0 の変更
+
+- `ModalBox` を重ねたとき、Escape で閉じるのは**最前面の 1 枚だけ**になった
+  （従来は内側と外側の `onClose` が両方呼ばれていた）。あわせて自分が Escape を
+  処理したら `preventDefault()` する。外側で Escape を見ているアプリ側のハンドラが
+  一緒に反応しなくなるので、`defaultPrevented` を見ずに閉じている処理があれば追従が要る
+- `SearchableSelectBox` が候補 0 件のときは Escape を握らない（`preventDefault()` しない）。
+  `ModalBox` の中で「何にもマッチしない語を入れた状態だと Escape を 2 回押す必要がある」
+  のが直る
+- `DatePicker` のカレンダー起動用入力にアクセシブル名（「◯◯のカレンダー」）が付き、
+  キーボードで到達したときアイコン側に可視フォーカスが出る
+- `PopupBox` が `role="status"`（ライブリージョン）になり、支援技術に通知が伝わる
+- `DateRange` 型を公開の入口から export するようにした
+  （`import type { DateRange } from '@geckou/ui-react'`）
+
 ## 0.5.0 の変更
 
 - `DatePicker` / `DateSelector` が `ariaLabel` / `ariaLabelledBy` を受ける

package/dist/components/DatePicker.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as j, jsx as r } from "react/jsx-runtime";
+import { jsxs as j, jsx as a } from "react/jsx-runtime";
 import { formatDateValue as V, splitDate as w, COLOR as H, MESSAGES as J, composeDateValue as K, validateDateObject as Q } from "@geckou/ui-core";
 import { useState as m, useRef as T, useEffect as U, useId as W } from "react";
 import { InputBox as X } from "./InputBox.js";
@@ -7,128 +7,137 @@ import { ErrorMessage as Y } from "./ErrorMessage.js";
 import { CalendarIcon as Z } from "./icons/CalendarIcon.js";
 import { useRegisterValidation as _ } from "../hooks/useFormValidation.js";
 function le({
-  name: o,
-  value: a,
+  name: d,
+  value: r,
   onChange: s,
   cssStyle: M,
   isDisabled: i,
-  isRequired: d,
+  isRequired: p,
   formValidationStore: D,
   minDate: L = "",
   maxDate: z = "",
   size: P = "medium",
   type: t = "date",
   ariaLabel: A,
-  ariaLabelledBy: p
+  ariaLabelledBy: u
 }) {
-  const [y, u] = m(
-    () => a ? V(a, t) : ""
-  ), [l, f] = m(
-    () => a ? w(V(a, t)) : { year: "", month: "", day: "" }
-  ), [v, O] = m(""), [G, h] = m(!0), N = T(a);
+  const [y, f] = m(
+    () => r ? V(r, t) : ""
+  ), [c, v] = m(
+    () => r ? w(V(r, t)) : { year: "", month: "", day: "" }
+  ), [h, O] = m(""), [G, b] = m(!0), N = T(r);
   U(() => {
-    if (N.current === a)
+    if (N.current === r)
       return;
-    N.current = a;
-    const e = a ? V(a, t) : "";
-    u(e), f(w(e)), h(!0);
-  }, [a, t]);
-  const I = (e) => !e && d ? { isValid: !1, message: J.required } : { isValid: !0, message: "" }, R = (e) => Q(e, { type: t, isRequired: d }), q = (e) => {
-    u(e), f(w(e));
-    const { message: $ } = I(e);
-    O($), h(!0), s == null || s(e);
-  }, b = (e, $) => {
-    const k = { ...l, [e]: $ };
-    f(k);
+    N.current = r;
+    const e = r ? V(r, t) : "";
+    f(e), v(w(e)), b(!0);
+  }, [r, t]);
+  const I = (e) => !e && p ? { isValid: !1, message: J.required } : { isValid: !0, message: "" }, R = (e) => Q(e, { type: t, isRequired: p }), q = (e) => {
+    f(e), v(w(e));
+    const { message: g } = I(e);
+    O(g), b(!0), s == null || s(e);
+  }, x = (e, g) => {
+    const k = { ...c, [e]: g };
+    v(k);
     const { isValid: E, message: F } = R(k);
-    if (O(F), h(E), E) {
+    if (O(F), b(E), E) {
       const S = K(k, t);
-      u(S), s == null || s(S);
+      f(S), s == null || s(S);
     }
   };
   _(
     D,
-    o,
+    d,
     I(y).isValid && G
   );
-  const c = W(), x = (e) => p ? { "aria-labelledby": `${p} ${c}-${e}` } : { "aria-label": `${A ?? o}の${e}` }, n = P === "small", g = `flex-none! ${n ? "px-[var(--sp-small,0.375rem)]! py-[var(--sp-min,0.1875rem)]! text-[length:var(--fs-small,0.6875rem)]" : "p-[var(--sp-medium,0.75rem)]!"}`, C = { "--icon-color": H.blue };
+  const l = W(), n = (e) => u ? { "aria-labelledby": `${u} ${l}-${e}` } : { "aria-label": `${A ?? d}の${e}` }, o = P === "small", $ = `flex-none! ${o ? "px-[var(--sp-small,0.375rem)]! py-[var(--sp-min,0.1875rem)]! text-[length:var(--fs-small,0.6875rem)]" : "p-[var(--sp-medium,0.75rem)]!"}`, C = { "--icon-color": H.blue };
   return /* @__PURE__ */ j(
     X,
     {
       cssStyle: M,
       isDisabled: i,
-      isErrored: !!v,
-      className: `flex w-full items-center leading-none ${n ? "h-[calc(var(--bv,0.375rem)*5)] px-[var(--sp-min,0.1875rem)]" : "h-[calc(var(--bv,0.375rem)*6)] px-[var(--sp-small,0.375rem)]"}`,
+      isErrored: !!h,
+      className: `flex w-full items-center leading-none ${o ? "h-[calc(var(--bv,0.375rem)*5)] px-[var(--sp-min,0.1875rem)]" : "h-[calc(var(--bv,0.375rem)*6)] px-[var(--sp-small,0.375rem)]"}`,
       children: [
-        /* @__PURE__ */ j("div", { className: "relative flex-none", style: C, children: [
-          /* @__PURE__ */ r(
-            Z,
-            {
-              className: `pointer-events-none absolute inset-y-0 left-[var(--sp-small,0.375rem)] m-auto fill-(--icon-color) ${n ? "size-[var(--icon-small,0.9375rem)]" : "size-[var(--icon-medium,1.125rem)]"}`
-            }
-          ),
-          /* @__PURE__ */ r(
-            "input",
-            {
-              type: t,
-              name: o,
-              value: y,
-              max: z,
-              min: L,
-              required: d,
-              disabled: i,
-              onChange: (e) => q(e.target.value),
-              className: `w-[calc(var(--icon-medium,1.125rem)+var(--sp-small,0.375rem)*2)]! cursor-pointer px-[var(--sp-small,0.375rem)]! opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:left-0 [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0 ${n ? "py-[var(--sp-min,0.1875rem)]!" : "py-[var(--sp-medium,0.75rem)]!"}`
-            }
-          )
-        ] }),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ j(
+          "div",
+          {
+            className: "relative flex-none rounded-[var(--radius-small,0.1875rem)] has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-(--icon-color)",
+            style: C,
+            children: [
+              /* @__PURE__ */ a(
+                Z,
+                {
+                  className: `pointer-events-none absolute inset-y-0 left-[var(--sp-small,0.375rem)] m-auto fill-(--icon-color) ${o ? "size-[var(--icon-small,0.9375rem)]" : "size-[var(--icon-medium,1.125rem)]"}`
+                }
+              ),
+              /* @__PURE__ */ a(
+                "input",
+                {
+                  type: t,
+                  name: d,
+                  value: y,
+                  ...n("カレンダー"),
+                  max: z,
+                  min: L,
+                  required: p,
+                  disabled: i,
+                  onChange: (e) => q(e.target.value),
+                  className: `w-[calc(var(--icon-medium,1.125rem)+var(--sp-small,0.375rem)*2)]! cursor-pointer px-[var(--sp-small,0.375rem)]! opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:left-0 [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0 ${o ? "py-[var(--sp-min,0.1875rem)]!" : "py-[var(--sp-medium,0.75rem)]!"}`
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
           "input",
           {
-            value: l.year,
+            value: c.year,
             placeholder: "年",
-            ...x("年"),
+            ...n("年"),
             maxLength: 4,
             type: "text",
             disabled: i,
-            onChange: (e) => b("year", e.target.value),
-            className: `w-[calc(var(--sp-medium,0.75rem)*2+5ch)]! ${g}`
+            onChange: (e) => x("year", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+5ch)]! ${$}`
           }
         ),
         "/",
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ a(
           "input",
           {
-            value: l.month,
+            value: c.month,
             placeholder: "月",
-            ...x("月"),
+            ...n("月"),
             maxLength: 2,
             type: "text",
             disabled: i,
-            onChange: (e) => b("month", e.target.value),
-            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${g}`
+            onChange: (e) => x("month", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${$}`
           }
         ),
-        t === "date" && /* @__PURE__ */ r("span", { children: "/" }),
-        t === "date" && /* @__PURE__ */ r(
+        t === "date" && /* @__PURE__ */ a("span", { children: "/" }),
+        t === "date" && /* @__PURE__ */ a(
           "input",
           {
-            value: l.day,
+            value: c.day,
             placeholder: "日",
-            ...x("日"),
+            ...n("日"),
             maxLength: 2,
             type: "text",
             disabled: i,
-            onChange: (e) => b("day", e.target.value),
-            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${g}`
+            onChange: (e) => x("day", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${$}`
           }
         ),
-        p && /* @__PURE__ */ j("span", { className: "sr-only", children: [
-          /* @__PURE__ */ r("span", { id: `${c}-年`, children: "の年" }),
-          /* @__PURE__ */ r("span", { id: `${c}-月`, children: "の月" }),
-          /* @__PURE__ */ r("span", { id: `${c}-日`, children: "の日" })
+        u && /* @__PURE__ */ j("span", { className: "sr-only", children: [
+          /* @__PURE__ */ a("span", { id: `${l}-カレンダー`, children: "のカレンダー" }),
+          /* @__PURE__ */ a("span", { id: `${l}-年`, children: "の年" }),
+          /* @__PURE__ */ a("span", { id: `${l}-月`, children: "の月" }),
+          /* @__PURE__ */ a("span", { id: `${l}-日`, children: "の日" })
         ] }),
-        /* @__PURE__ */ r(Y, { errorMessages: v ? [v] : void 0 })
+        /* @__PURE__ */ a(Y, { errorMessages: h ? [h] : void 0 })
       ]
     }
   );

package/dist/components/ModalBox.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as t, jsxs as x } from "react/jsx-runtime";
-import { useId as b, useRef as n, useEffect as d } from "react";
-import { createScrollLock as g, handleTabKey as w } from "@geckou/ui-core";
-const h = {
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { useId as g, useRef as i, useEffect as u } from "react";
+import { createScrollLock as y, createModalLayer as w, handleTabKey as h } from "@geckou/ui-core";
+const k = {
   small: "max-w-[var(--mobile-lower-width,430px)]",
   medium: "max-w-[var(--desktop-lower-width,1025px)]",
   large: "max-w-[var(--contents-max-width,1440px)]"
 };
-function y() {
+function E() {
   return /* @__PURE__ */ t(
     "svg",
     {
@@ -18,38 +18,43 @@ function y() {
     }
   );
 }
-function I({
+function _({
   isShown: r,
-  size: s = "medium",
+  size: p = "medium",
   onClose: o,
-  header: i,
-  footer: u,
-  children: p,
-  ariaLabel: f
+  header: n,
+  footer: d,
+  children: f,
+  ariaLabel: v
 }) {
-  const c = b(), m = n(null), v = n(g());
-  d(() => {
-    const e = v.current;
+  const c = g(), m = i(null), x = i(y());
+  u(() => {
+    const e = x.current;
     return e.toggle(r), () => e.release();
   }, [r]);
-  const l = n(null);
-  return d(() => {
+  const s = i(w());
+  u(() => {
+    const e = s.current;
+    return e.toggle(r, m.current), () => e.release();
+  }, [r]);
+  const l = i(null);
+  return u(() => {
     var e, a;
     if (r) {
       l.current ?? (l.current = document.activeElement), (e = m.current) == null || e.focus();
       return;
     }
     (a = l.current) == null || a.focus(), l.current = null;
-  }, [r]), d(() => {
+  }, [r]), u(() => {
     if (!r)
       return;
     const e = (a) => {
-      if (!a.defaultPrevented) {
+      if (s.current.isTopmost() && !a.defaultPrevented) {
         if (a.key === "Escape") {
-          o();
+          a.preventDefault(), o();
           return;
         }
-        w(m.current, a, document.activeElement);
+        h(m.current, a, document.activeElement);
       }
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
@@ -62,27 +67,27 @@ function I({
       onClick: (e) => {
         e.target === e.currentTarget && o();
       },
-      children: /* @__PURE__ */ x(
+      children: /* @__PURE__ */ b(
         "div",
         {
           ref: m,
           role: "dialog",
           "aria-modal": "true",
-          "aria-labelledby": i ? c : void 0,
-          "aria-label": i ? void 0 : f ?? "ダイアログ",
+          "aria-labelledby": n ? c : void 0,
+          "aria-label": n ? void 0 : v ?? "ダイアログ",
           tabIndex: -1,
-          className: `relative flex max-h-full w-full cursor-auto flex-col rounded-[var(--radius-small,0.1875rem)] bg-white drop-shadow-[0_0_6px_#33333355] ${h[s]}`,
+          className: `relative flex max-h-full w-full cursor-auto flex-col rounded-[var(--radius-small,0.1875rem)] bg-white drop-shadow-[0_0_6px_#33333355] ${k[p]}`,
           children: [
-            i && /* @__PURE__ */ t(
+            n && /* @__PURE__ */ t(
               "header",
               {
                 id: c,
                 className: "border-b border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] [&>h2]:font-bold [&>h2]:text-[var(--fs-large,0.875rem)]",
-                children: i
+                children: n
               }
             ),
-            /* @__PURE__ */ t("div", { className: "flex-auto overflow-auto p-[var(--sp-large,1.5rem)] max-md:p-[var(--sp-medium,0.75rem)]", children: p }),
-            u && /* @__PURE__ */ t("footer", { className: "flex justify-center gap-[var(--sp-large,1.5rem)] border-t border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:gap-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] max-md:[&>*]:flex-auto", children: u }),
+            /* @__PURE__ */ t("div", { className: "flex-auto overflow-auto p-[var(--sp-large,1.5rem)] max-md:p-[var(--sp-medium,0.75rem)]", children: f }),
+            d && /* @__PURE__ */ t("footer", { className: "flex justify-center gap-[var(--sp-large,1.5rem)] border-t border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:gap-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] max-md:[&>*]:flex-auto", children: d }),
             /* @__PURE__ */ t(
               "button",
               {
@@ -90,7 +95,7 @@ function I({
                 "aria-label": "閉じる",
                 className: "absolute bottom-full left-full size-[var(--icon-medium,1.125rem)] cursor-pointer leading-none text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white [&>*]:size-full",
                 onClick: o,
-                children: /* @__PURE__ */ t(y, {})
+                children: /* @__PURE__ */ t(E, {})
               }
             )
           ]
@@ -100,5 +105,5 @@ function I({
   );
 }
 export {
-  I as ModalBox
+  _ as ModalBox
 };

package/dist/components/PopupBox.js

@@ -17,19 +17,20 @@ function y({
   ref: n,
   children: m
 }) {
-  const [u, r] = o(!1), [s, a] = o(!1), e = c(null);
+  const [s, r] = o(!1), [u, a] = o(!1), e = c(null);
   return l(() => (a(!0), () => {
     e.current && clearTimeout(e.current);
   }), []), f(n, () => ({
     showPopup: () => {
       r(!0), e.current && clearTimeout(e.current), e.current = setTimeout(() => r(!1), 3e3);
     }
-  })), s ? p(
+  })), u ? p(
     /* @__PURE__ */ i(
       "div",
       {
+        role: "status",
         style: { borderColor: d.blue },
-        className: `pointer-events-none fixed z-50 h-max w-max max-w-40 rounded-[var(--radius-small,0.1875rem)] border bg-white p-[var(--sp-medium,0.75rem)] transition-[transform,opacity] duration-300 ${x[t.x]} ${S[t.y]} ${u ? "opacity-100" : "opacity-0"}`,
+        className: `pointer-events-none fixed z-50 h-max w-max max-w-40 rounded-[var(--radius-small,0.1875rem)] border bg-white p-[var(--sp-medium,0.75rem)] transition-[transform,opacity] duration-300 ${x[t.x]} ${S[t.y]} ${s ? "opacity-100" : "opacity-0"}`,
         children: m
       }
     ),

package/dist/components/SearchableSelectBox.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsxs as N, jsx as w } from "react/jsx-runtime";
-import { useState as v, useRef as k, useId as _, useEffect as y } from "react";
+import { jsxs as N, jsx as m } from "react/jsx-runtime";
+import { useState as w, useRef as k, useId as _, useEffect as y } from "react";
 import { TextBox as $ } from "./TextBox.js";
 function R({
-  options: h,
+  options: v,
   value: o,
   onChange: s,
   onSelect: d,
@@ -14,7 +14,7 @@ function R({
   cssStyle: L,
   ariaLabel: O
 }) {
-  const [u, f] = v(o), [p, a] = v(!1), [i, n] = v(-1), x = k(null), m = _(), b = (e) => `${m}-option-${e}`, E = k(o);
+  const [u, f] = w(o), [h, a] = w(!1), [i, n] = w(-1), x = k(null), p = _(), b = (e) => `${p}-option-${e}`, E = k(o);
   y(() => {
     E.current !== o && (E.current = o, f(o));
   }, [o]), y(() => {
@@ -24,17 +24,17 @@ function R({
     };
     return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
   }, []);
-  const l = u ? h.filter(
+  const l = u ? v.filter(
     (e) => String(e[B]).toLowerCase().includes(u.toLowerCase())
-  ) : h, F = (e) => {
+  ) : v, F = (e) => {
     const r = String(e);
     f(r), a(!!r), n(-1), s == null || s(r);
   }, D = (e) => {
     const r = e.value.toString();
     f(r), a(!1), n(-1), s == null || s(r), d == null || d(r);
-  }, c = p && l.length > 0, S = (e) => {
+  }, c = h && l.length > 0, S = (e) => {
     if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-      if (e.preventDefault(), !p) {
+      if (e.preventDefault(), !h) {
         a(!0), n(
           e.key === "ArrowDown" ? 0 : l.length - 1
         );
@@ -53,10 +53,10 @@ function R({
       r && (e.preventDefault(), D(r));
       return;
     }
-    e.key === "Escape" && p && (e.preventDefault(), a(!1), n(-1));
+    e.key === "Escape" && c && (e.preventDefault(), a(!1), n(-1));
   };
   return /* @__PURE__ */ N("div", { ref: x, className: "relative", children: [
-    /* @__PURE__ */ w(
+    /* @__PURE__ */ m(
       $,
       {
         name: A,
@@ -69,18 +69,18 @@ function R({
         ariaLabel: O,
         ariaAutocomplete: "list",
         ariaExpanded: c,
-        ariaControls: m,
+        ariaControls: p,
         ariaActivedescendant: c && i >= 0 ? b(i) : void 0,
         onKeyDown: S
       }
     ),
-    c && /* @__PURE__ */ w(
+    c && /* @__PURE__ */ m(
       "div",
       {
-        id: m,
+        id: p,
         role: "listbox",
         className: "absolute top-[calc(100%-var(--sp-min,0.1875rem))] left-0 z-[2] max-h-[calc(var(--bv,0.375rem)*56)] min-w-full overflow-auto rounded-[var(--radius-small,0.1875rem)] bg-white py-[var(--sp-small,0.375rem)] shadow-[0_0_6px_#33333333]",
-        children: l.map((e, r) => /* @__PURE__ */ w(
+        children: l.map((e, r) => /* @__PURE__ */ m(
           "div",
           {
             id: b(r),

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { CheckBoxes } from './components/CheckBoxes';
 export { CheckButton } from './components/CheckButton';
 export { DatePicker } from './components/DatePicker';
 export { DateRangePicker } from './components/DateRangePicker';
+export type { DateRange } from './components/DateRangePicker';
 export { DateSelector } from './components/DateSelector';
 export { DropdownUi } from './components/DropdownUi';
 export type { DropdownUiHandle } from './components/DropdownUi';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geckou/ui-react",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "A set of reusable React UI components (forms) by Geckou",
   "type": "module",
   "sideEffects": [
@@ -40,7 +40,7 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@geckou/ui-core": "^0.5.0"
+    "@geckou/ui-core": "^0.6.0"
   },
   "scripts": {
     "build": "vite build && node scripts/copy-assets.mjs",