April Mid Release

Breadcrumb/Breadcrumb/components/CanvasBreadcrumb.tsx

@@ -51,6 +51,10 @@ export const CanvasBreadcrumb = React.memo((props: IBreadcrumbProps): React.Reac
 
     const breadcrumbItems: IBreadcrumbItem[] = getBreadcrumbItems(items, onClick);
 
+    // onReduceData is required to prevent breadcrumb from shrinking
+    // when item changes dynamically
+    const returnUndefined = () => undefined;
+
     return (
         <ThemeProvider applyTo="none" theme={theme} ref={rootRef}>
             <CustomBreadcrumb
@@ -59,6 +63,7 @@ export const CanvasBreadcrumb = React.memo((props: IBreadcrumbProps): React.Reac
                 maxDisplayedItems={maxDisplayedItems}
                 aria-label={ariaLabel}
                 overflowIndex={overflowIndex}
+                onReduceData={returnUndefined}
             />
         </ThemeProvider>
     );

Breadcrumb/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@fluentui/react": "8.29.0",
-    "@fluentui/react-hooks": "^8.5.4",
+    "@fluentui/react-hooks": "8.5.4",
     "react": "16.8.6",
     "react-dom": "16.8.6"
   },

DetailsList/DetailsList/index.ts

@@ -12,6 +12,7 @@ const SelectionTypes: Record<'0' | '1' | '2', SelectionMode> = {
 };
 
 export class FluentDetailsList implements ComponentFramework.ReactControl<IInputs, IOutputs> {
+    private static readonly COLUMN_LIMIT: number = 125;
     notifyOutputChanged: () => void;
     container: HTMLDivElement;
     context: ComponentFramework.Context<IInputs>;
@@ -51,6 +52,12 @@ export class FluentDetailsList implements ComponentFramework.ReactControl<IInput
             onSelectionChanged: this.onSelectionChanged,
             canSelectItem: this.canSelectItem,
         });
+        // Set column limit to 150
+        if (context.parameters.columns.paging.pageSize !== FluentDetailsList.COLUMN_LIMIT) {
+            const columnDataset = context.parameters.columns;
+            columnDataset.paging.setPageSize(FluentDetailsList.COLUMN_LIMIT);
+            context.parameters.columns.refresh();
+        }
     }
 
     public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
@@ -167,12 +174,12 @@ export class FluentDetailsList implements ComponentFramework.ReactControl<IInput
         const sorting = this.datasetSupportsSorting()
             ? dataset.sorting
             : [
-                  {
-                      name: context.parameters.CurrentSortColumn.raw ?? '',
-                      sortDirection: context.parameters.CurrentSortDirection
-                          .raw as unknown as ComponentFramework.PropertyHelper.DataSetApi.Types.SortDirection,
-                  } as ComponentFramework.PropertyHelper.DataSetApi.SortStatus,
-              ];
+                {
+                    name: context.parameters.CurrentSortColumn.raw ?? '',
+                    sortDirection: context.parameters.CurrentSortDirection
+                        .raw as unknown as ComponentFramework.PropertyHelper.DataSetApi.Types.SortDirection,
+                } as ComponentFramework.PropertyHelper.DataSetApi.SortStatus,
+            ];
 
         // There are two types of visual indicators to items loading
         // - Shimmer - for when the dataset has not yet been initialized or is in an error state

SubwayNav/SubwayNav/ControlManifest.Input.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest>
-  <control namespace="PowerCAT" constructor="SubwayNav" version="0.0.1" display-name-key="SubwayNav" description-key="SubwayNav_Desc" control-type="virtual">
+  <control namespace="PowerCAT" constructor="SubwayNav" version="1.0.25" display-name-key="SubwayNav" description-key="SubwayNav_Desc" control-type="virtual">
     <!-- Style Properties -->
     <property name="Theme" display-name-key="Theme" of-type="Multiple" usage="input" required="false" />
     <property name="AccessibilityLabel" display-name-key="AccessibilityLabel" of-type="SingleLine.Text" usage="input" required="false" />
@@ -14,6 +14,8 @@
       <value name="WizardComplete" display-name-key="WizardComplete" description-key="WizardComplete">WizardComplete</value>
       <value name="Error" display-name-key="Error" description-key="Error">Error</value>
     </property>
+    <!--Show initial animation-->
+    <property name="ShowAnimation" display-name-key="ShowAnimation" of-type="TwoOptions" default-value="true" usage="input" />
     <!-- dataset node represents a set of entity records on CDS; allow more than one datasets -->
     <data-set name="items" display-name-key="Items">
       <property-set name="ItemLabel" display-name-key="Item Label" of-type="SingleLine.Text" usage="bound" required="true" />
@@ -26,8 +28,8 @@
     <property name="Steps" display-name-key="Steps" of-type="Object" usage="output"/>
     <property name="StepsSchema" display-name-key="StepsSchema" of-type="SingleLine.Text" usage="bound" hidden="true"/>
     <property-dependencies>
-			<property-dependency input="StepsSchema" output="Steps" required-for="schema" />
-		</property-dependencies>
+      <property-dependency input="StepsSchema" output="Steps" required-for="schema" />
+    </property-dependencies>
     <resources>
       <code path="index.ts" order="1" />
       <resx path="strings/Subwaynav.1033.resx" version="1.0.0" />

SubwayNav/SubwayNav/__mocks__/mock-parameters.ts

@@ -13,5 +13,6 @@ export function getMockParameters(): IInputs {
         ApplyDarkTheme: new MockTwoOptionsProperty(),
         WizardCompleteorError: new MockEnumProperty(),
         StepsSchema: new MockStringProperty(),
+        ShowAnimation: new MockTwoOptionsProperty(),
     };
 }

SubwayNav/SubwayNav/_test_/__snapshots__/subwaynav-lifecycle.test.ts.snap

@@ -138,6 +138,7 @@ exports[`SubwayNav renders 1`] = `
   }
   onSelected={[Function]}
   setFocus=""
+  showAnimation={true}
   tabIndex={0}
   themeJSON="{\\"palette\\":{\\"themePrimary\\":\\"#005ba1\\",\\"themeLighterAlt\\":\\"#f1f7fb\\",\\"themeLighter\\":\\"#cadff0\\",\\"themeLight\\":\\"#9fc5e3\\",\\"themeTertiary\\":\\"#4f93c6\\",\\"themeSecondary\\":\\"#156aac\\",\\"themeDarkAlt\\":\\"#005291\\",\\"themeDark\\":\\"#00457a\\",\\"themeDarker\\":\\"#00335a\\",\\"neutralLighterAlt\\":\\"#faf9f8\\",\\"neutralLighter\\":\\"#f3f2f1\\",\\"neutralLight\\":\\"#edebe9\\",\\"neutralQuaternaryAlt\\":\\"#e1dfdd\\",\\"neutralQuaternary\\":\\"#d0d0d0\\",\\"neutralTertiaryAlt\\":\\"#c8c6c4\\",\\"neutralTertiary\\":\\"#a19f9d\\",\\"neutralSecondary\\":\\"#605e5c\\",\\"neutralPrimaryAlt\\":\\"#3b3a39\\",\\"neutralPrimary\\":\\"#323130\\",\\"neutralDark\\":\\"#201f1e\\",\\"black\\":\\"#000000\\",\\"white\\":\\"#ffffff\\"}}"
   width={-1}
@@ -184,6 +185,7 @@ exports[`SubwayNav renders dummy items when no items configured 1`] = `
   }
   onSelected={[Function]}
   setFocus=""
+  showAnimation={true}
   tabIndex={0}
   themeJSON="{\\"palette\\":{\\"themePrimary\\":\\"#005ba1\\",\\"themeLighterAlt\\":\\"#f1f7fb\\",\\"themeLighter\\":\\"#cadff0\\",\\"themeLight\\":\\"#9fc5e3\\",\\"themeTertiary\\":\\"#4f93c6\\",\\"themeSecondary\\":\\"#156aac\\",\\"themeDarkAlt\\":\\"#005291\\",\\"themeDark\\":\\"#00457a\\",\\"themeDarker\\":\\"#00335a\\",\\"neutralLighterAlt\\":\\"#faf9f8\\",\\"neutralLighter\\":\\"#f3f2f1\\",\\"neutralLight\\":\\"#edebe9\\",\\"neutralQuaternaryAlt\\":\\"#e1dfdd\\",\\"neutralQuaternary\\":\\"#d0d0d0\\",\\"neutralTertiaryAlt\\":\\"#c8c6c4\\",\\"neutralTertiary\\":\\"#a19f9d\\",\\"neutralSecondary\\":\\"#605e5c\\",\\"neutralPrimaryAlt\\":\\"#3b3a39\\",\\"neutralPrimary\\":\\"#323130\\",\\"neutralDark\\":\\"#201f1e\\",\\"black\\":\\"#000000\\",\\"white\\":\\"#ffffff\\"}}"
   width={-1}

SubwayNav/SubwayNav/_test_/subwaynav-lifecycle.test.ts

@@ -101,6 +101,7 @@ function createComponent() {
     const component = new SubwayNav();
     const notifyOutputChanged = jest.fn();
     const context = new MockContext<IInputs>(getMockParameters());
+    context.parameters.ShowAnimation.raw = true;
     context.parameters.items = new MockDataSet([
         new MockEntityRecord('1', {
             [ItemColumns.Key]: 'Item 1',

SubwayNav/SubwayNav/components/CanvasSubwayNav.tsx

@@ -1,16 +1,19 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { ThemeProvider, createTheme, ITheme, IFocusZoneProps, mergeStyles } from '@fluentui/react';
+import { ThemeProvider, createTheme, ITheme, IFocusZoneProps } from '@fluentui/react';
 import { ISubwayNavNodeProps, SubwayNavNodeState } from '../utilities/subway-nav/subway-node.types';
 import { goToStepById, completeAllSteps, errorAllSteps } from '../utilities/utilities';
-import { SubwayNav as CustomSubwayNav } from '../utilities/subway-nav/subway-nav';
+import {
+    SubwayNav as CustomSubwayNav,
+    SubwayNavNoAnimation as CustomSubwayNavNoAnimation,
+} from '../utilities/subway-nav/subway-nav';
 import { ISubNavItem, ISubNavProps } from './components.types';
 
 import { M365Styles, IM365ExtendedSemanticColors } from '../utilities/customizations/src';
 import { useAsync, usePrevious } from '@fluentui/react-hooks';
 import { getSubwayNavNodeState } from './DatasetMapping';
 import { PPACActualLightTheme, PPACActualDarkTheme } from '../utilities/themes';
-import { subwayNavWidth, wizardContentMaxWidth } from '../utilities/wizard';
+import { ISubwayNavProps } from '../utilities/subway-nav/subway-nav.types';
 
 // reference : https://admincontrolsdemoapps.blob.core.windows.net/demo-app/latest/DemoApp/index.html#/examples/subwaynav
 
@@ -27,7 +30,17 @@ const ariaLabelStrings = {
 };
 
 export const CanvasSubwayNav = React.memo((props: ISubNavProps): React.ReactElement => {
-    const { items, themeJSON, onSelected, setFocus, applyDarkTheme, tabIndex, disabled, wizardComplete } = props;
+    const {
+        items,
+        themeJSON,
+        onSelected,
+        setFocus,
+        applyDarkTheme,
+        tabIndex,
+        disabled,
+        wizardComplete,
+        showAnimation,
+    } = props;
     const [isNavCompleteOrError, setIsNavCompleteOrError] = useState(false);
     let allSteps: ISubwayNavNodeProps[];
     const prevItems = usePrevious(items);
@@ -51,10 +64,10 @@ export const CanvasSubwayNav = React.memo((props: ISubNavProps): React.ReactElem
             }
             return themeJSON
                 ? createTheme({
-                    palette: { ...JSON.parse(themeJSON).palette },
-                    semanticColors: semanticColorsCopy,
-                    components: M365Styles,
-                })
+                      palette: { ...JSON.parse(themeJSON).palette },
+                      semanticColors: semanticColorsCopy,
+                      components: M365Styles,
+                  })
                 : copyofM365Theme;
         } catch (ex) {
             /* istanbul ignore next */
@@ -99,6 +112,7 @@ export const CanvasSubwayNav = React.memo((props: ISubNavProps): React.ReactElem
                             disabled: item.disabled ?? false,
                             parentId: item.parentId,
                             onClickStep,
+                            index: 10,
                             isVisuallyDisabled: item.visuallyDisabled ?? false,
                         };
                     });
@@ -114,6 +128,7 @@ export const CanvasSubwayNav = React.memo((props: ISubNavProps): React.ReactElem
                     ...(subSteps.length > 0 && { subSteps: subSteps }),
                     disabled: group.disabled ?? false,
                     onClickStep,
+                    index: 10,
                     isVisuallyDisabled: group.visuallyDisabled ?? false,
                 };
             }) as unknown as ISubwayNavNodeProps[];
@@ -149,17 +164,23 @@ export const CanvasSubwayNav = React.memo((props: ISubNavProps): React.ReactElem
         }
     }, [wizardComplete, steps, items, getSteps, handleClickStep, prevItems, prevNavState]);
 
+    const subwaynavProps = {
+        disabled: disabled,
+        focusZoneProps: focusZoneProps,
+        stateAriaLabels: ariaLabelStrings,
+        steps: steps,
+        // This is required to override width styles in custom pages
+        styles: { root: { width: props.width } },
+        ...(wizardComplete !== 'None' && { wizardComplete: isNavCompleteOrError }),
+    } as ISubwayNavProps;
+
     return (
         <ThemeProvider theme={theme}>
-            <CustomSubwayNav
-                disabled={disabled}
-                focusZoneProps={focusZoneProps}
-                stateAriaLabels={ariaLabelStrings}
-                steps={steps}
-                //This is required to override width styles in custom pages
-                styles={{ root: { width: props.width } }}
-                {...(wizardComplete !== 'None' && { wizardComplete: isNavCompleteOrError })}
-            />
+            {showAnimation ? (
+                <CustomSubwayNav {...subwaynavProps} />
+            ) : (
+                <CustomSubwayNavNoAnimation {...subwaynavProps} />
+            )}
         </ThemeProvider>
     );
 });

SubwayNav/SubwayNav/components/components.types.ts

@@ -37,4 +37,5 @@ export interface ISubNavProps {
     applyDarkTheme?: boolean;
     disabled: boolean;
     wizardComplete: string;
+    showAnimation?: boolean;
 }

SubwayNav/SubwayNav/index.ts

@@ -67,6 +67,7 @@ export class SubwayNav implements ComponentFramework.ReactControl<IInputs, IOutp
             applyDarkTheme: context.parameters?.ApplyDarkTheme.raw ?? false,
             disabled: context.mode.isControlDisabled,
             wizardComplete: context.parameters.WizardCompleteorError.raw,
+            showAnimation: context.parameters.ShowAnimation.raw,
         };
         return React.createElement(CanvasSubwayNav, props);
     }

SubwayNav/SubwayNav/strings/Subwaynav.1033.resx

@@ -150,4 +150,7 @@
     <data name="WizardCompleteorError" xml:space="preserve">
         <value>SubwayNav state</value>
     </data>
+    <data name="ShowAnimation" xml:space="preserve">
+        <value>Show animation</value>
+    </data>
 </root>

SubwayNav/SubwayNav/utilities/README.md

@@ -0,0 +1,17 @@
+# Subway Nav new property - Show Animation
+
+Subwaynav is primarily used in wizard based experience where user navigates through different steps of a process.
+While the implementation of Subwaynav is fairly straight forward when there is a canvas app/ custom page with one screen, the appearance of it varies when used in different screen for each step, because of an animation it brings along with it during intial load or whenever the item collection is changed.
+
+Inorder to disable the animation, a new property - Show animation is included, to give app makers an option to enable or disable the animation effect based on the requirement.
+
+## Related changes are performed in file following files under this utility folder.
+
+- subway-nav.types.ts
+- subway-nav.tsx
+- subway-nav-types.ts
+- subway-nav-no-animation.styles.tsx
+
+## Clip explaining purpose of this change
+
+<img src="../../media/SubwayNav-Animation.gif" alt="SubwayNav" width="800"/>