@contentful/f36-popover - npm Package Compare versions

Comparing version 4.19.2 to 4.20.0

CHANGELOG.md

 # Change Log
 
+## 4.20.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-utils@4.20.0
+  - @contentful/f36-core@4.20.0
+
 ## 4.19.2
@@ -4,0 +12,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import C, { useState, useEffect, useCallback, useMemo } from 'react';
+import O, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useId, mergeRefs } from '@contentful/f36-core';
@@ -6,7 +6,7 @@ import { usePopper } from 'react-popper';
 import { Portal } from '@contentful/f36-utils';
-import i from '@contentful/f36-tokens';
+import f from '@contentful/f36-tokens';
 
-var W=C.createContext(void 0),f=()=>{let e=C.useContext(W);if(e===void 0)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return e},S=W.Provider;function F(e){let{children:r,isOpen:o,placement:v="bottom-start",isFullWidth:g=!1,isAutoalignmentEnabled:d=!0,usePortal:a=!0,closeOnBlur:l=!0,closeOnEsc:P=!0,onClose:p,autoFocus:x=!0,id:b,offset:m=[1,4],renderOnlyWhenOpen:O=!0}=e,[s,A]=useState(null),[n,K]=useState(null),{attributes:w,update:y,styles:R}=usePopper(s,n,{placement:v,modifiers:[{name:"offset",options:{offset:m}},{...Y,enabled:g},{name:"preventOverflow",enabled:d,options:{mainAxis:!0}},{name:"flip",enabled:d}]});useEffect(()=>{o&&x&&n&&n.focus({preventScroll:!0});},[o,n]),useEffect(()=>{(async()=>{o&&y&&await y();})();},[o,y]);let z=useId(void 0,"popover-content"),T=b||z,H=useCallback(()=>{p?.(),setTimeout(()=>s?.focus({preventScroll:!0}),0);},[p,s]),$=useMemo(()=>({isOpen:Boolean(o),usePortal:a,renderOnlyWhenOpen:O,getTriggerProps:(t=null)=>({ref:mergeRefs(A,t),["aria-expanded"]:Boolean(o),["aria-controls"]:T}),getPopoverProps:(t={},j=null)=>({...w.popper,style:{...t.style||{},...R.popper},ref:mergeRefs(K,j),id:T,onBlur:c=>{if(t.onBlur&&t.onBlur(c),!l)return;let u=c.relatedTarget,q=n===u||n?.contains(u),G=s===u||s?.contains(u);q||G||p?.();},onKeyDown:c=>{t.onKeyDown&&t.onKeyDown(c),P&&c.key==="Escape"&&H();}})}),[o,O,w,R,a,T,P,l,n,s,H,p]);return C.createElement(S,{value:$},r)}var Y={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:({state:e})=>{e.styles.popper.width=`${e.rects.reference.width}px`;},effect:({state:e})=>()=>{let r=e.elements.reference;e.elements.popper.style.width=`${r.offsetWidth}px`;}};var N=e=>({container:css({display:e?"initial":"none",background:i.colorWhite,border:0,borderRadius:i.borderRadiusMedium,boxShadow:i.boxShadowDefault,zIndex:i.zIndexDropdown,"&:focus":{boxShadow:i.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{boxShadow:i.boxShadowDefault}})});var oe=(e,r)=>{let{children:o,className:v,testId:g="cf-ui-popover-content",role:d="dialog",...a}=e,{isOpen:l,renderOnlyWhenOpen:P,getPopoverProps:p,usePortal:x}=f(),b=N(l),m=C.createElement("div",{...a,...p(a,r),className:cx(b.container,v),"data-test-id":g,tabIndex:-1,role:d,"data-position-absolute":!0},o);return P&&!l?null:x?C.createElement(Portal,null,m):m},h=C.forwardRef(oe);var E=e=>{let r=C.Children.only(e.children),{getTriggerProps:o}=f();return C.cloneElement(r,{...o(r.ref),"aria-haspopup":r.props["aria-haspopup"]??"dialog"})};var M=F;M.Content=h;M.Trigger=E;
+var ee=Object.defineProperty,oe=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var D=(e,r,o)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,i=(e,r)=>{for(var o in r||(r={}))I.call(r,o)&&D(e,o,r[o]);if(y)for(var o of y(r))B.call(r,o)&&D(e,o,r[o]);return e},P=(e,r)=>oe(e,re(r));var F=(e,r)=>{var o={};for(var t in e)I.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&y)for(var t of y(e))r.indexOf(t)<0&&B.call(e,t)&&(o[t]=e[t]);return o};var N=(e,r,o)=>new Promise((t,u)=>{var m=p=>{try{a(o.next(p));}catch(n){u(n);}},d=p=>{try{a(o.throw(p));}catch(n){u(n);}},a=p=>p.done?t(p.value):Promise.resolve(p.value).then(m,d);a((o=o.apply(e,r)).next());});var A=O.createContext(void 0),T=()=>{let e=O.useContext(A);if(e===void 0)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return e},K=A.Provider;function q(e){let{children:r,isOpen:o,placement:t="bottom-start",isFullWidth:u=!1,isAutoalignmentEnabled:m=!0,usePortal:d=!0,closeOnBlur:a=!0,closeOnEsc:p=!0,onClose:n,autoFocus:h=!0,id:C,offset:g=[1,4],renderOnlyWhenOpen:v=!0}=e,[s,J]=useState(null),[l,Q]=useState(null),{attributes:L,update:E,styles:W}=usePopper(s,l,{placement:t,modifiers:[{name:"offset",options:{offset:g}},P(i({},ae),{enabled:u}),{name:"preventOverflow",enabled:m,options:{mainAxis:!0}},{name:"flip",enabled:m}]});useEffect(()=>{o&&h&&l&&l.focus({preventScroll:!0});},[o,l]),useEffect(()=>{(()=>N(this,null,function*(){o&&E&&(yield E());}))();},[o,E]);let U=useId(void 0,"popover-content"),M=C||U,S=useCallback(()=>{n==null||n(),setTimeout(()=>s==null?void 0:s.focus({preventScroll:!0}),0);},[n,s]),X=useMemo(()=>({isOpen:Boolean(o),usePortal:d,renderOnlyWhenOpen:v,getTriggerProps:(c=null)=>({ref:mergeRefs(J,c),["aria-expanded"]:Boolean(o),["aria-controls"]:M}),getPopoverProps:(c={},Y=null)=>P(i({},L.popper),{style:i(i({},c.style||{}),W.popper),ref:mergeRefs(Q,Y),id:M,onBlur:x=>{if(c.onBlur&&c.onBlur(x),!a)return;let b=x.relatedTarget,Z=l===b||(l==null?void 0:l.contains(b)),_=s===b||(s==null?void 0:s.contains(b));Z||_||n==null||n();},onKeyDown:x=>{c.onKeyDown&&c.onKeyDown(x),p&&x.key==="Escape"&&S();}})}),[o,v,L,W,d,M,p,a,l,s,S,n]);return O.createElement(K,{value:X},r)}var ae={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:({state:e})=>{e.styles.popper.width=`${e.rects.reference.width}px`;},effect:({state:e})=>()=>{let r=e.elements.reference;e.elements.popper.style.width=`${r.offsetWidth}px`;}};var G=e=>({container:css({display:e?"initial":"none",background:f.colorWhite,border:0,borderRadius:f.borderRadiusMedium,boxShadow:f.boxShadowDefault,zIndex:f.zIndexDropdown,"&:focus":{boxShadow:f.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{boxShadow:f.boxShadowDefault}})});var Pe=(e,r)=>{let v=e,{children:o,className:t,testId:u="cf-ui-popover-content",role:m="dialog"}=v,d=F(v,["children","className","testId","role"]),{isOpen:a,renderOnlyWhenOpen:p,getPopoverProps:n,usePortal:h}=T(),C=G(a),g=O.createElement("div",P(i(i({},d),n(d,r)),{className:cx(C.container,t),"data-test-id":u,tabIndex:-1,role:m,"data-position-absolute":!0}),o);return p&&!a?null:h?O.createElement(Portal,null,g):g},w=O.forwardRef(Pe);var R=e=>{var t;let r=O.Children.only(e.children),{getTriggerProps:o}=T();return O.cloneElement(r,P(i({},o(r.ref)),{"aria-haspopup":(t=r.props["aria-haspopup"])!=null?t:"dialog"}))};var H=q;H.Content=w;H.Trigger=R;
 
-export { M as Popover, h as PopoverContent, E as PopoverTrigger };
+export { H as Popover, w as PopoverContent, R as PopoverTrigger };
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var C = require('react');
+var O = require('react');
 var f36Core = require('@contentful/f36-core');
@@ -11,14 +11,14 @@ var reactPopper = require('react-popper');
 var f36Utils = require('@contentful/f36-utils');
-var i = require('@contentful/f36-tokens');
+var f = require('@contentful/f36-tokens');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var C__default = /*#__PURE__*/_interopDefaultLegacy(C);
-var i__default = /*#__PURE__*/_interopDefaultLegacy(i);
+var O__default = /*#__PURE__*/_interopDefaultLegacy(O);
+var f__default = /*#__PURE__*/_interopDefaultLegacy(f);
 
-var W=C__default["default"].createContext(void 0),f=()=>{let e=C__default["default"].useContext(W);if(e===void 0)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return e},S=W.Provider;function F(e){let{children:r,isOpen:o,placement:v="bottom-start",isFullWidth:g=!1,isAutoalignmentEnabled:d=!0,usePortal:a=!0,closeOnBlur:l=!0,closeOnEsc:P=!0,onClose:p,autoFocus:x=!0,id:b,offset:m=[1,4],renderOnlyWhenOpen:O=!0}=e,[s,A]=C.useState(null),[n,K]=C.useState(null),{attributes:w,update:y,styles:R}=reactPopper.usePopper(s,n,{placement:v,modifiers:[{name:"offset",options:{offset:m}},{...Y,enabled:g},{name:"preventOverflow",enabled:d,options:{mainAxis:!0}},{name:"flip",enabled:d}]});C.useEffect(()=>{o&&x&&n&&n.focus({preventScroll:!0});},[o,n]),C.useEffect(()=>{(async()=>{o&&y&&await y();})();},[o,y]);let z=f36Core.useId(void 0,"popover-content"),T=b||z,H=C.useCallback(()=>{p?.(),setTimeout(()=>s?.focus({preventScroll:!0}),0);},[p,s]),$=C.useMemo(()=>({isOpen:Boolean(o),usePortal:a,renderOnlyWhenOpen:O,getTriggerProps:(t=null)=>({ref:f36Core.mergeRefs(A,t),["aria-expanded"]:Boolean(o),["aria-controls"]:T}),getPopoverProps:(t={},j=null)=>({...w.popper,style:{...t.style||{},...R.popper},ref:f36Core.mergeRefs(K,j),id:T,onBlur:c=>{if(t.onBlur&&t.onBlur(c),!l)return;let u=c.relatedTarget,q=n===u||n?.contains(u),G=s===u||s?.contains(u);q||G||p?.();},onKeyDown:c=>{t.onKeyDown&&t.onKeyDown(c),P&&c.key==="Escape"&&H();}})}),[o,O,w,R,a,T,P,l,n,s,H,p]);return C__default["default"].createElement(S,{value:$},r)}var Y={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:({state:e})=>{e.styles.popper.width=`${e.rects.reference.width}px`;},effect:({state:e})=>()=>{let r=e.elements.reference;e.elements.popper.style.width=`${r.offsetWidth}px`;}};var N=e=>({container:emotion.css({display:e?"initial":"none",background:i__default["default"].colorWhite,border:0,borderRadius:i__default["default"].borderRadiusMedium,boxShadow:i__default["default"].boxShadowDefault,zIndex:i__default["default"].zIndexDropdown,"&:focus":{boxShadow:i__default["default"].glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{boxShadow:i__default["default"].boxShadowDefault}})});var oe=(e,r)=>{let{children:o,className:v,testId:g="cf-ui-popover-content",role:d="dialog",...a}=e,{isOpen:l,renderOnlyWhenOpen:P,getPopoverProps:p,usePortal:x}=f(),b=N(l),m=C__default["default"].createElement("div",{...a,...p(a,r),className:emotion.cx(b.container,v),"data-test-id":g,tabIndex:-1,role:d,"data-position-absolute":!0},o);return P&&!l?null:x?C__default["default"].createElement(f36Utils.Portal,null,m):m},h=C__default["default"].forwardRef(oe);var E=e=>{let r=C__default["default"].Children.only(e.children),{getTriggerProps:o}=f();return C__default["default"].cloneElement(r,{...o(r.ref),"aria-haspopup":r.props["aria-haspopup"]??"dialog"})};var M=F;M.Content=h;M.Trigger=E;
+var ee=Object.defineProperty,oe=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var D=(e,r,o)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,i=(e,r)=>{for(var o in r||(r={}))I.call(r,o)&&D(e,o,r[o]);if(y)for(var o of y(r))B.call(r,o)&&D(e,o,r[o]);return e},P=(e,r)=>oe(e,re(r));var F=(e,r)=>{var o={};for(var t in e)I.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&y)for(var t of y(e))r.indexOf(t)<0&&B.call(e,t)&&(o[t]=e[t]);return o};var N=(e,r,o)=>new Promise((t,u)=>{var m=p=>{try{a(o.next(p));}catch(n){u(n);}},d=p=>{try{a(o.throw(p));}catch(n){u(n);}},a=p=>p.done?t(p.value):Promise.resolve(p.value).then(m,d);a((o=o.apply(e,r)).next());});var A=O__default["default"].createContext(void 0),T=()=>{let e=O__default["default"].useContext(A);if(e===void 0)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return e},K=A.Provider;function q(e){let{children:r,isOpen:o,placement:t="bottom-start",isFullWidth:u=!1,isAutoalignmentEnabled:m=!0,usePortal:d=!0,closeOnBlur:a=!0,closeOnEsc:p=!0,onClose:n,autoFocus:h=!0,id:C,offset:g=[1,4],renderOnlyWhenOpen:v=!0}=e,[s,J]=O.useState(null),[l,Q]=O.useState(null),{attributes:L,update:E,styles:W}=reactPopper.usePopper(s,l,{placement:t,modifiers:[{name:"offset",options:{offset:g}},P(i({},ae),{enabled:u}),{name:"preventOverflow",enabled:m,options:{mainAxis:!0}},{name:"flip",enabled:m}]});O.useEffect(()=>{o&&h&&l&&l.focus({preventScroll:!0});},[o,l]),O.useEffect(()=>{(()=>N(this,null,function*(){o&&E&&(yield E());}))();},[o,E]);let U=f36Core.useId(void 0,"popover-content"),M=C||U,S=O.useCallback(()=>{n==null||n(),setTimeout(()=>s==null?void 0:s.focus({preventScroll:!0}),0);},[n,s]),X=O.useMemo(()=>({isOpen:Boolean(o),usePortal:d,renderOnlyWhenOpen:v,getTriggerProps:(c=null)=>({ref:f36Core.mergeRefs(J,c),["aria-expanded"]:Boolean(o),["aria-controls"]:M}),getPopoverProps:(c={},Y=null)=>P(i({},L.popper),{style:i(i({},c.style||{}),W.popper),ref:f36Core.mergeRefs(Q,Y),id:M,onBlur:x=>{if(c.onBlur&&c.onBlur(x),!a)return;let b=x.relatedTarget,Z=l===b||(l==null?void 0:l.contains(b)),_=s===b||(s==null?void 0:s.contains(b));Z||_||n==null||n();},onKeyDown:x=>{c.onKeyDown&&c.onKeyDown(x),p&&x.key==="Escape"&&S();}})}),[o,v,L,W,d,M,p,a,l,s,S,n]);return O__default["default"].createElement(K,{value:X},r)}var ae={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:({state:e})=>{e.styles.popper.width=`${e.rects.reference.width}px`;},effect:({state:e})=>()=>{let r=e.elements.reference;e.elements.popper.style.width=`${r.offsetWidth}px`;}};var G=e=>({container:emotion.css({display:e?"initial":"none",background:f__default["default"].colorWhite,border:0,borderRadius:f__default["default"].borderRadiusMedium,boxShadow:f__default["default"].boxShadowDefault,zIndex:f__default["default"].zIndexDropdown,"&:focus":{boxShadow:f__default["default"].glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{boxShadow:f__default["default"].boxShadowDefault}})});var Pe=(e,r)=>{let v=e,{children:o,className:t,testId:u="cf-ui-popover-content",role:m="dialog"}=v,d=F(v,["children","className","testId","role"]),{isOpen:a,renderOnlyWhenOpen:p,getPopoverProps:n,usePortal:h}=T(),C=G(a),g=O__default["default"].createElement("div",P(i(i({},d),n(d,r)),{className:emotion.cx(C.container,t),"data-test-id":u,tabIndex:-1,role:m,"data-position-absolute":!0}),o);return p&&!a?null:h?O__default["default"].createElement(f36Utils.Portal,null,g):g},w=O__default["default"].forwardRef(Pe);var R=e=>{var t;let r=O__default["default"].Children.only(e.children),{getTriggerProps:o}=T();return O__default["default"].cloneElement(r,P(i({},o(r.ref)),{"aria-haspopup":(t=r.props["aria-haspopup"])!=null?t:"dialog"}))};var H=q;H.Content=w;H.Trigger=R;
 
-exports.Popover = M;
-exports.PopoverContent = h;
-exports.PopoverTrigger = E;
+exports.Popover = H;
+exports.PopoverContent = w;
+exports.PopoverTrigger = R;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@contentful/f36-popover",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "description": "Forma 36: Popover component",
@@ -10,5 +10,5 @@ "scripts": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "^4.19.2",
+    "@contentful/f36-core": "^4.20.0",
     "@contentful/f36-tokens": "^4.0.1",
-    "@contentful/f36-utils": "^4.19.2",
+    "@contentful/f36-utils": "^4.20.0",
     "@popperjs/core": "^2.11.5",
@@ -15,0 +15,0 @@ "emotion": "^10.0.17",

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72556

increased by3.62%

Lines of code

527

increased by1.35%

Dependency changes

• Updated@contentful/f36-core@^4.20.0

• Updated@contentful/f36-utils@^4.20.0