@serendie/ui 2.5.0 → 2.5.1

package/dist/components/TextField/TextField.js

@@ -1,82 +1,86 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { SerendieSymbolAlertCircle as A, SerendieSymbolClose as W } from "@serendie/symbols";
 import z from "../../node_modules/merge-refs/dist/esm/index.js";
 import m, { forwardRef as B } from "react";
-import { textFieldRecipe as F } from "../../recipes/textFieldRecipe.js";
-import { useTranslations as D } from "../../i18n/index.js";
-import { cx as E } from "../../styled-system/css/cx.js";
-import { css as V } from "../../styled-system/css/css.js";
-const U = B(
+import { textFieldRecipe as b } from "../../recipes/textFieldRecipe.js";
+import { useTranslations as E } from "../../i18n/index.js";
+import { cx as G } from "../../styled-system/css/cx.js";
+import { css as w } from "../../styled-system/css/css.js";
+const X = B(
   ({
-    placeholder: b,
+    placeholder: F,
     label: d,
-    description: i,
+    description: o,
     required: u,
-    requiredLabel: S,
-    invalidMessage: c,
-    invalid: r,
-    type: w = "text",
-    disabled: n,
-    onChange: h,
-    value: f,
-    className: y,
-    leftContent: N,
-    rightContent: p,
+    requiredLabel: V,
+    invalidMessage: i,
+    invalid: s,
+    type: y = "text",
+    disabled: c,
+    onChange: f,
+    value: h,
+    className: C,
+    leftContent: p,
+    rightContent: N,
     ...l
-  }, C) => {
-    const v = D(), o = m.useRef(null), P = z(o, C), [_, j] = F.splitVariantProps({
+  }, P) => {
+    const v = E(), a = m.useRef(null), S = z(a, P), [D, _] = b.splitVariantProps({
       ...l
-    }), t = F(_), I = i || r && c, [T, k] = m.useState(l.defaultValue || f), g = l.id || m.useId(), q = () => {
+    }), t = b(D), j = o || s && i, [I, T] = m.useState(l.defaultValue || h), g = l.id || m.useId(), k = () => {
       var x;
-      const s = {
+      const r = {
         target: { value: "" }
       };
-      R(s), (x = l.onReset) == null || x.call(l, s), o.current && (o.current.value = "");
-    }, R = (s) => {
-      k(s.target.value), h && h(s);
+      R(r), (x = l.onReset) == null || x.call(l, r), a.current && (a.current.value = "", a.current.focus());
+    }, q = (r) => {
+      r.button === 0 && r.preventDefault();
+    }, R = (r) => {
+      T(r.target.value), f && f(r);
     };
-    return /* @__PURE__ */ a("div", { className: E(t.root, y), children: [
-      d ? /* @__PURE__ */ a("label", { className: t.label, htmlFor: g, children: [
+    return /* @__PURE__ */ n("div", { className: G(t.root, C), children: [
+      d ? /* @__PURE__ */ n("label", { className: t.label, htmlFor: g, children: [
         d,
-        u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: S ?? v("common.required") })
+        u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: V ?? v("common.required") })
       ] }) : null,
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ n(
         "div",
         {
           className: t.inputWrapper,
-          "data-invalid": r ? !0 : void 0,
-          "data-disabled": n ? !0 : void 0,
+          "data-invalid": s ? !0 : void 0,
+          "data-disabled": c ? !0 : void 0,
           children: [
-            N ? /* @__PURE__ */ e("div", { className: t.leftContent, children: N }) : /* @__PURE__ */ e("div", {}),
+            p ? /* @__PURE__ */ e("div", { className: t.leftContent, children: p }) : /* @__PURE__ */ e("div", {}),
             /* @__PURE__ */ e(
               "input",
               {
-                ref: P,
+                ref: S,
                 id: g,
-                placeholder: b,
+                placeholder: F,
                 required: u,
-                disabled: n,
-                value: f,
-                type: w,
+                disabled: c,
+                value: h,
+                type: y,
                 className: t.input,
                 onChange: R,
-                ...j
+                ..._
               }
             ),
-            p ? /* @__PURE__ */ e("div", { className: t.rightContent, children: p }) : /* @__PURE__ */ e("div", { className: t.icon, children: !n && /* disabledの場合はアイコンを表示しない */
-            (r ? /* @__PURE__ */ e(
+            N ? /* @__PURE__ */ e("div", { className: t.rightContent, children: N }) : /* @__PURE__ */ e("div", { className: t.icon, children: !c && /* disabledの場合はアイコンを表示しない */
+            (s ? /* @__PURE__ */ e(
               "span",
               {
-                className: V({
+                className: w({
                   color: "sd.system.color.impression.negative"
                 }),
                 children: /* @__PURE__ */ e(A, { width: 20, height: 20 })
               }
-            ) : T ? /* @__PURE__ */ e(
+            ) : I ? /* @__PURE__ */ e(
               "button",
               {
-                className: V({ cursor: "pointer" }),
-                onClick: q,
+                type: "button",
+                className: w({ cursor: "pointer" }),
+                onPointerDown: q,
+                onClick: k,
                 "aria-label": v("textField.clearValue"),
                 children: /* @__PURE__ */ e(W, { width: 20, height: 20 })
               }
@@ -84,13 +88,13 @@ const U = B(
           ]
         }
       ),
-      I && /* @__PURE__ */ a("div", { className: t.messageField, children: [
-        i && /* @__PURE__ */ e("p", { className: t.description, children: i }),
-        r && c && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: c })
+      j && /* @__PURE__ */ n("div", { className: t.messageField, children: [
+        o && /* @__PURE__ */ e("p", { className: t.description, children: o }),
+        s && i && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: i })
       ] })
     ] });
   }
 );
 export {
-  U as TextField
+  X as TextField
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@serendie/ui",
   "description": "Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric",
   "license": "MIT",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "sideEffects": [