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

@contentful/f36-popover

Package Overview
Dependencies
Maintainers
109
Versions
329
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@contentful/f36-popover - npm Package Compare versions

Comparing version 4.0.1-next-v4-9697.2430 to 4.0.1-next-v4-9745.2431

2

dist/main.js

@@ -1,2 +0,2 @@

var e=require("react"),t=b(e),{useState:o,useCallback:r,useEffect:n,useMemo:s}=e,{useId:l,mergeRefs:a}=require("@contentful/f36-core"),{usePopper:i}=require("react-popper"),u=b(require("@babel/runtime/helpers/extends")),{cx:c,css:p}=require("emotion"),{Portal:d}=require("@contentful/f36-utils"),f=b(require("@contentful/f36-tokens"));function m(e,t,o,r){Object.defineProperty(e,t,{get:o,set:r,enumerable:!0,configurable:!0})}function b(e){return e&&e.__esModule?e.default:e}var v={};m(v,"Popover",(()=>C)),m(v,"PopoverTrigger",(()=>E)),m(v,"PopoverContent",(()=>w));const g=t.createContext(void 0),h=()=>{const e=t.useContext(g);if(void 0===e)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return e},P=g.Provider;const x={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:({state:e})=>{e.styles.popper.width=`${e.rects.reference.width}px`},effect:({state:e})=>()=>{const t=e.elements.reference;e.elements.popper.style.width=`${t.offsetWidth}px`}},y=(e,o)=>{const{children:r,className:n,testId:s="cf-ui-popover-content",role:l="dialog",...a}=e,{isOpen:i,getPopoverProps:m,usePortal:b}=h(),v=(e=>({container:p({display:e?"initial":"none",background:f.colorWhite,border:0,borderRadius:f.borderRadiusMedium,boxShadow:f.boxShadowDefault,zIndex:f.zIndexDropdown},"")}))(i),g=t.createElement("div",u({},a,m(a,o),{className:c(v.container,n),"data-test-id":s,tabIndex:-1,role:l,"data-position-absolute":!0}),r);return b?t.createElement(d,null,g):g},w=t.forwardRef(y),E=e=>{var o;const r=t.Children.only(e.children),{getTriggerProps:n}=h();return t.cloneElement(r,{...n(r.ref),"aria-haspopup":null!==(o=r.props["aria-haspopup"])&&void 0!==o?o:"dialog"})},C=function(e){const{children:u,isOpen:c,placement:p="bottom-start",isFullWidth:d=!1,isAutoalignmentEnabled:f=!0,usePortal:m=!0,closeOnBlur:b=!0,closeOnEsc:v=!0,onClose:g,autoFocus:h=!0,id:y,offset:w=[1,4]}=e,[E,C]=o(null),[O,q]=o(null),{attributes:k,forceUpdate:B,styles:D}=i(E,O,{placement:p,modifiers:[{name:"offset",options:{offset:w}},{...x,enabled:d},{name:"preventOverflow",enabled:f,options:{mainAxis:!0}},{name:"flip",enabled:f}]});n((()=>{c&&h&&O&&O.focus({preventScroll:!0})}),[c,O]),n((()=>{c&&B&&B()}),[c,B]);const I=l(null,"popover-content"),S=y||I,T=r((()=>{g&&g()}),[g]),W=s((()=>({isOpen:c,usePortal:m,getTriggerProps:(e=null)=>({ref:a(C,e),"aria-expanded":Boolean(c),"aria-controls":S}),getPopoverProps:(e={},t=null)=>({...k.popper,style:{...e.style||{},...D.popper},ref:a(q,t),id:S,onBlur:t=>{if(e.onBlur&&e.onBlur(t),!b)return;const o=t.relatedTarget,r=O===o||O.contains(o),n=E===o||E.contains(o);r||n||T()},onKeyDown:t=>{e.onKeyDown&&e.onKeyDown(t),v&&"Escape"===t.key&&T()}})})),[c,k,D,m,S,v,b,O,E,T]);return t.createElement(P,{value:W},u)};var O,q;C.Content=w,C.Trigger=E,O=module.exports,q=v,Object.keys(q).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(O,e,{enumerable:!0,get:function(){return q[e]}})}));
var e=require("react"),t=b(e),{useCallback:o,useState:r,useMemo:n,useEffect:s}=e,{mergeRefs:l,useId:a}=require("@contentful/f36-core"),{usePopper:i}=require("react-popper"),u=b(require("@babel/runtime/helpers/extends")),{cx:c,css:p}=require("emotion"),{Portal:d}=require("@contentful/f36-utils"),f=b(require("@contentful/f36-tokens"));function m(e,t,o,r){Object.defineProperty(e,t,{get:o,set:r,enumerable:!0,configurable:!0})}function b(e){return e&&e.__esModule?e.default:e}var v={};m(v,"Popover",(()=>C)),m(v,"PopoverTrigger",(()=>E)),m(v,"PopoverContent",(()=>w));const g=t.createContext(void 0),h=()=>{const e=t.useContext(g);if(void 0===e)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return e},P=g.Provider;const x={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:({state:e})=>{e.styles.popper.width=`${e.rects.reference.width}px`},effect:({state:e})=>()=>{const t=e.elements.reference;e.elements.popper.style.width=`${t.offsetWidth}px`}},y=(e,o)=>{const{children:r,className:n,testId:s="cf-ui-popover-content",role:l="dialog",...a}=e,{isOpen:i,getPopoverProps:m,usePortal:b}=h(),v=(e=>({container:p({display:e?"initial":"none",background:f.colorWhite,border:0,borderRadius:f.borderRadiusMedium,boxShadow:f.boxShadowDefault,zIndex:f.zIndexDropdown},"")}))(i),g=t.createElement("div",u({},a,m(a,o),{className:c(v.container,n),"data-test-id":s,tabIndex:-1,role:l,"data-position-absolute":!0}),r);return b?t.createElement(d,null,g):g},w=t.forwardRef(y),E=e=>{var o;const r=t.Children.only(e.children),{getTriggerProps:n}=h();return t.cloneElement(r,{...n(r.ref),"aria-haspopup":null!==(o=r.props["aria-haspopup"])&&void 0!==o?o:"dialog"})},C=function(e){const{children:u,isOpen:c,placement:p="bottom-start",isFullWidth:d=!1,isAutoalignmentEnabled:f=!0,usePortal:m=!0,closeOnBlur:b=!0,closeOnEsc:v=!0,onClose:g,autoFocus:h=!0,id:y,offset:w=[1,4]}=e,[E,C]=r(null),[O,q]=r(null),{attributes:k,forceUpdate:B,styles:D}=i(E,O,{placement:p,modifiers:[{name:"offset",options:{offset:w}},{...x,enabled:d},{name:"preventOverflow",enabled:f,options:{mainAxis:!0}},{name:"flip",enabled:f}]});s((()=>{c&&h&&O&&O.focus({preventScroll:!0})}),[c,O]),s((()=>{c&&B&&B()}),[c,B]);const I=a(null,"popover-content"),S=y||I,T=o((()=>{g&&g()}),[g]),W=n((()=>({isOpen:c,usePortal:m,getTriggerProps:(e=null)=>({ref:l(C,e),"aria-expanded":Boolean(c),"aria-controls":S}),getPopoverProps:(e={},t=null)=>({...k.popper,style:{...e.style||{},...D.popper},ref:l(q,t),id:S,onBlur:t=>{if(e.onBlur&&e.onBlur(t),!b)return;const o=t.relatedTarget,r=O===o||O.contains(o),n=E===o||E.contains(o);r||n||T()},onKeyDown:t=>{e.onKeyDown&&e.onKeyDown(t),v&&"Escape"===t.key&&T()}})})),[c,k,D,m,S,v,b,O,E,T]);return t.createElement(P,{value:W},u)};var O,q;C.Content=w,C.Trigger=E,O=module.exports,q=v,Object.keys(q).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(O,e,{enumerable:!0,get:function(){return q[e]}})}));
//# sourceMappingURL=main.js.map

@@ -1,2 +0,2 @@

import e,{useState as o,useMemo as t,useEffect as r,useCallback as n}from"react";import{mergeRefs as s,useId as a}from"@contentful/f36-core";import{usePopper as l}from"react-popper";import i from"@babel/runtime/helpers/esm/extends";import{cx as p,css as c}from"emotion";import{Portal as u}from"@contentful/f36-utils";import d from"@contentful/f36-tokens";function f(e,o,t,r){Object.defineProperty(e,o,{get:t,set:r,enumerable:!0,configurable:!0})}var m={};f(m,"Popover",(()=>y)),f(m,"PopoverTrigger",(()=>w)),f(m,"PopoverContent",(()=>x));const v=e.createContext(void 0),b=()=>{const o=e.useContext(v);if(void 0===o)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return o},g=v.Provider;const P={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:({state:e})=>{e.styles.popper.width=`${e.rects.reference.width}px`},effect:({state:e})=>()=>{const o=e.elements.reference;e.elements.popper.style.width=`${o.offsetWidth}px`}},h=(o,t)=>{const{children:r,className:n,testId:s="cf-ui-popover-content",role:a="dialog",...l}=o,{isOpen:f,getPopoverProps:m,usePortal:v}=b(),g=(e=>({container:c({display:e?"initial":"none",background:d.colorWhite,border:0,borderRadius:d.borderRadiusMedium,boxShadow:d.boxShadowDefault,zIndex:d.zIndexDropdown},"")}))(f),P=e.createElement("div",i({},l,m(l,t),{className:p(g.container,n),"data-test-id":s,tabIndex:-1,role:a,"data-position-absolute":!0}),r);return v?e.createElement(u,null,P):P},x=e.forwardRef(h),w=o=>{var t;const r=e.Children.only(o.children),{getTriggerProps:n}=b();return e.cloneElement(r,{...n(r.ref),"aria-haspopup":null!==(t=r.props["aria-haspopup"])&&void 0!==t?t:"dialog"})},y=function(i){const{children:p,isOpen:c,placement:u="bottom-start",isFullWidth:d=!1,isAutoalignmentEnabled:f=!0,usePortal:m=!0,closeOnBlur:v=!0,closeOnEsc:b=!0,onClose:h,autoFocus:x=!0,id:w,offset:y=[1,4]}=i,[C,E]=o(null),[O,T]=o(null),{attributes:B,forceUpdate:D,styles:I}=l(C,O,{placement:u,modifiers:[{name:"offset",options:{offset:y}},{...P,enabled:d},{name:"preventOverflow",enabled:f,options:{mainAxis:!0}},{name:"flip",enabled:f}]});r((()=>{c&&x&&O&&O.focus({preventScroll:!0})}),[c,O]),r((()=>{c&&D&&D()}),[c,D]);const S=a(null,"popover-content"),W=w||S,k=n((()=>{h&&h()}),[h]),R=t((()=>({isOpen:c,usePortal:m,getTriggerProps:(e=null)=>({ref:s(E,e),"aria-expanded":Boolean(c),"aria-controls":W}),getPopoverProps:(e={},o=null)=>({...B.popper,style:{...e.style||{},...I.popper},ref:s(T,o),id:W,onBlur:o=>{if(e.onBlur&&e.onBlur(o),!v)return;const t=o.relatedTarget,r=O===t||O.contains(t),n=C===t||C.contains(t);r||n||k()},onKeyDown:o=>{e.onKeyDown&&e.onKeyDown(o),b&&"Escape"===o.key&&k()}})})),[c,B,I,m,W,b,v,O,C,k]);return e.createElement(g,{value:R},p)};y.Content=x,y.Trigger=w;export{y as Popover,w as PopoverTrigger,x as PopoverContent};
import e,{useEffect as o,useCallback as t,useState as r,useMemo as n}from"react";import{mergeRefs as s,useId as a}from"@contentful/f36-core";import{usePopper as l}from"react-popper";import i from"@babel/runtime/helpers/esm/extends";import{cx as p,css as c}from"emotion";import{Portal as u}from"@contentful/f36-utils";import d from"@contentful/f36-tokens";function f(e,o,t,r){Object.defineProperty(e,o,{get:t,set:r,enumerable:!0,configurable:!0})}var m={};f(m,"Popover",(()=>y)),f(m,"PopoverTrigger",(()=>w)),f(m,"PopoverContent",(()=>x));const v=e.createContext(void 0),b=()=>{const o=e.useContext(v);if(void 0===o)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return o},g=v.Provider;const P={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:({state:e})=>{e.styles.popper.width=`${e.rects.reference.width}px`},effect:({state:e})=>()=>{const o=e.elements.reference;e.elements.popper.style.width=`${o.offsetWidth}px`}},h=(o,t)=>{const{children:r,className:n,testId:s="cf-ui-popover-content",role:a="dialog",...l}=o,{isOpen:f,getPopoverProps:m,usePortal:v}=b(),g=(e=>({container:c({display:e?"initial":"none",background:d.colorWhite,border:0,borderRadius:d.borderRadiusMedium,boxShadow:d.boxShadowDefault,zIndex:d.zIndexDropdown},"")}))(f),P=e.createElement("div",i({},l,m(l,t),{className:p(g.container,n),"data-test-id":s,tabIndex:-1,role:a,"data-position-absolute":!0}),r);return v?e.createElement(u,null,P):P},x=e.forwardRef(h),w=o=>{var t;const r=e.Children.only(o.children),{getTriggerProps:n}=b();return e.cloneElement(r,{...n(r.ref),"aria-haspopup":null!==(t=r.props["aria-haspopup"])&&void 0!==t?t:"dialog"})},y=function(i){const{children:p,isOpen:c,placement:u="bottom-start",isFullWidth:d=!1,isAutoalignmentEnabled:f=!0,usePortal:m=!0,closeOnBlur:v=!0,closeOnEsc:b=!0,onClose:h,autoFocus:x=!0,id:w,offset:y=[1,4]}=i,[C,E]=r(null),[O,T]=r(null),{attributes:B,forceUpdate:D,styles:I}=l(C,O,{placement:u,modifiers:[{name:"offset",options:{offset:y}},{...P,enabled:d},{name:"preventOverflow",enabled:f,options:{mainAxis:!0}},{name:"flip",enabled:f}]});o((()=>{c&&x&&O&&O.focus({preventScroll:!0})}),[c,O]),o((()=>{c&&D&&D()}),[c,D]);const S=a(null,"popover-content"),W=w||S,k=t((()=>{h&&h()}),[h]),R=n((()=>({isOpen:c,usePortal:m,getTriggerProps:(e=null)=>({ref:s(E,e),"aria-expanded":Boolean(c),"aria-controls":W}),getPopoverProps:(e={},o=null)=>({...B.popper,style:{...e.style||{},...I.popper},ref:s(T,o),id:W,onBlur:o=>{if(e.onBlur&&e.onBlur(o),!v)return;const t=o.relatedTarget,r=O===t||O.contains(t),n=C===t||C.contains(t);r||n||k()},onKeyDown:o=>{e.onKeyDown&&e.onKeyDown(o),b&&"Escape"===o.key&&k()}})})),[c,B,I,m,W,b,v,O,C,k]);return e.createElement(g,{value:R},p)};y.Content=x,y.Trigger=w;export{y as Popover,w as PopoverTrigger,x as PopoverContent};
//# sourceMappingURL=module.js.map
{
"name": "@contentful/f36-popover",
"version": "4.0.1-next-v4-9697.2430+abab0df3",
"version": "4.0.1-next-v4-9745.2431+840f6f33",
"description": "Forma 36: Popover component",

@@ -10,5 +10,5 @@ "scripts": {

"@babel/runtime": "^7.6.2",
"@contentful/f36-core": "4.0.1-next-v4-9697.2430+abab0df3",
"@contentful/f36-tokens": "4.0.1-next-v4-9697.2430+abab0df3",
"@contentful/f36-utils": "4.0.1-next-v4-9697.2430+abab0df3",
"@contentful/f36-core": "4.0.1-next-v4-9745.2431+840f6f33",
"@contentful/f36-tokens": "4.0.1-next-v4-9745.2431+840f6f33",
"@contentful/f36-utils": "4.0.1-next-v4-9745.2431+840f6f33",
"@popperjs/core": "^2.4.4",

@@ -39,3 +39,3 @@ "emotion": "^10.0.17",

},
"gitHead": "abab0df30f3495fb3320da55450216b4f145488c"
"gitHead": "840f6f332ed8a46a33f5e066374b4c1fe64a4039"
}
SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc