pnp · AJIXuMuK · Jul 5, 2024 · Jul 5, 2024
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/index.ts b/src/index.ts
@@ -12,6 +12,7 @@ export * from './PropertyFieldGuid';
 export * from './PropertyFieldButtonWithCallout';
 export * from './PropertyFieldCheckboxWithCallout';
 export * from './PropertyFieldChoiceGroupWithCallout';
+export * from './PropertyFieldCollectionData';
 export * from './PropertyFieldDropdownWithCallout';
 export * from './PropertyFieldLabelWithCallout';
 export * from './PropertyFieldLinkWithCallout';

diff --git a/src/propertyFields/buttonWithCallout/IPropertyFieldButtonWithCalloutHost.ts b/src/propertyFields/buttonWithCallout/IPropertyFieldButtonWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPlaceholderWithCalloutProps } from '../../common/placeholderWithCallout/IPlaceholderWithCallout';
-import { IButtonProps } from '@fluentui/react/lib/components/Button';
+import { IButtonProps } from '@fluentui/react';
 
 /**
  * PropertyFieldButtonWithCalloutHost properties interface

diff --git a/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCallout.ts b/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCallout.ts
@@ -8,7 +8,7 @@ import {
 import PropertyFieldButtonHost from './PropertyFieldButtonWithCalloutHost';
 
 import { IPropertyFieldButtonWithCalloutPropsInternal, IPropertyFieldButtonWithCalloutProps } from './IPropertyFieldButtonWithCallout';
-import { ButtonType } from '@fluentui/react/lib/components/Button';
+import { ButtonType } from '@fluentui/react';
 
 import omit from 'lodash/omit';
 

diff --git a/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCalloutHost.tsx b/src/propertyFields/buttonWithCallout/PropertyFieldButtonWithCalloutHost.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '@fluentui/react/lib/components/Button';
+import { Button } from '@fluentui/react';
 
 import PlaceholderWithCallout from '../../common/placeholderWithCallout/PlaceholderWithCallout';
 

diff --git a/src/propertyFields/checkboxWithCallout/IPropertyFieldCheckboxWithCalloutHost.ts b/src/propertyFields/checkboxWithCallout/IPropertyFieldCheckboxWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPlaceholderWithCalloutProps } from '../../common/placeholderWithCallout/IPlaceholderWithCallout';
-import { ICheckboxProps } from '@fluentui/react/lib/components/Checkbox';
+import { ICheckboxProps } from '@fluentui/react';
 
 /**
  * PropertyFieldCheckboxWithCalloutHost properties interface

diff --git a/src/propertyFields/checkboxWithCallout/PropertyFieldCheckboxWithCalloutHost.tsx b/src/propertyFields/checkboxWithCallout/PropertyFieldCheckboxWithCalloutHost.tsx
@@ -5,7 +5,7 @@ import type { IPlaceholderWithCalloutProps } from '../../common/placeholderWithC
 
 import { IPropertyFieldCheckboxWithCalloutHostProps } from './IPropertyFieldCheckboxWithCalloutHost';
 import * as telemetry from '../../common/telemetry';
-import { Checkbox } from '@fluentui/react/lib/components/Checkbox';
+import { Checkbox } from '@fluentui/react';
 
 /**
  * Renders the control for PropertyFieldCheckboxWithCallout component

diff --git a/src/propertyFields/choiceGroupWithCallout/IPropertyFieldChoiceGroupWithCalloutHost.ts b/src/propertyFields/choiceGroupWithCallout/IPropertyFieldChoiceGroupWithCalloutHost.ts
@@ -1,5 +1,5 @@
 import { IPropertyFieldHeaderCalloutProps } from '../../common/propertyFieldHeader/IPropertyFieldHeader';
-import { IChoiceGroupProps } from '@fluentui/react/lib/components/ChoiceGroup';
+import { IChoiceGroupProps } from '@fluentui/react';
 
 /**
  * PropertyFieldChoiceGroupWithCalloutHost properties interface

diff --git a/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCallout.ts b/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCallout.ts
@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
 
 import omit from 'lodash/omit';
 
-import { IChoiceGroupOption } from '@fluentui/react/lib/components/ChoiceGroup';
+import { IChoiceGroupOption } from '@fluentui/react';
 import {
   IPropertyPaneField,
   PropertyPaneFieldType,

diff --git a/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCalloutHost.tsx b/src/propertyFields/choiceGroupWithCallout/PropertyFieldChoiceGroupWithCalloutHost.tsx
@@ -6,7 +6,7 @@ import type { IPlaceholderWithCalloutProps } from '../../common/placeholderWithC
 
 import { IPropertyFieldChoiceGroupWithCalloutHostProps } from './IPropertyFieldChoiceGroupWithCalloutHost';
 import * as telemetry from '../../common/telemetry';
-import { ChoiceGroup } from '@fluentui/react/lib/components/ChoiceGroup';
+import { ChoiceGroup } from '@fluentui/react';
 
 export default class PropertyFieldToggleWithCalloutHost extends React.Component<
   IPropertyFieldChoiceGroupWithCalloutHostProps,

diff --git a/src/propertyFields/collectionData/IBaseCollectionFIeldsProps.ts b/src/propertyFields/collectionData/IBaseCollectionFIeldsProps.ts
@@ -1,10 +1,10 @@
-import { ICustomCollectionField } from "./ICustomCollectionField";
+import { ICustomCollectionField } from './ICustomCollectionField';
 
 export interface IBaseCollectionFieldProps {
-    field: ICustomCollectionField;
-    item: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-    disableEdit: boolean;
-  
-    fOnValueChange: (fieldId: string, value: any) => void | Promise<void>; // eslint-disable-line @typescript-eslint/no-explicit-any
-    fValidation: (field: ICustomCollectionField, value: any) => Promise<string>; // eslint-disable-line @typescript-eslint/no-explicit-any
-  }
+  field: ICustomCollectionField;
+  item: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  disableEdit: boolean;
+
+  fOnValueChange: (fieldId: string, value: any) => void | Promise<void>; // eslint-disable-line @typescript-eslint/no-explicit-any
+  fValidation: (field: ICustomCollectionField, value: any) => Promise<string>; // eslint-disable-line @typescript-eslint/no-explicit-any
+}