@abcagency/hc-ui-components 1.6.6 → 1.6.9

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>

package/src/util/filterUtil.js

@@ -4,10 +4,10 @@ import { isAlgoliaAvailable, filterListingsByAlgoliaSearch } from '~/util/algoli
 
 import Fuse from 'fuse.js';
 
-export const getFilterOptions = (listings, filteredListings, field, excludeZeroCount = null) => {
+export const getFilterOptions = (listings, filteredListings, field, excludeZeroCount = false) => {
 	const options = new Set();
 	listings.forEach(listing => {
-		if (listing.fields[field]) {
+		if (listing.fields && listing.fields[field]) {
 			options.add(listing.fields[field]);
 		}
 	});
@@ -18,22 +18,28 @@ export const getFilterOptions = (listings, filteredListings, field, excludeZeroC
 	});
 
 	filteredListings.forEach(listing => {
+		if (!listing.fields) return;
 		const value = listing.fields[field];
-		if (value && optionCounts.hasOwnProperty(value)) {
+		if (value && Object.prototype.hasOwnProperty.call(optionCounts, value)) {
 			optionCounts[value] += 1;
 		}
 	});
 
-	return Array.from(options)
-		.sort()
+	let result = Array.from(options)
+		.filter(option => option != null && option !== '') // Filter out null/empty values
 		.map(option => ({
 			name: option,
 			count: optionCounts[option] || 0
 		}))
 		.filter(option => !(excludeZeroCount === true && option.count === 0));
+
+	// Sort alphabetically
+	result.sort((a, b) => a.name.localeCompare(b.name));
+
+	return result;
 };
 
-export const getSpecialFeatureOptions = (listings, filteredListings, siteConfig, favorites) => {
+export const getSpecialFeatureOptions = (listings, filteredListings, siteConfig, favorites, filterConfig = {}) => {
 	const specialFeatures = siteConfig.specialFeatures;
 	const featureCounts = Object.keys(specialFeatures).sort().reduce((acc, key) => {
 		acc[specialFeatures[key]] = 0;
@@ -48,17 +54,28 @@ export const getSpecialFeatureOptions = (listings, filteredListings, siteConfig,
 		});
 	});
 
-	const specialFeatureOptions = Object.entries(featureCounts).map(([name, count]) => ({
+	let specialFeatureOptions = Object.entries(featureCounts).map(([name, count]) => ({
 		name,
 		count
 	}));
 
+	// Update favorite count
 	for (let option of specialFeatureOptions) {
 		if (option.name === 'Favorite') {
 			option.count = filteredListings.filter(x => favorites.includes(x.id)).length;
 		}
 	}
 
+	// Hide favorites if filterConfig.showFavorites is false
+	if (filterConfig.showFavorites === false) {
+		specialFeatureOptions = specialFeatureOptions.filter(option => option.name !== 'Favorite');
+	}
+
+	// Hide zero results if filterConfig.hideZeroResults is true
+	if (filterConfig.hideZeroResults === true) {
+		specialFeatureOptions = specialFeatureOptions.filter(option => option.count > 0);
+	}
+
 	return specialFeatureOptions;
 };
 
@@ -76,9 +93,19 @@ export const generateFilterOptions = (
 	filterOptions,
 	parentField,
 	favorites,
-	selectedFilters
+	selectedFilters,
+	filterConfig = {
+		hideZeroResults: false,
+		dynamicCounts: true,
+		showFavorites: true,
+		collapsedByDefault: false,
+		sortAlphabetically: false
+	}
 ) => {
 	if (allListings.length > 0) {
+		// Determine which listings to use for counts based on dynamicCounts setting
+		const countListings = filterConfig.dynamicCounts ? filteredListings : allListings;
+
 		const dynamicFilters = siteConfig.fieldFiltersShown.map(fieldName => {
 			if (fieldName === parentField && filterOptions?.filters) {
 				return filterOptions.filters.find(filter => filter.id === fieldName);
@@ -87,35 +114,33 @@ export const generateFilterOptions = (
 				return {
 					id: fieldName,
 					title: siteConfig.fieldNames[fieldName],
-					items: getFilterOptions(allListings, allListings, fieldName)
+					items: getFilterOptions(allListings, countListings, fieldName, filterConfig.hideZeroResults)
 				};
 			}
 			if(fieldName == 'subCategory' && selectedFilters.category){
 				const categoryKeys = Object.keys(selectedFilters.category);
-				const filteredListings = allListings.filter(
+				const filteredByCategory = allListings.filter(
 					x => categoryKeys.includes(x.fields?.category)
 				);
 				return {
 					id: fieldName,
 					title: siteConfig.fieldNames[fieldName],
-					items: getFilterOptions(allListings, filteredListings, fieldName, false)
+					items: getFilterOptions(allListings, filteredByCategory, fieldName, filterConfig.hideZeroResults)
 				};
 			}
 			if (fieldName == "specialFeatures") {
 				return {
 					id: fieldName,
 					title: siteConfig.fieldNames[fieldName],
-					items: getSpecialFeatureOptions(allListings, filteredListings, siteConfig, favorites).sort()
+					items: getSpecialFeatureOptions(allListings, countListings, siteConfig, favorites, filterConfig).sort()
 				};
 			}
-			return {
-				id: fieldName,
-				title: siteConfig.fieldNames[fieldName],
-				items: getFilterOptions(allListings, filteredListings, fieldName)
-			};
-		});
-
-		const locations =
+		return {
+			id: fieldName,
+			title: siteConfig.fieldNames[fieldName],
+			items: getFilterOptions(allListings, countListings, fieldName, filterConfig.hideZeroResults)
+		};
+	});		const locations =
 			siteConfig.locationFiltersShown.map((fieldName, index) => {
 				let locationFilteredListings = allListings;
 				locationFilteredListings = allListings.filter(listing => {
@@ -186,9 +211,24 @@ export const generateFilterOptions = (
 			)
 		};
 
+		// Filter out null filters and ensure items arrays don't contain undefined values
+		const cleanFilters = dynamicFilters
+			.filter(f => f != null && f.items != null)
+			.map(f => ({
+				...f,
+				items: f.items.filter(item => item != null && item.name != null)
+			}));
+
+		const cleanLocations = locations
+			.filter(l => l != null && l.items != null)
+			.map(l => ({
+				...l,
+				items: l.items.filter(item => item != null && item.name != null)
+			}));
+
 		return {
-			filters: dynamicFilters,
-			locations: locations,
+			filters: cleanFilters,
+			locations: cleanLocations,
 			pointsOfInterest: pointsOfInterest
 		};
 	}
@@ -235,7 +275,7 @@ export const applyFilters = async (
 			});
 		} else if (Object.keys(filterItems).length > 0) {
 			results = results.filter(listing =>
-				filterItems.hasOwnProperty(listing.fields[formattedField])
+				Object.prototype.hasOwnProperty.call(filterItems, listing.fields[formattedField])
 			);
 		}
 	}
@@ -314,7 +354,7 @@ export const filterListingsByLocation = (
 	let results = allListings;
 	if (selectedLocation !== null) {
 		results = results.filter(item =>
-			selectedLocation.items.hasOwnProperty(item.id)
+			Object.prototype.hasOwnProperty.call(selectedLocation.items, item.id)
 		);
 	}
 	const mapItems = getDistinctItemsByProximity(results, listingEntities);

package/src/util/twMerge.js

@@ -0,0 +1,6 @@
+import { extendTailwindMerge } from 'tailwind-merge';
+
+// Create a custom tailwind-merge that understands the hc- prefix
+export const twMerge = extendTailwindMerge({
+	prefix: 'hc-'
+});