Add borderless option to select list

SU-SWS · Apr 29, 2024 · 27ba4eb · 27ba4eb
1 parent d3fb04e
commit 27ba4eb
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/app/search/algolia-search.tsx b/app/search/algolia-search.tsx
@@ -137,7 +137,7 @@ const SearchForm = ({searchIndex}: { searchIndex: string }) => {
           <div className="border-b border-black-30">
             <H2>Filter by</H2>
             {currentRefinements.filter(refinement => refinement.attribute === "book_subject").length > 0 &&
-              <ul className="list-unstyled mb-16" aria-live="polite">
+              <ul className="list-unstyled mb-16">
                 {currentRefinements.filter(refinement => refinement.attribute === "book_subject").map(refinement => {
                   return refinement.refinements.map((item, i) =>
                     <li
@@ -238,8 +238,8 @@ const HitList = ({searchIndex}: { searchIndex: string }) => {
   const {options: sortOptions, refine: sortBy, currentRefinement: currentSort} = useSortBy({
     items: [
       {label: "Relevance", value: searchIndex},
-      {label: "Authors A-Z", value: `${searchIndex}_authors_asc`},
-      {label: "Authors Z-A", value: `${searchIndex}_authors_desc`},
+      {label: "Last Name, A-Z", value: `${searchIndex}_authors_asc`},
+      {label: "Last Name, Z-A", value: `${searchIndex}_authors_desc`},
     ]
   })
   if (hits.length === 0) {
@@ -251,18 +251,17 @@ const HitList = ({searchIndex}: { searchIndex: string }) => {
   return (
     <div>
       <div className="flex justify-between items-center">
-        {nbHits &&
-          <div>{nbHits} {nbHits > 1 ? "Results" : "Result"}</div>
-        }
+        <div aria-live="polite">{nbHits} {nbHits > 1 ? "Results" : "Result"}</div>
 
         <div className="flex items-center gap-3 w-1/2">
-          <div id="sort-by">Sort By</div>
+          <div id="sort-by">Sort By:</div>
           <div className="flex-grow">
             <SelectList
               ariaLabelledby="sort-by"
               options={sortOptions}
               value={currentSort}
               required
+              borderless
               onChange={(_e, value) => sortBy(value as string)}
             />
           </div>

diff --git a/src/components/elements/select-list.tsx b/src/components/elements/select-list.tsx
@@ -15,7 +15,6 @@ import {
   useState
 } from "react";
 import {ChevronDownIcon} from "@heroicons/react/20/solid";
-import {useIsClient} from "usehooks-ts";
 import {Maybe} from "@lib/gql/__generated__/drupal.d";
 import {twMerge} from "tailwind-merge";
 import {clsx} from "clsx";
@@ -97,6 +96,7 @@ type Props = {
   emptyValue?: Maybe<string>
   emptyLabel?: Maybe<string>
   name?: Maybe<string>
+  borderless?: boolean
 }
 
 const SelectList = ({
@@ -109,6 +109,7 @@ const SelectList = ({
   name,
   emptyValue,
   emptyLabel = "- None -",
+  borderless = false,
   ...props
 }: Props) => {
   const labelId = useId();
@@ -118,7 +119,6 @@ const SelectList = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const listboxRef = useRef<HTMLUListElement>(null);
   const [listboxVisible, setListboxVisible] = useState<boolean>(false);
-  const isClient = useIsClient()
 
   const {getButtonProps, getListboxProps, contextValue, value} = useSelect<string, boolean>({
     listboxRef,
@@ -143,14 +143,11 @@ const SelectList = ({
 
   const optionChosen = (multiple && value) ? value.length > 0 : !!value;
 
-  // With Mui and Next.js 14, an error occurs on the server rendering. To avoid that issue, only render the component on the client.
-  if (!isClient) return null;
-
   return (
     <div className="relative h-fit">
       <button
         {...getButtonProps()}
-        className="w-full border border-black-40 rounded text-left p-5"
+        className={clsx("w-full text-left p-5", {"border border-black-40 rounded": !borderless})}
         aria-labelledby={labeledBy}
       >
         <div className="flex justify-between flex-wrap">