{"version":3,"file":"category-facet-d0774d16.js","sources":["../../../../src/scripts/coveo/components/category-facet.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef, useId } from 'react';\nimport {\n  CategoryFacet,\n  CategoryFacetState,\n  CategoryFacetValue\n} from '@coveo/headless';\nimport { createDataLayerString } from '../../helpers/helpers';\n\ntype CategoryFacetProps = {\n  title: string;\n  controller: CategoryFacet;\n  certificationsLabel?: string;\n  customOrder?: string[];\n  defaultExpanded?: boolean;\n  showMoreLabel?: string;\n  showLessLabel?: string;\n  backToAll?: string;\n  addListeners?: boolean;\n  reorderValuesFunction?: (\n    values: CategoryFacetValue[]\n  ) => CategoryFacetValue[];\n};\n\nfunction FacetTree({\n  controller,\n  title,\n  defaultExpanded,\n  backToAll,\n  showLessLabel,\n  showMoreLabel,\n  addListeners,\n  reorderValuesFunction\n}: CategoryFacetProps) {\n  const id = useId();\n  const [state, setState] = useState(controller.state);\n  const [expanded, setExpanded] = useState<boolean>(\n    defaultExpanded !== undefined ? defaultExpanded : true\n  );\n  const [panelHeight, setPanelHeight] = useState('100%');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [firstLoad, setFirstLoad] = useState(true);\n  const facetTitleRef = useRef<HTMLSpanElement>(null);\n  const facetList = useRef(null);\n  const [facetListHeight, setFacetListHeight] = useState(0);\n  const [counter, setCounter] = useState(0);\n  const [values, setValues] = useState<CategoryFacetValue[]>([]);\n  const [parents, setParents] = useState<CategoryFacetValue[]>([]);\n\n  useEffect(() => controller.subscribe(() => setState(controller.state)), []);\n\n  const calculateStyles = () => {\n    if (panelRef.current) {\n      const newHeight = panelRef.current?.scrollHeight;\n      setPanelHeight(`${newHeight}px`);\n    }\n  };\n\n  const handleCollapseEvent = () => {\n    setExpanded(false);\n  };\n\n  useEffect(() => {\n    const selected = values.find(value => value.state === 'selected');\n\n    if (values?.length > 0 || parents?.length > 0) {\n      if (firstLoad) {\n        setFirstLoad(false);\n        if (selected) {\n          setExpanded(true);\n        }\n        resizeFacetHeight();\n      }\n    }\n  }, [values, parents?.length, expanded]);\n\n  useEffect(() => {\n    if (values?.length > 0 && facetList.current) {\n      if (\n        facetList.current &&\n        facetListHeight !== (facetList.current as HTMLElement).scrollHeight\n      ) {\n        resizeFacetHeight();\n      }\n    }\n  }, [values, parents?.length]);\n\n  const resizeFacetHeight = () => {\n    if (facetList.current) {\n      setFacetListHeight((facetList.current as HTMLElement).scrollHeight);\n      calculateStyles();\n    }\n  };\n\n  useEffect(() => {\n    if (reorderValuesFunction) {\n      setValues(reorderValuesFunction(state.values));\n    } else {\n      setValues(state.values);\n    }\n\n    setParents(state.parents);\n  }, [state.values, state.parents]);\n\n  useEffect(() => {\n    if (addListeners) {\n      window.addEventListener('coveoFacet.collapseAll', handleCollapseEvent);\n      window.addEventListener('deselectFacetTree', handleDeselectFacetTree);\n\n      window.addEventListener('resize', resizeFacetHeight);\n      return () => {\n        window.removeEventListener(\n          'coveoFacet.collapseAll',\n          handleCollapseEvent\n        );\n        window.removeEventListener('resize', resizeFacetHeight);\n        window.removeEventListener(\n          'deselectFacetTree',\n          handleDeselectFacetTree\n        );\n      };\n    }\n    return;\n  }, []);\n\n  const handleDeselectFacetTree = () => {\n    (\n      document.querySelector('.category-facet__parent') as HTMLButtonElement\n    )?.click();\n  };\n\n  const handleShowMoreClick = () => {\n    (controller as CategoryFacet).showMoreValues();\n    setCounter(counter + 1);\n  };\n\n  const handleShowLessClick = () => {\n    for (let i = 0; i < counter; i++) {\n      (controller as CategoryFacet).showLessValues();\n    }\n  };\n\n  function getUniqueKeyForValue(value: CategoryFacetValue) {\n    return value.path.join('>');\n  }\n\n  useEffect(() => {\n    calculateStyles();\n  }, [values, parents]);\n\n  if (!values?.length && !parents?.length) {\n    return <></>;\n  }\n\n  const renderBackButton = () => {\n    return (\n      <button\n        onClick={() => controller.deselectAll()}\n        className=\"link--inline link--arrow-back category-facet__back\"\n      >\n        <span>{backToAll}</span>\n      </button>\n    );\n  };\n\n  const renderParents = () => {\n    return (\n      state.hasActiveValues && (\n        <div>\n          {renderBackButton()}\n          <ul className=\"category-facet__parent-list\">\n            {parents.map((parentValue, i) => {\n              const isSelectedValue = i === parents.length - 1;\n\n              return (\n                <li key={getUniqueKeyForValue(parentValue)}>\n                  {!isSelectedValue ? (\n                    <button\n                      className={`${i === 0 ? 'category-facet__parent' : ''}`}\n                      onClick={() => {\n                        controller.toggleSelect(parentValue);\n                      }}\n                    >\n                      {parentValue.value}\n                    </button>\n                  ) : (\n                    <button\n                      className={`${i === 0 ? 'category-facet__parent' : ''}`}\n                      onClick={() => controller.deselectAll()}\n                    >\n                      {parentValue.value}\n                    </button>\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      )\n    );\n  };\n\n  const renderActiveValues = () => {\n    return (\n      <ul\n        className={`${\n          state.hasActiveValues && parents.length > 0\n            ? 'category-facet__first-children'\n            : ''\n        } category-facet__list`}\n      >\n        {values.map(value => (\n          <li className=\"category-facet__li\" key={getUniqueKeyForValue(value)}>\n            <button\n              className=\"category-facet__btn\"\n              onClick={() => controller.toggleSelect(value)}\n              data-layer={createDataLayerString([\n                {\n                  event: 'refinement_added',\n                  event_category: 'refinement usage'\n                }\n              ])}\n            >\n              {value.value}\n            </button>\n          </li>\n        ))}\n      </ul>\n    );\n  };\n\n  const renderCanShowMoreLess = () => {\n    return (\n      <div className=\"facet__control-buttons\">\n        {(state as CategoryFacetState).canShowLessValues && (\n          <button\n            className=\"link--inline facet__show-less\"\n            onClick={handleShowLessClick}\n            data-layer={createDataLayerString([\n              {\n                event: 'refinement_value_accordion',\n                event_category: 'refinement usage',\n                event_action: 'show less'\n              }\n            ])}\n          >\n            <span>{showLessLabel}</span>\n          </button>\n        )}\n        {(state as CategoryFacetState).canShowMoreValues && (\n          <button\n            className=\"link--inline facet__show-more\"\n            onClick={handleShowMoreClick}\n            data-layer={createDataLayerString([\n              {\n                event: 'refinement_value_accordion',\n                event_category: 'refinement usage',\n                event_action: 'show more'\n              }\n            ])}\n          >\n            <span>{showMoreLabel}</span>\n          </button>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"facet\">\n      <button\n        className=\"facet__trigger\"\n        aria-expanded={expanded}\n        id={`trigger-${id}`}\n        aria-controls={`panel-${id}`}\n        onClick={() => setExpanded(!expanded)}\n        data-layer={\n          expanded\n            ? createDataLayerString([\n                {\n                  event: 'accordion_interaction',\n                  event_category: 'accordion usage',\n                  event_action: 'collapse accordion'\n                }\n              ])\n            : createDataLayerString([\n                {\n                  event: 'accordion_interaction',\n                  event_category: 'accordion usage',\n                  event_action: 'expand accordion'\n                }\n              ])\n        }\n      >\n        <span className=\"facet__title\" ref={facetTitleRef}>\n          {title}\n        </span>\n      </button>\n      <div\n        aria-hidden={!expanded}\n        id={`panel-${id}`}\n        role=\"region\"\n        aria-labelledby={`trigger-${id}`}\n        className=\"facet__panel\"\n        ref={panelRef}\n        style={{ maxBlockSize: expanded ? panelHeight : 0 }}\n      >\n        <div>\n          {renderParents()}\n          {renderActiveValues()}\n          {renderCanShowMoreLess()}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default FacetTree;\n"],"names":["FacetTree","controller","title","defaultExpanded","backToAll","showLessLabel","showMoreLabel","addListeners","reorderValuesFunction","id","useId","state","setState","useState","expanded","setExpanded","panelHeight","setPanelHeight","panelRef","useRef","firstLoad","setFirstLoad","facetTitleRef","facetList","facetListHeight","setFacetListHeight","counter","setCounter","values","setValues","parents","setParents","useEffect","calculateStyles","newHeight","_a","handleCollapseEvent","selected","value","resizeFacetHeight","handleDeselectFacetTree","handleShowMoreClick","handleShowLessClick","i","getUniqueKeyForValue","React","renderBackButton","renderParents","parentValue","isSelectedValue","renderActiveValues","createDataLayerString","renderCanShowMoreLess"],"mappings":"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"}