@griddo/ax 11.11.8-rc.1 → 11.12.0

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

@@ -1,9 +1,9 @@
-import { memo, useEffect, useState } from "react";
+import React, { memo, useEffect, useState } from "react";
 
 import { IconAction, TextField, FloatingPanel, FieldsBehavior, PageFinder } from "@ax/components";
 import { useModal } from "@ax/hooks";
 import { isReqOk } from "@ax/helpers";
-import type { IPage, IUrlField, Field, ISelectOption } from "@ax/types";
+import { IPage, IUrlField, Field, ISelectOption } from "@ax/types";
 import { pages as pagesApi } from "@ax/api";
 import { findAnchorsFromPage, findAnchorsFromTab, findTabsFromPage } from "./utils";
 
@@ -29,7 +29,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 	const [internalPageName, setInternalPageName] = useState(null);
 	const [pageData, setPageData] = useState<IPage | null>(null);
 
-	const pageID = value?.linkTo ? value.linkTo : null;
+	const pageID = value && value.linkTo ? value.linkTo : null;
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
@@ -67,13 +67,13 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 
 	const handleOnClick = () => {
 		toggleModal();
-		handlePanel?.(isOpen);
+		handlePanel && handlePanel(isOpen);
 	};
 
 	const handleReset = () => {
 		onChange(null);
 		setInternalPageName(null);
-		resetValidation?.();
+		resetValidation && resetValidation();
 	};
 
 	const handleSetPage = (page: IPage | IPage[]) => {
@@ -85,10 +85,10 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 			linkTo: selectedPage.id,
 			linkToURL: selectedPage.fullUrl,
 			title: selectedPage.title,
-			noFollow: !selectedPage.follow,
+			noFollow: !selectedPage.follow ? true : false,
 		});
-		handleValidation?.(selectedPage.id.toString(), validators);
-		handlePanel?.(isOpen);
+		handleValidation && handleValidation(selectedPage.id.toString(), validators);
+		handlePanel && handlePanel(isOpen);
 	};
 
 	const handleChange = (newValue: string) => onChange({ ...value, href: newValue });
@@ -113,7 +113,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 	};
 
 	const validator = { format: "fullURL" };
-	const defensiveHref = value?.href ? value.href : "";
+	const defensiveHref = value && value.href ? value.href : "";
 
 	let field = (
 		<TextField
@@ -140,7 +140,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 		);
 	}
 
-	const titleValue = value?.title ? value.title : internalPageName ? internalPageName : "";
+	const titleValue = value && value.title ? value.title : internalPageName ? internalPageName : "";
 	const noFollowValue =
 		value && value.noFollow !== undefined
 			? value.noFollow
@@ -160,7 +160,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 			type: "UniqueCheck" as Field,
 			name: "newTab",
 			options: [{ title: "Open in new tab" }],
-			value: value?.newTab ? value.newTab : null,
+			value: value && value.newTab ? value.newTab : null,
 			onChange: handleNewTabChange,
 		},
 		{
@@ -175,7 +175,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 	return (
 		<S.UrlFieldWrapper data-testid="url-field-wrapper">
 			{field}
-			{value?.linkTo && isTabsVisible && (
+			{value && value.linkTo && isTabsVisible && (
 				<S.AnchorWrapper>
 					<FieldsBehavior
 						title="Tab"
@@ -188,7 +188,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 					/>
 				</S.AnchorWrapper>
 			)}
-			{value?.linkTo && isVisible && (
+			{value && value.linkTo && isVisible && (
 				<S.AnchorWrapper>
 					<FieldsBehavior
 						title="Anchor"
@@ -203,19 +203,20 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 			)}
 			{showAdvanced && (
 				<S.AdvancedWrapper>
-					{advancedFields?.map((adField) => {
-						return (
-							<FieldsBehavior
-								key={adField.name}
-								options={adField.options}
-								name={adField.name}
-								title={adField.title}
-								fieldType={adField.type}
-								value={adField.value}
-								onChange={adField.onChange}
-							/>
-						);
-					})}
+					{advancedFields &&
+						advancedFields.map((adField) => {
+							return (
+								<FieldsBehavior
+									key={adField.name}
+									options={adField.options}
+									name={adField.name}
+									title={adField.title}
+									fieldType={adField.type}
+									value={adField.value}
+									onChange={adField.onChange}
+								/>
+							);
+						})}
 				</S.AdvancedWrapper>
 			)}
 			<FloatingPanel

package/src/components/Fields/index.tsx

@@ -17,7 +17,6 @@ import FormCategorySelect from "./FormCategorySelect";
 import FormContainer from "./FormContainer";
 import FormFieldArray from "./FormFieldArray";
 import HeadingField from "./HeadingField";
-import SEOPreview from "./SEOPreview";
 import HiddenField from "./HiddenField";
 import ImageField from "./ImageField";
 import LinkField from "./LinkField";
@@ -65,7 +64,6 @@ export {
 	FormContainer,
 	FormFieldArray,
 	HeadingField,
-	SEOPreview,
 	HiddenField,
 	ImageField,
 	LinkField,

package/src/components/FloatingPanel/index.tsx

@@ -1,4 +1,4 @@
-import { memo, useRef } from "react";
+import React, { memo, useRef } from "react";
 import { createPortal } from "react-dom";
 
 import { useHandleClickOutside } from "@ax/hooks";
@@ -16,13 +16,12 @@ const FloatingPanel = (props: IFloatingPanelProps): JSX.Element | null => {
 		handlePanel,
 		secondary,
 		closeOnOutsideClick = true,
-		width,
 	} = props;
 
 	const node = useRef<HTMLElement>(null);
 
 	const handleClickOutside = (e: any) => {
-		if (node.current?.contains(e.target) || isOpenedSecond || !closeOnOutsideClick) {
+		if ((node.current && node.current.contains(e.target)) || isOpenedSecond || !closeOnOutsideClick) {
 			return;
 		}
 		toggleModal();
@@ -47,7 +46,6 @@ const FloatingPanel = (props: IFloatingPanelProps): JSX.Element | null => {
 			isOpen={isOpen}
 			isOpenedSecond={isOpenedSecond}
 			secondary={secondary}
-			width={width}
 		>
 			<S.Header>
 				<S.Title>{title}</S.Title>
@@ -72,7 +70,6 @@ export interface IFloatingPanelProps {
 	handlePanel?: (value: boolean) => void;
 	secondary?: boolean;
 	closeOnOutsideClick?: boolean;
-	width?: number;
 }
 
 export default memo(FloatingPanel);

package/src/components/FloatingPanel/style.tsx

@@ -17,13 +17,12 @@ export const Wrapper = styled.section<{
 	isOpen: boolean;
 	isOpenedSecond: boolean | undefined;
 	secondary?: boolean;
-	width?: number;
 }>`
   position: fixed;
   right: 0;
   top: 0;
   z-index: 1200;
-  width: ${(p) => (p.width ? `${p.width}px` : `calc(${p.theme.spacing.xl} * 6)`)};
+  width: calc(${(p) => p.theme.spacing.xl} * 6);
   height: 100vh;
   background: ${(p) => p.theme.colors.uiBackground01};
   box-shadow: ${(p) => (p.secondary || !p.isOpen ? `none` : p.theme.shadow.rightPanel)};

package/src/components/IconAction/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Icon } from "@ax/components";
 
 import * as S from "./style";
@@ -19,7 +20,6 @@ const IconAction = (props: IIconActionProps): JSX.Element => {
 			size={size}
 			inversed={inversed}
 			active={active}
-			tabIndex={0}
 		>
 			<S.Icon data-testid={`icon-action-${icon}`}>
 				<Icon name={icon} />

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

@@ -190,7 +190,6 @@ const AppBar = (props: IProps): JSX.Element => {
 							setSelectedTab={tabs.action}
 							isInAppBar={true}
 							inversed={inversed}
-							disabled={tabs.disabled}
 						/>
 					</S.TabsContent>
 				</S.WrapperTabs>
@@ -292,13 +291,7 @@ export interface IAppBarProps {
 	backLink?: boolean | string;
 	rightButton?: { label: string; disabled?: boolean; action: (e: any) => void };
 	rightLineButton?: { label: string; disabled?: boolean; action: (e: any) => void };
-	tabs?: {
-		tabSet?: any;
-		icons?: { name: string; text: string }[];
-		selectedTab: string;
-		action: (e: any) => void;
-		disabled?: boolean;
-	};
+	tabs?: { tabSet?: any; icons?: { name: string; text: string }[]; selectedTab: string; action: (e: any) => void };
 	downArrowMenu?: { displayed: boolean; options: any; button: any };
 	title: string;
 	subtitle?: string;

package/src/components/MainWrapper/index.tsx

@@ -38,13 +38,7 @@ export interface IWrapperProps {
 	fixedAppBar?: boolean;
 	additionalClass?: string;
 	downArrowMenu?: { displayed: boolean; options: any; button: any };
-	tabs?: {
-		tabSet?: any;
-		icons?: { name: string; text: string }[];
-		selectedTab: string;
-		action: (e: any) => void;
-		disabled?: boolean;
-	};
+	tabs?: { tabSet?: any; icons?: { name: string; text: string }[]; selectedTab: string; action: (e: any) => void };
 	pageStatus?: string;
 	language?: { locale: string; id: number | null } | null;
 	availableLanguages?: ILanguage[];

package/src/components/Notification/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Icon } from "@ax/components";
 import SubNotification from "./SubNotification";
 
@@ -45,7 +45,7 @@ const Notification = (props: INotificationProps): JSX.Element => {
 	const handleClick = () => (onClick ? onClick() : handleErrorClick());
 
 	const handleClose = () => {
-		resetError?.();
+		resetError && resetError();
 		setIsVisible(false);
 	};
 

package/src/components/PageFinder/index.tsx

@@ -120,7 +120,7 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 			if (isReqOk(response.status)) {
 				setState((state) => ({ ...state, items: response.data.items, totalItems: response.data.totalItems }));
 			} else {
-				console.error("Error en getAndSetItems");
+				console.log("Error en getAndSetItems");
 			}
 			setIsLoading(false);
 		};

package/src/components/ResizePanel/index.tsx

@@ -4,10 +4,10 @@ import ResizeHandle from "./ResizeHandle";
 
 import * as S from "./style";
 
-const MIN_WIDTH = 368;
+const MIN_WIDTH = 344;
 
 const ResizePanel = (props: IResizePanelProps): JSX.Element => {
-	const { leftPanel, rightPanel, fixed = true, full = false, disabled } = props;
+	const { leftPanel, rightPanel, fixed = true, full = false } = props;
 
 	const [rwidth, setRwidth] = useState(MIN_WIDTH);
 	const rightPanelRef = useRef<HTMLDivElement>(null);
@@ -44,7 +44,7 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 					leftPanel
 				)}
 			</S.LeftPanel>
-			{!disabled && <ResizeHandle onMouseMove={resize} />}
+			<ResizeHandle onMouseMove={resize} />
 			<S.RightPanel ref={rightPanelRef} data-testid="right-panel" style={{ width: rwidth ? `${rwidth}px` : "auto" }}>
 				{rightPanel}
 			</S.RightPanel>
@@ -57,7 +57,6 @@ export interface IResizePanelProps {
 	rightPanel: JSX.Element | JSX.Element[];
 	fixed?: boolean;
 	full?: boolean;
-	disabled?: boolean;
 }
 
 export default ResizePanel;

package/src/components/ResizePanel/style.tsx

@@ -11,7 +11,7 @@ const RightPanel = styled.section`
   position: relative;
   padding: ${(p) => `0 ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
   flex-shrink: 0;
-  min-width: 368px;
+  min-width: 344px;
   max-width: ${(p) => `calc(100% - 500px - ${p.theme.spacing.m})`};
   flex-direction: column;
 `;

package/src/components/SearchField/style.tsx

@@ -1,6 +1,6 @@
-import styled from "styled-components";
+import { Button } from "@ax/components";
 
-import Button from "../Button";
+import styled from "styled-components";
 
 const Wrapper = styled.div`
   display: flex;

package/src/components/SideModal/index.tsx

@@ -140,7 +140,6 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 
 	const filteredOptions = options.options?.map((option) => {
 		const optionComponent = typeof option === "string" ? option : option.component;
-		const optionKey = typeof option === "string" ? option : (option.id ?? option.editorID ?? optionComponent);
 		const displayName = getDisplayName(optionComponent);
 		if (searchQuery.length > 0) {
 			const name = displayName.toLowerCase();
@@ -148,7 +147,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 			if (!name.includes(search)) return null;
 		}
 		return (
-			<SideModalOption option={option} handleClick={handleClick} key={optionKey} theme={theme}>
+			<SideModalOption option={option} handleClick={handleClick} key={optionComponent} theme={theme}>
 				{displayName}
 			</SideModalOption>
 		);

package/src/components/Tabs/index.tsx

@@ -1,10 +1,10 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { Icon, Tooltip } from "@ax/components";
 
 import * as S from "./style";
 
 const Tabs = (props: ITabsProps): JSX.Element => {
-	const { tabs, icons, active, setSelectedTab, isInAppBar, noMargins, inversed, disabled } = props;
+	const { tabs, icons, active, setSelectedTab, isInAppBar, noMargins, inversed } = props;
 
 	useEffect(() => {
 		tabs && tabs.length === 1 && setSelectedTab(tabs[0]);
@@ -14,10 +14,7 @@ const Tabs = (props: ITabsProps): JSX.Element => {
 		return (
 			<S.TabsRow isInAppBar={isInAppBar} noMargins={noMargins} data-testid="tabs-row">
 				{tabs.map((tab: any) => {
-					const handleClick = () => {
-						if (disabled) return;
-						setSelectedTab(tab);
-					};
+					const handleClick = () => setSelectedTab(tab);
 					return (
 						<S.TabItem
 							isInAppBar={isInAppBar}
@@ -25,7 +22,6 @@ const Tabs = (props: ITabsProps): JSX.Element => {
 							active={tab === active}
 							onClick={handleClick}
 							data-testid="tab"
-							isDisabled={disabled}
 						>
 							{tab}
 						</S.TabItem>
@@ -39,17 +35,13 @@ const Tabs = (props: ITabsProps): JSX.Element => {
 		return (
 			<S.TabsRow icons={true} isInAppBar={isInAppBar} data-testid="icons-tabs-row">
 				{icons.map((tab: ITabIcon) => {
-					const handleClick = () => {
-						if (disabled) return;
-						setSelectedTab(tab.name);
-					};
+					const handleClick = () => setSelectedTab(tab.name);
 					return (
 						<S.TabItem
 							key={tab.name}
 							active={tab.name === active}
 							onClick={handleClick}
 							inversed={inversed}
-							isDisabled={disabled}
 							data-testid="icon-tab"
 						>
 							<S.TabIcon>
@@ -75,7 +67,6 @@ export interface ITabsProps {
 	setSelectedTab: any;
 	noMargins?: boolean;
 	inversed?: boolean;
-	disabled?: boolean;
 }
 
 export interface ITabIcon {

package/src/components/Tabs/style.tsx

@@ -8,14 +8,15 @@ const TabsRow = styled.div<{ icons?: boolean; isInAppBar?: boolean; noMargins?:
   height: ${(p) => (p.noMargins || p.isInAppBar ? "auto" : "100%")};
 `;
 
-const TabItem = styled.button<{ active: boolean; isInAppBar?: boolean; inversed?: boolean; isDisabled?: boolean }>`
+const TabItem = styled.button<{ active: boolean; isInAppBar?: boolean; inversed?: boolean }>`
   flex-grow: 1;
-  ${(p) => p.theme.textStyle.headingXS};
   border: none;
-  border-bottom: ${(p) => (p.active ? "4px solid" : "none")};
-  border-color: ${(p) => (p.isDisabled ? p.theme.color.interactiveDisabled : p.inversed ? p.theme.color.iconHighEmphasisInverse : p.theme.color.interactive01)};
+  border-bottom: 4px solid
+    ${(p) =>
+			!p.active ? "transparent" : p.inversed ? p.theme.color.iconHighEmphasisInverse : p.theme.color.interactive01};
+  ${(p) => p.theme.textStyle.headingXS};
   color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
-  cursor: ${(p) => (p.active || p.isDisabled ? "initial" : "pointer")};
+  cursor: ${(p) => (p.active ? "initial" : "pointer")};
   background: transparent;
   height: ${(p) => (p.isInAppBar ? "100%" : "48px")};
 
@@ -23,7 +24,7 @@ const TabItem = styled.button<{ active: boolean; isInAppBar?: boolean; inversed?
     color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.interactive01)};
     svg {
       path {
-        fill: ${(p) => (p.isDisabled ? p.theme.color.interactiveDisabled : p.inversed ? p.theme.color.iconHighEmphasisInverse : p.theme.color.interactive01)};
+        fill: ${(p) => (p.inversed ? p.theme.color.iconHighEmphasisInverse : p.theme.color.interactive01)};
       }
     }
   }
@@ -38,7 +39,7 @@ const TabItem = styled.button<{ active: boolean; isInAppBar?: boolean; inversed?
     height: ${(p) => p.theme.spacing.m};
     path {
       fill: ${(p) =>
-				!p.active || p.isDisabled
+				!p.active
 					? p.theme.color.interactiveDisabled
 					: p.inversed
 						? p.theme.color.iconHighEmphasisInverse

package/src/components/Toast/index.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import React, { useRef, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 
 import { createPortal } from "react-dom";
@@ -14,9 +14,7 @@ const Toast = (props: IToastProps): JSX.Element => {
 	const isEditor = pathname.includes("/editor");
 
 	let temp: NodeJS.Timeout;
-	const setTemp = (time: number) => {
-		temp = setTimeout(() => setIsVisible(false), time);
-	};
+	const setTemp = (time: number) => (temp = setTimeout(() => setIsVisible(false), time));
 
 	const close = () => {
 		if (toast.current) {

package/src/components/Tooltip/index.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 
 import { useHandleClickOutside } from "@ax/hooks";
@@ -5,7 +6,7 @@ import { useHandleClickOutside } from "@ax/hooks";
 import * as S from "./style";
 
 const Tooltip = (props: ITooltipProps) => {
-	const { content, children, hideOnClick = true, bottom, left, expanded, top, className } = props;
+	const { content, children, hideOnClick = true, bottom, left, expanded, top } = props;
 
 	const initialState: IState = {
 		active: false,
@@ -99,7 +100,6 @@ const Tooltip = (props: ITooltipProps) => {
 			onMouseLeave={hideTip}
 			onMouseDown={handleClick}
 			expanded={expanded}
-			className={className}
 		>
 			<div ref={childrenRef}>{children}</div>
 			<S.Tip
@@ -127,14 +127,13 @@ interface IState {
 }
 
 export interface ITooltipProps {
-	content?: React.ReactNode;
+	content?: string | boolean | JSX.Element[] | JSX.Element;
 	children: any;
 	hideOnClick?: boolean;
 	bottom?: boolean;
 	left?: number;
 	expanded?: boolean;
 	top?: number;
-	className?: string;
 }
 
 export default Tooltip;

package/src/components/index.tsx

@@ -45,7 +45,6 @@ import {
 	RadioGroup,
 	ReferenceField,
 	RichText,
-	SEOPreview,
 	Select,
 	SummaryButton,
 	TextArea,
@@ -65,16 +64,13 @@ import FilterTagsBar from "./FilterTagsBar";
 import Flag from "./Flag";
 import FloatingButton from "./FloatingButton";
 import FloatingMenu from "./FloatingMenu";
-import FloatingNote from "./FloatingNote";
 import FloatingPanel from "./FloatingPanel";
 import Gallery from "./Gallery";
 import GuardModal from "./GuardModal";
-import HeadingsPreviewModal from "./HeadingsPreviewModal";
 import Icon from "./Icon";
 import IconAction from "./IconAction";
 import Image from "./Image";
 import InformativeMenu from "./InformativeMenu";
-import KeywordsPreviewModal from "./KeywordsPreviewModal";
 import LanguageMenu from "./LanguageMenu";
 import { ListItem, ListTitle } from "./Lists";
 import Loader from "./Loader";
@@ -168,14 +164,12 @@ export {
 	Flag,
 	FloatingButton,
 	FloatingMenu,
-	FloatingNote,
 	FloatingPanel,
 	FormCategorySelect,
 	FormContainer,
 	FormFieldArray,
 	Gallery,
 	GuardModal,
-	HeadingsPreviewModal,
 	HeadingField,
 	HiddenField,
 	Icon,
@@ -183,7 +177,6 @@ export {
 	Image,
 	ImageField,
 	InformativeMenu,
-	KeywordsPreviewModal,
 	IntegrationsField,
 	LanguageMenu,
 	LastAccessFilter,
@@ -220,7 +213,6 @@ export {
 	SearchField,
 	SearchTagsBar,
 	Select,
-	SEOPreview,
 	SharePageModal,
 	SideModal,
 	SiteFilter,