@serendie/ui 2.4.2 → 2.5.0-dev.202602161326

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

@@ -1,6 +1,7 @@
+import { default as React } from 'react';
 import { ComboboxRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SearchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "input" | "combobox" | "control" | "comboboxItem" | "iconBox" | "closeIcon", {
+export declare const SearchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "input" | "combobox" | "control" | "comboboxItem" | "iconBox" | "clearTrigger", {
     size: {
         medium: {
             iconBox: {
@@ -55,6 +56,15 @@ type SearchStyleProps = ComboboxRootProps<string> & RecipeVariantProps<typeof Se
      * @default true
      */
     portalled?: boolean;
+    /**
+     * 候補リストにない値（フリーテキスト）での検索を許可するかどうか
+     * @default true
+     */
+    allowCustomValue?: boolean;
+    /**
+     * 検索実行時のコールバック（Enterキー押下時・候補選択時）
+     */
+    onSearch?: (value: string) => void;
 };
 export declare const Search: React.FC<SearchStyleProps>;
 export {};

package/dist/components/Search/Search.js

@@ -1,21 +1,21 @@
-import { jsxs as e, jsx as o } from "react/jsx-runtime";
-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({
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import l from "react";
+import { SerendieSymbolMagnifyingGlass as k, SerendieSymbolClose as O } from "@serendie/symbols";
+import { useAutoPortalContainer as z } from "../../hooks/useAutoPortalContainer.js";
+import { createListCollection as j } 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 A } from "../../styled-system/jsx/box.js";
+import { sva as M } from "../../styled-system/css/sva.js";
+import { ComboboxRoot as D } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-root.js";
+import { ComboboxControl as G } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-control.js";
+import { cx as K } from "../../styled-system/css/cx.js";
+import { ComboboxInput as P } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-input.js";
+import { ComboboxPositioner as W } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-positioner.js";
+import { ComboboxContent as U } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-content.js";
+import { ComboboxItemGroup as q } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-group.js";
+import { ComboboxItem as F } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item.js";
+import { ComboboxItemText as J } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-text.js";
+const h = M({
   slots: [
     "input",
     "control",
@@ -23,7 +23,7 @@ const d = C({
     "comboboxItem",
     "iconBox",
     "icon",
-    "closeIcon"
+    "clearTrigger"
   ],
   base: {
     control: {
@@ -88,11 +88,11 @@ const d = C({
     icon: {
       width: "sd.system.dimension.spacing.large"
     },
-    closeIcon: {
-      opacity: 0,
-      "[data-state=open] &": {
-        opacity: 1
-      }
+    clearTrigger: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer"
     }
   },
   variants: {
@@ -144,17 +144,45 @@ const d = C({
   defaultVariants: {
     size: "medium"
   }
-}), X = ({
-  items: i = [],
-  portalled: t = !0,
-  ...r
+}), go = ({
+  items: r = [],
+  portalled: u = !0,
+  allowCustomValue: x = !0,
+  onSearch: i,
+  ...b
 }) => {
-  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(
-    w,
+  const [C, V] = h.splitVariantProps(b), t = h(C), { collection: Q, ...e } = V, { triggerRef: S, portalContainerRef: w } = z(u), d = e.inputValue !== void 0, [I, g] = l.useState(
+    e.defaultInputValue || ""
+  ), a = d ? e.inputValue : I, y = l.useRef(null), [v, c] = l.useState(
+    () => !!(e.inputValue || e.defaultInputValue)
+  ), m = l.useRef(null), R = l.useMemo(() => a ? r.filter(
+    (o) => o.toLowerCase().includes(a.toLowerCase())
+  ) : r, [r, a]), f = j({ items: R }), _ = (o) => {
+    var n;
+    d || g(o.inputValue), c(o.inputValue.length > 0), (n = e.onInputValueChange) == null || n.call(e, o);
+  }, B = (o) => {
+    var n;
+    o.value.length > 0 && (i == null || i(o.value[0])), (n = e.onValueChange) == null || n.call(e, o);
+  }, N = (o) => {
+    y.current = o.highlightedValue;
+  }, T = (o) => {
+    o.key === "Enter" && a && !y.current && (i == null || i(a));
+  }, E = (o) => {
+    c(o.target.value.length > 0);
+  }, L = () => {
+    var o;
+    m.current && (m.current.value = "", m.current.focus()), c(!1), d || g(""), (o = e.onInputValueChange) == null || o.call(e, { inputValue: "" });
+  };
+  return /* @__PURE__ */ p(
+    D,
     {
-      ...n,
-      collection: m,
+      ...e,
+      collection: f,
+      openOnClick: !0,
+      allowCustomValue: x,
+      onInputValueChange: _,
+      onValueChange: B,
+      onHighlightChange: N,
       lazyMount: !0,
       unmountOnExit: !0,
       positioning: {
@@ -164,41 +192,57 @@ const d = C({
         }
       },
       children: [
-        /* @__PURE__ */ e(
-          I,
+        /* @__PURE__ */ p(
+          G,
           {
-            className: v(s.control, n.className),
-            ref: p,
+            className: K(t.control, e.className),
+            ref: S,
             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__ */ s("div", { className: t.iconBox, children: /* @__PURE__ */ s(k, { className: t.icon }) }),
+              /* @__PURE__ */ s(
+                P,
+                {
+                  ref: m,
+                  className: t.input,
+                  onKeyDown: T,
+                  onChange: E
+                }
+              ),
+              v && /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  className: t.clearTrigger,
+                  onClick: L,
+                  children: /* @__PURE__ */ s(O, { className: t.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,
+        /* @__PURE__ */ s(H, { disabled: !u, container: w, children: /* @__PURE__ */ s(W, { children: /* @__PURE__ */ s(U, { className: t.combobox, children: /* @__PURE__ */ s(q, { id: "framework", children: f.items.map((o, n) => /* @__PURE__ */ p(
+          F,
           {
-            item: a,
-            className: s.comboboxItem,
+            item: o,
+            className: t.comboboxItem,
             children: [
-              /* @__PURE__ */ o(
-                S,
+              /* @__PURE__ */ s(
+                A,
                 {
                   w: "sd.system.dimension.spacing.large",
                   h: "sd.system.dimension.spacing.large"
                 }
               ),
-              /* @__PURE__ */ o(T, { children: a })
+              /* @__PURE__ */ s(J, { children: o })
             ]
           },
-          y
+          n
         )) }) }) }) })
       ]
     }
   );
 };
 export {
-  X as Search,
-  d as SearchStyle
+  go as Search,
+  h as SearchStyle
 };

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/dist/node_modules/@serendie/design-token/dist/panda-tokens.js

@@ -26,6 +26,18 @@ const e = {
               },
               wh60: {
                 value: "#FFFFFF99"
+              },
+              wh2: {
+                value: "#FFFFFF05"
+              },
+              wh5: {
+                value: "#FFFFFF0D"
+              },
+              wh20: {
+                value: "#FFFFFF33"
+              },
+              bl60: {
+                value: "#00000099"
               }
             },
             gray: {
@@ -60,6 +72,38 @@ const e = {
                 value: "#232322"
               }
             },
+            neutral: {
+              100: {
+                value: "#FAFAFA"
+              },
+              200: {
+                value: "#F5F5F5"
+              },
+              300: {
+                value: "#F0F0F0"
+              },
+              400: {
+                value: "#EBEBEB"
+              },
+              500: {
+                value: "#E5E5E5"
+              },
+              600: {
+                value: "#474747"
+              },
+              700: {
+                value: "#3B3B3B"
+              },
+              800: {
+                value: "#2E2E2E"
+              },
+              900: {
+                value: "#212121"
+              },
+              1e3: {
+                value: "#141414"
+              }
+            },
             red: {
               100: {
                 value: "#FCEBEA"
@@ -436,7 +480,7 @@ const e = {
               value: "#BCEEDD"
             },
             onPositiveContainer: {
-              value: "#FFFFFF"
+              value: "#000000"
             },
             positiveContainerVariant: {
               value: "#DBF5EA"
@@ -475,6 +519,21 @@ const e = {
             },
             scrim: {
               value: "#00000033"
+            },
+            surfaceDim: {
+              value: "#F0F0F0"
+            },
+            surfaceBright: {
+              value: "#FFFFFF"
+            },
+            surfaceContainerBright: {
+              value: "#FFFFFF"
+            },
+            surfaceContainer: {
+              value: "#FAFAFA"
+            },
+            surfaceContainerDim: {
+              value: "#F5F5F5"
             }
           },
           interaction: {
@@ -1456,7 +1515,7 @@ const e = {
                     value: "#BCEEDD"
                   },
                   onPositiveContainer: {
-                    value: "#FFFFFF"
+                    value: "#000000"
                   },
                   positiveContainerVariant: {
                     value: "#DBF5EA"
@@ -1495,6 +1554,21 @@ const e = {
                   },
                   scrim: {
                     value: "#00000033"
+                  },
+                  surfaceDim: {
+                    value: "#F0F0F0"
+                  },
+                  surfaceBright: {
+                    value: "#FFFFFF"
+                  },
+                  surfaceContainerBright: {
+                    value: "#FFFFFF"
+                  },
+                  surfaceContainer: {
+                    value: "#FAFAFA"
+                  },
+                  surfaceContainerDim: {
+                    value: "#F5F5F5"
                   }
                 },
                 interaction: {
@@ -1751,7 +1825,7 @@ const e = {
                     value: "#BCEEDD"
                   },
                   onPositiveContainer: {
-                    value: "#FFFFFF"
+                    value: "#000000"
                   },
                   positiveContainerVariant: {
                     value: "#DBF5EA"
@@ -1790,6 +1864,21 @@ const e = {
                   },
                   scrim: {
                     value: "#00000033"
+                  },
+                  surfaceDim: {
+                    value: "#F0F0F0"
+                  },
+                  surfaceBright: {
+                    value: "#FFFFFF"
+                  },
+                  surfaceContainerBright: {
+                    value: "#FFFFFF"
+                  },
+                  surfaceContainer: {
+                    value: "#FAFAFA"
+                  },
+                  surfaceContainerDim: {
+                    value: "#F5F5F5"
                   }
                 },
                 interaction: {
@@ -2046,7 +2135,7 @@ const e = {
                     value: "#BCEEDD"
                   },
                   onPositiveContainer: {
-                    value: "#FFFFFF"
+                    value: "#000000"
                   },
                   positiveContainerVariant: {
                     value: "#DBF5EA"
@@ -2085,6 +2174,21 @@ const e = {
                   },
                   scrim: {
                     value: "#00000033"
+                  },
+                  surfaceDim: {
+                    value: "#F0F0F0"
+                  },
+                  surfaceBright: {
+                    value: "#FFFFFF"
+                  },
+                  surfaceContainerBright: {
+                    value: "#FFFFFF"
+                  },
+                  surfaceContainer: {
+                    value: "#FAFAFA"
+                  },
+                  surfaceContainerDim: {
+                    value: "#F5F5F5"
                   }
                 },
                 interaction: {
@@ -2341,7 +2445,7 @@ const e = {
                     value: "#BCEEDD"
                   },
                   onPositiveContainer: {
-                    value: "#FFFFFF"
+                    value: "#000000"
                   },
                   positiveContainerVariant: {
                     value: "#DBF5EA"
@@ -2380,6 +2484,21 @@ const e = {
                   },
                   scrim: {
                     value: "#00000033"
+                  },
+                  surfaceDim: {
+                    value: "#F0F0F0"
+                  },
+                  surfaceBright: {
+                    value: "#FFFFFF"
+                  },
+                  surfaceContainerBright: {
+                    value: "#FFFFFF"
+                  },
+                  surfaceContainer: {
+                    value: "#FAFAFA"
+                  },
+                  surfaceContainerDim: {
+                    value: "#F5F5F5"
                   }
                 },
                 interaction: {