@griddo/ax 11.13.2 → 11.13.3-rc.1

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

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { checkgroups } from "@ax/api";
 import { isReqOk } from "@ax/helpers";
-import { ISite, ICheck, ILanguage } from "@ax/types";
+import type { ICheck, ILanguage, ISite } from "@ax/types";
 
 import * as S from "./style";
 
@@ -23,30 +23,39 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
 		allOption = false,
 	} = props;
 
-	const safeValue = value && Array.isArray(value) ? value : [];
+	const safeValue = useMemo(() => (value && Array.isArray(value) ? value : []), [value]);
 	const [options, setOptions] = useState<ICheckValue[]>([]);
 	const [allSelected, setAllSelected] = useState<boolean>(false);
 
-	const languagesIds = Array.isArray(contentLanguages)
-		? languages?.filter((lang) => contentLanguages.includes(lang.locale)).map((lang) => lang.id)
-		: contentLanguages === "all"
-			? languages?.map((lang) => lang.id)
-			: [];
+	const onChangeRef = useRef(onChange);
+	useEffect(() => {
+		onChangeRef.current = onChange;
+	}, [onChange]);
+
+	const languagesIds = useMemo(
+		() =>
+			Array.isArray(contentLanguages)
+				? languages?.filter((lang) => contentLanguages.includes(lang.locale)).map((lang) => lang.id)
+				: contentLanguages === "all"
+					? languages?.map((lang) => lang.id)
+					: [],
+		[contentLanguages, languages],
+	);
 
-	const isCheckValue = (object: any): object is ICheckValue => "value" in object;
+	const isCheckValue = useCallback((object: any): object is ICheckValue => "value" in object, []);
 
-	const getAllIds = (results: ICheckValue[]) => {
+	const getAllIds = useCallback((results: ICheckValue[]): number[] => {
 		return results.reduce((acc: number[], current) => {
 			acc.push(current.value);
 			const children = getAllIds(current.children || []);
 			if (children.length) {
-				acc = [...acc, ...children];
+				acc.push(...children);
 			}
 			return acc;
 		}, []);
-	};
+	}, []);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
+	// biome-ignore lint/correctness/useExhaustiveDependencies: safeValue, getAllIds, isCheckValue captured in closure; only refetch when API params change
 	useEffect((): any => {
 		let isSubscribed = true;
 
@@ -71,7 +80,7 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
 			.then((result) => {
 				if (isSubscribed) {
 					setOptions(result);
-					if (!!safeValue.length && safeValue.length === result.length) {
+					if (safeValue.length > 0 && safeValue.length === result.length) {
 						setAllSelected(true);
 					}
 					if (safeValue.length > 0 && isCheckValue(safeValue[0])) {
@@ -79,104 +88,113 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
 						const resultIDs = result && getAllIds(result);
 						const fixedState = safeValue.reduce((acc: ICheckValue[], current: ICheckValue) => {
 							if (resultIDs.includes(current.value)) {
-								return [...acc, current];
-							} else {
-								const trad = result.find(
-									(value: ICheckValue) =>
-										value.dataLanguages && value.dataLanguages.find((data: any) => data.id === current.value),
-								);
-								if (trad) {
-									return [...acc, trad];
-								}
-								return acc;
+								return acc.concat(current);
+							}
+							const trad = result.find((value: ICheckValue) =>
+								value.dataLanguages?.find((data: any) => data.id === current.value),
+							);
+							if (trad) {
+								return acc.concat(trad);
 							}
+							return acc;
 						}, []);
-						onChange(fixedState);
+						onChangeRef.current(fixedState);
 					}
 				}
 			})
 			.catch((apiError) => console.log(apiError));
 
-		return () => (isSubscribed = false);
-	}, [site, source, allLanguages]);
+		return () => {
+			isSubscribed = false;
+		};
+	}, [site, source, allLanguages, contentType, languagesIds]);
 
-	const filterOptions = (options: ICheckValue[], ids: number[]) => {
+	const filterOptions = useCallback((options: ICheckValue[], ids: number[]) => {
 		return options.reduce((acc: ICheckValue[], current) => {
 			if (ids.includes(current.value)) {
 				acc.push(current);
 			}
 			const children = filterOptions(current.children || [], ids);
 			if (children.length) {
-				acc = [...acc, ...children];
+				acc.push(...children);
 			}
 			return acc;
 		}, []);
-	};
+	}, []);
 
-	const handleChange = (newValue: ICheck) => {
-		const arrayIds = safeValue.map((e: any) => (typeof e === "number" ? e : e.value));
+	const handleChange = useCallback(
+		(newValue: ICheck) => {
+			const arrayIds = safeValue.map((e: any) => (typeof e === "number" ? e : e.value));
 
-		let newArray: number[] = [];
-		const isInArray = arrayIds.find((e: any) => e === newValue.value);
+			let newArray: number[] = [];
+			const isInArray = arrayIds.find((e: any) => e === newValue.value);
 
-		if (isInArray && !newValue.isChecked) {
-			newArray = arrayIds.filter((e: any) => e !== newValue.value);
-		}
+			if (isInArray && !newValue.isChecked) {
+				newArray = arrayIds.filter((e: any) => e !== newValue.value);
+			}
 
-		if (!isInArray && newValue.isChecked) {
-			newArray = [...arrayIds, newValue.value];
-		}
+			if (!isInArray && newValue.isChecked) {
+				newArray = [...arrayIds, newValue.value];
+			}
 
-		const newArrayObject = filterOptions(options, newArray);
+			const newArrayObject = filterOptions(options, newArray);
 
-		if (!!newArrayObject.length && newArrayObject.length === options.length) {
-			setAllSelected(true);
-		} else {
-			setAllSelected(false);
-		}
+			if (newArrayObject.length > 0 && newArrayObject.length === options.length) {
+				setAllSelected(true);
+			} else {
+				setAllSelected(false);
+			}
 
-		onChange(newArrayObject);
-		error && handleValidation && handleValidation(newArrayObject);
-	};
+			onChangeRef.current(newArrayObject);
+			error && handleValidation && handleValidation(newArrayObject);
+		},
+		[safeValue, options, filterOptions, error, handleValidation],
+	);
 
-	const handleCheckAll = () => {
+	const handleCheckAll = useCallback(() => {
 		setAllSelected((state) => !state);
 
 		if (!allSelected) {
 			const values = options.map((option) => {
 				return { ...option, isChecked: true };
 			});
-			onChange(values);
+			onChangeRef.current(values);
 		} else {
-			onChange([]);
+			onChangeRef.current([]);
 		}
-	};
-
-	const isChecked = (id: number): boolean =>
-		!!safeValue.find((e: ICheckValue | number) => (typeof e === "number" ? e === id : e.value === id));
-
-	const renderChecks = (options: ICheckValue[]): JSX.Element[] => {
-		return options.map((item) => {
-			return (
-				<React.Fragment key={`${item.name}${item.value}`}>
-					{item.type === "group" ? (
-						<S.GroupTitle>{item.title}</S.GroupTitle>
-					) : (
-						<S.StyledCheckField
-							onChange={handleChange}
-							checked={isChecked(item.value)}
-							value={item.value}
-							title={item.title}
-							name={item.name}
-							disabled={item.disabled || disabled}
-							error={item.error}
-						/>
-					)}
-					{item.children && <S.GroupWrapper>{renderChecks(item.children)}</S.GroupWrapper>}
-				</React.Fragment>
-			);
-		});
-	};
+	}, [allSelected, options]);
+
+	const isChecked = useCallback(
+		(id: number): boolean =>
+			!!safeValue.find((e: ICheckValue | number) => (typeof e === "number" ? e === id : e.value === id)),
+		[safeValue],
+	);
+
+	const renderChecks = useCallback(
+		(options: ICheckValue[]): JSX.Element[] => {
+			return options.map((item) => {
+				return (
+					<React.Fragment key={`${item.name}${item.value}`}>
+						{item.type === "group" ? (
+							<S.GroupTitle>{item.title}</S.GroupTitle>
+						) : (
+							<S.StyledCheckField
+								onChange={handleChange}
+								checked={isChecked(item.value)}
+								value={item.value}
+								title={item.title}
+								name={item.name}
+								disabled={item.disabled || disabled}
+								error={item.error}
+							/>
+						)}
+						{item.children && <S.GroupWrapper>{renderChecks(item.children)}</S.GroupWrapper>}
+					</React.Fragment>
+				);
+			});
+		},
+		[handleChange, isChecked, disabled],
+	);
 
 	return (
 		<S.FieldGroup full={fullHeight}>

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import type { GroupBase, InputActionMeta, OptionsOrGroups } from "react-select";
+import type { GroupBase, InputActionMeta, MenuProps, OptionsOrGroups } from "react-select";
 import { components } from "react-select";
 
 import { checkgroups, selects } from "@ax/api";
@@ -30,30 +30,30 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 		filterLang,
 		languages,
 		contentLanguages,
+		forceLanguage,
 	} = props;
 
 	const initialState: IState = {
 		items: [],
-		hasEmptyOption: true,
 		inputText: "",
 	};
 
 	const [state, setState] = useState(initialState);
 	const menuRef = useRef<HTMLDivElement | null>(null);
 
-	const isPage = entity === "pages";
-	const isCategories = entity === "categories";
 	const className = error ? `react-select-error ${type}` : type;
 	const isSearchable = type !== "inline";
 
-	const languagesIds = Array.isArray(contentLanguages)
-		? languages?.filter((lang) => contentLanguages.includes(lang.locale)).map((lang) => lang.id)
-		: contentLanguages === "all"
-			? languages?.map((lang) => lang.id)
-			: [];
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
+	// biome-ignore lint/correctness/useExhaustiveDependencies: lang es necesaria para recargar opciones al cambiar idioma
 	useEffect(() => {
+		const isPage = entity === "pages";
+		const isCategories = entity === "categories";
+		const languagesIds = Array.isArray(contentLanguages)
+			? languages?.filter((language) => contentLanguages.includes(language.locale)).map((language) => language.id)
+			: contentLanguages === "all"
+				? languages?.map((language) => language.id)
+				: [];
+
 		const getItems = async () => {
 			let data = [];
 			try {
@@ -63,8 +63,8 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 						const fullOptions = languagesIds?.length ? { ...options, languagesIds } : options;
 						result =
 							isPage && selectedContent
-								? await selects.getSelectSiteItems(site.id, entity, fullOptions, selectedContent.id)
-								: await selects.getSelectSiteItems(site.id, entity, fullOptions);
+								? await selects.getSelectSiteItems(site.id, entity, fullOptions, selectedContent.id, forceLanguage)
+								: await selects.getSelectSiteItems(site.id, entity, fullOptions, undefined, forceLanguage);
 					} else {
 						result = await selects.getSelectItems(entity, entityId, filterLang);
 					}
@@ -104,7 +104,22 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 		return () => {
 			isMounted = false;
 		};
-	}, [entity, site, lang, selectedContent, entityId, mandatory, placeholder, filter, isCategories, isPage, options]);
+	}, [
+		entity,
+		site,
+		lang,
+		selectedContent,
+		entityId,
+		mandatory,
+		placeholder,
+		filter,
+		source,
+		options,
+		contentLanguages,
+		languages,
+		filterLang,
+		forceLanguage,
+	]);
 
 	const handleChange = (selectedValue: unknown | null) => {
 		const newValue = selectedValue ? (selectedValue as ICheck | IOption).value : null;
@@ -117,9 +132,7 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 
 	const handleInputChange = (inputText: string, meta: InputActionMeta) => {
 		if (meta.action !== "input-blur" && meta.action !== "menu-close") {
-			const inputValue = inputText.replace(/\W/g, "");
-			const hasEmptyOption = inputValue.length === 0;
-			setState((state) => ({ ...state, hasEmptyOption, inputText }));
+			setState((state) => ({ ...state, inputText }));
 		}
 	};
 
@@ -127,9 +140,7 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 		inputValue: string,
 		callback: (options: OptionsOrGroups<unknown, GroupBase<unknown>>) => void,
 	) => {
-		setTimeout(() => {
-			callback(filterOptions(inputValue));
-		}, 0);
+		callback(filterOptions(inputValue));
 	};
 
 	const getObjectValue = (val: string | number | null | undefined, options: IOption[]) => {
@@ -156,7 +167,7 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 		}
 	};
 
-	const Menu = (menuProps: any) => (
+	const Menu = (menuProps: MenuProps<unknown, false, GroupBase<unknown>>) => (
 		<div ref={menuRef}>
 			<components.Menu {...menuProps} />
 		</div>
@@ -190,7 +201,6 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 
 interface IState {
 	items: IOption[];
-	hasEmptyOption: boolean;
 	inputText: string;
 }
 
@@ -226,6 +236,7 @@ export interface IAsyncSelectProps {
 	filterLang?: number;
 	languages?: ILanguage[];
 	contentLanguages?: "current" | "all" | string[];
+	forceLanguage?: number;
 }
 
 export default AsyncSelect;

package/src/components/Fields/DateField/DatePickerInput/index.tsx

@@ -6,7 +6,7 @@ import { getRange, getStringifyDateRange, isValidDate, isValidDateRange, stringT
 
 import * as S from "./style";
 
-const DatePickerInput = (props: IDatePickerProps): JSX.Element => {
+const DatePickerInput = (props: IDatePickerProps, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
 	const { dates, onClick, handleChange, isOpen, error, disabled, handleValidation, validators } = props;
 	const { start, end } = dates;
 	const placeholder = "dd/mm/yyyy";
@@ -63,7 +63,7 @@ const DatePickerInput = (props: IDatePickerProps): JSX.Element => {
 	);
 
 	return (
-		<S.InputWrapper error={error}>
+		<S.InputWrapper ref={ref} error={error}>
 			<S.Input
 				value={value || ""}
 				placeholder={placeholder}

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import DatePicker, { registerLocale } from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import en from "date-fns/locale/en-GB";
@@ -87,12 +87,12 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
 		setDates(rangeDates);
 		onChange(selectedDate);
 
-		handleValidation && handleValidation(selectedDate, dateValidators);
+		handleValidation?.(selectedDate, dateValidators);
 	};
 
 	const { start, end } = dates;
 
-	const ref = React.createRef();
+	const ref = useRef(null);
 	const CustomInput = (
 		<DatePickerInput
 			dates={dates}

package/src/components/Fields/IntegrationsField/SideModal/index.tsx

@@ -1,9 +1,9 @@
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { createPortal } from "react-dom";
 
 import { useHandleClickOutside } from "@ax/hooks";
 import { IconAction } from "@ax/components";
-import { IIntegration } from "@ax/types";
+import type { IIntegration } from "@ax/types";
 
 import SideModalOption from "./SideModalOption";
 import * as S from "./style";

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

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 import { connect } from "react-redux";
 import { differenceInSeconds } from "date-fns";
 
-import { IIntegration, IRootState, ISite, ILanguage } from "@ax/types";
+import type { IIntegration, IRootState, ISite, ILanguage } from "@ax/types";
 import { useModal } from "@ax/hooks";
 import { Tooltip, IconAction } from "@ax/components";
 import { integrationsActions } from "@ax/containers/Integrations";
@@ -25,9 +25,13 @@ const IntegrationsField = (props: IIntegrationsFieldProps): JSX.Element => {
 		integrationCopy,
 	} = props;
 
-	const [state, setState] = useState<Partial<IIntegration>[]>(value || null);
+	const [state, setState] = useState<Partial<IIntegration>[]>(value || []);
 	const { isOpen, toggleModal } = useModal();
 
+	useEffect(() => {
+		setState(value || []);
+	}, [value]);
+
 	useEffect(() => {
 		const params = {
 			pagination: false,
@@ -36,25 +40,25 @@ const IntegrationsField = (props: IIntegrationsFieldProps): JSX.Element => {
 		site && getIntegrations(site.id, params, true);
 	}, [getIntegrations, site]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
-	useEffect(() => {
-		onChange && state && onChange(state);
-	}, [state]);
+	const updateState = (newState: Partial<IIntegration>[]) => {
+		setState(newState);
+		onChange?.(newState);
+	};
 
 	const handleAdd = (integration: Partial<IIntegration>) => {
-		setState((state) => (state ? [...state, integration] : [integration]));
+		updateState([...state, integration]);
 	};
 
 	const handleEditIntegration = (modifiedIntegration: Partial<IIntegration>, index: number) => {
 		const newIntegrations = [...state];
 		newIntegrations.splice(index, 1, modifiedIntegration);
-		setState(newIntegrations);
+		updateState(newIntegrations);
 	};
 
 	const removeItem = (index: number) => {
 		const newValue = [...state];
 		newValue.splice(index, 1);
-		setState(newValue);
+		updateState(newValue);
 	};
 
 	const availableIntegrations = integrations.filter(

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

@@ -1,9 +1,9 @@
-import React, { useState, memo, useRef } from "react";
+import { memo, useCallback, useRef, useState } from "react";
 
-import { ILanguage, ISite } from "@ax/types";
 import AsyncCheckGroup from "@ax/components/Fields/AsyncCheckGroup";
 import CheckGroup from "@ax/components/Fields/CheckGroup";
 import { useHandleClickOutside } from "@ax/hooks";
+import type { ILanguage, ISite } from "@ax/types";
 
 import * as S from "./style";
 
@@ -29,19 +29,19 @@ const MultiCheckSelect = (props: IMultiCheckSelectProps) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const wrapperRef = useRef<HTMLDivElement | null>(null);
 
-	const handleClick = () => setIsOpen(!isOpen);
+	const handleClick = useCallback(() => setIsOpen((prev) => !prev), []);
 
-	const handleClickOutside = (e: MouseEvent) => {
+	const handleClickOutside = useCallback((e: MouseEvent) => {
 		if (wrapperRef.current?.contains(e.target as HTMLElement)) {
 			return;
 		}
 
 		setIsOpen(false);
-	};
+	}, []);
 
 	useHandleClickOutside(isOpen, handleClickOutside);
 
-	const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
+	const Asterisk = useCallback(() => (mandatory ? <S.Asterisk>*</S.Asterisk> : null), [mandatory]);
 
 	return (
 		<S.Wrapper ref={wrapperRef} className={className} data-testid="multi-check-select-wrapper">

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

@@ -1,6 +1,6 @@
-import React, { memo } from "react";
+import { memo, useCallback } from "react";
 
-import { ILanguage, ISite } from "@ax/types";
+import type { ILanguage, ISite } from "@ax/types";
 
 import * as S from "./style";
 
@@ -19,47 +19,49 @@ const MultiCheckSelectGroup = (props: IMultiCheckSelectGroupProps) => {
 		contentType = "data",
 	} = props;
 
-	const completedValue = value ? value : {};
+	const completedValue = value ?? {};
+
+	const handleElementChange = useCallback(
+		(elementKey: string, val: any[]) => {
+			const newValue = { ...completedValue };
+			if (val.length > 0) {
+				newValue[elementKey] = val;
+			} else {
+				delete newValue[elementKey];
+			}
+
+			onChange(newValue);
+			error && handleValidation && handleValidation(newValue);
+		},
+		[completedValue, onChange, error, handleValidation],
+	);
 
 	return (
 		<>
 			{note && <S.StyledNoteField value={{ text: note }} />}
-			{elements &&
-				elements.map((element) => {
-					const { placeholder, source, key, mandatory, isGlobal, allOption } = element;
-
-					const handleChange = (val: any[]) => {
-						let newValue = { ...completedValue };
-						if (val.length > 0) {
-							newValue = { ...newValue, [key]: val };
-						} else {
-							delete newValue[key];
-						}
-
-						onChange(newValue);
-						error && handleValidation && handleValidation(newValue);
-					};
+			{elements?.map((element) => {
+				const { placeholder, source, key, mandatory, isGlobal, allOption } = element;
 
-					const val = completedValue[key] ? completedValue[key] : [];
-					const fromSite = isGlobal ? null : site;
+				const val = (completedValue[key] as any[]) ?? [];
+				const fromSite = isGlobal ? null : site;
 
-					return (
-						<S.StyledMultiCheckSelect
-							key={key}
-							mandatory={mandatory}
-							value={val}
-							onChange={handleChange}
-							site={fromSite}
-							placeholder={placeholder}
-							source={source}
-							disabled={disabled}
-							contentType={contentType}
-							languages={languages}
-							contentLanguages={contentLanguages}
-							allOption={allOption}
-						/>
-					);
-				})}
+				return (
+					<S.StyledMultiCheckSelect
+						key={key}
+						mandatory={mandatory}
+						value={val}
+						onChange={(newVal: string | any[]) => handleElementChange(key, newVal as any[])}
+						site={fromSite}
+						placeholder={placeholder}
+						source={source}
+						disabled={disabled}
+						contentType={contentType}
+						languages={languages}
+						contentLanguages={contentLanguages}
+						allOption={allOption}
+					/>
+				);
+			})}
 		</>
 	);
 };

package/src/components/Fields/MultiCheckSelectGroup/style.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import styled from "styled-components";
+
 import MultiCheckSelect from "../MultiCheckSelect";
 import NoteField from "../NoteField";
 

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

@@ -120,8 +120,6 @@ const ManualPanel = (props: IProps) => {
 		setState((state) => ({ ...state, site: siteID }));
 	};
 
-	console.log(form.site);
-
 	return (
 		<S.Wrapper>
 			{state.fixed.length > 0 && (