@abcagency/hc-ui-components 1.6.6 → 1.6.7

package/src/components/containers/filter/filter-item-container.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useTrackEvent } from '~/contexts/trackEventContext';
 import FilterItem from '~/components/modules/filter/item';
 import { useMapList } from '~/contexts/mapListContext';
+import { twMerge } from '~/util/twMerge';
 
 const FilterItemContainer = ({
 	className,
@@ -17,18 +18,37 @@ const FilterItemContainer = ({
 	subcategoryRequireCategory = false,
 	...rest
 }) => {
+	// All hooks MUST be called before any early returns
 	const { trackEvent, eventTypes } = useTrackEvent();
-	const itemName = item.name ? item.name : item;
-	itemKey = itemKey === null ? itemName : itemKey;
-	const isActive = selectedFilters != undefined && !!selectedFilters[field]?.[itemKey];
+	const { filteredListings, filterConfig } = useMapList();
+
+	// Initialize itemName and itemKey safely
+	const itemName = item?.name ? item.name : item;
+	const safeItemKey = itemKey === null ? itemName : itemKey;
+	const isActive = selectedFilters != undefined && !!selectedFilters[field]?.[safeItemKey];
 	const [activeItem, setActiveItem] = useState(isActive);
 
 	useEffect(() => {
 		if (!selectedFilters || isExternalLink) return;
-		setActiveItem(!!selectedFilters[field]?.[itemKey]);
-	}, [selectedFilters, field, itemKey]);
+		setActiveItem(!!selectedFilters[field]?.[safeItemKey]);
+	}, [selectedFilters, field, safeItemKey, isExternalLink]);
+
+	useEffect(() => {
+		if (selectedFilters && selectedFilters[field] && Object.keys(selectedFilters[field])?.length > 0) return;
+		else if (activeItem === true) {
+			setActiveItem(false);
+		}
+	}, [selectedFilters, activeItem, field]);
+
+	// NOW we can do the guard check after all hooks
+	if (!item) {
+		console.warn('FilterItemContainer received undefined item for field:', field);
+		return null;
+	}
+
+	// Re-assign itemKey for the rest of the component
+	itemKey = safeItemKey;
 
-	const { filteredListings } = useMapList();
 	const changeHandler = () => {
 		if (!isActive || isExternalLink) {
 			trackEvent(eventTypes.FILTER_APPLIED, { filterType: field, filterChecked: itemKey });
@@ -87,16 +107,9 @@ const FilterItemContainer = ({
 		});
 	};
 
-	useEffect(() => {
-		if (selectedFilters && selectedFilters[field] && Object.keys(selectedFilters[field])?.length > 0) return;
-		else if (activeItem === true) {
-			setActiveItem(false);
-		}
-	}, [selectedFilters]);
-
 	return (
 		<FilterItem
-			className={className}
+			className={twMerge(className, filterConfig?.classNames?.filterItem)}
 			item={item}
 			type={type}
 			itemKey={itemKey}

package/src/components/modules/accordions/filterItem.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import Accordion from '~/components/modules/accordions/default';
+import { twMerge } from '~/util/twMerge';
+import { useMapList } from '~/contexts/mapListContext';
 
 const AccordionFilterItem = ({
 	id,
@@ -7,17 +9,28 @@ const AccordionFilterItem = ({
 	header,
 	body
 }) => {
+	const { filterConfig } = useMapList();
+
 	return (
 		<Accordion.Item key={id} id={id}>
 			<Accordion.Trigger.HasHeader
 				onClick={() => setDefaultValue(id)}
-				className="hc-stretched-link hc-text-left"
+				className={twMerge(
+					"hc-stretched-link hc-text-left",
+					filterConfig?.classNames?.filterAccordion
+				)}
 				iconClassName="hc-order-last"
-				headerClassName="hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none"
+				headerClassName={twMerge(
+					"hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none",
+					filterConfig?.classNames?.filterAccordionHeader
+				)}
 			>
 				{header}
 			</Accordion.Trigger.HasHeader>
-			<Accordion.Content bodyClassName="hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] hc-overflow-auto">
+			<Accordion.Content bodyClassName={twMerge(
+				"hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] hc-overflow-auto",
+				filterConfig?.classNames?.filterAccordionContent
+			)}>
 				{body}
 			</Accordion.Content>
 		</Accordion.Item>

package/src/components/modules/filter/index.js

@@ -1,6 +1,9 @@
 "use client";
 import Button from "~/components/modules/buttons/default";
 import React, { useEffect, useRef, useState } from "react";
+import { twMerge } from '~/util/twMerge';
+import { useMapList } from "~/contexts/mapListContext";
+
 const Filter = ({
 	className,
 	hasActiveFilters,
@@ -12,36 +15,83 @@ const Filter = ({
 	style,
 	children
 }) => {
+	const { filterConfig } = useMapList();
 	const contentRef = useRef(null);
+	const containerRef = useRef(null);
 	const [hasOverflow, setHasOverflow] = useState(false);
+	const [showFixedFooter, setShowFixedFooter] = useState(false);
+	const transitionTimeoutRef = useRef(null);
 
 	useEffect(() => {
 		const checkOverflow = () => {
 			if (contentRef.current) {
-				const hasScroll = contentRef.current.scrollHeight > contentRef.current.clientHeight;
-				setHasOverflow(hasScroll);
+				// Add a small tolerance (5px) to avoid false positives from rounding/padding
+				const hasScroll = contentRef.current.scrollHeight > contentRef.current.clientHeight + 5;
+
+				if (hasScroll !== hasOverflow) {
+					setHasOverflow(hasScroll);
+
+					// Clear any pending transitions
+					if (transitionTimeoutRef.current) {
+						clearTimeout(transitionTimeoutRef.current);
+					}
+
+					// Add a delay when transitioning to fixed footer to smooth the transition
+					if (hasScroll) {
+						transitionTimeoutRef.current = setTimeout(() => setShowFixedFooter(true), 200);
+					} else {
+						// Delay hiding fixed footer to allow animation to complete and prevent flashing
+						transitionTimeoutRef.current = setTimeout(() => setShowFixedFooter(false), 200);
+					}
+				}
 			}
 		};
 
-		checkOverflow();
+		// Delay initial check to ensure layout is complete
+		setTimeout(checkOverflow, 100);
+
+		// Check on resize
 		window.addEventListener('resize', checkOverflow);
-		
+
+		// Use ResizeObserver to detect container size changes
+		const resizeObserver = new ResizeObserver(() => {
+			setTimeout(checkOverflow, 50);
+		});
+		if (containerRef.current) {
+			resizeObserver.observe(containerRef.current);
+		}
+		if (contentRef.current) {
+			resizeObserver.observe(contentRef.current);
+		}
+
 		// Use MutationObserver to detect content changes
-		const observer = new MutationObserver(checkOverflow);
+		const mutationObserver = new MutationObserver(() => {
+			setTimeout(checkOverflow, 50);
+		});
 		if (contentRef.current) {
-			observer.observe(contentRef.current, { childList: true, subtree: true });
+			mutationObserver.observe(contentRef.current, { childList: true, subtree: true, attributes: true });
 		}
 
 		return () => {
 			window.removeEventListener('resize', checkOverflow);
-			observer.disconnect();
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+			// Clear timeout on unmount
+			if (transitionTimeoutRef.current) {
+				clearTimeout(transitionTimeoutRef.current);
+			}
 		};
-	}, [children]);
+	}, [children, hasOverflow]);
 
 	// Reusable button component
 	const MobileButtons = () => (
 		<>
-			<Button.Btn onClick={handleReset} variant="outline" size="sm">
+			<Button.Btn
+				onClick={handleReset}
+				variant="outline"
+				size="sm"
+				className={filterConfig?.classNames?.resetButton}
+			>
 				Reset All
 			</Button.Btn>
 			{selectedFilters && Object.keys(selectedFilters).length > 0 && (
@@ -49,9 +99,10 @@ const Filter = ({
 					onClick={() => setMobileTab("listTab")}
 					variant="primary"
 					size="sm"
-					className={`
-						${hasActiveFilters ? "hc-opacity-0 hc-pointer-events-none" : "hc-opacity-100"}
-					`}
+					className={twMerge(
+						`${hasActiveFilters ? "hc-opacity-0 hc-pointer-events-none" : "hc-opacity-100"}`,
+						filterConfig?.classNames?.showJobsButton
+					)}
 				>
 					<Button.Body>
 						<Button.Icon icon="fluent:search-12-filled" size="hc-size-3.5" />
@@ -64,58 +115,80 @@ const Filter = ({
 
 	return (
 		<div
+			ref={containerRef}
 			style={isDesktop ? style : undefined}
-			className={`
-        /* Mobile layout */
+			className={twMerge(
+        `/* Mobile layout */
         hc-relative hc-w-full hc-h-full hc-flex hc-flex-col
 
         /* Desktop layout */
-        md:hc-block md:hc-max-h-[100%] md:hc-overflow-y-auto md:hc-overflow-x-auto
+        md:hc-relative md:hc-flex md:hc-flex-col md:hc-max-h-[100%]
 
-        ${className ?? ""}
-      `}
+        ${className ?? ""}`,
+        filterConfig?.classNames?.filterContainer
+      )}
 		>
 			{/* Content area with scroll */}
-			<div 
+			<div
 				ref={contentRef}
-				className={`hc-w-full hc-flex-grow hc-overflow-auto ${hasOverflow ? 'hc-pb-16' : ''} md:hc-pb-0`}
+				className={twMerge(
+					`hc-w-full hc-flex-grow hc-max-h-full hc-overflow-auto ${hasOverflow ? 'hc-pb-16' : ''} md:hc-overflow-y-auto ${hasOverflow ? 'md:hc-pb-16' : 'md:hc-pb-0'}`,
+					filterConfig?.classNames?.filterContent
+				)}
 			>
 				<div className="hc-px-4 md:hc-pt-4 hc-space-y-4">
 					{children}
-					
-					{/* Mobile buttons inline when no overflow */}
-					{!hasOverflow && (
-						<div className="hc-flex hc-items-center hc-justify-between hc-gap-2 hc-py-2 hc-border-t hc-border-gray-200 md:hc-hidden">
-							<MobileButtons />
+
+					{/* Inline buttons when no overflow - both mobile and desktop */}
+					{!hasOverflow && !showFixedFooter && (
+						<div className={twMerge(
+							"hc-flex hc-items-center hc-justify-between hc-gap-2 hc-py-2 hc-border-t hc-border-gray-200 hc-animate-in hc-fade-in hc-duration-300",
+							filterConfig?.classNames?.filterFooter
+						)}>
+							{/* Mobile buttons */}
+							<div className="hc-flex hc-items-center hc-justify-between hc-gap-2 hc-w-full md:hc-hidden">
+								<MobileButtons />
+							</div>
+							{/* Desktop button */}
+							<div className="hc-hidden md:hc-flex">
+								<Button.Btn
+									onClick={handleReset}
+									variant="outline"
+									size="sm"
+									className={filterConfig?.classNames?.resetButton}
+								>
+									Reset All
+								</Button.Btn>
+							</div>
 						</div>
 					)}
 				</div>
 			</div>
 
-			{/* Desktop Reset Button - left aligned */}
-			<div className="hc-hidden md:hc-flex md:hc-justify-start hc-px-4 hc-py-4">
-				<Button.Btn onClick={handleReset} variant="outline" size="sm">
-					Reset All
-				</Button.Btn>
-			</div>
-
 			{/* Mobile Footer - fixed at bottom (only when overflow) */}
-			{hasOverflow && (
+			{showFixedFooter && (
 				<div
-					className="
-						hc-w-full
-						hc-absolute hc-bottom-0 hc-left-0 hc-right-0
-						hc-flex hc-items-center hc-justify-between hc-gap-2 hc-py-2 hc-px-4
-						hc-bg-white hc-border-t hc-border-gray-200
-						hc-z-10
-						md:hc-hidden
-					"
+					className="hc-w-full hc-absolute hc-bottom-0 hc-left-0 hc-right-0 hc-flex hc-items-center hc-justify-between hc-gap-2 hc-py-2 hc-px-4 hc-bg-gray-100 hc-border-t hc-border-gray-200 hc-z-50 md:hc-hidden hc-animate-in hc-fade-in hc-slide-in-from-bottom-2 hc-duration-200"
 				>
 					<MobileButtons />
 				</div>
 			)}
+
+			{/* Desktop Footer - fixed at bottom (only when overflow) */}
+			{showFixedFooter && (
+				<div className="hc-hidden md:hc-flex md:hc-justify-start hc-px-4 hc-py-4 hc-absolute hc-bottom-0 hc-left-0 hc-right-0 hc-bg-gray-100 hc-border-t hc-border-gray-200 hc-z-50 hc-animate-in hc-fade-in hc-slide-in-from-bottom-2 hc-duration-200">
+					<Button.Btn
+						onClick={handleReset}
+						variant="outline"
+						size="sm"
+						className={filterConfig?.classNames?.resetButton}
+					>
+						Reset All
+					</Button.Btn>
+				</div>
+			)}
 		</div>
 	);
 };
 
-export default Filter;
+export default Filter;

package/src/components/modules/filter/item.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import Icon from '~/components/modules/icon';
+import { twMerge } from '~/util/twMerge';
+import { useMapList } from '~/contexts/mapListContext';
 
 const FilterItem = ({
 	className,
@@ -17,6 +19,7 @@ const FilterItem = ({
 	eventTypes,
 	...rest
 }) => {
+	const { filterConfig } = useMapList();
 	const itemName = item.name ? item.name : item;
 
 	return (
@@ -47,7 +50,10 @@ const FilterItem = ({
 					disabled={item.count === 0}
 					value={itemName}
 					type={type}
-					className="hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm"
+					className={twMerge(
+						"hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm",
+						filterConfig?.classNames?.filterItemCheckbox
+					)}
 					checked={activeItem}
 					onChange={() => {
 						setActiveItem(!activeItem);
@@ -56,9 +62,15 @@ const FilterItem = ({
 				/>
 			)}
 
-			<span className="hc-text-left hc-font-medium">{itemName}</span>
+			<span className={twMerge(
+				"hc-text-left hc-font-medium",
+				filterConfig?.classNames?.filterItemLabel
+			)}>{itemName}</span>
 			{hasCount && !isExternalLink && (
-				<span className="hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary">
+				<span className={twMerge(
+					"hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary",
+					filterConfig?.classNames?.filterItemCount
+				)}>
           ({item.count})
 				</span>
 			)}

package/src/components/modules/filter/search.js

@@ -2,6 +2,8 @@ import React, { useRef } from 'react';
 import Button from '~/components/modules/buttons/default';
 import Icon from '~/components/modules/icon';
 import FilterCard from '~/components/modules/cards/filter';
+import { twMerge } from '~/util/twMerge';
+import { useMapList } from '~/contexts/mapListContext';
 
 const Search = ({
 	inputPlaceholder,
@@ -14,6 +16,7 @@ const Search = ({
 	handleReset,
 	label
 }) => {
+	const { filterConfig } = useMapList();
 	const inputRef = useRef(null);
 	const buttonRef = useRef(null);
 
@@ -47,7 +50,10 @@ const Search = ({
 					}}
 					placeholder={inputPlaceholder}
 					value={inputValue}
-					className="hc-w-full hc-px-0 hc-py-2 hc-text-sm hc-border-0 hc-transition-colors placeholder:hc-text-uiText/50 focus:hc-ring-0 focus:hc-outline-none"
+					className={twMerge(
+						"hc-w-full hc-px-0 hc-py-2 hc-text-sm hc-border-0 hc-transition-colors placeholder:hc-text-uiText/50 focus:hc-ring-0 focus:hc-outline-none",
+						filterConfig?.classNames?.searchInput
+					)}
 					onChange={handleInputChange}
 				/>
 

package/src/contexts/mapListContext.tsx

@@ -55,6 +55,28 @@ interface MapListContextProps {
   containerStyle?: any;
   ExpandListComponent?: React.ComponentType<{ listing: any }> | ((listing: any) => JSX.Element) | null;
   noEntities?: boolean;
+  filterConfig?: {
+    hideZeroResults?: boolean;
+    dynamicCounts?: boolean;
+    showFavorites?: boolean;
+    collapsedByDefault?: boolean;
+    sortAlphabetically?: boolean;
+    classNames?: {
+      filterContainer?: string;
+      filterContent?: string;
+      filterAccordion?: string;
+      filterAccordionHeader?: string;
+      filterAccordionContent?: string;
+      filterItem?: string;
+      filterItemLabel?: string;
+      filterItemCheckbox?: string;
+      filterItemCount?: string;
+      searchInput?: string;
+      resetButton?: string;
+      showJobsButton?: string;
+      filterFooter?: string;
+    };
+  };
 }
 
 const MapListContext = createContext<MapListContextProps | undefined>(undefined);
@@ -101,6 +123,28 @@ interface MapListProviderProps {
   hideMap?: boolean;
   hideFilters?: boolean;
   noEntities?: boolean;
+  filterConfig?: {
+    hideZeroResults?: boolean;
+    dynamicCounts?: boolean;
+    showFavorites?: boolean;
+    collapsedByDefault?: boolean;
+    sortAlphabetically?: boolean;
+    classNames?: {
+      filterContainer?: string;
+      filterContent?: string;
+      filterAccordion?: string;
+      filterAccordionHeader?: string;
+      filterAccordionContent?: string;
+      filterItem?: string;
+      filterItemLabel?: string;
+      filterItemCheckbox?: string;
+      filterItemCount?: string;
+      searchInput?: string;
+      resetButton?: string;
+      showJobsButton?: string;
+      filterFooter?: string;
+    };
+  };
 }
 
 export const MapListProvider: React.FC<MapListProviderProps> = ({
@@ -128,7 +172,29 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	localStorageKey,
 	hideMap = false,
 	hideFilters = false,
-	noEntities = false
+	noEntities = false,
+	filterConfig = {
+		hideZeroResults: false,
+		dynamicCounts: true,
+		showFavorites: true,
+		collapsedByDefault: false,
+		sortAlphabetically: false,
+		classNames: {
+			filterContainer: '',
+			filterContent: '',
+			filterAccordion: '',
+			filterAccordionHeader: '',
+			filterAccordionContent: '',
+			filterItem: '',
+			filterItemLabel: '',
+			filterItemCheckbox: '',
+			filterItemCount: '',
+			searchInput: '',
+			resetButton: '',
+			showJobsButton: '',
+			filterFooter: ''
+		}
+	}
 }) => {
 	const firstLoadFilters = () =>{
 		let urlData = filtersFromURL(window.location);
@@ -318,6 +384,31 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			if (tempSelectedFilters) {
 				const keys = Object.keys(tempSelectedFilters);
 				const lastKey = keys[keys.length - 1];
+
+				// Ensure all filterConfig properties have values
+				const normalizedFilterConfig = {
+					hideZeroResults: filterConfig?.hideZeroResults ?? false,
+					dynamicCounts: filterConfig?.dynamicCounts ?? true,
+					showFavorites: filterConfig?.showFavorites ?? true,
+					collapsedByDefault: filterConfig?.collapsedByDefault ?? false,
+					sortAlphabetically: filterConfig?.sortAlphabetically ?? false,
+					classNames: {
+						filterContainer: filterConfig?.classNames?.filterContainer ?? '',
+						filterContent: filterConfig?.classNames?.filterContent ?? '',
+						filterAccordion: filterConfig?.classNames?.filterAccordion ?? '',
+						filterAccordionHeader: filterConfig?.classNames?.filterAccordionHeader ?? '',
+						filterAccordionContent: filterConfig?.classNames?.filterAccordionContent ?? '',
+						filterItem: filterConfig?.classNames?.filterItem ?? '',
+						filterItemLabel: filterConfig?.classNames?.filterItemLabel ?? '',
+						filterItemCheckbox: filterConfig?.classNames?.filterItemCheckbox ?? '',
+						filterItemCount: filterConfig?.classNames?.filterItemCount ?? '',
+						searchInput: filterConfig?.classNames?.searchInput ?? '',
+						resetButton: filterConfig?.classNames?.resetButton ?? '',
+						showJobsButton: filterConfig?.classNames?.showJobsButton ?? '',
+						filterFooter: filterConfig?.classNames?.filterFooter ?? ''
+					}
+				};
+
 				const options = generateFilterOptions(
 					filteredListings,
 					allListings,
@@ -325,7 +416,8 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 					filterOptions,
 					lastKey,
 					favorites,
-					tempSelectedFilters
+					tempSelectedFilters,
+					normalizedFilterConfig
 				);
 				if (options) {
 					setFilterOptions(options);
@@ -403,7 +495,8 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			hiddenFilters,
 			containerStyle,
 			ExpandListComponent,
-			noEntities
+			noEntities,
+			filterConfig
 		}}>
 			{children}
 		</MapListContext.Provider>