From c39dc1c84a352dd1b4398b0a4f945eec92fd2e70 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Fri, 26 Mar 2021 12:09:00 -0700 Subject: [PATCH 01/35] GroupedDetailsList will now have correct row-index for GroupHeader and correct offset is passed to DetailsRow which accounts for GroupHeader --- .../DetailsList/DetailsList.base.tsx | 41 +++++++++++++++---- 1 file changed, 34 insertions(+), 7 deletions(-) diff --git a/packages/react/src/components/DetailsList/DetailsList.base.tsx b/packages/react/src/components/DetailsList/DetailsList.base.tsx index 22adf7accac9c5..28dda2251311e8 100644 --- a/packages/react/src/components/DetailsList/DetailsList.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsList.base.tsx @@ -354,7 +354,8 @@ const DetailsListInner: React.ComponentType = ( const finalOnRenderDetailsGroupHeader = React.useMemo(() => { return onRenderDetailsGroupHeader ? (groupHeaderProps: IGroupDividerProps, defaultRender?: IRenderFunction) => { - const { ariaPosInSet, ariaSetSize } = groupHeaderProps; + const { groups, groupIndex } = groupHeaderProps; + const rowCount = getTotalRowCount(groups, groupIndex!); return onRenderDetailsGroupHeader( { @@ -370,22 +371,23 @@ const DetailsListInner: React.ComponentType = ( ariaColSpan: adjustedColumns.length, ariaPosInSet: undefined, ariaSetSize: undefined, - ariaRowCount: ariaSetSize ? ariaSetSize + (isHeaderVisible ? 1 : 0) : undefined, - ariaRowIndex: ariaPosInSet ? ariaPosInSet + (isHeaderVisible ? 1 : 0) : undefined, + ariaRowCount: undefined, + ariaRowIndex: groupIndex !== undefined ? rowCount + (isHeaderVisible ? 1 : 0) : undefined, }, defaultRender, ); } : (groupHeaderProps: IGroupDividerProps, defaultRender: IRenderFunction) => { - const { ariaPosInSet, ariaSetSize } = groupHeaderProps; + const { groups, groupIndex } = groupHeaderProps; + const rowCount = getTotalRowCount(groups, groupIndex!); return defaultRender({ ...groupHeaderProps, ariaColSpan: adjustedColumns.length, ariaPosInSet: undefined, ariaSetSize: undefined, - ariaRowCount: ariaSetSize ? ariaSetSize + (isHeaderVisible ? 1 : 0) : undefined, - ariaRowIndex: ariaPosInSet ? ariaPosInSet + (isHeaderVisible ? 1 : 0) : undefined, + ariaRowCount: undefined, + ariaRowIndex: groupIndex !== undefined ? rowCount + (isHeaderVisible ? 1 : 0) : undefined, }); }; }, [ @@ -432,10 +434,12 @@ const DetailsListInner: React.ComponentType = ( ? composeRenderFunction(props.onRenderRow, onRenderDefaultRow) : onRenderDefaultRow; + const numOfGroupHeadersBeforeItem: number = groups ? getNumGroupHeaders(groups, index) : 0; + const rowProps: IDetailsRowProps = { item: item, itemIndex: index, - flatIndexOffset: isHeaderVisible ? 2 : 1, + flatIndexOffset: (isHeaderVisible ? 2 : 1) + numOfGroupHeadersBeforeItem, compact, columns: adjustedColumns, groupNestingDepth: nestingDepth, @@ -1407,3 +1411,26 @@ function getGroupNestingDepth(groups: IDetailsListProps['groups']): number { return level; } + +function getNumGroupHeaders(groups: IDetailsListProps['groups'], index: number): number { + let numOfGroupHeadersPassed = 0; + + for (const group of groups!) { + const { startIndex } = group; + if (startIndex <= index) numOfGroupHeadersPassed++; + else break; + } + + return numOfGroupHeadersPassed; +} + +function getTotalRowCount(groups: IDetailsListProps['groups'], groupIndex: number): number { + let rowCount = 1; + + for (let i = 0; i < groupIndex; i++) { + const group = groups![i]; + rowCount += group.count + 1; + } + + return rowCount; +} From 4e23496b34bb7a9ad61afea8b1ee05d1fc798703 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Fri, 26 Mar 2021 12:11:00 -0700 Subject: [PATCH 02/35] DetailsRow now takes groups as a prop which is used to determine aria-posinset for GroupedList --- .../components/DetailsList/DetailsRow.base.tsx | 17 +++++++++++++++-- .../components/DetailsList/DetailsRow.types.ts | 7 +++++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/DetailsList/DetailsRow.base.tsx b/packages/react/src/components/DetailsList/DetailsRow.base.tsx index 58ffbbaaad4928..5be0d6fed592ce 100644 --- a/packages/react/src/components/DetailsList/DetailsRow.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsRow.base.tsx @@ -14,7 +14,7 @@ import { GroupSpacer } from '../GroupedList/GroupSpacer'; import { DetailsRowFields } from './DetailsRowFields'; import { FocusZone, FocusZoneDirection, IFocusZone } from '../../FocusZone'; import { SelectionMode, SELECTION_CHANGE } from '../../Selection'; -import { CollapseAllVisibility } from '../../GroupedList'; +import { CollapseAllVisibility, IGroup } from '../../GroupedList'; import { IDragDropOptions } from '../../DragDrop'; import { IDetailsRowBaseProps } from './DetailsRow.types'; import { IDetailsRowCheckProps } from './DetailsRowCheck.types'; @@ -202,6 +202,7 @@ export class DetailsRowBase extends React.Component= group.startIndex && itemIndex < group.startIndex + group.count) { + return group; + } + } +} diff --git a/packages/react/src/components/DetailsList/DetailsRow.types.ts b/packages/react/src/components/DetailsList/DetailsRow.types.ts index 851649dc1ffb68..d60f48eee601c4 100644 --- a/packages/react/src/components/DetailsList/DetailsRow.types.ts +++ b/packages/react/src/components/DetailsList/DetailsRow.types.ts @@ -9,6 +9,7 @@ import { CollapseAllVisibility } from '../GroupedList/GroupedList.types'; import { IBaseProps, IRefObject, IStyleFunctionOrObject, IRenderFunction } from '../../Utilities'; import { IDetailsRowCheckProps, IDetailsCheckboxProps } from './DetailsRowCheck.types'; import { IDetailsRowFieldsProps } from './DetailsRowFields.types'; +import { IGroup } from '../GroupedList/index'; /** * {@docCategory DetailsList} @@ -203,6 +204,12 @@ export interface IDetailsRowBaseProps * @defaultvalue true */ useFastIcons?: boolean; + + /** + * Grouping Instructions. + * When using GroupedList, this needs to be passed in order to calculate the correct aria-posinset value. + */ + groups?: IGroup[]; } /** From 710aeae88ed74b9a5b105187ae965c3d1a3bc539 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Fri, 26 Mar 2021 12:15:59 -0700 Subject: [PATCH 03/35] updated GroupedList examples to pass groups prop to DetailsRow --- .../src/react/GroupedList/GroupedList.Basic.Example.tsx | 1 + .../src/react/GroupedList/GroupedList.CustomCheckbox.Example.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react-examples/src/react/GroupedList/GroupedList.Basic.Example.tsx b/packages/react-examples/src/react/GroupedList/GroupedList.Basic.Example.tsx index 7acea90d006492..9cfb8872f1a70c 100644 --- a/packages/react-examples/src/react/GroupedList/GroupedList.Basic.Example.tsx +++ b/packages/react-examples/src/react/GroupedList/GroupedList.Basic.Example.tsx @@ -35,6 +35,7 @@ export const GroupedListBasicExample: React.FunctionComponent = () => { return item && typeof itemIndex === 'number' && itemIndex > -1 ? ( { (nestingDepth?: number, item?: IExampleItem, itemIndex?: number): React.ReactNode => ( Date: Fri, 26 Mar 2021 12:24:23 -0700 Subject: [PATCH 04/35] updated react api file --- packages/react/etc/react.api.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md index 23add063c29139..8534bdfd8937df 100644 --- a/packages/react/etc/react.api.md +++ b/packages/react/etc/react.api.md @@ -3897,6 +3897,7 @@ export interface IDetailsRowBaseProps extends Pick string; getRowAriaLabel?: (item: any) => string; + groups?: IGroup[]; item: any; itemIndex: number; onDidMount?: (row?: DetailsRowBase) => void; From 2db5b0ad57aa3f0ea0f8006536027771897ec2fa Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Fri, 26 Mar 2021 12:38:24 -0700 Subject: [PATCH 05/35] updated detailsrow documentationa and minor fix --- packages/react/src/components/DetailsList/DetailsRow.base.tsx | 2 +- packages/react/src/components/DetailsList/DetailsRow.types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/DetailsList/DetailsRow.base.tsx b/packages/react/src/components/DetailsList/DetailsRow.base.tsx index 5be0d6fed592ce..b385ce45492aaa 100644 --- a/packages/react/src/components/DetailsList/DetailsRow.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsRow.base.tsx @@ -446,7 +446,7 @@ function getSelectionState(props: IDetailsRowBaseProps): IDetailsRowSelectionSta } function getItemGroup(groups: IDetailsRowBaseProps['groups'], itemIndex: number): IGroup | undefined { - for (const group of groups) { + for (const group of groups!) { if (itemIndex >= group.startIndex && itemIndex < group.startIndex + group.count) { return group; } diff --git a/packages/react/src/components/DetailsList/DetailsRow.types.ts b/packages/react/src/components/DetailsList/DetailsRow.types.ts index d60f48eee601c4..7e33a86860f660 100644 --- a/packages/react/src/components/DetailsList/DetailsRow.types.ts +++ b/packages/react/src/components/DetailsList/DetailsRow.types.ts @@ -207,7 +207,7 @@ export interface IDetailsRowBaseProps /** * Grouping Instructions. - * When using GroupedList, this needs to be passed in order to calculate the correct aria-posinset value. + * When using GroupedList, this needs to be passed in order to calculate the correct aria-posinset and aria-setsize values. */ groups?: IGroup[]; } From 9ac783eec291ac97e35b7c068cff40b852c1bef3 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Fri, 26 Mar 2021 12:51:05 -0700 Subject: [PATCH 06/35] updated react snapshots --- .../DetailsList/__snapshots__/DetailsList.test.tsx.snap | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap index 40f3dd9b2e0c00..be94551d439d7a 100644 --- a/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap +++ b/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap @@ -7129,6 +7129,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = ` >