@primer/components 0.0.0-2021827223713 → 0.0.0-2021828162730

package/CHANGELOG.md

@@ -1,12 +1,14 @@
 # @primer/components
 
-## 0.0.0-2021827223713
+## 0.0.0-2021828162730
 
 ### Major Changes
 
-- [#1469](https://github.com/primer/react/pull/1469) [`ec1a8479`](https://github.com/primer/react/commit/ec1a8479272dcd78341b39e7a1fe8731388827a4) Thanks [@jfuchs](https://github.com/jfuchs)! - Breadcrumbs no longer accept styled props
+- [#1448](https://github.com/primer/react/pull/1448) [`1a39fb02`](https://github.com/primer/react/commit/1a39fb0284c5e19324d378629d09a343be4cde05) Thanks [@SferaDev](https://github.com/SferaDev)! - Remove `.Breadcrumb` classname from the root element of the `Breadcrumbs` component. This change shouldn't break anything unless you have styles, scripts, or tests that reference the `.Breadcrumb` classname.
 
-* [#1448](https://github.com/primer/react/pull/1448) [`1a39fb02`](https://github.com/primer/react/commit/1a39fb0284c5e19324d378629d09a343be4cde05) Thanks [@SferaDev](https://github.com/SferaDev)! - Remove `.Breadcrumb` classname from the root element of the `Breadcrumbs` component. This change shouldn't break anything unless you have styles, scripts, or tests that reference the `.Breadcrumb` classname.
+### Minor Changes
+
+- [#1463](https://github.com/primer/react/pull/1463) [`c6291814`](https://github.com/primer/react/commit/c629181409a60f5b191d663a39568e0fc3ba9e1e) Thanks [@jfuchs](https://github.com/jfuchs)! - `ActionList.item` accepts an `as` prop, allowing it to be a link, or (in combination with the renderItem prop) a Next.js or React Router link
 
 ### Patch Changes
 
@@ -14,6 +16,8 @@
 
 * [#1448](https://github.com/primer/react/pull/1448) [`1a39fb02`](https://github.com/primer/react/commit/1a39fb0284c5e19324d378629d09a343be4cde05) Thanks [@SferaDev](https://github.com/SferaDev)! - Rename `Breadcrumb` component to `Breadcrumbs`
 
+- [#1470](https://github.com/primer/react/pull/1470) [`f2e29a08`](https://github.com/primer/react/commit/f2e29a08e2aab9e98a460eb073229933f6ae050b) Thanks [@pksjce](https://github.com/pksjce)! - Fix ActionList.Item color
+
 ## 29.1.1
 
 ### Patch Changes

package/dist/browser.esm.js

@@ -413,7 +413,7 @@ import e,{useState as r,useRef as t,useCallback as o,useEffect as a,useMemo as n
   background: ${Cr("colors.border.muted")};
   margin-top: calc(${Cr("space.2")} - 1px);
   margin-bottom: ${Cr("space.2")};
-`;function wa(){return e.createElement(ya,null)}wa.displayName="Divider",wa.renderItem=wa;const Ba={default:{hover:{light:"rgba(46, 77, 108, 0.06)",dark:"rgba(201, 206, 212, 0.12)",dark_dimmed:"rgba(201, 206, 212, 0.12)"},focus:{light:"rgba(54, 77, 100, 0.16)",dark:"rgba(201, 206, 212, 0.24)",dark_dimmed:"rgba(201, 206, 212, 0.24)"}},danger:{hover:{light:"rgba(234, 74, 90, 0.08)",dark:"rgba(248, 81, 73, 0.16)",dark_dimmed:"rgba(248, 81, 73, 0.16)"},focus:{light:"rgba(234, 74, 90, 0.14)",dark:"rgba(248, 81, 73, 0.24)",dark_dimmed:"rgba(248, 81, 73, 0.24)"}}},$a=(e="default",r)=>{if(r)return{color:Cr("colors.fg.muted"),iconColor:Cr("colors.fg.muted"),annotationColor:Cr("colors.fg.muted"),hoverCursor:"default"};switch(e){case"danger":return{color:Cr("colors.danger.fg"),iconColor:Cr("colors.danger.fg"),annotationColor:Cr("colors.fg.muted"),hoverCursor:"pointer"};default:return{color:"inherit",iconColor:Cr("colors.fg.muted"),annotationColor:Cr("colors.fg.muted"),hoverCursor:"pointer"}}},ka=s.div`
+`;function wa(){return e.createElement(ya,null)}wa.displayName="Divider",wa.renderItem=wa;const Ba={default:{hover:{light:"rgba(46, 77, 108, 0.06)",dark:"rgba(201, 206, 212, 0.12)",dark_dimmed:"rgba(201, 206, 212, 0.12)"},focus:{light:"rgba(54, 77, 100, 0.16)",dark:"rgba(201, 206, 212, 0.24)",dark_dimmed:"rgba(201, 206, 212, 0.24)"}},danger:{hover:{light:"rgba(234, 74, 90, 0.08)",dark:"rgba(248, 81, 73, 0.16)",dark_dimmed:"rgba(248, 81, 73, 0.16)"},focus:{light:"rgba(234, 74, 90, 0.14)",dark:"rgba(248, 81, 73, 0.24)",dark_dimmed:"rgba(248, 81, 73, 0.24)"}}},$a=(e="default",r)=>{if(r)return{color:Cr("colors.fg.muted"),iconColor:Cr("colors.fg.muted"),annotationColor:Cr("colors.fg.muted"),hoverCursor:"default"};switch(e){case"danger":return{color:Cr("colors.danger.fg"),iconColor:Cr("colors.danger.fg"),annotationColor:Cr("colors.fg.muted"),hoverCursor:"pointer"};default:return{color:Cr("colors.fg.default"),iconColor:Cr("colors.fg.muted"),annotationColor:Cr("colors.fg.muted"),hoverCursor:"pointer"}}},ka=s.div`
   display: flex;
   min-width: 0;
 
@@ -438,6 +438,7 @@ import e,{useState as r,useRef as t,useCallback as o,useEffect as a,useMemo as n
   color: ${({variant:e,item:r})=>$a(e,null==r?void 0:r.disabled).color};
   // 2 frames on a 60hz monitor
   transition: background 33.333ms linear;
+  text-decoration: none;
 
   @media (hover: hover) and (pointer: fine) {
     :hover {
@@ -541,7 +542,7 @@ import e,{useState as r,useRef as t,useCallback as o,useEffect as a,useMemo as n
   flex-basis: var(--description-container-flex-basis);
 `,La=s.input`
   pointer-events: none;
-`;function Ra(r){const{text:t,description:a,descriptionVariant:n="inline",selected:i,selectionVariant:d,leadingVisual:l,trailingIcon:c,trailingText:s,variant:f="default",showDivider:g,disabled:b,onAction:p,onKeyPress:u,children:m,onClick:h,id:x,...v}=r,y=Wo(),w=Wo(),B=o((e=>{if(b)return;null==u||u(e);e.target instanceof HTMLInputElement&&"checkbox"===e.target.type&&" "===e.key||!e.defaultPrevented&&[" ","Enter"].includes(e.key)&&(null==p||p(r,e))}),[p,b,r,u]),$=o((e=>{b||(null==h||h(e),e.defaultPrevented||null==p||p(r,e))}),[p,b,r,h]),k=Ba[f],S=Zr(k.hover,"inherit"),T=Zr(k.focus,"inherit"),{theme:E}=Jr();return e.createElement(Ta,Or({tabIndex:b?void 0:-1,variant:f,showDivider:g,"aria-selected":i,"aria-labelledby":t?y:void 0,"aria-describedby":a?w:void 0},v,{"data-id":x,onKeyPress:B,onClick:$,hoverBackground:b?"inherit":S,focusBackground:b?"inherit":T}),!!i===i&&e.createElement(Ia,null,"multiple"===d?e.createElement(e.Fragment,null,e.createElement(La,{disabled:b,tabIndex:-1,type:"checkbox",checked:i,"aria-label":t,readOnly:!0,"aria-readonly":"false"})):i&&e.createElement(oo,{fill:null==E?void 0:E.colors.text.primary})),l&&e.createElement(Na,{variant:f,disabled:b},e.createElement(l,null)),e.createElement(ka,null,e.createElement(Sa,{style:{"--main-content-flex-direction":"inline"===n?"row":"column"}},m,t?e.createElement(Ea,{id:y},t):null,a?e.createElement(za,{id:w,style:{"--description-container-margin-left":"inline"===n?Cr("space.2")(E):0,"--description-container-flex-basis":"inline"===n?0:"auto"}},"block"===n?a:e.createElement(va,{title:a,inline:!0,maxWidth:"100%"},a)):null),c||s?e.createElement(Aa,{variant:f,disabled:b},s,c&&e.createElement(c,null)):null))}Ra.displayName="Item";const Ha=s.div`
+`,Ra=e.forwardRef(((r,t)=>{const{as:a,text:n,description:i,descriptionVariant:d="inline",selected:l,selectionVariant:c,leadingVisual:s,trailingIcon:f,trailingText:g,variant:b="default",showDivider:p,disabled:u,onAction:m,onKeyPress:h,children:x,onClick:v,id:y,...w}=r,B=Wo(),$=Wo(),k=o((e=>{if(u)return;null==h||h(e);e.target instanceof HTMLInputElement&&"checkbox"===e.target.type&&" "===e.key||!e.defaultPrevented&&[" ","Enter"].includes(e.key)&&(null==m||m(r,e))}),[m,u,r,h]),S=o((e=>{u||(null==v||v(e),e.defaultPrevented||null==m||m(r,e))}),[m,u,r,v]),T=Ba[b],E=Zr(T.hover,"inherit"),I=Zr(T.focus,"inherit"),{theme:C}=Jr();return e.createElement(Ta,Or({ref:t,as:a,tabIndex:u?void 0:-1,variant:b,showDivider:p,"aria-selected":l,"aria-labelledby":n?B:void 0,"aria-describedby":i?$:void 0},w,{"data-id":y,onKeyPress:k,onClick:S,hoverBackground:u?"inherit":E,focusBackground:u?"inherit":I}),!!l===l&&e.createElement(Ia,null,"multiple"===c?e.createElement(e.Fragment,null,e.createElement(La,{disabled:u,tabIndex:-1,type:"checkbox",checked:l,"aria-label":n,readOnly:!0,"aria-readonly":"false"})):l&&e.createElement(oo,{fill:null==C?void 0:C.colors.text.primary})),s&&e.createElement(Na,{variant:b,disabled:u},e.createElement(s,null)),e.createElement(ka,null,e.createElement(Sa,{style:{"--main-content-flex-direction":"inline"===d?"row":"column"}},x,n?e.createElement(Ea,{id:B},n):null,i?e.createElement(za,{id:$,style:{"--description-container-margin-left":"inline"===d?Cr("space.2")(C):0,"--description-container-flex-basis":"inline"===d?0:"auto"}},"block"===d?i:e.createElement(va,{title:i,inline:!0,maxWidth:"100%"},i)):null),f||g?e.createElement(Aa,{variant:b,disabled:u},g,f&&e.createElement(f,null)):null))}));const Ha=s.div`
   font-size: ${Cr("fontSizes.1")};
   /* 14px font-size * 1.428571429 = 20px line height
    *
@@ -554,7 +555,7 @@ import e,{useState as r,useRef as t,useCallback as o,useEffect as a,useMemo as n
     --item-hover-bg-override: none;
     --item-hover-divider-border-color-override: ${Cr("colors.border.muted")};
   }
-`;const Oa=e.forwardRef(((r,t)=>{const{firstGroupStyle:o,lastGroupStyle:a,headerStyle:n,itemStyle:i}=function(e="inset"){switch(e){case"full":return{headerStyle:{paddingX:Cr("space.2")},itemStyle:{borderRadius:0}};default:return{firstGroupStyle:{marginTop:Cr("space.2")},lastGroupStyle:{marginBottom:Cr("space.2")},itemStyle:{marginX:Cr("space.2")}}}}(r.variant),d=(t,o,a)=>{var n,d,l;const c="renderItem"in t&&t.renderItem||r.renderItem||Ra,s=null!==(n=null!==(d=t.key)&&void 0!==d?d:null===(l=t.id)||void 0===l?void 0:l.toString())&&void 0!==n?n:a.toString();return e.createElement(c,Or({showDivider:r.showItemDividers,selectionVariant:r.selectionVariant},t,{key:s,sx:{...i,...t.sx},item:o}))};let l=[];if(function(e){return"groupMetadata"in e}(r)){const e=r.groupMetadata.reduce(((e,r)=>e.set(r.groupId,r)),new Map);for(const t of r.items){var c,s,f;const r=e.get(t.groupId),o=null!==(c=null==r||null===(s=r.items)||void 0===s?void 0:s.length)&&void 0!==c?c:0;e.set(t.groupId,{...r,items:[...null!==(f=null==r?void 0:r.items)&&void 0!==f?f:[],d({showDivider:null==r?void 0:r.showItemDividers,...r&&"renderItem"in r&&{renderItem:r.renderItem},...t},t,o)]})}l=[...e.values()]}else l=[{items:r.items.map(((e,r)=>d(e,e,r))),groupId:"0"}];return e.createElement(Ha,Or({},r,{ref:t}),l.map((({header:t,...i},d)=>{const c="filled"===(null==t?void 0:t.variant),s=d>0&&!c;return e.createElement(e.Fragment,{key:i.groupId},s?e.createElement(wa,{key:`${i.groupId}-divider`}):null,(t=>{var o;const a=(null!==(o="renderGroup"in t&&t.renderGroup)&&void 0!==o?o:r.renderGroup)||ha;return e.createElement(a,Or({},t,{key:t.groupId}))})({sx:{...0===d&&o,...d===l.length-1&&a,...d>0&&!s&&{mt:2}},...t&&{header:{...t,sx:{...n,...t.sx}}},...i}))})))}));Oa.displayName="ActionList";const Pa=Object.assign(Oa,{Group:ha,Item:Ra,Divider:wa}),Ma={xsmall:"192px",small:"256px",medium:"320px",large:"432px",xlarge:"600px",auto:"auto",initial:"auto"},Da={small:"256px",medium:"320px",large:"480px",xlarge:"640px",xxlarge:"960px",auto:"auto"};const Fa=s.div`
+`;const Oa=e.forwardRef(((r,t)=>{const{firstGroupStyle:o,lastGroupStyle:a,headerStyle:n,itemStyle:i}=function(e="inset"){switch(e){case"full":return{headerStyle:{paddingX:Cr("space.2")},itemStyle:{borderRadius:0}};default:return{firstGroupStyle:{marginTop:Cr("space.2")},lastGroupStyle:{marginBottom:Cr("space.2")},itemStyle:{marginX:Cr("space.2")}}}}(r.variant),d=(t,o,a)=>{var n,d,l;const c="renderItem"in t&&t.renderItem||r.renderItem||Ra,s=null!==(n=null!==(d="key"in t?t.key:void 0)&&void 0!==d?d:null===(l=t.id)||void 0===l?void 0:l.toString())&&void 0!==n?n:a.toString();return e.createElement(c,Or({showDivider:r.showItemDividers,selectionVariant:r.selectionVariant},t,{key:s,sx:{...i,...t.sx},item:o}))};let l=[];if(function(e){return"groupMetadata"in e}(r)){const e=r.groupMetadata.reduce(((e,r)=>e.set(r.groupId,r)),new Map);for(const t of r.items){var c,s,f;const r=e.get(t.groupId),o=null!==(c=null==r||null===(s=r.items)||void 0===s?void 0:s.length)&&void 0!==c?c:0;e.set(t.groupId,{...r,items:[...null!==(f=null==r?void 0:r.items)&&void 0!==f?f:[],d({showDivider:null==r?void 0:r.showItemDividers,...r&&"renderItem"in r&&{renderItem:r.renderItem},...t},t,o)]})}l=[...e.values()]}else l=[{items:r.items.map(((e,r)=>d(e,e,r))),groupId:"0"}];return e.createElement(Ha,Or({},r,{ref:t}),l.map((({header:t,...i},d)=>{const c="filled"===(null==t?void 0:t.variant),s=d>0&&!c;return e.createElement(e.Fragment,{key:i.groupId},s?e.createElement(wa,{key:`${i.groupId}-divider`}):null,(t=>{var o;const a=(null!==(o="renderGroup"in t&&t.renderGroup)&&void 0!==o?o:r.renderGroup)||ha;return e.createElement(a,Or({},t,{key:t.groupId}))})({sx:{...0===d&&o,...d===l.length-1&&a,...d>0&&!s&&{mt:2}},...t&&{header:{...t,sx:{...n,...t.sx}}},...i}))})))}));Oa.displayName="ActionList";const Pa=Object.assign(Oa,{Group:ha,Item:Ra,Divider:wa}),Ma={xsmall:"192px",small:"256px",medium:"320px",large:"432px",xlarge:"600px",auto:"auto",initial:"auto"},Da={small:"256px",medium:"320px",large:"480px",xlarge:"640px",xxlarge:"960px",auto:"auto"};const Fa=s.div`
   background-color: ${Cr("colors.canvas.overlay")};
   box-shadow: ${Cr("shadows.overlay.shadow")};
   position: absolute;
@@ -748,8 +749,10 @@ Za=en,function(){var e={}.hasOwnProperty;function r(){for(var t=[],o=0;o<argumen
 `,ln=s.nav`
   display: flex;
   justify-content: space-between;
+  ${Nr};
+  ${Hr};
   ${rt};
-`;function cn({className:r,children:t,sx:o}){const a=e.Children.map(t,(r=>e.createElement(dn,null,r)));return e.createElement(ln,{className:r,"aria-label":"Breadcrumbs",sx:o},e.createElement(tt,{as:"ol",my:0,pl:0},a))}cn.displayName="Breadcrumbs";const sn=s.a.attrs((e=>({activeClassName:"string"==typeof e.to?"selected":"",className:rn(e.selected&&"selected",e.className),"aria-current":e.selected?"page":null})))`
+`;function cn({className:r,children:t,theme:o,...a}){const n=e.Children.map(t,(r=>e.createElement(dn,{theme:o},r)));return e.createElement(ln,Or({className:r,"aria-label":"Breadcrumbs",theme:o},a),e.createElement(tt,{as:"ol",my:0,pl:0},n))}cn.displayName="Breadcrumbs";const sn=s.a.attrs((e=>({activeClassName:"string"==typeof e.to?"selected":"",className:rn(e.selected&&"selected",e.className),"aria-current":e.selected?"page":null})))`
   color: ${Cr("colors.accent.fg")};
   display: inline-block;
   font-size: ${Cr("fontSizes.1")};
@@ -761,6 +764,7 @@ Za=en,function(){var e={}.hasOwnProperty;function r(){for(var t=[],o=0;o<argumen
     color: ${Cr("colors.fg.default")};
     pointer-events: none;
   }
+  ${Nr}
   ${rt};
 `;cn.displayName="Breadcrumbs",sn.displayName="Breadcrumbs.Item";var fn=Object.assign(cn,{Item:sn});const gn=Object.assign(cn,{Item:sn}),bn={top:"Bottom",right:"Left",bottom:"Top",left:"Right"},pn={top:"Left",right:"Top",bottom:"Left",left:"Top"};function un(e,r,t){const o=bn[e].toLowerCase(),a=pn[e].toLowerCase();return{[o]:"100%",[r||a]:r?t:"50%"}}const mn=kr({prop:"bg",key:"colors"}),hn=kr({prop:"borderColor",key:"colors"}),xn=kr({prop:"borderWidth",key:"borderWidths",scale:[0,1]});function vn(r){var t;const o=e.useContext(p),a={...r,theme:null!==(t=r.theme)&&void 0!==t?t:o},{bg:n}=mn(a),{borderColor:i}=hn(a),{borderWidth:d}=xn(a),{size:l=8,location:c="bottom"}=r,[s,f]=function(e){const[r,t]=e.split("-");return[r,t]}(c),g=pn[s],b=[-l,0],u=[0,l],m=[l,0],h=`M${b}L${u}L${m}L${b}Z`,x=`M${b}L${u}L${m}`,v={top:`translate(${[l,2*l]}) rotate(180)`,right:`translate(${[0,l]}) rotate(-90)`,bottom:`translate(${[l,0]})`,left:`translate(${[2*l,l]}) rotate(90)`}[s];return e.createElement("svg",{width:2*l,height:2*l,style:{pointerEvents:"none",position:"absolute",...un(s,f,l),[`margin${g}`]:f?null:-l}},e.createElement("g",{transform:v},e.createElement("path",{d:h,fill:n}),e.createElement("path",{d:x,fill:"none",stroke:i,strokeWidth:d})))}vn.displayName="Caret",vn.locations=["top","top-left","top-right","right","right-top","right-bottom","bottom","bottom-left","bottom-right","left","left-top","left-bottom"],vn.defaultProps={bg:"bg.canvas",borderColor:"border.primary",borderWidth:1};const yn={small:56,medium:96,large:128},wn=s.div`
   display: ${e=>e.inline?"inline-flex":"flex"};