Upgrade react-beautiful-dnd to v13

[LeonY1]

Summary

Closes #2427

I am updating the react-beautiful-dnd and @types/react-beautiful-dnd dependencies.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[cla-checker-service]

💚 CLA has been signed

[LeonY1]

@chandlerprall I have now uploaded the version with the issue.

[chandlerprall]

@LeonY1 pushed directly to your branch to get those tests fixed:

• The code in EuiCodeBlock I referred to for testing wasn't the right section,

  eui/src/components/code/code_block.test.tsx

  Lines 94 to 136 in 11d0a47

  	describe('dynamic content', () => {
  	it('updates DOM when input changes', done => {
  	expect.assertions(2);
  	function takeSnapshot() {
  	expect(
  	html.prettyPrint(appDiv.innerHTML, {
  	indent_size: 2,
  	unformatted: [], // Expand all tags, including spans
  	})
  	).toMatchSnapshot();
  	}
  	// enzyme does not recreate enough of the React<->DOM interaction to reproduce this bug
  	const appDiv = document.createElement('div');
  	function App() {
  	const [value, setValue] = useState('State 1');
  	useEffect(() => {
  	takeSnapshot();
  	setValue('State 2');
  	}, []);
  	useEffect(() => {
  	if (value === 'State 2') {
  	takeSnapshot();
  	done();
  	}
  	}, [value]);
  	return (
  	<div>
  	<EuiCodeBlock language="javascript">
  	const value = &apos;{value}&apos;
  	</EuiCodeBlock>
  	</div>
  	);
  	}
  	ReactDOM.render(<App />, appDiv);
  	});
  	});

  was what I should have directed you to
• Those tests need to use ReactDOM to mount the component into an element contained by global.document, as react-beautiful-dnd looks for them there after mount
• resetServerContext is needed to reset dnd's internal state so the two tests can be run together or independently

[LeonY1]

Okay thanks for the help!

[LeonY1]

@chandlerprall This should be ready to be merged. Let me know if I need to fix anything extra

[myasonik]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3064/

[thompsongl]

This is great!

Tested functionality and everything appears to be in order.

With the move from dependencies to peerDependecies, this constitutes a breaking change. We'll need to mark it so in the changelog

[LeonY1]

@thompsongl I have moved it to the Breaking Changes section.

[thompsongl]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3064/

[thompsongl]

After more investigation, we're not going to make RBD a peerDep.

I'll update the branch for you, @LeonY1, as I lead you down the wrong path.

[thompsongl]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3064/

[thompsongl]

Thanks for your work on this, @LeonY1!