Skip to content

Fix TS issue in DroppableContainer #326

@brionmario

Description

@brionmario

Describe the issue:

There's a TS issue in the render props of the DroppableContainer when used with TypeScript.

No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & { component?: ElementType; } & Omit<BoxProps<"div", {}>, "component"> & { children: (props: { dragHandlers: DragHandlers; getDragItemProps: GetDragItemProps; nodes: any[]; }) => ReactNode; nodes: any[]; onOrderChange?: (newOrder: any[]) => void; } & BoxOwnProps<...> & CommonProps & Omit<...>): Element', gave the following error.
    Type '({ nodes, getDragItemProps }: { nodes: PolicyInterface[]; getDragItemProps: GetDragItemProps; }) => JSX.Element[]' is not assignable to type 'ReactNode & ((props: { dragHandlers: DragHandlers; getDragItemProps: GetDragItemProps; nodes: any[]; }) => ReactNode)'.
      Type '({ nodes, getDragItemProps }: { nodes: PolicyInterface[]; getDragItemProps: GetDragItemProps; }) => JSX.Element[]' is not assignable to type 'string & ((props: { dragHandlers: DragHandlers; getDragItemProps: GetDragItemProps; nodes: any[]; }) => ReactNode)'.
        Type '({ nodes, getDragItemProps }: { nodes: PolicyInterface[]; getDragItemProps: GetDragItemProps; }) => JSX.Element[]' is not assignable to type 'string'.
  Overload 2 of 2, '(props: DefaultComponentProps<BoxTypeMap<DroppableContainerProps<ElementType>, "div", Theme>>): Element', gave the following error.
    Type '({ nodes, getDragItemProps }: { nodes: PolicyInterface[]; getDragItemProps: GetDragItemProps; }) => JSX.Element[]' is not assignable to type 'ReactNode & ((props: { dragHandlers: DragHandlers; getDragItemProps: GetDragItemProps; nodes: any[]; }) => ReactNode)'.
      Type '({ nodes, getDragItemProps }: { nodes: PolicyInterface[]; getDragItemProps: GetDragItemProps; }) => JSX.Element[]' is not assignable to type 'string & ((props: { dragHandlers: DragHandlers; getDragItemProps: GetDragItemProps; nodes: any[]; }) => ReactNode)'.
        Type '({ nodes, getDragItemProps }: { nodes: PolicyInterface[]; getDragItemProps: GetDragItemProps; }) => JSX.Element[]' is not assignable to type 'string'.ts(2769)
Box.d.ts(185, 3): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & { component: ElementType<any>; } & { component?: ElementType; } & Omit<BoxProps<"div", {}>, "component"> & { ...; } & BoxOwnProps<...> & CommonProps & Omit<...>'
Box.d.ts(185, 3): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & { component?: ElementType; } & Omit<BoxProps<"div", {}>, "component"> & { children: (props: { dragHandlers: DragHandlers; getDragItemProps: GetDragItemProps; nodes: any[]; }) => ReactNode; nodes: any[]; onOrderChange?: (newOrder: any[]) => void; } & BoxOwnProps<...> & CommonProps & Omit<...>

How to reproduce:

  • Use the DroppableContainer in a TS file.

Expected behavior:

There shouldn't be any TS issues.

Additional context :

  • Affected Package:
    • @oxygen-ui/logger
    • @oxygen-ui/primitives
    • @oxygen-ui/react
    • @oxygen-ui/react-icons
  • Library Version: [e.g., 1.10.0, 2.0.0-alpha]
  • OS:
    • Windows
    • Linux
    • Mac
    • Other
  • Browser:
    • Google Chrome
    • Firefox
    • Safari
    • Microsoft Edge
    • Brave
    • Opera
    • Other

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions