Skip to content

#53502 breaks @wordpress/components types on DT #53941

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sandersn opened this issue Apr 20, 2023 · 3 comments · Fixed by #53980
Closed

#53502 breaks @wordpress/components types on DT #53941

sandersn opened this issue Apr 20, 2023 · 3 comments · Fixed by #53980
Assignees
Labels
Bug A bug in TypeScript Fix Available A PR has been opened for this issue Recent Regression This is a new regression just found in the last major/minor version of TypeScript.

Comments

@sandersn
Copy link
Member

Before #53502,

<C.DropdownMenu icon="move" label="Select a direction">
    {({ onClose }) => (
        <div>
            <button onClick={onClose}>Click me</button>
        </div>
    )}
</C.DropdownMenu>;

Gave a contextual type to onClose. Now it does not. Here are some snippets of the wordpress/components code:

In dropdown-menu/index.d.ts:

declare namespace DropdownMenu {
    // ....
    interface PropsWithChildren extends BaseProps {
        /**
         * A function render prop which should return an element or elements
         * valid for use in a `DropdownMenu`: `MenuItem`, `MenuItemsChoice`, or
         * `MenuGroup`.
         */
        children(props: Dropdown.RenderProps): JSX.Element;
        controls?: never | undefined;
    }
    // .....
    type Props = PropsWithChildren | PropsWithControls;
}
declare const DropdownMenu: ComponentType<DropdownMenu.Props>;

export default DropdownMenu;

and in dropdown/index.d.ts

declare namespace Dropdown {
    // ....
    interface RenderProps {
        /**
         * Whether the dropdown menu is opened or not.
         */
        isOpen: boolean;
        /**
         * A function switching the dropdown menu's state from open to closed
         * and vice versa.
         */
        onToggle(): void;
        /**
         * A function that closes the menu if invoked.
         */
        onClose(): void;
    }
}
@sandersn
Copy link
Member Author

@Andarist you are probably interested in this too

@sandersn sandersn added this to the TypeScript 5.1.0 milestone Apr 20, 2023
@sandersn sandersn added Bug A bug in TypeScript Recent Regression This is a new regression just found in the last major/minor version of TypeScript. labels Apr 20, 2023
@Andarist
Copy link
Contributor

Ye, definitely! Thanks for the ping - I can investigate this over the weekend.

@Andarist
Copy link
Contributor

Andarist commented Apr 21, 2023

complete/standalone repro:

import * as React from "react";

declare namespace DropdownMenu {
  interface BaseProps {
    icon: string;
    label: string;
  }
  interface PropsWithChildren extends BaseProps {
    children(props: { onClose: () => void }): JSX.Element;
    controls?: never | undefined;
  }
  interface PropsWithControls extends BaseProps {
    controls: Control[];
    children?: never | undefined;
  }
  interface Control {
    title: string;
  }
  type Props = PropsWithChildren | PropsWithControls;
}
declare const DropdownMenu: React.ComponentType<DropdownMenu.Props>;

<DropdownMenu icon="move" label="Select a direction">
  {({ onClose }) => (
    <div>
      <button onClick={onClose}>Click me</button>
    </div>
  )}
</DropdownMenu>;

TS playground

The fix is to expand the logic in discriminateContextualTypeByJSXAttributes to include child jsx expression as an implicit attribute. I'm on it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug A bug in TypeScript Fix Available A PR has been opened for this issue Recent Regression This is a new regression just found in the last major/minor version of TypeScript.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants