setFiltersExpanded(!filtersExpanded)}\n >\n {mobileFiltersPanelTitle}\n \n \n
\n \n \n );\n});\n\nFiltersPanel.displayName = 'FiltersPanel';\n\nFiltersPanel.propTypes = {\n filtersContainerRef: PropTypes.object.isRequired\n};\n\nexport default FiltersPanel;\n","import React, { useState, useContext, useId } from 'react';\nimport ListingContext from '../../ResultsListing/ListingContext';\n\nconst DropdownJumpLink = () => {\n const { dropdownFilterFacetTitle, dropdownFilterLabel, jumpOptions } =\n useContext(ListingContext);\n const [selectedOption, setSelectedOption] = useState(\n dropdownFilterFacetTitle\n );\n const id = useId();\n\n const handleChange = e => {\n const value = jumpOptions.find(option => option.id === e.target.value);\n setSelectedOption(value.title);\n\n const element = document.querySelector(`#${value.id}`);\n\n if (element) {\n const y = element.getBoundingClientRect().top + window.scrollY;\n\n window.scroll({\n top: y - 100,\n behavior: 'smooth'\n });\n }\n };\n\n return (\n \n \n \n \n {jumpOptions?.map(value => (\n \n ))}\n \n
\n );\n};\n\nexport default DropdownJumpLink;\n","import React, { useEffect, useState, useContext, useRef } from 'react';\nimport { buildResultList } from '@coveo/headless';\nimport ResultList from '../ResultsListing/components/ResultList';\nimport SearchBox from '../ResultsListing/components/SearchBox';\nimport DropdownJumpLink from './components/DropdownJumpLinks';\nimport useCoveoEngine from '../ResultsListing/useCoveoEngine';\nimport { breakpoints, debounce } from '../../../helpers';\n\nconst AcademicCalendar = () => {\n const engine = useContext(useCoveoEngine);\n const [, setController] = useState(null);\n const [, setState] = useState(null);\n const [modificator, setModificator] = useState('');\n const container = useRef(null);\n\n let root;\n let distanceUpdated = false;\n let isSticky = false;\n let distanceToContainer = 0;\n let headerOffset = 0;\n let extraOffset = 0;\n\n const setOffset = () => {\n if (root) {\n if (\n window.matchMedia(`(max-width: ${breakpoints.tablet - 1}px)`).matches\n ) {\n headerOffset = getComputedStyle(root).getPropertyValue(\n '--header-mobile-height'\n );\n headerOffset = parseInt(headerOffset, 10) + 5;\n } else {\n headerOffset = getComputedStyle(root).getPropertyValue(\n '--header-mobile-height'\n );\n headerOffset = parseInt(headerOffset, 10) + 50;\n }\n\n headerOffset = headerOffset || 0;\n extraOffset = headerOffset ? 0 : 25;\n }\n };\n\n const handleScroll = () => {\n if (!distanceUpdated) {\n distanceToContainer =\n window.pageYOffset + container.current.getBoundingClientRect().top;\n distanceUpdated = true;\n setOffset();\n }\n\n const currentScrollPosition = document.documentElement.scrollTop;\n\n if (\n currentScrollPosition > distanceToContainer - headerOffset &&\n !isSticky\n ) {\n setModificator('academic-calendar--sticky');\n isSticky = true;\n if (\n window.matchMedia(`(max-width: ${breakpoints.tablet - 1}px)`).matches\n ) {\n window.requestAnimationFrame(() => {\n window.scrollBy(0, 55 + headerOffset);\n });\n }\n }\n if (\n (currentScrollPosition <\n distanceToContainer - headerOffset - extraOffset &&\n isSticky) ||\n currentScrollPosition === 0\n ) {\n setModificator('');\n isSticky = false;\n }\n };\n\n const handleResize = () => {\n distanceToContainer =\n window.pageYOffset + container.current.getBoundingClientRect().top;\n setOffset();\n };\n\n useEffect(() => {\n if (engine) {\n const _controller = buildResultList(engine);\n setController(_controller);\n setState(_controller.state);\n _controller.subscribe(() => {\n setState(_controller.state);\n });\n }\n\n window.addEventListener('scroll', handleScroll);\n window.addEventListener('resize', debounce(handleResize));\n\n root = document.querySelector(':root');\n }, []);\n\n return (\n \n );\n};\n\nexport default AcademicCalendar;\n","import React, { useState, useEffect, useContext } from 'react';\nimport { buildDidYouMean } from '@coveo/headless';\nimport useCoveoEngine from '../useCoveoEngine';\nimport ListingContext from '../ListingContext';\n\nconst DidYouMean = () => {\n const engine = useContext(useCoveoEngine);\n const { searchFor, searchCorrected, searchYouMean } =\n useContext(ListingContext);\n\n const [controller, setController] = useState(null);\n const [state, setState] = useState(null);\n\n useEffect(() => {\n if (engine) {\n const _controller = buildDidYouMean(engine);\n setController(_controller);\n setState(_controller.state);\n _controller.subscribe(() => {\n setState(_controller.state);\n });\n }\n }, []);\n\n if (state?.originalQuery.length === 0) {\n return <>;\n }\n\n if (!state?.hasQueryCorrection) {\n return (\n \n {searchFor}\n {` ${state?.originalQuery}`}\n
\n );\n }\n\n if (state?.wasAutomaticallyCorrected) {\n return (\n <>\n \n {searchFor}\n {` ‘${state.queryCorrection.wordCorrections[0].originalWord}’`}{' '}\n {searchCorrected}\n {` ‘${state?.wasCorrectedTo}’`}\n
\n \n );\n }\n\n return (\n <>\n \n {searchFor}\n {` ${state?.originalQuery} `}\n
\n \n {searchYouMean}{' '}\n controller.applyCorrection()}\n >\n {state?.queryCorrection?.correctedQuery}\n \n
\n \n );\n};\n\nexport default DidYouMean;\n","import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { buildContext, loadAdvancedSearchQueryActions } from '@coveo/headless';\nimport { coveoSearchEngine } from './components/CoveoSearchEngine';\nimport { bindUrlManager } from './components/SearchUrlManager';\nimport ResultList from './components/ResultList';\nimport ResultsSummaryInformation from './components/ResultsSummaryInformation';\nimport Pagination from './components/Pagination';\nimport ResultsPerPage from './components/ResultsPerPage';\nimport SearchBox from './components/SearchBox';\nimport Tab from './components/Tab';\nimport Sort from './components/Sort';\nimport FiltersPanel from './components/FiltersPanel';\nimport AcademicCalendar from '../AcademicCalendar';\nimport DropdownFilter from '../AcademicCalendar/components/DropdownFilter';\nimport DidYouMean from './components/DidYouMean';\n\nimport ResultsContext from './ListingContext';\nimport CoveoEngineContext from './useCoveoEngine';\n\nexport const CLEAR_EVENT = 'clear';\n\nconst ResultsListing = props => {\n const {\n coveoOrganizationId,\n coveoApiKey,\n coveoPipeline,\n coveoSearchHub,\n coveoSource,\n templates,\n typeOfResultCard,\n searchHeading,\n facetsInfo,\n dropdownJumpOptions,\n isEditMode,\n innerContent,\n programFilterFacet,\n programId,\n securityField,\n securityValues,\n coveoContext\n } = props;\n\n const isProgramQuery = programFilterFacet && programId;\n\n const buildAdvancedQuery = () => {\n let _advancedQuery = '';\n\n if (coveoSource) {\n _advancedQuery = `@source=\"${coveoSource}\"`;\n }\n\n if (templates) {\n const templatesObj = JSON.parse(templates);\n _advancedQuery += `; @mcphs_template=\"${templatesObj.reduce(\n (string, template) => `${string}|${template}`,\n ''\n )}\"`;\n } else {\n _advancedQuery += '; @mcphs_template /= \".\"';\n }\n\n if (isProgramQuery) {\n _advancedQuery += ` @${programFilterFacet} = \"${programId}\"`;\n }\n\n if (securityField) {\n if (securityValues) {\n const values = securityValues.split(',');\n const preQuery = `@${securityField} = \"\"`;\n let valuesQuery = '';\n\n if (values.length > 1) {\n valuesQuery = `@${securityField} = (${values.join(' OR ')})`;\n _advancedQuery = ` ${_advancedQuery} AND ( ${preQuery} OR ${valuesQuery} ) `;\n } else {\n _advancedQuery = ` ${_advancedQuery} AND ( ${preQuery} OR @${securityField} = \"${values[0]}\" ) `;\n }\n } else {\n _advancedQuery += ` @${securityField} = \"\"`;\n }\n }\n\n return _advancedQuery;\n };\n\n const facets = facetsInfo ? JSON.parse(facetsInfo) : {};\n const jumpOptions = dropdownJumpOptions\n ? JSON.parse(dropdownJumpOptions)\n : [];\n const advancedQuery = buildAdvancedQuery();\n\n const [context] = useState({\n ...props,\n facets,\n jumpOptions,\n advancedQuery,\n CLEAR_EVENT\n });\n\n const coveoHeadlessSearchEngine =\n coveoOrganizationId && coveoApiKey\n ? coveoSearchEngine(\n coveoOrganizationId,\n coveoApiKey,\n coveoPipeline,\n coveoSearchHub,\n false\n ) // set 3rd argument to true if you want to debug\n : coveoSearchEngine();\n const filtersContainerRef = useRef();\n const filterPanelRef = useRef();\n const advancedQuerySearchActionCreator = coveoHeadlessSearchEngine\n ? loadAdvancedSearchQueryActions(coveoHeadlessSearchEngine)\n : null;\n\n if (coveoContext) {\n const contextObj = buildContext(coveoHeadlessSearchEngine);\n contextObj?.set(JSON.parse(coveoContext));\n }\n\n useEffect(() => {\n if (!isEditMode) {\n bindUrlManager(coveoHeadlessSearchEngine);\n coveoHeadlessSearchEngine?.dispatch(\n advancedQuerySearchActionCreator.registerAdvancedSearchQueries({\n aq: buildAdvancedQuery()\n })\n );\n coveoHeadlessSearchEngine.executeFirstSearch();\n }\n }, []);\n\n const callbackFunction = entries => {\n const [entry] = entries;\n filterPanelRef.current.setBottom(entry.isIntersecting);\n };\n\n const callbackFunction2 = entries => {\n const [entry] = entries;\n filterPanelRef.current.setTop(entry.isIntersecting);\n };\n\n const options = {\n root: null,\n rootMargin: '-85% 0px 0px',\n threshold: 0\n };\n\n const options2 = {\n root: null,\n rootMargin: '0px 0px -40%',\n threshold: 0\n };\n\n const observer =\n !innerContent && new IntersectionObserver(callbackFunction, options);\n const observer2 =\n !innerContent && new IntersectionObserver(callbackFunction2, options2);\n\n const handleResize = () => {\n if (typeOfResultCard !== 'calendar' && !innerContent) {\n if (window.matchMedia('(max-width: 767px)').matches) {\n observer.observe(filtersContainerRef.current);\n observer2.observe(filtersContainerRef.current);\n } else {\n observer.unobserve(filtersContainerRef.current);\n observer2.unobserve(filtersContainerRef.current);\n }\n }\n };\n\n useEffect(() => {\n if (window.matchMedia('(max-width: 767px)').matches) {\n if (filtersContainerRef.current) {\n observer.observe(filtersContainerRef.current);\n observer2.observe(filtersContainerRef.current);\n return () => {\n observer.unobserve(filtersContainerRef.current);\n observer2.unobserve(filtersContainerRef.current);\n };\n }\n }\n }, [filtersContainerRef, options, options2]);\n\n useEffect(() => {\n handleResize();\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n const [coveoEngine] = useState(isEditMode ? null : coveoHeadlessSearchEngine);\n const sortComponents = ['article', 'blog', 'search', 'form'];\n const filterComponents = ['program', 'faculty'];\n\n return (\n // ------- HANDLES FORM AND ARTICLE LISTINGS -------\n \n \n \n {typeOfResultCard === 'search' && (\n \n
{searchHeading}
\n \n \n )}\n {!innerContent && filtersContainerRef ? (\n \n \n \n \n
\n
\n \n \n {filterComponents.includes(typeOfResultCard) && (\n \n )}\n \n
\n
\n
\n
\n
\n
\n \n \n {filterComponents.includes(typeOfResultCard) && (\n \n )}\n
\n
\n
\n
\n