@abcagency/hc-ui-components 1.3.61 → 1.3.62

package/src/components/modules/list/header.js

@@ -1,51 +1,51 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-
-import Grid from '~/components/modules/grid';
-import HeaderItem from '~/components/modules/list/header-item';
-
-const ListHeader = ({
-	className,
-	fieldsShown,
-	fieldNames,
-	fieldIsSortable = true,
-	setSortSetting,
-	sortSetting,
-	includeFavorite = false,
-	scrollbarWidth
-}) => {
-	return (
-		<Grid
-			columns="hc-grid-flow-col hc-auto-cols-fr"
-			gap="hc-gap-0"
-			isAnimated={false}
-			style={{ paddingRight: `${scrollbarWidth && scrollbarWidth > 0 ? scrollbarWidth + 6 : 1 }px` }}
-			className={twMerge`
-				hc-hidden md:hc-grid hc-bg-uiAccent/10 hc-border-b hc-border-uiAccent/10 hc-sticky hc-top-0 hc-z-10
-				${className ?? ""}
-			`}
-		>
-			{fieldsShown.map(field => (
-				<HeaderItem
-					key={field}
-					isSortable={fieldIsSortable}
-					sortSetting={sortSetting}
-					field={field}
-					setSortSetting={setSortSetting}
-				>
-					{fieldNames[field]}
-				</HeaderItem>
-			))}
-			{ includeFavorite == true &&
-			<HeaderItem key={"favorite"}
-				isSortable={false}
-				field={"favorite"}
-			>
-				Favorite
-			</HeaderItem>
-			}
-		</Grid>
-	);
-};
-
-export default ListHeader;
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import Grid from '~/components/modules/grid';
+import HeaderItem from '~/components/modules/list/header-item';
+
+const ListHeader = ({
+	className,
+	fieldsShown,
+	fieldNames,
+	fieldIsSortable = true,
+	setSortSetting,
+	sortSetting,
+	includeFavorite = false,
+	scrollbarWidth
+}) => {
+	return (
+		<Grid
+			columns="hc-grid-flow-col hc-auto-cols-fr"
+			gap="hc-gap-0"
+			isAnimated={false}
+			style={{ paddingRight: `${scrollbarWidth && scrollbarWidth > 0 ? scrollbarWidth + 6 : 1 }px` }}
+			className={twMerge`
+				hc-hidden md:hc-grid hc-bg-uiAccent/10 hc-border-b hc-border-uiAccent/10 hc-sticky hc-top-0 hc-z-10
+				${className ?? ""}
+			`}
+		>
+			{fieldsShown.map(field => (
+				<HeaderItem
+					key={field}
+					isSortable={fieldIsSortable}
+					sortSetting={sortSetting}
+					field={field}
+					setSortSetting={setSortSetting}
+				>
+					{fieldNames[field]}
+				</HeaderItem>
+			))}
+			{ includeFavorite == true &&
+			<HeaderItem key={"favorite"}
+				isSortable={false}
+				field={"favorite"}
+			>
+				Favorite
+			</HeaderItem>
+			}
+		</Grid>
+	);
+};
+
+export default ListHeader;

package/src/components/modules/list/item-expand-card/index.js

@@ -1,22 +1,22 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-
-const CardItemExpand = ({
-	className,
-	content,
-	...props
-}) => {
-	return (
-		<div
-			className={twMerge(
-				'hc-flex hc-flex-col lg:hc-flex-row hc-flex-wrap hc-items-stretch hc-gap-x-4 hc-w-full lg:hc-pt-2 hc-border-t hc-border-uiAccent/20',
-				className ?? ''
-			)}
-			{...props}
-		>
-			{content}
-		</div>
-	);
-};
-
-export default CardItemExpand;
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const CardItemExpand = ({
+	className,
+	content,
+	...props
+}) => {
+	return (
+		<div
+			className={twMerge(
+				'hc-flex hc-flex-col lg:hc-flex-row hc-flex-wrap hc-items-stretch hc-gap-x-4 hc-w-full lg:hc-pt-2 hc-border-t hc-border-uiAccent/20',
+				className ?? ''
+			)}
+			{...props}
+		>
+			{content}
+		</div>
+	);
+};
+
+export default CardItemExpand;

package/src/components/modules/list/item-expand-card/recruiter-contact-nav.js

@@ -1,50 +1,50 @@
-import React from 'react';
-
-import Button from '~/components/modules/buttons/default';
-
-const RecruiterContactNav = ({
-	children,
-	className
-}) => {
-	return (
-		<nav
-			className={`
-			hc-inline-flex hc-items-center hc-justify-between hc-gap-2 hc-mt-2
-				${className ?? ''}
-			`}
-		>
-			{children}
-		</nav>
-	);
-};
-
-export const NavButton = ({
-	className,
-	href,
-	target = '_self',
-	title,
-	icon,
-	...props
-}) => {
-	return (
-		<Button.Anchor
-			href={href}
-			variant="icon"
-			size="sq"
-			target={target}
-			title={title}
-			className={className ?? ''}
-			{...props}
-		>
-			<span className="hc-sr-only">{title}</span>
-			<Button.Icon
-				icon={icon}
-				size="hc-size-8"
-			/>
-		</Button.Anchor>
-	);
-};
-
-RecruiterContactNav.Button = NavButton;
-
-export default RecruiterContactNav;
+import React from 'react';
+
+import Button from '~/components/modules/buttons/default';
+
+const RecruiterContactNav = ({
+	children,
+	className
+}) => {
+	return (
+		<nav
+			className={`
+			hc-inline-flex hc-items-center hc-justify-between hc-gap-2 hc-mt-2
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</nav>
+	);
+};
+
+export const NavButton = ({
+	className,
+	href,
+	target = '_self',
+	title,
+	icon,
+	...props
+}) => {
+	return (
+		<Button.Anchor
+			href={href}
+			variant="icon"
+			size="sq"
+			target={target}
+			title={title}
+			className={className ?? ''}
+			{...props}
+		>
+			<span className="hc-sr-only">{title}</span>
+			<Button.Icon
+				icon={icon}
+				size="hc-size-8"
+			/>
+		</Button.Anchor>
+	);
+};
+
+RecruiterContactNav.Button = NavButton;
+
+export default RecruiterContactNav;

package/src/components/modules/list/item-expand-card/recruiter-details.js

@@ -1,68 +1,68 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-
-const RecruiterDetails = ({
-	contactNav,
-	className,
-	children
-}) => {
-	return (
-		<div
-			className={twMerge`
-				hc-grow
-				${className ?? ''}
-			`}
-		>
-			{children}
-
-			{contactNav &&
-				<div className="hc-inline-flex">
-					{contactNav}
-				</div>
-			}
-		</div>
-	);
-};
-
-export const Title = ({
-	as = 'h4',
-	className,
-	children
-}) => {
-	const Container = as;
-
-	return (
-		<Container
-			className={twMerge`
-				hc-text-base hc-font-medium
-				${className ?? ''}
-			`}
-		>
-			{children}
-		</Container>
-	);
-};
-
-export const Text = ({
-	as = 'p',
-	className,
-	children
-}) => {
-	const Container = as;
-
-	return (
-		<Container
-			className={twMerge`
-				hc-text-sm hc-text-uiText/60
-				${className ?? ''}
-			`}
-		>
-			{children}
-		</Container>
-	);
-};
-
-RecruiterDetails.Title = Title;
-RecruiterDetails.Text = Text;
-
-export default RecruiterDetails;
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const RecruiterDetails = ({
+	contactNav,
+	className,
+	children
+}) => {
+	return (
+		<div
+			className={twMerge`
+				hc-grow
+				${className ?? ''}
+			`}
+		>
+			{children}
+
+			{contactNav &&
+				<div className="hc-inline-flex">
+					{contactNav}
+				</div>
+			}
+		</div>
+	);
+};
+
+export const Title = ({
+	as = 'h4',
+	className,
+	children
+}) => {
+	const Container = as;
+
+	return (
+		<Container
+			className={twMerge`
+				hc-text-base hc-font-medium
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</Container>
+	);
+};
+
+export const Text = ({
+	as = 'p',
+	className,
+	children
+}) => {
+	const Container = as;
+
+	return (
+		<Container
+			className={twMerge`
+				hc-text-sm hc-text-uiText/60
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</Container>
+	);
+};
+
+RecruiterDetails.Title = Title;
+RecruiterDetails.Text = Text;
+
+export default RecruiterDetails;

package/src/components/modules/list/item-expand-card/recruiter-headshot.js

@@ -1,22 +1,22 @@
-import React from 'react';
-
-const RecruiterHeadshot = ({
-	image,
-	alt,
-	className,
-	imageClassName
-}) => {
-	return (
-		<div className={className ?? ''}>
-			<img
-				src={image}
-				width="96"
-				height="96"
-				alt={alt}
-				className={imageClassName ?? ''}
-			/>
-		</div>
-	);
-};
-
-export default RecruiterHeadshot;
+import React from 'react';
+
+const RecruiterHeadshot = ({
+	image,
+	alt,
+	className,
+	imageClassName
+}) => {
+	return (
+		<div className={className ?? ''}>
+			<img
+				src={image}
+				width="96"
+				height="96"
+				alt={alt}
+				className={imageClassName ?? ''}
+			/>
+		</div>
+	);
+};
+
+export default RecruiterHeadshot;

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;