@serendie/ui 2.4.2 → 2.5.0

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/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: {

package/dist/node_modules/@serendie/design-token/dist/tokens.js

@@ -13,7 +13,11 @@ const e = {
             bl2: "#00000005",
             bl5: "#0000000D",
             bl20: "#00000033",
-            wh60: "#FFFFFF99"
+            wh60: "#FFFFFF99",
+            wh2: "#FFFFFF05",
+            wh5: "#FFFFFF0D",
+            wh20: "#FFFFFF33",
+            bl60: "#00000099"
           },
           gray: {
             100: "#F0F0F0",
@@ -27,6 +31,18 @@ const e = {
             900: "#31312F",
             1e3: "#232322"
           },
+          neutral: {
+            100: "#FAFAFA",
+            200: "#F5F5F5",
+            300: "#F0F0F0",
+            400: "#EBEBEB",
+            500: "#E5E5E5",
+            600: "#474747",
+            700: "#3B3B3B",
+            800: "#2E2E2E",
+            900: "#212121",
+            1e3: "#141414"
+          },
           red: {
             100: "#FCEBEA",
             200: "#FFDCDA",
@@ -258,7 +274,7 @@ const e = {
           positive: "#2EAB80",
           onPositive: "#FFFFFF",
           positiveContainer: "#BCEEDD",
-          onPositiveContainer: "#FFFFFF",
+          onPositiveContainer: "#000000",
           positiveContainerVariant: "#DBF5EA",
           onPositiveContainerVariant: "#000000"
         },
@@ -272,7 +288,12 @@ const e = {
           outlineBright: "#E4E4E3",
           outline: "#D1D0CD",
           outlineDim: "#8C8B87",
-          scrim: "#00000033"
+          scrim: "#00000033",
+          surfaceDim: "#F0F0F0",
+          surfaceBright: "#FFFFFF",
+          surfaceContainerBright: "#FFFFFF",
+          surfaceContainer: "#FAFAFA",
+          surfaceContainerDim: "#F5F5F5"
         },
         interaction: {
           disabled: "#F0F0F0",
@@ -661,7 +682,7 @@ const e = {
                   positive: "#2EAB80",
                   onPositive: "#FFFFFF",
                   positiveContainer: "#BCEEDD",
-                  onPositiveContainer: "#FFFFFF",
+                  onPositiveContainer: "#000000",
                   positiveContainerVariant: "#DBF5EA",
                   onPositiveContainerVariant: "#000000"
                 },
@@ -675,7 +696,12 @@ const e = {
                   outlineBright: "#E4E4E3",
                   outline: "#D1D0CD",
                   outlineDim: "#8C8B87",
-                  scrim: "#00000033"
+                  scrim: "#00000033",
+                  surfaceDim: "#F0F0F0",
+                  surfaceBright: "#FFFFFF",
+                  surfaceContainerBright: "#FFFFFF",
+                  surfaceContainer: "#FAFAFA",
+                  surfaceContainerDim: "#F5F5F5"
                 },
                 interaction: {
                   disabled: "#F0F0F0",
@@ -782,7 +808,7 @@ const e = {
                   positive: "#2EAB80",
                   onPositive: "#FFFFFF",
                   positiveContainer: "#BCEEDD",
-                  onPositiveContainer: "#FFFFFF",
+                  onPositiveContainer: "#000000",
                   positiveContainerVariant: "#DBF5EA",
                   onPositiveContainerVariant: "#000000"
                 },
@@ -796,7 +822,12 @@ const e = {
                   outlineBright: "#E4E4E3",
                   outline: "#D1D0CD",
                   outlineDim: "#8C8B87",
-                  scrim: "#00000033"
+                  scrim: "#00000033",
+                  surfaceDim: "#F0F0F0",
+                  surfaceBright: "#FFFFFF",
+                  surfaceContainerBright: "#FFFFFF",
+                  surfaceContainer: "#FAFAFA",
+                  surfaceContainerDim: "#F5F5F5"
                 },
                 interaction: {
                   disabled: "#F0F0F0",
@@ -903,7 +934,7 @@ const e = {
                   positive: "#2EAB80",
                   onPositive: "#FFFFFF",
                   positiveContainer: "#BCEEDD",
-                  onPositiveContainer: "#FFFFFF",
+                  onPositiveContainer: "#000000",
                   positiveContainerVariant: "#DBF5EA",
                   onPositiveContainerVariant: "#000000"
                 },
@@ -917,7 +948,12 @@ const e = {
                   outlineBright: "#E4E4E3",
                   outline: "#D1D0CD",
                   outlineDim: "#8C8B87",
-                  scrim: "#00000033"
+                  scrim: "#00000033",
+                  surfaceDim: "#F0F0F0",
+                  surfaceBright: "#FFFFFF",
+                  surfaceContainerBright: "#FFFFFF",
+                  surfaceContainer: "#FAFAFA",
+                  surfaceContainerDim: "#F5F5F5"
                 },
                 interaction: {
                   disabled: "#F0F0F0",
@@ -1024,7 +1060,7 @@ const e = {
                   positive: "#2EAB80",
                   onPositive: "#FFFFFF",
                   positiveContainer: "#BCEEDD",
-                  onPositiveContainer: "#FFFFFF",
+                  onPositiveContainer: "#000000",
                   positiveContainerVariant: "#DBF5EA",
                   onPositiveContainerVariant: "#000000"
                 },
@@ -1038,7 +1074,12 @@ const e = {
                   outlineBright: "#E4E4E3",
                   outline: "#D1D0CD",
                   outlineDim: "#8C8B87",
-                  scrim: "#00000033"
+                  scrim: "#00000033",
+                  surfaceDim: "#F0F0F0",
+                  surfaceBright: "#FFFFFF",
+                  surfaceContainerBright: "#FFFFFF",
+                  surfaceContainer: "#FAFAFA",
+                  surfaceContainerDim: "#F5F5F5"
                 },
                 interaction: {
                   disabled: "#F0F0F0",