@abcagency/hc-ui-components 1.6.5 → 1.6.7

package/src/components/HireControlMap.js

@@ -122,7 +122,52 @@ export const HireControlMap = ({
 	// Algolia search configuration (optional)
 	algoliaAppId = null,
 	algoliaApiKey = null,
-	algoliaIndexName = null
+	algoliaIndexName = null,
+	/**
+	 * Filter configuration (optional)
+	 * @param {boolean} hideZeroResults - Hide filter options with 0 results (default: false)
+	 * @param {boolean} dynamicCounts - Update counts based on active filters.
+	 *                                  If false, shows initial/total counts (default: true)
+	 * @param {boolean} showFavorites - Show favorites special feature filter (default: true)
+	 * @param {boolean} collapsedByDefault - Start with all filter sections collapsed (default: false)
+	 * @param {boolean} sortAlphabetically - Sort filter options alphabetically instead of by count (default: false)
+	 * @param {object} classNames - Custom Tailwind classes to apply to filter components
+	 * @param {string} classNames.filterContainer - Classes for the main filter container wrapper
+	 * @param {string} classNames.filterContent - Classes for the scrollable filter content area
+	 * @param {string} classNames.filterAccordion - Classes for each filter accordion section
+	 * @param {string} classNames.filterAccordionHeader - Classes for accordion header/trigger
+	 * @param {string} classNames.filterAccordionContent - Classes for accordion content area
+	 * @param {string} classNames.filterItem - Classes for individual filter items (checkboxes/options)
+	 * @param {string} classNames.filterItemLabel - Classes for filter item labels
+	 * @param {string} classNames.filterItemCheckbox - Classes for filter item checkboxes
+	 * @param {string} classNames.filterItemCount - Classes for filter item count badges
+	 * @param {string} classNames.searchInput - Classes for search input field
+	 * @param {string} classNames.resetButton - Classes for reset all button
+	 * @param {string} classNames.showJobsButton - Classes for show jobs button
+	 * @param {string} classNames.filterFooter - Classes for the footer containing buttons
+	 */
+	filterConfig = {
+		hideZeroResults: false, // Hide filter options with 0 results
+		dynamicCounts: true, // Update counts based on other active filters (false = show initial counts only)
+		showFavorites: true, // Show favorites filter
+		collapsedByDefault: false, // Start with all filter sections collapsed
+		sortAlphabetically: false, // Sort filter options alphabetically instead of by count
+		classNames: {
+			filterContainer: '', // Main filter container wrapper
+			filterContent: '', // Scrollable content area
+			filterAccordion: '', // Filter accordion section
+			filterAccordionHeader: '', // Accordion header/trigger
+			filterAccordionContent: '', // Accordion content body
+			filterItem: '', // Individual filter items
+			filterItemLabel: '', // Filter item labels
+			filterItemCheckbox: '', // Filter item checkboxes
+			filterItemCount: '', // Filter item count badges
+			searchInput: '', // Search input field
+			resetButton: '', // Reset all button
+			showJobsButton: '', // Show jobs button
+			filterFooter: '' // Footer with buttons
+		}
+	}
 }) => {
 	// Load site configuration
 	const { siteConfig, error } = useSiteConfig(clientToken, siteConfiguration);
@@ -190,7 +235,8 @@ export const HireControlMap = ({
 		localStorageKey,
 		hideMap,
 		hideFilters,
-		noEntities
+		noEntities,
+		filterConfig
 	};
 
 	// Calculate effective showMap value (hideMap overrides siteConfig.showMap)

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

@@ -47,7 +47,7 @@ const FilterItemContainer = ({
 
 	const body = (
 		<>
-			{filter.items.sort().map(item => (
+			{filter.items.filter(item => item != null).sort().map(item => (
 				<FilterItem
 					key={item.name}
 					item={item}

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/containers/list/item-list-container.tsx

@@ -59,7 +59,7 @@ const ItemsListContainer: React.FC<ItemsListContainerProps> = ({
 			selectedListItem={selectedListItem}
 			includeFavorite={true}
 		>
-			<Accordion className="hc-divide-y hc-divide-uiAccent/10 hc-max-h-[100vh]" defaultValue={selectedListItem?.id}>
+			<Accordion className="hc-divide-y hc-divide-uiAccent/10" defaultValue={selectedListItem?.id}>
 				{(sortSetting ? dynamicSort(filteredListings, sortSetting.field, sortSetting.type, favorites as any) : filteredListings)
 					.slice(0, itemLimit)
 					.map((item: Listing) => (

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 from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { twMerge } from '~/util/twMerge';
+import { useMapList } from "~/contexts/mapListContext";
+
 const Filter = ({
 	className,
 	hasActiveFilters,
@@ -12,65 +15,180 @@ 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) {
+				// 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);
+					}
+				}
+			}
+		};
+
+		// 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 mutationObserver = new MutationObserver(() => {
+			setTimeout(checkOverflow, 50);
+		});
+		if (contentRef.current) {
+			mutationObserver.observe(contentRef.current, { childList: true, subtree: true, attributes: true });
+		}
+
+		return () => {
+			window.removeEventListener('resize', checkOverflow);
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+			// Clear timeout on unmount
+			if (transitionTimeoutRef.current) {
+				clearTimeout(transitionTimeoutRef.current);
+			}
+		};
+	}, [children, hasOverflow]);
+
+	// Reusable button component
+	const MobileButtons = () => (
+		<>
+			<Button.Btn
+				onClick={handleReset}
+				variant="outline"
+				size="sm"
+				className={filterConfig?.classNames?.resetButton}
+			>
+				Reset All
+			</Button.Btn>
+			{selectedFilters && Object.keys(selectedFilters).length > 0 && (
+				<Button.Btn
+					onClick={() => setMobileTab("listTab")}
+					variant="primary"
+					size="sm"
+					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" />
+						Show {filteredListings.length} Jobs
+					</Button.Body>
+				</Button.Btn>
+			)}
+		</>
+	);
+
 	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 className="hc-w-full hc-flex-grow hc-overflow-auto hc-pb-16 md:hc-pb-0">
-				<div className="hc-px-4 md:hc-pt-4 hc-space-y-4">{children}</div>
-			</div>
+			<div
+				ref={contentRef}
+				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}
 
-			{/* 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>
+					{/* 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>
 
-			{/* Mobile Footer - fixed at bottom */}
-			<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
-
-        /* Hide on desktop */
-        md:hc-hidden
-      "
-			>
-				<Button.Btn onClick={handleReset} variant="outline" size="sm">
-					Reset All
-				</Button.Btn>
-				{selectedFilters && Object.keys(selectedFilters).length > 0 && (
+			{/* Mobile Footer - fixed at bottom (only when overflow) */}
+			{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-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={() => setMobileTab("listTab")}
-						variant="primary"
+						onClick={handleReset}
+						variant="outline"
 						size="sm"
-						className={`
-              ${hasActiveFilters ? "hc-opacity-0 hc-pointer-events-none" : "hc-opacity-100"}
-            `}
+						className={filterConfig?.classNames?.resetButton}
 					>
-						<Button.Body>
-							<Button.Icon icon="fluent:search-12-filled" size="hc-size-3.5" />
-              Show {filteredListings.length} Jobs
-						</Button.Body>
+						Reset All
 					</Button.Btn>
-				)}
-			</div>
+				</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/components/modules/list/list-item/list-item.jsx

@@ -137,4 +137,4 @@ export default React.memo(ListItem, (prevProps, nextProps) => {
     prevProps.bodyClassName === nextProps.bodyClassName &&
     prevProps.className === nextProps.className
 	);
-});
+});

package/src/components/modules/maps/tabs.js

@@ -61,17 +61,17 @@ const MapTabs = ({
 							</Button.Body>
 						</Button.Btn>
 					</Tabs.Trigger>
-			</Tabs.List>
+				</Tabs.List>
 
-			{/* Tab content */}
-			<div className="hc-flex-grow hc-h-[100vh] md:hc-h-[calc(100%-48px)]">
-				{/* List Tab Content */}
-				<Tabs.Content
-					className="hc-h-full hc-bg-white hc-outline-none"
-					value="listTab"
-				>
-					{list}
-				</Tabs.Content>
+				{/* Tab content */}
+				<div className="hc-flex-grow hc-h-[calc(100vh-180px)] md:hc-h-[calc(100%-48px)]">
+					{/* List Tab Content */}
+					<Tabs.Content
+						className="hc-h-full hc-bg-white hc-outline-none"
+						value="listTab"
+					>
+						{list}
+					</Tabs.Content>
 
 					{/* Map Tab Content */}
 					{showMap && (