@abcagency/hc-ui-components 1.3.94 → 1.3.96

package/src/components/modules/filter/commute.js

@@ -1,108 +1,108 @@
-import React, { Fragment } from 'react';
-import { Combobox, Transition } from '@headlessui/react';
-
-import Button from '~/components/modules/buttons/default';
-import Icon from "~/components/modules/icon";
-
-const FilterCommute = ({
-	className,
-	ready,
-	status,
-	data,
-	selected,
-	isCurrentLocation,
-	inputRef,
-	handleSelect,
-	setValue,
-	setSelected,
-	clearSuggestions,
-	commuteLocation,
-	setIsCurrentLocation,
-	fetchLocation,
-	setCommuteLocation
-}) => {
-	return (
-		<div className={`relative ${className ?? ""}`}>
-			<label
-				htmlFor="commute"
-				className="hc-flex hc-items-center hc-gap-2 hc-mb-2 hc-text-xs hc-uppercase hc-font-bold hc-text-uiText"
-			>
-				<Icon
-					icon="ri:pin-distance-fill"
-					size="hc-size-5"
-					className="hc-text-uiAccent/30"
-				/>
-				<span>
-					<span className="md:hc-hidden lg:hc-inline">Calculate your</span> commute
-				</span>
-			</label>
-
-			<Combobox value={selected} onChange={handleSelect}>
-				<div className="hc-relative hc-mt-1">
-					<div className="hc-relative hc-flex hc-items-center hc-w-full hc-pr-2 hc-cursor-default hc-overflow-hidden hc-rounded hc-bg-white hc-text-left hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent focus:hc-outline-none">
-						<Combobox.Input
-							className="hc-w-full hc-border-none hc-py-2 hc-pl-4 hc-pr-1 hc-text-sm hc-leading-5 hc-text-gray-900 focus:hc-ring-0 placeholder:hc-text-gray-400"
-							onChange={e => {
-								setCommuteLocation("");
-								setValue(e.target.value);
-								setSelected(e.target.value);
-							}}
-							value={selected}
-							disabled={!ready}
-							placeholder="Starting point"
-							ref={inputRef}
-						/>
-						<Button.Btn
-							variant="icon"
-							size="sqsm"
-							onClick={() => {
-								setIsCurrentLocation(!isCurrentLocation);
-								localStorage.setItem('isCurrentLocation', !isCurrentLocation);
-								if (isCurrentLocation || commuteLocation) {
-									setCommuteLocation("");
-									setSelected("");
-								} else if (!commuteLocation) { fetchLocation(); }
-							}}
-
-							className=""
-						>
-							<span className="hc-sr-only">Use your location</span>
-							{commuteLocation ? <Icon icon="mdi:times"></Icon> : <Button.Icon className={isCurrentLocation ? 'hc-text-blue-500' : 'hc-text-current'} icon="mdi:my-location" />}
-						</Button.Btn>
-					</div>
-					<Transition
-						as={Fragment}
-						leave="hc-transition hc-ease-in hc-duration-100"
-						leaveFrom="hc-opacity-100"
-						leaveTo="hc-opacity-0"
-						afterLeave={clearSuggestions}
-					>
-						<Combobox.Options className="hc-absolute hc-z-20 hc-mt-1 hc-max-h-60 hc-w-full hc-overflow-auto hc-rounded hc-bg-white hc-py-1 hc-text-base hc-shadow hc-ring-1 hc-ring-uiAccent/10 focus:hc-outline-none sm:hc-text-sm">
-							{status === "OK" &&
-								data.map(data => (
-									<Combobox.Option
-										key={data.place_id}
-										value={data.description}
-										className={({ active }) =>
-											`hc-relative hc-cursor-default hc-select-none hc-px-4 hc-py-2 ${active ? "hc-bg-primary hc-text-white" : "hc-text-uiText"
-											}`
-										}
-									>
-										{({ selected }) => (
-											<span
-												className={`hc-block hc-truncate ${selected ? "hc-font-bold" : "hc-font-medium"}`}
-											>
-												{data.description}
-											</span>
-										)}
-									</Combobox.Option>
-								))}
-						</Combobox.Options>
-					</Transition>
-				</div>
-			</Combobox>
-		</div>
-	);
-};
-
-export default FilterCommute;
+import React, { Fragment } from 'react';
+import { Combobox, Transition } from '@headlessui/react';
+
+import Button from '~/components/modules/buttons/default';
+import Icon from "~/components/modules/icon";
+
+const FilterCommute = ({
+	className,
+	ready,
+	status,
+	data,
+	selected,
+	isCurrentLocation,
+	inputRef,
+	handleSelect,
+	setValue,
+	setSelected,
+	clearSuggestions,
+	commuteLocation,
+	setIsCurrentLocation,
+	fetchLocation,
+	setCommuteLocation
+}) => {
+	return (
+		<div className={`relative ${className ?? ""}`}>
+			<label
+				htmlFor="commute"
+				className="hc-flex hc-items-center hc-gap-2 hc-mb-2 hc-text-xs hc-uppercase hc-font-bold hc-text-uiText"
+			>
+				<Icon
+					icon="ri:pin-distance-fill"
+					size="hc-size-5"
+					className="hc-text-uiAccent/30"
+				/>
+				<span>
+					<span className="md:hc-hidden lg:hc-inline">Calculate your</span> commute
+				</span>
+			</label>
+
+			<Combobox value={selected} onChange={handleSelect}>
+				<div className="hc-relative hc-mt-1">
+					<div className="hc-relative hc-flex hc-items-center hc-w-full hc-pr-2 hc-cursor-default hc-overflow-hidden hc-rounded hc-bg-white hc-text-left hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent focus:hc-outline-none">
+						<Combobox.Input
+							className="hc-w-full hc-border-none hc-py-2 hc-pl-4 hc-pr-1 hc-text-sm hc-leading-5 hc-text-gray-900 focus:hc-ring-0 placeholder:hc-text-gray-400"
+							onChange={e => {
+								setCommuteLocation("");
+								setValue(e.target.value);
+								setSelected(e.target.value);
+							}}
+							value={selected}
+							disabled={!ready}
+							placeholder="Starting point"
+							ref={inputRef}
+						/>
+						<Button.Btn
+							variant="icon"
+							size="sqsm"
+							onClick={() => {
+								setIsCurrentLocation(!isCurrentLocation);
+								localStorage.setItem('isCurrentLocation', !isCurrentLocation);
+								if (isCurrentLocation || commuteLocation) {
+									setCommuteLocation("");
+									setSelected("");
+								} else if (!commuteLocation) { fetchLocation(); }
+							}}
+
+							className=""
+						>
+							<span className="hc-sr-only">Use your location</span>
+							{commuteLocation ? <Icon icon="mdi:times"></Icon> : <Button.Icon className={isCurrentLocation ? 'hc-text-blue-500' : 'hc-text-current'} icon="mdi:my-location" />}
+						</Button.Btn>
+					</div>
+					<Transition
+						as={Fragment}
+						leave="hc-transition hc-ease-in hc-duration-100"
+						leaveFrom="hc-opacity-100"
+						leaveTo="hc-opacity-0"
+						afterLeave={clearSuggestions}
+					>
+						<Combobox.Options className="hc-absolute hc-z-20 hc-mt-1 hc-max-h-60 hc-w-full hc-overflow-auto hc-rounded hc-bg-white hc-py-1 hc-text-base hc-shadow hc-ring-1 hc-ring-uiAccent/10 focus:hc-outline-none sm:hc-text-sm">
+							{status === "OK" &&
+								data.map(data => (
+									<Combobox.Option
+										key={data.place_id}
+										value={data.description}
+										className={({ active }) =>
+											`hc-relative hc-cursor-default hc-select-none hc-px-4 hc-py-2 ${active ? "hc-bg-primary hc-text-white" : "hc-text-uiText"
+											}`
+										}
+									>
+										{({ selected }) => (
+											<span
+												className={`hc-block hc-truncate ${selected ? "hc-font-bold" : "hc-font-medium"}`}
+											>
+												{data.description}
+											</span>
+										)}
+									</Combobox.Option>
+								))}
+						</Combobox.Options>
+					</Transition>
+				</div>
+			</Combobox>
+		</div>
+	);
+};
+
+export default FilterCommute;

package/src/components/modules/filter/index.js

@@ -1,71 +1,76 @@
-"use client";
-import Button from "~/components/modules/buttons/default";
-import React from "react";
-const Filter = ({
-	className,
-	hasActiveFilters,
-	filteredListings,
-	selectedFilters,
-	setMobileTab,
-	handleReset,
-	isDesktop = false,
-	style,
-	children
-}) => {
-	return (
-		<div
-			style={isDesktop ? style : undefined}
-			className={`
-        /* 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
-
-        ${className ?? ""}
-      `}
-		>
-			{/* Content area with scroll */}
-			<div className="hc-w-full hc-flex-grow hc-overflow-auto hc-pb-16">
-				<div className="hc-px-4 md:hc-pt-4 hc-space-y-4">{children}</div>
-			</div>
-
-			{/* 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 md:hc-bg-gray-100 hc-border-t hc-border-gray-200
-        hc-z-10
-
-        /* Desktop specific */
-        md:hc-static md:hc-mt-2
-      "
-			>
-				<Button.Btn onClick={handleReset} variant="outline" size="sm">
-          Reset All
-				</Button.Btn>
-				{selectedFilters && Object.keys(selectedFilters).length > 0 && (
-					<Button.Btn
-						onClick={() => setMobileTab("listTab")}
-						variant="primary"
-						size="sm"
-						className={`
-              md:hc-hidden
-              ${hasActiveFilters ? "hc-opacity-0 hc-pointer-events-none" : "hc-opacity-100"}
-            `}
-					>
-						<Button.Body>
-							<Button.Icon icon="fluent:search-12-filled" size="hc-size-3.5" />
-              Show {filteredListings.length} Jobs
-						</Button.Body>
-					</Button.Btn>
-				)}
-			</div>
-		</div>
-	);
-};
-
-export default Filter;
-
+"use client";
+import Button from "~/components/modules/buttons/default";
+import React from "react";
+const Filter = ({
+	className,
+	hasActiveFilters,
+	filteredListings,
+	selectedFilters,
+	setMobileTab,
+	handleReset,
+	isDesktop = false,
+	style,
+	children
+}) => {
+	return (
+		<div
+			style={isDesktop ? style : undefined}
+			className={`
+        /* 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
+
+        ${className ?? ""}
+      `}
+		>
+			{/* 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>
+
+			{/* 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>
+			</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 && (
+					<Button.Btn
+						onClick={() => setMobileTab("listTab")}
+						variant="primary"
+						size="sm"
+						className={`
+              ${hasActiveFilters ? "hc-opacity-0 hc-pointer-events-none" : "hc-opacity-100"}
+            `}
+					>
+						<Button.Body>
+							<Button.Icon icon="fluent:search-12-filled" size="hc-size-3.5" />
+              Show {filteredListings.length} Jobs
+						</Button.Body>
+					</Button.Btn>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default Filter;

package/src/components/modules/filter/item.js

@@ -1,69 +1,69 @@
-import React from 'react';
-import Icon from '~/components/modules/icon';
-
-const FilterItem = ({
-	className,
-	item,
-	type,
-	itemKey,
-	hasCount,
-	field,
-	activeItem,
-	setActiveItem,
-	changeHandler,
-	isExternalLink = false,
-	externalLinkUrl,
-	trackEvent,
-	eventTypes,
-	...rest
-}) => {
-	const itemName = item.name ? item.name : item;
-
-	return (
-		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-		<label
-		  onClick={() =>
-			{
-				if(!isExternalLink) return;
-			    trackEvent(eventTypes.EXTERNAL_LINK_CLICKED, { link: externalLinkUrl });
-				window.location.href = externalLinkUrl;
-			}}
-			className={`
-        hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5
-        ${className ?? ""}
-      `}
-			{...rest}
-		>
-			{isExternalLink ? (
-				<Icon
-					icon="tabler:external-link"
-					size="hc-size-4"
-					className={'hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30'}
-				></Icon>
-			) : (
-				<input
-					id={itemKey}
-					name={field}
-					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"
-					checked={activeItem}
-					onChange={() => {
-						setActiveItem(!activeItem);
-						changeHandler();
-					}}
-				/>
-			)}
-
-			<span className="hc-text-left hc-font-medium">{itemName}</span>
-			{hasCount && !isExternalLink && (
-				<span className="hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary">
-          ({item.count})
-				</span>
-			)}
-		</label>
-	);
-};
-
-export default FilterItem;
+import React from 'react';
+import Icon from '~/components/modules/icon';
+
+const FilterItem = ({
+	className,
+	item,
+	type,
+	itemKey,
+	hasCount,
+	field,
+	activeItem,
+	setActiveItem,
+	changeHandler,
+	isExternalLink = false,
+	externalLinkUrl,
+	trackEvent,
+	eventTypes,
+	...rest
+}) => {
+	const itemName = item.name ? item.name : item;
+
+	return (
+		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+		<label
+		  onClick={() =>
+			{
+				if(!isExternalLink) return;
+			    trackEvent(eventTypes.EXTERNAL_LINK_CLICKED, { link: externalLinkUrl });
+				window.location.href = externalLinkUrl;
+			}}
+			className={`
+        hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5
+        ${className ?? ""}
+      `}
+			{...rest}
+		>
+			{isExternalLink ? (
+				<Icon
+					icon="tabler:external-link"
+					size="hc-size-4"
+					className={'hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30'}
+				></Icon>
+			) : (
+				<input
+					id={itemKey}
+					name={field}
+					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"
+					checked={activeItem}
+					onChange={() => {
+						setActiveItem(!activeItem);
+						changeHandler();
+					}}
+				/>
+			)}
+
+			<span className="hc-text-left hc-font-medium">{itemName}</span>
+			{hasCount && !isExternalLink && (
+				<span className="hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary">
+          ({item.count})
+				</span>
+			)}
+		</label>
+	);
+};
+
+export default FilterItem;

package/src/components/modules/filter/location.js

@@ -1,51 +1,51 @@
-import React from 'react';
-import Accordion from '~/components/modules/accordions/default';
-import FilterCard from '~/components/modules/cards/filter';
-import AccordionFilterItem from '~/components/containers/accordions/filter-item-container';
-import Loading from '~/util/loading';
-
-const FilterLocation = ({
-	className,
-	defaultValue,
-	setDefaultValue,
-	setLocation,
-	setSelectedListItem,
-	locations,
-	setSelectedFilters,
-	selectedFilters,
-	children
-}) => {
-	return (
-		<FilterCard className={className ?? ""}>
-			<FilterCard.Title icon="fluent:location-16-filled">
-				<span>
-					<span className="hc-hidden lg:hc-inline">Job</span> location
-				</span>
-			</FilterCard.Title>
-			{!locations && <Loading />}
-			{locations && (
-				<Accordion defaultValue={defaultValue} className="hc-space-y-4">
-					{locations?.map(filter => {
-						if(filter.id === 'entityName' && (!selectedFilters.cityState && !selectedFilters.state)){
-							return;
-						}
-						return(<AccordionFilterItem
-							key={filter.id}
-							filter={filter}
-							setDefaultValue={setDefaultValue}
-							selectedFilters={selectedFilters}
-							setSelectedFilters={prevFilters => {
-								setSelectedFilters(prevFilters);
-								setLocation(null);
-								setSelectedListItem(null);
-							}}
-						/>);
-					})}
-					{children}
-				</Accordion>
-			)}
-		</FilterCard>
-	);
-};
-
-export default FilterLocation;
+import React from 'react';
+import Accordion from '~/components/modules/accordions/default';
+import FilterCard from '~/components/modules/cards/filter';
+import AccordionFilterItem from '~/components/containers/accordions/filter-item-container';
+import Loading from '~/util/loading';
+
+const FilterLocation = ({
+	className,
+	defaultValue,
+	setDefaultValue,
+	setLocation,
+	setSelectedListItem,
+	locations,
+	setSelectedFilters,
+	selectedFilters,
+	children
+}) => {
+	return (
+		<FilterCard className={className ?? ""}>
+			<FilterCard.Title icon="fluent:location-16-filled">
+				<span>
+					<span className="hc-hidden lg:hc-inline">Job</span> location
+				</span>
+			</FilterCard.Title>
+			{!locations && <Loading />}
+			{locations && (
+				<Accordion defaultValue={defaultValue} className="hc-space-y-4">
+					{locations?.map(filter => {
+						if(filter.id === 'entityName' && (!selectedFilters.cityState && !selectedFilters.state)){
+							return;
+						}
+						return(<AccordionFilterItem
+							key={filter.id}
+							filter={filter}
+							setDefaultValue={setDefaultValue}
+							selectedFilters={selectedFilters}
+							setSelectedFilters={prevFilters => {
+								setSelectedFilters(prevFilters);
+								setLocation(null);
+								setSelectedListItem(null);
+							}}
+						/>);
+					})}
+					{children}
+				</Accordion>
+			)}
+		</FilterCard>
+	);
+};
+
+export default FilterLocation;