Updated packages and fixed focus for load more and paged list

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.4.0.cjs

package.json

@@ -14,15 +14,14 @@
     "postinstall": "git config --local core.hooksPath .githooks/; exit 0"
   },
   "dependencies": {
-    "@formkit/auto-animate": "^0.8.2",
     "@heroicons/react": "^2.1.5",
-    "@mui/base": "5.0.0-dev.20240529-082515-213b5e33ab",
+    "@mui/base": "5.0.0-beta.40",
     "@next/third-parties": "^14.2.5",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@types/node": "^22.1.0",
+    "@types/node": "^22.4.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "algoliasearch": "^4.24.0",
+    "algoliasearch": "^5.0.0",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
     "decanter": "^7.3.0",
@@ -33,18 +32,19 @@
     "html-entities": "^2.5.2",
     "html-react-parser": "^5.1.12",
     "next": "^14.2.5",
-    "postcss": "^8.4.40",
+    "plaiceholder": "^3.0.0",
+    "postcss": "^8.4.41",
     "qs": "^6.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-focus-lock": "^2.12.1",
-    "react-instantsearch": "^7.12.3",
-    "react-instantsearch-nextjs": "^0.3.8",
+    "react-instantsearch": "^7.12.4",
+    "react-instantsearch-nextjs": "^0.3.9",
     "react-slick": "^0.30.2",
     "react-tiny-oembed": "^1.1.0",
-    "sharp": "^0.33.4",
-    "tailwind-merge": "^2.4.0",
-    "tailwindcss": "^3.4.7",
+    "sharp": "^0.33.5",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4",
     "usehooks-ts": "^3.1.0"
   },
@@ -55,13 +55,13 @@
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.2.3",
     "@next/bundle-analyzer": "^14.2.5",
-    "@storybook/addon-essentials": "^8.2.7",
-    "@storybook/addon-interactions": "^8.2.7",
-    "@storybook/addon-links": "^8.2.7",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.2.7",
-    "@storybook/nextjs": "^8.2.7",
-    "@storybook/react": "^8.2.7",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
     "@storybook/testing-library": "^0.2.2",
     "@types/react-slick": "^0.23.13",
     "concurrently": "^8.2.2",
@@ -72,13 +72,13 @@
     "eslint-plugin-deprecation": "^3.0.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-unused-imports": "^4.0.1",
+    "eslint-plugin-unused-imports": "^4.1.3",
     "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "react-docgen": "^7.0.3",
-    "storybook": "^8.2.7",
-    "storybook-addon-module-mock": "^1.3.0",
+    "storybook": "^8.2.9",
+    "storybook-addon-module-mock": "^1.3.4",
     "tsconfig-paths-webpack-plugin": "^4.1.0"
   },
-  "packageManager": "yarn@4.3.1"
+  "packageManager": "yarn@4.4.0"
 }

src/components/algolia/algolia-search.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import algoliasearch from "algoliasearch/lite"
+import {liteClient} from "algoliasearch/lite"
 import {useHits, useSearchBox} from "react-instantsearch"
 import {InstantSearchNext} from "react-instantsearch-nextjs"
 import {useRef} from "react"
@@ -19,7 +19,7 @@ type Props = {
 }
 
 const AlgoliaSearch = ({appId, searchIndex, searchApiKey, initialUiState = {}}: Props) => {
-  const searchClient = algoliasearch(appId, searchApiKey)
+  const searchClient = liteClient(appId, searchApiKey)
 
   return (
     <div>

src/components/elements/load-more-list.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import {useLayoutEffect, useRef, HtmlHTMLAttributes, JSX, useId, useState} from "react"
-import {useAutoAnimate} from "@formkit/auto-animate/react"
 import {useBoolean, useCounter} from "usehooks-ts"
 import useFocusOnRender from "@lib/hooks/useFocusOnRender"
 import useServerAction from "@lib/hooks/useServerAction"
@@ -48,7 +47,6 @@ const LoadMoreList = ({buttonText, children, ulProps, liProps, totalItems, loadP
   const [runLoadPage, isPending] = useServerAction(loadPage)
 
   const focusItemRef = useRef<HTMLLIElement>(null)
-  const [animationParent] = useAutoAnimate<HTMLUListElement>()
 
   const showMoreItems = async () => {
     if (loadPage) {
@@ -75,7 +73,7 @@ const LoadMoreList = ({buttonText, children, ulProps, liProps, totalItems, loadP
           </div>
         </div>
       )}
-      <ul {...ulProps} ref={animationParent}>
+      <ul {...ulProps}>
         {items.map((item, i) => (
           <li
             key={`${id}--${i}`}
@@ -92,7 +90,7 @@ const LoadMoreList = ({buttonText, children, ulProps, liProps, totalItems, loadP
         Showing {items.length} items.
       </span>
 
-      {items.length < totalItems && (
+      {items.length < totalItems && loadPage && (
         <Button buttonElem centered onClick={showMoreItems}>
           {buttonText ? buttonText : "Load More"}
         </Button>

src/components/elements/paged-list.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import {useLayoutEffect, useRef, HtmlHTMLAttributes, useEffect, JSX, useState, useCallback} from "react"
-import {useAutoAnimate} from "@formkit/auto-animate/react"
 import {useBoolean, useCounter} from "usehooks-ts"
 import {useRouter, useSearchParams} from "next/navigation"
 import usePagination from "@lib/hooks/usePagination"
@@ -62,7 +61,6 @@ const PagedList = ({
   const {value: focusOnElement, setTrue: enableFocusElement, setFalse: disableFocusElement} = useBoolean(false)
 
   const focusItemRef = useRef<HTMLLIElement>(null)
-  const [animationParent] = useAutoAnimate<HTMLUListElement>()
 
   const goToPage = useCallback(
     (page: number, doNotFocusOnResults?: boolean) => {
@@ -118,7 +116,7 @@ const PagedList = ({
           </div>
         </div>
       )}
-      <ul {...ulProps} ref={animationParent}>
+      <ul {...ulProps}>
         {items.map((item, i) => (
           <li
             key={`pager-${currentPage}-${i}`}

src/components/elements/wysiwyg.tsx

@@ -186,7 +186,7 @@ const cleanMediaMarkup = (node: Element) => {
 
   const getOembedUrl = (node: Element): string | undefined => {
     const src = node.attribs?.src || node.attribs["data-src"]
-    if (src?.startsWith("/media/oembed")) {
+    if (src?.includes("/media/oembed")) {
       return decodeURIComponent(src as string).replace(/^.*url=(.*)?&.*$/, "$1")
     }
     if (node.children.length > 0) {

src/components/menu/side-nav.tsx

@@ -31,7 +31,7 @@ type MenuItemProps = MenuItemType & {
   level: number
 }
 
-const MenuItem = ({id, url, title, children, activeTrail, level}: MenuItemProps) => {
+const MenuItem = ({id, url, title, children, activeTrail, level, expanded}: MenuItemProps) => {
   // Need to list them out each so tailwind will include each for styling.
   const leftPadding = ["pl-10", "pl-20", "pl-28", "pl-48"]
 
@@ -53,7 +53,7 @@ const MenuItem = ({id, url, title, children, activeTrail, level}: MenuItemProps)
       <Link href={url || "#"} className={linkClasses} aria-current={activeTrail.at(-1) === id ? "true" : undefined}>
         {title}
       </Link>
-      {children && children.length > 0 && activeTrail.includes(id) && (
+      {expanded && children && children.length > 0 && activeTrail.includes(id) && (
         <ul className={`list-unstyled border-t ${leftPadding[level]}`}>
           {children.map(item => (
             <MenuItem key={item.id} {...item} level={level + 1} activeTrail={activeTrail} />