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.

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

chore: framer-motion v11 #6462

2 changes: 1 addition & 1 deletion packages/ibm-products/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
"@dnd-kit/sortable": "^8.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@ibm/telemetry-js": "^1.5.0",
"framer-motion": "^6.5.1 < 7",
"framer-motion": "^11.11.17",
"immutability-helper": "^3.1.1",
"lodash": "^4.17.21",
"lottie-web": "^5.12.2",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ const FilterSummary = React.forwardRef(
[`${blockClass}__expanded`]: multiline,
})}
>
<AnimatePresence exitBeforeEnter>
<AnimatePresence mode="wait">
{!multiline && renderTagSet('single')}
{multiline && renderTagSet('multiline')}
</AnimatePresence>
Expand Down
48 changes: 23 additions & 25 deletions packages/ibm-products/src/components/SidePanel/SidePanel.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,11 @@
* LICENSE file in the root directory of this source tree.
*/

import {
fireEvent,
render,
screen,
act,
waitFor,
} from '@testing-library/react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { expectMultipleError } from '../../global/js/utils/test-helper';

import React from 'react';
import React, { act } from 'react';
import { Button, TextInput, AILabel, AILabelContent } from '@carbon/react';
import { pkg } from '../../settings';
import uuidv4 from '../../global/js/utils/uuidv4';
Expand Down Expand Up @@ -189,7 +183,7 @@ describe('SidePanel', () => {
`.${blockClass}__close-button`
);
await act(() => userEvent.click(closeIconButton));
rerender(<SlideIn placement="left" open={false} />);
await act(() => rerender(<SlideIn placement="left" open={false} />));
const updatedStyles = getComputedStyle(pageContent);
expect(updatedStyles.marginInlineStart).toBe('0');
});
Expand All @@ -204,9 +198,9 @@ describe('SidePanel', () => {
);
const outerElement = container.querySelector(`.${blockClass}`);
await act(() => userEvent.click(closeIconButton));
fireEvent.animationStart(outerElement);
rerender(<SlideIn placement="right" open={false} />);
fireEvent.animationEnd(outerElement);
await act(() => fireEvent.animationStart(outerElement));
await act(() => rerender(<SlideIn placement="right" open={false} />));
await act(() => fireEvent.animationEnd(outerElement));
const updatedStyles = getComputedStyle(pageContent);
expect(updatedStyles.marginInlineEnd).toBe('0');
expect(onUnmountFn).toHaveBeenCalled();
Expand All @@ -229,9 +223,11 @@ describe('SidePanel', () => {
);
const outerElement = container.querySelector(`.${blockClass}`);
await act(() => userEvent.click(closeIconButton));
fireEvent.animationStart(outerElement);
fireEvent.animationEnd(outerElement);
rerender(<SlideIn animateTitle={false} placement="right" open={false} />);
await act(() => fireEvent.animationStart(outerElement));
await act(() => fireEvent.animationEnd(outerElement));
await act(() =>
rerender(<SlideIn animateTitle={false} placement="right" open={false} />)
);
const updatedStyles = getComputedStyle(pageContent);
expect(updatedStyles.marginInlineEnd).toBe('0');
});
Expand All @@ -245,16 +241,18 @@ describe('SidePanel', () => {
);
const overlayElement = container.querySelector(`.${blockClass}__overlay`);
await act(() => userEvent.click(closeIconButton));
rerender(
<SidePanel
title={title}
includeOverlay
open={false}
onRequestClose={onRequestCloseFn}
id="sidepanel-id"
>
Content
</SidePanel>
await act(() =>
rerender(
<SidePanel
title={title}
includeOverlay
open={false}
onRequestClose={onRequestCloseFn}
id="sidepanel-id"
>
Content
</SidePanel>
)
);
setTimeout(() => {
expect(overlayElement).not.toBeInTheDocument();
Expand Down
Loading
Loading