@serendie/ui 2.3.0 → 2.4.0

package/dist/components/ModalDialog/ModalDialog.js

@@ -1,16 +1,17 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
 import { Button as i } from "../Button/Button.js";
-import { Portal as c } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { sva as g } from "../../styled-system/css/sva.js";
-import { DialogRoot as y } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-root.js";
-import { DialogBackdrop as x } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-backdrop.js";
-import { DialogPositioner as f } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-positioner.js";
-import { DialogContent as h } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-content.js";
-import { cx as u } from "../../styled-system/css/cx.js";
-import { DialogTitle as b } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-title.js";
-import { DialogDescription as D } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-description.js";
-import { DialogCloseTrigger as v } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.js";
-const I = g({
+import { useTranslations as y } from "../../i18n/index.js";
+import { Portal as x } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { sva as f } from "../../styled-system/css/sva.js";
+import { DialogRoot as h } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-root.js";
+import { DialogBackdrop as u } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-backdrop.js";
+import { DialogPositioner as b } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-positioner.js";
+import { DialogContent as D } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-content.js";
+import { cx as v } from "../../styled-system/css/cx.js";
+import { DialogTitle as I } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-title.js";
+import { DialogDescription as k } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-description.js";
+import { DialogCloseTrigger as C } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.js";
+const N = f({
   slots: [
     "backdrop",
     "content",
@@ -74,31 +75,32 @@ const I = g({
       }
     }
   }
-}), R = ({
+}), q = ({
   isOpen: n,
-  title: d,
-  cancelButtonLabel: a,
+  title: a,
+  cancelButtonLabel: d,
   submitButtonLabel: r,
   onButtonClick: m,
+  submitButtonProps: l,
   children: p,
-  className: l,
-  ...o
+  className: c,
+  ...t
 }) => {
-  const s = I(o);
-  return /* @__PURE__ */ e(y, { open: n, ...o, children: /* @__PURE__ */ t(c, { children: [
-    /* @__PURE__ */ e(x, { className: s.backdrop }),
-    /* @__PURE__ */ e(f, { children: /* @__PURE__ */ t(h, { className: u(s.content, l), children: [
-      /* @__PURE__ */ t("div", { className: s.contentInner, children: [
-        /* @__PURE__ */ e(b, { className: s.title, children: d }),
-        /* @__PURE__ */ e(D, { className: s.description, children: p })
+  const g = y(), s = N(t);
+  return /* @__PURE__ */ e(h, { open: n, ...t, children: /* @__PURE__ */ o(x, { children: [
+    /* @__PURE__ */ e(u, { className: s.backdrop }),
+    /* @__PURE__ */ e(b, { children: /* @__PURE__ */ o(D, { className: v(s.content, c), children: [
+      /* @__PURE__ */ o("div", { className: s.contentInner, children: [
+        /* @__PURE__ */ e(I, { className: s.title, children: a }),
+        /* @__PURE__ */ e(k, { className: s.description, children: p })
       ] }),
-      /* @__PURE__ */ t("div", { className: s.buttonWrapper, children: [
-        /* @__PURE__ */ e(i, { onClick: m, children: r }),
-        /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(i, { styleType: "ghost", children: a || "閉じる" }) })
+      /* @__PURE__ */ o("div", { className: s.buttonWrapper, children: [
+        /* @__PURE__ */ e(i, { ...l, onClick: m, children: r }),
+        /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ e(i, { styleType: "ghost", children: d || g("modalDialog.close") }) })
       ] })
     ] }) })
   ] }) });
 };
 export {
-  R as ModalDialog
+  q as ModalDialog
 };

package/dist/components/Pagination/Pagination.js

@@ -1,16 +1,17 @@
-import { jsx as e, jsxs as T, Fragment as g } from "react/jsx-runtime";
-import { SerendieSymbolChevronLeft as S, SerendieSymbolChevronRight as C } from "@serendie/symbols";
-import _, { useState as I } from "react";
+import { jsx as e, jsxs as C, Fragment as c } from "react/jsx-runtime";
+import { SerendieSymbolChevronLeft as _, SerendieSymbolChevronRight as I } from "@serendie/symbols";
+import N, { useState as j } from "react";
 import { IconButton as m } from "../IconButton/IconButton.js";
-import { sva as N } from "../../styled-system/css/sva.js";
-import { PaginationRoot as j } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-root.js";
-import { cx as z } from "../../styled-system/css/cx.js";
-import { PaginationContext as R } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-context.js";
-import { PaginationPrevTrigger as w } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-prev-trigger.js";
-import { PaginationItem as O } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-item.js";
-import { PaginationEllipsis as W } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-ellipsis.js";
-import { PaginationNextTrigger as F } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-next-trigger.js";
-const L = N({
+import { useTranslations as z } from "../../i18n/index.js";
+import { sva as R } from "../../styled-system/css/sva.js";
+import { PaginationRoot as w } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-root.js";
+import { cx as O } from "../../styled-system/css/cx.js";
+import { PaginationContext as W } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-context.js";
+import { PaginationPrevTrigger as F } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-prev-trigger.js";
+import { PaginationItem as L } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-item.js";
+import { PaginationEllipsis as B } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-ellipsis.js";
+import { PaginationNextTrigger as E } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-next-trigger.js";
+const M = R({
   slots: ["root", "item", "ellipsis", "prevTrigger", "nextTrigger"],
   base: {
     root: {
@@ -80,102 +81,104 @@ const L = N({
   defaultVariants: {
     size: "medium"
   }
-}), Q = _.forwardRef(
+}), Z = N.forwardRef(
   ({
     count: d,
-    pageSize: c = 1,
-    page: o,
-    onPageChange: n,
-    siblingCount: p = 2,
-    className: h,
-    size: y = "medium",
-    ...f
-  }, u) => {
-    const [b, P] = I(1), i = L({ size: y }), v = {
+    pageSize: p = 1,
+    page: r,
+    onPageChange: l,
+    siblingCount: h = 2,
+    className: y,
+    size: f = "medium",
+    ...u
+  }, P) => {
+    const [b, v] = j(1), a = M({ size: f }), x = (t) => {
+      r || v(t.page), l == null || l(t);
+    }, i = z(), T = {
       count: d,
-      pageSize: c,
-      siblingCount: p,
-      ...o ? { page: o } : { page: b },
-      onPageChange: (t) => {
-        o || P(t.page), n == null || n(t);
-      }
+      pageSize: p,
+      siblingCount: h,
+      ...r ? { page: r } : { page: b },
+      onPageChange: x
     };
     return /* @__PURE__ */ e(
-      j,
+      w,
       {
-        ref: u,
-        className: z(i.root, h),
-        ...v,
-        ...f,
-        children: /* @__PURE__ */ e(R, { children: (t) => {
-          const r = t.page <= 1, x = Math.ceil(d / c), a = t.page >= x;
-          return /* @__PURE__ */ T(g, { children: [
+        ref: P,
+        className: O(a.root, y),
+        ...T,
+        ...u,
+        children: /* @__PURE__ */ e(W, { children: (t) => {
+          const n = t.page <= 1, S = Math.ceil(d / p), o = t.page >= S;
+          return /* @__PURE__ */ C(c, { children: [
             /* @__PURE__ */ e(
-              w,
+              F,
               {
-                className: i.prevTrigger,
-                disabled: r,
+                className: a.prevTrigger,
+                disabled: n,
                 asChild: !0,
                 children: /* @__PURE__ */ e(
                   m,
                   {
-                    icon: /* @__PURE__ */ e(S, {}),
+                    icon: /* @__PURE__ */ e(_, {}),
                     shape: "rectangle",
                     styleType: "ghost",
                     size: "small",
-                    "aria-label": r ? "最初のページです" : "前のページへ",
-                    disabled: r,
-                    title: r ? "最初のページです" : "前のページへ"
+                    "aria-label": i(n ? "pagination.firstPage" : "pagination.previousPage"),
+                    disabled: n,
+                    title: i(n ? "pagination.firstPage" : "pagination.previousPage")
                   }
                 )
               }
             ),
             t.pages.map(
-              (s, l) => s.type === "page" ? /* @__PURE__ */ e(
-                O,
+              (s, g) => s.type === "page" ? /* @__PURE__ */ e(
+                L,
                 {
                   ...s,
-                  className: i.item,
+                  className: a.item,
                   asChild: !0,
                   children: /* @__PURE__ */ e(
                     m,
                     {
-                      icon: /* @__PURE__ */ e(g, { children: s.value }),
+                      icon: /* @__PURE__ */ e(c, { children: s.value }),
                       shape: "rectangle",
                       styleType: "ghost",
                       size: "small",
-                      "aria-label": `ページ${s.value}へ移動`,
-                      title: `ページ${s.value}へ移動`
+                      "aria-label": i("pagination.goToPage", {
+                        page: s.value
+                      }),
+                      title: i("pagination.goToPage", { page: s.value })
                     }
                   )
                 },
-                l
+                g
               ) : /* @__PURE__ */ e(
-                W,
+                B,
                 {
-                  index: l,
-                  className: i.ellipsis,
+                  index: g,
+                  className: a.ellipsis,
                   children: "…"
                 },
-                l
+                g
               )
             ),
             /* @__PURE__ */ e(
-              F,
+              E,
               {
-                className: i.nextTrigger,
-                disabled: a,
+                className: a.nextTrigger,
+                disabled: o,
                 asChild: !0,
                 children: /* @__PURE__ */ e(
                   m,
                   {
-                    icon: /* @__PURE__ */ e(C, {}),
+                    icon: /* @__PURE__ */ e(I, {}),
                     shape: "rectangle",
                     styleType: "ghost",
                     size: "small",
-                    "aria-label": a ? "最後のページです" : "次のページへ",
-                    disabled: a,
-                    title: a ? "最後のページです" : "次のページへ"
+                    "aria-label": i(o ? "pagination.lastPage" : "pagination.nextPage"),
+                    disabled: o,
+                    title: i(o ? "pagination.lastPage" : "pagination.nextPage")
                   }
                 )
               }
@@ -187,6 +190,6 @@ const L = N({
   }
 );
 export {
-  Q as Pagination,
-  L as PaginationStyle
+  Z as Pagination,
+  M as PaginationStyle
 };

package/dist/components/PasswordField/PasswordField.js

@@ -1,38 +1,39 @@
 import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as n, useState as d } from "react";
-import { TextField as m } from "../TextField/TextField.js";
-import { SerendieSymbolEyeHidden as p, SerendieSymbolEye as y } from "@serendie/symbols";
-import { IconButton as g } from "../IconButton/IconButton.js";
-const w = n(
-  ({ disableToggle: s = !1, disabled: e, ...r }, i) => {
-    const [t, l] = d(!1);
+import { forwardRef as m, useState as p } from "react";
+import { TextField as w } from "../TextField/TextField.js";
+import { SerendieSymbolEyeHidden as y, SerendieSymbolEye as c } from "@serendie/symbols";
+import { IconButton as f } from "../IconButton/IconButton.js";
+import { useTranslations as g } from "../../i18n/index.js";
+const P = m(
+  ({ disableToggle: r = !1, disabled: t, ...i }, a) => {
+    const e = g(), [s, d] = p(!1), l = r ? void 0 : /* @__PURE__ */ o(
+      f,
+      {
+        type: "button",
+        onClick: () => {
+          d((n) => !n);
+        },
+        styleType: "ghost",
+        size: "small",
+        shape: "circle",
+        "aria-label": e(s ? "passwordField.hidePassword" : "passwordField.showPassword"),
+        disabled: t,
+        icon: s ? /* @__PURE__ */ o(y, {}) : /* @__PURE__ */ o(c, {})
+      }
+    );
     return /* @__PURE__ */ o(
-      m,
+      w,
       {
-        type: t ? "text" : "password",
-        rightContent: s ? void 0 : /* @__PURE__ */ o(
-          g,
-          {
-            type: "button",
-            onClick: () => {
-              l((a) => !a);
-            },
-            styleType: "ghost",
-            size: "small",
-            shape: "circle",
-            "aria-label": t ? "パスワードを隠す" : "パスワードを表示",
-            disabled: e,
-            icon: t ? /* @__PURE__ */ o(p, {}) : /* @__PURE__ */ o(y, {})
-          }
-        ),
-        disabled: e,
-        ...r,
-        ref: i
+        type: s ? "text" : "password",
+        rightContent: l,
+        disabled: t,
+        ...i,
+        ref: a
       }
     );
   }
 );
-w.displayName = "PasswordField";
+P.displayName = "PasswordField";
 export {
-  w as PasswordField
+  P as PasswordField
 };

package/dist/components/Search/Search.d.ts

@@ -48,6 +48,13 @@ export declare const SearchStyle: import('../../../styled-system/types').SlotRec
 }>;
 type SearchStyleProps = ComboboxRootProps<string> & RecipeVariantProps<typeof SearchStyle> & {
     items?: string[];
+    /**
+     * Portalを使用するかどうか
+     * - `true` (デフォルト): body直下にポータルする。ModalDialog/Drawer内にある場合は自動的にそのコンテンツ内にポータルされる
+     * - `false`: ポータルを使用せず、その場にレンダリングする
+     * @default true
+     */
+    portalled?: boolean;
 };
 export declare const Search: React.FC<SearchStyleProps>;
 export {};

package/dist/components/Search/Search.js

@@ -1,20 +1,21 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { SerendieSymbolMagnifyingGlass as p, SerendieSymbolClose as g } from "@serendie/symbols";
-import { createListCollection as y } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
-import { Portal as x } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { Box as b } from "../../styled-system/jsx/box.js";
-import { sva as u } from "../../styled-system/css/sva.js";
-import { ComboboxRoot as h } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-root.js";
-import { ComboboxControl as f } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-control.js";
-import { cx as S } from "../../styled-system/css/cx.js";
-import { ComboboxInput as C } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-input.js";
-import { ComboboxTrigger as w } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-trigger.js";
-import { ComboboxPositioner as I } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-positioner.js";
-import { ComboboxContent as v } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-content.js";
-import { ComboboxItemGroup as B } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-group.js";
-import { ComboboxItem as N } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item.js";
-import { ComboboxItemText as _ } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-text.js";
-const d = u({
+import { SerendieSymbolMagnifyingGlass as x, SerendieSymbolClose as b } from "@serendie/symbols";
+import { useAutoPortalContainer as u } from "../../hooks/useAutoPortalContainer.js";
+import { createListCollection as f } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
+import { Portal as h } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { Box as S } from "../../styled-system/jsx/box.js";
+import { sva as C } from "../../styled-system/css/sva.js";
+import { ComboboxRoot as w } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-root.js";
+import { ComboboxControl as I } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-control.js";
+import { cx as v } from "../../styled-system/css/cx.js";
+import { ComboboxInput as B } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-input.js";
+import { ComboboxTrigger as N } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-trigger.js";
+import { ComboboxPositioner as R } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-positioner.js";
+import { ComboboxContent as _ } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-content.js";
+import { ComboboxItemGroup as P } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-group.js";
+import { ComboboxItem as E } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item.js";
+import { ComboboxItemText as T } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-text.js";
+const d = C({
   slots: [
     "input",
     "control",
@@ -143,16 +144,17 @@ const d = u({
   defaultVariants: {
     size: "medium"
   }
-}), F = ({
+}), X = ({
   items: i = [],
-  ...a
+  portalled: t = !0,
+  ...r
 }) => {
-  const [r, l] = d.splitVariantProps(a), s = d(r), { collection: E, ...t } = l, n = y({ items: i });
+  const [l, c] = d.splitVariantProps(r), s = d(l), { collection: L, ...n } = c, { triggerRef: p, portalContainerRef: g } = u(t), m = f({ items: i });
   return /* @__PURE__ */ e(
-    h,
+    w,
     {
-      ...t,
-      collection: n,
+      ...n,
+      collection: m,
       lazyMount: !0,
       unmountOnExit: !0,
       positioning: {
@@ -162,34 +164,41 @@ const d = u({
         }
       },
       children: [
-        /* @__PURE__ */ e(f, { className: S(s.control, t.className), children: [
-          /* @__PURE__ */ o("div", { className: s.iconBox, children: /* @__PURE__ */ o(p, { className: s.icon }) }),
-          /* @__PURE__ */ o(C, { className: s.input }),
-          i.length > 0 && /* @__PURE__ */ o(w, { children: /* @__PURE__ */ o("div", { className: s.closeIcon, children: /* @__PURE__ */ o(g, { className: s.icon }) }) })
-        ] }),
-        /* @__PURE__ */ o(x, { children: /* @__PURE__ */ o(I, { children: /* @__PURE__ */ o(v, { className: s.combobox, children: /* @__PURE__ */ o(B, { id: "framework", children: n.items.map((m, c) => /* @__PURE__ */ e(
-          N,
+        /* @__PURE__ */ e(
+          I,
           {
-            item: m,
+            className: v(s.control, n.className),
+            ref: p,
+            children: [
+              /* @__PURE__ */ o("div", { className: s.iconBox, children: /* @__PURE__ */ o(x, { className: s.icon }) }),
+              /* @__PURE__ */ o(B, { className: s.input }),
+              i.length > 0 && /* @__PURE__ */ o(N, { children: /* @__PURE__ */ o("div", { className: s.closeIcon, children: /* @__PURE__ */ o(b, { className: s.icon }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(h, { disabled: !t, container: g, children: /* @__PURE__ */ o(R, { children: /* @__PURE__ */ o(_, { className: s.combobox, children: /* @__PURE__ */ o(P, { id: "framework", children: m.items.map((a, y) => /* @__PURE__ */ e(
+          E,
+          {
+            item: a,
             className: s.comboboxItem,
             children: [
               /* @__PURE__ */ o(
-                b,
+                S,
                 {
                   w: "sd.system.dimension.spacing.large",
                   h: "sd.system.dimension.spacing.large"
                 }
               ),
-              /* @__PURE__ */ o(_, { children: m })
+              /* @__PURE__ */ o(T, { children: a })
             ]
           },
-          c
+          y
         )) }) }) }) })
       ]
     }
   );
 };
 export {
-  F as Search,
+  X as Search,
   d as SearchStyle
 };

package/dist/components/Select/Select.d.ts

@@ -58,6 +58,13 @@ type Props = {
     invalidMessage?: string;
     items?: selectItem[];
     collection?: SelectRootProps<selectItem>["collection"];
+    /**
+     * Portalを使用するかどうか
+     * - `true` (デフォルト): body直下にポータルする。ModalDialog/Drawer内にある場合は自動的にそのコンテンツ内にポータルされる
+     * - `false`: ポータルを使用せず、その場にレンダリングする
+     * @default true
+     */
+    portalled?: boolean;
 };
 type selectItem = {
     label: string;