From 55bd8dfb14830c0dee16fad7800455ecccad650e Mon Sep 17 00:00:00 2001 From: Yong Jie Wong Date: Sat, 7 Sep 2024 03:09:13 +0800 Subject: [PATCH] Target React 18. --- package.json | 26 ++-- .../ComboboxMultuSelect.tsx | 4 +- src/@next/Tag/Tag.stories.tsx | 2 +- src/@next/Tooltip/Tooltip.tsx | 3 +- src/Input/DownshiftSelect/Select.tsx | 1 + src/Input/Select/Select.test.tsx | 8 +- src/Input/ToggleSwitch/ToggleSwitch.tsx | 4 +- src/Utils/DelayedUnmount.tsx | 1 + yarn.lock | 116 ++++++++---------- 9 files changed, 77 insertions(+), 88 deletions(-) diff --git a/package.json b/package.json index 475ad9636..1af8404b8 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "module": "./es/index.js", "sideEffects": false, "engines": { - "node": ">=14" + "node": ">=16" }, "scripts": { "build": "npm run build:icon && npm run build:next:icon && npm run build:lib && npm run build:es && npm run build:ts", @@ -79,10 +79,10 @@ "@types/jest": "^27.4.1", "@types/lodash": "^4.14.188", "@types/lodash-es": "^4.17.6", - "@types/node": "^12.12.7", - "@types/react": "^17.0.37", - "@types/react-dom": "^17.0.11", - "@types/react-test-renderer": "^17.0.1", + "@types/node": "^16.18.108", + "@types/react": "^18.3.5", + "@types/react-dom": "^18.3.0", + "@types/react-test-renderer": "^18.3.0", "@types/styled-components": "^5.1.1", "@types/styled-system": "^5.1.10", "@typescript-eslint/eslint-plugin": "^5.6.0", @@ -116,10 +116,10 @@ "lodash": "^4.17.21", "lodash-es": "^4.17.21", "prettier": "^3.0.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-is": "^17.0.2", - "react-test-renderer": "^17.0.2", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-is": "^18.3.1", + "react-test-renderer": "^18.3.1", "start-server-and-test": "^1.15.2", "styled-components": "^5.1.1", "stylelint": "^10.0.1", @@ -143,8 +143,8 @@ }, "peerDependencies": { "lodash-es": "^4.0.0", - "react": "^17", - "react-dom": "^17", + "react": "^17 || ^18", + "react-dom": "^17 || ^18", "styled-components": "^4.0.0 || ^5.0.0" }, "jest": { @@ -167,9 +167,7 @@ "@glints/poppins": "^1.0.2" }, "resolutions": { - "immer": "^9.0.6", - "@types/react": "^17.0.37", - "@types/react-dom": "^17.0.11" + "immer": "^9.0.6" }, "lint-staged": { "**/*.{ts,tsx}": [ diff --git a/src/@next/Combobox/comboboxStoryHelper/ComboboxMultuSelect.tsx b/src/@next/Combobox/comboboxStoryHelper/ComboboxMultuSelect.tsx index 9e79d1952..ea629325c 100644 --- a/src/@next/Combobox/comboboxStoryHelper/ComboboxMultuSelect.tsx +++ b/src/@next/Combobox/comboboxStoryHelper/ComboboxMultuSelect.tsx @@ -13,7 +13,7 @@ export const ComboboxMultiSelect = ({ ...args }: ComboboxMultiSelectProps) => { const [inputValue, setInputValue] = useState(''); - const [selectedOptions, setSelectedOptions] = useState([]); + const [selectedOptions, setSelectedOptions] = useState([]); const [isSearchEmpty, setIsSearchEmpty] = useState(false); const [options, setOptions] = useState(countries); @@ -58,7 +58,7 @@ export const ComboboxMultiSelect = ({ : null; const removeTag = useCallback( - tag => () => { + (tag: string) => () => { const options = [...selectedOptions]; options.splice(options.indexOf(tag), 1); setSelectedOptions(options); diff --git a/src/@next/Tag/Tag.stories.tsx b/src/@next/Tag/Tag.stories.tsx index 155930eb9..06c1744f9 100644 --- a/src/@next/Tag/Tag.stories.tsx +++ b/src/@next/Tag/Tag.stories.tsx @@ -78,7 +78,7 @@ const RemoveableTemplate: Story = () => { ]); const removeTag = useCallback( - tag => () => { + (tag: string) => () => { setSelectedTags(previousTags => previousTags.filter(previousTag => previousTag !== tag) ); diff --git a/src/@next/Tooltip/Tooltip.tsx b/src/@next/Tooltip/Tooltip.tsx index 42d99e039..cab421816 100644 --- a/src/@next/Tooltip/Tooltip.tsx +++ b/src/@next/Tooltip/Tooltip.tsx @@ -140,7 +140,8 @@ const tooltipPositionResolvers: Record< }, }; -export interface TooltipProps extends React.HTMLAttributes { +export interface TooltipProps + extends Omit, 'content'> { preferredPosition?: TooltipPosition; children: React.ReactNode; content: React.ReactNode; diff --git a/src/Input/DownshiftSelect/Select.tsx b/src/Input/DownshiftSelect/Select.tsx index bc755e582..08343d850 100644 --- a/src/Input/DownshiftSelect/Select.tsx +++ b/src/Input/DownshiftSelect/Select.tsx @@ -29,6 +29,7 @@ export const defaultEmptyListText = // sometimes we want to make additional props available to the subcomponent, // e.g. a Item subcomponent needs to know the item it represents. export type ItemProps = { + children?: React.ReactNode; item: Item; }; diff --git a/src/Input/Select/Select.test.tsx b/src/Input/Select/Select.test.tsx index c466eb249..3025c2d6a 100644 --- a/src/Input/Select/Select.test.tsx +++ b/src/Input/Select/Select.test.tsx @@ -363,11 +363,9 @@ describe('when renderError is given', () => { }); it('should render the custom error in the custom error container', () => { - const customError = () => ( - nasty error - ); - const errorContainer = (e: () => React.ReactNode) => ( -
{e()}
+ const customError = nasty error; + const errorContainer = (e: React.ReactNode) => ( +
{e}
); const { container, getByTestId } = render(