@fluentui/react-utilities - npm Package Compare versions

Comparing version 9.0.0-alpha.13 to 9.0.0-alpha.14

CHANGELOG.json

@@ -5,3 +5,44 @@ {
     {
-      "date": "Tue, 30 Mar 2021 07:30:40 GMT",
+      "date": "Wed, 31 Mar 2021 00:47:26 GMT",
+      "tag": "@fluentui/react-utilities_v9.0.0-alpha.14",
+      "version": "9.0.0-alpha.14",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Add ComponentState helper type; improve type checking for makeMergeProps",
+            "author": "[e-mail]",
+            "commit": "e45eeaba8deb93e825a9d3f72e87a9c4c9225ea1",
+            "package": "@fluentui/react-utilities"
+          },
+          {
+            "comment": "Add shouldPreventDefaultOnKeyDown utility function to detect keyboard clicks",
+            "author": "[e-mail]",
+            "commit": "08a93f5d9f50d5caffff652d8f605a06804692e3",
+            "package": "@fluentui/react-utilities"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "Bump @fluentui/eslint-plugin to v1.1.0",
+            "author": "[e-mail]",
+            "commit": "d41b79242e6b682dfa58fcd76797ecfd9146d4cf",
+            "package": "@fluentui/react-utilities"
+          },
+          {
+            "comment": "Bump @fluentui/keyboard-key to v0.2.16",
+            "author": "[e-mail]",
+            "commit": "d41b79242e6b682dfa58fcd76797ecfd9146d4cf",
+            "package": "@fluentui/react-utilities"
+          },
+          {
+            "comment": "Bump @fluentui/scripts to v1.0.0",
+            "author": "[e-mail]",
+            "commit": "d41b79242e6b682dfa58fcd76797ecfd9146d4cf",
+            "package": "@fluentui/react-utilities"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 30 Mar 2021 07:34:45 GMT",
       "tag": "@fluentui/react-utilities_v9.0.0-alpha.13",
@@ -8,0 +49,0 @@ "version": "9.0.0-alpha.13",

CHANGELOG.md

 # Change Log - @fluentui/react-utilities
 
-This log was last generated on Tue, 30 Mar 2021 07:30:40 GMT and should not be manually modified.
+This log was last generated on Wed, 31 Mar 2021 00:47:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-alpha.14)
+
+Wed, 31 Mar 2021 00:47:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-alpha.13..@fluentui/react-utilities_v9.0.0-alpha.14)
+
+### Patches
+
+- Bump @fluentui/eslint-plugin to v1.1.0 ([PR #17568](https://github.com/microsoft/fluentui/pull/17568) by [e-mail])
+- Bump @fluentui/keyboard-key to v0.2.16 ([PR #17568](https://github.com/microsoft/fluentui/pull/17568) by [e-mail])
+- Bump @fluentui/scripts to v1.0.0 ([PR #17568](https://github.com/microsoft/fluentui/pull/17568) by [e-mail])
+
+### Changes
+
+- Add ComponentState helper type; improve type checking for makeMergeProps ([PR #17508](https://github.com/microsoft/fluentui/pull/17508) by [e-mail])
+- Add shouldPreventDefaultOnKeyDown utility function to detect keyboard clicks ([PR #17572](https://github.com/microsoft/fluentui/pull/17572) by [e-mail])
+
 ## [9.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-alpha.13)
 
-Tue, 30 Mar 2021 07:30:40 GMT 
+Tue, 30 Mar 2021 07:34:45 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-alpha.12..@fluentui/react-utilities_v9.0.0-alpha.13)
@@ -11,0 +27,0 @@

dist/react-utilities.d.ts

@@ -59,2 +59,18 @@ import * as React from 'react';
 
+/**
+ * Converts a components Props type to a State type:
+ * * Adds the 'ref' and 'as' props
+ * * Ensures the specified ShorthandProps are of type ObjectShorthandProps<T>
+ * * Marks the given DefaultedProps as required (-?)
+ *
+ * @param Props - The component's Props type
+ * @param RefType - The type of the state.ref property; e.g. `React.Ref<HTMLElement>`
+ * @param ShorthandProps - The keys of Props that correspond to ShorthandProps
+ * @param DefaultedProps - The keys of Props that will always have a default value provided
+ */
+export declare type ComponentState<RefType, Props, ShorthandProps extends keyof Props = never, DefaultedProps extends keyof ResolvedShorthandProps<Props, ShorthandProps> = never> = RequiredProps<ResolvedShorthandProps<Props, ShorthandProps>, DefaultedProps> & {
+    as?: React.ElementType;
+    ref: RefType;
+};
+
 export declare function createDescendantContext<DescendantType extends Descendant>(name: string, initialValue?: {}): React.Context<DescendantContextValue<DescendantType>>;
@@ -147,3 +163,3 @@
  */
-export declare const getSlots: (state: Record<string, any>, slotNames?: string[] | undefined) => {
+export declare const getSlots: (state: Record<string, any>, slotNames?: readonly string[] | undefined) => {
     slots: Record<string, any>;
@@ -207,5 +223,12 @@ slotProps: Record<string, any>;
  */
-export declare const makeMergeProps: <TState = Record<string, any>>(options?: MergePropsOptions) => (target: Record<string, any>, ...propSets: (Record<string, any> | undefined)[]) => TState;
+export declare const makeMergeProps: <TState>(options?: MergePropsOptions<TState>) => (target: TState, ...propSets: (Partial<TState> | undefined)[]) => TState;
 
-export declare type MergePropsOptions = {
+/**
+ * Backwards-compatible version of makeMergeProps that has less restrictive type checking
+ *
+ * @deprecated Use makeMergeProps instead
+ */
+export declare const makeMergePropsCompat: <TState = Record<string, any>>(options?: MergePropsOptions<Record<string, any>> | undefined) => (target: Record<string, any>, ...propSets: (Record<string, any> | undefined)[]) => TState;
+
+export declare type MergePropsOptions<TState> = {
     /**
@@ -215,3 +238,3 @@ * A list of props to deep merge. By default, `style` will
      */
-    deepMerge?: string[];
+    deepMerge?: readonly (keyof TState)[];
 };
@@ -224,3 +247,3 @@
 
-export declare type ObjectShorthandProps<TProps extends ComponentProps = {}> = TProps & {
+export declare type ObjectShorthandProps<TProps extends ComponentProps = {}> = TProps & Omit<ComponentProps, 'children'> & {
     children?: TProps['children'] | ShorthandRenderFunction<TProps>;
@@ -260,2 +283,17 @@ };
 /**
+ * Helper type to mark the given props as required.
+ * Similar to Required<T> except it only requires a subset of the props.
+ */
+export declare type RequiredProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]-?: T[P];
+};
+
+/**
+ * Helper type to convert the given props of type ShorthandProps into ObjectShorthandProps
+ */
+export declare type ResolvedShorthandProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]: T[P] extends ShorthandProps<infer U> ? ObjectShorthandProps<U> : T[P];
+};
+
+/**
  * Ensures that the given slots are represented using object syntax. This ensures that
@@ -266,3 +304,3 @@ * the object can be merged along with other objects.
  */
-export declare const resolveShorthandProps: <TProps>(props: TProps, shorthandPropNames: string[]) => TProps;
+export declare const resolveShorthandProps: <TProps, TShorthandPropNames extends keyof TProps>(props: TProps, shorthandPropNames: readonly TShorthandPropNames[]) => ResolvedShorthandProps<TProps, TShorthandPropNames>;
 
@@ -276,8 +314,13 @@ /**
 
-export declare type ShorthandProps<TProps extends ComponentProps = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | boolean | number | null | undefined | (TProps & ComponentProps & {
-    children?: TProps['children'] | ShorthandRenderFunction<TProps>;
-});
+export declare type ShorthandProps<TProps extends ComponentProps = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | boolean | number | null | undefined | ObjectShorthandProps<TProps>;
 
 export declare type ShorthandRenderFunction<TProps> = (Component: React.ElementType<TProps>, props: TProps) => React.ReactNode;
 
+/**
+ * Checks if the keyboard event should preventDefault() for Enter and Spacebar keys
+ *
+ * Useful for situations where a keydown needs to be transformed to a click event
+ */
+export declare function shouldPreventDefaultOnKeyDown(e: KeyboardEvent | React.KeyboardEvent): boolean;
+
 export declare type SlotProps<TSlots extends BaseSlots, TProps, TRootProps extends React.HTMLAttributes<HTMLElement>> = {
@@ -284,0 +327,0 @@ [key in keyof Omit<TSlots, 'root'>]: key extends keyof TProps ? TProps[key] : any;

etc/react-utilities.api.md

@@ -52,2 +52,8 @@ ## API Report File for "@fluentui/react-utilities"
 
+// @public
+export type ComponentState<RefType, Props, ShorthandProps extends keyof Props = never, DefaultedProps extends keyof ResolvedShorthandProps<Props, ShorthandProps> = never> = RequiredProps<ResolvedShorthandProps<Props, ShorthandProps>, DefaultedProps> & {
+    as?: React.ElementType;
+    ref: RefType;
+};
+
 // @public (undocumented)
@@ -99,3 +105,3 @@ export function createDescendantContext<DescendantType extends Descendant>(name: string, initialValue?: {}): React.Context<DescendantContextValue<DescendantType>>;
 // @public
-export const getSlots: (state: Record<string, any>, slotNames?: string[] | undefined) => {
+export const getSlots: (state: Record<string, any>, slotNames?: readonly string[] | undefined) => {
     slots: Record<string, any>;
@@ -127,7 +133,10 @@ slotProps: Record<string, any>;
 // @public
-export const makeMergeProps: <TState = Record<string, any>>(options?: MergePropsOptions) => (target: Record<string, any>, ...propSets: (Record<string, any> | undefined)[]) => TState;
+export const makeMergeProps: <TState>(options?: MergePropsOptions<TState>) => (target: TState, ...propSets: (Partial<TState> | undefined)[]) => TState;
 
+// @public @deprecated
+export const makeMergePropsCompat: <TState = Record<string, any>>(options?: MergePropsOptions<Record<string, any>> | undefined) => (target: Record<string, any>, ...propSets: (Record<string, any> | undefined)[]) => TState;
+
 // @public (undocumented)
-export type MergePropsOptions = {
-    deepMerge?: string[];
+export type MergePropsOptions<TState> = {
+    deepMerge?: readonly (keyof TState)[];
 };
@@ -139,3 +148,3 @@
 // @public (undocumented)
-export type ObjectShorthandProps<TProps extends ComponentProps = {}> = TProps & {
+export type ObjectShorthandProps<TProps extends ComponentProps = {}> = TProps & Omit<ComponentProps, 'children'> & {
     children?: TProps['children'] | ShorthandRenderFunction<TProps>;
@@ -157,11 +166,19 @@ };
 // @public
-export const resolveShorthandProps: <TProps>(props: TProps, shorthandPropNames: string[]) => TProps;
+export type RequiredProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]-?: T[P];
+};
 
 // @public
+export type ResolvedShorthandProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]: T[P] extends ShorthandProps<infer U> ? ObjectShorthandProps<U> : T[P];
+};
+
+// @public
+export const resolveShorthandProps: <TProps, TShorthandPropNames extends keyof TProps>(props: TProps, shorthandPropNames: readonly TShorthandPropNames[]) => ResolvedShorthandProps<TProps, TShorthandPropNames>;
+
+// @public
 export const selectProperties: Record<string, number>;
 
 // @public (undocumented)
-export type ShorthandProps<TProps extends ComponentProps = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | boolean | number | null | undefined | (TProps & ComponentProps & {
-    children?: TProps['children'] | ShorthandRenderFunction<TProps>;
-});
+export type ShorthandProps<TProps extends ComponentProps = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | boolean | number | null | undefined | ObjectShorthandProps<TProps>;
 
@@ -171,2 +188,5 @@ // @public (undocumented)
 
+// @public
+export function shouldPreventDefaultOnKeyDown(e: KeyboardEvent | React.KeyboardEvent): boolean;
+
 // @public (undocumented)
@@ -173,0 +193,0 @@ export type SlotProps<TSlots extends BaseSlots, TProps, TRootProps extends React.HTMLAttributes<HTMLElement>> = {

lib-amd/compose/getSlots.d.ts

@@ -17,5 +17,5 @@ /**
  */
-export declare const getSlots: (state: Record<string, any>, slotNames?: string[] | undefined) => {
+export declare const getSlots: (state: Record<string, any>, slotNames?: readonly string[] | undefined) => {
     slots: Record<string, any>;
     slotProps: Record<string, any>;
 };

lib-amd/compose/index.d.ts

 export * from './getSlots';
 export * from './makeMergeProps';
+export * from './makeMergePropsCompat';
 export * from './nullRender';
 export * from './resolveShorthandProps';
 export * from './types';

lib-amd/compose/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "tslib", "./getSlots", "./makeMergeProps", "./nullRender", "./resolveShorthandProps"], function (require, exports, tslib_1, getSlots_1, makeMergeProps_1, nullRender_1, resolveShorthandProps_1) {
+define(["require", "exports", "tslib", "./getSlots", "./makeMergeProps", "./makeMergePropsCompat", "./nullRender", "./resolveShorthandProps"], function (require, exports, tslib_1, getSlots_1, makeMergeProps_1, makeMergePropsCompat_1, nullRender_1, resolveShorthandProps_1) {
     "use strict";
@@ -6,2 +6,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
     tslib_1.__exportStar(makeMergeProps_1, exports);
+    tslib_1.__exportStar(makeMergePropsCompat_1, exports);
     tslib_1.__exportStar(nullRender_1, exports);
@@ -8,0 +9,0 @@ tslib_1.__exportStar(resolveShorthandProps_1, exports);

lib-amd/compose/makeMergeProps.d.ts

@@ -1,2 +0,2 @@
-export declare type MergePropsOptions = {
+export declare type MergePropsOptions<TState> = {
     /**
@@ -6,3 +6,3 @@ * A list of props to deep merge. By default, `style` will
      */
-    deepMerge?: string[];
+    deepMerge?: readonly (keyof TState)[];
 };
@@ -16,2 +16,2 @@ /**
  */
-export declare const makeMergeProps: <TState = Record<string, any>>(options?: MergePropsOptions) => (target: Record<string, any>, ...propSets: (Record<string, any> | undefined)[]) => TState;
+export declare const makeMergeProps: <TState>(options?: MergePropsOptions<TState>) => (target: TState, ...propSets: (Partial<TState> | undefined)[]) => TState;

lib-amd/compose/resolveShorthandProps.d.ts

@@ -0,1 +1,2 @@
+import { ResolvedShorthandProps } from './types';
 /**
@@ -7,2 +8,2 @@ * Ensures that the given slots are represented using object syntax. This ensures that
  */
-export declare const resolveShorthandProps: <TProps>(props: TProps, shorthandPropNames: string[]) => TProps;
+export declare const resolveShorthandProps: <TProps, TShorthandPropNames extends keyof TProps>(props: TProps, shorthandPropNames: readonly TShorthandPropNames[]) => ResolvedShorthandProps<TProps, TShorthandPropNames>;

lib-amd/compose/resolveShorthandProps.js

@@ -12,14 +12,10 @@ define(["require", "exports", "tslib", "react"], function (require, exports, tslib_1, React) {
         var newProps = props;
-        if (shorthandPropNames && shorthandPropNames.length) {
-            newProps = tslib_1.__assign({}, props);
-            for (var _i = 0, shorthandPropNames_1 = shorthandPropNames; _i < shorthandPropNames_1.length; _i++) {
-                var propName = shorthandPropNames_1[_i];
-                // TODO find clean way of guaranteeing only shorthand props are typechecked
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                var propValue = props[propName];
-                if (propValue !== undefined && (typeof propValue !== 'object' || React.isValidElement(propValue))) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    newProps[propName] = { children: propValue };
+        for (var _i = 0, shorthandPropNames_1 = shorthandPropNames; _i < shorthandPropNames_1.length; _i++) {
+            var propName = shorthandPropNames_1[_i];
+            var propValue = props[propName];
+            if (propValue !== undefined && (typeof propValue !== 'object' || React.isValidElement(propValue))) {
+                if (newProps === props) {
+                    newProps = tslib_1.__assign({}, props); // Copy props before modifying
                 }
+                newProps[propName] = { children: propValue };
             }
@@ -26,0 +22,0 @@ }

lib-amd/compose/types.d.ts

@@ -16,7 +16,5 @@ import * as React from 'react';
 export declare type ShorthandRenderFunction<TProps> = (Component: React.ElementType<TProps>, props: TProps) => React.ReactNode;
-export declare type ShorthandProps<TProps extends ComponentProps = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | boolean | number | null | undefined | (TProps & ComponentProps & {
+export declare type ShorthandProps<TProps extends ComponentProps = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | boolean | number | null | undefined | ObjectShorthandProps<TProps>;
+export declare type ObjectShorthandProps<TProps extends ComponentProps = {}> = TProps & Omit<ComponentProps, 'children'> & {
     children?: TProps['children'] | ShorthandRenderFunction<TProps>;
-});
-export declare type ObjectShorthandProps<TProps extends ComponentProps = {}> = TProps & {
-    children?: TProps['children'] | ShorthandRenderFunction<TProps>;
 };
@@ -31,1 +29,29 @@ export interface BaseSlots {
 };
+/**
+ * Helper type to convert the given props of type ShorthandProps into ObjectShorthandProps
+ */
+export declare type ResolvedShorthandProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]: T[P] extends ShorthandProps<infer U> ? ObjectShorthandProps<U> : T[P];
+};
+/**
+ * Helper type to mark the given props as required.
+ * Similar to Required<T> except it only requires a subset of the props.
+ */
+export declare type RequiredProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]-?: T[P];
+};
+/**
+ * Converts a components Props type to a State type:
+ * * Adds the 'ref' and 'as' props
+ * * Ensures the specified ShorthandProps are of type ObjectShorthandProps<T>
+ * * Marks the given DefaultedProps as required (-?)
+ *
+ * @param Props - The component's Props type
+ * @param RefType - The type of the state.ref property; e.g. `React.Ref<HTMLElement>`
+ * @param ShorthandProps - The keys of Props that correspond to ShorthandProps
+ * @param DefaultedProps - The keys of Props that will always have a default value provided
+ */
+export declare type ComponentState<RefType, Props, ShorthandProps extends keyof Props = never, DefaultedProps extends keyof ResolvedShorthandProps<Props, ShorthandProps> = never> = RequiredProps<ResolvedShorthandProps<Props, ShorthandProps>, DefaultedProps> & {
+    as?: React.ElementType;
+    ref: RefType;
+};

lib-amd/utils/index.d.ts

 export * from './getNativeElementProps';
 export * from './omit';
 export * from './properties';
+export * from './shouldPreventDefaultOnKeyDown';

lib-amd/utils/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "tslib", "./getNativeElementProps", "./omit", "./properties"], function (require, exports, tslib_1, getNativeElementProps_1, omit_1, properties_1) {
+define(["require", "exports", "tslib", "./getNativeElementProps", "./omit", "./properties", "./shouldPreventDefaultOnKeyDown"], function (require, exports, tslib_1, getNativeElementProps_1, omit_1, properties_1, shouldPreventDefaultOnKeyDown_1) {
     "use strict";
@@ -7,3 +7,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
     tslib_1.__exportStar(properties_1, exports);
+    tslib_1.__exportStar(shouldPreventDefaultOnKeyDown_1, exports);
 });
 //# sourceMappingURL=index.js.map

lib-commonjs/compose/getSlots.d.ts

@@ -17,5 +17,5 @@ /**
  */
-export declare const getSlots: (state: Record<string, any>, slotNames?: string[] | undefined) => {
+export declare const getSlots: (state: Record<string, any>, slotNames?: readonly string[] | undefined) => {
     slots: Record<string, any>;
     slotProps: Record<string, any>;
 };

lib-commonjs/compose/index.d.ts

 export * from './getSlots';
 export * from './makeMergeProps';
+export * from './makeMergePropsCompat';
 export * from './nullRender';
 export * from './resolveShorthandProps';
 export * from './types';

lib-commonjs/compose/index.js

@@ -6,4 +6,5 @@ "use strict";
 tslib_1.__exportStar(require("./makeMergeProps"), exports);
+tslib_1.__exportStar(require("./makeMergePropsCompat"), exports);
 tslib_1.__exportStar(require("./nullRender"), exports);
 tslib_1.__exportStar(require("./resolveShorthandProps"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/compose/makeMergeProps.d.ts

@@ -1,2 +0,2 @@
-export declare type MergePropsOptions = {
+export declare type MergePropsOptions<TState> = {
     /**
@@ -6,3 +6,3 @@ * A list of props to deep merge. By default, `style` will
      */
-    deepMerge?: string[];
+    deepMerge?: readonly (keyof TState)[];
 };
@@ -16,2 +16,2 @@ /**
  */
-export declare const makeMergeProps: <TState = Record<string, any>>(options?: MergePropsOptions) => (target: Record<string, any>, ...propSets: (Record<string, any> | undefined)[]) => TState;
+export declare const makeMergeProps: <TState>(options?: MergePropsOptions<TState>) => (target: TState, ...propSets: (Partial<TState> | undefined)[]) => TState;

lib-commonjs/compose/resolveShorthandProps.d.ts

@@ -0,1 +1,2 @@
+import { ResolvedShorthandProps } from './types';
 /**
@@ -7,2 +8,2 @@ * Ensures that the given slots are represented using object syntax. This ensures that
  */
-export declare const resolveShorthandProps: <TProps>(props: TProps, shorthandPropNames: string[]) => TProps;
+export declare const resolveShorthandProps: <TProps, TShorthandPropNames extends keyof TProps>(props: TProps, shorthandPropNames: readonly TShorthandPropNames[]) => ResolvedShorthandProps<TProps, TShorthandPropNames>;

lib-commonjs/compose/resolveShorthandProps.js

@@ -13,14 +13,10 @@ "use strict";
     var newProps = props;
-    if (shorthandPropNames && shorthandPropNames.length) {
-        newProps = tslib_1.__assign({}, props);
-        for (var _i = 0, shorthandPropNames_1 = shorthandPropNames; _i < shorthandPropNames_1.length; _i++) {
-            var propName = shorthandPropNames_1[_i];
-            // TODO find clean way of guaranteeing only shorthand props are typechecked
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            var propValue = props[propName];
-            if (propValue !== undefined && (typeof propValue !== 'object' || React.isValidElement(propValue))) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                newProps[propName] = { children: propValue };
+    for (var _i = 0, shorthandPropNames_1 = shorthandPropNames; _i < shorthandPropNames_1.length; _i++) {
+        var propName = shorthandPropNames_1[_i];
+        var propValue = props[propName];
+        if (propValue !== undefined && (typeof propValue !== 'object' || React.isValidElement(propValue))) {
+            if (newProps === props) {
+                newProps = tslib_1.__assign({}, props); // Copy props before modifying
             }
+            newProps[propName] = { children: propValue };
         }
@@ -27,0 +23,0 @@ }

lib-commonjs/compose/types.d.ts

@@ -16,7 +16,5 @@ import * as React from 'react';
 export declare type ShorthandRenderFunction<TProps> = (Component: React.ElementType<TProps>, props: TProps) => React.ReactNode;
-export declare type ShorthandProps<TProps extends ComponentProps = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | boolean | number | null | undefined | (TProps & ComponentProps & {
+export declare type ShorthandProps<TProps extends ComponentProps = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | boolean | number | null | undefined | ObjectShorthandProps<TProps>;
+export declare type ObjectShorthandProps<TProps extends ComponentProps = {}> = TProps & Omit<ComponentProps, 'children'> & {
     children?: TProps['children'] | ShorthandRenderFunction<TProps>;
-});
-export declare type ObjectShorthandProps<TProps extends ComponentProps = {}> = TProps & {
-    children?: TProps['children'] | ShorthandRenderFunction<TProps>;
 };
@@ -31,1 +29,29 @@ export interface BaseSlots {
 };
+/**
+ * Helper type to convert the given props of type ShorthandProps into ObjectShorthandProps
+ */
+export declare type ResolvedShorthandProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]: T[P] extends ShorthandProps<infer U> ? ObjectShorthandProps<U> : T[P];
+};
+/**
+ * Helper type to mark the given props as required.
+ * Similar to Required<T> except it only requires a subset of the props.
+ */
+export declare type RequiredProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]-?: T[P];
+};
+/**
+ * Converts a components Props type to a State type:
+ * * Adds the 'ref' and 'as' props
+ * * Ensures the specified ShorthandProps are of type ObjectShorthandProps<T>
+ * * Marks the given DefaultedProps as required (-?)
+ *
+ * @param Props - The component's Props type
+ * @param RefType - The type of the state.ref property; e.g. `React.Ref<HTMLElement>`
+ * @param ShorthandProps - The keys of Props that correspond to ShorthandProps
+ * @param DefaultedProps - The keys of Props that will always have a default value provided
+ */
+export declare type ComponentState<RefType, Props, ShorthandProps extends keyof Props = never, DefaultedProps extends keyof ResolvedShorthandProps<Props, ShorthandProps> = never> = RequiredProps<ResolvedShorthandProps<Props, ShorthandProps>, DefaultedProps> & {
+    as?: React.ElementType;
+    ref: RefType;
+};

lib-commonjs/utils/index.d.ts

 export * from './getNativeElementProps';
 export * from './omit';
 export * from './properties';
+export * from './shouldPreventDefaultOnKeyDown';

lib-commonjs/utils/index.js

@@ -7,2 +7,3 @@ "use strict";
 tslib_1.__exportStar(require("./properties"), exports);
+tslib_1.__exportStar(require("./shouldPreventDefaultOnKeyDown"), exports);
 //# sourceMappingURL=index.js.map

lib/compose/getSlots.d.ts

@@ -17,5 +17,5 @@ /**
  */
-export declare const getSlots: (state: Record<string, any>, slotNames?: string[] | undefined) => {
+export declare const getSlots: (state: Record<string, any>, slotNames?: readonly string[] | undefined) => {
     slots: Record<string, any>;
     slotProps: Record<string, any>;
 };

lib/compose/index.d.ts

 export * from './getSlots';
 export * from './makeMergeProps';
+export * from './makeMergePropsCompat';
 export * from './nullRender';
 export * from './resolveShorthandProps';
 export * from './types';

lib/compose/index.js

 export * from './getSlots';
 export * from './makeMergeProps';
+export * from './makeMergePropsCompat';
 export * from './nullRender';
 export * from './resolveShorthandProps';
 //# sourceMappingURL=index.js.map

lib/compose/makeMergeProps.d.ts

@@ -1,2 +0,2 @@
-export declare type MergePropsOptions = {
+export declare type MergePropsOptions<TState> = {
     /**
@@ -6,3 +6,3 @@ * A list of props to deep merge. By default, `style` will
      */
-    deepMerge?: string[];
+    deepMerge?: readonly (keyof TState)[];
 };
@@ -16,2 +16,2 @@ /**
  */
-export declare const makeMergeProps: <TState = Record<string, any>>(options?: MergePropsOptions) => (target: Record<string, any>, ...propSets: (Record<string, any> | undefined)[]) => TState;
+export declare const makeMergeProps: <TState>(options?: MergePropsOptions<TState>) => (target: TState, ...propSets: (Partial<TState> | undefined)[]) => TState;

lib/compose/resolveShorthandProps.d.ts

@@ -0,1 +1,2 @@
+import { ResolvedShorthandProps } from './types';
 /**
@@ -7,2 +8,2 @@ * Ensures that the given slots are represented using object syntax. This ensures that
  */
-export declare const resolveShorthandProps: <TProps>(props: TProps, shorthandPropNames: string[]) => TProps;
+export declare const resolveShorthandProps: <TProps, TShorthandPropNames extends keyof TProps>(props: TProps, shorthandPropNames: readonly TShorthandPropNames[]) => ResolvedShorthandProps<TProps, TShorthandPropNames>;

lib/compose/resolveShorthandProps.js

@@ -11,14 +11,10 @@ import { __assign } from "tslib";
     var newProps = props;
-    if (shorthandPropNames && shorthandPropNames.length) {
-        newProps = __assign({}, props);
-        for (var _i = 0, shorthandPropNames_1 = shorthandPropNames; _i < shorthandPropNames_1.length; _i++) {
-            var propName = shorthandPropNames_1[_i];
-            // TODO find clean way of guaranteeing only shorthand props are typechecked
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            var propValue = props[propName];
-            if (propValue !== undefined && (typeof propValue !== 'object' || React.isValidElement(propValue))) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                newProps[propName] = { children: propValue };
+    for (var _i = 0, shorthandPropNames_1 = shorthandPropNames; _i < shorthandPropNames_1.length; _i++) {
+        var propName = shorthandPropNames_1[_i];
+        var propValue = props[propName];
+        if (propValue !== undefined && (typeof propValue !== 'object' || React.isValidElement(propValue))) {
+            if (newProps === props) {
+                newProps = __assign({}, props); // Copy props before modifying
             }
+            newProps[propName] = { children: propValue };
         }
@@ -25,0 +21,0 @@ }

lib/compose/types.d.ts

@@ -16,7 +16,5 @@ import * as React from 'react';
 export declare type ShorthandRenderFunction<TProps> = (Component: React.ElementType<TProps>, props: TProps) => React.ReactNode;
-export declare type ShorthandProps<TProps extends ComponentProps = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | boolean | number | null | undefined | (TProps & ComponentProps & {
+export declare type ShorthandProps<TProps extends ComponentProps = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | boolean | number | null | undefined | ObjectShorthandProps<TProps>;
+export declare type ObjectShorthandProps<TProps extends ComponentProps = {}> = TProps & Omit<ComponentProps, 'children'> & {
     children?: TProps['children'] | ShorthandRenderFunction<TProps>;
-});
-export declare type ObjectShorthandProps<TProps extends ComponentProps = {}> = TProps & {
-    children?: TProps['children'] | ShorthandRenderFunction<TProps>;
 };
@@ -31,1 +29,29 @@ export interface BaseSlots {
 };
+/**
+ * Helper type to convert the given props of type ShorthandProps into ObjectShorthandProps
+ */
+export declare type ResolvedShorthandProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]: T[P] extends ShorthandProps<infer U> ? ObjectShorthandProps<U> : T[P];
+};
+/**
+ * Helper type to mark the given props as required.
+ * Similar to Required<T> except it only requires a subset of the props.
+ */
+export declare type RequiredProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]-?: T[P];
+};
+/**
+ * Converts a components Props type to a State type:
+ * * Adds the 'ref' and 'as' props
+ * * Ensures the specified ShorthandProps are of type ObjectShorthandProps<T>
+ * * Marks the given DefaultedProps as required (-?)
+ *
+ * @param Props - The component's Props type
+ * @param RefType - The type of the state.ref property; e.g. `React.Ref<HTMLElement>`
+ * @param ShorthandProps - The keys of Props that correspond to ShorthandProps
+ * @param DefaultedProps - The keys of Props that will always have a default value provided
+ */
+export declare type ComponentState<RefType, Props, ShorthandProps extends keyof Props = never, DefaultedProps extends keyof ResolvedShorthandProps<Props, ShorthandProps> = never> = RequiredProps<ResolvedShorthandProps<Props, ShorthandProps>, DefaultedProps> & {
+    as?: React.ElementType;
+    ref: RefType;
+};

lib/utils/index.d.ts

 export * from './getNativeElementProps';
 export * from './omit';
 export * from './properties';
+export * from './shouldPreventDefaultOnKeyDown';

lib/utils/index.js

 export * from './getNativeElementProps';
 export * from './omit';
 export * from './properties';
+export * from './shouldPreventDefaultOnKeyDown';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@fluentui/react-utilities",
-  "version": "9.0.0-alpha.13",
+  "version": "9.0.0-alpha.14",
   "description": "A set of general React-specific utilities.",
@@ -25,3 +25,3 @@ "main": "lib-commonjs/index.js",
   "devDependencies": {
-    "@fluentui/eslint-plugin": "^1.0.1",
+    "@fluentui/eslint-plugin": "^1.1.0",
     "@fluentui/scripts": "^1.0.0",
@@ -39,2 +39,3 @@ "@types/enzyme": "3.10.3",
   "dependencies": {
+    "@fluentui/keyboard-key": "^0.2.16",
     "tslib": "^1.10.0"
@@ -41,0 +42,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

597111

increased by11.91%

Number of package files

247

increased by7.86%

Lines of code

6672

increased by4.49%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@fluentui/keyboard-key@^0.2.16

• + Added@fluentui/keyboard-key@0.2.17(transitive)