@cloudscape-design/components 3.0.129 → 3.0.131

package/table/use-sticky-header.js

@@ -35,9 +35,6 @@ export var useStickyHeader = function (tableRef, theadRef, secondaryTheadRef, se
     }, [theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, tableRef]);
     useLayoutEffect(function () {
         syncColumnHeaderWidths();
-        // Content is not going to be layed out until the next frame in angular,
-        // so we need to sync the column headers again.
-        setTimeout(function () { return syncColumnHeaderWidths(); }, 0);
         var secondaryTable = secondaryTableRef.current;
         var primaryTable = tableWrapperRef.current;
         return function () {
@@ -48,7 +45,7 @@ export var useStickyHeader = function (tableRef, theadRef, secondaryTheadRef, se
                 primaryTable.style.marginTop = '';
             }
         };
-    });
+    }, [secondaryTableRef, tableWrapperRef, syncColumnHeaderWidths]);
     useResizeObserver(theadRef, syncColumnHeaderWidths);
     var scrollToTop = function () {
         if (!isMobile && theadRef.current && secondaryTheadRef.current && tableWrapperRef.current) {

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

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/table/use-sticky-header.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 { useLayoutEffect, RefObject, useCallback } from 'react';\nimport { useResizeObserver } from '../internal/hooks/container-queries/use-resize-observer';\nimport stickyScrolling, { calculateScrollingOffset, scrollUpBy } from './sticky-scrolling';\nimport { useMobile } from '../internal/hooks/use-mobile';\n\nfunction syncSizes(from: HTMLElement, to: HTMLElement) {\n  const fromCells = Array.prototype.slice.apply(from.children);\n  const toCells = Array.prototype.slice.apply(to.children);\n  for (let i = 0; i < fromCells.length; i++) {\n    let width = fromCells[i].style.width;\n    // use auto if it is set by resizable columns or real size otherwise\n    if (width !== 'auto') {\n      width = `${fromCells[i].offsetWidth}px`;\n    }\n    toCells[i].style.width = width;\n  }\n}\n\nexport const useStickyHeader = (\n  tableRef: RefObject<HTMLElement>,\n  theadRef: RefObject<HTMLElement>,\n  secondaryTheadRef: RefObject<HTMLElement>,\n  secondaryTableRef: RefObject<HTMLElement>,\n  tableWrapperRef: RefObject<HTMLElement>\n) => {\n  const isMobile = useMobile();\n  // Sync the sizes of the column header copies in the sticky header with the originals\n  const syncColumnHeaderWidths = useCallback(() => {\n    if (\n      tableRef.current &&\n      theadRef.current &&\n      secondaryTheadRef.current &&\n      secondaryTableRef.current &&\n      tableWrapperRef.current\n    ) {\n      syncSizes(theadRef.current, secondaryTheadRef.current);\n\n      // Using the tableRef offsetWidth instead of the theadRef because in VR\n      // the tableRef adds extra padding to the table and by default the theadRef will have a width\n      // without the padding and will make the sticky header width incorrect.\n      secondaryTableRef.current.style.width = `${tableRef.current.offsetWidth}px`;\n\n      tableWrapperRef.current.style.marginTop = `-${theadRef.current.offsetHeight}px`;\n    }\n  }, [theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, tableRef]);\n  useLayoutEffect(() => {\n    syncColumnHeaderWidths();\n    // Content is not going to be layed out until the next frame in angular,\n    // so we need to sync the column headers again.\n    setTimeout(() => syncColumnHeaderWidths(), 0);\n    const secondaryTable = secondaryTableRef.current;\n    const primaryTable = tableWrapperRef.current;\n    return () => {\n      if (secondaryTable) {\n        secondaryTable.style.width = '';\n      }\n      if (primaryTable) {\n        primaryTable.style.marginTop = '';\n      }\n    };\n  });\n  useResizeObserver(theadRef, syncColumnHeaderWidths);\n  const scrollToTop = () => {\n    if (!isMobile && theadRef.current && secondaryTheadRef.current && tableWrapperRef.current) {\n      const scrollDist = calculateScrollingOffset(theadRef.current, secondaryTheadRef.current);\n      if (scrollDist > 0) {\n        scrollUpBy(scrollDist, tableWrapperRef.current);\n      }\n    }\n  };\n  const { scrollToItem } = stickyScrolling(tableWrapperRef, secondaryTheadRef);\n  const scrollToRow = (itemNode: HTMLElement | null) => {\n    if (!isMobile) {\n      scrollToItem(itemNode);\n    }\n  };\n  return { scrollToRow, scrollToTop };\n};\n"]}
+{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/table/use-sticky-header.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAa,WAAW,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,eAAe,EAAE,EAAE,wBAAwB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,SAAS,SAAS,CAAC,IAAiB,EAAE,EAAe;IACnD,IAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC7D,IAAM,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IACzD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,IAAI,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;QACrC,oEAAoE;QACpE,IAAI,KAAK,KAAK,MAAM,EAAE;YACpB,KAAK,GAAG,UAAG,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,OAAI,CAAC;SACzC;QACD,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;KAChC;AACH,CAAC;AAED,MAAM,CAAC,IAAM,eAAe,GAAG,UAC7B,QAAgC,EAChC,QAAgC,EAChC,iBAAyC,EACzC,iBAAyC,EACzC,eAAuC;IAEvC,IAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,qFAAqF;IACrF,IAAM,sBAAsB,GAAG,WAAW,CAAC;QACzC,IACE,QAAQ,CAAC,OAAO;YAChB,QAAQ,CAAC,OAAO;YAChB,iBAAiB,CAAC,OAAO;YACzB,iBAAiB,CAAC,OAAO;YACzB,eAAe,CAAC,OAAO,EACvB;YACA,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;YAEvD,uEAAuE;YACvE,6FAA6F;YAC7F,uEAAuE;YACvE,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,UAAG,QAAQ,CAAC,OAAO,CAAC,WAAW,OAAI,CAAC;YAE5E,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,WAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,OAAI,CAAC;SACjF;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC;IAChF,eAAe,CAAC;QACd,sBAAsB,EAAE,CAAC;QACzB,IAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,CAAC;QACjD,IAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC;QAC7C,OAAO;YACL,IAAI,cAAc,EAAE;gBAClB,cAAc,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;aACjC;YACD,IAAI,YAAY,EAAE;gBAChB,YAAY,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;aACnC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,EAAE,eAAe,EAAE,sBAAsB,CAAC,CAAC,CAAC;IACjE,iBAAiB,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC;IACpD,IAAM,WAAW,GAAG;QAClB,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,EAAE;YACzF,IAAM,UAAU,GAAG,wBAAwB,CAAC,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;YACzF,IAAI,UAAU,GAAG,CAAC,EAAE;gBAClB,UAAU,CAAC,UAAU,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;aACjD;SACF;IACH,CAAC,CAAC;IACM,IAAA,YAAY,GAAK,eAAe,CAAC,eAAe,EAAE,iBAAiB,CAAC,aAAxD,CAAyD;IAC7E,IAAM,WAAW,GAAG,UAAC,QAA4B;QAC/C,IAAI,CAAC,QAAQ,EAAE;YACb,YAAY,CAAC,QAAQ,CAAC,CAAC;SACxB;IACH,CAAC,CAAC;IACF,OAAO,EAAE,WAAW,aAAA,EAAE,WAAW,aAAA,EAAE,CAAC;AACtC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useLayoutEffect, RefObject, useCallback } from 'react';\nimport { useResizeObserver } from '../internal/hooks/container-queries/use-resize-observer';\nimport stickyScrolling, { calculateScrollingOffset, scrollUpBy } from './sticky-scrolling';\nimport { useMobile } from '../internal/hooks/use-mobile';\n\nfunction syncSizes(from: HTMLElement, to: HTMLElement) {\n  const fromCells = Array.prototype.slice.apply(from.children);\n  const toCells = Array.prototype.slice.apply(to.children);\n  for (let i = 0; i < fromCells.length; i++) {\n    let width = fromCells[i].style.width;\n    // use auto if it is set by resizable columns or real size otherwise\n    if (width !== 'auto') {\n      width = `${fromCells[i].offsetWidth}px`;\n    }\n    toCells[i].style.width = width;\n  }\n}\n\nexport const useStickyHeader = (\n  tableRef: RefObject<HTMLElement>,\n  theadRef: RefObject<HTMLElement>,\n  secondaryTheadRef: RefObject<HTMLElement>,\n  secondaryTableRef: RefObject<HTMLElement>,\n  tableWrapperRef: RefObject<HTMLElement>\n) => {\n  const isMobile = useMobile();\n  // Sync the sizes of the column header copies in the sticky header with the originals\n  const syncColumnHeaderWidths = useCallback(() => {\n    if (\n      tableRef.current &&\n      theadRef.current &&\n      secondaryTheadRef.current &&\n      secondaryTableRef.current &&\n      tableWrapperRef.current\n    ) {\n      syncSizes(theadRef.current, secondaryTheadRef.current);\n\n      // Using the tableRef offsetWidth instead of the theadRef because in VR\n      // the tableRef adds extra padding to the table and by default the theadRef will have a width\n      // without the padding and will make the sticky header width incorrect.\n      secondaryTableRef.current.style.width = `${tableRef.current.offsetWidth}px`;\n\n      tableWrapperRef.current.style.marginTop = `-${theadRef.current.offsetHeight}px`;\n    }\n  }, [theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, tableRef]);\n  useLayoutEffect(() => {\n    syncColumnHeaderWidths();\n    const secondaryTable = secondaryTableRef.current;\n    const primaryTable = tableWrapperRef.current;\n    return () => {\n      if (secondaryTable) {\n        secondaryTable.style.width = '';\n      }\n      if (primaryTable) {\n        primaryTable.style.marginTop = '';\n      }\n    };\n  }, [secondaryTableRef, tableWrapperRef, syncColumnHeaderWidths]);\n  useResizeObserver(theadRef, syncColumnHeaderWidths);\n  const scrollToTop = () => {\n    if (!isMobile && theadRef.current && secondaryTheadRef.current && tableWrapperRef.current) {\n      const scrollDist = calculateScrollingOffset(theadRef.current, secondaryTheadRef.current);\n      if (scrollDist > 0) {\n        scrollUpBy(scrollDist, tableWrapperRef.current);\n      }\n    }\n  };\n  const { scrollToItem } = stickyScrolling(tableWrapperRef, secondaryTheadRef);\n  const scrollToRow = (itemNode: HTMLElement | null) => {\n    if (!isMobile) {\n      scrollToItem(itemNode);\n    }\n  };\n  return { scrollToRow, scrollToTop };\n};\n"]}