@primer/components 0.0.0-2021828142042 → 0.0.0-2021828162730

package/dist/browser.umd.js

@@ -316,7 +316,7 @@
   ${yt};
   ${kt};
   ${Xt};
-`,Go=({dialogLabelId:e,title:r,subtitle:o,dialogDescriptionId:a,onClose:d})=>{const i=t.useCallback((()=>{d("close-button")}),[d]);return n.default.createElement(ra.Header,null,n.default.createElement(Vt,{display:"flex"},n.default.createElement(Vt,{display:"flex",px:2,py:"6px",flexDirection:"column",flexGrow:1},n.default.createElement(ra.Title,{id:e},null!=r?r:"Dialog"),o&&n.default.createElement(ra.Subtitle,{id:a},o)),n.default.createElement(ra.CloseButton,{onClose:i})))};Go.displayName="DefaultHeader";const _o=({children:e})=>n.default.createElement(ra.Body,null,e);_o.displayName="DefaultBody";const Ko=({footerButtons:e})=>{const{containerRef:t}=Co({bindKeys:Er.ArrowHorizontal|Er.Tab,focusInStrategy:"closest"});return e?n.default.createElement(ra.Footer,{ref:t},n.default.createElement(ra.Buttons,{buttons:e})):null},Xo=n.default.forwardRef(((e,r)=>{const{title:o="Dialog",subtitle:a="",renderHeader:d,renderBody:i,renderFooter:l,onClose:c,role:s="dialog",width:f="xlarge",height:b="auto",footerButtons:g=[]}=e,u=Po(),p=Po(),m=t.useRef(null);for(const e of g)e.autoFocus&&(e.ref=m);const h={...e,title:o,subtitle:a,role:s,dialogLabelId:u,dialogDescriptionId:p},x=t.useRef(null),v=Lo(x,r),y=t.useRef(null);ko({containerRef:x,restoreFocusOnCleanUp:!0,initialFocusRef:m}),vr((e=>{c("escape"),e.preventDefault()}),[c]);const w=(null!=d?d:Go)(h),B=(null!=i?i:_o)(h),$=(null!=l?l:Ko)(h);return n.default.createElement(n.default.Fragment,null,n.default.createElement(zo,null,n.default.createElement(Fo,{ref:y},n.default.createElement(Uo,{width:f,height:b,ref:v,role:s,"aria-labelledby":u,"aria-describedby":p},w,B,$))))}));Xo.displayName="Dialog";const Vo=d.default(Vt).attrs({as:"header"})`
+`,Go=({dialogLabelId:e,title:r,subtitle:o,dialogDescriptionId:a,onClose:d})=>{const i=t.useCallback((()=>{d("close-button")}),[d]);return n.default.createElement(ra.Header,null,n.default.createElement(Vt,{display:"flex"},n.default.createElement(Vt,{display:"flex",px:2,py:"6px",flexDirection:"column",flexGrow:1},n.default.createElement(ra.Title,{id:e},null!=r?r:"Dialog"),o&&n.default.createElement(ra.Subtitle,{id:a},o)),n.default.createElement(ra.CloseButton,{onClose:i})))};Go.displayName="DefaultHeader";const _o=({children:e})=>n.default.createElement(ra.Body,null,e);_o.displayName="DefaultBody";const Ko=({footerButtons:e})=>{const{containerRef:t}=Co({bindKeys:Er.ArrowHorizontal|Er.Tab,focusInStrategy:"closest"});return e?n.default.createElement(ra.Footer,{ref:t},n.default.createElement(ra.Buttons,{buttons:e})):null},Xo=n.default.forwardRef(((e,r)=>{const{title:o="Dialog",subtitle:a="",renderHeader:d,renderBody:i,renderFooter:l,onClose:c,role:s="dialog",width:f="xlarge",height:b="auto"}=e,g=Po(),u=Po(),p={...e,title:o,subtitle:a,role:s,dialogLabelId:g,dialogDescriptionId:u},m=t.useRef(null),h=Lo(m,r),x=t.useRef(null);ko({containerRef:m,restoreFocusOnCleanUp:!0}),vr((e=>{c("escape"),e.preventDefault()}),[c]);const v=(null!=d?d:Go)(p),y=(null!=i?i:_o)(p),w=(null!=l?l:Ko)(p);return n.default.createElement(n.default.Fragment,null,n.default.createElement(zo,null,n.default.createElement(Fo,{ref:x},n.default.createElement(Uo,{width:f,height:b,ref:h,role:s,"aria-labelledby":g,"aria-describedby":u},v,y,w))))}));Xo.displayName="Dialog";const Vo=d.default(Vt).attrs({as:"header"})`
   box-shadow: 0 1px 0 ${vt("colors.border.default")};
   padding: ${vt("space.2")};
   z-index: 1;
@@ -357,7 +357,7 @@
   align-self: flex-start;
   line-height: normal;
   box-shadow: none;
-`,ta=({onClose:e})=>n.default.createElement(ea,{"aria-label":"Close",onClick:e},n.default.createElement(Eo,{icon:io}));ta.displayName="CloseButton";const ra=Object.assign(Xo,{Header:Vo,Title:Yo,Subtitle:qo,Body:Jo,Footer:Zo,Buttons:({buttons:e})=>n.default.createElement(n.default.Fragment,null,e.map(((e,t)=>{const{content:r,buttonType:o="normal",...a}=e,d=Qo[o];return n.default.createElement(d,Tt({key:t},a),r)}))),CloseButton:ta}),oa=d.default.header`
+`,ta=({onClose:e})=>n.default.createElement(ea,{"aria-label":"Close",onClick:e},n.default.createElement(Eo,{icon:io}));ta.displayName="CloseButton";const ra=Object.assign(Xo,{Header:Vo,Title:Yo,Subtitle:qo,Body:Jo,Footer:Zo,Buttons:({buttons:e})=>{const r=t.useRef(null);let o=0;const[a,d]=t.useState(0);return t.useEffect((()=>{var e;1===a?null===(e=r.current)||void 0===e||e.focus():d(a+1)}),[a]),n.default.createElement(n.default.Fragment,null,e.map(((e,t)=>{const{content:a,buttonType:d="normal",autoFocus:i=!1,...l}=e,c=Qo[d];return n.default.createElement(c,Tt({key:t},l,{ref:i&&0===o?(o++,r):null}),a)})))},CloseButton:ta}),oa=d.default.header`
   padding: ${vt("space.2")};
   display: flex;
   flex-direction: row;
@@ -379,7 +379,7 @@
   align-items: end;
   justify-content: end;
   padding: ${vt("space.1")} ${vt("space.3")} ${vt("space.3")};
-`,ca=({footerButtons:e})=>{const{containerRef:t}=Co({bindKeys:Er.ArrowHorizontal|Er.Tab,focusInStrategy:"closest"});return n.default.createElement(la,{ref:t},n.default.createElement(ra.Buttons,{buttons:null!=e?e:[]}))};ca.displayName="ConfirmationFooter";const sa=e=>{const{onClose:r,title:o,cancelButtonContent:a="Cancel",confirmButtonContent:d="OK",confirmButtonType:i="normal",children:l}=e,c=[{content:a,onClick:t.useCallback((()=>{r("cancel")}),[r])},{content:d,buttonType:i,onClick:t.useCallback((()=>{r("confirm")}),[r]),autoFocus:!0}];return n.default.createElement(ra,{onClose:r,title:o,footerButtons:c,role:"alertdialog",width:"medium",renderHeader:na,renderBody:ia,renderFooter:ca},l)};sa.displayName="ConfirmationDialog";const fa=d.default.div`
+`,ca=({footerButtons:e})=>{const{containerRef:t}=Co({bindKeys:Er.ArrowHorizontal|Er.Tab,focusInStrategy:"closest"});return n.default.createElement(la,{ref:t},n.default.createElement(ra.Buttons,{buttons:null!=e?e:[]}))};ca.displayName="ConfirmationFooter";const sa=e=>{const{onClose:r,title:o,cancelButtonContent:a="Cancel",confirmButtonContent:d="OK",confirmButtonType:i="normal",children:l}=e,c=[{content:a,onClick:t.useCallback((()=>{r("cancel")}),[r]),autoFocus:!0},{content:d,buttonType:i,onClick:t.useCallback((()=>{r("confirm")}),[r])}];return n.default.createElement(ra,{onClose:r,title:o,footerButtons:c,role:"alertdialog",width:"medium",renderHeader:na,renderBody:ia,renderFooter:ca},l)};sa.displayName="ConfirmationDialog";const fa=d.default.div`
    {
     /* 6px vertical padding + 20px line height = 32px total height
      *
@@ -413,7 +413,7 @@
   background: ${vt("colors.border.muted")};
   margin-top: calc(${vt("space.2")} - 1px);
   margin-bottom: ${vt("space.2")};
-`;function xa(){return n.default.createElement(ha,null)}xa.displayName="Divider",xa.renderItem=xa;const va={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)"}}},ya=(e="default",t)=>{if(t)return{color:vt("colors.fg.muted"),iconColor:vt("colors.fg.muted"),annotationColor:vt("colors.fg.muted"),hoverCursor:"default"};switch(e){case"danger":return{color:vt("colors.danger.fg"),iconColor:vt("colors.danger.fg"),annotationColor:vt("colors.fg.muted"),hoverCursor:"pointer"};default:return{color:"inherit",iconColor:vt("colors.fg.muted"),annotationColor:vt("colors.fg.muted"),hoverCursor:"pointer"}}},wa=d.default.div`
+`;function xa(){return n.default.createElement(ha,null)}xa.displayName="Divider",xa.renderItem=xa;const va={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)"}}},ya=(e="default",t)=>{if(t)return{color:vt("colors.fg.muted"),iconColor:vt("colors.fg.muted"),annotationColor:vt("colors.fg.muted"),hoverCursor:"default"};switch(e){case"danger":return{color:vt("colors.danger.fg"),iconColor:vt("colors.danger.fg"),annotationColor:vt("colors.fg.muted"),hoverCursor:"pointer"};default:return{color:vt("colors.fg.default"),iconColor:vt("colors.fg.muted"),annotationColor:vt("colors.fg.muted"),hoverCursor:"pointer"}}},wa=d.default.div`
   display: flex;
   min-width: 0;
 
@@ -438,6 +438,7 @@
   color: ${({variant:e,item:t})=>ya(e,null==t?void 0:t.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 @@
   flex-basis: var(--description-container-flex-basis);
 `,Aa=d.default.input`
   pointer-events: none;
-`;function Na(e){const{text:r,description:o,descriptionVariant:a="inline",selected:d,selectionVariant:i,leadingVisual:l,trailingIcon:c,trailingText:s,variant:f="default",showDivider:b,disabled:g,onAction:u,onKeyPress:p,children:m,onClick:h,id:x,...v}=e,y=Po(),w=Po(),B=t.useCallback((t=>{if(g)return;null==p||p(t);t.target instanceof HTMLInputElement&&"checkbox"===t.target.type&&" "===t.key||!t.defaultPrevented&&[" ","Enter"].includes(t.key)&&(null==u||u(e,t))}),[u,g,e,p]),$=t.useCallback((t=>{g||(null==h||h(t),t.defaultPrevented||null==u||u(e,t))}),[u,g,e,h]),k=va[f],S=Gt(k.hover,"inherit"),T=Gt(k.focus,"inherit"),{theme:E}=Ut();return n.default.createElement($a,Tt({tabIndex:g?void 0:-1,variant:f,showDivider:b,"aria-selected":d,"aria-labelledby":r?y:void 0,"aria-describedby":o?w:void 0},v,{"data-id":x,onKeyPress:B,onClick:$,hoverBackground:g?"inherit":S,focusBackground:g?"inherit":T}),!!d===d&&n.default.createElement(Sa,null,"multiple"===i?n.default.createElement(n.default.Fragment,null,n.default.createElement(Aa,{disabled:g,tabIndex:-1,type:"checkbox",checked:d,"aria-label":r,readOnly:!0,"aria-readonly":"false"})):d&&n.default.createElement(Qr,{fill:null==E?void 0:E.colors.text.primary})),l&&n.default.createElement(Ea,{variant:f,disabled:g},n.default.createElement(l,null)),n.default.createElement(wa,null,n.default.createElement(Ba,{style:{"--main-content-flex-direction":"inline"===a?"row":"column"}},m,r?n.default.createElement(ka,{id:y},r):null,o?n.default.createElement(Ia,{id:w,style:{"--description-container-margin-left":"inline"===a?vt("space.2")(E):0,"--description-container-flex-basis":"inline"===a?0:"auto"}},"block"===a?o:n.default.createElement(ma,{title:o,inline:!0,maxWidth:"100%"},o)):null),c||s?n.default.createElement(Ca,{variant:f,disabled:g},s,c&&n.default.createElement(c,null)):null))}Na.displayName="Item";const Ra=d.default.div`
+`,Na=n.default.forwardRef(((e,r)=>{const{as:o,text:a,description:d,descriptionVariant:i="inline",selected:l,selectionVariant:c,leadingVisual:s,trailingIcon:f,trailingText:b,variant:g="default",showDivider:u,disabled:p,onAction:m,onKeyPress:h,children:x,onClick:v,id:y,...w}=e,B=Po(),$=Po(),k=t.useCallback((t=>{if(p)return;null==h||h(t);t.target instanceof HTMLInputElement&&"checkbox"===t.target.type&&" "===t.key||!t.defaultPrevented&&[" ","Enter"].includes(t.key)&&(null==m||m(e,t))}),[m,p,e,h]),S=t.useCallback((t=>{p||(null==v||v(t),t.defaultPrevented||null==m||m(e,t))}),[m,p,e,v]),T=va[g],E=Gt(T.hover,"inherit"),C=Gt(T.focus,"inherit"),{theme:I}=Ut();return n.default.createElement($a,Tt({ref:r,as:o,tabIndex:p?void 0:-1,variant:g,showDivider:u,"aria-selected":l,"aria-labelledby":a?B:void 0,"aria-describedby":d?$:void 0},w,{"data-id":y,onKeyPress:k,onClick:S,hoverBackground:p?"inherit":E,focusBackground:p?"inherit":C}),!!l===l&&n.default.createElement(Sa,null,"multiple"===c?n.default.createElement(n.default.Fragment,null,n.default.createElement(Aa,{disabled:p,tabIndex:-1,type:"checkbox",checked:l,"aria-label":a,readOnly:!0,"aria-readonly":"false"})):l&&n.default.createElement(Qr,{fill:null==I?void 0:I.colors.text.primary})),s&&n.default.createElement(Ea,{variant:g,disabled:p},n.default.createElement(s,null)),n.default.createElement(wa,null,n.default.createElement(Ba,{style:{"--main-content-flex-direction":"inline"===i?"row":"column"}},x,a?n.default.createElement(ka,{id:B},a):null,d?n.default.createElement(Ia,{id:$,style:{"--description-container-margin-left":"inline"===i?vt("space.2")(I):0,"--description-container-flex-basis":"inline"===i?0:"auto"}},"block"===i?d:n.default.createElement(ma,{title:d,inline:!0,maxWidth:"100%"},d)):null),f||b?n.default.createElement(Ca,{variant:g,disabled:p},b,f&&n.default.createElement(f,null)):null))}));const Ra=d.default.div`
   font-size: ${vt("fontSizes.1")};
   /* 14px font-size * 1.428571429 = 20px line height
    *
@@ -554,7 +555,7 @@
     --item-hover-bg-override: none;
     --item-hover-divider-border-color-override: ${vt("colors.border.muted")};
   }
-`;const za=n.default.forwardRef(((e,t)=>{const{firstGroupStyle:r,lastGroupStyle:o,headerStyle:a,itemStyle:d}=function(e="inset"){switch(e){case"full":return{headerStyle:{paddingX:vt("space.2")},itemStyle:{borderRadius:0}};default:return{firstGroupStyle:{marginTop:vt("space.2")},lastGroupStyle:{marginBottom:vt("space.2")},itemStyle:{marginX:vt("space.2")}}}}(e.variant),i=(t,r,o)=>{var a,i,l;const c="renderItem"in t&&t.renderItem||e.renderItem||Na,s=null!==(a=null!==(i=t.key)&&void 0!==i?i:null===(l=t.id)||void 0===l?void 0:l.toString())&&void 0!==a?a:o.toString();return n.default.createElement(c,Tt({showDivider:e.showItemDividers,selectionVariant:e.selectionVariant},t,{key:s,sx:{...d,...t.sx},item:r}))};let l=[];if(function(e){return"groupMetadata"in e}(e)){const t=e.groupMetadata.reduce(((e,t)=>e.set(t.groupId,t)),new Map);for(const r of e.items){var c,s,f;const e=t.get(r.groupId),o=null!==(c=null==e||null===(s=e.items)||void 0===s?void 0:s.length)&&void 0!==c?c:0;t.set(r.groupId,{...e,items:[...null!==(f=null==e?void 0:e.items)&&void 0!==f?f:[],i({showDivider:null==e?void 0:e.showItemDividers,...e&&"renderItem"in e&&{renderItem:e.renderItem},...r},r,o)]})}l=[...t.values()]}else l=[{items:e.items.map(((e,t)=>i(e,e,t))),groupId:"0"}];return n.default.createElement(Ra,Tt({},e,{ref:t}),l.map((({header:t,...d},i)=>{const c="filled"===(null==t?void 0:t.variant),s=i>0&&!c;return n.default.createElement(n.default.Fragment,{key:d.groupId},s?n.default.createElement(xa,{key:`${d.groupId}-divider`}):null,(t=>{var r;const o=(null!==(r="renderGroup"in t&&t.renderGroup)&&void 0!==r?r:e.renderGroup)||ua;return n.default.createElement(o,Tt({},t,{key:t.groupId}))})({sx:{...0===i&&r,...i===l.length-1&&o,...i>0&&!s&&{mt:2}},...t&&{header:{...t,sx:{...a,...t.sx}}},...d}))})))}));za.displayName="ActionList";const La=Object.assign(za,{Group:ua,Item:Na,Divider:xa}),Ha={xsmall:"192px",small:"256px",medium:"320px",large:"432px",xlarge:"600px",auto:"auto",initial:"auto"},Oa={small:"256px",medium:"320px",large:"480px",xlarge:"640px",xxlarge:"960px",auto:"auto"};const Ma=d.default.div`
+`;const za=n.default.forwardRef(((e,t)=>{const{firstGroupStyle:r,lastGroupStyle:o,headerStyle:a,itemStyle:d}=function(e="inset"){switch(e){case"full":return{headerStyle:{paddingX:vt("space.2")},itemStyle:{borderRadius:0}};default:return{firstGroupStyle:{marginTop:vt("space.2")},lastGroupStyle:{marginBottom:vt("space.2")},itemStyle:{marginX:vt("space.2")}}}}(e.variant),i=(t,r,o)=>{var a,i,l;const c="renderItem"in t&&t.renderItem||e.renderItem||Na,s=null!==(a=null!==(i="key"in t?t.key:void 0)&&void 0!==i?i:null===(l=t.id)||void 0===l?void 0:l.toString())&&void 0!==a?a:o.toString();return n.default.createElement(c,Tt({showDivider:e.showItemDividers,selectionVariant:e.selectionVariant},t,{key:s,sx:{...d,...t.sx},item:r}))};let l=[];if(function(e){return"groupMetadata"in e}(e)){const t=e.groupMetadata.reduce(((e,t)=>e.set(t.groupId,t)),new Map);for(const r of e.items){var c,s,f;const e=t.get(r.groupId),o=null!==(c=null==e||null===(s=e.items)||void 0===s?void 0:s.length)&&void 0!==c?c:0;t.set(r.groupId,{...e,items:[...null!==(f=null==e?void 0:e.items)&&void 0!==f?f:[],i({showDivider:null==e?void 0:e.showItemDividers,...e&&"renderItem"in e&&{renderItem:e.renderItem},...r},r,o)]})}l=[...t.values()]}else l=[{items:e.items.map(((e,t)=>i(e,e,t))),groupId:"0"}];return n.default.createElement(Ra,Tt({},e,{ref:t}),l.map((({header:t,...d},i)=>{const c="filled"===(null==t?void 0:t.variant),s=i>0&&!c;return n.default.createElement(n.default.Fragment,{key:d.groupId},s?n.default.createElement(xa,{key:`${d.groupId}-divider`}):null,(t=>{var r;const o=(null!==(r="renderGroup"in t&&t.renderGroup)&&void 0!==r?r:e.renderGroup)||ua;return n.default.createElement(o,Tt({},t,{key:t.groupId}))})({sx:{...0===i&&r,...i===l.length-1&&o,...i>0&&!s&&{mt:2}},...t&&{header:{...t,sx:{...a,...t.sx}}},...d}))})))}));za.displayName="ActionList";const La=Object.assign(za,{Group:ua,Item:Na,Divider:xa}),Ha={xsmall:"192px",small:"256px",medium:"320px",large:"432px",xlarge:"600px",auto:"auto",initial:"auto"},Oa={small:"256px",medium:"320px",large:"480px",xlarge:"640px",xxlarge:"960px",auto:"auto"};const Ma=d.default.div`
   background-color: ${vt("colors.canvas.overlay")};
   box-shadow: ${vt("shadows.overlay.shadow")};
   position: absolute;