@headlessui/vue - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/components/menu/menu.d.ts

@@ -25,4 +25,3 @@ import { Ref } from 'vue';
     handleKeyDown: (event: KeyboardEvent) => void;
-    handlePointerDown: (event: PointerEvent) => void;
-    handlePointerUp: () => void;
+    handlePointerUp: (event: MouseEvent) => void;
     handleFocus: () => void;
@@ -29,0 +28,0 @@ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

dist/headlessui.cjs.development.js

@@ -213,7 +213,2 @@ 'use strict';
       activeItemIndex: activeItemIndex,
-      toggleMenu: function toggleMenu() {
-        var _match2;
-
-        menuState.value = match(menuState.value, (_match2 = {}, _match2[MenuStates.Closed] = MenuStates.Open, _match2[MenuStates.Open] = MenuStates.Closed, _match2));
-      },
       closeMenu: function closeMenu() {
@@ -273,20 +268,18 @@ return menuState.value = MenuStates.Closed;
       function handler(event) {
-        var _itemsRef$value;
+        var _buttonRef$value, _itemsRef$value;
 
-        if (event.defaultPrevented) return;
         if (menuState.value !== MenuStates.Open) return;
+        if ((_buttonRef$value = buttonRef.value) === null || _buttonRef$value === void 0 ? void 0 : _buttonRef$value.contains(event.target)) return;
 
         if (!((_itemsRef$value = itemsRef.value) === null || _itemsRef$value === void 0 ? void 0 : _itemsRef$value.contains(event.target))) {
+          var _buttonRef$value2;
+
           api.closeMenu();
-          vue.nextTick(function () {
-            var _buttonRef$value;
-
-            return (_buttonRef$value = buttonRef.value) === null || _buttonRef$value === void 0 ? void 0 : _buttonRef$value.focus();
-          });
+          if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
         }
       }
 
-      window.addEventListener('pointerdown', handler);
+      window.addEventListener('pointerup', handler);
       vue.onUnmounted(function () {
-        return window.removeEventListener('pointerdown', handler);
+        return window.removeEventListener('pointerup', handler);
       });
@@ -332,4 +325,3 @@ }); // @ts-expect-error Types of property 'dataRef' are incompatible.
       onFocus: this.handleFocus,
-      onPointerUp: this.handlePointerUp,
-      onPointerDown: this.handlePointerDown
+      onPointerUp: this.handlePointerUp
     };
@@ -376,15 +368,14 @@ return render({
 
-    function handlePointerDown(event) {
-      // We have a `pointerdown` event listener in the menu for the 'outside click', so we just want
-      // to prevent going there if we happen to click this button.
-      event.preventDefault();
-    }
+    function handlePointerUp(event) {
+      if (api.menuState.value === MenuStates.Open) {
+        api.closeMenu();
+      } else {
+        event.preventDefault();
+        api.openMenu();
+        vue.nextTick(function () {
+          var _api$itemsRef$value4;
 
-    function handlePointerUp() {
-      api.toggleMenu();
-      vue.nextTick(function () {
-        var _api$itemsRef$value4;
-
-        return (_api$itemsRef$value4 = api.itemsRef.value) === null || _api$itemsRef$value4 === void 0 ? void 0 : _api$itemsRef$value4.focus();
-      });
+          return (_api$itemsRef$value4 = api.itemsRef.value) === null || _api$itemsRef$value4 === void 0 ? void 0 : _api$itemsRef$value4.focus();
+        });
+      }
     }
@@ -402,3 +393,2 @@
       handleKeyDown: handleKeyDown,
-      handlePointerDown: handlePointerDown,
       handlePointerUp: handlePointerUp,
@@ -460,2 +450,3 @@ handleFocus: handleFocus
         case Key.Enter:
+          event.preventDefault();
           api.closeMenu();
@@ -478,5 +469,7 @@
         case Key.ArrowDown:
+          event.preventDefault();
           return api.goToItem(Focus.NextItem);
 
         case Key.ArrowUp:
+          event.preventDefault();
           return api.goToItem(Focus.PreviousItem);
@@ -486,2 +479,3 @@
         case Key.PageUp:
+          event.preventDefault();
           return api.goToItem(Focus.FirstItem);
@@ -491,5 +485,7 @@
         case Key.PageDown:
+          event.preventDefault();
           return api.goToItem(Focus.LastItem);
 
         case Key.Escape:
+          event.preventDefault();
           api.closeMenu();
@@ -595,9 +591,14 @@ vue.nextTick(function () {
     function handlePointerUp(event) {
-      if (disabled) return;
-      event.preventDefault();
-      api.closeMenu();
-      vue.nextTick(function () {
-        var _api$buttonRef$value4;
+      if (disabled) return event.preventDefault(); // Turns out that we can't use nextTick here. Even if we do, the `handleClick` would *not* be
+      // called because the closeMenu() update is *too fast* and the tree gets unmounted before it
+      // bubbles up. So instead of nextTick, we use the good old double requestAnimationFrame to
+      // wait for a "nextFrame".
 
-        return (_api$buttonRef$value4 = api.buttonRef.value) === null || _api$buttonRef$value4 === void 0 ? void 0 : _api$buttonRef$value4.focus();
+      requestAnimationFrame(function () {
+        requestAnimationFrame(function () {
+          var _api$buttonRef$value4;
+
+          api.closeMenu();
+          (_api$buttonRef$value4 = api.buttonRef.value) === null || _api$buttonRef$value4 === void 0 ? void 0 : _api$buttonRef$value4.focus();
+        });
       });
@@ -604,0 +605,0 @@ }

dist/headlessui.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue");function t(){return(t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function n(e,t){if(null==e)return{};var n,r,o={},u=Object.keys(e);for(r=0;r<u.length;r++)t.indexOf(n=u[r])>=0||(o[n]=e[n]);return o}function r(e,t){if(e in t){for(var n=t[e],o=arguments.length,u=new Array(o>2?o-2:0),a=2;a<o;a++)u[a-2]=arguments[a];return"function"==typeof n?n.apply(void 0,u):n}var i=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(t).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(i,r),i}function o(t){var r,o=t.props,u=t.attrs,a=t.slots,i=t.slot,l=o.as,s=n(o,["as"]),c=null===(r=a.default)||void 0===r?void 0:r.call(a,i);if("template"===l){if(Object.keys(s).length>0||"class"in u){var d=null!=c?c:[],v=d[0];if(d.slice(1).length>0)throw new Error('You should only render 1 child or use the `as="..."` prop');return e.cloneVNode(v,s)}return c}return e.h(l,s,c)}var u,a,i,l=0;function s(){return++l}!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(u||(u={})),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"}(a||(a={})),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"}(i||(i={}));var c=Symbol("MenuContext");function d(t){var n=e.inject(c);if(void 0===n){var r=new Error("<"+t+" /> is missing a parent <Menu /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,d),r}return n}var v=e.defineComponent({props:{as:{type:[Object,String],default:"template"}},setup:function(t,n){var a=n.slots,l=n.attrs,s=e.ref(u.Closed),d=e.ref(null),v=e.ref(null),f=e.ref([]),p=e.ref(""),m=e.ref(null),I={menuState:s,buttonRef:d,itemsRef:v,items:f,searchQuery:p,activeItemIndex:m,toggleMenu:function(){var e;s.value=r(s.value,((e={})[u.Closed]=u.Open,e[u.Open]=u.Closed,e))},closeMenu:function(){return s.value=u.Closed},openMenu:function(){return s.value=u.Open},goToItem:function(e,t){var n=function(e,t){var n,o;if(f.value.length<=0)return null;var u=null!==(n=m.value)&&void 0!==n?n:-1,a=r(e,((o={})[i.FirstItem]=function(){return f.value.findIndex((function(e){return!e.dataRef.disabled}))},o[i.PreviousItem]=function(){var e=f.value.slice().reverse().findIndex((function(e,t,n){return!(-1!==u&&n.length-t-1>=u||e.dataRef.disabled)}));return-1===e?e:f.value.length-1-e},o[i.NextItem]=function(){return f.value.findIndex((function(e,t){return!(t<=u||e.dataRef.disabled)}))},o[i.LastItem]=function(){var e=f.value.slice().reverse().findIndex((function(e){return!e.dataRef.disabled}));return-1===e?e:f.value.length-1-e},o[i.SpecificItem]=function(){return f.value.findIndex((function(e){return e.id===t}))},o[i.Nothing]=function(){return null},o));return-1===a?m.value:a}(e,t);""===p.value&&m.value===n||(p.value="",m.value=n)},search:function(e){p.value+=e;var t=f.value.findIndex((function(e){return e.dataRef.textValue.startsWith(p.value)&&!e.dataRef.disabled}));-1!==t&&t!==m.value&&(m.value=t)},clearSearch:function(){p.value=""},registerItem:function(e,t){f.value.push({id:e,dataRef:t})},unregisterItem:function(e){var t=f.value.slice(),n=null!==m.value?t[m.value]:null,r=t.findIndex((function(t){return t.id===e}));-1!==r&&t.splice(r,1),f.value=t,m.value=r===m.value||null===n?null:t.indexOf(n)}};return e.onMounted((function(){function t(t){var n;t.defaultPrevented||s.value===u.Open&&((null===(n=v.value)||void 0===n?void 0:n.contains(t.target))||(I.closeMenu(),e.nextTick((function(){var e;return null===(e=d.value)||void 0===e?void 0:e.focus()}))))}window.addEventListener("pointerdown",t),e.onUnmounted((function(){return window.removeEventListener("pointerdown",t)}))})),e.provide(c,I),function(){return o({props:t,slot:{open:s.value===u.Open},slots:a,attrs:l})}}}),f=e.defineComponent({props:{as:{type:[Object,String],default:"button"}},render:function(){var e,n=d("MenuButton"),r={open:n.menuState.value===u.Open},a={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null===(e=n.itemsRef.value)||void 0===e?void 0:e.id,"aria-expanded":n.menuState.value===u.Open||void 0,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onPointerUp:this.handlePointerUp,onPointerDown:this.handlePointerDown};return o({props:t({},this.$props,a),slot:r,attrs:this.$attrs,slots:this.$slots})},setup:function(){var t=d("MenuButton");return{id:"headlessui-menu-button-"+s(),el:t.buttonRef,handleKeyDown:function(n){switch(n.key){case a.Space:case a.Enter:case a.ArrowDown:n.preventDefault(),t.openMenu(),e.nextTick((function(){var e;null===(e=t.itemsRef.value)||void 0===e||e.focus(),t.goToItem(i.FirstItem)}));break;case a.ArrowUp:n.preventDefault(),t.openMenu(),e.nextTick((function(){var e;null===(e=t.itemsRef.value)||void 0===e||e.focus(),t.goToItem(i.LastItem)}))}},handlePointerDown:function(e){e.preventDefault()},handlePointerUp:function(){t.toggleMenu(),e.nextTick((function(){var e;return null===(e=t.itemsRef.value)||void 0===e?void 0:e.focus()}))},handleFocus:function(){var e;t.menuState.value===u.Open&&(null===(e=t.itemsRef.value)||void 0===e||e.focus())}}}}),p=e.defineComponent({props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1}},render:function(){var e,r,a=d("MenuItems"),i=this.$props,l=i.static,s=n(i,["static"]);if(!l&&a.menuState.value===u.Closed)return null;var c={open:a.menuState.value===u.Open};return o({props:t({},s,{"aria-activedescendant":null===a.activeItemIndex.value||null===(e=a.items.value[a.activeItemIndex.value])||void 0===e?void 0:e.id,"aria-labelledby":null===(r=a.buttonRef.value)||void 0===r?void 0:r.id,id:this.id,onKeyDown:this.handleKeyDown,role:"menu",tabIndex:0,ref:"el"}),slot:c,attrs:this.$attrs,slots:this.$slots})},setup:function(){var t=d("MenuItems"),n="headlessui-menu-items-"+s(),r=e.ref(null);return{id:n,el:t.itemsRef,handleKeyDown:function(n){switch(r.value&&clearTimeout(r.value),n.key){case a.Enter:var o;t.closeMenu(),null!==t.activeItemIndex.value&&(null===(o=document.getElementById(t.items.value[t.activeItemIndex.value].id))||void 0===o||o.click(),e.nextTick((function(){var e;return null===(e=t.buttonRef.value)||void 0===e?void 0:e.focus()})));break;case a.ArrowDown:return t.goToItem(i.NextItem);case a.ArrowUp:return t.goToItem(i.PreviousItem);case a.Home:case a.PageUp:return t.goToItem(i.FirstItem);case a.End:case a.PageDown:return t.goToItem(i.LastItem);case a.Escape:t.closeMenu(),e.nextTick((function(){var e;return null===(e=t.buttonRef.value)||void 0===e?void 0:e.focus()}));break;case a.Tab:return n.preventDefault();default:1===n.key.length&&(t.search(n.key),r.value=setTimeout((function(){return t.clearSearch()}),350))}}}}}),m=e.defineComponent({props:{as:{type:[Object,String],default:"template"},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(n,r){var u=r.slots,a=r.attrs,l=d("MenuItem"),c="headlessui-menu-item-"+s(),v=n.disabled,f=n.className,p=void 0===f?n.class:f,m=e.computed((function(){return null!==l.activeItemIndex.value&&l.items.value[l.activeItemIndex.value].id===c})),h=e.ref({disabled:v,textValue:""});function g(){v||l.goToItem(i.SpecificItem,c)}function b(){if(v)return l.goToItem(i.Nothing);l.goToItem(i.SpecificItem,c)}function w(){v||l.goToItem(i.Nothing)}function x(){v||m.value||l.goToItem(i.SpecificItem,c)}function y(t){v||(t.preventDefault(),l.closeMenu(),e.nextTick((function(){var e;return null===(e=l.buttonRef.value)||void 0===e?void 0:e.focus()})))}function T(e){if(v)return e.preventDefault()}return e.onMounted((function(){var e,t,n=null===(e=document.getElementById(c))||void 0===e||null===(t=e.textContent)||void 0===t?void 0:t.toLowerCase().trim();void 0!==n&&(h.value.textValue=n)})),e.onMounted((function(){return l.registerItem(c,h)})),e.onUnmounted((function(){return l.unregisterItem(c)})),function(){var e={active:m.value,disabled:v},r={id:c,role:"menuitem",tabIndex:-1,class:I(p,e),"aria-disabled":!0===v||void 0,onClick:T,onFocus:b,onMouseMove:x,onPointerEnter:g,onPointerLeave:w,onPointerUp:y};return o({props:t({},n,r),slot:e,attrs:a,slots:u})}}});function I(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}exports.Menu=v,exports.MenuButton=f,exports.MenuItem=m,exports.MenuItems=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue");function t(){return(t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function n(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(u[n]=e[n]);return u}function r(e,t){if(e in t){for(var n=t[e],u=arguments.length,o=new Array(u>2?u-2:0),a=2;a<u;a++)o[a-2]=arguments[a];return"function"==typeof n?n.apply(void 0,o):n}var i=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(t).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(i,r),i}function u(t){var r,u=t.props,o=t.attrs,a=t.slots,i=t.slot,l=u.as,s=n(u,["as"]),c=null===(r=a.default)||void 0===r?void 0:r.call(a,i);if("template"===l){if(Object.keys(s).length>0||"class"in o){var v=null!=c?c:[],d=v[0];if(v.slice(1).length>0)throw new Error('You should only render 1 child or use the `as="..."` prop');return e.cloneVNode(d,s)}return c}return e.h(l,s,c)}var o,a,i,l=0;function s(){return++l}!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(o||(o={})),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"}(a||(a={})),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"}(i||(i={}));var c=Symbol("MenuContext");function v(t){var n=e.inject(c);if(void 0===n){var r=new Error("<"+t+" /> is missing a parent <Menu /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(r,v),r}return n}var d=e.defineComponent({props:{as:{type:[Object,String],default:"template"}},setup:function(t,n){var a=n.slots,l=n.attrs,s=e.ref(o.Closed),v=e.ref(null),d=e.ref(null),f=e.ref([]),p=e.ref(""),m=e.ref(null),I={menuState:s,buttonRef:v,itemsRef:d,items:f,searchQuery:p,activeItemIndex:m,closeMenu:function(){return s.value=o.Closed},openMenu:function(){return s.value=o.Open},goToItem:function(e,t){var n=function(e,t){var n,u;if(f.value.length<=0)return null;var o=null!==(n=m.value)&&void 0!==n?n:-1,a=r(e,((u={})[i.FirstItem]=function(){return f.value.findIndex((function(e){return!e.dataRef.disabled}))},u[i.PreviousItem]=function(){var e=f.value.slice().reverse().findIndex((function(e,t,n){return!(-1!==o&&n.length-t-1>=o||e.dataRef.disabled)}));return-1===e?e:f.value.length-1-e},u[i.NextItem]=function(){return f.value.findIndex((function(e,t){return!(t<=o||e.dataRef.disabled)}))},u[i.LastItem]=function(){var e=f.value.slice().reverse().findIndex((function(e){return!e.dataRef.disabled}));return-1===e?e:f.value.length-1-e},u[i.SpecificItem]=function(){return f.value.findIndex((function(e){return e.id===t}))},u[i.Nothing]=function(){return null},u));return-1===a?m.value:a}(e,t);""===p.value&&m.value===n||(p.value="",m.value=n)},search:function(e){p.value+=e;var t=f.value.findIndex((function(e){return e.dataRef.textValue.startsWith(p.value)&&!e.dataRef.disabled}));-1!==t&&t!==m.value&&(m.value=t)},clearSearch:function(){p.value=""},registerItem:function(e,t){f.value.push({id:e,dataRef:t})},unregisterItem:function(e){var t=f.value.slice(),n=null!==m.value?t[m.value]:null,r=t.findIndex((function(t){return t.id===e}));-1!==r&&t.splice(r,1),f.value=t,m.value=r===m.value||null===n?null:t.indexOf(n)}};return e.onMounted((function(){function t(e){var t,n,r;s.value===o.Open&&((null===(t=v.value)||void 0===t?void 0:t.contains(e.target))||(null===(n=d.value)||void 0===n?void 0:n.contains(e.target))||(I.closeMenu(),e.defaultPrevented||null===(r=v.value)||void 0===r||r.focus()))}window.addEventListener("pointerup",t),e.onUnmounted((function(){return window.removeEventListener("pointerup",t)}))})),e.provide(c,I),function(){return u({props:t,slot:{open:s.value===o.Open},slots:a,attrs:l})}}}),f=e.defineComponent({props:{as:{type:[Object,String],default:"button"}},render:function(){var e,n=v("MenuButton"),r={open:n.menuState.value===o.Open},a={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null===(e=n.itemsRef.value)||void 0===e?void 0:e.id,"aria-expanded":n.menuState.value===o.Open||void 0,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onPointerUp:this.handlePointerUp};return u({props:t({},this.$props,a),slot:r,attrs:this.$attrs,slots:this.$slots})},setup:function(){var t=v("MenuButton");return{id:"headlessui-menu-button-"+s(),el:t.buttonRef,handleKeyDown:function(n){switch(n.key){case a.Space:case a.Enter:case a.ArrowDown:n.preventDefault(),t.openMenu(),e.nextTick((function(){var e;null===(e=t.itemsRef.value)||void 0===e||e.focus(),t.goToItem(i.FirstItem)}));break;case a.ArrowUp:n.preventDefault(),t.openMenu(),e.nextTick((function(){var e;null===(e=t.itemsRef.value)||void 0===e||e.focus(),t.goToItem(i.LastItem)}))}},handlePointerUp:function(n){t.menuState.value===o.Open?t.closeMenu():(n.preventDefault(),t.openMenu(),e.nextTick((function(){var e;return null===(e=t.itemsRef.value)||void 0===e?void 0:e.focus()})))},handleFocus:function(){var e;t.menuState.value===o.Open&&(null===(e=t.itemsRef.value)||void 0===e||e.focus())}}}}),p=e.defineComponent({props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1}},render:function(){var e,r,a=v("MenuItems"),i=this.$props,l=i.static,s=n(i,["static"]);if(!l&&a.menuState.value===o.Closed)return null;var c={open:a.menuState.value===o.Open};return u({props:t({},s,{"aria-activedescendant":null===a.activeItemIndex.value||null===(e=a.items.value[a.activeItemIndex.value])||void 0===e?void 0:e.id,"aria-labelledby":null===(r=a.buttonRef.value)||void 0===r?void 0:r.id,id:this.id,onKeyDown:this.handleKeyDown,role:"menu",tabIndex:0,ref:"el"}),slot:c,attrs:this.$attrs,slots:this.$slots})},setup:function(){var t=v("MenuItems"),n="headlessui-menu-items-"+s(),r=e.ref(null);return{id:n,el:t.itemsRef,handleKeyDown:function(n){switch(r.value&&clearTimeout(r.value),n.key){case a.Enter:var u;n.preventDefault(),t.closeMenu(),null!==t.activeItemIndex.value&&(null===(u=document.getElementById(t.items.value[t.activeItemIndex.value].id))||void 0===u||u.click(),e.nextTick((function(){var e;return null===(e=t.buttonRef.value)||void 0===e?void 0:e.focus()})));break;case a.ArrowDown:return n.preventDefault(),t.goToItem(i.NextItem);case a.ArrowUp:return n.preventDefault(),t.goToItem(i.PreviousItem);case a.Home:case a.PageUp:return n.preventDefault(),t.goToItem(i.FirstItem);case a.End:case a.PageDown:return n.preventDefault(),t.goToItem(i.LastItem);case a.Escape:n.preventDefault(),t.closeMenu(),e.nextTick((function(){var e;return null===(e=t.buttonRef.value)||void 0===e?void 0:e.focus()}));break;case a.Tab:return n.preventDefault();default:1===n.key.length&&(t.search(n.key),r.value=setTimeout((function(){return t.clearSearch()}),350))}}}}}),m=e.defineComponent({props:{as:{type:[Object,String],default:"template"},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(n,r){var o=r.slots,a=r.attrs,l=v("MenuItem"),c="headlessui-menu-item-"+s(),d=n.disabled,f=n.className,p=void 0===f?n.class:f,m=e.computed((function(){return null!==l.activeItemIndex.value&&l.items.value[l.activeItemIndex.value].id===c})),h=e.ref({disabled:d,textValue:""});function g(){d||l.goToItem(i.SpecificItem,c)}function b(){if(d)return l.goToItem(i.Nothing);l.goToItem(i.SpecificItem,c)}function x(){d||l.goToItem(i.Nothing)}function y(){d||m.value||l.goToItem(i.SpecificItem,c)}function w(e){if(d)return e.preventDefault();requestAnimationFrame((function(){requestAnimationFrame((function(){var e;l.closeMenu(),null===(e=l.buttonRef.value)||void 0===e||e.focus()}))}))}function S(e){if(d)return e.preventDefault()}return e.onMounted((function(){var e,t,n=null===(e=document.getElementById(c))||void 0===e||null===(t=e.textContent)||void 0===t?void 0:t.toLowerCase().trim();void 0!==n&&(h.value.textValue=n)})),e.onMounted((function(){return l.registerItem(c,h)})),e.onUnmounted((function(){return l.unregisterItem(c)})),function(){var e={active:m.value,disabled:d},r={id:c,role:"menuitem",tabIndex:-1,class:I(p,e),"aria-disabled":!0===d||void 0,onClick:S,onFocus:b,onMouseMove:y,onPointerEnter:g,onPointerLeave:x,onPointerUp:w};return u({props:t({},n,r),slot:e,attrs:a,slots:o})}}});function I(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}exports.Menu=d,exports.MenuButton=f,exports.MenuItem=m,exports.MenuItems=p;
 //# sourceMappingURL=headlessui.cjs.production.min.js.map

dist/headlessui.esm.js

@@ -209,7 +209,2 @@ import { cloneVNode, h, defineComponent, ref, onMounted, onUnmounted, provide, computed, inject, nextTick } from 'vue';
       activeItemIndex: activeItemIndex,
-      toggleMenu: function toggleMenu() {
-        var _match2;
-
-        menuState.value = match(menuState.value, (_match2 = {}, _match2[MenuStates.Closed] = MenuStates.Open, _match2[MenuStates.Open] = MenuStates.Closed, _match2));
-      },
       closeMenu: function closeMenu() {
@@ -269,20 +264,18 @@ return menuState.value = MenuStates.Closed;
       function handler(event) {
-        var _itemsRef$value;
+        var _buttonRef$value, _itemsRef$value;
 
-        if (event.defaultPrevented) return;
         if (menuState.value !== MenuStates.Open) return;
+        if ((_buttonRef$value = buttonRef.value) === null || _buttonRef$value === void 0 ? void 0 : _buttonRef$value.contains(event.target)) return;
 
         if (!((_itemsRef$value = itemsRef.value) === null || _itemsRef$value === void 0 ? void 0 : _itemsRef$value.contains(event.target))) {
+          var _buttonRef$value2;
+
           api.closeMenu();
-          nextTick(function () {
-            var _buttonRef$value;
-
-            return (_buttonRef$value = buttonRef.value) === null || _buttonRef$value === void 0 ? void 0 : _buttonRef$value.focus();
-          });
+          if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
         }
       }
 
-      window.addEventListener('pointerdown', handler);
+      window.addEventListener('pointerup', handler);
       onUnmounted(function () {
-        return window.removeEventListener('pointerdown', handler);
+        return window.removeEventListener('pointerup', handler);
       });
@@ -328,4 +321,3 @@ }); // @ts-expect-error Types of property 'dataRef' are incompatible.
       onFocus: this.handleFocus,
-      onPointerUp: this.handlePointerUp,
-      onPointerDown: this.handlePointerDown
+      onPointerUp: this.handlePointerUp
     };
@@ -372,15 +364,14 @@ return render({
 
-    function handlePointerDown(event) {
-      // We have a `pointerdown` event listener in the menu for the 'outside click', so we just want
-      // to prevent going there if we happen to click this button.
-      event.preventDefault();
-    }
+    function handlePointerUp(event) {
+      if (api.menuState.value === MenuStates.Open) {
+        api.closeMenu();
+      } else {
+        event.preventDefault();
+        api.openMenu();
+        nextTick(function () {
+          var _api$itemsRef$value4;
 
-    function handlePointerUp() {
-      api.toggleMenu();
-      nextTick(function () {
-        var _api$itemsRef$value4;
-
-        return (_api$itemsRef$value4 = api.itemsRef.value) === null || _api$itemsRef$value4 === void 0 ? void 0 : _api$itemsRef$value4.focus();
-      });
+          return (_api$itemsRef$value4 = api.itemsRef.value) === null || _api$itemsRef$value4 === void 0 ? void 0 : _api$itemsRef$value4.focus();
+        });
+      }
     }
@@ -398,3 +389,2 @@
       handleKeyDown: handleKeyDown,
-      handlePointerDown: handlePointerDown,
       handlePointerUp: handlePointerUp,
@@ -456,2 +446,3 @@ handleFocus: handleFocus
         case Key.Enter:
+          event.preventDefault();
           api.closeMenu();
@@ -474,5 +465,7 @@
         case Key.ArrowDown:
+          event.preventDefault();
           return api.goToItem(Focus.NextItem);
 
         case Key.ArrowUp:
+          event.preventDefault();
           return api.goToItem(Focus.PreviousItem);
@@ -482,2 +475,3 @@
         case Key.PageUp:
+          event.preventDefault();
           return api.goToItem(Focus.FirstItem);
@@ -487,5 +481,7 @@
         case Key.PageDown:
+          event.preventDefault();
           return api.goToItem(Focus.LastItem);
 
         case Key.Escape:
+          event.preventDefault();
           api.closeMenu();
@@ -591,9 +587,14 @@ nextTick(function () {
     function handlePointerUp(event) {
-      if (disabled) return;
-      event.preventDefault();
-      api.closeMenu();
-      nextTick(function () {
-        var _api$buttonRef$value4;
+      if (disabled) return event.preventDefault(); // Turns out that we can't use nextTick here. Even if we do, the `handleClick` would *not* be
+      // called because the closeMenu() update is *too fast* and the tree gets unmounted before it
+      // bubbles up. So instead of nextTick, we use the good old double requestAnimationFrame to
+      // wait for a "nextFrame".
 
-        return (_api$buttonRef$value4 = api.buttonRef.value) === null || _api$buttonRef$value4 === void 0 ? void 0 : _api$buttonRef$value4.focus();
+      requestAnimationFrame(function () {
+        requestAnimationFrame(function () {
+          var _api$buttonRef$value4;
+
+          api.closeMenu();
+          (_api$buttonRef$value4 = api.buttonRef.value) === null || _api$buttonRef$value4 === void 0 ? void 0 : _api$buttonRef$value4.focus();
+        });
       });
@@ -600,0 +601,0 @@ }

dist/headlessui.umd.development.js

@@ -213,7 +213,2 @@ (function (global, factory) {
         activeItemIndex: activeItemIndex,
-        toggleMenu: function toggleMenu() {
-          var _match2;
-
-          menuState.value = match(menuState.value, (_match2 = {}, _match2[MenuStates.Closed] = MenuStates.Open, _match2[MenuStates.Open] = MenuStates.Closed, _match2));
-        },
         closeMenu: function closeMenu() {
@@ -273,20 +268,18 @@ return menuState.value = MenuStates.Closed;
         function handler(event) {
-          var _itemsRef$value;
+          var _buttonRef$value, _itemsRef$value;
 
-          if (event.defaultPrevented) return;
           if (menuState.value !== MenuStates.Open) return;
+          if ((_buttonRef$value = buttonRef.value) === null || _buttonRef$value === void 0 ? void 0 : _buttonRef$value.contains(event.target)) return;
 
           if (!((_itemsRef$value = itemsRef.value) === null || _itemsRef$value === void 0 ? void 0 : _itemsRef$value.contains(event.target))) {
+            var _buttonRef$value2;
+
             api.closeMenu();
-            vue.nextTick(function () {
-              var _buttonRef$value;
-
-              return (_buttonRef$value = buttonRef.value) === null || _buttonRef$value === void 0 ? void 0 : _buttonRef$value.focus();
-            });
+            if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
           }
         }
 
-        window.addEventListener('pointerdown', handler);
+        window.addEventListener('pointerup', handler);
         vue.onUnmounted(function () {
-          return window.removeEventListener('pointerdown', handler);
+          return window.removeEventListener('pointerup', handler);
         });
@@ -332,4 +325,3 @@ }); // @ts-expect-error Types of property 'dataRef' are incompatible.
         onFocus: this.handleFocus,
-        onPointerUp: this.handlePointerUp,
-        onPointerDown: this.handlePointerDown
+        onPointerUp: this.handlePointerUp
       };
@@ -376,15 +368,14 @@ return render({
 
-      function handlePointerDown(event) {
-        // We have a `pointerdown` event listener in the menu for the 'outside click', so we just want
-        // to prevent going there if we happen to click this button.
-        event.preventDefault();
-      }
+      function handlePointerUp(event) {
+        if (api.menuState.value === MenuStates.Open) {
+          api.closeMenu();
+        } else {
+          event.preventDefault();
+          api.openMenu();
+          vue.nextTick(function () {
+            var _api$itemsRef$value4;
 
-      function handlePointerUp() {
-        api.toggleMenu();
-        vue.nextTick(function () {
-          var _api$itemsRef$value4;
-
-          return (_api$itemsRef$value4 = api.itemsRef.value) === null || _api$itemsRef$value4 === void 0 ? void 0 : _api$itemsRef$value4.focus();
-        });
+            return (_api$itemsRef$value4 = api.itemsRef.value) === null || _api$itemsRef$value4 === void 0 ? void 0 : _api$itemsRef$value4.focus();
+          });
+        }
       }
@@ -402,3 +393,2 @@
         handleKeyDown: handleKeyDown,
-        handlePointerDown: handlePointerDown,
         handlePointerUp: handlePointerUp,
@@ -460,2 +450,3 @@ handleFocus: handleFocus
           case Key.Enter:
+            event.preventDefault();
             api.closeMenu();
@@ -478,5 +469,7 @@
           case Key.ArrowDown:
+            event.preventDefault();
             return api.goToItem(Focus.NextItem);
 
           case Key.ArrowUp:
+            event.preventDefault();
             return api.goToItem(Focus.PreviousItem);
@@ -486,2 +479,3 @@
           case Key.PageUp:
+            event.preventDefault();
             return api.goToItem(Focus.FirstItem);
@@ -491,5 +485,7 @@
           case Key.PageDown:
+            event.preventDefault();
             return api.goToItem(Focus.LastItem);
 
           case Key.Escape:
+            event.preventDefault();
             api.closeMenu();
@@ -595,9 +591,14 @@ vue.nextTick(function () {
       function handlePointerUp(event) {
-        if (disabled) return;
-        event.preventDefault();
-        api.closeMenu();
-        vue.nextTick(function () {
-          var _api$buttonRef$value4;
+        if (disabled) return event.preventDefault(); // Turns out that we can't use nextTick here. Even if we do, the `handleClick` would *not* be
+        // called because the closeMenu() update is *too fast* and the tree gets unmounted before it
+        // bubbles up. So instead of nextTick, we use the good old double requestAnimationFrame to
+        // wait for a "nextFrame".
 
-          return (_api$buttonRef$value4 = api.buttonRef.value) === null || _api$buttonRef$value4 === void 0 ? void 0 : _api$buttonRef$value4.focus();
+        requestAnimationFrame(function () {
+          requestAnimationFrame(function () {
+            var _api$buttonRef$value4;
+
+            api.closeMenu();
+            (_api$buttonRef$value4 = api.buttonRef.value) === null || _api$buttonRef$value4 === void 0 ? void 0 : _api$buttonRef$value4.focus();
+          });
         });
@@ -604,0 +605,0 @@ }

dist/headlessui.umd.production.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e=e||self).headlessui={},e.Vue)}(this,(function(e,t){"use strict";function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,o,u={},r=Object.keys(e);for(o=0;o<r.length;o++)t.indexOf(n=r[o])>=0||(u[n]=e[n]);return u}function u(e,t){if(e in t){for(var n=t[e],o=arguments.length,r=new Array(o>2?o-2:0),i=2;i<o;i++)r[i-2]=arguments[i];return"function"==typeof n?n.apply(void 0,r):n}var a=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(t).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(a,u),a}function r(e){var n,u=e.props,r=e.attrs,i=e.slots,a=e.slot,l=u.as,s=o(u,["as"]),c=null===(n=i.default)||void 0===n?void 0:n.call(i,a);if("template"===l){if(Object.keys(s).length>0||"class"in r){var d=null!=c?c:[],f=d[0];if(d.slice(1).length>0)throw new Error('You should only render 1 child or use the `as="..."` prop');return t.cloneVNode(f,s)}return c}return t.h(l,s,c)}var i,a,l,s=0;function c(){return++s}!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(i||(i={})),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"}(a||(a={})),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"}(l||(l={}));var d=Symbol("MenuContext");function f(e){var n=t.inject(d);if(void 0===n){var o=new Error("<"+e+" /> is missing a parent <Menu /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,f),o}return n}var v=t.defineComponent({props:{as:{type:[Object,String],default:"template"}},setup:function(e,n){var o=n.slots,a=n.attrs,s=t.ref(i.Closed),c=t.ref(null),f=t.ref(null),v=t.ref([]),p=t.ref(""),m=t.ref(null),I={menuState:s,buttonRef:c,itemsRef:f,items:v,searchQuery:p,activeItemIndex:m,toggleMenu:function(){var e;s.value=u(s.value,((e={})[i.Closed]=i.Open,e[i.Open]=i.Closed,e))},closeMenu:function(){return s.value=i.Closed},openMenu:function(){return s.value=i.Open},goToItem:function(e,t){var n=function(e,t){var n,o;if(v.value.length<=0)return null;var r=null!==(n=m.value)&&void 0!==n?n:-1,i=u(e,((o={})[l.FirstItem]=function(){return v.value.findIndex((function(e){return!e.dataRef.disabled}))},o[l.PreviousItem]=function(){var e=v.value.slice().reverse().findIndex((function(e,t,n){return!(-1!==r&&n.length-t-1>=r||e.dataRef.disabled)}));return-1===e?e:v.value.length-1-e},o[l.NextItem]=function(){return v.value.findIndex((function(e,t){return!(t<=r||e.dataRef.disabled)}))},o[l.LastItem]=function(){var e=v.value.slice().reverse().findIndex((function(e){return!e.dataRef.disabled}));return-1===e?e:v.value.length-1-e},o[l.SpecificItem]=function(){return v.value.findIndex((function(e){return e.id===t}))},o[l.Nothing]=function(){return null},o));return-1===i?m.value:i}(e,t);""===p.value&&m.value===n||(p.value="",m.value=n)},search:function(e){p.value+=e;var t=v.value.findIndex((function(e){return e.dataRef.textValue.startsWith(p.value)&&!e.dataRef.disabled}));-1!==t&&t!==m.value&&(m.value=t)},clearSearch:function(){p.value=""},registerItem:function(e,t){v.value.push({id:e,dataRef:t})},unregisterItem:function(e){var t=v.value.slice(),n=null!==m.value?t[m.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),v.value=t,m.value=o===m.value||null===n?null:t.indexOf(n)}};return t.onMounted((function(){function e(e){var n;e.defaultPrevented||s.value===i.Open&&((null===(n=f.value)||void 0===n?void 0:n.contains(e.target))||(I.closeMenu(),t.nextTick((function(){var e;return null===(e=c.value)||void 0===e?void 0:e.focus()}))))}window.addEventListener("pointerdown",e),t.onUnmounted((function(){return window.removeEventListener("pointerdown",e)}))})),t.provide(d,I),function(){return r({props:e,slot:{open:s.value===i.Open},slots:o,attrs:a})}}}),p=t.defineComponent({props:{as:{type:[Object,String],default:"button"}},render:function(){var e,t=f("MenuButton"),o={open:t.menuState.value===i.Open},u={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null===(e=t.itemsRef.value)||void 0===e?void 0:e.id,"aria-expanded":t.menuState.value===i.Open||void 0,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onPointerUp:this.handlePointerUp,onPointerDown:this.handlePointerDown};return r({props:n({},this.$props,u),slot:o,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=f("MenuButton");return{id:"headlessui-menu-button-"+c(),el:e.buttonRef,handleKeyDown:function(n){switch(n.key){case a.Space:case a.Enter:case a.ArrowDown:n.preventDefault(),e.openMenu(),t.nextTick((function(){var t;null===(t=e.itemsRef.value)||void 0===t||t.focus(),e.goToItem(l.FirstItem)}));break;case a.ArrowUp:n.preventDefault(),e.openMenu(),t.nextTick((function(){var t;null===(t=e.itemsRef.value)||void 0===t||t.focus(),e.goToItem(l.LastItem)}))}},handlePointerDown:function(e){e.preventDefault()},handlePointerUp:function(){e.toggleMenu(),t.nextTick((function(){var t;return null===(t=e.itemsRef.value)||void 0===t?void 0:t.focus()}))},handleFocus:function(){var t;e.menuState.value===i.Open&&(null===(t=e.itemsRef.value)||void 0===t||t.focus())}}}}),m=t.defineComponent({props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1}},render:function(){var e,t,u=f("MenuItems"),a=this.$props,l=a.static,s=o(a,["static"]);if(!l&&u.menuState.value===i.Closed)return null;var c={open:u.menuState.value===i.Open};return r({props:n({},s,{"aria-activedescendant":null===u.activeItemIndex.value||null===(e=u.items.value[u.activeItemIndex.value])||void 0===e?void 0:e.id,"aria-labelledby":null===(t=u.buttonRef.value)||void 0===t?void 0:t.id,id:this.id,onKeyDown:this.handleKeyDown,role:"menu",tabIndex:0,ref:"el"}),slot:c,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=f("MenuItems"),n="headlessui-menu-items-"+c(),o=t.ref(null);return{id:n,el:e.itemsRef,handleKeyDown:function(n){switch(o.value&&clearTimeout(o.value),n.key){case a.Enter:var u;e.closeMenu(),null!==e.activeItemIndex.value&&(null===(u=document.getElementById(e.items.value[e.activeItemIndex.value].id))||void 0===u||u.click(),t.nextTick((function(){var t;return null===(t=e.buttonRef.value)||void 0===t?void 0:t.focus()})));break;case a.ArrowDown:return e.goToItem(l.NextItem);case a.ArrowUp:return e.goToItem(l.PreviousItem);case a.Home:case a.PageUp:return e.goToItem(l.FirstItem);case a.End:case a.PageDown:return e.goToItem(l.LastItem);case a.Escape:e.closeMenu(),t.nextTick((function(){var t;return null===(t=e.buttonRef.value)||void 0===t?void 0:t.focus()}));break;case a.Tab:return n.preventDefault();default:1===n.key.length&&(e.search(n.key),o.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),I=t.defineComponent({props:{as:{type:[Object,String],default:"template"},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(e,o){var u=o.slots,i=o.attrs,a=f("MenuItem"),s="headlessui-menu-item-"+c(),d=e.disabled,v=e.className,p=void 0===v?e.class:v,m=t.computed((function(){return null!==a.activeItemIndex.value&&a.items.value[a.activeItemIndex.value].id===s})),I=t.ref({disabled:d,textValue:""});function g(){d||a.goToItem(l.SpecificItem,s)}function b(){if(d)return a.goToItem(l.Nothing);a.goToItem(l.SpecificItem,s)}function w(){d||a.goToItem(l.Nothing)}function y(){d||m.value||a.goToItem(l.SpecificItem,s)}function x(e){d||(e.preventDefault(),a.closeMenu(),t.nextTick((function(){var e;return null===(e=a.buttonRef.value)||void 0===e?void 0:e.focus()})))}function T(e){if(d)return e.preventDefault()}return t.onMounted((function(){var e,t,n=null===(e=document.getElementById(s))||void 0===e||null===(t=e.textContent)||void 0===t?void 0:t.toLowerCase().trim();void 0!==n&&(I.value.textValue=n)})),t.onMounted((function(){return a.registerItem(s,I)})),t.onUnmounted((function(){return a.unregisterItem(s)})),function(){var t={active:m.value,disabled:d},o={id:s,role:"menuitem",tabIndex:-1,class:h(p,t),"aria-disabled":!0===d||void 0,onClick:T,onFocus:b,onMouseMove:y,onPointerEnter:g,onPointerLeave:w,onPointerUp:x};return r({props:n({},e,o),slot:t,attrs:i,slots:u})}}});function h(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}e.Menu=v,e.MenuButton=p,e.MenuItem=I,e.MenuItems=m,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e=e||self).headlessui={},e.Vue)}(this,(function(e,t){"use strict";function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var u in n)Object.prototype.hasOwnProperty.call(n,u)&&(e[u]=n[u])}return e}).apply(this,arguments)}function u(e,t){if(null==e)return{};var n,u,r={},o=Object.keys(e);for(u=0;u<o.length;u++)t.indexOf(n=o[u])>=0||(r[n]=e[n]);return r}function r(e,t){if(e in t){for(var n=t[e],u=arguments.length,o=new Array(u>2?u-2:0),a=2;a<u;a++)o[a-2]=arguments[a];return"function"==typeof n?n.apply(void 0,o):n}var i=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(t).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(i,r),i}function o(e){var n,r=e.props,o=e.attrs,a=e.slots,i=e.slot,l=r.as,s=u(r,["as"]),c=null===(n=a.default)||void 0===n?void 0:n.call(a,i);if("template"===l){if(Object.keys(s).length>0||"class"in o){var d=null!=c?c:[],f=d[0];if(d.slice(1).length>0)throw new Error('You should only render 1 child or use the `as="..."` prop');return t.cloneVNode(f,s)}return c}return t.h(l,s,c)}var a,i,l,s=0;function c(){return++s}!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(a||(a={})),function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(i||(i={})),function(e){e[e.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"}(l||(l={}));var d=Symbol("MenuContext");function f(e){var n=t.inject(d);if(void 0===n){var u=new Error("<"+e+" /> is missing a parent <Menu /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(u,f),u}return n}var v=t.defineComponent({props:{as:{type:[Object,String],default:"template"}},setup:function(e,n){var u=n.slots,i=n.attrs,s=t.ref(a.Closed),c=t.ref(null),f=t.ref(null),v=t.ref([]),p=t.ref(""),m=t.ref(null),I={menuState:s,buttonRef:c,itemsRef:f,items:v,searchQuery:p,activeItemIndex:m,closeMenu:function(){return s.value=a.Closed},openMenu:function(){return s.value=a.Open},goToItem:function(e,t){var n=function(e,t){var n,u;if(v.value.length<=0)return null;var o=null!==(n=m.value)&&void 0!==n?n:-1,a=r(e,((u={})[l.FirstItem]=function(){return v.value.findIndex((function(e){return!e.dataRef.disabled}))},u[l.PreviousItem]=function(){var e=v.value.slice().reverse().findIndex((function(e,t,n){return!(-1!==o&&n.length-t-1>=o||e.dataRef.disabled)}));return-1===e?e:v.value.length-1-e},u[l.NextItem]=function(){return v.value.findIndex((function(e,t){return!(t<=o||e.dataRef.disabled)}))},u[l.LastItem]=function(){var e=v.value.slice().reverse().findIndex((function(e){return!e.dataRef.disabled}));return-1===e?e:v.value.length-1-e},u[l.SpecificItem]=function(){return v.value.findIndex((function(e){return e.id===t}))},u[l.Nothing]=function(){return null},u));return-1===a?m.value:a}(e,t);""===p.value&&m.value===n||(p.value="",m.value=n)},search:function(e){p.value+=e;var t=v.value.findIndex((function(e){return e.dataRef.textValue.startsWith(p.value)&&!e.dataRef.disabled}));-1!==t&&t!==m.value&&(m.value=t)},clearSearch:function(){p.value=""},registerItem:function(e,t){v.value.push({id:e,dataRef:t})},unregisterItem:function(e){var t=v.value.slice(),n=null!==m.value?t[m.value]:null,u=t.findIndex((function(t){return t.id===e}));-1!==u&&t.splice(u,1),v.value=t,m.value=u===m.value||null===n?null:t.indexOf(n)}};return t.onMounted((function(){function e(e){var t,n,u;s.value===a.Open&&((null===(t=c.value)||void 0===t?void 0:t.contains(e.target))||(null===(n=f.value)||void 0===n?void 0:n.contains(e.target))||(I.closeMenu(),e.defaultPrevented||null===(u=c.value)||void 0===u||u.focus()))}window.addEventListener("pointerup",e),t.onUnmounted((function(){return window.removeEventListener("pointerup",e)}))})),t.provide(d,I),function(){return o({props:e,slot:{open:s.value===a.Open},slots:u,attrs:i})}}}),p=t.defineComponent({props:{as:{type:[Object,String],default:"button"}},render:function(){var e,t=f("MenuButton"),u={open:t.menuState.value===a.Open},r={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null===(e=t.itemsRef.value)||void 0===e?void 0:e.id,"aria-expanded":t.menuState.value===a.Open||void 0,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onPointerUp:this.handlePointerUp};return o({props:n({},this.$props,r),slot:u,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=f("MenuButton");return{id:"headlessui-menu-button-"+c(),el:e.buttonRef,handleKeyDown:function(n){switch(n.key){case i.Space:case i.Enter:case i.ArrowDown:n.preventDefault(),e.openMenu(),t.nextTick((function(){var t;null===(t=e.itemsRef.value)||void 0===t||t.focus(),e.goToItem(l.FirstItem)}));break;case i.ArrowUp:n.preventDefault(),e.openMenu(),t.nextTick((function(){var t;null===(t=e.itemsRef.value)||void 0===t||t.focus(),e.goToItem(l.LastItem)}))}},handlePointerUp:function(n){e.menuState.value===a.Open?e.closeMenu():(n.preventDefault(),e.openMenu(),t.nextTick((function(){var t;return null===(t=e.itemsRef.value)||void 0===t?void 0:t.focus()})))},handleFocus:function(){var t;e.menuState.value===a.Open&&(null===(t=e.itemsRef.value)||void 0===t||t.focus())}}}}),m=t.defineComponent({props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1}},render:function(){var e,t,r=f("MenuItems"),i=this.$props,l=i.static,s=u(i,["static"]);if(!l&&r.menuState.value===a.Closed)return null;var c={open:r.menuState.value===a.Open};return o({props:n({},s,{"aria-activedescendant":null===r.activeItemIndex.value||null===(e=r.items.value[r.activeItemIndex.value])||void 0===e?void 0:e.id,"aria-labelledby":null===(t=r.buttonRef.value)||void 0===t?void 0:t.id,id:this.id,onKeyDown:this.handleKeyDown,role:"menu",tabIndex:0,ref:"el"}),slot:c,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=f("MenuItems"),n="headlessui-menu-items-"+c(),u=t.ref(null);return{id:n,el:e.itemsRef,handleKeyDown:function(n){switch(u.value&&clearTimeout(u.value),n.key){case i.Enter:var r;n.preventDefault(),e.closeMenu(),null!==e.activeItemIndex.value&&(null===(r=document.getElementById(e.items.value[e.activeItemIndex.value].id))||void 0===r||r.click(),t.nextTick((function(){var t;return null===(t=e.buttonRef.value)||void 0===t?void 0:t.focus()})));break;case i.ArrowDown:return n.preventDefault(),e.goToItem(l.NextItem);case i.ArrowUp:return n.preventDefault(),e.goToItem(l.PreviousItem);case i.Home:case i.PageUp:return n.preventDefault(),e.goToItem(l.FirstItem);case i.End:case i.PageDown:return n.preventDefault(),e.goToItem(l.LastItem);case i.Escape:n.preventDefault(),e.closeMenu(),t.nextTick((function(){var t;return null===(t=e.buttonRef.value)||void 0===t?void 0:t.focus()}));break;case i.Tab:return n.preventDefault();default:1===n.key.length&&(e.search(n.key),u.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),I=t.defineComponent({props:{as:{type:[Object,String],default:"template"},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(e,u){var r=u.slots,a=u.attrs,i=f("MenuItem"),s="headlessui-menu-item-"+c(),d=e.disabled,v=e.className,p=void 0===v?e.class:v,m=t.computed((function(){return null!==i.activeItemIndex.value&&i.items.value[i.activeItemIndex.value].id===s})),I=t.ref({disabled:d,textValue:""});function g(){d||i.goToItem(l.SpecificItem,s)}function b(){if(d)return i.goToItem(l.Nothing);i.goToItem(l.SpecificItem,s)}function y(){d||i.goToItem(l.Nothing)}function w(){d||m.value||i.goToItem(l.SpecificItem,s)}function x(e){if(d)return e.preventDefault();requestAnimationFrame((function(){requestAnimationFrame((function(){var e;i.closeMenu(),null===(e=i.buttonRef.value)||void 0===e||e.focus()}))}))}function S(e){if(d)return e.preventDefault()}return t.onMounted((function(){var e,t,n=null===(e=document.getElementById(s))||void 0===e||null===(t=e.textContent)||void 0===t?void 0:t.toLowerCase().trim();void 0!==n&&(I.value.textValue=n)})),t.onMounted((function(){return i.registerItem(s,I)})),t.onUnmounted((function(){return i.unregisterItem(s)})),function(){var t={active:m.value,disabled:d},u={id:s,role:"menuitem",tabIndex:-1,class:h(p,t),"aria-disabled":!0===d||void 0,onClick:S,onFocus:b,onMouseMove:w,onPointerEnter:g,onPointerLeave:y,onPointerUp:x};return o({props:n({},e,u),slot:t,attrs:a,slots:r})}}});function h(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}e.Menu=v,e.MenuButton=p,e.MenuItem=I,e.MenuItems=m,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=headlessui.umd.production.min.js.map

package.json

 {
   "name": "@headlessui/vue",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "typings": "dist/index.d.ts",

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

257135

increased by0.91%

Lines of code

1919

increased by0.31%

No dependency changes