Updated dependencies and fixed select list

components/patterns/elements/select-list.tsx

@@ -10,11 +10,13 @@ import {
   RefObject,
   useEffect,
   useId,
+  useLayoutEffect,
   useRef,
   useState
 } from "react";
 import {ChevronDownIcon} from "@heroicons/react/20/solid";
 import OutsideClickHandler from "@/components/utils/outside-click-handler";
+import {useIsClient} from "usehooks-ts";
 
 interface Props {
   options: SelectOptionDefinition<string>[];
@@ -54,7 +56,7 @@ const renderSelectedValue = (value: SelectValue<string, boolean>, options: Selec
 function CustomOption(props: OptionProps) {
   const {children, value, rootRef, disabled = false} = props;
   const {getRootProps, highlighted, selected} = useOption({rootRef: rootRef, value, disabled, label: children});
-  const {id, ...otherProps} = getRootProps();
+  const {id, ...otherProps}: { id: string } = getRootProps();
   const selectedStyles = "su-bg-archway su-text-white " + (highlighted ? "su-underline" : "")
   const highlightedStyles = "su-bg-black-10 su-text-black su-underline"
 
@@ -94,6 +96,7 @@ const SelectList = ({options, label, multiple, ariaLabelledby, ...props}: Props)
   const labeledBy = ariaLabelledby ?? labelId;
   const listboxRef = useRef<HTMLUListElement>(null);
   const [listboxVisible, setListboxVisible] = useState(false);
+  const isClient = useIsClient();
 
   const {getButtonProps, getListboxProps, contextValue, value} = useSelect<string, boolean>({
     listboxRef,
@@ -107,7 +110,7 @@ const SelectList = ({options, label, multiple, ariaLabelledby, ...props}: Props)
     if (listboxVisible) listboxRef.current?.focus();
   }, [listboxVisible]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const parentContainer = listboxRef.current?.parentElement?.getBoundingClientRect();
     if (parentContainer && (parentContainer.bottom > window.innerHeight || parentContainer.top < 0)) {
       listboxRef.current?.parentElement?.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
@@ -119,6 +122,9 @@ const SelectList = ({options, label, multiple, ariaLabelledby, ...props}: Props)
   const onClickOutside = () => {
     setListboxVisible(false)
   }
+
+  if (!isClient) return null;
+
   return (
     <OutsideClickHandler
       onClickOutside={onClickOutside}

lib/hooks/useIsCentered.tsx

@@ -1,24 +1,24 @@
-import {MutableRefObject, useLayoutEffect, useState} from "react";
-import {useDebouncedCallback} from "use-debounce";
+import {MutableRefObject, useCallback, useLayoutEffect, useState} from "react";
+import {useDebounce} from "usehooks-ts";
 
 const useIsCentered = (ref: MutableRefObject<any>) => {
-  const [isCentered, setIsCentered] = useState(false)
+  const [isCentered, setIsCentered] = useState<boolean>(false)
+  const debouncedIsCentered = useDebounce<boolean>(isCentered);
 
-  const resizeHandler = useDebouncedCallback(() => {
+  const resizeHandler = useCallback(() => {
     if (ref?.current) {
       const boundingBox = ref.current.getBoundingClientRect();
       setIsCentered(Math.abs((window.innerWidth - boundingBox.width) / 2 - boundingBox.x) <= 10);
     }
-  }, 200)
-
+  }, [ref]);
 
   useLayoutEffect(() => {
     resizeHandler();
     window.addEventListener('resize', resizeHandler);
     return () => window.removeEventListener('resize', resizeHandler);
-  }, [ref])
+  }, [ref, resizeHandler])
 
-  return isCentered;
+  return debouncedIsCentered;
 }
 
 export default useIsCentered;

package.json

@@ -23,7 +23,7 @@
     "drupal-jsonapi-params": "^2.0.0",
     "html-react-parser": "^5.0.6",
     "jsona": "^1.11.0",
-    "next": "^13.3.0",
+    "next": "^14.0.1",
     "next-drupal": "^1.2.1",
     "nextjs-google-analytics": "^2.3.3",
     "react": "^18.2.0",
@@ -40,15 +40,15 @@
     "server-only": "^0.0.1",
     "sharp": "^0.32.0",
     "tailwind-merge": "^2.0.0",
-    "use-debounce": "^9.0.4",
+    "usehooks-ts": "^2.9.1",
     "xml2js": "^0.6.0"
   },
   "devDependencies": {
     "@types/node": "^20.1.1",
     "@types/react": "^18.0.21",
     "autoprefixer": "^10.4.4",
     "eslint": "^8.12.0",
-    "eslint-config-next": "^13.0.0",
+    "eslint-config-next": "^14.0.1",
     "postcss": "^8.4.12",
     "tailwindcss": "^3.0.23",
     "typescript": "^5.0.4"