Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@headlessui/react

Package Overview
Dependencies
Maintainers
2
Versions
727
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@headlessui/react - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

87

dist/headlessui.cjs.development.js

@@ -40,2 +40,44 @@ 'use strict';

function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it;
if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
return function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
it = o[Symbol.iterator]();
return it.next.bind(it);
}
var id = 0;

@@ -491,3 +533,3 @@

return React.cloneElement(resolvedChildren, // Filter out undefined values so that they don't override the existing values
compact(passThroughProps));
mergeEventFunctions(compact(passThroughProps), resolvedChildren.props, ['onClick']));
}

@@ -499,2 +541,41 @@ }

/**
* We can use this function for the following useCase:
*
* <Menu.Item> <button onClick={console.log} /> </Menu.Item>
*
* Our `Menu.Item` will have an internal `onClick`, if you passthrough an `onClick` to the actual
* `Menu.Item` component we will call it correctly. However, when we have an `onClick` on the actual
* first child, that one should _also_ be called (but before this implementation, it was just
* overriding the `onClick`). But it is only when we *render* that we have access to the existing
* props of this component.
*
* It's a bit hacky, and not that clean, but it is something internal and we have tests to rely on
* so that we can refactor this later (if needed).
*/
function mergeEventFunctions(passThroughProps, existingProps, functionsToMerge) {
var clone = Object.assign({}, passThroughProps);
var _loop = function _loop() {
var func = _step.value;
if (passThroughProps[func] !== undefined && existingProps[func] !== undefined) {
var _Object$assign;
Object.assign(clone, (_Object$assign = {}, _Object$assign[func] = function (event) {
// Props we control
if (!event.defaultPrevented) passThroughProps[func](event); // Existing props on the component
if (!event.defaultPrevented) existingProps[func](event);
}, _Object$assign));
}
};
for (var _iterator = _createForOfIteratorHelperLoose(functionsToMerge), _step; !(_step = _iterator()).done;) {
_loop();
}
return clone;
}
/**
* This is a hack, but basically we want to keep the full 'API' of the component, but we do want to

@@ -504,2 +585,3 @@ * wrap it in a forwardRef so that we _can_ passthrough the ref

function forwardRefWithAs(component) {

@@ -1121,4 +1203,3 @@ return React.forwardRef(component);

className: resolvePropValue(className, propsBag),
disabled: disabled,
'aria-disabled': disabled,
'aria-disabled': disabled === true ? true : undefined,
onClick: handleClick,

@@ -1125,0 +1206,0 @@ onFocus: handleFocus,

2

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,u={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(u[t]=e[t]);return u}var r=0;function u(){return++r}function i(){return e.useState(u)[0]}function o(){var n=e.useRef(!0);return e.useEffect((function(){n.current=!1}),[]),n.current}var a,c="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;function s(e,n){if(e in n){for(var t=n[e],r=arguments.length,u=new Array(r>2?r-2:0),i=2;i<r;i++)u[i-2]=arguments[i];return"function"==typeof t?t.apply(void 0,u):t}var o=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(o,s),o}function l(){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 f(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),u=1;u<t;u++)r[u-1]=arguments[u];e&&r.length>0&&(n=e.classList).add.apply(n,r)}function d(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),u=1;u<t;u++)r[u-1]=arguments[u];e&&r.length>0&&(n=e.classList).remove.apply(n,r)}function v(e,n,t,r,u){var i,o,c=l(),s=void 0!==u?(i=u,o={called:!1},function(){if(!o.called)return o.called=!0,i.apply(void 0,arguments)}):function(){};return f.apply(void 0,[e].concat(n,t)),c.nextFrame((function(){d.apply(void 0,[e].concat(t)),f.apply(void 0,[e].concat(r)),c.add(function(e,n){var t=l();if(!e)return t.dispose;var r=getComputedStyle(e),u=[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})),i=u[0];return 0!==i?t.setTimeout((function(){n(a.Finished)}),i+u[1]):n(a.Finished),t.add((function(){return n(a.Cancelled)})),t.dispose}(e,(function(t){return d.apply(void 0,[e].concat(r,n)),s(t)})))})),c.add((function(){return d.apply(void 0,[e].concat(n,t,r))})),c.add((function(){return s(a.Cancelled)})),c.dispose}function m(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"}(a||(a={}));var p,h=e.createContext(null);!function(e){e.Visible="visible",e.Hidden="hidden"}(p||(p={}));var I,y,g,b,w,x=e.createContext(null);function C(n){var t=e.useRef([]),r=function(){var n=e.useRef(!0);return e.useEffect((function(){return function(){n.current=!1}}),[]),n}(),u=e.useCallback((function(e){var u=t.current.indexOf(e);-1!==u&&(t.current.splice(u,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 u(e)}}),[t,u]);return e.useMemo((function(){return{children:t,register:i,unregister:u}}),[i,u,t])}function E(n){var r=n.children,u=n.enter,s=n.enterFrom,l=n.enterTo,f=n.leave,d=n.leaveFrom,I=n.leaveTo,y=t(n,["children","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo"]),g=e.useRef(null),b=e.useState(p.Visible),w=b[0],E=b[1],T=function(){var n=e.useContext(h);if(null===n)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return n}(),S=T.show,k=T.appear,F=function(){var n=e.useContext(x);if(null===n)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return n}(),R=F.register,O=F.unregister,M=o(),A=i(),P=e.useRef(!1),D=C(e.useCallback((function(){P.current||(E(p.Hidden),O(A))}),[A,O,P]));c((function(){return R(A)}),[R,A]);var j=m(u),G=m(s),U=m(l),L=m(f),N=m(d),H=m(I);if(e.useEffect((function(){if(w===p.Visible&&null===g.current)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}),[g,w]),c((function(){var e=g.current;if(e&&(!M||k))return P.current=!0,S?v(e,j,G,U,(function(){P.current=!1})):v(e,L,N,H,(function(e){P.current=!1,e===a.Finished&&D.children.current.length<=0&&(E(p.Hidden),O(A))}))}),[A,P,O,D,g,M,k,S,j,G,U,L,N,H]),w===p.Hidden)return null;if("function"==typeof r)return e.createElement(x.Provider,{value:D},r(g));var V=y.as,B=void 0===V?"div":V,Q=t(y,["as"]);return e.createElement(x.Provider,{value:D},e.createElement(B,Object.assign({},Q,{ref:g}),r))}function T(n){var r,u=n.show,i=n.appear,a=void 0!==i&&i,c=t(n,["show","appear"]);if(![!0,!1].includes(u))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");var l=e.useState(u?p.Visible:p.Hidden),f=l[0],d=l[1],v=C(e.useCallback((function(){d(p.Hidden)}),[])),m=o(),I=e.useMemo((function(){return{show:u,appear:a||!m}}),[u,a,m]);return e.useEffect((function(){u?d(p.Visible):v.children.current.length<=0&&d(p.Hidden)}),[u,v]),e.createElement(x.Provider,{value:v},e.createElement(h.Provider,{value:I},s(f,((r={})[p.Visible]=function(){return e.createElement(E,Object.assign({},c))},r[p.Hidden]=null,r))))}function S(n,r,u){var i=n.as,o=void 0===i?u:i,a=n.children,c=t(n,["as","children"]),s="function"==typeof a?a(r):a;if(o===e.Fragment&&Object.keys(c).length>0){if(Array.isArray(s)&&s.length>1){var l=new Error("You should only render 1 child");throw Error.captureStackTrace&&Error.captureStackTrace(l,S),l}if(!e.isValidElement(s)){var f=new Error('You should render an element as a child. Did you forget the as="..." prop?');throw Error.captureStackTrace&&Error.captureStackTrace(f,S),f}return e.cloneElement(s,function(e){var n=Object.assign({},e);for(var t in n)void 0===n[t]&&delete n[t];return n}(c))}return e.createElement(o,c,s)}function k(n){return e.forwardRef(n)}function F(){var n=e.useState(l)[0];return e.useEffect((function(){return function(){return n.dispose()}}),[n]),n}function R(){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])}T.Child=E,function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(y||(y={})),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"}(g||(g={})),function(e){e[e.ToggleMenu=0]="ToggleMenu",e[e.OpenMenu=1]="OpenMenu",e[e.CloseMenu=2]="CloseMenu",e[e.GoToItem=3]="GoToItem",e[e.Search=4]="Search",e[e.ClearSearch=5]="ClearSearch",e[e.RegisterItem=6]="RegisterItem",e[e.UnregisterItem=7]="UnregisterItem"}(b||(b={})),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"}(w||(w={}));var O=((I={})[b.ToggleMenu]=function(e){var t;return n({},e,{menuState:s(e.menuState,(t={},t[y.Open]=y.Closed,t[y.Closed]=y.Open,t))})},I[b.CloseMenu]=function(e){return n({},e,{menuState:y.Closed})},I[b.OpenMenu]=function(e){return n({},e,{menuState:y.Open})},I[b.GoToItem]=function(e,t){var r=function(e,n,t){var r,u;if(e.items.length<=0)return null;var i=e.items,o=null!==(r=e.activeItemIndex)&&void 0!==r?r:-1,a=s(n,((u={})[w.FirstItem]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},u[w.PreviousItem]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==o&&t.length-n-1>=o||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},u[w.NextItem]=function(){return i.findIndex((function(e,n){return!(n<=o||e.dataRef.current.disabled)}))},u[w.LastItem]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},u[w.SpecificItem]=function(){return i.findIndex((function(e){return e.id===t}))},u[w.Nothing]=function(){return null},u));return-1===a?e.activeItemIndex:a}(e,t.focus,t.id);return""===e.searchQuery&&e.activeItemIndex===r?e:n({},e,{searchQuery:"",activeItemIndex:r})},I[b.Search]=function(e,t){var r=e.searchQuery+t.value,u=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===u||u===e.activeItemIndex?{searchQuery:r}:{searchQuery:r,activeItemIndex:u})},I[b.ClearSearch]=function(e){return n({},e,{searchQuery:""})},I[b.RegisterItem]=function(e,t){return n({},e,{items:[].concat(e.items,[{id:t.id,dataRef:t.dataRef}])})},I[b.UnregisterItem]=function(e,t){var r=e.items.slice(),u=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===u?null:r.indexOf(u)})},I),M=e.createContext(null);function A(n){var t=e.useContext(M);if(null===t){var r=new Error("<"+n+" /> is missing a parent <"+j.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,A),r}return t}function P(e,n){return s(n.type,O,e,n)}var D=e.Fragment;function j(n){var t=F(),r=e.useReducer(P,{menuState:y.Closed,buttonRef:e.createRef(),itemsRef:e.createRef(),items:[],searchQuery:"",activeItemIndex:null}),u=r[0],i=u.menuState,o=u.itemsRef,a=u.buttonRef,c=r[1];e.useEffect((function(){function e(e){var n;e.defaultPrevented||i===y.Open&&((null===(n=o.current)||void 0===n?void 0:n.contains(e.target))||(c({type:b.CloseMenu}),t.nextFrame((function(){var e;return null===(e=a.current)||void 0===e?void 0:e.focus()}))))}return window.addEventListener("pointerdown",e),function(){return window.removeEventListener("pointerdown",e)}}),[i,o,a,t,c]);var s=e.useMemo((function(){return{open:i===y.Open}}),[i]);return e.createElement(M.Provider,{value:r},S(n,s,D))}var G=k((function t(r,u){var o,a=A([j.name,t.name].join(".")),c=a[0],s=a[1],l=R(c.buttonRef,u),f=e.useState(!1),d=f[0],v=f[1],m="headlessui-menu-button-"+i(),p=F(),h=e.useCallback((function(e){switch(e.key){case g.Space:case g.Enter:case g.ArrowDown:e.preventDefault(),s({type:b.OpenMenu}),p.nextFrame((function(){var e;null===(e=c.itemsRef.current)||void 0===e||e.focus(),s({type:b.GoToItem,focus:w.FirstItem})}));break;case g.ArrowUp:e.preventDefault(),s({type:b.OpenMenu}),p.nextFrame((function(){var e;null===(e=c.itemsRef.current)||void 0===e||e.focus(),s({type:b.GoToItem,focus:w.LastItem})}))}}),[s,c,p]),I=e.useCallback((function(e){e.preventDefault()}),[]),x=e.useCallback((function(){s({type:b.ToggleMenu}),p.nextFrame((function(){var e;return null===(e=c.itemsRef.current)||void 0===e?void 0:e.focus()}))}),[s,p,c]),C=e.useCallback((function(){var e;c.menuState===y.Open&&(null===(e=c.itemsRef.current)||void 0===e||e.focus()),v(!0)}),[c,v]),E=e.useCallback((function(){return v(!1)}),[v]),T=e.useMemo((function(){return{open:c.menuState===y.Open,focused:d}}),[c,d]);return S(n({},r,{ref:l,id:m,type:"button","aria-haspopup":!0,"aria-controls":null===(o=c.itemsRef.current)||void 0===o?void 0:o.id,"aria-expanded":c.menuState===y.Open||void 0,onKeyDown:h,onFocus:C,onBlur:E,onPointerUp:x,onPointerDown:I}),T,"button")})),U=k((function r(u,o){var a,c,s=u.enter,l=u.enterFrom,f=u.enterTo,d=u.leave,v=u.leaveFrom,m=u.leaveTo,p=u.static,h=void 0!==p&&p,I=t(u,["enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","static"]),x=A([j.name,r.name].join(".")),C=x[0],E=x[1],k=R(C.itemsRef,o),O="headlessui-menu-items-"+i(),M=F(),P=F(),D=e.useCallback((function(e){switch(P.dispose(),e.key){case g.Enter:var n;E({type:b.CloseMenu}),null!==C.activeItemIndex&&(null===(n=document.getElementById(C.items[C.activeItemIndex].id))||void 0===n||n.click(),M.nextFrame((function(){var e;return null===(e=C.buttonRef.current)||void 0===e?void 0:e.focus()})));break;case g.ArrowDown:return E({type:b.GoToItem,focus:w.NextItem});case g.ArrowUp:return E({type:b.GoToItem,focus:w.PreviousItem});case g.Home:case g.PageUp:return E({type:b.GoToItem,focus:w.FirstItem});case g.End:case g.PageDown:return E({type:b.GoToItem,focus:w.LastItem});case g.Escape:E({type:b.CloseMenu}),M.nextFrame((function(){var e;return null===(e=C.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case g.Tab:return e.preventDefault();default:1===e.key.length&&(E({type:b.Search,value:e.key}),P.setTimeout((function(){return E({type:b.ClearSearch})}),350))}}),[M,E,P,C]),G=e.useMemo((function(){return{open:C.menuState===y.Open}}),[C]),U={"aria-activedescendant":null===C.activeItemIndex||null===(a=C.items[C.activeItemIndex])||void 0===a?void 0:a.id,"aria-labelledby":null===(c=C.buttonRef.current)||void 0===c?void 0:c.id,id:O,onKeyDown:D,role:"menu",tabIndex:0};return h?S(n({},I,U,{ref:k}),G,"div"):e.createElement(T,Object.assign({show:C.menuState===y.Open},{enter:s,enterFrom:l,enterTo:f,leave:d,leaveFrom:v,leaveTo:m}),(function(e){return S(n({},I,U,{ref:function(n){e.current=n,k(n)}}),G,"div")}))})),L=e.Fragment;function N(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}j.Button=G,j.Items=U,j.Item=function r(u){var o=u.disabled,a=void 0!==o&&o,s=u.className,l=u.onClick,f=t(u,["disabled","className","onClick"]),d=A([j.name,r.name].join(".")),v=d[0],m=d[1],p=F(),h="headlessui-menu-item-"+i(),I=null!==v.activeItemIndex&&v.items[v.activeItemIndex].id===h,y=e.useRef({disabled:a});c((function(){y.current.disabled=a}),[y,a]),c((function(){var e,n;y.current.textValue=null===(e=document.getElementById(h))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[y,h]),c((function(){return m({type:b.RegisterItem,id:h,dataRef:y}),function(){return m({type:b.UnregisterItem,id:h})}}),[y,h]);var g=e.useCallback((function(){a||m({type:b.GoToItem,focus:w.SpecificItem,id:h})}),[a,h,m]),x=e.useCallback((function(){if(a)return m({type:b.GoToItem,focus:w.Nothing});m({type:b.GoToItem,focus:w.SpecificItem,id:h})}),[a,h,m]),C=e.useCallback((function(){a||m({type:b.GoToItem,focus:w.Nothing})}),[a,m]),E=e.useCallback((function(){a||I||m({type:b.GoToItem,focus:w.SpecificItem,id:h})}),[a,I,h,m]),T=e.useCallback((function(e){a||(e.preventDefault(),m({type:b.CloseMenu}),p.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()})))}),[m,a,p,v.buttonRef]),k=e.useCallback((function(e){return a?e.preventDefault():l?l(e):void 0}),[a,l]),R=e.useMemo((function(){return{active:I,disabled:a}}),[I,a]);return S(n({},f,{id:h,role:"menuitem",tabIndex:-1,className:N(s,R),disabled:a,"aria-disabled":a,onClick:k,onFocus:x,onMouseMove:E,onPointerEnter:g,onPointerLeave:C,onPointerUp:T}),R,L)},exports.Menu=j,exports.Transition=T;
"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,u={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(u[t]=e[t]);return u}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 u=0;function i(){return++u}function o(){return e.useState(i)[0]}function a(){var n=e.useRef(!0);return e.useEffect((function(){n.current=!1}),[]),n.current}var c,l="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;function s(e,n){if(e in n){for(var t=n[e],r=arguments.length,u=new Array(r>2?r-2:0),i=2;i<r;i++)u[i-2]=arguments[i];return"function"==typeof t?t.apply(void 0,u):t}var o=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(o,s),o}function f(){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 d(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),u=1;u<t;u++)r[u-1]=arguments[u];e&&r.length>0&&(n=e.classList).add.apply(n,r)}function v(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),u=1;u<t;u++)r[u-1]=arguments[u];e&&r.length>0&&(n=e.classList).remove.apply(n,r)}function m(e,n,t,r,u){var i,o,a=f(),l=void 0!==u?(i=u,o={called:!1},function(){if(!o.called)return o.called=!0,i.apply(void 0,arguments)}):function(){};return d.apply(void 0,[e].concat(n,t)),a.nextFrame((function(){v.apply(void 0,[e].concat(t)),d.apply(void 0,[e].concat(r)),a.add(function(e,n){var t=f();if(!e)return t.dispose;var r=getComputedStyle(e),u=[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})),i=u[0];return 0!==i?t.setTimeout((function(){n(c.Finished)}),i+u[1]):n(c.Finished),t.add((function(){return n(c.Cancelled)})),t.dispose}(e,(function(t){return v.apply(void 0,[e].concat(r,n)),l(t)})))})),a.add((function(){return v.apply(void 0,[e].concat(n,t,r))})),a.add((function(){return l(c.Cancelled)})),a.dispose}function p(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"}(c||(c={}));var h,I=e.createContext(null);!function(e){e.Visible="visible",e.Hidden="hidden"}(h||(h={}));var y,b,g,w,x,C=e.createContext(null);function E(n){var t=e.useRef([]),r=function(){var n=e.useRef(!0);return e.useEffect((function(){return function(){n.current=!1}}),[]),n}(),u=e.useCallback((function(e){var u=t.current.indexOf(e);-1!==u&&(t.current.splice(u,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 u(e)}}),[t,u]);return e.useMemo((function(){return{children:t,register:i,unregister:u}}),[i,u,t])}function T(n){var r=n.children,u=n.enter,i=n.enterFrom,s=n.enterTo,f=n.leave,d=n.leaveFrom,v=n.leaveTo,y=t(n,["children","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo"]),b=e.useRef(null),g=e.useState(h.Visible),w=g[0],x=g[1],T=function(){var n=e.useContext(I);if(null===n)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return n}(),S=T.show,k=T.appear,F=function(){var n=e.useContext(C);if(null===n)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return n}(),R=F.register,O=F.unregister,A=a(),M=o(),P=e.useRef(!1),D=E(e.useCallback((function(){P.current||(x(h.Hidden),O(M))}),[M,O,P]));l((function(){return R(M)}),[R,M]);var j=p(u),G=p(i),U=p(s),L=p(f),N=p(d),H=p(v);if(e.useEffect((function(){if(w===h.Visible&&null===b.current)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}),[b,w]),l((function(){var e=b.current;if(e&&(!A||k))return P.current=!0,S?m(e,j,G,U,(function(){P.current=!1})):m(e,L,N,H,(function(e){P.current=!1,e===c.Finished&&D.children.current.length<=0&&(x(h.Hidden),O(M))}))}),[M,P,O,D,b,A,k,S,j,G,U,L,N,H]),w===h.Hidden)return null;if("function"==typeof r)return e.createElement(C.Provider,{value:D},r(b));var V=y.as,B=void 0===V?"div":V,Q=t(y,["as"]);return e.createElement(C.Provider,{value:D},e.createElement(B,Object.assign({},Q,{ref:b}),r))}function S(n){var r,u=n.show,i=n.appear,o=void 0!==i&&i,c=t(n,["show","appear"]);if(![!0,!1].includes(u))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");var l=e.useState(u?h.Visible:h.Hidden),f=l[0],d=l[1],v=E(e.useCallback((function(){d(h.Hidden)}),[])),m=a(),p=e.useMemo((function(){return{show:u,appear:o||!m}}),[u,o,m]);return e.useEffect((function(){u?d(h.Visible):v.children.current.length<=0&&d(h.Hidden)}),[u,v]),e.createElement(C.Provider,{value:v},e.createElement(I.Provider,{value:p},s(f,((r={})[h.Visible]=function(){return e.createElement(T,Object.assign({},c))},r[h.Hidden]=null,r))))}function k(n,u,i){var o=n.as,a=void 0===o?i:o,c=n.children,l=t(n,["as","children"]),s="function"==typeof c?c(u):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,k),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,k),d}return e.cloneElement(s,function(e,n,t){for(var u,i=Object.assign({},e),o=function(){var t,r=u.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 u=0;return function(){return u>=e.length?{done:!0}:{done:!1,value:e[u++]}}}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"]);!(u=a()).done;)o();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 F(n){return e.forwardRef(n)}function R(){var n=e.useState(f)[0];return e.useEffect((function(){return function(){return n.dispose()}}),[n]),n}function O(){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])}S.Child=T,function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(b||(b={})),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"}(g||(g={})),function(e){e[e.ToggleMenu=0]="ToggleMenu",e[e.OpenMenu=1]="OpenMenu",e[e.CloseMenu=2]="CloseMenu",e[e.GoToItem=3]="GoToItem",e[e.Search=4]="Search",e[e.ClearSearch=5]="ClearSearch",e[e.RegisterItem=6]="RegisterItem",e[e.UnregisterItem=7]="UnregisterItem"}(w||(w={})),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"}(x||(x={}));var A=((y={})[w.ToggleMenu]=function(e){var t;return n({},e,{menuState:s(e.menuState,(t={},t[b.Open]=b.Closed,t[b.Closed]=b.Open,t))})},y[w.CloseMenu]=function(e){return n({},e,{menuState:b.Closed})},y[w.OpenMenu]=function(e){return n({},e,{menuState:b.Open})},y[w.GoToItem]=function(e,t){var r=function(e,n,t){var r,u;if(e.items.length<=0)return null;var i=e.items,o=null!==(r=e.activeItemIndex)&&void 0!==r?r:-1,a=s(n,((u={})[x.FirstItem]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},u[x.PreviousItem]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==o&&t.length-n-1>=o||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},u[x.NextItem]=function(){return i.findIndex((function(e,n){return!(n<=o||e.dataRef.current.disabled)}))},u[x.LastItem]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},u[x.SpecificItem]=function(){return i.findIndex((function(e){return e.id===t}))},u[x.Nothing]=function(){return null},u));return-1===a?e.activeItemIndex:a}(e,t.focus,t.id);return""===e.searchQuery&&e.activeItemIndex===r?e:n({},e,{searchQuery:"",activeItemIndex:r})},y[w.Search]=function(e,t){var r=e.searchQuery+t.value,u=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===u||u===e.activeItemIndex?{searchQuery:r}:{searchQuery:r,activeItemIndex:u})},y[w.ClearSearch]=function(e){return n({},e,{searchQuery:""})},y[w.RegisterItem]=function(e,t){return n({},e,{items:[].concat(e.items,[{id:t.id,dataRef:t.dataRef}])})},y[w.UnregisterItem]=function(e,t){var r=e.items.slice(),u=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===u?null:r.indexOf(u)})},y),M=e.createContext(null);function P(n){var t=e.useContext(M);if(null===t){var r=new Error("<"+n+" /> is missing a parent <"+G.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,P),r}return t}function D(e,n){return s(n.type,A,e,n)}var j=e.Fragment;function G(n){var t=R(),r=e.useReducer(D,{menuState:b.Closed,buttonRef:e.createRef(),itemsRef:e.createRef(),items:[],searchQuery:"",activeItemIndex:null}),u=r[0],i=u.menuState,o=u.itemsRef,a=u.buttonRef,c=r[1];e.useEffect((function(){function e(e){var n;e.defaultPrevented||i===b.Open&&((null===(n=o.current)||void 0===n?void 0:n.contains(e.target))||(c({type:w.CloseMenu}),t.nextFrame((function(){var e;return null===(e=a.current)||void 0===e?void 0:e.focus()}))))}return window.addEventListener("pointerdown",e),function(){return window.removeEventListener("pointerdown",e)}}),[i,o,a,t,c]);var l=e.useMemo((function(){return{open:i===b.Open}}),[i]);return e.createElement(M.Provider,{value:r},k(n,l,j))}var U=F((function t(r,u){var i,a=P([G.name,t.name].join(".")),c=a[0],l=a[1],s=O(c.buttonRef,u),f=e.useState(!1),d=f[0],v=f[1],m="headlessui-menu-button-"+o(),p=R(),h=e.useCallback((function(e){switch(e.key){case g.Space:case g.Enter:case g.ArrowDown:e.preventDefault(),l({type:w.OpenMenu}),p.nextFrame((function(){var e;null===(e=c.itemsRef.current)||void 0===e||e.focus(),l({type:w.GoToItem,focus:x.FirstItem})}));break;case g.ArrowUp:e.preventDefault(),l({type:w.OpenMenu}),p.nextFrame((function(){var e;null===(e=c.itemsRef.current)||void 0===e||e.focus(),l({type:w.GoToItem,focus:x.LastItem})}))}}),[l,c,p]),I=e.useCallback((function(e){e.preventDefault()}),[]),y=e.useCallback((function(){l({type:w.ToggleMenu}),p.nextFrame((function(){var e;return null===(e=c.itemsRef.current)||void 0===e?void 0:e.focus()}))}),[l,p,c]),C=e.useCallback((function(){var e;c.menuState===b.Open&&(null===(e=c.itemsRef.current)||void 0===e||e.focus()),v(!0)}),[c,v]),E=e.useCallback((function(){return v(!1)}),[v]),T=e.useMemo((function(){return{open:c.menuState===b.Open,focused:d}}),[c,d]);return k(n({},r,{ref:s,id:m,type:"button","aria-haspopup":!0,"aria-controls":null===(i=c.itemsRef.current)||void 0===i?void 0:i.id,"aria-expanded":c.menuState===b.Open||void 0,onKeyDown:h,onFocus:C,onBlur:E,onPointerUp:y,onPointerDown:I}),T,"button")})),L=F((function r(u,i){var a,c,l=u.enter,s=u.enterFrom,f=u.enterTo,d=u.leave,v=u.leaveFrom,m=u.leaveTo,p=u.static,h=void 0!==p&&p,I=t(u,["enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","static"]),y=P([G.name,r.name].join(".")),C=y[0],E=y[1],T=O(C.itemsRef,i),F="headlessui-menu-items-"+o(),A=R(),M=R(),D=e.useCallback((function(e){switch(M.dispose(),e.key){case g.Enter:var n;E({type:w.CloseMenu}),null!==C.activeItemIndex&&(null===(n=document.getElementById(C.items[C.activeItemIndex].id))||void 0===n||n.click(),A.nextFrame((function(){var e;return null===(e=C.buttonRef.current)||void 0===e?void 0:e.focus()})));break;case g.ArrowDown:return E({type:w.GoToItem,focus:x.NextItem});case g.ArrowUp:return E({type:w.GoToItem,focus:x.PreviousItem});case g.Home:case g.PageUp:return E({type:w.GoToItem,focus:x.FirstItem});case g.End:case g.PageDown:return E({type:w.GoToItem,focus:x.LastItem});case g.Escape:E({type:w.CloseMenu}),A.nextFrame((function(){var e;return null===(e=C.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case g.Tab:return e.preventDefault();default:1===e.key.length&&(E({type:w.Search,value:e.key}),M.setTimeout((function(){return E({type:w.ClearSearch})}),350))}}),[A,E,M,C]),j=e.useMemo((function(){return{open:C.menuState===b.Open}}),[C]),U={"aria-activedescendant":null===C.activeItemIndex||null===(a=C.items[C.activeItemIndex])||void 0===a?void 0:a.id,"aria-labelledby":null===(c=C.buttonRef.current)||void 0===c?void 0:c.id,id:F,onKeyDown:D,role:"menu",tabIndex:0};return h?k(n({},I,U,{ref:T}),j,"div"):e.createElement(S,Object.assign({show:C.menuState===b.Open},{enter:l,enterFrom:s,enterTo:f,leave:d,leaveFrom:v,leaveTo:m}),(function(e){return k(n({},I,U,{ref:function(n){e.current=n,T(n)}}),j,"div")}))})),N=e.Fragment;function H(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}G.Button=U,G.Items=L,G.Item=function r(u){var i=u.disabled,a=void 0!==i&&i,c=u.className,s=u.onClick,f=t(u,["disabled","className","onClick"]),d=P([G.name,r.name].join(".")),v=d[0],m=d[1],p=R(),h="headlessui-menu-item-"+o(),I=null!==v.activeItemIndex&&v.items[v.activeItemIndex].id===h,y=e.useRef({disabled:a});l((function(){y.current.disabled=a}),[y,a]),l((function(){var e,n;y.current.textValue=null===(e=document.getElementById(h))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[y,h]),l((function(){return m({type:w.RegisterItem,id:h,dataRef:y}),function(){return m({type:w.UnregisterItem,id:h})}}),[y,h]);var b=e.useCallback((function(){a||m({type:w.GoToItem,focus:x.SpecificItem,id:h})}),[a,h,m]),g=e.useCallback((function(){if(a)return m({type:w.GoToItem,focus:x.Nothing});m({type:w.GoToItem,focus:x.SpecificItem,id:h})}),[a,h,m]),C=e.useCallback((function(){a||m({type:w.GoToItem,focus:x.Nothing})}),[a,m]),E=e.useCallback((function(){a||I||m({type:w.GoToItem,focus:x.SpecificItem,id:h})}),[a,I,h,m]),T=e.useCallback((function(e){a||(e.preventDefault(),m({type:w.CloseMenu}),p.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()})))}),[m,a,p,v.buttonRef]),S=e.useCallback((function(e){return a?e.preventDefault():s?s(e):void 0}),[a,s]),F=e.useMemo((function(){return{active:I,disabled:a}}),[I,a]);return k(n({},f,{id:h,role:"menuitem",tabIndex:-1,className:H(c,F),"aria-disabled":!0===a||void 0,onClick:S,onFocus:g,onMouseMove:E,onPointerEnter:b,onPointerLeave:C,onPointerUp:T}),F,N)},exports.Menu=G,exports.Transition=S;
//# sourceMappingURL=headlessui.cjs.production.min.js.map

@@ -36,2 +36,44 @@ import { useState, useRef, useEffect, useLayoutEffect, useCallback, useMemo, createElement, createContext, useContext, Fragment, isValidElement, cloneElement, forwardRef, useReducer, createRef } from 'react';

function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it;
if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
return function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
it = o[Symbol.iterator]();
return it.next.bind(it);
}
var id = 0;

@@ -487,3 +529,3 @@

return cloneElement(resolvedChildren, // Filter out undefined values so that they don't override the existing values
compact(passThroughProps));
mergeEventFunctions(compact(passThroughProps), resolvedChildren.props, ['onClick']));
}

@@ -495,2 +537,41 @@ }

/**
* We can use this function for the following useCase:
*
* <Menu.Item> <button onClick={console.log} /> </Menu.Item>
*
* Our `Menu.Item` will have an internal `onClick`, if you passthrough an `onClick` to the actual
* `Menu.Item` component we will call it correctly. However, when we have an `onClick` on the actual
* first child, that one should _also_ be called (but before this implementation, it was just
* overriding the `onClick`). But it is only when we *render* that we have access to the existing
* props of this component.
*
* It's a bit hacky, and not that clean, but it is something internal and we have tests to rely on
* so that we can refactor this later (if needed).
*/
function mergeEventFunctions(passThroughProps, existingProps, functionsToMerge) {
var clone = Object.assign({}, passThroughProps);
var _loop = function _loop() {
var func = _step.value;
if (passThroughProps[func] !== undefined && existingProps[func] !== undefined) {
var _Object$assign;
Object.assign(clone, (_Object$assign = {}, _Object$assign[func] = function (event) {
// Props we control
if (!event.defaultPrevented) passThroughProps[func](event); // Existing props on the component
if (!event.defaultPrevented) existingProps[func](event);
}, _Object$assign));
}
};
for (var _iterator = _createForOfIteratorHelperLoose(functionsToMerge), _step; !(_step = _iterator()).done;) {
_loop();
}
return clone;
}
/**
* This is a hack, but basically we want to keep the full 'API' of the component, but we do want to

@@ -500,2 +581,3 @@ * wrap it in a forwardRef so that we _can_ passthrough the ref

function forwardRefWithAs(component) {

@@ -1117,4 +1199,3 @@ return forwardRef(component);

className: resolvePropValue(className, propsBag),
disabled: disabled,
'aria-disabled': disabled,
'aria-disabled': disabled === true ? true : undefined,
onClick: handleClick,

@@ -1121,0 +1202,0 @@ onFocus: handleFocus,

@@ -40,2 +40,44 @@ (function (global, factory) {

function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it;
if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
return function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
it = o[Symbol.iterator]();
return it.next.bind(it);
}
var id = 0;

@@ -491,3 +533,3 @@

return React.cloneElement(resolvedChildren, // Filter out undefined values so that they don't override the existing values
compact(passThroughProps));
mergeEventFunctions(compact(passThroughProps), resolvedChildren.props, ['onClick']));
}

@@ -499,2 +541,41 @@ }

/**
* We can use this function for the following useCase:
*
* <Menu.Item> <button onClick={console.log} /> </Menu.Item>
*
* Our `Menu.Item` will have an internal `onClick`, if you passthrough an `onClick` to the actual
* `Menu.Item` component we will call it correctly. However, when we have an `onClick` on the actual
* first child, that one should _also_ be called (but before this implementation, it was just
* overriding the `onClick`). But it is only when we *render* that we have access to the existing
* props of this component.
*
* It's a bit hacky, and not that clean, but it is something internal and we have tests to rely on
* so that we can refactor this later (if needed).
*/
function mergeEventFunctions(passThroughProps, existingProps, functionsToMerge) {
var clone = Object.assign({}, passThroughProps);
var _loop = function _loop() {
var func = _step.value;
if (passThroughProps[func] !== undefined && existingProps[func] !== undefined) {
var _Object$assign;
Object.assign(clone, (_Object$assign = {}, _Object$assign[func] = function (event) {
// Props we control
if (!event.defaultPrevented) passThroughProps[func](event); // Existing props on the component
if (!event.defaultPrevented) existingProps[func](event);
}, _Object$assign));
}
};
for (var _iterator = _createForOfIteratorHelperLoose(functionsToMerge), _step; !(_step = _iterator()).done;) {
_loop();
}
return clone;
}
/**
* This is a hack, but basically we want to keep the full 'API' of the component, but we do want to

@@ -504,2 +585,3 @@ * wrap it in a forwardRef so that we _can_ passthrough the ref

function forwardRefWithAs(component) {

@@ -1121,4 +1203,3 @@ return React.forwardRef(component);

className: resolvePropValue(className, propsBag),
disabled: disabled,
'aria-disabled': disabled,
'aria-disabled': disabled === true ? true : undefined,
onClick: handleClick,

@@ -1125,0 +1206,0 @@ onFocus: handleFocus,

@@ -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,u={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(u[t]=e[t]);return u}var u=0;function i(){return++u}function o(){return n.useState(i)[0]}function a(){var e=n.useRef(!0);return n.useEffect((function(){e.current=!1}),[]),e.current}var c,s="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;function l(e,n){if(e in n){for(var t=n[e],r=arguments.length,u=new Array(r>2?r-2:0),i=2;i<r;i++)u[i-2]=arguments[i];return"function"==typeof t?t.apply(void 0,u):t}var o=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(o,l),o}function f(){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 d(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),u=1;u<t;u++)r[u-1]=arguments[u];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),u=1;u<t;u++)r[u-1]=arguments[u];e&&r.length>0&&(n=e.classList).remove.apply(n,r)}function v(e,n,t,r,u){var i,o,a=f(),s=void 0!==u?(i=u,o={called:!1},function(){if(!o.called)return o.called=!0,i.apply(void 0,arguments)}):function(){};return d.apply(void 0,[e].concat(n,t)),a.nextFrame((function(){m.apply(void 0,[e].concat(t)),d.apply(void 0,[e].concat(r)),a.add(function(e,n){var t=f();if(!e)return t.dispose;var r=getComputedStyle(e),u=[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})),i=u[0];return 0!==i?t.setTimeout((function(){n(c.Finished)}),i+u[1]):n(c.Finished),t.add((function(){return n(c.Cancelled)})),t.dispose}(e,(function(t){return m.apply(void 0,[e].concat(r,n)),s(t)})))})),a.add((function(){return m.apply(void 0,[e].concat(n,t,r))})),a.add((function(){return s(c.Cancelled)})),a.dispose}function p(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"}(c||(c={}));var h,I=n.createContext(null);!function(e){e.Visible="visible",e.Hidden="hidden"}(h||(h={}));var y,g,b,w,x,C=n.createContext(null);function E(e){var t=n.useRef([]),r=function(){var e=n.useRef(!0);return n.useEffect((function(){return function(){e.current=!1}}),[]),e}(),u=n.useCallback((function(n){var u=t.current.indexOf(n);-1!==u&&(t.current.splice(u,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 u(e)}}),[t,u]);return n.useMemo((function(){return{children:t,register:i,unregister:u}}),[i,u,t])}function T(e){var t=e.children,u=e.enter,i=e.enterFrom,l=e.enterTo,f=e.leave,d=e.leaveFrom,m=e.leaveTo,y=r(e,["children","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo"]),g=n.useRef(null),b=n.useState(h.Visible),w=b[0],x=b[1],T=function(){var e=n.useContext(I);if(null===e)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return e}(),S=T.show,k=T.appear,F=function(){var e=n.useContext(C);if(null===e)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return e}(),R=F.register,O=F.unregister,M=a(),A=o(),P=n.useRef(!1),D=E(n.useCallback((function(){P.current||(x(h.Hidden),O(A))}),[A,O,P]));s((function(){return R(A)}),[R,A]);var j=p(u),G=p(i),U=p(l),L=p(f),N=p(d),H=p(m);if(n.useEffect((function(){if(w===h.Visible&&null===g.current)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}),[g,w]),s((function(){var e=g.current;if(e&&(!M||k))return P.current=!0,S?v(e,j,G,U,(function(){P.current=!1})):v(e,L,N,H,(function(e){P.current=!1,e===c.Finished&&D.children.current.length<=0&&(x(h.Hidden),O(A))}))}),[A,P,O,D,g,M,k,S,j,G,U,L,N,H]),w===h.Hidden)return null;if("function"==typeof t)return n.createElement(C.Provider,{value:D},t(g));var V=y.as,B=void 0===V?"div":V,Q=r(y,["as"]);return n.createElement(C.Provider,{value:D},n.createElement(B,Object.assign({},Q,{ref:g}),t))}function S(e){var t,u=e.show,i=e.appear,o=void 0!==i&&i,c=r(e,["show","appear"]);if(![!0,!1].includes(u))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");var s=n.useState(u?h.Visible:h.Hidden),f=s[0],d=s[1],m=E(n.useCallback((function(){d(h.Hidden)}),[])),v=a(),p=n.useMemo((function(){return{show:u,appear:o||!v}}),[u,o,v]);return n.useEffect((function(){u?d(h.Visible):m.children.current.length<=0&&d(h.Hidden)}),[u,m]),n.createElement(C.Provider,{value:m},n.createElement(I.Provider,{value:p},l(f,((t={})[h.Visible]=function(){return n.createElement(T,Object.assign({},c))},t[h.Hidden]=null,t))))}function k(e,t,u){var i=e.as,o=void 0===i?u:i,a=e.children,c=r(e,["as","children"]),s="function"==typeof a?a(t):a;if(o===n.Fragment&&Object.keys(c).length>0){if(Array.isArray(s)&&s.length>1){var l=new Error("You should only render 1 child");throw Error.captureStackTrace&&Error.captureStackTrace(l,k),l}if(!n.isValidElement(s)){var f=new Error('You should render an element as a child. Did you forget the as="..." prop?');throw Error.captureStackTrace&&Error.captureStackTrace(f,k),f}return n.cloneElement(s,function(e){var n=Object.assign({},e);for(var t in n)void 0===n[t]&&delete n[t];return n}(c))}return n.createElement(o,c,s)}function F(e){return n.forwardRef(e)}function R(){var e=n.useState(f)[0];return n.useEffect((function(){return function(){return e.dispose()}}),[e]),e}function O(){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])}S.Child=T,function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(g||(g={})),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"}(b||(b={})),function(e){e[e.ToggleMenu=0]="ToggleMenu",e[e.OpenMenu=1]="OpenMenu",e[e.CloseMenu=2]="CloseMenu",e[e.GoToItem=3]="GoToItem",e[e.Search=4]="Search",e[e.ClearSearch=5]="ClearSearch",e[e.RegisterItem=6]="RegisterItem",e[e.UnregisterItem=7]="UnregisterItem"}(w||(w={})),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"}(x||(x={}));var M=((y={})[w.ToggleMenu]=function(e){var n;return t({},e,{menuState:l(e.menuState,(n={},n[g.Open]=g.Closed,n[g.Closed]=g.Open,n))})},y[w.CloseMenu]=function(e){return t({},e,{menuState:g.Closed})},y[w.OpenMenu]=function(e){return t({},e,{menuState:g.Open})},y[w.GoToItem]=function(e,n){var r=function(e,n,t){var r,u;if(e.items.length<=0)return null;var i=e.items,o=null!==(r=e.activeItemIndex)&&void 0!==r?r:-1,a=l(n,((u={})[x.FirstItem]=function(){return i.findIndex((function(e){return!e.dataRef.current.disabled}))},u[x.PreviousItem]=function(){var e=i.slice().reverse().findIndex((function(e,n,t){return!(-1!==o&&t.length-n-1>=o||e.dataRef.current.disabled)}));return-1===e?e:i.length-1-e},u[x.NextItem]=function(){return i.findIndex((function(e,n){return!(n<=o||e.dataRef.current.disabled)}))},u[x.LastItem]=function(){var e=i.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:i.length-1-e},u[x.SpecificItem]=function(){return i.findIndex((function(e){return e.id===t}))},u[x.Nothing]=function(){return null},u));return-1===a?e.activeItemIndex:a}(e,n.focus,n.id);return""===e.searchQuery&&e.activeItemIndex===r?e:t({},e,{searchQuery:"",activeItemIndex:r})},y[w.Search]=function(e,n){var r=e.searchQuery+n.value,u=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===u||u===e.activeItemIndex?{searchQuery:r}:{searchQuery:r,activeItemIndex:u})},y[w.ClearSearch]=function(e){return t({},e,{searchQuery:""})},y[w.RegisterItem]=function(e,n){return t({},e,{items:[].concat(e.items,[{id:n.id,dataRef:n.dataRef}])})},y[w.UnregisterItem]=function(e,n){var r=e.items.slice(),u=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===u?null:r.indexOf(u)})},y),A=n.createContext(null);function P(e){var t=n.useContext(A);if(null===t){var r=new Error("<"+e+" /> is missing a parent <"+G.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,P),r}return t}function D(e,n){return l(n.type,M,e,n)}var j=n.Fragment;function G(e){var t=R(),r=n.useReducer(D,{menuState:g.Closed,buttonRef:n.createRef(),itemsRef:n.createRef(),items:[],searchQuery:"",activeItemIndex:null}),u=r[0],i=u.menuState,o=u.itemsRef,a=u.buttonRef,c=r[1];n.useEffect((function(){function e(e){var n;e.defaultPrevented||i===g.Open&&((null===(n=o.current)||void 0===n?void 0:n.contains(e.target))||(c({type:w.CloseMenu}),t.nextFrame((function(){var e;return null===(e=a.current)||void 0===e?void 0:e.focus()}))))}return window.addEventListener("pointerdown",e),function(){return window.removeEventListener("pointerdown",e)}}),[i,o,a,t,c]);var s=n.useMemo((function(){return{open:i===g.Open}}),[i]);return n.createElement(A.Provider,{value:r},k(e,s,j))}var U=F((function e(r,u){var i,a=P([G.name,e.name].join(".")),c=a[0],s=a[1],l=O(c.buttonRef,u),f=n.useState(!1),d=f[0],m=f[1],v="headlessui-menu-button-"+o(),p=R(),h=n.useCallback((function(e){switch(e.key){case b.Space:case b.Enter:case b.ArrowDown:e.preventDefault(),s({type:w.OpenMenu}),p.nextFrame((function(){var e;null===(e=c.itemsRef.current)||void 0===e||e.focus(),s({type:w.GoToItem,focus:x.FirstItem})}));break;case b.ArrowUp:e.preventDefault(),s({type:w.OpenMenu}),p.nextFrame((function(){var e;null===(e=c.itemsRef.current)||void 0===e||e.focus(),s({type:w.GoToItem,focus:x.LastItem})}))}}),[s,c,p]),I=n.useCallback((function(e){e.preventDefault()}),[]),y=n.useCallback((function(){s({type:w.ToggleMenu}),p.nextFrame((function(){var e;return null===(e=c.itemsRef.current)||void 0===e?void 0:e.focus()}))}),[s,p,c]),C=n.useCallback((function(){var e;c.menuState===g.Open&&(null===(e=c.itemsRef.current)||void 0===e||e.focus()),m(!0)}),[c,m]),E=n.useCallback((function(){return m(!1)}),[m]),T=n.useMemo((function(){return{open:c.menuState===g.Open,focused:d}}),[c,d]);return k(t({},r,{ref:l,id:v,type:"button","aria-haspopup":!0,"aria-controls":null===(i=c.itemsRef.current)||void 0===i?void 0:i.id,"aria-expanded":c.menuState===g.Open||void 0,onKeyDown:h,onFocus:C,onBlur:E,onPointerUp:y,onPointerDown:I}),T,"button")})),L=F((function e(u,i){var a,c,s=u.enter,l=u.enterFrom,f=u.enterTo,d=u.leave,m=u.leaveFrom,v=u.leaveTo,p=u.static,h=void 0!==p&&p,I=r(u,["enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","static"]),y=P([G.name,e.name].join(".")),C=y[0],E=y[1],T=O(C.itemsRef,i),F="headlessui-menu-items-"+o(),M=R(),A=R(),D=n.useCallback((function(e){switch(A.dispose(),e.key){case b.Enter:var n;E({type:w.CloseMenu}),null!==C.activeItemIndex&&(null===(n=document.getElementById(C.items[C.activeItemIndex].id))||void 0===n||n.click(),M.nextFrame((function(){var e;return null===(e=C.buttonRef.current)||void 0===e?void 0:e.focus()})));break;case b.ArrowDown:return E({type:w.GoToItem,focus:x.NextItem});case b.ArrowUp:return E({type:w.GoToItem,focus:x.PreviousItem});case b.Home:case b.PageUp:return E({type:w.GoToItem,focus:x.FirstItem});case b.End:case b.PageDown:return E({type:w.GoToItem,focus:x.LastItem});case b.Escape:E({type:w.CloseMenu}),M.nextFrame((function(){var e;return null===(e=C.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case b.Tab:return e.preventDefault();default:1===e.key.length&&(E({type:w.Search,value:e.key}),A.setTimeout((function(){return E({type:w.ClearSearch})}),350))}}),[M,E,A,C]),j=n.useMemo((function(){return{open:C.menuState===g.Open}}),[C]),U={"aria-activedescendant":null===C.activeItemIndex||null===(a=C.items[C.activeItemIndex])||void 0===a?void 0:a.id,"aria-labelledby":null===(c=C.buttonRef.current)||void 0===c?void 0:c.id,id:F,onKeyDown:D,role:"menu",tabIndex:0};return h?k(t({},I,U,{ref:T}),j,"div"):n.createElement(S,Object.assign({show:C.menuState===g.Open},{enter:s,enterFrom:l,enterTo:f,leave:d,leaveFrom:m,leaveTo:v}),(function(e){return k(t({},I,U,{ref:function(n){e.current=n,T(n)}}),j,"div")}))})),N=n.Fragment;function H(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}G.Button=U,G.Items=L,G.Item=function e(u){var i=u.disabled,a=void 0!==i&&i,c=u.className,l=u.onClick,f=r(u,["disabled","className","onClick"]),d=P([G.name,e.name].join(".")),m=d[0],v=d[1],p=R(),h="headlessui-menu-item-"+o(),I=null!==m.activeItemIndex&&m.items[m.activeItemIndex].id===h,y=n.useRef({disabled:a});s((function(){y.current.disabled=a}),[y,a]),s((function(){var e,n;y.current.textValue=null===(e=document.getElementById(h))||void 0===e||null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase()}),[y,h]),s((function(){return v({type:w.RegisterItem,id:h,dataRef:y}),function(){return v({type:w.UnregisterItem,id:h})}}),[y,h]);var g=n.useCallback((function(){a||v({type:w.GoToItem,focus:x.SpecificItem,id:h})}),[a,h,v]),b=n.useCallback((function(){if(a)return v({type:w.GoToItem,focus:x.Nothing});v({type:w.GoToItem,focus:x.SpecificItem,id:h})}),[a,h,v]),C=n.useCallback((function(){a||v({type:w.GoToItem,focus:x.Nothing})}),[a,v]),E=n.useCallback((function(){a||I||v({type:w.GoToItem,focus:x.SpecificItem,id:h})}),[a,I,h,v]),T=n.useCallback((function(e){a||(e.preventDefault(),v({type:w.CloseMenu}),p.nextFrame((function(){var e;return null===(e=m.buttonRef.current)||void 0===e?void 0:e.focus()})))}),[v,a,p,m.buttonRef]),S=n.useCallback((function(e){return a?e.preventDefault():l?l(e):void 0}),[a,l]),F=n.useMemo((function(){return{active:I,disabled:a}}),[I,a]);return k(t({},f,{id:h,role:"menuitem",tabIndex:-1,className:H(c,F),disabled:a,"aria-disabled":a,onClick:S,onFocus:b,onMouseMove:E,onPointerEnter:g,onPointerLeave:C,onPointerUp:T}),F,N)},e.Menu=G,e.Transition=S,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,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n.indexOf(t=o[r])>=0||(i[t]=e[t]);return i}function i(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=0;function u(){return++o}function a(){return n.useState(u)[0]}function c(){var e=n.useRef(!0);return n.useEffect((function(){e.current=!1}),[]),e.current}var l,s="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;function f(e,n){if(e in n){for(var t=n[e],r=arguments.length,i=new Array(r>2?r-2:0),o=2;o<r;o++)i[o-2]=arguments[o];return"function"==typeof t?t.apply(void 0,i):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),i=1;i<t;i++)r[i-1]=arguments[i];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),i=1;i<t;i++)r[i-1]=arguments[i];e&&r.length>0&&(n=e.classList).remove.apply(n,r)}function p(e,n,t,r,i){var o,u,a=d(),c=void 0!==i?(o=i,u={called:!1},function(){if(!u.called)return u.called=!0,o.apply(void 0,arguments)}):function(){};return v.apply(void 0,[e].concat(n,t)),a.nextFrame((function(){m.apply(void 0,[e].concat(t)),v.apply(void 0,[e].concat(r)),a.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})),o=i[0];return 0!==o?t.setTimeout((function(){n(l.Finished)}),o+i[1]):n(l.Finished),t.add((function(){return n(l.Cancelled)})),t.dispose}(e,(function(t){return m.apply(void 0,[e].concat(r,n)),c(t)})))})),a.add((function(){return m.apply(void 0,[e].concat(n,t,r))})),a.add((function(){return c(l.Cancelled)})),a.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"}(l||(l={}));var y,I=n.createContext(null);!function(e){e.Visible="visible",e.Hidden="hidden"}(y||(y={}));var b,g,w,x,C,E=n.createContext(null);function T(e){var t=n.useRef([]),r=function(){var e=n.useRef(!0);return n.useEffect((function(){return function(){e.current=!1}}),[]),e}(),i=n.useCallback((function(n){var i=t.current.indexOf(n);-1!==i&&(t.current.splice(i,1),t.current.length<=0&&r.current&&(null==e||e()))}),[e,r,t]),o=n.useCallback((function(e){return t.current.push(e),function(){return i(e)}}),[t,i]);return n.useMemo((function(){return{children:t,register:o,unregister:i}}),[o,i,t])}function S(e){var t=e.children,i=e.enter,o=e.enterFrom,u=e.enterTo,f=e.leave,d=e.leaveFrom,v=e.leaveTo,m=r(e,["children","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo"]),b=n.useRef(null),g=n.useState(y.Visible),w=g[0],x=g[1],C=function(){var e=n.useContext(I);if(null===e)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return e}(),S=C.show,k=C.appear,F=function(){var e=n.useContext(E);if(null===e)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition />.");return e}(),R=F.register,O=F.unregister,A=c(),M=a(),P=n.useRef(!1),D=T(n.useCallback((function(){P.current||(x(y.Hidden),O(M))}),[M,O,P]));s((function(){return R(M)}),[R,M]);var j=h(i),G=h(o),U=h(u),L=h(f),N=h(d),H=h(v);if(n.useEffect((function(){if(w===y.Visible&&null===b.current)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}),[b,w]),s((function(){var e=b.current;if(e&&(!A||k))return P.current=!0,S?p(e,j,G,U,(function(){P.current=!1})):p(e,L,N,H,(function(e){P.current=!1,e===l.Finished&&D.children.current.length<=0&&(x(y.Hidden),O(M))}))}),[M,P,O,D,b,A,k,S,j,G,U,L,N,H]),w===y.Hidden)return null;if("function"==typeof t)return n.createElement(E.Provider,{value:D},t(b));var V=m.as,B=void 0===V?"div":V,Q=r(m,["as"]);return n.createElement(E.Provider,{value:D},n.createElement(B,Object.assign({},Q,{ref:b}),t))}function k(e){var t,i=e.show,o=e.appear,u=void 0!==o&&o,a=r(e,["show","appear"]);if(![!0,!1].includes(i))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");var l=n.useState(i?y.Visible:y.Hidden),s=l[0],d=l[1],v=T(n.useCallback((function(){d(y.Hidden)}),[])),m=c(),p=n.useMemo((function(){return{show:i,appear:u||!m}}),[i,u,m]);return n.useEffect((function(){i?d(y.Visible):v.children.current.length<=0&&d(y.Hidden)}),[i,v]),n.createElement(E.Provider,{value:v},n.createElement(I.Provider,{value:p},f(s,((t={})[y.Visible]=function(){return n.createElement(S,Object.assign({},a))},t[y.Hidden]=null,t))))}function F(e,t,o){var u=e.as,a=void 0===u?o: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,F),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,F),d}return n.cloneElement(s,function(e,n,t){for(var r,o=Object.assign({},e),u=function(){var t,i=r.value;void 0!==e[i]&&void 0!==n[i]&&Object.assign(o,((t={})[i]=function(t){t.defaultPrevented||e[i](t),t.defaultPrevented||n[i](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 i(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)?i(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 o}(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 R(e){return n.forwardRef(e)}function O(){var e=n.useState(d)[0];return n.useEffect((function(){return function(){return e.dispose()}}),[e]),e}function A(){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])}k.Child=S,function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(g||(g={})),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"}(w||(w={})),function(e){e[e.ToggleMenu=0]="ToggleMenu",e[e.OpenMenu=1]="OpenMenu",e[e.CloseMenu=2]="CloseMenu",e[e.GoToItem=3]="GoToItem",e[e.Search=4]="Search",e[e.ClearSearch=5]="ClearSearch",e[e.RegisterItem=6]="RegisterItem",e[e.UnregisterItem=7]="UnregisterItem"}(x||(x={})),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"}(C||(C={}));var M=((b={})[x.ToggleMenu]=function(e){var n;return t({},e,{menuState:f(e.menuState,(n={},n[g.Open]=g.Closed,n[g.Closed]=g.Open,n))})},b[x.CloseMenu]=function(e){return t({},e,{menuState:g.Closed})},b[x.OpenMenu]=function(e){return t({},e,{menuState:g.Open})},b[x.GoToItem]=function(e,n){var r=function(e,n,t){var r,i;if(e.items.length<=0)return null;var o=e.items,u=null!==(r=e.activeItemIndex)&&void 0!==r?r:-1,a=f(n,((i={})[C.FirstItem]=function(){return o.findIndex((function(e){return!e.dataRef.current.disabled}))},i[C.PreviousItem]=function(){var e=o.slice().reverse().findIndex((function(e,n,t){return!(-1!==u&&t.length-n-1>=u||e.dataRef.current.disabled)}));return-1===e?e:o.length-1-e},i[C.NextItem]=function(){return o.findIndex((function(e,n){return!(n<=u||e.dataRef.current.disabled)}))},i[C.LastItem]=function(){var e=o.slice().reverse().findIndex((function(e){return!e.dataRef.current.disabled}));return-1===e?e:o.length-1-e},i[C.SpecificItem]=function(){return o.findIndex((function(e){return e.id===t}))},i[C.Nothing]=function(){return null},i));return-1===a?e.activeItemIndex:a}(e,n.focus,n.id);return""===e.searchQuery&&e.activeItemIndex===r?e:t({},e,{searchQuery:"",activeItemIndex:r})},b[x.Search]=function(e,n){var r=e.searchQuery+n.value,i=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===i||i===e.activeItemIndex?{searchQuery:r}:{searchQuery:r,activeItemIndex:i})},b[x.ClearSearch]=function(e){return t({},e,{searchQuery:""})},b[x.RegisterItem]=function(e,n){return t({},e,{items:[].concat(e.items,[{id:n.id,dataRef:n.dataRef}])})},b[x.UnregisterItem]=function(e,n){var r=e.items.slice(),i=null!==e.activeItemIndex?r[e.activeItemIndex]:null,o=r.findIndex((function(e){return e.id===n.id}));return-1!==o&&r.splice(o,1),t({},e,{items:r,activeItemIndex:o===e.activeItemIndex||null===i?null:r.indexOf(i)})},b),P=n.createContext(null);function D(e){var t=n.useContext(P);if(null===t){var r=new Error("<"+e+" /> is missing a parent <"+U.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,D),r}return t}function j(e,n){return f(n.type,M,e,n)}var G=n.Fragment;function U(e){var t=O(),r=n.useReducer(j,{menuState:g.Closed,buttonRef:n.createRef(),itemsRef:n.createRef(),items:[],searchQuery:"",activeItemIndex:null}),i=r[0],o=i.menuState,u=i.itemsRef,a=i.buttonRef,c=r[1];n.useEffect((function(){function e(e){var n;e.defaultPrevented||o===g.Open&&((null===(n=u.current)||void 0===n?void 0:n.contains(e.target))||(c({type:x.CloseMenu}),t.nextFrame((function(){var e;return null===(e=a.current)||void 0===e?void 0:e.focus()}))))}return window.addEventListener("pointerdown",e),function(){return window.removeEventListener("pointerdown",e)}}),[o,u,a,t,c]);var l=n.useMemo((function(){return{open:o===g.Open}}),[o]);return n.createElement(P.Provider,{value:r},F(e,l,G))}var L=R((function e(r,i){var o,u=D([U.name,e.name].join(".")),c=u[0],l=u[1],s=A(c.buttonRef,i),f=n.useState(!1),d=f[0],v=f[1],m="headlessui-menu-button-"+a(),p=O(),h=n.useCallback((function(e){switch(e.key){case w.Space:case w.Enter:case w.ArrowDown:e.preventDefault(),l({type:x.OpenMenu}),p.nextFrame((function(){var e;null===(e=c.itemsRef.current)||void 0===e||e.focus(),l({type:x.GoToItem,focus:C.FirstItem})}));break;case w.ArrowUp:e.preventDefault(),l({type:x.OpenMenu}),p.nextFrame((function(){var e;null===(e=c.itemsRef.current)||void 0===e||e.focus(),l({type:x.GoToItem,focus:C.LastItem})}))}}),[l,c,p]),y=n.useCallback((function(e){e.preventDefault()}),[]),I=n.useCallback((function(){l({type:x.ToggleMenu}),p.nextFrame((function(){var e;return null===(e=c.itemsRef.current)||void 0===e?void 0:e.focus()}))}),[l,p,c]),b=n.useCallback((function(){var e;c.menuState===g.Open&&(null===(e=c.itemsRef.current)||void 0===e||e.focus()),v(!0)}),[c,v]),E=n.useCallback((function(){return v(!1)}),[v]),T=n.useMemo((function(){return{open:c.menuState===g.Open,focused:d}}),[c,d]);return F(t({},r,{ref:s,id:m,type:"button","aria-haspopup":!0,"aria-controls":null===(o=c.itemsRef.current)||void 0===o?void 0:o.id,"aria-expanded":c.menuState===g.Open||void 0,onKeyDown:h,onFocus:b,onBlur:E,onPointerUp:I,onPointerDown:y}),T,"button")})),N=R((function e(i,o){var u,c,l=i.enter,s=i.enterFrom,f=i.enterTo,d=i.leave,v=i.leaveFrom,m=i.leaveTo,p=i.static,h=void 0!==p&&p,y=r(i,["enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","static"]),I=D([U.name,e.name].join(".")),b=I[0],E=I[1],T=A(b.itemsRef,o),S="headlessui-menu-items-"+a(),R=O(),M=O(),P=n.useCallback((function(e){switch(M.dispose(),e.key){case w.Enter:var n;E({type:x.CloseMenu}),null!==b.activeItemIndex&&(null===(n=document.getElementById(b.items[b.activeItemIndex].id))||void 0===n||n.click(),R.nextFrame((function(){var e;return null===(e=b.buttonRef.current)||void 0===e?void 0:e.focus()})));break;case w.ArrowDown:return E({type:x.GoToItem,focus:C.NextItem});case w.ArrowUp:return E({type:x.GoToItem,focus:C.PreviousItem});case w.Home:case w.PageUp:return E({type:x.GoToItem,focus:C.FirstItem});case w.End:case w.PageDown:return E({type:x.GoToItem,focus:C.LastItem});case w.Escape:E({type:x.CloseMenu}),R.nextFrame((function(){var e;return null===(e=b.buttonRef.current)||void 0===e?void 0:e.focus()}));break;case w.Tab:return e.preventDefault();default:1===e.key.length&&(E({type:x.Search,value:e.key}),M.setTimeout((function(){return E({type:x.ClearSearch})}),350))}}),[R,E,M,b]),j=n.useMemo((function(){return{open:b.menuState===g.Open}}),[b]),G={"aria-activedescendant":null===b.activeItemIndex||null===(u=b.items[b.activeItemIndex])||void 0===u?void 0:u.id,"aria-labelledby":null===(c=b.buttonRef.current)||void 0===c?void 0:c.id,id:S,onKeyDown:P,role:"menu",tabIndex:0};return h?F(t({},y,G,{ref:T}),j,"div"):n.createElement(k,Object.assign({show:b.menuState===g.Open},{enter:l,enterFrom:s,enterTo:f,leave:d,leaveFrom:v,leaveTo:m}),(function(e){return F(t({},y,G,{ref:function(n){e.current=n,T(n)}}),j,"div")}))})),H=n.Fragment;function V(e,n){if(void 0!==e)return"function"==typeof e?e(n):e}U.Button=L,U.Items=N,U.Item=function e(i){var o=i.disabled,u=void 0!==o&&o,c=i.className,l=i.onClick,f=r(i,["disabled","className","onClick"]),d=D([U.name,e.name].join(".")),v=d[0],m=d[1],p=O(),h="headlessui-menu-item-"+a(),y=null!==v.activeItemIndex&&v.items[v.activeItemIndex].id===h,I=n.useRef({disabled:u});s((function(){I.current.disabled=u}),[I,u]),s((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]),s((function(){return m({type:x.RegisterItem,id:h,dataRef:I}),function(){return m({type:x.UnregisterItem,id:h})}}),[I,h]);var b=n.useCallback((function(){u||m({type:x.GoToItem,focus:C.SpecificItem,id:h})}),[u,h,m]),g=n.useCallback((function(){if(u)return m({type:x.GoToItem,focus:C.Nothing});m({type:x.GoToItem,focus:C.SpecificItem,id:h})}),[u,h,m]),w=n.useCallback((function(){u||m({type:x.GoToItem,focus:C.Nothing})}),[u,m]),E=n.useCallback((function(){u||y||m({type:x.GoToItem,focus:C.SpecificItem,id:h})}),[u,y,h,m]),T=n.useCallback((function(e){u||(e.preventDefault(),m({type:x.CloseMenu}),p.nextFrame((function(){var e;return null===(e=v.buttonRef.current)||void 0===e?void 0:e.focus()})))}),[m,u,p,v.buttonRef]),S=n.useCallback((function(e){return u?e.preventDefault():l?l(e):void 0}),[u,l]),k=n.useMemo((function(){return{active:y,disabled:u}}),[y,u]);return F(t({},f,{id:h,role:"menuitem",tabIndex:-1,className:V(c,k),"aria-disabled":!0===u||void 0,onClick:S,onFocus:g,onMouseMove:E,onPointerEnter:b,onPointerLeave:w,onPointerUp:T}),k,H)},e.Menu=U,e.Transition=k,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=headlessui.umd.production.min.js.map
{
"name": "@headlessui/react",
"version": "0.1.1",
"version": "0.1.2",
"main": "dist/index.js",

@@ -25,2 +25,3 @@ "typings": "dist/index.d.ts",

"playground:build": "next build",
"prepublishOnly": "npm run build",
"test": "../../scripts/test.sh",

@@ -27,0 +28,0 @@ "build": "../../scripts/build.sh",

@@ -18,3 +18,3 @@ <h3 align="center">

```shell
```sh
# npm

@@ -31,3 +31,3 @@ npm install @headlessui/react

- [Transition](#menu-button-dropdown)
- [Transition](#transition)
- [Menu Button (Dropdown)](#menu-button-dropdown)

@@ -57,2 +57,4 @@

[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-menu-example-b6xje?file=/src/App.js)
The `Transition` component lets you add enter/leave transitions to conditionally rendered elements, using CSS classes to control the actual transition styles in the different stages of the transition.

@@ -79,16 +81,18 @@

return (
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
enter="transition-opacity duration-75"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
I will fade in and out
</Transition>
<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
enter="transition-opacity duration-75"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
I will fade in and out
</Transition>
</>
)

@@ -110,11 +114,13 @@ }

return (
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
// ...
>
I will fade in and out
</Transition>
<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
// ...
>
I will fade in and out
</Transition>
</>
)

@@ -134,14 +140,16 @@ }

return (
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
as="a"
href="/my-url"
className="font-bold"
// ...
>
I will fade in and out
</Transition>
<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
as="a"
href="/my-url"
className="font-bold"
// ...
>
I will fade in and out
</Transition>
</>
)

@@ -161,11 +169,13 @@ }

return (
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
// ...
>
{ref => <div ref={ref}>{/* Your content goes here*/}</div>}
</Transition>
<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
// ...
>
{(ref) => <div ref={ref}>{/* Your content goes here*/}</div>}
</Transition>
</>
)

@@ -200,16 +210,18 @@ }

return (
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
enter="transition-opacity duration-75"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
I will fade in and out
</Transition>
<>
<button onClick={() => setIsOpen(!isOpen)}>
Toggle
</button>
<Transition
show={isOpen}
enter="transition-opacity duration-75"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
I will fade in and out
</Transition>
</>
)

@@ -380,2 +392,4 @@ }

[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-menu-example-b6xje?file=/src/App.js)
The `Menu` component and related child components are used to quickly build custom dropdown components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard navigation support.

@@ -538,3 +552,3 @@

To animate the opening/closing of the menu panel, use jsx's built-in `transition` component. All you need to do is wrap your `Menu.Items` instance in a `<transition>` element and the transition will be applied automatically.
To animate the opening/closing of the menu panel, use the provided `Transition` component. All you need to do is mark your `Menu.Items` as `static`, wrap it in a `<Transition>`, and the transition will be applied automatically.

@@ -548,19 +562,21 @@ ```jsx

{({ open }) => (
<Menu.Button>More</Menu.Button>
<>
<Menu.Button>More</Menu.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"
>
<Menu.Items static>
<Menu.Item>{/* ... */}</Menu.Item>
{/* ... */}
</Menu.Items>
</Transition>
{/* 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"
>
<Menu.Items static>
<Menu.Item>{/* ... */}</Menu.Item>
{/* ... */}
</Menu.Items>
</Transition>
</>
)}

@@ -567,0 +583,0 @@ </Menu>

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc