@serendie/ui 2.3.0-dev.202512090256 → 2.3.0-dev.202601080839

package/dist/components/TextArea/TextArea.js

@@ -1,9 +1,10 @@
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
-import _ from "../../node_modules/merge-refs/dist/esm/index.js";
-import c, { forwardRef as w } from "react";
-import { sva as C } from "../../styled-system/css/sva.js";
-import { cx as N } from "../../styled-system/css/cx.js";
-const p = C({
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import w from "../../node_modules/merge-refs/dist/esm/index.js";
+import c, { forwardRef as C } from "react";
+import { useTranslations as N } from "../../i18n/index.js";
+import { sva as R } from "../../styled-system/css/sva.js";
+import { cx as T } from "../../styled-system/css/cx.js";
+const p = R({
   slots: [
     "root",
     "label",
@@ -102,7 +103,7 @@ const p = C({
       }
     }
   }
-}), A = w(
+}), I = C(
   ({
     placeholder: y,
     label: r,
@@ -110,44 +111,44 @@ const p = C({
     required: d,
     requiredLabel: u,
     invalidMessage: o,
-    invalid: a,
-    disabled: l,
+    invalid: i,
+    disabled: n,
     className: g,
-    ...n
+    ...l
   }, h) => {
-    const x = c.useRef(null), b = _(x, h), [f, S] = p.splitVariantProps(n), e = p(f), v = t || a && o, m = n.id || c.useId();
-    return /* @__PURE__ */ i("div", { className: N(e.root, g), children: [
-      r ? /* @__PURE__ */ i("label", { className: e.label, htmlFor: m, children: [
+    const x = N(), b = c.useRef(null), f = w(b, h), [S, v] = p.splitVariantProps(l), e = p(S), _ = t || i && o, m = l.id || c.useId();
+    return /* @__PURE__ */ a("div", { className: T(e.root, g), children: [
+      r ? /* @__PURE__ */ a("label", { className: e.label, htmlFor: m, children: [
         r,
-        d && /* @__PURE__ */ s("span", { className: e.required, children: u ?? "必須" })
+        d && /* @__PURE__ */ s("span", { className: e.required, children: u ?? x("common.required") })
       ] }) : null,
       /* @__PURE__ */ s(
         "div",
         {
           className: e.wrapper,
-          "data-invalid": a ? !0 : void 0,
-          "data-disabled": l ? !0 : void 0,
+          "data-invalid": i ? !0 : void 0,
+          "data-disabled": n ? !0 : void 0,
           children: /* @__PURE__ */ s(
             "textarea",
             {
-              ref: b,
+              ref: f,
               id: m,
               placeholder: y,
               required: d,
-              disabled: l,
+              disabled: n,
               className: e.textarea,
-              ...S
+              ...v
             }
           )
         }
       ),
-      v && /* @__PURE__ */ i("div", { className: e.messageField, children: [
+      _ && /* @__PURE__ */ a("div", { className: e.messageField, children: [
         t && /* @__PURE__ */ s("p", { className: e.description, children: t }),
-        a && o && /* @__PURE__ */ s("p", { className: e.invalidMessage, children: o })
+        i && o && /* @__PURE__ */ s("p", { className: e.invalidMessage, children: o })
       ] })
     ] });
   }
 );
 export {
-  A as TextArea
+  I as TextArea
 };

package/dist/components/TextField/TextField.js

@@ -2,72 +2,72 @@ import { jsxs as a, 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 x } from "../../recipes/textFieldRecipe.js";
+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 b } from "../../styled-system/css/css.js";
+import { css as V } from "../../styled-system/css/css.js";
 const U = B(
   ({
-    placeholder: F,
+    placeholder: b,
     label: d,
     description: i,
     required: u,
     requiredLabel: S,
-    invalidMessage: n,
+    invalidMessage: c,
     invalid: r,
-    type: V = "text",
-    disabled: c,
+    type: w = "text",
+    disabled: n,
     onChange: h,
     value: f,
-    className: w,
+    className: y,
     leftContent: N,
     rightContent: p,
-    ...s
-  }, y) => {
-    const C = D(), o = m.useRef(null), P = z(o, y), [_, j] = x.splitVariantProps({
-      ...s
-    }), t = x(_), I = i || r && n, [T, k] = m.useState(s.defaultValue || f), v = s.id || m.useId(), q = () => {
-      var R;
-      const l = {
+    ...l
+  }, C) => {
+    const v = D(), o = m.useRef(null), P = z(o, C), [_, j] = F.splitVariantProps({
+      ...l
+    }), t = F(_), I = i || r && c, [T, k] = m.useState(l.defaultValue || f), g = l.id || m.useId(), q = () => {
+      var x;
+      const s = {
         target: { value: "" }
       };
-      g(l), (R = s.onReset) == null || R.call(s, l), o.current && (o.current.value = "");
-    }, g = (l) => {
-      k(l.target.value), h && h(l);
+      R(s), (x = l.onReset) == null || x.call(l, s), o.current && (o.current.value = "");
+    }, R = (s) => {
+      k(s.target.value), h && h(s);
     };
-    return /* @__PURE__ */ a("div", { className: E(t.root, w), children: [
-      d ? /* @__PURE__ */ a("label", { className: t.label, htmlFor: v, children: [
+    return /* @__PURE__ */ a("div", { className: E(t.root, y), children: [
+      d ? /* @__PURE__ */ a("label", { className: t.label, htmlFor: g, children: [
         d,
-        u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: S ?? C("common.required") })
+        u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: S ?? v("common.required") })
       ] }) : null,
       /* @__PURE__ */ a(
         "div",
         {
           className: t.inputWrapper,
           "data-invalid": r ? !0 : void 0,
-          "data-disabled": c ? !0 : void 0,
+          "data-disabled": n ? !0 : void 0,
           children: [
             N ? /* @__PURE__ */ e("div", { className: t.leftContent, children: N }) : /* @__PURE__ */ e("div", {}),
             /* @__PURE__ */ e(
               "input",
               {
                 ref: P,
-                id: v,
-                placeholder: F,
+                id: g,
+                placeholder: b,
                 required: u,
-                disabled: c,
+                disabled: n,
                 value: f,
-                type: V,
+                type: w,
                 className: t.input,
-                onChange: g,
+                onChange: R,
                 ...j
               }
             ),
-            p ? /* @__PURE__ */ e("div", { className: t.rightContent, children: p }) : /* @__PURE__ */ e("div", { className: t.icon, children: !c && /* disabledの場合はアイコンを表示しない */
+            p ? /* @__PURE__ */ e("div", { className: t.rightContent, children: p }) : /* @__PURE__ */ e("div", { className: t.icon, children: !n && /* disabledの場合はアイコンを表示しない */
             (r ? /* @__PURE__ */ e(
               "span",
               {
-                className: b({
+                className: V({
                   color: "sd.system.color.impression.negative"
                 }),
                 children: /* @__PURE__ */ e(A, { width: 20, height: 20 })
@@ -75,9 +75,9 @@ const U = B(
             ) : T ? /* @__PURE__ */ e(
               "button",
               {
-                className: b({ cursor: "pointer" }),
+                className: V({ cursor: "pointer" }),
                 onClick: q,
-                "aria-label": "値をクリア",
+                "aria-label": v("textField.clearValue"),
                 children: /* @__PURE__ */ e(W, { width: 20, height: 20 })
               }
             ) : null) })
@@ -86,7 +86,7 @@ const U = B(
       ),
       I && /* @__PURE__ */ a("div", { className: t.messageField, children: [
         i && /* @__PURE__ */ e("p", { className: t.description, children: i }),
-        r && n && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: n })
+        r && c && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: c })
       ] })
     ] });
   }

package/dist/hooks/useAutoPortalContainer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ModalDialog/Drawer内にある場合、自動的にそのコンテンツ要素をポータルコンテナとして検出するフック
+ *
+ * @param portalled - Portalを使用するかどうか
+ * @returns triggerRef - トリガー要素に設定するref
+ * @returns portalContainerRef - Portalのcontainerプロパティに渡すref
+ *
+ * @example
+ * ```tsx
+ * const { triggerRef, portalContainerRef } = useAutoPortalContainer(portalled);
+ *
+ * <Trigger ref={triggerRef}>...</Trigger>
+ * <Portal container={portalContainerRef}>...</Portal>
+ * ```
+ */
+export declare const useAutoPortalContainer: (portalled: boolean) => {
+    triggerRef: import('react').RefObject<HTMLElement>;
+    portalContainerRef: {
+        current: HTMLElement;
+    } | undefined;
+};

package/dist/hooks/useAutoPortalContainer.js

@@ -0,0 +1,16 @@
+import { useRef as a, useState as c, useEffect as s } from "react";
+const l = (r) => {
+  const t = a(null), [e, o] = c(
+    null
+  );
+  return s(() => {
+    if (!r || !t.current) return;
+    const n = t.current.closest(
+      '[data-scope="dialog"][data-part="content"], [data-scope="drawer"][data-part="content"]'
+    );
+    n && o(n);
+  }, [r]), { triggerRef: t, portalContainerRef: e ? { current: e } : void 0 };
+};
+export {
+  l as useAutoPortalContainer
+};

package/dist/i18n/dictionary.d.ts

@@ -1,10 +1,34 @@
 export declare const dictionary: {
     readonly ja: {
         readonly "common.required": "必須";
+        readonly "textField.clearValue": "値をクリア";
+        readonly "passwordField.hidePassword": "パスワードを隠す";
+        readonly "passwordField.showPassword": "パスワードを表示";
+        readonly "datePicker.selectDate": "日付を選択";
+        readonly "datePicker.startDate": "開始日";
+        readonly "datePicker.endDate": "終了日";
         readonly "pagination.page": "{{page}}ページ目";
+        readonly "pagination.firstPage": "最初のページです";
+        readonly "pagination.previousPage": "前のページへ";
+        readonly "pagination.lastPage": "最後のページです";
+        readonly "pagination.nextPage": "次のページへ";
+        readonly "pagination.goToPage": "ページ{{page}}へ移動";
+        readonly "modalDialog.close": "閉じる";
     };
     readonly en: {
         readonly "common.required": "Required";
+        readonly "textField.clearValue": "Clear value";
+        readonly "passwordField.hidePassword": "Hide password";
+        readonly "passwordField.showPassword": "Show password";
+        readonly "datePicker.selectDate": "Select date";
+        readonly "datePicker.startDate": "Start date";
+        readonly "datePicker.endDate": "End date";
         readonly "pagination.page": "Page {{page}}";
+        readonly "pagination.firstPage": "This is the first page";
+        readonly "pagination.previousPage": "Go to previous page";
+        readonly "pagination.lastPage": "This is the last page";
+        readonly "pagination.nextPage": "Go to next page";
+        readonly "pagination.goToPage": "Go to page {{page}}";
+        readonly "modalDialog.close": "Close";
     };
 };

package/dist/i18n/dictionary.js

@@ -1,13 +1,37 @@
-const e = {
+const a = {
   ja: {
     "common.required": "必須",
-    "pagination.page": "{{page}}ページ目"
+    "textField.clearValue": "値をクリア",
+    "passwordField.hidePassword": "パスワードを隠す",
+    "passwordField.showPassword": "パスワードを表示",
+    "datePicker.selectDate": "日付を選択",
+    "datePicker.startDate": "開始日",
+    "datePicker.endDate": "終了日",
+    "pagination.page": "{{page}}ページ目",
+    "pagination.firstPage": "最初のページです",
+    "pagination.previousPage": "前のページへ",
+    "pagination.lastPage": "最後のページです",
+    "pagination.nextPage": "次のページへ",
+    "pagination.goToPage": "ページ{{page}}へ移動",
+    "modalDialog.close": "閉じる"
   },
   en: {
     "common.required": "Required",
-    "pagination.page": "Page {{page}}"
+    "textField.clearValue": "Clear value",
+    "passwordField.hidePassword": "Hide password",
+    "passwordField.showPassword": "Show password",
+    "datePicker.selectDate": "Select date",
+    "datePicker.startDate": "Start date",
+    "datePicker.endDate": "End date",
+    "pagination.page": "Page {{page}}",
+    "pagination.firstPage": "This is the first page",
+    "pagination.previousPage": "Go to previous page",
+    "pagination.lastPage": "This is the last page",
+    "pagination.nextPage": "Go to next page",
+    "pagination.goToPage": "Go to page {{page}}",
+    "modalDialog.close": "Close"
   }
 };
 export {
-  e as dictionary
+  a as dictionary
 };

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.3.0-dev.202512090256",
+  "version": "2.3.0-dev.202601080839",
   "type": "module",
   "types": "./dist/index.d.ts",
   "sideEffects": [