Permalink
Comparing changes
Choose two branches to see what’s changed or to start a new pull request.
If you need to, you can also or
learn more about diff comparisons.
Open a pull request
Create a new pull request by comparing changes across two branches. If you need to, you can also .
Learn more about diff comparisons here.
...
- 9 commits
- 18 files changed
- 2 contributors
Commits on Jun 27, 2024
-
Fix prematurely added anchoring styles on
ListboxOptions(#3337)* fix prematurely adding anchoring styles on `ListboxOptions` * update changelog
Commits on Jul 1, 2024
-
Ensure
unmountonDialogworks in combination with the `transitio……n` prop on `DialogBackdrop` and `DialogPanel` components (#3352) * inherit `unmount` from `Dialog` in `DialogBackdrop` and `DialogPanel` components Only the `Dialog` accepts an `unmount` prop because it's the `Dialog` that is conditionally rendered and the `DialogBackdrop` and `DialogPanel` will conditionally show together with the `Dialog`. However, now that the `Dialog` is wrapped in a `Transition` (which can be unmounted) and the `DialogBackdrop` and `DialogPanel` will also be wrapped in a `TransitionChild` (when the `transition` prop is passed) then we do have to deal with the `unmount` state on the `TransitionChild`. This is important because if you make the `Dialog` `unmount={false}`, then the `DialogPanel` will still unmount because the `TransitionChild` is unmounting its children. This now means that you will lose data (such as form state of inputs). This commit solves that by inheriting the `unmount` state of the `Dialog` in the `TransitionChild` wrappers such that they behave the way you expect them to behave. * update changelog
Commits on Jul 2, 2024
-
Fix crash in
Comboboxcomponent when invirtualmode when options…… are empty (#3356) * bump `@tanstack/react-virtual` * only enable the virtualizer when there are options * update changelog
Commits on Jul 3, 2024
-
Fix hanging tests when using
anchorprop (#3357)* add test that verifies unit test hang * bail when parsing the `maxHeight` results in `NaN` * playground cleanup Testing using this playground example, so cleaned it up to be more modern using newer components, transition prop and so on. * use CSS instead of JS Let's make it a CSS problem instead of a JS problem. The `round(up, <valueToRound>, <roundingInterval>)` will behave similar to a `Math.ceil()` that we had in the JS implementation. See: https://developer.mozilla.org/en-US/docs/Web/CSS/round * Remove CSS solution for now I want to re-enable this in the future, but unfortunately for now we can't use it because Chrome only introduced support for this in the last 2 months. This reverts commit daac60d45ec3f02b324d0d8b18078a995e885733. * update changelog
Commits on Jul 4, 2024
-
Fix
transitionandfocusprop combination forPopoverPanelcomp……onent (#3361) * trigger effect when ref value changes * update changelog
Commits on Jul 5, 2024
-
Fix outside click in nested portalled
Popovercomponents (#3362)* use `span` as default element for `Hidden` component This improves the HTML DOM tree if this happens to be used in let's say a `p` tag where `div` elements are not allowed. The `Hidden` element is hidden so it doesn't really matter what the underlying element is. Fixes: #3319 * refactor `useRootContainers` and introduce `MainTreeProvider` As a general recap, when an outside click happens, we need to react to it and typically use the `useOutsideClick` hook. We also require the context of "allowed root containers", this means that clicking on a 3rd party toast when a dialog is open, that we allow this even though we are technically clicking outside of the dialog. This is simply because we don't have control over these elements. We also need a reference to know what the "main tree" container is, because this is the container where your application lives and we _know_ that we are not allowed to click on anything in this container. The complex part is getting a reference to this element. ```html <html> <head> <title></title> </head> <body> <div id="app"> <-- main root container --> <div></div> <div> <Popover></Popover> <!-- Current component --> </div> <div></div> </div> <!-- Allowed container #1 --> <3rd-party-toast-container></3rd-party-toast-container> </body> <!-- Allowed container #2 --> <grammarly-extension></grammarly-extension> </html> ``` Some examples: - In case of a `Dialog`, the `Dialog` is rendered in a `Portal` which means that a DOM ref to the `Dialog` or anything inside will not point to the "main tree" node. - In case of a `Popover` we can use the `PopoverButton` as an element that lives in the main tree. However, if you work with nested `Popover` components, and the outer `PopoverPanel` uses the `anchor` or `portal` props, then the inner `PortalButton` will not be in the main tree either because it will live in the portalled `PopoverPanel` of the parent. This is where the `MainTreeProvider` comes in handy. This component will use the passed in `node` as the main tree node reference and pass this via the context through the React tree. This means that a nested `Popover` will still use a reference from the parent `Popover`. In case of the `Dialog`, we wrap the `Dialog` itself with this provider which means that the provider will be in the main tree and can be used inside the portalled `Dialog`. Another part of the `MainTreeProvider` is that if no node exists in the parent (reading from context), and no node is provided via props, then we will briefly render a hidden element, find the root node of the main tree (aka, the parent element that is a direct child of the body, `body > *`). Once we found it, we remove the hidden element again. This way we don't keep unnecessary DOM nodes around. * update changelog * Update packages/@headlessui-react/src/hooks/use-root-containers.tsx Co-authored-by: Jordan Pittman <[email protected]> * Update packages/@headlessui-react/src/hooks/use-root-containers.tsx Co-authored-by: Jordan Pittman <[email protected]> * Update packages/@headlessui-react/src/hooks/use-root-containers.tsx Co-authored-by: Jordan Pittman <[email protected]> * Update packages/@headlessui-react/src/hooks/use-root-containers.tsx Co-authored-by: Jordan Pittman <[email protected]> * Update packages/@headlessui-react/src/hooks/use-root-containers.tsx Co-authored-by: Jordan Pittman <[email protected]> * use early return --------- Co-authored-by: Jordan Pittman <[email protected]>
-
Fix restoring focus to correct element when closing
Dialogcomponent (#3365) * resolve focusable element when recording elements Right now, we have to record when a click / mousedown / focus event happens on an element. But when you click on a non-focusable element inside of a focusable element then we record the inner element instead of the outer one. This happens in this scenario: ```html <button> <span>click me</span> </button> ``` This solves it by resolving the closest focusable element (and we fallback to the e.target as a last resort) * update changelog
-
Fix
flushSyncwarning forComboboxcomponent withimmediatepro……p enabled (#3366) * wrap flushSync call in microTask This will make sure that React is able to flush this correctly by delaying the call using a microTask. * update changelog * reformat comments Now that it's nested, let's adjust the width of the comments
-
Loading
This comparison is taking too long to generate.
Unfortunately it looks like we can’t render this comparison for you right now. It might be too big, or there might be something weird with your repository.
You can try running this command locally to see the comparison on your machine:
git diff @headlessui/[email protected]...@headlessui/[email protected]
