correctly handle TypeScript render abstractions

tailwindlabs · Feb 11, 2021 · bb68793 · bb68793
1 parent d557d50
commit bb68793
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -365,7 +365,7 @@ function Label<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
     state.buttonRef,
   ])
 
-  let propsBag = useMemo<OptionsRenderPropArg>(
+  let propsBag = useMemo<LabelRenderPropArg>(
     () => ({ open: state.listboxState === ListboxStates.Open, disabled: state.disabled }),
     [state]
   )

diff --git a/packages/@headlessui-react/src/components/transitions/transition.tsx b/packages/@headlessui-react/src/components/transitions/transition.tsx
@@ -12,7 +12,7 @@ import React, {
   ElementType,
   MutableRefObject,
 } from 'react'
-import { Props, Expand } from '../../types'
+import { Props } from '../../types'
 
 import { useId } from '../../hooks/use-id'
 import { useIsInitialRender } from '../../hooks/use-is-initial-render'
@@ -201,8 +201,10 @@ function TransitionChild<TTag extends ElementType = typeof DEFAULT_TRANSITION_CH
     leave,
     leaveFrom,
     leaveTo,
+
+    // @ts-expect-error
     ...rest
-  } = props as Expand<typeof props>
+  } = props as typeof props
   let container = useRef<HTMLElement | null>(null)
   let [state, setState] = useState(TreeStates.Visible)
   let strategy = rest.unmount ? RenderStrategy.Unmount : RenderStrategy.Hidden
@@ -331,7 +333,8 @@ function TransitionChild<TTag extends ElementType = typeof DEFAULT_TRANSITION_CH
 export function Transition<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(
   props: TransitionChildProps<TTag> & { show: boolean; appear?: boolean }
 ) {
-  let { show, appear = false, unmount, ...passthroughProps } = props as Expand<typeof props>
+  // @ts-expect-error
+  let { show, appear = false, unmount, ...passthroughProps } = props as typeof props
 
   if (![true, false].includes(show)) {
     throw new Error('A <Transition /> is used but it is missing a `show={true | false}` prop.')

diff --git a/packages/@headlessui-react/src/types.ts b/packages/@headlessui-react/src/types.ts
@@ -1,3 +1,4 @@
+import { ReactNode, ReactElement } from 'react'
 // A unique placeholder we can use as some defaults. This is nice because we can use this instead of
 // defaulting to null / never / ... and possibly collide with actual data.
 const __: unique symbol = Symbol('__placeholder__')
@@ -9,11 +10,17 @@ export type PropsOf<TTag = any> = TTag extends React.ElementType
   ? React.ComponentProps<TTag>
   : never
 
-export type Props<TTag, TSlot = {}, TOmitableProps extends keyof any = __> = {
+export type Props<
+  TTag,
+  TSlot = any,
+  TOmitableProps extends keyof any = __
+> = (TOmitableProps extends __
+  ? Omit<PropsOf<TTag>, 'as' | 'children' | 'refName'>
+  : Omit<PropsOf<TTag>, TOmitableProps | 'as' | 'children' | 'refName'>) & {
   as?: TTag
-  children?: React.ReactNode | ((bag: TSlot) => React.ReactElement)
+  children?: ReactNode | ((bag: TSlot) => ReactElement)
   refName?: string
-} & (TOmitableProps extends __ ? PropsOf<TTag> : Omit<PropsOf<TTag>, TOmitableProps>)
+}
 
 type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never }
 export type XOR<T, U> = T | U extends __

diff --git a/packages/@headlessui-react/src/utils/render.ts b/packages/@headlessui-react/src/utils/render.ts
@@ -88,7 +88,7 @@ export function render<TFeature extends Features, TTag extends ElementType, TBag
 }
 
 function _render<TTag extends ElementType, TBag>(
-  props: Expand<Props<TTag, TBag> & { ref?: unknown }>,
+  props: Props<TTag, TBag> & { ref?: unknown },
   bag: TBag,
   tag: ElementType
 ) {