Merge pull request #826 from tailwindlabs/develop

Next release

.github/workflows/release-dev.yml

@@ -0,0 +1,54 @@
+name: Release Dev
+
+on:
+  push:
+    branches: [develop]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Use cached node_modules
+        id: cache
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            nodeModules-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+        env:
+          CI: true
+
+      - name: Test
+        run: npm test
+        env:
+          CI: true
+
+      - name: Resolve version
+        id: vars
+        run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
+
+      - name: "Version based on commit: 0.0.0-dev.${{ steps.vars.outputs.sha_short }}"
+        run: npm version -w packages 0.0.0-dev.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version
+
+      - name: Publish
+        run: npm publish -w packages --tag dev
+        env:
+          CI: true
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/release-next.yml

@@ -0,0 +1,55 @@
+name: Release Dev
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Use cached node_modules
+        id: cache
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            nodeModules-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+        env:
+          CI: true
+
+      - name: Test
+        run: npm test
+        env:
+          CI: true
+
+      - name: Resolve version
+        id: vars
+        run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
+
+      - name: "Version based on commit: 0.0.0-next.${{ steps.vars.outputs.sha_short }}"
+        run: npm version -w packages 0.0.0-next.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version
+
+      - name: Publish
+        run: npm publish -w packages --tag next
+        env:
+          CI: true
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+

CHANGELOG.md

@@ -7,11 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - React]
 
-- Nothing yet!
+### Fixes
+
+- Stop the event from propagating in the `Popover` component ([#798](https://github.com/tailwindlabs/headlessui/pull/798))
+- Allow to click on elements inside a `Dialog.Overlay` ([#816](https://github.com/tailwindlabs/headlessui/pull/816))
+- Ensure interactability with `Popover.Panel` contents when using the `static` prop ([#857](https://github.com/tailwindlabs/headlessui/pull/857))
+- Fix initial transition in `Transition` component ([#882](https://github.com/tailwindlabs/headlessui/pull/882))
 
 ## [Unreleased - Vue]
 
-- Nothing yet!
+### Fixes
+
+- Stop the event from propagating in the `Popover` component ([#798](https://github.com/tailwindlabs/headlessui/pull/798))
+- Allow to click on elements inside a `DialogOverlay` ([#816](https://github.com/tailwindlabs/headlessui/pull/816))
+- Fix SSR crash because of `useWindowEvent` ([#817](https://github.com/tailwindlabs/headlessui/pull/817))
+- Improve tree shaking ([#859](https://github.com/tailwindlabs/headlessui/pull/859))
+- Add `type="button"` to `Tabs` component ([#912](https://github.com/tailwindlabs/headlessui/pull/912))
 
 ## [@headlessui/react@v1.4.1] - 2021-08-30
 

packages/@headlessui-react/src/components/dialog/dialog.test.tsx

@@ -552,6 +552,42 @@ describe('Mouse interactions', () => {
     })
   )
 
+  it(
+    'should not close the Dialog when clicking on contents of the Dialog.Overlay',
+    suppressConsoleLogs(async () => {
+      function Example() {
+        let [isOpen, setIsOpen] = useState(false)
+        return (
+          <>
+            <button id="trigger" onClick={() => setIsOpen(v => !v)}>
+              Trigger
+            </button>
+            <Dialog open={isOpen} onClose={setIsOpen}>
+              <Dialog.Overlay>
+                <button>hi</button>
+              </Dialog.Overlay>
+              Contents
+              <TabSentinel />
+            </Dialog>
+          </>
+        )
+      }
+      render(<Example />)
+
+      // Open dialog
+      await click(document.getElementById('trigger'))
+
+      // Verify it is open
+      assertDialog({ state: DialogState.Visible })
+
+      // Click on an element inside the overlay
+      await click(getByText('hi'))
+
+      // Verify it is still open
+      assertDialog({ state: DialogState.Visible })
+    })
+  )
+
   it(
     'should be possible to close the dialog, and re-focus the button when we click outside on the body element',
     suppressConsoleLogs(async () => {

packages/@headlessui-react/src/components/dialog/dialog.tsx

@@ -355,6 +355,7 @@ let Overlay = forwardRefWithAs(function Overlay<
 
   let handleClick = useCallback(
     (event: ReactMouseEvent) => {
+      if (event.target !== event.currentTarget) return
       if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
       event.preventDefault()
       event.stopPropagation()

packages/@headlessui-react/src/components/popover/popover.test.tsx

@@ -1,5 +1,5 @@
 import React, { createElement, useEffect, useRef } from 'react'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 
 import { Popover } from './popover'
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
@@ -2125,4 +2125,78 @@ describe('Mouse interactions', () => {
       assertActiveElement(getPopoverButton())
     })
   )
+
+  it(
+    'should not close the Popover when clicking on a focusable element inside a static Popover.Panel',
+    suppressConsoleLogs(async () => {
+      let clickFn = jest.fn()
+
+      render(
+        <Popover>
+          <Popover.Button>Open</Popover.Button>
+          <Popover.Panel static>
+            <button onClick={clickFn}>btn</button>
+          </Popover.Panel>
+        </Popover>
+      )
+
+      // Open the popover
+      await click(getPopoverButton())
+
+      // The button should not close the popover
+      await click(getByText('btn'))
+
+      // Verify it is still open
+      assertPopoverButton({ state: PopoverState.Visible })
+
+      // Verify we actually clicked the button
+      expect(clickFn).toHaveBeenCalledTimes(1)
+    })
+  )
+
+  it(
+    'should not close the Popover when clicking on a non-focusable element inside a static Popover.Panel',
+    suppressConsoleLogs(async () => {
+      render(
+        <Popover>
+          <Popover.Button>Open</Popover.Button>
+          <Popover.Panel static>
+            <span>element</span>
+          </Popover.Panel>
+        </Popover>
+      )
+
+      // Open the popover
+      await click(getPopoverButton())
+
+      // The element should not close the popover
+      await click(getByText('element'))
+
+      // Verify it is still open
+      assertPopoverButton({ state: PopoverState.Visible })
+    })
+  )
+
+  it(
+    'should close the Popover when clicking outside of a static Popover.Panel',
+    suppressConsoleLogs(async () => {
+      render(
+        <Popover>
+          <Popover.Button>Open</Popover.Button>
+          <Popover.Panel static>
+            <span>element</span>
+          </Popover.Panel>
+        </Popover>
+      )
+
+      // Open the popover
+      await click(getPopoverButton())
+
+      // The element should close the popover
+      await click(document.body)
+
+      // Verify it is still open
+      assertPopoverButton({ state: PopoverState.InvisibleHidden })
+    })
+  )
 })

packages/@headlessui-react/src/components/popover/popover.tsx

@@ -353,6 +353,8 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
             if (state.popoverState !== PopoverStates.Open) return closeOthers?.(state.buttonId)
             if (!internalButtonRef.current) return
             if (!internalButtonRef.current.contains(document.activeElement)) return
+            event.preventDefault()
+            event.stopPropagation()
             dispatch({ type: ActionTypes.ClosePopover })
             break
 
@@ -603,6 +605,7 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
           if (!internalPanelRef.current) return
           if (!internalPanelRef.current.contains(document.activeElement)) return
           event.preventDefault()
+          event.stopPropagation()
           dispatch({ type: ActionTypes.ClosePopover })
           state.button?.focus()
           break
@@ -616,10 +619,12 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
 
   // Unlink on "unmount" children
   useEffect(() => {
+    if (props.static) return
+
     if (state.popoverState === PopoverStates.Closed && (props.unmount ?? true)) {
       dispatch({ type: ActionTypes.SetPanel, panel: null })
     }
-  }, [state.popoverState, props.unmount, dispatch])
+  }, [state.popoverState, props.unmount, props.static, dispatch])
 
   // Move focus within panel
   useEffect(() => {

packages/@headlessui-react/src/components/transitions/transition.tsx

@@ -36,6 +36,7 @@ function useSplitClasses(classes: string = '') {
 interface TransitionContextValues {
   show: boolean
   appear: boolean
+  initial: boolean
 }
 let TransitionContext = createContext<TransitionContextValues | null>(null)
 TransitionContext.displayName = 'TransitionContext'
@@ -213,10 +214,9 @@ function TransitionChild<TTag extends ElementType = typeof DEFAULT_TRANSITION_CH
   let [state, setState] = useState(TreeStates.Visible)
   let strategy = rest.unmount ? RenderStrategy.Unmount : RenderStrategy.Hidden
 
-  let { show, appear } = useTransitionContext()
+  let { show, appear, initial } = useTransitionContext()
   let { register, unregister } = useParentNesting()
 
-  let initial = useIsInitialRender()
   let id = useId()
 
   let isTransitioning = useRef(false)
@@ -371,7 +371,7 @@ export function Transition<TTag extends ElementType = typeof DEFAULT_TRANSITION_
 
   let initial = useIsInitialRender()
   let transitionBag = useMemo<TransitionContextValues>(
-    () => ({ show: show as boolean, appear: appear || !initial }),
+    () => ({ show: show as boolean, appear: appear || !initial, initial }),
     [show, appear, initial]
   )