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

package/lib/controls/DetailsList/DetailsList.utils.d.ts

@@ -0,0 +1,21 @@
+import type { DetailsListKey, IColumn, IDetailsListGroup } from './DetailsList.types';
+export interface IDetailsListItemEntry<T> {
+    type: 'item';
+    key: DetailsListKey;
+    item: T;
+    itemIndex: number;
+    height: number;
+}
+export interface IDetailsListGroupEntry<T> {
+    type: 'group';
+    key: string;
+    group: IDetailsListGroup<T>;
+    height: number;
+}
+export type DetailsListEntry<T> = IDetailsListItemEntry<T> | IDetailsListGroupEntry<T>;
+export declare const clampColumnWidth: <T>(column: IColumn<T>, width: number) => number;
+export declare const calculateColumnWidths: <T>(columns: readonly IColumn<T>[], widthOverrides: Readonly<Record<string, number>>, availableWidth: number, justifyColumns: boolean) => Readonly<Record<string, number>>;
+export declare const buildDetailsListEntries: <T>(items: readonly T[], groups: readonly IDetailsListGroup<T>[] | undefined, rowHeight: number, groupHeaderHeight: number, getKey: (item: T, index: number) => DetailsListKey, isGroupCollapsed: (group: IDetailsListGroup<T>) => boolean) => readonly DetailsListEntry<T>[];
+export declare const calculateEntryOffsets: <T>(entries: readonly DetailsListEntry<T>[]) => readonly number[];
+export declare const findEntryIndexAtOffset: (offsets: readonly number[], offset: number) => number;
+//# sourceMappingURL=DetailsList.utils.d.ts.map

package/lib/controls/DetailsList/DetailsList.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsList.utils.d.ts","sourceRoot":"","sources":["../../../src/controls/DetailsList/DetailsList.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,OAAO,EACP,iBAAiB,EAClB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC;IACR,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAC1B,qBAAqB,CAAC,CAAC,CAAC,GACxB,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAE9B,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAChC,QAAQ,OAAO,CAAC,CAAC,CAAC,EAClB,OAAO,MAAM,KACZ,MAIA,CAAC;AAEJ,eAAO,MAAM,qBAAqB,GAAI,CAAC,EACrC,SAAS,SAAS,OAAO,CAAC,CAAC,CAAC,EAAE,EAC9B,gBAAgB,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAChD,gBAAgB,MAAM,EACtB,gBAAgB,OAAO,KACtB,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAuDjC,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,CAAC,EACvC,OAAO,SAAS,CAAC,EAAE,EACnB,QAAQ,SAAS,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,EACnD,WAAW,MAAM,EACjB,mBAAmB,MAAM,EACzB,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,EAClD,kBAAkB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,OAAO,KACzD,SAAS,gBAAgB,CAAC,CAAC,CAAC,EAiD9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,CAAC,EACrC,SAAS,SAAS,gBAAgB,CAAC,CAAC,CAAC,EAAE,KACtC,SAAS,MAAM,EAMjB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,SAAS,SAAS,MAAM,EAAE,EAC1B,QAAQ,MAAM,KACb,MAqBF,CAAC"}

package/lib/controls/DetailsList/DetailsList.utils.js

@@ -0,0 +1,122 @@
+export var clampColumnWidth = function (column, width) {
+    var _a;
+    return Math.max(column.minWidth, Math.min(width, (_a = column.maxWidth) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY));
+};
+export var calculateColumnWidths = function (columns, widthOverrides, availableWidth, justifyColumns) {
+    var widths = columns.map(function (column) {
+        var _a, _b;
+        return clampColumnWidth(column, (_b = (_a = widthOverrides[column.key]) !== null && _a !== void 0 ? _a : column.currentWidth) !== null && _b !== void 0 ? _b : column.minWidth);
+    });
+    var remainingWidth = justifyColumns
+        ? Math.max(0, availableWidth - widths.reduce(function (total, width) { return total + width; }, 0))
+        : 0;
+    var activeIndexes = columns
+        .map(function (column, index) { return ({ column: column, index: index }); })
+        .filter(function (_a) {
+        var _b;
+        var column = _a.column, index = _a.index;
+        return !Object.prototype.hasOwnProperty.call(widthOverrides, column.key) &&
+            widths[index] < ((_b = column.maxWidth) !== null && _b !== void 0 ? _b : Number.POSITIVE_INFINITY);
+    })
+        .map(function (_a) {
+        var index = _a.index;
+        return index;
+    });
+    var _loop_1 = function () {
+        var totalWeight = activeIndexes.reduce(function (total, index) {
+            var _a, _b;
+            return total +
+                ((_b = (_a = columns[index].flexGrow) !== null && _a !== void 0 ? _a : columns[index].targetWidthProportion) !== null && _b !== void 0 ? _b : 1);
+        }, 0);
+        var distributedWidth = 0;
+        activeIndexes.forEach(function (index) {
+            var _a, _b;
+            var column = columns[index];
+            var weight = (_b = (_a = column.flexGrow) !== null && _a !== void 0 ? _a : column.targetWidthProportion) !== null && _b !== void 0 ? _b : 1;
+            var share = remainingWidth * (weight / totalWeight);
+            var nextWidth = clampColumnWidth(column, widths[index] + share);
+            distributedWidth += nextWidth - widths[index];
+            widths[index] = nextWidth;
+        });
+        if (distributedWidth <= 0.5) {
+            return "break";
+        }
+        remainingWidth -= distributedWidth;
+        activeIndexes = activeIndexes.filter(function (index) { var _a; return widths[index] < ((_a = columns[index].maxWidth) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY); });
+    };
+    while (remainingWidth > 0.5 && activeIndexes.length > 0) {
+        var state_1 = _loop_1();
+        if (state_1 === "break")
+            break;
+    }
+    return Object.fromEntries(columns.map(function (column, index) { return [column.key, widths[index]]; }));
+};
+export var buildDetailsListEntries = function (items, groups, rowHeight, groupHeaderHeight, getKey, isGroupCollapsed) {
+    if (!(groups === null || groups === void 0 ? void 0 : groups.length)) {
+        return items.map(function (item, itemIndex) { return ({
+            type: 'item',
+            key: getKey(item, itemIndex),
+            item: item,
+            itemIndex: itemIndex,
+            height: rowHeight,
+        }); });
+    }
+    var entries = [];
+    var appendGroup = function (group) {
+        var _a;
+        entries.push({
+            type: 'group',
+            key: group.key,
+            group: group,
+            height: groupHeaderHeight,
+        });
+        if (isGroupCollapsed(group)) {
+            return;
+        }
+        if ((_a = group.children) === null || _a === void 0 ? void 0 : _a.length) {
+            group.children.forEach(appendGroup);
+            return;
+        }
+        var lastIndex = Math.min(items.length, group.startIndex + group.count);
+        for (var itemIndex = group.startIndex; itemIndex < lastIndex; itemIndex += 1) {
+            var item = items[itemIndex];
+            entries.push({
+                type: 'item',
+                key: getKey(item, itemIndex),
+                item: item,
+                itemIndex: itemIndex,
+                height: rowHeight,
+            });
+        }
+    };
+    groups.forEach(appendGroup);
+    return entries;
+};
+export var calculateEntryOffsets = function (entries) {
+    var offsets = [0];
+    entries.forEach(function (entry) {
+        return offsets.push(offsets[offsets.length - 1] + entry.height);
+    });
+    return offsets;
+};
+export var findEntryIndexAtOffset = function (offsets, offset) {
+    if (offsets.length <= 1) {
+        return 0;
+    }
+    var low = 0;
+    var high = offsets.length - 2;
+    while (low <= high) {
+        var middle = Math.floor((low + high) / 2);
+        if (offsets[middle] <= offset && offset < offsets[middle + 1]) {
+            return middle;
+        }
+        if (offset < offsets[middle]) {
+            high = middle - 1;
+        }
+        else {
+            low = middle + 1;
+        }
+    }
+    return Math.max(0, Math.min(low, offsets.length - 2));
+};
+//# sourceMappingURL=DetailsList.utils.js.map

package/lib/controls/DetailsList/DetailsList.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsList.utils.js","sourceRoot":"","sources":["../../../src/controls/DetailsList/DetailsList.utils.ts"],"names":[],"mappings":"AAyBA,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAC9B,MAAkB,EAClB,KAAa;;IAEb,OAAA,IAAI,CAAC,GAAG,CACN,MAAM,CAAC,QAAQ,EACf,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAA,MAAM,CAAC,QAAQ,mCAAI,MAAM,CAAC,iBAAiB,CAAC,CAC7D,CAAA;CAAA,CAAC;AAEJ,MAAM,CAAC,IAAM,qBAAqB,GAAG,UACnC,OAA8B,EAC9B,cAAgD,EAChD,cAAsB,EACtB,cAAuB;IAEvB,IAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM;;QAChC,OAAA,gBAAgB,CACd,MAAM,EACN,MAAA,MAAA,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC,mCAAI,MAAM,CAAC,YAAY,mCAAI,MAAM,CAAC,QAAQ,CACrE,CAAA;KAAA,CACF,CAAC;IAEF,IAAI,cAAc,GAAG,cAAc;QACjC,CAAC,CAAC,IAAI,CAAC,GAAG,CACN,CAAC,EACD,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,KAAK,GAAG,KAAK,EAAb,CAAa,EAAE,CAAC,CAAC,CACnE;QACH,CAAC,CAAC,CAAC,CAAC;IACN,IAAI,aAAa,GAAG,OAAO;SACxB,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK,IAAK,OAAA,CAAC,EAAE,MAAM,QAAA,EAAE,KAAK,OAAA,EAAE,CAAC,EAAnB,CAAmB,CAAC;SAC3C,MAAM,CACL,UAAC,EAAiB;;YAAf,MAAM,YAAA,EAAE,KAAK,WAAA;QACd,OAAA,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG,CAAC;YACjE,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,MAAA,MAAM,CAAC,QAAQ,mCAAI,MAAM,CAAC,iBAAiB,CAAC,CAAA;KAAA,CAChE;SACA,GAAG,CAAC,UAAC,EAAS;YAAP,KAAK,WAAA;QAAO,OAAA,KAAK;IAAL,CAAK,CAAC,CAAC;;QAG3B,IAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CACtC,UAAC,KAAK,EAAE,KAAK;;YACX,OAAA,KAAK;gBACL,CAAC,MAAA,MAAA,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,mCAAI,OAAO,CAAC,KAAK,CAAC,CAAC,qBAAqB,mCAAI,CAAC,CAAC,CAAA;SAAA,EACxE,CAAC,CACF,CAAC;QACF,IAAI,gBAAgB,GAAG,CAAC,CAAC;QAEzB,aAAa,CAAC,OAAO,CAAC,UAAC,KAAK;;YAC1B,IAAM,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;YAC9B,IAAM,MAAM,GAAG,MAAA,MAAA,MAAM,CAAC,QAAQ,mCAAI,MAAM,CAAC,qBAAqB,mCAAI,CAAC,CAAC;YACpE,IAAM,KAAK,GAAG,cAAc,GAAG,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;YACtD,IAAM,SAAS,GAAG,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC;YAClE,gBAAgB,IAAI,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;YAC9C,MAAM,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;QAC5B,CAAC,CAAC,CAAC;QAEH,IAAI,gBAAgB,IAAI,GAAG,EAAE,CAAC;;QAE9B,CAAC;QAED,cAAc,IAAI,gBAAgB,CAAC;QACnC,aAAa,GAAG,aAAa,CAAC,MAAM,CAClC,UAAC,KAAK,YACJ,OAAA,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,MAAA,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,mCAAI,MAAM,CAAC,iBAAiB,CAAC,CAAA,EAAA,CACxE,CAAC;;IA1BJ,OAAO,cAAc,GAAG,GAAG,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;;;;KA2BtD;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK,IAAK,OAAA,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,EAA3B,CAA2B,CAAC,CAC5D,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG,UACrC,KAAmB,EACnB,MAAmD,EACnD,SAAiB,EACjB,iBAAyB,EACzB,MAAkD,EAClD,gBAA0D;IAE1D,IAAI,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAA,EAAE,CAAC;QACpB,OAAO,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,SAAS,IAAK,OAAA,CAAC;YACrC,IAAI,EAAE,MAAM;YACZ,GAAG,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC;YAC5B,IAAI,MAAA;YACJ,SAAS,WAAA;YACT,MAAM,EAAE,SAAS;SAClB,CAAC,EANoC,CAMpC,CAAC,CAAC;IACN,CAAC;IAED,IAAM,OAAO,GAA0B,EAAE,CAAC;IAE1C,IAAM,WAAW,GAAG,UAAC,KAA2B;;QAC9C,OAAO,CAAC,IAAI,CAAC;YACX,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,KAAK,CAAC,GAAG;YACd,KAAK,OAAA;YACL,MAAM,EAAE,iBAAiB;SAC1B,CAAC,CAAC;QAEH,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,IAAI,MAAA,KAAK,CAAC,QAAQ,0CAAE,MAAM,EAAE,CAAC;YAC3B,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YACpC,OAAO;QACT,CAAC;QAED,IAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;QACzE,KACE,IAAI,SAAS,GAAG,KAAK,CAAC,UAAU,EAChC,SAAS,GAAG,SAAS,EACrB,SAAS,IAAI,CAAC,EACd,CAAC;YACD,IAAM,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;YAC9B,OAAO,CAAC,IAAI,CAAC;gBACX,IAAI,EAAE,MAAM;gBACZ,GAAG,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC;gBAC5B,IAAI,MAAA;gBACJ,SAAS,WAAA;gBACT,MAAM,EAAE,SAAS;aAClB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IAC5B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,qBAAqB,GAAG,UACnC,OAAuC;IAEvC,IAAM,OAAO,GAAa,CAAC,CAAC,CAAC,CAAC;IAC9B,OAAO,CAAC,OAAO,CAAC,UAAC,KAAK;QACpB,OAAA,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAAxD,CAAwD,CACzD,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAAG,UACpC,OAA0B,EAC1B,MAAc;IAEd,IAAI,OAAO,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;QACxB,OAAO,CAAC,CAAC;IACX,CAAC;IAED,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,IAAI,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAE9B,OAAO,GAAG,IAAI,IAAI,EAAE,CAAC;QACnB,IAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAC5C,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,IAAI,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC;YAC9D,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,IAAI,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YAC7B,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC;QACpB,CAAC;aAAM,CAAC;YACN,GAAG,GAAG,MAAM,GAAG,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;AACxD,CAAC,CAAC"}

package/lib/controls/DetailsList/DetailsListContent.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const renderDetailsListContent: (content: React.ReactNode, className?: string) => React.ReactNode;
+//# sourceMappingURL=DetailsListContent.d.ts.map

package/lib/controls/DetailsList/DetailsListContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsListContent.d.ts","sourceRoot":"","sources":["../../../src/controls/DetailsList/DetailsListContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,wBAAwB,GACnC,SAAS,KAAK,CAAC,SAAS,EACxB,YAAY,MAAM,KACjB,KAAK,CAAC,SAKR,CAAC"}

package/lib/controls/DetailsList/DetailsListContent.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Text } from '@fluentui/react-components';
+export var renderDetailsListContent = function (content, className) {
+    if (typeof content === 'string' || typeof content === 'number') {
+        return React.createElement(Text, { className: className }, content);
+    }
+    return content;
+};
+//# sourceMappingURL=DetailsListContent.js.map

package/lib/controls/DetailsList/DetailsListContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsListContent.js","sourceRoot":"","sources":["../../../src/controls/DetailsList/DetailsListContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,MAAM,CAAC,IAAM,wBAAwB,GAAG,UACtC,OAAwB,EACxB,SAAkB;IAElB,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QAC/D,OAAO,oBAAC,IAAI,IAAC,SAAS,EAAE,SAAS,IAAG,OAAO,CAAQ,CAAC;IACtD,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

package/lib/controls/DetailsList/DetailsListGroupHeader.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { IDetailsListProps } from './DetailsList.types';
+import type { IDetailsListGroupEntry } from './DetailsList.utils';
+import type { useDetailsListStyles } from './useDetailsListStyles';
+interface DetailsListGroupHeaderProps<T> {
+    entry: IDetailsListGroupEntry<T>;
+    entryIndex: number;
+    isCollapsed: boolean;
+    onToggle: () => void;
+    isHeaderVisible: boolean;
+    shouldVirtualize: boolean;
+    entryTop: number;
+    groupHeaderHeight: number;
+    gridTemplateColumns: string;
+    classes: ReturnType<typeof useDetailsListStyles>;
+    style: React.CSSProperties | undefined;
+    onRenderGroupHeader: IDetailsListProps<T>['onRenderGroupHeader'];
+}
+export declare const DetailsListGroupHeader: <T>({ entry, entryIndex, isCollapsed, onToggle, isHeaderVisible, shouldVirtualize, entryTop, groupHeaderHeight, gridTemplateColumns, classes, style, onRenderGroupHeader, }: DetailsListGroupHeaderProps<T>) => React.ReactElement;
+export {};
+//# sourceMappingURL=DetailsListGroupHeader.d.ts.map

package/lib/controls/DetailsList/DetailsListGroupHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsListGroupHeader.d.ts","sourceRoot":"","sources":["../../../src/controls/DetailsList/DetailsListGroupHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAA4B,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACvF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnE,UAAU,2BAA2B,CAAC,CAAC;IACrC,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,EAAE,OAAO,CAAC;IACzB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,OAAO,EAAE,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;IACvC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;CAClE;AAED,eAAO,MAAM,sBAAsB,GAAI,CAAC,EAAG,yKAaxC,2BAA2B,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,YA4DzC,CAAC"}

package/lib/controls/DetailsList/DetailsListGroupHeader.js

@@ -0,0 +1,41 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { Button, Text } from '@fluentui/react-components';
+import { ChevronDown16Regular, ChevronRight16Regular } from '@fluentui/react-icons';
+export var DetailsListGroupHeader = function (_a) {
+    var entry = _a.entry, entryIndex = _a.entryIndex, isCollapsed = _a.isCollapsed, onToggle = _a.onToggle, isHeaderVisible = _a.isHeaderVisible, shouldVirtualize = _a.shouldVirtualize, entryTop = _a.entryTop, groupHeaderHeight = _a.groupHeaderHeight, gridTemplateColumns = _a.gridTemplateColumns, classes = _a.classes, style = _a.style, onRenderGroupHeader = _a.onRenderGroupHeader;
+    var groupProps = {
+        group: entry.group,
+        isCollapsed: isCollapsed,
+        onToggle: onToggle,
+    };
+    var defaultRender = function (renderProps) {
+        var _a;
+        return (React.createElement("div", { role: "row", "aria-rowindex": entryIndex + (isHeaderVisible ? 2 : 1), className: classes.groupHeader, style: __assign(__assign({ gridTemplateColumns: gridTemplateColumns, minHeight: groupHeaderHeight, height: groupHeaderHeight }, style), (shouldVirtualize
+                ? {
+                    position: 'absolute',
+                    top: entryTop,
+                    right: 0,
+                    left: 0,
+                }
+                : {})) },
+            React.createElement(Button, { appearance: "subtle", size: "small", role: "gridcell", "aria-expanded": !renderProps.isCollapsed, className: classes.groupButton, style: {
+                    gridColumn: '1 / -1',
+                    // Fluent UI 9 Button centers its content by default. Group labels
+                    // follow the list's leading edge instead.
+                    justifyContent: 'flex-start',
+                    textAlign: 'left',
+                }, onClick: renderProps.onToggle },
+                Array.from({ length: (_a = renderProps.group.level) !== null && _a !== void 0 ? _a : 0 }, function (_, level) { return (React.createElement("span", { key: level, "aria-hidden": true, className: classes.groupIndent })); }),
+                renderProps.isCollapsed ? React.createElement(ChevronRight16Regular, null) : React.createElement(ChevronDown16Regular, null),
+                React.createElement(Text, { weight: "semibold", truncate: true }, renderProps.group.name),
+                React.createElement(Text, { style: { color: 'inherit' } },
+                    "(",
+                    renderProps.group.count,
+                    ")"))));
+    };
+    return (React.createElement(React.Fragment, null, onRenderGroupHeader
+        ? onRenderGroupHeader(groupProps, defaultRender)
+        : defaultRender(groupProps)));
+};
+//# sourceMappingURL=DetailsListGroupHeader.js.map

package/lib/controls/DetailsList/DetailsListGroupHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsListGroupHeader.js","sourceRoot":"","sources":["../../../src/controls/DetailsList/DetailsListGroupHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAqBpF,MAAM,CAAC,IAAM,sBAAsB,GAAG,UAAK,EAaV;QAZ/B,KAAK,WAAA,EACL,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,eAAe,qBAAA,EACf,gBAAgB,sBAAA,EAChB,QAAQ,cAAA,EACR,iBAAiB,uBAAA,EACjB,mBAAmB,yBAAA,EACnB,OAAO,aAAA,EACP,KAAK,WAAA,EACL,mBAAmB,yBAAA;IAEnB,IAAM,UAAU,GAAgC;QAC9C,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,WAAW,aAAA;QACX,QAAQ,UAAA;KACT,CAAC;IACF,IAAM,aAAa,GAAG,UAAC,WAAwC;;QAAyB,OAAA,CACtF,6BACE,IAAI,EAAC,KAAK,mBACK,UAAU,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACrD,SAAS,EAAE,OAAO,CAAC,WAAW,EAC9B,KAAK,sBACH,mBAAmB,qBAAA,EACnB,SAAS,EAAE,iBAAiB,EAC5B,MAAM,EAAE,iBAAiB,IACtB,KAAK,GACL,CAAC,gBAAgB;gBAClB,CAAC,CAAC;oBACE,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,QAAQ;oBACb,KAAK,EAAE,CAAC;oBACR,IAAI,EAAE,CAAC;iBACR;gBACH,CAAC,CAAC,EAAE,CAAC;YAGT,oBAAC,MAAM,IACL,UAAU,EAAC,QAAQ,EACnB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,UAAU,mBACA,CAAC,WAAW,CAAC,WAAW,EACvC,SAAS,EAAE,OAAO,CAAC,WAAW,EAC9B,KAAK,EAAE;oBACL,UAAU,EAAE,QAAQ;oBACpB,kEAAkE;oBAClE,0CAA0C;oBAC1C,cAAc,EAAE,YAAY;oBAC5B,SAAS,EAAE,MAAM;iBAClB,EACD,OAAO,EAAE,WAAW,CAAC,QAAQ;gBAE5B,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,MAAA,WAAW,CAAC,KAAK,CAAC,KAAK,mCAAI,CAAC,EAAE,EAAE,UAAC,CAAC,EAAE,KAAK,IAAK,OAAA,CAClE,8BAAM,GAAG,EAAE,KAAK,uBAAc,SAAS,EAAE,OAAO,CAAC,WAAW,GAAI,CACjE,EAFmE,CAEnE,CAAC;gBACD,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,oBAAC,qBAAqB,OAAG,CAAC,CAAC,CAAC,oBAAC,oBAAoB,OAAG;gBAC/E,oBAAC,IAAI,IAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,UAC7B,WAAW,CAAC,KAAK,CAAC,IAAI,CAClB;gBACP,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;;oBAAI,WAAW,CAAC,KAAK,CAAC,KAAK;wBAAS,CAC9D,CACL,CACP,CAAA;KAAA,CAAC;IAEF,OAAO,CACL,0CACG,mBAAmB;QAClB,CAAC,CAAC,mBAAmB,CAAC,UAAU,EAAE,aAAa,CAAC;QAChD,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAC5B,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/DetailsList/DetailsListHeader.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { IColumn, IColumnReorderOptions, IDetailsListProps } from './DetailsList.types';
+import { CheckboxVisibility, ColumnDragEndLocation, SelectionMode } from './DetailsList.types';
+import type { useDetailsListStyles } from './useDetailsListStyles';
+interface DetailsListHeaderProps<T> {
+    columns: readonly IColumn<T>[];
+    selectionMode: SelectionMode;
+    checkboxVisibility: CheckboxVisibility;
+    isAllSelected: boolean;
+    isPartiallySelected: boolean;
+    onToggleSelectAll: (event: React.SyntheticEvent) => void;
+    showSelectionColumn: boolean;
+    ariaLabelForSelectionColumn: string;
+    ariaLabelForSelectAllCheckbox: string;
+    gridTemplateColumns: string;
+    style: React.CSSProperties | undefined;
+    classes: ReturnType<typeof useDetailsListStyles>;
+    columnWidths: Readonly<Record<string, number>>;
+    columnReorderOptions: IColumnReorderOptions<T> | undefined;
+    draggedColumnIndexRef: React.MutableRefObject<number | undefined>;
+    columnDropLocationRef: React.MutableRefObject<ColumnDragEndLocation>;
+    isColumnDraggable: (columnIndex: number) => boolean;
+    handleColumnDrop: (targetIndex: number) => void;
+    resizeColumn: (column: IColumn<T>, columnIndex: number, width: number) => void;
+    autoFitColumn: (column: IColumn<T>, columnIndex: number) => void;
+    beginColumnResize: (event: React.PointerEvent<HTMLButtonElement>, column: IColumn<T>, columnIndex: number) => void;
+    onColumnHeaderClick: IDetailsListProps<T>['onColumnHeaderClick'];
+    onColumnHeaderContextMenu: IDetailsListProps<T>['onColumnHeaderContextMenu'];
+    onRenderDetailsHeader: IDetailsListProps<T>['onRenderDetailsHeader'];
+}
+export declare const DetailsListHeader: <T>({ columns, selectionMode, checkboxVisibility, isAllSelected, isPartiallySelected, onToggleSelectAll, showSelectionColumn, ariaLabelForSelectionColumn, ariaLabelForSelectAllCheckbox, gridTemplateColumns, style, classes, columnWidths, columnReorderOptions, draggedColumnIndexRef, columnDropLocationRef, isColumnDraggable, handleColumnDrop, resizeColumn, autoFitColumn, beginColumnResize, onColumnHeaderClick, onColumnHeaderContextMenu, onRenderDetailsHeader, }: DetailsListHeaderProps<T>) => React.ReactElement;
+export {};
+//# sourceMappingURL=DetailsListHeader.d.ts.map

package/lib/controls/DetailsList/DetailsListHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsListHeader.d.ts","sourceRoot":"","sources":["../../../src/controls/DetailsList/DetailsListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,OAAO,EACP,qBAAqB,EAErB,iBAAiB,EAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,kBAAkB,EAElB,qBAAqB,EACrB,aAAa,EACd,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAInE,UAAU,sBAAsB,CAAC,CAAC;IAChC,OAAO,EAAE,SAAS,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,aAAa,EAAE,aAAa,CAAC;IAC7B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,aAAa,EAAE,OAAO,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;IACzD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,2BAA2B,EAAE,MAAM,CAAC;IACpC,6BAA6B,EAAE,MAAM,CAAC;IACtC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;IACvC,OAAO,EAAE,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;IACjD,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,oBAAoB,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAC3D,qBAAqB,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAClE,qBAAqB,EAAE,KAAK,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IACrE,iBAAiB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC;IACpD,gBAAgB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/E,aAAa,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,iBAAiB,EAAE,CACjB,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAC5C,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAClB,WAAW,EAAE,MAAM,KAChB,IAAI,CAAC;IACV,mBAAmB,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;IACjE,yBAAyB,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC;IAC7E,qBAAqB,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC;CACtE;AAED,eAAO,MAAM,iBAAiB,GAAI,CAAC,EAAG,4cAyBnC,sBAAsB,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,YAuKpC,CAAC"}

package/lib/controls/DetailsList/DetailsListHeader.js

@@ -0,0 +1,94 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import * as strings from 'ControlStrings';
+import { Button, Checkbox, mergeClasses } from '@fluentui/react-components';
+import { ArrowSortDown16Regular, ArrowSortUp16Regular, ChevronDown16Regular, Filter16Regular, ReOrderDotsVertical16Regular, } from '@fluentui/react-icons';
+import { ColumnActionsMode, ColumnDragEndLocation, SelectionMode, } from './DetailsList.types';
+import { renderDetailsListContent } from './DetailsListContent';
+var COLUMN_RESIZE_KEYBOARD_STEP = 10;
+export var DetailsListHeader = function (_a) {
+    var columns = _a.columns, selectionMode = _a.selectionMode, checkboxVisibility = _a.checkboxVisibility, isAllSelected = _a.isAllSelected, isPartiallySelected = _a.isPartiallySelected, onToggleSelectAll = _a.onToggleSelectAll, showSelectionColumn = _a.showSelectionColumn, ariaLabelForSelectionColumn = _a.ariaLabelForSelectionColumn, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, gridTemplateColumns = _a.gridTemplateColumns, style = _a.style, classes = _a.classes, columnWidths = _a.columnWidths, columnReorderOptions = _a.columnReorderOptions, draggedColumnIndexRef = _a.draggedColumnIndexRef, columnDropLocationRef = _a.columnDropLocationRef, isColumnDraggable = _a.isColumnDraggable, handleColumnDrop = _a.handleColumnDrop, resizeColumn = _a.resizeColumn, autoFitColumn = _a.autoFitColumn, beginColumnResize = _a.beginColumnResize, onColumnHeaderClick = _a.onColumnHeaderClick, onColumnHeaderContextMenu = _a.onColumnHeaderContextMenu, onRenderDetailsHeader = _a.onRenderDetailsHeader;
+    var headerProps = {
+        columns: columns,
+        selectionMode: selectionMode,
+        checkboxVisibility: checkboxVisibility,
+        isAllSelected: isAllSelected,
+        isPartiallySelected: isPartiallySelected,
+        onToggleSelectAll: onToggleSelectAll,
+    };
+    var defaultRender = function (renderProps) { return (React.createElement("div", { role: "row", className: classes.headerRow, style: __assign({ gridTemplateColumns: gridTemplateColumns }, style) },
+        showSelectionColumn && (React.createElement("div", { role: "columnheader", "aria-colindex": 1, "aria-label": ariaLabelForSelectionColumn, className: classes.selectionCell }, renderProps.selectionMode === SelectionMode.multiple && (React.createElement(Checkbox, { checked: renderProps.isPartiallySelected ? 'mixed' : renderProps.isAllSelected, "aria-label": ariaLabelForSelectAllCheckbox, onChange: function (event) { return renderProps.onToggleSelectAll(event); } })))),
+        renderProps.columns.map(function (column, columnIndex) {
+            var _a;
+            var isActionable = column.columnActionsMode !== ColumnActionsMode.disabled;
+            var isDraggable = isColumnDraggable(columnIndex);
+            var ariaSort = column.isSorted
+                ? column.isSortedDescending
+                    ? 'descending'
+                    : 'ascending'
+                : 'none';
+            var headerContent = column.onRenderHeader
+                ? column.onRenderHeader(column)
+                : column.name;
+            return (React.createElement("div", { key: column.key, role: "columnheader", "aria-colindex": columnIndex + (showSelectionColumn ? 2 : 1), "aria-sort": ariaSort, "aria-label": (_a = column.ariaLabel) !== null && _a !== void 0 ? _a : column.name, "data-details-column-key": column.key, draggable: isDraggable, className: mergeClasses(classes.headerCell, column.headerClassName), onContextMenu: function (event) {
+                    var _a;
+                    (_a = column.onColumnContextMenu) === null || _a === void 0 ? void 0 : _a.call(column, column, event);
+                    onColumnHeaderContextMenu === null || onColumnHeaderContextMenu === void 0 ? void 0 : onColumnHeaderContextMenu(column, event);
+                }, onDragStart: function (event) {
+                    var _a;
+                    draggedColumnIndexRef.current = columnIndex;
+                    columnDropLocationRef.current = ColumnDragEndLocation.outside;
+                    event.dataTransfer.effectAllowed = 'move';
+                    event.dataTransfer.setData('text/plain', column.key);
+                    (_a = columnReorderOptions === null || columnReorderOptions === void 0 ? void 0 : columnReorderOptions.onColumnDragStart) === null || _a === void 0 ? void 0 : _a.call(columnReorderOptions, true);
+                }, onDragOver: function (event) {
+                    if (draggedColumnIndexRef.current !== undefined && isColumnDraggable(columnIndex)) {
+                        event.preventDefault();
+                        event.dataTransfer.dropEffect = 'move';
+                    }
+                }, onDrop: function (event) {
+                    event.preventDefault();
+                    handleColumnDrop(columnIndex);
+                }, onDragEnd: function () {
+                    var _a, _b;
+                    (_a = columnReorderOptions === null || columnReorderOptions === void 0 ? void 0 : columnReorderOptions.onColumnDragStart) === null || _a === void 0 ? void 0 : _a.call(columnReorderOptions, false);
+                    (_b = columnReorderOptions === null || columnReorderOptions === void 0 ? void 0 : columnReorderOptions.onDragEnd) === null || _b === void 0 ? void 0 : _b.call(columnReorderOptions, columnDropLocationRef.current);
+                    draggedColumnIndexRef.current = undefined;
+                    columnDropLocationRef.current = ColumnDragEndLocation.outside;
+                } },
+                React.createElement(Button, { appearance: "subtle", size: "small", disabled: !isActionable, className: classes.headerButton, title: column.name, onClick: function (event) {
+                        var _a;
+                        (_a = column.onColumnClick) === null || _a === void 0 ? void 0 : _a.call(column, event, column);
+                        onColumnHeaderClick === null || onColumnHeaderClick === void 0 ? void 0 : onColumnHeaderClick(event, column);
+                    }, onKeyDown: function (event) { var _a; return (_a = column.onColumnKeyDown) === null || _a === void 0 ? void 0 : _a.call(column, event, column); } },
+                    isDraggable && (React.createElement(ReOrderDotsVertical16Regular, { "aria-hidden": true, className: classes.headerIcon })),
+                    column.icon,
+                    !column.isIconOnly && (renderDetailsListContent(headerContent, classes.headerLabel)),
+                    (column.isSorted || column.showSortIconWhenUnsorted) &&
+                        (column.isSortedDescending ? (React.createElement(ArrowSortDown16Regular, { "aria-label": column.sortDescendingAriaLabel, className: classes.headerIcon })) : (React.createElement(ArrowSortUp16Regular, { "aria-label": column.isSorted ? column.sortAscendingAriaLabel : column.sortableAriaLabel, className: classes.headerIcon }))),
+                    column.isFiltered && (React.createElement(Filter16Regular, { "aria-label": column.filterAriaLabel, className: classes.headerIcon })),
+                    column.columnActionsMode === ColumnActionsMode.hasDropdown && (React.createElement(ChevronDown16Regular, { className: classes.headerIcon }))),
+                column.isResizable && (React.createElement(Button, { appearance: "transparent", size: "small", "aria-label": strings.DetailsListResizeColumnAriaLabel.replace('{0}', column.name), className: classes.resizeHandle, onClick: function (event) { return event.stopPropagation(); }, onDoubleClick: function () { return autoFitColumn(column, columnIndex); }, onPointerDown: function (event) { return beginColumnResize(event, column, columnIndex); }, onKeyDown: function (event) {
+                        if (event.key === 'ArrowLeft') {
+                            event.preventDefault();
+                            resizeColumn(column, columnIndex, columnWidths[column.key] - COLUMN_RESIZE_KEYBOARD_STEP);
+                        }
+                        else if (event.key === 'ArrowRight') {
+                            event.preventDefault();
+                            resizeColumn(column, columnIndex, columnWidths[column.key] + COLUMN_RESIZE_KEYBOARD_STEP);
+                        }
+                        else if (event.key === 'Home') {
+                            event.preventDefault();
+                            resizeColumn(column, columnIndex, column.minWidth);
+                        }
+                        else if (event.key === 'End' && column.maxWidth !== undefined) {
+                            event.preventDefault();
+                            resizeColumn(column, columnIndex, column.maxWidth);
+                        }
+                    } }))));
+        }))); };
+    return (React.createElement(React.Fragment, null, onRenderDetailsHeader
+        ? onRenderDetailsHeader(headerProps, defaultRender)
+        : defaultRender(headerProps)));
+};
+//# sourceMappingURL=DetailsListHeader.js.map

package/lib/controls/DetailsList/DetailsListHeader.js.map

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

package/lib/controls/DetailsList/DetailsListRow.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import type { DetailsListKey, IColumn, IDetailsListProps } from './DetailsList.types';
+import { CheckboxVisibility, SelectionMode } from './DetailsList.types';
+import type { IDetailsListItemEntry } from './DetailsList.utils';
+import type { useDetailsListStyles } from './useDetailsListStyles';
+interface DetailsListRowProps<T> {
+    entry: IDetailsListItemEntry<T>;
+    entryIndex: number;
+    columns: readonly IColumn<T>[];
+    selectedKeySet: ReadonlySet<DetailsListKey>;
+    disabledKeySet: ReadonlySet<DetailsListKey>;
+    compact: boolean;
+    activeItemIndex: number;
+    setActiveItemIndex: React.Dispatch<React.SetStateAction<number>>;
+    dropTargetKey: DetailsListKey | undefined;
+    setDropTargetKey: React.Dispatch<React.SetStateAction<DetailsListKey | undefined>>;
+    draggedItemRef: React.MutableRefObject<{
+        item: T;
+        index: number;
+    } | undefined>;
+    effectiveRowHeight: number;
+    entryTop: number;
+    gridTemplateColumns: string;
+    isHeaderVisible: boolean;
+    shouldVirtualize: boolean;
+    showSelectionColumn: boolean;
+    selectionMode: SelectionMode;
+    selectionControlName: string;
+    checkboxVisibility: CheckboxVisibility;
+    ariaLabelForSelectionColumn: string;
+    isSelectedOnFocus: boolean;
+    classes: ReturnType<typeof useDetailsListStyles>;
+    rowStyle: React.CSSProperties | undefined;
+    cellStyle: React.CSSProperties | undefined;
+    selectItem: (item: T, itemIndex: number, event: React.SyntheticEvent, preserveExistingSelection: boolean) => void;
+    handleRowKeyDown: (event: React.KeyboardEvent<HTMLDivElement>, item: T, itemIndex: number) => void;
+    onActiveItemChanged: IDetailsListProps<T>['onActiveItemChanged'];
+    onItemInvoked: IDetailsListProps<T>['onItemInvoked'];
+    onItemContextMenu: IDetailsListProps<T>['onItemContextMenu'];
+    dragDropEvents: IDetailsListProps<T>['dragDropEvents'];
+    getRowAriaLabel: IDetailsListProps<T>['getRowAriaLabel'];
+    getRowAriaDescribedBy: IDetailsListProps<T>['getRowAriaDescribedBy'];
+    onRenderItemColumn: IDetailsListProps<T>['onRenderItemColumn'];
+    onRenderField: IDetailsListProps<T>['onRenderField'];
+    onRenderRow: IDetailsListProps<T>['onRenderRow'];
+}
+export declare const DetailsListRow: <T>({ entry, entryIndex, columns, selectedKeySet, disabledKeySet, compact, activeItemIndex, setActiveItemIndex, dropTargetKey, setDropTargetKey, draggedItemRef, effectiveRowHeight, entryTop, gridTemplateColumns, isHeaderVisible, shouldVirtualize, showSelectionColumn, selectionMode, selectionControlName, checkboxVisibility, ariaLabelForSelectionColumn, isSelectedOnFocus, classes, rowStyle, cellStyle, selectItem, handleRowKeyDown, onActiveItemChanged, onItemInvoked, onItemContextMenu, dragDropEvents, getRowAriaLabel, getRowAriaDescribedBy, onRenderItemColumn, onRenderField, onRenderRow, }: DetailsListRowProps<T>) => React.ReactElement;
+export {};
+//# sourceMappingURL=DetailsListRow.d.ts.map

package/lib/controls/DetailsList/DetailsListRow.d.ts.map

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

package/lib/controls/DetailsList/DetailsListRow.js

@@ -0,0 +1,124 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import * as strings from 'ControlStrings';
+import { Checkbox, mergeClasses, Radio } from '@fluentui/react-components';
+import { CheckboxVisibility, SelectionMode } from './DetailsList.types';
+import { renderDetailsListContent } from './DetailsListContent';
+var isInteractiveTarget = function (target) {
+    return target instanceof Element &&
+        Boolean(target.closest('a, button, input, select, textarea, [role="button"], [data-selection-disabled]'));
+};
+var DetailsListCell = function (_a) {
+    var _b;
+    var item = _a.item, itemIndex = _a.itemIndex, column = _a.column, isSelected = _a.isSelected, ariaColumnIndex = _a.ariaColumnIndex, classes = _a.classes, style = _a.style, onRenderItemColumn = _a.onRenderItemColumn, onRenderField = _a.onRenderField;
+    var rawContent = column.onRender
+        ? column.onRender(item, itemIndex, column)
+        : onRenderItemColumn
+            ? onRenderItemColumn(item, itemIndex, column)
+            : column.fieldName
+                ? String((_b = item[column.fieldName]) !== null && _b !== void 0 ? _b : '')
+                : '';
+    var fieldProps = {
+        item: item,
+        itemIndex: itemIndex,
+        isSelected: isSelected,
+        column: column,
+        children: rawContent,
+    };
+    var defaultRender = function (renderProps) { return (React.createElement("div", { role: renderProps.column.isRowHeader ? 'rowheader' : 'gridcell', "aria-colindex": ariaColumnIndex, "data-details-column-key": renderProps.column.key, className: mergeClasses(classes.cell, renderProps.column.isPadded && classes.paddedCell, renderProps.column.isMultiline && classes.multilineCell, renderProps.column.isRowHeader && classes.rowHeaderCell, renderProps.column.className), style: style, title: typeof renderProps.children === 'string' || typeof renderProps.children === 'number'
+            ? String(renderProps.children)
+            : undefined }, renderDetailsListContent(renderProps.children, classes.cellText))); };
+    return React.createElement(React.Fragment, null, onRenderField ? onRenderField(fieldProps, defaultRender) : defaultRender(fieldProps));
+};
+export var DetailsListRow = function (_a) {
+    var entry = _a.entry, entryIndex = _a.entryIndex, columns = _a.columns, selectedKeySet = _a.selectedKeySet, disabledKeySet = _a.disabledKeySet, compact = _a.compact, activeItemIndex = _a.activeItemIndex, setActiveItemIndex = _a.setActiveItemIndex, dropTargetKey = _a.dropTargetKey, setDropTargetKey = _a.setDropTargetKey, draggedItemRef = _a.draggedItemRef, effectiveRowHeight = _a.effectiveRowHeight, entryTop = _a.entryTop, gridTemplateColumns = _a.gridTemplateColumns, isHeaderVisible = _a.isHeaderVisible, shouldVirtualize = _a.shouldVirtualize, showSelectionColumn = _a.showSelectionColumn, selectionMode = _a.selectionMode, selectionControlName = _a.selectionControlName, checkboxVisibility = _a.checkboxVisibility, ariaLabelForSelectionColumn = _a.ariaLabelForSelectionColumn, isSelectedOnFocus = _a.isSelectedOnFocus, classes = _a.classes, rowStyle = _a.rowStyle, cellStyle = _a.cellStyle, selectItem = _a.selectItem, handleRowKeyDown = _a.handleRowKeyDown, onActiveItemChanged = _a.onActiveItemChanged, onItemInvoked = _a.onItemInvoked, onItemContextMenu = _a.onItemContextMenu, dragDropEvents = _a.dragDropEvents, getRowAriaLabel = _a.getRowAriaLabel, getRowAriaDescribedBy = _a.getRowAriaDescribedBy, onRenderItemColumn = _a.onRenderItemColumn, onRenderField = _a.onRenderField, onRenderRow = _a.onRenderRow;
+    var item = entry.item, itemIndex = entry.itemIndex, itemKey = entry.key;
+    var isSelected = selectedKeySet.has(itemKey);
+    var isDisabled = disabledKeySet.has(itemKey);
+    var rowProps = {
+        item: item,
+        itemIndex: itemIndex,
+        itemKey: itemKey,
+        columns: columns,
+        isSelected: isSelected,
+        compact: compact,
+        disabled: isDisabled,
+        onToggleSelection: function (event) { return selectItem(item, itemIndex, event, true); },
+        onInvoke: function (event) { return onItemInvoked === null || onItemInvoked === void 0 ? void 0 : onItemInvoked(item, itemIndex, event); },
+    };
+    var defaultRender = function (renderProps) {
+        var _a, _b;
+        return (React.createElement("div", { role: "row", "aria-rowindex": entryIndex + (isHeaderVisible ? 2 : 1), "aria-selected": selectionMode === SelectionMode.none ? undefined : renderProps.isSelected, "aria-disabled": renderProps.disabled || undefined, "aria-label": getRowAriaLabel === null || getRowAriaLabel === void 0 ? void 0 : getRowAriaLabel(renderProps.item), "aria-describedby": getRowAriaDescribedBy === null || getRowAriaDescribedBy === void 0 ? void 0 : getRowAriaDescribedBy(renderProps.item), "data-details-row-index": renderProps.itemIndex, tabIndex: activeItemIndex === renderProps.itemIndex ? 0 : -1, draggable: Boolean((_b = (_a = dragDropEvents === null || dragDropEvents === void 0 ? void 0 : dragDropEvents.canDrag) === null || _a === void 0 ? void 0 : _a.call(dragDropEvents, renderProps.item, renderProps.itemIndex)) !== null && _b !== void 0 ? _b : dragDropEvents), className: mergeClasses(classes.row, renderProps.isSelected && classes.selectedRow, renderProps.disabled && classes.disabledRow, dropTargetKey === renderProps.itemKey && classes.dropTargetRow), style: __assign(__assign({ gridTemplateColumns: gridTemplateColumns, minHeight: effectiveRowHeight, height: effectiveRowHeight }, rowStyle), (shouldVirtualize
+                ? {
+                    position: 'absolute',
+                    top: entryTop,
+                    right: 0,
+                    left: 0,
+                }
+                : {})), onClick: function (event) {
+                if (!isInteractiveTarget(event.target)) {
+                    selectItem(renderProps.item, renderProps.itemIndex, event, false);
+                }
+            }, onDoubleClick: function (event) { return onItemInvoked === null || onItemInvoked === void 0 ? void 0 : onItemInvoked(renderProps.item, renderProps.itemIndex, event); }, onContextMenu: function (event) {
+                if ((onItemContextMenu === null || onItemContextMenu === void 0 ? void 0 : onItemContextMenu(renderProps.item, renderProps.itemIndex, event)) !== true) {
+                    event.preventDefault();
+                }
+            }, onFocus: function (event) {
+                setActiveItemIndex(renderProps.itemIndex);
+                onActiveItemChanged === null || onActiveItemChanged === void 0 ? void 0 : onActiveItemChanged(renderProps.item, renderProps.itemIndex, event);
+                if (isSelectedOnFocus && !renderProps.isSelected) {
+                    selectItem(renderProps.item, renderProps.itemIndex, event, false);
+                }
+            }, onKeyDown: function (event) { return handleRowKeyDown(event, renderProps.item, renderProps.itemIndex); }, onDragStart: function (event) {
+                var _a;
+                draggedItemRef.current = { item: renderProps.item, index: renderProps.itemIndex };
+                event.dataTransfer.effectAllowed = 'move';
+                event.dataTransfer.setData('text/plain', String(renderProps.itemKey));
+                (_a = dragDropEvents === null || dragDropEvents === void 0 ? void 0 : dragDropEvents.onDragStart) === null || _a === void 0 ? void 0 : _a.call(dragDropEvents, renderProps.item, renderProps.itemIndex, event);
+            }, onDragEnter: function (event) {
+                var _a, _b, _c;
+                var draggedItem = draggedItemRef.current;
+                if (draggedItem &&
+                    ((_b = (_a = dragDropEvents === null || dragDropEvents === void 0 ? void 0 : dragDropEvents.canDrop) === null || _a === void 0 ? void 0 : _a.call(dragDropEvents, draggedItem.item, renderProps.item, renderProps.itemIndex)) !== null && _b !== void 0 ? _b : true)) {
+                    setDropTargetKey(renderProps.itemKey);
+                    (_c = dragDropEvents === null || dragDropEvents === void 0 ? void 0 : dragDropEvents.onDragEnter) === null || _c === void 0 ? void 0 : _c.call(dragDropEvents, renderProps.item, renderProps.itemIndex, event);
+                }
+            }, onDragOver: function (event) {
+                if (dropTargetKey === renderProps.itemKey) {
+                    event.preventDefault();
+                    event.dataTransfer.dropEffect = 'move';
+                }
+            }, onDragLeave: function (event) {
+                var _a;
+                if (!event.currentTarget.contains(event.relatedTarget)) {
+                    setDropTargetKey(undefined);
+                    (_a = dragDropEvents === null || dragDropEvents === void 0 ? void 0 : dragDropEvents.onDragLeave) === null || _a === void 0 ? void 0 : _a.call(dragDropEvents, renderProps.item, renderProps.itemIndex, event);
+                }
+            }, onDrop: function (event) {
+                var _a;
+                event.preventDefault();
+                var draggedItem = draggedItemRef.current;
+                if (draggedItem) {
+                    (_a = dragDropEvents === null || dragDropEvents === void 0 ? void 0 : dragDropEvents.onDrop) === null || _a === void 0 ? void 0 : _a.call(dragDropEvents, draggedItem.item, renderProps.item, renderProps.itemIndex, event);
+                }
+                setDropTargetKey(undefined);
+            }, onDragEnd: function (event) {
+                var _a;
+                (_a = dragDropEvents === null || dragDropEvents === void 0 ? void 0 : dragDropEvents.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(dragDropEvents, renderProps.item, renderProps.itemIndex, event);
+                draggedItemRef.current = undefined;
+                setDropTargetKey(undefined);
+            } },
+            showSelectionColumn && (React.createElement("div", { role: "gridcell", "aria-colindex": 1, "aria-label": ariaLabelForSelectionColumn, className: mergeClasses(classes.selectionCell, checkboxVisibility === CheckboxVisibility.onHover &&
+                    !renderProps.isSelected &&
+                    classes.selectionCellOnHover) }, selectionMode === SelectionMode.single ? (React.createElement(Radio, { name: selectionControlName, value: String(renderProps.itemKey), checked: renderProps.isSelected, disabled: renderProps.disabled, "aria-label": strings.DetailsListSelectRowAriaLabel.replace('{0}', String(renderProps.itemIndex + 1)), onChange: function (event) {
+                    event.stopPropagation();
+                    renderProps.onToggleSelection(event);
+                } })) : (React.createElement(Checkbox, { checked: renderProps.isSelected, disabled: renderProps.disabled, "aria-label": strings.DetailsListSelectRowAriaLabel.replace('{0}', String(renderProps.itemIndex + 1)), onChange: function (event) {
+                    event.stopPropagation();
+                    renderProps.onToggleSelection(event);
+                } })))),
+            renderProps.columns.map(function (column, columnIndex) { return (React.createElement(DetailsListCell, { key: column.key, item: renderProps.item, itemIndex: renderProps.itemIndex, column: column, isSelected: renderProps.isSelected, ariaColumnIndex: columnIndex + (showSelectionColumn ? 2 : 1), classes: classes, style: cellStyle, onRenderItemColumn: onRenderItemColumn, onRenderField: onRenderField })); })));
+    };
+    return React.createElement(React.Fragment, null, onRenderRow ? onRenderRow(rowProps, defaultRender) : defaultRender(rowProps));
+};
+//# sourceMappingURL=DetailsListRow.js.map