@cloudscape-design/components 3.0.31 → 3.0.32

package/app-layout/utils/use-sticky-position.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-sticky-position.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-sticky-position.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport { useContainerQuery } from '../../internal/hooks/container-queries';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\n\nfunction getScrollableContainers(element: HTMLElement) {\n  let node: HTMLElement | null = element;\n\n  while ((node = node.parentElement) && node !== document.body) {\n    if (['scroll', 'auto'].indexOf(getComputedStyle(node).overflow) > -1) {\n      return node;\n    }\n  }\n  return null;\n}\n\nexport function useStickyPosition(topOffset = 0) {\n  const [stickyHeight, stickyMeasureRef] = useContainerQuery(rect => rect.height);\n  const stickyRefObject = useRef<HTMLDivElement>(null);\n  const stickyRef = useMergeRefs(stickyMeasureRef, stickyRefObject);\n\n  const [stickyWidth, placeholderMeasureRef] = useContainerQuery(rect => rect.width);\n  const placeholderRefObject = useRef<HTMLDivElement>(null);\n  const placeholderRef = useMergeRefs(placeholderMeasureRef, placeholderRefObject);\n\n  const placeholder = <div ref={placeholderRef} />;\n\n  useEffect(() => {\n    if (!stickyRefObject.current || !placeholderRefObject.current) {\n      return;\n    }\n    const stickyElement = stickyRefObject.current;\n    const placeholder = placeholderRefObject.current;\n    const scrollParent = getScrollableContainers(stickyElement);\n    const handler = () => {\n      const stickyBox = stickyElement.getBoundingClientRect();\n      const containerBox = scrollParent ? scrollParent.getBoundingClientRect() : { top: 0 };\n      if (stickyBox.top - containerBox.top <= topOffset) {\n        stickyElement.style.position = 'fixed';\n        stickyElement.style.width = `${stickyWidth}px`;\n        stickyElement.style.top = `${topOffset}px`;\n        placeholder.style.height = `${stickyHeight}px`;\n      } else {\n        stickyElement.style.position = '';\n        stickyElement.style.width = ``;\n        stickyElement.style.top = ``;\n        placeholder.style.height = ``;\n      }\n    };\n    const eventTarget = scrollParent || window;\n    eventTarget.addEventListener('scroll', handler);\n    handler();\n    return () => eventTarget.removeEventListener('scroll', handler);\n  }, [topOffset, stickyWidth, stickyHeight, stickyRefObject, placeholderRefObject]);\n\n  return [stickyRef, placeholder] as const;\n}\n"]}