@griddo/ax 11.13.2 → 11.13.3-rc.1

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

@@ -1,13 +1,16 @@
-import React, { useState, useEffect, memo, useRef } from "react";
+import type React from "react";
+import { memo, useEffect, useRef, useState } from "react";
 import { Editor } from "react-draft-wysiwyg";
-import { EditorState, convertFromRaw, convertToRaw, ContentState } from "draft-js";
-import { markdownToDraft, draftToMarkdown } from "markdown-draft-js";
+
+import { ContentState, convertFromRaw, convertToRaw, EditorState } from "draft-js";
+import { stateFromHTML } from "draft-js-import-html";
 import draftToHtml from "draftjs-to-html";
 import htmlToDraft from "html-to-draftjs";
-import { stateFromHTML } from "draft-js-import-html";
-import { formatIframe } from "./utils";
+import { draftToMarkdown, markdownToDraft } from "markdown-draft-js";
 import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
 
+import { formatIframe } from "./utils";
+
 import * as S from "./style";
 
 const RichText = (props: IRichTextProps): JSX.Element => {
@@ -32,6 +35,7 @@ const RichText = (props: IRichTextProps): JSX.Element => {
 
 	const [editorState, setEditorState] = useState(() => EditorState.createWithContent(contentState));
 	const timeOutRef = useRef<ReturnType<typeof setTimeout>>();
+	const isMountRef = useRef(true);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
@@ -43,6 +47,10 @@ const RichText = (props: IRichTextProps): JSX.Element => {
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
+		if (isMountRef.current) {
+			isMountRef.current = false;
+			return;
+		}
 		if (delayed !== false) {
 			timeOutRef.current && clearTimeout(timeOutRef.current);
 			timeOutRef.current = setTimeout(() => {
@@ -77,9 +85,9 @@ const RichText = (props: IRichTextProps): JSX.Element => {
 		return false;
 	};
 
-	const handleOnBlur = (event: React.FocusEvent<HTMLTextAreaElement>, editorState: EditorState) => {
+	const handleOnBlur = (_event: React.FocusEvent<HTMLTextAreaElement>, editorState: EditorState) => {
 		const plainContent = editorState.getCurrentContent().getPlainText();
-		handleValidation && handleValidation(plainContent, validators);
+		handleValidation?.(plainContent, validators);
 	};
 
 	const toolbar = {

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

@@ -1,4 +1,5 @@
-import React, { memo, useEffect, useRef, useState } from "react";
+import type React from "react";
+import { memo, useEffect, useRef, useState } from "react";
 
 import * as S from "./style";
 
@@ -10,10 +11,12 @@ const TextArea = (props: ITextAreaProps): JSX.Element => {
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		timeOutRef.current && clearTimeout(timeOutRef.current);
-		timeOutRef.current = setTimeout(() => {
-			delayedChange();
-		}, 300);
+		if (state !== value) {
+			timeOutRef.current && clearTimeout(timeOutRef.current);
+			timeOutRef.current = setTimeout(() => {
+				delayedChange();
+			}, 300);
+		}
 	}, [state]);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
@@ -31,7 +34,7 @@ const TextArea = (props: ITextAreaProps): JSX.Element => {
 	};
 
 	const handleOnBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
-		handleValidation && handleValidation(e.target.value);
+		handleValidation?.(e.target.value);
 	};
 
 	return (

package/src/components/FloatingMenu/index.tsx

@@ -1,10 +1,12 @@
 import type React from "react";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useRef, useState, type ReactNode } from "react";
 
 import { useHandleClickOutside } from "@ax/hooks";
 
 import * as S from "./style";
 
+const CLOSED_POSITION = { openUpward: false, leftwardOffset: 0, isVisible: false };
+
 const FloatingMenu = (props: IFloatingProps): JSX.Element => {
 	const {
 		children,
@@ -24,43 +26,37 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
 	const buttonRef = useRef<HTMLDivElement | null>(null);
 	const menuOptionsRef = useRef<HTMLDivElement | null>(null);
 	const [isOpen, setOpen] = useState(false);
+	const [menuPosition, setMenuPosition] = useState(CLOSED_POSITION);
 
-	useEffect(() => {
-		if (isOpen && menuOptionsRef?.current) {
-			const bounding = 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" });
-			}
-			if (boundingChild && boundingChild.right > window.innerWidth) {
-				menuOptionsRef.current.style.right = "130px";
-			}
-		}
+	useLayoutEffect(() => {
+		if (!isOpen || !menuOptionsRef.current) return;
+
+		const bounding = menuOptionsRef.current.getBoundingClientRect();
+		const openUpward = bounding.bottom > document.documentElement.clientHeight;
+		const rightOverflow = bounding.right - document.documentElement.clientWidth;
+		const leftwardOffset = rightOverflow > 0 ? rightOverflow : 0;
+
+		setMenuPosition({ openUpward, leftwardOffset, isVisible: true });
 	}, [isOpen]);
 
+	const closeMenu = useCallback(() => {
+		actionOnClose?.();
+		setOpen(false);
+		setMenuPosition(CLOSED_POSITION);
+	}, [actionOnClose]);
+
 	const handleClickOutside = (e: MouseEvent) => {
 		if (wrapperRef.current?.contains(e.target as HTMLElement)) {
 			return;
 		}
 
-		if (actionOnClose) {
-			actionOnClose();
-		}
-
-		setOpen(false);
+		closeMenu();
 	};
 
 	const closeWhenChecked = (e: React.MouseEvent<HTMLDivElement>) => {
 		const target = e.target as HTMLInputElement;
 		const isChecked = target?.checked;
-		isChecked && setOpen(false);
-	};
-
-	const closeWhenApply = (e: React.MouseEvent<HTMLDivElement>) => {
-		const target = e.target as HTMLSpanElement;
-		if (target.innerHTML === "Apply") {
-			setOpen(false);
-		}
+		isChecked && closeMenu();
 	};
 
 	const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -70,20 +66,22 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
 		const optionWasSelected = isOpen && menuOptionsRef.current?.contains(e.target as HTMLElement);
 
 		if (buttonWasClicked) {
-			setOpen(!isOpen);
+			isOpen ? closeMenu() : setOpen(true);
 		}
 
 		if (optionWasSelected) {
-			closeOnSelect ? (isCheckGroup ? closeWhenChecked(e) : setOpen(!isOpen)) : setOpen(true);
+			if ((e.target as HTMLElement).closest("[data-close-menu]")) {
+				closeMenu();
+			} else {
+				closeOnSelect ? (isCheckGroup ? closeWhenChecked(e) : closeMenu()) : setOpen(true);
+			}
 		}
-
-		closeWhenApply(e);
 	};
 
 	const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) =>
 		reactiveToHover && !isOpen ? handleClick(e) : null;
 
-	const handleMouseLeave = () => reactiveToHover && isOpen && setOpen(false);
+	const handleMouseLeave = () => reactiveToHover && isOpen && closeMenu();
 
 	useHandleClickOutside(isOpen, handleClickOutside);
 
@@ -105,6 +103,9 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
 					ref={menuOptionsRef}
 					position={position}
 					offset={offset}
+					openUpward={menuPosition.openUpward}
+					leftwardOffset={menuPosition.leftwardOffset}
+					isVisible={menuPosition.isVisible}
 					data-testid="floating-menu-wrapper"
 				>
 					<S.Menu hasMargin={hasMargin} width={fixedWidth}>
@@ -117,7 +118,7 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
 };
 
 export interface IFloatingProps {
-	children: JSX.Element | (JSX.Element | boolean | JSX.Element[])[] | boolean;
+	children: ReactNode;
 	Button: (props?: any) => React.JSX.Element;
 	isInAppBar?: boolean;
 	position?: string;

package/src/components/FloatingMenu/style.tsx

@@ -1,6 +1,8 @@
 import styled from "styled-components";
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+  position: relative;
+`;
 
 const ButtonWrapper = styled.div`
   display: flex;
@@ -8,12 +10,28 @@ const ButtonWrapper = styled.div`
   cursor: pointer;
 `;
 
-const MenuWrapper = styled.div<{ isInAppBar?: boolean; position: string; offset?: number }>`
+const MenuWrapper = styled.div<{
+	isInAppBar?: boolean;
+	position: string;
+	offset?: number;
+	openUpward?: boolean;
+	leftwardOffset?: number;
+	isVisible?: boolean;
+}>`
+  && {
+    max-width: initial;
+  }
   position: absolute;
   z-index: 7;
-  padding-top: ${(p) => (p.isInAppBar ? p.theme.spacing.s : p.theme.spacing.xs)};
-  margin-right: ${(p) => (p.isInAppBar ? p.theme.spacing.s : "0")};
-  ${(p) => p.position}: ${(p) => (p.offset ? `${p.offset}px` : "0")};
+  visibility: ${(p) => (p.isVisible ? "visible" : "hidden")};
+  ${(p) =>
+		p.leftwardOffset
+			? `right: ${p.leftwardOffset}px; left: auto;`
+			: `${p.position}: ${p.offset ? `${p.offset}px` : "0"};`}
+  ${(p) =>
+		p.openUpward
+			? `bottom: 100%; padding-bottom: ${p.theme.spacing.xs};`
+			: `top: 100%; padding-top: ${p.isInAppBar ? p.theme.spacing.s : p.theme.spacing.xs};`}
 `;
 
 const Menu = styled.div<{ hasMargin: boolean; width?: number }>`

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

@@ -8,9 +8,9 @@ function SvgSmallCircle(props) {
 				r="40"
 				fill="none"
 				stroke="#5057FF"
-				stroke-width="10"
-				stroke-linecap="round"
-				stroke-dasharray="200 300"
+				strokeWidth="10"
+				strokeLinecap="round"
+				strokeDasharray="200 300"
 			>
 				<animateTransform
 					attributeName="transform"

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

@@ -144,6 +144,7 @@ const Header = styled.section<{ inversed?: boolean }>`
   padding-right: ${(p) => p.theme.spacing.s};
   margin-bottom: 1px;
   border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  min-width: 1280px;
 
   button:first-child {
     margin-left: ${(p) => p.theme.spacing.m};

package/src/components/SideModal/index.tsx

@@ -138,7 +138,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 				return getCategoryItem(category, i);
 			});
 
-	const filteredOptions = options.options?.map((option) => {
+	const filteredOptions = options.options?.map((option, i) => {
 		const optionComponent = typeof option === "string" ? option : option.component;
 		const optionKey = typeof option === "string" ? option : (option.id ?? option.editorID ?? optionComponent);
 		const displayName = getDisplayName(optionComponent);

package/src/components/TableFilters/CategoryFilter/index.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
 import { areEquals, isReqOk, trimText } from "@ax/helpers";
 import { checkgroups } from "@ax/api";
-import { IFilterValue, IQueryValue } from "@ax/types";
+import type { IFilterValue, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -52,24 +52,23 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
 			console.log(e);
 		}
 		setIsLoading(false);
-		return false;
+		return [];
 	};
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		getSelectCategories().then((items) => {
-			items &&
-				items.forEach((item: { value: string; title: string }) => {
-					if (hideValues.includes(item.value)) {
-						setHideFilter(true);
-					}
-					const newFilter = {
-						name: item.value,
-						value: item.value,
-						title: item.title,
-					};
-					filters.push(newFilter);
-				});
+			items?.forEach((item: { value: string; title: string }) => {
+				if (hideValues.includes(item.value)) {
+					setHideFilter(true);
+				}
+				const newFilter = {
+					name: item.value,
+					value: item.value,
+					title: item.title,
+				};
+				filters.push(newFilter);
+			});
 			setOptions(filters);
 		});
 	}, [siteID]);

package/src/containers/App/actions.tsx

@@ -11,6 +11,7 @@ import history from "../../routes/history";
 import {
 	IS_LOGGING_IN,
 	LOGOUT,
+	RESET_LOADING,
 	SET_ERROR,
 	SET_GLOBAL_LANGUAGES,
 	SET_GLOBAL_SETTINGS,
@@ -25,6 +26,7 @@ import {
 import type {
 	IIsLoggingInAction,
 	ILogoutAction,
+	IResetLoading,
 	ISetErrorAction,
 	ISetGlobalLanguages,
 	ISetGlobalSettings,
@@ -50,8 +52,12 @@ function setHasAnimation(hasAnimation: boolean): ISetHasAnimation {
 	return { type: SET_HAS_ANIMATION, payload: { hasAnimation } };
 }
 
+function resetLoading(): IResetLoading {
+	return { type: RESET_LOADING };
+}
+
 const resetStateValues = (dispatch: Dispatch) => {
-	dispatch(setIsLoading(true));
+	dispatch(resetLoading());
 	dispatch(setIsSaving(false));
 };
 

package/src/containers/App/constants.tsx

@@ -12,10 +12,12 @@ const SET_GLOBAL_SETTINGS = `${NAME}/SET_GLOBAL_SETTINGS`;
 const SET_USER = `${NAME}/SET_USER`;
 const SET_SESSION_STARTED_AT = `${NAME}/SET_SESSION_STARTED_AT`;
 const SET_HAS_ANIMATION = `${NAME}/SET_HAS_ANIMATION`;
+const RESET_LOADING = `${NAME}/RESET_LOADING`;
 
 export {
 	IS_LOGGING_IN,
 	LOGOUT,
+	RESET_LOADING,
 	SET_ERROR,
 	SET_GLOBAL_LANGUAGES,
 	SET_GLOBAL_SETTINGS,

package/src/containers/App/interfaces.tsx

@@ -1,6 +1,7 @@
 import type {
 	IS_LOGGING_IN,
 	LOGOUT,
+	RESET_LOADING,
 	SET_ERROR,
 	SET_GLOBAL_LANGUAGES,
 	SET_GLOBAL_SETTINGS,
@@ -76,6 +77,10 @@ export interface ISetHasAnimation {
 	payload: { hasAnimation: boolean };
 }
 
+export interface IResetLoading {
+	type: typeof RESET_LOADING;
+}
+
 export type AppActionsCreators = ISetIsLoading & ISetIsSaving;
 
 export type AuthActionsCreators = ISetTokenAction &

package/src/containers/App/reducer.tsx

@@ -5,6 +5,7 @@ import { REHYDRATE } from "redux-persist/lib/constants";
 import {
 	IS_LOGGING_IN,
 	LOGOUT,
+	RESET_LOADING,
 	SET_ERROR,
 	SET_GLOBAL_LANGUAGES,
 	SET_GLOBAL_SETTINGS,
@@ -20,6 +21,7 @@ import {
 export interface IAppState {
 	isRehydrated: boolean;
 	isLoading: boolean;
+	loadingCount: number;
 	isSaving: boolean;
 	error: IError;
 	user: IUser;
@@ -65,6 +67,7 @@ export interface IGlobalSettings {
 export const initialState = {
 	isRehydrated: true,
 	isLoading: true,
+	loadingCount: 0,
 	isSaving: false,
 	error: {
 		code: undefined,
@@ -103,9 +106,15 @@ export const initialState = {
 export function reducer(state = initialState, action: any): IAppState {
 	switch (action.type) {
 		case REHYDRATE:
-			return { ...state, isRehydrated: true, schemasLoading: false, schemasError: null };
+			return { ...state, isRehydrated: true, loadingCount: 0, schemasLoading: false, schemasError: null };
+		case SET_IS_LOADING: {
+			const delta = action.payload.isLoading ? 1 : -1;
+			const loadingCount = Math.max(0, state.loadingCount + delta);
+			return { ...state, loadingCount, isLoading: loadingCount > 0 };
+		}
+		case RESET_LOADING:
+			return { ...state, loadingCount: 0, isLoading: true };
 		case SET_TOKEN:
-		case SET_IS_LOADING:
 		case SET_IS_SAVING:
 		case IS_LOGGING_IN:
 		case LOGOUT:

package/src/containers/Forms/actions.tsx

@@ -190,10 +190,10 @@ function getForm(formID: number | null): (dispatch: Dispatch, getState: () => IR
 					const formData: Partial<FormContent> = response.data;
 					if (isNewTranslation) {
 						delete formData.id;
-						formData["state"] = "inactive";
-						formData["canBeTranslated"] = true;
-						formData["originalLanguage"] = formData.language;
-						formData["formInUse"] = null;
+						formData.state = "inactive";
+						formData.canBeTranslated = true;
+						formData.originalLanguage = formData.language;
+						formData.formInUse = null;
 					}
 					generateFormContent(formData)(dispatch, getState);
 					dispatch(setCurrentFormID(response.data.id));
@@ -821,8 +821,6 @@ function orderFormCategory(
 ): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
 	return async (dispatch, getState) => {
 		try {
-			dispatch(setIsLoading(true));
-
 			const responseActions = {
 				handleSuccess: () => getFormCategories(data.categoryType)(dispatch, getState),
 				handleError: (response: any) => appActions.handleError(response)(dispatch),
@@ -830,7 +828,7 @@ function orderFormCategory(
 
 			const callback = async () => forms.orderFormCategory(data);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [setIsLoading])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;

package/src/containers/Integrations/actions.tsx

@@ -188,8 +188,6 @@ function orderIntegration(
 				sites: { currentSiteInfo },
 			} = getState();
 
-			dispatch(appActions.setIsLoading(true));
-
 			const callback = async () => integrations.orderIntegration(id, newOrder);
 			const responseActions = {
 				handleSuccess: () => {
@@ -198,7 +196,7 @@ function orderIntegration(
 				},
 				handleError: (response: any) => appActions.handleError(response)(dispatch),
 			};
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;

package/src/containers/Navigation/Menu/actions.tsx

@@ -83,7 +83,7 @@ function getMenus(hasLoading = true): (dispatch: Dispatch, getState: () => IRoot
 	return async (dispatch, getState) => {
 		try {
 			const { currentSiteInfo, type } = getStateValues(getState);
-			const id = currentSiteInfo && currentSiteInfo.id;
+			const id = currentSiteInfo?.id;
 
 			const responseActions = {
 				handleSuccess: (menus: IMenu[]) => {
@@ -114,9 +114,9 @@ function getCurrentMenu(menuType: string): (dispatch: Dispatch, getState: () =>
 			const { savedMenus } = getStateValues(getState);
 			setEditorMenuContent(savedMenus || [], menuType, dispatch);
 			updateTotalItems(dispatch, getState);
+			dispatch(setIsLoading(false));
 		} catch (e) {
 			console.log("Error", e);
-			dispatch(setIsLoading(false));
 		}
 	};
 }

package/src/containers/PageEditor/actions.tsx

@@ -392,8 +392,8 @@ function getPage(
 				await getTemplateConfig(template)(dispatch, getState);
 				generateNewPage(dispatch, getState, baseSchema);
 			}
-		} catch (e) {
 			dispatch(setIsLoading(false));
+		} catch (e) {
 			console.log(e); // TODO: capturar error bien
 		}
 	};
@@ -410,8 +410,8 @@ function getTemplatePage(template: string): (dispatch: Dispatch, getState: () =>
 			await getTemplateConfig(template)(dispatch, getState);
 			await getDefaults()(dispatch, getState);
 			generateNewPage(dispatch, getState, baseSchema);
-		} catch (e) {
 			dispatch(setIsLoading(false));
+		} catch (e) {
 			console.log(e); // TODO: capturar error bien
 		}
 	};
@@ -1456,6 +1456,7 @@ function getGlobalFromLocalPage(): (dispatch: Dispatch, getState: any) => Promis
 			dispatch(setCurrentPageID(originalGlobalPage));
 			structuredDataActions.setSelectedStructuredData(structuredData, "global")(dispatch, getState);
 			usersActions.getUserCurrentPermissions()(dispatch, getState);
+			dispatch(setIsLoading(false));
 		} catch (e) {
 			console.log(e);
 		}