@data-slot/popover 0.2.11 → 0.2.12

package/README.md

@@ -196,6 +196,8 @@ The component automatically handles:
 
 ## Events
 
+### Outbound Events
+
 Listen for changes via custom events:
 
 ```javascript
@@ -204,6 +206,26 @@ element.addEventListener("popover:change", (e) => {
 });
 ```
 
+### Inbound Events
+
+Control the popover via events:
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `popover:set` | `{ value: boolean }` | Set open state programmatically |
+
+```javascript
+// Open the popover
+element.dispatchEvent(
+  new CustomEvent("popover:set", { detail: { value: true } })
+);
+
+// Close the popover
+element.dispatchEvent(
+  new CustomEvent("popover:set", { detail: { value: false } })
+);
+```
+
 ## License
 
 MIT

package/dist/index.cjs

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){return i(t).some(t=>e.hasAttribute(t))}const s=new Set([``,`true`,`1`,`yes`]),c=new Set([`false`,`0`,`no`]);function l(e,t){if(!o(e,t))return;let n=a(e,t);if(n===null)return;let i=n.toLowerCase();if(s.has(i))return!0;if(c.has(i))return!1;r(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function u(e,t,n){let i=a(e,t);if(i!==null){if(n.includes(i))return i;r(e,t,`Invalid value "${i}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let d=0;const f=(e,t)=>e.id||=`${t}-${++d}`,p=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function m(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const h=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),g=[`top`,`bottom`,`left`,`right`];function _(t,n={}){let r=e(t,`popover-trigger`),i=e(t,`popover-content`),a=e(t,`popover-close`);if(!r||!i)throw Error(`Popover requires trigger and content slots`);let o=n.defaultOpen??l(t,`defaultOpen`)??!1,s=n.onOpenChange,c=n.closeOnClickOutside??l(t,`closeOnClickOutside`)??!0,d=n.closeOnEscape??l(t,`closeOnEscape`)??!0,_=n.position??u(i,`position`,g)??u(t,`position`,g)??`bottom`,v=o,y=[],b=f(i,`popover-content`);r.setAttribute(`aria-haspopup`,`dialog`),r.setAttribute(`aria-controls`,b),i.setAttribute(`data-position`,_);let x=e=>{v!==e&&(v=e,p(r,`expanded`,v),i.hidden=!v,t.setAttribute(`data-state`,v?`open`:`closed`),h(t,`popover:change`,{open:v}),s?.(v))};p(r,`expanded`,v),i.hidden=!v,t.setAttribute(`data-state`,v?`open`:`closed`),y.push(m(r,`click`,()=>x(!v))),a&&y.push(m(a,`click`,()=>x(!1))),c&&y.push(m(document,`pointerdown`,e=>{if(!v)return;let n=e.target;t.contains(n)||x(!1)})),d&&y.push(m(document,`keydown`,e=>{v&&e.key===`Escape`&&(e.preventDefault(),x(!1),r.focus())}));let S={open:()=>x(!0),close:()=>x(!1),toggle:()=>x(!v),get isOpen(){return v},destroy:()=>{y.forEach(e=>e()),y.length=0}};return S}const v=new WeakSet;function y(e=document){let n=[];for(let r of t(e,`popover`)){if(v.has(r))continue;v.add(r),n.push(_(r))}return n}exports.create=y,exports.createPopover=_;
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){return i(t).some(t=>e.hasAttribute(t))}const s=new Set([``,`true`,`1`,`yes`]),c=new Set([`false`,`0`,`no`]);function l(e,t){if(!o(e,t))return;let n=a(e,t);if(n===null)return;let i=n.toLowerCase();if(s.has(i))return!0;if(c.has(i))return!1;r(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function u(e,t,n){let i=a(e,t);if(i!==null){if(n.includes(i))return i;r(e,t,`Invalid value "${i}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let d=0;const f=(e,t)=>e.id||=`${t}-${++d}`,p=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function m(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const h=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),g=[`top`,`bottom`,`left`,`right`];function _(t,n={}){let r=e(t,`popover-trigger`),i=e(t,`popover-content`),a=e(t,`popover-close`);if(!r||!i)throw Error(`Popover requires trigger and content slots`);let o=n.defaultOpen??l(t,`defaultOpen`)??!1,s=n.onOpenChange,c=n.closeOnClickOutside??l(t,`closeOnClickOutside`)??!0,d=n.closeOnEscape??l(t,`closeOnEscape`)??!0,_=n.position??u(i,`position`,g)??u(t,`position`,g)??`bottom`,v=o,y=[],b=f(i,`popover-content`);r.setAttribute(`aria-haspopup`,`dialog`),r.setAttribute(`aria-controls`,b),i.setAttribute(`data-position`,_);let x=e=>{v!==e&&(v=e,p(r,`expanded`,v),i.hidden=!v,t.setAttribute(`data-state`,v?`open`:`closed`),h(t,`popover:change`,{open:v}),s?.(v))};p(r,`expanded`,v),i.hidden=!v,t.setAttribute(`data-state`,v?`open`:`closed`),y.push(m(r,`click`,()=>x(!v))),a&&y.push(m(a,`click`,()=>x(!1))),c&&y.push(m(document,`pointerdown`,e=>{if(!v)return;let n=e.target;t.contains(n)||x(!1)})),d&&y.push(m(document,`keydown`,e=>{v&&e.key===`Escape`&&(e.preventDefault(),x(!1),r.focus())})),y.push(m(t,`popover:set`,e=>{let t=e.detail;typeof t?.value==`boolean`&&x(t.value)}));let S={open:()=>x(!0),close:()=>x(!1),toggle:()=>x(!v),get isOpen(){return v},destroy:()=>{y.forEach(e=>e()),y.length=0}};return S}const v=new WeakSet;function y(e=document){let n=[];for(let r of t(e,`popover`)){if(v.has(r))continue;v.add(r),n.push(_(r))}return n}exports.create=y,exports.createPopover=_;

package/dist/index.js

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){return i(t).some(t=>e.hasAttribute(t))}const s=new Set([``,`true`,`1`,`yes`]),c=new Set([`false`,`0`,`no`]);function l(e,t){if(!o(e,t))return;let n=a(e,t);if(n===null)return;let i=n.toLowerCase();if(s.has(i))return!0;if(c.has(i))return!1;r(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function u(e,t,n){let i=a(e,t);if(i!==null){if(n.includes(i))return i;r(e,t,`Invalid value "${i}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let d=0;const f=(e,t)=>e.id||=`${t}-${++d}`,p=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function m(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const h=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),g=[`top`,`bottom`,`left`,`right`];function _(t,n={}){let r=e(t,`popover-trigger`),i=e(t,`popover-content`),a=e(t,`popover-close`);if(!r||!i)throw Error(`Popover requires trigger and content slots`);let o=n.defaultOpen??l(t,`defaultOpen`)??!1,s=n.onOpenChange,c=n.closeOnClickOutside??l(t,`closeOnClickOutside`)??!0,d=n.closeOnEscape??l(t,`closeOnEscape`)??!0,_=n.position??u(i,`position`,g)??u(t,`position`,g)??`bottom`,v=o,y=[],b=f(i,`popover-content`);r.setAttribute(`aria-haspopup`,`dialog`),r.setAttribute(`aria-controls`,b),i.setAttribute(`data-position`,_);let x=e=>{v!==e&&(v=e,p(r,`expanded`,v),i.hidden=!v,t.setAttribute(`data-state`,v?`open`:`closed`),h(t,`popover:change`,{open:v}),s?.(v))};p(r,`expanded`,v),i.hidden=!v,t.setAttribute(`data-state`,v?`open`:`closed`),y.push(m(r,`click`,()=>x(!v))),a&&y.push(m(a,`click`,()=>x(!1))),c&&y.push(m(document,`pointerdown`,e=>{if(!v)return;let n=e.target;t.contains(n)||x(!1)})),d&&y.push(m(document,`keydown`,e=>{v&&e.key===`Escape`&&(e.preventDefault(),x(!1),r.focus())}));let S={open:()=>x(!0),close:()=>x(!1),toggle:()=>x(!v),get isOpen(){return v},destroy:()=>{y.forEach(e=>e()),y.length=0}};return S}const v=new WeakSet;function y(e=document){let n=[];for(let r of t(e,`popover`)){if(v.has(r))continue;v.add(r),n.push(_(r))}return n}export{y as create,_ as createPopover};
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){return i(t).some(t=>e.hasAttribute(t))}const s=new Set([``,`true`,`1`,`yes`]),c=new Set([`false`,`0`,`no`]);function l(e,t){if(!o(e,t))return;let n=a(e,t);if(n===null)return;let i=n.toLowerCase();if(s.has(i))return!0;if(c.has(i))return!1;r(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function u(e,t,n){let i=a(e,t);if(i!==null){if(n.includes(i))return i;r(e,t,`Invalid value "${i}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let d=0;const f=(e,t)=>e.id||=`${t}-${++d}`,p=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function m(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const h=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),g=[`top`,`bottom`,`left`,`right`];function _(t,n={}){let r=e(t,`popover-trigger`),i=e(t,`popover-content`),a=e(t,`popover-close`);if(!r||!i)throw Error(`Popover requires trigger and content slots`);let o=n.defaultOpen??l(t,`defaultOpen`)??!1,s=n.onOpenChange,c=n.closeOnClickOutside??l(t,`closeOnClickOutside`)??!0,d=n.closeOnEscape??l(t,`closeOnEscape`)??!0,_=n.position??u(i,`position`,g)??u(t,`position`,g)??`bottom`,v=o,y=[],b=f(i,`popover-content`);r.setAttribute(`aria-haspopup`,`dialog`),r.setAttribute(`aria-controls`,b),i.setAttribute(`data-position`,_);let x=e=>{v!==e&&(v=e,p(r,`expanded`,v),i.hidden=!v,t.setAttribute(`data-state`,v?`open`:`closed`),h(t,`popover:change`,{open:v}),s?.(v))};p(r,`expanded`,v),i.hidden=!v,t.setAttribute(`data-state`,v?`open`:`closed`),y.push(m(r,`click`,()=>x(!v))),a&&y.push(m(a,`click`,()=>x(!1))),c&&y.push(m(document,`pointerdown`,e=>{if(!v)return;let n=e.target;t.contains(n)||x(!1)})),d&&y.push(m(document,`keydown`,e=>{v&&e.key===`Escape`&&(e.preventDefault(),x(!1),r.focus())})),y.push(m(t,`popover:set`,e=>{let t=e.detail;typeof t?.value==`boolean`&&x(t.value)}));let S={open:()=>x(!0),close:()=>x(!1),toggle:()=>x(!v),get isOpen(){return v},destroy:()=>{y.forEach(e=>e()),y.length=0}};return S}const v=new WeakSet;function y(e=document){let n=[];for(let r of t(e,`popover`)){if(v.has(r))continue;v.add(r),n.push(_(r))}return n}export{y as create,_ as createPopover};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/popover",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",