@primer/components 0.0.0-2021830153742 → 0.0.0-202183017829

package/CHANGELOG.md

@@ -1,15 +1,13 @@
 # @primer/components
 
-## 0.0.0-2021830153742
-
-### Minor Changes
-
-- [#1463](https://github.com/primer/react/pull/1463) [`15e31291`](https://github.com/primer/react/commit/15e31291d7d3260119661bff09551e71b06cc288) 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
+## 0.0.0-202183017829
 
 ### Patch Changes
 
 - Fake entry to force publishing
 
+* [#1471](https://github.com/primer/react/pull/1471) [`f1cebb7e`](https://github.com/primer/react/commit/f1cebb7e9af297a7c466701454aac6dc1eb7b3a4) Thanks [@smockle](https://github.com/smockle)! - Change the button which receives focus when a 'ConfirmationDialog' opens from the secondary (e.g. 'Cancel') to the primary (e.g. 'OK'). Fixes github/primer#313.
+
 ## 30.0.0
 
 ### Major Changes

package/dist/browser.esm.js

@@ -316,7 +316,7 @@ import e,{useState as r,useRef as t,useCallback as a,useEffect as o,useMemo as n
   ${Ar};
   ${zr};
   ${rt};
-`,_a=({dialogLabelId:r,title:t,subtitle:o,dialogDescriptionId:n,onClose:d})=>{const i=a((()=>{d("close-button")}),[d]);return e.createElement(ao.Header,null,e.createElement(tt,{display:"flex"},e.createElement(tt,{display:"flex",px:2,py:"6px",flexDirection:"column",flexGrow:1},e.createElement(ao.Title,{id:r},null!=t?t:"Dialog"),o&&e.createElement(ao.Subtitle,{id:n},o)),e.createElement(ao.CloseButton,{onClose:i})))};_a.displayName="DefaultHeader";const Ka=({children:r})=>e.createElement(ao.Body,null,r);Ka.displayName="DefaultBody";const Xa=({footerButtons:r})=>{const{containerRef:t}=Na({bindKeys:Rt.ArrowHorizontal|Rt.Tab,focusInStrategy:"closest"});return r?e.createElement(ao.Footer,{ref:t},e.createElement(ao.Buttons,{buttons:r})):null},Ya=e.forwardRef(((r,a)=>{const{title:o="Dialog",subtitle:n="",renderHeader:d,renderBody:i,renderFooter:c,onClose:l,role:s="dialog",width:f="xlarge",height:g="auto"}=r,b=Da(),p=Da(),u={...r,title:o,subtitle:n,role:s,dialogLabelId:b,dialogDescriptionId:p},h=t(null),m=Ra(h,a),x=t(null);Ia({containerRef:h,restoreFocusOnCleanUp:!0}),It((e=>{l("escape"),e.preventDefault()}),[l]);const v=(null!=d?d:_a)(u),B=(null!=i?i:Ka)(u),y=(null!=c?c:Xa)(u);return e.createElement(e.Fragment,null,e.createElement(za,null,e.createElement(Wa,{ref:x},e.createElement(Ga,{width:f,height:g,ref:m,role:s,"aria-labelledby":b,"aria-describedby":p},v,B,y))))}));Ya.displayName="Dialog";const Va=s(tt).attrs({as:"header"})`
+`,_a=({dialogLabelId:r,title:t,subtitle:o,dialogDescriptionId:n,onClose:d})=>{const i=a((()=>{d("close-button")}),[d]);return e.createElement(ao.Header,null,e.createElement(tt,{display:"flex"},e.createElement(tt,{display:"flex",px:2,py:"6px",flexDirection:"column",flexGrow:1},e.createElement(ao.Title,{id:r},null!=t?t:"Dialog"),o&&e.createElement(ao.Subtitle,{id:n},o)),e.createElement(ao.CloseButton,{onClose:i})))};_a.displayName="DefaultHeader";const Ka=({children:r})=>e.createElement(ao.Body,null,r);Ka.displayName="DefaultBody";const Xa=({footerButtons:r})=>{const{containerRef:t}=Na({bindKeys:Rt.ArrowHorizontal|Rt.Tab,focusInStrategy:"closest"});return r?e.createElement(ao.Footer,{ref:t},e.createElement(ao.Buttons,{buttons:r})):null},Ya=e.forwardRef(((r,a)=>{const{title:o="Dialog",subtitle:n="",renderHeader:d,renderBody:i,renderFooter:c,onClose:l,role:s="dialog",width:f="xlarge",height:g="auto",footerButtons:b=[]}=r,p=Da(),u=Da(),h=t(null);for(const e of b)e.autoFocus&&(e.ref=h);const m={...r,title:o,subtitle:n,role:s,dialogLabelId:p,dialogDescriptionId:u},x=t(null),v=Ra(x,a),B=t(null);Ia({containerRef:x,restoreFocusOnCleanUp:!0,initialFocusRef:h}),It((e=>{l("escape"),e.preventDefault()}),[l]);const y=(null!=d?d:_a)(m),w=(null!=i?i:Ka)(m),k=(null!=c?c:Xa)(m);return e.createElement(e.Fragment,null,e.createElement(za,null,e.createElement(Wa,{ref:B},e.createElement(Ga,{width:f,height:g,ref:v,role:s,"aria-labelledby":p,"aria-describedby":u},y,w,k))))}));Ya.displayName="Dialog";const Va=s(tt).attrs({as:"header"})`
   box-shadow: 0 1px 0 ${Cr("colors.border.default")};
   padding: ${Cr("space.2")};
   z-index: 1;
@@ -357,7 +357,7 @@ import e,{useState as r,useRef as t,useCallback as a,useEffect as o,useMemo as n
   align-self: flex-start;
   line-height: normal;
   box-shadow: none;
-`,to=({onClose:r})=>e.createElement(ro,{"aria-label":"Close",onClick:r},e.createElement(Aa,{icon:sa}));to.displayName="CloseButton";const ao=Object.assign(Ya,{Header:Va,Title:qa,Subtitle:Ja,Body:Za,Footer:Qa,Buttons:({buttons:a})=>{const n=t(null);let d=0;const[i,c]=r(0);return o((()=>{var e;1===i?null===(e=n.current)||void 0===e||e.focus():c(i+1)}),[i]),e.createElement(e.Fragment,null,a.map(((r,t)=>{const{content:a,buttonType:o="normal",autoFocus:i=!1,...c}=r,l=eo[o];return e.createElement(l,Or({key:t},c,{ref:i&&0===d?(d++,n):null}),a)})))},CloseButton:to}),oo=s.header`
+`,to=({onClose:r})=>e.createElement(ro,{"aria-label":"Close",onClick:r},e.createElement(Aa,{icon:sa}));to.displayName="CloseButton";const ao=Object.assign(Ya,{Header:Va,Title:qa,Subtitle:Ja,Body:Za,Footer:Qa,Buttons:({buttons:t})=>{var a;const n=Et(null===(a=t.find((e=>e.autoFocus)))||void 0===a?void 0:a.ref);let d=0;const[i,c]=r(0);return o((()=>{var e;1===i?null===(e=n.current)||void 0===e||e.focus():c(i+1)}),[n,i]),e.createElement(e.Fragment,null,t.map(((r,t)=>{const{content:a,buttonType:o="normal",autoFocus:i=!1,...c}=r,l=eo[o];return e.createElement(l,Or({key:t},c,{ref:i&&0===d?(d++,n):null}),a)})))},CloseButton:to}),oo=s.header`
   padding: ${Cr("space.2")};
   display: flex;
   flex-direction: row;
@@ -379,7 +379,7 @@ import e,{useState as r,useRef as t,useCallback as a,useEffect as o,useMemo as n
   align-items: end;
   justify-content: end;
   padding: ${Cr("space.1")} ${Cr("space.3")} ${Cr("space.3")};
-`,fo=({footerButtons:r})=>{const{containerRef:t}=Na({bindKeys:Rt.ArrowHorizontal|Rt.Tab,focusInStrategy:"closest"});return e.createElement(so,{ref:t},e.createElement(ao.Buttons,{buttons:null!=r?r:[]}))};fo.displayName="ConfirmationFooter";const go=r=>{const{onClose:t,title:o,cancelButtonContent:n="Cancel",confirmButtonContent:d="OK",confirmButtonType:i="normal",children:c}=r,l=[{content:n,onClick:a((()=>{t("cancel")}),[t]),autoFocus:!0},{content:d,buttonType:i,onClick:a((()=>{t("confirm")}),[t])}];return e.createElement(ao,{onClose:t,title:o,footerButtons:l,role:"alertdialog",width:"medium",renderHeader:io,renderBody:lo,renderFooter:fo},c)};function bo(){const{theme:r,colorMode:t,dayScheme:o,nightScheme:n}=Jr();return a((a=>async function(r,t){const{content:a,...o}=t;return new Promise((t=>{const n=document.createElement("div");h.render(e.createElement(qr,r,e.createElement(go,Or({},o,{onClose:e=>{h.unmountComponentAtNode(n),t("confirm"===e)}}),a)),n)}))}({theme:r,colorMode:t,dayScheme:o,nightScheme:n},a)),[r,t,o,n])}go.displayName="ConfirmationDialog";const po=s.div`
+`,fo=({footerButtons:r})=>{const{containerRef:t}=Na({bindKeys:Rt.ArrowHorizontal|Rt.Tab,focusInStrategy:"closest"});return e.createElement(so,{ref:t},e.createElement(ao.Buttons,{buttons:null!=r?r:[]}))};fo.displayName="ConfirmationFooter";const go=r=>{const{onClose:t,title:o,cancelButtonContent:n="Cancel",confirmButtonContent:d="OK",confirmButtonType:i="normal",children:c}=r,l=[{content:n,onClick:a((()=>{t("cancel")}),[t])},{content:d,buttonType:i,onClick:a((()=>{t("confirm")}),[t]),autoFocus:!0}];return e.createElement(ao,{onClose:t,title:o,footerButtons:l,role:"alertdialog",width:"medium",renderHeader:io,renderBody:lo,renderFooter:fo},c)};function bo(){const{theme:r,colorMode:t,dayScheme:o,nightScheme:n}=Jr();return a((a=>async function(r,t){const{content:a,...o}=t;return new Promise((t=>{const n=document.createElement("div");h.render(e.createElement(qr,r,e.createElement(go,Or({},o,{onClose:e=>{h.unmountComponentAtNode(n),t("confirm"===e)}}),a)),n)}))}({theme:r,colorMode:t,dayScheme:o,nightScheme:n},a)),[r,t,o,n])}go.displayName="ConfirmationDialog";const po=s.div`
    {
     /* 6px vertical padding + 20px line height = 32px total height
      *
@@ -438,7 +438,6 @@ import e,{useState as r,useRef as t,useCallback as a,useEffect as o,useMemo as n
   color: ${({variant:e,item:r})=>ko(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 {
@@ -542,7 +541,7 @@ import e,{useState as r,useRef as t,useCallback as a,useEffect as o,useMemo as n
   flex-basis: var(--description-container-flex-basis);
 `,Lo=s.input`
   pointer-events: none;
-`,zo=e.forwardRef(((r,t)=>{const{as:o,text:n,description:d,descriptionVariant:i="inline",selected:c,selectionVariant:l,leadingVisual:s,trailingIcon:f,trailingText:g,variant:b="default",showDivider:p,disabled:u,onAction:h,onKeyPress:m,children:x,onClick:v,id:B,...y}=r,w=Da(),k=Da(),$=a((e=>{if(u)return;null==m||m(e);e.target instanceof HTMLInputElement&&"checkbox"===e.target.type&&" "===e.key||!e.defaultPrevented&&[" ","Enter"].includes(e.key)&&(null==h||h(r,e))}),[h,u,r,m]),T=a((e=>{u||(null==v||v(e),e.defaultPrevented||null==h||h(r,e))}),[h,u,r,v]),S=wo[b],I=Zr(S.hover,"inherit"),E=Zr(S.focus,"inherit"),{theme:C}=Jr();return e.createElement(So,Or({ref:t,as:o,tabIndex:u?void 0:-1,variant:b,showDivider:p,"aria-selected":c,"aria-labelledby":n?w:void 0,"aria-describedby":d?k:void 0},y,{"data-id":B,onKeyPress:$,onClick:T,hoverBackground:u?"inherit":I,focusBackground:u?"inherit":E}),!!c===c&&e.createElement(Eo,null,"multiple"===l?e.createElement(e.Fragment,null,e.createElement(Lo,{disabled:u,tabIndex:-1,type:"checkbox",checked:c,"aria-label":n,readOnly:!0,"aria-readonly":"false"})):c&&e.createElement(aa,{fill:null==C?void 0:C.colors.text.primary})),s&&e.createElement(Ao,{variant:b,disabled:u},e.createElement(s,null)),e.createElement($o,null,e.createElement(To,{style:{"--main-content-flex-direction":"inline"===i?"row":"column"}},x,n?e.createElement(Io,{id:w},n):null,d?e.createElement(Ho,{id:k,style:{"--description-container-margin-left":"inline"===i?Cr("space.2")(C):0,"--description-container-flex-basis":"inline"===i?0:"auto"}},"block"===i?d:e.createElement(vo,{title:d,inline:!0,maxWidth:"100%"},d)):null),f||g?e.createElement(No,{variant:b,disabled:u},g,f&&e.createElement(f,null)):null))}));zo.displayName="ActionList.Item";const Ro=s.div`
+`;function zo(r){const{text:t,description:o,descriptionVariant:n="inline",selected:d,selectionVariant:i,leadingVisual:c,trailingIcon:l,trailingText:s,variant:f="default",showDivider:g,disabled:b,onAction:p,onKeyPress:u,children:h,onClick:m,id:x,...v}=r,B=Da(),y=Da(),w=a((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]),k=a((e=>{b||(null==m||m(e),e.defaultPrevented||null==p||p(r,e))}),[p,b,r,m]),$=wo[f],T=Zr($.hover,"inherit"),S=Zr($.focus,"inherit"),{theme:I}=Jr();return e.createElement(So,Or({tabIndex:b?void 0:-1,variant:f,showDivider:g,"aria-selected":d,"aria-labelledby":t?B:void 0,"aria-describedby":o?y:void 0},v,{"data-id":x,onKeyPress:w,onClick:k,hoverBackground:b?"inherit":T,focusBackground:b?"inherit":S}),!!d===d&&e.createElement(Eo,null,"multiple"===i?e.createElement(e.Fragment,null,e.createElement(Lo,{disabled:b,tabIndex:-1,type:"checkbox",checked:d,"aria-label":t,readOnly:!0,"aria-readonly":"false"})):d&&e.createElement(aa,{fill:null==I?void 0:I.colors.text.primary})),c&&e.createElement(Ao,{variant:f,disabled:b},e.createElement(c,null)),e.createElement($o,null,e.createElement(To,{style:{"--main-content-flex-direction":"inline"===n?"row":"column"}},h,t?e.createElement(Io,{id:B},t):null,o?e.createElement(Ho,{id:y,style:{"--description-container-margin-left":"inline"===n?Cr("space.2")(I):0,"--description-container-flex-basis":"inline"===n?0:"auto"}},"block"===n?o:e.createElement(vo,{title:o,inline:!0,maxWidth:"100%"},o)):null),l||s?e.createElement(No,{variant:f,disabled:b},s,l&&e.createElement(l,null)):null))}zo.displayName="Item";const Ro=s.div`
   font-size: ${Cr("fontSizes.1")};
   /* 14px font-size * 1.428571429 = 20px line height
    *
@@ -555,7 +554,7 @@ import e,{useState as r,useRef as t,useCallback as a,useEffect as o,useMemo as n
     --item-hover-bg-override: none;
     --item-hover-divider-border-color-override: ${Cr("colors.border.muted")};
   }
-`;const Oo=e.forwardRef(((r,t)=>{const{firstGroupStyle:a,lastGroupStyle:o,headerStyle:n,itemStyle:d}=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),i=(t,a,o)=>{var n,i,c;const l="renderItem"in t&&t.renderItem||r.renderItem||zo,s=null!==(n=null!==(i="key"in t?t.key:void 0)&&void 0!==i?i:null===(c=t.id)||void 0===c?void 0:c.toString())&&void 0!==n?n:o.toString();return e.createElement(l,Or({showDivider:r.showItemDividers,selectionVariant:r.selectionVariant},t,{key:s,sx:{...d,...t.sx},item:a}))};let c=[];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 l,s,f;const r=e.get(t.groupId),a=null!==(l=null==r||null===(s=r.items)||void 0===s?void 0:s.length)&&void 0!==l?l:0;e.set(t.groupId,{...r,items:[...null!==(f=null==r?void 0:r.items)&&void 0!==f?f:[],i({showDivider:null==r?void 0:r.showItemDividers,...r&&"renderItem"in r&&{renderItem:r.renderItem},...t},t,a)]})}c=[...e.values()]}else c=[{items:r.items.map(((e,r)=>i(e,e,r))),groupId:"0"}];return e.createElement(Ro,Or({},r,{ref:t}),c.map((({header:t,...d},i)=>{const l="filled"===(null==t?void 0:t.variant),s=i>0&&!l;return e.createElement(e.Fragment,{key:d.groupId},s?e.createElement(yo,{key:`${d.groupId}-divider`}):null,(t=>{var a;const o=(null!==(a="renderGroup"in t&&t.renderGroup)&&void 0!==a?a:r.renderGroup)||mo;return e.createElement(o,Or({},t,{key:t.groupId}))})({sx:{...0===i&&a,...i===c.length-1&&o,...i>0&&!s&&{mt:2}},...t&&{header:{...t,sx:{...n,...t.sx}}},...d}))})))}));Oo.displayName="ActionList";const Mo=Object.assign(Oo,{Group:mo,Item:zo,Divider:yo}),Po={xsmall:"192px",small:"256px",medium:"320px",large:"432px",xlarge:"600px",auto:"auto",initial:"auto"},Fo={small:"256px",medium:"320px",large:"480px",xlarge:"640px",xxlarge:"960px",auto:"auto"};const Do=s.div`
+`;const Oo=e.forwardRef(((r,t)=>{const{firstGroupStyle:a,lastGroupStyle:o,headerStyle:n,itemStyle:d}=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),i=(t,a,o)=>{var n,i,c;const l="renderItem"in t&&t.renderItem||r.renderItem||zo,s=null!==(n=null!==(i=t.key)&&void 0!==i?i:null===(c=t.id)||void 0===c?void 0:c.toString())&&void 0!==n?n:o.toString();return e.createElement(l,Or({showDivider:r.showItemDividers,selectionVariant:r.selectionVariant},t,{key:s,sx:{...d,...t.sx},item:a}))};let c=[];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 l,s,f;const r=e.get(t.groupId),a=null!==(l=null==r||null===(s=r.items)||void 0===s?void 0:s.length)&&void 0!==l?l:0;e.set(t.groupId,{...r,items:[...null!==(f=null==r?void 0:r.items)&&void 0!==f?f:[],i({showDivider:null==r?void 0:r.showItemDividers,...r&&"renderItem"in r&&{renderItem:r.renderItem},...t},t,a)]})}c=[...e.values()]}else c=[{items:r.items.map(((e,r)=>i(e,e,r))),groupId:"0"}];return e.createElement(Ro,Or({},r,{ref:t}),c.map((({header:t,...d},i)=>{const l="filled"===(null==t?void 0:t.variant),s=i>0&&!l;return e.createElement(e.Fragment,{key:d.groupId},s?e.createElement(yo,{key:`${d.groupId}-divider`}):null,(t=>{var a;const o=(null!==(a="renderGroup"in t&&t.renderGroup)&&void 0!==a?a:r.renderGroup)||mo;return e.createElement(o,Or({},t,{key:t.groupId}))})({sx:{...0===i&&a,...i===c.length-1&&o,...i>0&&!s&&{mt:2}},...t&&{header:{...t,sx:{...n,...t.sx}}},...d}))})))}));Oo.displayName="ActionList";const Mo=Object.assign(Oo,{Group:mo,Item:zo,Divider:yo}),Po={xsmall:"192px",small:"256px",medium:"320px",large:"432px",xlarge:"600px",auto:"auto",initial:"auto"},Fo={small:"256px",medium:"320px",large:"480px",xlarge:"640px",xxlarge:"960px",auto:"auto"};const Do=s.div`
   background-color: ${Cr("colors.canvas.overlay")};
   box-shadow: ${Cr("shadows.overlay.shadow")};
   position: absolute;