diff --git a/eslint.config.mjs b/eslint.config.mjs index c5471d7f..960ed842 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -35,6 +35,8 @@ export default tseslint.config( { files: [ '*.{js,mjs,cjs}', + 'packages/react-dropdown-select/babel.*.js', + 'packages/react-dropdown-select/jest.setup.js', 'packages/react-dropdown-select/scripts/**/*.{js,mjs,cjs}', 'packages/react-dropdown-select/webpack.config.js', 'packages/docs-site/vite.config.js', diff --git a/packages/docs-site/package.json b/packages/docs-site/package.json index 39852910..3bda4dbe 100644 --- a/packages/docs-site/package.json +++ b/packages/docs-site/package.json @@ -18,16 +18,16 @@ "prettier:write": "prettier --write src" }, "dependencies": { - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.2.8", + "react-dom": "^19.2.8", "react-router-dom": "^7.18.2", "react-syntax-highlighter": "^16.1.1", "react-dropdown-select": "workspace:*" }, "devDependencies": { "@tailwindcss/vite": "^4.3.2", - "@types/react": "^18.3.31", - "@types/react-dom": "^18.3.7", + "@types/react": "^19.2.18", + "@types/react-dom": "^19.2.4", "@types/react-syntax-highlighter": "^15.5.13", "@vitejs/plugin-react": "^4.7.0", "eslint": "^10.8.0", diff --git a/packages/react-dropdown-select/.storybook/stories/Select.stories.js b/packages/react-dropdown-select/.storybook/stories/Select.stories.js index 58a91fb4..ad4ab77f 100644 --- a/packages/react-dropdown-select/.storybook/stories/Select.stories.js +++ b/packages/react-dropdown-select/.storybook/stories/Select.stories.js @@ -1,10 +1,10 @@ import React from 'react'; -import { Select } from '../../src'; +import { Select, defaultProps as selectDefaultProps } from '../../src'; import { optionsBase } from './options'; const options = optionsBase(10); const baseArgs = { - ...Select.defaultProps, + ...selectDefaultProps, options, multi: false, onChange: (values) => console.log(values), diff --git a/packages/react-dropdown-select/__tests__/__snapshots__/index.spec.js.snap b/packages/react-dropdown-select/__tests__/__snapshots__/index.spec.js.snap index f5d8081e..4a6f5edf 100644 --- a/packages/react-dropdown-select/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/react-dropdown-select/__tests__/__snapshots__/index.spec.js.snap @@ -1,13 +1,38 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` is disabled 1`] = ` -
+
component component component renders correctly 1`] = ` onKeyDown={[Function]} placeholder="Select..." readOnly={false} + ref={ + { + "current": { + "blur": [Function], + "focus": [Function], + "scrollIntoView": [Function], + }, + } + } style={ { "--input-size": 9, @@ -105,13 +173,38 @@ exports[` renders correctly 1`] = ` `; exports[` renders with clearable 1`] = ` -
+
component component component renders with custom search function 1`] = onKeyDown={[Function]} placeholder="Select..." readOnly={false} + ref={ + { + "current": { + "blur": [Function], + "focus": [Function], + "scrollIntoView": [Function], + }, + } + } style={ { "--input-size": 3, @@ -217,13 +353,38 @@ exports[` renders with custom search function 1`] = `; exports[` renders with loading 1`] = ` -
+
component component component renders with name 1`] = ` onKeyDown={[Function]} placeholder="Select..." readOnly={false} + ref={ + { + "current": { + "blur": [Function], + "focus": [Function], + "scrollIntoView": [Function], + }, + } + } style={ { "--input-size": 9, @@ -332,13 +536,38 @@ exports[` renders with name 1`] = ` `; exports[` renders with separator 1`] = ` -
+
component component component renders with short color 1`] = ` onKeyDown={[Function]} placeholder="Select..." readOnly={false} + ref={ + { + "current": { + "blur": [Function], + "focus": [Function], + "scrollIntoView": [Function], + }, + } + } style={ { "--input-size": 9, diff --git a/packages/react-dropdown-select/__tests__/components/Clear.spec.js b/packages/react-dropdown-select/__tests__/components/Clear.spec.js index 625ca0dd..d1cf6858 100644 --- a/packages/react-dropdown-select/__tests__/components/Clear.spec.js +++ b/packages/react-dropdown-select/__tests__/components/Clear.spec.js @@ -29,30 +29,42 @@ describe(' component', () => { }); it(' renders correctly', () => { - const tree = TestRenderer.create().toJSON(); + let renderer; + TestRenderer.act(() => { + renderer = TestRenderer.create(); + }); + const tree = renderer.toJSON(); expect(tree).toMatchSnapshot(); }); it('onClick clears all', () => { - TestRenderer.create() - .root.findByProps({ className: 'react-dropdown-select-clear' }) - .props.onClick(); + let instance; + TestRenderer.act(() => { + instance = TestRenderer.create( + , + ); + }); + instance.root.findByProps({ className: 'react-dropdown-select-clear' }).props.onClick(); expect(spy).toHaveBeenCalled; }); it('onKeyDown clears all', () => { const clearSpy = jest.fn(); - TestRenderer.create( - , - ) - .root.findByProps({ className: 'react-dropdown-select-clear' }) + let instance; + TestRenderer.act(() => { + instance = TestRenderer.create( + , + ); + }); + instance.root + .findByProps({ className: 'react-dropdown-select-clear' }) .props.onKeyDown({ key: 'Enter' }); expect(clearSpy).toHaveBeenCalled; diff --git a/packages/react-dropdown-select/__tests__/components/Content.spec.js b/packages/react-dropdown-select/__tests__/components/Content.spec.js index 702be8b8..d01f23b8 100644 --- a/packages/react-dropdown-select/__tests__/components/Content.spec.js +++ b/packages/react-dropdown-select/__tests__/components/Content.spec.js @@ -45,9 +45,12 @@ describe(' component', () => { }); it(' renders correctly', () => { - const tree = TestRenderer.create().toJSON(); + let tree; + TestRenderer.act(() => { + tree = TestRenderer.create(); + }); - expect(tree).toMatchSnapshot(); + expect(tree.toJSON()).toMatchSnapshot(); }); it('onClick opens dropdown', () => { diff --git a/packages/react-dropdown-select/__tests__/components/Dropdown.spec.js b/packages/react-dropdown-select/__tests__/components/Dropdown.spec.js index c720da51..166a949b 100644 --- a/packages/react-dropdown-select/__tests__/components/Dropdown.spec.js +++ b/packages/react-dropdown-select/__tests__/components/Dropdown.spec.js @@ -26,7 +26,10 @@ const props = { }; it(' renders correctly', () => { - const tree = renderer.create().toJSON(); + let tree; + renderer.act(() => { + tree = renderer.create(); + }); - expect(tree).toMatchSnapshot(); + expect(tree.toJSON()).toMatchSnapshot(); }); diff --git a/packages/react-dropdown-select/__tests__/components/DropdownHandle.spec.js b/packages/react-dropdown-select/__tests__/components/DropdownHandle.spec.js index 3f7f8871..dcb39015 100644 --- a/packages/react-dropdown-select/__tests__/components/DropdownHandle.spec.js +++ b/packages/react-dropdown-select/__tests__/components/DropdownHandle.spec.js @@ -31,23 +31,30 @@ describe(' component', () => { }); it(' renders correctly', () => { - const tree = TestRenderer.create().toJSON(); + let instance; + TestRenderer.act(() => { + instance = TestRenderer.create(); + }); - expect(tree).toMatchSnapshot(); + expect(instance.toJSON()).toMatchSnapshot(); }); it('onClick toggles dropdown', () => { - TestRenderer.create() - .root.findByType('div') - .props.onClick(); + let instance; + TestRenderer.act(() => { + instance = TestRenderer.create(); + }); + instance.root.findByType('div').props.onClick(); expect(spy).toHaveBeenCalled; }); it('onKeyDown toggles dropdown', () => { - TestRenderer.create() - .root.findByType('div') - .props.onKeyDown(); + let instance; + TestRenderer.act(() => { + instance = TestRenderer.create(); + }); + instance.root.findByType('div').props.onKeyDown(); expect(spy).toHaveBeenCalled; }); diff --git a/packages/react-dropdown-select/__tests__/components/Input.spec.js b/packages/react-dropdown-select/__tests__/components/Input.spec.js index 80cf3281..02784c12 100644 --- a/packages/react-dropdown-select/__tests__/components/Input.spec.js +++ b/packages/react-dropdown-select/__tests__/components/Input.spec.js @@ -23,13 +23,19 @@ const props = (props = {}) => ({ }); it(' renders correctly', () => { - const tree = renderer.create().toJSON(); + let instance; + renderer.act(() => { + instance = renderer.create(); + }); - expect(tree).toMatchSnapshot(); + expect(instance.toJSON()).toMatchSnapshot(); }); it(' is disabled', () => { - const tree = renderer.create().toJSON(); + let instance; + renderer.act(() => { + instance = renderer.create(); + }); - expect(tree).toMatchSnapshot(); + expect(instance.toJSON()).toMatchSnapshot(); }); diff --git a/packages/react-dropdown-select/__tests__/components/Item.spec.js b/packages/react-dropdown-select/__tests__/components/Item.spec.js index 3f7292ab..dc883816 100644 --- a/packages/react-dropdown-select/__tests__/components/Item.spec.js +++ b/packages/react-dropdown-select/__tests__/components/Item.spec.js @@ -28,64 +28,79 @@ describe(' component', () => { }); test('renders correctly', () => { - const tree = TestRenderer.create().toJSON(); + let renderer; + TestRenderer.act(() => { + renderer = TestRenderer.create(); + }); + const tree = renderer.toJSON(); expect(tree).toMatchSnapshot(); }); test('onChange with click', () => { const addItemSpy = jest.fn(); - TestRenderer.create( - undefined, addItem: addItemSpy }, - })} - />, - ) - .root.findByType('span') - .props.onClick(); + let instance; + TestRenderer.act(() => { + instance = TestRenderer.create( + undefined, addItem: addItemSpy }, + })} + />, + ); + }); + instance.root.findByType('span').props.onClick(); expect(addItemSpy).toHaveBeenCalled; }); test('onChange with key press', () => { const addItemSpy = jest.fn(); - TestRenderer.create( - undefined, addItem: addItemSpy }, - })} - />, - ) - .root.findByType('span') - .props.onKeyDown({ key: 'Enter' }); + let instance; + TestRenderer.act(() => { + instance = TestRenderer.create( + undefined, addItem: addItemSpy }, + })} + />, + ); + }); + instance.root.findByType('span').props.onKeyDown({ key: 'Enter' }); expect(addItemSpy).toHaveBeenCalled; }); test('keepSelectedInList: false', () => { - const tree = TestRenderer.create( - true, - }, - })} - />, - ).toJSON(); + let tree; + TestRenderer.act(() => { + tree = TestRenderer.create( + true, + }, + })} + />, + ).toJSON(); + }); }); test('pass item renderer', () => { - const tree = TestRenderer.create( -
item
})} />, - ).toJSON(); + let renderer; + TestRenderer.act(() => { + renderer = TestRenderer.create( +
item
})} />, + ); + }); + const tree = renderer.toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/react-dropdown-select/__tests__/components/Loading.spec.js b/packages/react-dropdown-select/__tests__/components/Loading.spec.js index f71bc26c..32fa337a 100644 --- a/packages/react-dropdown-select/__tests__/components/Loading.spec.js +++ b/packages/react-dropdown-select/__tests__/components/Loading.spec.js @@ -13,7 +13,10 @@ const props = { }; it(' renders correctly', () => { - const tree = renderer.create().toJSON(); + let tree; + renderer.act(() => { + tree = renderer.create(); + }); - expect(tree).toMatchSnapshot(); + expect(tree.toJSON()).toMatchSnapshot(); }); diff --git a/packages/react-dropdown-select/__tests__/components/NoData.spec.js b/packages/react-dropdown-select/__tests__/components/NoData.spec.js index 4d864144..d27022b0 100644 --- a/packages/react-dropdown-select/__tests__/components/NoData.spec.js +++ b/packages/react-dropdown-select/__tests__/components/NoData.spec.js @@ -13,7 +13,10 @@ const props = { }; it(' renders correctly', () => { - const tree = renderer.create().toJSON(); + let instance; + renderer.act(() => { + instance = renderer.create(); + }); - expect(tree).toMatchSnapshot(); + expect(instance.toJSON()).toMatchSnapshot(); }); diff --git a/packages/react-dropdown-select/__tests__/components/Option.spec.js b/packages/react-dropdown-select/__tests__/components/Option.spec.js index 6a665838..e4da83fe 100644 --- a/packages/react-dropdown-select/__tests__/components/Option.spec.js +++ b/packages/react-dropdown-select/__tests__/components/Option.spec.js @@ -35,15 +35,21 @@ describe('