@primer/components 0.0.0-2021103222654 → 0.0.0-202110322387

package/dist/browser.umd.js

@@ -1775,6 +1775,7 @@
 `;ad.displayName="SubNav.Link",rd.displayName="SubNav.Links";var od=Object.assign(td,{Link:ad,Links:rd});const nd=i.default.div`
   margin-top: 0;
   border-bottom: 1px solid ${xt("colors.border.default")};
+  ${yt}
   ${Kt}
 `,id=i.default.nav`
   display: flex;
@@ -1804,6 +1805,7 @@
     background-color: ${xt("colors.canvas.default")};
   }
 
+  ${yt};
   ${Kt};
 `;dd.displayName="TabNav.Link";var sd=Object.assign(ld,{Link:dd}),cd=$(U,C,E,S,z,I,O,P,N,G,ae,oe,ne),fd=new RegExp("^("+cd.propNames.join("|")+")$");const ud={small:"16px",medium:"20px",large:"24px",extralarge:"32px"},gd="medium",pd=({as:e="span",onClick:t,onFocus:r,tabIndex:a=-1})=>Boolean(r||t||a>-1||["a","button"].includes(e)),bd=re({prop:"size",variants:{small:{fontSize:0,height:ud.small,lineHeight:ud.small,paddingLeft:1,paddingRight:1,paddingTop:0,paddingBottom:0},medium:{fontSize:0,height:ud.medium,lineHeight:ud.medium,paddingLeft:2,paddingRight:2,paddingTop:0,paddingBottom:0},large:{fontSize:0,height:ud.large,lineHeight:ud.large,paddingLeft:2,paddingRight:2,paddingTop:0,paddingBottom:0},extralarge:{fontSize:1,height:ud.extralarge,lineHeight:ud.extralarge,paddingLeft:3,paddingRight:3,paddingTop:0,paddingBottom:0}}}),md=i.default.span.attrs((({text:e,onRemove:t,onKeyDown:r})=>({onKeyDown:e=>{r&&r(e),"Backspace"!==e.key&&"Delete"!==e.key||!t||t()},"aria-label":t?`${e}, press backspace or delete to remove`:void 0})))`
   align-items: center;
@@ -1906,13 +1908,13 @@
   line-height: 0;
 
   ${e=>{switch(e.size){case"large":case"extralarge":return r.css(["margin-right:",";"],xt("space.2"));default:return r.css(["margin-right:",";"],xt("space.1"))}}}
-`,Td=t.forwardRef(((e,t)=>{const{as:r,onRemove:a,id:o,leadingVisual:i,text:l,size:d,hideRemoveButton:s,href:c,onClick:f,...u}=e,g=pd(e)&&Boolean(a)&&!s,p={as:r,href:c,onClick:f};return n.default.createElement($d,Tt({onRemove:a,hideRemoveButton:s||!a,id:null==o?void 0:o.toString(),text:l,size:d,isTokenInteractive:pd(e)},g?{}:p,u,{ref:t}),i?n.default.createElement(Sd,{size:d},n.default.createElement(i,null)):null,n.default.createElement(kd,g?p:{},l),!s&&a?n.default.createElement(Bd,{borderOffset:1,onClick:e=>{e.stopPropagation(),a&&a()},size:d,isParentInteractive:pd(e),"aria-hidden":g?"true":"false",sx:g?{position:"relative",zIndex:"1"}:{}}):null)}));Td.displayName="Token",Td.defaultProps={size:gd};var Ed=Td;const Cd={small:0,medium:1,large:1,extralarge:2};function zd({icon:e,contrast:r,className:a,block:o,disabled:i,theme:l,sx:d,tokens:s,onTokenRemove:c,tokenComponent:f,preventTokenWrapping:u,size:g,hideTokenRemoveButtons:p,maxHeight:b,width:m,minWidth:h,maxWidth:v,variant:x,visibleTokenCount:y,...w},B){const{onBlur:k,onFocus:$,onKeyDown:S,...T}=function(e){var t={};for(var r in e)fd.test(r)||(t[r]=e[r]);return t}(w),E=yr(B),C=Oa(t.useRef(null),E),[z,R]=t.useState(),[N,A]=t.useState(Boolean(y)),{containerRef:I}=za({focusOutBehavior:"wrap",bindKeys:Er.ArrowHorizontal|Er.HomeAndEnd,focusableElementFilter:e=>!e.getAttributeNames().includes("aria-hidden"),getNextFocusable:e=>{var t;if(!z&&0!==z)return;let r=z+1;return"next"===e&&(r+=1),"previous"===e&&(r-=1),r>s.length||r<1?C.current||void 0:null===(t=I.current)||void 0===t?void 0:t.children[r]}},[z]),L=e=>{c(e),setTimeout((()=>{var e,t;const r=null===(e=I.current)||void 0===e?void 0:e.children[z||0],a=r&&pr(r)?r:Array.from((null===(t=I.current)||void 0===t?void 0:t.children)||[]).find((e=>pr(e)));var o;a?a.focus():null===(o=E.current)||void 0===o||o.focus()}),0)},O=()=>{R(void 0),setTimeout((()=>{var e;null!==(e=I.current)&&void 0!==e&&e.contains(document.activeElement)||!y||A(!0)}),0)},M=e=>{var t;"Escape"===e.key&&(null===(t=E.current)||void 0===t||t.focus())},P=e=>{e.stopPropagation()},H=N?s.slice(0,y):s;return n.default.createElement(Zo,{block:o,className:a,contrast:r,disabled:i,hasIcon:!!e,theme:l,width:m,minWidth:h,maxWidth:v,variant:x,onClick:()=>{var e;null===(e=C.current)||void 0===e||e.focus()},sx:{...o?{display:"flex",width:"100%"}:{},...b?{maxHeight:b,overflow:"auto"}:{},...u?{overflow:"auto"}:{},...d}},n.default.createElement(qt,{ref:I,display:"flex",sx:{alignItems:"center",flexWrap:u?"nowrap":"wrap",marginLeft:"-0.25rem",marginBottom:"-0.25rem",flexGrow:1,"> *":{flexShrink:0,marginLeft:"0.25rem",marginBottom:"0.25rem"}}},n.default.createElement(qt,{sx:{order:1,flexGrow:1}},e&&n.default.createElement(e,{className:"TextInput-icon"}),n.default.createElement(Yo,Tt({ref:C,disabled:i,onFocus:e=>{$&&$(e),R(void 0),y&&A(!1)},onBlur:e=>{k&&k(e),setTimeout((()=>{var e;null!==(e=I.current)&&void 0!==e&&e.contains(document.activeElement)||!y||A(!0)}),0)},onKeyDown:e=>{var t;if(S&&S(e),null!==(t=E.current)&&void 0!==t&&t.value)return;const r=s[s.length-1];"Backspace"===e.key&&r&&(L(r.id),E.current&&(E.current.value=`${r.text} `),setTimeout((()=>{var e;null===(e=E.current)||void 0===e||e.select()}),0))},type:"text",sx:{height:"100%"}},T))),f?H.map((({id:e,...t},r)=>{return n.default.createElement(f,Tt({key:e,onFocus:(a=r,()=>{R(a)}),onBlur:O,onKeyUp:M,onClick:P,isSelected:z===r,onRemove:()=>{L(e)},hideRemoveButton:p,size:g,tabIndex:0},t));var a})):null,N?n.default.createElement(jn,{color:"fg.muted",fontSize:g&&Cd[g]},"+",s.length-H.length):null))}zd.displayName="TextInputWithTokensInnerComponent";const Rd=n.default.forwardRef(zd);Rd.defaultProps={tokenComponent:Ed,size:"extralarge",hideTokenRemoveButtons:!1,preventTokenWrapping:!1},Rd.displayName="TextInputWithTokens";var Nd=Rd;const Ad=i.default(qt)`
+`,Td=t.forwardRef(((e,t)=>{const{as:r,onRemove:a,id:o,leadingVisual:i,text:l,size:d,hideRemoveButton:s,href:c,onClick:f,...u}=e,g=pd(e)&&Boolean(a)&&!s,p={as:r,href:c,onClick:f};return n.default.createElement($d,Tt({onRemove:a,hideRemoveButton:s||!a,id:null==o?void 0:o.toString(),text:l,size:d,isTokenInteractive:pd(e)},g?{}:p,u,{ref:t}),i?n.default.createElement(Sd,{size:d},n.default.createElement(i,null)):null,n.default.createElement(kd,g?p:{},l),!s&&a?n.default.createElement(Bd,{borderOffset:1,onClick:e=>{e.stopPropagation(),a&&a()},size:d,isParentInteractive:pd(e),"aria-hidden":g?"true":"false",sx:g?{position:"relative",zIndex:"1"}:{}}):null)}));Td.displayName="Token",Td.defaultProps={size:gd};var Ed=Td;const Cd={small:0,medium:1,large:1,extralarge:2};function zd({icon:e,contrast:r,className:a,block:o,disabled:i,theme:l,sx:d,tokens:s,onTokenRemove:c,tokenComponent:f,preventTokenWrapping:u,size:g,hideTokenRemoveButtons:p,maxHeight:b,width:m,minWidth:h,maxWidth:v,variant:x,visibleTokenCount:y,...w},B){const{onBlur:k,onFocus:$,onKeyDown:S,...T}=function(e){var t={};for(var r in e)fd.test(r)||(t[r]=e[r]);return t}(w),E=yr(B),C=Oa(t.useRef(null),E),[z,R]=t.useState(),[N,A]=t.useState(Boolean(y)),{containerRef:I}=za({focusOutBehavior:"wrap",bindKeys:Er.ArrowHorizontal|Er.HomeAndEnd,focusableElementFilter:e=>!e.getAttributeNames().includes("aria-hidden"),getNextFocusable:e=>{var t;if(!z&&0!==z)return;let r=z+1;return"next"===e&&(r+=1),"previous"===e&&(r-=1),r>s.length||r<1?C.current||void 0:null===(t=I.current)||void 0===t?void 0:t.children[r]}},[z]),L=e=>{c(e),setTimeout((()=>{var e,t;const r=null===(e=I.current)||void 0===e?void 0:e.children[z||0],a=r&&pr(r)?r:Array.from((null===(t=I.current)||void 0===t?void 0:t.children)||[]).find((e=>pr(e)));var o;a?a.focus():null===(o=E.current)||void 0===o||o.focus()}),0)},O=()=>{R(void 0),setTimeout((()=>{var e;null!==(e=I.current)&&void 0!==e&&e.contains(document.activeElement)||!y||A(!0)}),0)},M=e=>{var t;"Escape"===e.key&&(null===(t=E.current)||void 0===t||t.focus())},P=e=>{e.stopPropagation()},H=N?s.slice(0,y):s;return n.default.createElement(Zo,{block:o,className:a,contrast:r,disabled:i,hasIcon:!!e,theme:l,width:m,minWidth:h,maxWidth:v,variant:x,onClick:()=>{var e;null===(e=C.current)||void 0===e||e.focus()},sx:{...o?{display:"flex",width:"100%"}:{},...b?{maxHeight:b,overflow:"auto"}:{},...u?{overflow:"auto"}:{},...d}},n.default.createElement(qt,{ref:I,display:"flex",sx:{alignItems:"center",flexWrap:u?"nowrap":"wrap",marginLeft:"-0.25rem",marginBottom:"-0.25rem",flexGrow:1,"> *":{flexShrink:0,marginLeft:"0.25rem",marginBottom:"0.25rem"}}},n.default.createElement(qt,{sx:{order:1,flexGrow:1}},e&&n.default.createElement(e,{className:"TextInput-icon"}),n.default.createElement(Yo,Tt({ref:C,disabled:i,onFocus:e=>{$&&$(e),R(void 0),y&&A(!1)},onBlur:e=>{k&&k(e),setTimeout((()=>{var e;null!==(e=I.current)&&void 0!==e&&e.contains(document.activeElement)||!y||A(!0)}),0)},onKeyDown:e=>{var t;if(S&&S(e),null!==(t=E.current)&&void 0!==t&&t.value)return;const r=s[s.length-1];"Backspace"===e.key&&r&&(L(r.id),E.current&&(E.current.value=`${r.text} `),setTimeout((()=>{var e;null===(e=E.current)||void 0===e||e.select()}),0))},type:"text",sx:{height:"100%"}},T))),f?H.map((({id:e,...t},r)=>{return n.default.createElement(f,Tt({key:e,onFocus:(a=r,()=>{R(a)}),onBlur:O,onKeyUp:M,onClick:P,isSelected:z===r,onRemove:()=>{L(e)},hideRemoveButton:p,size:g,tabIndex:0},t));var a})):null,N?n.default.createElement(jn,{color:"fg.muted",fontSize:g&&Cd[g]},"+",s.length-H.length):null))}zd.displayName="TextInputWithTokensInnerComponent";const Rd=n.default.forwardRef(zd);Rd.defaultProps={tokenComponent:Ed,size:"extralarge",hideTokenRemoveButtons:!1,preventTokenWrapping:!1},Rd.displayName="TextInputWithTokens";var Nd=Rd;const Ad=i.default.div`
   display: flex;
   flex-direction: column;
   ${e=>e.clipSidebar&&r.css([".Timeline-Item:first-child{padding-top:0;}.Timeline-Item:last-child{padding-bottom:0;}"])}
 
   ${Kt};
-`,Id=i.default(qt).attrs((e=>({className:Xo("Timeline-Item",e.className)})))`
+`,Id=i.default.div.attrs((e=>({className:Xo("Timeline-Item",e.className)})))`
   display: flex;
   position: relative;
   padding: ${xt("space.3")} 0;
@@ -1931,9 +1933,8 @@
 
   ${e=>e.condensed&&r.css(["padding-top:",";padding-bottom:0;&:last-child{padding-bottom:",";}.TimelineItem-Badge{height:16px;margin-top:",";margin-bottom:",";color:",";background-color:",";border:0;}"],xt("space.1"),xt("space.3"),xt("space.2"),xt("space.2"),xt("colors.fg.muted"),xt("colors.canvas.default"))}
 
-  ${yt};
   ${Kt};
-`,Ld=e=>n.default.createElement(qt,{position:"relative",zIndex:1},n.default.createElement(qt,Tt({display:"flex",className:Xo(e.className,"TimelineItem-Badge"),flexShrink:0,borderRadius:"50%",borderWidth:"2px",borderStyle:"solid",borderColor:"canvas.default",overflow:"hidden",color:"fg.muted",bg:"timeline.badgeBg",width:"32px",height:"32px",mr:2,ml:"-15px",alignItems:"center",justifyContent:"center"},e),e.children));Ld.displayName="TimelineBadge";const Od=i.default(qt)`
+`,Ld=e=>n.default.createElement(qt,{position:"relative",zIndex:1},n.default.createElement(qt,{display:"flex",className:"TimelineItem-Badge",flexShrink:0,borderRadius:"50%",borderWidth:"2px",borderStyle:"solid",borderColor:"canvas.default",overflow:"hidden",color:"fg.muted",bg:"timeline.badgeBg",width:"32px",height:"32px",mr:2,ml:"-15px",alignItems:"center",justifyContent:"center",sx:e.sx},e.children));Ld.displayName="TimelineBadge";const Od=i.default.div`
   min-width: 0;
   max-width: 100%;
   margin-top: ${xt("space.1")};
@@ -1941,7 +1942,7 @@
   flex: auto;
   font-size: ${xt("fontSizes.1")};
   ${Kt};
-`,Md=i.default(qt)`
+`,Md=i.default.div`
   position: relative
   z-index: 1;
   height: 24px;