backfill fixes

CHANGELOG.md

@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - React]
 
-- Nothing yet!
+- Fix incorrect type error `unique symbol` ([#248](https://github.com/tailwindlabs/headlessui/pull/248), [#240](https://github.com/tailwindlabs/headlessui/issues/240))
 
 ## [Unreleased - Vue]
 

packages/@headlessui-react/src/types.ts

@@ -1,7 +1,9 @@
 import { ReactNode, ReactElement } from 'react'
-// A unique placeholder we can use as some defaults. This is nice because we can use this instead of
+
+// A unique placeholder we can use as a default. 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__')
+// Ideally we use a unique symbol here.
+let __ = '1D45E01E-AF44-47C4-988A-19A94EBAF55C' as const
 export type __ = typeof __
 
 export type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never

packages/@headlessui-vue/package.json

@@ -20,7 +20,7 @@
     "access": "public"
   },
   "scripts": {
-    "playground": "vite serve examples",
+    "playground": "vite --config ./vite.config.js serve examples",
     "playground:build": "NODE_ENV=production vite build examples",
     "prepublishOnly": "npm run build",
     "build": "../../scripts/build.sh",
@@ -29,7 +29,7 @@
     "lint": "../../scripts/lint.sh"
   },
   "peerDependencies": {
-    "vue": "^3.0.0-rc.13"
+    "vue": "^3.0.0"
   },
   "devDependencies": {
     "@popperjs/core": "^2.5.3",
@@ -38,7 +38,7 @@
     "@vue/compiler-sfc": "3.0.1",
     "@vue/test-utils": "^2.0.0-beta.7",
     "vite": "^1.0.0-rc.4",
-    "vue": "^3.0.0-rc.13",
+    "vue": "^3.0.0",
     "vue-router": "^4.0.0-beta.13"
   }
 }

packages/@headlessui-vue/src/components/listbox/listbox.ts

@@ -259,7 +259,7 @@ export let ListboxButton = defineComponent({
         ? [api.labelRef.value.id, this.id].join(' ')
         : undefined,
       disabled: api.disabled,
-      onKeyDown: this.handleKeyDown,
+      onKeydown: this.handleKeyDown,
       onClick: this.handleClick,
     }
 
@@ -336,7 +336,7 @@ export let ListboxOptions = defineComponent({
           : api.options.value[api.activeOptionIndex.value]?.id,
       'aria-labelledby': api.labelRef.value?.id ?? api.buttonRef.value?.id,
       id: this.id,
-      onKeyDown: this.handleKeyDown,
+      onKeydown: this.handleKeyDown,
       role: 'listbox',
       tabIndex: 0,
       ref: 'el',
@@ -508,10 +508,10 @@ export let ListboxOption = defineComponent({
         'aria-selected': selected.value === true ? selected.value : undefined,
         onClick: handleClick,
         onFocus: handleFocus,
-        onPointerMove: handleMove,
-        onMouseMove: handleMove,
-        onPointerLeave: handleLeave,
-        onMouseLeave: handleLeave,
+        onPointermove: handleMove,
+        onMousemove: handleMove,
+        onPointerleave: handleLeave,
+        onMouseleave: handleLeave,
       }
 
       return render({ props: { ...props, ...propsWeControl }, slot, attrs, slots })

packages/@headlessui-vue/src/components/menu/menu.test.tsx

@@ -315,18 +315,7 @@ describe('Rendering', () => {
     })
 
     it('should yell when we render MenuItems using a template `as` prop that contains multiple children', async () => {
-      let state = {
-        resolve(_value: Error | PromiseLike<Error>) {},
-        done(error: unknown) {
-          state.resolve(error as Error)
-          return true
-        },
-        promise: new Promise<Error>(() => {}),
-      }
-
-      state.promise = new Promise<Error>(resolve => {
-        state.resolve = resolve
-      })
+      expect.assertions(1)
 
       renderTemplate({
         template: `
@@ -339,14 +328,15 @@ describe('Rendering', () => {
             </MenuItems>
           </Menu>
         `,
-        errorCaptured: state.done,
+        errorCaptured(err: unknown) {
+          expect((err as Error).message).toMatchInlineSnapshot(
+            `"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
+          )
+          return false
+        },
       })
 
       await click(getMenuButton())
-      let error = await state.promise
-      expect(error.message).toMatchInlineSnapshot(
-        `"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
-      )
     })
 
     it('should be possible to always render the MenuItems if we provide it a `static` prop', () => {
@@ -469,18 +459,7 @@ describe('Rendering', () => {
     })
 
     it('should yell when we render a MenuItem using a template `as` prop that contains multiple children', async () => {
-      let state = {
-        resolve(_value: Error | PromiseLike<Error>) {},
-        done(error: unknown) {
-          state.resolve(error as Error)
-          return true
-        },
-        promise: new Promise<Error>(() => {}),
-      }
-
-      state.promise = new Promise<Error>(resolve => {
-        state.resolve = resolve
-      })
+      expect.assertions(1)
 
       renderTemplate({
         template: `
@@ -496,14 +475,16 @@ describe('Rendering', () => {
             </MenuItems>
           </Menu>
         `,
-        errorCaptured: state.done,
+        errorCaptured(err: unknown) {
+          expect((err as Error).message).toMatchInlineSnapshot(
+            `"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
+          )
+
+          return false
+        },
       })
 
       await click(getMenuButton())
-      let error = await state.promise
-      expect(error.message).toMatchInlineSnapshot(
-        `"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
-      )
     })
   })
 })

packages/@headlessui-vue/src/components/menu/menu.ts

@@ -178,7 +178,7 @@ export let MenuButton = defineComponent({
       'aria-haspopup': true,
       'aria-controls': api.itemsRef.value?.id,
       'aria-expanded': api.menuState.value === MenuStates.Open ? true : undefined,
-      onKeyDown: this.handleKeyDown,
+      onKeydown: this.handleKeyDown,
       onClick: this.handleClick,
     }
 
@@ -257,7 +257,7 @@ export let MenuItems = defineComponent({
           : api.items.value[api.activeItemIndex.value]?.id,
       'aria-labelledby': api.buttonRef.value?.id,
       id: this.id,
-      onKeyDown: this.handleKeyDown,
+      onKeydown: this.handleKeyDown,
       role: 'menu',
       tabIndex: 0,
       ref: 'el',
@@ -428,10 +428,10 @@ export let MenuItem = defineComponent({
         'aria-disabled': disabled === true ? true : undefined,
         onClick: handleClick,
         onFocus: handleFocus,
-        onPointerMove: handleMove,
-        onMouseMove: handleMove,
-        onPointerLeave: handleLeave,
-        onMouseLeave: handleLeave,
+        onPointermove: handleMove,
+        onMousemove: handleMove,
+        onPointerleave: handleLeave,
+        onMouseleave: handleLeave,
       }
 
       return render({ props: { ...props, ...propsWeControl }, slot, attrs, slots })

packages/@headlessui-vue/src/components/switch/switch.ts

@@ -71,8 +71,8 @@ export let Switch = defineComponent({
       'aria-checked': this.$props.modelValue,
       'aria-labelledby': labelledby.value,
       onClick: this.handleClick,
-      onKeyUp: this.handleKeyUp,
-      onKeyPress: this.handleKeyPress,
+      onKeyup: this.handleKeyUp,
+      onKeypress: this.handleKeyPress,
     }
 
     if (this.$props.as === 'button') {

packages/@headlessui-vue/src/test-utils/interactions.test.ts

@@ -3,8 +3,8 @@ import { render } from './vue-testing-library'
 import { type, shift, Keys } from './interactions'
 import { defineComponent, h } from 'vue'
 
-type Events = 'onKeyDown' | 'onKeyUp' | 'onKeyPress' | 'onClick' | 'onBlur' | 'onFocus'
-let events: Events[] = ['onKeyDown', 'onKeyUp', 'onKeyPress', 'onClick', 'onBlur', 'onFocus']
+type Events = 'onKeydown' | 'onKeyup' | 'onKeypress' | 'onClick' | 'onBlur' | 'onFocus'
+let events: Events[] = ['onKeydown', 'onKeyup', 'onKeypress', 'onClick', 'onBlur', 'onFocus']
 
 function renderTemplate(input: string | Partial<Parameters<typeof defineComponent>[0]>) {
   let defaultComponents = {}
@@ -81,16 +81,16 @@ describe('Keyboard', () => {
       ],
 
       // Canceling keydown
-      ['a', ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
-      [Keys.Space, ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
-      [Keys.Enter, ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
-      [Keys.Tab, ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
-      [shift(Keys.Tab), ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
+      ['a', ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
+      [Keys.Space, ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
+      [Keys.Enter, ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
+      [Keys.Tab, ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
+      [shift(Keys.Tab), ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
 
       // Canceling keypress
-      ['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyPress'])],
-      [Keys.Space, ['keydown', 'keypress', 'keyup', 'click'], new Set<Events>(['onKeyPress'])],
-      [Keys.Enter, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyPress'])],
+      ['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeypress'])],
+      [Keys.Space, ['keydown', 'keypress', 'keyup', 'click'], new Set<Events>(['onKeypress'])],
+      [Keys.Enter, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeypress'])],
       [
         Keys.Tab,
         [
@@ -99,7 +99,7 @@ describe('Keyboard', () => {
           event('focus', 'after'),
           event('keyup', 'after'),
         ],
-        new Set<Events>(['onKeyPress']),
+        new Set<Events>(['onKeypress']),
       ],
       [
         shift(Keys.Tab),
@@ -109,13 +109,13 @@ describe('Keyboard', () => {
           event('focus', 'before'),
           event('keyup', 'before'),
         ],
-        new Set<Events>(['onKeyPress']),
+        new Set<Events>(['onKeypress']),
       ],
 
       // Canceling keyup
-      ['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyUp'])],
-      [Keys.Space, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyUp'])],
-      [Keys.Enter, ['keydown', 'keypress', 'click', 'keyup'], new Set<Events>(['onKeyUp'])],
+      ['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyup'])],
+      [Keys.Space, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyup'])],
+      [Keys.Enter, ['keydown', 'keypress', 'click', 'keyup'], new Set<Events>(['onKeyup'])],
       [
         Keys.Tab,
         [
@@ -124,7 +124,7 @@ describe('Keyboard', () => {
           event('focus', 'after'),
           event('keyup', 'after'),
         ],
-        new Set<Events>(['onKeyUp']),
+        new Set<Events>(['onKeyup']),
       ],
       [
         shift(Keys.Tab),
@@ -134,7 +134,7 @@ describe('Keyboard', () => {
           event('focus', 'before'),
           event('keyup', 'before'),
         ],
-        new Set<Events>(['onKeyUp']),
+        new Set<Events>(['onKeyup']),
       ],
 
       // Cancelling blur
@@ -189,7 +189,7 @@ describe('Keyboard', () => {
           Button: defineComponent({
             setup(_props, { slots, attrs }) {
               return () => {
-                return h('button', createProps(attrs.id as string), slots.default())
+                return h('button', createProps(attrs.id as string), slots.default!())
               }
             },
           }),