[Popper] Incompatible props: `onResize` and `onResizeCapture`

[mbmx10]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Use dependencies @mui/lab:.0.0-alpha.110 and @mui/material:5.10.16
2. Render a Autocomplete Component with property PopperComponent={popperProps => <Popper {...popperProps} />

Current behavior 😯

Typescript error: Type '{ anchorEl: HTMLDivElement | undefined; style: { width: number | undefined; }; key?: Key | null | undefined; className?: string | undefined; component?: "div" | undefined; ... 268 more ...; sx?: SxProps<...> | undefined; }' is missing the following properties from type 'Pick<PopperProps, "key" | "className" | "style" | "component" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 265 more ... | "onResizeCapture">': onResize, onResizeCapture

PopperUnstyledOwnProps in mui/base does not provide the onResize and onResizeCapture props picked by the mui/material Popper components props

Expected behavior 🤔

No Typescript error

Context 🔦

We have to pin @mui/material to version 5.10.15 in order to build our project even though we would prefer to do minor upgrades automatically.

Workaround

See https://github.com/mui/material-ui/issues/35287#issuecomment-1337250566.

Your environment 🌎

System: OS: Linux 5.10 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish) Binaries: Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node Yarn: 3.2.0 - ~/.nvm/versions/node/v16.18.1/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm Browsers: Chrome: Not Found Firefox: 106.0.2 npmPackages: @emotion/react: 11.10.5 @emotion/styled: 11.10.5 @mui/base: 5.0.0-alpha.108 @mui/core-downloads-tracker: 5.10.16 @mui/icons-material: 5.10.16 @mui/lab: 5.0.0-alpha.110 @mui/material: 5.10.16 @mui/private-theming: 5.10.16 @mui/styled-engine: 5.10.16 @mui/styles: 5.10.16 @mui/system: 5.10.16 @mui/types: 7.2.2 @mui/utils: 5.10.16 @types/react: ^17.0.44 => 17.0.52 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ~4.6.4 => 4.6.4

[thibaultadet]

I have the same issue on Popper and Timeline components after updating Mui packages to latest version:

• "@mui/icons-material": "^5.10.16"
• "@mui/lab": "^5.0.0-alpha.110"
• "@mui/material": "^5.10.16"
• "@mui/styles": "^5.10.16"

same Typescript error: Type '{ children: Element[]; sx: { p: number; }; }' is missing the following properties from type 'Pick<TimelineProps, "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | ... 252 more ... | "onResizeCapture">': nonce, onResize, onResizeCapture

[heath-freenome]

Definitely wasn't expecting a patch release to blow up my build... getting this:

node_modules/@mui/material/Popper/Popper.d.ts:36:73 - error TS2344: Type '"key" | "id" | "open" | "color" | "container" | "transition" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | ... 256 more ... | "componentsProps"' does not satisfy the constraint '"key" | "id" | "open" | "color" | "container" | "transition" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | ... 255 more ... | "componentsProps"'.
  Type '"onResize"' is not assignable to type '"key" | "id" | "open" | "color" | "container" | "transition" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | ... 255 more ... | "componentsProps"'. Did you mean '"onReset"'?

36 declare const Popper: React.ForwardRefExoticComponent<Pick<PopperProps, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "components" | "container" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots" | "componentsProps"> & React.RefAttributes<HTMLDivElement>>;

[hortizgarrido]

I am on the same boat

[IdoiaRojo]

Same here

[IdoiaRojo]

Not working either with 5.10.15 or 5.10.14

[Primajin]

<Popper
  onResize={undefined}
  onResizeCapture={undefined}
  ...
/>

will mitigate the issue until future fix 😉

Although this might throw in your tests:

Warning: Unknown event handler property `onResizeCapture`. It will be ignored.

😕

[IdoiaRojo]

In my case the problem is that I can't even build the project using vite.js, I'm not using directly Popper

[Primajin]

@IdoiaRojo If you don't use Popper, this also happens on Timeline and probably other components though.

[RyanBarclay]

Can confirm I am seeing this on popper when bumping versions up between this version of MUI

5.10.16

    "@mui/icons-material": "5.10.16",
    "@mui/material": "5.10.16",
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
    "@mui/styles": "5.10.16",
    "@mui/x-date-pickers": "5.0.9", 

src/components/elements/PopperMenu/index.tsx:37:6 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<Pick<PopperProps, "children" | "style" | "title" | "slot" | "id" | "color" | "key" | "components" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 262 more ... | "onResizeCapture"> & RefAttributes<...>, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: Element; placement: Placement | undefined; open: boolean; anchorEl: any; ref: Ref<any>; }' is missing the following properties from type 'Omit<Omit<Pick<PopperProps, "children" | "style" | "title" | "slot" | "id" | "color" | "key" | "components" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 262 more ... | "onResizeCapture"> & RefAttributes<...>, never> & Partial<...>, "theme">': nonce, onResize, onResizeCapture
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<ForwardRefExoticComponent<Pick<PopperProps, "children" | "style" | "title" | "slot" | "id" | "color" | "key" | "components" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 262 more ... | "onResizeCapture"> & RefAttributes<...>>, DefaultTheme, {}, never, ForwardRefExoticComponent<...>>): ReactElement<...>', gave the following error.
    Type '{ children: Element; placement: Placement | undefined; open: boolean; anchorEl: any; ref: Ref<any>; }' is missing the following properties from type 'Omit<Omit<Pick<PopperProps, "children" | "style" | "title" | "slot" | "id" | "color" | "key" | "components" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 262 more ... | "onResizeCapture"> & RefAttributes<...>, never> & Partial<...>, "theme">': nonce, onResize, onResizeCapture

37     <Popper

5.10.15

    "@mui/icons-material": "5.10.15",
    "@mui/material": "5.10.15",
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
    "@mui/styles": "5.10.15",
    "@mui/x-date-pickers": "5.0.9",

yarn run v1.22.19
$ tsc -p tsconfig.test.json
✨  Done in 35.37s.

I.E. a patch release w/ no release note about Breaking changes should be hot fixed/prioritized with the last minor being reverted and rereleased to not break auto bumping from builds.

[RyanBarclay]

@michaldudak @oliviertassinari Just wanted to bump this because you have a bit of context w/ Popper/Autocomplete component in (https://github.com/mui/material-ui/pull/35160)

This blew up a few of our CI's because this break was updated in the latest patch release.

[m4theushw]

Could you upgrade @types/react to latest version (v18.0.25) and check if the error is gone? These onResize and onResizeCapture were added recently in https://github.com/DefinitelyTyped/DefinitelyTyped/pull/63076. My guess is that because of this change MUI only works now with @types/react: ^18.0.25.

[JonasDoe]

Could you upgrade @types/react to latest version (v18.0.25) and check if the error is gone? These onResize and onResizeCapture were added recently in DefinitelyTyped/DefinitelyTyped#63076. My guess is that because of this change MUI only works now with @types/react: ^18.0.25.

Couldn't test it b/c that requires react 18. Speaking for us, we're not there yet, and just made it to MUI 5 (more ore less). But at least when updating to @types/react v17.0.52 (the latest for react 17) the problem remains.

[ZeeshanTamboli]

Tagging @mui/core since it looks like a high priority issue. I am not certain if it's related to #35273. Also not sure what's the fix but I think we need to support latest version of @types/react for React 17 as well. It would be compatible for MUI users using React 17.

[michaldudak]

I'm looking into it.

[michaldudak]

I understand it occurs only when using React 17, right? I wasn't able to reproduce it using 18 (https://codesandbox.io/s/agitated-mestorf-eheb0b?file=/src/App.tsx).

[michaldudak]

It seems that the issue is caused by a type mismatch between @types/react@17 and @types/react@18. As a workaround, you can add the following module augmentation code to your projects:

declare global {
  namespace React {
    interface DOMAttributes<T> {
      onResize?: ReactEventHandler<T> | undefined;
      onResizeCapture?: ReactEventHandler<T> | undefined;
      nonce?: string | undefined;
    }
  }
}

Solving this "properly" is a pickle, to be honest. Apparently DefinitelyTyped can't add these two fields to React 17 typings, because they are only supported in 18. We may have to live with this workaround for longer, unfortunately.

[JonasDoe]

Minor addition: I had to do the same approach with the nonce property, i.e. declaring nonce?: string | undefined;, which probably not the cleanest way since DOMAttribute doesn't come with that property at all.

[olliebatch]

Just to help ^ this also occurs on react 18 unless using the latest react/types - upgrading that removed this for me

[cherniavskii]

@michaldudak

How about using @types/react@18 with react@17 as an alternative solution to this issue? Are there any downsides to this?

[Primajin]

How about using @types/react@18 with react@17 as an alternative solution to this issue? Are there any downsides to this? -- @cherniavskii

For me they were incompatible

[cherniavskii]

@Primajin By "incompatible" do you mean that new TS errors appeared elsewhere in the project? Or something else?

[xandris]

This problem hurts my brain. If you're using type definitions only in React 18 it's understandable, we all have to upgrade. If you're not, then we shouldn't have to except tsc expands keyofs. If it didn't expand the keyofs, then those resize event props wouldn't be there, depending on which React is available. By expanding the keyofs, it makes MUI's types consistent everywhere, regardless of which React is available, so even if you could stop tsc from expanding, would you want to? But then they're still inconsistent in user code because user code is pulling in \@types/react\@17. 😵 I think we'll update to React 18

[michaldudak]

How about using @types/react@18 with react@17 as an alternative solution to this issue? Are there any downsides to this?

Technically it may work, but you'd get types for a library you don't use, which may be confusing at best (or you won't be able to type-check a valid program). The workaround I proposed also introduces attributes that don't exist at runtime, but it only does it for these two attributes. I don't know how many differences are there between types of React 17 and 18, but I bet there are more than just these two attributes.

---

@eps1lon, as a maintainer of React types, do you have any ideas on how to best resolve this issue?

[Primajin]

@Primajin By "incompatible" do you mean that new TS errors appeared elsewhere in the project? Or something else? -- @cherniavskii

No I meant when you bump types to 18 but everything else is 17 you get npm errors:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [my-project]
npm WARN Found: @types/react@17.0.52
npm WARN node_modules/@types/react
npm WARN   dev @types/react@"^18.0.26" from the root project
npm WARN   16 more (@mui/base, @mui/icons-material, @mui/lab, @mui/material, ...)

[...]

[the-mgi]

having the same issue, for popper and autocomplete popper, doing undefined for now. i am using the version of mui with react v18 and have types for that accordingly as mui versions i am using

System: OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish) Binaries: Node: 18.8.0 - ~/.nvm/versions/node/v18.8.0/bin/node Yarn: 1.22.19 - ~/.yarn/bin/yarn npm: 8.18.0 - ~/.nvm/versions/node/v18.8.0/bin/npm Browsers: Chrome: 108.0.5359.94 Firefox: Not Found npmPackages: @emotion/react: ^11.9.3 => 11.10.5 @emotion/styled: ^11.9.3 => 11.10.5 @mui/base: 5.0.0-alpha.108 @mui/core-downloads-tracker: 5.10.16 @mui/icons-material: ^5.10.2 => 5.10.16 @mui/material: ^5.9.2 => 5.10.16 @mui/private-theming: 5.10.16 @mui/styled-engine: 5.10.16 @mui/system: 5.10.16 @mui/types: 7.2.2 @mui/utils: 5.10.16 @mui/x-data-grid: ^5.15.0 => 5.17.14 @mui/x-date-pickers: ^5.0.1 => 5.0.9 @types/react: 18.0.15 => 18.0.15 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: 4.7.4 => 4.7.4

[cherniavskii]

@Primajin Do you know what dependency requires @types/react@17? react@17 does not require it, and @mui/material requires either v17 or v18

[eps1lon]

Does anybody have a minimal repro for that? Ideally a TypeScript playground but a git repo works as well. Please reduce it to as little code as possible.

[xandris]

@eps1lon How about this? https://github.com/xandris/mui-35287

[cjones26]

@michaldudak any update on this issue? I'm guessing we are just going to have to use the workaround for now?

[kurtwaldowski-echelon]

To reiterate for those who can upgrade: it works on React 18 (18.2.0) along with the latest version of @types/react (18.0.26)

[samihamine]

Same here, works fine with React 18.2.0 and @types/react 18.0.26. Thanks @kurtwaldowski-echelon

[michaldudak]

AFAIK this has always worked on React 18. The problem only appears on React 17. We don't have any fixes so far. The code posted in this issue is the best workaround we can think of at the moment.

[Semigradsky]

Should react 17 be removed from supported versions? Or this workaround (https://github.com/mui/material-ui/issues/35287#issuecomment-1337250566) should be added to mui code?

[JonasDoe]

Should react 17 be removed from supported versions? Or this workaround (#35287 (comment)) should be added to mui code?

Please don't remove React 17. It's complex enough to migrate a bigger project to MUI 5, enforcing a major version upgrade on React renders gentle migration impossible.

[michaldudak]

We're not planning to remove support for React 17.

[Vilyak]

There is a more elegant solution to this problem if you don't want to declare the module globally.

steps: 1) declare an explicitly "undefined" values <Popper {...props} nonce={undefined} onResize={undefined} onResizeCapture={undefined}>

2) in the typescript configuration (tsconfig), add the option => "skipLibCheck": true. { "compilerOptions": { ...otherProps, "skipLibCheck": true }, }

just before that, read in the documentation what this property (skipLibCheck) does exactly. I always use this option, so it's not a problem for me.

BINGO

[secretwpn]

Same here, works fine with React 18.2.0 and @types/react 18.0.26. Thanks @kurtwaldowski-echelon

I can't confirm that unfortunately. I am using React 18.2.0 and @types/react 18.0.26 and the problem is still present

[checomendoza]

In my case update @types/react (18.0.26) and solved it

[utkarsh22garg]

Even after the fix suggested, I am getting the following error:

node_modules/.pnpm/@mui+material@5.11.6_763p2eqimn3lswywm454q3fr5q/node_modules/@mui/material/Popper/Popper.d.ts(36,73): error TS2344: Type '"key" | "id" | "open" | "color" | "container" | "transition" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | ... 257 more ... | "componentsProps"' does not satisfy the constraint '"key" | "id" | "open" | "color" | "container" | "transition" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | ... 256 more ... | "componentsProps"'.
  Type '"onResize"' is not assignable to type '"key" | "id" | "open" | "color" | "container" | "transition" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | ... 256 more ... | "componentsProps"'. Did you mean '"onReset"'?
Done with exit code 2

Any ideas what might be wrong ?

[oliviertassinari]

I'm coming to this issue from https://github.com/backstage/backstage/issues/7094#issuecomment-1375413970

@michaldudak From what I understand, we can solve this:

1. The regression started with 5.10.16. So we can diff Popper/Popper.d.ts with 5.10.15. The diff is like this:

declare const Popper: React.ForwardRefExoticComponent<
  Pick<
    PopperProps,
    'hidden' |
    'color' |
+   'onResize' |
+   'onResizeCapture' |
+   'nonce'
  > &
    React.RefAttributes<HTMLDivElement>
>;

https://unpkg.com/browse/@mui/material@5.10.16/Popper/Popper.d.ts

2. But why is there all of this Pick<> in the first place? The exposed type looks slow to process for TypeScript as well. It was simple in https://unpkg.com/browse/@mui/material@5.0.0/Popper/Popper.d.ts v5.0.0
3. So why not do?

diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx
index 41c7433467..b66b9a8494 100644
--- a/packages/mui-material/src/Popper/Popper.tsx
+++ b/packages/mui-material/src/Popper/Popper.tsx
@@ -67,7 +67,7 @@ const Popper = React.forwardRef(function Popper(
       ref={ref}
     />
   );
-});
+}) as ((props: PopperProps) => JSX.Element) & { propTypes?: any };

 Popper.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

I think that this was one of the reasons why we had manually authored types .d.ts before. Now, we could have conventions on this:

1. Never leave TypeScript to come up with its own returned type for a function, e.g.

diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
index e212f701ac..9fc73749b4 100644
--- a/packages/mui-base/src/FocusTrap/FocusTrap.tsx
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
@@ -131,7 +131,7 @@ function defaultIsEnabled(): boolean {
  *
  * - [FocusTrap API](https://mui.com/base/api/focus-trap/)
  */
-function FocusTrap(props: FocusTrapProps) {
+function FocusTrap(props: FocusTrapProps): JSX.Element {
   const {
     children,
     disableAutoFocus = false,

2. Have .types file name convention
3. Have a xxComponent type naming convention, e.g. https://github.com/mui/mui-x/blob/ddf48588617350998b154eda4074c8a49691d1d4/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx#L52

[michaldudak]

I'm happy to try.

Folks, could you please install Material UI from https://pkg.csb.dev/mui/material-ui/commit/05fd9443/@mui/material (in package.json dependencies, replace whatever version of Material UI you have with "@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/05fd9443/@mui/material") and let me know if the problem still exists.

I've created a sandbox in which it seems to work fine, but I'd be grateful for feedback from your applications.

[MartinYankovPP]

Hello, I have quickly install it and run npm run type-check in my project. It works, doesn't appear any type check in Popper element like before. Thank you!

My version of react is : 17.0.2

[MartinYankovPP]

Sorry, I'm not a familiar with the development workflow here and would like to ask when is expected to be release ?

[alleksei37]

Same here, works fine with React 18.2.0 and @types/react 18.0.26. Thanks @kurtwaldowski-echelon

I can't confirm that unfortunately. I am using React 18.2.0 and @types/react 18.0.26 and the problem is still present

I also wasn't able to fix the problem with @types/react 18.0.26 at first but knowing that the TS compiler in VS Code is stubborn at times I restarted VS Code and the problem has gone now.

[JonasDoe]

"@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/05fd9443/@mui/material"

Works for me with react v17.0.2! Great job!

[mx-bernhard]

"@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/05fd9443/@mui/material"

Looks good in our project. We're using react v17.0.2 as well. I am a colleague of @mbmx10

[michaldudak]

I made some additional changes. Could you please once again verify the build? The latest bits are available at https://pkg.csb.dev/mui/material-ui/commit/ff29f383/@mui/material

Sorry, I'm not a familiar with the development workflow here and would like to ask when is expected to be release ?

@MartinYankovPP once the PR is approved, I'll merge it, and it'll land in the next release. We usually release new versions on Mondays, so there's a chance it'll be the next one.

[JonasDoe]

https://pkg.csb.dev/mui/material-ui/commit/ff29f383/@mui/material

Haven't done much testing, but tsc says everything is fine. :+1:

[MartinYankovPP]

I made some additional changes. Could you please once again verify the build? The latest bits are available at https://pkg.csb.dev/mui/material-ui/commit/ff29f383/@mui/material

Sorry, I'm not a familiar with the development workflow here and would like to ask when is expected to be release ?

@MartinYankovPP once the PR is approved, I'll merge it, and it'll land in the next release. We usually release new versions on Mondays, so there's a chance it'll be the next one.

Thanks, the new commit also looks good to me. At least doesn't make any problems for the build.

[RobinTail]

I think that Pick causes this issue, mentioning properties that are not supposed to be there in React 17.

The type declaration using Pick looks crazy to me. Perhaps, instead of picking so much, you could just omit something you don't wanna be there?

Would it be possible to rewrite the type declaration using Omit instead of Pick?

from Timeline.d.ts: declare const Timeline: React.ForwardRefExoticComponent<Pick<TimelineProps, "slot" | "style" | "title" | "hidden" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "position" | "sx"> & React.RefAttributes<HTMLUListElement>>;