From 6ae13debc74f38b69d974204182ce09c531c60f3 Mon Sep 17 00:00:00 2001
From: Mike Decker <pookmish@gmail.com>
Date: Wed, 3 Jul 2024 14:37:04 -0700
Subject: [PATCH] Improved paged list loader

---
 package.json                                  |  14 +-
 src/components/elements/paged-list.tsx        |  90 +++++----
 .../stanford-lists/list-paragraph.tsx         |  32 +--
 src/lib/hooks/usePagination.tsx               |  21 +-
 yarn.lock                                     | 186 ++++++++++--------
 5 files changed, 193 insertions(+), 150 deletions(-)

diff --git a/package.json b/package.json
index c0557a6c..facddd2f 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@formkit/auto-animate": "^0.8.2",
     "@heroicons/react": "^2.1.4",
     "@js-temporal/polyfill": "^0.4.4",
-    "@mui/base": "^5.0.0-dev.20240529-082515-213b5e33ab",
+    "@mui/base": "5.0.0-beta.40",
     "@next/third-parties": "^14.2.4",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/node": "^20.14.9",
@@ -38,19 +38,19 @@
     "html-react-parser": "^5.1.10",
     "next": "^14.2.4",
     "next-drupal": "^1.6.0",
-    "postcss": "^8.4.38",
-    "qs": "^6.12.1",
+    "postcss": "^8.4.39",
+    "qs": "^6.12.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-focus-lock": "^2.12.1",
-    "react-instantsearch": "^7.11.4",
-    "react-instantsearch-nextjs": "^0.3.4",
+    "react-instantsearch": "^7.12.0",
+    "react-instantsearch-nextjs": "^0.3.5",
     "react-slick": "^0.30.2",
     "react-tiny-oembed": "^1.1.0",
     "sharp": "^0.33.4",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
-    "typescript": "^5.5.2",
+    "typescript": "^5.5.3",
     "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
@@ -58,7 +58,7 @@
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
-    "@graphql-codegen/typescript-operations": "^4.2.1",
+    "@graphql-codegen/typescript-operations": "^4.2.3",
     "@next/bundle-analyzer": "^14.2.4",
     "@storybook/addon-essentials": "^8.1.11",
     "@storybook/addon-interactions": "^8.1.11",
diff --git a/src/components/elements/paged-list.tsx b/src/components/elements/paged-list.tsx
index 85ec7a38..281345c5 100644
--- a/src/components/elements/paged-list.tsx
+++ b/src/components/elements/paged-list.tsx
@@ -1,11 +1,12 @@
 "use client"
 
-import {useLayoutEffect, useRef, HtmlHTMLAttributes, useEffect, useId, JSX, useState} from "react"
+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"
 import useFocusOnRender from "@lib/hooks/useFocusOnRender"
+import {ArrowLongLeftIcon, ArrowLongRightIcon} from "@heroicons/react/20/solid"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   /**
@@ -35,29 +36,35 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const PagedList = ({children, ulProps, liProps, pageKey = "page", totalPages, pagerSiblingCount = 2, loadPage, ...props}: Props) => {
-  const id = useId()
+  const ref = useRef(false)
   const [items, setItems] = useState<JSX.Element[]>(Array.isArray(children) ? children : [children])
+
   const router = useRouter()
   const searchParams = useSearchParams()
 
   // Use the GET param for page, but make sure that it is between 1 and the last page. If it's a string or a number
   // outside the range, fix the value, so it works as expected.
   const {count: currentPage, setCount: setPage} = useCounter(Math.max(1, parseInt(searchParams.get(pageKey || "") || "") || 1))
-
   const {value: focusOnElement, setTrue: enableFocusElement, setFalse: disableFocusElement} = useBoolean(false)
 
   const focusItemRef = useRef<HTMLLIElement>(null)
   const [animationParent] = useAutoAnimate<HTMLUListElement>()
 
-  const goToPage = async (page: number) => {
-    if (loadPage) {
-      const newView = await loadPage(page - 1)
-      setItems(newView.props.children)
-    }
-
-    enableFocusElement()
-    setPage(page)
-  }
+  const goToPage = useCallback(
+    async (page: number, doNotFocusOnResults?: boolean) => {
+      if (loadPage) {
+        loadPage(page - 1)
+          .then(response => {
+            setItems(response.props.fallback ? response.props.children.props.children : response.props.children)
+
+            if (!doNotFocusOnResults) enableFocusElement()
+            setPage(page)
+          })
+          .catch(() => console.warn("An error occurred fetching more results."))
+      }
+    },
+    [enableFocusElement, setPage, loadPage]
+  )
 
   const setFocusOnItem = useFocusOnRender(focusItemRef, false)
 
@@ -80,16 +87,10 @@ const PagedList = ({children, ulProps, liProps, pageKey = "page", totalPages, pa
   }, [loadPage, router, currentPage, pageKey, searchParams])
 
   useEffect(() => {
-    const updateInitialContents = async (initialPage: number) => {
-      if (loadPage) {
-        const newView = await loadPage(initialPage - 1)
-        setItems(newView.props.children)
-      }
-    }
-
     const initialPage = parseInt(searchParams.get(pageKey || "") || "")
-    if (initialPage > 1) updateInitialContents(initialPage)
-  }, [searchParams, pageKey, loadPage])
+    if (initialPage > 1 && !ref.current) goToPage(initialPage, true)
+    ref.current = true
+  }, [searchParams, pageKey, loadPage, goToPage])
 
   const paginationButtons = usePagination(totalPages * items.length, currentPage, items.length, pagerSiblingCount)
 
@@ -101,7 +102,7 @@ const PagedList = ({children, ulProps, liProps, pageKey = "page", totalPages, pa
       >
         {items.map((item, i) => (
           <li
-            key={`pager-${id}-${i}`}
+            key={`pager-${currentPage}-${i}`}
             ref={i === 0 ? focusItemRef : null}
             tabIndex={i === 0 && focusOnElement ? 0 : undefined}
             onBlur={disableFocusElement}
@@ -115,16 +116,17 @@ const PagedList = ({children, ulProps, liProps, pageKey = "page", totalPages, pa
       {loadPage && paginationButtons.length > 1 && (
         <nav
           aria-label="Pager"
-          className="mx-auto w-fit"
+          className="rs-mt-4 mx-auto w-fit"
         >
-          <ul className="list-unstyled flex gap-5">
+          <ul className="list-unstyled flex items-center gap-5">
             {paginationButtons.map((pageNum, i) => (
               <PaginationButton
                 key={`page-button-${pageNum}--${i}`}
                 page={pageNum}
                 currentPage={currentPage}
-                total={items.length * totalPages}
-                onClick={() => goToPage(pageNum)}
+                total={totalPages}
+                onPageClick={goToPage}
+                pagerSiblingCount={pagerSiblingCount}
               />
             ))}
           </ul>
@@ -134,7 +136,7 @@ const PagedList = ({children, ulProps, liProps, pageKey = "page", totalPages, pa
   )
 }
 
-const PaginationButton = ({page, currentPage, total, onClick}: {page: number | string; currentPage: number; total: number; onClick: () => void}) => {
+const PaginationButton = ({page, currentPage, total, onPageClick, pagerSiblingCount}: {page: number | string; currentPage: number; total: number; onPageClick: (_page: number) => void; pagerSiblingCount: number}) => {
   if (page === 0) {
     return (
       <li className="mt-auto h-full">
@@ -143,22 +145,40 @@ const PaginationButton = ({page, currentPage, total, onClick}: {page: number | s
       </li>
     )
   }
-  const isCurrent = page == currentPage
+
+  const handleClick = () => {
+    if (page === "leftArrow") return onPageClick(1)
+    if (page === "rightArrow") return onPageClick(total)
+    onPageClick(page as number)
+  }
+
+  // Conditionally render left arrow and right arrow based on currentPage
+  if (page === 1 && currentPage >= pagerSiblingCount + 3) return null
+  if (page === "leftArrow" && currentPage < pagerSiblingCount + 3) return null
+
+  if (page === total && currentPage <= total - (pagerSiblingCount + 3)) return null
+  if (page === "rightArrow" && currentPage > total - (pagerSiblingCount + 3)) return null
+
+  const isCurrent = page === currentPage
   return (
-    <li>
+    <li className="m-0 flex items-center">
       <button
-        className="text-m2 font-medium hocus:underline"
-        onClick={onClick}
-        aria-current={isCurrent}
+        className="group text-m2 font-medium hocus:underline"
+        onClick={handleClick}
+        aria-current={isCurrent ? "page" : undefined}
       >
         <span className="sr-only">
-          Go to page {page} of {total}
+          {page === "leftArrow" && "Go to first page"}
+          {page === "rightArrow" && "Go to last page"}
+          {page !== "leftArrow" && page !== "rightArrow" && `Go to page ${page} of ${total}`}
         </span>
         <span
           aria-hidden
-          className={(isCurrent ? "border-digital-red text-digital-red" : "border-transparent text-cardinal-red") + " border-b-2 px-4"}
+          className={(isCurrent ? "border-stone-dark text-stone-dark" : "border-transparent text-cardinal-red") + " block h-fit border-b-2 px-4"}
         >
-          {page}
+          {page === "leftArrow" && <ArrowLongLeftIcon width={30} />}
+          {page === "rightArrow" && <ArrowLongRightIcon width={30} />}
+          {page !== "leftArrow" && page !== "rightArrow" && page}
         </span>
       </button>
     </li>
diff --git a/src/components/paragraphs/stanford-lists/list-paragraph.tsx b/src/components/paragraphs/stanford-lists/list-paragraph.tsx
index 9662c164..80ae47df 100644
--- a/src/components/paragraphs/stanford-lists/list-paragraph.tsx
+++ b/src/components/paragraphs/stanford-lists/list-paragraph.tsx
@@ -13,6 +13,21 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphStanfordList
 }
 
+const loadPage = async (viewId: string, displayId: string, contextualFilter: string[], hasHeadline: boolean, page: number): Promise<JSX.Element> => {
+  "use server"
+
+  const {items, totalItems} = await getViewItems(viewId, displayId, contextualFilter, page)
+  return (
+    <View
+      viewId={viewId}
+      displayId={displayId}
+      items={items}
+      headingLevel={hasHeadline ? "h3" : "h2"}
+      totalItems={totalItems}
+    />
+  )
+}
+
 const ListParagraph = async ({paragraph, ...props}: Props) => {
   const behaviors = getParagraphBehaviors<ListParagraphBehaviors>(paragraph)
   const viewId = paragraph.suListView?.view || ""
@@ -24,21 +39,6 @@ const ListParagraph = async ({paragraph, ...props}: Props) => {
 
   const ListWrapper: ElementType = paragraph.suListHeadline && behaviors.list_paragraph?.heading_behavior !== "remove" ? "section" : "div"
 
-  const loadPage = async (page: number): Promise<JSX.Element> => {
-    "use server"
-
-    const {items, totalItems} = await getViewItems(viewId, displayId, paragraph.suListView?.contextualFilter, page)
-    return (
-      <View
-        viewId={viewId}
-        displayId={displayId}
-        items={items}
-        headingLevel={paragraph.suListHeadline ? "h3" : "h2"}
-        totalItems={totalItems}
-      />
-    )
-  }
-
   return (
     <ListWrapper
       {...props}
@@ -62,7 +62,7 @@ const ListParagraph = async ({paragraph, ...props}: Props) => {
           displayId={displayId}
           items={viewItems}
           headingLevel={paragraph.suListHeadline ? "h3" : "h2"}
-          loadPage={addLoadMore ? loadPage : undefined}
+          loadPage={addLoadMore ? loadPage.bind(null, viewId, displayId, paragraph.suListView?.contextualFilter || [], !!paragraph.suListHeadline) : undefined}
           totalItems={totalItems}
         />
       )}
diff --git a/src/lib/hooks/usePagination.tsx b/src/lib/hooks/usePagination.tsx
index 3e1129b4..310e40f8 100644
--- a/src/lib/hooks/usePagination.tsx
+++ b/src/lib/hooks/usePagination.tsx
@@ -12,17 +12,21 @@ import {useMemo} from "react"
  * @param siblingCount
  *   How many page buttons to display left and right of the current page.
  */
-const usePagination = (totalCount: number, currentPage = 1, pageSize = 5, siblingCount = 2): number[] => {
+const usePagination = (totalCount: number, currentPage = 1, pageSize = 5, siblingCount = 2): (number | string)[] => {
   return useMemo(() => {
     const totalPageCount = Math.ceil(totalCount / pageSize)
 
-    // Pages count is determined as siblingCount + firstPage + lastPage + currentPage + 2 * DOTS
-    const totalPageNumbers = siblingCount + 5
+    // Pages count is determined as siblingCount + firstPage + lastPage + currentPage + 2 * DOTS + 2 * ARROWS
+    const totalPageNumbers = siblingCount + 7
+
+    // Arrow constants
+    const leftArrow = "leftArrow"
+    const rightArrow = "rightArrow"
 
     // Case 1: If the number of pages is less than the page numbers we want to show in our paginationComponent, we
     // return the range [1..totalPageCount]
     if (totalPageNumbers >= totalPageCount) {
-      return range(1, totalPageCount)
+      return [leftArrow, ...range(1, totalPageCount), rightArrow]
     }
 
     // Calculate left and right sibling index and make sure they are within range 1 and totalPageCount
@@ -31,7 +35,7 @@ const usePagination = (totalCount: number, currentPage = 1, pageSize = 5, siblin
 
     // We do not show dots just when there is just one page number to be inserted between the extremes of sibling and the page limits i.e 1 and totalPageCount. Hence we are using leftSiblingIndex > 2 and rightSiblingIndex < totalPageCount - 2
     const shouldShowLeftDots = leftSiblingIndex > 2
-    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 1
+    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2
 
     const firstPageIndex = 1
     const lastPageIndex = totalPageCount
@@ -41,20 +45,21 @@ const usePagination = (totalCount: number, currentPage = 1, pageSize = 5, siblin
       const leftItemCount = 3 + 2 * siblingCount
       const leftRange = range(1, leftItemCount)
 
-      return [...leftRange, 0, totalPageCount]
+      return [leftArrow, ...leftRange, 0, totalPageCount, rightArrow]
     }
 
     // Case 3: No right dots to show, but left dots to be shown
     if (shouldShowLeftDots && !shouldShowRightDots) {
       const rightItemCount = 3 + 2 * siblingCount
       const rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount)
-      return [firstPageIndex, 0, ...rightRange]
+
+      return [leftArrow, firstPageIndex, 0, ...rightRange, rightArrow]
     }
 
     // Case 4: Both left and right dots to be shown
     if (shouldShowLeftDots && shouldShowRightDots) {
       const middleRange = range(leftSiblingIndex, rightSiblingIndex)
-      return [firstPageIndex, 0, ...middleRange, 0, lastPageIndex]
+      return [leftArrow, firstPageIndex, 0, ...middleRange, 0, lastPageIndex, rightArrow]
     }
     return []
   }, [totalCount, pageSize, siblingCount, currentPage])
diff --git a/yarn.lock b/yarn.lock
index 6ecd8cb7..621d4093 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2271,21 +2271,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.24.1, @babel/runtime@npm:^7.24.4":
-  version: 7.24.4
-  resolution: "@babel/runtime@npm:7.24.4"
+"@babel/runtime@npm:^7.23.9":
+  version: 7.24.7
+  resolution: "@babel/runtime@npm:7.24.7"
   dependencies:
     regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/785aff96a3aa8ff97f90958e1e8a7b1d47f793b204b47c6455eaadc3f694f48c97cd5c0a921fe3596d818e71f18106610a164fb0f1c71fd68c622a58269d537c
+  checksum: 10c0/b6fa3ec61a53402f3c1d75f4d808f48b35e0dfae0ec8e2bb5c6fc79fb95935da75766e0ca534d0f1c84871f6ae0d2ebdd950727cfadb745a2cdbef13faef5513
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.24.6":
-  version: 7.24.6
-  resolution: "@babel/runtime@npm:7.24.6"
+"@babel/runtime@npm:^7.24.1, @babel/runtime@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/runtime@npm:7.24.4"
   dependencies:
     regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/224ad205de33ea28979baaec89eea4c4d4e9482000dd87d15b97859365511cdd4d06517712504024f5d33a5fb9412f9b91c96f1d923974adf9359e1575cde049
+  checksum: 10c0/785aff96a3aa8ff97f90958e1e8a7b1d47f793b204b47c6455eaadc3f694f48c97cd5c0a921fe3596d818e71f18106610a164fb0f1c71fd68c622a58269d537c
   languageName: node
   linkType: hard
 
@@ -3163,18 +3163,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graphql-codegen/typescript-operations@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "@graphql-codegen/typescript-operations@npm:4.2.1"
+"@graphql-codegen/typescript-operations@npm:^4.2.3":
+  version: 4.2.3
+  resolution: "@graphql-codegen/typescript-operations@npm:4.2.3"
   dependencies:
     "@graphql-codegen/plugin-helpers": "npm:^5.0.4"
-    "@graphql-codegen/typescript": "npm:^4.0.7"
-    "@graphql-codegen/visitor-plugin-common": "npm:5.2.0"
+    "@graphql-codegen/typescript": "npm:^4.0.9"
+    "@graphql-codegen/visitor-plugin-common": "npm:5.3.1"
     auto-bind: "npm:~4.0.0"
     tslib: "npm:~2.6.0"
   peerDependencies:
     graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
-  checksum: 10c0/f99f3fc9e2d75e7b33742f2fa0a0a08c4f59c5b1f732de6e2ba0b634b6987a777a9f3be58eb9a1e55b3106c90cdf4fef926abf7949868563c0af34a6ca258a78
+  checksum: 10c0/eae0d20d7a6087a47b3ad44d322c5a9bd61e2cb35e44f20652740876a2024593ac02964885ebab155cc958992c8d963561fe3d91f748e067f525f9804937f3c3
   languageName: node
   linkType: hard
 
@@ -3193,18 +3193,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graphql-codegen/typescript@npm:^4.0.7":
-  version: 4.0.7
-  resolution: "@graphql-codegen/typescript@npm:4.0.7"
+"@graphql-codegen/typescript@npm:^4.0.9":
+  version: 4.0.9
+  resolution: "@graphql-codegen/typescript@npm:4.0.9"
   dependencies:
     "@graphql-codegen/plugin-helpers": "npm:^5.0.4"
     "@graphql-codegen/schema-ast": "npm:^4.0.2"
-    "@graphql-codegen/visitor-plugin-common": "npm:5.2.0"
+    "@graphql-codegen/visitor-plugin-common": "npm:5.3.1"
     auto-bind: "npm:~4.0.0"
     tslib: "npm:~2.6.0"
   peerDependencies:
     graphql: ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
-  checksum: 10c0/20cc1702e7ee84866610c5327ba4bd286500357e1b7c69e7a88f78974eb0747bdea5275a8054ebecab96bca43b7119a11f5c3ab5b9340136bd31430b2c68585e
+  checksum: 10c0/37a209ac6f1e84551805028dddb7be42e9b5ec5d7d411678b845f2c5b6b4bc242330666f993962f4d59dc207b9d1585c568f7c908364c0410531fd6860e4dfbd
   languageName: node
   linkType: hard
 
@@ -3248,9 +3248,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graphql-codegen/visitor-plugin-common@npm:5.2.0":
-  version: 5.2.0
-  resolution: "@graphql-codegen/visitor-plugin-common@npm:5.2.0"
+"@graphql-codegen/visitor-plugin-common@npm:5.3.1":
+  version: 5.3.1
+  resolution: "@graphql-codegen/visitor-plugin-common@npm:5.3.1"
   dependencies:
     "@graphql-codegen/plugin-helpers": "npm:^5.0.4"
     "@graphql-tools/optimize": "npm:^2.0.0"
@@ -3264,7 +3264,7 @@ __metadata:
     tslib: "npm:~2.6.0"
   peerDependencies:
     graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
-  checksum: 10c0/86ca3f7dd68e308b014040534dff7393122974c32e14d8453ff9cf52449b168aac49fcf65c42b5788b9571528b1b948c593f16d48d0513fea9da44c2c841e9be
+  checksum: 10c0/c6d642445149ef9adb473e0a47019a2008e4e1b69a700d7ff6b2e4d2ba3f3118a4296f6d370fd1c45c84f91dd3580cea63db896a47bd102a0dd7b28bb409a0e6
   languageName: node
   linkType: hard
 
@@ -4189,16 +4189,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/base@npm:^5.0.0-dev.20240529-082515-213b5e33ab":
-  version: 5.0.0-dev.20240529-082515-213b5e33ab
-  resolution: "@mui/base@npm:5.0.0-dev.20240529-082515-213b5e33ab"
+"@mui/base@npm:5.0.0-beta.40":
+  version: 5.0.0-beta.40
+  resolution: "@mui/base@npm:5.0.0-beta.40"
   dependencies:
-    "@babel/runtime": "npm:^7.24.6"
+    "@babel/runtime": "npm:^7.23.9"
     "@floating-ui/react-dom": "npm:^2.0.8"
-    "@mui/types": "npm:^7.2.14-dev.20240529-082515-213b5e33ab"
-    "@mui/utils": "npm:^6.0.0-dev.20240529-082515-213b5e33ab"
+    "@mui/types": "npm:^7.2.14"
+    "@mui/utils": "npm:^5.15.14"
     "@popperjs/core": "npm:^2.11.8"
-    clsx: "npm:^2.1.1"
+    clsx: "npm:^2.1.0"
     prop-types: "npm:^15.8.1"
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0
@@ -4207,11 +4207,11 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/c6d3119aeea8abbb6494b3a3a632668bbee57e4f4e1786783908f3e19deb3b764f56e7e518849a17f3eda6db213bcc147a87fd0baf98941596466601d823478b
+  checksum: 10c0/631b4ee389e23d82c16c5845c2849af43000f52f1def639b9bb5bf39fd09f4eab93787d32950b715a7de7b689faab53bb7c9a78f6fd12b663876cf8128d45de1
   languageName: node
   linkType: hard
 
-"@mui/types@npm:^7.2.14-dev.20240529-082515-213b5e33ab":
+"@mui/types@npm:^7.2.14":
   version: 7.2.14
   resolution: "@mui/types@npm:7.2.14"
   peerDependencies:
@@ -4223,12 +4223,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^6.0.0-dev.20240529-082515-213b5e33ab":
-  version: 6.0.0-dev.20240529-082515-213b5e33ab
-  resolution: "@mui/utils@npm:6.0.0-dev.20240529-082515-213b5e33ab"
+"@mui/utils@npm:^5.15.14":
+  version: 5.15.20
+  resolution: "@mui/utils@npm:5.15.20"
   dependencies:
-    "@babel/runtime": "npm:^7.24.6"
-    "@types/prop-types": "npm:^15.7.12"
+    "@babel/runtime": "npm:^7.23.9"
+    "@types/prop-types": "npm:^15.7.11"
     prop-types: "npm:^15.8.1"
     react-is: "npm:^18.2.0"
   peerDependencies:
@@ -4237,7 +4237,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/6fbd5d874936d818e9c8ae595b9111da11422e1b4d3ce973779acdf34431f01f27fbbe175ca5912c4f4f2c7f1b10b98a5cb571cf8da92d5bb46d43fe0811ff85
+  checksum: 10c0/d745895db047ef016681482f3d4710aa487f9e7bcd457ac2a395bdaf719a6a98f8bf5f1920d4729b0bc69f7ef2153624aa6a565ec0e31f76c33d7167397ac4d9
   languageName: node
   linkType: hard
 
@@ -6923,7 +6923,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:^15.7.12":
+"@types/prop-types@npm:^15.7.11":
   version: 15.7.12
   resolution: "@types/prop-types@npm:15.7.12"
   checksum: 10c0/1babcc7db6a1177779f8fde0ccc78d64d459906e6ef69a4ed4dd6339c920c2e05b074ee5a92120fe4e9d9f1a01c952f843ebd550bee2332fc2ef81d1706878f8
@@ -7754,14 +7754,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"algoliasearch-helper@npm:3.22.1":
-  version: 3.22.1
-  resolution: "algoliasearch-helper@npm:3.22.1"
+"algoliasearch-helper@npm:3.22.2":
+  version: 3.22.2
+  resolution: "algoliasearch-helper@npm:3.22.2"
   dependencies:
     "@algolia/events": "npm:^4.0.1"
   peerDependencies:
     algoliasearch: ">= 3.1 < 6"
-  checksum: 10c0/c3b9bda0eb8e6851d11e97fc5d649a367163816772b0a4e05edf4904ffab3a20357ea37e959a56c0a5e2246402969a8668fe9f08d086b33510473ad5b2e43497
+  checksum: 10c0/72723a39ff47b121cbb56d26b4dfe875e105a8d14e060559c00ec3da75d7c6ec2caabc7d4138eb01a14bac5fb105942748f96cbda7842bf767fbcf69a03ec7e9
   languageName: node
   linkType: hard
 
@@ -9050,7 +9050,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^2.1.1":
+"clsx@npm:^2.1.0, clsx@npm:^2.1.1":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
   checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
@@ -9629,10 +9629,10 @@ __metadata:
     "@graphql-codegen/cli": "npm:^5.0.2"
     "@graphql-codegen/import-types-preset": "npm:^3.0.0"
     "@graphql-codegen/typescript-graphql-request": "npm:^6.2.0"
-    "@graphql-codegen/typescript-operations": "npm:^4.2.1"
+    "@graphql-codegen/typescript-operations": "npm:^4.2.3"
     "@heroicons/react": "npm:^2.1.4"
     "@js-temporal/polyfill": "npm:^0.4.4"
-    "@mui/base": "npm:^5.0.0-dev.20240529-082515-213b5e33ab"
+    "@mui/base": "npm:5.0.0-beta.40"
     "@next/bundle-analyzer": "npm:^14.2.4"
     "@next/third-parties": "npm:^14.2.4"
     "@storybook/addon-essentials": "npm:^8.1.11"
@@ -9668,16 +9668,16 @@ __metadata:
     html-react-parser: "npm:^5.1.10"
     next: "npm:^14.2.4"
     next-drupal: "npm:^1.6.0"
-    postcss: "npm:^8.4.38"
+    postcss: "npm:^8.4.39"
     prettier: "npm:^3.3.2"
     prettier-plugin-tailwindcss: "npm:^0.6.5"
-    qs: "npm:^6.12.1"
+    qs: "npm:^6.12.2"
     react: "npm:^18.3.1"
     react-docgen: "npm:^7.0.3"
     react-dom: "npm:^18.3.1"
     react-focus-lock: "npm:^2.12.1"
-    react-instantsearch: "npm:^7.11.4"
-    react-instantsearch-nextjs: "npm:^0.3.4"
+    react-instantsearch: "npm:^7.12.0"
+    react-instantsearch-nextjs: "npm:^0.3.5"
     react-slick: "npm:^0.30.2"
     react-tiny-oembed: "npm:^1.1.0"
     sharp: "npm:^0.33.4"
@@ -9685,7 +9685,7 @@ __metadata:
     tailwind-merge: "npm:^2.3.0"
     tailwindcss: "npm:^3.4.4"
     tsconfig-paths-webpack-plugin: "npm:^4.1.0"
-    typescript: "npm:^5.5.2"
+    typescript: "npm:^5.5.3"
     usehooks-ts: "npm:^3.1.0"
   languageName: unknown
   linkType: soft
@@ -12535,16 +12535,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"instantsearch.js@npm:4.72.2":
-  version: 4.72.2
-  resolution: "instantsearch.js@npm:4.72.2"
+"instantsearch.js@npm:4.73.0":
+  version: 4.73.0
+  resolution: "instantsearch.js@npm:4.73.0"
   dependencies:
     "@algolia/events": "npm:^4.0.1"
     "@types/dom-speech-recognition": "npm:^0.0.1"
     "@types/google.maps": "npm:^3.45.3"
     "@types/hogan.js": "npm:^3.0.0"
     "@types/qs": "npm:^6.5.3"
-    algoliasearch-helper: "npm:3.22.1"
+    algoliasearch-helper: "npm:3.22.2"
     hogan.js: "npm:^3.0.2"
     htm: "npm:^3.0.0"
     instantsearch-ui-components: "npm:0.7.0"
@@ -12553,7 +12553,7 @@ __metadata:
     search-insights: "npm:^2.13.0"
   peerDependencies:
     algoliasearch: ">= 3.1 < 6"
-  checksum: 10c0/ba02e6fb72f8b37feae126206684f48b62d4666209cbab6c04c3db187217a53cf90584b1bbd71ec3594321721a64ad31f1cfdf7b62c3dc03c7e188a8e70c6b27
+  checksum: 10c0/9db612088f71e5ece0ce232bca8062ba3851bcdd728c06c36d20b1d6a4a36ded4c34aaeccde8cccc6e10b88c397ba8713ca655c096a181152ac273e98e1bcd1e
   languageName: node
   linkType: hard
 
@@ -15024,6 +15024,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picocolors@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "picocolors@npm:1.0.1"
+  checksum: 10c0/c63cdad2bf812ef0d66c8db29583802355d4ca67b9285d846f390cc15c2f6ccb94e8cb7eb6a6e97fc5990a6d3ad4ae42d86c84d3146e667c739a4234ed50d400
+  languageName: node
+  linkType: hard
+
 "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
@@ -15287,6 +15294,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.39":
+  version: 8.4.39
+  resolution: "postcss@npm:8.4.39"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.0.1"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10c0/16f5ac3c4e32ee76d1582b3c0dcf1a1fdb91334a45ad755eeb881ccc50318fb8d64047de4f1601ac96e30061df203f0f2e2edbdc0bfc49b9c57bc9fb9bedaea3
+  languageName: node
+  linkType: hard
+
 "preact@npm:^10.10.0":
   version: 10.19.3
   resolution: "preact@npm:10.19.3"
@@ -15593,12 +15611,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:^6.12.1":
-  version: 6.12.1
-  resolution: "qs@npm:6.12.1"
+"qs@npm:^6.12.2":
+  version: 6.12.2
+  resolution: "qs@npm:6.12.2"
   dependencies:
     side-channel: "npm:^1.0.6"
-  checksum: 10c0/439e6d7c6583e7c69f2cab2c39c55b97db7ce576e4c7c469082b938b7fc8746e8d547baacb69b4cd2b6666484776c3f4840ad7163a4c5326300b0afa0acdd84b
+  checksum: 10c0/d431fe6914aea026794c047b9c5ac5d29e96cc13dc14f3ca838f5f3061b0f1ed435d3f616508bc0e8a64fc29d13359f08bfe723aabc5f80f36d11057b2de6ebf
   languageName: node
   linkType: hard
 
@@ -15801,44 +15819,44 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-instantsearch-core@npm:7.11.4":
-  version: 7.11.4
-  resolution: "react-instantsearch-core@npm:7.11.4"
+"react-instantsearch-core@npm:7.12.0":
+  version: 7.12.0
+  resolution: "react-instantsearch-core@npm:7.12.0"
   dependencies:
     "@babel/runtime": "npm:^7.1.2"
-    algoliasearch-helper: "npm:3.22.1"
-    instantsearch.js: "npm:4.72.2"
+    algoliasearch-helper: "npm:3.22.2"
+    instantsearch.js: "npm:4.73.0"
     use-sync-external-store: "npm:^1.0.0"
   peerDependencies:
     algoliasearch: ">= 3.1 < 5"
     react: ">= 16.8.0 < 19"
-  checksum: 10c0/2bb74ccdd58072d78fcacc80c8422f7e3732247d1dd53212d9278d82cf3c1b67630a0539f3ec04e9ffb98c9c38a00d6fe3d43688389997687730eb4309b4a96d
+  checksum: 10c0/3390f5bf223122322eabed2b447b7d0b4dd486abfa5c69dc18a5d7c10711832ddc3220b6f6c64452e76ffbabd3161d4fd3ce31ad5a3421e26d3e8b5001af14ee
   languageName: node
   linkType: hard
 
-"react-instantsearch-nextjs@npm:^0.3.4":
-  version: 0.3.4
-  resolution: "react-instantsearch-nextjs@npm:0.3.4"
+"react-instantsearch-nextjs@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "react-instantsearch-nextjs@npm:0.3.5"
   peerDependencies:
     next: "*"
     react-instantsearch: "*"
-  checksum: 10c0/279b405988d01c2e4b768106e5ac0030ffdf9aee4003c041231f3d07a1f2dc772338dae681e1b79292e77c41077f2f77b135c4192359c02dedf648a4d26de501
+  checksum: 10c0/4ced0cf7f89b1d52e3882250f68ec1cd39e1f3dc5711795225ba724ec5e3c0ab98f42bb270a9489ce246dfa360702d852a9d40b520e788e853adb8e21ae95af9
   languageName: node
   linkType: hard
 
-"react-instantsearch@npm:^7.11.4":
-  version: 7.11.4
-  resolution: "react-instantsearch@npm:7.11.4"
+"react-instantsearch@npm:^7.12.0":
+  version: 7.12.0
+  resolution: "react-instantsearch@npm:7.12.0"
   dependencies:
     "@babel/runtime": "npm:^7.1.2"
     instantsearch-ui-components: "npm:0.7.0"
-    instantsearch.js: "npm:4.72.2"
-    react-instantsearch-core: "npm:7.11.4"
+    instantsearch.js: "npm:4.73.0"
+    react-instantsearch-core: "npm:7.12.0"
   peerDependencies:
     algoliasearch: ">= 3.1 < 5"
     react: ">= 16.8.0 < 19"
     react-dom: ">= 16.8.0 < 19"
-  checksum: 10c0/ebfbf655fee0abdb0ff04b8ae2399348a3f9941b3df0bb737e6940c69201723ad0a3831bfb2df845c9f24d8e5adfaf0ac94ae0982cb20b7e0439058df4e229d1
+  checksum: 10c0/15327c3a1cca1afcd70b476aa6bb1e7196b69fe57b12eed74ba5359a6893f221b754dc38ea7569b2dd22b1c3758dfe0d4ae4ea098e12b28a161eed6c37c01a5e
   languageName: node
   linkType: hard
 
@@ -18181,23 +18199,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.5.2":
-  version: 5.5.2
-  resolution: "typescript@npm:5.5.2"
+"typescript@npm:^5.5.3":
+  version: 5.5.3
+  resolution: "typescript@npm:5.5.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/8ca39b27b5f9bd7f32db795045933ab5247897660627251e8254180b792a395bf061ea7231947d5d7ffa5cb4cc771970fd4ef543275f9b559f08c9325cccfce3
+  checksum: 10c0/f52c71ccbc7080b034b9d3b72051d563601a4815bf3e39ded188e6ce60813f75dbedf11ad15dd4d32a12996a9ed8c7155b46c93a9b9c9bad1049766fe614bbdd
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.5.2#optional!builtin<compat/typescript>":
-  version: 5.5.2
-  resolution: "typescript@patch:typescript@npm%3A5.5.2#optional!builtin<compat/typescript>::version=5.5.2&hash=b45daf"
+"typescript@patch:typescript@npm%3A^5.5.3#optional!builtin<compat/typescript>":
+  version: 5.5.3
+  resolution: "typescript@patch:typescript@npm%3A5.5.3#optional!builtin<compat/typescript>::version=5.5.3&hash=b45daf"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/6721ac8933a70c252d7b640b345792e103d881811ff660355617c1836526dbb71c2044e2e77a8823fb3570b469f33276875a4cab6d3c4de4ae7d7ee1c3074ae4
+  checksum: 10c0/5a437c416251334deeaf29897157032311f3f126547cfdc4b133768b606cb0e62bcee733bb97cf74c42fe7268801aea1392d8e40988cdef112e9546eba4c03c5
   languageName: node
   linkType: hard