@primer/components 0.0.0-202182923742 → 0.0.0-202183053931

package/CHANGELOG.md

@@ -1,11 +1,13 @@
 # @primer/components
 
-## 0.0.0-202182923742
+## 0.0.0-202183053931
 
 ### 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
      *
@@ -413,7 +413,7 @@ import e,{useState as r,useRef as t,useCallback as a,useEffect as o,useMemo as n
   background: ${Cr("colors.border.muted")};
   margin-top: calc(${Cr("space.2")} - 1px);
   margin-bottom: ${Cr("space.2")};
-`;function yo(){return e.createElement(Bo,null)}yo.displayName="Divider",yo.renderItem=yo;const wo={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)"}}},ko=(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"}}},$o=s.div`
+`;function yo(){return e.createElement(Bo,null)}yo.displayName="Divider",yo.renderItem=yo;const wo={default:{hover:Cr("colors.neutral.subtle"),focus:Cr("colors.neutral.muted")},danger:{hover:Cr("colors.danger.subtle"),focus:Cr("colors.danger.muted")}},ko=(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"}}},$o=s.div`
   display: flex;
   min-width: 0;
 
@@ -541,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;
-`;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`
+`;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=$.hover,S=$.focus,{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
    *