@contentful/f36-popover - npm Package Compare versions

Comparing version 4.23.1 to 4.23.2

dist/esm/index.js

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

dist/index.js

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

package.json

 {
   "name": "@contentful/f36-popover",
-  "version": "4.23.1",
+  "version": "4.23.2",
   "description": "Forma 36: Popover component",
@@ -9,5 +9,5 @@ "scripts": {
   "dependencies": {
-    "@contentful/f36-core": "^4.23.1",
+    "@contentful/f36-core": "^4.23.2",
     "@contentful/f36-tokens": "^4.0.1",
-    "@contentful/f36-utils": "^4.23.1",
+    "@contentful/f36-utils": "^4.23.2",
     "@popperjs/core": "^2.11.5",
@@ -14,0 +14,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

66911

increased by3.78%

Lines of code

529

increased by0.38%

Dependency changes

• Updated@contentful/f36-core@^4.23.2

• Updated@contentful/f36-utils@^4.23.2