@griddo/ax 11.14.2-rc.1 → 11.14.3-rc.0

package/config/jest/setup.js

@@ -16,10 +16,16 @@ module.exports = () => {
 
 window.matchMedia =
 	window.matchMedia ||
-	function () {
-		return {
-			matches: false,
-			addListener: function () {},
-			removeListener: function () {},
-		};
-	};
+	(() => ({
+		matches: false,
+		addListener: function () {},
+		removeListener: function () {},
+	}));
+
+class ResizeObserverMock {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+}
+
+global.ResizeObserver = ResizeObserverMock;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.14.2-rc.1",
+	"version": "11.14.3-rc.0",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -219,5 +219,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a08bea26f0f939c8f93c9d59b5d54e80fd776700"
+	"gitHead": "c1d5913f76bb852a5100c7b2ee6b50e5b2128f7d"
 }

package/src/__tests__/components/ImageDragAndDrop/ImageDragAndDrop.test.tsx

@@ -1,6 +1,7 @@
 import { Provider } from "react-redux";
 
 import ImageDragAndDrop from "@ax/components/ImageDragAndDrop";
+import { VALID_IMAGE_FORMATS } from "@ax/constants";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
@@ -37,7 +38,7 @@ const renderImageDragAndDrop = (props = {}, storeData = initialStore) => {
 	return render(
 		<Provider store={store}>
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<ImageDragAndDrop siteID="global" validFormats={["jpg", "jpeg", "png"]} handleUpload={jest.fn()} {...props} />
+				<ImageDragAndDrop siteID="global" handleUpload={jest.fn()} {...props} />
 			</ThemeProvider>
 		</Provider>,
 	);
@@ -61,7 +62,9 @@ describe("ImageDragAndDrop rendering", () => {
 
 	it("should render valid formats text", () => {
 		renderImageDragAndDrop();
-		const validFormatsTexts = screen.getAllByText(/jpg, jpeg, png/);
+		const validFormatsTexts = screen.getAllByText((_, element) => {
+			return VALID_IMAGE_FORMATS.every((format) => element?.textContent?.includes(format));
+		});
 		expect(validFormatsTexts.length).toBeGreaterThan(0);
 	});
 
@@ -75,7 +78,8 @@ describe("ImageDragAndDrop rendering", () => {
 		renderImageDragAndDrop();
 		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
 		expect(fileInput).toBeTruthy();
-		expect(fileInput.accept).toBe(".jpg,.jpeg,.png");
+		const expectedAccept = VALID_IMAGE_FORMATS.map((format) => `.${format}`).join(",");
+		expect(fileInput.accept).toBe(expectedAccept);
 	});
 
 	it("should render placeholder when isAllowedToUpload is false", () => {

package/src/__tests__/components/KeywordsPreviewModal/KeywordsPreviewModal.test.tsx

@@ -71,7 +71,8 @@ describe("KeywordsPreviewModal component rendering", () => {
 		renderComponent({ ...defaultProps, isOpen: true, keywordsFilter: ["seo"] });
 
 		expect(screen.getByText("Show keyword:")).toBeTruthy();
-		expect(screen.getByText("seo")).toBeTruthy();
+		const seoElements = screen.getAllByText("seo");
+		expect(seoElements.length).toBeGreaterThan(0);
 	});
 
 	it("should not render the filter section when keywordsFilter is empty", () => {
@@ -87,8 +88,8 @@ describe("KeywordsPreviewModal component events", () => {
 
 		renderComponent({ ...defaultProps, isOpen: true, toggleModal: toggleModalMock });
 
-		const closeButton = screen.getByTestId("icon-action-component");
-		fireEvent.click(closeButton);
+		const closeButtons = screen.getAllByTestId("icon-action-component");
+		fireEvent.click(closeButtons[0]);
 		expect(toggleModalMock).toBeCalled();
 	});
 

package/src/components/CategoryCell/index.tsx

@@ -1,5 +1,7 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
+
 import { ElementsTooltip } from "@ax/components";
+
 import * as S from "./style";
 
 const CategoryCell = (props: ICategoryCellProps): JSX.Element => {

package/src/components/ConfigPanel/index.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useRef, useState } from "react";
 
-import { isEmptyObj } from "@ax/helpers";
 import { Loading } from "@ax/components";
+import { isEmptyObj } from "@ax/helpers";
+import { useFirefoxScrollLock } from "@ax/hooks";
 import type { IBreadcrumbItem, IUserEditing } from "@ax/types";
 
 import Form from "./Form";
-import NavigationForm from "./NavigationForm";
 import GlobalPageForm from "./GlobalPageForm";
-import PreviewForm from "./PreviewForm";
 import Header from "./Header";
+import NavigationForm from "./NavigationForm";
+import PreviewForm from "./PreviewForm";
 
 import * as S from "./style";
 
@@ -53,6 +54,8 @@ const ConfigPanel = (props: IStateProps) => {
 		}
 	}, [lastElementAddedId]);
 
+	useFirefoxScrollLock(wrapperRef);
+
 	if (isLoading || isEmptyObj(schema)) {
 		return <Loading />;
 	}

package/src/components/ElementsTooltip/index.tsx

@@ -66,11 +66,15 @@ const ElementsTooltip = (props: IElementsTooltipProps): JSX.Element => {
 
 	if (!elements) return <></>;
 
-	const visibleElements = elements.slice(0, defaultElements);
-	const remainingElements = elements.length - defaultElements;
+	const filteredElements = elements.filter((element) => element !== null && element !== "");
+
+	if (filteredElements.length === 0) return <></>;
+
+	const visibleElements = filteredElements.slice(0, defaultElements);
+	const remainingElements = filteredElements.length - defaultElements;
 
 	const elementsRows: string[][] = [];
-	elements.forEach((element, idx) => {
+	filteredElements.forEach((element, idx) => {
 		const row = Math.floor(idx / elementsPerRow);
 		const isNewRow = idx % elementsPerRow === 0;
 		elementsRows[row] = isNewRow ? [element] : [...elementsRows[row], element];
@@ -91,7 +95,7 @@ const ElementsTooltip = (props: IElementsTooltipProps): JSX.Element => {
 		<>
 			<S.Wrapper data-testid="elements-wrapper">
 				{visibleElements.map((fullElement, idx) => {
-					const element = defaultElements === 1 && maxChar ? trimText(fullElement, maxChar) : fullElement;
+					const element = maxChar ? trimText(fullElement, maxChar) : fullElement;
 					const color = defaultColor || colors?.[element];
 
 					return (

package/src/components/ErrorPage/index.tsx

@@ -40,7 +40,9 @@ const ErrorPage = (props: IProps): JSX.Element => {
 			title: "Something went wrong",
 			description: <>Try refreshing the page, or try again later</>,
 			buttonText: "Refresh page",
-			buttonAction: () => history.push("/logout"),
+			buttonAction: () => {
+				window.location.href = "/logout";
+			},
 		},
 		wrongEditor: {
 			icon: "working",

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

@@ -21,7 +21,6 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
 
 	const addFile = (newFile: any) => {
 		onChange(newFile);
-		toggleModal();
 	};
 
 	const handleOnClickUrl = () => {

package/src/components/FilterTagsBar/index.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { IQueryValue } from "@ax/types";
+import type { IQueryValue } from "@ax/types";
+
 import Button from "../Button";
 
 import * as S from "./style";
@@ -37,7 +37,7 @@ const FilterTagsBar = (props: IFilterTagsBarProps): JSX.Element => {
 			<S.TagList>
 				{tags.map((tag: string, index: number) => {
 					const handleDeleteTag = () => deleteTag(tag);
-					return <S.StyledTag key={index} text={tag} color="#FFFFFF" onDeleteAction={handleDeleteTag} />;
+					return <S.StyledTag key={index} text={tag} color="#FFFFFF" maxChar={30} onDeleteAction={handleDeleteTag} />;
 				})}
 			</S.TagList>
 			<S.ButtonWrapper>

package/src/components/HeadingsPreviewModal/utils.tsx

@@ -1,3 +1,4 @@
+import { GRIDDO_ID } from "@ax/constants";
 import type { HeadingFilter, HeadingLevel, HeadingNode } from "@ax/types";
 
 const MAX_HEADING_LENGTH = 70;
@@ -150,7 +151,7 @@ const analyzeHeadings = (headings: HeadingNode[], isFiltering = false): IHeading
 
 const parseHeadingsTree = (html: HTMLDivElement): HeadingNode[] => {
 	const frameObject = html.querySelector<HTMLIFrameElement>(".frame-content");
-	const frameContent = frameObject?.contentWindow?.document.getElementById("___griddo") as HTMLElement;
+	const frameContent = frameObject?.contentWindow?.document.getElementById(GRIDDO_ID) as HTMLElement;
 
 	if (!frameContent) {
 		return [];

package/src/components/KeywordsPreviewModal/atoms.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
+import { FieldsBehavior, Modal } from "@ax/components";
 import type { IModal } from "@ax/types";
-import { Modal, FieldsBehavior } from "@ax/components";
 
 import * as S from "./style";
 
@@ -39,7 +39,7 @@ const AddKeywordsModal = (props: IAddKeywordsModal) => {
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
-			height={282}
+			height={288}
 		>
 			<S.ModalContent>
 				<FieldsBehavior

package/src/components/KeywordsPreviewModal/index.tsx

@@ -69,16 +69,16 @@ const KeywordsPreviewModal = (props: IKeywordsPreviewProps) => {
 						)}
 						<S.KeywordsListWrapper>
 							{keywords.length === 0 && <S.StyledSummaryButton />}
-							{Object.keys(keywordCounts).map((key, index) => {
-								const isSelected = keywordsFilter.includes(key);
+							{keywords.map((keyword, index) => {
+								const isSelected = keywordsFilter.includes(keyword);
 								return (
 									<KeywordItem
-										keyword={key}
-										count={keywordCounts[key]}
+										keyword={keyword}
+										count={keywordCounts[keyword] ?? 0}
 										isSelected={isSelected}
-										onClick={handleAddTag(key)}
+										onClick={handleAddTag(keyword)}
 										deleteKeyword={handleDeleteKeyword}
-										key={`${key}-${index}`}
+										key={`${keyword}-${index}`}
 									/>
 								);
 							})}

package/src/components/KeywordsPreviewModal/utils.tsx

@@ -1,16 +1,18 @@
+import { GRIDDO_ID } from "@ax/constants";
+
 const countKeywords = (html: HTMLDivElement, keywords: string[]) => {
 	const frameObject = html.querySelector<HTMLIFrameElement>(".frame-content");
-	const frameContent = frameObject?.contentWindow?.document.getElementById("___griddo") as HTMLElement;
+	const frameContent = frameObject?.contentWindow?.document.getElementById(GRIDDO_ID) as HTMLElement;
 
 	if (!frameContent) {
 		return {};
 	}
 
-	const htmlContent = frameContent.innerText.toLowerCase();
+	const htmlContent = frameContent.innerText.toLowerCase().normalize("NFC");
 	const keywordCounts: Record<string, number> = {};
 
 	keywords.forEach((keyword) => {
-		const lowerKeyword = keyword.toLowerCase();
+		const lowerKeyword = keyword.toLowerCase().normalize("NFC");
 		const regex = new RegExp(lowerKeyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
 		const matches = htmlContent.match(regex);
 		keywordCounts[keyword] = matches ? matches.length : 0;

package/src/components/Modal/style.tsx

@@ -26,6 +26,11 @@ const getHeight = (size: string | undefined) => {
 	}
 };
 
+const getModalHeight = (height?: number | string, size?: string) => {
+	const heightProp = typeof height === "number" ? `${height}px` : height;
+	return height !== undefined ? heightProp : getHeight(size);
+};
+
 const ModalOverlay = styled.div<{ isChild?: boolean }>`
   position: fixed;
   top: 0;
@@ -51,11 +56,6 @@ const ModalWrapper = styled.div<{ isChild?: boolean }>`
   outline: 0;
 `;
 
-function getModalHeight(height?: number | string, size?: string) {
-	const heightProp = typeof height === "number" ? `${height}px` : height;
-	return height !== undefined ? heightProp : getHeight(size);
-}
-
 const Modal = styled.div<{ size?: string; height?: number | string }>`
   z-index: 100;
   display: flex;

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

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+
 import { CheckGroup, FloatingMenu, Icon, ListTitle, SearchField } from "@ax/components";
 import { areEquals } from "@ax/helpers";
-import { IFilterValue, IQueryValue } from "@ax/types";
+import type { IFilterValue, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 

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

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
-import { CheckGroup, Icon, FloatingMenu, ListTitle } from "@ax/components";
 import { checkgroups } from "@ax/api";
+import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
 import { areEquals, isReqOk } from "@ax/helpers";
-import { IFilterValue, IPageLiveStatus, IQueryValue } from "@ax/types";
+import type { IFilterValue, IPageLiveStatus, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -54,7 +54,7 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
 							title: item.title,
 							icon: item.status,
 						};
-						if ((filterOptions && filterOptions.includes(newFilter.value)) || !filterOptions) {
+						if (filterOptions?.includes(newFilter.value) || !filterOptions) {
 							filters.push(newFilter);
 						}
 					});

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

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
+import { selects } from "@ax/api";
 import { CheckGroupFilter } from "@ax/components";
 import { isReqOk } from "@ax/helpers";
-import { selects } from "@ax/api";
-import { IFilterValue, IQueryValue } from "@ax/types";
+import type { IFilterValue, IQueryValue } from "@ax/types";
 
 const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
 	const {
@@ -47,15 +47,14 @@ const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
 	useEffect(() => {
 		getSelectSites()
 			.then((items) => {
-				items &&
-					items.forEach((item: { value: string; label: string }) => {
-						const newFilter = {
-							name: item.value,
-							value: item.value,
-							title: item.label,
-						};
-						filters.push(newFilter);
-					});
+				items?.forEach((item: { value: string; label: string }) => {
+					const newFilter = {
+						name: item.value,
+						value: item.value,
+						title: item.label,
+					};
+					filters.push(newFilter);
+				});
 
 				setOptions(filters);
 			})

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

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
 import { areEquals } from "@ax/helpers";
-import { IFilterValue, IQueryValue } from "@ax/types";
+import type { IFilterValue, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 

package/src/components/TableFilters/TranslationsFilter/style.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
+import styled from "styled-components";
+
 const Translations = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 115px;
   justify-content: center;

package/src/components/Tag/index.tsx

@@ -3,7 +3,14 @@ import { Icon } from "@ax/components";
 import * as S from "./style";
 
 const Tag = (props: ITagProps): JSX.Element => {
-	const { type, text, color, icon, textColor, rounded = true, onDeleteAction, className, small } = props;
+	const { type, text, color, icon, textColor, rounded = true, onDeleteAction, className, small, maxChar } = props;
+
+	const truncateText = (str: string, max: number) => {
+		if (str.length <= max) return str;
+		return `${str.slice(0, max)}...`;
+	};
+
+	const displayText = maxChar && text ? truncateText(text, maxChar) : text;
 
 	const handleClick = () => {
 		if (onDeleteAction) {
@@ -22,27 +29,27 @@ const Tag = (props: ITagProps): JSX.Element => {
 	switch (type) {
 		case "status":
 			return (
-				<S.TagStatus className={className} data-testid="tag-status">
+				<S.TagStatus className={className} data-testid="tag-status" title={text || ""}>
 					<S.Bullet color={color} />
-					{text}
+					{displayText}
 				</S.TagStatus>
 			);
 		case "square":
 			return (
-				<S.TagSquare color={color} textColor={textColor} className={className} data-testid="tag-square">
+				<S.TagSquare color={color} textColor={textColor} className={className} data-testid="tag-square" title={text || ""}>
 					{icon && (
 						<S.IconTag>
 							<Icon name={icon} size="16" />
 						</S.IconTag>
 					)}
-					<div>{text}</div>
+					<div>{displayText}</div>
 				</S.TagSquare>
 			);
 		default:
 			return (
-				<S.TagFixed color={color} rounded={rounded} small={small} className={className} data-testid="tag-fixed">
+				<S.TagFixed color={color} rounded={rounded} small={small} className={className} data-testid="tag-fixed" title={text || ""}>
 					<S.TagText>
-						<S.Title data-testid="tag-fixed-title">{text}</S.Title>
+						<S.Title data-testid="tag-fixed-title">{displayText}</S.Title>
 						{deleteIcon}
 					</S.TagText>
 				</S.TagFixed>
@@ -60,6 +67,7 @@ export interface ITagProps {
 	onDeleteAction?: () => void;
 	className?: string;
 	small?: boolean;
+	maxChar?: number;
 }
 
 export default Tag;

package/src/components/TruncatedTooltip/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import { Tooltip } from "@ax/components";
+
+const TruncatedTooltip = ({ content, children, ...props }: any) => {
+	const [isTruncated, setIsTruncated] = React.useState(false);
+	const elementRef = React.useRef<HTMLElement | null>(null);
+
+	const checkTruncation = React.useCallback(() => {
+		if (elementRef.current) {
+			const isTrunc = elementRef.current.scrollWidth > elementRef.current.clientWidth;
+			setIsTruncated(isTrunc);
+		}
+	}, []);
+
+	React.useEffect(() => {
+		const element = elementRef.current;
+		if (!element) return;
+
+		checkTruncation();
+
+		const observer = new ResizeObserver(() => {
+			checkTruncation();
+		});
+
+		observer.observe(element);
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [checkTruncation]);
+
+	const ChildWithRef = React.cloneElement(children, {
+		ref: elementRef,
+	});
+
+	if (!isTruncated) {
+		return ChildWithRef;
+	}
+
+	return (
+		<Tooltip content={content} {...props}>
+			{ChildWithRef}
+		</Tooltip>
+	);
+};
+
+export default TruncatedTooltip;

package/src/components/index.tsx

@@ -125,6 +125,7 @@ import Tabs from "./Tabs";
 import Tag from "./Tag";
 import Toast from "./Toast";
 import Tooltip from "./Tooltip";
+import TruncatedTooltip from "./TruncatedTooltip";
 import UserRolesAndSites from "./UserRolesAndSites";
 
 export {
@@ -246,6 +247,7 @@ export {
 	Tooltip,
 	TranslateButton,
 	TranslationsFilter,
+	TruncatedTooltip,
 	TypeFilter,
 	UniqueCheck,
 	UrlField,

package/src/constants/index.ts

@@ -29,6 +29,8 @@ const VALID_DOCUMENT_FORMATS = ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv
 const VALID_VIDEO_FORMATS = ["mov", "mp4", "wmv", "avi", "webm", "mkv"];
 const VALID_FILE_FORMATS = [...VALID_DOCUMENT_FORMATS, ...VALID_VIDEO_FORMATS];
 
+const GRIDDO_ID = "___griddo" as const;
+
 export {
 	itemLabel,
 	type ItemLabel,
@@ -36,4 +38,5 @@ export {
 	VALID_DOCUMENT_FORMATS,
 	VALID_VIDEO_FORMATS,
 	VALID_FILE_FORMATS,
+	GRIDDO_ID,
 };

package/src/helpers/categoryColumns.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+import { CategoryCell } from "@ax/components";
+import { Cell } from "@ax/components/TableList/TableItem/style";
+import type { ISchemaField } from "@ax/types";
+
+import styled from "styled-components";
+
+const ColumnCell = styled(Cell)`
+	flex: 0 0 215px;
+	position: relative;
+	align-items: center;
+`;
+
+const buildCategoryColumns = (
+	categoryColumns: ISchemaField[],
+	activeColumns: string[],
+	contentData: Record<string, any> | undefined,
+	categoryColors: any,
+	addCategoryColors: (cats: string[]) => void,
+	onClick: () => void,
+) => {
+	return categoryColumns.map((col) => {
+		if (!activeColumns.includes(col.key)) {
+			return <React.Fragment key={col.key} />;
+		}
+
+		const type: any = contentData?.[col.key];
+
+		if (typeof type !== "object") {
+			return (
+				<ColumnCell key={col.key} onClick={onClick}>
+					{type}
+				</ColumnCell>
+			);
+		}
+
+		const categories: string[] = !type
+			? []
+			: Array.isArray(type)
+				? type.map((cat: any) => cat.label || cat.title)
+				: [type.label || type.title];
+
+		return (
+			<CategoryCell
+				key={col.key}
+				categories={categories}
+				categoryColors={categoryColors}
+				addCategoryColors={addCategoryColors}
+			/>
+		);
+	});
+};
+
+export { buildCategoryColumns, ColumnCell };

package/src/helpers/images.tsx

@@ -1,5 +1,7 @@
 import type { Area } from "react-easy-crop";
 
+import { GRIDDO_ID } from "@ax/constants";
+
 import { toBlob } from "html-to-image";
 
 const formatBytes = (bytes: number | null, decimals = 2) => {
@@ -65,7 +67,7 @@ const getImageFromHtml = async (html: HTMLDivElement, fileName: string): Promise
 
 const getImageFromIFrame = async (html: HTMLDivElement, fileName: string): Promise<File | null> => {
 	const frameOBject = html.querySelector<HTMLIFrameElement>(".frame-content");
-	const frameContentFirst = frameOBject?.contentWindow?.document.getElementById("___griddo")?.firstChild as HTMLElement;
+	const frameContentFirst = frameOBject?.contentWindow?.document.getElementById(GRIDDO_ID)?.firstChild as HTMLElement;
 	const frameContentId = frameOBject?.contentWindow?.document.getElementById("griddoFormThumb") as HTMLElement;
 
 	const frameContent = frameContentId || frameContentFirst;

package/src/helpers/index.tsx

@@ -1,4 +1,5 @@
 import { arrayInsert, isEmptyArray, moveArrayElement } from "./arrays";
+import { buildCategoryColumns } from "./categoryColumns";
 import {
 	areAllComponentsEmpty,
 	areEqual,
@@ -117,6 +118,7 @@ export {
 	areEqualDates,
 	areEquals,
 	arrayInsert,
+	buildCategoryColumns,
 	camelize,
 	capitalize,
 	compressImage,

package/src/hooks/index.tsx

@@ -14,7 +14,7 @@ import { useHandleClickOutside, useModal, useModals, useToast } from "./modals";
 import { useNetworkStatus } from "./network";
 import { useResizable } from "./resize";
 import { useGlobalPermission, usePermission, usePermissions } from "./users";
-import { useWindowSize } from "./window";
+import { useFirefoxScrollLock, useWindowSize } from "./window";
 
 export {
 	useAdaptiveText,
@@ -24,6 +24,7 @@ export {
 	useDebouncedCallback,
 	useEmptyState,
 	useEqualStructured,
+	useFirefoxScrollLock,
 	useGlobalPermission,
 	useHandleClickOutside,
 	useIsDirty,