pnp · AJIXuMuK · Jul 5, 2024 · May 15, 2024 · May 15, 2024 · May 15, 2024
diff --git a/CHANGELOG.json b/CHANGELOG.json
@@ -1,5 +1,16 @@
 {
   "versions": [
+    {
+      "version": "3.17.1",
+      "changes": {
+        "new": [],
+        "enhancements": [],
+        "fixes": [
+          "Fixes for Webpack 5: [#621](https://github.com/pnp/sp-dev-fx-property-controls/pull/621)"
+        ]
+      },
+      "contributions": []
+    },
     {
       "version": "3.17.0",
       "changes": {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,17 @@
 # Releases
 
+## 3.17.1
+
+### Fixes
+
+- Fixes for Webpack 5: [#621](https://github.com/pnp/sp-dev-fx-property-controls/pull/621)
+
 ## 3.17.0
 
 ### New control(s)
 
 - `PropertyFieldButton`:  New Control PropertyFieldButton [#613](https://github.com/pnp/sp-dev-fx-property-controls/pull/613)
+- `PropertyFieldGrid`:  New Control PropertyFieldGrid [#614](https://github.com/pnp/sp-dev-fx-property-controls/pull/614)
 
 ### Enhancements
 

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -1,10 +1,17 @@
 # Releases
 
+## 3.17.1
+
+### Fixes
+
+- Fixes for Webpack 5: [#621](https://github.com/pnp/sp-dev-fx-property-controls/pull/621)
+
 ## 3.17.0
 
 ### New control(s)
 
 - `PropertyFieldButton`:  New Control PropertyFieldButton [#613](https://github.com/pnp/sp-dev-fx-property-controls/pull/613)
+- `PropertyFieldGrid`:  New Control PropertyFieldGrid [#614](https://github.com/pnp/sp-dev-fx-property-controls/pull/614)
 
 ### Enhancements
 

diff --git a/docs/documentation/docs/controls/PropertyFieldGrid.md b/docs/documentation/docs/controls/PropertyFieldGrid.md
@@ -4,7 +4,7 @@ This control generates a Grid Control .
 
 **PropertyFieldGrid example usage**
 
-![PropertyFieldGrid example](../assets/propertyFieldGrid.png)
+![PropertyFieldGrid example](../assets/PropertyFieldGrid.png)
 
 ## How to use this control in your solutions
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-property-controls",
   "description": "Reusable property pane controls for SharePoint Framework solutions",
-  "version": "3.17.0",
+  "version": "3.17.1",
   "engines": {
     "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
   },

diff --git a/src/common/placeholderWithCallout/PlaceholderWithCallout.tsx b/src/common/placeholderWithCallout/PlaceholderWithCallout.tsx
@@ -1,38 +1,60 @@
 import * as React from 'react';
-import { Callout, DirectionalHint } from '@fluentui/react/lib/components/Callout';
-import { IPlaceholderWithCalloutProps, IPlaceholderWithCalloutState } from './IPlaceholderWithCallout';
+import { Callout, DirectionalHint, getIconClassName } from '@fluentui/react';
+import {
+  IPlaceholderWithCalloutProps,
+  IPlaceholderWithCalloutState,
+} from './IPlaceholderWithCallout';
 import { CalloutTriggers } from '../callout/Callout';
-import { getIconClassName } from '@fluentui/react/lib/Styling';
 
 import styles from './PlaceholderWithCallout.module.scss';
 
 /**
  * PlaceholderWithCallout component.
  * Displays a label and a callout
  */
-export default class PlaceholderWithCallout extends React.Component<IPlaceholderWithCalloutProps, IPlaceholderWithCalloutState> {
-
+export default class PlaceholderWithCallout extends React.Component<
+  IPlaceholderWithCalloutProps,
+  IPlaceholderWithCalloutState
+> {
   private _infoIcon: HTMLElement;
 
-  public constructor(props: IPlaceholderWithCalloutProps, state: IPlaceholderWithCalloutState) {
+  public constructor(
+    props: IPlaceholderWithCalloutProps,
+    state: IPlaceholderWithCalloutState
+  ) {
     super(props, state);
     this._onCalloutDismiss = this._onCalloutDismiss.bind(this);
     this.state = {
-      isCalloutVisible: false
+      isCalloutVisible: false,
     };
   }
 
   public render(): JSX.Element {
     return (
       <div className={styles.placeholder}>
-        <div className={styles.children}>
-          {this.props.children}
-        </div>
+        <div className={styles.children}>{this.props.children}</div>
         <div className={styles.info}>
-          <i className={getIconClassName('Info')} ref={(infoIcon) => { this._infoIcon = infoIcon; }}
-            onMouseOver={this.props.calloutTrigger === CalloutTriggers.Hover ? this._onInfoIconMouseOver.bind(this) : null}
-            onMouseOut={this.props.calloutTrigger === CalloutTriggers.Hover ? this._onInfoIconMouseOut.bind(this) : null}
-            onClick={this.props.calloutTrigger === CalloutTriggers.Click ? this._onInfoIconClick.bind(this) : null} />
+          <i
+            className={getIconClassName('Info')}
+            ref={(infoIcon) => {
+              this._infoIcon = infoIcon;
+            }}
+            onMouseOver={
+              this.props.calloutTrigger === CalloutTriggers.Hover
+                ? this._onInfoIconMouseOver.bind(this)
+                : null
+            }
+            onMouseOut={
+              this.props.calloutTrigger === CalloutTriggers.Hover
+                ? this._onInfoIconMouseOut.bind(this)
+                : null
+            }
+            onClick={
+              this.props.calloutTrigger === CalloutTriggers.Click
+                ? this._onInfoIconClick.bind(this)
+                : null
+            }
+          />
         </div>
         {this.state.isCalloutVisible && (
           <Callout
@@ -42,20 +64,22 @@ export default class PlaceholderWithCallout extends React.Component<IPlaceholder
             directionalHint={DirectionalHint.leftCenter}
             directionalHintForRTL={DirectionalHint.rightCenter}
             onDismiss={this._onCalloutDismiss}
-            gapSpace={this.props.gapSpace !== undefined ? this.props.gapSpace : 5}
-            calloutWidth={this.props.calloutWidth}>
+            gapSpace={
+              this.props.gapSpace !== undefined ? this.props.gapSpace : 5
+            }
+            calloutWidth={this.props.calloutWidth}
+          >
             {this.props.calloutContent}
           </Callout>
-        )
-        }
-      </div>);
+        )}
+      </div>
+    );
   }
 
-
   private _onCalloutDismiss(): void {
     if (this.state.isCalloutVisible) {
       this.setState({
-        isCalloutVisible: false
+        isCalloutVisible: false,
       });
     }
   }
@@ -67,7 +91,7 @@ export default class PlaceholderWithCallout extends React.Component<IPlaceholder
 
     if (!this.state.isCalloutVisible) {
       this.setState({
-        isCalloutVisible: true
+        isCalloutVisible: true,
       });
     }
   }
@@ -78,16 +102,15 @@ export default class PlaceholderWithCallout extends React.Component<IPlaceholder
     }
 
     if (e.relatedTarget) {
-      const relatedTarget: HTMLElement = (e.relatedTarget as HTMLElement);
+      const relatedTarget: HTMLElement = e.relatedTarget as HTMLElement;
       if (relatedTarget && relatedTarget.closest('.ms-Callout-container')) {
         return;
       }
     }
 
     this.setState({
-      isCalloutVisible: false
+      isCalloutVisible: false,
     });
-
   }
 
   private _onInfoIconClick(): void {
@@ -96,7 +119,7 @@ export default class PlaceholderWithCallout extends React.Component<IPlaceholder
     }
 
     this.setState({
-      isCalloutVisible: !this.state.isCalloutVisible
+      isCalloutVisible: !this.state.isCalloutVisible,
     });
   }
 }
diff --git a/src/common/propertyFieldHeader/PropertyFieldHeader.tsx b/src/common/propertyFieldHeader/PropertyFieldHeader.tsx
@@ -1,24 +1,36 @@
 import * as React from 'react';
-import { Callout, DirectionalHint } from '@fluentui/react/lib/components/Callout';
-import { IPropertyFieldHeaderProps, IPropertyFieldHeaderState, CalloutTriggers } from './IPropertyFieldHeader';
-import { getIconClassName } from '@fluentui/react/lib/Styling';
-import { css } from '@fluentui/react/lib/Utilities';
+import {
+  Callout,
+  DirectionalHint,
+  css,
+  getIconClassName,
+} from '@fluentui/react';
+import {
+  IPropertyFieldHeaderProps,
+  IPropertyFieldHeaderState,
+  CalloutTriggers,
+} from './IPropertyFieldHeader';
 
 import styles from './PropertyFieldHeader.module.scss';
 
 /**
  * PropertyFieldHeader component.
  * Displays a label and a callout
  */
-export default class PropertyFieldHeader extends React.Component<IPropertyFieldHeaderProps, IPropertyFieldHeaderState> {
-
+export default class PropertyFieldHeader extends React.Component<
+  IPropertyFieldHeaderProps,
+  IPropertyFieldHeaderState
+> {
   private _infoIcon: HTMLElement;
 
-  public constructor(props: IPropertyFieldHeaderProps, state: IPropertyFieldHeaderState) {
+  public constructor(
+    props: IPropertyFieldHeaderProps,
+    state: IPropertyFieldHeaderState
+  ) {
     super(props, state);
     this._onCalloutDismiss = this._onCalloutDismiss.bind(this);
     this.state = {
-      isCalloutVisible: false
+      isCalloutVisible: false,
     };
   }
 
@@ -29,23 +41,40 @@ export default class PropertyFieldHeader extends React.Component<IPropertyFieldH
       calloutContent,
       calloutTrigger,
       calloutWidth,
-      gapSpace
+      gapSpace,
     } = this.props;
 
     return (
-      <div className={css({
-        [styles.headerBar]: true,
-        [styles.isDisabled]: !!disabled
-      })}>
-        <div className={styles.header}>
-          {label}
-        </div>
+      <div
+        className={css({
+          [styles.headerBar]: true,
+          [styles.isDisabled]: !!disabled,
+        })}
+      >
+        <div className={styles.header}>{label}</div>
         <div className={styles.info}>
           {calloutContent && (
-            <i className={getIconClassName('Info')} ref={(infoIcon) => { this._infoIcon = infoIcon; }}
-              onMouseOver={!disabled && calloutTrigger === CalloutTriggers.Hover ? this._onInfoIconMouseOver.bind(this) : null}
-              onMouseOut={!disabled && calloutTrigger === CalloutTriggers.Hover ? this._onInfoIconMouseOut.bind(this) : null}
-              onClick={!disabled && calloutTrigger === CalloutTriggers.Click ? this._onInfoIconClick.bind(this) : null} />
+            <i
+              className={getIconClassName('Info')}
+              ref={(infoIcon) => {
+                this._infoIcon = infoIcon;
+              }}
+              onMouseOver={
+                !disabled && calloutTrigger === CalloutTriggers.Hover
+                  ? this._onInfoIconMouseOver.bind(this)
+                  : null
+              }
+              onMouseOut={
+                !disabled && calloutTrigger === CalloutTriggers.Hover
+                  ? this._onInfoIconMouseOut.bind(this)
+                  : null
+              }
+              onClick={
+                !disabled && calloutTrigger === CalloutTriggers.Click
+                  ? this._onInfoIconClick.bind(this)
+                  : null
+              }
+            />
           )}
         </div>
         {this.state.isCalloutVisible && (
@@ -57,19 +86,19 @@ export default class PropertyFieldHeader extends React.Component<IPropertyFieldH
             directionalHintForRTL={DirectionalHint.rightCenter}
             onDismiss={this._onCalloutDismiss}
             gapSpace={gapSpace !== undefined ? gapSpace : 5}
-            calloutWidth={calloutWidth}>
+            calloutWidth={calloutWidth}
+          >
             {calloutContent}
           </Callout>
-        )
-        }
-      </div>);
+        )}
+      </div>
+    );
   }
 
-
   private _onCalloutDismiss(): void {
     if (this.state.isCalloutVisible) {
       this.setState({
-        isCalloutVisible: false
+        isCalloutVisible: false,
       });
     }
   }
@@ -81,7 +110,7 @@ export default class PropertyFieldHeader extends React.Component<IPropertyFieldH
 
     if (!this.state.isCalloutVisible) {
       this.setState({
-        isCalloutVisible: true
+        isCalloutVisible: true,
       });
     }
   }
@@ -92,17 +121,15 @@ export default class PropertyFieldHeader extends React.Component<IPropertyFieldH
     }
 
     if (e.relatedTarget) {
-
-      const relatedTarget: HTMLElement = (e.relatedTarget as HTMLElement);
+      const relatedTarget: HTMLElement = e.relatedTarget as HTMLElement;
       if (relatedTarget && relatedTarget.closest('.ms-Callout-container')) {
         return;
       }
     }
 
     this.setState({
-      isCalloutVisible: false
+      isCalloutVisible: false,
     });
-
   }
 
   private _onInfoIconClick(): void {
@@ -111,7 +138,7 @@ export default class PropertyFieldHeader extends React.Component<IPropertyFieldH
     }
 
     this.setState({
-      isCalloutVisible: !this.state.isCalloutVisible
+      isCalloutVisible: !this.state.isCalloutVisible,
     });
   }
 }
diff --git a/src/common/telemetry/version.ts b/src/common/telemetry/version.ts
@@ -1 +1 @@
-export const version: string = "3.17.0";
+export const version: string = "3.17.1";