@griddo/ax 11.10.41 → 11.10.42

package/config/griddo-config/index.js

@@ -89,6 +89,7 @@ const griddoAxAliases = {
 	"@ax/schemas": path.resolve(__dirname, "../../src/schemas"),
 	"@ax/services": path.resolve(__dirname, "../../src/services"),
 	"@ax/locales": path.resolve(__dirname, "../../src/locales"),
+	"@ax/constants": path.resolve(__dirname, "../../src/constants"),
 };
 
 const griddoComponentsLibAliases = getComponentsLibAliases();

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.10.41",
+	"version": "11.10.42",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "37d4927a4cb852f84d5f3db98dfb8dd629ba032e"
+	"gitHead": "9ae94989b7a0c987e39ebcaaa7f5398aae266c88"
 }

package/src/components/BulkSelectionOptions/index.tsx

@@ -1,42 +1,90 @@
-import { Button, CheckField, ExportButton } from "@ax/components";
+import { useEffect, useState } from "react";
+
+import { Button, CheckField, ExportButton, Loader } from "@ax/components";
+import type { ItemLabel } from "@ax/constants";
 import type { IBulkSelectedItems } from "@ax/hooks";
+import { LOCALE, pluralize } from "@ax/locales";
 import type { IBulkAction } from "@ax/types";
 
+import { getBulkLoadingText } from "./utils";
+
 import * as S from "./style";
 
 const BulkSelectionOptions = (props: IBulkSelectionProps) => {
-	const { isScrolling, checkState, actions, selectItems, className, exportAction, selectedItems } = props;
+	const {
+		isScrolling,
+		checkState,
+		actions,
+		selectItems,
+		className,
+		exportAction,
+		selectedItems,
+		isLoading,
+		itemLabel = { one: "item", other: "items" },
+	} = props;
 
 	const filteredActions = actions.filter((action) => !!action);
+	const [currentAction, setCurrentAction] = useState<string>("");
+
+	const currentActionText = getBulkLoadingText(currentAction);
+	const allSelectedItemsText = selectedItems?.all.length.toString();
+	const itemLabelText = pluralize(itemLabel, selectedItems?.all.length);
+	const pleaseWaitText = `${LOCALE.common.pleaseWait}...`;
+	const bulkProcessingText = `${currentActionText} ${allSelectedItemsText} ${itemLabelText}. ${pleaseWaitText}`;
+
+	useEffect(() => {
+		if (!isLoading) {
+			setCurrentAction("");
+		}
+	}, [isLoading]);
+
+	const handleActionClick = (action: () => void, actionText: string) => {
+		setCurrentAction(actionText);
+		action();
+	};
 
 	return (
 		<S.BulkHeader isScrolling={isScrolling} data-testid="bulk-header-wrapper" className={className}>
-			<S.BulkActionsWrapper>
-				<S.SelectAllCheckField>
-					<CheckField
-						key="selectAll"
-						name="selectAll"
-						value="selectAll"
-						onChange={selectItems}
-						checked={checkState.isAllSelected}
-						indeterminate={checkState.indeterminate}
-						disabled={false}
-						error={false}
-					/>
-				</S.SelectAllCheckField>
-				<S.SelectedCount>{selectedItems?.all?.length} selected</S.SelectedCount>
-				<S.BulkActions>
-					{filteredActions.map(
-						(item) =>
-							item && (
-								<Button key={item.text} type="button" buttonStyle="text" icon={item.icon} onClick={item.action}>
-									{item.text}
-								</Button>
-							),
-					)}
-					{exportAction && <ExportButton onClick={exportAction} />}
-				</S.BulkActions>
-			</S.BulkActionsWrapper>
+			{isLoading ? (
+				<>
+					<Loader name="smallCircle" size="16" />
+					<S.LoadingText>{bulkProcessingText}</S.LoadingText>
+				</>
+			) : (
+				<S.BulkActionsWrapper>
+					<S.SelectAllCheckField>
+						<CheckField
+							key="selectAll"
+							name="selectAll"
+							value="selectAll"
+							onChange={selectItems}
+							checked={checkState.isAllSelected}
+							indeterminate={checkState.indeterminate}
+							disabled={isLoading || false}
+							error={false}
+						/>
+					</S.SelectAllCheckField>
+					<S.SelectedCount>{selectedItems?.all?.length} selected</S.SelectedCount>
+					<S.BulkActions>
+						{filteredActions.map(
+							(item) =>
+								item && (
+									<Button
+										key={item.text}
+										type="button"
+										buttonStyle="text"
+										icon={item.icon}
+										onClick={() => handleActionClick(item.action, item.text)}
+										disabled={isLoading}
+									>
+										{item.text}
+									</Button>
+								),
+						)}
+						{exportAction && <ExportButton onClick={exportAction} />}
+					</S.BulkActions>
+				</S.BulkActionsWrapper>
+			)}
 		</S.BulkHeader>
 	);
 };
@@ -50,6 +98,8 @@ interface IBulkSelectionProps {
 	className?: string;
 	exportAction?: (formats: (string | number)[]) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
+	itemLabel: ItemLabel;
 }
 
 export default BulkSelectionOptions;

package/src/components/BulkSelectionOptions/style.tsx

@@ -43,4 +43,10 @@ const SelectedCount = styled.span`
   font-weight: ${(p) => p.theme.fontWeight.regular};
 `;
 
-export { BulkHeader, BulkActionsWrapper, BulkActions, SelectAllCheckField, Counter, SelectedCount };
+const LoadingText = styled.span`
+  margin-left: ${({ theme }) => theme.spacing.xs};
+  color: ${({ theme }) => theme.color.interactive01};
+  ${({ theme }) => theme.textStyle.uiButton};
+`;
+
+export { BulkActions, BulkActionsWrapper, BulkHeader, Counter, LoadingText, SelectAllCheckField, SelectedCount };

package/src/components/BulkSelectionOptions/utils.tsx

@@ -0,0 +1,25 @@
+import { LOCALE } from "@ax/locales";
+
+// TODO: Tipar las acciones para que no sean cualquier string...
+// export type BulkActions = "publish" | "unpublish" | "delete" | "processing" | "Move to" | "Deativate";
+
+/**
+ * Returns the appropriate loading text for bulk actions based on the current action and loading state.
+ *
+ * @param currentAction - The current action being performed ("publish", "unpublish", "delete", etc.).
+ * @returns The localized loading message corresponding to the current bulk action.
+ */
+export const getBulkLoadingText = (currentAction: string) => {
+	const options = {
+		publish: LOCALE.common.publishing,
+		unpublish: LOCALE.common.unpublishing,
+		delete: LOCALE.common.deleting,
+		processing: LOCALE.common.processing,
+		download: LOCALE.common.downloading,
+		"Move to": LOCALE.common.moving,
+		Deactivate: LOCALE.common.deactivating,
+		Activate: LOCALE.common.activating,
+	};
+
+	return options[currentAction as keyof typeof options] || options.processing;
+};

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -60,7 +60,6 @@ const PageConnectedField = (props: any): JSX.Element => {
 	const overrideableFields = ["header", "footer"];
 	const isOverride = selectedContent.type && overrideableFields.includes(selectedContent.type);
 	const isPageHome = componentType === "page" && selectedContent.isHome;
-	const allowModifySlug = !selectedContent.id && !selectedContent.isHome;
 	const isNewPage = componentType === "page" && !selectedContent.id;
 	const error = errors.find((err: any) => err.editorID === selectedEditorID && err.key === objKey);
 	const isFormPage = selectedContent.component === "FormPage";
@@ -141,7 +140,8 @@ const PageConnectedField = (props: any): JSX.Element => {
 		if (isPageTitle) {
 			setCurrentPageName(value);
 
-			if (allowModifySlug) {
+			const canModifySlug = !selectedContent.id && !selectedContent.isHome;
+			if (canModifySlug) {
 				updateEditorContent(selectedEditorID, "slug", slugify(value));
 			}
 

package/src/components/ConfigPanel/GlobalPageForm/index.tsx

@@ -11,7 +11,7 @@ const noteTitle = "Global content";
 const errorText = "You don't have the permissions to edit the original content.";
 
 const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
-	const { selectedTab, setSelectedTab, schema, pageTitle, setHistoryPush, actions, header, footer } = props;
+	const { selectedTab, setSelectedTab, schema, pageTitle, setHistoryPush, actions, header, footer, isDirty, onNavigateWithDirty } = props;
 	const tabs = ["content", "config"];
 
 	const { themes } = useThemes();
@@ -24,9 +24,17 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
 
 	const handleClick = async () => {
 		if (isAllowedToEditGlobalData) {
-			await handleGetGlobalPage();
-			const path = "/data/pages/editor";
-			setHistoryPush?.(path, true);
+			const navigate = async () => {
+				await handleGetGlobalPage();
+				const path = "/data/pages/editor";
+				setHistoryPush?.(path, true);
+			};
+
+			if (isDirty && onNavigateWithDirty) {
+				onNavigateWithDirty(navigate);
+			} else {
+				await navigate();
+			}
 		} else {
 			actions.setNotificationAction({
 				type: "error",
@@ -176,6 +184,8 @@ export interface IGlobalPageFormProps {
 	setHistoryPush?: (path: string, isEditor: boolean) => void;
 	header?: number | null;
 	footer?: number | null;
+	isDirty?: boolean;
+	onNavigateWithDirty?: (navigateCallback: () => void) => void;
 	actions: {
 		getGlobalFromLocalPageAction(): Promise<void>;
 		saveCurrentSiteInfoAction(): Promise<void>;

package/src/components/ConfigPanel/index.tsx

@@ -37,6 +37,8 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
 		footer,
 		isEditLive,
 		isDisabled = false,
+		isDirty,
+		onNavigateWithDirty,
 	} = props;
 
 	const wrapperRef = useRef<HTMLDivElement>(null);
@@ -74,6 +76,8 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
 					actions={actions}
 					header={header}
 					footer={footer}
+					isDirty={isDirty}
+					onNavigateWithDirty={onNavigateWithDirty}
 				/>
 			);
 		} else {
@@ -139,6 +143,8 @@ export interface IStateProps {
 	footer?: number | null;
 	isEditLive?: boolean;
 	isDisabled?: boolean;
+	isDirty?: boolean;
+	onNavigateWithDirty?: (navigateCallback: () => void) => void;
 }
 
 export default ConfigPanel;

package/src/components/Fields/ComponentArray/SameComponentArray/index.tsx

@@ -6,6 +6,7 @@ import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"
 import type { IComponent, IModule, INotification, ISchemaField, ITemplate, ModuleCategoryInfo } from "@ax/types";
 import { ComponentContainer, Toast } from "@ax/components";
 import { useBulkSelection, useToast } from "@ax/hooks";
+import { replaceElements } from "@ax/forms";
 
 import AddItemButton from "./AddItemButton";
 import { getComponentProps, getModulesToPaste, getTypefromKey } from "../helpers";
@@ -40,6 +41,10 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 	const type = getTypefromKey(objKey);
 	const { contentType = type } = field;
 	const componentIDs: number[] = value?.length ? value.map((element) => element.editorID) : [];
+	const componentType = field.reference ? selectedContent[field.reference] : selectedContent.kind;
+	const isModuleArr = contentType === "modules";
+	const isComponentModule = contentType === "components";
+	const showAddItemButton = !maxItems || (value && value.length < maxItems);
 
 	const {
 		addModuleAction,
@@ -57,7 +62,6 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 		useBulkSelection(componentIDs);
 	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
 
-
 	const sensors = useSensors(
 		useSensor(PointerSensor, {
 			activationConstraint: {
@@ -80,17 +84,13 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 		field,
 	);
 
+	const replacedElementsToPaste = replaceElements(modulesToPaste, componentType);
+	const showPasteModuleButton = showAddItemButton && replacedElementsToPaste.length > 0;
+
 	const getText = (name: string, index: number) => {
 		return value && value.length > 1 ? `#${index + 1} ${name}` : name;
 	};
 
-	const componentType = field.reference ? selectedContent[field.reference] : selectedContent.kind;
-
-	const isModuleArr = contentType === "modules";
-	const isComponentModule = contentType === "components";
-	const showAddItemButton = !maxItems || (value && value.length < maxItems);
-	const showPasteModuleButton = showAddItemButton && modulesToPaste.length > 0;
-
 	const handleAddModule = (moduleType: string) => addModuleAction(moduleType, objKey, editorID, isComponentModule);
 
 	const handleAddComponent = () => addComponentAction?.(componentType, objKey);
@@ -242,7 +242,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 							setNotification={setNotificationAction}
 							setHistoryPush={setHistoryPush}
 							arrayKey={objKey}
-							modulesToPaste={modulesToPaste}
+							modulesToPaste={replacedElementsToPaste}
 							slots={maxItems ? maxItems - value.length : null}
 						/>
 					)}

package/src/components/Fields/ReferenceField/ItemList/Item/index.tsx

@@ -1,10 +1,8 @@
-import React from "react";
-import { useSortable } from "@dnd-kit/sortable";
-
-import { IDataSource, IStructuredDataContent } from "@ax/types";
-import { getFormattedDateWithTimezone } from "@ax/helpers";
-
 import { Icon } from "@ax/components";
+import { getFormattedDateWithTimezone, getSlugFromUrl } from "@ax/helpers";
+import type { IDataSource, IStructuredDataContent } from "@ax/types";
+
+import { useSortable } from "@dnd-kit/sortable";
 
 import * as S from "./style";
 
@@ -50,6 +48,7 @@ const Item = (props: IProps): JSX.Element => {
 					<S.StyledActionMenu icon="more" options={menuOptions} size="s" tooltip="Actions" />
 				</S.Header>
 				<S.Title>{item.content.title}</S.Title>
+				<S.Slug>{getSlugFromUrl(item.relatedPage?.url)}</S.Slug>
 			</S.TextWrapper>
 		</S.Item>
 	);

package/src/components/Fields/ReferenceField/ItemList/Item/style.tsx

@@ -1,9 +1,8 @@
-import React from "react";
-import styled from "styled-components";
-import { CSS, Transform } from "@dnd-kit/utilities";
-
 import { ActionMenu } from "@ax/components";
 
+import { CSS, type Transform } from "@dnd-kit/utilities";
+import styled from "styled-components";
+
 const StyledActionMenu = styled((props) => <ActionMenu {...props} />)`
   width: ${(p) => p.theme.spacing.m};
   height: ${(p) => p.theme.spacing.m};
@@ -54,6 +53,7 @@ const Header = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
+// biome-ignore lint/suspicious/noShadowRestrictedNames: conflicts with js Date
 const Date = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => p.theme.color.textMediumEmphasis};
@@ -96,15 +96,21 @@ const IconHandleWrapper = styled.div`
   }
 `;
 
+const Slug = styled.span`
+  ${({ theme }) => theme.textStyle.uiXS};
+  color: ${({ theme }) => theme.colors.textMediumEmphasis};
+`;
+
 export {
-	Item,
-	TextWrapper,
-	Header,
-	Date,
-	Type,
-	Title,
 	ButtonsWrapper,
+	Date,
 	HandleWrapper,
+	Header,
 	IconHandleWrapper,
+	Item,
+	Slug,
 	StyledActionMenu,
+	TextWrapper,
+	Title,
+	Type,
 };

package/src/components/Fields/ReferenceField/ManualPanel/Item/index.tsx

@@ -1,8 +1,6 @@
-import React from "react";
-
-import { IDataSource, IStructuredDataContent } from "@ax/types";
-import { getFormattedDateWithTimezone } from "@ax/helpers";
 import { CheckField, Tooltip } from "@ax/components";
+import { getFormattedDateWithTimezone, getSlugFromUrl } from "@ax/helpers";
+import type { IDataSource, IStructuredDataContent } from "@ax/types";
 
 import * as S from "./style";
 
@@ -24,6 +22,7 @@ const Item = (props: IProps): JSX.Element => {
 						{item.modified && <S.Date>{getFormattedDateWithTimezone(item.modified, "d MMM Y")}</S.Date>}
 					</S.Header>
 					<S.Title>{item.content.title}</S.Title>
+					<S.Slug>{getSlugFromUrl(item.relatedPage?.url)}</S.Slug>
 				</S.TextWrapper>
 			</S.Item>
 		</Tooltip>

package/src/components/Fields/ReferenceField/ManualPanel/Item/style.tsx

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 
+// biome-ignore lint/suspicious/noShadowRestrictedNames: conflicts with js Date
 const Date = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
 `;
@@ -47,4 +48,9 @@ const Header = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
-export { Item, TextWrapper, Header, Date, Type, Title };
+const Slug = styled.span`
+  ${({ theme }) => theme.textStyle.uiXS};
+  color: ${({ theme }) => theme.colors.textMediumEmphasis};
+`;
+
+export { Date, Header, Item, Slug, TextWrapper, Title, Type };

package/src/components/Fields/VisualUniqueSelection/ScrollableSelection/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 
 import { IconAction, VisualOption } from "@ax/components";
 import { getOptions } from "../utils";
@@ -33,10 +33,10 @@ const ScrollableSelection = (props: IScrollableSelectionProps): JSX.Element => {
 	}, [carouselIndex, carouselItemWidth, columns]);
 
 	useEffect(() => {
-		if (carouselRef && carouselRef.current) {
+		if (carouselRef?.current) {
 			setCarouselItemWidth(Math.floor(carouselRef.current.offsetWidth / columns));
 		}
-	}, [carouselRef, columns]);
+	}, [columns]);
 
 	return (
 		<S.Wrapper data-testid="scrollableSelectionComponent">

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

@@ -1,7 +1,5 @@
-import React from "react";
-
-import ImageSelection, { IImageSelectionProps } from "./ImageSelection";
-import ScrollableSelection, { IScrollableSelectionProps } from "./ScrollableSelection";
+import ImageSelection, { type IImageSelectionProps } from "./ImageSelection";
+import ScrollableSelection, { type IScrollableSelectionProps } from "./ScrollableSelection";
 
 const VisualUniqueSelection = (props: IImageSelectionProps & IScrollableSelectionProps): JSX.Element => {
 	const { elementUniqueSelection = false } = props;

package/src/components/FloatingMenu/index.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { useHandleClickOutside } from "@ax/hooks";
 
@@ -27,8 +28,7 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
 	useEffect(() => {
 		if (isOpen && menuOptionsRef?.current) {
 			const bounding = menuOptionsRef.current.children[0].getBoundingClientRect();
-			const boundingChild =
-				menuOptionsRef.current.children[0] && menuOptionsRef.current.children[0].getBoundingClientRect();
+			const boundingChild = menuOptionsRef.current.children[0]?.getBoundingClientRect();
 			if (bounding.bottom > (window.innerHeight || document.documentElement.clientHeight)) {
 				menuOptionsRef.current.scrollIntoView({ block: "end", behavior: "smooth" });
 			}
@@ -52,7 +52,7 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
 
 	const closeWhenChecked = (e: React.MouseEvent<HTMLDivElement>) => {
 		const target = e.target as HTMLInputElement;
-		const isChecked = target && target.checked;
+		const isChecked = target?.checked;
 		isChecked && setOpen(false);
 	};
 
@@ -96,7 +96,7 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
 			data-testid="floating-menu"
 		>
 			<S.ButtonWrapper ref={buttonRef} data-testid="floating-menu-button">
-				<Button />
+				<Button disabled={disabled} />
 			</S.ButtonWrapper>
 
 			{isOpen && (

package/src/components/Loader/components/SmallCircle.js

@@ -0,0 +1,29 @@
+function SvgSmallCircle(props) {
+	return (
+		<svg viewBox="0 0 100 100" {...props}>
+			<title>spinning</title>
+			<circle
+				cx="50"
+				cy="50"
+				r="40"
+				fill="none"
+				stroke="#5057FF"
+				stroke-width="10"
+				stroke-linecap="round"
+				stroke-dasharray="200 300"
+			>
+				<animateTransform
+					attributeName="transform"
+					attributeType="XML"
+					type="rotate"
+					from="0 50 50"
+					to="360 50 50"
+					dur="0.75s"
+					repeatCount="indefinite"
+				/>
+			</circle>
+		</svg>
+	);
+}
+
+export default SvgSmallCircle;

package/src/components/Loader/index.tsx

@@ -2,13 +2,14 @@ import React from "react";
 
 import Circle from "./components/Circle";
 import Dots from "./components/Dots";
+import SmallCircle from "./components/SmallCircle";
 
-const components: Record<string, () => JSX.Element> = { Circle, Dots };
+const components: Record<string, () => JSX.Element> = { Circle, Dots, SmallCircle };
 
 const getImage = (name: string) => {
 	try {
 		return components[name];
-	} catch (err) {
+	} catch (_err) {
 		return null;
 	}
 };

package/src/components/MainWrapper/AppBar/atoms.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Button, Icon } from "@ax/components";
 
 import * as S from "./style";
@@ -16,8 +15,7 @@ const ActionMenuItem = (item: any, color?: boolean) => {
 const ActionMenuBtn = (props: any) => {
 	const { menu } = props;
 	return (
-		menu &&
-		menu.button && (
+		menu?.button && (
 			<S.ButtonWrapper>
 				<Button type="button" buttonStyle="line" onClick={menu.button.action} disabled={menu.button.disabled}>
 					{menu.button.label}
@@ -34,13 +32,13 @@ const ActionMenu = (props: any) => {
 		<S.ActionMenu>
 			<S.ActionMenuTitle> More actions </S.ActionMenuTitle>
 			<ActionMenuBtn menu={menu} />
-			{menu && menu.options.map((item: any) => item && ActionMenuItem(item))}
+			{menu?.options.map((item: any) => item && ActionMenuItem(item))}
 		</S.ActionMenu>
 	);
 };
 
 const DownArrowButton = (props: any) => (
-	<S.IconWrapper inversed={props.inversed} data-testid="down-arrow-button-wrapper">
+	<S.IconWrapper inversed={props.inversed} disabled={props.disabled} data-testid="down-arrow-button-wrapper">
 		<Icon name="DownArrow" />
 	</S.IconWrapper>
 );
@@ -57,4 +55,4 @@ const ActionSimpleMenu = (props: any) => {
 	);
 };
 
-export { ActionMenu, DownArrowButton, ActionSimpleMenu };
+export { ActionMenu, ActionSimpleMenu, DownArrowButton };

package/src/components/MainWrapper/AppBar/index.tsx

@@ -1,23 +1,23 @@
-import React, { useState } from "react";
-import { withRouter, RouteComponentProps } from "react-router-dom";
+import { useState } from "react";
+import { type RouteComponentProps, withRouter } from "react-router-dom";
 
-import { IErrorItem, ILanguage } from "@ax/types";
-import { getScheduleFormatDate, trimText } from "@ax/helpers";
-import { useModal } from "@ax/hooks";
 import {
 	Button,
-	Icon,
-	IconAction,
+	ErrorCenter,
+	ExportButton,
 	Flag,
 	FloatingMenu,
+	Icon,
+	IconAction,
 	LanguageMenu,
+	Modal,
+	SearchField,
 	Tabs,
 	Tooltip,
-	ErrorCenter,
-	SearchField,
-	Modal,
-	ExportButton,
 } from "@ax/components";
+import { getScheduleFormatDate, trimText } from "@ax/helpers";
+import { useModal } from "@ax/hooks";
+import type { IErrorItem, ILanguage } from "@ax/types";
 
 import { ActionMenu, ActionSimpleMenu, DownArrowButton } from "./atoms";
 
@@ -53,6 +53,7 @@ const AppBar = (props: IProps): JSX.Element => {
 		isDirty,
 		exportAction,
 		scheduledPublication,
+		isSaving,
 	} = props;
 
 	const publishedTooltip: Record<string, string> = {
@@ -275,7 +276,7 @@ const AppBar = (props: IProps): JSX.Element => {
 				)}
 				{downArrowMenu?.displayed && (downArrowMenu.button || downArrowMenu.options.length > 0) && (
 					<Tooltip content="Actions" hideOnClick bottom>
-						<FloatingMenu Button={DownArrowButton} isInAppBar={true}>
+						<FloatingMenu Button={DownArrowButton} isInAppBar={true} disabled={isSaving}>
 							<ActionMenu menu={downArrowMenu} />
 						</FloatingMenu>
 					</Tooltip>
@@ -317,6 +318,7 @@ export interface IAppBarProps {
 	isDirty?: boolean;
 	exportAction?(formats: (number | string)[]): void;
 	scheduledPublication?: string | null;
+	isSaving?: boolean;
 }
 
 type IProps = IAppBarProps & RouteComponentProps;