@geckou/ui-react 0.5.1 → 0.7.0

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 {};

package/dist/components/TextBox.js

@@ -1,99 +1,101 @@
 "use client";
-import { jsxs as A, jsx as s } from "react/jsx-runtime";
-import { isEmptyValue as G, convertFullWidthToHalfWidth as x, validateInputValue as J } from "@geckou/ui-core";
-import { useState as K, useRef as n, useEffect as L } from "react";
-import { InputBox as O } from "./InputBox.js";
-import { ErrorMessage as P } from "./ErrorMessage.js";
-function Z({
-  name: v,
-  value: E,
-  onChange: t,
+import { jsxs as G, jsx as x } from "react/jsx-runtime";
+import { isEmptyValue as J, convertFullWidthToHalfWidth as v, validateInputValue as K } from "@geckou/ui-core";
+import { useState as O, useRef as n, useEffect as P } from "react";
+import { InputBox as Q } from "./InputBox.js";
+import { ErrorMessage as R } from "./ErrorMessage.js";
+function $({
+  name: E,
+  value: V,
+  onChange: e,
   cssStyle: r,
-  inputType: V = "text",
-  placeholder: b = "入力してください",
+  inputType: b = "text",
+  placeholder: g = "入力してください",
   isDisabled: l,
   isRequired: f,
-  maxLength: g = 30,
-  autocomplete: B = "off",
-  validates: M = [],
-  before: T,
-  after: j,
-  id: k,
-  role: I,
-  ariaLabel: W,
-  ariaExpanded: w,
-  ariaControls: C,
-  ariaActivedescendant: F,
-  ariaAutocomplete: H,
-  onKeyDown: N
+  maxLength: M = 30,
+  autocomplete: T = "off",
+  validates: j = [],
+  before: k,
+  after: B,
+  id: I,
+  role: W,
+  ariaLabel: w,
+  ariaLabelledBy: d,
+  ariaExpanded: C,
+  ariaControls: F,
+  ariaActivedescendant: H,
+  ariaAutocomplete: N,
+  onKeyDown: q
 }) {
-  var d, c;
-  const [o, q] = K([]), e = E ?? "", a = () => {
-    q(J(e, { isRequired: f, validates: M }));
-  }, z = n(e), p = n(!1);
-  L(() => {
+  var c, m;
+  const [o, z] = O([]), t = V ?? "", a = () => {
+    z(K(t, { isRequired: f, validates: j }));
+  }, A = n(t), p = n(!1);
+  P(() => {
     if (!p.current) {
-      if (e === z.current) {
-        G(e) || a();
+      if (t === A.current) {
+        J(t) || a();
         return;
       }
       p.current = !0;
     }
     a();
-  }, [e]);
+  }, [t]);
   const i = n(!1);
-  return /* @__PURE__ */ A(
-    O,
+  return /* @__PURE__ */ G(
+    Q,
     {
       cssStyle: r,
       className: "inline-flex [&>input]:flex-auto",
       isErrored: !!o.length,
       isDisabled: l,
       children: [
-        T,
-        /* @__PURE__ */ s(
+        k,
+        /* @__PURE__ */ x(
           "input",
           {
-            type: V,
-            id: k,
-            name: v,
-            role: I,
-            "aria-label": W,
-            "aria-expanded": w,
-            "aria-controls": C,
-            "aria-activedescendant": F,
-            "aria-autocomplete": H,
-            onKeyDown: N,
-            value: e,
+            type: b,
+            id: I,
+            name: E,
+            role: W,
+            "aria-label": d ? void 0 : w,
+            "aria-labelledby": d,
+            "aria-expanded": C,
+            "aria-controls": F,
+            "aria-activedescendant": H,
+            "aria-autocomplete": N,
+            onKeyDown: q,
+            value: t,
             required: f,
-            placeholder: b,
+            placeholder: g,
             disabled: l,
-            autoComplete: B,
-            maxLength: g,
+            autoComplete: T,
+            maxLength: M,
             "aria-invalid": o.length ? "true" : void 0,
             onChange: (u) => {
-              const m = u.target.value;
-              t == null || t(
-                i.current ? m : x(m)
+              const s = u.target.value;
+              e == null || e(
+                i.current ? s : v(s)
               );
             },
             onCompositionStart: () => {
               i.current = !0;
             },
             onCompositionEnd: (u) => {
-              i.current = !1, t == null || t(x(u.currentTarget.value));
+              i.current = !1, e == null || e(v(u.currentTarget.value));
             },
             onBlur: () => a()
           }
         ),
-        j,
-        /* @__PURE__ */ s(
-          P,
+        B,
+        /* @__PURE__ */ x(
+          R,
           {
             errorMessages: o,
             cssStyle: {
-              textColor: (d = r == null ? void 0 : r.error) == null ? void 0 : d.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: (m = r == null ? void 0 : r.error) == null ? void 0 : m.textColor
             }
           }
         )
@@ -102,5 +104,5 @@ function Z({
   );
 }
 export {
-  Z as TextBox
+  $ as TextBox
 };

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.7.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.7.0"
   },
   "scripts": {
     "build": "vite build && node scripts/copy-assets.mjs",