tailwindlabs / headlessui Goto Github PK

It appears like Transition classes are not there initially on any div(<Transition>)
Btw I'm using ( tailwindcss(^1.8.4) , styled-components & twin-macro)

Sample code I'm trying to test on my NextJs WebApp

I can't find any Contribution.md or To-Do list which list the features that are going to be implemented soon... Can you provide it or tell me if I want to contribute here, how should I start my journey?

Is this a dependency of Tailwind UI? How would early adopters of TailwindUI use this today?

Hey! Thanks a bunch for this library. Its awesome. So awesome that I'd rather wait for you guys to come out with components rather than build myself or use something else.

On that note, is an accordion component in the works? It would be great to have visibility into what's coming up next.

Sometimes we need to disable Menu.Button but I couldn't see any section on docs about this and also couldn't see docs about contribution. I think it is an essential feature.

I could wish to use it like this

{({ open }) => (
  <>
    <Menu.Button disabled={true}>
     ...
    </Menu.Button>

    ...
  </>
)}

I noticed that buttons are given auto generated ids of "headlessui-menu-button-x" and list items are given randomly generated ids as well. I am assuming that this is necessary for operation. Is there any way we can give a custom prefix or somehow customize this?

I'm seeing an issue that is causing a double toggle of the transition classes (even though show is continually true), ultimately resulting in a flash.

The issue looks like it's being caused by the initial variable changing, causing useIsoMorphicEffect to be re-triggered.

It goes like this:

1. First render of the component (initial = true)
2. Second render of the component (initial = false)

I'm curious why initial is a dependency on this useEffect?

useIsoMorphicEffect(() => {
    const node = container.current

    if (!node) return

    // Skipping initial transition
    if (initial && !appear) return

   ....
  }, [
    id,
    isTransitioning,
    unregister,
    nesting,
    container,
    initial,

Let me know if that doesn't make sense and I'll put together an example.

Hey,

I am trying to use active on a button if active or not and changing the class dynamically. I am using classes as specified in TailWinds UI.

 <nav className="hidden md:flex space-x-10">
          <div className="relative">
            {/* Item active: "text-gray-900", Item inactive: "text-gray-500" */}
            {({ active }) => (
              <button
                onClick={() => setIsOpen(!isOpen)}
                type="button"
                className={
                  (active ? 'group text-gray-900' : 'group text-gray-500') +
                  'inline-flex items-center space-x-2 '
                }
              >
                <span>Solutions</span>
                {/*
            Heroicon name: chevron-down

            Item active: "text-gray-600", Item inactive: "text-gray-400"
          */}
                <svg
                  className="text-gray-400 h-5 w-5 group-hover:text-gray-500 ..."
                  xmlns="http://www.w3.org/2000/svg"
                  fill="currentColor"
                >
      
                </svg>
              </button>
            )}

Is active state check not supposed to work this way? Sorry I am a bit confused on how to use the active state.

I'm working on an app that is using Transition for opening the modal menu used for navigation. The menu opens and closes as desired, however, the markup is not visible on the DOM unless it is open. This is problematic for SEO as that content would not be visible to the search engine crawlers. How can I make the component behave visually just as it is now, but just toggle the visibility so that the markup is always there?

You can see the behavior in the example app: https://b6xje.csb.app/

Hey team, great job with the new components.

I'd like to use Switch in our app but I'd like to be able to pass custom props like 'aria-describedby' so I can put a description under the switch and have screen readers read it when the switch is selected.

Could you possibly make it so any extra props are collected and spread on to the underlying button?

Thanks

Any chance to also have Angular components in headless UI ?

Hey Tailwind Team,

I'm struggling with implementing Transition.Child elements and could use your help. Either there is a bug, or my mental model for working with children is wrong and could use some correcting.

A child transition currently unmounts before the parent. Is that intended?

Here's a fork of your Code Sandbox showing a child unmounting before the parent: https://codesandbox.io/s/headlessuireact-menu-example-forked-nzr2p?file=/src/App.js:2169-2305

Can you help me understand how to properly use Transition.Child?.

Say the parent Transition has an opacity transition, and I want to delay a child opacity transitioning, I'm running into a lot of headache because it's not working the way I expect. For example, I would expect the parent transition to apply to all of it's children, even if the child doesn't have a leave animation set. If the child doesn't have a leave set, it immediately unmounts.

Am I using it the wrong way? Should I be using the Parent/Child only to handle the show prop for it's children?

Thanks!

I just did something really stupid, and want to notify you and apologize for my actions.

Intention:

I wanted to try out the Depfu bot for you, as you are not really happy with the Dependabot config that I gave you.
I wanted to revert the Dependabot stuff on my fork so that I could try again with the Depfu bot, and see what the result is.

What I did:

I did a git rebase -i --root on my fork to drop all commits that relate to the Dependabot config I made for you.
This of course creates new commits, and I force-pushed those to my fork.

I did not realize that by force-pushing I'm creating new references to my fork on your project.... 😞
See https://github.com/tailwindlabs/headlessui/pull/29 for an example of what I did.

What I should have done:

I should have just done a git revert on each commit instead of creating brand-new commits and force pushing those...

Trying to get this fixed:

I have contacted GitHub support to try and fix my mistake.

Apology:

I feel really bad about this, I only wanted to help, and now I've only created more hassle for you.

I'm really sorry for making such a mess of things. 😞

Sandbox: https://codesandbox.io/s/headlessuireact-menu-example-forked-c8fjs?file=/src/App.js:2732-2747

I've started having a play around with this today and it's awesome! I ran into an issue though and I'm not sure if it is because I am doing something wrong / not using it as intended or if there is a bug.

I would like to use a custom button component to trigger the dropdown like so,

<MenuButton as="template"><MyCustomButton>Options</MyCustomButton></MenuButton>

however when I open the dropdown, I get the following error:
[Vue warn]: Property "id" was accessed during render but is not defined on instance.
Uncaught TypeError: _buttonRef$value.contains is not a function

Im using the latest version of Vue 3, 0.1.3 of Headless UI.

Script to start react and vue

I believe a script to start react and vue in Headless directory going to facility development

Example

{
 "..."
  "scripts": {
     "react:start" : "yarn workspace @headlessui/react playground",
      "vue:start" : "yarn workspace @headlessui/vue playground",
    "..."
  }
}

If you believe that make sense I can do

Hey Tailwind Team,

The Transition utility is really nice! I'm currently interested in the ability to stagger elements with Transition.Child.

I realize the lift on this might be tough but something like:

<Transtion
  show
  appear
  stagger
  enter="transition duration-75 delay-100"
  enterFrom="opacity-0"
  enterTo="opacity-100"
>
<TranstionChild 
  enter="transition duration-75 delay-500"
  enterFrom="opacity-0"
  enterTo="opacity-100"
>
  I Will Wait until 100ms to begin my 500ms delay and animate in
</TranstionChild>

</Transition>

This probably goes into string parsing territory, but the API could allow for a prop to be passed down in this case.

What do you think? Possible?

Thanks!

The problem:

The outside click on menu's work as expected in most cases, unless you click on another Menu button. When you click on another menu button, both menu's will be open. This is both the case in Vue and React.

Reproduction:

• Repro for React: https://ktp76.csb.app/
• Repro for Vue: https://m4fu3.csb.app/

Expected behaviour:

The current open menu should close and the new one should open.

Hi, in the second Listbox example here the selected render prop argument does not work. It worked for me only after I changed the Listbox.Option value to person.name instead of person. Im working on CRA without any other dependencies.

At least on this, the example links don't point where they need to.

I use the Transition component for my custom modal and I need to clear the component state when the modal completely is hidden.

onEnterStarted, onEnterFinished, onLeaveStarted, onLeaveFinished methods could be a nice feature!

The default up and down arrow key to open dropdown behavior messes with a natural keyboard navigation experience for some use cases. An example of a scenario where this doesn't work well and has been implemented differently is the "more" button on the left panel of the twitter web app.

Also, thoughts on having an option to wrap around to first item if going down on last item in menu?

Hi,
Things are looking great so far!

I noticed one thing about the switch component which feels like unwanted behavior on both React and Vue.

As a side-note, i compare the Switch component as a checkbox input.

When pressing spacebar on checkbox and switch component, the state toggles, as expected.
Holding it down, only changes state when releasing the space bar, as expected.

While pressing enter, it toggles on the switch component, but not on checkbox input. IMO doesn't really matter that you can toggle it with enter, so that's alright.

However, when holding down enter, it furiously toggles back and forth. If allowing to press enter, it should be considered to work the same way spacebar works (toggle on keyup, not on press/down)

Hi guys,

I'm one of the makers of https://components.studio
I feel like our project would be a perfect fit for creating the showcases for the components.

I quickly ported the drop-down demos to it:

React -> https://components.studio/edit/collection/6d5uIF7OtJs0hiNTEj3T/aiJBj9ughZLbkcHBGoar
Vue3 -> https://components.studio/edit/collection/6d5uIF7OtJs0hiNTEj3T/EUR79YhD81LGflajWtlH

You can also view them as a collection (betteron desktop for now):
https://components.studio/edit/collection/6d5uIF7OtJs0hiNTEj3T/aiJBj9ughZLbkcHBGoar

I can create a tailwindlabs or headlessui organisation and you can collaborate around theses demos.
They are all embeddable and relatively lightweight.

We are tailwindcss users, happy to help and improve the platform for you guys.

I hope you like it ♥️
Looking forward chatting with you guys 👍

Side notes, we ported 2 tailwind-ui a while back.
https://components.studio/user/georges-gomes?collection=tailwind-ui

lines 30 - 31 of headlessui/packages/@headlessui-react/README.md
- [Transition](#menu-button-dropdown)
- [Menu Button (Dropdown)](#menu-button-dropdown)

Should be
- [Transition](#transitions)
- [Menu Button (Dropdown)](#menu-button-dropdown)

With respect🤗

When testing the menu example on iOS, you can focus an item in the menu but double tapping with VoiceOver to select the item has no effect. The same can be seen on macOS if you use the Ctrl + Option + Space command that usually triggers a click on an item. I see it change the hash in the url but the menu does not close.

The menu example has an invalid a11y tree because of the generic elements at the top ("Signed in as..."). The menu role can only contain menuitem or group children according to the ARIA spec, and testing in VoiceOver confirms that it is confused.

I'd recommend using a group for the menu items, and labelling it by the contents of the generic element (which should be aria-hidden to avoid an invalid tree). This will also improve announcement of the menu items, as the "Signed in as..." will also be announced when the first item is focused.

Here's a fork of the sandbox: https://codesandbox.io/s/headlessuireact-menu-example-forked-ieud4?file=/src/App.js

The a11y tree looks like this with the changes applied:

The Vue.js 2 docs recommend not to use single word component names to avoid conflicts with future HTML elements. If e.g. a HTML element switch was introduced it would clash with the Headless UI Switch.
The Vue 3 docs are not as clear about this, but it might be a good idea to prefix all components, e.g. HSwitch instead of Switch.
Other frameworks do this as well:

• v-alert used by Vuetify
• el-switch used by Element
• b-switch used by Buefy

Great work so far. I've noticed a weird warning happening when I use the dropdown menu in Next.js, I get

Warning: Prop `id` did not match. Server: "headlessui-menu-button-2" Client: "headlessui-menu-button-1"

And if I refresh the page, it just keeps going up more and more.

Warning: Prop `id` did not match. Server: "headlessui-menu-button-4" Client: "headlessui-menu-button-1"

I think I see what you're doing here.

If so, I wouldn't mind making some PRs in the future for Phoenix Live View versions.

I'm not sure if it would be possible to easily distribute this sort of thing as a hex package though (maybe), and maybe just example files for copypasta if that is the case.

A little off topic ( I didn't find the repositories for the website https://headlessui.dev so I'm putting it here )

I noticed that apple-touch-icon ( https://headlessui.dev/apple-touch-icon.png ) has a red background, which looks weird and it's probably a mistake.

Hi, first off I love the idea of this project! I'm really looking forward to using it once it's more fleshed out. Also, apologies if this was already covered somewhere, I looked around and did not find it.

I think we could benefit from some contributing guidelines. Just a bit of documentation around things like...

• Proposing new components
• Designing the API around those new components
• Implementing new components
• Quality guidelines

I'd love to help grow the library of components!

Hi everyone,

I'm wondering if there will be angular support in the future.

Regards,
Matteo.

Is there any SSR support

Hey guys, great work on the library. I've been using TailwindUI in some of my projects. Recently, I started migrating base Transition components to the ones provided by headlessui.

I use React Portals to create the notifications. I started noticing issues when I added transition wrapper around the notification component. Here is a screenshot of how the notification looks after I've added the transition wrapper provided by headlessui.

I was able to pinpoint this issue to an empty div being added on adding transition wrapper. This issue does not occur on using the previous transition wrapper.

Version: @headlessui/[email protected]

Hey there! First thanks for your amazing job. I'm sure this will be a library that will be a must in all my projects.

I have a Menu with Next.js Links inside. When I click one item with the mouse it navigates to the page perfectly. However, clicking enter with the mouse, when one item is "active" only closes the menu, like ESC does. I believe ENTER should go to the item, so I think this is a bug 🐛

Thanks!!

Hello,
I just saw react and vue frameworks guide in the site, which I prefer not too use.
I wonder if either standard web, web-components or Svelte framework, are supported ?

Thanks.

Thank you for this amazing library and for the awesome concept as well

I am planning to adopt it into a really complex project and planning on waiting for new releases. I have one question though Are these components production ready? And will you be providing backward compatibility?

When placed within a container with overflow-auto the Listbox.Options is cut, which is not aesthetic.
Also, when the container is not overflowing yet it can trigger the overflow.

A use case for this is for forms that are put in modals on mobile, where it's not rare to have overflow-auto on it. (Example)

Codesandbox demo

https://select2.org/ handle this by attaching the equivalent of Listbox.Options as a direct child of the body, and positioning it absolutely.

Hey, thanks for this great library! I'm a huge fan of Tailwind CSS and am really excited that you guys are releasing a headless component library. There are two cases which I don't see handled in the menu component, which I come across pretty regularly in the wild.

1. Menu button positioned near the edge of a page, which causes the menu items to be rendered off screen.

This may happen when the user resizes their window or when whatever the menu button is positioned in has been scrolled to the edge of the user's window.

Sandbox: https://codesandbox.io/s/headlessuireact-menu-example-forked-8c38x

2. Menu in an overflow hidden div.

The menu button may be fully visible in the overflow hidden parent div, but the menu items are cropped/hidden because of overflow-hidden. This is especially problematic when we need virtualisation, eg when we're rendering an infinitely scrollable table/list of cards with menu buttons.

Sandbox: https://codesandbox.io/s/headlessuireact-menu-example-forked-pg5es

Hi @adamwathan @RobinMalfait 👋 I am new to tailwindcss, I would like to collaborate to add a component in Steps like this but I still don't know where to start.

I like this project and I would like it to grow more ❤️

Using the "Menu (basic)" example, when I click on "Account settings" the menu closes but the URL does not update. When I select it by pressing "Enter", it updates to http://localhost:3000/menu/menu#account-settings as expected.

I have seen menu button dropdowns implemented both ways and understand that you want to enforce a consistent experience but would love a prop that allows us to close dropdown on mousedown instead of a full click (mouse down + mouse up) outside.

This style of behavior lends itself well to very "app-like" webapps. This is how dropdowns work at an os level or any native desktop app. I have seen this behavior in places on the web like the spotify web player and the app switcher menu at top right of gmail.

List Box documentation

I was seeing react docs and I don't find listbox documentation

If you believe that is util I can do and talk about:

• How implement
• Props

if you believe that is util notify me and I do

I tried to use headless ui on nuxtjs and this error is returned vue.defineComponent is not a function .

More Details:

node_modules/@headlessui/vue/dist/headlessui.cjs.development.js

  }

  return context;
}

var Menu = /*#__PURE__*/vue.defineComponent({
  props: {
    as: {
      type: [Object, String],
      "default": 'template'
    }

It would be great to allow the Listbox to select more than one option by passing "multiple" Boolean prop

Example:

<Listbox v-model="selectedPerson" multiple>
    <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
    <ListboxOptions>
      <ListboxOption v-for="person in people" :key="person.id" :value="person" :disabled="person.unavailable">
        {{ person.name }}
      </ListboxOption>
    </ListboxOptions>
</Listbox>

Just wondering what license this might have.

Thank you

I am experiencing what I believe to be unexpected behavior when clicking into an html input while I have a menu dropdown opened. This might occur with other types of html elements as well, I haven't checked.

Steps to reproduce:

1. Click the dropdown to open it (or open it via keyboard navigation)
2. Click the html input, notice that focus jumps back to the menu button and you have to click the input again if you want to enter text

https://codesandbox.io/s/headlessuireact-menu-example-forked-2uujc?fontsize=14&hidenavigation=1&theme=dark

MacOS 10.15.6
Google Chrome 85.0.4183.121

When the Listbox is at the bottom of the screen it would be nice to be able to place it above Listbox.Button.

It might already be possible, but I didn't find a way to style the div generated by Listbox.Options that contains the ul node (<div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">).
Even if possible it would be nice to have headlessui figure out the best positioning (above or below) depending on the ListBox.Button position on the screen.

An other issue of not being able to put Listbox.Options above is that when the Listbox is placed at the bottom of the page, opening it will increase the scrollable area.

https://codesandbox.io/s/headlessuireact-listbox-example-forked-lu7b8?file=/src/App.js:2409-2415

A naive way to detect a good placement could look like:

function computePlacement(buttonRef) {
   const optionsHeight = optionsRef.current.offsetHeight;

   const bounding = buttonRef.current.getBoundingClientRect();
   const spaceBellow = window.innerHeight - bounding.bottom;
   const spaceAbove = bounding.top;

   return (
       spaceBellow > optionsHeight
       || spaceBellow > spaceAbove
   ) ? "bellow" : "above";
}

Hi, I have an issue with Listbox using Typescript.
Listbox.Option value attribute is giving me a type error.
This is the minimal code:

interface Area {
  id: number;
  name: string;
}
const areas: Area[] = [
  { id: 1, name: 'Desarrollo Web' },
  { id: 2, name: 'Robótica' },
  { id: 3, name: 'Seguridad' },
  { id: 4, name: 'IA' },
  { id: 5, name: 'IoT' },
];

function App() {
  const [selectedArea, setSelectedArea] = useState<Area>(areas[0]);
  return (
    <>
      <Listbox value={selectedArea} onChange={setSelectedArea}>
        <Listbox.Button>{selectedArea.name}</Listbox.Button>
        <Listbox.Options>
          {areas.map((area) => (
            <Listbox.Option key={area.id} value={area} disabled>
              {/*                         ^^^^^ ts-error */}
              {area.name}
            </Listbox.Option>
          ))}
        </Listbox.Options>
      </Listbox>
    </>
  );
}

It gives me the following error.

Type 'Area' is not assignable to type '(string & Area) | (number & Area) | (readonly string[] & Area)'.
  Type 'Area' is not assignable to type 'readonly string[] & Area'.
    Type 'Area' is missing the following properties from type 'readonly string[]': length, concat, join, slice, and 18 more.  TS2322

Versions

"@headlessui/react": "^0.2.0"

Partial fix

 <Listbox.Option key={area.id} value={(area as unknown) as string} disabled>