@contentful/f36-header - npm Package Compare versions

Comparing version 4.77.2 to 4.77.3

dist/esm/index.js

@@ -9,3 +9,3 @@ import n, { forwardRef, isValidElement, Fragment } from 'react';
 
-var C=Object.defineProperty,X=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var S=(e,t,o)=>t in e?C(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,i=(e,t)=>{for(var o in t||(t={}))H.call(t,o)&&S(e,o,t[o]);if(x)for(var o of x(t))b.call(t,o)&&S(e,o,t[o]);return e},N=(e,t)=>X(e,M(t));var c=(e,t)=>{var o={};for(var r in e)H.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&x)for(var r of x(e))t.indexOf(r)<0&&b.call(e,r)&&(o[r]=e[r]);return o};function $(r,o){var m=r,{onClick:e}=m,t=c(m,["onClick"]);return n.createElement(IconButton,N(i({},t),{"aria-label":"Go back",icon:n.createElement(ArrowBackwardIcon,{variant:"muted"}),onClick:e,size:"small",ref:o,variant:"transparent"}))}var _=forwardRef($);var G=()=>({root:css({alignItems:"center",display:"flex"}),separator:css({height:a.spacingXl,position:"relative",width:a.spacingXs,"&::after":{backgroundColor:a.gray200,content:'""',display:"block",height:"16px",position:"absolute",left:"50%",top:"50%",width:"1px",transform:"translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 18deg)"}})});var J="div";function K(l,s){var y=l,{children:e,className:t,segments:o,separator:r,testId:m="cf-ui-segmentation"}=y,f=c(y,["children","className","segments","separator","testId"]);let E=G(),P=r!=null?r:n.createElement("div",{className:E.separator}),T=(u,p)=>n.createElement(Fragment,{key:p},p>0&&P,u);return n.createElement(Box,i({as:J,className:cx(E.root,t),ref:s,testId:m},f),e?n.Children.toArray(e).map(T):o.map(T))}var h=forwardRef(K);var R=()=>({button:css({color:a.gray500,fontSize:a.fontSizeL,fontWeight:a.fontWeightNormal,maxWidth:"none",paddingLeft:a.spacingXs,paddingRight:a.spacingXs})});var L=o=>{var r=o,{breadcrumbs:e}=r,t=c(r,["breadcrumbs"]);let m=R(),f=e.map(s=>{let l=s.onClick;return n.createElement(Button,{as:"a",className:m.button,href:s.url,key:s.url,size:"small",variant:"transparent",onClick:l},s.content)});return n.createElement(h,i({segments:f},t))};var w=56;var F=()=>({actions:css({flexGrow:0,flexShrink:1,flexBasis:"25%",textAlign:"right"}),context:css({flexGrow:0,flexShrink:1,flexBasis:"25%"}),filters:css({display:"flex",flexGrow:1,flexShrink:1,flexBasis:"50%"}),root:e=>css({background:a.gray100,height:`${56}px`,padding:e?`${a.spacingXs} ${a.spacingS}`:a.spacingS}),separator:css({backgroundColor:a.gray200,height:"16px",margin:`0 ${a.spacingS} 0 ${a.spacingXs}`,transform:"rotate3d(0, 0, 1, 18deg)",width:"1px"}),title:css({margin:`${a.spacing2Xs} 0`,"&:not(:first-child)":{marginLeft:a.spacingXs}}),noWrap:css({textWrap:"nowrap","&:not(:first-child)":{marginLeft:a.spacingXs}})});var re="header";function ne(T,P){var u=T,{actions:e,as:t,backButtonProps:o,breadcrumbs:r,className:m,filters:f,metadata:s,title:l,withBackButton:y}=u,E=c(u,["actions","as","backButtonProps","breadcrumbs","className","filters","metadata","title","withBackButton"]);let p=F();return n.createElement(Flex,i({alignItems:"center",as:re,gap:"spacingM",className:cx(p.root(!!f),m),ref:P},E),n.createElement("div",{className:p.context},n.createElement(Flex,{alignItems:"center",gap:"spacingXs"},n.createElement(h,null,y&&n.createElement(_,i({},o)),r&&n.createElement(L,{breadcrumbs:r}),l&&n.createElement("div",{className:p.noWrap},isValidElement(l)?l:n.createElement(Subheading,{as:"h1",className:p.title},l))),s&&n.createElement(Flex,{alignItems:"center",gap:"spacing2Xs"},s))),n.createElement("div",{className:p.filters},f),n.createElement("div",{className:p.actions},e))}var ae=forwardRef(ne);
+var C=Object.defineProperty,X=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var S=(e,t,o)=>t in e?C(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,m=(e,t)=>{for(var o in t||(t={}))H.call(t,o)&&S(e,o,t[o]);if(x)for(var o of x(t))b.call(t,o)&&S(e,o,t[o]);return e},N=(e,t)=>X(e,M(t));var c=(e,t)=>{var o={};for(var r in e)H.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&x)for(var r of x(e))t.indexOf(r)<0&&b.call(e,r)&&(o[r]=e[r]);return o};function $(f,r){var s=f,{onClick:e,"aria-label":t="Go back"}=s,o=c(s,["onClick","aria-label"]);return n.createElement(IconButton,N(m({},o),{"aria-label":t,icon:n.createElement(ArrowBackwardIcon,{variant:"muted"}),onClick:e,size:"small",ref:r,variant:"transparent"}))}var _=forwardRef($);var G=()=>({root:css({alignItems:"center",display:"flex"}),separator:css({height:a.spacingXl,position:"relative",width:a.spacingXs,"&::after":{backgroundColor:a.gray200,content:'""',display:"block",height:"16px",position:"absolute",left:"50%",top:"50%",width:"1px",transform:"translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 18deg)"}})});var J="div";function K(l,p){var y=l,{children:e,className:t,segments:o,separator:r,testId:f="cf-ui-segmentation"}=y,s=c(y,["children","className","segments","separator","testId"]);let E=G(),P=r!=null?r:n.createElement("div",{className:E.separator}),T=(u,i)=>n.createElement(Fragment,{key:i},i>0&&P,u);return n.createElement(Box,m({as:J,className:cx(E.root,t),ref:p,testId:f},s),e?n.Children.toArray(e).map(T):o.map(T))}var h=forwardRef(K);var R=()=>({button:css({color:a.gray500,fontSize:a.fontSizeL,fontWeight:a.fontWeightNormal,maxWidth:"none",paddingLeft:a.spacingXs,paddingRight:a.spacingXs})});var L=o=>{var r=o,{breadcrumbs:e}=r,t=c(r,["breadcrumbs"]);let f=R(),s=e.map(p=>{let l=p.onClick;return n.createElement(Button,{as:"a",className:f.button,href:p.url,key:p.url,size:"small",variant:"transparent",onClick:l},p.content)});return n.createElement(h,m({segments:s},t))};var w=56;var F=()=>({actions:css({flexGrow:0,flexShrink:1,flexBasis:"25%",textAlign:"right"}),context:css({flexGrow:0,flexShrink:1,flexBasis:"25%"}),filters:css({display:"flex",flexGrow:1,flexShrink:1,flexBasis:"50%"}),root:e=>css({background:a.gray100,height:`${56}px`,padding:e?`${a.spacingXs} ${a.spacingS}`:a.spacingS}),separator:css({backgroundColor:a.gray200,height:"16px",margin:`0 ${a.spacingS} 0 ${a.spacingXs}`,transform:"rotate3d(0, 0, 1, 18deg)",width:"1px"}),title:css({margin:`${a.spacing2Xs} 0`,"&:not(:first-child)":{marginLeft:a.spacingXs}}),noWrap:css({textWrap:"nowrap","&:not(:first-child)":{marginLeft:a.spacingXs}})});var re="header";function ne(T,P){var u=T,{actions:e,as:t,backButtonProps:o,breadcrumbs:r,className:f,filters:s,metadata:p,title:l,withBackButton:y}=u,E=c(u,["actions","as","backButtonProps","breadcrumbs","className","filters","metadata","title","withBackButton"]);let i=F();return n.createElement(Flex,m({alignItems:"center",as:re,gap:"spacingM",className:cx(i.root(!!s),f),ref:P},E),n.createElement("div",{className:i.context},n.createElement(Flex,{alignItems:"center",gap:"spacingXs"},n.createElement(h,null,y&&n.createElement(_,m({},o)),r&&n.createElement(L,{breadcrumbs:r}),l&&n.createElement("div",{className:i.noWrap},isValidElement(l)?l:n.createElement(Subheading,{as:"h1",className:i.title},l))),p&&n.createElement(Flex,{alignItems:"center",gap:"spacing2Xs"},p))),n.createElement("div",{className:i.filters},s),n.createElement("div",{className:i.actions},e))}var ae=forwardRef(ne);
 
@@ -12,0 +12,0 @@ export { w as HEADER_HEIGHT, ae as Header };

dist/index.d.ts

@@ -5,3 +5,5 @@ import { MouseEventHandler, ElementType, ReactElement, ReactNode } from 'react';
 
-declare type BackButtonProps = Omit<Partial<IconButtonProps>, 'aria-label' | 'children' | 'icon' | 'variant' | 'size'>;
+declare type BackButtonProps = Omit<Partial<IconButtonProps>, 'children' | 'icon' | 'variant' | 'size'> & {
+    'aria-label'?: string;
+};
 
@@ -8,0 +10,0 @@ declare type BreadcrumbProps = {

dist/index.js

@@ -16,3 +16,3 @@ 'use strict';
 
-var C=Object.defineProperty,X=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var S=(e,t,o)=>t in e?C(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,i=(e,t)=>{for(var o in t||(t={}))H.call(t,o)&&S(e,o,t[o]);if(x)for(var o of x(t))b.call(t,o)&&S(e,o,t[o]);return e},N=(e,t)=>X(e,M(t));var c=(e,t)=>{var o={};for(var r in e)H.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&x)for(var r of x(e))t.indexOf(r)<0&&b.call(e,r)&&(o[r]=e[r]);return o};function $(r,o){var m=r,{onClick:e}=m,t=c(m,["onClick"]);return n__default.default.createElement(f36Button.IconButton,N(i({},t),{"aria-label":"Go back",icon:n__default.default.createElement(f36Icons.ArrowBackwardIcon,{variant:"muted"}),onClick:e,size:"small",ref:o,variant:"transparent"}))}var _=n.forwardRef($);var G=()=>({root:emotion.css({alignItems:"center",display:"flex"}),separator:emotion.css({height:a__default.default.spacingXl,position:"relative",width:a__default.default.spacingXs,"&::after":{backgroundColor:a__default.default.gray200,content:'""',display:"block",height:"16px",position:"absolute",left:"50%",top:"50%",width:"1px",transform:"translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 18deg)"}})});var J="div";function K(l,s){var y=l,{children:e,className:t,segments:o,separator:r,testId:m="cf-ui-segmentation"}=y,f=c(y,["children","className","segments","separator","testId"]);let E=G(),P=r!=null?r:n__default.default.createElement("div",{className:E.separator}),T=(u,p)=>n__default.default.createElement(n.Fragment,{key:p},p>0&&P,u);return n__default.default.createElement(f36Core.Box,i({as:J,className:emotion.cx(E.root,t),ref:s,testId:m},f),e?n__default.default.Children.toArray(e).map(T):o.map(T))}var h=n.forwardRef(K);var R=()=>({button:emotion.css({color:a__default.default.gray500,fontSize:a__default.default.fontSizeL,fontWeight:a__default.default.fontWeightNormal,maxWidth:"none",paddingLeft:a__default.default.spacingXs,paddingRight:a__default.default.spacingXs})});var L=o=>{var r=o,{breadcrumbs:e}=r,t=c(r,["breadcrumbs"]);let m=R(),f=e.map(s=>{let l=s.onClick;return n__default.default.createElement(f36Button.Button,{as:"a",className:m.button,href:s.url,key:s.url,size:"small",variant:"transparent",onClick:l},s.content)});return n__default.default.createElement(h,i({segments:f},t))};var w=56;var F=()=>({actions:emotion.css({flexGrow:0,flexShrink:1,flexBasis:"25%",textAlign:"right"}),context:emotion.css({flexGrow:0,flexShrink:1,flexBasis:"25%"}),filters:emotion.css({display:"flex",flexGrow:1,flexShrink:1,flexBasis:"50%"}),root:e=>emotion.css({background:a__default.default.gray100,height:`${56}px`,padding:e?`${a__default.default.spacingXs} ${a__default.default.spacingS}`:a__default.default.spacingS}),separator:emotion.css({backgroundColor:a__default.default.gray200,height:"16px",margin:`0 ${a__default.default.spacingS} 0 ${a__default.default.spacingXs}`,transform:"rotate3d(0, 0, 1, 18deg)",width:"1px"}),title:emotion.css({margin:`${a__default.default.spacing2Xs} 0`,"&:not(:first-child)":{marginLeft:a__default.default.spacingXs}}),noWrap:emotion.css({textWrap:"nowrap","&:not(:first-child)":{marginLeft:a__default.default.spacingXs}})});var re="header";function ne(T,P){var u=T,{actions:e,as:t,backButtonProps:o,breadcrumbs:r,className:m,filters:f,metadata:s,title:l,withBackButton:y}=u,E=c(u,["actions","as","backButtonProps","breadcrumbs","className","filters","metadata","title","withBackButton"]);let p=F();return n__default.default.createElement(f36Core.Flex,i({alignItems:"center",as:re,gap:"spacingM",className:emotion.cx(p.root(!!f),m),ref:P},E),n__default.default.createElement("div",{className:p.context},n__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},n__default.default.createElement(h,null,y&&n__default.default.createElement(_,i({},o)),r&&n__default.default.createElement(L,{breadcrumbs:r}),l&&n__default.default.createElement("div",{className:p.noWrap},n.isValidElement(l)?l:n__default.default.createElement(f36Typography.Subheading,{as:"h1",className:p.title},l))),s&&n__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacing2Xs"},s))),n__default.default.createElement("div",{className:p.filters},f),n__default.default.createElement("div",{className:p.actions},e))}var ae=n.forwardRef(ne);
+var C=Object.defineProperty,X=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var S=(e,t,o)=>t in e?C(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,m=(e,t)=>{for(var o in t||(t={}))H.call(t,o)&&S(e,o,t[o]);if(x)for(var o of x(t))b.call(t,o)&&S(e,o,t[o]);return e},N=(e,t)=>X(e,M(t));var c=(e,t)=>{var o={};for(var r in e)H.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&x)for(var r of x(e))t.indexOf(r)<0&&b.call(e,r)&&(o[r]=e[r]);return o};function $(f,r){var s=f,{onClick:e,"aria-label":t="Go back"}=s,o=c(s,["onClick","aria-label"]);return n__default.default.createElement(f36Button.IconButton,N(m({},o),{"aria-label":t,icon:n__default.default.createElement(f36Icons.ArrowBackwardIcon,{variant:"muted"}),onClick:e,size:"small",ref:r,variant:"transparent"}))}var _=n.forwardRef($);var G=()=>({root:emotion.css({alignItems:"center",display:"flex"}),separator:emotion.css({height:a__default.default.spacingXl,position:"relative",width:a__default.default.spacingXs,"&::after":{backgroundColor:a__default.default.gray200,content:'""',display:"block",height:"16px",position:"absolute",left:"50%",top:"50%",width:"1px",transform:"translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 18deg)"}})});var J="div";function K(l,p){var y=l,{children:e,className:t,segments:o,separator:r,testId:f="cf-ui-segmentation"}=y,s=c(y,["children","className","segments","separator","testId"]);let E=G(),P=r!=null?r:n__default.default.createElement("div",{className:E.separator}),T=(u,i)=>n__default.default.createElement(n.Fragment,{key:i},i>0&&P,u);return n__default.default.createElement(f36Core.Box,m({as:J,className:emotion.cx(E.root,t),ref:p,testId:f},s),e?n__default.default.Children.toArray(e).map(T):o.map(T))}var h=n.forwardRef(K);var R=()=>({button:emotion.css({color:a__default.default.gray500,fontSize:a__default.default.fontSizeL,fontWeight:a__default.default.fontWeightNormal,maxWidth:"none",paddingLeft:a__default.default.spacingXs,paddingRight:a__default.default.spacingXs})});var L=o=>{var r=o,{breadcrumbs:e}=r,t=c(r,["breadcrumbs"]);let f=R(),s=e.map(p=>{let l=p.onClick;return n__default.default.createElement(f36Button.Button,{as:"a",className:f.button,href:p.url,key:p.url,size:"small",variant:"transparent",onClick:l},p.content)});return n__default.default.createElement(h,m({segments:s},t))};var w=56;var F=()=>({actions:emotion.css({flexGrow:0,flexShrink:1,flexBasis:"25%",textAlign:"right"}),context:emotion.css({flexGrow:0,flexShrink:1,flexBasis:"25%"}),filters:emotion.css({display:"flex",flexGrow:1,flexShrink:1,flexBasis:"50%"}),root:e=>emotion.css({background:a__default.default.gray100,height:`${56}px`,padding:e?`${a__default.default.spacingXs} ${a__default.default.spacingS}`:a__default.default.spacingS}),separator:emotion.css({backgroundColor:a__default.default.gray200,height:"16px",margin:`0 ${a__default.default.spacingS} 0 ${a__default.default.spacingXs}`,transform:"rotate3d(0, 0, 1, 18deg)",width:"1px"}),title:emotion.css({margin:`${a__default.default.spacing2Xs} 0`,"&:not(:first-child)":{marginLeft:a__default.default.spacingXs}}),noWrap:emotion.css({textWrap:"nowrap","&:not(:first-child)":{marginLeft:a__default.default.spacingXs}})});var re="header";function ne(T,P){var u=T,{actions:e,as:t,backButtonProps:o,breadcrumbs:r,className:f,filters:s,metadata:p,title:l,withBackButton:y}=u,E=c(u,["actions","as","backButtonProps","breadcrumbs","className","filters","metadata","title","withBackButton"]);let i=F();return n__default.default.createElement(f36Core.Flex,m({alignItems:"center",as:re,gap:"spacingM",className:emotion.cx(i.root(!!s),f),ref:P},E),n__default.default.createElement("div",{className:i.context},n__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},n__default.default.createElement(h,null,y&&n__default.default.createElement(_,m({},o)),r&&n__default.default.createElement(L,{breadcrumbs:r}),l&&n__default.default.createElement("div",{className:i.noWrap},n.isValidElement(l)?l:n__default.default.createElement(f36Typography.Subheading,{as:"h1",className:i.title},l))),p&&n__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacing2Xs"},p))),n__default.default.createElement("div",{className:i.filters},s),n__default.default.createElement("div",{className:i.actions},e))}var ae=n.forwardRef(ne);
 
@@ -19,0 +19,0 @@ exports.HEADER_HEIGHT = w;

package.json

 {
   "name": "@contentful/f36-header",
-  "version": "4.77.2",
+  "version": "4.77.3",
   "description": "Forma 36: Header component",
@@ -9,7 +9,7 @@ "scripts": {
   "dependencies": {
-    "@contentful/f36-button": "^4.77.2",
-    "@contentful/f36-core": "^4.77.2",
+    "@contentful/f36-button": "^4.77.3",
+    "@contentful/f36-core": "^4.77.3",
     "@contentful/f36-icons": "^4.29.0",
     "@contentful/f36-tokens": "^4.2.0",
-    "@contentful/f36-typography": "^4.77.2",
+    "@contentful/f36-typography": "^4.77.3",
     "emotion": "^10.0.17"
@@ -16,0 +16,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

43770

increased by0.73%

Lines of code

104

increased by2.97%

Dependency changes

• Updated@contentful/f36-button@^4.77.3

• Updated@contentful/f36-core@^4.77.3

• Updated@contentful/f36-typography@^4.77.3