+
+
+ {title}
+
+ {statusLabelList.length > 0 && (
+
+ {statusLabelList.map((statusLabelProp, index) => (
+
+ ))}
+
+ )}
+
+
+ {helpMessage && (
+
+ {helpMessage}
+
+ )}
+ {exampleMessage && (
+
+ {exampleMessage}
+
+ )}
+
+ {actualErrorMessages.length > 0 && (
+
+ {actualErrorMessages.map((message, index) => (
+
+
+
+ ))}
+
+ )}
+
+
+ {addIdToFirstInput(children, managedHtmlFor, describedbyIds)}
+
+
+ {supplementaryMessage && (
+
+ {supplementaryMessage}
+
+ )}
+
+ )
+}
+
+const addIdToFirstInput = (children: ReactNode, managedHtmlFor: string, describedbyIds: string) => {
+ let foundFirstInput = false
+
+ const addId = (targets: ReactNode): ReactNode[] | ReactNode =>
+ React.Children.map(targets, (child) => {
+ if (foundFirstInput || !React.isValidElement(child)) {
+ return child
+ }
+
+ const { type } = child
+
+ if (isInputElement(type)) {
+ foundFirstInput = true
+
+ const inputAttributes = {
+ id: managedHtmlFor,
+ ...(describedbyIds ? { 'aria-describedby': describedbyIds } : {}),
+ }
+
+ return React.cloneElement(child as ReactElement, {
+ ...(isComboBoxElement(type) ? { inputAttributes } : inputAttributes),
+ })
+ }
+
+ return React.cloneElement(child, {}, addId(child.props.children))
+ })
+
+ return addId(children)
+}
+
+/**
+ * - CheckBox / RadioButton は内部に label を含むため対象外
+ * - SearchInput は label を含むため対象外
+ * - InputWithTooltip は領域が狭く FormControl を置けない場所での私用を想定しているため対象外
+ *
+ * @param type
+ * @returns
+ */
+const isInputElement = (type: string | React.JSXElementConstructor