Merge pull request #108 from SharePoint/dev

Merge for version 1.7.0

CHANGELOG.JSON

@@ -1,5 +1,21 @@
 {
   "versions": [
+    {
+      "version": "1.7.0",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "`PeoplePicker`: added functionality to initialize the control with person(s) or group(s) [#98](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/98)",
+          "`PeoplePicker`: support for searching on contains [#93](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/93)",
+          "`PeoplePicker`: find user based on email address [#95](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/95)",
+          "Bundle size: statically reference Office UI Fabric components in the FieldRenderer controls [#107](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/107)"
+        ],
+        "fixes": [
+          "`FieldNameRenderer` onClick does not suppress default link behavior [#103](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/103)"
+        ]
+      },
+      "contributions": ["Octavie van Haaften", "Asish Padhy", "Mikael Svenson", "Alex Terentiev"]
+    },
     {
       "version": "1.6.0",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Releases
 
+## 1.7.0
+
+**Enhancements**
+
+- `PeoplePicker`: added functionality to initialize the control with person(s) or group(s) [#98](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/98)
+- `PeoplePicker`: support for searching on contains [#93](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/93)
+- `PeoplePicker`: find user based on email address [#95](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/95)
+- Bundle size: statically reference Office UI Fabric components in the FieldRenderer controls [#107](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/107)
+
+**Fixes**
+
+- `FieldNameRenderer` onClick does not suppress default link behavior [#103](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/103)
+
 ## 1.6.0
 
 **Enhancements**

docs/documentation/docs/about/release-notes.md

@@ -1,5 +1,18 @@
 # Releases
 
+## 1.7.0
+
+**Enhancements**
+
+- `PeoplePicker`: added functionality to initialize the control with person(s) or group(s) [#98](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/98)
+- `PeoplePicker`: support for searching on contains [#93](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/93)
+- `PeoplePicker`: find user based on email address [#95](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/95)
+- Bundle size: statically reference Office UI Fabric components in the FieldRenderer controls [#107](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/107)
+
+**Fixes**
+
+- `FieldNameRenderer` onClick does not suppress default link behavior [#103](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/103)
+
 ## 1.6.0
 
 **Enhancements**

docs/documentation/docs/controls/PeoplePicker.md

@@ -63,9 +63,10 @@ The People picker control can be configured with the following properties:
 | showtooltip | boolean | no | Defines if need a tooltip or not |
 | tooltip | string | no | Specify the tooltip message to display |
 | tooltipDirectional | DirectionalHint | no | Direction where the tooltip would be shown |
-| selectedItems | function | no | get the selected users in the control|
-| peoplePickerWPclassName | string | no | applies custom styling to the people picker element|
-| peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only|
+| selectedItems | function | no | get the selected users in the control |
+| peoplePickerWPclassName | string | no | applies custom styling to the people picker element |
+| peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only |
+| defaultSelectedUsers | string[] | no | Default selected user emails |
 
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/PeoplePicker)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "engines": {
     "node": ">=0.10.0"
   },

src/common/telemetry/version.ts

@@ -1 +1 @@
-export const version: string = "1.6.0";
+export const version: string = "1.7.0";

src/controls/fields/fieldAttachmentsRenderer/FieldAttachmentsRenderer.tsx

@@ -1,6 +1,7 @@
 import { override } from '@microsoft/decorators';
 import * as React from 'react';
-import { css, Icon } from 'office-ui-fabric-react';
+import { css } from 'office-ui-fabric-react/lib/Utilities';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';
 import * as telemetry from '../../../common/telemetry';
 

src/controls/fields/fieldBaseTextRenderer/FieldBaseTextRenderer.tsx

@@ -1,6 +1,6 @@
 import { override } from '@microsoft/decorators';
 import * as React from 'react';
-import { css } from 'office-ui-fabric-react';
+import { css } from 'office-ui-fabric-react/lib/Utilities';
 
 import styles from './FieldBaseTextRenderer.module.scss';
 import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';

src/controls/fields/fieldCommon/IFieldRendererProps.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ICssInput } from 'office-ui-fabric-react';
+import { ICssInput } from 'office-ui-fabric-react/lib/Utilities';
 
 /**
  * base properties for field renderes

src/controls/fields/fieldDateRenderer/FieldDateRenderer.tsx

@@ -1,6 +1,6 @@
 import { override } from '@microsoft/decorators';
 import * as React from 'react';
-import { css } from 'office-ui-fabric-react';
+import { css } from 'office-ui-fabric-react/lib/Utilities';
 import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';
 import { FieldBaseTextRenderer } from '../fieldBaseTextRenderer/FieldBaseTextRenderer';
 import * as telemetry from '../../../common/telemetry';

src/controls/fields/fieldFileTypeRenderer/FieldFileTypeRenderer.tsx

@@ -1,6 +1,7 @@
 import { override } from '@microsoft/decorators';
 import * as React from 'react';
-import { css, ISerializableObject, Icon } from 'office-ui-fabric-react';
+import { css, ISerializableObject } from 'office-ui-fabric-react/lib/Utilities';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';
 import { FileTypeIcon, IconType } from '../../fileTypeIcon';
 import * as telemetry from '../../../common/telemetry';

src/controls/fields/fieldLookupRenderer/FieldLookupRenderer.tsx

@@ -1,6 +1,9 @@
 import { override } from '@microsoft/decorators';
 import * as React from 'react';
-import { css, Dialog, DialogType, Link, Spinner, SpinnerSize } from 'office-ui-fabric-react';
+import { css } from 'office-ui-fabric-react/lib/Utilities';
+import { Dialog, DialogType } from 'office-ui-fabric-react/lib/Dialog';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
 
 import { ISPFieldLookupValue } from "../../../common/SPEntities";
 import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';
@@ -106,8 +109,8 @@ export class FieldLookupRenderer extends React.Component<IFieldLookupRendererPro
                         type: DialogType.close,
                         showCloseButton: true
                     }}>
-                        <Spinner size={SpinnerSize.large} />
-                    </Dialog>}
+                    <Spinner size={SpinnerSize.large} />
+                </Dialog>}
             </div>);
     }
 

src/controls/fields/fieldNameRenderer/FieldNameRenderer.tsx

@@ -1,15 +1,14 @@
 import { override } from '@microsoft/decorators';
 import * as React from 'react';
-import { css } from 'office-ui-fabric-react';
-
-import { Link, Icon } from 'office-ui-fabric-react';
+import { css } from 'office-ui-fabric-react/lib/Utilities';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 
 import { FieldBaseTextRenderer } from '../fieldBaseTextRenderer/FieldBaseTextRenderer';
 import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';
 import * as telemetry from '../../../common/telemetry';
 
 import styles from './FieldNameRenderer.module.scss';
-import { GeneralHelper } from "../../../common/utilities/GeneralHelper";
 
 export interface IFieldNameRendererProps extends IFieldRendererProps {
     /**
@@ -72,7 +71,7 @@ export class FieldNameRenderer extends React.Component<IFieldNameRendererProps,
         //
         // for now only signal for New documents is implemented
         //
-        let signal: JSX.Element = this.props.isNew ? <span className={css(styles.signal, styles.newItem)}><Icon iconName={'Glimmer'} className={css(styles.newIcon)}/></span> : null;
+        let signal: JSX.Element = this.props.isNew ? <span className={css(styles.signal, styles.newItem)}><Icon iconName={'Glimmer'} className={css(styles.newIcon)} /></span> : null;
         let value: JSX.Element;
 
         if (isLink) {
@@ -99,15 +98,15 @@ export class FieldNameRenderer extends React.Component<IFieldNameRendererProps,
         return <span className={css(styles.signalField, this.props.className)} style={this.props.cssProps}>
             {signal}
             <span className={styles.signalFieldValue}>
-                <span data-selection-invoke={'true'}>
-                    {value}
-                </span>
+                {value}
             </span>
         </span>;
     }
 
-    private _onClick(): void {
+    private _onClick(e): void {
         if (this.props.onClick) {
+            e.stopPropagation();
+            e.preventDefault();
             const args: IFieldNameClickEventArgs = this.props as IFieldNameClickEventArgs;
             this.props.onClick(args);
             return;

src/controls/fields/fieldTaxonomyRenderer/FieldTaxonomyRenderer.tsx

@@ -1,6 +1,6 @@
 import { override } from '@microsoft/decorators';
 import * as React from 'react';
-import { css } from 'office-ui-fabric-react';
+import { css } from 'office-ui-fabric-react/lib/Utilities';
 
 import { ITerm } from '../../../common/SPEntities';
 import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';

src/controls/fields/fieldTextRenderer/FieldTextRenderer.tsx

@@ -1,6 +1,6 @@
 import { override } from '@microsoft/decorators';
 import * as React from 'react';
-import { css } from 'office-ui-fabric-react';
+import { css } from 'office-ui-fabric-react/lib/Utilities';
 
 import styles from './FieldTextRenderer.module.scss';
 

src/controls/fields/fieldTitleRenderer/FieldTitleRenderer.tsx

@@ -1,6 +1,7 @@
 import { override } from '@microsoft/decorators';
 import * as React from 'react';
-import { Link, css } from 'office-ui-fabric-react';
+import { css } from 'office-ui-fabric-react/lib/Utilities';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 
 import { FieldBaseTextRenderer } from '../fieldBaseTextRenderer/FieldBaseTextRenderer';
 import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';

src/controls/fields/fieldUrlRenderer/FieldUrlRenderer.tsx

@@ -1,6 +1,7 @@
 import { override } from '@microsoft/decorators';
 import * as React from 'react';
-import { Link, css } from 'office-ui-fabric-react';
+import { css } from 'office-ui-fabric-react/lib/Utilities';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 
 import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';
 import * as telemetry from '../../../common/telemetry';

src/controls/fields/fieldUserRenderer/FieldUserHoverCard.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HoverCard, IExpandingCardProps } from 'office-ui-fabric-react';
+import { HoverCard, IExpandingCardProps } from 'office-ui-fabric-react/lib/HoverCard';
 
 import styles from './FieldUserRenderer.module.scss';
 

src/controls/fields/fieldUserRenderer/FieldUserRenderer.tsx

@@ -1,8 +1,14 @@
 import { override } from '@microsoft/decorators';
 import * as React from 'react';
-import { css } from 'office-ui-fabric-react';
+import { css } from 'office-ui-fabric-react/lib/Utilities';
 import * as _ from '@microsoft/sp-lodash-subset';
-import { HoverCard, IExpandingCardProps, DirectionalHint, Persona, IconButton, Button, ButtonType, PersonaSize, Spinner, SpinnerSize, Link, Icon } from 'office-ui-fabric-react';
+import { IExpandingCardProps } from 'office-ui-fabric-react/lib/HoverCard';
+import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHint';
+import { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';
+import { IconButton, Button, ButtonType } from 'office-ui-fabric-react/lib/Button';
+import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
 
 import { IPrincipal, IUserProfileProperties, IODataKeyValuePair } from '../../../common/SPEntities';
 import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps';

src/controls/iFrameDialog/IFrameDialog.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { Dialog, IDialogProps } from 'office-ui-fabric-react';
+import { Dialog, IDialogProps } from 'office-ui-fabric-react/lib/Dialog';
 import { IFrameDialogContent } from './IFrameDialogContent';
 import * as telemetry from '../../common/telemetry';
 

src/controls/peoplepicker/IPeoplePicker.ts

@@ -62,21 +62,17 @@ export interface IPeoplePickerProps {
    * Class Name for the Error Section
    */
   errorMessageclassName?: string;
+  /**
+   * Default Selected User Emails
+   */
+  defaultSelectedUsers? : string[];
 }
 
 export interface IPeoplePickerState {
   selectedPersons?: IPersonaProps[];
   mostRecentlyUsedPersons: IPersonaProps[];
   currentSelectedPersons: IPersonaProps[];
-  allPersons: [{
-    id: string,
-    imageUrl: string,
-    imageInitials: string,
-    primaryText: string, //Name
-    secondaryText: string, //Role
-    tertiaryText: string, //status
-    optionalText: string //stgring
-  }];
+  allPersons: IPeoplePickerUserItem[];
   delayResults?: boolean;
   currentPicker?: number | string;
   peoplePersonaMenu?: IPersonaProps[];
@@ -86,3 +82,13 @@ export interface IPeoplePickerState {
   peopleValidatorText? : string;
   showmessageerror: boolean;
 }
+
+export interface IPeoplePickerUserItem {
+  id: string;
+  imageUrl: string;
+  imageInitials: string;
+  primaryText: string; // name
+  secondaryText: string; // role
+  tertiaryText: string; // status
+  optionalText: string; // anything
+}