@headlessui/react - npm Package Compare versions

Comparing version 0.1.4-alpha.1 to 0.2.0

dist/components/switch/switch.d.ts

 import * as React from 'react';
 import { Props } from '../../types';
-declare type GroupRenderPropArg = {};
 declare const DEFAULT_SWITCH_TAG = "button";
@@ -8,3 +7,3 @@ declare type SwitchRenderPropArg = {
 };
-declare type SwitchPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-checked' | 'onClick' | 'onKeyDown';
+declare type SwitchPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-checked' | 'onClick' | 'onKeyUp';
 export declare function Switch<TTag extends React.ElementType = typeof DEFAULT_SWITCH_TAG>(props: Props<TTag, SwitchRenderPropArg, SwitchPropsWeControl | 'checked' | 'onChange' | 'className'> & {
@@ -18,3 +17,3 @@ checked: boolean;
         children?: React.ReactNode;
-    }>>(props: Props<TTag, GroupRenderPropArg, any>) => JSX.Element;
+    }>>(props: Props<TTag, {}, "">) => JSX.Element;
     var Label: <TTag extends React.ElementType<any> = "label">(props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
@@ -21,0 +20,0 @@ }

dist/headlessui.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function n(){return(n=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function t(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(o[t]=e[t]);return o}function r(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var o,i="undefined"!=typeof window?e.useLayoutEffect:e.useEffect,u={serverHandoffComplete:!1},a=0;function c(){return++a}function l(){var n=e.useState(u.serverHandoffComplete?c:null),t=n[0],r=n[1];return i((function(){null===t&&r(c())}),[]),e.useEffect((function(){!1===u.serverHandoffComplete&&(u.serverHandoffComplete=!0)}),[]),null!=t?""+t:void 0}function s(){var n=e.useRef(!0);return e.useEffect((function(){n.current=!1}),[]),n.current}function f(e,n){if(e in n){for(var t=n[e],r=arguments.length,o=new Array(r>2?r-2:0),i=2;i<r;i++)o[i-2]=arguments[i];return"function"==typeof t?t.apply(void 0,o):t}var u=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(n).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(u,f),u}function d(){var e=[],n={requestAnimationFrame:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=requestAnimationFrame.apply(void 0,arguments);n.add((function(){return cancelAnimationFrame(e)}))})),nextFrame:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];n.requestAnimationFrame((function(){n.requestAnimationFrame.apply(n,t)}))},setTimeout:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=setTimeout.apply(void 0,arguments);n.add((function(){return clearTimeout(e)}))})),add:function(n){e.push(n)},dispose:function(){e.splice(0).forEach((function(e){return e()}))}};return n}function v(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).add.apply(n,r)}function p(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).remove.apply(n,r)}function m(e,n,t,r,i){var u=d(),a=void 0!==i?function(e){var n={called:!1};return function(){if(!n.called)return n.called=!0,e.apply(void 0,arguments)}}(i):function(){};return v.apply(void 0,[e].concat(n,t)),u.nextFrame((function(){p.apply(void 0,[e].concat(t)),v.apply(void 0,[e].concat(r)),u.add(function(e,n){var t=d();if(!e)return t.dispose;var r=getComputedStyle(e),i=[r.transitionDuration,r.transitionDelay].map((function(e){var n=e.split(",").filter(Boolean).map((function(e){return e.includes("ms")?parseFloat(e):1e3*parseFloat(e)})).sort((function(e,n){return n-e}))[0];return void 0===n?0:n})),u=i[0];return 0!==u?t.setTimeout((function(){n(o.Finished)}),u+i[1]):n(o.Finished),t.add((function(){return n(o.Cancelled)})),t.dispose}(e,(function(t){return p.apply(void 0,[e].concat(r,n)),a(t)})))})),u.add((function(){return p.apply(void 0,[e].concat(n,t,r))})),u.add((function(){return a(o.Cancelled)})),u.dispose}function b(n){return void 0===n&&(n=""),e.useMemo((function(){return n.split(" ").filter((function(e){return e.trim().length>1}))}),[n])}!function(e){e.Finished="finished",e.Cancelled="cancelled"}(o||(o={}));var h,y=e.createContext(null);!function(e){e.Visible="visible",e.Hidden="hidden"}(h||(h={}));var x,I,g,C,O,R=e.createContext(null);function S(n){var t=e.useRef([]),r=function(){var n=e.useRef(!0);return e.useEffect((function(){return function(){n.current=!1}}),[]),n}(),o=e.useCallback((function(e){var o=t.current.indexOf(e);-1!==o&&(t.current.splice(o,1),t.current.length<=0&&r.current&&(null==n||n()))}),[n,r,t]),i=e.useCallback((function(e){return t.current.push(e),function(){return o(e)}}),[t,o]);return e.useMemo((function(){return{children:t,register:i,unregister:o}}),[i,o,t])}function w(n){var r=n.children,u=n.enter,a=n.enterFrom,c=n.enterTo,f=n.leave,d=n.leaveFrom,v=n.leaveTo,p=t(n,["children","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo"]),x=e.useRef(null),I=e.useState(h.Visible),g=I[0],C=I[1],O=function(){var n=e.useContext(y);if(null===n)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return n}(),w=O.show,k=O.appear,E=function(){var n=e.useContext(R);if(null===n)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return n}(),T=E.register,F=E.unregister,D=s(),L=l(),P=e.useRef(!1),M=S(e.useCallback((function(){P.current||(C(h.Hidden),F(L))}),[L,F,P]));i((function(){return T(L)}),[T,L]);var A=b(u),G=b(a),N=b(c),j=b(f),U=b(d),H=b(v);if(e.useEffect((function(){if(g===h.Visible&&null===x.current)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}),[x,g]),i((function(){var e=x.current;if(e&&(!D||k))return P.current=!0,w?m(e,A,G,N,(function(){P.current=!1})):m(e,j,U,H,(function(e){P.current=!1,e===o.Finished&&M.children.current.length<=0&&(C(h.Hidden),F(L))}))}),[L,P,F,M,x,D,k,w,A,G,N,j,U,H]),g===h.Hidden)return null;if("function"==typeof r)return e.createElement(R.Provider,{value:M},r(x));var Q=p.as,B=void 0===Q?"div":Q,V=t(p,["as"]);return e.createElement(R.Provider,{value:M},e.createElement(B,Object.assign({},V,{ref:x}),r))}function k(n){var r,o=n.show,i=n.appear,u=void 0!==i&&i,a=t(n,["show","appear"]);if(![!0,!1].includes(o))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");var c=e.useState(o?h.Visible:h.Hidden),l=c[0],d=c[1],v=S(e.useCallback((function(){d(h.Hidden)}),[])),p=s(),m=e.useMemo((function(){return{show:o,appear:u||!p}}),[o,u,p]);return e.useEffect((function(){o?d(h.Visible):v.children.current.length<=0&&d(h.Hidden)}),[o,v]),e.createElement(R.Provider,{value:v},e.createElement(y.Provider,{value:m},f(l,((r={})[h.Visible]=function(){return e.createElement(w,Object.assign({},a))},r[h.Hidden]=null,r))))}function E(n,o,i){var u=n.as,a=void 0===u?i:u,c=n.children,l=t(n,["as","children"]),s="function"==typeof c?c(o):c;if(a===e.Fragment&&Object.keys(l).length>0){if(Array.isArray(s)&&s.length>1){var f=new Error("You should only render 1 child");throw Error.captureStackTrace&&Error.captureStackTrace(f,E),f}if(!e.isValidElement(s)){var d=new Error('You should render an element as a child. Did you forget the as="..." prop?');throw Error.captureStackTrace&&Error.captureStackTrace(d,E),d}return e.cloneElement(s,function(e,n,t){for(var o,i=Object.assign({},e),u=function(){var t,r=o.value;void 0!==e[r]&&void 0!==n[r]&&Object.assign(i,((t={})[r]=function(t){t.defaultPrevented||e[r](t),t.defaultPrevented||n[r](t)},t))},a=function(e,n){var t;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(t=function(e,n){if(e){if("string"==typeof e)return r(e,void 0);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?r(e,void 0):void 0}}(e))){t&&(e=t);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(t=e[Symbol.iterator]()).next.bind(t)}(["onClick"]);!(o=a()).done;)u();return i}(function(e){var n=Object.assign({},e);for(var t in n)void 0===n[t]&&delete n[t];return n}(l),s.props))}return e.createElement(a,l,s)}function T(n){return e.forwardRef(n)}function F(){var n=e.useState(d)[0];return e.useEffect((function(){return function(){return n.dispose()}}),[n]),n}function D(){for(var n=arguments.length,t=new Array(n),r=0;r<n;r++)t[r]=arguments[r];return e.useCallback((function(e){t.forEach((function(n){if(null!==n)return"function"==typeof n?n(e):void(n.current=e)}))}),[t])}k.Child=w,function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(x||(x={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(g||(g={})),function(e){e[e.OpenMenu=0]="OpenMenu",e[e.CloseMenu=1]="CloseMenu",e[e.GoToItem=2]="GoToItem",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterItem=5]="RegisterItem",e[e.UnregisterItem=6]="UnregisterItem"}(C||(C={})),function(e){e[e.FirstItem=0]="FirstItem",e[e.PreviousItem=1]="PreviousItem",e[e.NextItem=2]="NextItem",e[e.LastItem=3]="LastItem",e[e.SpecificItem=4]="SpecificItem",e[e.Nothing=5]="Nothing"}(O||(O={}));var L=((I={})[C.CloseMenu]=function(e){return n({},e,{menuState:g.Closed})},I[C.OpenMenu]=function(e){return n({},e,{menuState:g.Open})},I[C.GoToItem]=function(e,t){var r=function(e,n,t){var r,o;if(e.items.length<=0)return null;var i=e.items,u=null!==(r=e.activeItemIndex)&&void 0!==r?r:-1,a=f(n,((o={})[O.FirstItem]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},o[O.PreviousItem]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==u&&t.length-n-1>=u||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},o[O.NextItem]=function(){return i.findIndex((function(e,n){return!(n<=u||e.dataRef.current.disabled)}))},o[O.LastItem]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},o[O.SpecificItem]=function(){return i.findIndex((function(e){return e.id===t}))},o[O.Nothing]=function(){return null},o));return-1===a?e.activeItemIndex:a}(e,t.focus,t.id);return""===e.searchQuery&&e.activeItemIndex===r?e:n({},e,{searchQuery:"",activeItemIndex:r})},I[C.Search]=function(e,t){var r=e.searchQuery+t.value,o=e.items.findIndex((function(e){var n;return(null===(n=e.dataRef.current.textValue)||void 0===n?void 0:n.startsWith(r))&&!e.dataRef.current.disabled}));return n({},e,-1===o||o===e.activeItemIndex?{searchQuery:r}:{searchQuery:r,activeItemIndex:o})},I[C.ClearSearch]=function(e){return n({},e,{searchQuery:""})},I[C.RegisterItem]=function(e,t){return n({},e,{items:[].concat(e.items,[{id:t.id,dataRef:t.dataRef}])})},I[C.UnregisterItem]=function(e,t){var r=e.items.slice(),o=null!==e.activeItemIndex?r[e.activeItemIndex]:null,i=r.findIndex((function(e){return e.id===t.id}));return-1!==i&&r.splice(i,1),n({},e,{items:r,activeItemIndex:i===e.activeItemIndex||null===o?null:r.indexOf(o)})},I),P=e.createContext(null);function M(n){var t=e.useContext(P);if(null===t){var r=new Error("<"+n+" /> is missing a parent <"+N.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,M),r}return t}function A(e,n){return f(n.type,L,e,n)}var G=e.Fragment;function N(n){var t=F(),r=e.useReducer(A,{menuState:g.Closed,buttonRef:e.createRef(),itemsRef:e.createRef(),items:[],searchQuery:"",activeItemIndex:null}),o=r[0],i=o.menuState,u=o.itemsRef,a=o.buttonRef,c=r[1];e.useEffect((function(){function e(e){var n,t,r;i===g.Open&&((null===(n=a.current)||void 0===n?void 0:n.contains(e.target))||(null===(t=u.current)||void 0===t?void 0:t.contains(e.target))||(c({type:C.CloseMenu}),e.defaultPrevented||null===(r=a.current)||void 0===r||r.focus()))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[i,u,a,t,c]);var l=e.useMemo((function(){return{open:i===g.Open}}),[i]);return e.createElement(P.Provider,{value:r},E(n,l,G))}var j,U,H,Q,B=T((function t(r,o){var i,u=M([N.name,t.name].join(".")),a=u[0],c=u[1],s=D(a.buttonRef,o),f=e.useState(!1),d=f[0],v=f[1],p="headlessui-menu-button-"+l(),m=F(),b=e.useCallback((function(e){switch(e.key){case x.Space:case x.Enter:case x.ArrowDown:e.preventDefault(),c({type:C.OpenMenu}),m.nextFrame((function(){var e;null===(e=a.itemsRef.current)||void 0===e||e.focus(),c({type:C.GoToItem,focus:O.FirstItem})}));break;case x.ArrowUp:e.preventDefault(),c({type:C.OpenMenu}),m.nextFrame((function(){var e;null===(e=a.itemsRef.current)||void 0===e||e.focus(),c({type:C.GoToItem,focus:O.LastItem})}))}}),[c,a,m]),h=e.useCallback((function(e){a.menuState===g.Open?c({type:C.CloseMenu}):(e.preventDefault(),c({type:C.OpenMenu}),m.nextFrame((function(){var e;return null===(e=a.itemsRef.current)||void 0===e?void 0:e.focus()})))}),[c,m,a]),y=e.useCallback((function(){var e;a.menuState===g.Open&&(null===(e=a.itemsRef.current)||void 0===e||e.focus()),v(!0)}),[a,v]),I=e.useCallback((function(){return v(!1)}),[v]),R=e.useMemo((function(){return{open:a.menuState===g.Open,focused:d}}),[a,d]);return E(n({},r,{ref:s,id:p,type:"button","aria-haspopup":!0,"aria-controls":null===(i=a.itemsRef.current)||void 0===i?void 0:i.id,"aria-expanded":a.menuState===g.Open||void 0,onKeyDown:b,onFocus:y,onBlur:I,onPointerUp:h}),R,"button")})),V=T((function r(o,i){var u,a,c=o.static,s=void 0!==c&&c,f=t(o,["static"]),d=M([N.name,r.name].join(".")),v=d[0],p=d[1],m=D(v.itemsRef,i),b="headlessui-menu-items-"+l(),h=F(),y=F(),I=e.useCallback((function(e){switch(y.dispose(),e.key){case x.Space:if(""!==v.searchQuery)return e.preventDefault(),p({type:C.Search,value:e.key});case x.Enter:var n;e.preventDefault(),p({type:C.CloseMenu}),null!==v.activeItemIndex&&(null===(n=document.getElementById(v.items[v.activeItemIndex].id))||void 0===n||n.click(),h.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()})));break;case x.ArrowDown:return e.preventDefault(),p({type:C.GoToItem,focus:O.NextItem});case x.ArrowUp:return e.preventDefault(),p({type:C.GoToItem,focus:O.PreviousItem});case x.Home:case x.PageUp:return e.preventDefault(),p({type:C.GoToItem,focus:O.FirstItem});case x.End:case x.PageDown:return e.preventDefault(),p({type:C.GoToItem,focus:O.LastItem});case x.Escape:e.preventDefault(),p({type:C.CloseMenu}),h.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case x.Tab:return e.preventDefault();default:1===e.key.length&&(p({type:C.Search,value:e.key}),y.setTimeout((function(){return p({type:C.ClearSearch})}),350))}}),[h,p,y,v]),R=e.useMemo((function(){return{open:v.menuState===g.Open}}),[v]),S={"aria-activedescendant":null===v.activeItemIndex||null===(u=v.items[v.activeItemIndex])||void 0===u?void 0:u.id,"aria-labelledby":null===(a=v.buttonRef.current)||void 0===a?void 0:a.id,id:b,onKeyDown:I,role:"menu",tabIndex:0};return s||v.menuState!==g.Closed?E(n({},f,S,{ref:m}),R,"div"):null})),q=e.Fragment;function K(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}function W(n,t){var r=e.useState(n),o=r[0],u=r[1],a=e.useRef(n);return i((function(){a.current=n}),[n]),i((function(){return u(a.current)}),[a,u].concat(t)),o}N.Button=B,N.Items=V,N.Item=function r(o){var u=o.disabled,a=void 0!==u&&u,c=o.className,s=o.onClick,f=t(o,["disabled","className","onClick"]),d=M([N.name,r.name].join(".")),v=d[0],p=d[1],m=F(),b="headlessui-menu-item-"+l(),h=null!==v.activeItemIndex&&v.items[v.activeItemIndex].id===b,y=e.useRef({disabled:a});i((function(){y.current.disabled=a}),[y,a]),i((function(){var e,n;y.current.textValue=null===(e=document.getElementById(b))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[y,b]),i((function(){return p({type:C.RegisterItem,id:b,dataRef:y}),function(){return p({type:C.UnregisterItem,id:b})}}),[y,b]);var x=e.useCallback((function(e){return a?e.preventDefault():(p({type:C.CloseMenu}),m.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()})),s?s(e):void 0)}),[m,p,v.buttonRef,a,s]),I=e.useCallback((function(){if(a)return p({type:C.GoToItem,focus:O.Nothing});p({type:C.GoToItem,focus:O.SpecificItem,id:b})}),[a,b,p]),g=e.useCallback((function(){a||h||p({type:C.GoToItem,focus:O.SpecificItem,id:b})}),[a,h,b,p]),R=e.useCallback((function(){a||h&&p({type:C.GoToItem,focus:O.Nothing})}),[a,h,p]),S=e.useMemo((function(){return{active:h,disabled:a}}),[h,a]);return E(n({},f,{id:b,role:"menuitem",tabIndex:-1,className:K(c,S),"aria-disabled":!0===a||void 0,onClick:x,onFocus:I,onPointerMove:g,onPointerLeave:R}),S,q)},function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(U||(U={})),function(e){e[e.OpenListbox=0]="OpenListbox",e[e.CloseListbox=1]="CloseListbox",e[e.GoToOption=2]="GoToOption",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterOption=5]="RegisterOption",e[e.UnregisterOption=6]="UnregisterOption"}(H||(H={})),function(e){e[e.First=0]="First",e[e.Previous=1]="Previous",e[e.Next=2]="Next",e[e.Last=3]="Last",e[e.Specific=4]="Specific",e[e.Nothing=5]="Nothing"}(Q||(Q={}));var Y=((j={})[H.CloseListbox]=function(e){return n({},e,{listboxState:U.Closed})},j[H.OpenListbox]=function(e){return n({},e,{listboxState:U.Open})},j[H.GoToOption]=function(e,t){var r=function(e,n,t){var r,o;if(e.options.length<=0)return null;var i=e.options,u=null!==(r=e.activeOptionIndex)&&void 0!==r?r:-1,a=f(n,((o={})[Q.First]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},o[Q.Previous]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==u&&t.length-n-1>=u||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},o[Q.Next]=function(){return i.findIndex((function(e,n){return!(n<=u||e.dataRef.current.disabled)}))},o[Q.Last]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},o[Q.Specific]=function(){return i.findIndex((function(e){return e.id===t}))},o[Q.Nothing]=function(){return null},o));return-1===a?e.activeOptionIndex:a}(e,t.focus,t.id);return""===e.searchQuery&&e.activeOptionIndex===r?e:n({},e,{searchQuery:"",activeOptionIndex:r})},j[H.Search]=function(e,t){var r=e.searchQuery+t.value,o=e.options.findIndex((function(e){var n;return!e.dataRef.current.disabled&&(null===(n=e.dataRef.current.textValue)||void 0===n?void 0:n.startsWith(r))}));return n({},e,-1===o||o===e.activeOptionIndex?{searchQuery:r}:{searchQuery:r,activeOptionIndex:o})},j[H.ClearSearch]=function(e){return n({},e,{searchQuery:""})},j[H.RegisterOption]=function(e,t){return n({},e,{options:[].concat(e.options,[{id:t.id,dataRef:t.dataRef}])})},j[H.UnregisterOption]=function(e,t){var r=e.options.slice(),o=null!==e.activeOptionIndex?r[e.activeOptionIndex]:null,i=r.findIndex((function(e){return e.id===t.id}));return-1!==i&&r.splice(i,1),n({},e,{options:r,activeOptionIndex:i===e.activeOptionIndex||null===o?null:r.indexOf(o)})},j),_=e.createContext(null);function $(e,n){return f(n.type,Y,e,n)}function z(n){var t=e.useContext(_);if(null===t){var r=new Error("<"+n+" /> is missing a parent <"+X.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,z),r}return t}var J=e.Fragment;function X(n){var r=n.value,o=n.onChange,u=t(n,["value","onChange"]),a=F(),c=e.useReducer($,{listboxState:U.Closed,propsRef:{current:{value:r,onChange:o}},labelRef:e.createRef(),buttonRef:e.createRef(),optionsRef:e.createRef(),options:[],searchQuery:"",activeOptionIndex:null}),l=c[0],s=l.listboxState,f=l.propsRef,d=l.optionsRef,v=l.buttonRef,p=c[1];i((function(){f.current.value=r}),[r,f]),i((function(){f.current.onChange=o}),[o,f]),e.useEffect((function(){function e(e){var n,t,r;s===U.Open&&((null===(n=v.current)||void 0===n?void 0:n.contains(e.target))||(null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||(p({type:H.CloseListbox}),e.defaultPrevented||null===(r=v.current)||void 0===r||r.focus()))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[s,d,v,a,p]);var m=e.useMemo((function(){return{open:s===U.Open}}),[s]);return e.createElement(_.Provider,{value:c},E(u,m,J))}var Z=T((function t(r,o){var i,u=z([X.name,t.name].join(".")),a=u[0],c=u[1],s=D(a.buttonRef,o),f=e.useState(!1),d=f[0],v=f[1],p="headlessui-listbox-button-"+l(),m=F(),b=e.useCallback((function(e){switch(e.key){case x.Space:case x.Enter:case x.ArrowDown:e.preventDefault(),c({type:H.OpenListbox}),m.nextFrame((function(){var e;null===(e=a.optionsRef.current)||void 0===e||e.focus(),a.propsRef.current.value||c({type:H.GoToOption,focus:Q.First})}));break;case x.ArrowUp:e.preventDefault(),c({type:H.OpenListbox}),m.nextFrame((function(){var e;null===(e=a.optionsRef.current)||void 0===e||e.focus(),a.propsRef.current.value||c({type:H.GoToOption,focus:Q.Last})}))}}),[c,a,m]),h=e.useCallback((function(e){a.listboxState===U.Open?c({type:H.CloseListbox}):(e.preventDefault(),c({type:H.OpenListbox}),m.nextFrame((function(){var e;return null===(e=a.optionsRef.current)||void 0===e?void 0:e.focus()})))}),[c,m,a]),y=e.useCallback((function(){var e;if(a.listboxState===U.Open)return null===(e=a.optionsRef.current)||void 0===e?void 0:e.focus();v(!0)}),[a,v]),I=e.useCallback((function(){return v(!1)}),[v]),g=W((function(){if(a.labelRef.current)return[a.labelRef.current.id,p].join(" ")}),[a.labelRef.current,p]),C=e.useMemo((function(){return{open:a.listboxState===U.Open,focused:d}}),[a,d]);return E(n({},r,{ref:s,id:p,type:"button","aria-haspopup":!0,"aria-controls":null===(i=a.optionsRef.current)||void 0===i?void 0:i.id,"aria-expanded":a.listboxState===U.Open||void 0,"aria-labelledby":g,onKeyDown:b,onFocus:y,onBlur:I,onPointerUp:h}),C,"button")})),ee=T((function r(o,i){var u,a=o.static,c=void 0!==a&&a,s=t(o,["enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","static"]),f=z([X.name,r.name].join(".")),d=f[0],v=f[1],p=D(d.optionsRef,i),m="headlessui-listbox-options-"+l(),b=F(),h=F(),y=e.useCallback((function(e){switch(h.dispose(),e.key){case x.Space:if(""!==d.searchQuery)return e.preventDefault(),v({type:H.Search,value:e.key});case x.Enter:e.preventDefault(),v({type:H.CloseListbox}),null!==d.activeOptionIndex&&d.propsRef.current.onChange(d.options[d.activeOptionIndex].dataRef.current.value),b.nextFrame((function(){var e;return null===(e=d.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case x.ArrowDown:return e.preventDefault(),v({type:H.GoToOption,focus:Q.Next});case x.ArrowUp:return e.preventDefault(),v({type:H.GoToOption,focus:Q.Previous});case x.Home:case x.PageUp:return e.preventDefault(),v({type:H.GoToOption,focus:Q.First});case x.End:case x.PageDown:return e.preventDefault(),v({type:H.GoToOption,focus:Q.Last});case x.Escape:return e.preventDefault(),v({type:H.CloseListbox}),b.nextFrame((function(){var e;return null===(e=d.buttonRef.current)||void 0===e?void 0:e.focus()}));case x.Tab:return e.preventDefault();default:1===e.key.length&&(v({type:H.Search,value:e.key}),h.setTimeout((function(){return v({type:H.ClearSearch})}),350))}}),[b,v,h,d]),I=W((function(){var e,n,t;return null!==(e=null===(n=d.labelRef.current)||void 0===n?void 0:n.id)&&void 0!==e?e:null===(t=d.buttonRef.current)||void 0===t?void 0:t.id}),[d.labelRef.current,d.buttonRef.current]),g=e.useMemo((function(){return{open:d.listboxState===U.Open}}),[d]),C={"aria-activedescendant":null===d.activeOptionIndex||null===(u=d.options[d.activeOptionIndex])||void 0===u?void 0:u.id,"aria-labelledby":I,id:m,onKeyDown:y,role:"listbox",tabIndex:0};return c||d.listboxState!==U.Closed?E(n({},s,C,{ref:p}),g,"ul"):null}));function ne(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}X.Button=Z,X.Label=function t(r){var o=z([X.name,t.name].join("."))[0],i="headlessui-listbox-label-"+l(),u=e.useCallback((function(){var e;return null===(e=o.buttonRef.current)||void 0===e?void 0:e.focus()}),[o.buttonRef]),a=e.useMemo((function(){return{open:o.listboxState===U.Open}}),[o]);return E(n({},r,{ref:o.labelRef,id:i,onPointerUp:u}),a,"label")},X.Options=ee,X.Option=function r(o){var u=o.disabled,a=void 0!==u&&u,c=o.value,s=o.className,f=t(o,["disabled","value","className"]),v=z([X.name,r.name].join(".")),p=v[0],m=v[1],b=F(),h="headlessui-listbox-option-"+l(),y=null!==p.activeOptionIndex&&p.options[p.activeOptionIndex].id===h,x=p.propsRef.current.value===c,I=e.useRef({disabled:a,value:c});i((function(){I.current.disabled=a}),[I,a]),i((function(){I.current.value=c}),[I,c]),i((function(){var e,n;I.current.textValue=null===(e=document.getElementById(h))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[I,h]);var g=e.useCallback((function(){return p.propsRef.current.onChange(c)}),[p.propsRef,c]);i((function(){return m({type:H.RegisterOption,id:h,dataRef:I}),function(){return m({type:H.UnregisterOption,id:h})}}),[I,h]),i((function(){var e,n;x&&(m({type:H.GoToOption,focus:Q.Specific,id:h}),null===(e=document.getElementById(h))||void 0===e||null===(n=e.focus)||void 0===n||n.call(e))}),[]),i((function(){if(y){var e=d();return e.nextFrame((function(){var e,n;return null===(e=document.getElementById(h))||void 0===e||null===(n=e.scrollIntoView)||void 0===n?void 0:n.call(e,{block:"nearest"})})),e.dispose}}),[y]);var C=e.useCallback((function(e){if(a)return e.preventDefault();g(),m({type:H.CloseListbox}),b.nextFrame((function(){var e;return null===(e=p.buttonRef.current)||void 0===e?void 0:e.focus()}))}),[b,m,p.buttonRef,a,g]),O=e.useCallback((function(){if(a)return m({type:H.GoToOption,focus:Q.Nothing});m({type:H.GoToOption,focus:Q.Specific,id:h})}),[a,h,m]),R=e.useCallback((function(){a||y||m({type:H.GoToOption,focus:Q.Specific,id:h})}),[a,y,h,m]),S=e.useCallback((function(){a||y&&m({type:H.GoToOption,focus:Q.Nothing})}),[a,y,m]),w=e.useMemo((function(){return{active:y,selected:x,disabled:a}}),[y,x,a]);return E(n({},f,{id:h,role:"option",tabIndex:-1,className:ne(s,w),"aria-disabled":!0===a||void 0,"aria-selected":!0===x||void 0,onClick:C,onFocus:O,onPointerMove:R,onPointerLeave:S}),w,"li")};var te=e.createContext(null);function re(n){var t=e.useContext(te);if(null===t){var r=new Error("<"+n+" /> is missing a parent <Switch.Group /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,re),r}return t}var oe=e.Fragment;function ie(r){var o,i=r.checked,u=r.onChange,a=r.className,c=t(r,["checked","onChange","className"]),s="headlessui-switch-"+l(),f=e.useContext(te),d=e.useCallback((function(){return u(!i)}),[u,i]),v=e.useCallback((function(e){e.preventDefault(),d()}),[d]),p=e.useCallback((function(e){e.preventDefault(),e.key===x.Space&&d()}),[d]),m=e.useMemo((function(){return{checked:i}}),[i]);return E(n({},c,{id:s,ref:null===f?void 0:f.setSwitch,role:"switch",tabIndex:0,className:ue(a,m),"aria-checked":i,"aria-labelledby":null==f||null===(o=f.label)||void 0===o?void 0:o.id,onClick:v,onKeyDown:p}),m,"button")}function ue(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}ie.Group=function(n){var t=e.useState(null),r=t[0],o=t[1],i=e.useState(null),u=i[0],a=i[1],c=e.useMemo((function(){return{switch:r,label:u,setSwitch:o,setLabel:a}}),[r,o,u,a]);return e.createElement(te.Provider,{value:c},E(n,{},oe))},ie.Label=function t(r){var o=re([ie.name,t.name].join(".")),i="headlessui-switch-label-"+l(),u=e.useCallback((function(){o.switch&&(o.switch.click(),o.switch.focus())}),[o.switch]);return E(n({},r,{ref:o.setLabel,id:i,onPointerUp:u}),{},"label")},exports.Listbox=X,exports.Menu=N,exports.Switch=ie,exports.Transition=k;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function n(){return(n=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function t(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(o[t]=e[t]);return o}function r(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var o,i="undefined"!=typeof window?e.useLayoutEffect:e.useEffect,u={serverHandoffComplete:!1},a=0;function c(){return++a}function l(){var n=e.useState(u.serverHandoffComplete?c:null),t=n[0],r=n[1];return i((function(){null===t&&r(c())}),[]),e.useEffect((function(){!1===u.serverHandoffComplete&&(u.serverHandoffComplete=!0)}),[]),null!=t?""+t:void 0}function s(){var n=e.useRef(!0);return e.useEffect((function(){n.current=!1}),[]),n.current}function f(e,n){if(e in n){for(var t=n[e],r=arguments.length,o=new Array(r>2?r-2:0),i=2;i<r;i++)o[i-2]=arguments[i];return"function"==typeof t?t.apply(void 0,o):t}var u=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(n).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(u,f),u}function d(){var e=[],n={requestAnimationFrame:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=requestAnimationFrame.apply(void 0,arguments);n.add((function(){return cancelAnimationFrame(e)}))})),nextFrame:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];n.requestAnimationFrame((function(){n.requestAnimationFrame.apply(n,t)}))},setTimeout:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=setTimeout.apply(void 0,arguments);n.add((function(){return clearTimeout(e)}))})),add:function(n){e.push(n)},dispose:function(){e.splice(0).forEach((function(e){return e()}))}};return n}function v(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).add.apply(n,r)}function p(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).remove.apply(n,r)}function m(e,n,t,r,i){var u=d(),a=void 0!==i?function(e){var n={called:!1};return function(){if(!n.called)return n.called=!0,e.apply(void 0,arguments)}}(i):function(){};return v.apply(void 0,[e].concat(n,t)),u.nextFrame((function(){p.apply(void 0,[e].concat(t)),v.apply(void 0,[e].concat(r)),u.add(function(e,n){var t=d();if(!e)return t.dispose;var r=getComputedStyle(e),i=[r.transitionDuration,r.transitionDelay].map((function(e){var n=e.split(",").filter(Boolean).map((function(e){return e.includes("ms")?parseFloat(e):1e3*parseFloat(e)})).sort((function(e,n){return n-e}))[0];return void 0===n?0:n})),u=i[0];return 0!==u?t.setTimeout((function(){n(o.Finished)}),u+i[1]):n(o.Finished),t.add((function(){return n(o.Cancelled)})),t.dispose}(e,(function(t){return p.apply(void 0,[e].concat(r,n)),a(t)})))})),u.add((function(){return p.apply(void 0,[e].concat(n,t,r))})),u.add((function(){return a(o.Cancelled)})),u.dispose}function b(n){return void 0===n&&(n=""),e.useMemo((function(){return n.split(" ").filter((function(e){return e.trim().length>1}))}),[n])}!function(e){e.Finished="finished",e.Cancelled="cancelled"}(o||(o={}));var h,y=e.createContext(null);!function(e){e.Visible="visible",e.Hidden="hidden"}(h||(h={}));var x,I,g,C,R,O=e.createContext(null);function S(n){var t=e.useRef(n),r=e.useRef([]),o=function(){var n=e.useRef(!0);return e.useEffect((function(){return function(){n.current=!1}}),[]),n}();e.useEffect((function(){t.current=n}),[n]);var i=e.useCallback((function(e){var n,i=r.current.indexOf(e);-1!==i&&(r.current.splice(i,1),r.current.length<=0&&o.current&&(null===(n=t.current)||void 0===n||n.call(t)))}),[t,o,r]),u=e.useCallback((function(e){return r.current.push(e),function(){return i(e)}}),[r,i]);return e.useMemo((function(){return{children:r,register:u,unregister:i}}),[u,i,r])}function w(n){var r=n.children,u=n.enter,a=n.enterFrom,c=n.enterTo,f=n.leave,d=n.leaveFrom,v=n.leaveTo,p=t(n,["children","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo"]),x=e.useRef(null),I=e.useState(h.Visible),g=I[0],C=I[1],R=function(){var n=e.useContext(y);if(null===n)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return n}(),w=R.show,k=R.appear,E=function(){var n=e.useContext(O);if(null===n)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return n}(),T=E.register,F=E.unregister,D=s(),L=l(),P=e.useRef(!1),M=S((function(){P.current||(C(h.Hidden),F(L))}));i((function(){if(L)return T(L)}),[T,L]);var A=b(u),G=b(a),N=b(c),j=b(f),U=b(d),H=b(v);e.useEffect((function(){if(g===h.Visible&&null===x.current)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}),[x,g]);var Q=D&&!k;if(i((function(){var e=x.current;if(e&&!Q)return P.current=!0,w?m(e,A,G,N,(function(){P.current=!1})):m(e,j,U,H,(function(e){P.current=!1,e===o.Finished&&M.children.current.length<=0&&(C(h.Hidden),F(L))}))}),[L,P,F,M,x,Q,w,A,G,N,j,U,H]),g===h.Hidden)return null;if("function"==typeof r)return e.createElement(O.Provider,{value:M},r(x));var B=p.as,V=void 0===B?"div":B,q=t(p,["as"]);return e.createElement(O.Provider,{value:M},e.createElement(V,Object.assign({},q,{ref:x}),r))}function k(n){var r,o=n.show,i=n.appear,u=void 0!==i&&i,a=t(n,["show","appear"]);if(![!0,!1].includes(o))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");var c=e.useState(o?h.Visible:h.Hidden),l=c[0],d=c[1],v=S((function(){d(h.Hidden)})),p=s(),m=e.useMemo((function(){return{show:o,appear:u||!p}}),[o,u,p]);return e.useEffect((function(){o?d(h.Visible):v.children.current.length<=0&&d(h.Hidden)}),[o,v]),e.createElement(O.Provider,{value:v},e.createElement(y.Provider,{value:m},f(l,((r={})[h.Visible]=function(){return e.createElement(w,Object.assign({},a))},r[h.Hidden]=null,r))))}function E(n,o,i){var u=n.as,a=void 0===u?i:u,c=n.children,l=t(n,["as","children"]),s="function"==typeof c?c(o):c;if(a===e.Fragment&&Object.keys(l).length>0){if(Array.isArray(s)&&s.length>1){var f=new Error("You should only render 1 child");throw Error.captureStackTrace&&Error.captureStackTrace(f,E),f}if(!e.isValidElement(s)){var d=new Error('You should render an element as a child. Did you forget the as="..." prop?');throw Error.captureStackTrace&&Error.captureStackTrace(d,E),d}return e.cloneElement(s,function(e,n,t){for(var o,i=Object.assign({},e),u=function(){var t,r=o.value;void 0!==e[r]&&void 0!==n[r]&&Object.assign(i,((t={})[r]=function(t){t.defaultPrevented||e[r](t),t.defaultPrevented||n[r](t)},t))},a=function(e,n){var t;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(t=function(e,n){if(e){if("string"==typeof e)return r(e,void 0);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?r(e,void 0):void 0}}(e))){t&&(e=t);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(t=e[Symbol.iterator]()).next.bind(t)}(["onClick"]);!(o=a()).done;)u();return i}(function(e){var n=Object.assign({},e);for(var t in n)void 0===n[t]&&delete n[t];return n}(l),s.props))}return e.createElement(a,l,s)}function T(n){return e.forwardRef(n)}function F(){var n=e.useState(d)[0];return e.useEffect((function(){return function(){return n.dispose()}}),[n]),n}function D(){for(var n=arguments.length,t=new Array(n),r=0;r<n;r++)t[r]=arguments[r];return e.useCallback((function(e){t.forEach((function(n){if(null!==n)return"function"==typeof n?n(e):void(n.current=e)}))}),[t])}k.Child=w,function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(x||(x={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(g||(g={})),function(e){e[e.OpenMenu=0]="OpenMenu",e[e.CloseMenu=1]="CloseMenu",e[e.GoToItem=2]="GoToItem",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterItem=5]="RegisterItem",e[e.UnregisterItem=6]="UnregisterItem"}(C||(C={})),function(e){e[e.FirstItem=0]="FirstItem",e[e.PreviousItem=1]="PreviousItem",e[e.NextItem=2]="NextItem",e[e.LastItem=3]="LastItem",e[e.SpecificItem=4]="SpecificItem",e[e.Nothing=5]="Nothing"}(R||(R={}));var L=((I={})[C.CloseMenu]=function(e){return n({},e,{menuState:g.Closed})},I[C.OpenMenu]=function(e){return n({},e,{menuState:g.Open})},I[C.GoToItem]=function(e,t){var r=function(e,n,t){var r,o;if(e.items.length<=0)return null;var i=e.items,u=null!==(r=e.activeItemIndex)&&void 0!==r?r:-1,a=f(n,((o={})[R.FirstItem]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},o[R.PreviousItem]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==u&&t.length-n-1>=u||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},o[R.NextItem]=function(){return i.findIndex((function(e,n){return!(n<=u||e.dataRef.current.disabled)}))},o[R.LastItem]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},o[R.SpecificItem]=function(){return i.findIndex((function(e){return e.id===t}))},o[R.Nothing]=function(){return null},o));return-1===a?e.activeItemIndex:a}(e,t.focus,t.id);return""===e.searchQuery&&e.activeItemIndex===r?e:n({},e,{searchQuery:"",activeItemIndex:r})},I[C.Search]=function(e,t){var r=e.searchQuery+t.value,o=e.items.findIndex((function(e){var n;return(null===(n=e.dataRef.current.textValue)||void 0===n?void 0:n.startsWith(r))&&!e.dataRef.current.disabled}));return n({},e,-1===o||o===e.activeItemIndex?{searchQuery:r}:{searchQuery:r,activeItemIndex:o})},I[C.ClearSearch]=function(e){return n({},e,{searchQuery:""})},I[C.RegisterItem]=function(e,t){return n({},e,{items:[].concat(e.items,[{id:t.id,dataRef:t.dataRef}])})},I[C.UnregisterItem]=function(e,t){var r=e.items.slice(),o=null!==e.activeItemIndex?r[e.activeItemIndex]:null,i=r.findIndex((function(e){return e.id===t.id}));return-1!==i&&r.splice(i,1),n({},e,{items:r,activeItemIndex:i===e.activeItemIndex||null===o?null:r.indexOf(o)})},I),P=e.createContext(null);function M(n){var t=e.useContext(P);if(null===t){var r=new Error("<"+n+" /> is missing a parent <"+N.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,M),r}return t}function A(e,n){return f(n.type,L,e,n)}var G=e.Fragment;function N(n){var t=F(),r=e.useReducer(A,{menuState:g.Closed,buttonRef:e.createRef(),itemsRef:e.createRef(),items:[],searchQuery:"",activeItemIndex:null}),o=r[0],i=o.menuState,u=o.itemsRef,a=o.buttonRef,c=r[1];e.useEffect((function(){function e(e){var n,r;i===g.Open&&((null===(n=a.current)||void 0===n?void 0:n.contains(e.target))||((null===(r=u.current)||void 0===r?void 0:r.contains(e.target))||c({type:C.CloseMenu}),e.defaultPrevented||t.nextFrame((function(){var e;return null===(e=a.current)||void 0===e?void 0:e.focus()}))))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[i,u,a,t,c]);var l=e.useMemo((function(){return{open:i===g.Open}}),[i]);return e.createElement(P.Provider,{value:r},E(n,l,G))}var j,U,H,Q,B=T((function t(r,o){var i,u=M([N.name,t.name].join(".")),a=u[0],c=u[1],s=D(a.buttonRef,o),f=e.useState(!1),d=f[0],v=f[1],p="headlessui-menu-button-"+l(),m=F(),b=e.useCallback((function(e){switch(e.key){case x.Space:case x.Enter:case x.ArrowDown:e.preventDefault(),c({type:C.OpenMenu}),m.nextFrame((function(){var e;null===(e=a.itemsRef.current)||void 0===e||e.focus(),c({type:C.GoToItem,focus:R.FirstItem})}));break;case x.ArrowUp:e.preventDefault(),c({type:C.OpenMenu}),m.nextFrame((function(){var e;null===(e=a.itemsRef.current)||void 0===e||e.focus(),c({type:C.GoToItem,focus:R.LastItem})}))}}),[c,a,m]),h=e.useCallback((function(e){a.menuState===g.Open?(c({type:C.CloseMenu}),m.nextFrame((function(){var e;return null===(e=a.buttonRef.current)||void 0===e?void 0:e.focus()}))):(e.preventDefault(),c({type:C.OpenMenu}),m.nextFrame((function(){var e;return null===(e=a.itemsRef.current)||void 0===e?void 0:e.focus()})))}),[c,m,a]),y=e.useCallback((function(){var e;a.menuState===g.Open&&(null===(e=a.itemsRef.current)||void 0===e||e.focus()),v(!0)}),[a,v]),I=e.useCallback((function(){return v(!1)}),[v]),O=e.useMemo((function(){return{open:a.menuState===g.Open,focused:d}}),[a,d]);return E(n({},r,{ref:s,id:p,type:"button","aria-haspopup":!0,"aria-controls":null===(i=a.itemsRef.current)||void 0===i?void 0:i.id,"aria-expanded":a.menuState===g.Open||void 0,onKeyDown:b,onFocus:y,onBlur:I,onPointerUp:h}),O,"button")})),V=T((function r(o,i){var u,a,c=o.static,s=void 0!==c&&c,f=t(o,["static"]),v=M([N.name,r.name].join(".")),p=v[0],m=v[1],b=D(p.itemsRef,i),h="headlessui-menu-items-"+l(),y=F(),I=e.useCallback((function(e){switch(y.dispose(),e.key){case x.Space:if(""!==p.searchQuery)return e.preventDefault(),m({type:C.Search,value:e.key});case x.Enter:var n;e.preventDefault(),m({type:C.CloseMenu}),null!==p.activeItemIndex&&(null===(n=document.getElementById(p.items[p.activeItemIndex].id))||void 0===n||n.click()),d().nextFrame((function(){var e;return null===(e=p.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case x.ArrowDown:return e.preventDefault(),m({type:C.GoToItem,focus:R.NextItem});case x.ArrowUp:return e.preventDefault(),m({type:C.GoToItem,focus:R.PreviousItem});case x.Home:case x.PageUp:return e.preventDefault(),m({type:C.GoToItem,focus:R.FirstItem});case x.End:case x.PageDown:return e.preventDefault(),m({type:C.GoToItem,focus:R.LastItem});case x.Escape:e.preventDefault(),m({type:C.CloseMenu}),d().nextFrame((function(){var e;return null===(e=p.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case x.Tab:return e.preventDefault();default:1===e.key.length&&(m({type:C.Search,value:e.key}),y.setTimeout((function(){return m({type:C.ClearSearch})}),350))}}),[m,y,p]),O=e.useMemo((function(){return{open:p.menuState===g.Open}}),[p]),S={"aria-activedescendant":null===p.activeItemIndex||null===(u=p.items[p.activeItemIndex])||void 0===u?void 0:u.id,"aria-labelledby":null===(a=p.buttonRef.current)||void 0===a?void 0:a.id,id:h,onKeyDown:I,role:"menu",tabIndex:0};return s||p.menuState!==g.Closed?E(n({},f,S,{ref:b}),O,"div"):null})),q=e.Fragment;function K(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}function W(n,t){var r=e.useState(n),o=r[0],u=r[1],a=e.useRef(n);return i((function(){a.current=n}),[n]),i((function(){return u(a.current)}),[a,u].concat(t)),o}N.Button=B,N.Items=V,N.Item=function r(o){var u=o.disabled,a=void 0!==u&&u,c=o.className,s=o.onClick,f=t(o,["disabled","className","onClick"]),d=M([N.name,r.name].join(".")),v=d[0],p=d[1],m=F(),b="headlessui-menu-item-"+l(),h=null!==v.activeItemIndex&&v.items[v.activeItemIndex].id===b,y=e.useRef({disabled:a});i((function(){y.current.disabled=a}),[y,a]),i((function(){var e,n;y.current.textValue=null===(e=document.getElementById(b))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[y,b]),i((function(){return p({type:C.RegisterItem,id:b,dataRef:y}),function(){return p({type:C.UnregisterItem,id:b})}}),[y,b]);var x=e.useCallback((function(e){return a?e.preventDefault():(p({type:C.CloseMenu}),m.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()})),s?s(e):void 0)}),[m,p,v.buttonRef,a,s]),I=e.useCallback((function(){if(a)return p({type:C.GoToItem,focus:R.Nothing});p({type:C.GoToItem,focus:R.SpecificItem,id:b})}),[a,b,p]),g=e.useCallback((function(){a||h||p({type:C.GoToItem,focus:R.SpecificItem,id:b})}),[a,h,b,p]),O=e.useCallback((function(){a||h&&p({type:C.GoToItem,focus:R.Nothing})}),[a,h,p]),S=e.useMemo((function(){return{active:h,disabled:a}}),[h,a]);return E(n({},f,{id:b,role:"menuitem",tabIndex:-1,className:K(c,S),"aria-disabled":!0===a||void 0,onClick:x,onFocus:I,onPointerMove:g,onPointerLeave:O}),S,q)},function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(U||(U={})),function(e){e[e.OpenListbox=0]="OpenListbox",e[e.CloseListbox=1]="CloseListbox",e[e.GoToOption=2]="GoToOption",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterOption=5]="RegisterOption",e[e.UnregisterOption=6]="UnregisterOption"}(H||(H={})),function(e){e[e.First=0]="First",e[e.Previous=1]="Previous",e[e.Next=2]="Next",e[e.Last=3]="Last",e[e.Specific=4]="Specific",e[e.Nothing=5]="Nothing"}(Q||(Q={}));var Y=((j={})[H.CloseListbox]=function(e){return n({},e,{listboxState:U.Closed})},j[H.OpenListbox]=function(e){return n({},e,{listboxState:U.Open})},j[H.GoToOption]=function(e,t){var r=function(e,n,t){var r,o;if(e.options.length<=0)return null;var i=e.options,u=null!==(r=e.activeOptionIndex)&&void 0!==r?r:-1,a=f(n,((o={})[Q.First]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},o[Q.Previous]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==u&&t.length-n-1>=u||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},o[Q.Next]=function(){return i.findIndex((function(e,n){return!(n<=u||e.dataRef.current.disabled)}))},o[Q.Last]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},o[Q.Specific]=function(){return i.findIndex((function(e){return e.id===t}))},o[Q.Nothing]=function(){return null},o));return-1===a?e.activeOptionIndex:a}(e,t.focus,t.id);return""===e.searchQuery&&e.activeOptionIndex===r?e:n({},e,{searchQuery:"",activeOptionIndex:r})},j[H.Search]=function(e,t){var r=e.searchQuery+t.value,o=e.options.findIndex((function(e){var n;return!e.dataRef.current.disabled&&(null===(n=e.dataRef.current.textValue)||void 0===n?void 0:n.startsWith(r))}));return n({},e,-1===o||o===e.activeOptionIndex?{searchQuery:r}:{searchQuery:r,activeOptionIndex:o})},j[H.ClearSearch]=function(e){return n({},e,{searchQuery:""})},j[H.RegisterOption]=function(e,t){return n({},e,{options:[].concat(e.options,[{id:t.id,dataRef:t.dataRef}])})},j[H.UnregisterOption]=function(e,t){var r=e.options.slice(),o=null!==e.activeOptionIndex?r[e.activeOptionIndex]:null,i=r.findIndex((function(e){return e.id===t.id}));return-1!==i&&r.splice(i,1),n({},e,{options:r,activeOptionIndex:i===e.activeOptionIndex||null===o?null:r.indexOf(o)})},j),_=e.createContext(null);function $(e,n){return f(n.type,Y,e,n)}function z(n){var t=e.useContext(_);if(null===t){var r=new Error("<"+n+" /> is missing a parent <"+X.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,z),r}return t}var J=e.Fragment;function X(n){var r=n.value,o=n.onChange,u=t(n,["value","onChange"]),a=F(),c=e.useReducer($,{listboxState:U.Closed,propsRef:{current:{value:r,onChange:o}},labelRef:e.createRef(),buttonRef:e.createRef(),optionsRef:e.createRef(),options:[],searchQuery:"",activeOptionIndex:null}),l=c[0],s=l.listboxState,f=l.propsRef,d=l.optionsRef,v=l.buttonRef,p=c[1];i((function(){f.current.value=r}),[r,f]),i((function(){f.current.onChange=o}),[o,f]),e.useEffect((function(){function e(e){var n,t;s===U.Open&&((null===(n=v.current)||void 0===n?void 0:n.contains(e.target))||((null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||p({type:H.CloseListbox}),e.defaultPrevented||a.nextFrame((function(){var e;return null===(e=v.current)||void 0===e?void 0:e.focus()}))))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[s,d,v,a,p]);var m=e.useMemo((function(){return{open:s===U.Open}}),[s]);return e.createElement(_.Provider,{value:c},E(u,m,J))}var Z=T((function t(r,o){var i,u=z([X.name,t.name].join(".")),a=u[0],c=u[1],s=D(a.buttonRef,o),f=e.useState(!1),d=f[0],v=f[1],p="headlessui-listbox-button-"+l(),m=F(),b=e.useCallback((function(e){switch(e.key){case x.Space:case x.Enter:case x.ArrowDown:e.preventDefault(),c({type:H.OpenListbox}),m.nextFrame((function(){var e;null===(e=a.optionsRef.current)||void 0===e||e.focus(),a.propsRef.current.value||c({type:H.GoToOption,focus:Q.First})}));break;case x.ArrowUp:e.preventDefault(),c({type:H.OpenListbox}),m.nextFrame((function(){var e;null===(e=a.optionsRef.current)||void 0===e||e.focus(),a.propsRef.current.value||c({type:H.GoToOption,focus:Q.Last})}))}}),[c,a,m]),h=e.useCallback((function(e){a.listboxState===U.Open?(c({type:H.CloseListbox}),m.nextFrame((function(){var e;return null===(e=a.buttonRef.current)||void 0===e?void 0:e.focus()}))):(e.preventDefault(),c({type:H.OpenListbox}),m.nextFrame((function(){var e;return null===(e=a.optionsRef.current)||void 0===e?void 0:e.focus()})))}),[c,m,a]),y=e.useCallback((function(){var e;if(a.listboxState===U.Open)return null===(e=a.optionsRef.current)||void 0===e?void 0:e.focus();v(!0)}),[a,v]),I=e.useCallback((function(){return v(!1)}),[v]),g=W((function(){if(a.labelRef.current)return[a.labelRef.current.id,p].join(" ")}),[a.labelRef.current,p]),C=e.useMemo((function(){return{open:a.listboxState===U.Open,focused:d}}),[a,d]);return E(n({},r,{ref:s,id:p,type:"button","aria-haspopup":!0,"aria-controls":null===(i=a.optionsRef.current)||void 0===i?void 0:i.id,"aria-expanded":a.listboxState===U.Open||void 0,"aria-labelledby":g,onKeyDown:b,onFocus:y,onBlur:I,onPointerUp:h}),C,"button")})),ee=T((function r(o,i){var u,a=o.static,c=void 0!==a&&a,s=t(o,["enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","static"]),f=z([X.name,r.name].join(".")),v=f[0],p=f[1],m=D(v.optionsRef,i),b="headlessui-listbox-options-"+l(),h=F(),y=F(),I=e.useCallback((function(e){switch(y.dispose(),e.key){case x.Space:if(""!==v.searchQuery)return e.preventDefault(),p({type:H.Search,value:e.key});case x.Enter:e.preventDefault(),p({type:H.CloseListbox}),null!==v.activeOptionIndex&&v.propsRef.current.onChange(v.options[v.activeOptionIndex].dataRef.current.value),d().nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case x.ArrowDown:return e.preventDefault(),p({type:H.GoToOption,focus:Q.Next});case x.ArrowUp:return e.preventDefault(),p({type:H.GoToOption,focus:Q.Previous});case x.Home:case x.PageUp:return e.preventDefault(),p({type:H.GoToOption,focus:Q.First});case x.End:case x.PageDown:return e.preventDefault(),p({type:H.GoToOption,focus:Q.Last});case x.Escape:return e.preventDefault(),p({type:H.CloseListbox}),h.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()}));case x.Tab:return e.preventDefault();default:1===e.key.length&&(p({type:H.Search,value:e.key}),y.setTimeout((function(){return p({type:H.ClearSearch})}),350))}}),[h,p,y,v]),g=W((function(){var e,n,t;return null!==(e=null===(n=v.labelRef.current)||void 0===n?void 0:n.id)&&void 0!==e?e:null===(t=v.buttonRef.current)||void 0===t?void 0:t.id}),[v.labelRef.current,v.buttonRef.current]),C=e.useMemo((function(){return{open:v.listboxState===U.Open}}),[v]),R={"aria-activedescendant":null===v.activeOptionIndex||null===(u=v.options[v.activeOptionIndex])||void 0===u?void 0:u.id,"aria-labelledby":g,id:b,onKeyDown:I,role:"listbox",tabIndex:0};return c||v.listboxState!==U.Closed?E(n({},s,R,{ref:m}),C,"ul"):null}));function ne(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}X.Button=Z,X.Label=function t(r){var o=z([X.name,t.name].join("."))[0],i="headlessui-listbox-label-"+l(),u=e.useCallback((function(){var e;return null===(e=o.buttonRef.current)||void 0===e?void 0:e.focus()}),[o.buttonRef]),a=e.useMemo((function(){return{open:o.listboxState===U.Open}}),[o]);return E(n({},r,{ref:o.labelRef,id:i,onPointerUp:u}),a,"label")},X.Options=ee,X.Option=function r(o){var u=o.disabled,a=void 0!==u&&u,c=o.value,s=o.className,f=t(o,["disabled","value","className"]),v=z([X.name,r.name].join(".")),p=v[0],m=v[1],b="headlessui-listbox-option-"+l(),h=null!==p.activeOptionIndex&&p.options[p.activeOptionIndex].id===b,y=p.propsRef.current.value===c,x=e.useRef({disabled:a,value:c});i((function(){x.current.disabled=a}),[x,a]),i((function(){x.current.value=c}),[x,c]),i((function(){var e,n;x.current.textValue=null===(e=document.getElementById(b))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[x,b]);var I=e.useCallback((function(){return p.propsRef.current.onChange(c)}),[p.propsRef,c]);i((function(){return m({type:H.RegisterOption,id:b,dataRef:x}),function(){return m({type:H.UnregisterOption,id:b})}}),[x,b]),i((function(){var e,n;y&&(m({type:H.GoToOption,focus:Q.Specific,id:b}),null===(e=document.getElementById(b))||void 0===e||null===(n=e.focus)||void 0===n||n.call(e))}),[]),i((function(){if(h){var e=d();return e.nextFrame((function(){var e,n;return null===(e=document.getElementById(b))||void 0===e||null===(n=e.scrollIntoView)||void 0===n?void 0:n.call(e,{block:"nearest"})})),e.dispose}}),[h]);var g=e.useCallback((function(e){if(a)return e.preventDefault();I(),m({type:H.CloseListbox}),d().nextFrame((function(){var e;return null===(e=p.buttonRef.current)||void 0===e?void 0:e.focus()}))}),[m,p.buttonRef,a,I]),C=e.useCallback((function(){if(a)return m({type:H.GoToOption,focus:Q.Nothing});m({type:H.GoToOption,focus:Q.Specific,id:b})}),[a,b,m]),R=e.useCallback((function(){a||h||m({type:H.GoToOption,focus:Q.Specific,id:b})}),[a,h,b,m]),O=e.useCallback((function(){a||h&&m({type:H.GoToOption,focus:Q.Nothing})}),[a,h,m]),S=e.useMemo((function(){return{active:h,selected:y,disabled:a}}),[h,y,a]);return E(n({},f,{id:b,role:"option",tabIndex:-1,className:ne(s,S),"aria-disabled":!0===a||void 0,"aria-selected":!0===y||void 0,onClick:g,onFocus:C,onPointerMove:R,onPointerLeave:O}),S,"li")};var te=e.createContext(null);function re(n){var t=e.useContext(te);if(null===t){var r=new Error("<"+n+" /> is missing a parent <Switch.Group /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,re),r}return t}var oe=e.Fragment;function ie(r){var o,i=r.checked,u=r.onChange,a=r.className,c=t(r,["checked","onChange","className"]),s="headlessui-switch-"+l(),f=e.useContext(te),d=e.useCallback((function(){return u(!i)}),[u,i]),v=e.useCallback((function(e){e.preventDefault(),d()}),[d]),p=e.useCallback((function(e){e.key===x.Space&&(e.preventDefault(),d())}),[d]),m=e.useMemo((function(){return{checked:i}}),[i]);return E(n({},c,{id:s,ref:null===f?void 0:f.setSwitch,role:"switch",tabIndex:0,className:ue(a,m),"aria-checked":i,"aria-labelledby":null==f||null===(o=f.label)||void 0===o?void 0:o.id,onClick:v,onKeyUp:p}),m,"button")}function ue(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}ie.Group=function(n){var t=e.useState(null),r=t[0],o=t[1],i=e.useState(null),u=i[0],a=i[1],c=e.useMemo((function(){return{switch:r,label:u,setSwitch:o,setLabel:a}}),[r,o,u,a]);return e.createElement(te.Provider,{value:c},E(n,{},oe))},ie.Label=function t(r){var o=re([ie.name,t.name].join(".")),i="headlessui-switch-label-"+l(),u=e.useCallback((function(){o.switch&&(o.switch.click(),o.switch.focus())}),[o.switch]);return E(n({},r,{ref:o.setLabel,id:i,onPointerUp:u}),{},"label")},exports.Listbox=X,exports.Menu=N,exports.Switch=ie,exports.Transition=k;
 //# sourceMappingURL=headlessui.cjs.production.min.js.map

dist/headlessui.umd.production.min.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e=e||self).headlessui={},e.React)}(this,(function(e,n){"use strict";function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function r(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(o[t]=e[t]);return o}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var i,u="undefined"!=typeof window?n.useLayoutEffect:n.useEffect,a={serverHandoffComplete:!1},c=0;function l(){return++c}function s(){var e=n.useState(a.serverHandoffComplete?l:null),t=e[0],r=e[1];return u((function(){null===t&&r(l())}),[]),n.useEffect((function(){!1===a.serverHandoffComplete&&(a.serverHandoffComplete=!0)}),[]),null!=t?""+t:void 0}function f(){var e=n.useRef(!0);return n.useEffect((function(){e.current=!1}),[]),e.current}function d(e,n){if(e in n){for(var t=n[e],r=arguments.length,o=new Array(r>2?r-2:0),i=2;i<r;i++)o[i-2]=arguments[i];return"function"==typeof t?t.apply(void 0,o):t}var u=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(n).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(u,d),u}function v(){var e=[],n={requestAnimationFrame:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=requestAnimationFrame.apply(void 0,arguments);n.add((function(){return cancelAnimationFrame(e)}))})),nextFrame:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];n.requestAnimationFrame((function(){n.requestAnimationFrame.apply(n,t)}))},setTimeout:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=setTimeout.apply(void 0,arguments);n.add((function(){return clearTimeout(e)}))})),add:function(n){e.push(n)},dispose:function(){e.splice(0).forEach((function(e){return e()}))}};return n}function p(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).add.apply(n,r)}function m(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).remove.apply(n,r)}function b(e,n,t,r,o){var u=v(),a=void 0!==o?function(e){var n={called:!1};return function(){if(!n.called)return n.called=!0,e.apply(void 0,arguments)}}(o):function(){};return p.apply(void 0,[e].concat(n,t)),u.nextFrame((function(){m.apply(void 0,[e].concat(t)),p.apply(void 0,[e].concat(r)),u.add(function(e,n){var t=v();if(!e)return t.dispose;var r=getComputedStyle(e),o=[r.transitionDuration,r.transitionDelay].map((function(e){var n=e.split(",").filter(Boolean).map((function(e){return e.includes("ms")?parseFloat(e):1e3*parseFloat(e)})).sort((function(e,n){return n-e}))[0];return void 0===n?0:n})),u=o[0];return 0!==u?t.setTimeout((function(){n(i.Finished)}),u+o[1]):n(i.Finished),t.add((function(){return n(i.Cancelled)})),t.dispose}(e,(function(t){return m.apply(void 0,[e].concat(r,n)),a(t)})))})),u.add((function(){return m.apply(void 0,[e].concat(n,t,r))})),u.add((function(){return a(i.Cancelled)})),u.dispose}function h(e){return void 0===e&&(e=""),n.useMemo((function(){return e.split(" ").filter((function(e){return e.trim().length>1}))}),[e])}!function(e){e.Finished="finished",e.Cancelled="cancelled"}(i||(i={}));var y,x=n.createContext(null);!function(e){e.Visible="visible",e.Hidden="hidden"}(y||(y={}));var I,g,C,O,R,S=n.createContext(null);function w(e){var t=n.useRef([]),r=function(){var e=n.useRef(!0);return n.useEffect((function(){return function(){e.current=!1}}),[]),e}(),o=n.useCallback((function(n){var o=t.current.indexOf(n);-1!==o&&(t.current.splice(o,1),t.current.length<=0&&r.current&&(null==e||e()))}),[e,r,t]),i=n.useCallback((function(e){return t.current.push(e),function(){return o(e)}}),[t,o]);return n.useMemo((function(){return{children:t,register:i,unregister:o}}),[i,o,t])}function k(e){var t=e.children,o=e.enter,a=e.enterFrom,c=e.enterTo,l=e.leave,d=e.leaveFrom,v=e.leaveTo,p=r(e,["children","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo"]),m=n.useRef(null),I=n.useState(y.Visible),g=I[0],C=I[1],O=function(){var e=n.useContext(x);if(null===e)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return e}(),R=O.show,k=O.appear,E=function(){var e=n.useContext(S);if(null===e)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return e}(),T=E.register,F=E.unregister,D=f(),L=s(),P=n.useRef(!1),M=w(n.useCallback((function(){P.current||(C(y.Hidden),F(L))}),[L,F,P]));u((function(){return T(L)}),[T,L]);var A=h(o),G=h(a),N=h(c),j=h(l),U=h(d),H=h(v);if(n.useEffect((function(){if(g===y.Visible&&null===m.current)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}),[m,g]),u((function(){var e=m.current;if(e&&(!D||k))return P.current=!0,R?b(e,A,G,N,(function(){P.current=!1})):b(e,j,U,H,(function(e){P.current=!1,e===i.Finished&&M.children.current.length<=0&&(C(y.Hidden),F(L))}))}),[L,P,F,M,m,D,k,R,A,G,N,j,U,H]),g===y.Hidden)return null;if("function"==typeof t)return n.createElement(S.Provider,{value:M},t(m));var Q=p.as,B=void 0===Q?"div":Q,V=r(p,["as"]);return n.createElement(S.Provider,{value:M},n.createElement(B,Object.assign({},V,{ref:m}),t))}function E(e){var t,o=e.show,i=e.appear,u=void 0!==i&&i,a=r(e,["show","appear"]);if(![!0,!1].includes(o))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");var c=n.useState(o?y.Visible:y.Hidden),l=c[0],s=c[1],v=w(n.useCallback((function(){s(y.Hidden)}),[])),p=f(),m=n.useMemo((function(){return{show:o,appear:u||!p}}),[o,u,p]);return n.useEffect((function(){o?s(y.Visible):v.children.current.length<=0&&s(y.Hidden)}),[o,v]),n.createElement(S.Provider,{value:v},n.createElement(x.Provider,{value:m},d(l,((t={})[y.Visible]=function(){return n.createElement(k,Object.assign({},a))},t[y.Hidden]=null,t))))}function T(e,t,i){var u=e.as,a=void 0===u?i:u,c=e.children,l=r(e,["as","children"]),s="function"==typeof c?c(t):c;if(a===n.Fragment&&Object.keys(l).length>0){if(Array.isArray(s)&&s.length>1){var f=new Error("You should only render 1 child");throw Error.captureStackTrace&&Error.captureStackTrace(f,T),f}if(!n.isValidElement(s)){var d=new Error('You should render an element as a child. Did you forget the as="..." prop?');throw Error.captureStackTrace&&Error.captureStackTrace(d,T),d}return n.cloneElement(s,function(e,n,t){for(var r,i=Object.assign({},e),u=function(){var t,o=r.value;void 0!==e[o]&&void 0!==n[o]&&Object.assign(i,((t={})[o]=function(t){t.defaultPrevented||e[o](t),t.defaultPrevented||n[o](t)},t))},a=function(e,n){var t;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(t=function(e,n){if(e){if("string"==typeof e)return o(e,void 0);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?o(e,void 0):void 0}}(e))){t&&(e=t);var r=0;return function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(t=e[Symbol.iterator]()).next.bind(t)}(["onClick"]);!(r=a()).done;)u();return i}(function(e){var n=Object.assign({},e);for(var t in n)void 0===n[t]&&delete n[t];return n}(l),s.props))}return n.createElement(a,l,s)}function F(e){return n.forwardRef(e)}function D(){var e=n.useState(v)[0];return n.useEffect((function(){return function(){return e.dispose()}}),[e]),e}function L(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return n.useCallback((function(e){t.forEach((function(n){if(null!==n)return"function"==typeof n?n(e):void(n.current=e)}))}),[t])}E.Child=k,function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(I||(I={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(C||(C={})),function(e){e[e.OpenMenu=0]="OpenMenu",e[e.CloseMenu=1]="CloseMenu",e[e.GoToItem=2]="GoToItem",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterItem=5]="RegisterItem",e[e.UnregisterItem=6]="UnregisterItem"}(O||(O={})),function(e){e[e.FirstItem=0]="FirstItem",e[e.PreviousItem=1]="PreviousItem",e[e.NextItem=2]="NextItem",e[e.LastItem=3]="LastItem",e[e.SpecificItem=4]="SpecificItem",e[e.Nothing=5]="Nothing"}(R||(R={}));var P=((g={})[O.CloseMenu]=function(e){return t({},e,{menuState:C.Closed})},g[O.OpenMenu]=function(e){return t({},e,{menuState:C.Open})},g[O.GoToItem]=function(e,n){var r=function(e,n,t){var r,o;if(e.items.length<=0)return null;var i=e.items,u=null!==(r=e.activeItemIndex)&&void 0!==r?r:-1,a=d(n,((o={})[R.FirstItem]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},o[R.PreviousItem]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==u&&t.length-n-1>=u||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},o[R.NextItem]=function(){return i.findIndex((function(e,n){return!(n<=u||e.dataRef.current.disabled)}))},o[R.LastItem]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},o[R.SpecificItem]=function(){return i.findIndex((function(e){return e.id===t}))},o[R.Nothing]=function(){return null},o));return-1===a?e.activeItemIndex:a}(e,n.focus,n.id);return""===e.searchQuery&&e.activeItemIndex===r?e:t({},e,{searchQuery:"",activeItemIndex:r})},g[O.Search]=function(e,n){var r=e.searchQuery+n.value,o=e.items.findIndex((function(e){var n;return(null===(n=e.dataRef.current.textValue)||void 0===n?void 0:n.startsWith(r))&&!e.dataRef.current.disabled}));return t({},e,-1===o||o===e.activeItemIndex?{searchQuery:r}:{searchQuery:r,activeItemIndex:o})},g[O.ClearSearch]=function(e){return t({},e,{searchQuery:""})},g[O.RegisterItem]=function(e,n){return t({},e,{items:[].concat(e.items,[{id:n.id,dataRef:n.dataRef}])})},g[O.UnregisterItem]=function(e,n){var r=e.items.slice(),o=null!==e.activeItemIndex?r[e.activeItemIndex]:null,i=r.findIndex((function(e){return e.id===n.id}));return-1!==i&&r.splice(i,1),t({},e,{items:r,activeItemIndex:i===e.activeItemIndex||null===o?null:r.indexOf(o)})},g),M=n.createContext(null);function A(e){var t=n.useContext(M);if(null===t){var r=new Error("<"+e+" /> is missing a parent <"+j.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,A),r}return t}function G(e,n){return d(n.type,P,e,n)}var N=n.Fragment;function j(e){var t=D(),r=n.useReducer(G,{menuState:C.Closed,buttonRef:n.createRef(),itemsRef:n.createRef(),items:[],searchQuery:"",activeItemIndex:null}),o=r[0],i=o.menuState,u=o.itemsRef,a=o.buttonRef,c=r[1];n.useEffect((function(){function e(e){var n,t,r;i===C.Open&&((null===(n=a.current)||void 0===n?void 0:n.contains(e.target))||(null===(t=u.current)||void 0===t?void 0:t.contains(e.target))||(c({type:O.CloseMenu}),e.defaultPrevented||null===(r=a.current)||void 0===r||r.focus()))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[i,u,a,t,c]);var l=n.useMemo((function(){return{open:i===C.Open}}),[i]);return n.createElement(M.Provider,{value:r},T(e,l,N))}var U,H,Q,B,V=F((function e(r,o){var i,u=A([j.name,e.name].join(".")),a=u[0],c=u[1],l=L(a.buttonRef,o),f=n.useState(!1),d=f[0],v=f[1],p="headlessui-menu-button-"+s(),m=D(),b=n.useCallback((function(e){switch(e.key){case I.Space:case I.Enter:case I.ArrowDown:e.preventDefault(),c({type:O.OpenMenu}),m.nextFrame((function(){var e;null===(e=a.itemsRef.current)||void 0===e||e.focus(),c({type:O.GoToItem,focus:R.FirstItem})}));break;case I.ArrowUp:e.preventDefault(),c({type:O.OpenMenu}),m.nextFrame((function(){var e;null===(e=a.itemsRef.current)||void 0===e||e.focus(),c({type:O.GoToItem,focus:R.LastItem})}))}}),[c,a,m]),h=n.useCallback((function(e){a.menuState===C.Open?c({type:O.CloseMenu}):(e.preventDefault(),c({type:O.OpenMenu}),m.nextFrame((function(){var e;return null===(e=a.itemsRef.current)||void 0===e?void 0:e.focus()})))}),[c,m,a]),y=n.useCallback((function(){var e;a.menuState===C.Open&&(null===(e=a.itemsRef.current)||void 0===e||e.focus()),v(!0)}),[a,v]),x=n.useCallback((function(){return v(!1)}),[v]),g=n.useMemo((function(){return{open:a.menuState===C.Open,focused:d}}),[a,d]);return T(t({},r,{ref:l,id:p,type:"button","aria-haspopup":!0,"aria-controls":null===(i=a.itemsRef.current)||void 0===i?void 0:i.id,"aria-expanded":a.menuState===C.Open||void 0,onKeyDown:b,onFocus:y,onBlur:x,onPointerUp:h}),g,"button")})),q=F((function e(o,i){var u,a,c=o.static,l=void 0!==c&&c,f=r(o,["static"]),d=A([j.name,e.name].join(".")),v=d[0],p=d[1],m=L(v.itemsRef,i),b="headlessui-menu-items-"+s(),h=D(),y=D(),x=n.useCallback((function(e){switch(y.dispose(),e.key){case I.Space:if(""!==v.searchQuery)return e.preventDefault(),p({type:O.Search,value:e.key});case I.Enter:var n;e.preventDefault(),p({type:O.CloseMenu}),null!==v.activeItemIndex&&(null===(n=document.getElementById(v.items[v.activeItemIndex].id))||void 0===n||n.click(),h.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()})));break;case I.ArrowDown:return e.preventDefault(),p({type:O.GoToItem,focus:R.NextItem});case I.ArrowUp:return e.preventDefault(),p({type:O.GoToItem,focus:R.PreviousItem});case I.Home:case I.PageUp:return e.preventDefault(),p({type:O.GoToItem,focus:R.FirstItem});case I.End:case I.PageDown:return e.preventDefault(),p({type:O.GoToItem,focus:R.LastItem});case I.Escape:e.preventDefault(),p({type:O.CloseMenu}),h.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case I.Tab:return e.preventDefault();default:1===e.key.length&&(p({type:O.Search,value:e.key}),y.setTimeout((function(){return p({type:O.ClearSearch})}),350))}}),[h,p,y,v]),g=n.useMemo((function(){return{open:v.menuState===C.Open}}),[v]),S={"aria-activedescendant":null===v.activeItemIndex||null===(u=v.items[v.activeItemIndex])||void 0===u?void 0:u.id,"aria-labelledby":null===(a=v.buttonRef.current)||void 0===a?void 0:a.id,id:b,onKeyDown:x,role:"menu",tabIndex:0};return l||v.menuState!==C.Closed?T(t({},f,S,{ref:m}),g,"div"):null})),K=n.Fragment;function W(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}function Y(e,t){var r=n.useState(e),o=r[0],i=r[1],a=n.useRef(e);return u((function(){a.current=e}),[e]),u((function(){return i(a.current)}),[a,i].concat(t)),o}j.Button=V,j.Items=q,j.Item=function e(o){var i=o.disabled,a=void 0!==i&&i,c=o.className,l=o.onClick,f=r(o,["disabled","className","onClick"]),d=A([j.name,e.name].join(".")),v=d[0],p=d[1],m=D(),b="headlessui-menu-item-"+s(),h=null!==v.activeItemIndex&&v.items[v.activeItemIndex].id===b,y=n.useRef({disabled:a});u((function(){y.current.disabled=a}),[y,a]),u((function(){var e,n;y.current.textValue=null===(e=document.getElementById(b))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[y,b]),u((function(){return p({type:O.RegisterItem,id:b,dataRef:y}),function(){return p({type:O.UnregisterItem,id:b})}}),[y,b]);var x=n.useCallback((function(e){return a?e.preventDefault():(p({type:O.CloseMenu}),m.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()})),l?l(e):void 0)}),[m,p,v.buttonRef,a,l]),I=n.useCallback((function(){if(a)return p({type:O.GoToItem,focus:R.Nothing});p({type:O.GoToItem,focus:R.SpecificItem,id:b})}),[a,b,p]),g=n.useCallback((function(){a||h||p({type:O.GoToItem,focus:R.SpecificItem,id:b})}),[a,h,b,p]),C=n.useCallback((function(){a||h&&p({type:O.GoToItem,focus:R.Nothing})}),[a,h,p]),S=n.useMemo((function(){return{active:h,disabled:a}}),[h,a]);return T(t({},f,{id:b,role:"menuitem",tabIndex:-1,className:W(c,S),"aria-disabled":!0===a||void 0,onClick:x,onFocus:I,onPointerMove:g,onPointerLeave:C}),S,K)},function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(H||(H={})),function(e){e[e.OpenListbox=0]="OpenListbox",e[e.CloseListbox=1]="CloseListbox",e[e.GoToOption=2]="GoToOption",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterOption=5]="RegisterOption",e[e.UnregisterOption=6]="UnregisterOption"}(Q||(Q={})),function(e){e[e.First=0]="First",e[e.Previous=1]="Previous",e[e.Next=2]="Next",e[e.Last=3]="Last",e[e.Specific=4]="Specific",e[e.Nothing=5]="Nothing"}(B||(B={}));var _=((U={})[Q.CloseListbox]=function(e){return t({},e,{listboxState:H.Closed})},U[Q.OpenListbox]=function(e){return t({},e,{listboxState:H.Open})},U[Q.GoToOption]=function(e,n){var r=function(e,n,t){var r,o;if(e.options.length<=0)return null;var i=e.options,u=null!==(r=e.activeOptionIndex)&&void 0!==r?r:-1,a=d(n,((o={})[B.First]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},o[B.Previous]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==u&&t.length-n-1>=u||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},o[B.Next]=function(){return i.findIndex((function(e,n){return!(n<=u||e.dataRef.current.disabled)}))},o[B.Last]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},o[B.Specific]=function(){return i.findIndex((function(e){return e.id===t}))},o[B.Nothing]=function(){return null},o));return-1===a?e.activeOptionIndex:a}(e,n.focus,n.id);return""===e.searchQuery&&e.activeOptionIndex===r?e:t({},e,{searchQuery:"",activeOptionIndex:r})},U[Q.Search]=function(e,n){var r=e.searchQuery+n.value,o=e.options.findIndex((function(e){var n;return!e.dataRef.current.disabled&&(null===(n=e.dataRef.current.textValue)||void 0===n?void 0:n.startsWith(r))}));return t({},e,-1===o||o===e.activeOptionIndex?{searchQuery:r}:{searchQuery:r,activeOptionIndex:o})},U[Q.ClearSearch]=function(e){return t({},e,{searchQuery:""})},U[Q.RegisterOption]=function(e,n){return t({},e,{options:[].concat(e.options,[{id:n.id,dataRef:n.dataRef}])})},U[Q.UnregisterOption]=function(e,n){var r=e.options.slice(),o=null!==e.activeOptionIndex?r[e.activeOptionIndex]:null,i=r.findIndex((function(e){return e.id===n.id}));return-1!==i&&r.splice(i,1),t({},e,{options:r,activeOptionIndex:i===e.activeOptionIndex||null===o?null:r.indexOf(o)})},U),$=n.createContext(null);function z(e,n){return d(n.type,_,e,n)}function J(e){var t=n.useContext($);if(null===t){var r=new Error("<"+e+" /> is missing a parent <"+Z.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,J),r}return t}var X=n.Fragment;function Z(e){var t=e.value,o=e.onChange,i=r(e,["value","onChange"]),a=D(),c=n.useReducer(z,{listboxState:H.Closed,propsRef:{current:{value:t,onChange:o}},labelRef:n.createRef(),buttonRef:n.createRef(),optionsRef:n.createRef(),options:[],searchQuery:"",activeOptionIndex:null}),l=c[0],s=l.listboxState,f=l.propsRef,d=l.optionsRef,v=l.buttonRef,p=c[1];u((function(){f.current.value=t}),[t,f]),u((function(){f.current.onChange=o}),[o,f]),n.useEffect((function(){function e(e){var n,t,r;s===H.Open&&((null===(n=v.current)||void 0===n?void 0:n.contains(e.target))||(null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||(p({type:Q.CloseListbox}),e.defaultPrevented||null===(r=v.current)||void 0===r||r.focus()))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[s,d,v,a,p]);var m=n.useMemo((function(){return{open:s===H.Open}}),[s]);return n.createElement($.Provider,{value:c},T(i,m,X))}var ee=F((function e(r,o){var i,u=J([Z.name,e.name].join(".")),a=u[0],c=u[1],l=L(a.buttonRef,o),f=n.useState(!1),d=f[0],v=f[1],p="headlessui-listbox-button-"+s(),m=D(),b=n.useCallback((function(e){switch(e.key){case I.Space:case I.Enter:case I.ArrowDown:e.preventDefault(),c({type:Q.OpenListbox}),m.nextFrame((function(){var e;null===(e=a.optionsRef.current)||void 0===e||e.focus(),a.propsRef.current.value||c({type:Q.GoToOption,focus:B.First})}));break;case I.ArrowUp:e.preventDefault(),c({type:Q.OpenListbox}),m.nextFrame((function(){var e;null===(e=a.optionsRef.current)||void 0===e||e.focus(),a.propsRef.current.value||c({type:Q.GoToOption,focus:B.Last})}))}}),[c,a,m]),h=n.useCallback((function(e){a.listboxState===H.Open?c({type:Q.CloseListbox}):(e.preventDefault(),c({type:Q.OpenListbox}),m.nextFrame((function(){var e;return null===(e=a.optionsRef.current)||void 0===e?void 0:e.focus()})))}),[c,m,a]),y=n.useCallback((function(){var e;if(a.listboxState===H.Open)return null===(e=a.optionsRef.current)||void 0===e?void 0:e.focus();v(!0)}),[a,v]),x=n.useCallback((function(){return v(!1)}),[v]),g=Y((function(){if(a.labelRef.current)return[a.labelRef.current.id,p].join(" ")}),[a.labelRef.current,p]),C=n.useMemo((function(){return{open:a.listboxState===H.Open,focused:d}}),[a,d]);return T(t({},r,{ref:l,id:p,type:"button","aria-haspopup":!0,"aria-controls":null===(i=a.optionsRef.current)||void 0===i?void 0:i.id,"aria-expanded":a.listboxState===H.Open||void 0,"aria-labelledby":g,onKeyDown:b,onFocus:y,onBlur:x,onPointerUp:h}),C,"button")})),ne=F((function e(o,i){var u,a=o.static,c=void 0!==a&&a,l=r(o,["enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","static"]),f=J([Z.name,e.name].join(".")),d=f[0],v=f[1],p=L(d.optionsRef,i),m="headlessui-listbox-options-"+s(),b=D(),h=D(),y=n.useCallback((function(e){switch(h.dispose(),e.key){case I.Space:if(""!==d.searchQuery)return e.preventDefault(),v({type:Q.Search,value:e.key});case I.Enter:e.preventDefault(),v({type:Q.CloseListbox}),null!==d.activeOptionIndex&&d.propsRef.current.onChange(d.options[d.activeOptionIndex].dataRef.current.value),b.nextFrame((function(){var e;return null===(e=d.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case I.ArrowDown:return e.preventDefault(),v({type:Q.GoToOption,focus:B.Next});case I.ArrowUp:return e.preventDefault(),v({type:Q.GoToOption,focus:B.Previous});case I.Home:case I.PageUp:return e.preventDefault(),v({type:Q.GoToOption,focus:B.First});case I.End:case I.PageDown:return e.preventDefault(),v({type:Q.GoToOption,focus:B.Last});case I.Escape:return e.preventDefault(),v({type:Q.CloseListbox}),b.nextFrame((function(){var e;return null===(e=d.buttonRef.current)||void 0===e?void 0:e.focus()}));case I.Tab:return e.preventDefault();default:1===e.key.length&&(v({type:Q.Search,value:e.key}),h.setTimeout((function(){return v({type:Q.ClearSearch})}),350))}}),[b,v,h,d]),x=Y((function(){var e,n,t;return null!==(e=null===(n=d.labelRef.current)||void 0===n?void 0:n.id)&&void 0!==e?e:null===(t=d.buttonRef.current)||void 0===t?void 0:t.id}),[d.labelRef.current,d.buttonRef.current]),g=n.useMemo((function(){return{open:d.listboxState===H.Open}}),[d]),C={"aria-activedescendant":null===d.activeOptionIndex||null===(u=d.options[d.activeOptionIndex])||void 0===u?void 0:u.id,"aria-labelledby":x,id:m,onKeyDown:y,role:"listbox",tabIndex:0};return c||d.listboxState!==H.Closed?T(t({},l,C,{ref:p}),g,"ul"):null}));function te(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}Z.Button=ee,Z.Label=function e(r){var o=J([Z.name,e.name].join("."))[0],i="headlessui-listbox-label-"+s(),u=n.useCallback((function(){var e;return null===(e=o.buttonRef.current)||void 0===e?void 0:e.focus()}),[o.buttonRef]),a=n.useMemo((function(){return{open:o.listboxState===H.Open}}),[o]);return T(t({},r,{ref:o.labelRef,id:i,onPointerUp:u}),a,"label")},Z.Options=ne,Z.Option=function e(o){var i=o.disabled,a=void 0!==i&&i,c=o.value,l=o.className,f=r(o,["disabled","value","className"]),d=J([Z.name,e.name].join(".")),p=d[0],m=d[1],b=D(),h="headlessui-listbox-option-"+s(),y=null!==p.activeOptionIndex&&p.options[p.activeOptionIndex].id===h,x=p.propsRef.current.value===c,I=n.useRef({disabled:a,value:c});u((function(){I.current.disabled=a}),[I,a]),u((function(){I.current.value=c}),[I,c]),u((function(){var e,n;I.current.textValue=null===(e=document.getElementById(h))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[I,h]);var g=n.useCallback((function(){return p.propsRef.current.onChange(c)}),[p.propsRef,c]);u((function(){return m({type:Q.RegisterOption,id:h,dataRef:I}),function(){return m({type:Q.UnregisterOption,id:h})}}),[I,h]),u((function(){var e,n;x&&(m({type:Q.GoToOption,focus:B.Specific,id:h}),null===(e=document.getElementById(h))||void 0===e||null===(n=e.focus)||void 0===n||n.call(e))}),[]),u((function(){if(y){var e=v();return e.nextFrame((function(){var e,n;return null===(e=document.getElementById(h))||void 0===e||null===(n=e.scrollIntoView)||void 0===n?void 0:n.call(e,{block:"nearest"})})),e.dispose}}),[y]);var C=n.useCallback((function(e){if(a)return e.preventDefault();g(),m({type:Q.CloseListbox}),b.nextFrame((function(){var e;return null===(e=p.buttonRef.current)||void 0===e?void 0:e.focus()}))}),[b,m,p.buttonRef,a,g]),O=n.useCallback((function(){if(a)return m({type:Q.GoToOption,focus:B.Nothing});m({type:Q.GoToOption,focus:B.Specific,id:h})}),[a,h,m]),R=n.useCallback((function(){a||y||m({type:Q.GoToOption,focus:B.Specific,id:h})}),[a,y,h,m]),S=n.useCallback((function(){a||y&&m({type:Q.GoToOption,focus:B.Nothing})}),[a,y,m]),w=n.useMemo((function(){return{active:y,selected:x,disabled:a}}),[y,x,a]);return T(t({},f,{id:h,role:"option",tabIndex:-1,className:te(l,w),"aria-disabled":!0===a||void 0,"aria-selected":!0===x||void 0,onClick:C,onFocus:O,onPointerMove:R,onPointerLeave:S}),w,"li")};var re=n.createContext(null);function oe(e){var t=n.useContext(re);if(null===t){var r=new Error("<"+e+" /> is missing a parent <Switch.Group /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,oe),r}return t}var ie=n.Fragment;function ue(e){var o,i=e.checked,u=e.onChange,a=e.className,c=r(e,["checked","onChange","className"]),l="headlessui-switch-"+s(),f=n.useContext(re),d=n.useCallback((function(){return u(!i)}),[u,i]),v=n.useCallback((function(e){e.preventDefault(),d()}),[d]),p=n.useCallback((function(e){e.preventDefault(),e.key===I.Space&&d()}),[d]),m=n.useMemo((function(){return{checked:i}}),[i]);return T(t({},c,{id:l,ref:null===f?void 0:f.setSwitch,role:"switch",tabIndex:0,className:ae(a,m),"aria-checked":i,"aria-labelledby":null==f||null===(o=f.label)||void 0===o?void 0:o.id,onClick:v,onKeyDown:p}),m,"button")}function ae(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}ue.Group=function(e){var t=n.useState(null),r=t[0],o=t[1],i=n.useState(null),u=i[0],a=i[1],c=n.useMemo((function(){return{switch:r,label:u,setSwitch:o,setLabel:a}}),[r,o,u,a]);return n.createElement(re.Provider,{value:c},T(e,{},ie))},ue.Label=function e(r){var o=oe([ue.name,e.name].join(".")),i="headlessui-switch-label-"+s(),u=n.useCallback((function(){o.switch&&(o.switch.click(),o.switch.focus())}),[o.switch]);return T(t({},r,{ref:o.setLabel,id:i,onPointerUp:u}),{},"label")},e.Listbox=Z,e.Menu=j,e.Switch=ue,e.Transition=E,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e=e||self).headlessui={},e.React)}(this,(function(e,n){"use strict";function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function r(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(o[t]=e[t]);return o}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var i,u="undefined"!=typeof window?n.useLayoutEffect:n.useEffect,a={serverHandoffComplete:!1},c=0;function l(){return++c}function s(){var e=n.useState(a.serverHandoffComplete?l:null),t=e[0],r=e[1];return u((function(){null===t&&r(l())}),[]),n.useEffect((function(){!1===a.serverHandoffComplete&&(a.serverHandoffComplete=!0)}),[]),null!=t?""+t:void 0}function f(){var e=n.useRef(!0);return n.useEffect((function(){e.current=!1}),[]),e.current}function d(e,n){if(e in n){for(var t=n[e],r=arguments.length,o=new Array(r>2?r-2:0),i=2;i<r;i++)o[i-2]=arguments[i];return"function"==typeof t?t.apply(void 0,o):t}var u=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(n).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(u,d),u}function v(){var e=[],n={requestAnimationFrame:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=requestAnimationFrame.apply(void 0,arguments);n.add((function(){return cancelAnimationFrame(e)}))})),nextFrame:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];n.requestAnimationFrame((function(){n.requestAnimationFrame.apply(n,t)}))},setTimeout:function(e){function n(){return e.apply(this,arguments)}return n.toString=function(){return e.toString()},n}((function(){var e=setTimeout.apply(void 0,arguments);n.add((function(){return clearTimeout(e)}))})),add:function(n){e.push(n)},dispose:function(){e.splice(0).forEach((function(e){return e()}))}};return n}function p(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).add.apply(n,r)}function m(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];e&&r.length>0&&(n=e.classList).remove.apply(n,r)}function b(e,n,t,r,o){var u=v(),a=void 0!==o?function(e){var n={called:!1};return function(){if(!n.called)return n.called=!0,e.apply(void 0,arguments)}}(o):function(){};return p.apply(void 0,[e].concat(n,t)),u.nextFrame((function(){m.apply(void 0,[e].concat(t)),p.apply(void 0,[e].concat(r)),u.add(function(e,n){var t=v();if(!e)return t.dispose;var r=getComputedStyle(e),o=[r.transitionDuration,r.transitionDelay].map((function(e){var n=e.split(",").filter(Boolean).map((function(e){return e.includes("ms")?parseFloat(e):1e3*parseFloat(e)})).sort((function(e,n){return n-e}))[0];return void 0===n?0:n})),u=o[0];return 0!==u?t.setTimeout((function(){n(i.Finished)}),u+o[1]):n(i.Finished),t.add((function(){return n(i.Cancelled)})),t.dispose}(e,(function(t){return m.apply(void 0,[e].concat(r,n)),a(t)})))})),u.add((function(){return m.apply(void 0,[e].concat(n,t,r))})),u.add((function(){return a(i.Cancelled)})),u.dispose}function h(e){return void 0===e&&(e=""),n.useMemo((function(){return e.split(" ").filter((function(e){return e.trim().length>1}))}),[e])}!function(e){e.Finished="finished",e.Cancelled="cancelled"}(i||(i={}));var y,x=n.createContext(null);!function(e){e.Visible="visible",e.Hidden="hidden"}(y||(y={}));var I,g,C,R,O,S=n.createContext(null);function w(e){var t=n.useRef(e),r=n.useRef([]),o=function(){var e=n.useRef(!0);return n.useEffect((function(){return function(){e.current=!1}}),[]),e}();n.useEffect((function(){t.current=e}),[e]);var i=n.useCallback((function(e){var n,i=r.current.indexOf(e);-1!==i&&(r.current.splice(i,1),r.current.length<=0&&o.current&&(null===(n=t.current)||void 0===n||n.call(t)))}),[t,o,r]),u=n.useCallback((function(e){return r.current.push(e),function(){return i(e)}}),[r,i]);return n.useMemo((function(){return{children:r,register:u,unregister:i}}),[u,i,r])}function k(e){var t=e.children,o=e.enter,a=e.enterFrom,c=e.enterTo,l=e.leave,d=e.leaveFrom,v=e.leaveTo,p=r(e,["children","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo"]),m=n.useRef(null),I=n.useState(y.Visible),g=I[0],C=I[1],R=function(){var e=n.useContext(x);if(null===e)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return e}(),O=R.show,k=R.appear,E=function(){var e=n.useContext(S);if(null===e)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return e}(),T=E.register,F=E.unregister,D=f(),L=s(),P=n.useRef(!1),M=w((function(){P.current||(C(y.Hidden),F(L))}));u((function(){if(L)return T(L)}),[T,L]);var A=h(o),G=h(a),N=h(c),j=h(l),U=h(d),H=h(v);n.useEffect((function(){if(g===y.Visible&&null===m.current)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}),[m,g]);var Q=D&&!k;if(u((function(){var e=m.current;if(e&&!Q)return P.current=!0,O?b(e,A,G,N,(function(){P.current=!1})):b(e,j,U,H,(function(e){P.current=!1,e===i.Finished&&M.children.current.length<=0&&(C(y.Hidden),F(L))}))}),[L,P,F,M,m,Q,O,A,G,N,j,U,H]),g===y.Hidden)return null;if("function"==typeof t)return n.createElement(S.Provider,{value:M},t(m));var B=p.as,V=void 0===B?"div":B,q=r(p,["as"]);return n.createElement(S.Provider,{value:M},n.createElement(V,Object.assign({},q,{ref:m}),t))}function E(e){var t,o=e.show,i=e.appear,u=void 0!==i&&i,a=r(e,["show","appear"]);if(![!0,!1].includes(o))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");var c=n.useState(o?y.Visible:y.Hidden),l=c[0],s=c[1],v=w((function(){s(y.Hidden)})),p=f(),m=n.useMemo((function(){return{show:o,appear:u||!p}}),[o,u,p]);return n.useEffect((function(){o?s(y.Visible):v.children.current.length<=0&&s(y.Hidden)}),[o,v]),n.createElement(S.Provider,{value:v},n.createElement(x.Provider,{value:m},d(l,((t={})[y.Visible]=function(){return n.createElement(k,Object.assign({},a))},t[y.Hidden]=null,t))))}function T(e,t,i){var u=e.as,a=void 0===u?i:u,c=e.children,l=r(e,["as","children"]),s="function"==typeof c?c(t):c;if(a===n.Fragment&&Object.keys(l).length>0){if(Array.isArray(s)&&s.length>1){var f=new Error("You should only render 1 child");throw Error.captureStackTrace&&Error.captureStackTrace(f,T),f}if(!n.isValidElement(s)){var d=new Error('You should render an element as a child. Did you forget the as="..." prop?');throw Error.captureStackTrace&&Error.captureStackTrace(d,T),d}return n.cloneElement(s,function(e,n,t){for(var r,i=Object.assign({},e),u=function(){var t,o=r.value;void 0!==e[o]&&void 0!==n[o]&&Object.assign(i,((t={})[o]=function(t){t.defaultPrevented||e[o](t),t.defaultPrevented||n[o](t)},t))},a=function(e,n){var t;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(t=function(e,n){if(e){if("string"==typeof e)return o(e,void 0);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?o(e,void 0):void 0}}(e))){t&&(e=t);var r=0;return function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(t=e[Symbol.iterator]()).next.bind(t)}(["onClick"]);!(r=a()).done;)u();return i}(function(e){var n=Object.assign({},e);for(var t in n)void 0===n[t]&&delete n[t];return n}(l),s.props))}return n.createElement(a,l,s)}function F(e){return n.forwardRef(e)}function D(){var e=n.useState(v)[0];return n.useEffect((function(){return function(){return e.dispose()}}),[e]),e}function L(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return n.useCallback((function(e){t.forEach((function(n){if(null!==n)return"function"==typeof n?n(e):void(n.current=e)}))}),[t])}E.Child=k,function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(I||(I={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(C||(C={})),function(e){e[e.OpenMenu=0]="OpenMenu",e[e.CloseMenu=1]="CloseMenu",e[e.GoToItem=2]="GoToItem",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterItem=5]="RegisterItem",e[e.UnregisterItem=6]="UnregisterItem"}(R||(R={})),function(e){e[e.FirstItem=0]="FirstItem",e[e.PreviousItem=1]="PreviousItem",e[e.NextItem=2]="NextItem",e[e.LastItem=3]="LastItem",e[e.SpecificItem=4]="SpecificItem",e[e.Nothing=5]="Nothing"}(O||(O={}));var P=((g={})[R.CloseMenu]=function(e){return t({},e,{menuState:C.Closed})},g[R.OpenMenu]=function(e){return t({},e,{menuState:C.Open})},g[R.GoToItem]=function(e,n){var r=function(e,n,t){var r,o;if(e.items.length<=0)return null;var i=e.items,u=null!==(r=e.activeItemIndex)&&void 0!==r?r:-1,a=d(n,((o={})[O.FirstItem]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},o[O.PreviousItem]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==u&&t.length-n-1>=u||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},o[O.NextItem]=function(){return i.findIndex((function(e,n){return!(n<=u||e.dataRef.current.disabled)}))},o[O.LastItem]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},o[O.SpecificItem]=function(){return i.findIndex((function(e){return e.id===t}))},o[O.Nothing]=function(){return null},o));return-1===a?e.activeItemIndex:a}(e,n.focus,n.id);return""===e.searchQuery&&e.activeItemIndex===r?e:t({},e,{searchQuery:"",activeItemIndex:r})},g[R.Search]=function(e,n){var r=e.searchQuery+n.value,o=e.items.findIndex((function(e){var n;return(null===(n=e.dataRef.current.textValue)||void 0===n?void 0:n.startsWith(r))&&!e.dataRef.current.disabled}));return t({},e,-1===o||o===e.activeItemIndex?{searchQuery:r}:{searchQuery:r,activeItemIndex:o})},g[R.ClearSearch]=function(e){return t({},e,{searchQuery:""})},g[R.RegisterItem]=function(e,n){return t({},e,{items:[].concat(e.items,[{id:n.id,dataRef:n.dataRef}])})},g[R.UnregisterItem]=function(e,n){var r=e.items.slice(),o=null!==e.activeItemIndex?r[e.activeItemIndex]:null,i=r.findIndex((function(e){return e.id===n.id}));return-1!==i&&r.splice(i,1),t({},e,{items:r,activeItemIndex:i===e.activeItemIndex||null===o?null:r.indexOf(o)})},g),M=n.createContext(null);function A(e){var t=n.useContext(M);if(null===t){var r=new Error("<"+e+" /> is missing a parent <"+j.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,A),r}return t}function G(e,n){return d(n.type,P,e,n)}var N=n.Fragment;function j(e){var t=D(),r=n.useReducer(G,{menuState:C.Closed,buttonRef:n.createRef(),itemsRef:n.createRef(),items:[],searchQuery:"",activeItemIndex:null}),o=r[0],i=o.menuState,u=o.itemsRef,a=o.buttonRef,c=r[1];n.useEffect((function(){function e(e){var n,r;i===C.Open&&((null===(n=a.current)||void 0===n?void 0:n.contains(e.target))||((null===(r=u.current)||void 0===r?void 0:r.contains(e.target))||c({type:R.CloseMenu}),e.defaultPrevented||t.nextFrame((function(){var e;return null===(e=a.current)||void 0===e?void 0:e.focus()}))))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[i,u,a,t,c]);var l=n.useMemo((function(){return{open:i===C.Open}}),[i]);return n.createElement(M.Provider,{value:r},T(e,l,N))}var U,H,Q,B,V=F((function e(r,o){var i,u=A([j.name,e.name].join(".")),a=u[0],c=u[1],l=L(a.buttonRef,o),f=n.useState(!1),d=f[0],v=f[1],p="headlessui-menu-button-"+s(),m=D(),b=n.useCallback((function(e){switch(e.key){case I.Space:case I.Enter:case I.ArrowDown:e.preventDefault(),c({type:R.OpenMenu}),m.nextFrame((function(){var e;null===(e=a.itemsRef.current)||void 0===e||e.focus(),c({type:R.GoToItem,focus:O.FirstItem})}));break;case I.ArrowUp:e.preventDefault(),c({type:R.OpenMenu}),m.nextFrame((function(){var e;null===(e=a.itemsRef.current)||void 0===e||e.focus(),c({type:R.GoToItem,focus:O.LastItem})}))}}),[c,a,m]),h=n.useCallback((function(e){a.menuState===C.Open?(c({type:R.CloseMenu}),m.nextFrame((function(){var e;return null===(e=a.buttonRef.current)||void 0===e?void 0:e.focus()}))):(e.preventDefault(),c({type:R.OpenMenu}),m.nextFrame((function(){var e;return null===(e=a.itemsRef.current)||void 0===e?void 0:e.focus()})))}),[c,m,a]),y=n.useCallback((function(){var e;a.menuState===C.Open&&(null===(e=a.itemsRef.current)||void 0===e||e.focus()),v(!0)}),[a,v]),x=n.useCallback((function(){return v(!1)}),[v]),g=n.useMemo((function(){return{open:a.menuState===C.Open,focused:d}}),[a,d]);return T(t({},r,{ref:l,id:p,type:"button","aria-haspopup":!0,"aria-controls":null===(i=a.itemsRef.current)||void 0===i?void 0:i.id,"aria-expanded":a.menuState===C.Open||void 0,onKeyDown:b,onFocus:y,onBlur:x,onPointerUp:h}),g,"button")})),q=F((function e(o,i){var u,a,c=o.static,l=void 0!==c&&c,f=r(o,["static"]),d=A([j.name,e.name].join(".")),p=d[0],m=d[1],b=L(p.itemsRef,i),h="headlessui-menu-items-"+s(),y=D(),x=n.useCallback((function(e){switch(y.dispose(),e.key){case I.Space:if(""!==p.searchQuery)return e.preventDefault(),m({type:R.Search,value:e.key});case I.Enter:var n;e.preventDefault(),m({type:R.CloseMenu}),null!==p.activeItemIndex&&(null===(n=document.getElementById(p.items[p.activeItemIndex].id))||void 0===n||n.click()),v().nextFrame((function(){var e;return null===(e=p.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case I.ArrowDown:return e.preventDefault(),m({type:R.GoToItem,focus:O.NextItem});case I.ArrowUp:return e.preventDefault(),m({type:R.GoToItem,focus:O.PreviousItem});case I.Home:case I.PageUp:return e.preventDefault(),m({type:R.GoToItem,focus:O.FirstItem});case I.End:case I.PageDown:return e.preventDefault(),m({type:R.GoToItem,focus:O.LastItem});case I.Escape:e.preventDefault(),m({type:R.CloseMenu}),v().nextFrame((function(){var e;return null===(e=p.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case I.Tab:return e.preventDefault();default:1===e.key.length&&(m({type:R.Search,value:e.key}),y.setTimeout((function(){return m({type:R.ClearSearch})}),350))}}),[m,y,p]),g=n.useMemo((function(){return{open:p.menuState===C.Open}}),[p]),S={"aria-activedescendant":null===p.activeItemIndex||null===(u=p.items[p.activeItemIndex])||void 0===u?void 0:u.id,"aria-labelledby":null===(a=p.buttonRef.current)||void 0===a?void 0:a.id,id:h,onKeyDown:x,role:"menu",tabIndex:0};return l||p.menuState!==C.Closed?T(t({},f,S,{ref:b}),g,"div"):null})),K=n.Fragment;function W(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}function Y(e,t){var r=n.useState(e),o=r[0],i=r[1],a=n.useRef(e);return u((function(){a.current=e}),[e]),u((function(){return i(a.current)}),[a,i].concat(t)),o}j.Button=V,j.Items=q,j.Item=function e(o){var i=o.disabled,a=void 0!==i&&i,c=o.className,l=o.onClick,f=r(o,["disabled","className","onClick"]),d=A([j.name,e.name].join(".")),v=d[0],p=d[1],m=D(),b="headlessui-menu-item-"+s(),h=null!==v.activeItemIndex&&v.items[v.activeItemIndex].id===b,y=n.useRef({disabled:a});u((function(){y.current.disabled=a}),[y,a]),u((function(){var e,n;y.current.textValue=null===(e=document.getElementById(b))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[y,b]),u((function(){return p({type:R.RegisterItem,id:b,dataRef:y}),function(){return p({type:R.UnregisterItem,id:b})}}),[y,b]);var x=n.useCallback((function(e){return a?e.preventDefault():(p({type:R.CloseMenu}),m.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()})),l?l(e):void 0)}),[m,p,v.buttonRef,a,l]),I=n.useCallback((function(){if(a)return p({type:R.GoToItem,focus:O.Nothing});p({type:R.GoToItem,focus:O.SpecificItem,id:b})}),[a,b,p]),g=n.useCallback((function(){a||h||p({type:R.GoToItem,focus:O.SpecificItem,id:b})}),[a,h,b,p]),C=n.useCallback((function(){a||h&&p({type:R.GoToItem,focus:O.Nothing})}),[a,h,p]),S=n.useMemo((function(){return{active:h,disabled:a}}),[h,a]);return T(t({},f,{id:b,role:"menuitem",tabIndex:-1,className:W(c,S),"aria-disabled":!0===a||void 0,onClick:x,onFocus:I,onPointerMove:g,onPointerLeave:C}),S,K)},function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(H||(H={})),function(e){e[e.OpenListbox=0]="OpenListbox",e[e.CloseListbox=1]="CloseListbox",e[e.GoToOption=2]="GoToOption",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterOption=5]="RegisterOption",e[e.UnregisterOption=6]="UnregisterOption"}(Q||(Q={})),function(e){e[e.First=0]="First",e[e.Previous=1]="Previous",e[e.Next=2]="Next",e[e.Last=3]="Last",e[e.Specific=4]="Specific",e[e.Nothing=5]="Nothing"}(B||(B={}));var _=((U={})[Q.CloseListbox]=function(e){return t({},e,{listboxState:H.Closed})},U[Q.OpenListbox]=function(e){return t({},e,{listboxState:H.Open})},U[Q.GoToOption]=function(e,n){var r=function(e,n,t){var r,o;if(e.options.length<=0)return null;var i=e.options,u=null!==(r=e.activeOptionIndex)&&void 0!==r?r:-1,a=d(n,((o={})[B.First]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},o[B.Previous]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==u&&t.length-n-1>=u||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},o[B.Next]=function(){return i.findIndex((function(e,n){return!(n<=u||e.dataRef.current.disabled)}))},o[B.Last]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},o[B.Specific]=function(){return i.findIndex((function(e){return e.id===t}))},o[B.Nothing]=function(){return null},o));return-1===a?e.activeOptionIndex:a}(e,n.focus,n.id);return""===e.searchQuery&&e.activeOptionIndex===r?e:t({},e,{searchQuery:"",activeOptionIndex:r})},U[Q.Search]=function(e,n){var r=e.searchQuery+n.value,o=e.options.findIndex((function(e){var n;return!e.dataRef.current.disabled&&(null===(n=e.dataRef.current.textValue)||void 0===n?void 0:n.startsWith(r))}));return t({},e,-1===o||o===e.activeOptionIndex?{searchQuery:r}:{searchQuery:r,activeOptionIndex:o})},U[Q.ClearSearch]=function(e){return t({},e,{searchQuery:""})},U[Q.RegisterOption]=function(e,n){return t({},e,{options:[].concat(e.options,[{id:n.id,dataRef:n.dataRef}])})},U[Q.UnregisterOption]=function(e,n){var r=e.options.slice(),o=null!==e.activeOptionIndex?r[e.activeOptionIndex]:null,i=r.findIndex((function(e){return e.id===n.id}));return-1!==i&&r.splice(i,1),t({},e,{options:r,activeOptionIndex:i===e.activeOptionIndex||null===o?null:r.indexOf(o)})},U),$=n.createContext(null);function z(e,n){return d(n.type,_,e,n)}function J(e){var t=n.useContext($);if(null===t){var r=new Error("<"+e+" /> is missing a parent <"+Z.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,J),r}return t}var X=n.Fragment;function Z(e){var t=e.value,o=e.onChange,i=r(e,["value","onChange"]),a=D(),c=n.useReducer(z,{listboxState:H.Closed,propsRef:{current:{value:t,onChange:o}},labelRef:n.createRef(),buttonRef:n.createRef(),optionsRef:n.createRef(),options:[],searchQuery:"",activeOptionIndex:null}),l=c[0],s=l.listboxState,f=l.propsRef,d=l.optionsRef,v=l.buttonRef,p=c[1];u((function(){f.current.value=t}),[t,f]),u((function(){f.current.onChange=o}),[o,f]),n.useEffect((function(){function e(e){var n,t;s===H.Open&&((null===(n=v.current)||void 0===n?void 0:n.contains(e.target))||((null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||p({type:Q.CloseListbox}),e.defaultPrevented||a.nextFrame((function(){var e;return null===(e=v.current)||void 0===e?void 0:e.focus()}))))}return window.addEventListener("click",e),function(){return window.removeEventListener("click",e)}}),[s,d,v,a,p]);var m=n.useMemo((function(){return{open:s===H.Open}}),[s]);return n.createElement($.Provider,{value:c},T(i,m,X))}var ee=F((function e(r,o){var i,u=J([Z.name,e.name].join(".")),a=u[0],c=u[1],l=L(a.buttonRef,o),f=n.useState(!1),d=f[0],v=f[1],p="headlessui-listbox-button-"+s(),m=D(),b=n.useCallback((function(e){switch(e.key){case I.Space:case I.Enter:case I.ArrowDown:e.preventDefault(),c({type:Q.OpenListbox}),m.nextFrame((function(){var e;null===(e=a.optionsRef.current)||void 0===e||e.focus(),a.propsRef.current.value||c({type:Q.GoToOption,focus:B.First})}));break;case I.ArrowUp:e.preventDefault(),c({type:Q.OpenListbox}),m.nextFrame((function(){var e;null===(e=a.optionsRef.current)||void 0===e||e.focus(),a.propsRef.current.value||c({type:Q.GoToOption,focus:B.Last})}))}}),[c,a,m]),h=n.useCallback((function(e){a.listboxState===H.Open?(c({type:Q.CloseListbox}),m.nextFrame((function(){var e;return null===(e=a.buttonRef.current)||void 0===e?void 0:e.focus()}))):(e.preventDefault(),c({type:Q.OpenListbox}),m.nextFrame((function(){var e;return null===(e=a.optionsRef.current)||void 0===e?void 0:e.focus()})))}),[c,m,a]),y=n.useCallback((function(){var e;if(a.listboxState===H.Open)return null===(e=a.optionsRef.current)||void 0===e?void 0:e.focus();v(!0)}),[a,v]),x=n.useCallback((function(){return v(!1)}),[v]),g=Y((function(){if(a.labelRef.current)return[a.labelRef.current.id,p].join(" ")}),[a.labelRef.current,p]),C=n.useMemo((function(){return{open:a.listboxState===H.Open,focused:d}}),[a,d]);return T(t({},r,{ref:l,id:p,type:"button","aria-haspopup":!0,"aria-controls":null===(i=a.optionsRef.current)||void 0===i?void 0:i.id,"aria-expanded":a.listboxState===H.Open||void 0,"aria-labelledby":g,onKeyDown:b,onFocus:y,onBlur:x,onPointerUp:h}),C,"button")})),ne=F((function e(o,i){var u,a=o.static,c=void 0!==a&&a,l=r(o,["enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","static"]),f=J([Z.name,e.name].join(".")),d=f[0],p=f[1],m=L(d.optionsRef,i),b="headlessui-listbox-options-"+s(),h=D(),y=D(),x=n.useCallback((function(e){switch(y.dispose(),e.key){case I.Space:if(""!==d.searchQuery)return e.preventDefault(),p({type:Q.Search,value:e.key});case I.Enter:e.preventDefault(),p({type:Q.CloseListbox}),null!==d.activeOptionIndex&&d.propsRef.current.onChange(d.options[d.activeOptionIndex].dataRef.current.value),v().nextFrame((function(){var e;return null===(e=d.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case I.ArrowDown:return e.preventDefault(),p({type:Q.GoToOption,focus:B.Next});case I.ArrowUp:return e.preventDefault(),p({type:Q.GoToOption,focus:B.Previous});case I.Home:case I.PageUp:return e.preventDefault(),p({type:Q.GoToOption,focus:B.First});case I.End:case I.PageDown:return e.preventDefault(),p({type:Q.GoToOption,focus:B.Last});case I.Escape:return e.preventDefault(),p({type:Q.CloseListbox}),h.nextFrame((function(){var e;return null===(e=d.buttonRef.current)||void 0===e?void 0:e.focus()}));case I.Tab:return e.preventDefault();default:1===e.key.length&&(p({type:Q.Search,value:e.key}),y.setTimeout((function(){return p({type:Q.ClearSearch})}),350))}}),[h,p,y,d]),g=Y((function(){var e,n,t;return null!==(e=null===(n=d.labelRef.current)||void 0===n?void 0:n.id)&&void 0!==e?e:null===(t=d.buttonRef.current)||void 0===t?void 0:t.id}),[d.labelRef.current,d.buttonRef.current]),C=n.useMemo((function(){return{open:d.listboxState===H.Open}}),[d]),R={"aria-activedescendant":null===d.activeOptionIndex||null===(u=d.options[d.activeOptionIndex])||void 0===u?void 0:u.id,"aria-labelledby":g,id:b,onKeyDown:x,role:"listbox",tabIndex:0};return c||d.listboxState!==H.Closed?T(t({},l,R,{ref:m}),C,"ul"):null}));function te(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}Z.Button=ee,Z.Label=function e(r){var o=J([Z.name,e.name].join("."))[0],i="headlessui-listbox-label-"+s(),u=n.useCallback((function(){var e;return null===(e=o.buttonRef.current)||void 0===e?void 0:e.focus()}),[o.buttonRef]),a=n.useMemo((function(){return{open:o.listboxState===H.Open}}),[o]);return T(t({},r,{ref:o.labelRef,id:i,onPointerUp:u}),a,"label")},Z.Options=ne,Z.Option=function e(o){var i=o.disabled,a=void 0!==i&&i,c=o.value,l=o.className,f=r(o,["disabled","value","className"]),d=J([Z.name,e.name].join(".")),p=d[0],m=d[1],b="headlessui-listbox-option-"+s(),h=null!==p.activeOptionIndex&&p.options[p.activeOptionIndex].id===b,y=p.propsRef.current.value===c,x=n.useRef({disabled:a,value:c});u((function(){x.current.disabled=a}),[x,a]),u((function(){x.current.value=c}),[x,c]),u((function(){var e,n;x.current.textValue=null===(e=document.getElementById(b))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[x,b]);var I=n.useCallback((function(){return p.propsRef.current.onChange(c)}),[p.propsRef,c]);u((function(){return m({type:Q.RegisterOption,id:b,dataRef:x}),function(){return m({type:Q.UnregisterOption,id:b})}}),[x,b]),u((function(){var e,n;y&&(m({type:Q.GoToOption,focus:B.Specific,id:b}),null===(e=document.getElementById(b))||void 0===e||null===(n=e.focus)||void 0===n||n.call(e))}),[]),u((function(){if(h){var e=v();return e.nextFrame((function(){var e,n;return null===(e=document.getElementById(b))||void 0===e||null===(n=e.scrollIntoView)||void 0===n?void 0:n.call(e,{block:"nearest"})})),e.dispose}}),[h]);var g=n.useCallback((function(e){if(a)return e.preventDefault();I(),m({type:Q.CloseListbox}),v().nextFrame((function(){var e;return null===(e=p.buttonRef.current)||void 0===e?void 0:e.focus()}))}),[m,p.buttonRef,a,I]),C=n.useCallback((function(){if(a)return m({type:Q.GoToOption,focus:B.Nothing});m({type:Q.GoToOption,focus:B.Specific,id:b})}),[a,b,m]),R=n.useCallback((function(){a||h||m({type:Q.GoToOption,focus:B.Specific,id:b})}),[a,h,b,m]),O=n.useCallback((function(){a||h&&m({type:Q.GoToOption,focus:B.Nothing})}),[a,h,m]),S=n.useMemo((function(){return{active:h,selected:y,disabled:a}}),[h,y,a]);return T(t({},f,{id:b,role:"option",tabIndex:-1,className:te(l,S),"aria-disabled":!0===a||void 0,"aria-selected":!0===y||void 0,onClick:g,onFocus:C,onPointerMove:R,onPointerLeave:O}),S,"li")};var re=n.createContext(null);function oe(e){var t=n.useContext(re);if(null===t){var r=new Error("<"+e+" /> is missing a parent <Switch.Group /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,oe),r}return t}var ie=n.Fragment;function ue(e){var o,i=e.checked,u=e.onChange,a=e.className,c=r(e,["checked","onChange","className"]),l="headlessui-switch-"+s(),f=n.useContext(re),d=n.useCallback((function(){return u(!i)}),[u,i]),v=n.useCallback((function(e){e.preventDefault(),d()}),[d]),p=n.useCallback((function(e){e.key===I.Space&&(e.preventDefault(),d())}),[d]),m=n.useMemo((function(){return{checked:i}}),[i]);return T(t({},c,{id:l,ref:null===f?void 0:f.setSwitch,role:"switch",tabIndex:0,className:ae(a,m),"aria-checked":i,"aria-labelledby":null==f||null===(o=f.label)||void 0===o?void 0:o.id,onClick:v,onKeyUp:p}),m,"button")}function ae(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}ue.Group=function(e){var t=n.useState(null),r=t[0],o=t[1],i=n.useState(null),u=i[0],a=i[1],c=n.useMemo((function(){return{switch:r,label:u,setSwitch:o,setLabel:a}}),[r,o,u,a]);return n.createElement(re.Provider,{value:c},T(e,{},ie))},ue.Label=function e(r){var o=oe([ue.name,e.name].join(".")),i="headlessui-switch-label-"+s(),u=n.useCallback((function(){o.switch&&(o.switch.click(),o.switch.focus())}),[o.switch]);return T(t({},r,{ref:o.setLabel,id:i,onPointerUp:u}),{},"label")},e.Listbox=Z,e.Menu=j,e.Switch=ue,e.Transition=E,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=headlessui.umd.production.min.js.map

dist/test-utils/accessibility-assertions.d.ts

@@ -64,2 +64,3 @@ export declare function getMenuButton(): HTMLElement | null;
 export declare function getSwitch(): HTMLElement | null;
+export declare function getSwitchLabel(): HTMLElement | null;
 export declare enum SwitchState {
@@ -66,0 +67,0 @@ On = 0,

dist/types.d.ts

 /// <reference types="react" />
 export declare type PropsOf<TTag = any> = TTag extends React.ElementType ? React.ComponentProps<TTag> : never;
-export declare type Props<TTag, TSlot = any, TOmitableProps extends keyof any = any> = {
+export declare type Props<TTag, TSlot = {}, TOmitableProps extends keyof any = ''> = {
     as?: TTag;
     children?: React.ReactNode | ((bag: TSlot) => React.ReactElement);
 } & Omit<PropsOf<TTag>, TOmitableProps>;

dist/utils/render.d.ts

 import * as React from 'react';
 import { Props } from '../types';
-export declare function render<TTag extends React.ElementType, TBag>(props: Props<TTag, TBag>, bag: TBag, tag: React.ElementType): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare function render<TTag extends React.ElementType, TBag>(props: Props<TTag, TBag, any>, bag: TBag, tag: React.ElementType): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
 /**
@@ -5,0 +5,0 @@ * This is a hack, but basically we want to keep the full 'API' of the component, but we do want to

package.json

 {
   "name": "@headlessui/react",
-  "version": "0.1.4-alpha.1",
+  "version": "0.2.0",
   "main": "dist/index.js",
@@ -34,7 +34,7 @@ "typings": "dist/index.d.ts",
   "devDependencies": {
-    "@types/react": "^16.9.49",
+    "@types/react": "^16.9.50",
     "@types/react-dom": "^16.9.8",
     "@popperjs/core": "^2.5.3",
     "@testing-library/react": "^11.0.4",
-    "framer-motion": "^2.7.6",
+    "framer-motion": "^2.7.7",
     "next": "9.5.3",
@@ -41,0 +41,0 @@ "react": "^16.13.1",

README.md

@@ -32,2 +32,4 @@ <h3 align="center">
 - [Menu Button (Dropdown)](#menu-button-dropdown)
+- [Listbox (Select)](#listbox)
+- [Switch (Toggle)](#switch-toggle)
 
@@ -40,4 +42,2 @@ ### Roadmap
 
-- Listboxes
-- Toggles
 - Modals
@@ -81,5 +81,3 @@ - Tabs
     <>
-      <button onClick={() => setIsOpen(!isOpen)}>
-        Toggle
-      </button>
+      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
       <Transition
@@ -114,5 +112,3 @@ show={isOpen}
     <>
-      <button onClick={() => setIsOpen(!isOpen)}>
-        Toggle
-      </button>
+      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
       <Transition
@@ -140,5 +136,3 @@ show={isOpen}
     <>
-      <button onClick={() => setIsOpen(!isOpen)}>
-        Toggle
-      </button>
+      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
       <Transition
@@ -169,5 +163,3 @@ show={isOpen}
     <>
-      <button onClick={() => setIsOpen(!isOpen)}>
-        Toggle
-      </button>
+      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
       <Transition
@@ -177,3 +169,3 @@ show={isOpen}
       >
-        {(ref) => <div ref={ref}>{/* Your content goes here*/}</div>}
+        {ref => <div ref={ref}>{/* Your content goes here*/}</div>}
       </Transition>
@@ -211,5 +203,3 @@ </>
     <>
-      <button onClick={() => setIsOpen(!isOpen)}>
-        Toggle
-      </button>
+      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
       <Transition
@@ -782,1 +772,611 @@ show={isOpen}
 | `disabled` | Boolean | Whether or not the item is the disabled for keyboard navigation and ARIA purposes. |
+
+## Listbox (Select)
+
+[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-listbox-example-57eoj?file=/src/App.js)
+
+The `Listbox` component and related child components are used to quickly build custom listbox components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard navigation support.
+
+- [Basic example](#basic-example-2)
+- [Styling the active and selected option](#styling-the-active-and-selected-option)
+- [Showing/hiding the listbox](#showinghiding-the-listbox)
+- [Using a custom label](#using-a-custom-label)
+- [Disabling an option](#disabling-an-option)
+- [Transitions](#transitions-1)
+- [Rendering additional content](#rendering-additional-content-1)
+- [Rendering a different element for a component](#rendering-a-different-element-for-a-component-1)
+- [Component API](#component-api-2)
+
+### Basic example
+
+Listboxes are built using the `Listbox`, `Listbox.Button`, `Listbox.Options`, `Listbox.Option` and `Listbox.Label` components.
+
+The `Listbox.Button` will automatically open/close the `Listbox.Options` when clicked, and when the menu is open, the list of items receives focus and is automatically navigable via the keyboard.
+
+```jsx
+import { useState, Fragment } from 'react'
+import { Listbox } from '@headlessui/react'
+
+function MyListbox() {
+  const people = [
+    { id: 1, name: 'Durward Reynolds', unavailable: false },
+    { id: 2, name: 'Kenton Towne', unavailable: false },
+    { id: 3, name: 'Therese Wunsch', unavailable: false },
+    { id: 4, name: 'Benedict Kessler', unavailable: true },
+    { id: 5, name: 'Katelyn Rohan', unavailable: false },
+  ]
+  const [selectedPerson, setSelectedPerson] = useState(people[0])
+
+  return (
+    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
+      <Listbox.Button>{selectedPerson.name}</Listbox.Button>
+      <Listbox.Options>
+        {people.map(person => (
+          <Listbox.Option key={person.id} value={person} disabled={person.unavailable}>
+            {person.name}
+          </Listbox.Option>
+        ))}
+      </Listbox.Options>
+    </Listbox>
+  )
+}
+```
+
+### Styling the active and selected option
+
+This is a headless component so there are no styles included by default. Instead, the components expose useful information via [render props](https://reactjs.org/docs/render-props.html) that you can use to apply the styles you'd like to apply yourself.
+
+To style the active `Listbox.Option` you can read the `active` render prop argument, which tells you whether or not that listbox option is the option that is currently focused via the mouse or keyboard.
+
+To style the selected `Listbox.Option` you can read the `selected` render prop argument, which tells you whether or not that listbox option is the option that is currently the `value` passed to the `Listbox`.
+
+> Note: An option can be both **active** and **selected** at the same time!
+
+You can use this state to conditionally apply whatever active/focus styles you like, for instance a blue background like is typical in most operating systems. For the selected state, a checkmark is also common.
+
+```jsx
+import { useState, Fragment } from 'react'
+import { Listbox } from '@headlessui/react'
+import CheckmarkIcon from './CheckmarkIcon'
+
+function MyListbox() {
+  const people = [
+    { id: 1, name: 'Durward Reynolds' },
+    { id: 2, name: 'Kenton Towne' },
+    { id: 3, name: 'Therese Wunsch' },
+    { id: 4, name: 'Benedict Kessler' },
+    { id: 5, name: 'Katelyn Rohan' },
+  ]
+  const [selectedPerson, setSelectedPerson] = useState(people[0])
+
+  return (
+    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
+      <Listbox.Button>{selectedPerson.name}</Listbox.Button>
+      <Listbox.Options>
+        {people.map(person => (
+          {/* Use the `active` state to conditionally style the active option. */}
+          {/* Use the `selected` state to conditionally style the selected option. */}
+          <Listbox.Option as={Fragment} key={person.id} value={person}>
+            {({ active, selected }) => (
+              <li className={`${active ? 'bg-blue-500 text-white' : 'bg-white text-black'}`}>
+                {selected && <CheckmarkIcon />}
+                {person.name}
+              </li>
+            )}
+          </Listbox.Option>
+        ))}
+      </Listbox.Options>
+    </Listbox>
+  )
+}
+```
+
+### Using a custom label
+
+By default the `Listbox` will use the button contents as the label for screenreaders. However you can also render a custom `Listbox.Label`.
+
+```jsx
+import { useState, Fragment } from 'react'
+import { Listbox } from '@headlessui/react'
+import CheckmarkIcon from './CheckmarkIcon'
+
+function MyListbox() {
+  const people = [
+    { id: 1, name: 'Durward Reynolds' },
+    { id: 2, name: 'Kenton Towne' },
+    { id: 3, name: 'Therese Wunsch' },
+    { id: 4, name: 'Benedict Kessler' },
+    { id: 5, name: 'Katelyn Rohan' },
+  ]
+  const [selectedPerson, setSelectedPerson] = useState(people[0])
+
+  return (
+    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
+      <Listbox.Label>Assignee:</Listbox.Label>
+      <Listbox.Button>{selectedPerson.name}</Listbox.Button>
+      <Listbox.Options>
+        {people.map(person => (
+          <Listbox.Option as={Fragment} key={person.id} value={person}>
+            {person.name}
+          </Listbox.Option>
+        ))}
+      </Listbox.Options>
+    </Listbox>
+  )
+}
+```
+
+### Showing/hiding the listbox
+
+By default, your `Listbox.Options` instance will be shown/hidden automatically based on the internal `open` state tracked within the `Listbox` component itself.
+
+```jsx
+import { useState, Fragment } from 'react'
+import { Listbox } from '@headlessui/react'
+
+function MyListbox() {
+  const people = [
+    { id: 1, name: 'Durward Reynolds', unavailable: false },
+    { id: 2, name: 'Kenton Towne', unavailable: false },
+    { id: 3, name: 'Therese Wunsch', unavailable: false },
+    { id: 4, name: 'Benedict Kessler', unavailable: true },
+    { id: 5, name: 'Katelyn Rohan', unavailable: false },
+  ]
+  const [selectedPerson, setSelectedPerson] = useState(people[0])
+
+  return (
+    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
+      <Listbox.Button>{selectedPerson.name}</Listbox.Button>
+
+      {/* By default, this will automatically show/hide when the Listbox.Button is pressed. */}
+      <Listbox.Options>
+        {people.map(person => (
+          <Listbox.Option key={person.id} value={person} disabled={person.unavailable}>
+            {person.name}
+          </Listbox.Option>
+        ))}
+      </Listbox.Options>
+    </Listbox>
+  )
+}
+```
+
+If you'd rather handle this yourself (perhaps because you need to add an extra wrapper element for one reason or another), you can add a `static` prop to the `Listbox.Options` instance to tell it to always render, and inspect the `open` slot prop provided by the `Listbox` to control which element is shown/hidden yourself.
+
+```jsx
+import { useState, Fragment } from 'react'
+import { Listbox } from '@headlessui/react'
+
+function MyListbox() {
+  const people = [
+    { id: 1, name: 'Durward Reynolds', unavailable: false },
+    { id: 2, name: 'Kenton Towne', unavailable: false },
+    { id: 3, name: 'Therese Wunsch', unavailable: false },
+    { id: 4, name: 'Benedict Kessler', unavailable: true },
+    { id: 5, name: 'Katelyn Rohan', unavailable: false },
+  ]
+  const [selectedPerson, setSelectedPerson] = useState(people[0])
+
+  return (
+    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
+      {({ open }) => (
+        <>
+          <Listbox.Button>{selectedPerson.name}</Listbox.Button>
+          {open && (
+            <div>
+              {/* Using `static`, `Listbox.Options` is always rendered and ignores the `open` state. */}
+              <Listbox.Options static>
+                {people.map(person => (
+                  <Listbox.Option key={person.id} value={person} disabled={person.unavailable}>
+                    {person.name}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </div>
+          )}
+        </>
+      )}
+    </Listbox>
+  )
+}
+```
+
+### Disabling an option
+
+Use the `disabled` prop to disable a `Listbox.Option`. This will make it unselectable via keyboard navigation, and it will be skipped when pressing the up/down arrows.
+
+```jsx
+import { useState, Fragment } from 'react'
+import { Listbox } from '@headlessui/react'
+
+function MyListbox() {
+  const people = [
+    { id: 1, name: 'Durward Reynolds', unavailable: false },
+    { id: 2, name: 'Kenton Towne', unavailable: false },
+    { id: 3, name: 'Therese Wunsch', unavailable: false },
+    { id: 4, name: 'Benedict Kessler', unavailable: true },
+    { id: 5, name: 'Katelyn Rohan', unavailable: false },
+  ]
+  const [selectedPerson, setSelectedPerson] = useState(people[0])
+
+  return (
+    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
+      <Listbox.Button>{selectedPerson.name}</Listbox.Button>
+      <Listbox.Options>
+        {people.map(person => (
+          {/* Disabled options will be skipped by keyboard navigation. */}
+          <Listbox.Option key={person.id} value={person} disabled={person.unavailable}>
+            <span className={person.unavailable ? 'opacity-75' : ''}>{person.name}</span>
+          </Listbox.Option>
+        ))}
+      </Listbox.Options>
+    </Listbox>
+  )
+}
+```
+
+### Transitions
+
+To animate the opening/closing of the listbox panel, use the provided `Transition` component. All you need to do is mark your `Listbox.Options` as `static`, wrap it in a `<Transition>`, and the transition will be applied automatically.
+
+```jsx
+import { useState, Fragment } from 'react'
+import { Listbox, Transition } from '@headlessui/react'
+
+function MyListbox() {
+  const people = [
+    { id: 1, name: 'Durward Reynolds', unavailable: false },
+    { id: 2, name: 'Kenton Towne', unavailable: false },
+    { id: 3, name: 'Therese Wunsch', unavailable: false },
+    { id: 4, name: 'Benedict Kessler', unavailable: true },
+    { id: 5, name: 'Katelyn Rohan', unavailable: false },
+  ]
+  const [selectedPerson, setSelectedPerson] = useState(people[0])
+
+  return (
+    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
+      <Listbox.Button>{selectedPerson.name}</Listbox.Button>
+      {/* Use the Transition + open render prop argument to add transitions. */}
+      <Transition
+        show={open}
+        enter="transition duration-100 ease-out"
+        enterFrom="transform scale-95 opacity-0"
+        enterTo="transform scale-100 opacity-100"
+        leave="transition duration-75 ease-out"
+        leaveFrom="transform scale-100 opacity-100"
+        leaveTo="transform scale-95 opacity-0"
+      >
+        <Listbox.Options static>
+          {people.map(person => (
+            <Listbox.Option key={person.id} value={person} disabled={person.unavailable}>
+              {person.name}
+            </Listbox.Option>
+          ))}
+        </Listbox.Options>
+      </Transition>
+    </Listbox>
+  )
+}
+```
+
+### Rendering a different element for a component
+
+By default, the `Listbox` and its subcomponents each render a default element that is sensible for that component.
+
+For example, `Listbox.Label` renders a `label` by default, `Listbox.Button` renders a `button` by default, `Listbox.Options` renders a `ul` and `Listbox.Option` renders a `li` by default. `Listbox` interestingly _does not render an extra element_, and instead renders its children directly by default.
+
+This is easy to change using the `as` prop, which exists on every component.
+
+```jsx
+import { useState, Fragment } from 'react'
+import { Listbox } from '@headlessui/react'
+
+function MyListbox() {
+  const people = [
+    { id: 1, name: 'Durward Reynolds' },
+    { id: 2, name: 'Kenton Towne' },
+    { id: 3, name: 'Therese Wunsch' },
+    { id: 4, name: 'Benedict Kessler' },
+    { id: 5, name: 'Katelyn Rohan' },
+  ]
+  const [selectedPerson, setSelectedPerson] = useState(people[0])
+
+  return (
+    <Listbox as="div" value={selectedPerson} onChange={setSelectedPerson}>
+      <Listbox.Button>{selectedPerson.name}</Listbox.Button>
+      <Listbox.Options as="div">
+        {people.map(person => (
+          <Listbox.Option as="span" key={person.id} value={person}>
+            {person.name}
+          </Listbox.Option>
+        ))}
+      </Listbox.Options>
+    </Listbox>
+  )
+}
+```
+
+To tell an element to render its children directly with no wrapper element, use `as={React.Fragment}`.
+
+```jsx
+import { useState, Fragment } from 'react'
+import { Listbox } from '@headlessui/react'
+
+function MyListbox() {
+  const people = [
+    { id: 1, name: 'Durward Reynolds' },
+    { id: 2, name: 'Kenton Towne' },
+    { id: 3, name: 'Therese Wunsch' },
+    { id: 4, name: 'Benedict Kessler' },
+    { id: 5, name: 'Katelyn Rohan' },
+  ]
+  const [selectedPerson, setSelectedPerson] = useState(people[0])
+
+  return (
+    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
+      <Listbox.Button as={React.Fragment}>{selectedPerson.name}</Listbox.Button>
+      <Listbox.Options>
+        {people.map(person => (
+          <Listbox.Option key={person.id} value={person}>
+            {person.name}
+          </Listbox.Option>
+        ))}
+      </Listbox.Options>
+    </Listbox>
+  )
+}
+```
+
+### Component API
+
+#### Listbox
+
+```jsx
+import { useState, Fragment } from 'react'
+import { Listbox } from '@headlessui/react'
+
+function MyListbox() {
+  const people = [
+    { id: 1, name: 'Durward Reynolds' },
+    { id: 2, name: 'Kenton Towne' },
+    { id: 3, name: 'Therese Wunsch' },
+    { id: 4, name: 'Benedict Kessler' },
+    { id: 5, name: 'Katelyn Rohan' },
+  ]
+  const [selectedPerson, setSelectedPerson] = useState(people[0])
+
+  return (
+    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
+      <Listbox.Button>{selectedPerson.name}</Listbox.Button>
+      <Listbox.Options>
+        {people.map(person => (
+          <Listbox.Option key={person.id} value={person}>
+            {person.name}
+          </Listbox.Option>
+        ))}
+      </Listbox.Options>
+    </Listbox>
+  )
+}
+```
+
+##### Props
+
+| Prop       | Type                    | Default                                 | Description                                              |
+| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
+| `as`       | String \| Component     | `React.Fragment` _(no wrapper element_) | The element or component the `Listbox` should render as. |
+| `value`    | `T` |                              | The selected value.                                      |
+| `onChange` | `(value: T): void`      |                              | The function to call when a new option is selected.      |
+
+##### Render prop object
+
+| Prop   | Type    | Description                         |
+| ------ | ------- | ----------------------------------- |
+| `open` | Boolean | Whether or not the listbox is open. |
+
+#### Listbox.Button
+
+```jsx
+<Listbox.Button>
+  {({ open }) => (
+    <>
+      <span>More options</span>
+      <ChevronRightIcon className={`${open ? 'transform rotate-90' : ''}`} />
+    </>
+  )}
+</Listbox.Button>
+```
+
+##### Props
+
+| Prop | Type                | Default  | Description                                                     |
+| ---- | ------------------- | -------- | --------------------------------------------------------------- |
+| `as` | String \| Component | `button` | The element or component the `Listbox.Button` should render as. |
+
+##### Render prop object
+
+| Prop   | Type    | Description                         |
+| ------ | ------- | ----------------------------------- |
+| `open` | Boolean | Whether or not the listbox is open. |
+
+#### Listbox.Label
+
+```jsx
+<Listbox.Label>Enable notifications</Listbox.Label>
+```
+
+##### Props
+
+| Prop | Type                | Default | Description                                                    |
+| ---- | ------------------- | ------- | -------------------------------------------------------------- |
+| `as` | String \| Component | `label` | The element or component the `Listbox.Label` should render as. |
+
+#### Listbox.Options
+
+```jsx
+<Listbox.Options>
+  <Listbox.Option value="option-a">{/* ... */}></Listbox.Option>
+  {/* ... */}>
+</Listbox.Options>
+```
+
+##### Props
+
+| Prop     | Type                | Default | Description                                                                 |
+| -------- | ------------------- | ------- | --------------------------------------------------------------------------- |
+| `as`     | String \| Component | `ul`    | The element or component the `Listbox.Options` should render as.            |
+| `static` | Boolean             | `false` | Whether the element should ignore the internally managed open/closed state. |
+
+##### Render prop object
+
+| Prop   | Type    | Description                         |
+| ------ | ------- | ----------------------------------- |
+| `open` | Boolean | Whether or not the listbox is open. |
+
+#### Listbox.Option
+
+```jsx
+<Listbox.Option value="option-a">Option A</Listbox.Option>
+```
+
+##### Props
+
+| Prop       | Type                    | Default     | Description                                                                             |
+| ---------- | ----------------------- | ----------- | --------------------------------------------------------------------------------------- |
+| `as`       | String \| Component     | `li`        | The element or component the `Listbox.Option` should render as.                         |
+| `value`    | `T` |  | The option value. |
+| `disabled` | Boolean                 | `false`     | Whether or not the option should be disabled for keyboard navigation and ARIA purposes. |
+
+##### Render prop object
+
+| Prop       | Type    | Description                                                                          |
+| ---------- | ------- | ------------------------------------------------------------------------------------ |
+| `active`   | Boolean | Whether or not the option is the active/focused option in the list.                  |
+| `selected` | Boolean | Whether or not the option is the selected option in the list.                        |
+| `disabled` | Boolean | Whether or not the option is the disabled for keyboard navigation and ARIA purposes. |
+
+## Switch (Toggle)
+
+[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-switch-example-y40i1?file=/src/App.js)
+
+The `Switch` component and related child components are used to quickly build custom switch/toggle components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard support.
+
+- [Basic example](#basic-example-3)
+- [Using a custom label](#using-a-custom-label-1)
+- [Component API](#component-api-3)
+
+### Basic example
+
+Switches are built using the `Switch` component. Optionally you can also use the `Switch.Group` and `Switch.Label` components.
+
+```jsx
+import { useState } from 'react'
+import { Switch } from '@headlessui/react'
+
+function NotificationsToggle() {
+  const [enabled, setEnabled] = useState(false)
+
+  return (
+    <Switch
+      checked={enabled}
+      onChange={setEnabled}
+      className={`${switchValue ? "bg-blue-600" : "bg-gray-200"} relative inline-flex h-6 rounded-full w-8`}
+    >
+      <span className="sr-only">Enable notifications</span>
+      <span
+        className={`${enabled ? "translate-x-4" : "translate-x-0"} inline-block w-4 h-4 transform bg-white rounded-full`}
+      />
+    </Switch>
+  )
+}
+```
+
+### Using a custom label
+
+By default the `Switch` will use the contents as the label for screenreaders. If you need more control, you can render a `Switch.Label` outside of the `Switch`, as long as both the switch and label are within a parent `Switch.Group`.
+
+Clicking the label will toggle the switch state, like you'd expect from a native checkbox.
+
+```jsx
+import { useState } from 'react'
+import { Switch } from '@headlessui/react'
+
+function NotificationsToggle() {
+  const [enabled, setEnabled] = useState(false)
+
+  return (
+    <Switch.Group>
+      <Switch.Label>Enable notifications</Switch.Label>
+      <Switch
+        checked={enabled}
+        onChange={setEnabled}
+        className={`${switchValue ? "bg-blue-600" : "bg-gray-200"} relative inline-flex h-6 rounded-full w-8`}
+      >
+        <span
+          className={`${enabled ? "translate-x-4" : "translate-x-0"} inline-block w-4 h-4 transform bg-white rounded-full`}
+        />
+      </Switch>
+    </Switch.Group>
+  )
+}
+```
+
+### Component API
+
+#### Switch
+
+```jsx
+<Switch checked={checkedState} onChange={setCheckedState}>
+  <span className="sr-only">Enable notifications</span>
+  {/* ... */}
+</Switch>
+```
+
+##### Props
+
+| Prop       | Type                    | Default                                 | Description                                              |
+| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
+| `as`       | String \| Component     | `button` | The element or component the `Switch` should render as. |
+| `checked`    | Boolean |                              | Whether or not the switch is checked.                                      |
+| `onChange` | `(value: boolean): void`      |                              | The function to call when the switch is toggled.      |
+
+##### Render prop object
+
+| Prop   | Type    | Description                         |
+| ------ | ------- | ----------------------------------- |
+| `checked` | Boolean | Whether or not the switch is checked. |
+
+
+#### Switch.Label
+
+```jsx
+<Switch.Group>
+  <Switch.Label>Enable notifications</Switch.Label>
+  <Switch checked={enabled} onChange={setEnabled} className="...">
+    {/* ... */}
+  </Switch>
+</Switch.Group>
+```
+
+##### Props
+
+| Prop       | Type                    | Default                                 | Description                                              |
+| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
+| `as`       | String \| Component     | `label` | The element or component the `Switch.Label` should render as. |
+
+#### Switch.Group
+
+```jsx
+<Switch.Group>
+  <Switch.Label>Enable notifications</Switch.Label>
+  <Switch checked={enabled} onChange={setEnabled} className="...">
+    {/* ... */}
+  </Switch>
+</Switch.Group>
+```
+
+##### Props
+
+| Prop       | Type                    | Default                                 | Description                                              |
+| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
+| `as`       | String \| Component     | `React.Fragment` _(no wrapper element)_| The element or component the `Switch.Group` should render as. |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

862742

increased by3.4%

Lines of code

5738

increased by1.06%

Number of lines in readme file

1374

increased by77.52%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes