@primer/components 0.0.0-202110322387 → 0.0.0-202110322537

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # @primer/components
 
-## 0.0.0-202110322387
+## 0.0.0-202110322537
 
 ### Major Changes
 
-- [#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.
+- [#1469](https://github.com/primer/react/pull/1469) [`e1e1e7f7`](https://github.com/primer/react/commit/e1e1e7f7536d6ccd761d9a74f50116cf6c14ad3e) Thanks [@jfuchs](https://github.com/jfuchs)! - Breadcrumbs 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

@@ -810,10 +810,8 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
 `,Sn=f.nav`
   display: flex;
   justify-content: space-between;
-  ${It};
-  ${Mt};
   ${rr};
-`;function En({className:t,children:r,theme:o,...a}){const n=e.Children.map(r,(t=>e.createElement(Tn,{theme:o},t)));return e.createElement(Sn,Pt({className:t,"aria-label":"Breadcrumbs",theme:o},a),e.createElement(or,{as:"ol",my:0,pl:0},n))}En.displayName="Breadcrumbs";const Cn=f.a.attrs((e=>({activeClassName:"string"==typeof e.to?"selected":"",className:en(e.selected&&"selected",e.className),"aria-current":e.selected?"page":null})))`
+`;function En({className:t,children:r,sx:o}){const a=e.Children.map(r,(t=>e.createElement(Tn,null,t)));return e.createElement(Sn,{className:t,"aria-label":"Breadcrumbs",sx:o},e.createElement(or,{as:"ol",my:0,pl:0},a))}En.displayName="Breadcrumbs";const Cn=f.a.attrs((e=>({activeClassName:"string"==typeof e.to?"selected":"",className:en(e.selected&&"selected",e.className),"aria-current":e.selected?"page":null})))`
   color: ${Nt("colors.accent.fg")};
   display: inline-block;
   font-size: ${Nt("fontSizes.1")};
@@ -825,7 +823,6 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
     color: ${Nt("colors.fg.default")};
     pointer-events: none;
   }
-  ${It}
   ${rr};
 `;En.displayName="Breadcrumbs",Cn.displayName="Breadcrumbs.Item";var zn=Object.assign(En,{Item:Cn});const Nn=Object.assign(En,{Item:Cn}),In={top:"Bottom",right:"Left",bottom:"Top",left:"Right"},An={top:"Left",right:"Top",bottom:"Left",left:"Top"};function Rn(e,t,r){const o=In[e].toLowerCase(),a=An[e].toLowerCase();return{[o]:"100%",[t||a]:t?r:"50%"}}const Ln=Tt({prop:"bg",key:"colors"}),On=Tt({prop:"borderColor",key:"colors"}),Mn=Tt({prop:"borderWidth",key:"borderWidths",scale:[0,1]});function Pn(t){var r;const o=e.useContext(b),a={...t,theme:null!==(r=t.theme)&&void 0!==r?r:o},{bg:n}=Ln(a),{borderColor:i}=On(a),{borderWidth:l}=Mn(a),{size:d=8,location:s="bottom"}=t,[c,f]=function(e){const[t,r]=e.split("-");return[t,r]}(s),g=An[c],u=[-d,0],p=[0,d],m=[d,0],h=`M${u}L${p}L${m}L${u}Z`,v=`M${u}L${p}L${m}`,x={top:`translate(${[d,2*d]}) rotate(180)`,right:`translate(${[0,d]}) rotate(-90)`,bottom:`translate(${[d,0]})`,left:`translate(${[2*d,d]}) rotate(90)`}[c];return e.createElement("svg",{width:2*d,height:2*d,style:{pointerEvents:"none",position:"absolute",...Rn(c,f,d),[`margin${g}`]:f?null:-d}},e.createElement("g",{transform:x},e.createElement("path",{d:h,fill:n}),e.createElement("path",{d:v,fill:"none",stroke:i,strokeWidth:l})))}Pn.displayName="Caret",Pn.locations=["top","top-left","top-right","right","right-top","right-bottom","bottom","bottom-left","bottom-right","left","left-top","left-bottom"],Pn.defaultProps={bg:"canvas.default",borderColor:"border.default",borderWidth:1};const Hn={small:56,medium:96,large:128},Dn=f.div`
   display: ${e=>e.inline?"inline-flex":"flex"};
@@ -1908,13 +1905,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.div`
+`,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)`
   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.div.attrs((e=>({className:en("Timeline-Item",e.className)})))`
+`,Pd=f(or).attrs((e=>({className:en("Timeline-Item",e.className)})))`
   display: flex;
   position: relative;
   padding: ${Nt("space.3")} 0;
@@ -1933,8 +1930,9 @@ 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,{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`
+`,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)`
   min-width: 0;
   max-width: 100%;
   margin-top: ${Nt("space.1")};
@@ -1942,7 +1940,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.div`
+`,Wd=f(or)`
   position: relative
   z-index: 1;
   height: 24px;