Beta

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"
   },

Calendar/Calendar/loc/Readme.md

@@ -6,7 +6,6 @@ All the translation files are borrowed from contributions(Link at the bottom) an
  - Galician(gl-ES)
  - Hindi (hi-IN)
  - Croatian(hr-HR)
- - Hungarian(hu-HU)
  - Indonesian(id-ID)
  - Latvian(lv-LV)
  - Korean(ko-KR)
@@ -23,4 +22,6 @@ Inorder to include the above mentioned language file(s), headover to [loc folder
 
 Note: Only languages which are supported by [Language function](https://docs.microsoft.com/en-us/power-platform/power-fx/reference/function-language) in PowerApps are considered, i.e. [IETF BCP-47 language tag](https://tools.ietf.org/html/bcp47) format.
 
-Reference : https://github.com/pnp/sp-dev-fx-controls-react/tree/master/src/loc 
+Important : Please submit a Pull Reuqest pointing to beta branch.
+
+Reference : https://github.com/pnp/sp-dev-fx-controls-react/tree/master/src/loc

Calendar/Calendar/loc/da-dk.ts

@@ -3,33 +3,33 @@ define([], () => {
         DatePickerMonthLongJanuary: 'Januar',
         DatePickerMonthShortJanuary: 'Jan',
         DatePickerMonthLongFebruary: 'Februar',
-        DatePickerMonthShortFebruary: 'Februar',
+        DatePickerMonthShortFebruary: 'Feb',
         DatePickerMonthLongMarch: 'Marts',
         DatePickerMonthShortMarch: 'Mar',
         DatePickerMonthLongApril: 'April',
         DatePickerMonthShortApril: 'Apr',
-        DatePickerMonthLongMay: 'Kan',
-        DatePickerMonthShortMay: 'Kan',
+        DatePickerMonthLongMay: 'Maj',
+        DatePickerMonthShortMay: 'Maj',
         DatePickerMonthLongJune: 'Juni',
-        DatePickerMonthShortJune: 'Juni',
+        DatePickerMonthShortJune: 'Jun',
         DatePickerMonthLongJuly: 'Juli',
         DatePickerMonthShortJuly: 'Jul',
         DatePickerMonthLongAugust: 'August',
-        DatePickerMonthShortAugust: 'August',
+        DatePickerMonthShortAugust: 'Aug',
         DatePickerMonthLongSeptember: 'September',
-        DatePickerMonthShortSeptember: 'Syv',
+        DatePickerMonthShortSeptember: 'Sep',
         DatePickerMonthLongOctober: 'Oktober',
-        DatePickerMonthShortOctober: 'Oktober',
+        DatePickerMonthShortOctober: 'Okt',
         DatePickerMonthLongNovember: 'November',
-        DatePickerMonthShortNovember: 'November',
+        DatePickerMonthShortNovember: 'Nov',
         DatePickerMonthLongDecember: 'December',
-        DatePickerMonthShortDecember: 'December',
+        DatePickerMonthShortDecember: 'Dec',
         DatePickerDayLongSunday: 'Søndag',
-        DatePickerDayShortSunday: 'Sun',
+        DatePickerDayShortSunday: 'Søn',
         DatePickerDayLongMonday: 'Mandag',
-        DatePickerDayShortMonday: 'Min',
+        DatePickerDayShortMonday: 'Man',
         DatePickerDayLongTuesday: 'Tirsdag',
-        DatePickerDayShortTuesday: 'Tue',
+        DatePickerDayShortTuesday: 'Tir',
         DatePickerDayLongWednesday: 'Onsdag',
         DatePickerDayShortWednesday: 'Ons',
         DatePickerDayLongThursday: 'Torsdag',

Calendar/Calendar/loc/hu-hu.ts

@@ -0,0 +1,53 @@
+define([], () => {
+    return {
+        DatePickerMonthLongJanuary: 'Január',
+        DatePickerMonthShortJanuary: 'Jan',
+        DatePickerMonthLongFebruary: 'Február',
+        DatePickerMonthShortFebruary: 'Feb',
+        DatePickerMonthLongMarch: 'Március',
+        DatePickerMonthShortMarch: 'Már',
+        DatePickerMonthLongApril: 'Április',
+        DatePickerMonthShortApril: 'Ápr',
+        DatePickerMonthLongMay: 'Május',
+        DatePickerMonthShortMay: 'Máj',
+        DatePickerMonthLongJune: 'Június',
+        DatePickerMonthShortJune: 'Jún',
+        DatePickerMonthLongJuly: 'Július',
+        DatePickerMonthShortJuly: 'Júl',
+        DatePickerMonthLongAugust: 'Augusztus',
+        DatePickerMonthShortAugust: 'Aug',
+        DatePickerMonthLongSeptember: 'Szeptember',
+        DatePickerMonthShortSeptember: 'Szept',
+        DatePickerMonthLongOctober: 'Október',
+        DatePickerMonthShortOctober: 'Okt',
+        DatePickerMonthLongNovember: 'November',
+        DatePickerMonthShortNovember: 'Nov',
+        DatePickerMonthLongDecember: 'December',
+        DatePickerMonthShortDecember: 'Dec',
+        DatePickerDayLongSunday: 'Vasárnap',
+        DatePickerDayShortSunday: 'Vas',
+        DatePickerDayLongMonday: 'Hétfő',
+        DatePickerDayShortMonday: 'Hé',
+        DatePickerDayLongTuesday: 'Kedd',
+        DatePickerDayShortTuesday: 'Ke',
+        DatePickerDayLongWednesday: 'Szerda',
+        DatePickerDayShortWednesday: 'Sze',
+        DatePickerDayLongThursday: 'Csütörtök',
+        DatePickerDayShortThursday: 'Csü',
+        DatePickerDayLongFriday: 'Péntek',
+        DatePickerDayShortFriday: 'Pé',
+        DatePickerDayLongSaturday: 'Szombat',
+        DatePickerDayShortSaturday: 'Szo',
+        DatePickerGoToToday: 'Ma',
+        DatePickerIsRequiredErrorMessage: '',
+        DatePickerInvalidInputErrorMessage: '',
+        DatePickerIsOutOfBoundsErrorMessage: '',
+        DateTimePickerDate: 'Dátum',
+        DateTimePickerTime: 'Idő',
+        DateTimePickerTimeSeparator: ':',
+        DateTimePickerHourValueInvalid: 'Helytelen óra érték',
+        DateTimePickerMinuteValueInvalid: 'Helytelen perc érték',
+        DateTimePickerSecondValueInvalid: 'Helytelen másodperc érték',
+        DateTimePickerTextErrorMessage: 'Helyes dátum értéket adjon meg',
+    };
+});

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

SearchBox/README.md

@@ -8,7 +8,7 @@ This code component provides a wrapper around the [Fluent UI SearchBox](https://
 
 ## Properties
 
-- **Search Text** - The action items to render. The first item is considered the root item.
+- **Search Text** - Use this property to get or set value for the control.
 
 - **Icon Name** - Name of the Fluent UI icon (see [Fluent UI Icons](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)).
 

SearchBox/SearchBox/ControlManifest.Input.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest>
   <control namespace="PowerCAT" constructor="SearchBox" version="0.0.1" display-name-key="SearchBox" description-key="SearchBox_desc" control-type="virtual">
-    <property name="SearchText" display-name-key="SearchBox_SearchText" description-key="SearchBox_SearchText_Desc" of-type="SingleLine.Text" usage="output" hidden="true" />
+    <property name="SearchText" display-name-key="SearchBox_SearchText" description-key="SearchBox_SearchText_Desc" of-type="SingleLine.Text" usage="bound"/>
     <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" />
     <property name="IconName" display-name-key="IconName" of-type="SingleLine.Text" usage="input" required="false" default-value="Search" />

SearchBox/SearchBox/__mocks__/mock-parameters.ts

@@ -13,5 +13,6 @@ export function getMockParameters(): IInputs {
         DisableAnimation: new MockTwoOptionsProperty(),
         InputEvent: new MockStringProperty(),
         DelayOutput: new MockTwoOptionsProperty(),
+        SearchText: new MockStringProperty(),
     };
 }

SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap

@@ -12,6 +12,7 @@ exports[`SearchBox renders 1`] = `
   setFocus=""
   themeJSON=""
   underLined={false}
+  value=""
   width={-1}
 />
 `;
@@ -155,7 +156,7 @@ exports[`SearchBox theme 1`] = `
             display: none;
           }
       disabled={false}
-      id="SearchBox6"
+      id="SearchBox3"
       onBlur={[Function]}
       onChange={[Function]}
       onInput={[Function]}

SearchBox/SearchBox/components/Component.types.ts

@@ -10,4 +10,5 @@ export interface ISearchBoxComponentProps {
     disabled?: boolean;
     disableAnimation?: boolean;
     setFocus?: string;
+    value?: string;
 }

SearchBox/SearchBox/components/SearchBox.tsx

@@ -3,8 +3,17 @@ import { SearchBox, createTheme, IPartialTheme, ThemeProvider, IIconProps, merge
 import { ISearchBoxComponentProps } from './Component.types';
 
 export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) => {
-    const { onChanged, themeJSON, ariaLabel, placeholderText, underLined, disabled, disableAnimation, setFocus } =
-        props;
+    const {
+        onChanged,
+        themeJSON,
+        ariaLabel,
+        placeholderText,
+        underLined,
+        disabled,
+        disableAnimation,
+        setFocus,
+        value,
+    } = props;
     const filterIcon: IIconProps = { iconName: props.iconName };
     const rootRef = React.useRef<HTMLDivElement>(null);
     const theme = React.useMemo(() => {
@@ -44,6 +53,7 @@ export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) =
                 disableAnimation={disableAnimation}
                 className={wrapperClass}
                 ref={rootRef}
+                value={value}
             />
         </ThemeProvider>
     );

SearchBox/SearchBox/index.ts

@@ -46,11 +46,10 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
         this.delayOutput = context.parameters.DelayOutput.raw;
         const inputEvent = this.context.parameters.InputEvent.raw;
         const eventChanged = inputEvent && this.setFocus !== inputEvent;
-
+        this.searchTextValue = context.parameters.SearchText.raw ?? '';
         if (eventChanged && inputEvent.startsWith(InputEvents.SetFocus)) {
             this.setFocus = inputEvent;
         }
-
         const props: ISearchBoxComponentProps = {
             onChanged: this.onChange,
             themeJSON: context.parameters.Theme.raw ?? '',
@@ -63,6 +62,7 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
             width: allocatedWidth,
             height: allocatedHeight,
             setFocus: this.setFocus,
+            value: this.searchTextValue,
         };
 
         return React.createElement(SearchBoxComponent, props);

SearchBox/SearchBox/strings/SearchBox.1033.resx

@@ -148,4 +148,10 @@
     <data name="SearchBox_desc" xml:space="preserve">
         <value>A component to get search text as input</value>
     </data>
+    <data name="SearchBox_SearchText" xml:space="preserve">
+        <value>Search text</value>
+    </data>
+    <data name="SearchBox_SearchText_Desc" xml:space="preserve">
+        <value>Represents the default as well as the current value of search box</value>
+    </data>
 </root>

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',