Merge pull request #2067 from pnp/dev

3.23.0

Author: AJIXuMuK

CHANGELOG.json

@@ -1,5 +1,38 @@
 {
   "versions": [
+    {
+      "version": "3.23.0",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "Update MPA page with compatibility matrix [#2063](https://github.com/pnp/sp-dev-fx-controls-react/pull/2063)",
+          "`fast-serve`: Update spfx-fast-serve-helpers to 1.21.1 [#2038](https://github.com/pnp/sp-dev-fx-controls-react/pull/2038)",
+          "`DynamicForm`: Add itemsQueryCountLimit for Lookup fields [#2033](https://github.com/pnp/sp-dev-fx-controls-react/issues/2033)",
+          "`ImagePicker`: FluentProvider to SelectFromSharePoint component so token is not undefined [#2046](https://github.com/pnp/sp-dev-fx-controls-react/pull/2046)"
+        ],
+        "fixes": [
+          "`RichText`: Rich Text in v 3.22 ribbon renders incorrectly [#2036](https://github.com/pnp/sp-dev-fx-controls-react/issues/2036)",
+          "`Carousel`: links not opening on a new tab with target: _blank [#2022](https://github.com/pnp/sp-dev-fx-controls-react/issues/2022)",
+          "`ListItemPicker`: calculated column as columnInternalName not working [#1870](https://github.com/pnp/sp-dev-fx-controls-react/issues/1870)",
+          "`Calendar`: not displaying items [#2025](https://github.com/pnp/sp-dev-fx-controls-react/issues/2025)",
+          "`ListItemComments`: Error when using some special characters in text [#2047](https://github.com/pnp/sp-dev-fx-controls-react/issues/2047)",
+          "Update `FolderExplorerService.ts` to add import @pnp/sp/files [#2050](https://github.com/pnp/sp-dev-fx-controls-react/pull/2050)",
+          "`RichText`: indent controls missing icons [#2045](https://github.com/pnp/sp-dev-fx-controls-react/issues/2045)",
+          "Using `ListItemAttachments` to add/remove attachments causes ETag errors [#2051](https://github.com/pnp/sp-dev-fx-controls-react/issues/2051)",
+          "`DynamicForm` and `ModernTaxonomyPicker`: using default value in taxonomy column does not work [#2040](https://github.com/pnp/sp-dev-fx-controls-react/issues/2040)"
+        ]
+      },
+      "contributions": [
+        "[Antanina Druzhkina](https://github.com/Ateina)",
+        "[diabhoil](https://github.com/diabhoil)",
+        "[Harminder Singh](https://github.com/HarminderSethi)",
+        "[Mark Bice](https://github.com/mbice)",
+        "[Michaël Maillot](https://github.com/michaelmaillot)",
+        "[moudhafersalhi](https://github.com/moudhafersalhi)",
+        "[Niels Söth](https://github.com/nsoeth)",
+        "[SeyedAliAsghari96](https://github.com/SeyedAliAsghari96)"
+      ]
+    },
     {
       "version": "3.22.0",
       "changes": {
@@ -55,7 +88,6 @@
           "Add cs-cz.ts [#1932](https://github.com/pnp/sp-dev-fx-controls-react/pull/1932)",
           "`FilterBar`: new control `FilterBar` [#1884](https://github.com/pnp/sp-dev-fx-controls-react/pull/1884)",
           "`Calendar`: new controls `Calendar` [#1955](https://github.com/pnp/sp-dev-fx-controls-react/pull/1955)"
-
         ],
         "enhancements": [
           "Update markdown-it to >=13.0.2 [#1916](https://github.com/pnp/sp-dev-fx-controls-react/issues/1916)",
@@ -215,7 +247,7 @@
     },
     {
       "version": "3.17.0",
-      "changes":{
+      "changes": {
         "new": [],
         "enhancements": [
           "`DyanmicForm`: Added file handling [#1625](https://github.com/pnp/sp-dev-fx-controls-react/pull/1625)",
@@ -359,7 +391,6 @@
         "[Sergei Sergeev](https://github.com/s-KaiNet)",
         "[Sharepointalist](https://github.com/sharepointalist)",
         "[Zhephyr](https://github.com/Zhephyr54)"
-
       ]
     },
     {
@@ -417,7 +448,6 @@
           "`AdaptiveCardHost`: Logic to prevent re-renders (flicker) [#1425](https://github.com/pnp/sp-dev-fx-controls-react/pull/1425)",
           "`ListItemComments`: Add new parameter for ListItemComments to highlight comment [#1430](https://github.com/pnp/sp-dev-fx-controls-react/pull/1430)",
           "`ComboBoxListItemPicker`: Update ComboBoxListItemPicker.md [#1470](https://github.com/pnp/sp-dev-fx-controls-react/pull/1470)"
-
         ],
         "fixes": [
           "`DateTimePicker`: broken link for `getErrorMessage` property fixed [#1277](https://github.com/pnp/sp-dev-fx-controls-react/pull/1381)",
@@ -438,7 +468,6 @@
           "`DateTimePicker`: Date picker locale [#1095](https://github.com/pnp/sp-dev-fx-controls-react/issues/1095)",
           "`RichText`: Use theme colors - fix dark mode [#669](https://github.com/pnp/sp-dev-fx-controls-react/issues/669)",
           "`FilePicker`: Use theme colors - fix dark mode [#1132](https://github.com/pnp/sp-dev-fx-controls-react/issues/1132)"
-
         ]
       },
       "contributions": [
@@ -460,7 +489,6 @@
         "[Samuele Furnari](https://github.com/SamueleFurnari)",
         "[sambilfinger](https://github.com/sambilfinger)",
         "[wuxiaojun514](https://github.com/wuxiaojun514)"
-
       ]
     },
     {
@@ -513,7 +541,6 @@
           "`Placeholder`: Documentation example to only display in edit mode [#1280](https://github.com/pnp/sp-dev-fx-controls-react/issues/1280)",
           "`DynamicForm`: Update documentation regarding onBeforeSubmit [#1319](https://github.com/pnp/sp-dev-fx-controls-react/issues/1319)",
           "`DynamicForm`: FirstDayOfWeek in DatePickers from webs regional settings [#1317](https://github.com/pnp/sp-dev-fx-controls-react/issues/1317)"
-
         ],
         "fixes": [
           "`PeoplePicker`: fixes where people picker returns no results [#1292](https://github.com/pnp/sp-dev-fx-controls-react/issues/1292)",
@@ -584,7 +611,6 @@
           "`PeoplePicker`: PeoplePicker validation on focus out [#1221](https://github.com/pnp/sp-dev-fx-controls-react/pull/1221)",
           "`DynamicForm`: Cannot display lookup value when the source field is not Title [#1215](https://github.com/pnp/sp-dev-fx-controls-react/issues/1215)",
           "`FilePicker`: the endPoint for webSearch do not work [#1256](https://github.com/pnp/sp-dev-fx-controls-react/issues/1256)"
-
         ]
       },
       "contributions": [

CHANGELOG.md

@@ -1,5 +1,30 @@
 # Releases
 
+## 3.23.0
+
+### Enhancements
+
+- Update MPA page with compatibility matrix [#2063](https://github.com/pnp/sp-dev-fx-controls-react/pull/2063)
+- `fast-serve`: Update spfx-fast-serve-helpers to 1.21.1 [#2038](https://github.com/pnp/sp-dev-fx-controls-react/pull/2038)
+- `DynamicForm`: Add itemsQueryCountLimit for Lookup fields [#2033](https://github.com/pnp/sp-dev-fx-controls-react/issues/2033)
+- `ImagePicker`: FluentProvider to SelectFromSharePoint component so token is not undefined [#2046](https://github.com/pnp/sp-dev-fx-controls-react/pull/2046)
+
+### Fixes
+
+- `RichText`: Rich Text in v 3.22 ribbon renders incorrectly [#2036](https://github.com/pnp/sp-dev-fx-controls-react/issues/2036)
+- `Carousel`: links not opening on a new tab with target: _blank [#2022](https://github.com/pnp/sp-dev-fx-controls-react/issues/2022)
+- `ListItemPicker`: calculated column as columnInternalName not working [#1870](https://github.com/pnp/sp-dev-fx-controls-react/issues/1870)
+- `Calendar`: not displaying items [#2025](https://github.com/pnp/sp-dev-fx-controls-react/issues/2025)
+- `ListItemComments`: Error when using some special characters in text [#2047](https://github.com/pnp/sp-dev-fx-controls-react/issues/2047)
+- Update `FolderExplorerService.ts` to add import @pnp/sp/files [#2050](https://github.com/pnp/sp-dev-fx-controls-react/pull/2050)
+- `RichText`: indent controls missing icons [#2045](https://github.com/pnp/sp-dev-fx-controls-react/issues/2045)
+- Using `ListItemAttachments` to add/remove attachments causes ETag errors [#2051](https://github.com/pnp/sp-dev-fx-controls-react/issues/2051)
+- `DynamicForm` and `ModernTaxonomyPicker`: using default value in taxonomy column does not work [#2040](https://github.com/pnp/sp-dev-fx-controls-react/issues/2040)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Antanina Druzhkina](https://github.com/Ateina), [diabhoil](https://github.com/diabhoil), [Harminder Singh](https://github.com/HarminderSethi), [Mark Bice](https://github.com/mbice), [Michaël Maillot](https://github.com/michaelmaillot), [moudhafersalhi](https://github.com/moudhafersalhi), [Niels Söth](https://github.com/nsoeth), [SeyedAliAsghari96](https://github.com/SeyedAliAsghari96).
+
 ## 3.22.0
 
 ### New control(s)

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

@@ -1,5 +1,30 @@
 # Releases
 
+## 3.23.0
+
+### Enhancements
+
+- Update MPA page with compatibility matrix [#2063](https://github.com/pnp/sp-dev-fx-controls-react/pull/2063)
+- `fast-serve`: Update spfx-fast-serve-helpers to 1.21.1 [#2038](https://github.com/pnp/sp-dev-fx-controls-react/pull/2038)
+- `DynamicForm`: Add itemsQueryCountLimit for Lookup fields [#2033](https://github.com/pnp/sp-dev-fx-controls-react/issues/2033)
+- `ImagePicker`: FluentProvider to SelectFromSharePoint component so token is not undefined [#2046](https://github.com/pnp/sp-dev-fx-controls-react/pull/2046)
+
+### Fixes
+
+- `RichText`: Rich Text in v 3.22 ribbon renders incorrectly [#2036](https://github.com/pnp/sp-dev-fx-controls-react/issues/2036)
+- `Carousel`: links not opening on a new tab with target: _blank [#2022](https://github.com/pnp/sp-dev-fx-controls-react/issues/2022)
+- `ListItemPicker`: calculated column as columnInternalName not working [#1870](https://github.com/pnp/sp-dev-fx-controls-react/issues/1870)
+- `Calendar`: not displaying items [#2025](https://github.com/pnp/sp-dev-fx-controls-react/issues/2025)
+- `ListItemComments`: Error when using some special characters in text [#2047](https://github.com/pnp/sp-dev-fx-controls-react/issues/2047)
+- Update `FolderExplorerService.ts` to add import @pnp/sp/files [#2050](https://github.com/pnp/sp-dev-fx-controls-react/pull/2050)
+- `RichText`: indent controls missing icons [#2045](https://github.com/pnp/sp-dev-fx-controls-react/issues/2045)
+- Using `ListItemAttachments` to add/remove attachments causes ETag errors [#2051](https://github.com/pnp/sp-dev-fx-controls-react/issues/2051)
+- `DynamicForm` and `ModernTaxonomyPicker`: using default value in taxonomy column does not work [#2040](https://github.com/pnp/sp-dev-fx-controls-react/issues/2040)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Antanina Druzhkina](https://github.com/Ateina), [diabhoil](https://github.com/diabhoil), [Harminder Singh](https://github.com/HarminderSethi), [Mark Bice](https://github.com/mbice), [Michaël Maillot](https://github.com/michaelmaillot), [moudhafersalhi](https://github.com/moudhafersalhi), [Niels Söth](https://github.com/nsoeth), [SeyedAliAsghari96](https://github.com/SeyedAliAsghari96).
+
 ## 3.22.0
 
 ### New control(s)

docs/documentation/docs/controls/Dashboard.md

@@ -111,6 +111,7 @@ Provides settings of Dashboard's widget
 | controlOptions | IWidgetControlOptions | no | Component rendering options. |
 | body | IWidgetBodyContent[] | no | Widget's content (children) rendered as tabs. |
 | link | IWidgetLink | no | Widget's link rendered at the bottom part of the widget. |
+| rowSpan | number | no | Number of rows the widget should span. If specified, it will override any vertical value set from the size property. |
 
 Interface `IWidgetActionKey`
 

docs/documentation/docs/controls/DynamicForm.md

@@ -72,6 +72,7 @@ The `DynamicForm` can be configured with the following properties:
 | useModernTaxonomyPicker | boolean | no | Specifies if the form should render [ModernTaxonomyPicker](./ModernTaxonomyPicker.md) control for Managed metadata fields. If set to `true`, Dynamic form will render ModernTaxonomyPicker control. If set to `false`, Dynamic form will render TaxonomyPicker control. Default is `false` |
 | className | string | no | Set CSS Class. |
 | styles | IStyleFunctionOrObject<IDynamicFormStyleProps, [IDynamicFormStyles](#idynamicformstyles-interface)> | no | Styles to apply on control.  See the example [here](#how-to-use-styles-property) |
+| itemsQueryCountLimit | number | no | 	Number of items to display in the lookup fields of the form |                                                            |
 
 ## Validation Error Dialog Properties `IValidationErrorDialogProps`
 
@@ -119,6 +120,56 @@ The `DynamicForm` can be configured with the following properties:
 | thumbnailFieldButtons | IStyle | styles for button when field type is 'Thumbnail' |
 | selectedFileContainer | IStyle | styles for File Selection Control |
 
+## Public Methods
+
+The `DynamicForm` control exposes the following public methods that can be called using a ref:
+
+### updateETag(itemData: any): void
+
+Updates the ETag stored in the component's state. This is useful when the list item has been modified externally (e.g., by adding/removing attachments using the ListItemAttachments control) and you need to update the ETag to prevent 412 conflict errors on save.
+
+**Parameters:**
+- `itemData` - The updated item data containing the new ETag (typically from SharePoint REST API response with `odata.etag` property)
+
+**Example:**
+
+```TypeScript
+import * as React from 'react';
+import { DynamicForm } from '@pnp/spfx-controls-react/lib/DynamicForm';
+import { ListItemAttachments } from '@pnp/spfx-controls-react/lib/ListItemAttachments';
+
+export class MyComponent extends React.Component {
+  private dynamicFormRef = React.createRef<DynamicForm>();
+
+  private onAttachmentChange = (itemData: any): void => {
+    // Update the DynamicForm's ETag when attachments are modified
+    if (this.dynamicFormRef.current) {
+      this.dynamicFormRef.current.updateETag(itemData);
+    }
+  }
+
+  public render() {
+    return (
+      <div>
+        <ListItemAttachments
+          listId={this.props.listId}
+          itemId={this.props.itemId}
+          context={this.props.context}
+          onAttachmentChange={this.onAttachmentChange}
+        />
+        <DynamicForm
+          ref={this.dynamicFormRef}
+          context={this.props.context}
+          listId={this.props.listId}
+          listItemId={this.props.itemId}
+          respectETag={true}
+        />
+      </div>
+    );
+  }
+}
+```
+
 ## How to use styles property
 
 Property styles of Dynamic Form gives you a set of properties which you can use to modify styles.

docs/documentation/docs/controls/GridLayout.md

@@ -147,5 +147,10 @@ The grid layout control can be configured with the following properties:
 | items | any[] | yes | The array of items you wish to display. |
 | listProps | IListProps | no | Provides additional list properties to customize the underlying list. |
 | onRenderGridItem | function | yes | onRenderGridItem handler for the grid layout. Use this handler to specify how you wish to render each grid item |
+| itemPadding | number | no | Gap between items. |
+| itemMinWidth | number | no | Minimum width for each item. |
+| itemMaxWidth | number | no | Maximum width for each item. |
+| compactThreshold | number | no | Threshold width below which the compact layout is activated. |
+| rowsPerPage | number | no | Number of rows displayed per page. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/gridlayout)

docs/documentation/docs/controls/ListItemAttachments.md

@@ -63,5 +63,53 @@ The `ListItemAttachments` control can be configured with the following propertie
 | description | string | no | Description text to display on the placeholder, below the main text and icon. |
 | disabled | boolean | no | Specifies if the control is disabled or not. |
 | openAttachmentsInNewWindow | boolean | no | Specifies if the attachment should be opened in a separate browser tab. Use this property set to `true` if you plan to use the component in Microsoft Teams. |
+| onAttachmentChange | (itemData: any) => void | no | Callback function invoked when attachments are added or removed. Receives the updated item data including the new ETag. This is useful when using the control within a form (like DynamicForm) that tracks ETags for optimistic concurrency control. |
+
+## Usage with DynamicForm
+
+When using `ListItemAttachments` within a `DynamicForm` or any component that uses ETags for optimistic concurrency control, you should use the `onAttachmentChange` callback to update the ETag when attachments are modified:
+
+```TypeScript
+import * as React from 'react';
+import { DynamicForm } from '@pnp/spfx-controls-react/lib/DynamicForm';
+import { ListItemAttachments } from '@pnp/spfx-controls-react/lib/ListItemAttachments';
+
+export class MyFormComponent extends React.Component<any, any> {
+  private dynamicFormRef = React.createRef<DynamicForm>();
+
+  /**
+   * Callback invoked when attachments are added or removed
+   * Updates the ETag in DynamicForm to prevent 412 conflicts
+   */
+  private onAttachmentChange = (itemData: any): void => {
+    if (this.dynamicFormRef.current) {
+      this.dynamicFormRef.current.updateETag(itemData);
+    }
+  }
+
+  public render(): React.ReactElement {
+    return (
+      <div>
+        <ListItemAttachments
+          listId={listId}
+          itemId={itemId}
+          context={this.props.context}
+          onAttachmentChange={this.onAttachmentChange}
+        />
+        
+        <DynamicForm
+          ref={this.dynamicFormRef}
+          context={this.props.context}
+          listId={listId}
+          listItemId={itemId}
+          respectETag={true}
+        />
+      </div>
+    );
+  }
+}
+```
+
+This prevents 412 ETag conflict errors when saving the form after adding or removing attachments.
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemAttachments)