@headlessui/react
Advanced tools
Comparing version 0.1.1 to 0.1.2
@@ -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, |
@@ -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", |
170
README.md
@@ -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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
508183
3501
774