@cloudscape-design/components-themeable 3.0.29 → 3.0.32

package/lib/internal/template/app-layout/utils/use-sticky-position.js

@@ -1,54 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useRef } from 'react';
-import { useContainerQuery } from '../../internal/hooks/container-queries';
-import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
-function getScrollableContainers(element) {
-    var node = element;
-    while ((node = node.parentElement) && node !== document.body) {
-        if (['scroll', 'auto'].indexOf(getComputedStyle(node).overflow) > -1) {
-            return node;
-        }
-    }
-    return null;
-}
-export function useStickyPosition(topOffset) {
-    if (topOffset === void 0) { topOffset = 0; }
-    var _a = useContainerQuery(function (rect) { return rect.height; }), stickyHeight = _a[0], stickyMeasureRef = _a[1];
-    var stickyRefObject = useRef(null);
-    var stickyRef = useMergeRefs(stickyMeasureRef, stickyRefObject);
-    var _b = useContainerQuery(function (rect) { return rect.width; }), stickyWidth = _b[0], placeholderMeasureRef = _b[1];
-    var placeholderRefObject = useRef(null);
-    var placeholderRef = useMergeRefs(placeholderMeasureRef, placeholderRefObject);
-    var placeholder = React.createElement("div", { ref: placeholderRef });
-    useEffect(function () {
-        if (!stickyRefObject.current || !placeholderRefObject.current) {
-            return;
-        }
-        var stickyElement = stickyRefObject.current;
-        var placeholder = placeholderRefObject.current;
-        var scrollParent = getScrollableContainers(stickyElement);
-        var handler = function () {
-            var stickyBox = stickyElement.getBoundingClientRect();
-            var containerBox = scrollParent ? scrollParent.getBoundingClientRect() : { top: 0 };
-            if (stickyBox.top - containerBox.top <= topOffset) {
-                stickyElement.style.position = 'fixed';
-                stickyElement.style.width = "".concat(stickyWidth, "px");
-                stickyElement.style.top = "".concat(topOffset, "px");
-                placeholder.style.height = "".concat(stickyHeight, "px");
-            }
-            else {
-                stickyElement.style.position = '';
-                stickyElement.style.width = "";
-                stickyElement.style.top = "";
-                placeholder.style.height = "";
-            }
-        };
-        var eventTarget = scrollParent || window;
-        eventTarget.addEventListener('scroll', handler);
-        handler();
-        return function () { return eventTarget.removeEventListener('scroll', handler); };
-    }, [topOffset, stickyWidth, stickyHeight, stickyRefObject, placeholderRefObject]);
-    return [stickyRef, placeholder];
-}
-//# sourceMappingURL=use-sticky-position.js.map

package/lib/internal/template/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"]}