Skip to content
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.

Sign up for GitHub

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

Update types and props for compatibility with React 18 #7150

Merged
merged 17 commits into from
Jan 11, 2025
Merged

Update types and props for compatibility with React 18 #7150

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
77bf286
Fix compile break in SVGIconContainer
ggdouglas Jan 9, 2025
713b2ec
Fix compile break on React.createElement in ContextMenu
ggdouglas Jan 9, 2025
c72409c
Fix compile break in EntityTitle
ggdouglas Jan 9, 2025
e47d9f6
Fix compile break in HotkeysProps
ggdouglas Jan 9, 2025
67a68f9
Fix compile break on Icon
ggdouglas Jan 9, 2025
8234337
Fix compile break in Overlay
ggdouglas Jan 9, 2025
c638cbe
Fix compile break from missing children in ColumnHeaderProps
ggdouglas Jan 9, 2025
bc14833
Fix compile break caused by ResizeHandle in HeaderCell
ggdouglas Jan 9, 2025
e1b374c
Use inferred return type for DatePicker3Caption
ggdouglas Jan 9, 2025
c9aa576
Add missing placeholder prop to HTMLSelect props
ggdouglas Jan 9, 2025
074b795
Specify type in SegmentedControlExample to avoid implicit any
ggdouglas Jan 9, 2025
5508c77
Revert "Fix compile break in SVGIconContainer"
ggdouglas Jan 10, 2025
0c815e9
Revert "Fix compile break on Icon"
ggdouglas Jan 10, 2025
f503549
Specify argument type on getClassNameFromHeading
ggdouglas Jan 10, 2025
fd385b9
Prefer direct children type declaration in HotkeysProps
ggdouglas Jan 10, 2025
21a62fc
Prefer direct children type declaration in HeaderProps
ggdouglas Jan 10, 2025
b086803
Switch to React.ReactNode for HotkeysProps children declaration
ggdouglas Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/core/src/components/context-menu/contextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = React.forwardRef<any, Con
) : (
<>
{maybePopover}
{React.createElement<React.HTMLAttributes<any>>(
{React.createElement<React.HTMLAttributes<any> & React.ClassAttributes<any>>(
tagName,
{
className: containerClassName,
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/entity-title/entityTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ EntityTitle.displayName = `${DISPLAYNAME_PREFIX}.EntityTitle`;
/**
* Construct header class name from H{*}. Returns `undefined` if `heading` is not a Blueprint heading.
*/
function getClassNameFromHeading(heading: React.FC<unknown>) {
function getClassNameFromHeading(heading: React.FC<any>) {
gluxon marked this conversation as resolved.
Show resolved Hide resolved
const headerIndex = [H1, H2, H3, H4, H5, H6].findIndex(header => header === heading);
if (headerIndex < 0) {
return undefined;
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/hotkeys/hotkeys.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { H4 } from "../html/html";

import { Hotkey, type HotkeyProps } from "./hotkey";

export interface HotkeysProps extends Props {
export interface HotkeysProps extends Props, React.PropsWithChildren<object> {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we're expecting children to be React.ReactElement<HotkeyProps>. Should we use that type over object?

blueprint/packages/core/src/components/hotkeys/hotkeys.tsx

Line 57 in 0c815e9

(child: React.ReactElement<HotkeyProps>) => child.props,

Or was the goal to preserve the same type definition of HotkeyProps and avoid compile breaks on consumers?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one is a nitpick, but I've personally been avoiding React.PropsWithChildren<...> since I see the React docs usually write the children prop directly.

https://react.dev/learn/typescript#typing-children

Having the children prop directly in the interface also makes it easier to add a JSDoc on the field.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fd385b9

/**
* In order to make local hotkeys work on elements that are not normally
* focusable, such as `<div>`s or `<span>`s, we add a `tabIndex` attribute
Expand Down
3 changes: 3 additions & 0 deletions packages/core/src/components/html-select/htmlSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@ export interface HTMLSelectProps

/** Controlled value of this component. */
value?: string | number;

/** Placeholder text to display when no option is selected. */
placeholder?: string;
}

// this component is simple enough that tests would be purely tautological.
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/overlay/overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export class Overlay extends AbstractPureComponent<OverlayProps, OverlayState> {
});
}

private maybeRenderChild = (child?: React.ReactNode) => {
private maybeRenderChild = (child?: React.ReactNode | (() => React.ReactNode)) => {
if (isFunction(child)) {
child = child();
}
Expand Down
2 changes: 1 addition & 1 deletion packages/datetime2/src/components/react-day-picker/datePicker3Caption.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import { DatePicker3Context } from "../date-picker3/datePicker3Context";
*
* @see https://daypicker.dev/guides/custom-components
*/
export const DatePicker3Caption: React.FC<CaptionProps> = props => {
export const DatePicker3Caption = (props: CaptionProps) => {
const { classNames: rdpClassNames, formatters, fromDate, toDate, labels } = useDayPicker();
const { locale, reverseMonthAndYearMenus } = React.useContext(DatePicker3Context);

Expand Down
5 changes: 4 additions & 1 deletion packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ import { type Size, SizeSelect } from "./common/sizeSelect";

export const SegmentedControlExample: React.FC<ExampleProps> = props => {
const [intent, setIntent] = React.useState<SegmentedControlIntent>("none");
const handleIntentChange = React.useCallback(newIntent => setIntent(newIntent as SegmentedControlIntent), []);
const handleIntentChange = React.useCallback(
(newIntent: string) => setIntent(newIntent as SegmentedControlIntent),
[],
);

const [fill, setFill] = React.useState<boolean>(false);
const [inline, setInline] = React.useState<boolean>(false);
Expand Down
2 changes: 1 addition & 1 deletion packages/table/src/headers/columnHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export interface ColumnWidths {
defaultColumnWidth: number;
}

export interface ColumnHeaderProps extends HeaderProps, ColumnWidths, ColumnIndices {
export interface ColumnHeaderProps extends React.PropsWithChildren<HeaderProps>, ColumnWidths, ColumnIndices {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: Similar comment around potentially writing the children field directly.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

21a62fc

/**
* A ColumnHeaderRenderer that, for each `<Column>`, will delegate to:
* 1. The `columnHeaderCellRenderer` method from the `<Column>`
Expand Down
3 changes: 1 addition & 2 deletions packages/table/src/headers/headerCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import * as React from "react";
import { ContextMenu, Classes as CoreClasses, Utils as CoreUtils, type Props } from "@blueprintjs/core";

import * as Classes from "../common/classes";
import type { ResizeHandle } from "../interactions/resizeHandle";

export interface HeaderCellProps extends Props {
children?: React.ReactNode;
Expand Down Expand Up @@ -66,7 +65,7 @@ export interface HeaderCellProps extends Props {
/**
* A `ResizeHandle` React component that allows users to drag-resize the header.
*/
resizeHandle?: ResizeHandle;
resizeHandle?: React.JSX.Element;

/**
* CSS styles for the top level element.
Expand Down