@pega/lists-react 8.0.0-build.27.14

package/lib/Core/Components/Virtualise/index.js

@@ -0,0 +1,313 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useEffect, useRef, useCallback, useImperativeHandle, useMemo, useLayoutEffect, useState } from 'react';
+import Styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Progress } from '@pega/cosmos-react-core';
+import { isEmpty } from 'pega-repeating-structures-core';
+import EmptyContainer from '../DefaultComponents/EmptyContainer';
+import useTranslate from '../../Hooks/useTranslate';
+import getPaginationInfo from './Pagination';
+import useScroll from './UseScroll';
+import { getCurrentEstimation, isPaginationRequestCompleted, updateRowContainerTop, setAttributesOnItems, isViewNotFilled, getRecordCountForLayoutPaint, getPContainerClientWidth, getValueWithUnit, getMaxHeight } from './utility';
+import useResizeObserver from './UseResizeObserver';
+function getBContainerMinHeight(props) {
+    return props.$style.renderFooter ? `calc(100% - ${2 * props.$style.itemHeight + 1}px) ` : '0';
+}
+const StyledPContainer = Styled.div `
+          position: relative;
+          overflow: auto;
+          max-height: ${props => props.$style.maxHeight};
+          width: ${props => props.$style.width};
+          height: ${props => props.$style.height};
+          min-height: ${props => props.$style.minHeight};
+
+          /**
+           * When height and maxHeight is auto, virtualization is not going to happen and the scroll jump on row deletion scenario is not going to happen.
+           * In such cases, using relative position as sticky was used to fix scroll jump in firefox during virtualization.
+           */
+          .bContainer {
+            position: ${props => props.$style.maxHeight?.startsWith('auto') && props.$style.height?.startsWith('auto')
+    ? 'relative'
+    : 'sticky'};
+            width: 0;
+            min-height: ${props => getBContainerMinHeight(props)};
+          }
+`;
+const StyledLoader = Styled.div `
+        display: flex;
+        justify-content: center;
+        padding: 0.5rem;
+        position: absolute;
+        width: var(--container-width);
+        left: ${props => `var(${props.$style.left})`};
+        top: ${props => `var(${props.$style.top})`};
+`;
+const Virtualize = forwardRef(({ id, viewHeight, viewWidth, totalRecordCount, itemHeight, callback, rowContainerClass, children, renderHeader, renderFooter, state, bufferMultiplier, basicMode, numberOfRows, viewMaxHeight, showLoadingIndicator }, inputRef) => {
+    const [rContainerDimensionUpdate, setRContainerDimensionUpdate] = useState();
+    const [isFetching, setIsFetching] = useState(false);
+    const [loadingIndicatorInfo, setLoadingIndicatorInfo] = useState({});
+    const [translate] = useTranslate();
+    // Create ref to store virtualize related data.
+    const vi = useRef({
+        itemHeight,
+        bufferMultiplier,
+        pInfo: {}
+    }).current;
+    const getRowContainer = useCallback(() => vi.rContainer, [vi.rContainer]);
+    const getPContainer = useCallback(() => vi.pContainer, [vi.pContainer]);
+    const getBContainer = useCallback(() => vi.bContainer, [vi.bContainer]);
+    // API used when user want to scroll to top programmatically.
+    // Though component auto scroll to top if no element is in view.
+    // But calling this API upfront might save one extra call to Fetch API.
+    const scrollToTop = useCallback(cb => {
+        if (!state)
+            return;
+        getPContainer().scrollTop = 0;
+        vi.pInfo = getPaginationInfo(getPContainer(), getRecordCountForLayoutPaint(totalRecordCount), vi, false, true);
+        setIsFetching(true);
+        cb({ ...vi.pInfo.view, id }, { takeLatestAction: true });
+    }, [id, vi, state, getPContainer]);
+    // expose APIs and properties here to help client to communicate.
+    useImperativeHandle(inputRef, () => ({
+        getParentContainer: getPContainer,
+        scrollToTop,
+        vi,
+        id
+    }));
+    const { width, height } = useMemo(() => ({
+        width: getValueWithUnit(viewWidth, basicMode, numberOfRows),
+        height: getValueWithUnit(viewHeight, basicMode, numberOfRows)
+    }), [viewWidth, viewHeight, basicMode, numberOfRows]);
+    const maxHeight = useMemo(() => getMaxHeight(viewMaxHeight, basicMode), [basicMode, viewMaxHeight]);
+    const minHeight = useMemo(() => {
+        if (basicMode && totalRecordCount === 0) {
+            return '100px';
+        }
+        return 'auto';
+    }, [basicMode, totalRecordCount]);
+    // Calculate the pagination indexes and notify callback.
+    // resetIsFetchingWhenNoNewIndexes - flag specific for isViewNotFilled
+    // If view is not filled, we want to call this but restting isFetch to false
+    // goes to this methid when callback is note fired.
+    const getPagination = useCallback((isRefresh = false, resetIsFetchingWhenNoNewIndexes = false) => {
+        if (resetIsFetchingWhenNoNewIndexes) {
+            setIsFetching(false);
+            setLoadingIndicatorInfo({});
+        }
+        const pInfo = getPaginationInfo(getPContainer(), getRecordCountForLayoutPaint(totalRecordCount), vi, isRefresh);
+        const { startIndex, endIndex } = pInfo.view;
+        // if new indexes are subset of existing state indexes, no need to update the consumer.
+        if (!state || !(startIndex >= state.startIndex && endIndex <= state.endIndex)) {
+            vi.pInfo = pInfo;
+            setIsFetching(true);
+            if (state) {
+                const { startIndex: oldStartIndex, endIndex: oldEndIndex } = state;
+                if (startIndex < oldStartIndex) {
+                    setLoadingIndicatorInfo(info => {
+                        return { ...info, isScrollingUp: true };
+                    });
+                }
+                if (endIndex > oldEndIndex) {
+                    setLoadingIndicatorInfo(info => {
+                        return { ...info, isScrollingDown: true };
+                    });
+                }
+            }
+            callback({ ...vi.pInfo.view, id }, { takeLatestAction: true });
+        }
+    }, [vi, totalRecordCount, state, callback, id, getPContainer]);
+    // update average stats for next calculation.
+    const updateAverageInVirtualizeInstance = useCallback(currentEstimation => {
+        const { itemCount, rowContainerHeight, averageNumberOfItemsInARow, averageRowHeight } = currentEstimation;
+        Object.assign(vi, {
+            itemCount: (itemCount + vi.itemCount || itemCount) / 2,
+            rowContainerHeight: (rowContainerHeight + vi.rowContainerHeight || rowContainerHeight) / 2,
+            averageNumberOfItemsInARow: (averageNumberOfItemsInARow + vi.averageNumberOfItemsInARow ||
+                averageNumberOfItemsInARow) / 2,
+            averageRowHeight: (averageRowHeight + vi.averageRowHeight || averageRowHeight) / 2
+        });
+    }, [vi]);
+    const getBufferHeight = useCallback(currentEstimation => {
+        const { itemCount, rowContainerHeight } = currentEstimation;
+        let h = 0;
+        if (itemCount > 0)
+            h = (getRecordCountForLayoutPaint(totalRecordCount) / itemCount) * rowContainerHeight;
+        return h;
+    }, [totalRecordCount]);
+    const getScrollTop = useCallback(currentEstimation => {
+        const { itemCount, rowContainerHeight } = currentEstimation;
+        let scrollTop = 0;
+        if (itemCount > 0) {
+            const scrollNodeTopChange = 
+            // eslint-disable-next-line no-unsafe-optional-chaining
+            vi.pInfo?.bufferNewCords?.top - vi.pInfo?.bufferOldCords?.top || 0;
+            scrollTop = (vi.pInfo.topRowIndex / itemCount) * rowContainerHeight - scrollNodeTopChange;
+        }
+        return scrollTop;
+    }, [vi]);
+    const onRowContainerDimensionChange = useCallback(() => {
+        const { height: rowContainerHeight, width: rowContainerWidth } = getRowContainer()?.getBoundingClientRect() ?? {};
+        // trigger virtualizer operations only when row container has some height and width
+        if (!isFetching && rowContainerHeight && rowContainerWidth)
+            setRContainerDimensionUpdate({});
+    }, [isFetching]);
+    // observe on row container to adjust the buffer container height.
+    useResizeObserver(getRowContainer, onRowContainerDimensionChange);
+    const [updateScrollTop] = useScroll(getPagination, getPContainer, vi, totalRecordCount, renderHeader, isFetching, viewHeight);
+    useLayoutEffect(() => {
+        const rContainer = getRowContainer();
+        if (state && state.startIndex >= 0 && vi && rContainer) {
+            setAttributesOnItems(state, rContainer);
+        }
+    });
+    // Get estimate and update buffer height
+    useLayoutEffect(() => {
+        if (state && !isEmpty(totalRecordCount)) {
+            vi.currentEstimation = getCurrentEstimation(getRowContainer());
+            updateAverageInVirtualizeInstance(vi.currentEstimation);
+            const h = Math.floor(getBufferHeight(vi.currentEstimation));
+            const previousHeight = getBContainer().offsetHeight;
+            getBContainer().style.height = `${h}px`;
+            vi.bContainerHeight = h;
+            // if there was no previous height, then keep the scrolltop to 0 by default
+            if (h !== previousHeight && previousHeight) {
+                const pContainer = getPContainer();
+                const scrollTop = getScrollTop(vi.currentEstimation);
+                pContainer.scrollTop = scrollTop;
+            }
+        }
+    }, [
+        rContainerDimensionUpdate,
+        getBContainer,
+        getBufferHeight,
+        getRowContainer,
+        state,
+        totalRecordCount,
+        updateAverageInVirtualizeInstance,
+        vi,
+        getPContainer,
+        getScrollTop
+    ]);
+    // update parent scroll top and row container top.
+    useLayoutEffect(() => {
+        if (state && !isEmpty(totalRecordCount)) {
+            const pContainer = getPContainer();
+            // Setting scrollTop from pContainer.scrollTop as getScrollTop can return value with higher decimal accuracy.
+            // but scrollTop attribute from HTML element will round it automatically.
+            updateScrollTop(pContainer.scrollTop);
+            updateRowContainerTop(vi, getRecordCountForLayoutPaint(totalRecordCount), state, pContainer, pContainer.scrollTop);
+            const topLoaderHeight = 80;
+            let top = getRowContainer().style.top;
+            if (!top) {
+                top = 0;
+            }
+            getBContainer().style.setProperty('--above-loader-top', `${parseInt(top, 10) - topLoaderHeight}px`);
+            getBContainer().style.setProperty('--below-loader-top', `${parseInt(top, 10) + getRowContainer().offsetHeight}px`);
+        }
+    }, [
+        getPContainer,
+        getScrollTop,
+        state,
+        updateScrollTop,
+        vi,
+        rContainerDimensionUpdate,
+        totalRecordCount,
+        getRowContainer,
+        getBContainer
+    ]);
+    // setting pContainer's width whenever pContainer dimension updates,
+    // because bContainer has 0 width and row-container's width doesn't changes in sync with pContainer
+    const onPContainerDimensionUpdate = useCallback(() => {
+        getPContainer()?.style.setProperty('--container-width', `${getPContainerClientWidth(getPContainer())}px`);
+    }, [getPContainer]);
+    // observe on pContainer to adjust the width of row container.
+    useResizeObserver(getPContainer, onPContainerDimensionUpdate);
+    // On mount that means state is not initialized yet, trigger pagination.
+    // or whenever count changes or width /height of view port changes, if view is not filled with data, get indexes again.
+    useEffect(() => {
+        if (state && isPaginationRequestCompleted(vi, state) && !isEmpty(totalRecordCount)) {
+            if (isViewNotFilled(getRecordCountForLayoutPaint(totalRecordCount), vi, getPContainer(), renderHeader))
+                getPagination(false, true);
+            else {
+                setIsFetching(false);
+                setLoadingIndicatorInfo({});
+            }
+        }
+        else if (!state || !Object.keys(vi.pInfo).length)
+            getPagination(true);
+    }, [
+        rContainerDimensionUpdate,
+        state,
+        vi,
+        totalRecordCount,
+        viewHeight,
+        viewWidth,
+        renderHeader,
+        getPagination,
+        getPContainer
+    ]);
+    useEffect(() => {
+        if (!isFetching)
+            return;
+        getBContainer().style.setProperty('--loader-left', `${getPContainer().scrollLeft}px`);
+    }, [isFetching, getPContainer()?.scrollLeft]);
+    return (_jsxs(StyledPContainer, { "$style": {
+            maxHeight,
+            minHeight,
+            renderFooter,
+            itemHeight,
+            height,
+            width
+        }, "data-total-records": totalRecordCount, className: 'pContainer', ref: c => {
+            vi.pContainer = c;
+        }, children: [renderHeader && renderHeader(), _jsxs("div", { className: 'bContainer', ref: c => {
+                    vi.bContainer = c;
+                }, children: [showLoadingIndicator && isFetching && loadingIndicatorInfo.isScrollingUp && (_jsx(StyledLoader, { "$style": {
+                            top: '--above-loader-top',
+                            left: '--loader-left'
+                        }, children: _jsx(Progress, { className: 'above-loader', placement: 'block', tabIndex: 0, "aria-label": translate('Loading more results') }) })), _jsx("div", { className: `${rowContainerClass} row-container`, ref: c => {
+                            vi.rContainer = c;
+                        }, style: { width: 'var(--container-width)' }, role: 'rowgroup', children: children }), showLoadingIndicator && isFetching && loadingIndicatorInfo.isScrollingDown && (_jsx(StyledLoader, { "$style": {
+                            top: '--below-loader-top',
+                            left: '--loader-left'
+                        }, children: _jsx(Progress, { className: 'below-loader', placement: 'block', tabIndex: 0, "aria-label": translate('Loading more results') }) }))] }), totalRecordCount === 0 ? _jsx(EmptyContainer, {}) : null, renderFooter && renderFooter()] }));
+});
+Virtualize.propTypes = {
+    id: PropTypes.string.isRequired,
+    viewHeight: PropTypes.number,
+    viewWidth: PropTypes.number,
+    totalRecordCount: PropTypes.number,
+    itemHeight: PropTypes.number,
+    callback: PropTypes.func,
+    rowContainerClass: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+    renderHeader: PropTypes.func,
+    renderFooter: PropTypes.func,
+    state: PropTypes.shape({
+        startIndex: PropTypes.number,
+        endIndex: PropTypes.number
+    }),
+    bufferMultiplier: PropTypes.number,
+    basicMode: PropTypes.bool.isRequired,
+    numberOfRows: PropTypes.number,
+    viewMaxHeight: PropTypes.string,
+    showLoadingIndicator: PropTypes.bool
+};
+Virtualize.defaultProps = {
+    bufferMultiplier: 1,
+    callback: () => { },
+    rowContainerClass: '',
+    viewHeight: 400,
+    viewWidth: 0,
+    itemHeight: 40,
+    renderHeader: null,
+    renderFooter: null,
+    state: undefined,
+    totalRecordCount: undefined,
+    numberOfRows: undefined,
+    viewMaxHeight: undefined,
+    showLoadingIndicator: false
+};
+Virtualize.displayName = 'Virtualize';
+export default memo(Virtualize);
+//# sourceMappingURL=index.js.map

package/lib/Core/Components/Virtualise/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Components/Virtualise/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  memo,\n  useEffect,\n  useRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useLayoutEffect,\n  useState\n} from 'react';\nimport Styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport { Progress } from '@pega/cosmos-react-core';\nimport { isEmpty } from 'pega-repeating-structures-core';\n\nimport EmptyContainer from '../DefaultComponents/EmptyContainer';\nimport useTranslate from '../../Hooks/useTranslate';\n\nimport getPaginationInfo from './Pagination';\nimport useScroll from './UseScroll';\nimport {\n  getCurrentEstimation,\n  isPaginationRequestCompleted,\n  updateRowContainerTop,\n  setAttributesOnItems,\n  isViewNotFilled,\n  getRecordCountForLayoutPaint,\n  getPContainerClientWidth,\n  getValueWithUnit,\n  getMaxHeight\n} from './utility';\nimport useResizeObserver from './UseResizeObserver';\n\nfunction getBContainerMinHeight(props) {\n  return props.$style.renderFooter ? `calc(100% - ${2 * props.$style.itemHeight + 1}px) ` : '0';\n}\n\nconst StyledPContainer = Styled.div`\n          position: relative;\n          overflow: auto;\n          max-height: ${props => props.$style.maxHeight};\n          width: ${props => props.$style.width};\n          height: ${props => props.$style.height};\n          min-height: ${props => props.$style.minHeight};\n\n          /**\n           * When height and maxHeight is auto, virtualization is not going to happen and the scroll jump on row deletion scenario is not going to happen.\n           * In such cases, using relative position as sticky was used to fix scroll jump in firefox during virtualization.\n           */\n          .bContainer {\n            position: ${props =>\n              props.$style.maxHeight?.startsWith('auto') && props.$style.height?.startsWith('auto')\n                ? 'relative'\n                : 'sticky'};\n            width: 0;\n            min-height: ${props => getBContainerMinHeight(props)};\n          }\n`;\n\nconst StyledLoader = Styled.div`\n        display: flex;\n        justify-content: center;\n        padding: 0.5rem;\n        position: absolute;\n        width: var(--container-width);\n        left: ${props => `var(${props.$style.left})`};\n        top: ${props => `var(${props.$style.top})`};\n`;\n\nconst Virtualize = forwardRef(\n  (\n    {\n      id,\n      viewHeight,\n      viewWidth,\n      totalRecordCount,\n      itemHeight,\n      callback,\n      rowContainerClass,\n      children,\n      renderHeader,\n      renderFooter,\n      state,\n      bufferMultiplier,\n      basicMode,\n      numberOfRows,\n      viewMaxHeight,\n      showLoadingIndicator\n    },\n    inputRef\n  ) => {\n    const [rContainerDimensionUpdate, setRContainerDimensionUpdate] = useState();\n    const [isFetching, setIsFetching] = useState(false);\n    const [loadingIndicatorInfo, setLoadingIndicatorInfo] = useState({});\n    const [translate] = useTranslate();\n    // Create ref to store virtualize related data.\n    const vi = useRef({\n      itemHeight,\n      bufferMultiplier,\n      pInfo: {}\n    }).current;\n\n    const getRowContainer = useCallback(() => vi.rContainer, [vi.rContainer]);\n    const getPContainer = useCallback(() => vi.pContainer, [vi.pContainer]);\n    const getBContainer = useCallback(() => vi.bContainer, [vi.bContainer]);\n\n    // API used when user want to scroll to top programmatically.\n    // Though component auto scroll to top if no element is in view.\n    // But calling this API upfront might save one extra call to Fetch API.\n    const scrollToTop = useCallback(\n      cb => {\n        if (!state) return;\n        getPContainer().scrollTop = 0;\n        vi.pInfo = getPaginationInfo(\n          getPContainer(),\n          getRecordCountForLayoutPaint(totalRecordCount),\n          vi,\n          false,\n          true\n        );\n        setIsFetching(true);\n        cb({ ...vi.pInfo.view, id }, { takeLatestAction: true });\n      },\n      [id, vi, state, getPContainer]\n    );\n\n    // expose APIs and properties here to help client to communicate.\n    useImperativeHandle(inputRef, () => ({\n      getParentContainer: getPContainer,\n      scrollToTop,\n      vi,\n      id\n    }));\n\n    const { width, height } = useMemo(\n      () => ({\n        width: getValueWithUnit(viewWidth, basicMode, numberOfRows),\n        height: getValueWithUnit(viewHeight, basicMode, numberOfRows)\n      }),\n      [viewWidth, viewHeight, basicMode, numberOfRows]\n    );\n\n    const maxHeight = useMemo(\n      () => getMaxHeight(viewMaxHeight, basicMode),\n      [basicMode, viewMaxHeight]\n    );\n\n    const minHeight = useMemo(() => {\n      if (basicMode && totalRecordCount === 0) {\n        return '100px';\n      }\n      return 'auto';\n    }, [basicMode, totalRecordCount]);\n\n    // Calculate the pagination indexes and notify callback.\n    // resetIsFetchingWhenNoNewIndexes - flag specific for isViewNotFilled\n    // If view is not filled, we want to call this but restting isFetch to false\n    // goes to this methid when callback is note fired.\n    const getPagination = useCallback(\n      (isRefresh = false, resetIsFetchingWhenNoNewIndexes = false) => {\n        if (resetIsFetchingWhenNoNewIndexes) {\n          setIsFetching(false);\n          setLoadingIndicatorInfo({});\n        }\n        const pInfo = getPaginationInfo(\n          getPContainer(),\n          getRecordCountForLayoutPaint(totalRecordCount),\n          vi,\n          isRefresh\n        );\n        const { startIndex, endIndex } = pInfo.view;\n        // if new indexes are subset of existing state indexes, no need to update the consumer.\n        if (!state || !(startIndex >= state.startIndex && endIndex <= state.endIndex)) {\n          vi.pInfo = pInfo;\n          setIsFetching(true);\n          if (state) {\n            const { startIndex: oldStartIndex, endIndex: oldEndIndex } = state;\n            if (startIndex < oldStartIndex) {\n              setLoadingIndicatorInfo(info => {\n                return { ...info, isScrollingUp: true };\n              });\n            }\n            if (endIndex > oldEndIndex) {\n              setLoadingIndicatorInfo(info => {\n                return { ...info, isScrollingDown: true };\n              });\n            }\n          }\n          callback({ ...vi.pInfo.view, id }, { takeLatestAction: true });\n        }\n      },\n      [vi, totalRecordCount, state, callback, id, getPContainer]\n    );\n\n    // update average stats for next calculation.\n    const updateAverageInVirtualizeInstance = useCallback(\n      currentEstimation => {\n        const { itemCount, rowContainerHeight, averageNumberOfItemsInARow, averageRowHeight } =\n          currentEstimation;\n        Object.assign(vi, {\n          itemCount: (itemCount + vi.itemCount || itemCount) / 2,\n          rowContainerHeight:\n            (rowContainerHeight + vi.rowContainerHeight || rowContainerHeight) / 2,\n          averageNumberOfItemsInARow:\n            (averageNumberOfItemsInARow + vi.averageNumberOfItemsInARow ||\n              averageNumberOfItemsInARow) / 2,\n          averageRowHeight: (averageRowHeight + vi.averageRowHeight || averageRowHeight) / 2\n        });\n      },\n      [vi]\n    );\n\n    const getBufferHeight = useCallback(\n      currentEstimation => {\n        const { itemCount, rowContainerHeight } = currentEstimation;\n        let h = 0;\n        if (itemCount > 0)\n          h = (getRecordCountForLayoutPaint(totalRecordCount) / itemCount) * rowContainerHeight;\n        return h;\n      },\n      [totalRecordCount]\n    );\n\n    const getScrollTop = useCallback(\n      currentEstimation => {\n        const { itemCount, rowContainerHeight } = currentEstimation;\n        let scrollTop = 0;\n        if (itemCount > 0) {\n          const scrollNodeTopChange =\n            // eslint-disable-next-line no-unsafe-optional-chaining\n            vi.pInfo?.bufferNewCords?.top - vi.pInfo?.bufferOldCords?.top || 0;\n          scrollTop = (vi.pInfo.topRowIndex / itemCount) * rowContainerHeight - scrollNodeTopChange;\n        }\n        return scrollTop;\n      },\n      [vi]\n    );\n\n    const onRowContainerDimensionChange = useCallback(() => {\n      const { height: rowContainerHeight, width: rowContainerWidth } =\n        getRowContainer()?.getBoundingClientRect() ?? {};\n      // trigger virtualizer operations only when row container has some height and width\n      if (!isFetching && rowContainerHeight && rowContainerWidth) setRContainerDimensionUpdate({});\n    }, [isFetching]);\n\n    // observe on row container to adjust the buffer container height.\n    useResizeObserver(getRowContainer, onRowContainerDimensionChange);\n\n    const [updateScrollTop] = useScroll(\n      getPagination,\n      getPContainer,\n      vi,\n      totalRecordCount,\n      renderHeader,\n      isFetching,\n      viewHeight\n    );\n\n    useLayoutEffect(() => {\n      const rContainer = getRowContainer();\n      if (state && state.startIndex >= 0 && vi && rContainer) {\n        setAttributesOnItems(state, rContainer);\n      }\n    });\n\n    // Get estimate and update buffer height\n    useLayoutEffect(() => {\n      if (state && !isEmpty(totalRecordCount)) {\n        vi.currentEstimation = getCurrentEstimation(getRowContainer());\n        updateAverageInVirtualizeInstance(vi.currentEstimation);\n        const h = Math.floor(getBufferHeight(vi.currentEstimation));\n        const previousHeight = getBContainer().offsetHeight;\n\n        getBContainer().style.height = `${h}px`;\n        vi.bContainerHeight = h;\n\n        // if there was no previous height, then keep the scrolltop to 0 by default\n        if (h !== previousHeight && previousHeight) {\n          const pContainer = getPContainer();\n          const scrollTop = getScrollTop(vi.currentEstimation);\n          pContainer.scrollTop = scrollTop;\n        }\n      }\n    }, [\n      rContainerDimensionUpdate,\n      getBContainer,\n      getBufferHeight,\n      getRowContainer,\n      state,\n      totalRecordCount,\n      updateAverageInVirtualizeInstance,\n      vi,\n      getPContainer,\n      getScrollTop\n    ]);\n\n    // update parent scroll top and row container top.\n    useLayoutEffect(() => {\n      if (state && !isEmpty(totalRecordCount)) {\n        const pContainer = getPContainer();\n\n        // Setting scrollTop from pContainer.scrollTop as getScrollTop can return value with higher decimal accuracy.\n        // but scrollTop attribute from HTML element will round it automatically.\n        updateScrollTop(pContainer.scrollTop);\n        updateRowContainerTop(\n          vi,\n          getRecordCountForLayoutPaint(totalRecordCount),\n          state,\n          pContainer,\n          pContainer.scrollTop\n        );\n\n        const topLoaderHeight = 80;\n        let top = getRowContainer().style.top;\n        if (!top) {\n          top = 0;\n        }\n        getBContainer().style.setProperty(\n          '--above-loader-top',\n          `${parseInt(top, 10) - topLoaderHeight}px`\n        );\n\n        getBContainer().style.setProperty(\n          '--below-loader-top',\n          `${parseInt(top, 10) + getRowContainer().offsetHeight}px`\n        );\n      }\n    }, [\n      getPContainer,\n      getScrollTop,\n      state,\n      updateScrollTop,\n      vi,\n      rContainerDimensionUpdate,\n      totalRecordCount,\n      getRowContainer,\n      getBContainer\n    ]);\n\n    // setting pContainer's width whenever pContainer dimension updates,\n    // because bContainer has 0 width and row-container's width doesn't changes in sync with pContainer\n    const onPContainerDimensionUpdate = useCallback(() => {\n      getPContainer()?.style.setProperty(\n        '--container-width',\n        `${getPContainerClientWidth(getPContainer())}px`\n      );\n    }, [getPContainer]);\n\n    // observe on pContainer to adjust the width of row container.\n    useResizeObserver(getPContainer, onPContainerDimensionUpdate);\n\n    // On mount that means state is not initialized yet, trigger pagination.\n    // or whenever count changes or width /height of view port changes, if view is not filled with data, get indexes again.\n    useEffect(() => {\n      if (state && isPaginationRequestCompleted(vi, state) && !isEmpty(totalRecordCount)) {\n        if (\n          isViewNotFilled(\n            getRecordCountForLayoutPaint(totalRecordCount),\n            vi,\n            getPContainer(),\n            renderHeader\n          )\n        )\n          getPagination(false, true);\n        else {\n          setIsFetching(false);\n          setLoadingIndicatorInfo({});\n        }\n      } else if (!state || !Object.keys(vi.pInfo).length) getPagination(true);\n    }, [\n      rContainerDimensionUpdate,\n      state,\n      vi,\n      totalRecordCount,\n      viewHeight,\n      viewWidth,\n      renderHeader,\n      getPagination,\n      getPContainer\n    ]);\n\n    useEffect(() => {\n      if (!isFetching) return;\n      getBContainer().style.setProperty('--loader-left', `${getPContainer().scrollLeft}px`);\n    }, [isFetching, getPContainer()?.scrollLeft]);\n\n    return (\n      <StyledPContainer\n        $style={{\n          maxHeight,\n          minHeight,\n          renderFooter,\n          itemHeight,\n          height,\n          width\n        }}\n        data-total-records={totalRecordCount}\n        className='pContainer'\n        ref={c => {\n          vi.pContainer = c;\n        }}\n      >\n        {renderHeader && renderHeader()}\n        <div\n          className='bContainer'\n          ref={c => {\n            vi.bContainer = c;\n          }}\n        >\n          {showLoadingIndicator && isFetching && loadingIndicatorInfo.isScrollingUp && (\n            <StyledLoader\n              $style={{\n                top: '--above-loader-top',\n                left: '--loader-left'\n              }}\n            >\n              <Progress\n                className='above-loader'\n                placement='block'\n                tabIndex={0}\n                aria-label={translate('Loading more results')}\n              />\n            </StyledLoader>\n          )}\n          <div\n            className={`${rowContainerClass} row-container`}\n            ref={c => {\n              vi.rContainer = c;\n            }}\n            style={{ width: 'var(--container-width)' }}\n            role='rowgroup'\n          >\n            {/** Do not add any other element in row-container apart from the rows as it will generate incorrect estimations */}\n            {children}\n          </div>\n          {showLoadingIndicator && isFetching && loadingIndicatorInfo.isScrollingDown && (\n            <StyledLoader\n              $style={{\n                top: '--below-loader-top',\n                left: '--loader-left'\n              }}\n            >\n              <Progress\n                className='below-loader'\n                placement='block'\n                tabIndex={0}\n                aria-label={translate('Loading more results')}\n              />\n            </StyledLoader>\n          )}\n        </div>\n        {totalRecordCount === 0 ? <EmptyContainer /> : null}\n        {renderFooter && renderFooter()}\n      </StyledPContainer>\n    );\n  }\n);\n\nVirtualize.propTypes = {\n  id: PropTypes.string.isRequired,\n  viewHeight: PropTypes.number,\n  viewWidth: PropTypes.number,\n  totalRecordCount: PropTypes.number,\n  itemHeight: PropTypes.number,\n  callback: PropTypes.func,\n  rowContainerClass: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,\n  renderHeader: PropTypes.func,\n  renderFooter: PropTypes.func,\n  state: PropTypes.shape({\n    startIndex: PropTypes.number,\n    endIndex: PropTypes.number\n  }),\n  bufferMultiplier: PropTypes.number,\n  basicMode: PropTypes.bool.isRequired,\n  numberOfRows: PropTypes.number,\n  viewMaxHeight: PropTypes.string,\n  showLoadingIndicator: PropTypes.bool\n};\n\nVirtualize.defaultProps = {\n  bufferMultiplier: 1,\n  callback: () => {},\n  rowContainerClass: '',\n  viewHeight: 400,\n  viewWidth: 0,\n  itemHeight: 40,\n  renderHeader: null,\n  renderFooter: null,\n  state: undefined,\n  totalRecordCount: undefined,\n  numberOfRows: undefined,\n  viewMaxHeight: undefined,\n  showLoadingIndicator: false\n};\n\nVirtualize.displayName = 'Virtualize';\n\nexport default memo(Virtualize);\n"]}

package/lib/Core/Components/Virtualise/utility.d.ts

@@ -0,0 +1,63 @@
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+export declare function getRecordCountForLayoutPaint(totalRecordCount: number): number;
+export declare function isPaginationRequestCompleted(vi: {
+    pInfo?: {
+        view?: {
+            startIndex: number;
+            endIndex: number;
+        };
+    };
+}, state: {
+    startIndex: number;
+    endIndex: number;
+}): boolean;
+export declare function isViewNotFilled(totalRecordCount: number, vi: {
+    rContainer: HTMLDivElement;
+}, pContainer: HTMLDivElement, renderHeader: boolean): boolean | 0;
+export declare function getCurrentEstimation(rContainer: HTMLDivElement, includeRowsOnly?: boolean): {
+    itemCount: number;
+    rowContainerHeight: number;
+    averageNumberOfItemsInARow: number;
+    averageRowHeight: number;
+};
+export declare function updateRowContainerTop(vi: {
+    rContainer: HTMLDivElement;
+    pInfo: {
+        view: {
+            startIndex: number;
+            endIndex: number;
+        };
+        currentEstimation: {
+            itemCount: number;
+            rowContainerHeight: number;
+            averageNumberOfItemsInARow: number;
+            averageRowHeight: number;
+        };
+        existingItemBoundingBox: {
+            y: number;
+        };
+        currentRowIndex: number;
+        bufferNewCords: {
+            top: number;
+        };
+        bufferOldCords: {
+            top: number;
+        };
+    };
+    currentEstimation: {
+        itemCount: number;
+        rowContainerHeight: number;
+        averageNumberOfItemsInARow: number;
+        averageRowHeight: number;
+    };
+}, totalRecordCount: number, state: {
+    [key: string]: any;
+}, pContainer: HTMLDivElement, scrollTop: number): void;
+export declare function setAttributesOnItems(state: {
+    startIndex: number;
+    endIndex: number;
+}, rContainer: HTMLElement): void;
+export declare function getPContainerClientWidth(pContainer: HTMLElement): number | undefined;
+export declare function getValueWithUnit(value: string | number | undefined, isBasicMode: RsCoreTypes.Meta['basicMode'], numberOfRows?: number): string;
+export declare function getMaxHeight(viewMaxHeight: string | undefined, isBasicMode: RsCoreTypes.Meta['basicMode']): string;
+//# sourceMappingURL=utility.d.ts.map

package/lib/Core/Components/Virtualise/utility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Virtualise/utility.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAOlE,wBAAgB,4BAA4B,CAAC,gBAAgB,EAAE,MAAM,UAEpE;AAID,wBAAgB,4BAA4B,CAC1C,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE;YAAE,UAAU,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAA;CAAE,EACnE,KAAK,EAAE;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,WAShD;AAED,wBAAgB,eAAe,CAC7B,gBAAgB,EAAE,MAAM,EACxB,EAAE,EAAE;IAAE,UAAU,EAAE,cAAc,CAAA;CAAE,EAClC,UAAU,EAAE,cAAc,EAC1B,YAAY,EAAE,OAAO,eAmBtB;AA4BD,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,cAAc,EAAE,eAAe,UAAQ;;;;;EAkCvF;AAgGD,wBAAgB,qBAAqB,CACnC,EAAE,EAAE;IACF,UAAU,EAAE,cAAc,CAAC;IAC3B,KAAK,EAAE;QACL,IAAI,EAAE;YAAE,UAAU,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAC;QAC/C,iBAAiB,EAAE;YACjB,SAAS,EAAE,MAAM,CAAC;YAClB,kBAAkB,EAAE,MAAM,CAAC;YAC3B,0BAA0B,EAAE,MAAM,CAAC;YACnC,gBAAgB,EAAE,MAAM,CAAC;SAC1B,CAAC;QACF,uBAAuB,EAAE;YAAE,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACvC,eAAe,EAAE,MAAM,CAAC;QACxB,cAAc,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;QAChC,cAAc,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;KACjC,CAAC;IACF,iBAAiB,EAAE;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,kBAAkB,EAAE,MAAM,CAAC;QAC3B,0BAA0B,EAAE,MAAM,CAAC;QACnC,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH,EACD,gBAAgB,EAAE,MAAM,EACxB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,UAAU,EAAE,cAAc,EAC1B,SAAS,EAAE,MAAM,QAuClB;AAGD,wBAAgB,oBAAoB,CAClC,KAAK,EAAE;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,EAC/C,UAAU,EAAE,WAAW,QAKxB;AAED,wBAAgB,wBAAwB,CAAC,UAAU,EAAE,WAAW,sBAU/D;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAClC,WAAW,EAAE,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,EAC1C,YAAY,CAAC,EAAE,MAAM,GACpB,MAAM,CAOR;AAED,wBAAgB,YAAY,CAC1B,aAAa,EAAE,MAAM,GAAG,SAAS,EACjC,WAAW,EAAE,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,UAS3C"}

package/lib/Core/Components/Virtualise/utility.js

@@ -0,0 +1,209 @@
+import { getScrollbarWidth } from 'pega-repeating-structures-core';
+import { StickyGroupHeader } from './Pagination';
+// TODO: in future, take this count in meta
+const MAX_SCROLLABLE_ROW_COUNT = 5000;
+export function getRecordCountForLayoutPaint(totalRecordCount) {
+    return totalRecordCount > MAX_SCROLLABLE_ROW_COUNT ? MAX_SCROLLABLE_ROW_COUNT : totalRecordCount;
+}
+// State should be communicated back from consumer to know
+// if pagination last request completed or not.
+export function isPaginationRequestCompleted(vi, state) {
+    // this is required when there is a pagination request which is raised just to update consumer
+    // about updated index though pagination is really not required.
+    return (state &&
+        state.startIndex === vi.pInfo?.view?.startIndex &&
+        state.endIndex === vi.pInfo?.view?.endIndex);
+}
+export function isViewNotFilled(totalRecordCount, vi, pContainer, renderHeader) {
+    const parentContainerPosition = pContainer.getBoundingClientRect();
+    // This is required to accommodate header height.
+    // TODO: Need to find a better solution to pull out header out of this.
+    const headerRowHeight = renderHeader && pContainer.childElementCount > 1
+        ? pContainer.childNodes[0].offsetHeight
+        : 0;
+    const scrollbarWidth = getScrollbarWidth();
+    return (totalRecordCount &&
+        vi.rContainer.childElementCount !== totalRecordCount &&
+        (Math.floor(vi.rContainer.getBoundingClientRect().bottom) <
+            Math.floor(parentContainerPosition.bottom - scrollbarWidth) ||
+            Math.floor(vi.rContainer.getBoundingClientRect().top) >
+                Math.floor(parentContainerPosition.top + headerRowHeight) ||
+            vi.rContainer.childElementCount === 0));
+}
+function getItemCountPerRow(rows) {
+    const itemsCountPerRow = {};
+    rows.forEach(item => {
+        const itemBoundary = item.getBoundingClientRect();
+        // isStickyGroupHeader flag helps in including the overlapped sticky-group-header for getting correct averages
+        const isStickyGroupHeader = item.classList.contains(StickyGroupHeader);
+        if (itemsCountPerRow[itemBoundary.top]) {
+            itemsCountPerRow[itemBoundary.top].count += 1;
+            if (itemsCountPerRow[itemBoundary.top].height < itemBoundary.height) {
+                itemsCountPerRow[itemBoundary.top].height = itemBoundary.height;
+            }
+        }
+        else {
+            itemsCountPerRow[itemBoundary.top] = {
+                count: 1,
+                height: itemBoundary.height,
+                isStickyGroupHeader
+            };
+        }
+    });
+    return itemsCountPerRow;
+}
+// Based on row container size, get estimated count,
+// average height and no of items in a row.
+export function getCurrentEstimation(rContainer, includeRowsOnly = false) {
+    const rContainerChildren = Array.from(rContainer.children || []);
+    const filteredRowsContainer = includeRowsOnly
+        ? rContainerChildren.filter(r => r.hasAttribute('data-key'))
+        : rContainerChildren;
+    const itemsCountPerRow = getItemCountPerRow(filteredRowsContainer);
+    const itemCount = filteredRowsContainer.length || 0;
+    // TODO FIXME: #virtualizer Remove dependency on sticky-group-header class and try to make the key of ItemsCountPerRow unique which will work for overlapping scenarios
+    // BUG-740809 handling the rowCount in case of overlapped sticky-group-header
+    // If we have sticky-group-headers, add overlapped sticky-group-headers to rowCount.
+    // So, that averageNumberOfItemsInARow will be 1 for grid. That's why adding the complete count.
+    const rowCount = Object.values(itemsCountPerRow).reduce((acc, o) => {
+        if (o.isStickyGroupHeader) {
+            return acc + o.count;
+        }
+        return acc + 1;
+    }, 0);
+    const averageNumberOfItemsInARow = rowCount > 0 ? itemCount / rowCount : 0;
+    const height = Object.values(itemsCountPerRow).reduce((acc, o) => {
+        if (o.isStickyGroupHeader) {
+            return acc + o.height * o.count;
+        }
+        return acc + o.height;
+    }, 0);
+    const averageRowHeight = rowCount > 0 ? height / rowCount : 0;
+    const rowContainerHeight = rContainer.offsetHeight || 0;
+    return { itemCount, rowContainerHeight, averageNumberOfItemsInARow, averageRowHeight };
+}
+// Calculate top which needs to set on row container when component rerender.
+// component can rerender many times though pagination is in progress.
+function calculateTop(vi, scrollTop) {
+    let top = 0;
+    if (vi.pInfo && vi.pInfo?.view?.startIndex !== 0) {
+        // slide row container for current view based on previous estimated value.
+        const estimatedNoOfItemsPushedUp = scrollTop * (vi.currentEstimation.itemCount / vi.currentEstimation.rowContainerHeight);
+        // estimated start view index of current view based on scroll top.
+        const estimatedStartIndexInView = estimatedNoOfItemsPushedUp + 1;
+        // estimated number of buffer records.
+        const noOfBufferRecords = estimatedStartIndexInView - (vi.pInfo?.view?.startIndex ?? 0);
+        const noOfBufferRecordsHeight = (noOfBufferRecords / vi.currentEstimation.averageNumberOfItemsInARow) *
+            vi.currentEstimation.averageRowHeight;
+        // calculated top of row container.
+        top = scrollTop - noOfBufferRecordsHeight;
+        if (top < 0)
+            top = 0;
+    }
+    return top;
+}
+function adjustTopRowContainerToAvoidDrift(vi, existingTop) {
+    // Adjust top if element was viewable when user stop scrolling and pagination trigger.
+    // existing item should be viewable are at time of calculation
+    // as we allow user to scroll even pagination request triggered.
+    let effectiveTop = existingTop;
+    const { existingItemBoundingBox, currentRowIndex } = vi.pInfo;
+    // As safari does elastic scroll, we need this check to avoid any space on top.
+    const safariIsFirstItem = currentRowIndex === 0;
+    if (existingItemBoundingBox && !safariIsFirstItem) {
+        const currentRowIndexItem = vi.rContainer.querySelector(`[data-index='${vi.pInfo.currentRowIndex}']`);
+        if (currentRowIndexItem) {
+            // scrollNodeTopChange - change in scroll while pagination is in progress.
+            const scrollNodeTopChange = vi.pInfo.bufferNewCords.top - vi.pInfo.bufferOldCords.top;
+            const newItemBoundingBox = currentRowIndexItem.getBoundingClientRect();
+            const top = newItemBoundingBox.y - existingItemBoundingBox.y - scrollNodeTopChange;
+            effectiveTop = existingTop - top;
+        }
+    }
+    // As of now, we are making top to zero if it goes in negative, which is not right way.
+    // -ve is possible value for it as scroll top is just approximation. Check when
+    // gallery view gives you 0 to index result after some scroll.
+    // scroll top is 0 as it is top row index based.
+    // TODO: can go negative as bottom to top paint strategy is pending.
+    // This check and expression is not required after that. This will be handled in next release.
+    // Gallery issue wil also be handled in that. As of for first attempt we have to either scroll more.
+    // or make buffer size more in that to avoid 0 to index number in next repaint.
+    if (effectiveTop < 0 && vi.pInfo.view.startIndex === 0)
+        effectiveTop = 0;
+    if (effectiveTop !== existingTop)
+        vi.rContainer.style.top = `${effectiveTop}px`;
+}
+export function updateRowContainerTop(vi, totalRecordCount, state, pContainer, scrollTop) {
+    // if you get last record , put row container to bottom always to Avoid
+    // any space left because of estimation otherwise calculate top.
+    // if next rerender you get less records,
+    if ((vi.pInfo?.view?.startIndex === 0 && vi.pInfo?.view?.endIndex < totalRecordCount) ||
+        // eslint-disable-next-line no-unsafe-optional-chaining
+        vi.pInfo?.view?.startIndex + 1 > totalRecordCount ||
+        // eslint-disable-next-line no-unsafe-optional-chaining
+        vi.pInfo?.view?.endIndex - vi.pInfo?.view?.startIndex >= totalRecordCount) {
+        // This is a case when you scroll to top or say after filter your items count reduce to such level
+        // it doesn't fit in current start and end index and put container top and fill view
+        // will consider if empty.
+        vi.rContainer.style.removeProperty('bottom');
+        vi.rContainer.style.top = '0px';
+        // Any action which makes indexes out of range to total record count,
+        // scroll to top as a default behavior.
+        if (vi.pInfo.view.startIndex + 1 > totalRecordCount)
+            pContainer.scrollTop = 0;
+        // commenting below line as it can cause white space on top sometime.
+        // Commenting this line might cause a small flicker only when you reach at top.
+        // We will solve this in 8.6 release.
+        // else if (vi.pInfo?.topRowIndex > 0) adjustTopRowContainerToAvoidDrift(vi, 0);
+    }
+    else if (
+    // eslint-disable-next-line no-unsafe-optional-chaining
+    vi.pInfo?.view?.endIndex + 1 >= totalRecordCount &&
+        // eslint-disable-next-line no-unsafe-optional-chaining
+        vi.pInfo?.view?.startIndex + 1 <= totalRecordCount) {
+        vi.rContainer.style.removeProperty('top');
+        vi.rContainer.style.bottom = '0px';
+    }
+    else {
+        vi.rContainer.style.removeProperty('bottom');
+        const top = calculateTop(vi, scrollTop);
+        vi.rContainer.style.top = `${top}px`;
+        adjustTopRowContainerToAvoidDrift(vi, top);
+    }
+}
+// index attrs required to estimate next set.
+export function setAttributesOnItems(state, rContainer) {
+    rContainer.childNodes.forEach((r, index) => {
+        r.setAttribute('data-index', `${state.startIndex + index}`);
+    });
+}
+export function getPContainerClientWidth(pContainer) {
+    if (!pContainer)
+        return;
+    const { width: pContainerWidth } = pContainer.getBoundingClientRect();
+    let pContainerClientWidth = Math.floor(pContainerWidth);
+    if (pContainer.offsetWidth > pContainer.clientWidth) {
+        pContainerClientWidth -= getScrollbarWidth();
+    }
+    return pContainerClientWidth;
+}
+export function getValueWithUnit(value, isBasicMode, numberOfRows) {
+    if (!value)
+        return '100%';
+    if (isBasicMode && !numberOfRows)
+        return 'auto';
+    if (!value.toString().includes('px') && !value.toString().includes('%')) {
+        return `${value}px`;
+    }
+    return `${value}`;
+}
+export function getMaxHeight(viewMaxHeight, isBasicMode) {
+    if (viewMaxHeight) {
+        return viewMaxHeight;
+    }
+    if (isBasicMode) {
+        return '550px';
+    }
+    return 'none';
+}
+//# sourceMappingURL=utility.js.map