+
{children}
)
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.types.test.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.types.test.tsx
new file mode 100644
index 00000000000..9e1f3d5e10a
--- /dev/null
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.types.test.tsx
@@ -0,0 +1,19 @@
+import UnderlinePanels from './UnderlinePanels'
+
+export function panelDoesNotAcceptControlledAttributes() {
+ return (
+
+ Tab
+ {/* @ts-expect-error UnderlinePanels controls the panel's accessible relationship */}
+ Panel
+ {/* @ts-expect-error UnderlinePanels controls the panel's selected state */}
+ Panel
+ {/* @ts-expect-error UnderlinePanels controls panel visibility */}
+ Panel
+ {/* @ts-expect-error UnderlinePanels controls the panel ID */}
+ Panel
+ {/* @ts-expect-error UnderlinePanels controls the panel role */}
+ Panel
+
+ )
+}
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
index 3e7de268225..06cdde29b4e 100644
--- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
+++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -9,6 +9,7 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../
import classes from './UnderlineTabbedInterface.module.css'
import {clsx} from 'clsx'
+import {mergeProps} from '../../utils/mergeProps'
// The gap between the list items. It is a constant because the gap is used to calculate the possible number of items that can fit in the container.
export const GAP = 8
@@ -39,9 +40,8 @@ export const UnderlineWrapper = forwardRef((props, ref) => {
return (
}
- {...rest}
+ {...mergeProps({className: clsx(classes.UnderlineWrapper, className)}, rest)}
>
{children}
@@ -50,7 +50,7 @@ export const UnderlineWrapper = forwardRef((props, ref) => {
export const UnderlineItemList = forwardRef(({children, className, ...rest}, forwardedRef) => {
return (
-
+
)
@@ -75,7 +75,7 @@ export const UnderlineItem = React.forwardRef((props, ref) => {
const {as: Component = 'a', children, counter, icon: Icon, loadingCounters, className, ...rest} = props
const textContent = getTextContent(children)
return (
-
+
{Icon && {isElement(Icon) ? Icon : }}
{children && (
diff --git a/packages/react/src/utils/__tests__/mergeProps.test.ts b/packages/react/src/utils/__tests__/mergeProps.test.ts
new file mode 100644
index 00000000000..4d330791ce2
--- /dev/null
+++ b/packages/react/src/utils/__tests__/mergeProps.test.ts
@@ -0,0 +1,92 @@
+import {describe, expect, test, vi} from 'vitest'
+import {mergeProps} from '../mergeProps'
+
+describe('mergeProps', () => {
+ test('combines props and gives the second value precedence', () => {
+ expect(
+ mergeProps(
+ {
+ id: 'component-id',
+ role: 'button',
+ },
+ {
+ id: 'consumer-id',
+ 'aria-label': 'Example',
+ },
+ ),
+ ).toEqual({
+ id: 'consumer-id',
+ role: 'button',
+ 'aria-label': 'Example',
+ })
+ })
+
+ test('merges class names with clsx', () => {
+ expect(mergeProps({className: 'component'}, {className: ['consumer', {active: true}]})).toEqual({
+ className: 'component consumer active',
+ })
+ })
+
+ test('shallowly merges styles and gives the second value precedence', () => {
+ const componentStyle = {color: 'red', padding: 4}
+ const consumerStyle = {color: 'blue'}
+
+ const merged = mergeProps({style: componentStyle}, {style: consumerStyle})
+
+ expect(merged.style).toEqual({color: 'blue', padding: 4})
+ expect(componentStyle).toEqual({color: 'red', padding: 4})
+ expect(consumerStyle).toEqual({color: 'blue'})
+ })
+
+ test('runs event handlers in order', () => {
+ const calls: string[] = []
+ const event = {defaultPrevented: false}
+ const componentHandler = vi.fn((_event: typeof event, _value: string) => calls.push('component'))
+ const consumerHandler = vi.fn((_event: typeof event, _value: string) => calls.push('consumer'))
+
+ const merged = mergeProps({onClick: componentHandler}, {onClick: consumerHandler})
+ merged.onClick(event, 'value')
+
+ expect(calls).toEqual(['component', 'consumer'])
+ expect(componentHandler).toHaveBeenCalledWith(event, 'value')
+ expect(consumerHandler).toHaveBeenCalledWith(event, 'value')
+ })
+
+ test('preserves the first event handler when the second is undefined', () => {
+ const componentHandler = vi.fn()
+
+ const merged = mergeProps({onClick: componentHandler}, {onClick: undefined})
+
+ expect(merged.onClick).toBe(componentHandler)
+ })
+
+ test('does not run the second event handler when the first prevents the event', () => {
+ const event = {
+ defaultPrevented: false,
+ preventDefault() {
+ this.defaultPrevented = true
+ },
+ }
+ const componentHandler = vi.fn((currentEvent: typeof event) => {
+ currentEvent.preventDefault()
+ })
+ const consumerHandler = vi.fn()
+
+ const merged = mergeProps({onClick: componentHandler}, {onClick: consumerHandler})
+ merged.onClick(event)
+
+ expect(componentHandler).toHaveBeenCalledWith(event)
+ expect(consumerHandler).not.toHaveBeenCalled()
+ })
+
+ test('composes zero-argument callbacks', () => {
+ const componentHandler = vi.fn()
+ const consumerHandler = vi.fn()
+
+ const merged = mergeProps({onDismiss: componentHandler}, {onDismiss: consumerHandler})
+ merged.onDismiss()
+
+ expect(componentHandler).toHaveBeenCalledOnce()
+ expect(consumerHandler).toHaveBeenCalledOnce()
+ })
+})
diff --git a/packages/react/src/utils/mergeProps.ts b/packages/react/src/utils/mergeProps.ts
new file mode 100644
index 00000000000..a7d6df5de9b
--- /dev/null
+++ b/packages/react/src/utils/mergeProps.ts
@@ -0,0 +1,74 @@
+import {clsx} from 'clsx'
+import type {Merge} from './types'
+
+type EventHandler = (...args: unknown[]) => void
+type ClassValue = Parameters[number]
+
+/**
+ * Applies our rules for merging props between two objects. This utility handles the following scenarios:
+ *
+ * - Merging `className` values
+ * - Merging event handlers
+ * - Merging `style` values
+ *
+ * In other cases, if a key exists in both `A` and `B` then the value in `B` will be used in the final result
+ */
+function mergeProps(a: A, b: B): Merge {
+ const merged = {...a} as Record
+
+ for (const [key, value] of Object.entries(b)) {
+ if (key in merged) {
+ const existing = merged[key]
+
+ if (key === 'className') {
+ merged[key] = clsx(existing as ClassValue, value as ClassValue)
+ } else if (isEventHandlerKey(key) && isEventHandler(existing)) {
+ if (isEventHandler(value)) {
+ merged[key] = composeEventHandlers(existing, value)
+ } else if (value !== undefined) {
+ merged[key] = value
+ }
+ } else if (key === 'style') {
+ merged[key] = mergeStyle(existing, value)
+ } else {
+ merged[key] = value
+ }
+ } else {
+ merged[key] = value
+ }
+ }
+
+ return merged as Merge
+}
+
+function composeEventHandlers(a: EventHandler, b: EventHandler) {
+ return (...args: Parameters) => {
+ a(...args)
+
+ const event = args[0] as {defaultPrevented?: boolean} | undefined
+ if (!event?.defaultPrevented) {
+ b(...args)
+ }
+ }
+}
+
+function isEventHandlerKey(key: string) {
+ return key.startsWith('on')
+}
+
+function isEventHandler(value: unknown): value is EventHandler {
+ return typeof value === 'function'
+}
+
+function mergeStyle(a: unknown, b: unknown) {
+ return {
+ ...(isObject(a) ? a : {}),
+ ...(isObject(b) ? b : {}),
+ }
+}
+
+function isObject(value: unknown): value is Record {
+ return typeof value === 'object' && value !== null
+}
+
+export {mergeProps}
diff --git a/script/merge-props-migration-status.mts b/script/merge-props-migration-status.mts
new file mode 100644
index 00000000000..5e5d08675be
--- /dev/null
+++ b/script/merge-props-migration-status.mts
@@ -0,0 +1,65 @@
+import path from 'node:path'
+import {ESLint} from 'eslint'
+
+const directory = path.resolve(import.meta.dirname, '..')
+const ruleId = 'primer/prefer-merge-props'
+const eslint = new ESLint({
+ cwd: directory,
+ overrideConfig: [
+ {
+ rules: {
+ [ruleId]: 'error',
+ },
+ },
+ ],
+})
+const results = await eslint.lintFiles(['packages/react/src/**/*.{ts,tsx}'])
+const fatalMessages = results.flatMap(result => {
+ return result.messages
+ .filter(message => message.fatal)
+ .map(message => `${result.filePath}:${message.line} ${message.message}`)
+})
+
+if (fatalMessages.length > 0) {
+ throw new Error(`Unable to generate the mergeProps migration report:\n${fatalMessages.join('\n')}`)
+}
+
+const affectedResults = results.filter(result => {
+ return result.messages.some(message => message.ruleId === ruleId)
+})
+const violationCount = affectedResults.reduce((count, result) => {
+ return count + result.messages.filter(message => message.ruleId === ruleId).length
+}, 0)
+
+write(`
+# mergeProps Migration
+
+This report tracks component roots that combine authored props with unmerged spread props.
+
+## Status
+
+**Unmerged component root prop spreads to migrate:** ${violationCount}
+
+**Affected files:** ${affectedResults.length} of ${results.length}
+`)
+
+write(`
+## Affected Files (${affectedResults.length})
+
+| Filepath | Locations | Violations |
+| :------- | :-------- | :--------- |`)
+
+for (const result of affectedResults) {
+ const relativePath = path.relative(directory, result.filePath)
+ const messages = result.messages.filter(message => message.ruleId === ruleId)
+ const locations = messages.map(
+ message => `[L${message.line}](https://github.com/primer/react/blob/main/${relativePath}#L${message.line})`,
+ )
+ const link = `[\`${relativePath}\`](https://github.com/primer/react/blob/main/${relativePath})`
+
+ write(`| ${link} | ${locations.join(', ')} | ${messages.length} |`)
+}
+
+function write(value: string): void {
+ process.stdout.write(`${value}\n`)
+}