Skip to content

Commit b67729e

Browse files
RobinMalfaitRobinMalfait
authored
Merge pull request #826 from tailwindlabs/develop
Next release
2 parents a472b7b + 39b1646 commit b67729e

File tree

18 files changed

+485
-14
lines changed

18 files changed

+485
-14
lines changed

‎.github/workflows/release-dev.yml‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
name: Release Dev
2+
3+
on:
4+
push:
5+
branches: [develop]
6+
7+
jobs:
8+
build:
9+
runs-on: ubuntu-latest
10+
11+
strategy:
12+
matrix:
13+
node-version: [16]
14+
15+
steps:
16+
- uses: actions/checkout@v2
17+
18+
- name: Use Node.js ${{ matrix.node-version }}
19+
uses: actions/setup-node@v2
20+
with:
21+
node-version: ${{ matrix.node-version }}
22+
registry-url: 'https://registry.npmjs.org'
23+
24+
- name: Use cached node_modules
25+
id: cache
26+
uses: actions/cache@v2
27+
with:
28+
path: '**/node_modules'
29+
key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
30+
restore-keys: |
31+
nodeModules-
32+
33+
- name: Install dependencies
34+
run: yarn install --frozen-lockfile
35+
env:
36+
CI: true
37+
38+
- name: Test
39+
run: npm test
40+
env:
41+
CI: true
42+
43+
- name: Resolve version
44+
id: vars
45+
run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
46+
47+
- name: "Version based on commit: 0.0.0-dev.${{ steps.vars.outputs.sha_short }}"
48+
run: npm version -w packages 0.0.0-dev.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version
49+
50+
- name: Publish
51+
run: npm publish -w packages --tag dev
52+
env:
53+
CI: true
54+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.github/workflows/release-next.yml‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
name: Release Dev
2+
3+
on:
4+
push:
5+
branches: [main]
6+
7+
jobs:
8+
build:
9+
runs-on: ubuntu-latest
10+
11+
strategy:
12+
matrix:
13+
node-version: [16]
14+
15+
steps:
16+
- uses: actions/checkout@v2
17+
18+
- name: Use Node.js ${{ matrix.node-version }}
19+
uses: actions/setup-node@v2
20+
with:
21+
node-version: ${{ matrix.node-version }}
22+
registry-url: 'https://registry.npmjs.org'
23+
24+
- name: Use cached node_modules
25+
id: cache
26+
uses: actions/cache@v2
27+
with:
28+
path: '**/node_modules'
29+
key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
30+
restore-keys: |
31+
nodeModules-
32+
33+
- name: Install dependencies
34+
run: yarn install --frozen-lockfile
35+
env:
36+
CI: true
37+
38+
- name: Test
39+
run: npm test
40+
env:
41+
CI: true
42+
43+
- name: Resolve version
44+
id: vars
45+
run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
46+
47+
- name: "Version based on commit: 0.0.0-next.${{ steps.vars.outputs.sha_short }}"
48+
run: npm version -w packages 0.0.0-next.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version
49+
50+
- name: Publish
51+
run: npm publish -w packages --tag next
52+
env:
53+
CI: true
54+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
55+

‎CHANGELOG.md‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased - React]
99

10-
- Nothing yet!
10+
### Fixes
11+
12+
- Stop the event from propagating in the `Popover` component ([#798](https://github.com/tailwindlabs/headlessui/pull/798))
13+
- Allow to click on elements inside a `Dialog.Overlay` ([#816](https://github.com/tailwindlabs/headlessui/pull/816))
14+
- Ensure interactability with `Popover.Panel` contents when using the `static` prop ([#857](https://github.com/tailwindlabs/headlessui/pull/857))
15+
- Fix initial transition in `Transition` component ([#882](https://github.com/tailwindlabs/headlessui/pull/882))
1116

1217
## [Unreleased - Vue]
1318

14-
- Nothing yet!
19+
### Fixes
20+
21+
- Stop the event from propagating in the `Popover` component ([#798](https://github.com/tailwindlabs/headlessui/pull/798))
22+
- Allow to click on elements inside a `DialogOverlay` ([#816](https://github.com/tailwindlabs/headlessui/pull/816))
23+
- Fix SSR crash because of `useWindowEvent` ([#817](https://github.com/tailwindlabs/headlessui/pull/817))
24+
- Improve tree shaking ([#859](https://github.com/tailwindlabs/headlessui/pull/859))
25+
- Add `type="button"` to `Tabs` component ([#912](https://github.com/tailwindlabs/headlessui/pull/912))
1526

1627
## [@headlessui/react@v1.4.1] - 2021-08-30
1728

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -552,6 +552,42 @@ describe('Mouse interactions', () => {
552552
})
553553
)
554554

555+
it(
556+
'should not close the Dialog when clicking on contents of the Dialog.Overlay',
557+
suppressConsoleLogs(async () => {
558+
function Example() {
559+
let [isOpen, setIsOpen] = useState(false)
560+
return (
561+
<>
562+
<button id="trigger" onClick={() => setIsOpen(v => !v)}>
563+
Trigger
564+
</button>
565+
<Dialog open={isOpen} onClose={setIsOpen}>
566+
<Dialog.Overlay>
567+
<button>hi</button>
568+
</Dialog.Overlay>
569+
Contents
570+
<TabSentinel />
571+
</Dialog>
572+
</>
573+
)
574+
}
575+
render(<Example />)
576+
577+
// Open dialog
578+
await click(document.getElementById('trigger'))
579+
580+
// Verify it is open
581+
assertDialog({ state: DialogState.Visible })
582+
583+
// Click on an element inside the overlay
584+
await click(getByText('hi'))
585+
586+
// Verify it is still open
587+
assertDialog({ state: DialogState.Visible })
588+
})
589+
)
590+
555591
it(
556592
'should be possible to close the dialog, and re-focus the button when we click outside on the body element',
557593
suppressConsoleLogs(async () => {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,7 @@ let Overlay = forwardRefWithAs(function Overlay<
355355

356356
let handleClick = useCallback(
357357
(event: ReactMouseEvent) => {
358+
if (event.target !== event.currentTarget) return
358359
if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
359360
event.preventDefault()
360361
event.stopPropagation()

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

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { createElement, useEffect, useRef } from 'react'
2-
import { render } from '@testing-library/react'
2+
import { render, screen } from '@testing-library/react'
33

44
import { Popover } from './popover'
55
import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
@@ -2125,4 +2125,78 @@ describe('Mouse interactions', () => {
21252125
assertActiveElement(getPopoverButton())
21262126
})
21272127
)
2128+
2129+
it(
2130+
'should not close the Popover when clicking on a focusable element inside a static Popover.Panel',
2131+
suppressConsoleLogs(async () => {
2132+
let clickFn = jest.fn()
2133+
2134+
render(
2135+
<Popover>
2136+
<Popover.Button>Open</Popover.Button>
2137+
<Popover.Panel static>
2138+
<button onClick={clickFn}>btn</button>
2139+
</Popover.Panel>
2140+
</Popover>
2141+
)
2142+
2143+
// Open the popover
2144+
await click(getPopoverButton())
2145+
2146+
// The button should not close the popover
2147+
await click(getByText('btn'))
2148+
2149+
// Verify it is still open
2150+
assertPopoverButton({ state: PopoverState.Visible })
2151+
2152+
// Verify we actually clicked the button
2153+
expect(clickFn).toHaveBeenCalledTimes(1)
2154+
})
2155+
)
2156+
2157+
it(
2158+
'should not close the Popover when clicking on a non-focusable element inside a static Popover.Panel',
2159+
suppressConsoleLogs(async () => {
2160+
render(
2161+
<Popover>
2162+
<Popover.Button>Open</Popover.Button>
2163+
<Popover.Panel static>
2164+
<span>element</span>
2165+
</Popover.Panel>
2166+
</Popover>
2167+
)
2168+
2169+
// Open the popover
2170+
await click(getPopoverButton())
2171+
2172+
// The element should not close the popover
2173+
await click(getByText('element'))
2174+
2175+
// Verify it is still open
2176+
assertPopoverButton({ state: PopoverState.Visible })
2177+
})
2178+
)
2179+
2180+
it(
2181+
'should close the Popover when clicking outside of a static Popover.Panel',
2182+
suppressConsoleLogs(async () => {
2183+
render(
2184+
<Popover>
2185+
<Popover.Button>Open</Popover.Button>
2186+
<Popover.Panel static>
2187+
<span>element</span>
2188+
</Popover.Panel>
2189+
</Popover>
2190+
)
2191+
2192+
// Open the popover
2193+
await click(getPopoverButton())
2194+
2195+
// The element should close the popover
2196+
await click(document.body)
2197+
2198+
// Verify it is still open
2199+
assertPopoverButton({ state: PopoverState.InvisibleHidden })
2200+
})
2201+
)
21282202
})

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,8 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
353353
if (state.popoverState !== PopoverStates.Open) return closeOthers?.(state.buttonId)
354354
if (!internalButtonRef.current) return
355355
if (!internalButtonRef.current.contains(document.activeElement)) return
356+
event.preventDefault()
357+
event.stopPropagation()
356358
dispatch({ type: ActionTypes.ClosePopover })
357359
break
358360

@@ -603,6 +605,7 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
603605
if (!internalPanelRef.current) return
604606
if (!internalPanelRef.current.contains(document.activeElement)) return
605607
event.preventDefault()
608+
event.stopPropagation()
606609
dispatch({ type: ActionTypes.ClosePopover })
607610
state.button?.focus()
608611
break
@@ -616,10 +619,12 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
616619

617620
// Unlink on "unmount" children
618621
useEffect(() => {
622+
if (props.static) return
623+
619624
if (state.popoverState === PopoverStates.Closed && (props.unmount ?? true)) {
620625
dispatch({ type: ActionTypes.SetPanel, panel: null })
621626
}
622-
}, [state.popoverState, props.unmount, dispatch])
627+
}, [state.popoverState, props.unmount, props.static, dispatch])
623628

624629
// Move focus within panel
625630
useEffect(() => {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ function useSplitClasses(classes: string = '') {
3636
interface TransitionContextValues {
3737
show: boolean
3838
appear: boolean
39+
initial: boolean
3940
}
4041
let TransitionContext = createContext<TransitionContextValues | null>(null)
4142
TransitionContext.displayName = 'TransitionContext'
@@ -213,10 +214,9 @@ function TransitionChild<TTag extends ElementType = typeof DEFAULT_TRANSITION_CH
213214
let [state, setState] = useState(TreeStates.Visible)
214215
let strategy = rest.unmount ? RenderStrategy.Unmount : RenderStrategy.Hidden
215216

216-
let { show, appear } = useTransitionContext()
217+
let { show, appear, initial } = useTransitionContext()
217218
let { register, unregister } = useParentNesting()
218219

219-
let initial = useIsInitialRender()
220220
let id = useId()
221221

222222
let isTransitioning = useRef(false)
@@ -371,7 +371,7 @@ export function Transition<TTag extends ElementType = typeof DEFAULT_TRANSITION_
371371

372372
let initial = useIsInitialRender()
373373
let transitionBag = useMemo<TransitionContextValues>(
374-
() => ({ show: show as boolean, appear: appear || !initial }),
374+
() => ({ show: show as boolean, appear: appear || !initial, initial }),
375375
[show, appear, initial]
376376
)
377377

0 commit comments

Comments
 (0)