Expose showRemoveButton on ExtendedPeoplePicker (#7904)

* Expose SuggestionItem X button to ExtendedPicker Adjust types to expose the SuggestionItem X button to the ExtendedPicker. Parameterize the extended people picker to accurately reflect its usage + the type constraints on it. * remove extra comment * changefile * update public api * make backwards compatible * regen api * apply suggestion from @JasonGore * remove TODO comment
microsoft · Feb 14, 2019 · 3551e64 · 3551e64
1 parent ea1c597
commit 3551e64
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 32 deletions.
diff --git a/...anges/office-ui-fabric-react/u-mahuangh-use-selection-remove-button_2019-02-05-21-36.json b/...anges/office-ui-fabric-react/u-mahuangh-use-selection-remove-button_2019-02-05-21-36.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix type IBaseFloatingPickerSuggestionProps in ExtendedPeoplePicker, expose showRemoveButtons",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts
@@ -1848,13 +1848,6 @@ interface IBaseFloatingPickerState {
   suggestionsVisible?: boolean;
 }
 
-// @public (undocumented)
-interface IBaseFloatingPickerSuggestionProps {
-  footerItemsProps?: ISuggestionsHeaderFooterProps[];
-  headerItemsProps?: ISuggestionsHeaderFooterProps[];
-  shouldSelectFirstItem?: () => boolean;
-}
-
 // @public
 interface IBasePicker<T> {
   focus: () => void;
@@ -12845,6 +12838,7 @@ module ZIndexes {
 // WARNING: Unsupported export: groupTwo
 // WARNING: Unsupported export: Fabric
 // WARNING: Unsupported export: Facepile
+// WARNING: Unsupported export: IBaseFloatingPickerSuggestionProps
 // WARNING: Unsupported export: FocusZoneTabbableElements
 // WARNING: Unsupported export: FocusZoneTabbableElements
 // WARNING: Unsupported export: Grid

diff --git a/...abric-react/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx b/...abric-react/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx
@@ -48,6 +48,7 @@ export class ExtendedPeoplePickerBasicExample extends React.Component<{}, IPeopl
     };
 
     this._suggestionProps = {
+      showRemoveButtons: true,
       headerItemsProps: [
         {
           renderItem: () => {

diff --git a/packages/office-ui-fabric-react/src/components/FloatingPicker/BaseFloatingPicker.tsx b/packages/office-ui-fabric-react/src/components/FloatingPicker/BaseFloatingPicker.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as stylesImport from './BaseFloatingPicker.scss';
 import { BaseComponent, css, KeyCodes } from '../../Utilities';
 import { Callout, DirectionalHint } from '../../Callout';
-import { IBaseFloatingPicker, IBaseFloatingPickerProps, IBaseFloatingPickerSuggestionProps } from './BaseFloatingPicker.types';
+import { IBaseFloatingPicker, IBaseFloatingPickerProps } from './BaseFloatingPicker.types';
 import { ISuggestionModel } from '../../Pickers';
 import { ISuggestionsControlProps } from './Suggestions/Suggestions.types';
 import { SuggestionsControl } from './Suggestions/SuggestionsControl';
@@ -167,7 +167,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
           ref={this._resolveRef('suggestionsControl')}
           completeSuggestion={this.completeSuggestion}
           shouldLoopSelection={false}
-          {...this.props.pickerSuggestionsProps as IBaseFloatingPickerSuggestionProps}
+          {...this.props.pickerSuggestionsProps}
         />
       </Callout>
     ) : null;

diff --git a/packages/office-ui-fabric-react/src/components/FloatingPicker/BaseFloatingPicker.types.ts b/packages/office-ui-fabric-react/src/components/FloatingPicker/BaseFloatingPicker.types.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ISuggestionModel } from '../../Pickers';
 import { IPersonaProps } from '../../Persona';
-import { ISuggestionsHeaderFooterProps } from './Suggestions/Suggestions.types';
+import { ISuggestionsControlProps } from './Suggestions/Suggestions.types';
 import { SuggestionsStore } from './Suggestions/SuggestionsStore';
 import { IRefObject } from '../../Utilities';
 
@@ -143,18 +143,10 @@ export interface IBaseFloatingPickerProps<T> extends React.ClassAttributes<any>
   suggestionItems?: T[];
 }
 
-export interface IBaseFloatingPickerSuggestionProps {
-  /**
-   * Whether or not the first selectable item in the suggestions list should be selected
-   */
-  shouldSelectFirstItem?: () => boolean;
-
-  /**
-   * The header items props
-   */
-  headerItemsProps?: ISuggestionsHeaderFooterProps[];
-  /**
-   * The footer items props
-   */
-  footerItemsProps?: ISuggestionsHeaderFooterProps[];
-}
+/**
+ * Props which are passed on to the inner Suggestions component
+ */
+export type IBaseFloatingPickerSuggestionProps = Pick<
+  ISuggestionsControlProps<any>,
+  'shouldSelectFirstItem' | 'headerItemsProps' | 'footerItemsProps' | 'showRemoveButtons'
+>;
diff --git a/...s/office-ui-fabric-react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx b/...s/office-ui-fabric-react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx
@@ -267,13 +267,7 @@ export class SuggestionsControl<T> extends BaseComponent<ISuggestionsControlProp
   protected _renderSuggestions(): JSX.Element {
     const TypedSuggestions = this.SuggestionsOfProperType;
 
-    return (
-      <TypedSuggestions
-        ref={this._resolveRef('_suggestions')}
-        {...this.props as ISuggestionsCoreProps<T>}
-        suggestions={this.state.suggestions}
-      />
-    );
+    return <TypedSuggestions ref={this._resolveRef('_suggestions')} {...this.props} suggestions={this.state.suggestions} />;
   }
 
   /**