From 860fedadbcf58240b594a73dd3547619660799e6 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 8 Jul 2026 15:33:00 -0500 Subject: [PATCH 1/8] Ignore static computed React Compiler diagnostics Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 47294113-3de3-46e1-a6e8-f3360cf91de4 --- .../react-compiler-check/src/index.test.ts | 42 +++++++++++++++++++ packages/react-compiler-check/src/index.ts | 11 +++++ 2 files changed, 53 insertions(+) diff --git a/packages/react-compiler-check/src/index.test.ts b/packages/react-compiler-check/src/index.test.ts index 80bc1dda240..bf6781db950 100644 --- a/packages/react-compiler-check/src/index.test.ts +++ b/packages/react-compiler-check/src/index.test.ts @@ -55,6 +55,48 @@ describe('checkFile', () => { ).toEqual({ok: true}) }) + test('does not fail on computed object pattern keys', () => { + expect( + checkFile( + 'Label.tsx', + ` + type LabelProps = { + 'data-component'?: string + } + + function Label({['data-component']: dataComponent = 'Label'}: LabelProps) { + return + } + `, + ), + ).toEqual({ok: true}) + }) + + test('does not fail on computed object expression keys', () => { + expect( + checkFile( + 'Tooltip.tsx', + ` + import {clsx} from 'clsx' + + const styles = { + Tooltip: 'Tooltip', + TooltipLeft: 'TooltipLeft', + } + + function Tooltip({align}: {align?: 'left' | 'right'}) { + const className = clsx(styles.Tooltip, { + [styles[\`Tooltip\${align === 'left' ? 'Left' : 'Right'}\`]]: align, + [\`tooltipped-\${align}\`]: align, + }) + + return + } + `, + ), + ).toEqual({ok: true}) + }) + test('returns compiler errors with source locations', () => { const result = checkFile( 'ConditionalHook.tsx', diff --git a/packages/react-compiler-check/src/index.ts b/packages/react-compiler-check/src/index.ts index a41d5c6539f..f750dc096e3 100644 --- a/packages/react-compiler-check/src/index.ts +++ b/packages/react-compiler-check/src/index.ts @@ -80,6 +80,10 @@ function checkFile(filename: string, contents: string): CheckResult { } function addCheckError(errors: Array, error: CheckError): void { + if (shouldIgnoreError(error)) { + return + } + const hasError = errors.some(existingError => { return ( existingError.reason === error.reason && @@ -92,6 +96,13 @@ function addCheckError(errors: Array, error: CheckError): void { } } +function shouldIgnoreError(error: CheckError): boolean { + return ( + error.reason === '(BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern' || + error.reason === '(BuildHIR::lowerExpression) Expected Identifier, got TemplateLiteral key in ObjectExpression' + ) +} + function getLocationLine(location: CheckError['location']): number | null { if (location === null || typeof location !== 'object' || !('start' in location)) { return null From d77ad01e768a903edf861605b6db9840e5fc0ba7 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 9 Jul 2026 12:31:18 -0500 Subject: [PATCH 2/8] Fix React Compiler static property checks Replace static computed property syntax with static property names so React Compiler diagnostics are surfaced instead of ignored. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648 --- .../react-compiler-check/src/index.test.ts | 14 +++--- packages/react-compiler-check/src/index.ts | 11 ----- packages/react/src/ActionBar/ActionBar.tsx | 2 +- .../src/Autocomplete/Autocomplete.test.tsx | 2 +- packages/react/src/BaseStyles.tsx | 2 +- packages/react/src/Button/ButtonBase.tsx | 4 +- packages/react/src/Checkbox/Checkbox.tsx | 6 +-- .../react/src/CounterLabel/CounterLabel.tsx | 6 +-- packages/react/src/Overlay/Overlay.tsx | 40 ++++++++++++++--- packages/react/src/Tooltip/Tooltip.tsx | 45 ++++++++++++++----- packages/react/src/Truncate/Truncate.tsx | 2 +- .../react/src/internal/components/Caret.tsx | 5 ++- 12 files changed, 93 insertions(+), 46 deletions(-) diff --git a/packages/react-compiler-check/src/index.test.ts b/packages/react-compiler-check/src/index.test.ts index bf6781db950..3cf7a393a81 100644 --- a/packages/react-compiler-check/src/index.test.ts +++ b/packages/react-compiler-check/src/index.test.ts @@ -34,7 +34,7 @@ describe('checkFile', () => { function BaseStyles({children, color, className, as: Component = 'div', style, ...rest}: BaseStylesProps) { const baseStyles = { - ['--BaseStyles-fgColor']: color, + '--BaseStyles-fgColor': color, } return ( @@ -55,7 +55,7 @@ describe('checkFile', () => { ).toEqual({ok: true}) }) - test('does not fail on computed object pattern keys', () => { + test('does not fail on static object pattern keys', () => { expect( checkFile( 'Label.tsx', @@ -64,7 +64,7 @@ describe('checkFile', () => { 'data-component'?: string } - function Label({['data-component']: dataComponent = 'Label'}: LabelProps) { + function Label({'data-component': dataComponent = 'Label'}: LabelProps) { return } `, @@ -72,7 +72,7 @@ describe('checkFile', () => { ).toEqual({ok: true}) }) - test('does not fail on computed object expression keys', () => { + test('does not fail on static object expression keys', () => { expect( checkFile( 'Tooltip.tsx', @@ -86,8 +86,10 @@ describe('checkFile', () => { function Tooltip({align}: {align?: 'left' | 'right'}) { const className = clsx(styles.Tooltip, { - [styles[\`Tooltip\${align === 'left' ? 'Left' : 'Right'}\`]]: align, - [\`tooltipped-\${align}\`]: align, + TooltipLeft: align === 'left', + TooltipRight: align === 'right', + 'tooltipped-left': align === 'left', + 'tooltipped-right': align === 'right', }) return diff --git a/packages/react-compiler-check/src/index.ts b/packages/react-compiler-check/src/index.ts index f750dc096e3..a41d5c6539f 100644 --- a/packages/react-compiler-check/src/index.ts +++ b/packages/react-compiler-check/src/index.ts @@ -80,10 +80,6 @@ function checkFile(filename: string, contents: string): CheckResult { } function addCheckError(errors: Array, error: CheckError): void { - if (shouldIgnoreError(error)) { - return - } - const hasError = errors.some(existingError => { return ( existingError.reason === error.reason && @@ -96,13 +92,6 @@ function addCheckError(errors: Array, error: CheckError): void { } } -function shouldIgnoreError(error: CheckError): boolean { - return ( - error.reason === '(BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern' || - error.reason === '(BuildHIR::lowerExpression) Expected Identifier, got TemplateLiteral key in ObjectExpression' - ) -} - function getLocationLine(location: CheckError['location']): number | null { if (location === null || typeof location !== 'object' || !('start' in location)) { return null diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx index 037922e3aed..5cf96e0c7aa 100644 --- a/packages/react/src/ActionBar/ActionBar.tsx +++ b/packages/react/src/ActionBar/ActionBar.tsx @@ -338,7 +338,7 @@ export const ActionBarIconButton = forwardRef( const {size} = React.useContext(ActionBarContext) - const {['aria-label']: ariaLabel, icon} = props + const {'aria-label': ariaLabel, icon} = props const {dataOverflowingAttr} = useActionBarItem( ref, diff --git a/packages/react/src/Autocomplete/Autocomplete.test.tsx b/packages/react/src/Autocomplete/Autocomplete.test.tsx index 054a9b52e0a..28871f4c27d 100644 --- a/packages/react/src/Autocomplete/Autocomplete.test.tsx +++ b/packages/react/src/Autocomplete/Autocomplete.test.tsx @@ -31,7 +31,7 @@ const LabelledAutocomplete = ({ inputProps?: AutocompleteInputProps menuProps: AutocompleteMenuInternalProps }) => { - const {['aria-labelledby']: ariaLabelledBy, ...menuPropsRest} = menuProps + const {'aria-labelledby': ariaLabelledBy, ...menuPropsRest} = menuProps const {id = 'autocompleteInput', ...inputPropsRest} = inputProps return ( diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx index 736c4938c62..74383b4f9e1 100644 --- a/packages/react/src/BaseStyles.tsx +++ b/packages/react/src/BaseStyles.tsx @@ -16,7 +16,7 @@ export type BaseStylesProps = PropsWithChildren & { function BaseStyles({children, color, className, as: Component = 'div', style, ...rest}: BaseStylesProps) { const newClassName = clsx(classes.BaseStyles, className) const baseStyles = { - ['--BaseStyles-fgColor']: color, + '--BaseStyles-fgColor': color, } return ( diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index 19357e9ae43..89a8c98dee8 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -32,8 +32,8 @@ const ButtonBase = forwardRef(({children, as: Component = 'button', ...props}, f leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, trailingAction: TrailingAction, - ['aria-describedby']: ariaDescribedBy, - ['aria-labelledby']: ariaLabelledBy, + 'aria-describedby': ariaDescribedBy, + 'aria-labelledby': ariaLabelledBy, count, icon: Icon, id, diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx index 6e54d07cfdd..1fe1f7b46c8 100644 --- a/packages/react/src/Checkbox/Checkbox.tsx +++ b/packages/react/src/Checkbox/Checkbox.tsx @@ -52,7 +52,7 @@ const Checkbox = React.forwardRef( required, validationStatus, value, - ['data-component']: dataComponent, + 'data-component': dataComponent, ...rest }, ref, @@ -76,8 +76,8 @@ const Checkbox = React.forwardRef( checked: indeterminate ? false : checked, defaultChecked, required, - ['aria-required']: required ? ('true' as const) : ('false' as const), - ['aria-invalid']: validationStatus === 'error' ? ('true' as const) : ('false' as const), + 'aria-required': required ? ('true' as const) : ('false' as const), + 'aria-invalid': validationStatus === 'error' ? ('true' as const) : ('false' as const), onChange: handleOnChange, value, name: value, diff --git a/packages/react/src/CounterLabel/CounterLabel.tsx b/packages/react/src/CounterLabel/CounterLabel.tsx index 73571731399..195593c4166 100644 --- a/packages/react/src/CounterLabel/CounterLabel.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.tsx @@ -16,15 +16,15 @@ export type CounterLabelProps = React.PropsWithChildren< > const CounterLabel = forwardRef( - ({variant, scheme, className, children, ['data-component']: dataComponent, ...rest}, forwardedRef) => { + ({variant, scheme, className, children, 'data-component': dataComponent, ...rest}, forwardedRef) => { const label =  ({children}) const inferredVariant = variant || scheme || 'secondary' const counterProps = { ref: forwardedRef, - ['aria-hidden']: 'true' as const, - ['data-variant']: inferredVariant, + 'aria-hidden': 'true' as const, + 'data-variant': inferredVariant, ...rest, } diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx index 31ee7ebcf5d..3be839a5757 100644 --- a/packages/react/src/Overlay/Overlay.tsx +++ b/packages/react/src/Overlay/Overlay.tsx @@ -104,12 +104,40 @@ export const BaseOverlay = React.forwardRef( } as React.CSSProperties } {...{ - [`data-width-${width}`]: '', - [`data-max-width-${maxWidth}`]: maxWidth ? '' : undefined, - [`data-height-${height}`]: '', - [`data-max-height-${maxHeight}`]: maxHeight ? '' : undefined, - [`data-visibility-${visibility}`]: '', - [`data-overflow-${rest.overflow}`]: rest.overflow ? '' : undefined, + 'data-width-small': width === 'small' ? '' : undefined, + 'data-width-medium': width === 'medium' ? '' : undefined, + 'data-width-large': width === 'large' ? '' : undefined, + 'data-width-xlarge': width === 'xlarge' ? '' : undefined, + 'data-width-xxlarge': width === 'xxlarge' ? '' : undefined, + 'data-width-auto': width === 'auto' ? '' : undefined, + 'data-width-undefined': width === undefined ? '' : undefined, + 'data-max-width-small': maxWidth === 'small' ? '' : undefined, + 'data-max-width-medium': maxWidth === 'medium' ? '' : undefined, + 'data-max-width-large': maxWidth === 'large' ? '' : undefined, + 'data-max-width-xlarge': maxWidth === 'xlarge' ? '' : undefined, + 'data-max-width-xxlarge': maxWidth === 'xxlarge' ? '' : undefined, + 'data-height-xsmall': height === 'xsmall' ? '' : undefined, + 'data-height-small': height === 'small' ? '' : undefined, + 'data-height-medium': height === 'medium' ? '' : undefined, + 'data-height-large': height === 'large' ? '' : undefined, + 'data-height-xlarge': height === 'xlarge' ? '' : undefined, + 'data-height-auto': height === 'auto' ? '' : undefined, + 'data-height-initial': height === 'initial' ? '' : undefined, + 'data-height-fit-content': height === 'fit-content' ? '' : undefined, + 'data-height-undefined': height === undefined ? '' : undefined, + 'data-max-height-xsmall': maxHeight === 'xsmall' ? '' : undefined, + 'data-max-height-small': maxHeight === 'small' ? '' : undefined, + 'data-max-height-medium': maxHeight === 'medium' ? '' : undefined, + 'data-max-height-large': maxHeight === 'large' ? '' : undefined, + 'data-max-height-xlarge': maxHeight === 'xlarge' ? '' : undefined, + 'data-max-height-fit-content': maxHeight === 'fit-content' ? '' : undefined, + 'data-visibility-visible': visibility === 'visible' ? '' : undefined, + 'data-visibility-hidden': visibility === 'hidden' ? '' : undefined, + 'data-visibility-undefined': visibility === undefined ? '' : undefined, + 'data-overflow-auto': rest.overflow === 'auto' ? '' : undefined, + 'data-overflow-hidden': rest.overflow === 'hidden' ? '' : undefined, + 'data-overflow-scroll': rest.overflow === 'scroll' ? '' : undefined, + 'data-overflow-visible': rest.overflow === 'visible' ? '' : undefined, }} className={clsx(className, classes.Overlay)} /> diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx index 0869b055383..f672d0ea9ed 100644 --- a/packages/react/src/Tooltip/Tooltip.tsx +++ b/packages/react/src/Tooltip/Tooltip.tsx @@ -18,6 +18,17 @@ export type TooltipProps = { wrap?: boolean } & React.ComponentProps<'span'> +const tooltipDirectionClasses = { + n: classes['Tooltip--n'], + ne: classes['Tooltip--ne'], + e: classes['Tooltip--e'], + se: classes['Tooltip--se'], + s: classes['Tooltip--s'], + sw: classes['Tooltip--sw'], + w: classes['Tooltip--w'], + nw: classes['Tooltip--nw'], +} + /** * @deprecated */ @@ -26,16 +37,30 @@ const Tooltip = React.forwardRef(function Tooltip( ref, ) { const tooltipId = useId(id) - const tooltipClasses = clsx(className, classes.Tooltip, classes[`Tooltip--${direction}`], { - [classes[`Tooltip--align${align === 'left' ? 'Left' : 'Right'}`]]: align, - [classes['Tooltip--noDelay']]: noDelay, - [classes['Tooltip--multiline']]: wrap, - // maintaining feature parity with old classes - [`tooltipped-${direction}`]: true, - [`tooltipped-align-${align === 'left' ? 'left' : 'right'}-2`]: align, - 'tooltipped-no-delay': noDelay, - 'tooltipped-multiline': wrap, - }) + const tooltipClasses = clsx( + className, + classes.Tooltip, + tooltipDirectionClasses[direction], + align === 'left' && classes['Tooltip--alignLeft'], + align === 'right' && classes['Tooltip--alignRight'], + noDelay && classes['Tooltip--noDelay'], + wrap && classes['Tooltip--multiline'], + { + // maintaining feature parity with old classes + 'tooltipped-n': direction === 'n', + 'tooltipped-ne': direction === 'ne', + 'tooltipped-e': direction === 'e', + 'tooltipped-se': direction === 'se', + 'tooltipped-s': direction === 's', + 'tooltipped-sw': direction === 'sw', + 'tooltipped-w': direction === 'w', + 'tooltipped-nw': direction === 'nw', + 'tooltipped-align-left-2': align === 'left', + 'tooltipped-align-right-2': align === 'right', + 'tooltipped-no-delay': noDelay, + 'tooltipped-multiline': wrap, + }, + ) const value = useMemo(() => ({tooltipId}), [tooltipId]) return ( diff --git a/packages/react/src/Truncate/Truncate.tsx b/packages/react/src/Truncate/Truncate.tsx index 27630d1fc30..bf35b62808f 100644 --- a/packages/react/src/Truncate/Truncate.tsx +++ b/packages/react/src/Truncate/Truncate.tsx @@ -25,7 +25,7 @@ const Truncate = React.forwardRef(function Truncate( style={ { ...style, - [`--truncate-max-width`]: + '--truncate-max-width': typeof maxWidth === 'number' ? `${maxWidth}px` : typeof maxWidth === 'string' ? maxWidth : undefined, } as React.CSSProperties } diff --git a/packages/react/src/internal/components/Caret.tsx b/packages/react/src/internal/components/Caret.tsx index 742995664ed..d0f57fb0ac5 100644 --- a/packages/react/src/internal/components/Caret.tsx +++ b/packages/react/src/internal/components/Caret.tsx @@ -86,7 +86,10 @@ function Caret(props: CaretProps) { ...getPosition(edge, align, size), // if align is set (top|right|bottom|left), // then we don't need an offset margin - [`margin${perp}`]: align ? null : -size, + marginTop: perp === 'Top' && !align ? -size : undefined, + marginRight: perp === 'Right' && !align ? -size : undefined, + marginBottom: perp === 'Bottom' && !align ? -size : undefined, + marginLeft: perp === 'Left' && !align ? -size : undefined, ...({ '--caret-bg': bg, '--caret-border-color': borderColor, From 0b613dd56f313cb7773708e97aadf8253a996d05 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 9 Jul 2026 12:45:11 -0500 Subject: [PATCH 3/8] Keep dynamic computed key diagnostics ignored Limit the React Compiler static-property cleanup to static computed property cases and keep the existing dynamic template-literal diagnostic handling. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648 --- .../react-compiler-check/src/index.test.ts | 8 ++-- packages/react-compiler-check/src/index.ts | 8 ++++ packages/react/src/Overlay/Overlay.tsx | 40 +++-------------- packages/react/src/Tooltip/Tooltip.tsx | 45 +++++-------------- .../react/src/internal/components/Caret.tsx | 5 +-- 5 files changed, 28 insertions(+), 78 deletions(-) diff --git a/packages/react-compiler-check/src/index.test.ts b/packages/react-compiler-check/src/index.test.ts index 3cf7a393a81..839d5bd0f1d 100644 --- a/packages/react-compiler-check/src/index.test.ts +++ b/packages/react-compiler-check/src/index.test.ts @@ -72,7 +72,7 @@ describe('checkFile', () => { ).toEqual({ok: true}) }) - test('does not fail on static object expression keys', () => { + test('does not fail on computed object expression keys', () => { expect( checkFile( 'Tooltip.tsx', @@ -86,10 +86,8 @@ describe('checkFile', () => { function Tooltip({align}: {align?: 'left' | 'right'}) { const className = clsx(styles.Tooltip, { - TooltipLeft: align === 'left', - TooltipRight: align === 'right', - 'tooltipped-left': align === 'left', - 'tooltipped-right': align === 'right', + [styles[\`Tooltip\${align === 'left' ? 'Left' : 'Right'}\`]]: align, + [\`tooltipped-\${align}\`]: align, }) return diff --git a/packages/react-compiler-check/src/index.ts b/packages/react-compiler-check/src/index.ts index a41d5c6539f..63fef2979cd 100644 --- a/packages/react-compiler-check/src/index.ts +++ b/packages/react-compiler-check/src/index.ts @@ -80,6 +80,10 @@ function checkFile(filename: string, contents: string): CheckResult { } function addCheckError(errors: Array, error: CheckError): void { + if (shouldIgnoreError(error)) { + return + } + const hasError = errors.some(existingError => { return ( existingError.reason === error.reason && @@ -92,6 +96,10 @@ function addCheckError(errors: Array, error: CheckError): void { } } +function shouldIgnoreError(error: CheckError): boolean { + return error.reason === '(BuildHIR::lowerExpression) Expected Identifier, got TemplateLiteral key in ObjectExpression' +} + function getLocationLine(location: CheckError['location']): number | null { if (location === null || typeof location !== 'object' || !('start' in location)) { return null diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx index 3be839a5757..31ee7ebcf5d 100644 --- a/packages/react/src/Overlay/Overlay.tsx +++ b/packages/react/src/Overlay/Overlay.tsx @@ -104,40 +104,12 @@ export const BaseOverlay = React.forwardRef( } as React.CSSProperties } {...{ - 'data-width-small': width === 'small' ? '' : undefined, - 'data-width-medium': width === 'medium' ? '' : undefined, - 'data-width-large': width === 'large' ? '' : undefined, - 'data-width-xlarge': width === 'xlarge' ? '' : undefined, - 'data-width-xxlarge': width === 'xxlarge' ? '' : undefined, - 'data-width-auto': width === 'auto' ? '' : undefined, - 'data-width-undefined': width === undefined ? '' : undefined, - 'data-max-width-small': maxWidth === 'small' ? '' : undefined, - 'data-max-width-medium': maxWidth === 'medium' ? '' : undefined, - 'data-max-width-large': maxWidth === 'large' ? '' : undefined, - 'data-max-width-xlarge': maxWidth === 'xlarge' ? '' : undefined, - 'data-max-width-xxlarge': maxWidth === 'xxlarge' ? '' : undefined, - 'data-height-xsmall': height === 'xsmall' ? '' : undefined, - 'data-height-small': height === 'small' ? '' : undefined, - 'data-height-medium': height === 'medium' ? '' : undefined, - 'data-height-large': height === 'large' ? '' : undefined, - 'data-height-xlarge': height === 'xlarge' ? '' : undefined, - 'data-height-auto': height === 'auto' ? '' : undefined, - 'data-height-initial': height === 'initial' ? '' : undefined, - 'data-height-fit-content': height === 'fit-content' ? '' : undefined, - 'data-height-undefined': height === undefined ? '' : undefined, - 'data-max-height-xsmall': maxHeight === 'xsmall' ? '' : undefined, - 'data-max-height-small': maxHeight === 'small' ? '' : undefined, - 'data-max-height-medium': maxHeight === 'medium' ? '' : undefined, - 'data-max-height-large': maxHeight === 'large' ? '' : undefined, - 'data-max-height-xlarge': maxHeight === 'xlarge' ? '' : undefined, - 'data-max-height-fit-content': maxHeight === 'fit-content' ? '' : undefined, - 'data-visibility-visible': visibility === 'visible' ? '' : undefined, - 'data-visibility-hidden': visibility === 'hidden' ? '' : undefined, - 'data-visibility-undefined': visibility === undefined ? '' : undefined, - 'data-overflow-auto': rest.overflow === 'auto' ? '' : undefined, - 'data-overflow-hidden': rest.overflow === 'hidden' ? '' : undefined, - 'data-overflow-scroll': rest.overflow === 'scroll' ? '' : undefined, - 'data-overflow-visible': rest.overflow === 'visible' ? '' : undefined, + [`data-width-${width}`]: '', + [`data-max-width-${maxWidth}`]: maxWidth ? '' : undefined, + [`data-height-${height}`]: '', + [`data-max-height-${maxHeight}`]: maxHeight ? '' : undefined, + [`data-visibility-${visibility}`]: '', + [`data-overflow-${rest.overflow}`]: rest.overflow ? '' : undefined, }} className={clsx(className, classes.Overlay)} /> diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx index f672d0ea9ed..0869b055383 100644 --- a/packages/react/src/Tooltip/Tooltip.tsx +++ b/packages/react/src/Tooltip/Tooltip.tsx @@ -18,17 +18,6 @@ export type TooltipProps = { wrap?: boolean } & React.ComponentProps<'span'> -const tooltipDirectionClasses = { - n: classes['Tooltip--n'], - ne: classes['Tooltip--ne'], - e: classes['Tooltip--e'], - se: classes['Tooltip--se'], - s: classes['Tooltip--s'], - sw: classes['Tooltip--sw'], - w: classes['Tooltip--w'], - nw: classes['Tooltip--nw'], -} - /** * @deprecated */ @@ -37,30 +26,16 @@ const Tooltip = React.forwardRef(function Tooltip( ref, ) { const tooltipId = useId(id) - const tooltipClasses = clsx( - className, - classes.Tooltip, - tooltipDirectionClasses[direction], - align === 'left' && classes['Tooltip--alignLeft'], - align === 'right' && classes['Tooltip--alignRight'], - noDelay && classes['Tooltip--noDelay'], - wrap && classes['Tooltip--multiline'], - { - // maintaining feature parity with old classes - 'tooltipped-n': direction === 'n', - 'tooltipped-ne': direction === 'ne', - 'tooltipped-e': direction === 'e', - 'tooltipped-se': direction === 'se', - 'tooltipped-s': direction === 's', - 'tooltipped-sw': direction === 'sw', - 'tooltipped-w': direction === 'w', - 'tooltipped-nw': direction === 'nw', - 'tooltipped-align-left-2': align === 'left', - 'tooltipped-align-right-2': align === 'right', - 'tooltipped-no-delay': noDelay, - 'tooltipped-multiline': wrap, - }, - ) + const tooltipClasses = clsx(className, classes.Tooltip, classes[`Tooltip--${direction}`], { + [classes[`Tooltip--align${align === 'left' ? 'Left' : 'Right'}`]]: align, + [classes['Tooltip--noDelay']]: noDelay, + [classes['Tooltip--multiline']]: wrap, + // maintaining feature parity with old classes + [`tooltipped-${direction}`]: true, + [`tooltipped-align-${align === 'left' ? 'left' : 'right'}-2`]: align, + 'tooltipped-no-delay': noDelay, + 'tooltipped-multiline': wrap, + }) const value = useMemo(() => ({tooltipId}), [tooltipId]) return ( diff --git a/packages/react/src/internal/components/Caret.tsx b/packages/react/src/internal/components/Caret.tsx index d0f57fb0ac5..742995664ed 100644 --- a/packages/react/src/internal/components/Caret.tsx +++ b/packages/react/src/internal/components/Caret.tsx @@ -86,10 +86,7 @@ function Caret(props: CaretProps) { ...getPosition(edge, align, size), // if align is set (top|right|bottom|left), // then we don't need an offset margin - marginTop: perp === 'Top' && !align ? -size : undefined, - marginRight: perp === 'Right' && !align ? -size : undefined, - marginBottom: perp === 'Bottom' && !align ? -size : undefined, - marginLeft: perp === 'Left' && !align ? -size : undefined, + [`margin${perp}`]: align ? null : -size, ...({ '--caret-bg': bg, '--caret-border-color': borderColor, From 77d810304127bf6632e2d857dca0494435d55127 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 9 Jul 2026 12:48:17 -0500 Subject: [PATCH 4/8] Remove React Compiler diagnostic ignores Convert the remaining computed object keys that failed the check to static property names so all compiler diagnostics are surfaced. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648 --- .../react-compiler-check/src/index.test.ts | 8 ++-- packages/react-compiler-check/src/index.ts | 8 ---- packages/react/src/Overlay/Overlay.tsx | 40 ++++++++++++++--- packages/react/src/Tooltip/Tooltip.tsx | 45 ++++++++++++++----- .../react/src/internal/components/Caret.tsx | 5 ++- 5 files changed, 78 insertions(+), 28 deletions(-) diff --git a/packages/react-compiler-check/src/index.test.ts b/packages/react-compiler-check/src/index.test.ts index 839d5bd0f1d..3cf7a393a81 100644 --- a/packages/react-compiler-check/src/index.test.ts +++ b/packages/react-compiler-check/src/index.test.ts @@ -72,7 +72,7 @@ describe('checkFile', () => { ).toEqual({ok: true}) }) - test('does not fail on computed object expression keys', () => { + test('does not fail on static object expression keys', () => { expect( checkFile( 'Tooltip.tsx', @@ -86,8 +86,10 @@ describe('checkFile', () => { function Tooltip({align}: {align?: 'left' | 'right'}) { const className = clsx(styles.Tooltip, { - [styles[\`Tooltip\${align === 'left' ? 'Left' : 'Right'}\`]]: align, - [\`tooltipped-\${align}\`]: align, + TooltipLeft: align === 'left', + TooltipRight: align === 'right', + 'tooltipped-left': align === 'left', + 'tooltipped-right': align === 'right', }) return diff --git a/packages/react-compiler-check/src/index.ts b/packages/react-compiler-check/src/index.ts index 63fef2979cd..a41d5c6539f 100644 --- a/packages/react-compiler-check/src/index.ts +++ b/packages/react-compiler-check/src/index.ts @@ -80,10 +80,6 @@ function checkFile(filename: string, contents: string): CheckResult { } function addCheckError(errors: Array, error: CheckError): void { - if (shouldIgnoreError(error)) { - return - } - const hasError = errors.some(existingError => { return ( existingError.reason === error.reason && @@ -96,10 +92,6 @@ function addCheckError(errors: Array, error: CheckError): void { } } -function shouldIgnoreError(error: CheckError): boolean { - return error.reason === '(BuildHIR::lowerExpression) Expected Identifier, got TemplateLiteral key in ObjectExpression' -} - function getLocationLine(location: CheckError['location']): number | null { if (location === null || typeof location !== 'object' || !('start' in location)) { return null diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx index 31ee7ebcf5d..3be839a5757 100644 --- a/packages/react/src/Overlay/Overlay.tsx +++ b/packages/react/src/Overlay/Overlay.tsx @@ -104,12 +104,40 @@ export const BaseOverlay = React.forwardRef( } as React.CSSProperties } {...{ - [`data-width-${width}`]: '', - [`data-max-width-${maxWidth}`]: maxWidth ? '' : undefined, - [`data-height-${height}`]: '', - [`data-max-height-${maxHeight}`]: maxHeight ? '' : undefined, - [`data-visibility-${visibility}`]: '', - [`data-overflow-${rest.overflow}`]: rest.overflow ? '' : undefined, + 'data-width-small': width === 'small' ? '' : undefined, + 'data-width-medium': width === 'medium' ? '' : undefined, + 'data-width-large': width === 'large' ? '' : undefined, + 'data-width-xlarge': width === 'xlarge' ? '' : undefined, + 'data-width-xxlarge': width === 'xxlarge' ? '' : undefined, + 'data-width-auto': width === 'auto' ? '' : undefined, + 'data-width-undefined': width === undefined ? '' : undefined, + 'data-max-width-small': maxWidth === 'small' ? '' : undefined, + 'data-max-width-medium': maxWidth === 'medium' ? '' : undefined, + 'data-max-width-large': maxWidth === 'large' ? '' : undefined, + 'data-max-width-xlarge': maxWidth === 'xlarge' ? '' : undefined, + 'data-max-width-xxlarge': maxWidth === 'xxlarge' ? '' : undefined, + 'data-height-xsmall': height === 'xsmall' ? '' : undefined, + 'data-height-small': height === 'small' ? '' : undefined, + 'data-height-medium': height === 'medium' ? '' : undefined, + 'data-height-large': height === 'large' ? '' : undefined, + 'data-height-xlarge': height === 'xlarge' ? '' : undefined, + 'data-height-auto': height === 'auto' ? '' : undefined, + 'data-height-initial': height === 'initial' ? '' : undefined, + 'data-height-fit-content': height === 'fit-content' ? '' : undefined, + 'data-height-undefined': height === undefined ? '' : undefined, + 'data-max-height-xsmall': maxHeight === 'xsmall' ? '' : undefined, + 'data-max-height-small': maxHeight === 'small' ? '' : undefined, + 'data-max-height-medium': maxHeight === 'medium' ? '' : undefined, + 'data-max-height-large': maxHeight === 'large' ? '' : undefined, + 'data-max-height-xlarge': maxHeight === 'xlarge' ? '' : undefined, + 'data-max-height-fit-content': maxHeight === 'fit-content' ? '' : undefined, + 'data-visibility-visible': visibility === 'visible' ? '' : undefined, + 'data-visibility-hidden': visibility === 'hidden' ? '' : undefined, + 'data-visibility-undefined': visibility === undefined ? '' : undefined, + 'data-overflow-auto': rest.overflow === 'auto' ? '' : undefined, + 'data-overflow-hidden': rest.overflow === 'hidden' ? '' : undefined, + 'data-overflow-scroll': rest.overflow === 'scroll' ? '' : undefined, + 'data-overflow-visible': rest.overflow === 'visible' ? '' : undefined, }} className={clsx(className, classes.Overlay)} /> diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx index 0869b055383..f672d0ea9ed 100644 --- a/packages/react/src/Tooltip/Tooltip.tsx +++ b/packages/react/src/Tooltip/Tooltip.tsx @@ -18,6 +18,17 @@ export type TooltipProps = { wrap?: boolean } & React.ComponentProps<'span'> +const tooltipDirectionClasses = { + n: classes['Tooltip--n'], + ne: classes['Tooltip--ne'], + e: classes['Tooltip--e'], + se: classes['Tooltip--se'], + s: classes['Tooltip--s'], + sw: classes['Tooltip--sw'], + w: classes['Tooltip--w'], + nw: classes['Tooltip--nw'], +} + /** * @deprecated */ @@ -26,16 +37,30 @@ const Tooltip = React.forwardRef(function Tooltip( ref, ) { const tooltipId = useId(id) - const tooltipClasses = clsx(className, classes.Tooltip, classes[`Tooltip--${direction}`], { - [classes[`Tooltip--align${align === 'left' ? 'Left' : 'Right'}`]]: align, - [classes['Tooltip--noDelay']]: noDelay, - [classes['Tooltip--multiline']]: wrap, - // maintaining feature parity with old classes - [`tooltipped-${direction}`]: true, - [`tooltipped-align-${align === 'left' ? 'left' : 'right'}-2`]: align, - 'tooltipped-no-delay': noDelay, - 'tooltipped-multiline': wrap, - }) + const tooltipClasses = clsx( + className, + classes.Tooltip, + tooltipDirectionClasses[direction], + align === 'left' && classes['Tooltip--alignLeft'], + align === 'right' && classes['Tooltip--alignRight'], + noDelay && classes['Tooltip--noDelay'], + wrap && classes['Tooltip--multiline'], + { + // maintaining feature parity with old classes + 'tooltipped-n': direction === 'n', + 'tooltipped-ne': direction === 'ne', + 'tooltipped-e': direction === 'e', + 'tooltipped-se': direction === 'se', + 'tooltipped-s': direction === 's', + 'tooltipped-sw': direction === 'sw', + 'tooltipped-w': direction === 'w', + 'tooltipped-nw': direction === 'nw', + 'tooltipped-align-left-2': align === 'left', + 'tooltipped-align-right-2': align === 'right', + 'tooltipped-no-delay': noDelay, + 'tooltipped-multiline': wrap, + }, + ) const value = useMemo(() => ({tooltipId}), [tooltipId]) return ( diff --git a/packages/react/src/internal/components/Caret.tsx b/packages/react/src/internal/components/Caret.tsx index 742995664ed..d0f57fb0ac5 100644 --- a/packages/react/src/internal/components/Caret.tsx +++ b/packages/react/src/internal/components/Caret.tsx @@ -86,7 +86,10 @@ function Caret(props: CaretProps) { ...getPosition(edge, align, size), // if align is set (top|right|bottom|left), // then we don't need an offset margin - [`margin${perp}`]: align ? null : -size, + marginTop: perp === 'Top' && !align ? -size : undefined, + marginRight: perp === 'Right' && !align ? -size : undefined, + marginBottom: perp === 'Bottom' && !align ? -size : undefined, + marginLeft: perp === 'Left' && !align ? -size : undefined, ...({ '--caret-bg': bg, '--caret-border-color': borderColor, From 11baa6dfd986f0e8ab707466cc520337e69446ff Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 9 Jul 2026 12:57:06 -0500 Subject: [PATCH 5/8] Refactor static computed key replacements Move the longer static data attribute and class mappings into helpers so the React Compiler fixes stay readable. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648 --- packages/react/src/Overlay/Overlay.tsx | 100 +++++++++++------- packages/react/src/Tooltip/Tooltip.tsx | 71 +++++++++---- .../react/src/internal/components/Caret.tsx | 22 +++- 3 files changed, 131 insertions(+), 62 deletions(-) diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx index 3be839a5757..f9bcb77f107 100644 --- a/packages/react/src/Overlay/Overlay.tsx +++ b/packages/react/src/Overlay/Overlay.tsx @@ -24,6 +24,69 @@ type StyledOverlayProps = { const animationDuration = 200 +const widthDataAttributes = { + small: {'data-width-small': ''}, + medium: {'data-width-medium': ''}, + large: {'data-width-large': ''}, + xlarge: {'data-width-xlarge': ''}, + xxlarge: {'data-width-xxlarge': ''}, + auto: {'data-width-auto': ''}, + undefined: {'data-width-undefined': ''}, +} + +const maxWidthDataAttributes = { + small: {'data-max-width-small': ''}, + medium: {'data-max-width-medium': ''}, + large: {'data-max-width-large': ''}, + xlarge: {'data-max-width-xlarge': ''}, + xxlarge: {'data-max-width-xxlarge': ''}, +} + +const heightDataAttributes = { + xsmall: {'data-height-xsmall': ''}, + small: {'data-height-small': ''}, + medium: {'data-height-medium': ''}, + large: {'data-height-large': ''}, + xlarge: {'data-height-xlarge': ''}, + auto: {'data-height-auto': ''}, + initial: {'data-height-initial': ''}, + 'fit-content': {'data-height-fit-content': ''}, + undefined: {'data-height-undefined': ''}, +} + +const maxHeightDataAttributes = { + xsmall: {'data-max-height-xsmall': ''}, + small: {'data-max-height-small': ''}, + medium: {'data-max-height-medium': ''}, + large: {'data-max-height-large': ''}, + xlarge: {'data-max-height-xlarge': ''}, + 'fit-content': {'data-max-height-fit-content': ''}, +} + +const visibilityDataAttributes = { + visible: {'data-visibility-visible': ''}, + hidden: {'data-visibility-hidden': ''}, + undefined: {'data-visibility-undefined': ''}, +} + +const overflowDataAttributes = { + auto: {'data-overflow-auto': ''}, + hidden: {'data-overflow-hidden': ''}, + scroll: {'data-overflow-scroll': ''}, + visible: {'data-overflow-visible': ''}, +} + +function getOverlayDataAttributes({height, maxHeight, maxWidth, overflow, visibility, width}: StyledOverlayProps) { + return { + ...widthDataAttributes[width ?? 'undefined'], + ...(maxWidth ? maxWidthDataAttributes[maxWidth] : {}), + ...heightDataAttributes[height ?? 'undefined'], + ...(maxHeight ? maxHeightDataAttributes[maxHeight] : {}), + ...visibilityDataAttributes[visibility ?? 'undefined'], + ...(overflow ? overflowDataAttributes[overflow] : {}), + } +} + function getSlideAnimationStartingVector(anchorSide?: AnchorSide): {x: number; y: number} { if (anchorSide?.endsWith('bottom')) { return {x: 0, y: -1} @@ -103,42 +166,7 @@ export const BaseOverlay = React.forwardRef( ...styleFromProps, } as React.CSSProperties } - {...{ - 'data-width-small': width === 'small' ? '' : undefined, - 'data-width-medium': width === 'medium' ? '' : undefined, - 'data-width-large': width === 'large' ? '' : undefined, - 'data-width-xlarge': width === 'xlarge' ? '' : undefined, - 'data-width-xxlarge': width === 'xxlarge' ? '' : undefined, - 'data-width-auto': width === 'auto' ? '' : undefined, - 'data-width-undefined': width === undefined ? '' : undefined, - 'data-max-width-small': maxWidth === 'small' ? '' : undefined, - 'data-max-width-medium': maxWidth === 'medium' ? '' : undefined, - 'data-max-width-large': maxWidth === 'large' ? '' : undefined, - 'data-max-width-xlarge': maxWidth === 'xlarge' ? '' : undefined, - 'data-max-width-xxlarge': maxWidth === 'xxlarge' ? '' : undefined, - 'data-height-xsmall': height === 'xsmall' ? '' : undefined, - 'data-height-small': height === 'small' ? '' : undefined, - 'data-height-medium': height === 'medium' ? '' : undefined, - 'data-height-large': height === 'large' ? '' : undefined, - 'data-height-xlarge': height === 'xlarge' ? '' : undefined, - 'data-height-auto': height === 'auto' ? '' : undefined, - 'data-height-initial': height === 'initial' ? '' : undefined, - 'data-height-fit-content': height === 'fit-content' ? '' : undefined, - 'data-height-undefined': height === undefined ? '' : undefined, - 'data-max-height-xsmall': maxHeight === 'xsmall' ? '' : undefined, - 'data-max-height-small': maxHeight === 'small' ? '' : undefined, - 'data-max-height-medium': maxHeight === 'medium' ? '' : undefined, - 'data-max-height-large': maxHeight === 'large' ? '' : undefined, - 'data-max-height-xlarge': maxHeight === 'xlarge' ? '' : undefined, - 'data-max-height-fit-content': maxHeight === 'fit-content' ? '' : undefined, - 'data-visibility-visible': visibility === 'visible' ? '' : undefined, - 'data-visibility-hidden': visibility === 'hidden' ? '' : undefined, - 'data-visibility-undefined': visibility === undefined ? '' : undefined, - 'data-overflow-auto': rest.overflow === 'auto' ? '' : undefined, - 'data-overflow-hidden': rest.overflow === 'hidden' ? '' : undefined, - 'data-overflow-scroll': rest.overflow === 'scroll' ? '' : undefined, - 'data-overflow-visible': rest.overflow === 'visible' ? '' : undefined, - }} + {...getOverlayDataAttributes({height, maxHeight, maxWidth, overflow: rest.overflow, visibility, width})} className={clsx(className, classes.Overlay)} /> ) diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx index f672d0ea9ed..8b8bdeee87b 100644 --- a/packages/react/src/Tooltip/Tooltip.tsx +++ b/packages/react/src/Tooltip/Tooltip.tsx @@ -29,38 +29,65 @@ const tooltipDirectionClasses = { nw: classes['Tooltip--nw'], } -/** - * @deprecated - */ -const Tooltip = React.forwardRef(function Tooltip( - {as: Component = 'span', direction = 'n', children, className, text, noDelay, align, wrap, id, ...rest}, - ref, -) { - const tooltipId = useId(id) - const tooltipClasses = clsx( +const tooltipAlignmentClasses = { + left: classes['Tooltip--alignLeft'], + right: classes['Tooltip--alignRight'], +} + +const legacyTooltipDirectionClasses = { + n: 'tooltipped-n', + ne: 'tooltipped-ne', + e: 'tooltipped-e', + se: 'tooltipped-se', + s: 'tooltipped-s', + sw: 'tooltipped-sw', + w: 'tooltipped-w', + nw: 'tooltipped-nw', +} + +const legacyTooltipAlignmentClasses = { + left: 'tooltipped-align-left-2', + right: 'tooltipped-align-right-2', +} + +function getTooltipClasses({ + align, + className, + direction, + noDelay, + wrap, +}: { + align: TooltipProps['align'] + className: TooltipProps['className'] + direction: NonNullable + noDelay: TooltipProps['noDelay'] + wrap: TooltipProps['wrap'] +}) { + return clsx( className, classes.Tooltip, tooltipDirectionClasses[direction], - align === 'left' && classes['Tooltip--alignLeft'], - align === 'right' && classes['Tooltip--alignRight'], + align && tooltipAlignmentClasses[align], noDelay && classes['Tooltip--noDelay'], wrap && classes['Tooltip--multiline'], + legacyTooltipDirectionClasses[direction], + align && legacyTooltipAlignmentClasses[align], { - // maintaining feature parity with old classes - 'tooltipped-n': direction === 'n', - 'tooltipped-ne': direction === 'ne', - 'tooltipped-e': direction === 'e', - 'tooltipped-se': direction === 'se', - 'tooltipped-s': direction === 's', - 'tooltipped-sw': direction === 'sw', - 'tooltipped-w': direction === 'w', - 'tooltipped-nw': direction === 'nw', - 'tooltipped-align-left-2': align === 'left', - 'tooltipped-align-right-2': align === 'right', 'tooltipped-no-delay': noDelay, 'tooltipped-multiline': wrap, }, ) +} + +/** + * @deprecated + */ +const Tooltip = React.forwardRef(function Tooltip( + {as: Component = 'span', direction = 'n', children, className, text, noDelay, align, wrap, id, ...rest}, + ref, +) { + const tooltipId = useId(id) + const tooltipClasses = getTooltipClasses({align, className, direction, noDelay, wrap}) const value = useMemo(() => ({tooltipId}), [tooltipId]) return ( diff --git a/packages/react/src/internal/components/Caret.tsx b/packages/react/src/internal/components/Caret.tsx index d0f57fb0ac5..a14ac5cfbc8 100644 --- a/packages/react/src/internal/components/Caret.tsx +++ b/packages/react/src/internal/components/Caret.tsx @@ -45,6 +45,23 @@ function getPosition(edge: Alignment, align: Alignment | undefined, spacing: num } } +function getMarginStyle( + perpendicular: (typeof perpendicularEdge)[Alignment], + align: Alignment | undefined, + size: number, +) { + if (align) { + return {} + } + + return { + marginTop: perpendicular === 'Top' ? -size : undefined, + marginRight: perpendicular === 'Right' ? -size : undefined, + marginBottom: perpendicular === 'Bottom' ? -size : undefined, + marginLeft: perpendicular === 'Left' ? -size : undefined, + } +} + export type CaretProps = { bg?: string borderColor?: string @@ -86,10 +103,7 @@ function Caret(props: CaretProps) { ...getPosition(edge, align, size), // if align is set (top|right|bottom|left), // then we don't need an offset margin - marginTop: perp === 'Top' && !align ? -size : undefined, - marginRight: perp === 'Right' && !align ? -size : undefined, - marginBottom: perp === 'Bottom' && !align ? -size : undefined, - marginLeft: perp === 'Left' && !align ? -size : undefined, + ...getMarginStyle(perp, align, size), ...({ '--caret-bg': bg, '--caret-border-color': borderColor, From 158308982426af40dbaac1095350e96ec2240169 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 9 Jul 2026 14:35:07 -0500 Subject: [PATCH 6/8] Remove React Compiler check test updates Keep the compiler-check test file unchanged while preserving the source fixes for surfaced compiler diagnostics. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648 --- .../react-compiler-check/src/index.test.ts | 46 +------------------ 1 file changed, 1 insertion(+), 45 deletions(-) diff --git a/packages/react-compiler-check/src/index.test.ts b/packages/react-compiler-check/src/index.test.ts index 3cf7a393a81..80bc1dda240 100644 --- a/packages/react-compiler-check/src/index.test.ts +++ b/packages/react-compiler-check/src/index.test.ts @@ -34,7 +34,7 @@ describe('checkFile', () => { function BaseStyles({children, color, className, as: Component = 'div', style, ...rest}: BaseStylesProps) { const baseStyles = { - '--BaseStyles-fgColor': color, + ['--BaseStyles-fgColor']: color, } return ( @@ -55,50 +55,6 @@ describe('checkFile', () => { ).toEqual({ok: true}) }) - test('does not fail on static object pattern keys', () => { - expect( - checkFile( - 'Label.tsx', - ` - type LabelProps = { - 'data-component'?: string - } - - function Label({'data-component': dataComponent = 'Label'}: LabelProps) { - return - } - `, - ), - ).toEqual({ok: true}) - }) - - test('does not fail on static object expression keys', () => { - expect( - checkFile( - 'Tooltip.tsx', - ` - import {clsx} from 'clsx' - - const styles = { - Tooltip: 'Tooltip', - TooltipLeft: 'TooltipLeft', - } - - function Tooltip({align}: {align?: 'left' | 'right'}) { - const className = clsx(styles.Tooltip, { - TooltipLeft: align === 'left', - TooltipRight: align === 'right', - 'tooltipped-left': align === 'left', - 'tooltipped-right': align === 'right', - }) - - return - } - `, - ), - ).toEqual({ok: true}) - }) - test('returns compiler errors with source locations', () => { const result = checkFile( 'ConditionalHook.tsx', From 4369dc939ebadf26bf61e20c825eda1406937cc3 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 9 Jul 2026 15:06:14 -0500 Subject: [PATCH 7/8] Use experimental React Compiler packages Update React Compiler and runtime packages to the current experimental build and drop source rewrites that are no longer needed with that compiler. Keep the object-pattern destructuring fixes and make compiler error handling robust across compiler builds. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648 --- .../react-compiler-experimental-runtime.md | 5 + package-lock.json | 258 ++++++++---------- package.json | 2 +- packages/react-compiler-check/package.json | 2 +- packages/react-compiler-check/src/index.ts | 14 +- packages/react/package.json | 4 +- packages/react/src/BaseStyles.tsx | 2 +- packages/react/src/Checkbox/Checkbox.tsx | 4 +- .../react/src/CounterLabel/CounterLabel.tsx | 4 +- packages/react/src/Overlay/Overlay.tsx | 72 +---- packages/react/src/Tooltip/Tooltip.tsx | 72 +---- packages/react/src/Truncate/Truncate.tsx | 2 +- .../react/src/internal/components/Caret.tsx | 19 +- packages/styled-react/package.json | 4 +- 14 files changed, 162 insertions(+), 302 deletions(-) create mode 100644 .changeset/react-compiler-experimental-runtime.md diff --git a/.changeset/react-compiler-experimental-runtime.md b/.changeset/react-compiler-experimental-runtime.md new file mode 100644 index 00000000000..f7f37bf2ae0 --- /dev/null +++ b/.changeset/react-compiler-experimental-runtime.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +React Compiler: Update the runtime dependency to the current experimental build. diff --git a/package-lock.json b/package-lock.json index bcb66fcfd6f..48fee6f93ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,7 +37,7 @@ "@vitest/browser": "^4.1.9", "@vitest/browser-playwright": "^4.1.9", "@vitest/eslint-plugin": "^1.6.20", - "babel-plugin-react-compiler": "^1.0.0", + "babel-plugin-react-compiler": "0.0.0-experimental-a1856f3-20260507", "change-case": "^5.4.4", "eslint": "^10.6.0", "eslint-import-resolver-typescript": "3.7.0", @@ -7779,9 +7779,9 @@ "license": "MIT" }, "node_modules/@rolldown/binding-android-arm64": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.3.tgz", - "integrity": "sha512-DT6Z3PhvioeHMvxo+xHc3KtqggrI7CCTXCmC2h/5zUlp5jVitv7XEy+9q5/7v8IolhlioawpMo8Kg0EEBy7J0g==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.4.tgz", + "integrity": "sha512-EZLpf/8y7GXkkra90ML47kzik/GMP3EMcE9bPyHmRfxLC6z9+aW5A8poCsoxjrT5GfEcNAAvWwUHjvP1pUQkfw==", "cpu": [ "arm64" ], @@ -7796,9 +7796,9 @@ } }, "node_modules/@rolldown/binding-darwin-arm64": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.1.3.tgz", - "integrity": "sha512-0NwgwsjM7LrsuVnXMK3koTpagBNOhloc/BNjKqZjv4V5zI5r13qx69uVhRx+o5Z0yy4Hzq+lpy7TAgUG/ocvrw==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.1.4.tgz", + "integrity": "sha512-aUi+HBvmYb7j8krl1+qJgkG8C17fO79gk3c+jPw4S8glRFc1DTija9S3EyaTSQUm5GJXYKDAsugBEhFHH2vYiQ==", "cpu": [ "arm64" ], @@ -7813,9 +7813,9 @@ } }, "node_modules/@rolldown/binding-darwin-x64": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.1.3.tgz", - "integrity": "sha512-YtiBp4disu6V560loT6PjMdiRaWmVvDNrUunAalbiFx2ggeJwxdAsgZMcoGP17uyAsTwAj5V1niksxlHnVQ1Sw==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.1.4.tgz", + "integrity": "sha512-F7hHC3gwY11+vByKPRWqwGbeXWVgKmL+pTGCinaEhdihzBV2aQ0fvZOch9cXYUOKuKKq429HeYXOqQLc7wFCEg==", "cpu": [ "x64" ], @@ -7830,9 +7830,9 @@ } }, "node_modules/@rolldown/binding-freebsd-x64": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.1.3.tgz", - "integrity": "sha512-yD3EkEdXk2LypPxnf/kSZHirarsI8gcPzc62SukhR9VJTyvV+F9Q/GxWNuCojc7sXyuVC4DxRGhdDK4X8VSsbw==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.1.4.tgz", + "integrity": "sha512-sI5yw+7s92SK6odiEhD5lKCBlWcpjHS5qyqpVQbZAJ0fIzEUXrmbl3DH2ybR3PZogulNJF+COLtmA8hUfvkCCQ==", "cpu": [ "x64" ], @@ -7847,9 +7847,9 @@ } }, "node_modules/@rolldown/binding-linux-arm-gnueabihf": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.1.3.tgz", - "integrity": "sha512-c+8vieQbsD7HNAHKIA34w0GJ9FedFFuJGD+7E6vz7Q3uqAIugL5p45fhlsj4UaAsHpcmlqugBWMhA0/j7o0sIg==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.1.4.tgz", + "integrity": "sha512-mCi0OKgEieFircrtVYmQAFGszRtMnZ6fpZAXrxanXAu7lqZcsK1E1RAaZNG0uKAnxox3B1f4EyQNnoyMfN1vAA==", "cpu": [ "arm" ], @@ -7864,9 +7864,9 @@ } }, "node_modules/@rolldown/binding-linux-arm64-gnu": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.1.3.tgz", - "integrity": "sha512-50jD0uUwLvur7Zz9LHz17kaAdTPjn5wN93hEgjvmYFRZwiR7ZJYovTd5ipyWJDAnXKvZ+wgc+/Ika6dwSF5OcA==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.1.4.tgz", + "integrity": "sha512-B9Ial3Kv5sh0SHnB1g/QWcUQCEvCF6QKGAl4zXypYj65mVI+B4AhFBwPtSN7pDrJeIx8Z7zdy4ntx+wQABom7w==", "cpu": [ "arm64" ], @@ -7884,9 +7884,9 @@ } }, "node_modules/@rolldown/binding-linux-arm64-musl": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.1.3.tgz", - "integrity": "sha512-BO9+oPL8K9poZJBfYPsXNtYjPE5uM3qeehT3aFcW4LITOl+iSqhp0abzjR2nWBUNjIZeKXjAEWBZ64WjNoHd6w==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.1.4.tgz", + "integrity": "sha512-lZVym0PuHE1KZ22gmFTC15lAkrg9iTszR617oYRB/iPY1A56ywoJzVKOJBKaot5RiikCObmur6pogpse3gRcng==", "cpu": [ "arm64" ], @@ -7904,9 +7904,9 @@ } }, "node_modules/@rolldown/binding-linux-ppc64-gnu": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.1.3.tgz", - "integrity": "sha512-f3VpLB1vQ0Eo6ecr/6cekLnvYMFF4YBFoVGkfkvPLq1bAkbAwHYQPZKoAmG6OJyTcxxoC+AvezGx/S1obNC0Mw==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.1.4.tgz", + "integrity": "sha512-t2DNiLJWNTbnEHyUzTumldML6ET4/g16467LZoDDJ3tSxGvguL5/NyC2lCsNKuyRycg9XeDQF5SSv+TNOhQEXg==", "cpu": [ "ppc64" ], @@ -7924,9 +7924,9 @@ } }, "node_modules/@rolldown/binding-linux-s390x-gnu": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.1.3.tgz", - "integrity": "sha512-AmurZ26Pqx/RI9N1gzEOCklkKXl927yjfXWUUS0O7Puh8ARM/Ob8qfrD3qnWksScdw6cSrW5PSHE9DyLu7+PtA==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.1.4.tgz", + "integrity": "sha512-0WIRnL1Uw4BvTZRLQt+PVgo6ZKTJadlC2btP+/EOXv2f/DWbY0rEgl+y834mIVwP1FkTlWVTrGGJXf12lru7EQ==", "cpu": [ "s390x" ], @@ -7944,9 +7944,9 @@ } }, "node_modules/@rolldown/binding-linux-x64-gnu": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.1.3.tgz", - "integrity": "sha512-JJpqs8bRGITDOdbkNKnlojzBabbOHrqjSvDr0IVsZObE1lBcPjxItUEY9eWIDbxaJ3cGrXPWGfGkIxFijg/URg==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.1.4.tgz", + "integrity": "sha512-JWtGshGfX+oENAKonoNkqEJX+7hC8yfhi9GUyPX1VX4mdh1y5r+ZiJLR5XzAB0aoP6s/PcILsGjKq8O0mm24bw==", "cpu": [ "x64" ], @@ -7964,9 +7964,9 @@ } }, "node_modules/@rolldown/binding-linux-x64-musl": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.1.3.tgz", - "integrity": "sha512-rSJcdjPxzA/by/6/rYs+v+bXU7UjvnbUWz8MJb6kh6+knqB1dCrtHg0uu7C/4haqJvqdkYHQ5IGn+tCH9GLW/g==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.1.4.tgz", + "integrity": "sha512-rT6yQcxUuXs4CnbofqwHRRV0iem349rLMYpTjkgQGLjrY4ado/eDzwPZPTCgTOlF6Nkp8NEv70yLMTn6qkWxsQ==", "cpu": [ "x64" ], @@ -7984,9 +7984,9 @@ } }, "node_modules/@rolldown/binding-openharmony-arm64": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.1.3.tgz", - "integrity": "sha512-hQ3/PYkDJICgevvyNcVrihVeqq7k1Pp3VZ9lY+dauAYUJKO+auqApvANhvR1An9BhmqYKvW2Mu1F9u4DXSMLxQ==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.1.4.tgz", + "integrity": "sha512-KXMGoboq5cyaCQjDA4GLuRiOwBQ0EyFnJoVViLeZ45/3rFItRODEr+NdsBcVpll40hhNArlm/speWGRvj08LzA==", "cpu": [ "arm64" ], @@ -8001,9 +8001,9 @@ } }, "node_modules/@rolldown/binding-wasm32-wasi": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.1.3.tgz", - "integrity": "sha512-Elcv/BtML9lXrV6JuKITc/grN2kYV9gjsQpW8Jfw4ioK0TOkjBjye0nnyqQNy9STNaI20lXNaQBRrD5gSgR0Yg==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.1.4.tgz", + "integrity": "sha512-5K83rb36oJiY7BCyE9zLZtGcPV4g5wvq+xwdO0XPIwDVZI8cyB/AUjkNXGb92/rnmezEkjMOpgY61rtwjQtFwg==", "cpu": [ "wasm32" ], @@ -8054,9 +8054,9 @@ } }, "node_modules/@rolldown/binding-win32-arm64-msvc": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.1.3.tgz", - "integrity": "sha512-2DrEfhluH9yhiaFApmsjsjwrSYbNcY1oFTzYSP1a535jDbV98zCFanA/96TBUd0iDFcxGmw9QRExwGCXz3U+/g==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.1.4.tgz", + "integrity": "sha512-PnWBtw3TV5KOg69HQQDR0mnQuyCmSGR2pAB4DC1rPF808fgKeTUMj2EOEyKATpgiuxuR5APQmiDO7PDgEjTFSA==", "cpu": [ "arm64" ], @@ -8071,9 +8071,9 @@ } }, "node_modules/@rolldown/binding-win32-x64-msvc": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.1.3.tgz", - "integrity": "sha512-OL4OMk7UPXOeVGGd3qo5zJyPIljf4AFgk5QAkPPS+OoLuOOozhuaQGC18MxVTnw/06q93gShAJzlwnSCY9YtqA==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.1.4.tgz", + "integrity": "sha512-M1lpniBePobTfsa7Ks9a199e1akxsXn+GYBUKsEzv3YFzOm1HJAMNwKI3qr0Zq+mxwx9gOZoTdP1yXRYsZUocQ==", "cpu": [ "x64" ], @@ -8119,9 +8119,9 @@ } }, "node_modules/@rolldown/plugin-babel/node_modules/picomatch": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", - "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "dev": true, "license": "MIT", "engines": { @@ -8162,9 +8162,9 @@ } }, "node_modules/@rollup/pluginutils/node_modules/picomatch": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", - "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "dev": true, "license": "MIT", "engines": { @@ -10966,9 +10966,10 @@ } }, "node_modules/babel-plugin-react-compiler": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz", - "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==", + "version": "0.0.0-experimental-a1856f3-20260507", + "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-0.0.0-experimental-a1856f3-20260507.tgz", + "integrity": "sha512-NH/o9ojGrQ5xQhkLry8KulKssfWuM68myEGVUpIJhExt1/WVWBOTBPSPGiSRoJtfB9yP8Kj4UXZpLXKFCXineg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.26.0" @@ -22040,9 +22041,9 @@ } }, "node_modules/publint/node_modules/package-manager-detector": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz", - "integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.7.0.tgz", + "integrity": "sha512-xg1eHpwYL/D/HEdWw2goFZP6vV0FH7W+PZ5rFkGjdIDLtxq7EkzBUeT3m+lndYCt8wKbmofUu1MUdMCXkCk9ZQ==", "dev": true, "license": "MIT" }, @@ -22125,41 +22126,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/qs/node_modules/side-channel": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz", - "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==", - "license": "MIT", - "dependencies": { - "es-errors": "^1.3.0", - "object-inspect": "^1.13.4", - "side-channel-list": "^1.0.1", - "side-channel-map": "^1.0.1", - "side-channel-weakmap": "^1.0.2" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/qs/node_modules/side-channel-list": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz", - "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==", - "license": "MIT", - "dependencies": { - "es-errors": "^1.3.0", - "object-inspect": "^1.13.4" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/quansync": { "version": "0.2.8", "dev": true, @@ -22241,9 +22207,9 @@ } }, "node_modules/react-compiler-runtime": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/react-compiler-runtime/-/react-compiler-runtime-1.0.0.tgz", - "integrity": "sha512-rRfjYv66HlG8896yPUDONgKzG5BxZD1nV9U6rkm+7VCuvQc903C4MjcoZR4zPw53IKSOX9wMQVpA1IAbRtzQ7w==", + "version": "0.0.0-experimental-a1856f3-20260507", + "resolved": "https://registry.npmjs.org/react-compiler-runtime/-/react-compiler-runtime-0.0.0-experimental-a1856f3-20260507.tgz", + "integrity": "sha512-2UOQV9KDc/W7/aIFp+Y817a4nOoj9kWjvg3dVrlTb9I9dtXyMgC6/FnaWRYE50xOwJbbz2h/v6vemVu1u1ZaBQ==", "license": "MIT", "peerDependencies": { "react": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental" @@ -22794,13 +22760,13 @@ } }, "node_modules/rolldown": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.3.tgz", - "integrity": "sha512-1F1eEtUBtFvcGm1HQ9TiUIUHPQG7mSAODrhIzjxoUEFuo8OcbrGLiVLkevNgj84TE4lnHvnumwFjhJO5Eu135g==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.4.tgz", + "integrity": "sha512-IjZYiLxZwpnhwhdBH2ugdTGVSdhCQUmLxLoqyjiL0JxYjyRst+5a0P3xfrTxJ5F638j4Mvvw5FAX5XE6eHpXbA==", "dev": true, "license": "MIT", "dependencies": { - "@oxc-project/types": "=0.137.0", + "@oxc-project/types": "=0.138.0", "@rolldown/pluginutils": "^1.0.0" }, "bin": { @@ -22810,21 +22776,21 @@ "node": "^20.19.0 || >=22.12.0" }, "optionalDependencies": { - "@rolldown/binding-android-arm64": "1.1.3", - "@rolldown/binding-darwin-arm64": "1.1.3", - "@rolldown/binding-darwin-x64": "1.1.3", - "@rolldown/binding-freebsd-x64": "1.1.3", - "@rolldown/binding-linux-arm-gnueabihf": "1.1.3", - "@rolldown/binding-linux-arm64-gnu": "1.1.3", - "@rolldown/binding-linux-arm64-musl": "1.1.3", - "@rolldown/binding-linux-ppc64-gnu": "1.1.3", - "@rolldown/binding-linux-s390x-gnu": "1.1.3", - "@rolldown/binding-linux-x64-gnu": "1.1.3", - "@rolldown/binding-linux-x64-musl": "1.1.3", - "@rolldown/binding-openharmony-arm64": "1.1.3", - "@rolldown/binding-wasm32-wasi": "1.1.3", - "@rolldown/binding-win32-arm64-msvc": "1.1.3", - "@rolldown/binding-win32-x64-msvc": "1.1.3" + "@rolldown/binding-android-arm64": "1.1.4", + "@rolldown/binding-darwin-arm64": "1.1.4", + "@rolldown/binding-darwin-x64": "1.1.4", + "@rolldown/binding-freebsd-x64": "1.1.4", + "@rolldown/binding-linux-arm-gnueabihf": "1.1.4", + "@rolldown/binding-linux-arm64-gnu": "1.1.4", + "@rolldown/binding-linux-arm64-musl": "1.1.4", + "@rolldown/binding-linux-ppc64-gnu": "1.1.4", + "@rolldown/binding-linux-s390x-gnu": "1.1.4", + "@rolldown/binding-linux-x64-gnu": "1.1.4", + "@rolldown/binding-linux-x64-musl": "1.1.4", + "@rolldown/binding-openharmony-arm64": "1.1.4", + "@rolldown/binding-wasm32-wasi": "1.1.4", + "@rolldown/binding-win32-arm64-msvc": "1.1.4", + "@rolldown/binding-win32-x64-msvc": "1.1.4" } }, "node_modules/rolldown-plugin-dts": { @@ -22964,9 +22930,9 @@ "link": true }, "node_modules/rolldown/node_modules/@oxc-project/types": { - "version": "0.137.0", - "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.137.0.tgz", - "integrity": "sha512-WT+Gb24i8hmvo85AIv2oEYouEXkRlKAlT9WaCa3TfLgNCN+GhrJOGZuIlMouAh38Qe4QOx26eUOVsq70qXrywA==", + "version": "0.138.0", + "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.138.0.tgz", + "integrity": "sha512-1a7ZKmrRTCoN1XMZ4L0PyyqrMnrNlLyPuOkdSX2MZg7IiIGRUyurNhAm73ptDOraoBcIordsIGKNPKUzy3ZmfA==", "dev": true, "license": "MIT", "funding": { @@ -23471,13 +23437,14 @@ } }, "node_modules/side-channel": { - "version": "1.1.0", - "dev": true, + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz", + "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==", "license": "MIT", "dependencies": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3", - "side-channel-list": "^1.0.0", + "object-inspect": "^1.13.4", + "side-channel-list": "^1.0.1", "side-channel-map": "^1.0.1", "side-channel-weakmap": "^1.0.2" }, @@ -23489,12 +23456,13 @@ } }, "node_modules/side-channel-list": { - "version": "1.0.0", - "dev": true, + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz", + "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==", "license": "MIT", "dependencies": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3" + "object-inspect": "^1.13.4" }, "engines": { "node": ">= 0.4" @@ -25324,9 +25292,9 @@ } }, "node_modules/tinyglobby/node_modules/picomatch": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", - "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "dev": true, "license": "MIT", "engines": { @@ -25475,9 +25443,9 @@ } }, "node_modules/ts-declaration-location/node_modules/picomatch": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", - "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "dev": true, "license": "MIT", "engines": { @@ -26426,9 +26394,9 @@ } }, "node_modules/unplugin/node_modules/picomatch": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", - "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "dev": true, "license": "MIT", "engines": { @@ -27164,9 +27132,9 @@ } }, "node_modules/vite/node_modules/picomatch": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", - "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "dev": true, "license": "MIT", "engines": { @@ -27381,9 +27349,9 @@ } }, "node_modules/vitest/node_modules/picomatch": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", - "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "dev": true, "license": "MIT", "engines": { @@ -28377,7 +28345,7 @@ "hsluv": "1.0.1", "lodash.isempty": "^4.4.0", "lodash.isobject": "^3.0.2", - "react-compiler-runtime": "^1.0.0", + "react-compiler-runtime": "0.0.0-experimental-a1856f3-20260507", "react-intersection-observer": "^10.0.3" }, "devDependencies": { @@ -28424,7 +28392,7 @@ "babel-plugin-dev-expression": "0.2.3", "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", - "babel-plugin-react-compiler": "^1.0.0", + "babel-plugin-react-compiler": "0.0.0-experimental-a1856f3-20260507", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", "chalk": "^5.4.1", @@ -28500,7 +28468,7 @@ "@babel/core": "7.29.6", "@babel/preset-react": "7.28.5", "@babel/preset-typescript": "7.28.5", - "babel-plugin-react-compiler": "^1.0.0" + "babel-plugin-react-compiler": "0.0.0-experimental-a1856f3-20260507" }, "devDependencies": { "@primer/vitest-config": "^0.0.0", @@ -29388,12 +29356,12 @@ "@types/react-dom": "18.3.1", "@types/styled-components": "^5.1.26", "@vitejs/plugin-react": "^6.0.2", - "babel-plugin-react-compiler": "^1.0.0", + "babel-plugin-react-compiler": "0.0.0-experimental-a1856f3-20260507", "babel-plugin-styled-components": "2.1.4", "postcss-preset-primer": "^0.0.0", "publint": "^0.3.15", "react": "18.3.1", - "react-compiler-runtime": "^1.0.0", + "react-compiler-runtime": "0.0.0-experimental-a1856f3-20260507", "react-dom": "18.3.1", "rimraf": "^6.0.1", "rolldown": "^1.1.2", diff --git a/package.json b/package.json index 86d46d6667e..835bfa52ce5 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "@vitest/browser": "^4.1.9", "@vitest/browser-playwright": "^4.1.9", "@vitest/eslint-plugin": "^1.6.20", - "babel-plugin-react-compiler": "^1.0.0", + "babel-plugin-react-compiler": "0.0.0-experimental-a1856f3-20260507", "change-case": "^5.4.4", "eslint": "^10.6.0", "eslint-import-resolver-typescript": "3.7.0", diff --git a/packages/react-compiler-check/package.json b/packages/react-compiler-check/package.json index 8636744b180..ee3e06f5dc5 100644 --- a/packages/react-compiler-check/package.json +++ b/packages/react-compiler-check/package.json @@ -11,7 +11,7 @@ "@babel/core": "7.29.6", "@babel/preset-react": "7.28.5", "@babel/preset-typescript": "7.28.5", - "babel-plugin-react-compiler": "^1.0.0" + "babel-plugin-react-compiler": "0.0.0-experimental-a1856f3-20260507" }, "devDependencies": { "@primer/vitest-config": "^0.0.0", diff --git a/packages/react-compiler-check/src/index.ts b/packages/react-compiler-check/src/index.ts index a41d5c6539f..ab0361202b7 100644 --- a/packages/react-compiler-check/src/index.ts +++ b/packages/react-compiler-check/src/index.ts @@ -55,7 +55,7 @@ function checkFile(filename: string, contents: string): CheckResult { try { transformSync(contents, inputOptions) } catch (error: unknown) { - if (!(error instanceof CompilerError)) { + if (!(error instanceof CompilerError) && !isCompilerError(error)) { throw error } @@ -79,6 +79,18 @@ function checkFile(filename: string, contents: string): CheckResult { } } +function isCompilerError(error: unknown): error is CompilerError { + return ( + error !== null && + typeof error === 'object' && + 'details' in error && + Array.isArray(error.details) && + error.details.every(detail => { + return detail !== null && typeof detail === 'object' && 'primaryLocation' in detail && 'reason' in detail + }) + ) +} + function addCheckError(errors: Array, error: CheckError): void { const hasError = errors.some(existingError => { return ( diff --git a/packages/react/package.json b/packages/react/package.json index aed0e579418..dbe74ebd115 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -93,7 +93,7 @@ "hsluv": "1.0.1", "lodash.isempty": "^4.4.0", "lodash.isobject": "^3.0.2", - "react-compiler-runtime": "^1.0.0", + "react-compiler-runtime": "0.0.0-experimental-a1856f3-20260507", "react-intersection-observer": "^10.0.3" }, "devDependencies": { @@ -140,7 +140,7 @@ "babel-plugin-dev-expression": "0.2.3", "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", - "babel-plugin-react-compiler": "^1.0.0", + "babel-plugin-react-compiler": "0.0.0-experimental-a1856f3-20260507", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", "chalk": "^5.4.1", diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx index 74383b4f9e1..736c4938c62 100644 --- a/packages/react/src/BaseStyles.tsx +++ b/packages/react/src/BaseStyles.tsx @@ -16,7 +16,7 @@ export type BaseStylesProps = PropsWithChildren & { function BaseStyles({children, color, className, as: Component = 'div', style, ...rest}: BaseStylesProps) { const newClassName = clsx(classes.BaseStyles, className) const baseStyles = { - '--BaseStyles-fgColor': color, + ['--BaseStyles-fgColor']: color, } return ( diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx index 1fe1f7b46c8..aab7714a786 100644 --- a/packages/react/src/Checkbox/Checkbox.tsx +++ b/packages/react/src/Checkbox/Checkbox.tsx @@ -76,8 +76,8 @@ const Checkbox = React.forwardRef( checked: indeterminate ? false : checked, defaultChecked, required, - 'aria-required': required ? ('true' as const) : ('false' as const), - 'aria-invalid': validationStatus === 'error' ? ('true' as const) : ('false' as const), + ['aria-required']: required ? ('true' as const) : ('false' as const), + ['aria-invalid']: validationStatus === 'error' ? ('true' as const) : ('false' as const), onChange: handleOnChange, value, name: value, diff --git a/packages/react/src/CounterLabel/CounterLabel.tsx b/packages/react/src/CounterLabel/CounterLabel.tsx index 195593c4166..95d89e3346d 100644 --- a/packages/react/src/CounterLabel/CounterLabel.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.tsx @@ -23,8 +23,8 @@ const CounterLabel = forwardRef( const counterProps = { ref: forwardedRef, - 'aria-hidden': 'true' as const, - 'data-variant': inferredVariant, + ['aria-hidden']: 'true' as const, + ['data-variant']: inferredVariant, ...rest, } diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx index f9bcb77f107..31ee7ebcf5d 100644 --- a/packages/react/src/Overlay/Overlay.tsx +++ b/packages/react/src/Overlay/Overlay.tsx @@ -24,69 +24,6 @@ type StyledOverlayProps = { const animationDuration = 200 -const widthDataAttributes = { - small: {'data-width-small': ''}, - medium: {'data-width-medium': ''}, - large: {'data-width-large': ''}, - xlarge: {'data-width-xlarge': ''}, - xxlarge: {'data-width-xxlarge': ''}, - auto: {'data-width-auto': ''}, - undefined: {'data-width-undefined': ''}, -} - -const maxWidthDataAttributes = { - small: {'data-max-width-small': ''}, - medium: {'data-max-width-medium': ''}, - large: {'data-max-width-large': ''}, - xlarge: {'data-max-width-xlarge': ''}, - xxlarge: {'data-max-width-xxlarge': ''}, -} - -const heightDataAttributes = { - xsmall: {'data-height-xsmall': ''}, - small: {'data-height-small': ''}, - medium: {'data-height-medium': ''}, - large: {'data-height-large': ''}, - xlarge: {'data-height-xlarge': ''}, - auto: {'data-height-auto': ''}, - initial: {'data-height-initial': ''}, - 'fit-content': {'data-height-fit-content': ''}, - undefined: {'data-height-undefined': ''}, -} - -const maxHeightDataAttributes = { - xsmall: {'data-max-height-xsmall': ''}, - small: {'data-max-height-small': ''}, - medium: {'data-max-height-medium': ''}, - large: {'data-max-height-large': ''}, - xlarge: {'data-max-height-xlarge': ''}, - 'fit-content': {'data-max-height-fit-content': ''}, -} - -const visibilityDataAttributes = { - visible: {'data-visibility-visible': ''}, - hidden: {'data-visibility-hidden': ''}, - undefined: {'data-visibility-undefined': ''}, -} - -const overflowDataAttributes = { - auto: {'data-overflow-auto': ''}, - hidden: {'data-overflow-hidden': ''}, - scroll: {'data-overflow-scroll': ''}, - visible: {'data-overflow-visible': ''}, -} - -function getOverlayDataAttributes({height, maxHeight, maxWidth, overflow, visibility, width}: StyledOverlayProps) { - return { - ...widthDataAttributes[width ?? 'undefined'], - ...(maxWidth ? maxWidthDataAttributes[maxWidth] : {}), - ...heightDataAttributes[height ?? 'undefined'], - ...(maxHeight ? maxHeightDataAttributes[maxHeight] : {}), - ...visibilityDataAttributes[visibility ?? 'undefined'], - ...(overflow ? overflowDataAttributes[overflow] : {}), - } -} - function getSlideAnimationStartingVector(anchorSide?: AnchorSide): {x: number; y: number} { if (anchorSide?.endsWith('bottom')) { return {x: 0, y: -1} @@ -166,7 +103,14 @@ export const BaseOverlay = React.forwardRef( ...styleFromProps, } as React.CSSProperties } - {...getOverlayDataAttributes({height, maxHeight, maxWidth, overflow: rest.overflow, visibility, width})} + {...{ + [`data-width-${width}`]: '', + [`data-max-width-${maxWidth}`]: maxWidth ? '' : undefined, + [`data-height-${height}`]: '', + [`data-max-height-${maxHeight}`]: maxHeight ? '' : undefined, + [`data-visibility-${visibility}`]: '', + [`data-overflow-${rest.overflow}`]: rest.overflow ? '' : undefined, + }} className={clsx(className, classes.Overlay)} /> ) diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx index 8b8bdeee87b..0869b055383 100644 --- a/packages/react/src/Tooltip/Tooltip.tsx +++ b/packages/react/src/Tooltip/Tooltip.tsx @@ -18,67 +18,6 @@ export type TooltipProps = { wrap?: boolean } & React.ComponentProps<'span'> -const tooltipDirectionClasses = { - n: classes['Tooltip--n'], - ne: classes['Tooltip--ne'], - e: classes['Tooltip--e'], - se: classes['Tooltip--se'], - s: classes['Tooltip--s'], - sw: classes['Tooltip--sw'], - w: classes['Tooltip--w'], - nw: classes['Tooltip--nw'], -} - -const tooltipAlignmentClasses = { - left: classes['Tooltip--alignLeft'], - right: classes['Tooltip--alignRight'], -} - -const legacyTooltipDirectionClasses = { - n: 'tooltipped-n', - ne: 'tooltipped-ne', - e: 'tooltipped-e', - se: 'tooltipped-se', - s: 'tooltipped-s', - sw: 'tooltipped-sw', - w: 'tooltipped-w', - nw: 'tooltipped-nw', -} - -const legacyTooltipAlignmentClasses = { - left: 'tooltipped-align-left-2', - right: 'tooltipped-align-right-2', -} - -function getTooltipClasses({ - align, - className, - direction, - noDelay, - wrap, -}: { - align: TooltipProps['align'] - className: TooltipProps['className'] - direction: NonNullable - noDelay: TooltipProps['noDelay'] - wrap: TooltipProps['wrap'] -}) { - return clsx( - className, - classes.Tooltip, - tooltipDirectionClasses[direction], - align && tooltipAlignmentClasses[align], - noDelay && classes['Tooltip--noDelay'], - wrap && classes['Tooltip--multiline'], - legacyTooltipDirectionClasses[direction], - align && legacyTooltipAlignmentClasses[align], - { - 'tooltipped-no-delay': noDelay, - 'tooltipped-multiline': wrap, - }, - ) -} - /** * @deprecated */ @@ -87,7 +26,16 @@ const Tooltip = React.forwardRef(function Tooltip( ref, ) { const tooltipId = useId(id) - const tooltipClasses = getTooltipClasses({align, className, direction, noDelay, wrap}) + const tooltipClasses = clsx(className, classes.Tooltip, classes[`Tooltip--${direction}`], { + [classes[`Tooltip--align${align === 'left' ? 'Left' : 'Right'}`]]: align, + [classes['Tooltip--noDelay']]: noDelay, + [classes['Tooltip--multiline']]: wrap, + // maintaining feature parity with old classes + [`tooltipped-${direction}`]: true, + [`tooltipped-align-${align === 'left' ? 'left' : 'right'}-2`]: align, + 'tooltipped-no-delay': noDelay, + 'tooltipped-multiline': wrap, + }) const value = useMemo(() => ({tooltipId}), [tooltipId]) return ( diff --git a/packages/react/src/Truncate/Truncate.tsx b/packages/react/src/Truncate/Truncate.tsx index bf35b62808f..27630d1fc30 100644 --- a/packages/react/src/Truncate/Truncate.tsx +++ b/packages/react/src/Truncate/Truncate.tsx @@ -25,7 +25,7 @@ const Truncate = React.forwardRef(function Truncate( style={ { ...style, - '--truncate-max-width': + [`--truncate-max-width`]: typeof maxWidth === 'number' ? `${maxWidth}px` : typeof maxWidth === 'string' ? maxWidth : undefined, } as React.CSSProperties } diff --git a/packages/react/src/internal/components/Caret.tsx b/packages/react/src/internal/components/Caret.tsx index a14ac5cfbc8..742995664ed 100644 --- a/packages/react/src/internal/components/Caret.tsx +++ b/packages/react/src/internal/components/Caret.tsx @@ -45,23 +45,6 @@ function getPosition(edge: Alignment, align: Alignment | undefined, spacing: num } } -function getMarginStyle( - perpendicular: (typeof perpendicularEdge)[Alignment], - align: Alignment | undefined, - size: number, -) { - if (align) { - return {} - } - - return { - marginTop: perpendicular === 'Top' ? -size : undefined, - marginRight: perpendicular === 'Right' ? -size : undefined, - marginBottom: perpendicular === 'Bottom' ? -size : undefined, - marginLeft: perpendicular === 'Left' ? -size : undefined, - } -} - export type CaretProps = { bg?: string borderColor?: string @@ -103,7 +86,7 @@ function Caret(props: CaretProps) { ...getPosition(edge, align, size), // if align is set (top|right|bottom|left), // then we don't need an offset margin - ...getMarginStyle(perp, align, size), + [`margin${perp}`]: align ? null : -size, ...({ '--caret-bg': bg, '--caret-border-color': borderColor, diff --git a/packages/styled-react/package.json b/packages/styled-react/package.json index 7d326ee8c02..f7cfb310fdb 100644 --- a/packages/styled-react/package.json +++ b/packages/styled-react/package.json @@ -50,12 +50,12 @@ "@types/react-dom": "18.3.1", "@types/styled-components": "^5.1.26", "@vitejs/plugin-react": "^6.0.2", - "babel-plugin-react-compiler": "^1.0.0", + "babel-plugin-react-compiler": "0.0.0-experimental-a1856f3-20260507", "babel-plugin-styled-components": "2.1.4", "postcss-preset-primer": "^0.0.0", "publint": "^0.3.15", "react": "18.3.1", - "react-compiler-runtime": "^1.0.0", + "react-compiler-runtime": "0.0.0-experimental-a1856f3-20260507", "react-dom": "18.3.1", "rimraf": "^6.0.1", "rolldown": "^1.1.2", From 4473727f3c701c37524df9c66abe9894ef57e352 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 9 Jul 2026 15:10:53 -0500 Subject: [PATCH 8/8] Remove redundant compiler error guard The experimental React Compiler package now resolves consistently, so the existing CompilerError instanceof check is sufficient. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 56b531f4-215a-46cc-a593-543687336648 --- packages/react-compiler-check/src/index.ts | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/react-compiler-check/src/index.ts b/packages/react-compiler-check/src/index.ts index ab0361202b7..a41d5c6539f 100644 --- a/packages/react-compiler-check/src/index.ts +++ b/packages/react-compiler-check/src/index.ts @@ -55,7 +55,7 @@ function checkFile(filename: string, contents: string): CheckResult { try { transformSync(contents, inputOptions) } catch (error: unknown) { - if (!(error instanceof CompilerError) && !isCompilerError(error)) { + if (!(error instanceof CompilerError)) { throw error } @@ -79,18 +79,6 @@ function checkFile(filename: string, contents: string): CheckResult { } } -function isCompilerError(error: unknown): error is CompilerError { - return ( - error !== null && - typeof error === 'object' && - 'details' in error && - Array.isArray(error.details) && - error.details.every(detail => { - return detail !== null && typeof detail === 'object' && 'primaryLocation' in detail && 'reason' in detail - }) - ) -} - function addCheckError(errors: Array, error: CheckError): void { const hasError = errors.some(existingError => { return (