Change Select component such that the metadata (values and labels) from the SelectOptions isn't aggregated by iterating over the Select's children (this proved to be to finicky). Instead each SelectOption sends its data to the Select via ContextAPI. We might change this again in the future to use the "object as value" feature of headlessUI Listbox but for now it works.
The downside is that when people have SelectOptions that have values and labels and use controlled mode or uncontrolled mode with defaultValue then the information about which label matches the passed value/defaultValue is only available after the SelectOptions have been mounted (i.e. after the Select options have been opened at least once). To solve this problem for now we've added an additional prop valueLabel that needs to be passed together with value/defaultValue.
Also switched the unmount option of the Listbox container to false so that SelectOptions stay mounted after initial mounting. (This is useful for long lists)
This PR also includes the addition of the flip middleware for floatingUI which positions the options panel to the top in the case there isn't enough space at the bottom.
Also included is a change to the global story decorator, replacing the deprecated ContentArea with ContentContainer as a wrapper for stories.
Change Select component such that the metadata (values and labels) from the SelectOptions isn't aggregated by iterating over the Select's children (this proved to be to finicky). Instead each SelectOption sends its data to the Select via ContextAPI. We might change this again in the future to use the "object as value" feature of headlessUI Listbox but for now it works.
The downside is that when people have SelectOptions that have values and labels and use controlled mode or uncontrolled mode with
defaultValuethen the information about which label matches the passed value/defaultValue is only available after the SelectOptions have been mounted (i.e. after the Select options have been opened at least once). To solve this problem for now we've added an additional propvalueLabelthat needs to be passed together withvalue/defaultValue.Also switched the
unmountoption of the Listbox container tofalseso that SelectOptions stay mounted after initial mounting. (This is useful for long lists)This PR also includes the addition of the
flipmiddleware for floatingUI which positions the options panel to the top in the case there isn't enough space at the bottom.Also included is a change to the global story decorator, replacing the deprecated
ContentAreawithContentContaineras a wrapper for stories.