@fluentui/react-utilities 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.1

package/lib/compose/getSlots.js

@@ -1,6 +1,4 @@
-import { __rest } from "tslib";
 import * as React from 'react';
-import { nullRender } from './nullRender';
 import { omit } from '../utils/omit';
 /**
  * Given the state and an array of slot names, will break out `slots` and `slotProps`
@@ -11,35 +9,28 @@ import { omit } from '../utils/omit';
  * Slots will render as null if they are rendered as primitives with undefined children.
  *
  * The slotProps will always omit the `as` prop within them, and for slots that are string
- * primitives, the props will be filtered according the the slot type. For example, if the
- * slot is rendered `as: 'a'`, the props will be filtered for acceptable anchor props.
+ * primitives, the props will be filtered according to the slot type by the type system.
+ * For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
+ * anchor props. Note that this is only enforced at build time by Typescript -- there is no
+ * runtime code filtering props in this function.
  *
  * @param state - State including slot definitions
- * @param slotNames - Name of which props are slots
  * @returns An object containing the `slots` map and `slotProps` map.
  */
 
-export function getSlots(state, slotNames) {
-  if (slotNames === void 0) {
-    slotNames = ['root'];
-  }
-
-  var slots = {};
-  var slotProps = {};
-
-  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];
+export function getSlots(state) {
+  const slots = {};
+  const slotProps = {};
+  const slotNames = Object.keys(state.components);
 
+  for (const slotName of slotNames) {
+    const [slot, props] = getSlot(state, slotName);
     slots[slotName] = slot;
     slotProps[slotName] = props;
   }
 
   return {
-    slots: slots,
+    slots,
     slotProps: slotProps
   };
 }
@@ -48,25 +39,25 @@ function getSlot(state, slotName) {
   var _a, _b, _c;
 
   if (state[slotName] === undefined) {
-    return [nullRender, undefined];
+    return [null, undefined];
   }
 
-  var _d = state[slotName],
-      children = _d.children,
-      asProp = _d.as,
-      rest = __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];
+  const {
+    children,
+    as: asProp,
+    ...rest
+  } = state[slotName];
+  const 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;
+    const 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];
+  const shouldOmitAsProp = typeof slot === 'string' && ((_c = state[slotName]) === null || _c === void 0 ? void 0 : _c.as);
+  const slotProps = shouldOmitAsProp ? omit(state[slotName], ['as']) : state[slotName];
   return [slot, slotProps];
 }
 //# sourceMappingURL=getSlots.js.map

package/lib/compose/getSlots.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/compose/getSlots.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAUA,SAAS,UAAT,QAA2B,cAA3B;AACA,SAAS,IAAT,QAAqB,eAArB;AAqBA;;;;;;;;;;;;;;;AAeG;;AACH,OAAM,SAAU,QAAV,CACJ,KADI,EAEJ,SAFI,EAE6B;AAAjC,MAAA,SAAA,KAAA,KAAA,CAAA,EAAA;AAAA,IAAA,SAAA,GAAA,CAA0B,MAA1B,CAAA;AAAiC;;AAKjC,MAAM,KAAK,GAAG,EAAd;AACA,MAAM,SAAS,GAAG,EAAlB;;AAEA,OAAuB,IAAA,EAAA,GAAA,CAAA,EAAA,WAAA,GAAA,SAAvB,EAAuB,EAAA,GAAA,WAAA,CAAA,MAAvB,EAAuB,EAAA,EAAvB,EAAkC;AAA7B,QAAM,QAAQ,GAAA,WAAA,CAAA,EAAA,CAAd;;AACG,QAAA,EAAA,GAAgB,OAAO,CAAC,KAAD,EAAQ,QAAR,CAAvB;AAAA,QAAC,IAAI,GAAA,EAAA,CAAA,CAAA,CAAL;AAAA,QAAO,KAAK,GAAA,EAAA,CAAA,CAAA,CAAZ;;AACN,IAAA,KAAK,CAAC,QAAD,CAAL,GAAkB,IAAlB;AACA,IAAA,SAAS,CAAC,QAAD,CAAT,GAAsB,KAAtB;AACD;;AACD,SAAO;AAAE,IAAA,KAAK,EAAA,KAAP;AAAS,IAAA,SAAS,EAAG;AAArB,GAAP;AACD;;AAED,SAAS,OAAT,CACE,KADF,EAEE,QAFF,EAEa;;;AAEX,MAAI,KAAK,CAAC,QAAD,CAAL,KAAoB,SAAxB,EAAmC;AACjC,WAAO,CAAC,UAAD,EAAa,SAAb,CAAP;AACD;;AACD,MAAM,EAAA,GAAoC,KAAK,CAAC,QAAD,CAA/C;AAAA,MAAQ,QAAQ,GAAA,EAAA,CAAA,QAAhB;AAAA,MAAsB,MAAM,GAAA,EAAA,CAAA,EAA5B;AAAA,MAAiC,IAAI,GAAA,MAAA,CAAA,EAAA,EAA/B,CAAA,UAAA,EAAA,IAAA,CAA+B,CAArC;;AAEA,MAAM,IAAI,GAAI,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAG,QAAH,CAAhB,MAAiC,SAAjC,IAA8C,OAAO,KAAK,CAAC,UAAN,CAAiB,QAAjB,CAAP,KAAsC,QAApF,GACV,MAAM,KAAA,CAAA,EAAA,GAAI,KAAK,CAAC,UAAV,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAG,QAAH,CAApB,CAAN,IAA0C,KADhC,GAEV,KAAK,CAAC,UAAN,CAAiB,QAAjB,CAFJ;;AAIA,MAAI,OAAO,QAAP,KAAoB,UAAxB,EAAoC;AAClC,QAAM,MAAM,GAAG,QAAf;AACA,WAAO,CACL,KAAK,CAAC,QADD,EAEJ;AACC,MAAA,QAAQ,EAAE,MAAM,CAAC,IAAD,EAAO,IAAP;AADjB,KAFI,CAAP;AAMD;;AAED,MAAM,gBAAgB,GAAG,OAAO,IAAP,KAAgB,QAAhB,KAAwB,CAAA,EAAA,GAAI,KAAK,CAAC,QAAD,CAAT,MAAmB,IAAnB,IAAmB,EAAA,KAAA,KAAA,CAAnB,GAAmB,KAAA,CAAnB,GAAmB,EAAA,CAAE,EAA7C,CAAzB;AACA,MAAM,SAAS,GAAI,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAD,CAAN,EAAmB,CAAC,IAAD,CAAnB,CAAP,GAAoC,KAAK,CAAC,QAAD,CAA5E;AAEA,SAAO,CAAC,IAAD,EAAO,SAAP,CAAP;AACD","sourceRoot":""}
+{"version":3,"sources":["../../src/compose/getSlots.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,IAAT,QAAqB,eAArB;AA6BA;;;;;;;;;;;;;;;;AAgBG;;AACH,OAAM,SAAU,QAAV,CACJ,KADI,EACoB;AAKxB,QAAM,KAAK,GAAG,EAAd;AACA,QAAM,SAAS,GAAG,EAAlB;AAEA,QAAM,SAAS,GAAgB,MAAM,CAAC,IAAP,CAAY,KAAK,CAAC,UAAlB,CAA/B;;AACA,OAAK,MAAM,QAAX,IAAuB,SAAvB,EAAkC;AAChC,UAAM,CAAC,IAAD,EAAO,KAAP,IAAgB,OAAO,CAAC,KAAD,EAAQ,QAAR,CAA7B;AACA,IAAA,KAAK,CAAC,QAAD,CAAL,GAAkB,IAAlB;AACA,IAAA,SAAS,CAAC,QAAD,CAAT,GAAsB,KAAtB;AACD;;AACD,SAAO;AAAE,IAAA,KAAF;AAAS,IAAA,SAAS,EAAG;AAArB,GAAP;AACD;;AAED,SAAS,OAAT,CACE,KADF,EAEE,QAFF,EAEa;;;AAEX,MAAI,KAAK,CAAC,QAAD,CAAL,KAAoB,SAAxB,EAAmC;AACjC,WAAO,CAAC,IAAD,EAAO,SAAP,CAAP;AACD;;AACD,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,EAAE,EAAE,MAAhB;AAAwB,OAAG;AAA3B,MAAoC,KAAK,CAAC,QAAD,CAA/C;AAEA,QAAM,IAAI,GAAI,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAG,QAAH,CAAhB,MAAiC,SAAjC,IAA8C,OAAO,KAAK,CAAC,UAAN,CAAiB,QAAjB,CAAP,KAAsC,QAApF,GACV,MAAM,KAAI,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAG,QAAH,CAApB,CAAN,IAA0C,KADhC,GAEV,KAAK,CAAC,UAAN,CAAiB,QAAjB,CAFJ;;AAIA,MAAI,OAAO,QAAP,KAAoB,UAAxB,EAAoC;AAClC,UAAM,MAAM,GAAG,QAAf;AACA,WAAO,CACL,KAAK,CAAC,QADD,EAEJ;AACC,MAAA,QAAQ,EAAE,MAAM,CAAC,IAAD,EAAO,IAAP;AADjB,KAFI,CAAP;AAMD;;AAED,QAAM,gBAAgB,GAAG,OAAO,IAAP,KAAgB,QAAhB,KAA4B,CAAA,EAAA,GAAA,KAAK,CAAC,QAAD,CAAL,MAAe,IAAf,IAAe,EAAA,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAe,EAAA,CAAE,EAA7C,CAAzB;AACA,QAAM,SAAS,GAAI,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAD,CAAN,EAAmB,CAAC,IAAD,CAAnB,CAAP,GAAoC,KAAK,CAAC,QAAD,CAA5E;AAEA,SAAO,CAAC,IAAD,EAAO,SAAP,CAAP;AACD","sourceRoot":""}

package/lib/compose/index.d.ts

@@ -1,8 +1,3 @@
 export * from './getSlots';
-export * from './getSlotsCompat';
-export * from './makeMergeProps';
-export * from './makeMergePropsCompat';
-export * from './nullRender';
 export * from './resolveShorthand';
-export * from './resolveShorthandProps';
 export * from './types';

package/lib/compose/index.js

@@ -1,9 +1,4 @@
 export * from './getSlots';
-export * from './getSlotsCompat';
-export * from './makeMergeProps';
-export * from './makeMergePropsCompat';
-export * from './nullRender';
 export * from './resolveShorthand';
-export * from './resolveShorthandProps';
 export * from './types';
 //# sourceMappingURL=index.js.map

package/lib/compose/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/compose/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/compose/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC"}

package/lib/compose/resolveShorthand.d.ts

@@ -1,12 +1,16 @@
-import type { DefaultObjectShorthandProps, ShorthandProps } from './types';
-export declare type ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> = {
+import type { ReplaceNullWithUndefined, SlotShorthandValue, UnknownSlotProps } from './types';
+export declare type ResolveShorthandOptions<Props, Required extends boolean = false> = {
     required?: Required;
     defaultProps?: Props;
 };
+export declare type ResolveShorthandFunction<Props extends UnknownSlotProps = UnknownSlotProps> = {
+    <P extends Props | null>(value: P | SlotShorthandValue | undefined, options?: ResolveShorthandOptions<P, true>): ReplaceNullWithUndefined<P>;
+    <P extends Props | null>(value: P | SlotShorthandValue | undefined, options?: ResolveShorthandOptions<P, boolean>): ReplaceNullWithUndefined<P> | undefined;
+};
 /**
- * Resolves ShorthandProps into ObjectShorthandProps, to ensure normalization of the signature
+ * Resolves shorthands into slot props, to ensure normalization of the signature
  * being passed down to getSlots method
- * @param value - the base ShorthandProps
- * @param options - options to resolve ShorthandProps
+ * @param value - the base shorthand props
+ * @param options - options to resolve shorthand 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;
+export declare const resolveShorthand: ResolveShorthandFunction;

package/lib/compose/resolveShorthand.js

@@ -1,23 +1,22 @@
-import { __assign } from "tslib";
 import { isValidElement } from 'react';
 /**
- * Resolves ShorthandProps into ObjectShorthandProps, to ensure normalization of the signature
+ * Resolves shorthands into slot props, to ensure normalization of the signature
  * being passed down to getSlots method
- * @param value - the base ShorthandProps
- * @param options - options to resolve ShorthandProps
+ * @param value - the base shorthand props
+ * @param options - options to resolve shorthand props
  */
 
-export function resolveShorthand(value, options) {
-  var _a = options || {},
-      _b = _a.required,
-      required = _b === void 0 ? false : _b,
-      defaultProps = _a.defaultProps;
+export const resolveShorthand = (value, options) => {
+  const {
+    required = false,
+    defaultProps
+  } = options || {};
 
   if (value === null || value === undefined && !required) {
     return undefined;
   }
 
-  var resolvedShorthand = {};
+  let resolvedShorthand = {};
 
   if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value) || /*#__PURE__*/isValidElement(value)) {
     resolvedShorthand.children = value;
@@ -25,6 +24,8 @@ export function resolveShorthand(value, options) {
     resolvedShorthand = value;
   }
 
-  return defaultProps ? __assign(__assign({}, defaultProps), resolvedShorthand) : resolvedShorthand;
-}
+  return defaultProps ? { ...defaultProps,
+    ...resolvedShorthand
+  } : resolvedShorthand;
+};
 //# sourceMappingURL=resolveShorthand.js.map

package/lib/compose/resolveShorthand.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/compose/resolveShorthand.ts"],"names":[],"mappings":";AAAA,SAAS,cAAT,QAA+B,OAA/B;AASA;;;;;AAKG;;AACH,OAAM,SAAU,gBAAV,CACJ,KADI,EAEJ,OAFI,EAE8C;AAE5C,MAAA,EAAA,GAAqC,OAAO,IAAI,EAAhD;AAAA,MAAE,EAAA,GAAA,EAAA,CAAA,QAAF;AAAA,MAAE,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAlB;AAAA,MAAoB,YAAY,GAAA,EAAA,CAAA,YAAhC;;AACN,MAAI,KAAK,KAAK,IAAV,IAAmB,KAAK,KAAK,SAAV,IAAuB,CAAC,QAA/C,EAA0D;AACxD,WAAO,SAAP;AACD;;AAED,MAAI,iBAAiB,GAAG,EAAxB;;AAEA,MAAI,OAAO,KAAP,KAAiB,QAAjB,IAA6B,OAAO,KAAP,KAAiB,QAA9C,IAA0D,KAAK,CAAC,OAAN,CAAc,KAAd,CAA1D,iBAAkF,cAAc,CAAC,KAAD,CAApG,EAA6G;AAC3G,IAAA,iBAAiB,CAAC,QAAlB,GAA6B,KAA7B;AACD,GAFD,MAEO,IAAI,OAAO,KAAP,KAAiB,QAArB,EAA+B;AACpC,IAAA,iBAAiB,GAAG,KAApB;AACD;;AAED,SAAQ,YAAY,GAAE,QAAA,CAAA,QAAA,CAAA,EAAA,EAAM,YAAN,CAAA,EAAuB,iBAAvB,CAAF,GAA+C,iBAAnE;AAGD","sourceRoot":""}
+{"version":3,"sources":["../../src/compose/resolveShorthand.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,QAA+B,OAA/B;AAkBA;;;;;AAKG;;AACH,OAAO,MAAM,gBAAgB,GAA6B,CAAC,KAAD,EAAQ,OAAR,KAAmB;AAC3E,QAAM;AAAE,IAAA,QAAQ,GAAG,KAAb;AAAoB,IAAA;AAApB,MAAqC,OAAO,IAAI,EAAtD;;AACA,MAAI,KAAK,KAAK,IAAV,IAAmB,KAAK,KAAK,SAAV,IAAuB,CAAC,QAA/C,EAA0D;AACxD,WAAO,SAAP;AACD;;AAED,MAAI,iBAAiB,GAAG,EAAxB;;AAEA,MAAI,OAAO,KAAP,KAAiB,QAAjB,IAA6B,OAAO,KAAP,KAAiB,QAA9C,IAA0D,KAAK,CAAC,OAAN,CAAc,KAAd,CAA1D,iBAAkF,cAAc,CAAC,KAAD,CAApG,EAA6G;AAC3G,IAAA,iBAAiB,CAAC,QAAlB,GAA6B,KAA7B;AACD,GAFD,MAEO,IAAI,OAAO,KAAP,KAAiB,QAArB,EAA+B;AACpC,IAAA,iBAAiB,GAAG,KAApB;AACD;;AAED,SAAO,YAAY,GAAG,EAAE,GAAG,YAAL;AAAmB,OAAG;AAAtB,GAAH,GAA+C,iBAAlE;AACD,CAfM","sourceRoot":""}

package/lib/compose/types.d.ts

@@ -1,47 +1,83 @@
 import * as React from 'react';
-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 SlotRenderFunction<Props> = (Component: React.ElementType<Props>, props: Omit<Props, 'children' | 'as'>) => React.ReactNode;
 /**
- * Matches any shorthand props type.
+ * Matches any component's Slots type (such as ButtonSlots).
  *
- * This should ONLY be used in type templates as in `extends DefaultObjectShorthandProps`;
+ * This should ONLY be used in type templates as in `extends SlotPropsRecord`;
+ * it shouldn't be used as a component's Slots type.
+ */
+export declare type SlotPropsRecord = Record<string, UnknownSlotProps | SlotShorthandValue | null | undefined>;
+/**
+ * The shorthand value of a slot allows specifying its child
+ */
+export declare type SlotShorthandValue = React.ReactChild | React.ReactNodeArray | React.ReactPortal;
+/**
+ * Matches any slot props type.
+ *
+ * This should ONLY be used in type templates as in `extends UnknownSlotProps`;
  * it shouldn't be used as the type of a slot.
  */
-export declare type DefaultObjectShorthandProps = ObjectShorthandProps<{
-    children?: React.ReactNode;
+export declare type UnknownSlotProps = Pick<React.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {
     as?: keyof JSX.IntrinsicElements;
-}>;
+};
 /**
- * Defines the slot props for a slot that supports a Component type.
- *
- * For intrinsic elements like 'div', use {@link IntrinsicShorthandProps} instead.
+ * Helper type for {@link Slot}. Adds shorthand types that are assignable to the slot's `children`.
  */
-export declare type ObjectShorthandProps<Props extends {
-    children?: React.ReactNode;
-} = {}> = Props & {
-    children?: Props['children'] | ShorthandRenderFunction<Props>;
+declare type WithSlotShorthandValue<Props extends {
+    children?: unknown;
+}> = Props | Extract<SlotShorthandValue, Props['children']>;
+/**
+ * Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`
+ * to be a render function that takes those props.
+ */
+declare type WithSlotRenderFunction<Props extends {
+    children?: unknown;
+}> = Props & {
+    children?: Props['children'] | SlotRenderFunction<Props>;
 };
 /**
- * Define the slot arguments for a slot that supports one or more intrinsic element types, such as 'div'.
- * For slots that support custom components, use {@link ObjectShorthandProps} instead.
+ * HTML element types that are not allowed to have children.
+ *
+ * Reference: https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+ */
+declare type EmptyIntrisicElements = 'area' | 'base' | 'br' | 'col' | 'embed' | 'hr' | 'img' | 'input' | 'link' | 'meta' | 'param' | 'source' | 'track' | 'wbr';
+/**
+ * Helper type for {@link Slot}. Modifies `JSX.IntrinsicElements[Type]`:
+ * * Removes legacy string ref.
+ * * Disallows children for empty tags like 'img'.
+ */
+declare type IntrisicElementProps<Type extends keyof JSX.IntrinsicElements> = React.PropsWithRef<JSX.IntrinsicElements[Type]> & (Type extends EmptyIntrisicElements ? {
+    children?: never;
+} : {});
+/**
+ * The props type and shorthand value for a slot. Type is either a single intrinsic element like `'div'`,
+ * or a component like `typeof Button`.
+ *
+ * If a slot needs to support multiple intrinsic element types, use the `AlternateAs` param (see examples below).
  *
- * The first param is the slot's default type if no `as` prop is specified.
- * The second param is an optional union of alternative types that can be specified for the `as` prop.
+ * By default, slots can be set to `null` to prevent them from being rendered. If a slot must always be rendered,
+ * wrap with `NonNullable` (see examples below).
  *
+ * @example
  * ```
- * IntrinsicShorthandProps<'div'> // Slot is always div
- * IntrinsicShorthandProps<'button', 'a'> // Defaults to button, but allows as="a" with anchor-specific props
- * IntrinsicShorthandProps<'label', 'span' | 'div'>; // Defaults to label, but allows as="span" or as="div"
+ * // Intrinsic element examples:
+ * Slot<'div'> // Slot is always div
+ * Slot<'button', 'a'> // Defaults to button, but allows as="a" with anchor-specific props
+ * Slot<'span', 'div' | 'pre'> // Defaults to span, but allows as="div" or as="pre"
+ * NonNullable<Slot<'div'>> // Slot that will always be rendered (can't be set to null by the user)
+ *
+ * // Component examples:
+ * Slot<typeof Button> // Slot is always a Button, and accepts all of Button's Props
+ * NonNullable<Slot<typeof Label>> // Slot is a Label and will always be rendered (can't be set to null by the user)
  * ```
  */
-export declare type IntrinsicShorthandProps<DefaultAs extends keyof JSX.IntrinsicElements, AlternateAs extends keyof JSX.IntrinsicElements = never> = IsSingleton<DefaultAs> extends false ? 'Error: first parameter to IntrinsicShorthandProps must be a single element type, not a union of types' : ({
-    as?: DefaultAs;
-} & ObjectShorthandProps<React.PropsWithRef<JSX.IntrinsicElements[DefaultAs]>>) | {
+export declare type Slot<Type extends keyof JSX.IntrinsicElements | React.ComponentType | UnknownSlotProps, AlternateAs extends keyof JSX.IntrinsicElements = never> = IsSingleton<Extract<Type, string>> extends true ? WithSlotShorthandValue<Type extends keyof JSX.IntrinsicElements ? {
+    as?: Type;
+} & WithSlotRenderFunction<IntrisicElementProps<Type>> : Type extends React.ComponentType<infer Props> ? WithSlotRenderFunction<Props> : Type> | {
     [As in AlternateAs]: {
         as: As;
-    } & ObjectShorthandProps<React.PropsWithRef<JSX.IntrinsicElements[As]>>;
-}[AlternateAs];
+    } & WithSlotRenderFunction<IntrisicElementProps<As>>;
+}[AlternateAs] | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
 /**
  * Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.
  *
@@ -70,20 +106,35 @@ export declare type AsIntrinsicElement<As extends keyof JSX.IntrinsicElements> =
 export declare type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;
 /**
  * Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by
- * IntrinsicShorthandProps). This allows IntrinsicShorthandProps to be used with React.forwardRef.
+ * IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
  *
  * The conditional "extends unknown" (always true) exploits a quirk in the way TypeScript handles conditional
  * types, to prevent unions from being expanded.
  */
 export declare type PropsWithoutRef<P> = 'ref' extends keyof P ? (P extends unknown ? Omit<P, 'ref'> : P) : P;
-export declare type ComponentProps<Shorthands extends ObjectShorthandPropsRecord, Primary extends keyof Shorthands = 'root'> = Omit<{
-    [Key in keyof Shorthands]?: ShorthandProps<NonNullable<Shorthands[Key]>>;
-}, Primary> & PropsWithoutRef<Shorthands[Primary]>;
-export declare type ComponentState<Shorthands extends ObjectShorthandPropsRecord> = {
-    components?: {
-        [Key in keyof Shorthands]-?: React.ComponentType<NonNullable<Shorthands[Key]> extends ObjectShorthandProps<infer P> ? P : NonNullable<Shorthands[Key]>> | (NonNullable<Shorthands[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
+/**
+ * Removes SlotShorthandValue and null from the slot type, extracting just the slot's Props object.
+ */
+export declare type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null | undefined>;
+/**
+ * Defines the Props type for a component given its slots and the definition of which one is the primary slot,
+ * defaulting to root if one is not provided.
+ */
+export declare type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> = Omit<Slots, Primary & 'root'> & PropsWithoutRef<ExtractSlotProps<Slots[Primary]>>;
+/**
+ * If type T includes `null`, remove it and add `undefined` instead.
+ */
+export declare type ReplaceNullWithUndefined<T> = T extends null ? Exclude<T, null> | undefined : T;
+/**
+ * Defines the State object of a component given its slots.
+ */
+export declare type ComponentState<Slots extends SlotPropsRecord> = {
+    components: {
+        [Key in keyof Slots]-?: React.ComponentType<ExtractSlotProps<Slots[Key]>> | (ExtractSlotProps<Slots[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
     };
-} & Shorthands;
+} & {
+    [Key in keyof Slots]: ReplaceNullWithUndefined<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>;
+};
 /**
  * This is part of a hack to infer the element type from a native element *props* type.
  * The only place the original element is found in a native props type (at least that's workable
@@ -101,45 +152,4 @@ declare type ObscureEventName = 'onLostPointerCaptureCapture';
  * Return type for `React.forwardRef`, including inference of the proper typing for the ref.
  */
 export declare type ForwardRefComponent<Props> = ObscureEventName extends keyof Props ? Required<Props>[ObscureEventName] extends React.PointerEventHandler<infer Element> ? React.ForwardRefExoticComponent<Props & React.RefAttributes<Element>> : never : never;
-export declare type ComponentPropsCompat = {
-    as?: React.ElementType;
-    className?: string;
-    children?: React.ReactNode;
-};
-export declare type ShorthandRenderFunctionCompat<TProps> = (Component: React.ElementType<TProps>, props: TProps) => React.ReactNode;
-export declare type ShorthandPropsCompat<TProps extends ComponentPropsCompat = {}> = React.ReactChild | React.ReactNodeArray | React.ReactPortal | number | null | undefined | ObjectShorthandPropsCompat<TProps>;
-export declare type ObjectShorthandPropsCompat<TProps extends ComponentPropsCompat = {}> = TProps & Omit<ComponentPropsCompat, 'children'> & {
-    children?: TProps['children'] | ShorthandRenderFunctionCompat<TProps>;
-};
-export declare type BaseSlotsCompat = {
-    root: React.ElementType;
-};
-export declare type SlotPropsCompat<TSlots extends BaseSlotsCompat, TProps, TRootProps extends React.HTMLAttributes<HTMLElement>> = {
-    [key in keyof Omit<TSlots, 'root'>]: key extends keyof TProps ? TProps[key] : any;
-} & {
-    root: TRootProps;
-};
-/**
- * Helper type to convert the given props of type ShorthandProps into ObjectShorthandProps
- */
-export declare type ResolvedShorthandPropsCompat<T, K extends keyof T> = Omit<T, K> & {
-    [P in K]: T[P] extends ShorthandPropsCompat<infer U> ? ObjectShorthandPropsCompat<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 RequiredPropsCompat<T, K extends keyof T> = Omit<T, K> & {
-    [P in K]-?: T[P];
-};
-/**
- * Converts a components Props type to a State type:
- * * Ensures the specified ShorthandProps are of type ObjectShorthandProps<T>
- * * Marks the given defaulted props as required (-?)
- *
- * @template Props - The component's Props type
- * @template ShorthandPropNames - The keys of Props that correspond to ShorthandProps
- * @template DefaultedPropNames - The keys of Props that will always have a default value provided
- */
-export declare type ComponentStateCompat<Props, ShorthandPropNames extends keyof Props = never, DefaultedPropNames extends keyof ResolvedShorthandPropsCompat<Props, ShorthandPropNames> = never> = RequiredPropsCompat<ResolvedShorthandPropsCompat<Props, ShorthandPropNames>, DefaultedPropNames>;
 export {};

package/lib/compose/types.js

@@ -1,2 +1,6 @@
-export {};
+export {}; // A definition like this would also work, but typescript is more likely to unnecessarily expand
+// the props type with this version (and it's likely much more expensive to evaluate)
+// export type ForwardRefComponent<Props> = Props extends React.DOMAttributes<infer Element>
+//   ? React.ForwardRefExoticComponent<Props> & React.RefAttributes<Element>
+//   : never;
 //# sourceMappingURL=types.js.map

package/lib/compose/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/compose/types.ts"],"names":[],"mappings":""}
+{"version":3,"sources":["../../src/compose/types.ts"],"names":[],"mappings":"WAqNA;AACA;AACA;AACA;AACA","sourceRoot":""}

package/lib/hooks/index.d.ts

@@ -1,11 +1,11 @@
 export * from './useControllableState';
 export * from './useBoolean';
 export * from './useConst';
-export * from './useControllableValue';
 export * from './useEventCallback';
 export * from './useFirstMount';
 export * from './useId';
 export * from './useIsomorphicLayoutEffect';
+export * from './useMergedEventCallbacks';
 export * from './useMergedRefs';
 export * from './useMount';
 export * from './useOnClickOutside';

package/lib/hooks/index.js

@@ -1,11 +1,11 @@
 export * from './useControllableState';
 export * from './useBoolean';
 export * from './useConst';
-export * from './useControllableValue';
 export * from './useEventCallback';
 export * from './useFirstMount';
 export * from './useId';
 export * from './useIsomorphicLayoutEffect';
+export * from './useMergedEventCallbacks';
 export * from './useMergedRefs';
 export * from './useMount';
 export * from './useOnClickOutside';

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC"}

package/lib/hooks/useBoolean.js

@@ -9,31 +9,20 @@ import { useConst } from './useConst';
  */
 
 export function useBoolean(initialState) {
-  var _a = React.useState(initialState),
-      value = _a[0],
-      setValue = _a[1];
-
-  var setTrue = useConst(function () {
-    return function () {
-      setValue(true);
-    };
+  const [value, setValue] = React.useState(initialState);
+  const setTrue = useConst(() => () => {
+    setValue(true);
   });
-  var setFalse = useConst(function () {
-    return function () {
-      setValue(false);
-    };
+  const setFalse = useConst(() => () => {
+    setValue(false);
   });
-  var toggle = useConst(function () {
-    return function () {
-      setValue(function (currentValue) {
-        return !currentValue;
-      });
-    };
+  const toggle = useConst(() => () => {
+    setValue(currentValue => !currentValue);
   });
   return [value, {
-    setTrue: setTrue,
-    setFalse: setFalse,
-    toggle: toggle
+    setTrue,
+    setFalse,
+    toggle
   }];
 }
 //# sourceMappingURL=useBoolean.js.map

package/lib/hooks/useBoolean.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useBoolean.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;AAYA;;;;;;AAMG;;AACH,OAAM,SAAU,UAAV,CAAqB,YAArB,EAA0C;AACxC,MAAA,EAAA,GAAoB,KAAK,CAAC,QAAN,CAAe,YAAf,CAApB;AAAA,MAAC,KAAK,GAAA,EAAA,CAAA,CAAA,CAAN;AAAA,MAAQ,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAhB;;AAEN,MAAM,OAAO,GAAG,QAAQ,CAAC,YAAA;AAAM,WAAA,YAAA;AAC7B,MAAA,QAAQ,CAAC,IAAD,CAAR;AAD6B,KAAA;AAE9B,GAFuB,CAAxB;AAGA,MAAM,QAAQ,GAAG,QAAQ,CAAC,YAAA;AAAM,WAAA,YAAA;AAC9B,MAAA,QAAQ,CAAC,KAAD,CAAR;AAD8B,KAAA;AAE/B,GAFwB,CAAzB;AAGA,MAAM,MAAM,GAAG,QAAQ,CAAC,YAAA;AAAM,WAAA,YAAA;AAC5B,MAAA,QAAQ,CAAC,UAAA,YAAA,EAAY;AAAI,eAAA,CAAA,YAAA;AAAa,OAA9B,CAAR;AAD4B,KAAA;AAE7B,GAFsB,CAAvB;AAIA,SAAO,CAAC,KAAD,EAAQ;AAAE,IAAA,OAAO,EAAA,OAAT;AAAW,IAAA,QAAQ,EAAA,QAAnB;AAAqB,IAAA,MAAM,EAAA;AAA3B,GAAR,CAAP;AACD","sourceRoot":""}
+{"version":3,"sources":["../../src/hooks/useBoolean.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;AAYA;;;;;;AAMG;;AACH,OAAM,SAAU,UAAV,CAAqB,YAArB,EAA0C;AAC9C,QAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,KAAK,CAAC,QAAN,CAAe,YAAf,CAA1B;AAEA,QAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,MAAK;AAClC,IAAA,QAAQ,CAAC,IAAD,CAAR;AACD,GAFuB,CAAxB;AAGA,QAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,MAAK;AACnC,IAAA,QAAQ,CAAC,KAAD,CAAR;AACD,GAFwB,CAAzB;AAGA,QAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,MAAK;AACjC,IAAA,QAAQ,CAAC,YAAY,IAAI,CAAC,YAAlB,CAAR;AACD,GAFsB,CAAvB;AAIA,SAAO,CAAC,KAAD,EAAQ;AAAE,IAAA,OAAF;AAAW,IAAA,QAAX;AAAqB,IAAA;AAArB,GAAR,CAAP;AACD","sourceRoot":""}

package/lib/hooks/useConst.js

@@ -15,7 +15,7 @@ export function useConst(initialValue) {
   // Use useRef to store the value because it's the least expensive built-in hook that works here
   // (we could also use `const [value] = React.useState(initialValue)` but that's more expensive
   // internally due to reducer handling which we don't need)
-  var ref = React.useRef();
+  const ref = React.useRef();
 
   if (ref.current === undefined) {
     // Box the value in an object so we can tell if it's initialized even if the initializer

package/lib/hooks/useConst.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useConst.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA;;;;;;;;;;AAUG;;AACH,OAAM,SAAU,QAAV,CAAsB,YAAtB,EAAiD;AACrD;AACA;AACA;AACA,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,EAAZ;;AACA,MAAI,GAAG,CAAC,OAAJ,KAAgB,SAApB,EAA+B;AAC7B;AACA;AACA,IAAA,GAAG,CAAC,OAAJ,GAAc;AACZ,MAAA,KAAK,EAAE,OAAO,YAAP,KAAwB,UAAxB,GAAsC,YAAyB,EAA/D,GAAoE;AAD/D,KAAd;AAGD;;AACD,SAAO,GAAG,CAAC,OAAJ,CAAY,KAAnB;AACD","sourceRoot":""}
+{"version":3,"sources":["../../src/hooks/useConst.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA;;;;;;;;;;AAUG;;AACH,OAAM,SAAU,QAAV,CAAsB,YAAtB,EAAiD;AACrD;AACA;AACA;AACA,QAAM,GAAG,GAAG,KAAK,CAAC,MAAN,EAAZ;;AACA,MAAI,GAAG,CAAC,OAAJ,KAAgB,SAApB,EAA+B;AAC7B;AACA;AACA,IAAA,GAAG,CAAC,OAAJ,GAAc;AACZ,MAAA,KAAK,EAAE,OAAO,YAAP,KAAwB,UAAxB,GAAsC,YAAyB,EAA/D,GAAoE;AAD/D,KAAd;AAGD;;AACD,SAAO,GAAG,CAAC,OAAJ,CAAY,KAAnB;AACD","sourceRoot":""}

package/lib/hooks/useControllableState.d.ts

@@ -1,21 +1,31 @@
 import * as React from 'react';
 export declare type UseControllableStateOptions<State> = {
     /**
-     * User provided default state or factory initializer
+     * User-provided default state or initializer, for uncontrolled usage.
      */
     defaultState?: State | (() => State);
     /**
-     * User provided controllable state, undefined state means internal state will be used
+     * User-provided controlled state. `undefined` means internal state will be used.
      */
     state: State | undefined;
     /**
-     * Used to initialize state if all user provided states are undefined
+     * Used as the initial state if `state` and `defaultState` are both `undefined`.
+     * If `undefined` is the correct initial state, pass that here.
      */
     initialState: State;
 };
 /**
- * A useState 'like' hook that allows optional user control
- * Useful for components which allow uncontrolled and controlled behaviour for users
- * @returns - https://reactjs.org/docs/hooks-state.html
+ * A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
+ * such as a checked state or text input string.
+ *
+ * Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
+ * controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
+ *
+ * @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
+ * of the current value and an updater (dispatch) function. The updater function is referentially
+ * stable (won't change during the component's lifecycle). It can take either a new value, or a
+ * function which is passed the previous value and returns the new value. Unlike `setState`, calls
+ * to the updater function will only be respected if the component is uncontrolled.
+ * @see https://reactjs.org/docs/uncontrolled-components.html
  */
 export declare const useControllableState: <State>(options: UseControllableStateOptions<State>) => [State, React.Dispatch<React.SetStateAction<State>>];