EdgeTrigger type error

[dca123]

Using <EdgeTrigger> with typescript results with the following type error on latest mui packages - 5.8.2

Type '(collapsed: any, setCollapsed: (arg0: boolean) => void) => JSX.Element' is not assignable to type '((string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null) & ((state: boolean, setState: (newState: boolean) => void) => ReactNode)) | undefined'.
  Type '(collapsed: any, setCollapsed: (arg0: boolean) => void) => JSX.Element' is not assignable to type 'string & ((state: boolean, setState: (newState: boolean) => void) => ReactNode)'.
    Type '(collapsed: any, setCollapsed: (arg0: boolean) => void) => JSX.Element' is not assignable to type 'string'.ts(2322)
index.d.ts(1373, 9): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & MUIStyledCommonProps<Theme> & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ClassAttributes<...> | keyof HTMLAttributes<...>> & { ...; }'

The tutorial as described asks to install packages as such yarn add @mui/material@next @mui/icons-material@next @emotion/styled @emotion/react @mui-treasury/layout@next @mui-treasury/mockup@next which will install the following versions.

• @mui/icons-material": "^5.0.0-rc.1"
• @mui/material": "^5.0.0-rc.1"

This type error does not exist for this version.

From what I'm able to understand, the type errors comes from here

//node_modules/@mui-treasury/layout/EdgeSidebar/EdgeTrigger.d.ts
export declare type EdgeTriggerProps = Parameters<typeof EdgeTriggerRoot>[0] & {
    target: {
        anchor?: DrawerAnchor;
        field: "open" | "collapsed";
    };
    display?: string;
    children?: (state: boolean, setState: (newState: boolean) => void) => ReactNode;
};

My solution that i've patched in has been to omit the child parameter like this

//node_modules/@mui-treasury/layout/EdgeSidebar/EdgeTrigger.d.ts

export declare type EdgeTriggerProps = Omit<Parameters<typeof EdgeTriggerRoot>[0], "children"> & {
    target: {
        anchor?: DrawerAnchor;
        field: "open" | "collapsed";
    };
    display?: string;
    children?: (state: boolean, setState: (newState: boolean) => void) => ReactNode;
};

I'm not sure if this is the best solution and I'm open to suggestions. If this looks good, I can start a PR for this.

During the yarn patch process, I also had to change

"resolutions": {
    "@mui-treasury/layout@5.0.1-alpha": "patch:@mui-treasury/layout@npm:5.0.1-alpha.0#.yarn/patches/@mui-treasury-layout-npm-5.0.1-alpha.0-d5e934c6c4.patch"
  }

to

"resolutions": {
    "@mui-treasury/layout": "patch:@mui-treasury/layout@npm:5.0.1-alpha.0#.yarn/patches/@mui-treasury-layout-npm-5.0.1-alpha.0-d5e934c6c4.patch"
  }

which allowed for the patch to be applied.

Cheers,

[rym002]

This is due to @types/react@18. If you use @types/react@17 it works. I would like to know the solution to making it work with 18.

[dca123]

@rym002 while i've been unable to do a proper fix as the package itself uses react 17, the solution explained above should allow you to patch this.

[rym002]

I used your fix in a file custom-typings.d.ts to work around it. The fix can probably work with react 17 also.

[gremo]

Same problem here, I fixed using:

<EdgeTrigger target={{ anchor: 'left', field: 'open' }} sx={{ mr: 2 }}>
  {/* @ts-ignore */}
  {(open, setOpen) => (
    <IconButton color='inherit' edge='start' onClick={() => setOpen(!open)}>
      {open ? <ArrowLeft /> : <MenuIcon />}
    </IconButton>
  )}
</EdgeTrigger>