@abcagency/hc-ui-components 1.3.28 → 1.3.30

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

@@ -1,91 +1,92 @@
-import React, { useState, useEffect } from 'react';
-
-import Button from '~/components/modules/buttons/default';
-
-const SORT_STATE = {
-	notSorted: "not-sorted",
-	sortedAsc: "sorted-asc",
-	sortedDesc: "sorted-desc"
-};
-
-const HeaderItem = ({
-	className,
-	children,
-	field,
-	setSortSetting,
-	sortSetting,
-	isSortable,
-	...rest
-}) => {
-	const [isSorted, setIsSorted] = useState(SORT_STATE.notSorted);
-
-	const handleChange = field => {
-		if (isSortable === false)
-			return;
-		let setting = {
-			field: field,
-			type: isSorted === SORT_STATE.sortedAsc ? "desc" : "asc"
-		};
-		setSortSetting(setting);
-		isSorted === SORT_STATE.notSorted
-			? setIsSorted(SORT_STATE.sortedAsc)
-			: isSorted === SORT_STATE.sortedAsc
-				? setIsSorted(SORT_STATE.sortedDesc)
-				: setIsSorted(SORT_STATE.sortedAsc);
-	};
-
-	useEffect(() => {
-		if (sortSetting?.field != null && sortSetting.field != field) {
-			setIsSorted(SORT_STATE.notSorted);
-		} else if (
-			sortSetting?.field != null &&
-			isSorted == SORT_STATE.notSorted &&
-			sortSetting.field == field
-		) {
-			setIsSorted(
-				sortSetting.type == "asc"
-					? SORT_STATE.sortedAsc
-					: SORT_STATE.sortedDesc
-			);
-		}
-	}, [sortSetting, isSorted, field]);
-
-	return (
-		<Button.Btn
-			onClick={() => handleChange(field)}
-			variant="none"
-			className={`
-				hc-p-2 hc-rounded-none hc-text-left hc-normal-case hover:hc-bg-uiAccent/5 focus:hc-bg-uiAccent/5
-				${field.toLowerCase() === "position" ? "hc-col-span-2" : "hc-col-span-1"}
-				${className ?? ""}
-			`}
-			{...rest}
-		>
-			<Button.Body>
-				<span className="hc-font-semibold">{children}</span>
-				{isSortable && (
-					<div className="hc-flex hc-flex-col hc-pr-2">
-						<Button.Icon
-							icon="bi:caret-up-fill"
-							size="hc-size-2.5"
-							className={`
-							hc-transition-opacity
-								${isSorted === "sorted-asc" ? "hc-opacity-100 hc-text-primary" : "hc-opacity-30"}
-							`}
-						/>
-						<Button.Icon
-							icon="bi:caret-down-fill"
-							size="hc-size-2.5"
-							className={`
-								transition-opacity
-								${isSorted === "sorted-desc" ? "hc-opacity-100" : "hc-opacity-30"}
-							`}
-						/>
-					</div>
-				)}
-			</Button.Body>
-		</Button.Btn>
-	);
-};
-
-export default HeaderItem;
+import React, { useState, useEffect } from 'react';
+
+import Button from '~/components/modules/buttons/default';
+
+const SORT_STATE = {
+	notSorted: "not-sorted",
+	sortedAsc: "sorted-asc",
+	sortedDesc: "sorted-desc"
+};
+
+const HeaderItem = ({
+	className,
+	children,
+	field,
+	setSortSetting,
+	sortSetting,
+	isSortable,
+	...rest
+}) => {
+	const [isSorted, setIsSorted] = useState(SORT_STATE.notSorted);
+
+	const handleChange = field => {
+		if (isSortable === false)
+			return;
+		let setting = {
+			field: field,
+			type: isSorted === SORT_STATE.sortedAsc ? "desc" : "asc"
+		};
+		setSortSetting(setting);
+		isSorted === SORT_STATE.notSorted
+			? setIsSorted(SORT_STATE.sortedAsc)
+			: isSorted === SORT_STATE.sortedAsc
+				? setIsSorted(SORT_STATE.sortedDesc)
+				: setIsSorted(SORT_STATE.sortedAsc);
+	};
+
+	useEffect(() => {
+		if (sortSetting?.field != null && sortSetting.field != field) {
+			setIsSorted(SORT_STATE.notSorted);
+		} else if (
+			sortSetting?.field != null &&
+			isSorted == SORT_STATE.notSorted &&
+			sortSetting.field == field
+		) {
+			setIsSorted(
+				sortSetting.type == "asc"
+					? SORT_STATE.sortedAsc
+					: SORT_STATE.sortedDesc
+			);
+		}
+	}, [sortSetting, isSorted, field]);
+
+	return (
+		<Button.Btn
+			onClick={() => handleChange(field)}
+			variant="none"
+			size="none"
+			className={`
+				hc-p-2 hc-rounded-none hc-text-left hc-normal-case hover:hc-bg-uiAccent/5 focus:hc-bg-uiAccent/5
+				${field.toLowerCase() === "position" ? "hc-pl-7 hc-col-span-4" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
+				${className ?? ""}
+			`}
+			{...rest}
+		>
+			<Button.Body>
+				<span className="hc-font-semibold">{children}</span>
+				{isSortable && (
+					<div className="hc-flex hc-flex-col hc-pr-2">
+						<Button.Icon
+							icon="bi:caret-up-fill"
+							size="hc-size-2.5"
+							className={`
+							hc-transition-opacity
+								${isSorted === "sorted-asc" ? "hc-opacity-100 hc-text-primary" : "hc-opacity-30"}
+							`}
+						/>
+						<Button.Icon
+							icon="bi:caret-down-fill"
+							size="hc-size-2.5"
+							className={`
+								transition-opacity
+								${isSorted === "sorted-desc" ? "hc-opacity-100" : "hc-opacity-30"}
+							`}
+						/>
+					</div>
+				)}
+			</Button.Body>
+		</Button.Btn>
+	);
+};
+
+export default HeaderItem;

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

@@ -1,49 +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
-}) => {
-	return (
-		<Grid
-			columns="hc-grid-flow-col hc-auto-cols-fr"
-			gap="hc-gap-0"
-			isAnimated={false}
-			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-list.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject, ReactNode } from 'react';
+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";
@@ -22,63 +22,97 @@ interface ItemsListProps {
 }
 
 const ItemsList: React.FC<ItemsListProps> = ({
-	fieldNames,
-	showMap,
-	fieldsShown,
-	filteredListings,
-	loading,
-	sortSetting,
-	setSortSetting,
-	itemLimit,
-	loader,
-	scrollContainerRef,
-	includeFavorite = false,
-	children
-}) => (
-	<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}
-			/>
-		</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>
-);
+  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);
+      console.log('Scrollbar width:', 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;