Beta (#375)

* Creatorkit feb release (#374)

* feb release plan

Author: Ramakrishnan24689

MaskedTextField/MaskedTextField/components/Component.types.ts

@@ -10,4 +10,5 @@ export interface ICanvasMaskedTextFieldProps extends IMaskedTextFieldProps {
     onChange: (event?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
     themeJSON?: string;
     setFocus?: string;
+    ref?: React.Ref<HTMLInputElement>;
 }

SubwayNav/SubwayNav/__mocks__/mock-context.ts

@@ -18,6 +18,7 @@ export class MockContext<T> implements ComponentFramework.Context<T> {
             getClient: jest.fn(),
             getFormFactor: jest.fn(),
             isOffline: jest.fn(),
+            isNetworkAvailable: jest.fn(),
         };
 
         // Canvas apps currently assigns a positive tab-index

SubwayNav/SubwayNav/utilities/FocusZone/FocusZone.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /* eslint-disable */
 /* istanbul ignore file */
 import * as React from 'react';

SubwayNav/SubwayNav/utilities/MainUtilities/src/hooks/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export { useControlledUncontrolled } from './use-controlled-uncontrolled';
 export type { IUseInjectOnce } from './use-inject-singleton';
 export { makeInjectSingleton, useInjectSingleton } from './use-inject-singleton';

SubwayNav/SubwayNav/utilities/MainUtilities/src/hooks/use-controlled-uncontrolled.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { Dispatch } from 'react';
 import * as React from 'react';
 

SubwayNav/SubwayNav/utilities/MainUtilities/src/hooks/use-inject-singleton.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { getId } from '@fluentui/react';
 import type { ReactNode } from 'react';
 import { useEffect, useMemo } from 'react';

SubwayNav/SubwayNav/utilities/MainUtilities/src/hooks/use-intersection-observer.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
 import * as React from 'react';
 

SubwayNav/SubwayNav/utilities/MainUtilities/src/hooks/use-obscured-elements.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
 import * as React from 'react';
 

SubwayNav/SubwayNav/utilities/MainUtilities/src/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export type { IUseInjectOnce } from './hooks/index';
 export {
     makeInjectSingleton,

SubwayNav/SubwayNav/utilities/MainUtilities/src/type-helpers/flexible-header.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * A flexible header type that let's the consumer chose what level of heading to assign.
  * Most consumers

SubwayNav/SubwayNav/utilities/MainUtilities/src/type-helpers/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export type { FlexibleHeader, IFlexibleHeader } from './flexible-header';
 export type {
     NarrowedProperties,

SubwayNav/SubwayNav/utilities/MainUtilities/src/type-helpers/narrow-properties.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export type NarrowedPropertyKeys<T, V> = {
     [P in keyof T]: V extends T[P] ? P : never;
 }[keyof T];

SubwayNav/SubwayNav/utilities/MainUtilities/src/type-helpers/native-element-only-types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
 
 /**

SubwayNav/SubwayNav/utilities/MainUtilities/src/utilities/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export { getRTLFlipOptOut } from './rtl-opt-out';
 export { warnDependent } from './warn-dependent';
 export { warnOutOfProd } from './warn-out-of-prod';

SubwayNav/SubwayNav/utilities/MainUtilities/src/utilities/rtl-opt-out.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { getRTL } from '@fluentui/react';
 
 export const getRTLFlipOptOut = (): string => (getRTL() ? '@noflip' : '');

SubwayNav/SubwayNav/utilities/MainUtilities/src/utilities/warn-dependent.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { ISettingsMap } from '@fluentui/react';
 import { warn } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/MainUtilities/src/utilities/warn-out-of-prod.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * Throws a warning when not in production environments.
  *

SubwayNav/SubwayNav/utilities/collapsible/src/collapsible/collapsible.base.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IRenderFunction } from '@fluentui/react';
 import {
   buttonProperties,
@@ -23,77 +24,74 @@ const onRenderTitleDefault: IRenderFunction<ICollapsibleProps> = (props) => (
 );
 
 export const CollapsibleBase: FunctionComponent<ICollapsibleProps> = (props) => {
-    const {
+  const {
     ariaLabel,
     children,
     disabled = false,
     iconProps,
     isRequired = false,
-        onClick,
+    onClick,
     onRenderTitle = onRenderTitleDefault,
-        onToggle,
+    onToggle,
     renderHeaderAs: HeaderAs = 'h2',
-        styles,
+    styles,
     theme = {},
   } = props;
 
-    // Expanding and collapsing logic.
+  // Expanding and collapsing logic.
   const [isExpanded = false, setIsExpanded] = useControlledUncontrolled<
     ICollapsibleProps,
     boolean
-        props,
-        'isExpanded',
-        'defaultIsExpanded',
-        false,
-    );
-  const handleOnToggle = (e: MouseEvent<HTMLButtonElement>) => {
-        const newIsExpanded = !isExpanded;
+  >(props, 'isExpanded', 'defaultIsExpanded', false);
 
-        setIsExpanded(newIsExpanded);
+  const handleOnToggle = (e: MouseEvent<HTMLButtonElement>) => {
+    const newIsExpanded = !isExpanded
+    setIsExpanded(newIsExpanded);
     onToggle?.(newIsExpanded);
-        onClick?.(e);
-    };
+    onClick?.(e);
+  };
 
-    // Setting unique id’s to bind the content to the header.
+  // Setting unique id’s to bind the content to the header.
   const collapsibleId = useSimpleId();
-    const contentId = `collapsible-content_${collapsibleId}`;
+  const contentId = `collapsible-content_${collapsibleId}`;
   const headerId = `collapsible-header_${collapsibleId}`;
 
-    /**
+  /**
    * Getting the native button props to spread into the internal button. Removing `title` from native props, because otherwise it would be applied to the button as native button attribute. If no text is available to the screen-reader inside the button, consumers should take advantage of the `ariaLabel` prop.
-     */
+   */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { title, ...nativeProps } = getNativeProps<React.ButtonHTMLAttributes<HTMLButtonElement>>(
-        props,
-        buttonProperties,
-    );
+  const { title, ...nativeProps } = getNativeProps<React.ButtonHTMLAttributes<HTMLButtonElement>>(
+    props,
+    buttonProperties,
+  );
 
-    // Determining if a custom icon was passed in, and respect it.
+  // Determining if a custom icon was passed in, and respect it.
   const iconName = iconProps?.iconName ?? 'ChevronDownMed';
 
-    // Styles
+  // Styles
   const classNames = getClassNames(styles, { isExpanded, isRequired, disabled, theme });
 
-    return (
+  return (
     <div className={classNames.root}>
       <HeaderAs className={classNames.headerContainer}>
         <button
           {...nativeProps}
           id={headerId}
           className={classNames.headerButton}
           aria-controls={contentId}
-                    aria-expanded={isExpanded}
+          aria-expanded={isExpanded}
           onClick={handleOnToggle}
           aria-label={ariaLabel}
-                >
+        >
           <div className={classNames.titleContainer}>
             {onRenderTitle(props, onRenderTitleDefault)}
-                    <div className={classNames.requiredMarker} />
-          {/* This is to ensure that in RTL we have a space that respects the direction
-              When there is better browser support, we should use flow relative values for spacing */}
-          <div className={classNames.headerSpacer} />
-                    <Icon {...iconProps} iconName={iconName} aria-hidden="true" className={classNames.icon} />
-                </button>
+            <div className={classNames.requiredMarker} />
+            {/* This is to ensure that in RTL we have a space that respects the direction
+                When there is better browser support, we should use flow relative values for spacing */}
+            <div className={classNames.headerSpacer} />
+            <Icon {...iconProps} iconName={iconName} aria-hidden="true" className={classNames.icon} />
+          </div>
+        </button>
       </HeaderAs>
       {isExpanded && (
         <section id={contentId} aria-labelledby={headerId} className={classNames.content}>
@@ -102,4 +100,4 @@ export const CollapsibleBase: FunctionComponent<ICollapsibleProps> = (props) =>
       )}
     </div>
   );
-};
+};

SubwayNav/SubwayNav/utilities/collapsible/src/collapsible/collapsible.style.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { ITheme } from '@fluentui/react';
 import { AnimationClassNames, FontWeights, getFocusStyle } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/collapsible/src/collapsible/collapsible.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { styled } from '@fluentui/react';
 import type { FunctionComponent } from 'react';
 

SubwayNav/SubwayNav/utilities/collapsible/src/collapsible/collapsible.types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IIconProps, IRenderFunction, IStyle, IStyleFunctionOrObject, ITheme } from '@fluentui/react';
 import type { IFlexibleHeader } from '../../../MainUtilities/src/type-helpers';
 import type { ButtonHTMLAttributes } from 'react';

SubwayNav/SubwayNav/utilities/collapsible/src/collapsible/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export { Collapsible } from './collapsible';
 export { CollapsibleBase } from './collapsible.base';
 export { getCollapsibleStyles } from './collapsible.style';

SubwayNav/SubwayNav/utilities/collapsible/src/index.ts

@@ -1,2 +1,3 @@
+// @ts-nocheck
 export type { ICollapsibleProps, ICollapsibleStyle, ICollapsibleStyleProps } from './collapsible/index';
 export { Collapsible, CollapsibleBase, getCollapsibleStyles } from './collapsible/index';

SubwayNav/SubwayNav/utilities/customizations/src/customizations/add-alpha-channel-to-hex.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IColor } from '@fluentui/react';
 import { getColorFromString, updateA } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/customizations/src/customizations/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export { addAlphaChannelToHex } from './add-alpha-channel-to-hex';
 export {
     DarkExtendedSemanticColorsForTest,

SubwayNav/SubwayNav/utilities/customizations/src/customizations/m365-dark-theme.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { ICustomizations } from '@fluentui/react';
 import { createTheme } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/customizations/src/customizations/m365-extended-semantic-slots.types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { ISemanticColors } from '@fluentui/react';
 
 export interface IM365ExtendedSemanticColors extends ISemanticColors {

SubwayNav/SubwayNav/utilities/customizations/src/customizations/m365-light-theme.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { ICustomizations, ITheme } from '@fluentui/react';
 import { createTheme } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/customizations/src/customizations/m365-theme.types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IEffects, IPalette, ITheme } from '@fluentui/react';
 
 import type { IM365ExtendedSemanticColors } from './m365-extended-semantic-slots.types';

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/button.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IButtonProps, IButtonStyles, ITheme } from '@fluentui/react';
 
 import type { IM365Theme } from '../m365-theme.types';

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/check.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { ICheckStyleProps, ICheckStyles } from '@fluentui/react';
 import { FontWeights, warn } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/checkbox.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { ICheckboxProps, ICheckboxStyles } from '@fluentui/react';
 import { warn } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/choice-group-option.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles, IStyle } from '@fluentui/react';
 import { warn } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/contextual-menu.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IContextualMenuStyleProps, IContextualMenuStyles } from '@fluentui/react';
 
 /**This style used to assign nuetralPrimary color to menu item icons, we're now removing that to align with Fluent */

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/default-button.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IButtonProps, IButtonStyles } from '@fluentui/react';
 import { HighContrastSelector } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/detail-row-check.styles.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IDetailsRowCheckStyles } from '@fluentui/react';
 
 export const DetailsRowCheckStyles = (): Partial<IDetailsRowCheckStyles> => ({

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/details-list-column.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IDetailsColumnStyleProps, IDetailsColumnStyles } from '@fluentui/react';
 
 export const DetailsColumnStyles = (props: IDetailsColumnStyleProps): Partial<IDetailsColumnStyles> => {

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/details-row.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IDetailsRowProps, IDetailsRowStyles } from '@fluentui/react';
 import { FontWeights } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/dialog-footer.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IDialogFooterStyleProps, IDialogFooterStyles } from '@fluentui/react';
 
 export const DialogFooterStyles = (props: IDialogFooterStyleProps): Partial<IDialogFooterStyles> => {

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/group-header.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IGroupHeaderStyles } from '@fluentui/react';
 
 export const GroupHeaderStyles = (): Partial<IGroupHeaderStyles> => ({

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export { ButtonStyles, closeButtonStyles, getBlackIconButtonColors, navBarButtonSize } from './button.styles';
 export { CheckStyles } from './check.styles';
 export { CheckboxStyles } from './checkbox.styles';

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/m365-styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { ISettings } from '@fluentui/react';
 
 import { ButtonStyles } from './button.styles';

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/overlay.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IOverlayStyleProps, IOverlayStyles } from '@fluentui/react';
 import { warn } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/panel.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IPanelProps, IPanelStyles, IStyle } from '@fluentui/react';
 import { warn } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/pivot.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IPivotStyleProps, IPivotStyles } from '@fluentui/react';
 import { HighContrastSelector, warn } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/primary-button.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IButtonProps, IButtonStyles } from '@fluentui/react';
 import { warn } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/search-box.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { ISearchBoxStyleProps, ISearchBoxStyles } from '@fluentui/react';
 
 export const SearchBoxStyles = (props: ISearchBoxStyleProps): Partial<ISearchBoxStyles> => {

SubwayNav/SubwayNav/utilities/customizations/src/customizations/styles/spinner.styles.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { ISpinnerStyleProps, ISpinnerStyles } from '@fluentui/react';
 import { warn } from '@fluentui/react';
 

SubwayNav/SubwayNav/utilities/customizations/src/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export type {
     IExtendedEffects,
     IExtendedPalette,

SubwayNav/SubwayNav/utilities/customizations/src/utils/check-style-props.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IStyle, IStyleFunctionOrObject } from '@fluentui/react';
 // import type {
 //   NarrowedPropertiesReq,

SubwayNav/SubwayNav/utilities/customizations/src/utils/color-test-helpers.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable jest/no-export */
 /* eslint-disable @typescript-eslint/no-unsafe-call */

SubwayNav/SubwayNav/utilities/customizations/src/utils/get-data-vis-color-array.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IM365ExtendedSemanticColors } from '../customizations/m365-extended-semantic-slots.types';
 import type { IM365Theme } from '../customizations/m365-theme.types';
 

SubwayNav/SubwayNav/utilities/customizations/src/utils/get-data-vis-color-array.types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IM365Theme } from '../customizations/m365-theme.types';
 
 export type GetDataVisColorArrayFunction = (theme: IM365Theme) => string[];

SubwayNav/SubwayNav/utilities/customizations/src/utils/get-data-vis-color-cached.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IM365ExtendedSemanticColors } from '../customizations/m365-extended-semantic-slots.types';
 import type { IM365Theme } from '../customizations/m365-theme.types';
 import { getDataVisColorArray } from './get-data-vis-color-array';

SubwayNav/SubwayNav/utilities/customizations/src/utils/get-data-vis-color-cached.types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IM365ExtendedSemanticColors } from '../customizations/m365-extended-semantic-slots.types';
 import type { IM365Theme } from '../customizations/m365-theme.types';
 

SubwayNav/SubwayNav/utilities/customizations/src/utils/get-extended-data-vis-colors.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { IColor } from '@fluentui/react';
 import {
     BaseSlots,