@fluentui/react-utilities 0.0.0-nightlyf8be6a7c6520220106.1 → 0.0.0-nightlyff78d1e27a20220217.1

package/CHANGELOG.json

@@ -2,17 +2,92 @@
   "name": "@fluentui/react-utilities",
   "entries": [
     {
-      "date": "Thu, 06 Jan 2022 04:30:11 GMT",
-      "tag": "@fluentui/react-utilities_v0.0.0-nightlyf8be6a7c6520220106.1",
-      "version": "0.0.0-nightlyf8be6a7c6520220106.1",
+      "date": "Thu, 17 Feb 2022 11:41:16 GMT",
+      "tag": "@fluentui/react-utilities_v0.0.0-nightlyff78d1e27a20220217.1",
+      "version": "0.0.0-nightlyff78d1e27a20220217.1",
       "comments": {
         "prerelease": [
           {
             "author": "email not defined",
             "package": "@fluentui/react-utilities",
-            "commit": "9b6d690fccd3a42a9ce2fed55d90f3eeb80edaa8",
+            "commit": "966e16625ca79f990ad8ca408ba47857adc522b3",
             "comment": "Release nightly v9"
           },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-utilities",
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightlyff78d1e27a20220217.1",
+            "commit": "966e16625ca79f990ad8ca408ba47857adc522b3"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 10 Feb 2022 08:50:32 GMT",
+      "tag": "@fluentui/react-utilities_v9.0.0-rc.1",
+      "version": "9.0.0-rc.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95",
+            "comment": "Rename component hooks add the suffix _unstable, as their API has not been finalized yet"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
+            "comment": "getSlots: remove slotNames param, and infer from state.components instead"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "d2eb57808a403b70845a732a62b55aa64d66b2a0",
+            "comment": "add useTriggerElement() hook"
+          },
+          {
+            "author": "bsunderhus@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "c0d4e63ee58e60e2c6674efbacc0783cd520984e",
+            "comment": "Removes nullRender from react-utilities"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "aa6cfd8ac825b5a280206808101de549a91094fc",
+            "comment": "update applyTriggerPropsToChildren() to return React.ReactElement or null"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "53b01d71e335715fda91b33e3d7bbd9d471d5ed3",
+            "comment": "Refactor component Slot typings"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "0bc161458eae5ae8d387172430496ce9829b1bb1",
+            "comment": "Adding ComponentSlotProps to allow ref to be passed in composite components."
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "e0b8e1fa6980077e7b311fd1c72c28d3e4305db0",
+            "comment": "Renaming most *Shorthand* composition types to *SlotProps* so they better reflect what the types do."
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "c00913d50e2dd15bbfbb0757cefe43b192ff1d7f",
+            "comment": "Bump Fluent UI packages to 9.0.0-rc"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "f30e7585a8d2abd9db06c4076f39a779008b0eca",
+            "comment": "Update trigger utilities to handle nested triggers"
+          },
           {
             "author": "elcraig@microsoft.com",
             "package": "@fluentui/react-utilities",
@@ -22,8 +97,8 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-utilities",
-            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightlyf8be6a7c6520220106.1",
-            "commit": "9b6d690fccd3a42a9ce2fed55d90f3eeb80edaa8"
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.0-rc.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
           }
         ],
         "none": [
@@ -33,6 +108,18 @@
             "commit": "3360b45ec159250b1346c91afad7dce138e6bc20",
             "comment": "Update API file to version generated by typescript 4.3"
           },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
+            "comment": "remove inline-style-expand-shorthand from tsconfigs"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
+            "comment": "chore: use storybook runner for all vNext packages"
+          },
           {
             "author": "seanmonahan@microsoft.com",
             "package": "@fluentui/react-utilities",

package/CHANGELOG.md

@@ -1,19 +1,38 @@
 # Change Log - @fluentui/react-utilities
 
-This log was last generated on Thu, 06 Jan 2022 04:30:11 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Feb 2022 11:41:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightlyf8be6a7c6520220106.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightlyf8be6a7c6520220106.1)
+## [0.0.0-nightlyff78d1e27a20220217.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightlyff78d1e27a20220217.1)
 
-Thu, 06 Jan 2022 04:30:11 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.4..@fluentui/react-utilities_v0.0.0-nightlyf8be6a7c6520220106.1)
+Thu, 17 Feb 2022 11:41:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-rc.1..@fluentui/react-utilities_v0.0.0-nightlyff78d1e27a20220217.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/9b6d690fccd3a42a9ce2fed55d90f3eeb80edaa8) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/966e16625ca79f990ad8ca408ba47857adc522b3) by email not defined)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightlyff78d1e27a20220217.1 ([commit](https://github.com/microsoft/fluentui/commit/966e16625ca79f990ad8ca408ba47857adc522b3) by beachball)
+
+## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-rc.1)
+
+Thu, 10 Feb 2022 08:50:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.4..@fluentui/react-utilities_v9.0.0-rc.1)
+
+### Changes
+
+- Rename component hooks add the suffix _unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com)
+- getSlots: remove slotNames param, and infer from state.components instead ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
+- add useTriggerElement() hook ([PR #21225](https://github.com/microsoft/fluentui/pull/21225) by olfedias@microsoft.com)
+- Removes nullRender from react-utilities ([PR #21576](https://github.com/microsoft/fluentui/pull/21576) by bsunderhus@microsoft.com)
+- update applyTriggerPropsToChildren() to return React.ReactElement or null ([PR #21609](https://github.com/microsoft/fluentui/pull/21609) by olfedias@microsoft.com)
+- Refactor component Slot typings ([PR #21518](https://github.com/microsoft/fluentui/pull/21518) by behowell@microsoft.com)
+- Adding ComponentSlotProps to allow ref to be passed in composite components. ([PR #20890](https://github.com/microsoft/fluentui/pull/20890) by Humberto.Morimoto@microsoft.com)
+- Renaming most *Shorthand* composition types to *SlotProps* so they better reflect what the types do. ([PR #20891](https://github.com/microsoft/fluentui/pull/20891) by Humberto.Morimoto@microsoft.com)
+- Bump Fluent UI packages to 9.0.0-rc ([PR #21623](https://github.com/microsoft/fluentui/pull/21623) by lingfangao@hotmail.com)
+- Update trigger utilities to handle nested triggers ([PR #21495](https://github.com/microsoft/fluentui/pull/21495) by behowell@microsoft.com)
 - [breaking] Remove useControllableValue hook (use useControllableState instead) ([PR #20865](https://github.com/microsoft/fluentui/pull/20865) by elcraig@microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightlyf8be6a7c6520220106.1 ([commit](https://github.com/microsoft/fluentui/commit/9b6d690fccd3a42a9ce2fed55d90f3eeb80edaa8) by beachball)
+- Bump @fluentui/keyboard-keys to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
 
 ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-beta.4)
 

package/dist/react-utilities.d.ts

@@ -11,7 +11,7 @@ export declare const anchorProperties: Record<string, number>;
 /**
  * Apply the trigger props to the children, either by calling the render function, or cloning with the new props.
  */
-export declare const applyTriggerPropsToChildren: <TTriggerProps>(children: React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>> | ((props: TTriggerProps) => React_2.ReactNode) | null | undefined, triggerProps: TTriggerProps) => React_2.ReactNode;
+export declare const applyTriggerPropsToChildren: <TTriggerProps>(children: React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>> | ((props: TTriggerProps) => React_2.ReactElement | null) | null | undefined, triggerProps: TTriggerProps) => React_2.ReactElement | null;
 
 /**
  * Helper type for inferring the type of the as prop from a Props type.
@@ -71,25 +71,22 @@ export declare const colGroupProperties: Record<string, number>;
 
 export declare const colProperties: Record<string, number>;
 
-export declare type ComponentProps<Shorthands extends ObjectShorthandPropsRecord, Primary extends keyof Shorthands = 'root'> = Omit<{
-    [Key in keyof Shorthands]?: ShorthandProps<NonNullable<Shorthands[Key]>>;
-}, Primary & 'root'> & PropsWithoutRef<Shorthands[Primary]>;
-
-export declare type ComponentState<Shorthands extends ObjectShorthandPropsRecord> = {
-    components?: {
-        [Key in keyof Shorthands]-?: React_2.ComponentType<NonNullable<Shorthands[Key]> extends ObjectShorthandProps<infer P> ? P : NonNullable<Shorthands[Key]>> | (NonNullable<Shorthands[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
-    };
-} & Shorthands;
+/**
+ * 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]>>;
 
 /**
- * Matches any shorthand props type.
- *
- * This should ONLY be used in type templates as in `extends DefaultObjectShorthandProps`;
- * it shouldn't be used as the type of a slot.
+ * Defines the State object of a component given its slots.
  */
-export declare type DefaultObjectShorthandProps = ObjectShorthandProps<Pick<React_2.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {
-    as?: keyof JSX.IntrinsicElements;
-}>;
+export declare type ComponentState<Slots extends SlotPropsRecord> = {
+    components: {
+        [Key in keyof Slots]-?: React_2.ComponentType<ExtractSlotProps<Slots[Key]>> | (ExtractSlotProps<Slots[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
+    };
+} & {
+    [Key in keyof Slots]: ReplaceNullWithUndefined<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>;
+};
 
 /**
  * Default context value to use in case there is no SSRProvider. This is fine for client-only apps.
@@ -105,6 +102,35 @@ export declare const defaultSSRContextValue: SSRContextValue;
  */
 export declare const divProperties: Record<string, number>;
 
+/**
+ * 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';
+
+/**
+ * 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>;
+
+/**
+ * Allows a component to be tagged as a FluentUI trigger component.
+ *
+ * Triggers are special-case components: they attach event listeners and other props on their child,
+ * and use them to trigger another component to show. Examples include `MenuTrigger` and `Tooltip`.
+ *
+ * A component can be tagged as a trigger as follows:
+ * ```ts
+ * const MyComponent: React.FC<MyComponentProps> & FluentTriggerComponent = ...;
+ *
+ * MyComponent.isFluentTriggerComponent = true; // MUST also set this to true
+ * ```
+ */
+export declare type FluentTriggerComponent = {
+    isFluentTriggerComponent?: boolean;
+};
+
 /**
  * An array of FORM tag properties and events.
  *
@@ -150,19 +176,19 @@ export declare function getNativeProps<T extends Record<string, any>>(props: Rec
  *
  * @returns An object containing the native props for the `root` and primary slots.
  */
-export declare const getPartitionedNativeProps: ({ primarySlotTagName, props, excludedPropNames, }: {
+export declare const getPartitionedNativeProps: <Props extends Pick<React_2.HTMLAttributes<HTMLElement>, "style" | "className">, ExcludedPropKeys extends Extract<keyof Props, string> = never>({ primarySlotTagName, props, excludedPropNames, }: {
     /** The primary slot's element type (e.g. 'div') */
     primarySlotTagName: keyof JSX.IntrinsicElements;
     /** The component's props object */
-    props: Pick<React_2.HTMLAttributes<HTMLElement>, 'style' | 'className'>;
+    props: Props;
     /** List of native props to exclude from the returned value */
-    excludedPropNames?: string[] | undefined;
+    excludedPropNames?: ExcludedPropKeys[] | undefined;
 }) => {
     root: {
         style: React_2.CSSProperties | undefined;
         className: string | undefined;
     };
-    primary: React_2.HTMLAttributes<any>;
+    primary: Omit<Props, ExcludedPropKeys>;
 };
 
 /**
@@ -185,12 +211,33 @@ export declare const getRTLSafeKey: (key: string, dir: 'ltr' | 'rtl') => string;
  * 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 declare function getSlots<R extends ObjectShorthandPropsRecord>(state: ComponentState<R>, slotNames?: (keyof R)[]): {
+export declare function getSlots<R extends SlotPropsRecord>(state: ComponentState<R>): {
     slots: Slots<R>;
-    slotProps: SlotProps<R>;
+    slotProps: ObjectSlotProps<R>;
+};
+
+/**
+ * Gets the trigger element of a FluentTriggerComponent (such as Tooltip or MenuTrigger).
+ *
+ * In the case where the immediate child is itself a FluentTriggerComponent and/or React Fragment,
+ * it returns the first descendant that is _not_ a FluentTriggerComponent or Fragment.
+ * This allows multiple triggers to be stacked, and still apply their props to the actual trigger element.
+ *
+ * For example, the following returns `<div id="child" />`:
+ * ```jsx
+ * getTriggerChild(
+ *   <Tooltip>
+ *     <MenuTrigger>
+ *       <div id="child" />
+ *     </MenuTrigger>
+ *   </Tooltip>
+ * );
+ * ```
+ */
+export declare const getTriggerChild: (children: React_2.ReactNode) => React_2.ReactElement & {
+    ref?: React_2.Ref<unknown>;
 };
 
 /**
@@ -227,25 +274,19 @@ export declare const imgProperties: Record<string, number>;
 export declare const inputProperties: Record<string, number>;
 
 /**
- * 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.
- *
- * 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.
- *
- * ```
- * 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"
- * ```
+ * Helper type for {@link Slot}. Modifies `JSX.IntrinsicElements[Type]`:
+ * * Removes legacy string ref.
+ * * Disallows children for empty tags like 'img'.
  */
-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_2.PropsWithRef<JSX.IntrinsicElements[DefaultAs]>>) | {
-    [As in AlternateAs]: {
-        as: As;
-    } & ObjectShorthandProps<React_2.PropsWithRef<JSX.IntrinsicElements[As]>>;
-}[AlternateAs];
+declare type IntrisicElementProps<Type extends keyof JSX.IntrinsicElements> = React_2.PropsWithRef<JSX.IntrinsicElements[Type]> & (Type extends EmptyIntrisicElements ? {
+    children?: never;
+} : {});
+
+/**
+ * Checks if a given element is a FluentUI trigger (e.g. `MenuTrigger` or `Tooltip`).
+ * See the {@link FluentTriggerComponent} type for more info.
+ */
+export declare const isFluentTrigger: (element: React_2.ReactElement) => boolean | undefined;
 
 /**
  * Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.
@@ -273,24 +314,10 @@ export declare const labelProperties: Record<string, number>;
  */
 export declare const liProperties: Record<string, number>;
 
-/**
- * Simple constant function for returning null, used to render empty templates in JSX.
- */
-export declare const nullRender: () => null;
-
-/**
- * Defines the slot props for a slot that supports a Component type.
- *
- * For intrinsic elements like 'div', use {@link IntrinsicShorthandProps} instead.
- */
-export declare type ObjectShorthandProps<Props extends {
-    children?: React_2.ReactNode;
-} = {}> = Props & {
-    children?: Props['children'] | ShorthandRenderFunction<Props>;
+declare type ObjectSlotProps<S extends SlotPropsRecord> = {
+    [K in keyof S]-?: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As> ? UnionToIntersection<JSX.IntrinsicElements[As]> : ExtractSlotProps<S[K]> extends React_2.ComponentType<infer P> ? P : never;
 };
 
-export declare type ObjectShorthandPropsRecord = Record<string, DefaultObjectShorthandProps | undefined>;
-
 /**
  * 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
@@ -327,16 +354,11 @@ export declare const olProperties: Record<string, number>;
  */
 export declare function omit<TObj extends Record<string, any>, Exclusions extends (keyof TObj)[]>(obj: TObj, exclusions: Exclusions): Omit<TObj, Exclusions[number]>;
 
-/**
- * Similar to React.Children.only, but drills into fragments rather than treating them as a single child
- */
-export declare const onlyChild: <P>(child: boolean | React_2.ReactText | React_2.ReactFragment | React_2.ReactPortal | React_2.ReactElement<P, string | React_2.JSXElementConstructor<any>> | null | undefined) => React_2.ReactElement<P, string | React_2.JSXElementConstructor<any>>;
-
 export declare const optionProperties: Record<string, number>;
 
 /**
  * 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.
@@ -349,6 +371,11 @@ export declare type PropsWithoutRef<P> = 'ref' extends keyof P ? (P extends unkn
  */
 export declare type RefObjectFunction<T> = React_2.RefObject<T> & ((value: T) => void);
 
+/**
+ * If type T includes `null`, remove it and add `undefined` instead.
+ */
+export declare type ReplaceNullWithUndefined<T> = T extends null ? Exclude<T, null> | undefined : T;
+
 /**
  * Resets generated IDs, should be used only in tests.
  *
@@ -357,14 +384,19 @@ export declare type RefObjectFunction<T> = React_2.RefObject<T> & ((value: T) =>
 export declare function resetIdsForTests(): void;
 
 /**
- * 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;
 
-export declare type ResolveShorthandOptions<Props extends Record<string, any>, Required extends boolean = false> = {
+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;
+};
+
+export declare type ResolveShorthandOptions<Props, Required extends boolean = false> = {
     required?: Required;
     defaultProps?: Props;
 };
@@ -376,10 +408,6 @@ export declare type ResolveShorthandOptions<Props extends Record<string, any>, R
  */
 export declare const selectProperties: Record<string, number>;
 
-export declare type ShorthandProps<Props extends DefaultObjectShorthandProps> = React_2.ReactChild | React_2.ReactNodeArray | React_2.ReactPortal | number | null | undefined | Props;
-
-export declare type ShorthandRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'children' | 'as'>) => React_2.ReactNode;
-
 /**
  * Checks if the keyboard event should preventDefault() for Enter and Spacebar keys
  *
@@ -387,14 +415,55 @@ export declare type ShorthandRenderFunction<Props> = (Component: React_2.Element
  */
 export declare function shouldPreventDefaultOnKeyDown(e: KeyboardEvent | React_2.KeyboardEvent): boolean;
 
-declare type SlotProps<S extends ObjectShorthandPropsRecord> = {
-    [K in keyof S]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? UnionToIntersection<JSX.IntrinsicElements[As]> : NonNullable<S[K]> extends ObjectShorthandProps<infer P> ? P : 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).
+ *
+ * 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
+ * ```
+ * // 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 Slot<Type extends keyof JSX.IntrinsicElements | React_2.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_2.ComponentType<infer Props> ? WithSlotRenderFunction<Props> : Type> | {
+    [As in AlternateAs]: {
+        as: As;
+    } & WithSlotRenderFunction<IntrisicElementProps<As>>;
+}[AlternateAs] | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
+
+/**
+ * Matches any component's Slots type (such as ButtonSlots).
+ *
+ * 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>;
 
-export declare type Slots<S extends ObjectShorthandPropsRecord> = {
-    [K in keyof S]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? As : S[K] extends ObjectShorthandProps<infer P> ? React_2.ElementType<NonNullable<P>> : React_2.ElementType<NonNullable<S[K]>>;
+export declare type SlotRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'children' | 'as'>) => React_2.ReactNode;
+
+export declare type Slots<S extends SlotPropsRecord> = {
+    [K in keyof S]: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As> ? As : ExtractSlotProps<S[K]> extends React_2.ComponentType<infer P> ? React_2.ElementType<NonNullable<P>> : React_2.ElementType<ExtractSlotProps<S[K]>>;
 };
 
+/**
+ * The shorthand value of a slot allows specifying its child
+ */
+export declare type SlotShorthandValue = React_2.ReactChild | React_2.ReactNodeArray | React_2.ReactPortal;
+
 export declare const SSRContext: React_2.Context<SSRContextValue>;
 
 /**
@@ -455,6 +524,16 @@ export declare const trProperties: Record<string, number>;
  */
 export declare type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;
 
+/**
+ * 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 UnknownSlotProps = Pick<React_2.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {
+    as?: keyof JSX.IntrinsicElements;
+};
+
 /**
  * Hook to store a value and generate callbacks for setting the value to true or false.
  * The identity of the callbacks will always stay the same.
@@ -577,6 +656,25 @@ export declare const useIsomorphicLayoutEffect: typeof React_2.useEffect;
  */
 export declare function useIsSSR(): boolean;
 
+/**
+ * Combine two event callbacks into a single callback function that calls each one in order.
+ *
+ * This is useful to add an event listener to an existing element without overwriting the current listener, if any.
+ *
+ * For example:
+ * ```ts
+ * state.slot.onChange = useMergedCallbacks(state.slot.onChange, ev => {
+ *   // Handle onChange
+ * });
+ * ```
+ *
+ * @param callback1 - The first callback to be called
+ * @param callback2 - The second callback to be called
+ *
+ * @returns An event callback that calls the callbacks in order, and is stable between renders
+ */
+export declare function useMergedEventCallbacks<Args extends unknown[]>(callback1: ((...args: Args) => void) | undefined, callback2: ((...args: Args) => void) | undefined): (...args: Args) => void;
+
 /**
  * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that
  * updates all provided refs
@@ -657,4 +755,21 @@ export declare const useUnmount: (callback: () => void) => void;
  */
 export declare const videoProperties: Record<string, number>;
 
+/**
+ * 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>;
+};
+
+/**
+ * Helper type for {@link Slot}. Adds shorthand types that are assignable to the slot's `children`.
+ */
+declare type WithSlotShorthandValue<Props extends {
+    children?: unknown;
+}> = Props | Extract<SlotShorthandValue, Props['children']>;
+
 export { }

package/lib/compose/getSlots.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { AsIntrinsicElement, ComponentState, ObjectShorthandPropsRecord, ObjectShorthandProps, UnionToIntersection } from './types';
-export declare type Slots<S extends ObjectShorthandPropsRecord> = {
-    [K in keyof S]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? As : S[K] extends ObjectShorthandProps<infer P> ? React.ElementType<NonNullable<P>> : React.ElementType<NonNullable<S[K]>>;
+import type { AsIntrinsicElement, ComponentState, ExtractSlotProps, SlotPropsRecord, UnionToIntersection } from './types';
+export declare type Slots<S extends SlotPropsRecord> = {
+    [K in keyof S]: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As> ? As : ExtractSlotProps<S[K]> extends React.ComponentType<infer P> ? React.ElementType<NonNullable<P>> : React.ElementType<ExtractSlotProps<S[K]>>;
 };
-declare type SlotProps<S extends ObjectShorthandPropsRecord> = {
-    [K in keyof S]-?: NonNullable<S[K]> extends AsIntrinsicElement<infer As> ? UnionToIntersection<JSX.IntrinsicElements[As]> : NonNullable<S[K]> extends ObjectShorthandProps<infer P> ? P : never;
+declare type ObjectSlotProps<S extends SlotPropsRecord> = {
+    [K in keyof S]-?: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As> ? UnionToIntersection<JSX.IntrinsicElements[As]> : ExtractSlotProps<S[K]> extends React.ComponentType<infer P> ? P : never;
 };
 /**
  * Given the state and an array of slot names, will break out `slots` and `slotProps`
@@ -21,11 +21,10 @@ declare type SlotProps<S extends ObjectShorthandPropsRecord> = {
  * 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 declare function getSlots<R extends ObjectShorthandPropsRecord>(state: ComponentState<R>, slotNames?: (keyof R)[]): {
+export declare function getSlots<R extends SlotPropsRecord>(state: ComponentState<R>): {
     slots: Slots<R>;
-    slotProps: SlotProps<R>;
+    slotProps: ObjectSlotProps<R>;
 };
 export {};

package/lib/compose/getSlots.js

@@ -1,5 +1,4 @@
 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`
@@ -16,13 +15,13 @@ import { omit } from '../utils/omit';
  * 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 = ['root']) {
+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);
@@ -40,7 +39,7 @@ function getSlot(state, slotName) {
   var _a, _b, _c;
 
   if (state[slotName] === undefined) {
-    return [nullRender, undefined];
+    return [null, undefined];
   }
 
   const {