{"version":3,"sources":["../src/Collapsible/Collapsible.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  type CSSProperties,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport useResizeObserver from \"use-resize-observer\";\nimport useTimeout from \"@rooks/use-timeout\";\nimport { mergeRefs } from \"react-merge-refs\";\nimport { cx } from \"cva\";\n\ntype DomEl = null | HTMLDivElement;\n\nexport type CollapsibleProps = PropsWithChildren<{\n  className?: string;\n  innerClassName?: string;\n  expanded: boolean;\n  duration?: number;\n  animationType?: \"scale\" | \"translate\";\n}>;\n\nconst Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(\n  (\n    { children, className, innerClassName, expanded, duration, animationType = \"translate\" },\n    ref,\n  ) => {\n    const innerEl = useRef<DomEl>(null);\n    const wrapperEl = useRef<DomEl>(null);\n    const [height, setHeight] = useState<number | null>(null);\n\n    const durationStyle = useMemo<CSSProperties | undefined>(() => {\n      if (typeof duration !== \"number\") return;\n      return { transitionDuration: `${duration}ms` };\n    }, [duration]);\n\n    const { start, clear } = useTimeout(() => {\n      measure(innerEl.current);\n      updateHeight();\n    }, 500);\n\n    useResizeObserver<HTMLDivElement>({\n      ref: innerEl,\n      onResize: () => {\n        if (\n          !wrapperEl.current ||\n          !innerEl.current ||\n          !wrapperEl.current.contains(innerEl.current)\n        ) {\n          return;\n        }\n        clear();\n        start();\n      },\n    });\n\n    useEffect(() => {\n      updateHeight();\n    }, [expanded, height]);\n\n    const measure = useCallback((el: DomEl) => {\n      if (!el) return;\n      setHeight(el.offsetHeight);\n    }, []);\n\n    const updateInnerHeight = useCallback((heightParam: number | null) => {\n      if (!wrapperEl.current || heightParam === null) return;\n\n      if (wrapperEl.current.style.height !== heightParam + \"px\") {\n        wrapperEl.current.style.height = heightParam + \"px\";\n      }\n      if (!height || !innerEl.current) return;\n\n      if (animationType === \"scale\") {\n        innerEl.current.style.transform = `scaleY(${heightParam / height})`;\n      } else {\n        innerEl.current.style.transform = `translate3d(0,${heightParam - height}px,0)`;\n      }\n    }, []);\n\n    const updateHeight = useCallback(() => {\n      if (!innerEl.current || !wrapperEl.current) return;\n\n      const executeHeightUpdate = () => {\n        if (wrapperEl.current && innerEl.current && wrapperEl.current.contains(innerEl.current)) {\n          measure(innerEl.current);\n          updateInnerHeight(height);\n        } else {\n          requestAnimationFrame(executeHeightUpdate);\n        }\n      };\n\n      if (expanded) {\n        if (!wrapperEl.current.contains(innerEl.current)) {\n          wrapperEl.current.appendChild(innerEl.current);\n          executeHeightUpdate();\n        } else {\n          measure(innerEl.current);\n          updateInnerHeight(height);\n        }\n      } else {\n        updateInnerHeight(0);\n      }\n    }, [expanded, height, measure, updateInnerHeight]);\n\n    const transitionEnd = () => {\n      if (expanded) return;\n      if (innerEl.current && wrapperEl.current?.contains(innerEl.current)) {\n        wrapperEl.current.removeChild(innerEl.current);\n      }\n    };\n\n    return (\n      <div\n        ref={mergeRefs([wrapperEl, ref])}\n        className={cx(\"kn-collapsible\", className)}\n        style={{ ...durationStyle }}\n        onTransitionEnd={transitionEnd}\n      >\n        <div\n          ref={innerEl}\n          className={cx(\"kn-collapsible-inner\", innerClassName)}\n          style={{ ...durationStyle }}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n\nCollapsible.displayName = \"Collapsible\";\n\nexport default Collapsible;\n"],"mappings":"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","names":[]}