@fluentui/react-utilities - npm Package Compare versions

Comparing version 9.0.0-alpha.42 to 9.0.0-alpha.43

CHANGELOG.json

@@ -5,3 +5,18 @@ {
     {
-      "date": "Tue, 31 Aug 2021 07:34:22 GMT",
+      "date": "Wed, 01 Sep 2021 07:37:53 GMT",
+      "tag": "@fluentui/react-utilities_v9.0.0-alpha.43",
+      "version": "9.0.0-alpha.43",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Update implementation to handle 'root' as a slot",
+            "author": "[e-mail]",
+            "commit": "40254a1b07bd51affd276e51af0b1d517714b45c",
+            "package": "@fluentui/react-utilities"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 31 Aug 2021 07:37:47 GMT",
       "tag": "@fluentui/react-utilities_v9.0.0-alpha.42",
@@ -8,0 +23,0 @@ "version": "9.0.0-alpha.42",

CHANGELOG.md

 # Change Log - @fluentui/react-utilities
 
-This log was last generated on Tue, 31 Aug 2021 07:34:22 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Sep 2021 07:37:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.43](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-alpha.43)
+
+Wed, 01 Sep 2021 07:37:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-alpha.42..@fluentui/react-utilities_v9.0.0-alpha.43)
+
+### Changes
+
+- Update implementation to handle 'root' as a slot ([PR #19483](https://github.com/microsoft/fluentui/pull/19483) by [e-mail])
+
 ## [9.0.0-alpha.42](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-alpha.42)
 
-Tue, 31 Aug 2021 07:34:22 GMT 
+Tue, 31 Aug 2021 07:37:47 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-alpha.41..@fluentui/react-utilities_v9.0.0-alpha.42)
@@ -11,0 +20,0 @@

dist/react-utilities.d.ts

@@ -54,3 +54,5 @@ import { DispatchWithoutAction } from 'react';
 
-export declare type ComponentProps<Record extends SlotPropsRecord = {}> = DefaultComponentProps & ShorthandPropsRecord<Record>;
+export declare type ComponentProps<Shorthands extends ObjectShorthandPropsRecord, Primary extends keyof Shorthands = 'root'> = Omit<{
+    [Key in keyof Shorthands]?: ShorthandProps<NonNullable<Shorthands[Key]>>;
+}, Primary> & Shorthands[Primary];
 
@@ -63,11 +65,7 @@ export declare interface ComponentPropsCompat {
 
-export declare type ComponentState<Record extends SlotPropsRecord = {}> = Pick<ComponentProps<Record>, keyof DefaultComponentProps> & {
+export declare type ComponentState<Shorthands extends ObjectShorthandPropsRecord> = {
     components?: {
-        [K in keyof Record]?: React_2.ElementType<Record[K]>;
+        [Key in keyof Shorthands]?: React_2.ElementType<NonNullable<Shorthands[Key]>> | keyof JSX.IntrinsicElements;
     };
-} & {
-    components?: {
-        root?: React_2.ElementType;
-    };
-} & ObjectShorthandPropsRecord<Record>;
+} & Shorthands;
 
@@ -85,5 +83,3 @@ /**
 
-export declare interface DefaultComponentProps {
-    as?: keyof JSX.IntrinsicElements;
-}
+export declare type DefaultObjectShorthandProps = ObjectShorthandProps<{}, unknown, keyof JSX.IntrinsicElements>;
 
@@ -161,9 +157,5 @@ /**
  */
-export declare function getSlots<SlotProps extends SlotPropsRecord = {}>(state: ComponentState<any>, slotNames?: string[]): {
-    readonly slots: { [K in keyof SlotProps]-?: React_2.ElementType<SlotProps[K]>; } & {
-        readonly root: React_2.ElementType<any>;
-    };
-    readonly slotProps: { [Key in keyof SlotProps]-?: UnionToIntersection<NonNullable<SlotProps[Key]>>; } & {
-        readonly root: any;
-    };
+export declare function getSlots<R extends ObjectShorthandPropsRecord>(state: ComponentState<R>, slotNames?: (keyof R)[]): {
+    slots: Slots<R>;
+    slotProps: SlotProps<R>;
 };
@@ -270,3 +262,4 @@
     children?: React_2.ReactNode;
-} = {}> = Props & {
+} = {}, Ref = unknown, As extends keyof JSX.IntrinsicElements = never> = Props & React_2.RefAttributes<Ref> & {
+    as?: As;
     children?: Props['children'] | ShorthandRenderFunction<Props>;
@@ -279,5 +272,3 @@ };
 
-export declare type ObjectShorthandPropsRecord<Record extends SlotPropsRecord = SlotPropsRecord> = {
-    [K in keyof Record]: ObjectShorthandProps<NonNullable<Record[K]>>;
-};
+export declare type ObjectShorthandPropsRecord = Record<string, DefaultObjectShorthandProps | undefined>;
 
@@ -345,5 +336,5 @@ /**
  * @param value - the base ShorthandProps
- * @param defaultProps - base properties to be merged with the end ObjectShorthandProps
+ * @param options - options to resolve ShorthandProps
  */
-export declare function resolveShorthand<Props extends Record<string, any>, Required extends boolean = false>(value: ShorthandProps<Props>, options?: ResolveShorthandOptions<Props, Required>): Required extends false ? ObjectShorthandProps<Props> | undefined : ObjectShorthandProps<Props>;
+export declare function resolveShorthand<Props extends DefaultObjectShorthandProps, Required extends boolean = false>(value: ShorthandProps<Props>, options?: ResolveShorthandOptions<Props, Required>): Required extends false ? Props | undefined : Props;
 
@@ -370,12 +361,8 @@ export declare interface ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> {
 
-export declare type ShorthandProps<Props = {}> = React_2.ReactChild | React_2.ReactNodeArray | React_2.ReactPortal | number | null | undefined | ObjectShorthandProps<Props>;
+export declare type ShorthandProps<Props extends DefaultObjectShorthandProps> = React_2.ReactChild | React_2.ReactNodeArray | React_2.ReactPortal | number | null | undefined | Props;
 
 export declare type ShorthandPropsCompat<TProps extends ComponentPropsCompat = {}> = React_2.ReactChild | React_2.ReactNodeArray | React_2.ReactPortal | number | null | undefined | ObjectShorthandPropsCompat<TProps>;
 
-export declare type ShorthandPropsRecord<Record extends SlotPropsRecord = SlotPropsRecord> = {
-    [K in keyof Record]: ShorthandProps<NonNullable<Record[K]>>;
-};
+export declare type ShorthandRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'children' | 'as'>) => React_2.ReactNode;
 
-export declare type ShorthandRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Props) => React_2.ReactNode;
-
 export declare type ShorthandRenderFunctionCompat<TProps> = (Component: React_2.ElementType<TProps>, props: TProps) => React_2.ReactNode;
@@ -390,2 +377,6 @@
 
+declare type SlotProps<S extends ObjectShorthandPropsRecord> = {
+    [K in keyof S]-?: NonNullable<S[K]> extends ObjectShorthandProps<infer P> ? P : never;
+};
+
 export declare type SlotPropsCompat<TSlots extends BaseSlotsCompat, TProps, TRootProps extends React_2.HTMLAttributes<HTMLElement>> = {
@@ -397,6 +388,5 @@ [key in keyof Omit<TSlots, 'root'>]: key extends keyof TProps ? TProps[key] : any;
 
-/**
- * Generic record of possible ShorthandProps
- */
-export declare type SlotPropsRecord = Record<string, Record<string, any> | undefined>;
+export declare type Slots<S extends ObjectShorthandPropsRecord> = {
+    [K in keyof S]-?: S[K] extends ObjectShorthandProps<infer P> ? React_2.ElementType<NonNullable<P>> : React_2.ElementType<NonNullable<S[K]>>;
+};
 
@@ -459,7 +449,2 @@ export declare const SSRContext: React_2.Context<SSRContextValue>;
 /**
- * Hack that converts an Union to an Intersection
- */
-declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : U;
-
-/**
  * Hook to store a value and generate callbacks for setting the value to true or false.
@@ -466,0 +451,0 @@ * The identity of the callbacks will always stay the same.

lib-amd/compose/getSlots.d.ts

 import * as React from 'react';
-import type { ComponentState, SlotPropsRecord } from './types';
+import { ComponentState, ObjectShorthandPropsRecord, ObjectShorthandProps } from './types';
+export declare type Slots<S extends ObjectShorthandPropsRecord> = {
+    [K in keyof S]-?: S[K] extends ObjectShorthandProps<infer P> ? React.ElementType<NonNullable<P>> : React.ElementType<NonNullable<S[K]>>;
+};
+declare type SlotProps<S extends ObjectShorthandPropsRecord> = {
+    [K in keyof S]-?: NonNullable<S[K]> extends ObjectShorthandProps<infer P> ? P : never;
+};
 /**
- * Hack that converts an Union to an Intersection
- */
-declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : U;
-/**
  * Given the state and an array of slot names, will break out `slots` and `slotProps`
@@ -23,10 +25,6 @@ * collections.
  */
-export declare function getSlots<SlotProps extends SlotPropsRecord = {}>(state: ComponentState<any>, slotNames?: string[]): {
-    readonly slots: { [K in keyof SlotProps]-?: React.ElementType<SlotProps[K]>; } & {
-        readonly root: React.ElementType<any>;
-    };
-    readonly slotProps: { [Key in keyof SlotProps]-?: UnionToIntersection<NonNullable<SlotProps[Key]>>; } & {
-        readonly root: any;
-    };
+export declare function getSlots<R extends ObjectShorthandPropsRecord>(state: ComponentState<R>, slotNames?: (keyof R)[]): {
+    slots: Slots<R>;
+    slotProps: SlotProps<R>;
 };
 export {};

lib-amd/compose/getSlots.js

@@ -1,15 +0,5 @@
-define(["require", "exports", "tslib", "react", "./nullRender", "../utils/getNativeElementProps", "../utils/omit"], function (require, exports, tslib_1, React, nullRender_1, getNativeElementProps_1, omit_1) {
+define(["require", "exports", "tslib", "react", "./nullRender", "../utils/omit"], function (require, exports, tslib_1, React, nullRender_1, omit_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.getSlots = void 0;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function getRootSlot(state) {
-        var _a, _b;
-        var slot = ((_a = state.components) === null || _a === void 0 ? void 0 : _a.root) === undefined || typeof state.components.root === 'string'
-            ? state.as || ((_b = state.components) === null || _b === void 0 ? void 0 : _b.root) || 'div'
-            : state.components.root;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var props = typeof slot === 'string' ? getNativeElementProps_1.getNativeElementProps(slot, state) : omit_1.omit(state, ['components']);
-        return [slot, props];
-    }
     /**
@@ -31,46 +21,38 @@ * Given the state and an array of slot names, will break out `slots` and `slotProps`
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function getSlots(state, slotNames) {
-        var _a;
-        /**
-         * force typings on state, this should not be added directly in parameters to avoid type inference
-         */
-        var typedState = state;
-        /**
-         * force typings on slotNames, this should not be added directly in parameters to avoid type inference
-         */
-        var typedSlotNames = slotNames;
+        if (slotNames === void 0) { slotNames = ['root']; }
         var slots = {};
         var slotProps = {};
-        if (typedSlotNames) {
-            for (var _i = 0, typedSlotNames_1 = typedSlotNames; _i < typedSlotNames_1.length; _i++) {
-                var name_1 = typedSlotNames_1[_i];
-                if (typedState[name_1] === undefined) {
-                    slots[name_1] = nullRender_1.nullRender;
-                    continue;
-                }
-                var _b = typedState[name_1], children = _b.children, rest = tslib_1.__rest(_b, ["children"]);
-                slots[name_1] = (((_a = typedState.components) === null || _a === void 0 ? void 0 : _a[name_1]) || 'div');
-                if (typeof children === 'function') {
-                    var render = children;
-                    // TODO: converting to unknown might be harmful
-                    slotProps[name_1] = {
-                        children: render(slots[name_1], rest),
-                    };
-                    slots[name_1] = React.Fragment;
-                }
-                else {
-                    slotProps[name_1] = typedState[name_1];
-                }
-            }
+        for (var _i = 0, slotNames_1 = slotNames; _i < slotNames_1.length; _i++) {
+            var slotName = slotNames_1[_i];
+            var _a = getSlot(state, slotName), slot = _a[0], props = _a[1];
+            slots[slotName] = slot;
+            slotProps[slotName] = props;
         }
-        var _c = getRootSlot(state), root = _c[0], rootProps = _c[1];
-        var typedSlotProps = slotProps;
-        return {
-            slots: tslib_1.__assign(tslib_1.__assign({}, slots), { root: root }),
-            slotProps: tslib_1.__assign(tslib_1.__assign({}, typedSlotProps), { root: rootProps }),
-        };
+        return { slots: slots, slotProps: slotProps };
     }
     exports.getSlots = getSlots;
+    function getSlot(state, slotName) {
+        var _a, _b, _c;
+        if (state[slotName] === undefined) {
+            return [nullRender_1.nullRender, undefined];
+        }
+        var _d = state[slotName], children = _d.children, asProp = _d.as, rest = tslib_1.__rest(_d, ["children", "as"]);
+        var slot = (((_a = state.components) === null || _a === void 0 ? void 0 : _a[slotName]) === undefined || typeof state.components[slotName] === 'string'
+            ? asProp || ((_b = state.components) === null || _b === void 0 ? void 0 : _b[slotName]) || 'div'
+            : state.components[slotName]);
+        if (typeof children === 'function') {
+            var render = children;
+            return [
+                React.Fragment,
+                {
+                    children: render(slot, rest),
+                },
+            ];
+        }
+        var shouldOmitAsProp = typeof slot === 'string' && ((_c = state[slotName]) === null || _c === void 0 ? void 0 : _c.as);
+        var slotProps = (shouldOmitAsProp ? omit_1.omit(state[slotName], ['as']) : state[slotName]);
+        return [slot, slotProps];
+    }
 });
 //# sourceMappingURL=getSlots.js.map

lib-amd/compose/resolveShorthand.d.ts

@@ -1,2 +0,2 @@
-import type { ObjectShorthandProps, ShorthandProps } from './types';
+import type { DefaultObjectShorthandProps, ShorthandProps } from './types';
 export interface ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> {
@@ -10,4 +10,4 @@ required?: Required;
  * @param value - the base ShorthandProps
- * @param defaultProps - base properties to be merged with the end ObjectShorthandProps
+ * @param options - options to resolve ShorthandProps
  */
-export declare function resolveShorthand<Props extends Record<string, any>, Required extends boolean = false>(value: ShorthandProps<Props>, options?: ResolveShorthandOptions<Props, Required>): Required extends false ? ObjectShorthandProps<Props> | undefined : ObjectShorthandProps<Props>;
+export declare function resolveShorthand<Props extends DefaultObjectShorthandProps, Required extends boolean = false>(value: ShorthandProps<Props>, options?: ResolveShorthandOptions<Props, Required>): Required extends false ? Props | undefined : Props;

lib-amd/compose/resolveShorthand.js

@@ -9,5 +9,4 @@ define(["require", "exports", "tslib", "react"], function (require, exports, tslib_1, react_1) {
      * @param value - the base ShorthandProps
-     * @param defaultProps - base properties to be merged with the end ObjectShorthandProps
+     * @param options - options to resolve ShorthandProps
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function resolveShorthand(value, options) {
@@ -14,0 +13,0 @@ var _a = options || {}, _b = _a.required, required = _b === void 0 ? false : _b, defaultProps = _a.defaultProps;

lib-amd/compose/types.d.ts

 import * as React from 'react';
-/**
- * Generic record of possible ShorthandProps
- */
-export declare type SlotPropsRecord = Record<string, Record<string, any> | undefined>;
-export declare type ShorthandPropsRecord<Record extends SlotPropsRecord = SlotPropsRecord> = {
-    [K in keyof Record]: ShorthandProps<NonNullable<Record[K]>>;
-};
-export declare type ObjectShorthandPropsRecord<Record extends SlotPropsRecord = SlotPropsRecord> = {
-    [K in keyof Record]: ObjectShorthandProps<NonNullable<Record[K]>>;
-};
-export declare type ShorthandRenderFunction<Props> = (Component: React.ElementType<Props>, props: Props) => React.ReactNode;
-export declare type ShorthandProps<Props = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | number | null | undefined | ObjectShorthandProps<Props>;
+export declare type ShorthandRenderFunction<Props> = (Component: React.ElementType<Props>, props: Omit<Props, 'children' | 'as'>) => React.ReactNode;
+export declare type ObjectShorthandPropsRecord = Record<string, DefaultObjectShorthandProps | undefined>;
+export declare type ShorthandProps<Props extends DefaultObjectShorthandProps> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | number | null | undefined | Props;
+export declare type DefaultObjectShorthandProps = ObjectShorthandProps<{}, unknown, keyof JSX.IntrinsicElements>;
 export declare type ObjectShorthandProps<Props extends {
     children?: React.ReactNode;
-} = {}> = Props & {
+} = {}, Ref = unknown, As extends keyof JSX.IntrinsicElements = never> = Props & React.RefAttributes<Ref> & {
+    as?: As;
     children?: Props['children'] | ShorthandRenderFunction<Props>;
 };
-export interface DefaultComponentProps {
-    as?: keyof JSX.IntrinsicElements;
-}
-export declare type ComponentProps<Record extends SlotPropsRecord = {}> = DefaultComponentProps & ShorthandPropsRecord<Record>;
-export declare type ComponentState<Record extends SlotPropsRecord = {}> = Pick<ComponentProps<Record>, keyof DefaultComponentProps> & {
+export declare type ComponentProps<Shorthands extends ObjectShorthandPropsRecord, Primary extends keyof Shorthands = 'root'> = Omit<{
+    [Key in keyof Shorthands]?: ShorthandProps<NonNullable<Shorthands[Key]>>;
+}, Primary> & Shorthands[Primary];
+export declare type ComponentState<Shorthands extends ObjectShorthandPropsRecord> = {
     components?: {
-        [K in keyof Record]?: React.ElementType<Record[K]>;
+        [Key in keyof Shorthands]?: React.ElementType<NonNullable<Shorthands[Key]>> | keyof JSX.IntrinsicElements;
     };
-} & {
-    components?: {
-        root?: React.ElementType;
-    };
-} & ObjectShorthandPropsRecord<Record>;
+} & Shorthands;
 export interface ComponentPropsCompat {
@@ -33,0 +21,0 @@ as?: React.ElementType;

lib-commonjs/compose/getSlots.d.ts

 import * as React from 'react';
-import type { ComponentState, SlotPropsRecord } from './types';
+import { ComponentState, ObjectShorthandPropsRecord, ObjectShorthandProps } from './types';
+export declare type Slots<S extends ObjectShorthandPropsRecord> = {
+    [K in keyof S]-?: S[K] extends ObjectShorthandProps<infer P> ? React.ElementType<NonNullable<P>> : React.ElementType<NonNullable<S[K]>>;
+};
+declare type SlotProps<S extends ObjectShorthandPropsRecord> = {
+    [K in keyof S]-?: NonNullable<S[K]> extends ObjectShorthandProps<infer P> ? P : never;
+};
 /**
- * Hack that converts an Union to an Intersection
- */
-declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : U;
-/**
  * Given the state and an array of slot names, will break out `slots` and `slotProps`
@@ -23,10 +25,6 @@ * collections.
  */
-export declare function getSlots<SlotProps extends SlotPropsRecord = {}>(state: ComponentState<any>, slotNames?: string[]): {
-    readonly slots: { [K in keyof SlotProps]-?: React.ElementType<SlotProps[K]>; } & {
-        readonly root: React.ElementType<any>;
-    };
-    readonly slotProps: { [Key in keyof SlotProps]-?: UnionToIntersection<NonNullable<SlotProps[Key]>>; } & {
-        readonly root: any;
-    };
+export declare function getSlots<R extends ObjectShorthandPropsRecord>(state: ComponentState<R>, slotNames?: (keyof R)[]): {
+    slots: Slots<R>;
+    slotProps: SlotProps<R>;
 };
 export {};

lib-commonjs/compose/getSlots.js

@@ -14,15 +14,3 @@ "use strict";
 
-var getNativeElementProps_1 = /*#__PURE__*/require("../utils/getNativeElementProps");
-
-var omit_1 = /*#__PURE__*/require("../utils/omit"); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-
-function getRootSlot(state) {
-  var _a, _b;
-
-  var slot = ((_a = state.components) === null || _a === void 0 ? void 0 : _a.root) === undefined || typeof state.components.root === 'string' ? state.as || ((_b = state.components) === null || _b === void 0 ? void 0 : _b.root) || 'div' : state.components.root; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-  var props = typeof slot === 'string' ? getNativeElementProps_1.getNativeElementProps(slot, state) : omit_1.omit(state, ['components']);
-  return [slot, props];
-}
+var omit_1 = /*#__PURE__*/require("../utils/omit");
 /**
@@ -44,65 +32,56 @@ * Given the state and an array of slot names, will break out `slots` and `slotProps`
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
 function getSlots(state, slotNames) {
-  var _a;
-  /**
-   * force typings on state, this should not be added directly in parameters to avoid type inference
-   */
+  if (slotNames === void 0) {
+    slotNames = ['root'];
+  }
 
-
-  var typedState = state;
-  /**
-   * force typings on slotNames, this should not be added directly in parameters to avoid type inference
-   */
-
-  var typedSlotNames = slotNames;
   var slots = {};
   var slotProps = {};
 
-  if (typedSlotNames) {
-    for (var _i = 0, typedSlotNames_1 = typedSlotNames; _i < typedSlotNames_1.length; _i++) {
-      var name_1 = typedSlotNames_1[_i];
+  for (var _i = 0, slotNames_1 = slotNames; _i < slotNames_1.length; _i++) {
+    var slotName = slotNames_1[_i];
 
-      if (typedState[name_1] === undefined) {
-        slots[name_1] = nullRender_1.nullRender;
-        continue;
-      }
+    var _a = getSlot(state, slotName),
+        slot = _a[0],
+        props = _a[1];
 
-      var _b = typedState[name_1],
-          children = _b.children,
-          rest = tslib_1.__rest(_b, ["children"]);
+    slots[slotName] = slot;
+    slotProps[slotName] = props;
+  }
 
-      slots[name_1] = ((_a = typedState.components) === null || _a === void 0 ? void 0 : _a[name_1]) || 'div';
+  return {
+    slots: slots,
+    slotProps: slotProps
+  };
+}
 
-      if (typeof children === 'function') {
-        var render = children; // TODO: converting to unknown might be harmful
+exports.getSlots = getSlots;
 
-        slotProps[name_1] = {
-          children: render(slots[name_1], rest)
-        };
-        slots[name_1] = React.Fragment;
-      } else {
-        slotProps[name_1] = typedState[name_1];
-      }
-    }
+function getSlot(state, slotName) {
+  var _a, _b, _c;
+
+  if (state[slotName] === undefined) {
+    return [nullRender_1.nullRender, undefined];
   }
 
-  var _c = getRootSlot(state),
-      root = _c[0],
-      rootProps = _c[1];
+  var _d = state[slotName],
+      children = _d.children,
+      asProp = _d.as,
+      rest = tslib_1.__rest(_d, ["children", "as"]);
 
-  var typedSlotProps = slotProps;
-  return {
-    slots: tslib_1.__assign(tslib_1.__assign({}, slots), {
-      root: root
-    }),
-    slotProps: tslib_1.__assign(tslib_1.__assign({}, typedSlotProps), {
-      root: rootProps
-    })
-  };
+  var slot = ((_a = state.components) === null || _a === void 0 ? void 0 : _a[slotName]) === undefined || typeof state.components[slotName] === 'string' ? asProp || ((_b = state.components) === null || _b === void 0 ? void 0 : _b[slotName]) || 'div' : state.components[slotName];
+
+  if (typeof children === 'function') {
+    var render = children;
+    return [React.Fragment, {
+      children: render(slot, rest)
+    }];
+  }
+
+  var shouldOmitAsProp = typeof slot === 'string' && ((_c = state[slotName]) === null || _c === void 0 ? void 0 : _c.as);
+  var slotProps = shouldOmitAsProp ? omit_1.omit(state[slotName], ['as']) : state[slotName];
+  return [slot, slotProps];
 }
-
-exports.getSlots = getSlots;
 //# sourceMappingURL=getSlots.js.map

lib-commonjs/compose/resolveShorthand.d.ts

@@ -1,2 +0,2 @@
-import type { ObjectShorthandProps, ShorthandProps } from './types';
+import type { DefaultObjectShorthandProps, ShorthandProps } from './types';
 export interface ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> {
@@ -10,4 +10,4 @@ required?: Required;
  * @param value - the base ShorthandProps
- * @param defaultProps - base properties to be merged with the end ObjectShorthandProps
+ * @param options - options to resolve ShorthandProps
  */
-export declare function resolveShorthand<Props extends Record<string, any>, Required extends boolean = false>(value: ShorthandProps<Props>, options?: ResolveShorthandOptions<Props, Required>): Required extends false ? ObjectShorthandProps<Props> | undefined : ObjectShorthandProps<Props>;
+export declare function resolveShorthand<Props extends DefaultObjectShorthandProps, Required extends boolean = false>(value: ShorthandProps<Props>, options?: ResolveShorthandOptions<Props, Required>): Required extends false ? Props | undefined : Props;

lib-commonjs/compose/resolveShorthand.js

@@ -15,5 +15,4 @@ "use strict";
  * @param value - the base ShorthandProps
- * @param defaultProps - base properties to be merged with the end ObjectShorthandProps
+ * @param options - options to resolve ShorthandProps
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 
@@ -20,0 +19,0 @@

lib-commonjs/compose/types.d.ts

 import * as React from 'react';
-/**
- * Generic record of possible ShorthandProps
- */
-export declare type SlotPropsRecord = Record<string, Record<string, any> | undefined>;
-export declare type ShorthandPropsRecord<Record extends SlotPropsRecord = SlotPropsRecord> = {
-    [K in keyof Record]: ShorthandProps<NonNullable<Record[K]>>;
-};
-export declare type ObjectShorthandPropsRecord<Record extends SlotPropsRecord = SlotPropsRecord> = {
-    [K in keyof Record]: ObjectShorthandProps<NonNullable<Record[K]>>;
-};
-export declare type ShorthandRenderFunction<Props> = (Component: React.ElementType<Props>, props: Props) => React.ReactNode;
-export declare type ShorthandProps<Props = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | number | null | undefined | ObjectShorthandProps<Props>;
+export declare type ShorthandRenderFunction<Props> = (Component: React.ElementType<Props>, props: Omit<Props, 'children' | 'as'>) => React.ReactNode;
+export declare type ObjectShorthandPropsRecord = Record<string, DefaultObjectShorthandProps | undefined>;
+export declare type ShorthandProps<Props extends DefaultObjectShorthandProps> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | number | null | undefined | Props;
+export declare type DefaultObjectShorthandProps = ObjectShorthandProps<{}, unknown, keyof JSX.IntrinsicElements>;
 export declare type ObjectShorthandProps<Props extends {
     children?: React.ReactNode;
-} = {}> = Props & {
+} = {}, Ref = unknown, As extends keyof JSX.IntrinsicElements = never> = Props & React.RefAttributes<Ref> & {
+    as?: As;
     children?: Props['children'] | ShorthandRenderFunction<Props>;
 };
-export interface DefaultComponentProps {
-    as?: keyof JSX.IntrinsicElements;
-}
-export declare type ComponentProps<Record extends SlotPropsRecord = {}> = DefaultComponentProps & ShorthandPropsRecord<Record>;
-export declare type ComponentState<Record extends SlotPropsRecord = {}> = Pick<ComponentProps<Record>, keyof DefaultComponentProps> & {
+export declare type ComponentProps<Shorthands extends ObjectShorthandPropsRecord, Primary extends keyof Shorthands = 'root'> = Omit<{
+    [Key in keyof Shorthands]?: ShorthandProps<NonNullable<Shorthands[Key]>>;
+}, Primary> & Shorthands[Primary];
+export declare type ComponentState<Shorthands extends ObjectShorthandPropsRecord> = {
     components?: {
-        [K in keyof Record]?: React.ElementType<Record[K]>;
+        [Key in keyof Shorthands]?: React.ElementType<NonNullable<Shorthands[Key]>> | keyof JSX.IntrinsicElements;
     };
-} & {
-    components?: {
-        root?: React.ElementType;
-    };
-} & ObjectShorthandPropsRecord<Record>;
+} & Shorthands;
 export interface ComponentPropsCompat {
@@ -33,0 +21,0 @@ as?: React.ElementType;

lib/compose/getSlots.d.ts

 import * as React from 'react';
-import type { ComponentState, SlotPropsRecord } from './types';
+import { ComponentState, ObjectShorthandPropsRecord, ObjectShorthandProps } from './types';
+export declare type Slots<S extends ObjectShorthandPropsRecord> = {
+    [K in keyof S]-?: S[K] extends ObjectShorthandProps<infer P> ? React.ElementType<NonNullable<P>> : React.ElementType<NonNullable<S[K]>>;
+};
+declare type SlotProps<S extends ObjectShorthandPropsRecord> = {
+    [K in keyof S]-?: NonNullable<S[K]> extends ObjectShorthandProps<infer P> ? P : never;
+};
 /**
- * Hack that converts an Union to an Intersection
- */
-declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : U;
-/**
  * Given the state and an array of slot names, will break out `slots` and `slotProps`
@@ -23,10 +25,6 @@ * collections.
  */
-export declare function getSlots<SlotProps extends SlotPropsRecord = {}>(state: ComponentState<any>, slotNames?: string[]): {
-    readonly slots: { [K in keyof SlotProps]-?: React.ElementType<SlotProps[K]>; } & {
-        readonly root: React.ElementType<any>;
-    };
-    readonly slotProps: { [Key in keyof SlotProps]-?: UnionToIntersection<NonNullable<SlotProps[Key]>>; } & {
-        readonly root: any;
-    };
+export declare function getSlots<R extends ObjectShorthandPropsRecord>(state: ComponentState<R>, slotNames?: (keyof R)[]): {
+    slots: Slots<R>;
+    slotProps: SlotProps<R>;
 };
 export {};

lib/compose/getSlots.js

@@ -1,15 +0,5 @@
-import { __assign, __rest } from "tslib";
+import { __rest } from "tslib";
 import * as React from 'react';
 import { nullRender } from './nullRender';
-import { getNativeElementProps } from '../utils/getNativeElementProps';
-import { omit } from '../utils/omit'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-function getRootSlot(state) {
-  var _a, _b;
-
-  var slot = ((_a = state.components) === null || _a === void 0 ? void 0 : _a.root) === undefined || typeof state.components.root === 'string' ? state.as || ((_b = state.components) === null || _b === void 0 ? void 0 : _b.root) || 'div' : state.components.root; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-  var props = typeof slot === 'string' ? getNativeElementProps(slot, state) : omit(state, ['components']);
-  return [slot, props];
-}
+import { omit } from '../utils/omit';
 /**
@@ -31,63 +21,53 @@ * Given the state and an array of slot names, will break out `slots` and `slotProps`
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-
 export function getSlots(state, slotNames) {
-  var _a;
-  /**
-   * force typings on state, this should not be added directly in parameters to avoid type inference
-   */
+  if (slotNames === void 0) {
+    slotNames = ['root'];
+  }
 
-
-  var typedState = state;
-  /**
-   * force typings on slotNames, this should not be added directly in parameters to avoid type inference
-   */
-
-  var typedSlotNames = slotNames;
   var slots = {};
   var slotProps = {};
 
-  if (typedSlotNames) {
-    for (var _i = 0, typedSlotNames_1 = typedSlotNames; _i < typedSlotNames_1.length; _i++) {
-      var name_1 = typedSlotNames_1[_i];
+  for (var _i = 0, slotNames_1 = slotNames; _i < slotNames_1.length; _i++) {
+    var slotName = slotNames_1[_i];
 
-      if (typedState[name_1] === undefined) {
-        slots[name_1] = nullRender;
-        continue;
-      }
+    var _a = getSlot(state, slotName),
+        slot = _a[0],
+        props = _a[1];
 
-      var _b = typedState[name_1],
-          children = _b.children,
-          rest = __rest(_b, ["children"]);
+    slots[slotName] = slot;
+    slotProps[slotName] = props;
+  }
 
-      slots[name_1] = ((_a = typedState.components) === null || _a === void 0 ? void 0 : _a[name_1]) || 'div';
+  return {
+    slots: slots,
+    slotProps: slotProps
+  };
+}
 
-      if (typeof children === 'function') {
-        var render = children; // TODO: converting to unknown might be harmful
+function getSlot(state, slotName) {
+  var _a, _b, _c;
 
-        slotProps[name_1] = {
-          children: render(slots[name_1], rest)
-        };
-        slots[name_1] = React.Fragment;
-      } else {
-        slotProps[name_1] = typedState[name_1];
-      }
-    }
+  if (state[slotName] === undefined) {
+    return [nullRender, undefined];
   }
 
-  var _c = getRootSlot(state),
-      root = _c[0],
-      rootProps = _c[1];
+  var _d = state[slotName],
+      children = _d.children,
+      asProp = _d.as,
+      rest = __rest(_d, ["children", "as"]);
 
-  var typedSlotProps = slotProps;
-  return {
-    slots: __assign(__assign({}, slots), {
-      root: root
-    }),
-    slotProps: __assign(__assign({}, typedSlotProps), {
-      root: rootProps
-    })
-  };
+  var slot = ((_a = state.components) === null || _a === void 0 ? void 0 : _a[slotName]) === undefined || typeof state.components[slotName] === 'string' ? asProp || ((_b = state.components) === null || _b === void 0 ? void 0 : _b[slotName]) || 'div' : state.components[slotName];
+
+  if (typeof children === 'function') {
+    var render = children;
+    return [React.Fragment, {
+      children: render(slot, rest)
+    }];
+  }
+
+  var shouldOmitAsProp = typeof slot === 'string' && ((_c = state[slotName]) === null || _c === void 0 ? void 0 : _c.as);
+  var slotProps = shouldOmitAsProp ? omit(state[slotName], ['as']) : state[slotName];
+  return [slot, slotProps];
 }
 //# sourceMappingURL=getSlots.js.map

lib/compose/resolveShorthand.d.ts

@@ -1,2 +0,2 @@
-import type { ObjectShorthandProps, ShorthandProps } from './types';
+import type { DefaultObjectShorthandProps, ShorthandProps } from './types';
 export interface ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> {
@@ -10,4 +10,4 @@ required?: Required;
  * @param value - the base ShorthandProps
- * @param defaultProps - base properties to be merged with the end ObjectShorthandProps
+ * @param options - options to resolve ShorthandProps
  */
-export declare function resolveShorthand<Props extends Record<string, any>, Required extends boolean = false>(value: ShorthandProps<Props>, options?: ResolveShorthandOptions<Props, Required>): Required extends false ? ObjectShorthandProps<Props> | undefined : ObjectShorthandProps<Props>;
+export declare function resolveShorthand<Props extends DefaultObjectShorthandProps, Required extends boolean = false>(value: ShorthandProps<Props>, options?: ResolveShorthandOptions<Props, Required>): Required extends false ? Props | undefined : Props;

lib/compose/resolveShorthand.js

@@ -7,5 +7,4 @@ import { __assign } from "tslib";
  * @param value - the base ShorthandProps
- * @param defaultProps - base properties to be merged with the end ObjectShorthandProps
+ * @param options - options to resolve ShorthandProps
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 
@@ -12,0 +11,0 @@ export function resolveShorthand(value, options) {

lib/compose/types.d.ts

 import * as React from 'react';
-/**
- * Generic record of possible ShorthandProps
- */
-export declare type SlotPropsRecord = Record<string, Record<string, any> | undefined>;
-export declare type ShorthandPropsRecord<Record extends SlotPropsRecord = SlotPropsRecord> = {
-    [K in keyof Record]: ShorthandProps<NonNullable<Record[K]>>;
-};
-export declare type ObjectShorthandPropsRecord<Record extends SlotPropsRecord = SlotPropsRecord> = {
-    [K in keyof Record]: ObjectShorthandProps<NonNullable<Record[K]>>;
-};
-export declare type ShorthandRenderFunction<Props> = (Component: React.ElementType<Props>, props: Props) => React.ReactNode;
-export declare type ShorthandProps<Props = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | number | null | undefined | ObjectShorthandProps<Props>;
+export declare type ShorthandRenderFunction<Props> = (Component: React.ElementType<Props>, props: Omit<Props, 'children' | 'as'>) => React.ReactNode;
+export declare type ObjectShorthandPropsRecord = Record<string, DefaultObjectShorthandProps | undefined>;
+export declare type ShorthandProps<Props extends DefaultObjectShorthandProps> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | number | null | undefined | Props;
+export declare type DefaultObjectShorthandProps = ObjectShorthandProps<{}, unknown, keyof JSX.IntrinsicElements>;
 export declare type ObjectShorthandProps<Props extends {
     children?: React.ReactNode;
-} = {}> = Props & {
+} = {}, Ref = unknown, As extends keyof JSX.IntrinsicElements = never> = Props & React.RefAttributes<Ref> & {
+    as?: As;
     children?: Props['children'] | ShorthandRenderFunction<Props>;
 };
-export interface DefaultComponentProps {
-    as?: keyof JSX.IntrinsicElements;
-}
-export declare type ComponentProps<Record extends SlotPropsRecord = {}> = DefaultComponentProps & ShorthandPropsRecord<Record>;
-export declare type ComponentState<Record extends SlotPropsRecord = {}> = Pick<ComponentProps<Record>, keyof DefaultComponentProps> & {
+export declare type ComponentProps<Shorthands extends ObjectShorthandPropsRecord, Primary extends keyof Shorthands = 'root'> = Omit<{
+    [Key in keyof Shorthands]?: ShorthandProps<NonNullable<Shorthands[Key]>>;
+}, Primary> & Shorthands[Primary];
+export declare type ComponentState<Shorthands extends ObjectShorthandPropsRecord> = {
     components?: {
-        [K in keyof Record]?: React.ElementType<Record[K]>;
+        [Key in keyof Shorthands]?: React.ElementType<NonNullable<Shorthands[Key]>> | keyof JSX.IntrinsicElements;
     };
-} & {
-    components?: {
-        root?: React.ElementType;
-    };
-} & ObjectShorthandPropsRecord<Record>;
+} & Shorthands;
 export interface ComponentPropsCompat {
@@ -33,0 +21,0 @@ as?: React.ElementType;

package.json

 {
   "name": "@fluentui/react-utilities",
-  "version": "9.0.0-alpha.42",
+  "version": "9.0.0-alpha.43",
   "description": "A set of general React-specific utilities.",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

No alert changes

Worsened metrics

Total package byte prevSize

639064

decreased by-1.05%

Lines of code

7721

decreased by-1.28%

No dependency changes