@pnp/spfx-controls-react 4.0.0-beta.1344828 → 4.0.0-beta.3809332

package/lib/controls/dynamicForm/IDynamicFormProps.d.ts

@@ -1,7 +1,9 @@
 import { BaseComponentContext } from '@microsoft/sp-component-base';
-import { IItem } from '@pnp/sp/items';
+import { IDynamicFormItemReference } from '../../services/DynamicFormService';
+export type { IDynamicFormItemReference } from '../../services/DynamicFormService';
+import { IStyle, IStyleFunctionOrObject } from '@fluentui/react';
 import React from 'react';
-import { IDynamicFieldProps } from './dynamicField';
+import { IDynamicFieldProps, IDynamicFieldStyles } from './dynamicField';
 import { IValidationErrorDialogProps } from './IValidationErrorDialogProps';
 export interface IDynamicFormProps {
     /**
@@ -33,7 +35,7 @@ export interface IDynamicFormProps {
     /**
      * Handler for form submitted event
      */
-    onSubmitted?: (listItemData: any, listItem?: IItem) => void;
+    onSubmitted?: (listItemData: any, listItem?: IDynamicFormItemReference) => void | Promise<void>;
     /**
      * Handler of submission error
      */
@@ -59,9 +61,9 @@ export interface IDynamicFormProps {
         };
     };
     /**
-     * Specifies if onSubmitted event should pass PnPJS list item (IItem) as a second parameter. Default - true
+     * Pass the saved item's web, list, ID and ETag as the second onSubmitted argument. Default - true.
      */
-    returnListItemInstanceOnSubmit?: boolean;
+    returnListItemReferenceOnSubmit?: boolean;
     /**
      * InternalName of fields that should be disabled
      */
@@ -129,5 +131,46 @@ export interface IDynamicFormProps {
      * Defaults to the root folder.
      */
     folderPath?: string;
+    /**
+     * Set to true to use the Modern Taxonomy Picker (ModernTaxonomyPicker).
+     * Set to false to use the classic TaxonomyPicker.
+     * Default is false
+     */
+    useModernTaxonomyPicker?: boolean;
+    /**
+     * Call to provide customized styling
+     * Read https://github.com/microsoft/fluentui/blob/master/docs/react-wiki-archive/Component-Styling.md#using-a-styleable-component for more information
+     */
+    styles?: IStyleFunctionOrObject<IDynamicFormStyleProps, IDynamicFormStyles>;
+    /**
+     * CSS Class name to add to the root element.
+     */
+    className?: string;
+    /**
+     * Number of items to display in the lookup fields of the form.
+     */
+    itemsQueryCountLimit?: number;
+}
+export type IDynamicFormStyleProps = Pick<IDynamicFormProps, 'className'> & {};
+export interface IDynamicFormSubComponentStyles {
+    fieldStyles: IDynamicFieldStyles;
+}
+export interface IDynamicFormStyles {
+    root: IStyle;
+    sectionTitle: IStyle;
+    sectionFormFields: IStyle;
+    sectionFormField: IStyle;
+    sectionLine: IStyle;
+    header: IStyle;
+    footer: IStyle;
+    validationErrorDialog: IStyle;
+    buttons: IStyle;
+    actions: IStyle;
+    actionsRight: IStyle;
+    action: IStyle;
+    /**
+    * sub component styles for dynamic field
+    */
+    subComponentStyles: IDynamicFormSubComponentStyles;
 }
 //# sourceMappingURL=IDynamicFormProps.d.ts.map

package/lib/controls/dynamicForm/IDynamicFormProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IDynamicFormProps.d.ts","sourceRoot":"","sources":["../../../src/controls/dynamicForm/IDynamicFormProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAE5E,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,OAAO,EAAE,oBAAoB,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACzD;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC1D;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,cAAc,CAAC,EAAE;QACf,CAAC,kBAAkB,EAAE,MAAM,GAAG;YAC5B,CACE,eAAe,EAAE,kBAAkB,GAClC,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;SAC3C,CAAC;KACH,CAAC;IAEF;;OAEG;IACH,8BAA8B,CAAC,EAAE,OAAO,CAAC;IAEzC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,0BAA0B,CAAC,EAAE,2BAA2B,CAAC;IAEzD;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE;QAAE,CAAC,kBAAkB,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAEvD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IAErB;;;;OAIG;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"IDynamicFormProps.d.ts","sourceRoot":"","sources":["../../../src/controls/dynamicForm/IDynamicFormProps.ts"],"names":[],"mappings":"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"}

package/lib/controls/dynamicForm/IDynamicFormState.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { IInstalledLanguageInfo } from '@pnp/sp/regional-settings';
+import { IInstalledLanguageInfo } from '../../common/SPRestTypes';
 import { ISPField } from '../../common/SPEntities';
 import { MessageBarType } from '@fluentui/react/lib/MessageBar';
 import { ICustomFormattingBodySection, ICustomFormattingNode } from '../../common/utilities/ICustomFormatting';

package/lib/controls/dynamicForm/IDynamicFormState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IDynamicFormState.d.ts","sourceRoot":"","sources":["../../../src/controls/dynamicForm/IDynamicFormState.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,4BAA4B,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAC/G,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE;QACjB,IAAI,EAAE,cAAc,CAAC;QACrB,OAAO,EAAE,MAAM,CAAC;KACjB,EAAE,CAAC;IACJ,8BAA8B;IAC9B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,kBAAkB,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC9C,sDAAsD;IACtD,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,mBAAmB,GAAG,mBAAmB,CAAC,CAAC,CAAC;IAC9F,wGAAwG;IACxG,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,mBAAmB,GAAG,mBAAmB,CAAC,CAAC,CAAC;IACpG,sDAAsD;IACtD,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,oIAAoI;IACpI,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,gBAAgB,CAAC,EAAE;QACjB,MAAM,EAAE,qBAAqB,CAAC;QAC9B,IAAI,EAAE,4BAA4B,EAAE,CAAC;QACrC,MAAM,EAAE,qBAAqB,CAAC;KAC/B,CAAA;IACD,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2BAA2B,EAAE,OAAO,CAAC;IACrC,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}
+{"version":3,"file":"IDynamicFormState.d.ts","sourceRoot":"","sources":["../../../src/controls/dynamicForm/IDynamicFormState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,4BAA4B,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAC/G,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE;QACjB,IAAI,EAAE,cAAc,CAAC;QACrB,OAAO,EAAE,MAAM,CAAC;KACjB,EAAE,CAAC;IACJ,8BAA8B;IAC9B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,kBAAkB,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC9C,sDAAsD;IACtD,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,mBAAmB,GAAG,mBAAmB,CAAC,CAAC,CAAC;IAC9F,wGAAwG;IACxG,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,mBAAmB,GAAG,mBAAmB,CAAC,CAAC,CAAC;IACpG,sDAAsD;IACtD,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,oIAAoI;IACpI,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,gBAAgB,CAAC,EAAE;QACjB,MAAM,EAAE,qBAAqB,CAAC;QAC9B,IAAI,EAAE,4BAA4B,EAAE,CAAC;QACrC,MAAM,EAAE,qBAAqB,CAAC;KAC/B,CAAA;IACD,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2BAA2B,EAAE,OAAO,CAAC;IACrC,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}

package/lib/controls/dynamicForm/dynamicField/DynamicField.d.ts

@@ -1,10 +1,9 @@
-import '@pnp/sp/folders';
-import '@pnp/sp/webs';
 import * as React from 'react';
 import { IDynamicFieldProps } from './IDynamicFieldProps';
 import { IDynamicFieldState } from './IDynamicFieldState';
-export declare class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFieldState> {
+export declare class DynamicFieldBase extends React.Component<IDynamicFieldProps, IDynamicFieldState> {
     constructor(props: IDynamicFieldProps);
+    private _classNames;
     componentDidUpdate(): void;
     render(): JSX.Element;
     private getFieldComponent;
@@ -15,7 +14,9 @@ export declare class DynamicField extends React.Component<IDynamicFieldProps, ID
     private getRequiredErrorText;
     private getNumberErrorText;
     private isEmptyArray;
+    private checkUserArrayIsEmpty;
     private MultiChoice_selection;
     private saveIntoSharePoint;
 }
+export declare const DynamicField: React.FunctionComponent<React.PropsWithChildren<React.PropsWithChildren<IDynamicFieldProps>>>;
 //# sourceMappingURL=DynamicField.d.ts.map

package/lib/controls/dynamicForm/dynamicField/DynamicField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicField.d.ts","sourceRoot":"","sources":["../../../../src/controls/dynamicForm/dynamicField/DynamicField.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,cAAc,CAAC;AAWtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBAE3E,KAAK,EAAE,kBAAkB;IAU9B,kBAAkB,IAAI,IAAI;IAM1B,MAAM,IAAI,GAAG,CAAC,OAAO;IAa5B,OAAO,CAAC,iBAAiB,CAmgBxB;IAED,OAAO,CAAC,aAAa,CAcpB;IAED,OAAO,CAAC,WAAW,CA6BlB;IAED,OAAO,CAAC,QAAQ,CAYf;IAED,OAAO,CAAC,MAAM,CAKb;IAED,OAAO,CAAC,oBAAoB,CAa3B;IAED,OAAO,CAAC,kBAAkB,CAwDzB;IAED,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,qBAAqB,CAmC5B;IAED,OAAO,CAAC,kBAAkB,CA8BzB;CACF"}
+{"version":3,"file":"DynamicField.d.ts","sourceRoot":"","sources":["../../../../src/controls/dynamicForm/dynamicField/DynamicField.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,kBAAkB,EAAgD,MAAM,sBAAsB,CAAC;AACxG,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAS1D,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBAE/E,KAAK,EAAE,kBAAkB;IAOrC,OAAO,CAAC,WAAW,CAA0C;IAEtD,kBAAkB,IAAI,IAAI;IAM1B,MAAM,IAAI,GAAG,CAAC,OAAO;IAkB5B,OAAO,CAAC,iBAAiB,CAulBxB;IAED,OAAO,CAAC,aAAa,CAcpB;IAED,OAAO,CAAC,WAAW,CA6BlB;IAED,OAAO,CAAC,QAAQ,CAYf;IAED,OAAO,CAAC,MAAM,CAKb;IAED,OAAO,CAAC,oBAAoB,CAiB3B;IAED,OAAO,CAAC,kBAAkB,CA4DzB;IAED,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,qBAAqB,CAE5B;IAED,OAAO,CAAC,qBAAqB,CAmC5B;IAED,OAAO,CAAC,kBAAkB,CA8BzB;CACF;AAED,eAAO,MAAM,YAAY,+FAOxB,CAAC"}

package/lib/controls/dynamicForm/dynamicField/DynamicField.js

@@ -1,77 +1,5 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import '@pnp/sp/folders';
-import { sp } from '@pnp/sp/presets/all';
-import '@pnp/sp/webs';
+import { __assign, __awaiter, __extends, __generator, __spreadArray } from "tslib";
+import { ChoiceFieldFormatType } from '../../../common/SPRestTypes';
 import * as strings from 'ControlStrings';
 import { ActionButton } from '@fluentui/react/lib/Button';
 import { Dropdown } from '@fluentui/react/lib/Dropdown';
@@ -90,16 +18,20 @@ import { LocationPicker } from '../../locationPicker';
 import { PeoplePicker, PrincipalType } from '../../peoplepicker';
 import { RichText } from '../../richText';
 import { TaxonomyPicker } from '../../taxonomyPicker';
-import styles from '../DynamicForm.module.scss';
 import CurrencyMap from "../CurrencyMap";
-var DynamicField = /** @class */ (function (_super) {
-    __extends(DynamicField, _super);
-    function DynamicField(props) {
+import { ModernTaxonomyPicker } from '../../modernTaxonomyPicker';
+import { classNamesFunction, styled, ChoiceGroup } from '@fluentui/react';
+import { getFluentUIThemeOrDefault } from '../../../common/utilities/ThemeUtility';
+import { getFieldStyles } from './DynamicField.styles';
+var getClassNames = classNamesFunction();
+var DynamicFieldBase = /** @class */ (function (_super) {
+    __extends(DynamicFieldBase, _super);
+    function DynamicFieldBase(props) {
         var _this = _super.call(this, props) || this;
         _this.getFieldComponent = function () {
-            var _a = _this.props, options = _a.options, fieldTermSetId = _a.fieldTermSetId, fieldAnchorId = _a.fieldAnchorId, lookupListID = _a.lookupListID, lookupField = _a.lookupField, fieldType = _a.fieldType, defaultValue = _a.defaultValue, newValue = _a.newValue, value = _a.value, context = _a.context, disabled = _a.disabled, label = _a.label, placeholder = _a.placeholder, required = _a.required, isRichText = _a.isRichText, 
+            var _a = _this.props, options = _a.options, fieldTermSetId = _a.fieldTermSetId, fieldAnchorId = _a.fieldAnchorId, lookupListID = _a.lookupListID, lookupField = _a.lookupField, fieldType = _a.fieldType, defaultValue = _a.defaultValue, newValue = _a.newValue, value = _a.value, context = _a.context, disabled = _a.disabled, label = _a.label, placeholder = _a.placeholder, isRichText = _a.isRichText, isAppendOnly = _a.isAppendOnly, 
             //bingAPIKey,
-            dateFormat = _a.dateFormat, firstDayOfWeek = _a.firstDayOfWeek, columnInternalName = _a.columnInternalName, principalType = _a.principalType, description = _a.description, maximumValue = _a.maximumValue, minimumValue = _a.minimumValue, itemsQueryCountLimit = _a.itemsQueryCountLimit, customIcon = _a.customIcon, orderBy = _a.orderBy;
+            dateFormat = _a.dateFormat, firstDayOfWeek = _a.firstDayOfWeek, columnInternalName = _a.columnInternalName, principalType = _a.principalType, description = _a.description, maximumValue = _a.maximumValue, minimumValue = _a.minimumValue, itemsQueryCountLimit = _a.itemsQueryCountLimit, customIcon = _a.customIcon, orderBy = _a.orderBy, choiceType = _a.choiceType, notesAppendOnlyHistory = _a.notesAppendOnlyHistory, useModernTaxonomyPickerControl = _a.useModernTaxonomyPickerControl;
             var changedValue = _this.state.changedValue;
             var dropdownOptions = {
                 options: options,
@@ -112,7 +44,8 @@ var DynamicField = /** @class */ (function (_super) {
                 spHttpClient: context.spHttpClient
             };
             // const defaultValue = fieldDefaultValue;
-            var labelEl = React.createElement("label", { className: (required) ? styles.fieldRequired + ' ' + styles.fieldLabel : styles.fieldLabel }, label);
+            var styles = _this._classNames;
+            var labelEl = React.createElement("label", { className: styles.fieldLabel }, label);
             var errorText = _this.props.validationErrorMessage || _this.getRequiredErrorText();
             var errorTextEl = React.createElement("text", { className: styles.errormessage }, errorText);
             var descriptionEl = React.createElement("text", { className: styles.fieldDescription }, description);
@@ -132,7 +65,17 @@ var DynamicField = /** @class */ (function (_super) {
                             labelEl),
                         React.createElement(TextField, { defaultValue: defaultValue, value: valueToDisplay, placeholder: placeholder, className: styles.fieldDisplay, onChange: function (e, newText) { _this.onChange(newText); }, disabled: disabled, onBlur: _this.onBlur, errorMessage: errorText }),
                         descriptionEl);
-                case 'Note':
+                case 'Note': {
+                    var notesHistory = isAppendOnly && (notesAppendOnlyHistory === null || notesAppendOnlyHistory === void 0 ? void 0 : notesAppendOnlyHistory.length) > 0
+                        ? React.createElement("div", { className: styles.appendOnlyHistoryContainer }, notesAppendOnlyHistory.map(function (comment) { return (React.createElement("div", { key: comment.versionId, className: styles.appendOnlyHistoryEntry },
+                            React.createElement("span", { className: styles.appendOnlyHistoryAuthor }, comment.createdTitle),
+                            React.createElement("span", { className: styles.appendOnlyHistoryDate },
+                                "(",
+                                comment.createdTime,
+                                ")"),
+                            React.createElement("span", null, ": "),
+                            React.createElement("span", { dangerouslySetInnerHTML: { __html: comment.value } }))); }))
+                        : null;
                     if (isRichText) {
                         var noteValue = valueToDisplay !== undefined ? valueToDisplay : defaultValue;
                         return React.createElement("div", { className: styles.richText },
@@ -140,6 +83,7 @@ var DynamicField = /** @class */ (function (_super) {
                                 React.createElement(Icon, { className: styles.fieldIcon, iconName: customIcon !== null && customIcon !== void 0 ? customIcon : "AlignLeft" }),
                                 labelEl),
                             React.createElement(RichText, { placeholder: placeholder, value: noteValue, className: styles.fieldDisplay, onChange: function (newText) { _this.onChange(newText); return newText; }, isEditMode: !disabled }),
+                            notesHistory,
                             descriptionEl,
                             errorTextEl);
                     }
@@ -149,15 +93,36 @@ var DynamicField = /** @class */ (function (_super) {
                                 React.createElement(Icon, { className: styles.fieldIcon, iconName: customIcon !== null && customIcon !== void 0 ? customIcon : "AlignLeft" }),
                                 labelEl),
                             React.createElement(TextField, { defaultValue: defaultValue, value: valueToDisplay, placeholder: placeholder, className: styles.fieldDisplay, multiline: true, onChange: function (e, newText) { _this.onChange(newText); }, disabled: disabled, onBlur: _this.onBlur, errorMessage: errorText }),
+                            notesHistory,
                             descriptionEl);
                     }
-                case 'Choice':
+                }
+                case 'Choice': {
+                    var choiceControl = undefined;
+                    // If the choiceType is dropdown
+                    if (choiceType === ChoiceFieldFormatType.Dropdown) {
+                        choiceControl = React.createElement(Dropdown, __assign({}, dropdownOptions, { defaultSelectedKey: valueToDisplay ? undefined : defaultValue, selectedKey: typeof valueToDisplay === "object" ? valueToDisplay === null || valueToDisplay === void 0 ? void 0 : valueToDisplay.key : valueToDisplay, onChange: function (e, option) { _this.onChange(option, true); }, onBlur: _this.onBlur, errorMessage: errorText }));
+                    }
+                    // If the choiceType is radio buttons
+                    else {
+                        // Parse options into radio buttons
+                        var optionsGroup = options.map(function (option) {
+                            return {
+                                key: option.key.toString(),
+                                text: option.text,
+                                checked: option.key.toString() === valueToDisplay
+                            };
+                        });
+                        // Create radio group
+                        choiceControl = React.createElement(ChoiceGroup, { defaultSelectedKey: valueToDisplay ? undefined : defaultValue, selectedKey: typeof valueToDisplay === "object" ? valueToDisplay === null || valueToDisplay === void 0 ? void 0 : valueToDisplay.key : valueToDisplay, options: optionsGroup, onChange: function (e, option) { _this.onChange(option, true); }, disabled: disabled });
+                    }
                     return React.createElement("div", { className: styles.fieldContainer },
                         React.createElement("div", { className: "".concat(styles.labelContainer, " ").concat(styles.titleContainer) },
                             React.createElement(Icon, { className: styles.fieldIcon, iconName: customIcon !== null && customIcon !== void 0 ? customIcon : "CheckMark" }),
                             labelEl),
-                        React.createElement(Dropdown, __assign({}, dropdownOptions, { defaultSelectedKey: valueToDisplay ? undefined : defaultValue, selectedKey: typeof valueToDisplay === "object" ? valueToDisplay === null || valueToDisplay === void 0 ? void 0 : valueToDisplay.key : valueToDisplay, onChange: function (e, option) { _this.onChange(option, true); }, onBlur: _this.onBlur, errorMessage: errorText })),
+                        choiceControl,
                         descriptionEl);
+                }
                 case 'MultiChoice':
                     return React.createElement("div", { className: styles.fieldContainer },
                         React.createElement("div", { className: "".concat(styles.labelContainer, " ").concat(styles.titleContainer) },
@@ -173,7 +138,6 @@ var DynamicField = /** @class */ (function (_super) {
                         React.createElement(LocationPicker, { context: context, disabled: disabled, placeholder: placeholder, onChange: function (newValue) { _this.onChange(newValue, true); }, defaultValue: valueToDisplay !== undefined ? valueToDisplay : defaultValue, errorMessage: errorText }),
                         descriptionEl);
                 case 'Lookup':
-                    //eslint-disable-next-line no-case-declarations
                     var lookupValue = valueToDisplay !== undefined ? valueToDisplay : defaultValue;
                     return React.createElement("div", null,
                         React.createElement("div", { className: styles.titleContainer },
@@ -183,7 +147,6 @@ var DynamicField = /** @class */ (function (_super) {
                         descriptionEl,
                         errorTextEl);
                 case 'LookupMulti':
-                    //eslint-disable-next-line no-case-declarations
                     var lookupMultiValue = valueToDisplay !== undefined ? valueToDisplay : defaultValue;
                     return React.createElement("div", null,
                         React.createElement("div", { className: styles.titleContainer },
@@ -216,9 +179,9 @@ var DynamicField = /** @class */ (function (_super) {
                             React.createElement(Icon, { className: styles.fieldIcon, iconName: customIcon !== null && customIcon !== void 0 ? customIcon : "Calendar" }),
                             labelEl),
                         dateFormat === 'DateOnly' &&
-                            React.createElement(DatePicker, { placeholder: placeholder, className: styles.pickersContainer, formatDate: function (date) { return date.toLocaleDateString(context.pageContext.cultureInfo.currentCultureName); }, value: valueToDisplay !== undefined ? valueToDisplay : defaultValue, onSelectDate: function (newDate) { _this.onChange(newDate, true); }, disabled: disabled, firstDayOfWeek: firstDayOfWeek }),
+                            React.createElement(DatePicker, { placeholder: placeholder, className: styles.pickersContainer, formatDate: function (date) { return date.toLocaleDateString(context.pageContext.cultureInfo.currentCultureName); }, value: valueToDisplay !== undefined ? valueToDisplay : defaultValue, onSelectDate: function (newDate) { _this.onChange(newDate, true); }, disabled: disabled, firstDayOfWeek: firstDayOfWeek, allowTextInput: true }),
                         dateFormat === 'DateTime' &&
-                            React.createElement(DateTimePicker, { key: columnInternalName, placeholder: placeholder, formatDate: function (date) { return date.toLocaleDateString(context.pageContext.cultureInfo.currentCultureName); }, value: valueToDisplay !== undefined ? valueToDisplay : defaultValue, onChange: function (newDate) { _this.onChange(newDate, true); }, disabled: disabled, firstDayOfWeek: firstDayOfWeek }),
+                            React.createElement(DateTimePicker, { key: columnInternalName, placeholder: placeholder, formatDate: function (date) { return date.toLocaleDateString(context.pageContext.cultureInfo.currentCultureName); }, value: valueToDisplay !== undefined ? valueToDisplay : defaultValue, onChange: function (newDate) { _this.onChange(newDate, true); }, disabled: disabled, firstDayOfWeek: firstDayOfWeek, allowTextInput: true }),
                         descriptionEl,
                         errorTextEl);
                 case 'Boolean':
@@ -285,8 +248,14 @@ var DynamicField = /** @class */ (function (_super) {
                         React.createElement("div", { className: styles.titleContainer },
                             React.createElement(Icon, { className: styles.fieldIcon, iconName: customIcon !== null && customIcon !== void 0 ? customIcon : "BulletedTreeList" }),
                             labelEl),
-                        React.createElement("div", { className: styles.pickersContainer },
-                            React.createElement(TaxonomyPicker, { label: "", disabled: disabled, initialValues: valueToDisplay !== undefined ? valueToDisplay : defaultValue, placeholder: placeholder, allowMultipleSelections: true, termsetNameOrID: fieldTermSetId, anchorId: fieldAnchorId, panelTitle: strings.DynamicFormTermPanelTitle, context: context, onChange: function (newValue) { _this.onChange(newValue, true); }, isTermSetSelectable: false })),
+                        useModernTaxonomyPickerControl ?
+                            React.createElement("div", { className: styles.pickersContainer },
+                                React.createElement(ModernTaxonomyPicker, { webAbsoluteUrl: _this.props.webAbsoluteUrl, label: "", disabled: disabled, initialValues: valueToDisplay !== undefined ? valueToDisplay : defaultValue, placeHolder: placeholder, allowMultipleSelections: true, termSetId: fieldTermSetId, anchorTermId: fieldAnchorId, panelTitle: strings.DynamicFormTermPanelTitle, context: context, 
+                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    onChange: function (newValue) { _this.onChange(newValue, true); } }))
+                            :
+                                React.createElement("div", { className: styles.pickersContainer },
+                                    React.createElement(TaxonomyPicker, { label: "", disabled: disabled, initialValues: valueToDisplay !== undefined ? valueToDisplay : defaultValue, placeholder: placeholder, allowMultipleSelections: true, termsetNameOrID: fieldTermSetId, anchorId: fieldAnchorId, panelTitle: strings.DynamicFormTermPanelTitle, context: context, onChange: function (newValue) { _this.onChange(newValue, true); }, isTermSetSelectable: false })),
                         descriptionEl,
                         errorTextEl);
                 case 'TaxonomyFieldType':
@@ -294,8 +263,14 @@ var DynamicField = /** @class */ (function (_super) {
                         React.createElement("div", { className: styles.titleContainer },
                             React.createElement(Icon, { className: styles.fieldIcon, iconName: customIcon !== null && customIcon !== void 0 ? customIcon : "BulletedTreeList" }),
                             labelEl),
-                        React.createElement("div", { className: styles.pickersContainer },
-                            React.createElement(TaxonomyPicker, { label: "", disabled: disabled, initialValues: valueToDisplay !== undefined ? valueToDisplay : defaultValue, placeholder: placeholder, allowMultipleSelections: false, termsetNameOrID: fieldTermSetId, anchorId: fieldAnchorId, panelTitle: strings.DynamicFormTermPanelTitle, context: context, onChange: function (newValue) { _this.onChange(newValue, true); }, isTermSetSelectable: false })),
+                        useModernTaxonomyPickerControl ?
+                            React.createElement("div", { className: styles.pickersContainer },
+                                React.createElement(ModernTaxonomyPicker, { webAbsoluteUrl: _this.props.webAbsoluteUrl, label: "", disabled: disabled, initialValues: valueToDisplay !== undefined ? [valueToDisplay] : defaultValue, placeHolder: placeholder, allowMultipleSelections: false, termSetId: fieldTermSetId, anchorTermId: fieldAnchorId, panelTitle: strings.DynamicFormTermPanelTitle, context: context, 
+                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    onChange: function (newValue) { _this.onChange(newValue, true); } }))
+                            :
+                                React.createElement("div", { className: styles.pickersContainer },
+                                    React.createElement(TaxonomyPicker, { label: "", disabled: disabled, initialValues: valueToDisplay !== undefined ? valueToDisplay : defaultValue, placeholder: placeholder, allowMultipleSelections: false, termsetNameOrID: fieldTermSetId, anchorId: fieldAnchorId, panelTitle: strings.DynamicFormTermPanelTitle, context: context, onChange: function (newValue) { _this.onChange(newValue, true); }, isTermSetSelectable: false })),
                         descriptionEl,
                         errorTextEl);
                 case 'File':
@@ -355,24 +330,29 @@ var DynamicField = /** @class */ (function (_super) {
         };
         _this.getRequiredErrorText = function () {
             var changedValue = _this.state.changedValue;
-            var _a = _this.props, value = _a.value, newValue = _a.newValue, required = _a.required;
-            if (newValue === undefined) {
-                return required && (changedValue === undefined || changedValue === '' || changedValue === null || _this.isEmptyArray(changedValue))
-                    && (value === undefined || value === '' || value === null || _this.isEmptyArray(value)) ? strings.DynamicFormRequiredErrorMessage : null;
-            }
-            else {
-                return required && (changedValue === undefined || changedValue === '' || changedValue === null || _this.isEmptyArray(changedValue)) ? strings.DynamicFormRequiredErrorMessage : null;
+            var _a = _this.props, value = _a.value, newValue = _a.newValue, required = _a.required, listItemId = _a.listItemId;
+            if (listItemId !== undefined && listItemId !== null) {
+                if (newValue === undefined) {
+                    return required && (changedValue === undefined || changedValue === '' || changedValue === null || _this.isEmptyArray(changedValue))
+                        && (value === undefined || value === '' || value === null || _this.isEmptyArray(value) || _this.checkUserArrayIsEmpty(value)) ? strings.DynamicFormRequiredErrorMessage : null;
+                }
+                else {
+                    return required && (changedValue === undefined || changedValue === '' || changedValue === null || _this.isEmptyArray(changedValue) || _this.checkUserArrayIsEmpty(value)) ? strings.DynamicFormRequiredErrorMessage : null;
+                }
             }
+            return null;
         };
         _this.getNumberErrorText = function () {
             var _a;
             var changedValue = _this.state.changedValue;
-            var _b = _this.props, cultureName = _b.cultureName, fieldType = _b.fieldType, maximumValue = _b.maximumValue, minimumValue = _b.minimumValue, showAsPercentage = _b.showAsPercentage, value = _b.value, newValue = _b.newValue, required = _b.required;
+            var _b = _this.props, cultureName = _b.cultureName, fieldType = _b.fieldType, maximumValue = _b.maximumValue, minimumValue = _b.minimumValue, showAsPercentage = _b.showAsPercentage, value = _b.value, newValue = _b.newValue, required = _b.required, listItemId = _b.listItemId;
             if (required && newValue !== undefined && (changedValue === undefined || changedValue === '' || changedValue === null || _this.isEmptyArray(changedValue))) {
                 return strings.DynamicFormRequiredErrorMessage;
             }
-            if (required && newValue === undefined && (value === undefined || value === '' || value === null || _this.isEmptyArray(value)) && (changedValue === undefined || changedValue === '' || changedValue === null || _this.isEmptyArray(changedValue))) {
-                return strings.DynamicFormRequiredErrorMessage;
+            if (listItemId !== undefined && listItemId !== null) {
+                if (required && newValue === undefined && (value === undefined || value === '' || value === null || _this.isEmptyArray(value)) && (changedValue === undefined || changedValue === '' || changedValue === null || _this.isEmptyArray(changedValue))) {
+                    return strings.DynamicFormRequiredErrorMessage;
+                }
             }
             var minValue = minimumValue !== undefined && minimumValue !== -(Number.MAX_VALUE) ? minimumValue : undefined;
             var maxValue = maximumValue !== undefined && maximumValue !== Number.MAX_VALUE ? maximumValue : undefined;
@@ -385,9 +365,9 @@ var DynamicField = /** @class */ (function (_super) {
             if (fieldType === "Currency" && cultureName) {
                 var countryCode = (_a = cultureName.split('-')) === null || _a === void 0 ? void 0 : _a[1];
                 if (minValue)
-                    minValueCur = Intl.NumberFormat(cultureName, { style: 'currency', currency: CurrencyMap[countryCode] }).format(minValue);
+                    minValueCur = Intl.NumberFormat(cultureName, { style: 'currency', currency: CurrencyMap[countryCode] }).format(minValue); // eslint-disable-line @typescript-eslint/no-explicit-any
                 if (maxValue)
-                    maxValueCur = Intl.NumberFormat(cultureName, { style: 'currency', currency: CurrencyMap[countryCode] }).format(maxValue);
+                    maxValueCur = Intl.NumberFormat(cultureName, { style: 'currency', currency: CurrencyMap[countryCode] }).format(maxValue); // eslint-disable-line @typescript-eslint/no-explicit-any
             }
             if (changedValue !== undefined && changedValue !== null && changedValue.length > 0) {
                 var numericValue = Number(changedValue);
@@ -407,10 +387,13 @@ var DynamicField = /** @class */ (function (_super) {
             }
             return null;
         };
+        _this.checkUserArrayIsEmpty = function (value) {
+            return Array.isArray(value) && value.every(function (item) { return item === ""; });
+        };
         _this.MultiChoice_selection = function (event, item) {
             var changedValue = _this.state.changedValue;
             try {
-                var selectedItemArr_1;
+                var selectedItemArr_1; // eslint-disable-line @typescript-eslint/no-explicit-any
                 var value = _this.props.value || _this.props.defaultValue;
                 if (changedValue === null && value !== null) {
                     selectedItemArr_1 = [];
@@ -467,32 +450,37 @@ var DynamicField = /** @class */ (function (_super) {
                 return [2 /*return*/];
             });
         }); };
-        sp.setup({
-            spfxContext: { pageContext: _this.props.context.pageContext }
-        });
         _this.state = {
             changedValue: props.defaultValue !== undefined || props.defaultValue !== '' || props.defaultValue !== null || !_this.isEmptyArray(props.defaultValue) ? props.defaultValue : null
         };
         return _this;
     }
-    DynamicField.prototype.componentDidUpdate = function () {
+    DynamicFieldBase.prototype.componentDidUpdate = function () {
         if ((this.props.defaultValue === "" || this.props.defaultValue === null) && this.state.changedValue === null) {
             this.setState({ changedValue: "" });
         }
     };
-    DynamicField.prototype.render = function () {
+    DynamicFieldBase.prototype.render = function () {
         try {
-            return (React.createElement("div", { className: styles.FieldEditor }, this.getFieldComponent()));
+            var theme = getFluentUIThemeOrDefault();
+            var styles = (this._classNames = getClassNames(this.props.styles, {
+                theme: theme,
+                required: this.props.required
+            }));
+            return (React.createElement("div", { className: styles.fieldEditor }, this.getFieldComponent()));
         }
         catch (error) {
             console.log("Error in DynamicField render", error);
             return null;
         }
     };
-    DynamicField.prototype.isEmptyArray = function (value) {
+    DynamicFieldBase.prototype.isEmptyArray = function (value) {
         return Array.isArray(value) && value.length === 0;
     };
-    return DynamicField;
+    return DynamicFieldBase;
 }(React.Component));
-export { DynamicField };
+export { DynamicFieldBase };
+export var DynamicField = styled(DynamicFieldBase, getFieldStyles, undefined, {
+    scope: 'DynamicField',
+});
 //# sourceMappingURL=DynamicField.js.map