Switched build from CommonJS to ES2022.

package.json

@@ -92,12 +92,12 @@
         "@microsoft/applicationinsights-web": "^3.0.2",
         "@monaco-editor/loader": "^1.3.3",
         "@monaco-editor/react": "^4.6.0",
-        "@paperbits/azure": "0.1.649",
-        "@paperbits/common": "0.1.649",
-        "@paperbits/core": "0.1.649",
-        "@paperbits/forms": "0.1.649",
-        "@paperbits/react": "1.0.8",
-        "@paperbits/styles": "0.1.649",
+        "@paperbits/azure": "0.1.650",
+        "@paperbits/common": "0.1.650",
+        "@paperbits/core": "0.1.650",
+        "@paperbits/forms": "0.1.650",
+        "@paperbits/react": "1.0.10",
+        "@paperbits/styles": "0.1.650",
         "@webcomponents/custom-elements": "1.6.0",
         "@webcomponents/shadydom": "^1.11.0",
         "client-oauth2": "4.3.3",

src/admin/custom-widgets/customWidgetDetailsModal.tsx

@@ -42,13 +42,13 @@ const technology: IChoiceGroupOption[] = [
 
 export class CustomWidgetDetailsModal extends React.Component<CustomWidgetDetailsModalProps, CustomWidgetDetailsModalState> {
     @Resolve('widgetService')
-    public widgetService: IWidgetService;
+    public declare widgetService: IWidgetService;
 
     @Resolve('blobStorage')
-    public blobStorage: MapiBlobStorage;
+    public declare blobStorage: MapiBlobStorage;
 
     @Resolve('eventManager')
-    public eventManager: EventManager;
+    public declare eventManager: EventManager;
 
     constructor(props: CustomWidgetDetailsModalProps) {
         super(props);
@@ -200,7 +200,7 @@ export class CustomWidgetDetailsModal extends React.Component<CustomWidgetDetail
                     }
                     <Stack className={`collapsible-section${!this.state.showInstructions ? ' hidden' : ''}`}>
                         <Text block styles={{ root: { paddingTop: 20 } }}>
-                            Follow the steps below to create, implement, and deploy a custom widget. 
+                            Follow the steps below to create, implement, and deploy a custom widget.
                             <Link href="https://aka.ms/apimdocs/portal/customwidgets" target="_blank">Learn more</Link>.
                         </Text>
                         <ol>

src/admin/custom-widgets/customWidgets.tsx

@@ -27,10 +27,10 @@ const iconStyles = { width: '16px', color: lightTheme.palette.themePrimary };
 
 export class CustomWidgets extends React.Component<CustomWidgetsProps, CustomWidgetsState> {
     @Resolve('viewManager')
-    public viewManager: ViewManager;
+    public declare viewManager: ViewManager;
 
     @Resolve('blobStorage')
-    public blobStorage: MapiBlobStorage;
+    public declare blobStorage: MapiBlobStorage;
 
     constructor(props: CustomWidgetsProps) {
         super(props);
@@ -63,7 +63,7 @@ export class CustomWidgets extends React.Component<CustomWidgetsProps, CustomWid
             configsAll.forEach(config => {
                 if (config.override) configs[config.name] = config;
             });
-            
+
             this.setState({ customWidgets: Object.values(configs)});
         }).finally(() => this.setState({ isLoading: false }));
     }
@@ -109,7 +109,7 @@ export class CustomWidgets extends React.Component<CustomWidgetsProps, CustomWid
             <BackButton onClick={this.props.onBackButtonClick} />
             <Stack className="nav-item-description-container">
                 <Text className="description-text">
-                    Custom widgets let you extend the developer portal's functionality in a modular way. For example, you can implement an integration 
+                    Custom widgets let you extend the developer portal's functionality in a modular way. For example, you can implement an integration
                     with a support system, reuse it on several pages, and source-control the code in a git repository.
                 </Text>
             </Stack>

src/admin/help/helpModal.tsx

@@ -16,7 +16,7 @@ const headerStyles = { root: { paddingTop: 15, margin: 0 } };
 
 export class HelpModal extends React.Component<HelpModalProps, HelpModalState> {
     @Resolve('policyService')
-    public policyService: PolicyService;
+    public declare policyService: PolicyService;
 
     constructor(props: HelpModalProps) {
         super(props);
@@ -64,7 +64,7 @@ export class HelpModal extends React.Component<HelpModalProps, HelpModalState> {
                         <li><Text block><Link href="https://aka.ms/apimdocs/portal" target="_blank">Overview</Link> of the developer portal.</Text></li>
                         <li><Text block><Link href="https://aka.ms/apimdocs/customizeportal" target="_blank">Access and customize the developer portal</Link> with a step-by-step tutorial.</Text></li>
                     </ul>
-                    
+
                     <Text as="h3" block variant="large" styles={headerStyles}>How-to</Text>
                     <ul>
                         <li><Text block><Link href="https://aka.ms/apimdocs/portal/cors" target="_blank">Enable CORS</Link></Text></li>

src/admin/leftPanel.tsx

@@ -59,19 +59,19 @@ const iconStyles = { root: { color: lightTheme.palette.themePrimary, fontSize: 2
 
 export class LeftPanel extends React.Component<{}, LeftPanelState> {
     @Resolve('siteService')
-    public siteService: ISiteService;
+    public declare siteService: ISiteService;
 
     @Resolve('eventManager')
-    public eventManager: EventManager;
-    
+    public declare eventManager: EventManager;
+
     @Resolve('viewManager')
-    public viewManager: ViewManager;
+    public declare viewManager: ViewManager;
 
     @Resolve('router')
-    public router: Router;
+    public declare router: Router;
 
     @Resolve('logger')
-    public logger: Logger;
+    public declare logger: Logger;
 
     constructor(props: any) {
         super(props);
@@ -128,7 +128,7 @@ export class LeftPanel extends React.Component<{}, LeftPanelState> {
         this.setState({ selectedNavItem: NavItem.Main });
         this.viewManager.setHost({ name: 'page-host' });
     }
-    
+
     handleOnboardingModalClose = (): void => {
         this.setState({ showOnboardingModal: false });
         localStorage.setItem('isOnboardingSeen', 'true');
@@ -210,7 +210,7 @@ export class LeftPanel extends React.Component<{}, LeftPanelState> {
                         />
                         <CommandBarButton
                             iconProps={feedbackIcon}
-                            onRenderText={() => 
+                            onRenderText={() =>
                                 <Text block styles={{ root: { flexGrow: 1, margin: '0 4px' } }}>
                                     Give feedback
                                     <Icon iconName="OpenInNewWindow" styles={{ root: { paddingLeft: 5 } }} />
@@ -268,7 +268,7 @@ export class LeftPanel extends React.Component<{}, LeftPanelState> {
                                 this.logger.trackEvent(`${checked ? 'Checked' : 'Unchecked'}: Preview new UI design`);
                                 this.eventManager.dispatchEvent('onSaveChanges');
                                 this.eventManager.dispatchEvent('onDataPush'); // Needed to reload the runtime part
-                            }} 
+                            }}
                         />
                     }
                 </div>