@fluentui/react-utilities - npm Package Compare versions

Comparing version 9.0.0-alpha.38 to 9.0.0-alpha.39

CHANGELOG.json

@@ -5,3 +5,18 @@ {
     {
-      "date": "Fri, 06 Aug 2021 07:32:58 GMT",
+      "date": "Thu, 19 Aug 2021 07:36:42 GMT",
+      "tag": "@fluentui/react-utilities_v9.0.0-alpha.39",
+      "version": "9.0.0-alpha.39",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Slot null rendering refactor",
+            "author": "[e-mail]",
+            "commit": "e467d64e7d3edb2512a81efdaeca5813269039b4",
+            "package": "@fluentui/react-utilities"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 06 Aug 2021 07:35:14 GMT",
       "tag": "@fluentui/react-utilities_v9.0.0-alpha.38",
@@ -8,0 +23,0 @@ "version": "9.0.0-alpha.38",

CHANGELOG.md

 # Change Log - @fluentui/react-utilities
 
-This log was last generated on Fri, 06 Aug 2021 07:32:58 GMT and should not be manually modified.
+This log was last generated on Thu, 19 Aug 2021 07:36:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.39](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-alpha.39)
+
+Thu, 19 Aug 2021 07:36:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-alpha.38..@fluentui/react-utilities_v9.0.0-alpha.39)
+
+### Changes
+
+- Slot null rendering refactor ([PR #19273](https://github.com/microsoft/fluentui/pull/19273) by [e-mail])
+
 ## [9.0.0-alpha.38](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-alpha.38)
 
-Fri, 06 Aug 2021 07:32:58 GMT 
+Fri, 06 Aug 2021 07:35:14 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-alpha.37..@fluentui/react-utilities_v9.0.0-alpha.38)
@@ -11,0 +20,0 @@

dist/react-utilities.d.ts

@@ -159,6 +159,6 @@ import { DispatchWithoutAction } from 'react';
 export declare function getSlots<SlotProps extends SlotPropsRecord = {}>(state: ComponentState<any>, slotNames?: string[]): {
-    readonly slots: { [K in keyof SlotProps]: React_2.ElementType<SlotProps[K]>; } & {
+    readonly slots: { [K in keyof SlotProps]-?: React_2.ElementType<SlotProps[K]>; } & {
         readonly root: React_2.ElementType<any>;
     };
-    readonly slotProps: { [Key in keyof SlotProps]: UnionToIntersection<SlotProps[Key]>; } & {
+    readonly slotProps: { [Key in keyof SlotProps]-?: UnionToIntersection<NonNullable<SlotProps[Key]>>; } & {
         readonly root: any;
@@ -342,4 +342,9 @@ };
  */
-export declare function resolveShorthand<Props extends Record<string, any>>(value: ShorthandProps<Props>, defaultProps?: Props): ObjectShorthandProps<Props>;
+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 interface ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> {
+    required?: Required;
+    defaultProps?: Props;
+}
+
 /**
@@ -346,0 +351,0 @@ * Ensures that the given slots are represented using object syntax. This ensures that

etc/react-utilities.api.md

@@ -95,6 +95,6 @@ ## API Report File for "@fluentui/react-utilities"
 export function getSlots<SlotProps extends SlotPropsRecord = {}>(state: ComponentState<any>, slotNames?: string[]): {
-    readonly slots: { [K in keyof SlotProps]: React_2.ElementType<SlotProps[K]>; } & {
+    readonly slots: { [K in keyof SlotProps]-?: React_2.ElementType<SlotProps[K]>; } & {
         readonly root: React_2.ElementType<any>;
     };
-    readonly slotProps: { [Key in keyof SlotProps]: UnionToIntersection<SlotProps[Key]>; } & {
+    readonly slotProps: { [Key in keyof SlotProps]-?: UnionToIntersection<NonNullable<SlotProps[Key]>>; } & {
         readonly root: any;
@@ -195,4 +195,12 @@ };
 // @public
-export function resolveShorthand<Props extends Record<string, any>>(value: ShorthandProps<Props>, defaultProps?: Props): ObjectShorthandProps<Props>;
+export 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>;
 
+// @public (undocumented)
+export interface ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> {
+    // (undocumented)
+    defaultProps?: Props;
+    // (undocumented)
+    required?: Required;
+}
+
 // @public
@@ -199,0 +207,0 @@ export const resolveShorthandProps: <TProps, TShorthandPropNames extends keyof TProps>(props: TProps, shorthandPropNames: readonly TShorthandPropNames[]) => ResolvedShorthandPropsCompat<TProps, TShorthandPropNames>;

lib-amd/compose/getSlots.d.ts

@@ -24,6 +24,6 @@ import * as React from 'react';
 export declare function getSlots<SlotProps extends SlotPropsRecord = {}>(state: ComponentState<any>, slotNames?: string[]): {
-    readonly slots: { [K in keyof SlotProps]: React.ElementType<SlotProps[K]>; } & {
+    readonly slots: { [K in keyof SlotProps]-?: React.ElementType<SlotProps[K]>; } & {
         readonly root: React.ElementType<any>;
     };
-    readonly slotProps: { [Key in keyof SlotProps]: UnionToIntersection<SlotProps[Key]>; } & {
+    readonly slotProps: { [Key in keyof SlotProps]-?: UnionToIntersection<NonNullable<SlotProps[Key]>>; } & {
         readonly root: any;
@@ -30,0 +30,0 @@ };

lib-amd/compose/getSlots.js

@@ -47,12 +47,8 @@ define(["require", "exports", "tslib", "react", "./nullRender", "../utils/getNativeElementProps", "../utils/omit"], function (require, exports, tslib_1, React, nullRender_1, getNativeElementProps_1, omit_1) {
                 var name_1 = typedSlotNames_1[_i];
-                var _b = typedState[name_1], children = _b.children, rest = tslib_1.__rest(_b, ["children"]);
-                var slot = (((_a = typedState.components) === null || _a === void 0 ? void 0 : _a[name_1]) || 'div');
-                // TODO: rethink null rendering scenario. This fails in some cases, e.g: CompoundButton, AccordionHeader, Input
-                if (typeof slot === 'string' && children === undefined) {
+                if (typedState[name_1] === undefined) {
                     slots[name_1] = nullRender_1.nullRender;
                     continue;
                 }
-                else {
-                    slots[name_1] = slot;
-                }
+                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') {
@@ -59,0 +55,0 @@ var render = children;

lib-amd/compose/resolveShorthand.d.ts

 import { ObjectShorthandProps, ShorthandProps } from './types';
+export interface ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> {
+    required?: Required;
+    defaultProps?: Props;
+}
 /**
@@ -8,2 +12,2 @@ * Resolves ShorthandProps into ObjectShorthandProps, to ensure normalization of the signature
  */
-export declare function resolveShorthand<Props extends Record<string, any>>(value: ShorthandProps<Props>, defaultProps?: Props): ObjectShorthandProps<Props>;
+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>;

lib-amd/compose/resolveShorthand.js

@@ -12,20 +12,18 @@ define(["require", "exports", "tslib", "react"], function (require, exports, tslib_1, react_1) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function resolveShorthand(value, defaultProps) {
-        if (value === null) {
-            return {};
+    function resolveShorthand(value, options) {
+        var _a = options || {}, _b = _a.required, required = _b === void 0 ? false : _b, defaultProps = _a.defaultProps;
+        if (value === null || (value === undefined && !required)) {
+            return undefined;
         }
         var resolvedShorthand = {};
-        if (typeof value === 'string' || typeof value === 'number' || react_1.isValidElement(value)) {
-            resolvedShorthand = { children: value };
+        if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value) || react_1.isValidElement(value)) {
+            resolvedShorthand.children = value;
         }
-        else if (isObjectShorthandProps(value)) {
+        else if (typeof value === 'object') {
             resolvedShorthand = value;
         }
-        return defaultProps ? tslib_1.__assign(tslib_1.__assign({}, defaultProps), resolvedShorthand) : resolvedShorthand;
+        return (defaultProps ? tslib_1.__assign(tslib_1.__assign({}, defaultProps), resolvedShorthand) : resolvedShorthand);
     }
     exports.resolveShorthand = resolveShorthand;
-    function isObjectShorthandProps(value) {
-        return typeof value === 'object';
-    }
 });
 //# sourceMappingURL=resolveShorthand.js.map

lib-commonjs/compose/getSlots.d.ts

@@ -24,6 +24,6 @@ import * as React from 'react';
 export declare function getSlots<SlotProps extends SlotPropsRecord = {}>(state: ComponentState<any>, slotNames?: string[]): {
-    readonly slots: { [K in keyof SlotProps]: React.ElementType<SlotProps[K]>; } & {
+    readonly slots: { [K in keyof SlotProps]-?: React.ElementType<SlotProps[K]>; } & {
         readonly root: React.ElementType<any>;
     };
-    readonly slotProps: { [Key in keyof SlotProps]: UnionToIntersection<SlotProps[Key]>; } & {
+    readonly slotProps: { [Key in keyof SlotProps]-?: UnionToIntersection<NonNullable<SlotProps[Key]>>; } & {
         readonly root: any;
@@ -30,0 +30,0 @@ };

lib-commonjs/compose/getSlots.js

@@ -66,2 +66,7 @@ "use strict";
 
+      if (typedState[name_1] === undefined) {
+        slots[name_1] = nullRender_1.nullRender;
+        continue;
+      }
+
       var _b = typedState[name_1],
@@ -71,11 +76,4 @@ children = _b.children,
 
-      var slot = ((_a = typedState.components) === null || _a === void 0 ? void 0 : _a[name_1]) || 'div'; // TODO: rethink null rendering scenario. This fails in some cases, e.g: CompoundButton, AccordionHeader, Input
+      slots[name_1] = ((_a = typedState.components) === null || _a === void 0 ? void 0 : _a[name_1]) || 'div';
 
-      if (typeof slot === 'string' && children === undefined) {
-        slots[name_1] = nullRender_1.nullRender;
-        continue;
-      } else {
-        slots[name_1] = slot;
-      }
-
       if (typeof children === 'function') {
@@ -82,0 +80,0 @@ var render = children; // TODO: converting to unknown might be harmful

lib-commonjs/compose/resolveShorthand.d.ts

 import { ObjectShorthandProps, ShorthandProps } from './types';
+export interface ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> {
+    required?: Required;
+    defaultProps?: Props;
+}
 /**
@@ -8,2 +12,2 @@ * Resolves ShorthandProps into ObjectShorthandProps, to ensure normalization of the signature
  */
-export declare function resolveShorthand<Props extends Record<string, any>>(value: ShorthandProps<Props>, defaultProps?: Props): ObjectShorthandProps<Props>;
+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>;

lib-commonjs/compose/resolveShorthand.js

@@ -20,5 +20,10 @@ "use strict";
 
-function resolveShorthand(value, defaultProps) {
-  if (value === null) {
-    return {};
+function resolveShorthand(value, options) {
+  var _a = options || {},
+      _b = _a.required,
+      required = _b === void 0 ? false : _b,
+      defaultProps = _a.defaultProps;
+
+  if (value === null || value === undefined && !required) {
+    return undefined;
   }
@@ -28,7 +33,5 @@
 
-  if (typeof value === 'string' || typeof value === 'number' || react_1.isValidElement(value)) {
-    resolvedShorthand = {
-      children: value
-    };
-  } else if (isObjectShorthandProps(value)) {
+  if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value) || react_1.isValidElement(value)) {
+    resolvedShorthand.children = value;
+  } else if (typeof value === 'object') {
     resolvedShorthand = value;
@@ -41,6 +44,2 @@ }
 exports.resolveShorthand = resolveShorthand;
-
-function isObjectShorthandProps(value) {
-  return typeof value === 'object';
-}
 //# sourceMappingURL=resolveShorthand.js.map

lib/compose/getSlots.d.ts

@@ -24,6 +24,6 @@ import * as React from 'react';
 export declare function getSlots<SlotProps extends SlotPropsRecord = {}>(state: ComponentState<any>, slotNames?: string[]): {
-    readonly slots: { [K in keyof SlotProps]: React.ElementType<SlotProps[K]>; } & {
+    readonly slots: { [K in keyof SlotProps]-?: React.ElementType<SlotProps[K]>; } & {
         readonly root: React.ElementType<any>;
     };
-    readonly slotProps: { [Key in keyof SlotProps]: UnionToIntersection<SlotProps[Key]>; } & {
+    readonly slotProps: { [Key in keyof SlotProps]-?: UnionToIntersection<NonNullable<SlotProps[Key]>>; } & {
         readonly root: any;
@@ -30,0 +30,0 @@ };

lib/compose/getSlots.js

@@ -54,2 +54,7 @@ import { __assign, __rest } from "tslib";
 
+      if (typedState[name_1] === undefined) {
+        slots[name_1] = nullRender;
+        continue;
+      }
+
       var _b = typedState[name_1],
@@ -59,11 +64,4 @@ children = _b.children,
 
-      var slot = ((_a = typedState.components) === null || _a === void 0 ? void 0 : _a[name_1]) || 'div'; // TODO: rethink null rendering scenario. This fails in some cases, e.g: CompoundButton, AccordionHeader, Input
+      slots[name_1] = ((_a = typedState.components) === null || _a === void 0 ? void 0 : _a[name_1]) || 'div';
 
-      if (typeof slot === 'string' && children === undefined) {
-        slots[name_1] = nullRender;
-        continue;
-      } else {
-        slots[name_1] = slot;
-      }
-
       if (typeof children === 'function') {
@@ -70,0 +68,0 @@ var render = children; // TODO: converting to unknown might be harmful

lib/compose/resolveShorthand.d.ts

 import { ObjectShorthandProps, ShorthandProps } from './types';
+export interface ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> {
+    required?: Required;
+    defaultProps?: Props;
+}
 /**
@@ -8,2 +12,2 @@ * Resolves ShorthandProps into ObjectShorthandProps, to ensure normalization of the signature
  */
-export declare function resolveShorthand<Props extends Record<string, any>>(value: ShorthandProps<Props>, defaultProps?: Props): ObjectShorthandProps<Props>;
+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>;

lib/compose/resolveShorthand.js

@@ -11,5 +11,10 @@ import { __assign } from "tslib";
 
-export function resolveShorthand(value, defaultProps) {
-  if (value === null) {
-    return {};
+export function resolveShorthand(value, options) {
+  var _a = options || {},
+      _b = _a.required,
+      required = _b === void 0 ? false : _b,
+      defaultProps = _a.defaultProps;
+
+  if (value === null || value === undefined && !required) {
+    return undefined;
   }
@@ -19,7 +24,5 @@
 
-  if (typeof value === 'string' || typeof value === 'number' || /*#__PURE__*/isValidElement(value)) {
-    resolvedShorthand = {
-      children: value
-    };
-  } else if (isObjectShorthandProps(value)) {
+  if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value) || /*#__PURE__*/isValidElement(value)) {
+    resolvedShorthand.children = value;
+  } else if (typeof value === 'object') {
     resolvedShorthand = value;
@@ -30,6 +33,2 @@ }
 }
-
-function isObjectShorthandProps(value) {
-  return typeof value === 'object';
-}
 //# sourceMappingURL=resolveShorthand.js.map

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

1662073

increased by0.41%

Lines of code

10445

increased by0.24%

No dependency changes