diff --git a/packages/smarthr-ui/src/components/DefinitionList/DefinitionList.tsx b/packages/smarthr-ui/src/components/DefinitionList/DefinitionList.tsx index ffaf5418c5..823fcd6586 100644 --- a/packages/smarthr-ui/src/components/DefinitionList/DefinitionList.tsx +++ b/packages/smarthr-ui/src/components/DefinitionList/DefinitionList.tsx @@ -2,8 +2,10 @@ import { Children, type ComponentProps, type FC, + Fragment, type PropsWithChildren, type ReactElement, + type ReactNode, cloneElement, isValidElement, useMemo, @@ -35,6 +37,38 @@ const classNameGenerator = tv({ base: 'smarthr-ui-DefinitionList shr-my-[initial]', }) +// children のうち DefinitionListItem にだけ maxColumns / termStyleType を注入して返す +function childrenToItems( + children: ReactNode, + extra: Pick, +): ReactNode[] { + const out: ReactNode[] = [] + + const walk = (nodes: ReactNode) => { + Children.forEach(nodes, (child) => { + if (!isValidElement(child)) { + out.push(child) + return + } + + if (child.type === Fragment) { + walk(child.props.children) // Fragment は再帰的に展開 + return + } + + // DefinitionListItem にだけ追加 props を注入 + if (child.type === DefinitionListItem) { + out.push(cloneElement(child, extra)) + } else { + out.push(child) // 他の要素はそのまま + } + }) + } + + walk(children) + return out +} + export const DefinitionList: FC = ({ items, maxColumns, @@ -55,15 +89,7 @@ export const DefinitionList: FC = ({ termStyleType={termStyleType} /> ))} - {Children.map( - children, - (child) => - isValidElement(child) && - cloneElement(child as ReactElement, { - maxColumns, - termStyleType, - }), - )} + {childrenToItems(children, { maxColumns, termStyleType })} ) }