{
return "";
}
- const buttonsLocation = this.props.buttonsLocation ? this.props.buttonsLocation : CarouselButtonsLocation.top;
+ const buttonsLocation = this.props.buttonsLocation ? this.props.buttonsLocation : CarouselButtonsLocation.center;
let buttonsLocationCss = "";
switch (buttonsLocation) {
case CarouselButtonsLocation.top:
diff --git a/src/controls/carousel/ICarouselProps.ts b/src/controls/carousel/ICarouselProps.ts
index ffade1ae4..4c30103e5 100644
--- a/src/controls/carousel/ICarouselProps.ts
+++ b/src/controls/carousel/ICarouselProps.ts
@@ -82,12 +82,16 @@ export interface ICarouselProps {
/**
* Specifies the location of the buttons inside the container.
+ *
+ * Default: CarouselButtonsLocation.center
*/
- buttonsLocation: CarouselButtonsLocation;
+ buttonsLocation?: CarouselButtonsLocation;
/**
* Specifies the buttons container display mode.
+ *
+ * Default: CarouselButtonsDisplay.block
*/
- buttonsDisplay: CarouselButtonsDisplay;
+ buttonsDisplay?: CarouselButtonsDisplay;
/**
* Allows to specify own styles for carousel container.
@@ -221,4 +225,9 @@ export interface ICarouselProps {
*/
indicatorsContainerStyles?: ICssInput;
+ /**
+ * Allows to specify the height of the content. Can be used instead of providing styles for the content container.
+ */
+ contentHeight?: number;
+
}
diff --git a/src/controls/dynamicForm/DynamicForm.tsx b/src/controls/dynamicForm/DynamicForm.tsx
index edeaaf9b1..fa1d162d2 100644
--- a/src/controls/dynamicForm/DynamicForm.tsx
+++ b/src/controls/dynamicForm/DynamicForm.tsx
@@ -17,7 +17,6 @@ import { IDropdownOption } from "@fluentui/react/lib/Dropdown";
import { MessageBar, MessageBarType } from "@fluentui/react/lib/MessageBar";
import { ProgressIndicator } from "@fluentui/react/lib/ProgressIndicator";
import { IStackTokens, Stack } from "@fluentui/react/lib/Stack";
-import { Icon } from "@fluentui/react/lib/components/Icon/Icon";
import { DynamicField } from "./dynamicField";
import {
DateFormat,
@@ -45,6 +44,7 @@ import CustomFormattingHelper from "../../common/utilities/CustomFormatting";
// Dynamic Form Props / State
import { IDynamicFormProps } from "./IDynamicFormProps";
import { IDynamicFormState } from "./IDynamicFormState";
+import { Icon } from "@fluentui/react/lib/Icon";
const stackTokens: IStackTokens = { childrenGap: 20 };
@@ -921,11 +921,11 @@ export class DynamicForm extends React.Component<
try {
// Fetch form rendering information from SharePoint
- const listInfo = await this._spService.getListFormRenderInfo(listId);
+ const listInfo = await this._spService.getListFormRenderInfo(listId, this.webURL);
// Fetch additional information about fields from SharePoint
// (Number fields for min and max values, and fields with validation)
- const additionalInfo = await this._spService.getAdditionalListFormFieldInfo(listId);
+ const additionalInfo = await this._spService.getAdditionalListFormFieldInfo(listId, this.webURL);
const numberFields = additionalInfo.filter((f) => f.TypeAsString === "Number" || f.TypeAsString === "Currency");
// Build a dictionary of validation formulas and messages
@@ -1178,7 +1178,8 @@ export class DynamicForm extends React.Component<
const response = await this._spService.getSingleManagedMetadataLabel(
listId,
listItemId,
- field.InternalName
+ field.InternalName,
+ this.webURL
);
if (response) {
selectedTags.push({
@@ -1243,7 +1244,7 @@ export class DynamicForm extends React.Component<
}
dateFormat = field.DateFormat || "DateOnly";
- defaultDayOfWeek = (await this._spService.getRegionalWebSettings()).FirstDayOfWeek;
+ defaultDayOfWeek = (await this._spService.getRegionalWebSettings(this.webURL)).FirstDayOfWeek;
}
// Setup Thumbnail, Location and Boolean fields
@@ -1333,7 +1334,8 @@ export class DynamicForm extends React.Component<
listItemId,
file.fileName,
buffer,
- undefined
+ undefined,
+ this.webURL
);
}
};
diff --git a/src/controls/dynamicForm/dynamicField/DynamicField.tsx b/src/controls/dynamicForm/dynamicField/DynamicField.tsx
index e4d7be4cc..36518c544 100644
--- a/src/controls/dynamicForm/dynamicField/DynamicField.tsx
+++ b/src/controls/dynamicForm/dynamicField/DynamicField.tsx
@@ -3,7 +3,7 @@ import { sp } from '@pnp/sp/presets/all';
import '@pnp/sp/webs';
import * as strings from 'ControlStrings';
import { ActionButton } from '@fluentui/react/lib/Button';
-import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react/lib/components/Dropdown';
+import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react/lib/Dropdown';
import { DatePicker } from '@fluentui/react/lib/DatePicker';
import { Icon } from '@fluentui/react/lib/Icon';
import { Image } from '@fluentui/react/lib/Image';
@@ -16,7 +16,7 @@ import { DateTimePicker } from '../../dateTimePicker/DateTimePicker';
import { FilePicker, IFilePickerResult } from '../../filePicker';
import { ListItemPicker } from '../../listItemPicker';
import { LocationPicker } from '../../locationPicker';
-import { PeoplePicker, PrincipalType } from '../../peoplepicker';
+import { IPeoplePickerContext, PeoplePicker, PrincipalType } from '../../peoplepicker';
import { RichText } from '../../richText';
import { IPickerTerms, TaxonomyPicker } from '../../taxonomyPicker';
import styles from '../DynamicForm.module.scss';
@@ -94,6 +94,12 @@ export class DynamicField extends React.Component
{label};
@@ -378,7 +384,7 @@ export class DynamicField extends React.Component {
diff --git a/src/controls/fieldCollectionData/collectionIconField/CollectionIconField.tsx b/src/controls/fieldCollectionData/collectionIconField/CollectionIconField.tsx
index b8db38ad9..ab67b85d0 100644
--- a/src/controls/fieldCollectionData/collectionIconField/CollectionIconField.tsx
+++ b/src/controls/fieldCollectionData/collectionIconField/CollectionIconField.tsx
@@ -1,8 +1,8 @@
import * as React from 'react';
import styles from '../FieldCollectionData.module.scss';
import { ICollectionIconFieldProps } from '.';
-import { TextField } from '@fluentui/react/lib/components/TextField';
-import { Icon } from '@fluentui/react/lib/components/Icon';
+import { TextField } from '@fluentui/react/lib/TextField';
+import { Icon } from '@fluentui/react/lib/Icon';
export class CollectionIconField extends React.Component {
diff --git a/src/controls/fields/fieldUserRenderer/FieldUserRenderer.tsx b/src/controls/fields/fieldUserRenderer/FieldUserRenderer.tsx
index 02902995d..692e1fd6e 100644
--- a/src/controls/fields/fieldUserRenderer/FieldUserRenderer.tsx
+++ b/src/controls/fields/fieldUserRenderer/FieldUserRenderer.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { css } from '@fluentui/react/lib/Utilities';
import clone from 'lodash/clone';
import { IExpandingCardProps } from '@fluentui/react/lib/HoverCard';
-import { DirectionalHint } from '@fluentui/react/lib/common/DirectionalHint';
+import { DirectionalHint } from '@fluentui/react/lib/Callout';
import { Persona, PersonaSize } from '@fluentui/react/lib/Persona';
import { IconButton, Button, ButtonType } from '@fluentui/react/lib/Button';
import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
diff --git a/src/controls/filePicker/FilePicker.tsx b/src/controls/filePicker/FilePicker.tsx
index 3983116eb..32b78215e 100644
--- a/src/controls/filePicker/FilePicker.tsx
+++ b/src/controls/filePicker/FilePicker.tsx
@@ -5,12 +5,13 @@ import { IIconProps } from "@fluentui/react/lib/Icon";
import {
ActionButton,
PrimaryButton
-} from "@fluentui/react/lib/components/Button";
-import { Label } from "@fluentui/react/lib/components/Label";
+} from "@fluentui/react/lib/Button";
+
+import { Label } from "@fluentui/react/lib/Label";
import {
Panel,
PanelType
-} from "@fluentui/react/lib/components/Panel";
+} from "@fluentui/react/lib/Panel";
import {
INavLink,
INavLinkGroup,
diff --git a/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx b/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx
index 505db4609..cc707c005 100644
--- a/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx
+++ b/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx
@@ -4,7 +4,7 @@ import { ILinkFilePickerTabProps } from './ILinkFilePickerTabProps';
import { ILinkFilePickerTabState } from './ILinkFilePickerTabState';
import { GeneralHelper } from '../../../common/utilities/GeneralHelper';
import { IFilePickerResult } from '../FilePicker.types';
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
import { TextField } from '@fluentui/react/lib/TextField';
import { css } from '@fluentui/react/lib/Utilities';
@@ -34,7 +34,6 @@ export default class LinkFilePickerTab extends React.Component this._getErrorMessagePromise(value)}
autoAdjustHeight={false}
underlined={false}
@@ -64,7 +63,7 @@ export default class LinkFilePickerTab extends React.Component {
- const filePickerResult: IFilePickerResult = fileUrl && this._isUrl(fileUrl) ? {
+ const filePickerResult: IFilePickerResult = fileUrl ? {
fileAbsoluteUrl: fileUrl,
fileName: GeneralHelper.getFileNameFromUrl(fileUrl),
fileNameWithoutExtension: GeneralHelper.getFileNameWithoutExtension(fileUrl),
@@ -81,7 +80,7 @@ export default class LinkFilePickerTab extends React.Component => {
// DOn't give an error for blank or placeholder value, but don't make it a valid entry either
- if (value === undefined || value === 'https://') {
+ if (value === undefined || value === '') {
this.setState({ isValid: false });
return '';
}
@@ -89,7 +88,7 @@ export default class LinkFilePickerTab extends React.Component {
iconElm = ;
}
+ // Bind events
+ iconElm.props.onClick = this.props.onClick;
+ iconElm.props.onDoubleClick = this.props.onDoubleClick;
+ iconElm.props.onMouseEnter = this.props.onMouseEnter;
+ iconElm.props.onMouseLeave = this.props.onMouseLeave;
+ iconElm.props.onMouseOver = this.props.onMouseOver;
+ iconElm.props.onMouseUp = this.props.onMouseUp;
+
// Return the icon element
return iconElm;
}
diff --git a/src/controls/fileTypeIcon/IFileTypeIcon.ts b/src/controls/fileTypeIcon/IFileTypeIcon.ts
index a70ddf4fc..d2f2d7db7 100644
--- a/src/controls/fileTypeIcon/IFileTypeIcon.ts
+++ b/src/controls/fileTypeIcon/IFileTypeIcon.ts
@@ -1,3 +1,5 @@
+import { MouseEventHandler } from "react";
+
/**
* Available icon types
*/
@@ -225,11 +227,16 @@ export interface ImageInformation {
* Interface for the FileTypeIcon component properties
*/
export interface IFileTypeIconProps {
-
type: IconType;
application?: ApplicationType;
path?: string;
size?: ImageSize;
+ onClick?: MouseEventHandler | undefined;
+ onDoubleClick?: MouseEventHandler | undefined;
+ onMouseEnter?: MouseEventHandler | undefined;
+ onMouseLeave?: MouseEventHandler | undefined;
+ onMouseOver?: MouseEventHandler | undefined;
+ onMouseUp?: MouseEventHandler | undefined;
}
/**
diff --git a/src/controls/listItemComments/components/ConfirmDelete/ConfirmDelete.tsx b/src/controls/listItemComments/components/ConfirmDelete/ConfirmDelete.tsx
index b828481be..bc09f7993 100644
--- a/src/controls/listItemComments/components/ConfirmDelete/ConfirmDelete.tsx
+++ b/src/controls/listItemComments/components/ConfirmDelete/ConfirmDelete.tsx
@@ -4,7 +4,7 @@ import { ListItemCommentsStateContext } from "../ListItemCommentsStateProvider";
import { Dialog, DialogType, DialogFooter } from "@fluentui/react/lib/Dialog";
import { PrimaryButton, DefaultButton } from "@fluentui/react/lib/Button";
import { CommentItem } from "../Comments/CommentItem";
-import { DocumentCard } from "@fluentui/react/lib/components/DocumentCard";
+import { DocumentCard } from "@fluentui/react/lib/DocumentCard";
import { DocumentCardDetails } from "@fluentui/react/lib/DocumentCard";
import { Stack } from "@fluentui/react/lib/Stack";
import { useListItemCommentsStyles } from "../Comments/useListItemCommentsStyles";
diff --git a/src/controls/listItemPicker/IComboBoxListItemPickerProps.ts b/src/controls/listItemPicker/IComboBoxListItemPickerProps.ts
index 9e74e708f..30ee514a1 100644
--- a/src/controls/listItemPicker/IComboBoxListItemPickerProps.ts
+++ b/src/controls/listItemPicker/IComboBoxListItemPickerProps.ts
@@ -1,7 +1,7 @@
-import { IComboBoxOptionStyles, IComboBoxStyles } from "@fluentui/react/lib/components/ComboBox";
+import { IComboBoxOptionStyles, IComboBoxStyles } from "@fluentui/react/lib/ComboBox";
-import { IAutofillProps } from "@fluentui/react/lib/components/Autofill";
-import { IKeytipProps } from "@fluentui/react/lib/components/Keytip";
+import { IAutofillProps } from "@fluentui/react/lib/Autofill";
+import { IKeytipProps } from "@fluentui/react/lib/Keytip";
import { SPHttpClient } from '@microsoft/sp-http';
export interface IComboBoxListItemPickerProps {
diff --git a/src/controls/listItemPicker/ListItemPicker.tsx b/src/controls/listItemPicker/ListItemPicker.tsx
index 928bbcdb9..d4c982976 100644
--- a/src/controls/listItemPicker/ListItemPicker.tsx
+++ b/src/controls/listItemPicker/ListItemPicker.tsx
@@ -1,14 +1,13 @@
import * as strings from 'ControlStrings';
import * as React from "react";
import SPservice from "../../services/SPService";
-import { TagPicker } from "@fluentui/react/lib/components/pickers/TagPicker/TagPicker";
+import { ITag, TagPicker } from '@fluentui/react/lib/Pickers';
import { Label } from "@fluentui/react/lib/Label";
import { getId } from '@fluentui/react/lib/Utilities';
import { IListItemPickerProps } from "./IListItemPickerProps";
import { IListItemPickerState } from "./IListItemPickerState";
import * as telemetry from '../../common/telemetry';
import isEqual from 'lodash/isEqual';
-import { ITag } from '@fluentui/react/lib/components/pickers/TagPicker/TagPicker.types';
import { SPHelper } from '../../common/utilities/SPHelper';
import { Guid } from "@microsoft/sp-core-library"
diff --git a/src/controls/listPicker/ListPicker.tsx b/src/controls/listPicker/ListPicker.tsx
index 38d273803..5cb6ef0af 100644
--- a/src/controls/listPicker/ListPicker.tsx
+++ b/src/controls/listPicker/ListPicker.tsx
@@ -1,6 +1,6 @@
import { cloneDeep } from '@microsoft/sp-lodash-subset';
-import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react/lib/components/Dropdown';
-import { Spinner, SpinnerSize } from '@fluentui/react/lib/components/Spinner';
+import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react/lib/Dropdown';
+import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
import * as React from 'react';
import * as telemetry from '../../common/telemetry';
diff --git a/src/controls/listView/IListView.ts b/src/controls/listView/IListView.ts
index 6fed62c20..cd5b1fbd1 100644
--- a/src/controls/listView/IListView.ts
+++ b/src/controls/listView/IListView.ts
@@ -1,4 +1,4 @@
-import { IColumn, IGroup, SelectionMode, IDetailsRowProps } from '@fluentui/react/lib/components/DetailsList';
+import { IColumn, IGroup, SelectionMode, IDetailsRowProps } from '@fluentui/react/lib/DetailsList';
export { SelectionMode };
diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx
index 80c5067c0..de3189935 100644
--- a/src/controls/listView/ListView.tsx
+++ b/src/controls/listView/ListView.tsx
@@ -6,7 +6,7 @@ import { IRenderFunction } from '@fluentui/react/lib/Utilities';
import { mergeStyleSets } from '@fluentui/react/lib/Styling';
import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IGroup, IDetailsHeaderProps } from '@fluentui/react/lib/DetailsList';
import { IListViewProps, IListViewState, IViewField, IGrouping, GroupOrder } from './IListView';
-import { IColumn, IGroupRenderProps } from '@fluentui/react/lib/components/DetailsList';
+import { IColumn, IGroupRenderProps } from '@fluentui/react/lib/DetailsList';
import { findIndex, has, sortBy, isEqual, cloneDeep } from '@microsoft/sp-lodash-subset';
import { FileTypeIcon, IconType } from '../fileTypeIcon/index';
import * as strings from 'ControlStrings';
diff --git a/src/controls/map/Map.tsx b/src/controls/map/Map.tsx
index 8449e64c7..531f7e8c7 100644
--- a/src/controls/map/Map.tsx
+++ b/src/controls/map/Map.tsx
@@ -4,11 +4,11 @@ import styles from './Maps.module.scss';
import { IMapProps } from './IMapProps';
import { IMapState } from './IMapState';
import { ICoordinates, MapType, LocationInfo } from './IMap';
-import { Label } from '@fluentui/react/lib/components/Label';
+import { Label } from '@fluentui/react/lib/Label';
import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
-import { Icon } from "@fluentui/react/lib/components/Icon";
-import { PrimaryButton } from "@fluentui/react/lib/components/Button";
-import { TextField } from "@fluentui/react/lib/components/TextField";
+import { Icon } from "@fluentui/react/lib/Icon";
+import { PrimaryButton } from "@fluentui/react/lib/Button";
+import { TextField } from "@fluentui/react/lib/TextField";
import * as telemetry from '../../common/telemetry';
import { isEqual } from "@microsoft/sp-lodash-subset";
diff --git a/src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx b/src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx
index 08649ecc2..5567b78d7 100644
--- a/src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx
+++ b/src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx
@@ -11,7 +11,7 @@ import * as strings from 'ControlStrings';
import {
DefaultButton, IButtonStyles, IconButton, PrimaryButton
} from '@fluentui/react/lib/Button';
-import { IIconProps } from '@fluentui/react/lib/components/Icon';
+import { IIconProps } from '@fluentui/react/lib/Icon';
import { Label } from '@fluentui/react/lib/Label';
import {
Panel,
diff --git a/src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.tsx b/src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.tsx
index f133b35f7..152c41207 100644
--- a/src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.tsx
+++ b/src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.tsx
@@ -1,19 +1,17 @@
import React from 'react';
-import { BasePicker } from '@fluentui/react/lib/components/pickers/BasePicker';
import { IModernTermPickerProps,
ITermItemProps
} from './ModernTermPicker.types';
import { TermItem } from '../termItem/TermItem';
import { TermItemSuggestion } from '../termItem/TermItemSuggestion';
-import { IBasePickerStyleProps,
- IBasePickerStyles
- } from '@fluentui/react/lib/components/pickers/BasePicker.types';
-import { getStyles } from '@fluentui/react/lib/components/pickers/BasePicker.styles';
+
import { initializeComponentRef,
styled
} from '@fluentui/react/lib/Utilities';
-import { ISuggestionItemProps } from '@fluentui/react/lib/components/pickers/Suggestions/SuggestionsItem.types';
+
import { ITermInfo } from '@pnp/sp/taxonomy';
+import { BasePicker, IBasePickerStyleProps, IBasePickerStyles, ISuggestionItemProps } from '@fluentui/react/lib/Pickers';
+import { getStyles } from '@fluentui/react/lib/components/pickers/BasePicker.styles';
export class ModernTermPickerBase extends BasePicker {
public static defaultProps = {
diff --git a/src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.types.ts b/src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.types.ts
index 7bcbb1111..65f8b41c6 100644
--- a/src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.types.ts
+++ b/src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.types.ts
@@ -1,9 +1,8 @@
import { ITermInfo, ITermStoreInfo } from '@pnp/sp/taxonomy';
-import { IBasePickerProps } from '@fluentui/react/lib/components/pickers/BasePicker.types';
-import { IPickerItemProps } from '@fluentui/react/lib/components/pickers/PickerItem.types';
import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
import { IReadonlyTheme } from '@microsoft/sp-component-base';
+import { IBasePickerProps, IPickerItemProps } from '@fluentui/react/lib/Pickers';
export interface IModernTermPickerProps extends IBasePickerProps {
themeVariant?: IReadonlyTheme;
diff --git a/src/controls/modernTaxonomyPicker/termItem/TermItem.styles.ts b/src/controls/modernTaxonomyPicker/termItem/TermItem.styles.ts
index eddd099d8..a5e9b6af0 100644
--- a/src/controls/modernTaxonomyPicker/termItem/TermItem.styles.ts
+++ b/src/controls/modernTaxonomyPicker/termItem/TermItem.styles.ts
@@ -1,7 +1,7 @@
-import { ButtonGlobalClassNames } from "@fluentui/react/lib/components/Button/BaseButton.classNames";
import { getFocusStyle, getGlobalClassNames, HighContrastSelector } from "@fluentui/react/lib/Styling";
import { getRTL } from "@fluentui/react/lib/Utilities";
import { ITermItemStyleProps, ITermItemStyles } from "../modernTermPicker/ModernTermPicker.types";
+import { ButtonGlobalClassNames } from "@fluentui/react/lib/Button";
const GlobalClassNames = {
root: 'ms-TagItem',
diff --git a/src/controls/modernTaxonomyPicker/termItem/TermItem.tsx b/src/controls/modernTaxonomyPicker/termItem/TermItem.tsx
index 282dc459c..f02f85e72 100644
--- a/src/controls/modernTaxonomyPicker/termItem/TermItem.tsx
+++ b/src/controls/modernTaxonomyPicker/termItem/TermItem.tsx
@@ -1,8 +1,9 @@
-import { IconButton } from '@fluentui/react/lib/components/Button/IconButton/IconButton';
+
import { classNamesFunction, styled } from '@fluentui/react/lib/Utilities';
import * as React from 'react';
import { ITermItemProps, ITermItemStyleProps, ITermItemStyles } from '../modernTermPicker/ModernTermPicker.types';
import { getStyles } from './TermItem.styles';
+import { IconButton } from '@fluentui/react/lib/Button';
const getClassNames = classNamesFunction();
diff --git a/src/controls/monacoEditor/Error.tsx b/src/controls/monacoEditor/Error.tsx
index 7647cf491..bbd1c1473 100644
--- a/src/controls/monacoEditor/Error.tsx
+++ b/src/controls/monacoEditor/Error.tsx
@@ -1,5 +1,5 @@
-import { Stack } from "@fluentui/react/lib/components/Stack";
+import { Stack } from "@fluentui/react/lib/Stack";
import { MessageBarType, MessageBar } from "@fluentui/react/lib/MessageBar";
import * as React from "react";
diff --git a/src/controls/peoplepicker/IPeoplePicker.ts b/src/controls/peoplepicker/IPeoplePicker.ts
index 2eeb091db..3d6f1cec7 100644
--- a/src/controls/peoplepicker/IPeoplePicker.ts
+++ b/src/controls/peoplepicker/IPeoplePicker.ts
@@ -1,8 +1,7 @@
-import { BaseComponentContext } from '@microsoft/sp-component-base';
-import { IBasePickerStyles } from "@fluentui/react";
-import { DirectionalHint } from "@fluentui/react/lib/common/DirectionalHint";
-import { IPersonaProps } from "@fluentui/react/lib/components/Persona/Persona.types";
-import { PrincipalType } from ".";
+import { DirectionalHint } from '@fluentui/react/lib/Callout';
+import { IPersonaProps } from '@fluentui/react/lib/Persona';
+import { IBasePickerStyles } from '@fluentui/react/lib/Pickers';
+import { IPeoplePickerContext, PrincipalType } from ".";
/**
* Used to display a placeholder in case of no or temporary content. Button is optional.
@@ -12,7 +11,7 @@ export interface IPeoplePickerProps {
/**
* Context of the component
*/
- context: BaseComponentContext;
+ context: IPeoplePickerContext;
/**
* Text of the Control
*/
@@ -139,17 +138,6 @@ export interface IPeoplePickerProps {
resultFilter?: (result: IPersonaProps[]) => IPersonaProps[];
}
-export interface IPeoplePickerState {
- mostRecentlyUsedPersons?: IPersonaProps[];
- errorMessage?: string;
- internalErrorMessage?: string;
- resolveDelay?: number;
-
- selectedPersons?: IPersonaProps[];
- peoplePersonaMenu?: IPersonaProps[];
- delayResults?: boolean;
-}
-
export interface IPeoplePickerUserItem {
/**
* LoginName or Id of the principal in the site.
diff --git a/src/controls/peoplepicker/IPeoplePickerContext.ts b/src/controls/peoplepicker/IPeoplePickerContext.ts
new file mode 100644
index 000000000..7519e487f
--- /dev/null
+++ b/src/controls/peoplepicker/IPeoplePickerContext.ts
@@ -0,0 +1,19 @@
+import { MSGraphClientFactory, SPHttpClient } from "@microsoft/sp-http";
+
+/**
+ * Context for the PeoplePicker control
+ */
+export interface IPeoplePickerContext {
+ /**
+ * Current `SPWeb` absolute URL.
+ */
+ absoluteUrl: string;
+ /**
+ * Instance of MSGraphClientFactory used for querying Microsoft Graph REST API.
+ */
+ msGraphClientFactory: MSGraphClientFactory;
+ /**
+ * Instance of SPHttpClient used for querying SharePoint REST API.
+ */
+ spHttpClient: SPHttpClient;
+}
\ No newline at end of file
diff --git a/src/controls/peoplepicker/PeoplePickerComponent.tsx b/src/controls/peoplepicker/PeoplePickerComponent.tsx
index 2fa52a8dd..b43681c87 100644
--- a/src/controls/peoplepicker/PeoplePickerComponent.tsx
+++ b/src/controls/peoplepicker/PeoplePickerComponent.tsx
@@ -3,16 +3,26 @@ import * as React from 'react';
import * as telemetry from '../../common/telemetry';
import styles from './PeoplePickerComponent.module.scss';
import SPPeopleSearchService from "../../services/PeopleSearchService";
-import { IPeoplePickerProps, IPeoplePickerState } from './IPeoplePicker';
+import { IPeoplePickerProps } from './IPeoplePicker';
import { TooltipHost } from '@fluentui/react/lib/Tooltip';
import { DirectionalHint } from '@fluentui/react/lib/Callout';
-import { NormalPeoplePicker } from '@fluentui/react/lib/components/pickers/PeoplePicker/PeoplePicker';
-import { Label } from '@fluentui/react/lib/components/Label';
-import { IBasePickerSuggestionsProps } from "@fluentui/react/lib/components/pickers/BasePicker.types";
-import { IPersonaProps } from "@fluentui/react/lib/components/Persona/Persona.types";
+import { Label } from '@fluentui/react/lib/Label';
import FieldErrorMessage from '../errorMessage/ErrorMessage';
import isEqual from 'lodash/isEqual';
import uniqBy from 'lodash/uniqBy';
+import { IPersonaProps } from '@fluentui/react/lib/Persona';
+import { IBasePickerSuggestionsProps, NormalPeoplePicker} from '@fluentui/react/lib/Pickers';
+
+interface IPeoplePickerState {
+ mostRecentlyUsedPersons?: IPersonaProps[];
+ errorMessage?: string;
+ internalErrorMessage?: string;
+ resolveDelay?: number;
+
+ selectedPersons?: IPersonaProps[];
+ peoplePersonaMenu?: IPersonaProps[];
+ delayResults?: boolean;
+}
/**
* PeoplePicker component
diff --git a/src/controls/peoplepicker/index.ts b/src/controls/peoplepicker/index.ts
index 73502887f..b4602fd13 100644
--- a/src/controls/peoplepicker/index.ts
+++ b/src/controls/peoplepicker/index.ts
@@ -1,3 +1,4 @@
export * from './IPeoplePicker';
+export * from './IPeoplePickerContext';
export * from './PeoplePickerComponent';
export * from './PrincipalType';
diff --git a/src/controls/placeholder/PlaceholderComponent.tsx b/src/controls/placeholder/PlaceholderComponent.tsx
index 961899516..e5fc0fa2b 100644
--- a/src/controls/placeholder/PlaceholderComponent.tsx
+++ b/src/controls/placeholder/PlaceholderComponent.tsx
@@ -1,7 +1,7 @@
import { ThemeContext } from '@fluentui/react-theme-provider/lib/ThemeContext';
import { Theme } from '@fluentui/react-theme-provider/lib/types';
import { PrimaryButton } from '@fluentui/react/lib/Button';
-import { Icon } from '@fluentui/react/lib/components/Icon';
+import { Icon } from '@fluentui/react/lib/Icon';
import * as React from 'react';
import { IPlaceholderState } from '.';
import * as telemetry from '../../common/telemetry';
diff --git a/src/controls/richText/RichText.tsx b/src/controls/richText/RichText.tsx
index 4a743b535..ec31a0f37 100644
--- a/src/controls/richText/RichText.tsx
+++ b/src/controls/richText/RichText.tsx
@@ -467,7 +467,7 @@ export class RichText extends React.Component {
}
// Okay, we're in edit mode.
- const { placeholder, styleOptions: { showStyles, showBold, showItalic, showUnderline, showAlign, showList, showLink, showMore, showImage } } = this.props;
+ const { placeholder,style, styleOptions: { showStyles, showBold, showItalic, showUnderline, showAlign, showList, showLink, showMore, showImage } } = this.props;
// Get a unique id for the toolbar
const modules = {
@@ -516,7 +516,7 @@ export class RichText extends React.Component {
ReactQuillInstance.register(sizeClass, true);
return (
- { this._wrapperRef = ref; }} className={css(styles.richtext && this.state.editing ? 'ql-active' : null, this.props.className || null) || null}>
+
{ this._wrapperRef = ref; }} className={css(styles.richtext && this.state.editing ? 'ql-active' : null, this.props.className || null) || null} style={style}>
{renderLabel}
+
+ Image icons with support to events:
+ console.log("onClick on FileTypeIcon!")}
+ onDoubleClick={(e) => console.log("onDoubleClick on FileTypeIcon!")}
+ onMouseEnter={(e) => console.log("onMouseEnter on FileTypeIcon!")}
+ onMouseLeave={(e) => console.log("onMouseLeave on FileTypeIcon!")}
+ onMouseOver={(e) => console.log("onMouseOver on FileTypeIcon!")}
+ onMouseUp={(e) => console.log("onMouseUp on FileTypeIcon!")}
+ />
+
Icon size tester:
@@ -1791,6 +1810,13 @@ export default class ControlsTest extends React.Component
+
+
Carousel with minimal configuration:
+
+
diff --git a/src/webparts/controlsTest/propertyPane/controls/ListPicker.tsx b/src/webparts/controlsTest/propertyPane/controls/ListPicker.tsx
index 3ae5521a0..936a27b2d 100644
--- a/src/webparts/controlsTest/propertyPane/controls/ListPicker.tsx
+++ b/src/webparts/controlsTest/propertyPane/controls/ListPicker.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { Dropdown, IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
-import { Spinner } from '@fluentui/react/lib/components/Spinner';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
+import { Spinner } from '@fluentui/react/lib/Spinner';
import { SPHttpClient } from "@microsoft/sp-http";
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { ISPList } from '../../../../common/SPEntities';