@primer/components 0.0.0-2021103222654 → 0.0.0-202110322387

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # @primer/components
 
-## 0.0.0-2021103222654
+## 0.0.0-202110322387
 
 ### Major Changes
 
-- [#1575](https://github.com/primer/react/pull/1575) [`aae36ea0`](https://github.com/primer/react/commit/aae36ea0da11e912cc3269298fe77991ba2c2e64) Thanks [@jfuchs](https://github.com/jfuchs)! - TabNav no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
+- [#1576](https://github.com/primer/react/pull/1576) [`b3d8f4b6`](https://github.com/primer/react/commit/b3d8f4b670336fe693de6a11d83e75e7d4df47fb) Thanks [@jfuchs](https://github.com/jfuchs)! - Timeline no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
 
 ### Minor Changes
 

package/dist/browser.esm.js

@@ -1775,6 +1775,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
 `;dd.displayName="SubNav.Link",ld.displayName="SubNav.Links";var sd=Object.assign(id,{Link:dd,Links:ld});const cd=f.div`
   margin-top: 0;
   border-bottom: 1px solid ${Nt("colors.border.default")};
+  ${It}
   ${rr}
 `,fd=f.nav`
   display: flex;
@@ -1804,6 +1805,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
     background-color: ${Nt("colors.canvas.default")};
   }
 
+  ${It};
   ${rr};
 `;ud.displayName="TabNav.Link";var pd=Object.assign(gd,{Link:ud}),bd=O(te,D,H,M,W,U,V,q,_,re,pe,be,me),md=new RegExp("^("+bd.propNames.join("|")+")$");const hd={small:"16px",medium:"20px",large:"24px",extralarge:"32px"},vd=({as:e="span",onClick:t,onFocus:r,tabIndex:o=-1})=>Boolean(r||t||o>-1||["a","button"].includes(e)),xd=ue({prop:"size",variants:{small:{fontSize:0,height:hd.small,lineHeight:hd.small,paddingLeft:1,paddingRight:1,paddingTop:0,paddingBottom:0},medium:{fontSize:0,height:hd.medium,lineHeight:hd.medium,paddingLeft:2,paddingRight:2,paddingTop:0,paddingBottom:0},large:{fontSize:0,height:hd.large,lineHeight:hd.large,paddingLeft:2,paddingRight:2,paddingTop:0,paddingBottom:0},extralarge:{fontSize:1,height:hd.extralarge,lineHeight:hd.extralarge,paddingLeft:3,paddingRight:3,paddingTop:0,paddingBottom:0}}}),yd=f.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 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
   line-height: 0;
 
   ${e=>{switch(e.size){case"large":case"extralarge":return p(["margin-right:",";"],Nt("space.2"));default:return p(["margin-right:",";"],Nt("space.1"))}}}
-`,Nd=i(((t,r)=>{const{as:o,onRemove:a,id:n,leadingVisual:i,text:l,size:d,hideRemoveButton:s,href:c,onClick:f,...g}=t,u=vd(t)&&Boolean(a)&&!s,p={as:o,href:c,onClick:f};return e.createElement(Cd,Pt({onRemove:a,hideRemoveButton:s||!a,id:null==n?void 0:n.toString(),text:l,size:d,isTokenInteractive:vd(t)},u?{}:p,g,{ref:r}),i?e.createElement(zd,{size:d},e.createElement(i,null)):null,e.createElement(Ed,u?p:{},l),!s&&a?e.createElement(Sd,{borderOffset:1,onClick:e=>{e.stopPropagation(),a&&a()},size:d,isParentInteractive:vd(t),"aria-hidden":u?"true":"false",sx:u?{position:"relative",zIndex:"1"}:{}}):null)}));Nd.displayName="Token",Nd.defaultProps={size:"medium"};var Id=Nd;const Ad={small:0,medium:1,large:1,extralarge:2};function Rd({icon:o,contrast:a,className:n,block:i,disabled:l,theme:d,sx:s,tokens:c,onTokenRemove:f,tokenComponent:g,preventTokenWrapping:u,size:p,hideTokenRemoveButtons:b,maxHeight:m,width:h,minWidth:v,maxWidth:x,variant:y,visibleTokenCount:w,...B},$){const{onBlur:k,onFocus:T,onKeyDown:S,...E}=function(e){var t={};for(var r in e)md.test(r)||(t[r]=e[r]);return t}(B),C=zr($),z=Do(r(null),C),[N,I]=t(),[A,R]=t(Boolean(w)),{containerRef:L}=Oo({focusOutBehavior:"wrap",bindKeys:Mr.ArrowHorizontal|Mr.HomeAndEnd,focusableElementFilter:e=>!e.getAttributeNames().includes("aria-hidden"),getNextFocusable:e=>{var t;if(!N&&0!==N)return;let r=N+1;return"next"===e&&(r+=1),"previous"===e&&(r-=1),r>c.length||r<1?z.current||void 0:null===(t=L.current)||void 0===t?void 0:t.children[r]}},[N]),O=e=>{f(e),setTimeout((()=>{var e,t;const r=null===(e=L.current)||void 0===e?void 0:e.children[N||0],o=r&&$r(r)?r:Array.from((null===(t=L.current)||void 0===t?void 0:t.children)||[]).find((e=>$r(e)));var a;o?o.focus():null===(a=C.current)||void 0===a||a.focus()}),0)},M=()=>{I(void 0),setTimeout((()=>{var e;null!==(e=L.current)&&void 0!==e&&e.contains(document.activeElement)||!w||R(!0)}),0)},P=e=>{var t;"Escape"===e.key&&(null===(t=C.current)||void 0===t||t.focus())},H=e=>{e.stopPropagation()},D=A?c.slice(0,w):c;return e.createElement(on,{block:i,className:n,contrast:a,disabled:l,hasIcon:!!o,theme:d,width:h,minWidth:v,maxWidth:x,variant:y,onClick:()=>{var e;null===(e=z.current)||void 0===e||e.focus()},sx:{...i?{display:"flex",width:"100%"}:{},...m?{maxHeight:m,overflow:"auto"}:{},...u?{overflow:"auto"}:{},...s}},e.createElement(or,{ref:L,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"}}},e.createElement(or,{sx:{order:1,flexGrow:1}},o&&e.createElement(o,{className:"TextInput-icon"}),e.createElement(tn,Pt({ref:z,disabled:l,onFocus:e=>{T&&T(e),I(void 0),w&&R(!1)},onBlur:e=>{k&&k(e),setTimeout((()=>{var e;null!==(e=L.current)&&void 0!==e&&e.contains(document.activeElement)||!w||R(!0)}),0)},onKeyDown:e=>{var t;if(S&&S(e),null!==(t=C.current)&&void 0!==t&&t.value)return;const r=c[c.length-1];"Backspace"===e.key&&r&&(O(r.id),C.current&&(C.current.value=`${r.text} `),setTimeout((()=>{var e;null===(e=C.current)||void 0===e||e.select()}),0))},type:"text",sx:{height:"100%"}},E))),g?D.map((({id:t,...r},o)=>{return e.createElement(g,Pt({key:t,onFocus:(a=o,()=>{I(a)}),onBlur:M,onKeyUp:P,onClick:H,isSelected:N===o,onRemove:()=>{O(t)},hideRemoveButton:b,size:p,tabIndex:0},r));var a})):null,A?e.createElement(qn,{color:"fg.muted",fontSize:p&&Ad[p]},"+",c.length-D.length):null))}Rd.displayName="TextInputWithTokensInnerComponent";const Ld=e.forwardRef(Rd);Ld.defaultProps={tokenComponent:Id,size:"extralarge",hideTokenRemoveButtons:!1,preventTokenWrapping:!1},Ld.displayName="TextInputWithTokens";var Od=Ld;const Md=f(or)`
+`,Nd=i(((t,r)=>{const{as:o,onRemove:a,id:n,leadingVisual:i,text:l,size:d,hideRemoveButton:s,href:c,onClick:f,...g}=t,u=vd(t)&&Boolean(a)&&!s,p={as:o,href:c,onClick:f};return e.createElement(Cd,Pt({onRemove:a,hideRemoveButton:s||!a,id:null==n?void 0:n.toString(),text:l,size:d,isTokenInteractive:vd(t)},u?{}:p,g,{ref:r}),i?e.createElement(zd,{size:d},e.createElement(i,null)):null,e.createElement(Ed,u?p:{},l),!s&&a?e.createElement(Sd,{borderOffset:1,onClick:e=>{e.stopPropagation(),a&&a()},size:d,isParentInteractive:vd(t),"aria-hidden":u?"true":"false",sx:u?{position:"relative",zIndex:"1"}:{}}):null)}));Nd.displayName="Token",Nd.defaultProps={size:"medium"};var Id=Nd;const Ad={small:0,medium:1,large:1,extralarge:2};function Rd({icon:o,contrast:a,className:n,block:i,disabled:l,theme:d,sx:s,tokens:c,onTokenRemove:f,tokenComponent:g,preventTokenWrapping:u,size:p,hideTokenRemoveButtons:b,maxHeight:m,width:h,minWidth:v,maxWidth:x,variant:y,visibleTokenCount:w,...B},$){const{onBlur:k,onFocus:T,onKeyDown:S,...E}=function(e){var t={};for(var r in e)md.test(r)||(t[r]=e[r]);return t}(B),C=zr($),z=Do(r(null),C),[N,I]=t(),[A,R]=t(Boolean(w)),{containerRef:L}=Oo({focusOutBehavior:"wrap",bindKeys:Mr.ArrowHorizontal|Mr.HomeAndEnd,focusableElementFilter:e=>!e.getAttributeNames().includes("aria-hidden"),getNextFocusable:e=>{var t;if(!N&&0!==N)return;let r=N+1;return"next"===e&&(r+=1),"previous"===e&&(r-=1),r>c.length||r<1?z.current||void 0:null===(t=L.current)||void 0===t?void 0:t.children[r]}},[N]),O=e=>{f(e),setTimeout((()=>{var e,t;const r=null===(e=L.current)||void 0===e?void 0:e.children[N||0],o=r&&$r(r)?r:Array.from((null===(t=L.current)||void 0===t?void 0:t.children)||[]).find((e=>$r(e)));var a;o?o.focus():null===(a=C.current)||void 0===a||a.focus()}),0)},M=()=>{I(void 0),setTimeout((()=>{var e;null!==(e=L.current)&&void 0!==e&&e.contains(document.activeElement)||!w||R(!0)}),0)},P=e=>{var t;"Escape"===e.key&&(null===(t=C.current)||void 0===t||t.focus())},H=e=>{e.stopPropagation()},D=A?c.slice(0,w):c;return e.createElement(on,{block:i,className:n,contrast:a,disabled:l,hasIcon:!!o,theme:d,width:h,minWidth:v,maxWidth:x,variant:y,onClick:()=>{var e;null===(e=z.current)||void 0===e||e.focus()},sx:{...i?{display:"flex",width:"100%"}:{},...m?{maxHeight:m,overflow:"auto"}:{},...u?{overflow:"auto"}:{},...s}},e.createElement(or,{ref:L,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"}}},e.createElement(or,{sx:{order:1,flexGrow:1}},o&&e.createElement(o,{className:"TextInput-icon"}),e.createElement(tn,Pt({ref:z,disabled:l,onFocus:e=>{T&&T(e),I(void 0),w&&R(!1)},onBlur:e=>{k&&k(e),setTimeout((()=>{var e;null!==(e=L.current)&&void 0!==e&&e.contains(document.activeElement)||!w||R(!0)}),0)},onKeyDown:e=>{var t;if(S&&S(e),null!==(t=C.current)&&void 0!==t&&t.value)return;const r=c[c.length-1];"Backspace"===e.key&&r&&(O(r.id),C.current&&(C.current.value=`${r.text} `),setTimeout((()=>{var e;null===(e=C.current)||void 0===e||e.select()}),0))},type:"text",sx:{height:"100%"}},E))),g?D.map((({id:t,...r},o)=>{return e.createElement(g,Pt({key:t,onFocus:(a=o,()=>{I(a)}),onBlur:M,onKeyUp:P,onClick:H,isSelected:N===o,onRemove:()=>{O(t)},hideRemoveButton:b,size:p,tabIndex:0},r));var a})):null,A?e.createElement(qn,{color:"fg.muted",fontSize:p&&Ad[p]},"+",c.length-D.length):null))}Rd.displayName="TextInputWithTokensInnerComponent";const Ld=e.forwardRef(Rd);Ld.defaultProps={tokenComponent:Id,size:"extralarge",hideTokenRemoveButtons:!1,preventTokenWrapping:!1},Ld.displayName="TextInputWithTokens";var Od=Ld;const Md=f.div`
   display: flex;
   flex-direction: column;
   ${e=>e.clipSidebar&&p([".Timeline-Item:first-child{padding-top:0;}.Timeline-Item:last-child{padding-bottom:0;}"])}
 
   ${rr};
-`,Pd=f(or).attrs((e=>({className:en("Timeline-Item",e.className)})))`
+`,Pd=f.div.attrs((e=>({className:en("Timeline-Item",e.className)})))`
   display: flex;
   position: relative;
   padding: ${Nt("space.3")} 0;
@@ -1931,9 +1933,8 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
 
   ${e=>e.condensed&&p(["padding-top:",";padding-bottom:0;&:last-child{padding-bottom:",";}.TimelineItem-Badge{height:16px;margin-top:",";margin-bottom:",";color:",";background-color:",";border:0;}"],Nt("space.1"),Nt("space.3"),Nt("space.2"),Nt("space.2"),Nt("colors.fg.muted"),Nt("colors.canvas.default"))}
 
-  ${It};
   ${rr};
-`,Hd=t=>e.createElement(or,{position:"relative",zIndex:1},e.createElement(or,Pt({display:"flex",className:en(t.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"},t),t.children));Hd.displayName="TimelineBadge";const Dd=f(or)`
+`,Hd=t=>e.createElement(or,{position:"relative",zIndex:1},e.createElement(or,{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:t.sx},t.children));Hd.displayName="TimelineBadge";const Dd=f.div`
   min-width: 0;
   max-width: 100%;
   margin-top: ${Nt("space.1")};
@@ -1941,7 +1942,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
   flex: auto;
   font-size: ${Nt("fontSizes.1")};
   ${rr};
-`,Wd=f(or)`
+`,Wd=f.div`
   position: relative
   z-index: 1;
   height: 24px;