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

[core] Improve React 19 support #15769

Merged
merged 93 commits into from
Dec 30, 2024
Merged

[core] Improve React 19 support #15769

Show file tree
Hide file tree
Changes from 59 commits
Commits
Show all changes
93 commits
Select commit Hold shift + click to select a range
93bf5ac
Bump React to ^19.0.0
renovate[bot] Dec 6, 2024
1506c31
codemod docs
JCQuintas Dec 6, 2024
c656122
Fix/update DataGrid ref usage
LukasTy Dec 9, 2024
91daf42
Fix a few more Pickers and Tree view cases
LukasTy Dec 9, 2024
914270e
Fix prettier
flaviendelangle Dec 9, 2024
4dc9d67
Fix more useref usages
LukasTy Dec 9, 2024
c62046e
Changes from `ref` react-ts-codemod
LukasTy Dec 9, 2024
a4e6a2f
Changes from `react-element` react-ts-codemod
LukasTy Dec 9, 2024
e7dc07d
docs:typescript:formatted
LukasTy Dec 9, 2024
85998ce
Run react-ts-codemods on `test` folder
LukasTy Dec 9, 2024
ddbae8e
Bump/test `@mui/material@6` to avoid `JSX` namespace errors
LukasTy Dec 9, 2024
4ca779b
Hide `JSX` namespace issues in `@react-spring`
LukasTy Dec 9, 2024
8c09a3e
Remove broken prop
LukasTy Dec 10, 2024
f652cd8
Make `fieldRef` optional param to avoid the need for `fieldRef: undef…
LukasTy Dec 10, 2024
190e37d
Use `@mui` packages with fixed `JSX` namespace
LukasTy Dec 10, 2024
be7cbc8
prettier
LukasTy Dec 10, 2024
05c307b
Fix `DateTimeRangePickerTimeWrapper` ref handling
LukasTy Dec 10, 2024
ecd1f5a
Avoid `JSX` namespace issue due to `@emotion`
LukasTy Dec 10, 2024
4b6da95
ignore specific errors while react-spring is not fixed
JCQuintas Dec 10, 2024
81c09f3
Fix docs charts TS errors
LukasTy Dec 10, 2024
9ab8ac7
Avoid `JSX` namespace issue due to `@emotion` on `@mui/x-codemod` pac…
LukasTy Dec 10, 2024
f3e6970
docs:typescript:formatted
LukasTy Dec 10, 2024
731f5dc
Revert to previous casting solution to avoid TS error
LukasTy Dec 10, 2024
ea994c8
Align `@mui/types` version to avoid data grid typing conflicts
LukasTy Dec 10, 2024
a6362d3
Explicitly type `useMultiInputFieldSelectedSections` to avoid implici…
LukasTy Dec 11, 2024
8317602
Bump react types
LukasTy Dec 11, 2024
aad5677
Fix `useNow` hook
LukasTy Dec 11, 2024
41ab3c2
Use released packages
LukasTy Dec 11, 2024
dede7d1
Add `skipLibCheck` until `@mui/joy` is released from `v5`
LukasTy Dec 11, 2024
5ef32f2
Bump `@mui/monorepo` and `@mui/docs`
LukasTy Dec 11, 2024
3bb3494
Fix browser test
LukasTy Dec 11, 2024
443e8fa
Bump `@mui/joy`
LukasTy Dec 11, 2024
b825c72
Use `rtl` API for column querying
LukasTy Dec 11, 2024
18f2912
Fix some tests by making them async
LukasTy Dec 11, 2024
37678a0
Minor cleanup
LukasTy Dec 11, 2024
f8d425b
Fix `sorting.DataGrid` test
LukasTy Dec 12, 2024
6afea09
Fix after merge
LukasTy Dec 12, 2024
09ce052
Move refs to props
LukasTy Dec 12, 2024
c243a43
Revert "Move refs to props"
LukasTy Dec 13, 2024
e0f937c
Fix `consumeThemeProps` typing to work for React 19
LukasTy Dec 13, 2024
d53daa4
fix consumeThemeProps
JCQuintas Dec 13, 2024
2850c26
Revert "fix consumeThemeProps"
JCQuintas Dec 13, 2024
bf1ea94
Refactor tests to user `userEvent`
LukasTy Dec 13, 2024
04632a8
Stabilize `data-grid-premium` tests
LukasTy Dec 13, 2024
0f41ede
Make `rowSelection.DataGridPro` tests pass
LukasTy Dec 13, 2024
2662a65
Make `rowPinning.DataGridPro` tests pass
LukasTy Dec 13, 2024
d437bc1
Stabilize flaky `DataGridPro` tests
LukasTy Dec 17, 2024
fae1f8d
Stabilize tabindex test
LukasTy Dec 17, 2024
80fd09f
Bump `@mui/internal-test-utils`
LukasTy Dec 17, 2024
87c2d9e
fix eslint
LukasTy Dec 17, 2024
6c89540
Revert "pointless" `waitFor` calls
LukasTy Dec 18, 2024
331478a
Bump @types/react
arminmeh Dec 18, 2024
61f7fa4
update docs/package.json
arminmeh Dec 19, 2024
94027c4
Update lock file
arminmeh Dec 19, 2024
f8e48f5
Fix row selection test
arminmeh Dec 19, 2024
6b4a212
Do not publish 'resize' event if the dimensions have not changed
arminmeh Dec 19, 2024
a3b032c
Revert some test changes
arminmeh Dec 19, 2024
3974d69
Fix dependencies after rebase
arminmeh Dec 24, 2024
39f276c
fix package order
arminmeh Dec 24, 2024
35506cc
Fix tests
arminmeh Dec 24, 2024
f577a75
Test cleanup
arminmeh Dec 24, 2024
e6ef9e4
Add step to disable pnpm peer deps installing on CI when react is not…
LukasTy Dec 24, 2024
3d43e6a
Fix param name
LukasTy Dec 24, 2024
52ffe7b
fix param name 2
LukasTy Dec 24, 2024
e14cbc3
Set pnpm config flag on project
LukasTy Dec 24, 2024
2e4bd1a
Use `--no-frozen-lockfile` when `with-react-version` is not `stable`
LukasTy Dec 24, 2024
08f84bf
Simplify
MBilalShafi Dec 24, 2024
7220a0b
Merge branch 'master' into renovate/major-react
MBilalShafi Dec 24, 2024
6e1070f
Fix error in CI config file
LukasTy Dec 27, 2024
a5c40a3
Remove no longer needed explicit beta version
LukasTy Dec 27, 2024
3bf257c
Setup React 18 tests to run on main branches
LukasTy Dec 27, 2024
efebb48
Test filters on individual jobs
LukasTy Dec 27, 2024
9d56411
Try
LukasTy Dec 27, 2024
caf3bd8
try 2
LukasTy Dec 27, 2024
3e8e486
Test more specific version name
LukasTy Dec 27, 2024
cdc72a2
echo params
LukasTy Dec 27, 2024
1475f33
Revert suggested fix
LukasTy Dec 27, 2024
a4c728e
Try
LukasTy Dec 27, 2024
ca32e1b
Try 3
LukasTy Dec 27, 2024
dd14eba
try 4
LukasTy Dec 27, 2024
8c71c2d
try 5
LukasTy Dec 27, 2024
46314cd
try 6
LukasTy Dec 27, 2024
1ce6f75
Try reusing config via context
LukasTy Dec 27, 2024
ed403a3
Don't run on renovate branch by default
LukasTy Dec 27, 2024
3d40915
cleanup
LukasTy Dec 27, 2024
bb0868f
Bump "MUI Core"
LukasTy Dec 27, 2024
94976e5
Allow `react-is` v18 or v19
LukasTy Dec 27, 2024
78a4dea
Merge branch 'master' into renovate/major-react
LukasTy Dec 27, 2024
4d740b7
Merge branch 'master' into renovate/major-react
LukasTy Dec 30, 2024
85bf3f5
Improve typing
LukasTy Dec 30, 2024
7187ad0
await async action
LukasTy Dec 30, 2024
636a349
Try act with curly braces
LukasTy Dec 30, 2024
4fa033c
Simplify `user.keyboard` usage
LukasTy Dec 30, 2024
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 docs/data/charts/components/ScaleDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const StyledText = styled('text')(({ theme }) => ({
shapeRendering: 'crispEdges',
}));

function ValueHighlight(props: { svgRef: React.RefObject<SVGSVGElement> }) {
function ValueHighlight(props: { svgRef: React.RefObject<SVGSVGElement | null> }) {
const { svgRef } = props;

// Get the drawing area bounding box
Expand Down
2 changes: 1 addition & 1 deletion docs/data/data-grid/filtering/CustomMultiValueOperator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ function InputNumberInterval(props) {
const rootProps = useGridRootProps();
const { item, applyValue, focusElementRef = null } = props;

const filterTimeout = React.useRef();
const filterTimeout = React.useRef(undefined);
const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
const [applying, setIsApplying] = React.useState(false);

Expand Down
2 changes: 1 addition & 1 deletion docs/data/data-grid/filtering/CustomMultiValueOperator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function InputNumberInterval(props: GridFilterInputValueProps) {
const rootProps = useGridRootProps();
const { item, applyValue, focusElementRef = null } = props;

const filterTimeout = React.useRef<any>();
const filterTimeout = React.useRef<any>(undefined);
LukasTy marked this conversation as resolved.
Show resolved Hide resolved
const [filterValueState, setFilterValueState] = React.useState<[string, string]>(
item.value ?? '',
);
Expand Down
2 changes: 1 addition & 1 deletion docs/data/data-grid/layout/MinMaxHeightGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default function MinMaxHeightGrid() {
function ContainerMeasurements({
containerRef,
}: {
containerRef: React.RefObject<HTMLDivElement>;
containerRef: React.RefObject<HTMLDivElement | null>;
}) {
const [containerHeight, setContainerHeight] = React.useState(0);

Expand Down
2 changes: 1 addition & 1 deletion docs/data/data-grid/pagination/CursorPaginationGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function CursorPaginationGrid() {
}
};

const paginationMetaRef = React.useRef();
const paginationMetaRef = React.useRef(undefined);

// Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
const paginationMeta = React.useMemo(() => {
Expand Down
2 changes: 1 addition & 1 deletion docs/data/data-grid/pagination/CursorPaginationGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default function CursorPaginationGrid() {
}
};

const paginationMetaRef = React.useRef<GridPaginationMeta>();
const paginationMetaRef = React.useRef<GridPaginationMeta>(undefined);

// Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
const paginationMeta = React.useMemo(() => {
Expand Down
2 changes: 1 addition & 1 deletion docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function ServerPaginationGridNoRowCount() {
pageInfo: { hasNextPage },
} = useQuery(paginationModel);

const paginationMetaRef = React.useRef();
const paginationMetaRef = React.useRef(undefined);

// Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
const paginationMeta = React.useMemo(() => {
Expand Down
2 changes: 1 addition & 1 deletion docs/data/data-grid/pagination/ServerPaginationGridNoRowCount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function ServerPaginationGridNoRowCount() {
pageInfo: { hasNextPage },
} = useQuery(paginationModel);

const paginationMetaRef = React.useRef<GridPaginationMeta>();
const paginationMetaRef = React.useRef<GridPaginationMeta>(undefined);

// Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
const paginationMeta = React.useMemo(() => {
Expand Down
1 change: 1 addition & 0 deletions docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ function TransitionComponent(props) {
});

return (
// @ts-expect-error
<animated.div style={style}>
<Collapse {...props} />
</animated.div>
Expand Down
1 change: 1 addition & 0 deletions docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ function TransitionComponent(props: TransitionProps) {
});

return (
// @ts-expect-error
<animated.div style={style}>
<Collapse {...props} />
</animated.div>
Expand Down
1 change: 1 addition & 0 deletions docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ function TransitionComponent(props) {
});

return (
// @ts-expect-error
<animated.div style={style}>
<Collapse {...props} />
</animated.div>
Expand Down
1 change: 1 addition & 0 deletions docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ function TransitionComponent(props: TransitionProps) {
});

return (
// @ts-expect-error
<animated.div style={style}>
<Collapse {...props} />
</animated.div>
Expand Down
24 changes: 12 additions & 12 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.14.0",
"@mui/docs": "6.2.1",
"@mui/icons-material": "^5.16.11",
"@mui/joy": "^5.0.0-beta.48",
"@mui/lab": "^5.0.0-alpha.173",
"@mui/material": "^5.16.11",
"@mui/material-nextjs": "^5.16.8",
"@mui/styles": "^5.16.11",
"@mui/system": "^5.16.8",
"@mui/utils": "^5.16.8",
"@mui/icons-material": "^5.16.12",
Copy link
Member

Choose a reason for hiding this comment

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

Bumping Core packages as they seem to fail on the individual branch due to not initialized useRef usages. 🙈
#15924

"@mui/joy": "^5.0.0-beta.51",
"@mui/lab": "^5.0.0-alpha.175",
"@mui/material": "^5.16.12",
"@mui/material-nextjs": "^5.16.12",
arminmeh marked this conversation as resolved.
Show resolved Hide resolved
"@mui/styles": "^5.16.12",
"@mui/system": "^5.16.12",
"@mui/utils": "^5.16.12",
"@mui/x-charts": "workspace:*",
"@mui/x-charts-vendor": "workspace:*",
"@mui/x-data-grid": "workspace:*",
Expand Down Expand Up @@ -81,11 +81,11 @@
"postcss": "^8.4.49",
"prismjs": "^1.29.0",
"prop-types": "^15.8.1",
"react": "^18.3.1",
"react": "^19.0.0",
"react-docgen": "^5.4.3",
"react-dom": "^18.3.1",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"react-is": "^18.3.1",
"react-is": "^19.0.0",
"react-router": "^6.28.1",
"react-router-dom": "^6.28.1",
"react-runner": "^1.0.5",
Expand Down Expand Up @@ -114,7 +114,7 @@
"@types/moment-hijri": "^2.1.4",
"@types/moment-jalaali": "^0.7.9",
"@types/prop-types": "^15.7.14",
"@types/react-dom": "^18.3.5",
"@types/react-dom": "^19.0.2",
"@types/react-router-dom": "^5.3.3",
"@types/stylis": "^4.2.7",
"@types/webpack-bundle-analyzer": "^4.7.0",
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/PickersPlayground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
{ label: 'Reset', getValue: () => [null, null] },
];

function DisabledCheckboxTooltip({ children }: { children: React.ReactElement }) {
function DisabledCheckboxTooltip({ children }: { children: React.ReactElement<any> }) {
return (
<Tooltip title="At least one view has to be provided to the components">{children}</Tooltip>
);
Expand Down
6 changes: 3 additions & 3 deletions docs/src/modules/utils/useCustomizationPlayground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@ export type PickersSubcomponentType = {
[k: string]: {
examples: CustomizationItemsType;
slots: string[];
moreInformation?: React.ReactElement | string;
moreInformation?: React.ReactElement<any> | string;
};
};

export interface UseCustomizationPlaygroundProps {
examples: PickersSubcomponentType;
children?: React.ReactElement | React.ReactElement[];
children?: React.ReactElement<any> | React.ReactElement<any>[];
componentName: string;
}
export const customizationLabels: CustomizationLabelType = {
Expand Down Expand Up @@ -72,7 +72,7 @@ export type UseCustomizationPlaygroundReturnType = {
handleTokenChange: HandleTokenChangeType;
selectedTokens: StyleTokensType;
selectedExample?: CustomizationItemType | null;
moreInformation?: React.ReactElement | string | null;
moreInformation?: React.ReactElement<any> | string | null;
};

export function withStyles(
Expand Down
18 changes: 9 additions & 9 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,13 +90,13 @@
"@emotion/cache": "^11.14.0",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^5.16.11",
"@mui/icons-material": "^5.16.12",
"@mui/internal-babel-plugin-resolve-imports": "1.0.19",
"@mui/internal-markdown": "^1.0.22",
"@mui/internal-test-utils": "^1.0.23",
"@mui/material": "^5.16.11",
"@mui/monorepo": "github:mui/material-ui#0ea1ef5241dae88c1f0ca093a4ff4f02a267fa60",
"@mui/utils": "^5.16.8",
"@mui/material": "^5.16.12",
"@mui/monorepo": "github:mui/material-ui#356d5dffbcbc1c18b5ab8060a173ea7a3e90b58c",
"@mui/utils": "^5.16.12",
"@next/eslint-plugin-next": "15.1.2",
"@octokit/plugin-retry": "^7.1.2",
"@octokit/rest": "^21.0.2",
Expand All @@ -110,8 +110,8 @@
"@types/lodash": "^4.17.13",
"@types/mocha": "^10.0.10",
"@types/node": "^20.17.10",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"@types/requestidlecallback": "^0.3.7",
"@types/sinon": "^17.0.3",
"@types/yargs": "^17.0.33",
Expand Down Expand Up @@ -178,8 +178,8 @@
"prettier": "^3.4.2",
"pretty-quick": "^4.0.0",
"process": "^0.11.10",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
Comment on lines +181 to +182
Copy link
Member

Choose a reason for hiding this comment

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

We should probably still test CI on react 18 though. It doesn't seem like (props) => <div ref={props.ref}> can work on react 18 without the forwardRef, but it works properly in 19.

19: https://codesandbox.io/p/sandbox/react-19-hws42c

18: https://codesandbox.io/p/sandbox/react-18-htw6s7

Copy link
Member

Choose a reason for hiding this comment

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

Oh yeah, that is a great idea.
I was just not sure if we should do it in the same PR as this is already big...
But I think that given the circumstances, at least for some time, we should run both react 19 and 18 on CI. 🤔

Copy link
Member

Choose a reason for hiding this comment

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

I also need to setup periodic tests with React 18 on the core repo. Let me know if someone starts working on this on the X side 😊.

Copy link
Contributor

Choose a reason for hiding this comment

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

I did not test it out
but technically, this should allow you running additional workflows with R18
https://github.com/mui/mui-x/blob/master/test/README.md#ci

Better is off course to have it automated, but could be useful until that is set up

"remark": "^15.0.1",
"rimraf": "^6.0.1",
"serve": "^14.2.4",
Expand All @@ -197,7 +197,7 @@
"yargs": "^17.7.2"
},
"resolutions": {
"react-is": "^18.3.1",
"react-is": "^19.0.0",
"@types/node": "^20.17.10"
},
"packageManager": "[email protected]",
Expand Down
4 changes: 2 additions & 2 deletions packages/x-charts-pro/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,8 @@
}
},
"devDependencies": {
"@mui/material": "^5.16.11",
"@mui/system": "^5.16.8",
"@mui/material": "^5.16.12",
"@mui/system": "^5.16.12",
"@react-spring/core": "^9.7.5",
"@react-spring/shared": "^9.7.5",
"@types/prop-types": "^15.7.14",
Expand Down
3 changes: 2 additions & 1 deletion packages/x-charts-pro/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
"mocha",
"node"
],
"noImplicitAny": false
"noImplicitAny": false,
"skipLibCheck": true
Copy link
Member

Choose a reason for hiding this comment

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

Added these to avoid @emotion errors.
We should be able to remove them once @emotion adds support for React 19.
Reference: emotion-js/emotion#3291, emotion-js/emotion#3271

},
"include": ["src/**/*", "../../test/utils/addChaiAssertions.ts"]
}
8 changes: 4 additions & 4 deletions packages/x-charts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"@react-spring/web": "^9.7.5",
"clsx": "^2.1.1",
"prop-types": "^15.8.1",
"react-is": "^18.3.1",
"react-is": "^19.0.0",
LukasTy marked this conversation as resolved.
Show resolved Hide resolved
"reselect": "^5.1.1",
"use-sync-external-store": "^1.4.0"
},
Expand All @@ -69,12 +69,12 @@
},
"devDependencies": {
"@mui/internal-test-utils": "^1.0.23",
"@mui/material": "^5.16.11",
"@mui/system": "^5.16.8",
"@mui/material": "^5.16.12",
"@mui/system": "^5.16.12",
"@react-spring/core": "^9.7.5",
"@react-spring/shared": "^9.7.5",
"@types/prop-types": "^15.7.14",
"@types/react-is": "^18.3.1",
"@types/react-is": "^19.0.0",
"@types/use-sync-external-store": "^0.0.6",
"csstype": "^3.1.3",
"rimraf": "^6.0.1"
Expand Down
1 change: 1 addition & 0 deletions packages/x-charts/src/BarChart/AnimatedBarElement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export function AnimatedBarElement(props: BarProps) {
return (
<animated.rect
{...other}
// @ts-expect-error
filter={ownerState.isHighlighted ? 'brightness(120%)' : undefined}
cherniavskii marked this conversation as resolved.
Show resolved Hide resolved
opacity={ownerState.isFaded ? 0.3 : 1}
/>
Expand Down
1 change: 1 addition & 0 deletions packages/x-charts/src/LineChart/AnimatedArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ function AnimatedArea(props: AnimatedAreaProps) {
<AppearingMask skipAnimation={skipAnimation} id={`${ownerState.id}-area-clip`}>
{transitionChange((style, interpolator) => (
<animated.path
// @ts-expect-error
d={style.value.to(interpolator)}
fill={ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color}
filter={
Expand Down
1 change: 1 addition & 0 deletions packages/x-charts/src/LineChart/AnimatedLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ function AnimatedLine(props: AnimatedLineProps) {
<AppearingMask skipAnimation={skipAnimation} id={`${ownerState.id}-line-clip`}>
{transitionChange((style, interpolator) => (
<animated.path
// @ts-expect-error
d={style.value.to(interpolator)}
stroke={ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color}
strokeWidth={2}
Expand Down
1 change: 1 addition & 0 deletions packages/x-charts/src/LineChart/AppearingMask.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export function AppearingMask(props: AppearingMaskProps) {
<clipPath id={clipId}>
{transitionAppear((style) => (
<animated.rect
// @ts-expect-error
x={0}
y={0}
width={style.animatedWidth}
Expand Down
1 change: 1 addition & 0 deletions packages/x-charts/src/LineChart/CircleMarkElement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ function CircleMarkElement(props: CircleMarkElementProps) {
return (
<animated.circle
{...other}
// @ts-expect-error
cx={position.x}
cy={position.y}
r={5}
Expand Down
1 change: 1 addition & 0 deletions packages/x-charts/src/LineChart/MarkElement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ function MarkElement(props: MarkElementProps) {
transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`),
}}
ownerState={ownerState}
// @ts-expect-error
className={classes.root}
d={d3Symbol(d3SymbolsFill[getSymbol(shape)])()!}
onClick={onClick}
Expand Down
1 change: 1 addition & 0 deletions packages/x-charts/src/PieChart/PieArc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ function PieArc(props: PieArcProps) {
})!,
)}
visibility={to([startAngle, endAngle], (sA, eA) => (sA === eA ? 'hidden' : 'visible'))}
// @ts-expect-error
onClick={onClick}
cursor={onClick ? 'pointer' : 'unset'}
ownerState={ownerState}
Expand Down
1 change: 1 addition & 0 deletions packages/x-charts/src/PieChart/PieArcLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ function PieArcLabel(props: PieArcLabelProps) {
const classes = useUtilityClasses(ownerState);

return (
// @ts-expect-error
<PieArcLabelRoot
className={classes.root}
{...other}
Expand Down
9 changes: 1 addition & 8 deletions packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,14 +199,7 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(
axisHighlight?.y === 'none'
}
>
{plotType === 'bar' && (
<BarPlot
skipAnimation
slots={slots}
slotProps={slotProps}
sx={{ shapeRendering: 'auto' }}
/>
)}
{plotType === 'bar' && <BarPlot skipAnimation slots={slots} slotProps={slotProps} />}
JCQuintas marked this conversation as resolved.
Show resolved Hide resolved

{plotType === 'line' && (
<React.Fragment>
Expand Down
2 changes: 1 addition & 1 deletion packages/x-charts/src/context/ChartProvider/ChartProvider.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export type ChartContextValue<
/**
* The ref to the <svg />.
*/
svgRef: React.RefObject<SVGSVGElement>;
svgRef: React.RefObject<SVGSVGElement | null>;
};

// export interface ChartProviderProps<TSignatures extends readonly ChartAnyPluginSignature[]> {
Expand Down
2 changes: 1 addition & 1 deletion packages/x-charts/src/context/SizeProvider/Size.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export interface SizeContextState extends Required<Pick<SizeProviderProps, 'heig
/**
* The ref of the svg element that the chart is rendered in.
*/
svgRef: React.RefObject<SVGSVGElement>;
svgRef: React.RefObject<SVGSVGElement | null>;
/**
* If the chart has a defined size.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/x-charts/src/hooks/useSvgRef.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import * as React from 'react';
import { useChartContext } from '../context/ChartProvider';

export function useSvgRef(): React.RefObject<SVGSVGElement> {
export function useSvgRef(): React.RefObject<SVGSVGElement | null> {
const context = useChartContext();

if (!context) {
Expand Down
2 changes: 1 addition & 1 deletion packages/x-charts/src/internals/consumeThemeProps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export const consumeThemeProps = <
| ((props: Props) => Omit<Partial<Props>, 'slots' | 'slotProps'>);
classesResolver?: (props: Props, theme: any) => Record<string, string>;
},
InComponent: React.JSXElementConstructor<Props>,
InComponent: React.ForwardRefRenderFunction<any, Props>,
) => {
function InternalComponent(props: React.PropsWithoutRef<Props>, ref: React.Ref<any>) {
const themedProps = useThemeProps({
Expand Down
Loading
Loading