@abcagency/hc-ui-components 1.3.56 → 1.3.58-uvm.0

package/src/components/modules/list/item-list.tsx

@@ -1,117 +1,117 @@
-import React, { useEffect, useRef, useState, RefObject, ReactNode } from 'react';
-import Header from '~/components/modules/list/header';
-import Sort from '~/components/modules/filter/sort';
-import Loading from "~/util/loading";
-import { Listing } from '~/types/Listings';
-
-interface ItemsListProps {
-  fieldNames: Record<string, string>;
-  showMap: boolean;
-  fieldsShown: string[];
-  filteredListings: Listing[];
-  loading: boolean;
-  sortSetting: any;
-  setSortSetting: (setting: any) => void;
-  itemLimit: number;
-  loader: RefObject<HTMLDivElement>;
-  scrollContainerRef: RefObject<HTMLDivElement>;
-  itemRefs: any;
-  selectedListItem: Listing | null;
-  children: ReactNode;
-  includeFavorite: boolean;
-}
-
-const ItemsList: React.FC<ItemsListProps> = ({
-  fieldNames,
-  showMap,
-  fieldsShown,
-  filteredListings,
-  loading,
-  sortSetting,
-  setSortSetting,
-  itemLimit,
-  loader,
-  scrollContainerRef,
-  includeFavorite = false,
-  children
-}) => {
-  const [scrollbarWidth, setScrollbarWidth] = useState<number>(0);
-
-  const checkScrollbar = () => {
-    if (scrollContainerRef.current) {
-      const { scrollHeight, clientHeight, offsetWidth, clientWidth } = scrollContainerRef.current;
-      const hasVerticalScrollbar = scrollHeight > clientHeight;
-      const newScrollbarWidth = hasVerticalScrollbar ? offsetWidth - clientWidth : 0;
-      setScrollbarWidth(newScrollbarWidth);
-    }
-  };
-
-  useEffect(() => {
-    checkScrollbar();
-
-    const resizeObserver = new ResizeObserver(() => checkScrollbar());
-    const mutationObserver = new MutationObserver(() => checkScrollbar());
-
-    if (scrollContainerRef.current) {
-      resizeObserver.observe(scrollContainerRef.current);
-      mutationObserver.observe(scrollContainerRef.current, { childList: true, subtree: true, attributes: true });
-    }
-
-    return () => {
-      if (scrollContainerRef.current) {
-        resizeObserver.unobserve(scrollContainerRef.current);
-        mutationObserver.disconnect();
-      }
-    };
-  }, [scrollContainerRef]);
-
-  return (
-    <div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col">
-      <div className="hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20">
-        <h2 className="hc-text-gray-500 hc-font-semibold hc-text-xs md:hc-text-sm">
-          {loading && <span>Loading...</span>}
-          {!loading && <span>{filteredListings.length} results</span>}
-        </h2>
-        <div className="hc-block md:hc-hidden">
-          <Sort
-            className={''}
-            fields={fieldsShown}
-            setSortSetting={setSortSetting}
-            fieldNames={fieldNames}
-          />
-        </div>
-      </div>
-      <div>
-        <Header
-          className={''}
-          setSortSetting={setSortSetting}
-          sortSetting={sortSetting}
-          fieldsShown={fieldsShown}
-          fieldNames={fieldNames}
-          includeFavorite={includeFavorite}
-          scrollbarWidth={scrollbarWidth}
-        />
-      </div>
-      <div
-        ref={scrollContainerRef}
-        className={`
-          hc-flex-grow hc-overflow-y-auto
-          ${showMap ? "md:hc-max-h-45vh hc-max-h-[100vh]" : "md:hc-max-h-95vh hc-max-h-[95vh]"}
-        `}
-      >
-        {loading ? (
-          <div className="hc-flex hc-justify-center hc-items-center hc-pt-20">
-            <Loading />
-          </div>
-        ) : (
-          children
-        )}
-        <div ref={loader} style={{ height: "100px", textAlign: "center" }}>
-          {filteredListings.length >= itemLimit && <Loading />}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ItemsList;
+import React, { useEffect, useRef, useState, RefObject, ReactNode } from 'react';
+import Header from '~/components/modules/list/header';
+import Sort from '~/components/modules/filter/sort';
+import Loading from "~/util/loading";
+import { Listing } from '~/types/Listings';
+
+interface ItemsListProps {
+  fieldNames: Record<string, string>;
+  showMap: boolean;
+  fieldsShown: string[];
+  filteredListings: Listing[];
+  loading: boolean;
+  sortSetting: any;
+  setSortSetting: (setting: any) => void;
+  itemLimit: number;
+  loader: RefObject<HTMLDivElement>;
+  scrollContainerRef: RefObject<HTMLDivElement>;
+  itemRefs: any;
+  selectedListItem: Listing | null;
+  children: ReactNode;
+  includeFavorite: boolean;
+}
+
+const ItemsList: React.FC<ItemsListProps> = ({
+  fieldNames,
+  showMap,
+  fieldsShown,
+  filteredListings,
+  loading,
+  sortSetting,
+  setSortSetting,
+  itemLimit,
+  loader,
+  scrollContainerRef,
+  includeFavorite = false,
+  children
+}) => {
+  const [scrollbarWidth, setScrollbarWidth] = useState<number>(0);
+
+  const checkScrollbar = () => {
+    if (scrollContainerRef.current) {
+      const { scrollHeight, clientHeight, offsetWidth, clientWidth } = scrollContainerRef.current;
+      const hasVerticalScrollbar = scrollHeight > clientHeight;
+      const newScrollbarWidth = hasVerticalScrollbar ? offsetWidth - clientWidth : 0;
+      setScrollbarWidth(newScrollbarWidth);
+    }
+  };
+
+  useEffect(() => {
+    checkScrollbar();
+
+    const resizeObserver = new ResizeObserver(() => checkScrollbar());
+    const mutationObserver = new MutationObserver(() => checkScrollbar());
+
+    if (scrollContainerRef.current) {
+      resizeObserver.observe(scrollContainerRef.current);
+      mutationObserver.observe(scrollContainerRef.current, { childList: true, subtree: true, attributes: true });
+    }
+
+    return () => {
+      if (scrollContainerRef.current) {
+        resizeObserver.unobserve(scrollContainerRef.current);
+        mutationObserver.disconnect();
+      }
+    };
+  }, [scrollContainerRef]);
+
+  return (
+    <div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col">
+      <div className="hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20">
+        <h2 className="hc-text-gray-500 hc-font-semibold hc-text-xs md:hc-text-sm">
+          {loading && <span>Loading...</span>}
+          {!loading && <span>{filteredListings.length} results</span>}
+        </h2>
+        <div className="hc-block md:hc-hidden">
+          <Sort
+            className={''}
+            fields={fieldsShown}
+            setSortSetting={setSortSetting}
+            fieldNames={fieldNames}
+          />
+        </div>
+      </div>
+      <div>
+        <Header
+          className={''}
+          setSortSetting={setSortSetting}
+          sortSetting={sortSetting}
+          fieldsShown={fieldsShown}
+          fieldNames={fieldNames}
+          includeFavorite={includeFavorite}
+          scrollbarWidth={scrollbarWidth}
+        />
+      </div>
+      <div
+        ref={scrollContainerRef}
+        className={`
+          hc-flex-grow hc-overflow-y-auto
+          ${showMap ? "md:hc-max-h-45vh hc-max-h-[100vh]" : "md:hc-max-h-95vh hc-max-h-[95vh]"}
+        `}
+      >
+        {loading ? (
+          <div className="hc-flex hc-justify-center hc-items-center hc-pt-20">
+            <Loading />
+          </div>
+        ) : (
+          children
+        )}
+        <div ref={loader} style={{ height: "100px", textAlign: "center" }}>
+          {filteredListings.length >= itemLimit && <Loading />}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ItemsList;

package/src/components/modules/list/list-item/list-item.js

@@ -1,130 +1,130 @@
-import React, { forwardRef } from 'react';
-import Grid from '~/components/modules/grid';
-import Icon from '~/components/modules/icon';
-import FieldMapper from '~/components/modules/list/field-mapper';
-
-const ListItem = forwardRef(
-	(
-		{
-			isActive,
-			bodyClassName,
-			className,
-			item,
-			fieldsShown,
-			specialFeatures,
-			onItemSelected,
-			showMap,
-			setMobileTab,
-			handleSettingFavorites,
-			favorites,
-			includeFavorite = true,
-			siteConfig,
-			trackEvent,
-			eventTypes,
-			...props
-		},
-		ref
-	) => {
-		const mapPinColor = !showMap ? null : siteConfig.colors.primary.replace("#", "");
-
-		const handleClick = () => {
-			if (onItemSelected) {
-				onItemSelected(item);
-			}
-		};
-		let isFavorite = favorites.includes(item.id);
-
-		const handleFavouriteClick = (event, item) => {
-			if(!includeFavorite)return;
-			event.stopPropagation();
-			let updatedFavorites;
-			if (isFavorite) {
-				updatedFavorites = favorites.filter(fav => fav !== item.id);
-			} else {
-				updatedFavorites = [...favorites, item.id];
-			}
-			isFavorite = !isFavorite;
-			handleSettingFavorites(updatedFavorites);
-		};
-		return (
-			<button
-				ref={ref}
-				onClick={() => { handleClick(); }}
-				className={`
-				hc-group hc-relative hc-flex md:hc-flex-col hc-w-full hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hover:hc-bg-uiAccent/5
-				${isActive ? "hc-bg-uiAccent/5 hc-border-secondary hc-border" : "hc-text-uiText hc-bg-white"}
-				${className ?? ""}
-				`}
-				{...props}
-			>
-				<Grid
-					columns="hc-pl-2 hc-md-pl-0 hc-grid-flow-col hc-auto-cols-fr"
-					gap="hc-gap-0"
-					isAnimated={false}
-					className={`
-            hc-block md:hc-grid hc-py-2 hc-w-full hc-grow hc-leading-tight hc-text-sm md:hc-text-xs lg:hc-text-sm
-            ${bodyClassName ?? ""}
-          `}
-				>
-					<Grid.Item className="hc-hidden md:hc-block md:hc-absolute md:hc-left-1.5 hc-top-1.5">
-						<span className="hc-sr-only">Expand row</span>
-						<Icon
-							icon="fluent-emoji-high-contrast:plus"
-							size="hc-size-2.5"
-							className={`
-                hc-opacity-0 hc-text-uiText/60 hc-transition group-hover:hc-opacity-100 group-active:hc-opacity-100
-                ${isActive ? "hc-opacity-100 hc-rotate-45" : ""}
-              `}
-						/>
-					</Grid.Item>
-					<FieldMapper
-						item={item}
-						fieldsShown={fieldsShown}
-						specialFeatures={specialFeatures}
-						isFavorite={isFavorite}
-						includeFavorite={includeFavorite}
-						handleFavouriteClick={handleFavouriteClick}
-					/>
-					{includeFavorite &&
-					<Grid.Item
-						key={"favorites"}
-						className="hc-hidden md:hc-block hc-col-span-1  hc-px-2"
-					>
-						<Icon
-							icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
-							size="hc-size-3.5"
-							iconClasses={isFavorite ? "hc-text-primary" : ""}
-							title={!isFavorite ? 'Add job to favorites' : 'Remove job from favorites'}
-							className="hc-pr-2 hc-transition-opacity hc-duration-300 hc-cursor-pointer hc-opacity-100"
-							onClick={e => {handleFavouriteClick(e, item);}}
-						/>
-					</Grid.Item>
-					}
-				</Grid>
-				{showMap && (
-					<div onClick={() => { setMobileTab("mapTab"); handleClick(); }} className="md:hc-hidden hc-w-2/5 sm:hc-w-1/3 hc-p-1.5 hc-my-1 hc-bg-uiAccent/5 hc-border hc-border-uiAccent/10 hc-rounded-sm">
-						<img
-							src={`https://maps.googleapis.com/maps/api/staticmap?scale=2&center=${item.mapDetails?.latitude},${item.mapDetails?.longitude}&zoom=10&size=240x180&maptype=roadmap&markers=color:0x${mapPinColor}%7Clabel:•%7C${item.mapDetails?.latitude},${item.mapDetails?.longitude}&key=${process.env.GOOGLE_MAPS_API_KEY}`}
-							alt={`Map of location for ${item.fields.position}`}
-							className="hc-w-full hc-h-full hc-object-cover"
-						/>
-					</div>
-				)}
-			</button>
-		);
-	}
-);
-
-ListItem.displayName = "ListItem";
-
-export default React.memo(ListItem, (prevProps, nextProps) => {
-	return (
-		prevProps.isActive === nextProps.isActive &&
-		prevProps.favorites === nextProps.favorites &&
-    prevProps.item.id === nextProps.item.id &&
-	prevProps.item.fields.travelTime === nextProps.item.fields.travelTime &&
-    prevProps.fieldsShown === nextProps.fieldsShown &&
-    prevProps.bodyClassName === nextProps.bodyClassName &&
-    prevProps.className === nextProps.className
-	);
-});
+import React, { forwardRef } from 'react';
+import Grid from '~/components/modules/grid';
+import Icon from '~/components/modules/icon';
+import FieldMapper from '~/components/modules/list/field-mapper';
+
+const ListItem = forwardRef(
+	(
+		{
+			isActive,
+			bodyClassName,
+			className,
+			item,
+			fieldsShown,
+			specialFeatures,
+			onItemSelected,
+			showMap,
+			setMobileTab,
+			handleSettingFavorites,
+			favorites,
+			includeFavorite = true,
+			siteConfig,
+			trackEvent,
+			eventTypes,
+			...props
+		},
+		ref
+	) => {
+		const mapPinColor = !showMap ? null : siteConfig.colors.primary.replace("#", "");
+
+		const handleClick = () => {
+			if (onItemSelected) {
+				onItemSelected(item);
+			}
+		};
+		let isFavorite = favorites.includes(item.id);
+
+		const handleFavouriteClick = (event, item) => {
+			if(!includeFavorite)return;
+			event.stopPropagation();
+			let updatedFavorites;
+			if (isFavorite) {
+				updatedFavorites = favorites.filter(fav => fav !== item.id);
+			} else {
+				updatedFavorites = [...favorites, item.id];
+			}
+			isFavorite = !isFavorite;
+			handleSettingFavorites(updatedFavorites);
+		};
+		return (
+			<button
+				ref={ref}
+				onClick={() => { handleClick(); }}
+				className={`
+				hc-group hc-relative hc-flex md:hc-flex-col hc-w-full hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hover:hc-bg-uiAccent/5
+				${isActive ? "hc-bg-uiAccent/5 hc-border-secondary hc-border" : "hc-text-uiText hc-bg-white"}
+				${className ?? ""}
+				`}
+				{...props}
+			>
+				<Grid
+					columns="hc-pl-2 hc-md-pl-0 hc-grid-flow-col hc-auto-cols-fr"
+					gap="hc-gap-0"
+					isAnimated={false}
+					className={`
+            hc-block md:hc-grid hc-py-2 hc-w-full hc-grow hc-leading-tight hc-text-sm md:hc-text-xs lg:hc-text-sm
+            ${bodyClassName ?? ""}
+          `}
+				>
+					<Grid.Item className="hc-hidden md:hc-block md:hc-absolute md:hc-left-1.5 hc-top-1.5">
+						<span className="hc-sr-only">Expand row</span>
+						<Icon
+							icon="fluent-emoji-high-contrast:plus"
+							size="hc-size-2.5"
+							className={`
+                hc-opacity-0 hc-text-uiText/60 hc-transition group-hover:hc-opacity-100 group-active:hc-opacity-100
+                ${isActive ? "hc-opacity-100 hc-rotate-45" : ""}
+              `}
+						/>
+					</Grid.Item>
+					<FieldMapper
+						item={item}
+						fieldsShown={fieldsShown}
+						specialFeatures={specialFeatures}
+						isFavorite={isFavorite}
+						includeFavorite={includeFavorite}
+						handleFavouriteClick={handleFavouriteClick}
+					/>
+					{includeFavorite &&
+					<Grid.Item
+						key={"favorites"}
+						className="hc-hidden md:hc-block hc-col-span-1  hc-px-2"
+					>
+						<Icon
+							icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
+							size="hc-size-3.5"
+							iconClasses={isFavorite ? "hc-text-primary" : ""}
+							title={!isFavorite ? 'Add job to favorites' : 'Remove job from favorites'}
+							className="hc-pr-2 hc-transition-opacity hc-duration-300 hc-cursor-pointer hc-opacity-100"
+							onClick={e => {handleFavouriteClick(e, item);}}
+						/>
+					</Grid.Item>
+					}
+				</Grid>
+				{showMap && (
+					<div onClick={() => { setMobileTab("mapTab"); handleClick(); }} className="md:hc-hidden hc-w-2/5 sm:hc-w-1/3 hc-p-1.5 hc-my-1 hc-bg-uiAccent/5 hc-border hc-border-uiAccent/10 hc-rounded-sm">
+						<img
+							src={`https://maps.googleapis.com/maps/api/staticmap?scale=2&center=${item.mapDetails?.latitude},${item.mapDetails?.longitude}&zoom=10&size=240x180&maptype=roadmap&markers=color:0x${mapPinColor}%7Clabel:•%7C${item.mapDetails?.latitude},${item.mapDetails?.longitude}&key=${process.env.GOOGLE_MAPS_API_KEY}`}
+							alt={`Map of location for ${item.fields.position}`}
+							className="hc-w-full hc-h-full hc-object-cover"
+						/>
+					</div>
+				)}
+			</button>
+		);
+	}
+);
+
+ListItem.displayName = "ListItem";
+
+export default React.memo(ListItem, (prevProps, nextProps) => {
+	return (
+		prevProps.isActive === nextProps.isActive &&
+		prevProps.favorites === nextProps.favorites &&
+    prevProps.item.id === nextProps.item.id &&
+	prevProps.item.fields.travelTime === nextProps.item.fields.travelTime &&
+    prevProps.fieldsShown === nextProps.fieldsShown &&
+    prevProps.bodyClassName === nextProps.bodyClassName &&
+    prevProps.className === nextProps.className
+	);
+});

package/src/components/modules/maps/info-window-content.js

@@ -1,64 +1,64 @@
-import React from 'react';
-
-const InfoWindowContent = ({
-	items,
-	fullAddress,
-	applyFilters,
-	mapInfoWindowConfig
-}) => {
-	if (!items || items.length < 0) {
-		return null;
-	}
-
-	let mapDetails = items[0].mapDetails;
-	let entityDisplayName = mapDetails?.entityDisplayName;
-	let address = mapDetails?.address;
-
-	let displayHeader = entityDisplayName;
-	let displayAddress = fullAddress;
-
-	if (mapInfoWindowConfig) {
-		if (mapInfoWindowConfig.entityHeaderField && mapDetails[mapInfoWindowConfig.entityHeaderField]) {
-			displayHeader = mapDetails[mapInfoWindowConfig.entityHeaderField];
-		}
-
-		if (mapInfoWindowConfig.showEntityAddressFields) {
-			const addressFields = mapInfoWindowConfig.showEntityAddressFields
-				.map(field => address[field])
-				.filter(Boolean)
-				.join(', ');
-			displayAddress = addressFields;
-		}
-	} else {
-		if (!entityDisplayName.includes(address?.street) && !entityDisplayName.includes(address?.zip)) {
-			displayAddress = fullAddress;
-		} else {
-			displayAddress = '';
-		}
-	}
-
-	return (
-		<div className="hc-flex-auto hc-p-2">
-			<div>
-				<div>
-					<h4 className="hc-text-lg hc-font-bold hc-leading-tight hc-mb-3">
-						{displayHeader}
-					</h4>
-					<p>{displayAddress}</p>
-					<div className="hc-pt-2">
-						<button
-							className="hc-cursor-pointer hover:hc-opacity-70 hc-text-primary"
-							onClick={applyFilters}
-						>
-							{items.length > 1
-								? `View All ${items.length} jobs at this location`
-								: `View job at this location`}
-						</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default InfoWindowContent;
+import React from 'react';
+
+const InfoWindowContent = ({
+	items,
+	fullAddress,
+	applyFilters,
+	mapInfoWindowConfig
+}) => {
+	if (!items || items.length < 0) {
+		return null;
+	}
+
+	let mapDetails = items[0].mapDetails;
+	let entityDisplayName = mapDetails?.entityDisplayName;
+	let address = mapDetails?.address;
+
+	let displayHeader = entityDisplayName;
+	let displayAddress = fullAddress;
+
+	if (mapInfoWindowConfig) {
+		if (mapInfoWindowConfig.entityHeaderField && mapDetails[mapInfoWindowConfig.entityHeaderField]) {
+			displayHeader = mapDetails[mapInfoWindowConfig.entityHeaderField];
+		}
+
+		if (mapInfoWindowConfig.showEntityAddressFields) {
+			const addressFields = mapInfoWindowConfig.showEntityAddressFields
+				.map(field => address[field])
+				.filter(Boolean)
+				.join(', ');
+			displayAddress = addressFields;
+		}
+	} else {
+		if (!entityDisplayName.includes(address?.street) && !entityDisplayName.includes(address?.zip)) {
+			displayAddress = fullAddress;
+		} else {
+			displayAddress = '';
+		}
+	}
+
+	return (
+		<div className="hc-flex-auto hc-p-2">
+			<div>
+				<div>
+					<h4 className="hc-text-lg hc-font-bold hc-leading-tight hc-mb-3">
+						{displayHeader}
+					</h4>
+					<p>{displayAddress}</p>
+					<div className="hc-pt-2">
+						<button
+							className="hc-cursor-pointer hover:hc-opacity-70 hc-text-primary"
+							onClick={applyFilters}
+						>
+							{items.length > 1
+								? `View All ${items.length} jobs at this location`
+								: `View job at this location`}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default InfoWindowContent;