feat: add DualListBox2 component (#1708)

.changeset/short-bears-dream.md

@@ -0,0 +1,5 @@
+---
+"ingred-ui": minor
+---
+
+Add DualListBox2 component

package.json

@@ -54,6 +54,7 @@
     "@storybook/addon-essentials": "7.5.2",
     "@storybook/addon-links": "7.4.0",
     "@storybook/addon-storysource": "7.5.3",
+    "@storybook/client-api": "7.5.3",
     "@storybook/react": "7.5.3",
     "@storybook/react-vite": "7.5.3",
     "@testing-library/jest-dom": "6.1.3",

src/components/ContextMenu2/ContextMenu2.tsx

@@ -14,6 +14,7 @@ import React, {
   type SetStateAction,
   useMemo,
   useEffect,
+  Fragment,
 } from "react";
 import {
   useFloating,
@@ -104,6 +105,20 @@ type ContextMenu2Props = {
   onOpenChange?: (open: boolean) => void;
 };
 
+// Fragment を展開して子要素をフラット化する
+const flattenChildren = (children: ReactNode): ReactNode[] => {
+  return Children.toArray(children)
+    .map((child) => {
+      // Fragmentであれば再帰的にflattenChildrenを呼び出す
+      if (isValidElement(child) && child.type === Fragment) {
+        return flattenChildren(child.props.children);
+      }
+      // Fragment以外はそのまま返す
+      return child;
+    })
+    .flat(Infinity);
+};
+
 const ContextMenu2Panel = styled.div`
   padding: 10px 8px;
   border: 1px solid ${colors.basic[200]};
@@ -242,6 +257,10 @@ export const ContextMenu2 = forwardRef<HTMLButtonElement, ContextMenu2Props>(
     }, [trigger, ref, refs]);
 
     const triggerRef = useMergeRefs([ref, refs.setReference]);
+    const flattenedChildren = flattenChildren(children).map((child, i) => ({
+      child,
+      id: i,
+    }));
 
     return (
       <>
@@ -283,9 +302,8 @@ export const ContextMenu2 = forwardRef<HTMLButtonElement, ContextMenu2Props>(
                         tabIndex や Floating UI の props を暗黙で付与して child を返す。
                         focusableItems にコンポーネントの displayName が含まれていなければ、それをしないで child を返す。
                       */}
-                      {Children.map(children, (child, index) => {
+                      {flattenedChildren.map(({ child, id }, index) => {
                         if (!isValidElement(child)) return child;
-
                         if (
                           typeof child.type === "string" ||
                           !("displayName" in child.type) ||
@@ -304,6 +322,7 @@ export const ContextMenu2 = forwardRef<HTMLButtonElement, ContextMenu2Props>(
                           },
                           ...getItemProps(),
                           ...child.props,
+                          key: id,
                         });
                       })}
                     </ContextMenu2SortableContext.Provider>