@abcagency/hc-ui-components 1.3.94 → 1.3.95

package/src/components/containers/maps/map-list-container.js

@@ -1,52 +1,52 @@
-import React from 'react';
-
-import List from '~/components/containers/list/item-list-container';
-import Map from '~/components/containers/maps/map-container';
-import Filter from '~/components/containers/filter/filter-container';
-import MapList from '~/components/modules/maps/map-list';
-
-const MapListContainer = ({
-	loading = false,
-	containerStyle,
-	mapDetails,
-	markerConfigs,
-	itemExpandedContent,
-	fieldsShown,
-	specialFeatures,
-	fieldNames,
-	showMap,
-	placeMappings,
-	mapPosition
-}) => {
-
-	const listProps = {
-		fieldsShown,
-		fieldNames,
-		itemExpandedContent,
-		loading,
-		showMap,
-		specialFeatures
-	};
-
-	const mapProps = {
-		mapDetails,
-		markerConfigs,
-		placeMappings,
-		clusterGridSize: 60,
-		showMap
-	};
-
-	return (
-		<MapList
-			showMap={showMap}
-			containerStyle={containerStyle}
-			loading={loading}
-			list={<List {...listProps} />}
-			map={<Map {...mapProps} />}
-			filter={<Filter showMap={showMap} className="md:hc-hidden" />}
-			mapPosition={mapPosition}
-		/>
-	);
-};
-
-export default MapListContainer;
+import React from 'react';
+
+import List from '~/components/containers/list/item-list-container';
+import Map from '~/components/containers/maps/map-container';
+import Filter from '~/components/containers/filter/filter-container';
+import MapList from '~/components/modules/maps/map-list';
+
+const MapListContainer = ({
+	loading = false,
+	containerStyle,
+	mapDetails,
+	markerConfigs,
+	itemExpandedContent,
+	fieldsShown,
+	specialFeatures,
+	fieldNames,
+	showMap,
+	placeMappings,
+	mapPosition
+}) => {
+
+	const listProps = {
+		fieldsShown,
+		fieldNames,
+		itemExpandedContent,
+		loading,
+		showMap,
+		specialFeatures
+	};
+
+	const mapProps = {
+		mapDetails,
+		markerConfigs,
+		placeMappings,
+		clusterGridSize: 60,
+		showMap
+	};
+
+	return (
+		<MapList
+			showMap={showMap}
+			containerStyle={containerStyle}
+			loading={loading}
+			list={<List {...listProps} />}
+			map={<Map {...mapProps} />}
+			filter={<Filter showMap={showMap} className="md:hc-hidden" />}
+			mapPosition={mapPosition}
+		/>
+	);
+};
+
+export default MapListContainer;

package/src/components/containers/maps/map-marker-container.js

@@ -1,86 +1,86 @@
-"use client";
-
-import React, { useEffect, useRef } from "react";
-import MapMarker from "~/components/modules/maps/map-marker";
-import { InfoWindow } from "@react-google-maps/api";
-import InfoWindowCard from "~/components/modules/maps/info-window-card";
-import InfoWindowContent from "~/components/containers/maps/info-window-content-container";
-
-import { useMap } from "~/contexts/mapContext";
-import { useMapList } from "~/contexts/mapListContext";
-import { useTrackEvent } from "~/contexts/trackEventContext";
-
-const MapMarkerContainer = ({
-	item,
-	markerRefs,
-	infoWindowClasses,
-	markerClickHandler,
-	clusterer,
-	markerIconSelected,
-	markerIcon,
-	selectedLocation,
-	setMapInteracted
-}) => {
-	const { setLocation, commuteLocation } = useMap();
-	const isSelected = item.id === selectedLocation?.id;
-	const markerRef = useRef(null);
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const { resetEntityFilter } = useMapList();
-
-	useEffect(() => {
-		markerRefs.current[item.id] = markerRef.current;
-	}, []);
-
-	const onMarkerClick = () => {
-		trackEvent(eventTypes.MAP_MARKER_CLICKED, {
-			entityDisplayName: item.entityDisplayName,
-			lat: item.latitude,
-			lng: item.longitude,
-			travelTime: item.travelTime
-		});
-		setMapInteracted(true);
-		markerClickHandler(item);
-	};
-	const onLoad = marker => {
-		const count = Object.values(item.items).length;
-		marker.set("count", count);
-	};
-
-	return (
-		<MapMarker
-			position={{ lat: item.latitude, lng: item.longitude }}
-			title={item.name}
-			icon={isSelected ? markerIconSelected : markerIcon}
-			zIndex={isSelected ? 9999 : 1}
-			onLoad={marker => {
-				markerRef.current = marker;
-				onLoad(marker);
-			}}
-			onClick={onMarkerClick}
-			clusterer={clusterer}
-			item={item}
-		>
-			{isSelected && (
-				<InfoWindow
-					position={{ lat: item.latitude, lng: item.longitude }}
-					anchor={markerRefs.current[item.id]}
-					onCloseClick={() => {
-						setMapInteracted(true);
-						setLocation(null);
-						resetEntityFilter();
-					}}
-					options={{ maxWidth: 400 }}
-				>
-					<InfoWindowCard
-						className={infoWindowClasses}
-						id={item.id}
-						content={<InfoWindowContent item={item} commuteLocation={commuteLocation} />}
-					/>
-				</InfoWindow>
-			)}
-		</MapMarker>
-	);
-};
-
-export default MapMarkerContainer;
-
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import MapMarker from "~/components/modules/maps/map-marker";
+import { InfoWindow } from "@react-google-maps/api";
+import InfoWindowCard from "~/components/modules/maps/info-window-card";
+import InfoWindowContent from "~/components/containers/maps/info-window-content-container";
+
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+import { useTrackEvent } from "~/contexts/trackEventContext";
+
+const MapMarkerContainer = ({
+	item,
+	markerRefs,
+	infoWindowClasses,
+	markerClickHandler,
+	clusterer,
+	markerIconSelected,
+	markerIcon,
+	selectedLocation,
+	setMapInteracted
+}) => {
+	const { setLocation, commuteLocation } = useMap();
+	const isSelected = item.id === selectedLocation?.id;
+	const markerRef = useRef(null);
+	const { trackEvent, eventTypes } = useTrackEvent();
+	const { resetEntityFilter } = useMapList();
+
+	useEffect(() => {
+		markerRefs.current[item.id] = markerRef.current;
+	}, []);
+
+	const onMarkerClick = () => {
+		trackEvent(eventTypes.MAP_MARKER_CLICKED, {
+			entityDisplayName: item.entityDisplayName,
+			lat: item.latitude,
+			lng: item.longitude,
+			travelTime: item.travelTime
+		});
+		setMapInteracted(true);
+		markerClickHandler(item);
+	};
+	const onLoad = marker => {
+		const count = Object.values(item.items).length;
+		marker.set("count", count);
+	};
+
+	return (
+		<MapMarker
+			position={{ lat: item.latitude, lng: item.longitude }}
+			title={item.name}
+			icon={isSelected ? markerIconSelected : markerIcon}
+			zIndex={isSelected ? 9999 : 1}
+			onLoad={marker => {
+				markerRef.current = marker;
+				onLoad(marker);
+			}}
+			onClick={onMarkerClick}
+			clusterer={clusterer}
+			item={item}
+		>
+			{isSelected && (
+				<InfoWindow
+					position={{ lat: item.latitude, lng: item.longitude }}
+					anchor={markerRefs.current[item.id]}
+					onCloseClick={() => {
+						setMapInteracted(true);
+						setLocation(null);
+						resetEntityFilter();
+					}}
+					options={{ maxWidth: 400 }}
+				>
+					<InfoWindowCard
+						className={infoWindowClasses}
+						id={item.id}
+						content={<InfoWindowContent item={item} commuteLocation={commuteLocation} />}
+					/>
+				</InfoWindow>
+			)}
+		</MapMarker>
+	);
+};
+
+export default MapMarkerContainer;
+

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

@@ -1,30 +1,30 @@
-import React from 'react';
-import Accordion from '~/components/modules/accordions/default';
-import ItemExpandCard from '~/components/modules/list/item-expand-card';
-
-const MapAccordionItem = ({
-	item,
-	itemRefs,
-	itemExpandedContent,
-	isActive,
-	recruiter,
-	children
-}) => {
-	return (
-		<Accordion.Item key={item.id} id={item.id}>
-			<Accordion.Trigger.Blank>
-				<div ref={el => (itemRefs.current[item.id] = el)}>
-					{children}
-				</div>
-			</Accordion.Trigger.Blank>
-			{isActive &&
-
-        <Accordion.Content bodyClassName="hc-px-2 hc-py-2 hc-pt-0 hc-bg-uiAccent/5 hc-border-secondary hc-border hc-border-t-0">
-        	{ <ItemExpandCard content={itemExpandedContent(item, recruiter)} />}
-        </Accordion.Content>
-			}
-		</Accordion.Item>
-	);
-};
-
-export default MapAccordionItem;
+import React from 'react';
+import Accordion from '~/components/modules/accordions/default';
+import ItemExpandCard from '~/components/modules/list/item-expand-card';
+
+const MapAccordionItem = ({
+	item,
+	itemRefs,
+	itemExpandedContent,
+	isActive,
+	recruiter,
+	children
+}) => {
+	return (
+		<Accordion.Item key={item.id} id={item.id}>
+			<Accordion.Trigger.Blank>
+				<div ref={el => (itemRefs.current[item.id] = el)}>
+					{children}
+				</div>
+			</Accordion.Trigger.Blank>
+			{isActive &&
+
+        <Accordion.Content bodyClassName="hc-px-2 hc-py-2 hc-pt-0 hc-bg-uiAccent/5 hc-border-secondary hc-border hc-border-t-0">
+        	{ <ItemExpandCard content={itemExpandedContent(item, recruiter)} />}
+        </Accordion.Content>
+			}
+		</Accordion.Item>
+	);
+};
+
+export default MapAccordionItem;

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

@@ -1,171 +1,171 @@
-import React, { forwardRef } from 'react';
-import * as RadixAccordion from '@radix-ui/react-accordion';
-import { twMerge } from 'tailwind-merge';
-
-import Icon from '~/components/modules/icon';
-
-const Accordion = ({
-	className,
-	type = 'single',
-	defaultValue,
-	collapsible = true,
-	children
-}) => {
-	return (
-		<RadixAccordion.Root
-			type={type}
-			value={defaultValue ?? null}
-			collapsible={collapsible}
-			className={className ?? ''}
-		>
-			{children}
-		</RadixAccordion.Root>
-	);
-};
-
-export const AccordionItem = forwardRef((
-	{
-		id,
-		children,
-		className,
-		...props
-	},
-	forwardedRef
-) => {
-	return (
-		<RadixAccordion.Item
-			ref={forwardedRef}
-			value={id}
-			className={className ?? ''}
-			{...props}
-		>
-			{children}
-		</RadixAccordion.Item>
-	);
-});
-
-export const AccordionTrigger = forwardRef((
-	{
-		children,
-		className,
-		...props
-	},
-	forwardedRef
-) => (
-	<RadixAccordion.Header asChild>
-		<RadixAccordion.Trigger
-			ref={forwardedRef}
-			className={twMerge(
-				'hc-group hc-flex hc-justify-between hc-w-full hc-p-4 hc-font-bold hc-text-left hc-text-uiText focus:hc-outline-none hfocus-visible:hcring focus-visible:hc-ring-uiAccent focus-visible:hc-ring-opacity-75 hover:hc-text-primary focus:hc-text-primary hc-transition data-[state=open]:hc-text-primary',
-				className ?? ''
-			)}
-			{...props}
-		>
-			{children}
-			<Icon
-				icon="uil:angle-down"
-				size="hc-size-5"
-				className="hc-transition-transform group-data-[state=open]:!hc-rotate-180"
-				aria-hidden="true"
-			/>
-		</RadixAccordion.Trigger>
-	</RadixAccordion.Header>
-));
-
-export const AccordionTriggerHasHeader = forwardRef((
-	{
-		header,
-		headerClassName,
-		iconClassName,
-		children,
-		className,
-		...props
-	},
-	forwardedRef
-) => (
-	<RadixAccordion.Header
-		className={twMerge(
-			'hc-group hc-flex hc-items-start hc-justify-between hc-w-full hc-p-4 hc-pr-3 hc-font-bold hc-text-left hc-text-uiText focus:hc-outline-none focus-visible:hc-ring focus-visible:hc-ring-uiAccent focus-visible:hc-ring-opacity-75 hover:hc-text-primary focus:hc-text-primary hc-transition data-[state=open]:hc-text-primary',
-			headerClassName ?? ''
-		)}
-	>
-		<RadixAccordion.Trigger
-			ref={forwardedRef}
-			className={twMerge('hc-flex hc-items-center hc-justify-between hc-w-full', className ?? '')}
-			{...props}
-		>
-			{children}
-			<Icon
-				icon="uil:angle-down"
-				size="w-5 h-5"
-				className={twMerge(
-					'hc-transition-transform group-data-[state=open]:!hc-rotate-180',
-					iconClassName ?? ''
-				)}
-				aria-hidden="true"
-			/>
-			{header}
-		</RadixAccordion.Trigger>
-	</RadixAccordion.Header>
-));
-
-export const AccordionTriggerBlank = forwardRef((
-	{
-		children,
-		className,
-		...props
-	},
-	forwardedRef
-) => (
-	<RadixAccordion.Header asChild>
-		<RadixAccordion.Trigger
-			asChild
-			ref={forwardedRef}
-			{...props}
-		>
-			{children}
-		</RadixAccordion.Trigger>
-	</RadixAccordion.Header>
-));
-
-export const AccordionContent = forwardRef((
-	{
-		children,
-		className,
-		bodyClassName,
-		...props
-	},
-	forwardedRef
-) => (
-	<RadixAccordion.Content
-		ref={forwardedRef}
-		className={twMerge(
-			'data-[state=open]:hc-animate-slideDown data-[state=closed]:hc-animate-slideUp hc-overflow-hidden',
-			className ?? ''
-		)}
-		{...props}
-	>
-		<div
-			className={twMerge(
-				'hc-p-4 hc-pt-0.5',
-				bodyClassName ?? ''
-			)}
-		>
-			{children}
-		</div>
-	</RadixAccordion.Content>
-));
-
-Accordion.Item = AccordionItem;
-Accordion.Trigger = AccordionTrigger;
-Accordion.Trigger.Blank = AccordionTriggerBlank;
-Accordion.Trigger.HasHeader = AccordionTriggerHasHeader;
-Accordion.Content = AccordionContent;
-
-AccordionItem.displayName = 'AccordionItem';
-AccordionTrigger.displayName = 'AccordionTrigger';
-AccordionTriggerBlank.displayName = 'AccordionTriggerBlank';
-AccordionTriggerHasHeader.displayName = 'AccordionTriggerHasHeader';
-AccordionContent.displayName = 'AccordionContent';
-
-export default Accordion;
+import React, { forwardRef } from 'react';
+import * as RadixAccordion from '@radix-ui/react-accordion';
+import { twMerge } from 'tailwind-merge';
+
+import Icon from '~/components/modules/icon';
+
+const Accordion = ({
+	className,
+	type = 'single',
+	defaultValue,
+	collapsible = true,
+	children
+}) => {
+	return (
+		<RadixAccordion.Root
+			type={type}
+			value={defaultValue ?? null}
+			collapsible={collapsible}
+			className={className ?? ''}
+		>
+			{children}
+		</RadixAccordion.Root>
+	);
+};
+
+export const AccordionItem = forwardRef((
+	{
+		id,
+		children,
+		className,
+		...props
+	},
+	forwardedRef
+) => {
+	return (
+		<RadixAccordion.Item
+			ref={forwardedRef}
+			value={id}
+			className={className ?? ''}
+			{...props}
+		>
+			{children}
+		</RadixAccordion.Item>
+	);
+});
+
+export const AccordionTrigger = forwardRef((
+	{
+		children,
+		className,
+		...props
+	},
+	forwardedRef
+) => (
+	<RadixAccordion.Header asChild>
+		<RadixAccordion.Trigger
+			ref={forwardedRef}
+			className={twMerge(
+				'hc-group hc-flex hc-justify-between hc-w-full hc-p-4 hc-font-bold hc-text-left hc-text-uiText focus:hc-outline-none hfocus-visible:hcring focus-visible:hc-ring-uiAccent focus-visible:hc-ring-opacity-75 hover:hc-text-primary focus:hc-text-primary hc-transition data-[state=open]:hc-text-primary',
+				className ?? ''
+			)}
+			{...props}
+		>
+			{children}
+			<Icon
+				icon="uil:angle-down"
+				size="hc-size-5"
+				className="hc-transition-transform group-data-[state=open]:!hc-rotate-180"
+				aria-hidden="true"
+			/>
+		</RadixAccordion.Trigger>
+	</RadixAccordion.Header>
+));
+
+export const AccordionTriggerHasHeader = forwardRef((
+	{
+		header,
+		headerClassName,
+		iconClassName,
+		children,
+		className,
+		...props
+	},
+	forwardedRef
+) => (
+	<RadixAccordion.Header
+		className={twMerge(
+			'hc-group hc-flex hc-items-start hc-justify-between hc-w-full hc-p-4 hc-pr-3 hc-font-bold hc-text-left hc-text-uiText focus:hc-outline-none focus-visible:hc-ring focus-visible:hc-ring-uiAccent focus-visible:hc-ring-opacity-75 hover:hc-text-primary focus:hc-text-primary hc-transition data-[state=open]:hc-text-primary',
+			headerClassName ?? ''
+		)}
+	>
+		<RadixAccordion.Trigger
+			ref={forwardedRef}
+			className={twMerge('hc-flex hc-items-center hc-justify-between hc-w-full', className ?? '')}
+			{...props}
+		>
+			{children}
+			<Icon
+				icon="uil:angle-down"
+				size="w-5 h-5"
+				className={twMerge(
+					'hc-transition-transform group-data-[state=open]:!hc-rotate-180',
+					iconClassName ?? ''
+				)}
+				aria-hidden="true"
+			/>
+			{header}
+		</RadixAccordion.Trigger>
+	</RadixAccordion.Header>
+));
+
+export const AccordionTriggerBlank = forwardRef((
+	{
+		children,
+		className,
+		...props
+	},
+	forwardedRef
+) => (
+	<RadixAccordion.Header asChild>
+		<RadixAccordion.Trigger
+			asChild
+			ref={forwardedRef}
+			{...props}
+		>
+			{children}
+		</RadixAccordion.Trigger>
+	</RadixAccordion.Header>
+));
+
+export const AccordionContent = forwardRef((
+	{
+		children,
+		className,
+		bodyClassName,
+		...props
+	},
+	forwardedRef
+) => (
+	<RadixAccordion.Content
+		ref={forwardedRef}
+		className={twMerge(
+			'data-[state=open]:hc-animate-slideDown data-[state=closed]:hc-animate-slideUp hc-overflow-hidden',
+			className ?? ''
+		)}
+		{...props}
+	>
+		<div
+			className={twMerge(
+				'hc-p-4 hc-pt-0.5',
+				bodyClassName ?? ''
+			)}
+		>
+			{children}
+		</div>
+	</RadixAccordion.Content>
+));
+
+Accordion.Item = AccordionItem;
+Accordion.Trigger = AccordionTrigger;
+Accordion.Trigger.Blank = AccordionTriggerBlank;
+Accordion.Trigger.HasHeader = AccordionTriggerHasHeader;
+Accordion.Content = AccordionContent;
+
+AccordionItem.displayName = 'AccordionItem';
+AccordionTrigger.displayName = 'AccordionTrigger';
+AccordionTriggerBlank.displayName = 'AccordionTriggerBlank';
+AccordionTriggerHasHeader.displayName = 'AccordionTriggerHasHeader';
+AccordionContent.displayName = 'AccordionContent';
+
+export default Accordion;