Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add portal prop to Combobox, Listbox, Menu and Popover components #3124

Merged
merged 22 commits into from
Apr 24, 2024
Merged

Add portal prop to Combobox, Listbox, Menu and Popover components #3124

merged 22 commits into from
Apr 24, 2024

Commits on Apr 23, 2024

  1. move duplicated useScrollLock to dedicated hook

    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    87be4dd View commit details
    Browse the repository at this point in the history

  2. accept enabled prop on Portal component 

    This way we can always use `<Portal>`, but enable / disable it
conditionally.
    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    8957321 View commit details
    Browse the repository at this point in the history

  3. use useSyncRefs in portal 

    This allows us to _not_ provide the ref is no ref was passed in.
    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    4a51768 View commit details
    Browse the repository at this point in the history

  4. refactor inner workings of useInert 

    moved logic from the `useEffect`, to module scope. We will re-use this
logic in a future commit.
    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    31c1098 View commit details
    Browse the repository at this point in the history

  5. add useInertOthers hook 

    Mark all elements on the page as inert, except for the ones that are allowed.

We move up the tree from the allowed elements, and mark all their
siblings as `inert`. If any of the children happens to be a parent of
one of the elements, then that child will not be marked as `inert`.

```
<body>                                    <!-- Stop at body -->
  <header></header>                       <!-- Inert, sibling of parent of allowed element -->
  <main>                                  <!-- Not inert, parent of allowed element -->
    <div>Sidebar</div>                    <!-- Inert, sibling of parent of allowed element -->
    <div>                                 <!-- Not inert, parent of allowed element -->
      <Listbox>                           <!-- Not inert, parent of allowed element -->
        <ListboxButton></ListboxButton>   <!-- Not inert, allowed element -->
        <ListboxOptions></ListboxOptions> <!-- Not inert, allowed element -->
      </Listbox>
    </div>
  </main>
  <footer></footer>                       <!-- Inert, sibling of parent of allowed element -->
</body>
```
    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    dec0d7a View commit details
    Browse the repository at this point in the history

  6. add portal prop, and change meaning of modal prop on MenuItems 

    - This adds a `portal` prop that renders the `MenuItems` in a portal.
  Defaults to `false`.
  - If you pass an `anchor` prop, the `portal` prop will always be set
    to `true`.
- The `modal` prop enables the following behavior:
  - Scroll locking is enabled when the `modal` prop is passed and the
    `Menu` is open.
  - Other elements but the `Menu` are marked as `inert`.
    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    9bc11fc View commit details
    Browse the repository at this point in the history

  7. add portal prop, and change meaning of modal prop on `ListboxOpti… 

    …ons`

- This adds a `portal` prop that renders the `ListboxOptions` in a
  portal. Defaults to `false`.
  - If you pass an `anchor` prop, the `portal` prop will always be set
    to `true`.
- The `modal` prop enables the following behavior:
  - Scroll locking is enabled when the `modal` prop is passed and the
    `Listbox` is open.
  - Other elements but the `Listbox` are marked as `inert`.
    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    85274b6 View commit details
    Browse the repository at this point in the history

  8. add portal and modal prop on ComboboxOptions 

    - This adds a `portal` prop that renders the `ComboboxOptions` in a
  portal. Defaults to `false`.
  - If you pass an `anchor` prop, the `portal` prop will always be set
    to `true`.
- The `modal` prop enables the following behavior:
  - Scroll locking is enabled when the `modal` prop is passed and the
    `Combobox` is open.
  - Other elements but the `Combobox` are marked as `inert`.
    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    6561718 View commit details
    Browse the repository at this point in the history

  9. add portal prop, and change meaning of modal prop on PopoverPanel 

    - This adds a `portal` prop that renders the `PopoverPanel` in a portal.
  Defaults to `false`.
  - If you pass an `anchor` prop, the `portal` prop will always be set
    to `true`.
- The `modal` prop enables the following behavior:
  - Scroll locking is enabled when the `modal` prop is passed and the
    `Panel` is open.
    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    3510922 View commit details
    Browse the repository at this point in the history

  10. simplify popover playground, use provided anchor prop

    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    92dbcd9 View commit details
    Browse the repository at this point in the history

  11. remove internal Modal component 

    This is now implemented on a per component basis with some hooks.
    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    9d02180 View commit details
    Browse the repository at this point in the history

  12. remove Modal handling from Dialog 

    The `Modal` component is removed, so there is no need to handle this in
the `Dialog`. It's also safe to remove because the components with
"portals" that are rendered inside the `Dialog` are portalled into the
`Dialog` and not as a sibling of the `Dialog`.
    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    a5e2f06 View commit details
    Browse the repository at this point in the history

  13. ensure we use groupTarget if it is already available 

    Before this, we were waiting for a "next render" to mount the portal if
it was used inside a specific group. This happens when using `<Portal/>`
inside of a `<Dialog/>`.
    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    6ef8117 View commit details
    Browse the repository at this point in the history

  14. update changelog

    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    6b3b62f View commit details
    Browse the repository at this point in the history

  15. add tests for useInertOthers

    @RobinMalfait
    RobinMalfait committed Apr 23, 2024
    Configuration menu
    Copy the full SHA
    d7c5396 View commit details
    Browse the repository at this point in the history

Commits on Apr 24, 2024

  1. ensure we stop before the body 

    We used to have a `useInertOthers` hook, but it also made everything
inside `document.body` inert. This means that third party packages or
browser extensions that inject something in the `document.body` were
also marked as `inert`. This is something we don't want.

We fixed that previously by introducing a simpler `useInert` where we
explicitly marked certain elements as inert: #2290

But I believe this new implementation is better, especially with this
commit where we stop once we hit `document.body`. This means that we
will never mark `body > *` elements as `inert`.
    @RobinMalfait
    RobinMalfait committed Apr 24, 2024
    Configuration menu
    Copy the full SHA
    4fdef30 View commit details
    Browse the repository at this point in the history

  2. add allowed and disallowed to useInertOthers 

    This way we have a list of allowed and disallowed containers. The
`disallowed` elements will be marked as inert as-is.

The allowed elements will not be marked as `inert`, but it will mark its
children as inert. Then goes op the parent tree and repeats the process.
    @RobinMalfait
    RobinMalfait committed Apr 24, 2024
    Configuration menu
    Copy the full SHA
    3a212ca View commit details
    Browse the repository at this point in the history

  3. simplify useInertOthers in Dialog code

    @RobinMalfait
    RobinMalfait committed Apr 24, 2024
    Configuration menu
    Copy the full SHA
    e046550 View commit details
    Browse the repository at this point in the history

  4. update use-inert tests to always use useInertOthers

    @RobinMalfait
    RobinMalfait committed Apr 24, 2024
    Configuration menu
    Copy the full SHA
    6c15c99 View commit details
    Browse the repository at this point in the history

  5. remove useInert hook in favor of useInertOthers

    @RobinMalfait
    RobinMalfait committed Apr 24, 2024
    Configuration menu
    Copy the full SHA
    c8d9611 View commit details
    Browse the repository at this point in the history

  6. rename use-inert to use-inert-others

    @RobinMalfait
    RobinMalfait committed Apr 24, 2024
    Configuration menu
    Copy the full SHA
    b8931b2 View commit details
    Browse the repository at this point in the history

  7. cleanup default values for useInertOthers

    @RobinMalfait
    RobinMalfait committed Apr 24, 2024
    Configuration menu
    Copy the full SHA
    bf7497e View commit details
    Browse the repository at this point in the history