{"version":3,"file":"index.mjs","names":["ComponentProps","RefObject","useCallback","useEffect","clsx","Props","name","position","initialValue","container","HTMLDivElement","ResizeArea","className","rest","cssVarName","includes","document","documentElement","style","setProperty","removeProperty","handlePointerMove","e","MouseEvent","cssVarValue","containerRect","current","getBoundingClientRect","bottom","pageY","pageX","left","right","top","handlePointerUp","handler","removeEventListener","classList","remove","handlePointerDown","addEventListener","once","add"],"sources":["../../../src/components/resize-area/ResizeArea.tsx"],"sourcesContent":["import { ComponentProps, RefObject, useCallback, useEffect } from \"react\";\nimport clsx from \"clsx\";\n\ninterface Props extends ComponentProps<\"div\"> {\n  name: string;\n  position: \"top\" | \"bottom\" | \"left\" | \"right\";\n  initialValue?: number;\n  container?: RefObject<HTMLDivElement>;\n}\n\nexport function ResizeArea({ name, position, initialValue, className, container, ...rest }: Props) {\n  useEffect(() => {\n    const cssVarName = `--sidebar-${name}-${[\"top\", \"bottom\"].includes(position) ? \"height\" : \"width\"}`;\n    if (initialValue) {\n      document.documentElement.style.setProperty(cssVarName, `${initialValue}px`);\n    }\n    // we want to set the initial value, we don't want this value to be updated after\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const cssVarName = `--sidebar-${name}-${[\"top\", \"bottom\"].includes(position) ? \"height\" : \"width\"}`;\n    return () => {\n      // some cleanup\n      document.documentElement.style.removeProperty(cssVarName);\n    };\n  }, [name, position]);\n\n  const handlePointerMove = useCallback(\n    (e: MouseEvent) => {\n      const cssVarName = `--sidebar-${name}-${[\"top\", \"bottom\"].includes(position) ? \"height\" : \"width\"}`;\n      let cssVarValue;\n\n      const containerRect = (\n        container?.current || document.documentElement\n      ).getBoundingClientRect();\n      switch (position) {\n        case \"top\":\n          cssVarValue = containerRect.bottom - e.pageY;\n          break;\n        case \"right\":\n          cssVarValue = e.pageX - containerRect.left;\n          break;\n        case \"left\":\n          cssVarValue = containerRect.right - e.pageX;\n          break;\n        case \"bottom\":\n          cssVarValue = e.pageY - containerRect.top;\n          break;\n      }\n      document.documentElement.style.setProperty(cssVarName, `${cssVarValue}px`);\n      return () => {\n        document.documentElement.style.removeProperty(cssVarName);\n      };\n    },\n    [name, position, container],\n  );\n\n  const handlePointerUp = useCallback(() => {\n    const handler = handlePointerMove;\n    document.removeEventListener(\"pointermove\", handler);\n    document.documentElement.classList.remove(\"cursor-row-resize\", \"cursor-col-resize\");\n\n    return () => {\n      document.removeEventListener(\"pointermove\", handler);\n    };\n  }, [handlePointerMove]);\n\n  function handlePointerDown() {\n    document.addEventListener(\"pointerup\", handlePointerUp, { once: true });\n    document.addEventListener(\"pointermove\", handlePointerMove);\n    if ([\"top\", \"bottom\"].includes(position)) {\n      document.documentElement.classList.add(`cursor-row-resize`);\n    } else {\n      document.documentElement.classList.add(`cursor-col-resize`);\n    }\n  }\n\n  return (\n    <div className={clsx([\"p8n-resize-area\", position, className])} {...rest}>\n      <button className=\"area-button\" type=\"button\" onPointerDown={handlePointerDown}></button>\n    </div>\n  );\n}\n"],"mappings":";;;;AAUA,SAAgBW,WAAW,EAAEL,MAAMC,UAAUC,cAAcI,WAAWH,WAAW,GAAGI,QAAe;CACjGV,gBAAgB;EACd,MAAMW,aAAa,aAAaR,KAAI,GAAI,CAAC,OAAO,QAAQ,CAAC,CAACS,SAASR,QAAQ,IAAI,WAAW;EAC1F,IAAIC,cACFQ,SAASC,gBAAgBC,MAAMC,YAAYL,YAAY,GAAGN,aAAY,GAAI;CAI9E,GAAG,CAAA,CAAE;CAELL,gBAAgB;EACd,MAAMW,aAAa,aAAaR,KAAI,GAAI,CAAC,OAAO,QAAQ,CAAC,CAACS,SAASR,QAAQ,IAAI,WAAW;EAC1F,aAAa;GAEXS,SAASC,gBAAgBC,MAAME,eAAeN,UAAU;EAC1D;CACF,GAAG,CAACR,MAAMC,QAAQ,CAAC;CAEnB,MAAMc,oBAAoBnB,aACvBoB,MAAkB;EACjB,MAAMR,aAAa,aAAaR,KAAI,GAAI,CAAC,OAAO,QAAQ,CAAC,CAACS,SAASR,QAAQ,IAAI,WAAW;EAC1F,IAAIiB;EAEJ,MAAMC,iBACJhB,WAAWiB,WAAWV,SAASC,gBAAAA,CAC/BU,sBAAsB;EACxB,QAAQpB,UAAR;GACE,KAAK;IACHiB,cAAcC,cAAcG,SAASN,EAAEO;IACvC;GACF,KAAK;IACHL,cAAcF,EAAEQ,QAAQL,cAAcM;IACtC;GACF,KAAK;IACHP,cAAcC,cAAcO,QAAQV,EAAEQ;IACtC;GACF,KAAK,UACHN,cAAcF,EAAEO,QAAQJ,cAAcQ;EAE1C;EACAjB,SAASC,gBAAgBC,MAAMC,YAAYL,YAAY,GAAGU,YAAW,GAAI;EACzE,aAAa;GACXR,SAASC,gBAAgBC,MAAME,eAAeN,UAAU;EAC1D;CACF,GACA;EAACR;EAAMC;EAAUE;CAAS,CAC5B;CAEA,MAAMyB,kBAAkBhC,kBAAkB;EACxC,MAAMiC,UAAUd;EAChBL,SAASoB,oBAAoB,eAAeD,OAAO;EACnDnB,SAASC,gBAAgBoB,UAAUC,OAAO,qBAAqB,mBAAmB;EAElF,aAAa;GACXtB,SAASoB,oBAAoB,eAAeD,OAAO;EACrD;CACF,GAAG,CAACd,iBAAiB,CAAC;CAEtB,SAASkB,oBAAoB;EAC3BvB,SAASwB,iBAAiB,aAAaN,iBAAiB,EAAEO,MAAM,KAAK,CAAC;EACtEzB,SAASwB,iBAAiB,eAAenB,iBAAiB;EAC1D,IAAI,CAAC,OAAO,QAAQ,CAAC,CAACN,SAASR,QAAQ,GACrCS,SAASC,gBAAgBoB,UAAUK,IAAI,mBAAmB;OAE1D1B,SAASC,gBAAgBoB,UAAUK,IAAI,mBAAmB;CAE9D;CAEA,OACE,oBAAC,OAAD;EAAK,WAAWtC,KAAK;GAAC;GAAmBG;GAAUK;EAAS,CAAC;EAAG,GAAIC;EAClE,UAAA,oBAAC,UAAD;GAAQ,WAAU;GAAc,MAAK;GAAS,eAAe0B;EAA2B,CAAA;CACrF,CAAA;AAET"}