@cloudscape-design/components 3.0.391 → 3.0.393

package/table/sticky-scrollbar/use-sticky-scrollbar.js

@@ -46,7 +46,7 @@ export const updatePosition = (tableEl, wrapperEl, scrollbarEl, scrollbarContent
         scrollbarEl.style.bottom = hasContainingBlock ? '0px' : `${consideredFooterHeight}px`;
     }
 };
-export function useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef, wrapperRef, footerHeight) {
+export function useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef, wrapperRef, footerHeight, offsetScrollbar) {
     // We don't take into account containing-block calculations because that would
     // unnecessarily overcomplicate the position logic. For now, we assume that a
     // containing block, if present, is below the app layout and above the overflow
@@ -79,7 +79,15 @@ export function useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef,
                 observer.disconnect();
             };
         }
-    }, [scrollbarContentRef, scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, hasContainingBlock]);
+    }, [
+        scrollbarContentRef,
+        scrollbarRef,
+        tableRef,
+        wrapperRef,
+        consideredFooterHeight,
+        hasContainingBlock,
+        offsetScrollbar,
+    ]);
     // Update scrollbar position when window resizes (vertically).
     useEffect(() => {
         if (supportsStickyPosition()) {

package/table/sticky-scrollbar/use-sticky-scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-scrollbar.js","sourceRoot":"lib/default/","sources":["table/sticky-scrollbar/use-sticky-scrollbar.ts"],"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 { ResizeObserver } from '@juggle/resize-observer';\nimport { RefObject, useEffect, useState } from 'react';\nimport styles from './styles.css.js';\nimport { getContainingBlock, supportsStickyPosition } from '../../internal/utils/dom';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { browserScrollbarSize } from '../../internal/utils/browser-scrollbar-size';\n\nexport const updatePosition = (\n  tableEl: HTMLElement | null,\n  wrapperEl: HTMLElement | null,\n  scrollbarEl: HTMLElement | null,\n  scrollbarContentEl: HTMLElement | null,\n  hasContainingBlock: boolean,\n  consideredFooterHeight: number\n) => {\n  if (!tableEl || !scrollbarEl || !wrapperEl) {\n    return;\n  }\n\n  const { width: tableWidth } = tableEl.getBoundingClientRect();\n  const { width: wrapperWidth } = wrapperEl.getBoundingClientRect();\n\n  // using 15 px as a height of transparent scrollbar on mac\n  const scrollbarHeight = browserScrollbarSize().height;\n  const areaIsScrollable = tableWidth > wrapperWidth;\n\n  if (!areaIsScrollable) {\n    scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);\n  } else {\n    // when scrollbar is not displayed scrollLeft property cannot be set by useScrollSync\n    // that's why syncing it separately\n    if (!scrollbarEl.classList.contains(styles['sticky-scrollbar-visible'])) {\n      requestAnimationFrame(() => {\n        scrollbarEl.scrollLeft = wrapperEl.scrollLeft;\n      });\n    }\n\n    scrollbarEl.classList.add(styles['sticky-scrollbar-visible']);\n    if (!scrollbarHeight) {\n      /* istanbul ignore next: covered by screenshot tests */\n      scrollbarEl.classList.add(styles['sticky-scrollbar-native-invisible']);\n    }\n  }\n\n  if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {\n    scrollbarEl.style.height = `${scrollbarHeight}px`;\n    scrollbarContentEl.style.height = `${scrollbarHeight}px`;\n  }\n\n  if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {\n    const wrapperElRect = wrapperEl.getBoundingClientRect();\n    const tableElRect = tableEl.getBoundingClientRect();\n    scrollbarEl.style.width = `${wrapperElRect.width}px`;\n    scrollbarContentEl.style.width = `${tableElRect.width}px`;\n\n    // when using sticky scrollbars in containers\n    // we agreed to ignore dynamic bottom calculations for footer overlap\n    scrollbarEl.style.bottom = hasContainingBlock ? '0px' : `${consideredFooterHeight}px`;\n  }\n};\n\nexport function useStickyScrollbar(\n  scrollbarRef: RefObject<HTMLDivElement>,\n  scrollbarContentRef: RefObject<HTMLDivElement>,\n  tableRef: RefObject<HTMLTableElement>,\n  wrapperRef: RefObject<HTMLDivElement>,\n  footerHeight: number\n) {\n  // We don't take into account containing-block calculations because that would\n  // unnecessarily overcomplicate the position logic. For now, we assume that a\n  // containing block, if present, is below the app layout and above the overflow\n  // parent, which is a pretty safe assumption.\n  const [hasContainingBlock, setHasContainingBlock] = useState(false);\n  // We don't take into account footer height when the overflow parent is child of document body.\n  // Because in this case, we think the footer is outside the overflow parent.\n  const [hasOverflowParent, setHasOverflowParent] = useState(false);\n  const consideredFooterHeight = hasContainingBlock || hasOverflowParent ? 0 : footerHeight;\n\n  const wrapperEl = wrapperRef.current;\n  useEffect(() => {\n    if (wrapperEl && supportsStickyPosition()) {\n      setHasContainingBlock(!!getContainingBlock(wrapperEl));\n      setHasOverflowParent(!!getOverflowParents(wrapperEl)[0]);\n    }\n  }, [wrapperEl]);\n\n  // Update scrollbar position wrapper or table size change.\n  useEffect(() => {\n    if (supportsStickyPosition() && wrapperRef.current && tableRef.current) {\n      const observer = new ResizeObserver(() => {\n        if (scrollbarContentRef.current) {\n          updatePosition(\n            tableRef.current,\n            wrapperRef.current,\n            scrollbarRef.current,\n            scrollbarContentRef.current,\n            hasContainingBlock,\n            consideredFooterHeight\n          );\n        }\n      });\n      // Scrollbar width must be in sync with wrapper width.\n      observer.observe(wrapperRef.current);\n      // Scrollbar content width must be in sync with table width.\n      observer.observe(tableRef.current);\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [scrollbarContentRef, scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, hasContainingBlock]);\n\n  // Update scrollbar position when window resizes (vertically).\n  useEffect(() => {\n    if (supportsStickyPosition()) {\n      const resizeHandler = () => {\n        updatePosition(\n          tableRef.current,\n          wrapperRef.current,\n          scrollbarRef.current,\n          scrollbarContentRef.current,\n          hasContainingBlock,\n          consideredFooterHeight\n        );\n      };\n      resizeHandler();\n      window.addEventListener('resize', resizeHandler);\n      return () => {\n        window.removeEventListener('resize', resizeHandler);\n      };\n    }\n  }, [tableRef, wrapperRef, scrollbarRef, scrollbarContentRef, hasContainingBlock, consideredFooterHeight]);\n}\n"]}
+{"version":3,"file":"use-sticky-scrollbar.js","sourceRoot":"lib/default/","sources":["table/sticky-scrollbar/use-sticky-scrollbar.ts"],"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 { ResizeObserver } from '@juggle/resize-observer';\nimport { RefObject, useEffect, useState } from 'react';\nimport styles from './styles.css.js';\nimport { getContainingBlock, supportsStickyPosition } from '../../internal/utils/dom';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { browserScrollbarSize } from '../../internal/utils/browser-scrollbar-size';\n\nexport const updatePosition = (\n  tableEl: HTMLElement | null,\n  wrapperEl: HTMLElement | null,\n  scrollbarEl: HTMLElement | null,\n  scrollbarContentEl: HTMLElement | null,\n  hasContainingBlock: boolean,\n  consideredFooterHeight: number\n) => {\n  if (!tableEl || !scrollbarEl || !wrapperEl) {\n    return;\n  }\n\n  const { width: tableWidth } = tableEl.getBoundingClientRect();\n  const { width: wrapperWidth } = wrapperEl.getBoundingClientRect();\n\n  // using 15 px as a height of transparent scrollbar on mac\n  const scrollbarHeight = browserScrollbarSize().height;\n  const areaIsScrollable = tableWidth > wrapperWidth;\n\n  if (!areaIsScrollable) {\n    scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);\n  } else {\n    // when scrollbar is not displayed scrollLeft property cannot be set by useScrollSync\n    // that's why syncing it separately\n    if (!scrollbarEl.classList.contains(styles['sticky-scrollbar-visible'])) {\n      requestAnimationFrame(() => {\n        scrollbarEl.scrollLeft = wrapperEl.scrollLeft;\n      });\n    }\n\n    scrollbarEl.classList.add(styles['sticky-scrollbar-visible']);\n    if (!scrollbarHeight) {\n      /* istanbul ignore next: covered by screenshot tests */\n      scrollbarEl.classList.add(styles['sticky-scrollbar-native-invisible']);\n    }\n  }\n\n  if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {\n    scrollbarEl.style.height = `${scrollbarHeight}px`;\n    scrollbarContentEl.style.height = `${scrollbarHeight}px`;\n  }\n\n  if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {\n    const wrapperElRect = wrapperEl.getBoundingClientRect();\n    const tableElRect = tableEl.getBoundingClientRect();\n    scrollbarEl.style.width = `${wrapperElRect.width}px`;\n    scrollbarContentEl.style.width = `${tableElRect.width}px`;\n\n    // when using sticky scrollbars in containers\n    // we agreed to ignore dynamic bottom calculations for footer overlap\n    scrollbarEl.style.bottom = hasContainingBlock ? '0px' : `${consideredFooterHeight}px`;\n  }\n};\n\nexport function useStickyScrollbar(\n  scrollbarRef: RefObject<HTMLDivElement>,\n  scrollbarContentRef: RefObject<HTMLDivElement>,\n  tableRef: RefObject<HTMLTableElement>,\n  wrapperRef: RefObject<HTMLDivElement>,\n  footerHeight: number,\n  offsetScrollbar: boolean\n) {\n  // We don't take into account containing-block calculations because that would\n  // unnecessarily overcomplicate the position logic. For now, we assume that a\n  // containing block, if present, is below the app layout and above the overflow\n  // parent, which is a pretty safe assumption.\n  const [hasContainingBlock, setHasContainingBlock] = useState(false);\n  // We don't take into account footer height when the overflow parent is child of document body.\n  // Because in this case, we think the footer is outside the overflow parent.\n  const [hasOverflowParent, setHasOverflowParent] = useState(false);\n  const consideredFooterHeight = hasContainingBlock || hasOverflowParent ? 0 : footerHeight;\n\n  const wrapperEl = wrapperRef.current;\n  useEffect(() => {\n    if (wrapperEl && supportsStickyPosition()) {\n      setHasContainingBlock(!!getContainingBlock(wrapperEl));\n      setHasOverflowParent(!!getOverflowParents(wrapperEl)[0]);\n    }\n  }, [wrapperEl]);\n\n  // Update scrollbar position wrapper or table size change.\n  useEffect(() => {\n    if (supportsStickyPosition() && wrapperRef.current && tableRef.current) {\n      const observer = new ResizeObserver(() => {\n        if (scrollbarContentRef.current) {\n          updatePosition(\n            tableRef.current,\n            wrapperRef.current,\n            scrollbarRef.current,\n            scrollbarContentRef.current,\n            hasContainingBlock,\n            consideredFooterHeight\n          );\n        }\n      });\n      // Scrollbar width must be in sync with wrapper width.\n      observer.observe(wrapperRef.current);\n      // Scrollbar content width must be in sync with table width.\n      observer.observe(tableRef.current);\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [\n    scrollbarContentRef,\n    scrollbarRef,\n    tableRef,\n    wrapperRef,\n    consideredFooterHeight,\n    hasContainingBlock,\n    offsetScrollbar,\n  ]);\n\n  // Update scrollbar position when window resizes (vertically).\n  useEffect(() => {\n    if (supportsStickyPosition()) {\n      const resizeHandler = () => {\n        updatePosition(\n          tableRef.current,\n          wrapperRef.current,\n          scrollbarRef.current,\n          scrollbarContentRef.current,\n          hasContainingBlock,\n          consideredFooterHeight\n        );\n      };\n      resizeHandler();\n      window.addEventListener('resize', resizeHandler);\n      return () => {\n        window.removeEventListener('resize', resizeHandler);\n      };\n    }\n  }, [tableRef, wrapperRef, scrollbarRef, scrollbarContentRef, hasContainingBlock, consideredFooterHeight]);\n}\n"]}