@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/modules/MediaGallery/atoms.tsx

@@ -1,24 +1,33 @@
-import React from "react";
+import type React from "react";
 
-import { IModal } from "@ax/types";
-import { Modal, FieldsBehavior } from "@ax/components";
+import { FieldsBehavior, Modal } from "@ax/components";
+import type { IModal } from "@ax/types";
+
+import type { IFolderFormState } from ".";
 import FolderTree from "./FolderTree";
-import { IFolderFormState } from ".";
 
 import * as S from "./style";
 
 const NewFolderModal = (props: INewModalProps): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, form, setForm } = props;
+	const { isOpen, toggleModal, form, setForm, onCreateFolder, isSaving } = props;
 
 	const setNameValue = (name: string) => setForm({ ...form, name });
 	const setFolder = (folderID: number | null) => setForm({ ...form, folderID });
 
 	const handleKeyDown = (e: React.KeyboardEvent) => {
 		if (e.key === "Enter") {
-			mainModalAction?.onClick();
+			onCreateFolder?.();
 		}
 	};
 
+	const mainModalAction = {
+		title: isSaving ? "Saving..." : "Create New Folder",
+		onClick: onCreateFolder,
+		disabled: form.name.trim().length === 0 || isSaving,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+
 	return (
 		<Modal
 			isOpen={isOpen}
@@ -47,8 +56,16 @@ const NewFolderModal = (props: INewModalProps): JSX.Element => {
 	);
 };
 
-const DeleteFolderModal = (props: IDeleteModalProps): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, title } = props;
+const DeleteFolderModal = (props: IDeleteFolderModalProps): JSX.Element => {
+	const { isOpen, toggleModal, title, onDelete, isDeleting = false } = props;
+
+	const mainModalAction = {
+		title: isDeleting ? "Deleting" : "Delete",
+		onClick: onDelete,
+		disabled: isDeleting,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
 		<Modal
@@ -69,13 +86,21 @@ const DeleteFolderModal = (props: IDeleteModalProps): JSX.Element => {
 };
 
 const RenameFolderModal = (props: IRenameModalProps): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, value, setValue } = props;
+	const { isOpen, toggleModal, value, setValue, onUpdateFolder, isUpdating = false, isNameEmpty = false } = props;
 
 	const setNameValue = (name: string) => setValue(name);
 
+	const mainModalAction = {
+		title: isUpdating ? "Updating..." : "Rename Folder",
+		onClick: onUpdateFolder,
+		disabled: isNameEmpty || isUpdating,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+
 	const handleKeyDown = (e: React.KeyboardEvent) => {
 		if (e.key === "Enter") {
-			mainModalAction?.onClick();
+			mainModalAction.onClick();
 		}
 	};
 
@@ -87,7 +112,7 @@ const RenameFolderModal = (props: IRenameModalProps): JSX.Element => {
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
-			height={244}
+			height="auto"
 		>
 			<S.ModalContent>
 				<S.NoMarginFieldsBehavior
@@ -106,7 +131,15 @@ const RenameFolderModal = (props: IRenameModalProps): JSX.Element => {
 };
 
 const DeleteFileModal = (props: IDeleteModalProps): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, title, isChild } = props;
+	const { isOpen, toggleModal, title, isChild, onDelete, isDeleting = false } = props;
+
+	const mainModalAction = {
+		title: isDeleting ? "Deleting" : "Delete",
+		onClick: onDelete,
+		disabled: isDeleting,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
 		<Modal
@@ -128,10 +161,18 @@ const DeleteFileModal = (props: IDeleteModalProps): JSX.Element => {
 };
 
 const MoveItemModal = (props: IMoveModalProps): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, folder, setFolder, hidden, hideRoot } = props;
+	const { isOpen, toggleModal, folder, setFolder, hidden, hideRoot, onMove = () => {}, isMoving = false } = props;
 
 	const handleSetFolder = (folderID: number) => setFolder(folderID);
 
+	const mainModalAction = {
+		title: isMoving ? "Moving" : "Move",
+		onClick: onMove,
+		disabled: isMoving,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+
 	return (
 		<Modal
 			isOpen={isOpen}
@@ -149,8 +190,15 @@ const MoveItemModal = (props: IMoveModalProps): JSX.Element => {
 	);
 };
 
-const NotSavedModal = (props: IModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction } = props;
+const NotSavedModal = (props: INotSavedModalProps): JSX.Element => {
+	const { isOpen, toggleModal, onDiscard } = props;
+
+	const mainModalAction = {
+		title: "Yes, discard changes",
+		onClick: onDiscard,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
 		<Modal
@@ -161,6 +209,7 @@ const NotSavedModal = (props: IModal): JSX.Element => {
 			mainAction={mainModalAction}
 			secondaryAction={secondaryModalAction}
 			isChild={true}
+			height="auto"
 		>
 			{
 				<S.ModalContent>
@@ -175,15 +224,29 @@ const NotSavedModal = (props: IModal): JSX.Element => {
 interface INewModalProps extends IModal {
 	form: IFolderFormState;
 	setForm(form: IFolderFormState): void;
+	onCreateFolder(): void;
+	isSaving: boolean;
 }
 
 interface IRenameModalProps extends IModal {
 	value: string;
 	setValue(value: string): void;
+	onUpdateFolder(): void | Promise<void>;
+	isUpdating?: boolean;
+	isNameEmpty?: boolean;
 }
 
 interface IDeleteModalProps extends IModal {
 	title: string;
+	onDelete(): void;
+	isDeleting?: boolean;
+	isChild?: boolean;
+}
+
+interface IDeleteFolderModalProps extends IModal {
+	title: string;
+	onDelete(): void;
+	isDeleting?: boolean;
 }
 
 interface IMoveModalProps extends IModal {
@@ -191,6 +254,12 @@ interface IMoveModalProps extends IModal {
 	setFolder(folderID: number | null): void;
 	hidden?: number[];
 	hideRoot?: boolean;
+	onMove(): void;
+	isMoving?: boolean;
+}
+
+interface INotSavedModalProps extends IModal {
+	onDiscard(): void;
 }
 
 export { NewFolderModal, DeleteFolderModal, DeleteFileModal, MoveItemModal, RenameFolderModal, NotSavedModal };

package/src/modules/MediaGallery/index.tsx

@@ -21,7 +21,7 @@ import {
 	Tooltip,
 } from "@ax/components";
 import { galleryActions } from "@ax/containers/Gallery";
-import { useBulkSelection, useIsDirty, useModal, usePermission, useResizable, useToast } from "@ax/hooks";
+import { useBulkSelection, useIsDirty, useModals, usePermissions, useResizable, useToast } from "@ax/hooks";
 import type {
 	IBulkAction,
 	IFolder,
@@ -86,7 +86,6 @@ const MediaGallery = (props: IProps) => {
 	const firstPage = 1;
 	const lastPage = Math.ceil(totalItems / itemsPerPage);
 	const [page, setPage] = useState(firstPage);
-	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [isPanelOpen, setPanelOpen] = useState(false);
 	const [fileSelected, setFileSelected] = useState<IImage | null>(null);
 	const [selectedFolder, setSelectedFolder] = useState<number | null>(currentFolderID || null);
@@ -103,12 +102,7 @@ const MediaGallery = (props: IProps) => {
 	const tableRef = useRef<HTMLDivElement>(null);
 	const contentRef = useRef<HTMLDivElement>(null);
 	const wrapperRef = useRef<HTMLDivElement>(null);
-	const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
-	const { isOpen: isUploadOpen, toggleModal: toggleUploadModal } = useModal();
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();
-	const { isOpen: isSaveOpen, toggleModal: toggleSaveModal } = useModal();
-	const { isOpen, toggleModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["new", "upload", "delete", "move", "save", "imageModal"]);
 	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
 	const [ref] = useResizable();
 
@@ -130,35 +124,20 @@ const MediaGallery = (props: IProps) => {
 	const isRoot = !breadcrumb?.length;
 	const isGrid = displayMode === "grid";
 
-	const allowedToAccessGlobalFromSite = usePermission("mediaGallery.accessToGlobalGalleryFromSite");
-
-	const allowedToAddSiteFile = usePermission("mediaGallery.addImages");
-	const allowedToAddGlobalFile = usePermission("global.mediaGallery.addGlobalImages");
-	const allowedToAddGlobalFileFromSite = false;
-	const allowedToAddFile = !isSiteView
-		? allowedToAddGlobalFile
-		: isTabGlobal
-			? allowedToAddGlobalFileFromSite
-			: allowedToAddSiteFile;
-
-	const allowedToEditSiteFile = usePermission("mediaGallery.editImages");
-	const allowedToEditGlobalFile = usePermission("global.mediaGallery.editGlobalImages");
-	const allowedToEditGlobalFileFromSite = false;
-	const allowedToEditFile = !isSiteView
-		? allowedToEditGlobalFile
-		: isTabGlobal
-			? allowedToEditGlobalFileFromSite
-			: allowedToEditSiteFile;
-
-	const allowedToDeleteSiteFile = usePermission("mediaGallery.deleteImages");
-	const allowedToDeleteGlobalFile = usePermission("global.mediaGallery.deleteGlobalImages");
-	const allowedToDeleteGlobalFileFromSite = false;
-
-	const allowedToDeleteFile = !isSiteView
-		? allowedToDeleteGlobalFile
-		: isTabGlobal
-			? allowedToDeleteGlobalFileFromSite
-			: allowedToDeleteSiteFile;
+	const allowedTo = usePermissions({
+		accessGlobalFromSite: "mediaGallery.accessToGlobalGalleryFromSite",
+		addSiteFile: "mediaGallery.addImages",
+		addGlobalFile: "global.mediaGallery.addGlobalImages",
+		editSiteFile: "mediaGallery.editImages",
+		editGlobalFile: "global.mediaGallery.editGlobalImages",
+		deleteSiteFile: "mediaGallery.deleteImages",
+		deleteGlobalFile: "global.mediaGallery.deleteGlobalImages",
+	});
+
+	const allowedToAccessGlobalFromSite = allowedTo.accessGlobalFromSite;
+	const allowedToAddFile = !isSiteView ? allowedTo.addGlobalFile : isTabGlobal ? false : allowedTo.addSiteFile;
+	const allowedToEditFile = !isSiteView ? allowedTo.editGlobalFile : isTabGlobal ? false : allowedTo.editSiteFile;
+	const allowedToDeleteFile = !isSiteView ? allowedTo.deleteGlobalFile : isTabGlobal ? false : allowedTo.deleteSiteFile;
 
 	const getParams = useCallback(() => {
 		const params: IGetFolderParams = {
@@ -263,7 +242,7 @@ const MediaGallery = (props: IProps) => {
 
 	const handleNewFolder = () => {
 		setFolderForm(initFolderState);
-		!isNewOpen && toggleNewModal();
+		toggleModal("new");
 	};
 
 	const changeDisplayMode = (mode: "grid" | "list") => updateDisplayMode(mode);
@@ -291,7 +270,7 @@ const MediaGallery = (props: IProps) => {
 			params,
 		);
 		if (isCreated) {
-			isNewOpen && toggleNewModal();
+			toggleModal("new");
 			toggleToast("1 new folder created");
 		}
 	};
@@ -306,13 +285,13 @@ const MediaGallery = (props: IProps) => {
 
 	const handleClick = (file: IImage) => {
 		setFileSelected(file);
-		toggleModal();
+		toggleModal("imageModal");
 	};
 
 	const handleUpload = async (files: IImage[]) => {
 		setFileSelected(files[0]);
-		isUploadOpen && toggleUploadModal();
-		toggleModal();
+		isOpen("upload") && toggleModal("upload");
+		toggleModal("imageModal");
 		const params = getParams();
 		await getFolderContent(params);
 	};
@@ -338,7 +317,7 @@ const MediaGallery = (props: IProps) => {
 	};
 
 	const handleMultipleUpload = async (files: File[]) => {
-		isUploadOpen && toggleUploadModal();
+		isOpen("upload") && toggleModal("upload");
 
 		const initialProgress = files.map(() => 0);
 		setProgressItems({ tab: selectedTab, folder: currentFolderID, items: initialProgress });
@@ -356,7 +335,7 @@ const MediaGallery = (props: IProps) => {
 
 	const handleCloseModal = () => {
 		if (isDirty) {
-			toggleSaveModal();
+			toggleModal("save");
 		} else {
 			resetFileModal();
 		}
@@ -367,7 +346,7 @@ const MediaGallery = (props: IProps) => {
 		setGalleryItems(imagesIds);
 		setGalleryDelete(true);
 		resetDirty();
-		toggleModal();
+		toggleModal("imageModal");
 	};
 
 	const handleDeleteFile = async (imageID: number) => {
@@ -376,12 +355,11 @@ const MediaGallery = (props: IProps) => {
 		const isDeleted = await deleteImage(imageID, resetedParams);
 		if (isDeleted) {
 			toggleToast("1 Image deleted");
-			isOpen && handleCloseModal();
+			isOpen("imageModal") && handleCloseModal();
 		}
 	};
 
 	const handleBulkDeleteFile = async () => {
-		setIsBulkLoading(true);
 		const params = getParams();
 		const resetedParams = { ...params, page: firstPage, infinite: false, loading: true };
 		const isDeleted = await deleteImage(selectedItems.all, resetedParams);
@@ -389,33 +367,28 @@ const MediaGallery = (props: IProps) => {
 			toggleToast(`${selectedItems.all.length} Image${selectedItems.all.length > 1 ? "s" : ""} deleted`);
 			resetBulkSelection();
 		}
-		toggleDeleteModal();
-		setIsBulkLoading(false);
+		toggleModal("delete");
 	};
 
 	const handleMoveImage = async (imageID: number, folderID: number | "root") => {
-		setIsBulkLoading(true);
 		const params = getParams();
 		const resetedParams = { ...params, page: firstPage, infinite: false, loading: true };
 		const isMoved = await moveImage(imageID, folderID, resetedParams);
 		if (isMoved) {
 			toggleToast("1 Image moved to a folder");
 		}
-		setIsBulkLoading(false);
 	};
 
 	const handleBulkMoveFile = async () => {
-		setIsBulkLoading(true);
 		const params = getParams();
 		const resetedParams = { ...params, page: firstPage, infinite: false, loading: true };
 		const isMoved = await moveImage(selectedItems.all, selectedFolder || "root", resetedParams);
 		if (isMoved) {
-			toggleMoveModal();
+			toggleModal("move");
 			toggleToast(`${selectedItems.all.length} Image${selectedItems.all.length > 1 ? "s" : ""} moved to a folder`);
 			setSelectedFolder(0);
 			resetBulkSelection();
 		}
-		setIsBulkLoading(false);
 	};
 
 	const handleBulkEditFile = () => {
@@ -424,13 +397,13 @@ const MediaGallery = (props: IProps) => {
 			setGalleryItems(selectedItems.all);
 			setFileSelected(currentFile);
 			setGalleryDelete(false);
-			toggleModal();
+			toggleModal("imageModal");
 		}
 	};
 
 	const handleModalClose = () => {
 		setSelectedFolder(0);
-		isMoveOpen && toggleMoveModal();
+		isOpen("move") && toggleModal("move");
 	};
 
 	const handleSelectFile = (id: number) => {
@@ -441,11 +414,9 @@ const MediaGallery = (props: IProps) => {
 	};
 
 	const handleDownloadBulk = async () => {
-		setIsBulkLoading(true);
 		const fileName = isSiteView ? `${currentSiteInfo.name}-images.zip` : "global-images.zip";
 		await downloadImages(selectedItems.all, true, fileName);
 		resetBulkSelection();
-		setIsBulkLoading(false);
 	};
 
 	const handleUpdateCurrentFolder = (folderID: number | null) => {
@@ -486,7 +457,7 @@ const MediaGallery = (props: IProps) => {
 			{
 				icon: "change",
 				text: "Move to",
-				action: toggleMoveModal,
+				action: () => toggleModal("move"),
 			},
 		];
 	}
@@ -506,7 +477,7 @@ const MediaGallery = (props: IProps) => {
 			{
 				icon: "delete",
 				text: "delete",
-				action: toggleDeleteModal,
+				action: () => toggleModal("delete"),
 			},
 		];
 	}
@@ -521,7 +492,7 @@ const MediaGallery = (props: IProps) => {
 			bulkActions={bulkActions}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
-			isLoading={isBulkLoading}
+			isLoading={isSaving}
 		/>
 	);
 
@@ -548,6 +519,7 @@ const MediaGallery = (props: IProps) => {
 						isAllowedToDelete={allowedToDeleteFile}
 						isAllowedToEdit={allowedToEditFile}
 						isAllowedToMove={!isRoot || (isRoot && (folders.length > 0 || isSearching))}
+						isSaving={isSaving}
 					/>
 				);
 			})}
@@ -590,6 +562,7 @@ const MediaGallery = (props: IProps) => {
 							isAllowedToEdit={allowedToEditFile}
 							isAllowedToMove={!isRoot || (isRoot && (folders.length > 0 || isSearching))}
 							hoverCheck={checkState.hoverCheck}
+							isSaving={isSaving}
 						/>
 					);
 				})}
@@ -600,7 +573,7 @@ const MediaGallery = (props: IProps) => {
 	const rightButtonProps = allowedToAddFile
 		? {
 				label: "Upload",
-				action: () => toggleUploadModal(),
+				action: () => toggleModal("upload"),
 				disabled: isUploading,
 			}
 		: undefined;
@@ -616,7 +589,7 @@ const MediaGallery = (props: IProps) => {
 			""
 		),
 		button: allowedToAddFile ? "Upload image" : undefined,
-		action: () => toggleUploadModal(),
+		action: () => toggleModal("upload"),
 	};
 
 	const emptySearchStateProps = {
@@ -625,41 +598,6 @@ const MediaGallery = (props: IProps) => {
 		message: "We couldn’t find what you are looking for. Please, try another search.",
 	};
 
-	const mainNewModalAction = {
-		title: isSaving ? "Saving..." : "Create New Folder",
-		onClick: () => handleCreateNewFolder(),
-		disabled: folderForm.name.trim().length === 0 || isSaving,
-	};
-
-	const secondaryNewModalAction = { title: "Cancel", onClick: toggleNewModal };
-
-	const mainDeleteModalAction = {
-		title: isBulkLoading ? "Deleting" : "Delete",
-		onClick: () => handleBulkDeleteFile(),
-		disabled: isBulkLoading,
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const mainMoveModalAction = {
-		title: "Move",
-		onClick: () => handleBulkMoveFile(),
-	};
-
-	const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };
-
-	const handleMainAction = () => {
-		toggleSaveModal();
-		resetFileModal();
-	};
-
-	const mainSaveModalAction = {
-		title: "Yes, discard changes",
-		onClick: () => handleMainAction(),
-	};
-
-	const secondarySaveModalAction = { title: "Cancel", onClick: toggleSaveModal };
-
 	const foldersIcon = isPanelOpen ? <Icon name="closePanel" size="24" /> : <Icon name="openPanel" size="24" />;
 
 	const tabs = ["site", "global"];
@@ -780,7 +718,7 @@ const MediaGallery = (props: IProps) => {
 											selectItems={selectItems}
 											bulkActions={bulkActions}
 											selectedItems={selectedItems}
-											isLoading={isBulkLoading}
+											isLoading={isSaving}
 										/>
 									)}
 									{!hasFolders && isRoot && !isSearching && <NewFolderButton />}
@@ -799,18 +737,18 @@ const MediaGallery = (props: IProps) => {
 					)}
 				</S.ContentWrapper>
 			</S.Wrapper>
-			{isNewOpen && (
+			{isOpen("new") && (
 				<NewFolderModal
-					isOpen={isNewOpen}
-					toggleModal={toggleNewModal}
-					mainModalAction={mainNewModalAction}
-					secondaryModalAction={secondaryNewModalAction}
+					isOpen={isOpen("new")}
+					toggleModal={() => toggleModal("new")}
 					form={folderForm}
 					setForm={setFolderForm}
+					onCreateFolder={handleCreateNewFolder}
+					isSaving={isSaving}
 				/>
 			)}
-			<Modal isOpen={isUploadOpen} hide={toggleUploadModal} size="XL" title="Upload media">
-				{isUploadOpen && (
+			<Modal isOpen={isOpen("upload")} hide={() => toggleModal("upload")} size="XL" title="Upload media">
+				{isOpen("upload") && (
 					<ImageDragAndDrop
 						folderID={currentFolderID}
 						handleUpload={handleUpload}
@@ -820,8 +758,8 @@ const MediaGallery = (props: IProps) => {
 					/>
 				)}
 			</Modal>
-			<Modal isOpen={isOpen} hide={handleCloseModal} size="XL" title="Image details">
-				{isOpen && fileSelected && (
+			<Modal isOpen={isOpen("imageModal")} hide={handleCloseModal} size="XL" title="Image details">
+				{isOpen("imageModal") && fileSelected && (
 					<ImageModal
 						image={fileSelected}
 						onDelete={handleDeleteFile}
@@ -839,31 +777,33 @@ const MediaGallery = (props: IProps) => {
 					/>
 				)}
 			</Modal>
-			{isDeleteOpen && (
+			{isOpen("delete") && (
 				<DeleteFileModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
 					title="these images"
+					onDelete={handleBulkDeleteFile}
+					isDeleting={isSaving}
 				/>
 			)}
-			{isMoveOpen && (
+			{isOpen("move") && (
 				<MoveItemModal
-					isOpen={isMoveOpen}
+					isOpen={isOpen("move")}
 					toggleModal={handleModalClose}
-					mainModalAction={mainMoveModalAction}
-					secondaryModalAction={secondaryMoveModalAction}
 					folder={selectedFolder}
 					setFolder={setSelectedFolder}
+					onMove={handleBulkMoveFile}
+					isMoving={isSaving}
 				/>
 			)}
-			{isSaveOpen && (
+			{isOpen("save") && (
 				<NotSavedModal
-					isOpen={isSaveOpen}
-					toggleModal={toggleSaveModal}
-					mainModalAction={mainSaveModalAction}
-					secondaryModalAction={secondarySaveModalAction}
+					isOpen={isOpen("save")}
+					toggleModal={() => toggleModal("save")}
+					onDiscard={() => {
+						toggleModal("save");
+						resetFileModal();
+					}}
 				/>
 			)}
 			{isVisible && <Toast setIsVisible={setIsVisible} message={toastState} />}

package/src/modules/Navigation/Defaults/Item/atoms.tsx

@@ -1,9 +1,7 @@
-import React from "react";
-
-import { FloatingMenu, Flag, LanguageMenu } from "@ax/components";
+import { Flag, FloatingMenu, LanguageMenu } from "@ax/components";
+import type { ILanguage } from "@ax/types";
 
 import * as S from "./style";
-import { ILanguage } from "@ax/types";
 
 const LangMenu = (props: IProps) => {
 	const { currentLanguages, locale, languages, handleLanguage } = props;