Fix backwards-compatibility of Group Selection additions (#24554)

* Fix backwards compatibility of Group Selection changes * Update changelogs
microsoft · Aug 27, 2022 · a3081ce · a3081ce
1 parent 740105e
commit a3081ce
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 17 deletions.
diff --git a/change/@fluentui-react-765cf0cb-5587-4d23-a713-9abf3a3ab577.json b/change/@fluentui-react-765cf0cb-5587-4d23-a713-9abf3a3ab577.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Fix backwards compatibility of Group Selection changes",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-utilities-7df700d2-c8fa-413e-8dc3-d7a8021bd475.json b/change/@fluentui-utilities-7df700d2-c8fa-413e-8dc3-d7a8021bd475.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Fix backwards compatibility of Group Selection changes",
+  "packageName": "@fluentui/utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
@@ -5982,6 +5982,7 @@ export interface IGroupDividerProps {
     loadingText?: string;
     onGroupHeaderClick?: (group: IGroup) => void;
     onGroupHeaderKeyUp?: (ev: React_2.KeyboardEvent<HTMLElement>, group?: IGroup) => void;
+    onRenderName?: IRenderFunction<IGroupHeaderProps>;
     onRenderTitle?: IRenderFunction<IGroupHeaderProps>;
     onToggleCollapse?: (group: IGroup) => void;
     onToggleSelectGroup?: (group: IGroup) => void;

diff --git a/packages/react/src/components/GroupedList/GroupHeader.base.tsx b/packages/react/src/components/GroupedList/GroupHeader.base.tsx
@@ -70,7 +70,6 @@ export class GroupHeaderBase extends React.Component<IGroupHeaderProps, IGroupHe
       isSelected = false,
       selected = false,
       indentWidth,
-      onRenderTitle = this._onRenderTitle,
       onRenderGroupHeaderCheckbox,
       isCollapsedGroupSelectVisible = true,
       expandButtonProps,
@@ -87,6 +86,10 @@ export class GroupHeaderBase extends React.Component<IGroupHeaderProps, IGroupHe
       useFastIcons,
     } = this.props;
 
+    const onRenderTitle = this.props.onRenderTitle
+      ? composeRenderFunction(this.props.onRenderTitle, this._onRenderTitle)
+      : this._onRenderTitle;
+
     const defaultCheckboxRender = useFastIcons ? this._fastDefaultCheckboxRender : this._defaultCheckboxRender;
 
     const onRenderCheckbox = onRenderGroupHeaderCheckbox
@@ -175,16 +178,7 @@ export class GroupHeaderBase extends React.Component<IGroupHeaderProps, IGroupHe
             </button>
           </div>
 
-          <div
-            className={this._classNames.title}
-            id={this._id}
-            onClick={this._onHeaderClick}
-            role="gridcell"
-            aria-colspan={this.props.ariaColSpan}
-            data-selection-invoke={true}
-          >
-            {onRenderTitle(this.props, this._onRenderTitle)}
-          </div>
+          {onRenderTitle(this.props)}
           {isLoadingVisible && <Spinner label={loadingText} />}
         </div>
       </div>
@@ -256,6 +250,31 @@ export class GroupHeaderBase extends React.Component<IGroupHeaderProps, IGroupHe
       return null;
     }
 
+    const onRenderName = props.onRenderName
+      ? composeRenderFunction(props.onRenderName, this._onRenderName)
+      : this._onRenderName;
+
+    return (
+      <div
+        className={this._classNames.title}
+        id={this._id}
+        onClick={this._onHeaderClick}
+        role="gridcell"
+        aria-colspan={this.props.ariaColSpan}
+        data-selection-invoke={true}
+      >
+        {onRenderName(props)}
+      </div>
+    );
+  };
+
+  private _onRenderName = (props: IGroupHeaderProps): JSX.Element | null => {
+    const { group } = props;
+
+    if (!group) {
+      return null;
+    }
+
     return (
       <>
         <span>{group.name}</span>

diff --git a/packages/react/src/components/GroupedList/GroupedList.types.ts b/packages/react/src/components/GroupedList/GroupedList.types.ts
@@ -344,6 +344,8 @@ export interface IGroupDividerProps {
 
   /** Override which allows the caller to provider a custom renderer for the GroupHeader title. */
   onRenderTitle?: IRenderFunction<IGroupHeaderProps>;
+  /** Override which allows the caller to provide a custom renderer for just the name. */
+  onRenderName?: IRenderFunction<IGroupHeaderProps>;
 
   /** Props for expand/collapse button
    * @deprecated Use {@link IGroupHeaderProps.expandButtonProps} instead.

diff --git a/packages/react/src/utilities/selection/SelectionZone.tsx b/packages/react/src/utilities/selection/SelectionZone.tsx
@@ -687,7 +687,7 @@ export class SelectionZone extends React.Component<ISelectionZoneProps, ISelecti
     if (selectionMode === SelectionMode.multiple) {
       if (this._isShiftPressed && !this._isTabPressed) {
         if (span !== undefined) {
-          selection.selectToRange(index, span, !isToggleModifierPressed);
+          selection.selectToRange?.(index, span, !isToggleModifierPressed);
         } else {
           selection.selectToIndex(index, !isToggleModifierPressed);
         }
@@ -761,7 +761,7 @@ export class SelectionZone extends React.Component<ISelectionZoneProps, ISelecti
       selection.setChangeEvents(false);
       selection.setAllSelected(false);
       if (span !== undefined) {
-        selection.setRangeSelected(index, span, true, true);
+        selection.setRangeSelected?.(index, span, true, true);
       } else {
         selection.setIndexSelected(index, true, true);
       }

diff --git a/packages/utilities/etc/utilities.api.md b/packages/utilities/etc/utilities.api.md
@@ -745,7 +745,7 @@ export interface ISelection<TItem = IObjectWithKey> {
     // (undocumented)
     selectToKey(key: string, clearSelection?: boolean): void;
     // (undocumented)
-    selectToRange(index: number, count: number, clearSelection?: boolean): void;
+    selectToRange?(index: number, count: number, clearSelection?: boolean): void;
     // (undocumented)
     setAllSelected(isAllSelected: boolean): void;
     // (undocumented)
@@ -759,7 +759,7 @@ export interface ISelection<TItem = IObjectWithKey> {
     // (undocumented)
     setModal?(isModal: boolean): void;
     // (undocumented)
-    setRangeSelected(fromIndex: number, count: number, isSelected: boolean, shouldAnchor: boolean): void;
+    setRangeSelected?(fromIndex: number, count: number, isSelected: boolean, shouldAnchor: boolean): void;
     // (undocumented)
     toggleAllSelected(): void;
     // (undocumented)

diff --git a/packages/utilities/src/selection/Selection.ts b/packages/utilities/src/selection/Selection.ts
@@ -374,6 +374,9 @@ export class Selection<TItem = IObjectWithKey> implements ISelection<TItem> {
       return;
     }
 
+    // Clamp the index.
+    index = Math.min(Math.max(0, index), this._items.length - 1);
+
     // No-op on out of bounds selections.
     if (index < 0 || index >= this._items.length) {
       return;
@@ -417,6 +420,12 @@ export class Selection<TItem = IObjectWithKey> implements ISelection<TItem> {
       return;
     }
 
+    // Clamp the index.
+    fromIndex = Math.min(Math.max(0, fromIndex), this._items.length - 1);
+
+    // Clamp the range.
+    count = Math.min(Math.max(0, count), this._items.length - fromIndex);
+
     // No-op on out of bounds selections.
     if (fromIndex < 0 || fromIndex >= this._items.length || count === 0) {
       return;

diff --git a/packages/utilities/src/selection/Selection.types.ts b/packages/utilities/src/selection/Selection.types.ts
@@ -55,15 +55,15 @@ export interface ISelection<TItem = IObjectWithKey> {
   setAllSelected(isAllSelected: boolean): void;
   setKeySelected(key: string, isSelected: boolean, shouldAnchor: boolean): void;
   setIndexSelected(index: number, isSelected: boolean, shouldAnchor: boolean): void;
-  setRangeSelected(fromIndex: number, count: number, isSelected: boolean, shouldAnchor: boolean): void;
+  setRangeSelected?(fromIndex: number, count: number, isSelected: boolean, shouldAnchor: boolean): void;
 
   setModal?(isModal: boolean): void; // TODO make non-optional on next breaking change
 
   // Write range selection methods.
 
   selectToKey(key: string, clearSelection?: boolean): void;
   selectToIndex(index: number, clearSelection?: boolean): void;
-  selectToRange(index: number, count: number, clearSelection?: boolean): void;
+  selectToRange?(index: number, count: number, clearSelection?: boolean): void;
 
   // Toggle helpers.