@griddo/ax 12.4.0 → 12.5.1

package/src/__tests__/modules/Sites/SitesList/ListView/BulkHeader/BulkHeader.test.tsx

@@ -17,28 +17,35 @@ import { defaultStore } from "./../../../../../../__mocks__/store/GenericStore";
 afterEach(cleanup);
 
 const store = configureStore([thunk])(defaultStore);
-const defaultProps = mock<IBulkHeaderProps>();
+// El escenario base es el que el primer test dejaba en el objeto compartido y
+// del que el segundo dependía sin declararlo.
+const makeProps = (overrides: Partial<IBulkHeaderProps> = {}): IBulkHeaderProps =>
+	Object.assign(
+		mock<IBulkHeaderProps>(),
+		{
+			showBulk: false,
+			checkState: { isAllSelected: false, indeterminate: false },
+			filterValues: {
+				order: [{ value: "lastAccess-desc", label: "lastAccess-desc" }],
+				liveStatus: [{ value: "all", label: "All" }],
+			},
+			sortedListStatus: {
+				isAscending: false,
+				sortedByTitle: false,
+				sortedByLastAccess: true,
+				sortedByDateCreated: false,
+			},
+			totalItems: 22,
+		},
+		overrides,
+	);
 
 describe("BulkHeader component rendering", () => {
 	it("should render table header", async () => {
-		defaultProps.showBulk = false;
-		defaultProps.checkState = { isAllSelected: false, indeterminate: false };
-		defaultProps.filterValues = {
-			order: [{ value: "lastAccess-desc", label: "lastAccess-desc" }],
-			liveStatus: [{ value: "all", label: "All" }],
-		};
-		defaultProps.sortedListStatus = {
-			isAscending: false,
-			sortedByTitle: false,
-			sortedByLastAccess: true,
-			sortedByDateCreated: false,
-		};
-		defaultProps.totalItems = 22;
-
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<BulkHeader {...defaultProps} />
+					<BulkHeader {...makeProps({ showBulk: false })} />
 				</ThemeProvider>,
 				{ store },
 			);
@@ -48,12 +55,10 @@ describe("BulkHeader component rendering", () => {
 	});
 
 	it("should render bulk header", async () => {
-		defaultProps.showBulk = true;
-
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<BulkHeader {...defaultProps} />
+					<BulkHeader {...makeProps({ showBulk: true })} />
 				</ThemeProvider>,
 				{ store },
 			);

package/src/__tests__/modules/Sites/SitesList/SitesList.test.tsx

@@ -12,7 +12,7 @@ import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import { ThemeProvider } from "styled-components";
 
-import { act, cleanup, fireEvent, render, screen, waitFor } from "./../../../../../config/tests/test-utils";
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from "./../../../../../config/tests/test-utils";
 import { sitesResponse } from "./../../../../__mocks__/axios/SitesList";
 import { sitesOptions } from "./../../../../__mocks__/axios/SitesListOptions";
 import { sitesDataMock, sitesDataNoThumbnailMock, userDataMock } from "./../../../../__mocks__/store/SitesList";
@@ -59,6 +59,15 @@ const renderSitesList = async (storeData: any = initialStore) => {
 
 beforeEach(() => {
 	mockedAxios.mockResolvedValue(sitesResponse);
+	// Tres cosas sobreviven al test que las toca y hacían que el resto solo
+	// funcionase en un orden concreto: el `history` de @ax/routes es un
+	// singleton y los tests de navegación lo dejaban en /sites/pages; SitesList
+	// guarda el modo de vista en localStorage, así que el siguiente test
+	// arrancaba en la vista equivocada y no encontraba los testids `grid-*`; y
+	// el parche de scrollTo se hacía sobre el prototipo dentro de dos tests.
+	history.replace("/");
+	localStorage.clear();
+	window.HTMLElement.prototype.scrollTo = vi.fn();
 });
 
 describe("Sites module rendering", () => {
@@ -198,8 +207,6 @@ describe("Sites module events", () => {
 	});
 
 	it("should go to site on click recent site item", async () => {
-		window.HTMLElement.prototype.scrollTo = vi.fn();
-
 		await renderSitesList();
 
 		const recentSiteItems = screen.getAllByTestId("recent-sites-item");
@@ -224,8 +231,6 @@ describe("Sites module events", () => {
 	});
 
 	it("should go to site on click list site item", async () => {
-		window.HTMLElement.prototype.scrollTo = vi.fn();
-
 		await renderSitesList();
 
 		const gridIconAction = screen.getByTestId("icon-action-Grid2");
@@ -238,7 +243,11 @@ describe("Sites module events", () => {
 		const listSitesItems = screen.getAllByTestId("list-site-item");
 		expect(listSitesItems.length).toEqual(2);
 
-		fireEvent.click(listSitesItems[0]);
+		// La fila solo tiene onContextMenu; navegan las celdas. Antes se pulsaba la
+		// fila y no pasaba nada: la aserción se cumplía porque otro test había
+		// dejado ya el history en /sites/pages.
+		const nameCell = within(listSitesItems[0]).getAllByRole("cell")[2];
+		fireEvent.click(nameCell);
 		await waitFor(() => expect(history.location.pathname).toEqual("/sites/pages"));
 	});
 

package/src/__tests__/modules/Users/Roles/BulkHeader/BulkHeader.test.tsx

@@ -13,49 +13,53 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IBulkHeaderProps>();
-defaultProps.selectedRoles = [];
-defaultProps.roles = [
-	{
-		id: 1,
-		name: "Administrator",
-		hex: "#C7ECF8",
-		description:
-			"You can manage all of your site's settings, users and roles. You can create and publish all pages of your site.",
-		permissions: { totalPermissions: "78/78", sitePermissions: [], globalPermissions: [] },
-		active: true,
-		users: [],
-	},
-	{
-		id: 2,
-		name: "Constructor",
-		hex: "#B5FBFF",
-		description:
-			"You can edit your website, add pages, modules, modify URLs, menus, colours and themes, html tags. You don't manage users, or manage the site configuration.",
-		permissions: { totalPermissions: "49/78", sitePermissions: [], globalPermissions: [] },
-		active: true,
-		users: [],
-	},
-	{
-		id: 3,
-		name: "Editor",
-		hex: "#E2EE9F",
-		description: "You have permission to view, add and edit site content, such as pages and blocks.",
-		permissions: { totalPermissions: "21/78", sitePermissions: [], globalPermissions: [] },
-		active: false,
-		users: [],
-	},
-];
+const makeProps = (overrides: Partial<IBulkHeaderProps> = {}): IBulkHeaderProps =>
+	Object.assign(
+		mock<IBulkHeaderProps>(),
+		{
+			selectedRoles: [],
+			checkState: { isAllSelected: false },
+			roles: [
+				{
+					id: 1,
+					name: "Administrator",
+					hex: "#C7ECF8",
+					description:
+						"You can manage all of your site's settings, users and roles. You can create and publish all pages of your site.",
+					permissions: { totalPermissions: "78/78", sitePermissions: [], globalPermissions: [] },
+					active: true,
+					users: [],
+				},
+				{
+					id: 2,
+					name: "Constructor",
+					hex: "#B5FBFF",
+					description:
+						"You can edit your website, add pages, modules, modify URLs, menus, colours and themes, html tags. You don't manage users, or manage the site configuration.",
+					permissions: { totalPermissions: "49/78", sitePermissions: [], globalPermissions: [] },
+					active: true,
+					users: [],
+				},
+				{
+					id: 3,
+					name: "Editor",
+					hex: "#E2EE9F",
+					description: "You have permission to view, add and edit site content, such as pages and blocks.",
+					permissions: { totalPermissions: "21/78", sitePermissions: [], globalPermissions: [] },
+					active: false,
+					users: [],
+				},
+			],
+		},
+		overrides,
+	);
 
 describe("BulkHeader component rendering", () => {
 	it("should render bulk header", async () => {
-		defaultProps.showBulk = true;
-		defaultProps.checkState.isAllSelected = true;
-
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<BulkHeader {...defaultProps} />
+					<BulkHeader {...makeProps({ showBulk: true, checkState: { isAllSelected: true } })} />
 				</ThemeProvider>,
 			);
 		});
@@ -64,13 +68,10 @@ describe("BulkHeader component rendering", () => {
 	});
 
 	it("should render bulk header options", async () => {
-		defaultProps.showBulk = true;
-		defaultProps.checkState.isAllSelected = true;
-
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<BulkHeader {...defaultProps} />
+					<BulkHeader {...makeProps({ showBulk: true, checkState: { isAllSelected: true } })} />
 				</ThemeProvider>,
 			);
 		});
@@ -79,14 +80,16 @@ describe("BulkHeader component rendering", () => {
 	});
 
 	it("should render underline when isScrolling ", async () => {
-		defaultProps.showBulk = false;
-		defaultProps.isScrolling = true;
-		defaultProps.sortedListStatus = { isAscending: false, sortedByTitle: false };
-
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<BulkHeader {...defaultProps} />
+					<BulkHeader
+						{...makeProps({
+							showBulk: false,
+							isScrolling: true,
+							sortedListStatus: { isAscending: false, sortedByTitle: false },
+						})}
+					/>
 				</ThemeProvider>,
 			);
 		});
@@ -95,14 +98,16 @@ describe("BulkHeader component rendering", () => {
 	});
 
 	it("should render users filter when isSiteView ", async () => {
-		defaultProps.showBulk = false;
-		defaultProps.sortedListStatus = { isAscending: false, sortedByTitle: false, sortedByUsers: false };
-		defaultProps.isSiteView = true;
-
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<BulkHeader {...defaultProps} />
+					<BulkHeader
+						{...makeProps({
+							showBulk: false,
+							sortedListStatus: { isAscending: false, sortedByTitle: false, sortedByUsers: false },
+							isSiteView: true,
+						})}
+					/>
 				</ThemeProvider>,
 			);
 		});
@@ -114,18 +119,18 @@ describe("BulkHeader component rendering", () => {
 
 describe("BulkHeader module events", () => {
 	it("should call deactivate role on click option", async () => {
-		defaultProps.showBulk = true;
-		defaultProps.isSiteView = false;
-		defaultProps.checkState.isAllSelected = true;
 		const activateRolesMock = vi.fn();
 
-		defaultProps.activateRoles = activateRolesMock as CalledWithMock<void, [active: boolean]> &
-			((active: boolean) => void);
-
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<BulkHeader {...defaultProps} />
+					<BulkHeader
+						{...makeProps({
+							showBulk: true,
+							isSiteView: false,
+							activateRoles: activateRolesMock as CalledWithMock<void, [active: boolean]> & ((active: boolean) => void),
+						})}
+					/>
 				</ThemeProvider>,
 			);
 		});
@@ -136,17 +141,17 @@ describe("BulkHeader module events", () => {
 	});
 
 	it("should call activate role on click option", async () => {
-		defaultProps.showBulk = true;
-		defaultProps.checkState.isAllSelected = true;
 		const activateRolesMock = vi.fn();
 
-		defaultProps.activateRoles = activateRolesMock as CalledWithMock<void, [active: boolean]> &
-			((active: boolean) => void);
-
 		await act(async () => {
 			render(
 				<ThemeProvider theme={parseTheme(globalTheme)}>
-					<BulkHeader {...defaultProps} />
+					<BulkHeader
+						{...makeProps({
+							showBulk: true,
+							activateRoles: activateRolesMock as CalledWithMock<void, [active: boolean]> & ((active: boolean) => void),
+						})}
+					/>
 				</ThemeProvider>,
 			);
 		});

package/src/__tests__/modules/Users/Roles/Roles.test.tsx

@@ -20,6 +20,13 @@ import { rolesDataResponse } from "./../../../../__mocks__/axios/Roles";
 
 afterEach(cleanup);
 
+// jsdom no implementa scrollIntoView. Lo parcheaban cuatro tests dentro de su
+// propio cuerpo, así que los que lo necesitaban solo funcionaban si alguno de
+// esos ya había corrido: es un parche sobre el prototipo y sobrevive al test.
+beforeEach(() => {
+	window.HTMLElement.prototype.scrollIntoView = vi.fn();
+});
+
 vi.mock("axios");
 const mockedAxios = axios as MockedFunction<typeof axios>;
 const defaultProps = mock<IRolesProps>();
@@ -27,7 +34,6 @@ const defaultProps = mock<IRolesProps>();
 describe("Roles module rendering", () => {
 	it("should render component", async () => {
 		mockedAxios.mockResolvedValue(rolesDataResponse);
-		window.HTMLElement.prototype.scrollIntoView = vi.fn();
 		const initialStore = {
 			app: { isLoading: false },
 			users: { roles: rolesDataMock },
@@ -61,7 +67,6 @@ describe("Roles module rendering", () => {
 
 	it("should render role items", async () => {
 		mockedAxios.mockResolvedValue(rolesDataResponse);
-		window.HTMLElement.prototype.scrollIntoView = vi.fn();
 		const initialStore = {
 			app: { isLoading: false },
 			users: { roles: rolesDataMock },
@@ -93,7 +98,6 @@ describe("Roles module rendering", () => {
 
 	it("should render tag colors", async () => {
 		mockedAxios.mockResolvedValue(rolesDataResponse);
-		window.HTMLElement.prototype.scrollIntoView = vi.fn();
 		const initialStore = {
 			app: { isLoading: false },
 			users: { roles: rolesDataMock },
@@ -427,7 +431,6 @@ describe("Roles module events", () => {
 
 	it("should render FullArrowDown icon if is filtered by descending name", async () => {
 		mockedAxios.mockResolvedValue(rolesDataResponse);
-		window.HTMLElement.prototype.scrollIntoView = vi.fn();
 		const getRolesMock = vi.fn();
 		const activateRolesMock = vi.fn();
 		defaultProps.getRoles = getRolesMock as CalledWithMock<Promise<void>, [params?: IGetRoles | undefined]>;

package/src/components/Fields/Wysiwyg/config.tsx

@@ -19,6 +19,18 @@ const getTableCellStyles = () => {
 	const config = getRichTextConfigLazy();
 	return config?.tableCellStyles ? parseClassNames(config.tableCellStyles) : undefined;
 };
+const getImageStyles = () => {
+	const config = getRichTextConfigLazy();
+	return config?.imageStyles ? parseClassNames(config.imageStyles) : undefined;
+};
+// Opt-in: instances not asking for it keep their images unresizable.
+const getImageResize = () => getRichTextConfigLazy()?.imageResize === true;
+// When resizing is allowed the size is stored as a rounded percentage, so it
+// still adapts to its container instead of being pinned to a pixel width.
+const getImageResizeConfig = () => {
+	const imageResize = getImageResize();
+	return { imageResize, imageResizeWithPercent: imageResize, imageRoundPercent: imageResize };
+};
 
 const getMiscButtons = () => {
 	const paragraphStyles = getParagraphStyles();
@@ -49,7 +61,14 @@ const getButtonsFull = () => ({
 		buttonsVisible: 6,
 	},
 	moreText2: {
-		buttons: ["insertLinkGriddo", "insertImageGriddo", "insertFileGriddo", "insertVideo", "clearFormatting", "fullscreen"],
+		buttons: [
+			"insertLinkGriddo",
+			"insertImageGriddo",
+			"insertFileGriddo",
+			"insertVideo",
+			"clearFormatting",
+			"fullscreen",
+		],
 		buttonsVisible: 6,
 	},
 	moreMisc: {
@@ -76,6 +95,25 @@ const getButtons = () => {
 
 const getInlineToolbar = () => ["langDropdown", "undo", "redo"];
 
+const getImageEditButtons = () => {
+	const imageStyles = getImageStyles();
+	return [
+		"imageReplaceGriddo",
+		"imageAlign",
+		"imageCaption",
+		"imageRemove",
+		"|",
+		"imageLinkGriddo",
+		"linkOpen",
+		"linkRemove",
+		"-",
+		"imageDisplay",
+		imageStyles ? "imageStyle" : undefined,
+		"imageAlt",
+		getImageResize() ? "imageSize" : undefined,
+	];
+};
+
 const getWysiwygConfig = () => ({
 	key: process.env.GRIDDO_FROALA_KEY || process.env.REACT_APP_FROALA_KEY,
 	// pastePlain: false,
@@ -89,20 +127,10 @@ const getWysiwygConfig = () => ({
 		H3: "Heading 3",
 		H4: "Heading 4",
 	},
-	imageEditButtons: [
-		"imageReplaceGriddo",
-		"imageAlign",
-		"imageCaption",
-		"imageRemove",
-		"|",
-		"imageLinkGriddo",
-		"linkOpen",
-		"linkRemove",
-		"-",
-		"imageDisplay",
-		"imageAlt",
-	],
-	imageResize: false,
+	imageEditButtons: getImageEditButtons(),
+	...getImageResizeConfig(),
+	imageDefaultWidth: null,
+	imageDefaultHeight: null,
 	linkEditButtons: ["linkOpen", "editLinkGriddo", "linkRemove"],
 	videoInsertButtons: ["videoBack", "|", "videoByURL", "videoEmbed"],
 	imageAllowedTypes: ["jpeg", "jpg", "png", "svg"],
@@ -112,6 +140,7 @@ const getWysiwygConfig = () => ({
 	paragraphStyles: getParagraphStyles(),
 	tableStyles: getTableStyles(),
 	tableCellStyles: getTableCellStyles(),
+	imageStyles: getImageStyles(),
 	imageUploadRemoteUrls: false,
 });
 
@@ -161,6 +190,7 @@ FroalaEditor.RegisterCommand("insertImageGriddo", {
 	undo: false,
 	focus: false,
 	callback: function (this: any) {
+		this.selection.save();
 		const el = this.$el?.get?.(0) || this.el;
 		el?.dispatchEvent(
 			new CustomEvent("griddo:openGallery", {
@@ -177,6 +207,7 @@ FroalaEditor.RegisterCommand("insertFileGriddo", {
 	undo: false,
 	focus: false,
 	callback: function (this: any) {
+		this.selection.save();
 		const el = this.$el?.get?.(0) || this.el;
 		el?.dispatchEvent(
 			new CustomEvent("griddo:openFileGallery", {
@@ -296,7 +327,17 @@ FroalaEditor.RegisterCommand("imageLinkGriddo", {
 				editorEl.dispatchEvent(
 					new CustomEvent("griddo:openLinkPopover", {
 						bubbles: true,
-						detail: { x, y, selectedText: "", linkUrl, isNewTab, isNoFollow, isEditing: true, linkPageId, isImageLink: true },
+						detail: {
+							x,
+							y,
+							selectedText: "",
+							linkUrl,
+							isNewTab,
+							isNoFollow,
+							isEditing: true,
+							linkPageId,
+							isImageLink: true,
+						},
 					}),
 				);
 			} else {
@@ -304,7 +345,17 @@ FroalaEditor.RegisterCommand("imageLinkGriddo", {
 				editorEl.dispatchEvent(
 					new CustomEvent("griddo:openLinkPopover", {
 						bubbles: true,
-						detail: { x, y, selectedText: "", linkUrl: "", isNewTab: false, isNoFollow: false, isEditing: false, linkPageId: null, isImageLink: true },
+						detail: {
+							x,
+							y,
+							selectedText: "",
+							linkUrl: "",
+							isNewTab: false,
+							isNoFollow: false,
+							isEditing: false,
+							linkPageId: null,
+							isImageLink: true,
+						},
 					}),
 				);
 			}

package/src/components/Fields/Wysiwyg/helpers.tsx

@@ -17,6 +17,8 @@ interface IRichTextConfig {
 	paragraphStyles?: { label: string; className: string }[];
 	tableStyles?: { label: string; className: string }[];
 	tableCellStyles?: { label: string; className: string }[];
+	imageStyles?: { label: string; className: string }[];
+	imageResize?: boolean;
 	editorLangs?: { name: string; iso: string }[];
 }
 

package/src/components/Fields/Wysiwyg/index.tsx

@@ -84,10 +84,16 @@ const Wysiwyg = (props: IWysiwygProps) => {
 
 	const handleFileSelected = (file: IFile) => {
 		if (file?.url && editorRef.current) {
-			editorRef.current.selection.restore();
-			editorRef.current.link.insert(file.url, file.fileName, { target: "_blank" });
-			const updatedHtml = editorRef.current.html.get();
-			handleChange(updatedHtml);
+			// Wait for Froala to stabilize after re-render before restoring selection
+			setTimeout(() => {
+				if (!editorRef.current) return;
+				editorRef.current.selection.restore();
+				// Use html.insert instead of link.insert to avoid selection issues
+				const linkHtml = `<a href="${file.url}" target="_blank">${file.fileName}</a>`;
+				editorRef.current.html.insert(linkHtml);
+				const updatedHtml = editorRef.current.html.get();
+				handleChange(updatedHtml);
+			}, 100);
 		}
 	};
 
@@ -99,14 +105,23 @@ const Wysiwyg = (props: IWysiwygProps) => {
 				if (img.alt) {
 					imgElement.alt = img.alt;
 				}
+				replaceImgRef.current = null;
+				const updatedHtml = editorRef.current.html.get();
+				handleChange(updatedHtml);
 			} else {
-				editorRef.current.selection.restore();
-				editorRef.current.image.insert(img.url, true, { alt: img.alt || "" }, null, null);
+				// Wait for Froala to stabilize after re-render before restoring selection
+				setTimeout(() => {
+					if (!editorRef.current) return;
+					editorRef.current.selection.restore();
+					// Use html.insert instead of image.insert to avoid selection issues
+					const imgHtml = `<img src="${img.url}" alt="${img.alt || ""}" />`;
+					editorRef.current.html.insert(imgHtml);
+					const updatedHtml = editorRef.current.html.get();
+					handleChange(updatedHtml);
+				}, 100);
 			}
 
 			replaceImgRef.current = null;
-			const updatedHtml = editorRef.current.html.get();
-			handleChange(updatedHtml);
 		}
 	};
 
@@ -219,12 +234,10 @@ const Wysiwyg = (props: IWysiwygProps) => {
 						editorEl.addEventListener("griddo:openGallery", (e: Event) => {
 							const detail = (e as CustomEvent).detail;
 							replaceImgRef.current = detail?.mode === "replace" ? detail.$img : null;
-							editorRef.current?.selection.save();
 							toggleModal("image");
 						});
 
 						editorEl.addEventListener("griddo:openFileGallery", () => {
-							editorRef.current?.selection.save();
 							toggleModal("file");
 						});
 
@@ -278,6 +291,24 @@ const Wysiwyg = (props: IWysiwygProps) => {
 					const stripedHtml = decodeEntities(html);
 					handleValidation?.(stripedHtml);
 				},
+				contentChanged: function (this: any) {
+					const editorEl = this.$el?.get?.(0) || this.el;
+					const images = editorEl?.querySelectorAll?.("img");
+					if (images) {
+						images.forEach((img: HTMLImageElement) => {
+							const hasFrDib = img.classList.contains("fr-dib");
+							const hasFrDii = img.classList.contains("fr-dii");
+
+							img.classList.remove("img-inline", "img-block");
+
+							if (hasFrDib) {
+								img.classList.add("img-block");
+							} else if (hasFrDii) {
+								img.classList.add("img-inline");
+							}
+						});
+					}
+				},
 			},
 		}),
 		[placeholder, inline, full, disabled, token, toggleModal, handleValidation, imageSite, uploadImage],

package/src/components/ResizePanel/index.tsx

@@ -27,8 +27,10 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 	};
 
 	useEffect(() => {
+		let frame = 0;
+
 		const updateWidth = () => {
-			requestAnimationFrame(() => {
+			frame = requestAnimationFrame(() => {
 				if (rightPanelRef.current) {
 					setRwidth(rightPanelRef.current.offsetWidth);
 				}
@@ -38,7 +40,10 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 		updateWidth();
 
 		window.addEventListener("resize", updateWidth);
-		return () => window.removeEventListener("resize", updateWidth);
+		return () => {
+			cancelAnimationFrame(frame);
+			window.removeEventListener("resize", updateWidth);
+		};
 	}, []);
 
 	useEffect(() => {