@serendie/ui 2.3.0 → 2.4.0

package/dist/components/Select/Select.js

@@ -1,21 +1,23 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { SerendieSymbolChevronDown as S } from "@serendie/symbols";
-import { List as v } from "../List/List.js";
-import { ListItem as w } from "../List/ListItem.js";
-import { createListCollection as _ } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
-import { Portal as C } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { sva as T } from "../../styled-system/css/sva.js";
-import { SelectRoot as N } from "../../node_modules/@ark-ui/react/dist/components/select/select-root.js";
-import { cx as z } from "../../styled-system/css/cx.js";
-import { SelectLabel as R } from "../../node_modules/@ark-ui/react/dist/components/select/select-label.js";
-import { css as d } from "../../styled-system/css/css.js";
-import { SelectControl as V } from "../../node_modules/@ark-ui/react/dist/components/select/select-control.js";
-import { SelectTrigger as L } from "../../node_modules/@ark-ui/react/dist/components/select/select-trigger.js";
-import { SelectValueText as P } from "../../node_modules/@ark-ui/react/dist/components/select/select-value-text.js";
-import { SelectPositioner as B } from "../../node_modules/@ark-ui/react/dist/components/select/select-positioner.js";
-import { SelectContent as I } from "../../node_modules/@ark-ui/react/dist/components/select/select-content.js";
-import { SelectItem as O } from "../../node_modules/@ark-ui/react/dist/components/select/select-item.js";
-const l = T({
+import { SerendieSymbolChevronDown as C } from "@serendie/symbols";
+import { List as T } from "../List/List.js";
+import { ListItem as N } from "../List/ListItem.js";
+import { useAutoPortalContainer as R } from "../../hooks/useAutoPortalContainer.js";
+import { useTranslations as z } from "../../i18n/index.js";
+import { createListCollection as P } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
+import { Portal as V } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { sva as L } from "../../styled-system/css/sva.js";
+import { SelectRoot as B } from "../../node_modules/@ark-ui/react/dist/components/select/select-root.js";
+import { cx as I } from "../../styled-system/css/cx.js";
+import { SelectLabel as A } from "../../node_modules/@ark-ui/react/dist/components/select/select-label.js";
+import { css as r } from "../../styled-system/css/css.js";
+import { SelectControl as O } from "../../node_modules/@ark-ui/react/dist/components/select/select-control.js";
+import { SelectTrigger as j } from "../../node_modules/@ark-ui/react/dist/components/select/select-trigger.js";
+import { SelectValueText as W } from "../../node_modules/@ark-ui/react/dist/components/select/select-value-text.js";
+import { SelectPositioner as E } from "../../node_modules/@ark-ui/react/dist/components/select/select-positioner.js";
+import { SelectContent as k } from "../../node_modules/@ark-ui/react/dist/components/select/select-content.js";
+import { SelectItem as q } from "../../node_modules/@ark-ui/react/dist/components/select/select-item.js";
+const c = L({
   slots: ["root", "valueText", "trigger", "content", "item", "iconBox"],
   base: {
     root: {
@@ -156,29 +158,30 @@ const l = T({
   defaultVariants: {
     size: "medium"
   }
-}), M = ({
-  placeholder: c = "",
-  label: r,
-  required: p,
-  requiredLabel: y,
-  invalid: a,
+}), de = ({
+  placeholder: p = "",
+  label: a,
+  required: y,
+  requiredLabel: g,
+  invalid: d,
   invalidMessage: m,
-  className: g,
-  items: u = [],
-  ...x
+  className: u,
+  items: x = [],
+  portalled: n = !0,
+  ...h
 }) => {
-  const [t, h] = l.splitVariantProps(x), o = l(t), { collection: j, ...b } = h, n = _({
-    items: u,
+  const b = z(), [t, f] = c.splitVariantProps(h), o = c(t), { collection: D, ...S } = f, { triggerRef: v, portalContainerRef: w } = R(n), l = P({
+    items: x,
     itemToString: (s) => s.label,
     itemToValue: (s) => s.value
   });
   return /* @__PURE__ */ i(
-    N,
+    B,
     {
-      ...b,
-      collection: n,
-      invalid: a,
-      className: z(o.root, g),
+      ...S,
+      collection: l,
+      invalid: d,
+      className: I(o.root, u),
       positioning: {
         sameWidth: !0,
         offset: {
@@ -187,45 +190,45 @@ const l = T({
         }
       },
       children: [
-        r && t.size != "small" && // smallの場合はラベルを表示しない
+        a && t.size != "small" && // smallの場合はラベルを表示しない
         /* @__PURE__ */ i(
-          R,
+          A,
           {
-            className: d({
+            className: r({
               textStyle: {
                 base: "sd.system.typography.label.medium_compact",
                 expanded: "sd.system.typography.label.medium_expanded"
               }
             }),
             children: [
-              r,
-              p && /* @__PURE__ */ e(
+              a,
+              y && /* @__PURE__ */ e(
                 "span",
                 {
-                  className: d({
+                  className: r({
                     pl: "sd.system.dimension.spacing.extraSmall",
                     color: "sd.system.color.impression.negative"
                   }),
-                  children: y ?? "必須"
+                  children: g ?? b("common.required")
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ e(V, { children: /* @__PURE__ */ i(L, { className: o.trigger, children: [
+        /* @__PURE__ */ e(O, { children: /* @__PURE__ */ i(j, { className: o.trigger, ref: v, children: [
           /* @__PURE__ */ e(
-            P,
+            W,
             {
-              placeholder: c,
+              placeholder: p,
               className: o.valueText
             }
           ),
-          /* @__PURE__ */ e(S, { className: o.iconBox })
+          /* @__PURE__ */ e(C, { className: o.iconBox })
         ] }) }),
-        a && m && /* @__PURE__ */ e(
+        d && m && /* @__PURE__ */ e(
           "div",
           {
-            className: d({
+            className: r({
               textStyle: {
                 base: "sd.system.typography.body.extraSmall_compact",
                 expanded: "sd.system.typography.body.extraSmall_expanded"
@@ -235,20 +238,20 @@ const l = T({
             children: m
           }
         ),
-        /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(I, { className: o.content, children: /* @__PURE__ */ e(v, { children: n.items.map((s, f) => /* @__PURE__ */ e(O, { item: s, children: /* @__PURE__ */ e(
-          w,
+        /* @__PURE__ */ e(V, { disabled: !n, container: w, children: /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(k, { className: o.content, children: /* @__PURE__ */ e(T, { children: l.items.map((s, _) => /* @__PURE__ */ e(q, { item: s, children: /* @__PURE__ */ e(
+          N,
           {
             title: s.label,
             value: s.value,
             className: o.item,
             size: t.size == "small" ? "small" : void 0
           }
-        ) }, f)) }) }) }) })
+        ) }, _)) }) }) }) })
       ]
     }
   );
 };
 export {
-  M as Select,
-  l as SelectStyle
+  de as Select,
+  c as SelectStyle
 };

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