@primer/components 0.0.0-2021103213523 → 0.0.0-2021103215725

package/dist/browser.umd.js

@@ -1308,8 +1308,12 @@
   position: ${e=>e.relative?"relative":"absolute"};
   z-index: 100;
   display: ${e=>e.open?"block":"none"};
+
+  ${yt};
+  ${kt};
+  ${$t};
   ${Kt};
-`,Fi=i.default.div`
+`,Fi=i.default(qt)`
   border: 1px solid ${xt("colors.border.default")};
   border-radius: ${xt("radii.2")};
   position: relative;
@@ -1319,6 +1323,9 @@
   padding: ${xt("space.4")};
   background-color: ${xt("colors.canvas.overlay")};
 
+  ${yt};
+  ${kt};
+
   // Carets
   &::before,
   &::after {
@@ -1500,14 +1507,12 @@
   ${Kt};
 `;function Vi({progress:e,bg:t,theme:r,...a}){return n.default.createElement(Gi,Tt({theme:r},a),n.default.createElement(ji,{progress:e,bg:t,theme:r}))}function Ki(e,r,a){const o=t.useCallback((t=>{const o=()=>{a(!0)},n=t=>{const r=Array.from(e.current.querySelectorAll('[role^="menuitem"]:not([hidden]):not([disabled]):not([aria-disabled="true"])')),a=document.activeElement,o=r.indexOf(a),n=t?r[o+1]:r[o-1],i=t?r[0]:r[r.length-1];return n||i};if(!(t instanceof KeyboardEvent))return;const i=t.target instanceof Element&&"SUMMARY"===t.target.tagName;switch(t.key){case"Escape":r&&((()=>{a(!1);const t=e.current.querySelector("summary");t&&t.focus()})(),t.preventDefault(),t.stopPropagation());break;case"ArrowDown":{i&&!r&&o();const e=n(!0);e&&e.focus(),t.preventDefault()}break;case"ArrowUp":{i&&!r&&o();const e=n(!1);e&&e.focus(),t.preventDefault()}break;case" ":case"Enter":{const r=document.activeElement;r&&(e=>{const t=e.getAttribute("role");return"menuitem"===t||"menuitemcheckbox"===t||"menuitemradio"===t})(r)&&r.closest("details")===e&&(t.preventDefault(),t.stopPropagation(),r.click())}}}),[e,r,a]);t.useEffect((()=>{const t=e.current;if(t)return t.addEventListener("keydown",o),()=>{t.removeEventListener("keydown",o)}}),[e,o])}Vi.displayName="ProgressBar",Vi.defaultProps={bg:"success.emphasis",barSize:"default"};const qi=t.createContext({}),Xi=r.css(["padding:"," ",";margin:0;font-size:",";font-weight:",";color:",";background-color:",";border-bottom:"," solid ",";"],xt("space.1"),xt("space.3"),xt("fontSizes.0"),xt("fontWeights.bold"),xt("colors.fg.muted"),xt("colors.canvas.subtle"),xt("borderWidths.1"),xt("colors.border.muted")),Yi=i.default.div`
   ${Xi}
-  ${yt}
   ${Kt};
 `;Yi.displayName="SelectMenu.Divider";var Ji=Yi;const Zi=i.default.form`
   padding: ${xt("space.3")};
   margin: 0;
   border-bottom: ${xt("borderWidths.1")} solid ${xt("colors.border.muted")};
   background-color: ${xt("colors.canvas.overlay")};
-  ${yt};
 
   @media (min-width: ${xt("breakpoints.0")}) {
     padding: ${xt("space.2")};
@@ -1516,7 +1521,6 @@
   ${Kt};
 `,Qi=t.forwardRef((({theme:e,value:r,sx:a,...o},i)=>{const l=t.useRef(null),d=null!=i?i:l,{open:s}=t.useContext(qi);return t.useEffect((()=>{var e;s&&(null===(e=l.current)||void 0===e||e.focus())}),[s]),n.default.createElement(Zi,{theme:e,sx:a},n.default.createElement(en,Tt({theme:e,ref:d,width:"100%",block:!0,value:r,contrast:!0},o)))}));Qi.displayName="SelectMenu.Filter";var el=Qi;const tl=r.css(["margin-top:-1px;padding:"," ",";font-size:",";color:",";text-align:center;border-top:"," solid ",";@media (min-width:","){padding:"," ",";}"],xt("space.2"),xt("space.3"),xt("fontSizes.0"),xt("colors.fg.muted"),xt("borderWidths.1"),xt("colors.border.muted"),xt("breakpoints.0"),xt("space.1"),xt("space.2")),rl=i.default.footer`
   ${tl}
-  ${yt}
   ${Kt};
 `;rl.displayName="SelectMenu.Footer";var al=rl;const ol=i.default.h3`
   color: ${xt("colors.fg.default")};
@@ -1533,8 +1537,6 @@
   flex: none; // fixes header from getting squeezed in Safari iOS
   padding: ${xt("space.3")};
   border-bottom: ${xt("borderWidths")} solid ${xt("colors.border.muted")};
-  ${yt}
-  ${wt}
 
   @media (min-width: ${xt("breakpoints.0")}) {
     padding-top: ${xt("space.2")};
@@ -1544,11 +1546,9 @@
   ${Kt};
 `,il=({children:e,theme:t,...r})=>n.default.createElement(nl,Tt({theme:t},r),n.default.createElement(ol,{theme:t},e));il.displayName="SelectMenuHeader",il.displayName="SelectMenu.Header";var ll=il;const dl=r.css(["display:flex;align-items:center;padding:",";overflow:hidden;text-align:left;cursor:pointer;background-color:",";border:0;border-bottom:"," solid ",";color:",";text-decoration:none;font-size:",";font-family:inherit;width:100%;&:hover{text-decoration:none;}&:focus{outline:none;}&[hidden]{display:none !important;}@media (min-width:","){padding-top:",";padding-bottom:",";}.SelectMenu-icon{width:",";margin-right:",";flex-shrink:0;}.SelectMenu-selected-icon{visibility:hidden;transition:transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear;transform:scale(0);}&[aria-checked='true']{font-weight:500;color:",";.SelectMenu-selected-icon{visibility:visible;transition:transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear;transform:scale(1);}}@media (hover:hover){&:hover,&:active,&:focus{background-color:",";}}@media (hover:none){&:focus,&:active{background-color:",";}-webkit-tap-highlight-color:",";}"],xt("space.3"),xt("colors.canvas.overlay"),xt("borderWidths.1"),xt("colors.border.muted"),xt("colors.fg.muted"),xt("fontSizes.0"),xt("breakpoints.0"),xt("space.2"),xt("space.2"),xt("space.3"),xt("space.2"),xt("colors.fg.default"),xt("colors.neutral.subtle"),xt("colors.canvas.subtle"),xt("colors.selectMenu.tapHighlight")),sl=i.default.a.attrs((()=>({role:"menuitemcheckbox"})))`
   ${dl}
-  ${yt}
   ${Kt};
 `,cl=t.forwardRef((({children:e,selected:r,theme:a,onClick:o,...i},l)=>{const d=t.useContext(qi),s=t.useRef(null),c=null!=l?l:s;return n.default.createElement(sl,Tt({ref:c},i,{theme:a,onClick:e=>{var t;(o&&o(e),e.defaultPrevented)||(null===(t=d.setOpen)||void 0===t||t.call(d,!1))},"aria-checked":r}),n.default.createElement(Ca,{theme:a,className:"SelectMenu-icon SelectMenu-selected-icon",icon:ea}),e)}));cl.defaultProps={selected:!1},cl.displayName="SelectMenu.Item";var fl=cl;const ul=r.css(["position:relative;padding:0;margin:0;flex:auto;overflow-x:hidden;overflow-y:auto;background-color:",";-webkit-overflow-scrolling:touch;@media (hover:hover){.SelectMenuTab:focus{background-color:",";}.SelectMenuTab:not([aria-checked='true']):hover{color:",";background-color:",";}.SelectMenuTab:not([aria-checked='true']):active{color:",";background-color:",";}}"],xt("colors.canvas.overlay"),xt("colors.selectMenu.tapFocusBg"),xt("colors.fg.default"),xt("colors.canvas.subtle"),xt("colors.fg.default"),xt("colors.canvas.subtle")),gl=i.default.div`
   ${ul}
-  ${yt}
   ${Kt};
 `;gl.displayName="SelectMenu.List";var pl=gl;const bl={small:"16px",medium:"32px",large:"64px"};function ml({size:e="medium",...t}){const r=bl[e];return n.default.createElement("svg",Tt({height:r,width:r,viewBox:"0 0 16 16",fill:"none"},t),n.default.createElement("circle",{cx:"8",cy:"8",r:"7",stroke:"currentColor",strokeOpacity:"0.25",strokeWidth:"2",vectorEffect:"non-scaling-stroke"}),n.default.createElement("path",{d:"M15 8a7.002 7.002 0 00-7-7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",vectorEffect:"non-scaling-stroke"}))}ml.displayName="Spinner";const hl=i.default(ml)`
   @keyframes rotate-keyframes {
@@ -1565,29 +1565,24 @@
   padding: ${xt("space.6")} ${xt("space.4")};
   text-align: center;
   background-color: ${xt("colors.canvas.overlay")};
-  ${yt}
+  ${Kt}
 `,yl=e=>n.default.createElement(xl,e,n.default.createElement(vl,null));yl.displayName="SelectMenuLoadingAnimation";var wl=yl;const Bl=r.keyframes(["0%{opacity:0;transform:scale(0.9);}"]),kl=r.css(["position:relative;z-index:99;display:flex;",";max-height:",";margin:auto 0;",";overflow:hidden;pointer-events:auto;flex-direction:column;background-color:",";border-radius:",";box-shadow:",";animation:"," 0.12s cubic-bezier(0,0.1,0.1,1) backwards;@media (min-width:","){height:auto;max-height:350px;margin:"," 0 "," 0;font-size:",";border:"," solid ",";border-radius:",";box-shadow:",";}"],(e=>e.filter?"height: 80%":""),(e=>e.filter?"none":"66%"),(e=>e.filter?"margin-top: 0":""),xt("colors.canvas.overlay"),xt("radii.2"),xt("shadows.shadow.small"),Bl,xt("breakpoints.0"),xt("space.1"),xt("space.3"),xt("fontSizes.0"),xt("borderWidths.1"),xt("colors.border.default"),xt("radii.2"),xt("shadows.shadow.small")),$l=r.css(["position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;display:flex;padding:",";pointer-events:none;flex-direction:column;&::before{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;content:'';background-color:",";@media (min-width:","){display:none;}}@media (min-width:","){position:absolute;top:auto;right:",";bottom:auto;left:auto;padding:0;}"],xt("space.3"),xt("colors.primer.canvas.backdrop"),xt("breakpoints.0"),xt("breakpoints.0"),(e=>"right"===e.align?"0":"auto")),Sl=i.default.div`
   ${kl}
   ${ie}
 `,Tl=i.default.div`
   ${$l}
-  ${yt}
   ${Kt};
 `,El=n.default.forwardRef((({children:e,theme:t,width:r,...a},o)=>n.default.createElement(Tl,Tt({theme:t},a,{role:"menu",ref:o}),n.default.createElement(Sl,{theme:t,width:r},e))));El.defaultProps={align:"left",width:"300px"},El.displayName="SelectMenu.Modal";var Cl=El;const zl=r.css(["flex:1;padding:"," ",";font-size:",";font-weight:500;color:",";text-align:center;background-color:transparent;border:0;box-shadow:inset 0 -1px 0 ",";@media (min-width:","){flex:none;padding:"," ",";border:"," solid transparent;border-bottom-width:0;border-top-left-radius:",";border-top-right-radius:",";}&[aria-selected='true']{z-index:1;color:",";background-color:",";box-shadow:0 0 0 1px ",";@media (min-width:","){border-color:",";box-shadow:none;}}&:focus{background-color:",";}"],xt("space.2"),xt("space.3"),xt("fontSizes.0"),xt("colors.fg.muted"),xt("colors.border.muted"),xt("breakpoints.0"),xt("space.1"),xt("space.3"),xt("borderWidths.1"),xt("radii.2"),xt("radii.2"),xt("colors.text-primary"),xt("colors.canvas.overlay"),xt("colors.border.muted"),xt("breakpoints.0"),xt("colors.border.muted"),xt("colors.neutral.subtle")),Rl=i.default.button`
   ${zl}
-  ${yt}
   ${Kt};
 `,Nl=({tabName:e="",index:r,className:a,onClick:o,...i})=>{const l=t.useContext(qi);t.useEffect((()=>{var t;l.selectedTab||0!==r||(null===(t=l.setSelectedTab)||void 0===t||t.call(l,e))}),[r,l,e]);const d=l.selectedTab===e;return n.default.createElement(Rl,Tt({role:"tab",className:Xo("SelectMenuTab",a),"aria-selected":d,onClick:t=>{var r;(o&&o(t),t.defaultPrevented)||(null===(r=l.setSelectedTab)||void 0===r||r.call(l,e))}},i),e)};Nl.displayName="SelectMenuTab",Nl.displayName="SelectMenu.Tab";var Al=Nl;const Il=i.default.div`
   border-top: ${xt("borderWidths.1")} solid ${xt("colors.border.muted")};
-  ${yt}
   ${Kt};
 `,Ll=({tabName:e,className:r,children:a,...o})=>{const i=t.useContext(qi);return n.default.createElement(Il,Tt({role:"tabpanel",className:r,hidden:i.selectedTab!==e},o),n.default.createElement(pl,null,a))};Ll.displayName="TabPanel",Ll.displayName="SelectMenu.TabPanel";var Ol=Ll;const Ml=r.css(["display:flex;flex-shrink:0;margin-bottom:-1px;-webkit-overflow-scrolling:touch;overflow-x:auto;overflow-y:hidden;&::-webkit-scrollbar{display:none;}@media (min-width:","){padding:0 ",";margin-top:",";}"],xt("breakpoints.0"),xt("space.2"),xt("space.3")),Pl=i.default.div`
   ${Ml}
-  ${yt}
   ${Kt};
 `,Hl=({children:e,...t})=>n.default.createElement(Pl,Tt({role:"tablist"},t),e);Hl.displayName="SelectMenuTabs",Hl.displayName="SelectMenu.Tabs";var Dl=Hl;const Wl=i.default.details`
   ${"\n  // Remove marker added by the display: list-item browser default\n  > summary {\n    list-style: none;\n  }\n  // Remove marker added by details polyfill\n  > summary::before {\n    display: none;\n  }\n  // Remove marker added by Chrome\n  > summary::-webkit-details-marker {\n    display: none;\n  }\n"}
-  ${yt}
   ${Kt};
 `,Fl=n.default.forwardRef((({children:e,initialTab:r="",as:a,...o},i)=>{const l=t.useRef(null),d=null!=i?i:l,[s,c]=t.useState(r),[f,u]=t.useState(!1),g={selectedTab:s,setSelectedTab:c,setOpen:u,open:f,initialTab:r},p=t.useCallback((e=>{"current"in d&&d.current&&!d.current.contains(e.target)&&(e.defaultPrevented||u(!1))}),[d,u]);return t.useEffect((()=>{if(f)return document.addEventListener("click",p),()=>{document.removeEventListener("click",p)}}),[f,p]),Ki(d,f,u),n.default.createElement(qi.Provider,{value:g},n.default.createElement(Wl,Tt({ref:d},o,{open:f,onToggle:function(e){u(e.target.open)}}),e))}));Fl.displayName="SelectMenu";var _l=Object.assign(Fl,{MenuContext:qi,List:pl,Divider:Ji,Filter:el,Footer:al,Item:fl,Modal:Cl,Tabs:Dl,Tab:Al,TabPanel:Ol,Header:ll,LoadingAnimation:wl});function jl({variant:e,className:t,bordered:r,children:a,...o}){const i=Xo(t,`variant-${"lightweight"===e?"lightweight":"normal"}`);return r||(o={...o,borderWidth:0}),n.default.createElement(qt,Tt({borderWidth:"1px",borderStyle:"solid",borderColor:"border.default",borderRadius:2,as:"nav",className:i},o),a)}jl.displayName="SideNavBase";const Ul=i.default(jl)`
   background-color: ${xt("colors.canvas.subtle")};