@contentful/f36-avatar - npm Package Compare versions

Comparing version 4.0.0-alpha.10 to 4.0.0-alpha.11

dist/esm/index.js

@@ -9,3 +9,3 @@ import n, { forwardRef } from 'react';
 
-var L=Object.defineProperty,D=Object.defineProperties;var H=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var E=(r,t,o)=>t in r?L(r,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[t]=o,g=(r,t)=>{for(var o in t||(t={}))M.call(t,o)&&E(r,o,t[o]);if(S)for(var o of S(t))G.call(t,o)&&E(r,o,t[o]);return r},V=(r,t)=>D(r,H(t));var N=(r,t)=>{var o={};for(var e in r)M.call(r,e)&&t.indexOf(e)<0&&(o[e]=r[e]);if(r!=null&&S)for(var e of S(r))t.indexOf(e)<0&&G.call(r,e)&&(o[e]=r[e]);return o};var w={primary:c.blue500,green:c.green400,orange:c.orange400,yellow:c.yellow500,purple:c.purple400,gray:c.gray400,pink:"#FF77AE",emerald:"#00B8A2",lavender:"#9095FF"};var X=r=>({boxShadow:`0px 0px 0px 2px ${w[r]} inset, 0px 0px 0px 3px  ${c.colorWhite} inset`}),f=r=>({tiny:"20px",small:"24px",medium:"32px",large:"48px"})[r],$=({isFallback:r,size:t,variant:o,colorVariant:e})=>{let i=o==="app"?c.borderRadiusSmall:"99999999em",a=f(t);return {fallback:css({backgroundColor:c.gray200,height:"100%",width:"100%"}),image:css({borderRadius:i,display:"block"}),root:css([{borderRadius:i,height:a,overflow:"hidden",position:"relative",width:a},!r&&{"&::after":{boxShadow:"inset 0px 0px 0px 1px rgba(17, 27, 43, 0.1)",borderRadius:i,bottom:0,content:'""',display:"block",left:0,position:"absolute",top:0,right:0}}]),colorBorder:css({"&::after":g({},X(e))}),imageContainer:css({overflow:"visible",zIndex:1}),overlayIcon:css({svg:{backgroundColor:c.colorWhite,borderRadius:"99999999em",position:"absolute",bottom:0,right:"-10%",width:"40%",height:"40%",zIndex:1}}),isMuted:css({backgroundColor:c.colorWhite,img:{opacity:.5}})}};function J(u,x){var s=u,{alt:r="",className:t,colorVariant:o,icon:e=null,isLoading:i=!1,size:a="medium",src:P,testId:p="cf-ui-avatar",tooltipProps:d,variant:b="user"}=s,k=N(s,["alt","className","colorVariant","icon","isLoading","size","src","testId","tooltipProps","variant"]);let C=!i&&!P,l=$({isFallback:C,size:a,variant:b,colorVariant:o}),R=f(a),T=n.createElement("div",g({className:cx(l.root,t,{[l.imageContainer]:e!==null,[l.isMuted]:o==="muted",[l.colorBorder]:!!o}),"data-test-id":p,ref:x},k),C?n.createElement("div",{className:l.fallback,"data-test-id":`${p}-fallback`}):n.createElement(Image,{alt:r,className:l.image,height:R,src:P,width:R}),e!==null&&n.createElement("span",{className:l.overlayIcon},e));return d?n.createElement(Tooltip,V(g({},d),{usePortal:!0}),T):T}var W=forwardRef(J);var B=r=>({groupSpaced:css({gap:c.spacing2Xs}),groupStacked:css({gap:0,"> :not(:first-child)":{marginLeft:`-${c.spacing2Xs}`}}),avatarStacked:css({position:"relative",boxShadow:`0px 0px 0px 2px ${c.colorWhite}`}),moreAvatarsBtn:css({cursor:"pointer",backgroundColor:c.colorWhite,color:c.gray600,fontSize:c.fontSizeS,border:"none",boxShadow:`0px 0px 0px 1px ${c.gray200} inset`,borderRadius:"99999999em",height:f(r),width:f(r),overflow:"hidden",zIndex:0}),moreAvatarsItem:css({cursor:"default"})});function U({children:r,className:t,maxVisibleChildren:o=3,size:e="medium",testId:i="cf-ui-avatar-group",variant:a="spaced"},P){let p=B(e),d=n.Children.toArray(r),b=d.length>o?o-1:o,k=d.slice(0,b),x=d.slice(b);return n.createElement(Stack,{flexDirection:"row",testId:i,ref:P,className:cx(t,{[p.groupStacked]:a==="stacked",[p.groupSpaced]:a==="spaced"})},k.map((u,s)=>{let C=k.length-s;return n.cloneElement(u,{key:`avatar-rendered-${s}`,size:e,className:cx(u.props.className,{[p.avatarStacked]:a==="stacked"}),style:{zIndex:C}})}),x.length>0&&n.createElement(Menu,{placement:"bottom-end"},n.createElement(Menu.Trigger,null,n.createElement("button",{type:"button",className:cx({[p.avatarStacked]:a==="stacked"},p.moreAvatarsBtn)},x.length)),n.createElement(Menu.List,null,x.map((u,s)=>n.createElement(Menu.Item,{className:p.moreAvatarsItem,key:`avatar-${s}`},n.cloneElement(u,{key:`avatar-menuitem-${s}`,size:"tiny",tooltipProps:void 0}),u.props.alt)))))}var F=forwardRef(U);
+var L=Object.defineProperty,D=Object.defineProperties;var H=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var E=(r,t,o)=>t in r?L(r,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[t]=o,g=(r,t)=>{for(var o in t||(t={}))M.call(t,o)&&E(r,o,t[o]);if(S)for(var o of S(t))G.call(t,o)&&E(r,o,t[o]);return r},V=(r,t)=>D(r,H(t));var N=(r,t)=>{var o={};for(var e in r)M.call(r,e)&&t.indexOf(e)<0&&(o[e]=r[e]);if(r!=null&&S)for(var e of S(r))t.indexOf(e)<0&&G.call(r,e)&&(o[e]=r[e]);return o};var w={primary:c.blue500,green:c.green400,orange:c.orange400,yellow:c.yellow500,purple:c.purple400,gray:c.gray400,pink:"#FF77AE",emerald:"#00B8A2",lavender:"#9095FF"};var X=r=>({boxShadow:`0px 0px 0px 2px ${w[r]} inset, 0px 0px 0px 3px  ${c.colorWhite} inset`}),f=r=>({tiny:"20px",small:"24px",medium:"32px",large:"48px"})[r],$=({isFallback:r,size:t,variant:o,colorVariant:e})=>{let i=o==="app"?c.borderRadiusSmall:"99999999em",a=f(t);return {fallback:css({backgroundColor:c.gray200,height:"100%",width:"100%"}),image:css({borderRadius:i,display:"block"}),root:css([{borderRadius:i,height:a,overflow:"hidden",position:"relative",width:a},!r&&{"&::after":{boxShadow:"inset 0px 0px 0px 1px rgba(17, 27, 43, 0.1)",borderRadius:i,bottom:0,content:'""',display:"block",left:0,position:"absolute",top:0,right:0}}]),colorBorder:css({"&::after":g({},X(e))}),imageContainer:css({overflow:"visible",zIndex:1}),overlayIcon:css({svg:{backgroundColor:c.colorWhite,borderRadius:"99999999em",position:"absolute",bottom:0,right:"-10%",width:"40%",height:"40%",zIndex:1}}),isMuted:css({backgroundColor:c.colorWhite,img:{opacity:.5}})}};function J(u,x){var s=u,{alt:r="",className:t,colorVariant:o,icon:e=null,isLoading:i=!1,size:a="medium",src:P,testId:p="cf-ui-avatar",tooltipProps:d,variant:b="user"}=s,k=N(s,["alt","className","colorVariant","icon","isLoading","size","src","testId","tooltipProps","variant"]);let C=!i&&!P,l=$({isFallback:C,size:a,variant:b,colorVariant:o}),R=f(a),T=n.createElement("div",g({className:cx(l.root,t,{[l.imageContainer]:e!==null,[l.isMuted]:o==="muted",[l.colorBorder]:!!o}),"data-test-id":p,ref:x},k),C?n.createElement("div",{className:l.fallback,"data-test-id":`${p}-fallback`}):n.createElement(Image,{alt:r,className:l.image,height:R,src:P,width:R}),e!==null&&n.createElement("span",{className:l.overlayIcon},e));return d?n.createElement(Tooltip,V(g({},d),{usePortal:!0}),T):T}var W=forwardRef(J);var B=r=>({groupSpaced:css({gap:c.spacing2Xs}),groupStacked:css({gap:0,"> :not(:first-child)":{marginLeft:`-${c.spacing2Xs}`}}),avatarStacked:css({position:"relative",boxShadow:`0px 0px 0px 1px ${c.colorWhite}`}),moreAvatarsBtn:css({cursor:"pointer",backgroundColor:c.colorWhite,color:c.gray600,fontSize:c.fontSizeS,border:"none",boxShadow:`0px 0px 0px 1px ${c.gray200} inset`,borderRadius:"99999999em",height:f(r),width:f(r),overflow:"hidden",zIndex:0}),moreAvatarsItem:css({cursor:"default"})});function U({children:r,className:t,maxVisibleChildren:o=3,size:e="medium",testId:i="cf-ui-avatar-group",variant:a="spaced"},P){let p=B(e),d=n.Children.toArray(r),b=d.length>o?o-1:o,k=d.slice(0,b),x=d.slice(b);return n.createElement(Stack,{flexDirection:"row",testId:i,ref:P,className:cx(t,{[p.groupStacked]:a==="stacked",[p.groupSpaced]:a==="spaced"})},k.map((u,s)=>{let C=k.length-s;return n.cloneElement(u,{key:`avatar-rendered-${s}`,size:e,className:cx(u.props.className,{[p.avatarStacked]:a==="stacked"}),style:{zIndex:C}})}),x.length>0&&n.createElement(Menu,{placement:"bottom-end"},n.createElement(Menu.Trigger,null,n.createElement("button",{type:"button",className:cx({[p.avatarStacked]:a==="stacked"},p.moreAvatarsBtn)},"+",x.length)),n.createElement(Menu.List,null,x.map((u,s)=>n.createElement(Menu.Item,{className:p.moreAvatarsItem,key:`avatar-${s}`},n.cloneElement(u,{key:`avatar-menuitem-${s}`,size:"tiny",tooltipProps:void 0}),u.props.alt)))))}var F=forwardRef(U);
 
@@ -12,0 +12,0 @@ export { W as Avatar, F as AvatarGroup, w as avatarColorMap };

dist/index.js

@@ -16,3 +16,3 @@ 'use strict';
 
-var L=Object.defineProperty,D=Object.defineProperties;var H=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var E=(r,t,o)=>t in r?L(r,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[t]=o,g=(r,t)=>{for(var o in t||(t={}))M.call(t,o)&&E(r,o,t[o]);if(S)for(var o of S(t))G.call(t,o)&&E(r,o,t[o]);return r},V=(r,t)=>D(r,H(t));var N=(r,t)=>{var o={};for(var e in r)M.call(r,e)&&t.indexOf(e)<0&&(o[e]=r[e]);if(r!=null&&S)for(var e of S(r))t.indexOf(e)<0&&G.call(r,e)&&(o[e]=r[e]);return o};var w={primary:c__default.default.blue500,green:c__default.default.green400,orange:c__default.default.orange400,yellow:c__default.default.yellow500,purple:c__default.default.purple400,gray:c__default.default.gray400,pink:"#FF77AE",emerald:"#00B8A2",lavender:"#9095FF"};var X=r=>({boxShadow:`0px 0px 0px 2px ${w[r]} inset, 0px 0px 0px 3px  ${c__default.default.colorWhite} inset`}),f=r=>({tiny:"20px",small:"24px",medium:"32px",large:"48px"})[r],$=({isFallback:r,size:t,variant:o,colorVariant:e})=>{let i=o==="app"?c__default.default.borderRadiusSmall:"99999999em",a=f(t);return {fallback:emotion.css({backgroundColor:c__default.default.gray200,height:"100%",width:"100%"}),image:emotion.css({borderRadius:i,display:"block"}),root:emotion.css([{borderRadius:i,height:a,overflow:"hidden",position:"relative",width:a},!r&&{"&::after":{boxShadow:"inset 0px 0px 0px 1px rgba(17, 27, 43, 0.1)",borderRadius:i,bottom:0,content:'""',display:"block",left:0,position:"absolute",top:0,right:0}}]),colorBorder:emotion.css({"&::after":g({},X(e))}),imageContainer:emotion.css({overflow:"visible",zIndex:1}),overlayIcon:emotion.css({svg:{backgroundColor:c__default.default.colorWhite,borderRadius:"99999999em",position:"absolute",bottom:0,right:"-10%",width:"40%",height:"40%",zIndex:1}}),isMuted:emotion.css({backgroundColor:c__default.default.colorWhite,img:{opacity:.5}})}};function J(u,x){var s=u,{alt:r="",className:t,colorVariant:o,icon:e=null,isLoading:i=!1,size:a="medium",src:P,testId:p="cf-ui-avatar",tooltipProps:d,variant:b="user"}=s,k=N(s,["alt","className","colorVariant","icon","isLoading","size","src","testId","tooltipProps","variant"]);let C=!i&&!P,l=$({isFallback:C,size:a,variant:b,colorVariant:o}),R=f(a),T=n__default.default.createElement("div",g({className:emotion.cx(l.root,t,{[l.imageContainer]:e!==null,[l.isMuted]:o==="muted",[l.colorBorder]:!!o}),"data-test-id":p,ref:x},k),C?n__default.default.createElement("div",{className:l.fallback,"data-test-id":`${p}-fallback`}):n__default.default.createElement(f36Image.Image,{alt:r,className:l.image,height:R,src:P,width:R}),e!==null&&n__default.default.createElement("span",{className:l.overlayIcon},e));return d?n__default.default.createElement(f36Tooltip.Tooltip,V(g({},d),{usePortal:!0}),T):T}var W=n.forwardRef(J);var B=r=>({groupSpaced:emotion.css({gap:c__default.default.spacing2Xs}),groupStacked:emotion.css({gap:0,"> :not(:first-child)":{marginLeft:`-${c__default.default.spacing2Xs}`}}),avatarStacked:emotion.css({position:"relative",boxShadow:`0px 0px 0px 2px ${c__default.default.colorWhite}`}),moreAvatarsBtn:emotion.css({cursor:"pointer",backgroundColor:c__default.default.colorWhite,color:c__default.default.gray600,fontSize:c__default.default.fontSizeS,border:"none",boxShadow:`0px 0px 0px 1px ${c__default.default.gray200} inset`,borderRadius:"99999999em",height:f(r),width:f(r),overflow:"hidden",zIndex:0}),moreAvatarsItem:emotion.css({cursor:"default"})});function U({children:r,className:t,maxVisibleChildren:o=3,size:e="medium",testId:i="cf-ui-avatar-group",variant:a="spaced"},P){let p=B(e),d=n__default.default.Children.toArray(r),b=d.length>o?o-1:o,k=d.slice(0,b),x=d.slice(b);return n__default.default.createElement(f36Core.Stack,{flexDirection:"row",testId:i,ref:P,className:emotion.cx(t,{[p.groupStacked]:a==="stacked",[p.groupSpaced]:a==="spaced"})},k.map((u,s)=>{let C=k.length-s;return n__default.default.cloneElement(u,{key:`avatar-rendered-${s}`,size:e,className:emotion.cx(u.props.className,{[p.avatarStacked]:a==="stacked"}),style:{zIndex:C}})}),x.length>0&&n__default.default.createElement(f36Menu.Menu,{placement:"bottom-end"},n__default.default.createElement(f36Menu.Menu.Trigger,null,n__default.default.createElement("button",{type:"button",className:emotion.cx({[p.avatarStacked]:a==="stacked"},p.moreAvatarsBtn)},x.length)),n__default.default.createElement(f36Menu.Menu.List,null,x.map((u,s)=>n__default.default.createElement(f36Menu.Menu.Item,{className:p.moreAvatarsItem,key:`avatar-${s}`},n__default.default.cloneElement(u,{key:`avatar-menuitem-${s}`,size:"tiny",tooltipProps:void 0}),u.props.alt)))))}var F=n.forwardRef(U);
+var L=Object.defineProperty,D=Object.defineProperties;var H=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var E=(r,t,o)=>t in r?L(r,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[t]=o,g=(r,t)=>{for(var o in t||(t={}))M.call(t,o)&&E(r,o,t[o]);if(S)for(var o of S(t))G.call(t,o)&&E(r,o,t[o]);return r},V=(r,t)=>D(r,H(t));var N=(r,t)=>{var o={};for(var e in r)M.call(r,e)&&t.indexOf(e)<0&&(o[e]=r[e]);if(r!=null&&S)for(var e of S(r))t.indexOf(e)<0&&G.call(r,e)&&(o[e]=r[e]);return o};var w={primary:c__default.default.blue500,green:c__default.default.green400,orange:c__default.default.orange400,yellow:c__default.default.yellow500,purple:c__default.default.purple400,gray:c__default.default.gray400,pink:"#FF77AE",emerald:"#00B8A2",lavender:"#9095FF"};var X=r=>({boxShadow:`0px 0px 0px 2px ${w[r]} inset, 0px 0px 0px 3px  ${c__default.default.colorWhite} inset`}),f=r=>({tiny:"20px",small:"24px",medium:"32px",large:"48px"})[r],$=({isFallback:r,size:t,variant:o,colorVariant:e})=>{let i=o==="app"?c__default.default.borderRadiusSmall:"99999999em",a=f(t);return {fallback:emotion.css({backgroundColor:c__default.default.gray200,height:"100%",width:"100%"}),image:emotion.css({borderRadius:i,display:"block"}),root:emotion.css([{borderRadius:i,height:a,overflow:"hidden",position:"relative",width:a},!r&&{"&::after":{boxShadow:"inset 0px 0px 0px 1px rgba(17, 27, 43, 0.1)",borderRadius:i,bottom:0,content:'""',display:"block",left:0,position:"absolute",top:0,right:0}}]),colorBorder:emotion.css({"&::after":g({},X(e))}),imageContainer:emotion.css({overflow:"visible",zIndex:1}),overlayIcon:emotion.css({svg:{backgroundColor:c__default.default.colorWhite,borderRadius:"99999999em",position:"absolute",bottom:0,right:"-10%",width:"40%",height:"40%",zIndex:1}}),isMuted:emotion.css({backgroundColor:c__default.default.colorWhite,img:{opacity:.5}})}};function J(u,x){var s=u,{alt:r="",className:t,colorVariant:o,icon:e=null,isLoading:i=!1,size:a="medium",src:P,testId:p="cf-ui-avatar",tooltipProps:d,variant:b="user"}=s,k=N(s,["alt","className","colorVariant","icon","isLoading","size","src","testId","tooltipProps","variant"]);let C=!i&&!P,l=$({isFallback:C,size:a,variant:b,colorVariant:o}),R=f(a),T=n__default.default.createElement("div",g({className:emotion.cx(l.root,t,{[l.imageContainer]:e!==null,[l.isMuted]:o==="muted",[l.colorBorder]:!!o}),"data-test-id":p,ref:x},k),C?n__default.default.createElement("div",{className:l.fallback,"data-test-id":`${p}-fallback`}):n__default.default.createElement(f36Image.Image,{alt:r,className:l.image,height:R,src:P,width:R}),e!==null&&n__default.default.createElement("span",{className:l.overlayIcon},e));return d?n__default.default.createElement(f36Tooltip.Tooltip,V(g({},d),{usePortal:!0}),T):T}var W=n.forwardRef(J);var B=r=>({groupSpaced:emotion.css({gap:c__default.default.spacing2Xs}),groupStacked:emotion.css({gap:0,"> :not(:first-child)":{marginLeft:`-${c__default.default.spacing2Xs}`}}),avatarStacked:emotion.css({position:"relative",boxShadow:`0px 0px 0px 1px ${c__default.default.colorWhite}`}),moreAvatarsBtn:emotion.css({cursor:"pointer",backgroundColor:c__default.default.colorWhite,color:c__default.default.gray600,fontSize:c__default.default.fontSizeS,border:"none",boxShadow:`0px 0px 0px 1px ${c__default.default.gray200} inset`,borderRadius:"99999999em",height:f(r),width:f(r),overflow:"hidden",zIndex:0}),moreAvatarsItem:emotion.css({cursor:"default"})});function U({children:r,className:t,maxVisibleChildren:o=3,size:e="medium",testId:i="cf-ui-avatar-group",variant:a="spaced"},P){let p=B(e),d=n__default.default.Children.toArray(r),b=d.length>o?o-1:o,k=d.slice(0,b),x=d.slice(b);return n__default.default.createElement(f36Core.Stack,{flexDirection:"row",testId:i,ref:P,className:emotion.cx(t,{[p.groupStacked]:a==="stacked",[p.groupSpaced]:a==="spaced"})},k.map((u,s)=>{let C=k.length-s;return n__default.default.cloneElement(u,{key:`avatar-rendered-${s}`,size:e,className:emotion.cx(u.props.className,{[p.avatarStacked]:a==="stacked"}),style:{zIndex:C}})}),x.length>0&&n__default.default.createElement(f36Menu.Menu,{placement:"bottom-end"},n__default.default.createElement(f36Menu.Menu.Trigger,null,n__default.default.createElement("button",{type:"button",className:emotion.cx({[p.avatarStacked]:a==="stacked"},p.moreAvatarsBtn)},"+",x.length)),n__default.default.createElement(f36Menu.Menu.List,null,x.map((u,s)=>n__default.default.createElement(f36Menu.Menu.Item,{className:p.moreAvatarsItem,key:`avatar-${s}`},n__default.default.cloneElement(u,{key:`avatar-menuitem-${s}`,size:"tiny",tooltipProps:void 0}),u.props.alt)))))}var F=n.forwardRef(U);
 
@@ -19,0 +19,0 @@ exports.Avatar = W;

package.json

 {
   "name": "@contentful/f36-avatar",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.11",
   "description": "Forma 36: Avatar component",
@@ -9,7 +9,7 @@ "scripts": {
   "dependencies": {
-    "@contentful/f36-core": "^4.52.0",
+    "@contentful/f36-core": "^4.53.0",
     "@contentful/f36-image": "^4.0.0-alpha.0",
-    "@contentful/f36-menu": "^4.52.0",
+    "@contentful/f36-menu": "^4.53.0",
     "@contentful/f36-tokens": "^4.0.0",
-    "@contentful/f36-tooltip": "^4.52.0",
+    "@contentful/f36-tooltip": "^4.53.0",
     "emotion": "^10.0.17"
@@ -16,0 +16,0 @@ },

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

42790

increased by0.05%

Dependency changes

• Updated@contentful/f36-core@^4.53.0

• Updated@contentful/f36-menu@^4.53.0

• Updated@contentful/f36-tooltip@^4.53.0