@geckou/ui-react 0.6.0 → 0.7.0

package/dist/components/LabeledCheckbox.js

@@ -1,35 +1,37 @@
 "use client";
-import { jsxs as b, jsx as t } from "react/jsx-runtime";
-import { useId as h } from "react";
-import { CheckBox as p } from "./CheckBox.js";
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import { useId as p } from "react";
+import { CheckBox as C } from "./CheckBox.js";
 import { COLOR as r } from "@geckou/ui-core";
-function L({
+function N({
   name: l,
   label: d,
-  checked: i,
-  onChange: m,
+  value: i,
+  checked: m,
+  onChange: u,
   isDisabled: e,
   cssStyle: o,
-  isDisableAnimation: u
+  isDisableAnimation: x
 }) {
-  const a = i ?? !1, n = h(), x = e ? o == null ? void 0 : o.disabled : o == null ? void 0 : o.default, c = {
+  const a = m ?? !1, n = p(), k = e ? o == null ? void 0 : o.disabled : o == null ? void 0 : o.default, c = {
     textColor: e ? r.darkGray : r.black,
     backgroundColor: e ? r.darkGray : r.blue,
-    ...x ?? {}
-  }, k = {
+    ...k ?? {}
+  }, b = {
     "--text-color": c.textColor,
     "--checked-color": c.backgroundColor
   };
-  return /* @__PURE__ */ b("label", { className: "inline-flex cursor-pointer items-center gap-[.5em] has-[button:disabled]:cursor-auto", children: [
+  return /* @__PURE__ */ h("label", { className: "inline-flex cursor-pointer items-center gap-[.5em] has-[button:disabled]:cursor-auto", children: [
     /* @__PURE__ */ t("span", { className: "pointer-events-none", children: /* @__PURE__ */ t(
-      p,
+      C,
       {
         name: l,
+        value: i,
         checked: a,
-        onChange: m,
+        onChange: u,
         isDisabled: e,
         cssStyle: o,
-        isDisableAnimation: u,
+        isDisableAnimation: x,
         ariaLabelledBy: n
       }
     ) }),
@@ -37,7 +39,7 @@ function L({
       "span",
       {
         id: n,
-        style: k,
+        style: b,
         className: a ? "text-(--text-color)" : "text-(--checked-color)",
         children: d
       }
@@ -45,5 +47,5 @@ function L({
   ] });
 }
 export {
-  L as LabeledCheckbox
+  N as LabeledCheckbox
 };

package/dist/components/SearchableSelectBox.d.ts

@@ -11,6 +11,7 @@ type Props = {
     cssStyle?: InputBoxStyleForEachStatus;
     /** combobox のアクセシブル名。可視ラベルがあるならそちらを ariaLabelledBy で指すこと */
     ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
-export declare function SearchableSelectBox({ options, value, onChange, onSelect, name, placeholder, isDisabled, searchTarget, cssStyle, ariaLabel, }: Props): import("react").JSX.Element;
+export declare function SearchableSelectBox({ options, value, onChange, onSelect, name, placeholder, isDisabled, searchTarget, cssStyle, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/SearchableSelectBox.js

@@ -1,77 +1,84 @@
 "use client";
-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: v,
+import { jsxs as $, jsx as m } from "react/jsx-runtime";
+import { useState as v, useRef as A, useId as j, useEffect as I } from "react";
+import { TextBox as K } from "./TextBox.js";
+function z({
+  options: w,
   value: o,
   onChange: s,
   onSelect: d,
-  name: A,
-  placeholder: I = "入力してください",
-  isDisabled: g,
-  searchTarget: B = "label",
-  cssStyle: L,
-  ariaLabel: O
+  name: g,
+  placeholder: O = "入力してください",
+  isDisabled: B,
+  searchTarget: L = "label",
+  cssStyle: S,
+  ariaLabel: F,
+  ariaLabelledBy: N
 }) {
-  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(() => {
+  const b = (e) => {
+    var r;
+    return ((r = w.find((t) => String(t.value) === e)) == null ? void 0 : r.label) ?? e;
+  }, [u, f] = v(() => b(o)), [h, a] = v(!1), [i, l] = v(-1), x = A(null), p = j(), D = (e) => `${p}-option-${e}`, E = A(o);
+  I(() => {
+    E.current !== o && (E.current = o, f(b(o)));
+  }, [o]), I(() => {
     const e = (r) => {
       const t = x.current;
       t && !t.contains(r.target) && a(!1);
     };
     return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
   }, []);
-  const l = u ? v.filter(
-    (e) => String(e[B]).toLowerCase().includes(u.toLowerCase())
-  ) : v, F = (e) => {
+  const y = w.filter((e) => !e.isDisabled), n = u ? y.filter(
+    (e) => String(e[L]).toLowerCase().includes(u.toLowerCase())
+  ) : y, V = (e) => {
     const r = String(e);
-    f(r), a(!!r), n(-1), s == null || s(r);
-  }, D = (e) => {
+    f(r), a(!!r), l(-1), s == null || s(r);
+  }, k = (e) => {
+    if (e.isDisabled)
+      return;
     const r = e.value.toString();
-    f(r), a(!1), n(-1), s == null || s(r), d == null || d(r);
-  }, c = h && l.length > 0, S = (e) => {
+    f(e.label), a(!1), l(-1), s == null || s(r), d == null || d(r);
+  }, c = h && n.length > 0, _ = (e) => {
     if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       if (e.preventDefault(), !h) {
-        a(!0), n(
-          e.key === "ArrowDown" ? 0 : l.length - 1
+        a(!0), l(
+          e.key === "ArrowDown" ? 0 : n.length - 1
         );
         return;
       }
-      if (l.length === 0)
+      if (n.length === 0)
         return;
-      n((r) => {
-        const t = l.length - 1;
+      l((r) => {
+        const t = n.length - 1;
         return e.key === "ArrowDown" ? r >= t ? 0 : r + 1 : r <= 0 ? t : r - 1;
       });
       return;
     }
     if (e.key === "Enter") {
-      const r = c ? l[i] : void 0;
-      r && (e.preventDefault(), D(r));
+      const r = c ? n[i] : void 0;
+      r && (e.preventDefault(), k(r));
       return;
     }
-    e.key === "Escape" && c && (e.preventDefault(), a(!1), n(-1));
+    e.key === "Escape" && c && (e.preventDefault(), a(!1), l(-1));
   };
-  return /* @__PURE__ */ N("div", { ref: x, className: "relative", children: [
+  return /* @__PURE__ */ $("div", { ref: x, className: "relative", children: [
     /* @__PURE__ */ m(
-      $,
+      K,
       {
-        name: A,
+        name: g,
         value: u,
-        onChange: F,
-        isDisabled: g,
-        placeholder: I,
-        cssStyle: L,
+        onChange: V,
+        isDisabled: B,
+        placeholder: O,
+        cssStyle: S,
         role: "combobox",
-        ariaLabel: O,
+        ariaLabel: F,
+        ariaLabelledBy: N,
         ariaAutocomplete: "list",
         ariaExpanded: c,
         ariaControls: p,
-        ariaActivedescendant: c && i >= 0 ? b(i) : void 0,
-        onKeyDown: S
+        ariaActivedescendant: c && i >= 0 ? D(i) : void 0,
+        onKeyDown: _
       }
     ),
     c && /* @__PURE__ */ m(
@@ -80,17 +87,17 @@ function R({
         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__ */ m(
+        children: n.map((e, r) => /* @__PURE__ */ m(
           "div",
           {
-            id: b(r),
+            id: D(r),
             role: "option",
             "aria-selected": r === i,
             className: `block w-full cursor-pointer p-[var(--sp-medium,0.75rem)] text-left text-[length:var(--fs-small,0.6875rem)] text-[var(--link-color,#1c4ac9)] hover:bg-[var(--hover-color,#EEF7FB)] hover:transition-all hover:duration-100 ${r === i ? "bg-[var(--hover-color,#EEF7FB)]" : ""}`,
             onPointerDown: (t) => {
-              t.preventDefault(), D(e);
+              t.preventDefault(), k(e);
             },
-            onMouseEnter: () => n(r),
+            onMouseEnter: () => l(r),
             children: e.label
           },
           e.value
@@ -100,5 +107,5 @@ function R({
   ] });
 }
 export {
-  R as SearchableSelectBox
+  z as SearchableSelectBox
 };

package/dist/components/SelectBox.js

@@ -1,69 +1,70 @@
 "use client";
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import { MESSAGES as I } from "@geckou/ui-core";
-import { useState as O, useRef as x, useEffect as V, Fragment as q } from "react";
-import { InputBox as w } from "./InputBox.js";
-import { ErrorMessage as D } from "./ErrorMessage.js";
+import { useState as N, useRef as p, useEffect as O, Fragment as V } from "react";
+import { InputBox as q } from "./InputBox.js";
+import { ErrorMessage as w } from "./ErrorMessage.js";
 import { KeyboardArrowDownIcon as F } from "./icons/KeyboardArrowDownIcon.js";
-function p(t) {
-  return typeof t == "object" && t !== null && "label" in t && typeof t.label == "string" && "value" in t;
+function g(l) {
+  return typeof l == "object" && l !== null && "label" in l && typeof l.label == "string" && "value" in l;
 }
 function P({
-  options: t,
-  name: g,
-  value: E,
+  options: l,
+  name: E,
+  value: M,
   onChange: u,
-  cssStyle: a,
-  placeholder: o = "選択してください",
-  canOmitSelect: M,
-  isDisabled: s,
-  isRequired: m,
-  arrow: A
+  cssStyle: t,
+  placeholder: f = "選択してください",
+  canOmitSelect: B,
+  isDisabled: m,
+  isRequired: v,
+  arrow: C
 }) {
-  var b, h;
-  const [B, C] = O([]), l = E ?? "", c = () => {
+  var b, x;
+  const [s, j] = N([]), a = M ?? "", o = () => {
     const e = [];
-    l === "" && m && e.push(I.required), C(e);
-  }, N = x(l), v = x(!1);
-  V(() => {
-    if (!v.current) {
-      if (l === N.current) {
-        l !== "" && c();
+    a === "" && v && e.push(I.required), j(e);
+  }, k = p(a), h = p(!1);
+  O(() => {
+    if (!h.current) {
+      if (a === k.current) {
+        a !== "" && o();
         return;
       }
-      v.current = !0;
+      h.current = !0;
     }
-    c();
-  }, [l]);
-  const j = t.flatMap(
-    (e) => p(e) ? [e] : Object.values(e).flat()
-  ), k = (e) => {
-    const n = j.find(
-      (d) => String(d.value) === e
+    o();
+  }, [a]);
+  const A = l.flatMap(
+    (e) => g(e) ? [e] : Object.values(e).flat()
+  ), D = (e) => {
+    const n = A.find(
+      (c) => String(c.value) === e
     );
     u == null || u(n ? n.value : e);
   };
-  return /* @__PURE__ */ f(
-    w,
+  return /* @__PURE__ */ d(
+    q,
     {
-      cssStyle: a,
+      cssStyle: t,
       className: "inline-flex [&>select]:flex-auto [&>select]:cursor-pointer [&>select]:pe-8",
-      isDisabled: s,
+      isDisabled: m,
+      isErrored: !!s.length,
       children: [
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ d(
           "select",
           {
-            name: g,
-            value: l,
-            disabled: s,
-            required: m,
-            onChange: (e) => k(e.target.value),
-            onBlur: () => c(),
+            name: E,
+            value: a,
+            disabled: m,
+            required: v,
+            "aria-invalid": s.length > 0 || void 0,
+            onChange: (e) => D(e.target.value),
+            onBlur: () => o(),
             children: [
-              M ? /* @__PURE__ */ r("option", { value: "", children: o || "選択しない" }) : /* @__PURE__ */ r("option", { disabled: !0, value: "", children: o || "選択してください" }),
-              ["0", "NA"].includes(l.toString()) && s && /* @__PURE__ */ r("option", { disabled: !0, value: l, children: o || "選択してください" }),
-              t.map(
-                (e) => p(e) ? /* @__PURE__ */ r(
+              B ? /* @__PURE__ */ r("option", { value: "", children: f || "選択しない" }) : /* @__PURE__ */ r("option", { disabled: !0, value: "", children: f || "選択してください" }),
+              l.map(
+                (e) => g(e) ? /* @__PURE__ */ r(
                   "option",
                   {
                     value: e.value,
@@ -71,8 +72,8 @@ function P({
                     children: e.label
                   },
                   e.value
-                ) : /* @__PURE__ */ f(q, { children: [
-                  Object.entries(e).map(([n, d]) => /* @__PURE__ */ r("optgroup", { label: n, children: d.map((i) => /* @__PURE__ */ r(
+                ) : /* @__PURE__ */ d(V, { children: [
+                  Object.entries(e).map(([n, c]) => /* @__PURE__ */ r("optgroup", { label: n, children: c.map((i) => /* @__PURE__ */ r(
                     "option",
                     {
                       value: i.value,
@@ -87,14 +88,14 @@ function P({
             ]
           }
         ),
-        /* @__PURE__ */ r("div", { className: "pointer-events-none absolute inset-y-0 end-2 flex items-center [&>*]:h-4 [&>*]:fill-current [&>*]:text-current", children: A ?? /* @__PURE__ */ r(F, {}) }),
+        /* @__PURE__ */ r("div", { className: "pointer-events-none absolute inset-y-0 end-2 flex items-center [&>*]:h-4 [&>*]:fill-current [&>*]:text-current", children: C ?? /* @__PURE__ */ r(F, {}) }),
         /* @__PURE__ */ r(
-          D,
+          w,
           {
-            errorMessages: B,
+            errorMessages: s,
             cssStyle: {
-              textColor: (b = a == null ? void 0 : a.error) == null ? void 0 : b.backgroundColor,
-              backgroundColor: (h = a == null ? void 0 : a.error) == null ? void 0 : h.textColor
+              textColor: (b = t == null ? void 0 : t.error) == null ? void 0 : b.backgroundColor,
+              backgroundColor: (x = t == null ? void 0 : t.error) == null ? void 0 : x.textColor
             }
           }
         )

package/dist/components/SlideDownUi.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs as v, jsx as i } from "react/jsx-runtime";
-import { useState as a, useRef as h, useImperativeHandle as E, useEffect as l } from "react";
+import { useState as a, useRef as p, useImperativeHandle as E, useEffect as l } from "react";
 import { KeyboardArrowDownIcon as I } from "./icons/KeyboardArrowDownIcon.js";
 import { COLOR as N } from "@geckou/ui-core";
 function $({
   isOpened: n = null,
-  isHiddenArrow: p = !1,
+  isHiddenArrow: h = !1,
   isDisabled: b = !1,
   isDisableClickOutside: f = !1,
   duration: c = 0.3,
@@ -13,7 +13,7 @@ function $({
   children: w,
   ref: x
 }) {
-  const [t, r] = a(n || !1), [C, u] = a(n || !1), [y, H] = a(0), d = h(null), m = h(null), R = () => r((e) => !e);
+  const [t, r] = a(n || !1), [C, u] = a(n || !1), [y, k] = a(0), d = p(null), m = p(null), H = () => r((e) => !e);
   E(x, () => ({
     isOpenedContents: () => t,
     close: () => r(!1)
@@ -31,7 +31,7 @@ function $({
     const e = m.current;
     if (!e)
       return;
-    const s = () => H(e.clientHeight);
+    const s = () => k(e.clientHeight);
     s();
     const o = new ResizeObserver(s);
     return o.observe(e), () => o.disconnect();
@@ -43,8 +43,8 @@ function $({
     const e = setTimeout(() => u(!0), c * 1e3);
     return () => clearTimeout(e);
   }, [t, c]);
-  const k = { "--link-color": N.blue };
-  return /* @__PURE__ */ v("div", { ref: d, style: k, children: [
+  const R = { "--link-color": N.blue };
+  return /* @__PURE__ */ v("div", { ref: d, style: R, children: [
     /* @__PURE__ */ v(
       "button",
       {
@@ -53,11 +53,11 @@ function $({
         "aria-expanded": t,
         className: "relative grid w-full cursor-pointer grid-cols-[1fr_auto] items-center justify-items-start text-(--link-color)",
         onClick: (e) => {
-          e.preventDefault(), R();
+          e.preventDefault(), H();
         },
         children: [
-          /* @__PURE__ */ i("div", { className: "w-full text-left", children: g }),
-          !p && /* @__PURE__ */ i(
+          /* @__PURE__ */ i("span", { className: "block w-full text-left", children: g }),
+          !h && /* @__PURE__ */ i(
             I,
             {
               className: `size-[var(--icon-medium,1.125rem)] flex-none text-(--link-color) transition-all duration-100 ${t ? "rotate-180" : ""}`

package/dist/components/TextArea.js

@@ -1,68 +1,76 @@
 "use client";
-import { jsxs as j, jsx as p } from "react/jsx-runtime";
-import { isEmptyValue as k, validateInputValue as B } from "@geckou/ui-core";
-import { useState as I, useRef as n, useEffect as A } from "react";
-import { InputBox as H } from "./InputBox.js";
-import { ErrorMessage as N } from "./ErrorMessage.js";
-function z({
-  name: d,
-  value: s,
-  onChange: o,
+import { jsxs as H, jsx as h } from "react/jsx-runtime";
+import { isEmptyValue as M, validateInputValue as T } from "@geckou/ui-core";
+import { useState as j, useRef as m, useEffect as k } from "react";
+import { InputBox as I } from "./InputBox.js";
+import { ErrorMessage as W } from "./ErrorMessage.js";
+function z(n) {
+  const e = getComputedStyle(n), t = (...r) => r.reduce((a, i) => a + (parseFloat(i) || 0), 0);
+  return e.boxSizing === "border-box" ? n.scrollHeight + t(e.borderTopWidth, e.borderBottomWidth) : n.scrollHeight - t(e.paddingTop, e.paddingBottom);
+}
+function q({
+  name: n,
+  value: e,
+  onChange: t,
   cssStyle: r,
-  placeholder: x = "入力してください",
+  placeholder: a = "入力してください",
   isDisabled: i,
-  isRequired: l,
-  rows: g,
-  maxLength: h = 100,
+  isRequired: p,
+  rows: x,
+  maxLength: b = 100,
   autocomplete: v = "off",
   validates: E = [],
   autoAdjustHeight: V
 }) {
-  var m, c;
-  const [u, C] = I([]), t = n(null), e = s ?? "", a = () => {
-    C(B(e, { isRequired: l, validates: E }));
-  }, M = n(e), f = n(!1);
-  return A(() => {
-    if (V && t.current && (t.current.style.height = "auto", t.current.style.height = `calc(${t.current.scrollHeight}px - 2rem)`), !f.current) {
-      if (e === M.current) {
-        k(e) || a();
+  var c, g;
+  const [l, B] = j([]), d = m(null), o = e ?? "", f = () => {
+    B(T(o, { isRequired: p, validates: E }));
+  }, C = m(o), s = m(!1);
+  return k(() => {
+    if (V && d.current) {
+      const u = d.current;
+      u.style.height = "auto", u.style.height = `${z(u)}px`;
+    }
+    if (!s.current) {
+      if (o === C.current) {
+        M(o) || f();
         return;
       }
-      f.current = !0;
+      s.current = !0;
     }
-    a();
-  }, [e]), /* @__PURE__ */ j(
-    H,
+    f();
+  }, [o]), /* @__PURE__ */ H(
+    I,
     {
       cssStyle: r,
       className: "min-h-[4em]",
-      isErrored: !!u.length,
+      isErrored: !!l.length,
       isDisabled: i,
       children: [
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ h(
           "textarea",
           {
-            ref: t,
-            name: d,
-            value: e,
-            required: l,
-            placeholder: x,
+            ref: d,
+            name: n,
+            value: o,
+            required: p,
+            placeholder: a,
             disabled: i,
             autoComplete: v,
-            rows: g,
-            maxLength: h,
-            "aria-invalid": u.length ? "true" : void 0,
-            onChange: (b) => o == null ? void 0 : o(b.target.value),
-            onBlur: () => a()
+            rows: x,
+            maxLength: b,
+            "aria-invalid": l.length ? "true" : void 0,
+            onChange: (u) => t == null ? void 0 : t(u.target.value),
+            onBlur: () => f()
           }
         ),
-        /* @__PURE__ */ p(
-          N,
+        /* @__PURE__ */ h(
+          W,
           {
-            errorMessages: u,
+            errorMessages: l,
             cssStyle: {
-              textColor: (m = r == null ? void 0 : r.error) == null ? void 0 : m.backgroundColor,
-              backgroundColor: (c = r == null ? void 0 : r.error) == null ? void 0 : c.textColor
+              textColor: (c = r == null ? void 0 : r.error) == null ? void 0 : c.backgroundColor,
+              backgroundColor: (g = r == null ? void 0 : r.error) == null ? void 0 : g.textColor
             }
           }
         )
@@ -71,5 +79,5 @@ function z({
   );
 }
 export {
-  z as TextArea
+  q as TextArea
 };

package/dist/components/TextBox.d.ts

@@ -23,11 +23,13 @@ type Props = {
      */
     role?: string;
     ariaLabel?: string;
+    /** 可視ラベルがあるなら、その要素の id をここで指す（ariaLabel より優先） */
+    ariaLabelledBy?: string;
     ariaExpanded?: boolean;
     ariaControls?: string;
     ariaActivedescendant?: string;
     ariaAutocomplete?: 'none' | 'inline' | 'list' | 'both';
     onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
 };
-export declare function TextBox({ name, value, onChange, cssStyle, inputType, placeholder, isDisabled, isRequired, maxLength, autocomplete, validates, before, after, id, role, ariaLabel, ariaExpanded, ariaControls, ariaActivedescendant, ariaAutocomplete, onKeyDown, }: Props): import("react").JSX.Element;
+export declare function TextBox({ name, value, onChange, cssStyle, inputType, placeholder, isDisabled, isRequired, maxLength, autocomplete, validates, before, after, id, role, ariaLabel, ariaLabelledBy, ariaExpanded, ariaControls, ariaActivedescendant, ariaAutocomplete, onKeyDown, }: Props): import("react").JSX.Element;
 export {};