@pnp/spfx-controls-react 3.26.0-beta.3386473 → 3.26.0-beta.3440811

package/lib-commonjs/controls/DetailsList/useDetailsListSelection.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDetailsListSelection = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var DetailsList_types_1 = require("./DetailsList.types");
+var toKeySet = function (keys) { return new Set(keys !== null && keys !== void 0 ? keys : []); };
+var useDetailsListSelection = function (_a) {
+    var items = _a.items, getKey = _a.getKey, setKey = _a.setKey, selectionMode = _a.selectionMode, selectedKeys = _a.selectedKeys, defaultSelectedKeys = _a.defaultSelectedKeys, disabledItemKeys = _a.disabledItemKeys, onSelectionChanged = _a.onSelectionChanged;
+    var lastSelectedIndexRef = React.useRef();
+    var previousSetKeyRef = React.useRef(setKey);
+    var _b = React.useState(function () {
+        return toKeySet(defaultSelectedKeys);
+    }), internalSelectedKeys = _b[0], setInternalSelectedKeys = _b[1];
+    var isSelectionControlled = selectedKeys !== undefined;
+    var selectedKeySet = React.useMemo(function () { return (isSelectionControlled ? toKeySet(selectedKeys) : internalSelectedKeys); }, [internalSelectedKeys, isSelectionControlled, selectedKeys]);
+    var disabledKeySet = React.useMemo(function () { return toKeySet(disabledItemKeys); }, [disabledItemKeys]);
+    var getItemKey = React.useCallback(function (item, index) { var _a; return (_a = getKey === null || getKey === void 0 ? void 0 : getKey(item, index)) !== null && _a !== void 0 ? _a : index; }, [getKey]);
+    React.useEffect(function () {
+        if (previousSetKeyRef.current !== setKey) {
+            previousSetKeyRef.current = setKey;
+            if (!isSelectionControlled) {
+                setInternalSelectedKeys(toKeySet(defaultSelectedKeys));
+            }
+        }
+    }, [defaultSelectedKeys, isSelectionControlled, setKey]);
+    var selectedItems = React.useMemo(function () { return items.filter(function (item, index) { return selectedKeySet.has(getItemKey(item, index)); }); }, [getItemKey, items, selectedKeySet]);
+    var enabledItemKeys = React.useMemo(function () {
+        return items
+            .map(function (item, index) { return getItemKey(item, index); })
+            .filter(function (itemKey) { return !disabledKeySet.has(itemKey); });
+    }, [disabledKeySet, getItemKey, items]);
+    var isAllSelected = enabledItemKeys.length > 0 && enabledItemKeys.every(function (itemKey) { return selectedKeySet.has(itemKey); });
+    var isPartiallySelected = !isAllSelected && enabledItemKeys.some(function (itemKey) { return selectedKeySet.has(itemKey); });
+    var commitSelection = React.useCallback(function (nextKeys) {
+        if (!isSelectionControlled) {
+            setInternalSelectedKeys(new Set(nextKeys));
+        }
+        var nextItems = items.filter(function (item, index) { return nextKeys.has(getItemKey(item, index)); });
+        onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged({ selectedItems: nextItems, selectedKeys: new Set(nextKeys) });
+    }, [getItemKey, isSelectionControlled, items, onSelectionChanged]);
+    var selectItem = React.useCallback(function (item, itemIndex, event, preserveExistingSelection) {
+        if (selectionMode === DetailsList_types_1.SelectionMode.none) {
+            return;
+        }
+        var itemKey = getItemKey(item, itemIndex);
+        if (disabledKeySet.has(itemKey)) {
+            return;
+        }
+        var nextKeys = new Set(selectedKeySet);
+        var nativeEvent = event.nativeEvent;
+        var shiftKey = 'shiftKey' in nativeEvent && Boolean(nativeEvent.shiftKey);
+        var modifierKey = ('metaKey' in nativeEvent && Boolean(nativeEvent.metaKey)) ||
+            ('ctrlKey' in nativeEvent && Boolean(nativeEvent.ctrlKey));
+        if (selectionMode === DetailsList_types_1.SelectionMode.single) {
+            nextKeys.clear();
+            if (!selectedKeySet.has(itemKey) || !preserveExistingSelection) {
+                nextKeys.add(itemKey);
+            }
+        }
+        else if (shiftKey && lastSelectedIndexRef.current !== undefined) {
+            if (!modifierKey) {
+                nextKeys.clear();
+            }
+            var rangeStart = Math.min(lastSelectedIndexRef.current, itemIndex);
+            var rangeEnd = Math.max(lastSelectedIndexRef.current, itemIndex);
+            for (var index = rangeStart; index <= rangeEnd; index += 1) {
+                var rangeItem = items[index];
+                if (rangeItem !== undefined) {
+                    var rangeKey = getItemKey(rangeItem, index);
+                    if (!disabledKeySet.has(rangeKey)) {
+                        nextKeys.add(rangeKey);
+                    }
+                }
+            }
+        }
+        else if (preserveExistingSelection || modifierKey) {
+            if (nextKeys.has(itemKey)) {
+                nextKeys.delete(itemKey);
+            }
+            else {
+                nextKeys.add(itemKey);
+            }
+        }
+        else {
+            nextKeys.clear();
+            nextKeys.add(itemKey);
+        }
+        lastSelectedIndexRef.current = itemIndex;
+        commitSelection(nextKeys);
+    }, [commitSelection, disabledKeySet, getItemKey, items, selectedKeySet, selectionMode]);
+    var toggleSelectAll = React.useCallback(function (event) {
+        event.stopPropagation();
+        if (selectionMode !== DetailsList_types_1.SelectionMode.multiple) {
+            return;
+        }
+        var nextKeys = new Set(selectedKeySet);
+        if (isAllSelected) {
+            enabledItemKeys.forEach(function (itemKey) { return nextKeys.delete(itemKey); });
+        }
+        else {
+            enabledItemKeys.forEach(function (itemKey) { return nextKeys.add(itemKey); });
+        }
+        commitSelection(nextKeys);
+    }, [commitSelection, enabledItemKeys, isAllSelected, selectedKeySet, selectionMode]);
+    return {
+        getItemKey: getItemKey,
+        selectedKeySet: selectedKeySet,
+        disabledKeySet: disabledKeySet,
+        selectedItems: selectedItems,
+        isAllSelected: isAllSelected,
+        isPartiallySelected: isPartiallySelected,
+        commitSelection: commitSelection,
+        selectItem: selectItem,
+        toggleSelectAll: toggleSelectAll,
+    };
+};
+exports.useDetailsListSelection = useDetailsListSelection;
+//# sourceMappingURL=useDetailsListSelection.js.map

package/lib-commonjs/controls/DetailsList/useDetailsListSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetailsListSelection.js","sourceRoot":"","sources":["../../../src/controls/DetailsList/useDetailsListSelection.ts"],"names":[],"mappings":"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"}

package/lib-commonjs/controls/DetailsList/useDetailsListStyles.js

@@ -0,0 +1,342 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDetailsListStyles = exports.DETAILS_LIST_DEFAULT_HEIGHT = exports.DETAILS_LIST_COMPACT_ROW_HEIGHT = exports.DETAILS_LIST_DEFAULT_ROW_HEIGHT = exports.DETAILS_LIST_SELECTION_COLUMN_WIDTH = exports.DETAILS_LIST_HEADER_TOP_SPACING = exports.DETAILS_LIST_HEADER_HEIGHT = void 0;
+var css_1 = require("@emotion/css");
+var react_components_1 = require("@fluentui/react-components");
+exports.DETAILS_LIST_HEADER_HEIGHT = 42;
+exports.DETAILS_LIST_HEADER_TOP_SPACING = 16;
+exports.DETAILS_LIST_SELECTION_COLUMN_WIDTH = 48;
+exports.DETAILS_LIST_DEFAULT_ROW_HEIGHT = 42;
+exports.DETAILS_LIST_COMPACT_ROW_HEIGHT = 32;
+exports.DETAILS_LIST_DEFAULT_HEIGHT = 600;
+var DETAILS_LIST_SCROLLBAR_SIZE = '3px';
+var useDetailsListStyles = function () {
+    var _a;
+    var selectionCell = (0, css_1.css)({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxSizing: 'border-box',
+        minWidth: 0,
+        overflow: 'hidden',
+    });
+    var row = (0, css_1.css)((_a = {
+            position: 'relative',
+            display: 'grid',
+            alignItems: 'stretch',
+            minWidth: '100%',
+            boxSizing: 'border-box',
+            color: react_components_1.tokens.colorNeutralForeground2,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            borderBottom: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke2),
+            cursor: 'default',
+            outline: 'none',
+            '&:hover': {
+                color: react_components_1.tokens.colorNeutralForeground1,
+                backgroundColor: react_components_1.tokens.colorNeutralBackground1Hover,
+            },
+            '&:focus-visible': {
+                outline: "2px solid ".concat(react_components_1.tokens.colorBrandStroke1),
+                outlineOffset: '-2px',
+                zIndex: 1,
+            }
+        },
+        _a["&:hover .".concat(selectionCell, ", &:focus-within .").concat(selectionCell)] = {
+            opacity: 1,
+        },
+        _a));
+    return {
+        root: (0, css_1.css)({
+            position: 'relative',
+            width: '100%',
+            minWidth: 0,
+            color: react_components_1.tokens.colorNeutralForeground2,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            fontFamily: react_components_1.tokens.fontFamilyBase,
+            fontSize: react_components_1.tokens.fontSizeBase200,
+            lineHeight: react_components_1.tokens.lineHeightBase200,
+        }),
+        viewport: (0, css_1.css)({
+            position: 'relative',
+            flex: '1 1 auto',
+            width: '100%',
+            minWidth: 0,
+            minHeight: 0,
+            overflow: 'auto',
+            overscrollBehavior: 'contain',
+            WebkitOverflowScrolling: 'touch',
+            scrollbarWidth: 'thin',
+            scrollbarColor: "".concat(react_components_1.tokens.colorBrandBackground, " ").concat(react_components_1.tokens.colorNeutralBackground3),
+            '&::-webkit-scrollbar': {
+                width: DETAILS_LIST_SCROLLBAR_SIZE,
+                height: DETAILS_LIST_SCROLLBAR_SIZE,
+            },
+            '&::-webkit-scrollbar-track': {
+                background: react_components_1.tokens.colorNeutralBackground3,
+                borderRadius: react_components_1.tokens.borderRadiusMedium,
+            },
+            '&::-webkit-scrollbar-thumb': {
+                background: react_components_1.tokens.colorBrandBackground,
+                borderRadius: react_components_1.tokens.borderRadiusMedium,
+            },
+            '&::-webkit-scrollbar-thumb:hover': {
+                background: react_components_1.tokens.colorBrandBackgroundHover,
+            },
+        }),
+        grid: (0, css_1.css)({
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            minWidth: 0,
+            outline: 'none',
+        }),
+        headerViewport: (0, css_1.css)({
+            flex: '0 0 auto',
+            width: '100%',
+            minWidth: 0,
+            overflow: 'hidden',
+        }),
+        headerWrapper: (0, css_1.css)({
+            position: 'relative',
+            minWidth: '100%',
+            boxSizing: 'border-box',
+            paddingTop: react_components_1.tokens.spacingVerticalL,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            borderBottom: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
+        }),
+        headerRow: (0, css_1.css)({
+            display: 'grid',
+            alignItems: 'stretch',
+            minWidth: '100%',
+            height: exports.DETAILS_LIST_HEADER_HEIGHT,
+            boxSizing: 'border-box',
+        }),
+        headerCell: (0, css_1.css)({
+            position: 'relative',
+            display: 'flex',
+            minWidth: 0,
+            height: exports.DETAILS_LIST_HEADER_HEIGHT,
+            boxSizing: 'border-box',
+            overflow: 'visible',
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+        }),
+        headerButton: (0, css_1.css)({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            gap: react_components_1.tokens.spacingHorizontalXS,
+            width: '100%',
+            minWidth: 0,
+            height: '100%',
+            boxSizing: 'border-box',
+            padding: "0 ".concat(react_components_1.tokens.spacingHorizontalS, " 0 ").concat(react_components_1.tokens.spacingHorizontalM),
+            color: 'inherit',
+            backgroundColor: 'transparent',
+            border: 0,
+            borderRadius: 0,
+            font: 'inherit',
+            textAlign: 'left',
+            cursor: 'pointer',
+            outline: 'none',
+            '&:hover': {
+                backgroundColor: react_components_1.tokens.colorNeutralBackground1Hover,
+            },
+            '&:active': {
+                backgroundColor: react_components_1.tokens.colorNeutralBackground1Pressed,
+            },
+            '&:focus-visible': {
+                outline: "2px solid ".concat(react_components_1.tokens.colorBrandStroke1),
+                outlineOffset: '-2px',
+            },
+            '&:disabled': {
+                cursor: 'default',
+            },
+        }),
+        headerLabel: (0, css_1.css)({
+            minWidth: 0,
+            flexGrow: 1,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        }),
+        headerIcon: (0, css_1.css)({
+            flexShrink: 0,
+            color: react_components_1.tokens.colorNeutralForeground3,
+        }),
+        resizeHandle: (0, css_1.css)({
+            position: 'absolute',
+            top: 0,
+            right: -8,
+            bottom: 0,
+            zIndex: 2,
+            width: 16,
+            padding: 0,
+            backgroundColor: 'transparent',
+            border: 0,
+            // Fluent UI 9 Button applies a pointer cursor to its root. The resize
+            // handle must keep the native horizontal-resize affordance instead.
+            cursor: 'col-resize !important',
+            touchAction: 'none',
+            outline: 'none',
+            '&:hover, &:active, &:focus-visible': {
+                cursor: 'col-resize !important',
+            },
+            '&::after': {
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: '50%',
+                width: 1,
+                content: '""',
+                backgroundColor: react_components_1.tokens.colorNeutralStroke1,
+                opacity: 0,
+            },
+            '&:hover::after, &:focus-visible::after': {
+                opacity: 1,
+            },
+            '&:focus-visible': {
+                outline: "2px solid ".concat(react_components_1.tokens.colorBrandStroke1),
+                outlineOffset: '-2px',
+            },
+        }),
+        row: row,
+        selectedRow: (0, css_1.css)({
+            color: react_components_1.tokens.colorNeutralForeground1,
+            backgroundColor: react_components_1.tokens.colorSubtleBackgroundSelected,
+            '&:hover': {
+                backgroundColor: react_components_1.tokens.colorNeutralBackground3,
+            },
+        }),
+        disabledRow: (0, css_1.css)({
+            color: react_components_1.tokens.colorNeutralForegroundDisabled,
+            pointerEvents: 'none',
+        }),
+        dropTargetRow: (0, css_1.css)({
+            outline: "2px solid ".concat(react_components_1.tokens.colorBrandStroke1),
+            outlineOffset: '-2px',
+        }),
+        cell: (0, css_1.css)({
+            display: 'flex',
+            alignItems: 'center',
+            minWidth: 0,
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            padding: "0 ".concat(react_components_1.tokens.spacingHorizontalS, " 0 ").concat(react_components_1.tokens.spacingHorizontalM),
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+        }),
+        paddedCell: (0, css_1.css)({
+            paddingRight: react_components_1.tokens.spacingHorizontalXXL,
+        }),
+        multilineCell: (0, css_1.css)({
+            alignItems: 'flex-start',
+            paddingTop: react_components_1.tokens.spacingVerticalS,
+            paddingBottom: react_components_1.tokens.spacingVerticalS,
+            whiteSpace: 'normal',
+            wordBreak: 'break-word',
+            textOverflow: 'clip',
+        }),
+        rowHeaderCell: (0, css_1.css)({
+            color: react_components_1.tokens.colorNeutralForeground1,
+            fontSize: react_components_1.tokens.fontSizeBase300,
+        }),
+        cellText: (0, css_1.css)({
+            display: 'block',
+            minWidth: 0,
+            maxWidth: '100%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'inherit',
+        }),
+        selectionCell: selectionCell,
+        selectionCellOnHover: (0, css_1.css)({
+            opacity: 0,
+        }),
+        groupHeader: (0, css_1.css)({
+            display: 'grid',
+            alignItems: 'stretch',
+            minWidth: '100%',
+            boxSizing: 'border-box',
+            backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+            borderBottom: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke2),
+        }),
+        groupButton: (0, css_1.css)({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            gap: react_components_1.tokens.spacingHorizontalS,
+            minWidth: 0,
+            width: '100%',
+            padding: "0 ".concat(react_components_1.tokens.spacingHorizontalM),
+            color: react_components_1.tokens.colorNeutralForeground1,
+            backgroundColor: 'transparent',
+            border: 0,
+            borderRadius: 0,
+            font: 'inherit',
+            textAlign: 'left',
+            cursor: 'pointer',
+            outline: 'none',
+            '&:hover': {
+                backgroundColor: react_components_1.tokens.colorNeutralBackground2Hover,
+            },
+            '&:focus-visible': {
+                outline: "2px solid ".concat(react_components_1.tokens.colorBrandStroke1),
+                outlineOffset: '-2px',
+            },
+        }),
+        groupIndent: (0, css_1.css)({
+            flex: "0 0 ".concat(react_components_1.tokens.spacingHorizontalXXL),
+            width: react_components_1.tokens.spacingHorizontalXXL,
+        }),
+        body: (0, css_1.css)({
+            position: 'relative',
+            minWidth: '100%',
+            overflowAnchor: 'none',
+        }),
+        shimmerRow: (0, css_1.css)({
+            display: 'grid',
+            alignItems: 'stretch',
+            minWidth: '100%',
+            boxSizing: 'border-box',
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            borderBottom: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke2),
+            pointerEvents: 'none',
+        }),
+        shimmerCell: (0, css_1.css)({
+            display: 'flex',
+            alignItems: 'center',
+            minWidth: 0,
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            padding: "0 ".concat(react_components_1.tokens.spacingHorizontalS, " 0 ").concat(react_components_1.tokens.spacingHorizontalM),
+        }),
+        virtualEntry: (0, css_1.css)({
+            position: 'absolute',
+            right: 0,
+            left: 0,
+        }),
+        stateContainer: (0, css_1.css)({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: react_components_1.tokens.spacingHorizontalS,
+            minHeight: 160,
+            padding: react_components_1.tokens.spacingVerticalXXL,
+            boxSizing: 'border-box',
+        }),
+        loadingMore: (0, css_1.css)({
+            position: 'sticky',
+            left: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: react_components_1.tokens.spacingHorizontalS,
+            minHeight: exports.DETAILS_LIST_COMPACT_ROW_HEIGHT,
+            color: react_components_1.tokens.colorNeutralForeground2,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+        }),
+    };
+};
+exports.useDetailsListStyles = useDetailsListStyles;
+//# sourceMappingURL=useDetailsListStyles.js.map

package/lib-commonjs/controls/DetailsList/useDetailsListStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetailsListStyles.js","sourceRoot":"","sources":["../../../src/controls/DetailsList/useDetailsListStyles.ts"],"names":[],"mappings":"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"}

package/lib-commonjs/controls/DetailsList/useDetailsListViewport.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDetailsListViewport = void 0;
+var tslib_1 = require("tslib");
+/* eslint-disable no-void */
+var React = tslib_1.__importStar(require("react"));
+var resize_observer_1 = require("@juggle/resize-observer");
+var useDetailsListViewport = function (_a) {
+    var itemCount = _a.itemCount, enableInfiniteScroll = _a.enableInfiniteScroll, infiniteScrollThreshold = _a.infiniteScrollThreshold, onLoadMore = _a.onLoadMore, hasNextPage = _a.hasNextPage, isLoadingMore = _a.isLoadingMore;
+    var viewportRef = React.useRef(null);
+    var loadTriggeredForLengthRef = React.useRef(-1);
+    var infiniteScrollArmedRef = React.useRef(true);
+    var _b = React.useState(0), viewportWidth = _b[0], setViewportWidth = _b[1];
+    var _c = React.useState(0), viewportHeight = _c[0], setViewportHeight = _c[1];
+    var _d = React.useState(0), scrollTop = _d[0], setScrollTop = _d[1];
+    var _e = React.useState(false), isLoadingMoreInternally = _e[0], setIsLoadingMoreInternally = _e[1];
+    React.useEffect(function () {
+        var viewport = viewportRef.current;
+        if (!viewport) {
+            return undefined;
+        }
+        var updateViewportSize = function () {
+            setViewportWidth(viewport.clientWidth);
+            setViewportHeight(viewport.clientHeight);
+        };
+        var resizeObserver = new resize_observer_1.ResizeObserver(updateViewportSize);
+        resizeObserver.observe(viewport);
+        updateViewportSize();
+        return function () { return resizeObserver.disconnect(); };
+    }, []);
+    React.useEffect(function () {
+        if (itemCount !== loadTriggeredForLengthRef.current) {
+            setIsLoadingMoreInternally(false);
+        }
+    }, [itemCount]);
+    var triggerLoadMore = React.useCallback(function () {
+        if (!enableInfiniteScroll ||
+            !hasNextPage ||
+            !onLoadMore ||
+            isLoadingMore ||
+            isLoadingMoreInternally ||
+            loadTriggeredForLengthRef.current === itemCount) {
+            return;
+        }
+        loadTriggeredForLengthRef.current = itemCount;
+        infiniteScrollArmedRef.current = false;
+        setIsLoadingMoreInternally(true);
+        void Promise.resolve(onLoadMore())
+            .catch(function () {
+            loadTriggeredForLengthRef.current = -1;
+        })
+            .finally(function () { return setIsLoadingMoreInternally(false); });
+    }, [
+        enableInfiniteScroll,
+        hasNextPage,
+        isLoadingMore,
+        isLoadingMoreInternally,
+        itemCount,
+        onLoadMore,
+    ]);
+    var handleScroll = React.useCallback(function (event) {
+        var viewport = event.currentTarget;
+        setScrollTop(viewport.scrollTop);
+        var remainingScroll = viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop;
+        if (remainingScroll <= infiniteScrollThreshold && infiniteScrollArmedRef.current) {
+            triggerLoadMore();
+        }
+    }, [infiniteScrollThreshold, triggerLoadMore]);
+    var handleScrollIntent = React.useCallback(function (viewport) {
+        if (isLoadingMore || isLoadingMoreInternally) {
+            return;
+        }
+        infiniteScrollArmedRef.current = true;
+        var remainingScroll = viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop;
+        if (remainingScroll <= infiniteScrollThreshold) {
+            triggerLoadMore();
+        }
+    }, [infiniteScrollThreshold, isLoadingMore, isLoadingMoreInternally, triggerLoadMore]);
+    return {
+        viewportRef: viewportRef,
+        viewportWidth: viewportWidth,
+        viewportHeight: viewportHeight,
+        scrollTop: scrollTop,
+        setScrollTop: setScrollTop,
+        isLoadingMoreInternally: isLoadingMoreInternally,
+        handleScroll: handleScroll,
+        handleScrollIntent: handleScrollIntent,
+    };
+};
+exports.useDetailsListViewport = useDetailsListViewport;
+//# sourceMappingURL=useDetailsListViewport.js.map

package/lib-commonjs/controls/DetailsList/useDetailsListViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetailsListViewport.js","sourceRoot":"","sources":["../../../src/controls/DetailsList/useDetailsListViewport.ts"],"names":[],"mappings":";;;;AAAA,4BAA4B;AAC5B,mDAA+B;AAC/B,2DAAyD;AAwBlD,IAAM,sBAAsB,GAAG,UAAI,EAOP;QANjC,SAAS,eAAA,EACT,oBAAoB,0BAAA,EACpB,uBAAuB,6BAAA,EACvB,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,aAAa,mBAAA;IAEb,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACvD,IAAM,yBAAyB,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACnD,IAAM,sBAAsB,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC5C,IAAA,KAAoC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAApD,aAAa,QAAA,EAAE,gBAAgB,QAAqB,CAAC;IACtD,IAAA,KAAsC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAtD,cAAc,QAAA,EAAE,iBAAiB,QAAqB,CAAC;IACxD,IAAA,KAA4B,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAA5C,SAAS,QAAA,EAAE,YAAY,QAAqB,CAAC;IAC9C,IAAA,KAAwD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA5E,uBAAuB,QAAA,EAAE,0BAA0B,QAAyB,CAAC;IAEpF,KAAK,CAAC,SAAS,CAAC;QACd,IAAM,QAAQ,GAAG,WAAW,CAAC,OAAO,CAAC;QACrC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAM,kBAAkB,GAAG;YACzB,gBAAgB,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;YACvC,iBAAiB,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QAC3C,CAAC,CAAC;QACF,IAAM,cAAc,GAAG,IAAI,gCAAc,CAAC,kBAAkB,CAAC,CAAC;QAC9D,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACjC,kBAAkB,EAAE,CAAC;QAErB,OAAO,cAAM,OAAA,cAAc,CAAC,UAAU,EAAE,EAA3B,CAA2B,CAAC;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC;QACd,IAAI,SAAS,KAAK,yBAAyB,CAAC,OAAO,EAAE,CAAC;YACpD,0BAA0B,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC;QACxC,IACE,CAAC,oBAAoB;YACrB,CAAC,WAAW;YACZ,CAAC,UAAU;YACX,aAAa;YACb,uBAAuB;YACvB,yBAAyB,CAAC,OAAO,KAAK,SAAS,EAC/C,CAAC;YACD,OAAO;QACT,CAAC;QAED,yBAAyB,CAAC,OAAO,GAAG,SAAS,CAAC;QAC9C,sBAAsB,CAAC,OAAO,GAAG,KAAK,CAAC;QACvC,0BAA0B,CAAC,IAAI,CAAC,CAAC;QACjC,KAAK,OAAO,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;aAC/B,KAAK,CAAC;YACL,yBAAyB,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACzC,CAAC,CAAC;aACD,OAAO,CAAC,cAAM,OAAA,0BAA0B,CAAC,KAAK,CAAC,EAAjC,CAAiC,CAAC,CAAC;IACtD,CAAC,EAAE;QACD,oBAAoB;QACpB,WAAW;QACX,aAAa;QACb,uBAAuB;QACvB,SAAS;QACT,UAAU;KACX,CAAC,CAAC;IAEH,IAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,UAAC,KAAoC;QACnC,IAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC;QACrC,YAAY,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;QACjC,IAAM,eAAe,GAAG,QAAQ,CAAC,YAAY,GAAG,QAAQ,CAAC,YAAY,GAAG,QAAQ,CAAC,SAAS,CAAC;QAC3F,IAAI,eAAe,IAAI,uBAAuB,IAAI,sBAAsB,CAAC,OAAO,EAAE,CAAC;YACjF,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,EACD,CAAC,uBAAuB,EAAE,eAAe,CAAC,CAC3C,CAAC;IAEF,IAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,UAAC,QAAwB;QACvB,IAAI,aAAa,IAAI,uBAAuB,EAAE,CAAC;YAC7C,OAAO;QACT,CAAC;QACD,sBAAsB,CAAC,OAAO,GAAG,IAAI,CAAC;QACtC,IAAM,eAAe,GAAG,QAAQ,CAAC,YAAY,GAAG,QAAQ,CAAC,YAAY,GAAG,QAAQ,CAAC,SAAS,CAAC;QAC3F,IAAI,eAAe,IAAI,uBAAuB,EAAE,CAAC;YAC/C,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,EACD,CAAC,uBAAuB,EAAE,aAAa,EAAE,uBAAuB,EAAE,eAAe,CAAC,CACnF,CAAC;IAEF,OAAO;QACL,WAAW,aAAA;QACX,aAAa,eAAA;QACb,cAAc,gBAAA;QACd,SAAS,WAAA;QACT,YAAY,cAAA;QACZ,uBAAuB,yBAAA;QACvB,YAAY,cAAA;QACZ,kBAAkB,oBAAA;KACnB,CAAC;AACJ,CAAC,CAAC;AAxGW,QAAA,sBAAsB,0BAwGjC"}

package/lib-commonjs/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./FileTypeIcon"), exports);
 tslib_1.__exportStar(require("./ListView"), exports);
+tslib_1.__exportStar(require("./DetailsList"), exports);
 tslib_1.__exportStar(require("./Placeholder"), exports);
 tslib_1.__exportStar(require("./SiteBreadcrumb"), exports);
 tslib_1.__exportStar(require("./TaxonomyPicker"), exports);

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,yDAA+B;AAC/B,qDAA2B;AAC3B,wDAA8B;AAC9B,2DAAiC;AACjC,2DAAiC;AACjC,yDAA+B;AAC/B,uDAA6B;AAC7B,2DAAiC;AACjC,gEAAsC;AACtC,yDAA+B;AAC/B,qDAA2B;AAC3B,mEAAyC;AACzC,2DAAiC;AACjC,uDAA6B;AAC7B,yDAA+B;AAC/B,2DAAiC;AACjC,yDAA+B;AAC/B,uDAA6B;AAC7B,uDAA6B;AAC7B,8DAAoC;AAEpC,yDAA+B;AAC/B,wDAA8B;AAC9B,mDAAyB;AACzB,sDAA4B;AAC5B,wDAA8B;AAC9B,wDAA8B;AAC9B,qEAA2C;AAC3C,kEAAwC;AACxC,8DAAoC;AACpC,kEAAwC;AACxC,gEAAsC;AACtC,8DAAoC;AACpC,kEAAwC;AACxC,8DAAoC;AACpC,+DAAqC;AACrC,6DAAmC;AACnC,8DAAoC;AACpC,sDAA4B;AAC5B,2DAAiC;AACjC,wDAA8B;AAC9B,qDAA2B;AAC3B,iEAAuC;AACvC,wDAA8B;AAC9B,wDAA8B;AAC9B,yDAA+B;AAC/B,wDAA8B;AAC9B,wDAA8B;AAC9B,qDAA2B;AAC3B,wDAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,yDAA+B;AAC/B,qDAA2B;AAC3B,wDAA8B;AAC9B,wDAA8B;AAC9B,2DAAiC;AACjC,2DAAiC;AACjC,yDAA+B;AAC/B,uDAA6B;AAC7B,2DAAiC;AACjC,gEAAsC;AACtC,yDAA+B;AAC/B,qDAA2B;AAC3B,mEAAyC;AACzC,2DAAiC;AACjC,uDAA6B;AAC7B,yDAA+B;AAC/B,2DAAiC;AACjC,yDAA+B;AAC/B,uDAA6B;AAC7B,uDAA6B;AAC7B,8DAAoC;AAEpC,yDAA+B;AAC/B,wDAA8B;AAC9B,mDAAyB;AACzB,sDAA4B;AAC5B,wDAA8B;AAC9B,wDAA8B;AAC9B,qEAA2C;AAC3C,kEAAwC;AACxC,8DAAoC;AACpC,kEAAwC;AACxC,gEAAsC;AACtC,8DAAoC;AACpC,kEAAwC;AACxC,8DAAoC;AACpC,+DAAqC;AACrC,6DAAmC;AACnC,8DAAoC;AACpC,sDAA4B;AAC5B,2DAAiC;AACjC,wDAA8B;AAC9B,qDAA2B;AAC3B,iEAAuC;AACvC,wDAA8B;AAC9B,wDAA8B;AAC9B,yDAA+B;AAC/B,wDAA8B;AAC9B,wDAA8B;AAC9B,qDAA2B;AAC3B,wDAA8B"}

package/lib-commonjs/loc/bg-bg.js

@@ -108,6 +108,15 @@ define([], function () {
         "mapsSearchButtonText": "Търсене",
         "mapsTitlePrefix": "Карта на",
         "ListViewFilterLabel": "Филтриране на списъка",
+        "DetailsListAriaLabel": "Details list",
+        "DetailsListHeaderAriaLabel": "List header",
+        "DetailsListSelectAllRowsAriaLabel": "Select all rows",
+        "DetailsListSelectionAriaLabel": "Selection",
+        "DetailsListSelectRowAriaLabel": "Select row {0}",
+        "DetailsListResizeColumnAriaLabel": "Resize {0} column",
+        "DetailsListLoading": "Loading",
+        "DetailsListLoadingMore": "Loading more items",
+        "DetailsListNoItems": "No items to display",
         "HeaderNormalText": "Нормален текст",
         "HeaderH2": "Функция 2",
         "HeaderH3": "Функция 3",