@primer/components 0.0.0-20211030163410 → 0.0.0-20211030164933

package/dist/browser.umd.js

@@ -864,9 +864,9 @@
   height: auto;
   max-width: 60%;
   max-height: 55%;
-`;Hn.defaultProps={inline:!1},Wn.displayName="CircleBadge.Icon";var jn=Object.assign(Hn,{Icon:Wn});function _n(e){const{size:t,as:r}=e,{icon:a,bg:o,...i}=e;return n.default.createElement(_t,{as:r,bg:o,overflow:"hidden",borderWidth:0,size:t,borderRadius:"50%",borderStyle:"solid",borderColor:"border.default"},n.default.createElement(_t,Bt({display:"flex"},i,{alignItems:"center",justifyContent:"center"}),n.default.createElement(a,{size:t})))}_n.displayName="CircleOcticon",_n.defaultProps={..._t.defaultProps,size:32};const Vn={success:Yr,error:Gr},Un={success:"success.fg",error:"danger.fg"},qn=({children:e,id:t,validationStatus:r})=>{const a=r?Vn[r]:void 0,o=r?Un[r]:void 0;return n.default.createElement(Bi,{display:"flex",color:o,fontSize:0,sx:{alignItems:"baseline",a:{color:"currentColor",textDecoration:"underline"}}},a&&n.default.createElement(_t,{as:"span",mr:1},n.default.createElement(a,{size:12,fill:"currentColor"})),n.default.createElement("span",{id:t},e))};qn.displayName="InputValidation";var Kn=qn;const Gn=e=>n.default.createElement(Bi,Bt({color:"fg.muted",fontSize:0},e));Gn.displayName="InputCaption";var Xn=Gn;var Yn=e=>{const t=n.default.createContext({registerSlot:()=>null,unregisterSlot:()=>null,context:{}});return{Slots:({context:r={},children:a})=>{const o={};e.map((e=>o[e]=null));const i=n.default.useRef(o),l=(()=>{const[,e]=n.default.useState({});return n.default.useCallback((()=>e({})),[])})(),[d,s]=n.default.useState(!1);n.default.useEffect((()=>{l(),s(!0)}),[l]);const c=n.default.useCallback(((e,t)=>{i.current[e]=t,d&&l()}),[d,l]),f=n.default.useCallback((e=>{i.current[e]=null,l()}),[l]),u=i.current;return n.default.createElement(t.Provider,{value:{registerSlot:c,unregisterSlot:f,context:r}},a(u))},Slot:({name:e,children:r})=>{const{registerSlot:a,unregisterSlot:o,context:i}=n.default.useContext(t);return n.default.useEffect((()=>(a(e,"function"==typeof r?r(i):r),()=>o(e))),[e,r,a,o,i]),null}}};const{Slots:Jn,Slot:Zn}=Yn(["Caption","Input","Label","LeadingVisual"]),Qn=({children:e})=>n.default.createElement(Zn,{name:"Caption"},(({captionId:t})=>n.default.createElement(Xn,{id:t},e)));Qn.displayName="InputFieldCaption";var ei=Qn;const ti=({children:e,disabled:t,required:r,visuallyHidden:a,htmlFor:o})=>n.default.createElement(rn,{isVisible:!a,as:"label",htmlFor:o,title:r?"required field":void 0,sx:{fontWeight:"bold",fontSize:1,display:"block",color:t?"fg.muted":"fg.default"}},r?n.default.createElement(_t,{display:"flex",as:"span"},n.default.createElement(_t,{mr:1},e),n.default.createElement("span",null,"*")):e);ti.displayName="InputLabel";var ri=ti;const ai=({children:e,visuallyHidden:t})=>n.default.createElement(Zn,{name:"Label"},(({disabled:r,id:a,required:o})=>n.default.createElement(ri,{htmlFor:a,visuallyHidden:t,required:o,disabled:r},e)));ai.displayName="InputFieldLabel";var oi=ai;var ni=({children:e})=>n.default.createElement(n.default.Fragment,null,e);const ii=r.keyframes(["0%{opacity:0;transform:translateY(-100%);}100%{opacity:1;transform:translateY(0);}"]),li=i.default.div`
+`;Hn.defaultProps={inline:!1},Wn.displayName="CircleBadge.Icon";var jn=Object.assign(Hn,{Icon:Wn});function _n(e){const{size:t,as:r}=e,{icon:a,bg:o,...i}=e;return n.default.createElement(_t,{as:r,bg:o,overflow:"hidden",borderWidth:0,size:t,borderRadius:"50%",borderStyle:"solid",borderColor:"border.default"},n.default.createElement(_t,Bt({display:"flex"},i,{alignItems:"center",justifyContent:"center"}),n.default.createElement(a,{size:t})))}_n.displayName="CircleOcticon",_n.defaultProps={..._t.defaultProps,size:32};const Vn={success:Yr,error:Gr},Un={success:"success.fg",error:"danger.fg"},qn=({children:e,id:t,validationStatus:r})=>{const a=r?Vn[r]:void 0,o=r?Un[r]:void 0;return n.default.createElement(Bi,{display:"flex",color:o,fontSize:0,sx:{alignItems:"baseline",a:{color:"currentColor",textDecoration:"underline"}}},a&&n.default.createElement(_t,{as:"span",mr:1},n.default.createElement(a,{size:12,fill:"currentColor"})),n.default.createElement("span",{id:t},e))};qn.displayName="InputValidation";var Kn=qn;const Gn=({children:e,disabled:t,id:r})=>n.default.createElement(Bi,{color:t?"fg.subtle":"fg.muted",fontSize:0,id:r},e);Gn.displayName="InputCaption";var Xn=Gn;var Yn=e=>{const t=n.default.createContext({registerSlot:()=>null,unregisterSlot:()=>null,context:{}});return{Slots:({context:r={},children:a})=>{const o={};e.map((e=>o[e]=null));const i=n.default.useRef(o),l=(()=>{const[,e]=n.default.useState({});return n.default.useCallback((()=>e({})),[])})(),[d,s]=n.default.useState(!1);n.default.useEffect((()=>{l(),s(!0)}),[l]);const c=n.default.useCallback(((e,t)=>{i.current[e]=t,d&&l()}),[d,l]),f=n.default.useCallback((e=>{i.current[e]=null,l()}),[l]),u=i.current;return n.default.createElement(t.Provider,{value:{registerSlot:c,unregisterSlot:f,context:r}},a(u))},Slot:({name:e,children:r})=>{const{registerSlot:a,unregisterSlot:o,context:i}=n.default.useContext(t);return n.default.useEffect((()=>(a(e,"function"==typeof r?r(i):r),()=>o(e))),[e,r,a,o,i]),null}}};const{Slots:Jn,Slot:Zn}=Yn(["Caption","Input","Label","LeadingVisual"]),Qn=({children:e})=>n.default.createElement(Zn,{name:"Caption"},(({captionId:t,disabled:r})=>n.default.createElement(Xn,{id:t,disabled:r},e)));Qn.displayName="InputFieldCaption";var ei=Qn;const ti=({children:e,disabled:t,required:r,visuallyHidden:a,htmlFor:o})=>n.default.createElement(rn,{isVisible:!a,as:"label",htmlFor:o,title:r?"required field":void 0,sx:{fontWeight:"bold",fontSize:1,display:"block",color:t?"fg.muted":"fg.default"}},r?n.default.createElement(_t,{display:"flex",as:"span"},n.default.createElement(_t,{mr:1},e),n.default.createElement("span",null,"*")):e);ti.displayName="InputLabel";var ri=ti;const ai=({children:e,visuallyHidden:t})=>n.default.createElement(Zn,{name:"Label"},(({disabled:r,id:a,required:o})=>n.default.createElement(ri,{htmlFor:a,visuallyHidden:t,required:o,disabled:r},e)));ai.displayName="InputFieldLabel";var oi=ai;var ni=({children:e})=>n.default.createElement(n.default.Fragment,null,e);const ii=r.keyframes(["0%{opacity:0;transform:translateY(-100%);}100%{opacity:1;transform:translateY(0);}"]),li=i.default.div`
   animation: ${e=>e.show&&r.css(["170ms "," cubic-bezier(0.44,0.74,0.36,1);"],ii)};
-`;var di=({show:e,children:r})=>{const[a,o]=t.useState(e);t.useEffect((()=>{e&&o(!0)}),[e]);return a?n.default.createElement(_t,{height:e?"auto":0,overflow:"hidden"},n.default.createElement(li,{show:e,onAnimationEnd:()=>{e||o(!1)}},r)):null};const si=({children:e,disabled:t,id:r,required:a,validationMap:o,validationResult:i})=>{var l,d;const s=r||$r(),c=null===(l=n.default.Children.map(e,(e=>n.default.isValidElement(e)&&e.type===ni?e:null)))||void 0===l?void 0:l.filter(Boolean),f=null===(d=n.default.Children.map(e,(e=>n.default.isValidElement(e)&&e.type===ei?e:null)))||void 0===d?void 0:d.filter(Boolean),u=null==c?void 0:c.find((e=>e.props.validationKey===i)),g=u?`${s}-validationMsg`:void 0,p=null!=f&&f.length?`${s}-caption`:void 0;return n.default.createElement(Jn,{context:{captionId:p,disabled:t,id:s,required:a,validationMessageId:g}},(t=>{const r=n.default.isValidElement(t.Label)&&t.Label.props.visuallyHidden;return t.Input&&!t.Label&&console.error(`The input field with the id ${s} MUST have a Label child (e.g.: <TextInputField.Label>).\n\nIf you want to hide the label, pass the 'visuallyHidden' prop to the Label component.`),n.default.createElement(_t,{display:"flex",flexDirection:"column",width:"100%",sx:r?{"> *:not(label) + *":{marginTop:2}}:{"> * + *":{marginTop:2}}},n.default.Children.toArray(e).filter((e=>n.default.isValidElement(e)&&e.type!==ni)),t.Label,t.Input,u&&o&&i&&g&&n.default.createElement(di,{show:!0},n.default.createElement(Kn,{validationStatus:o[i],id:g},u)),t.Caption)}))};si.displayName="InputField";var ci=Object.assign(si,{Caption:ei,Label:oi,Validation:ni});const fi=({children:e})=>n.default.createElement(Zn,{name:"LeadingVisual"},e);fi.displayName="ToggleInputLeadingVisual";var ui=fi;const gi=({children:e,disabled:t,id:r,validationStatus:a})=>{const o=r||$r();return n.default.createElement(Jn,{context:{captionId:`${r}-caption`,disabled:t,id:o,validationStatus:a}},(r=>n.default.createElement(_t,{display:"flex",alignItems:r.LeadingVisual?"center":void 0},e,n.default.createElement(_t,{sx:{"> input":{marginLeft:0,marginRight:0}}},r.Input),r.LeadingVisual&&n.default.createElement(_t,{color:t?"fg.muted":"fg.default",sx:{"> *":{minWidth:r.Caption?xt("fontSizes.4"):xt("fontSizes.2"),minHeight:r.Caption?xt("fontSizes.4"):xt("fontSizes.2"),fill:"currentColor"}},ml:2},r.LeadingVisual),n.default.isValidElement(r.Label)&&!r.Label.props.visuallyHidden||r.Caption?n.default.createElement(_t,{display:"flex",flexDirection:"column",ml:2},r.Label,r.Caption):n.default.createElement(n.default.Fragment,null,r.Label,r.Caption))))};gi.displayName="ToggleInputField";var pi=Object.assign(gi,{LeadingVisual:ui});const bi=({id:e,required:t,disabled:r,...a})=>(e&&console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),r&&console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),t&&console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),n.default.createElement(Zn,{name:"Input"},(({disabled:e,id:t,required:r,captionId:o})=>n.default.createElement(Js,Bt({"aria-describedby":o,id:t,required:r,disabled:e},a)))));bi.displayName="Input";const hi=e=>n.default.createElement(pi,e);hi.displayName="CheckboxInputField";var mi=Object.assign(hi,{Input:bi,Caption:ci.Caption,Label:ci.Label,Validation:ci.Validation,LeadingVisual:ui});const vi=i.default.details`
+`;var di=({show:e,children:r})=>{const[a,o]=t.useState(e);t.useEffect((()=>{e&&o(!0)}),[e]);return a?n.default.createElement(_t,{height:e?"auto":0,overflow:"hidden"},n.default.createElement(li,{show:e,onAnimationEnd:()=>{e||o(!1)}},r)):null};const si=({children:e,disabled:t,id:r,required:a,validationMap:o,validationResult:i})=>{var l,d;const s=r||$r(),c=null===(l=n.default.Children.map(e,(e=>n.default.isValidElement(e)&&e.type===ni?e:null)))||void 0===l?void 0:l.filter(Boolean),f=null===(d=n.default.Children.map(e,(e=>n.default.isValidElement(e)&&e.type===ei?e:null)))||void 0===d?void 0:d.filter(Boolean),u=null==c?void 0:c.find((e=>e.props.validationKey===i)),g=u?`${s}-validationMsg`:void 0,p=null!=f&&f.length?`${s}-caption`:void 0;return n.default.createElement(Jn,{context:{captionId:p,disabled:t,id:s,required:a,validationMessageId:g}},(t=>{const r=n.default.isValidElement(t.Label)&&t.Label.props.visuallyHidden;return t.Input&&!t.Label&&console.error(`The input field with the id ${s} MUST have a Label child (e.g.: <TextInputField.Label>).\n\nIf you want to hide the label, pass the 'visuallyHidden' prop to the Label component.`),n.default.createElement(_t,{display:"flex",flexDirection:"column",width:"100%",sx:r?{"> *:not(label) + *":{marginTop:2}}:{"> * + *":{marginTop:2}}},n.default.Children.toArray(e).filter((e=>n.default.isValidElement(e)&&e.type!==ni)),t.Label,t.Input,u&&o&&i&&g&&n.default.createElement(di,{show:!0},n.default.createElement(Kn,{validationStatus:o[i],id:g},u)),t.Caption)}))};si.displayName="InputField";var ci=Object.assign(si,{Caption:ei,Label:oi,Validation:ni});const fi=({children:e})=>n.default.createElement(Zn,{name:"LeadingVisual"},e);fi.displayName="ToggleInputLeadingVisual";var ui=fi;const gi=({children:e,disabled:t,id:r,validationStatus:a})=>{const o=r||$r();return n.default.createElement(Jn,{context:{captionId:`${r}-caption`,disabled:t,id:o,validationStatus:a}},(r=>n.default.createElement(_t,{display:"flex",alignItems:r.LeadingVisual?"center":void 0},e,n.default.createElement(_t,{sx:{"> input":{marginLeft:0,marginRight:0}}},r.Input),r.LeadingVisual&&n.default.createElement(_t,{color:t?"fg.muted":"fg.default",sx:{"> *":{minWidth:r.Caption?xt("fontSizes.4"):xt("fontSizes.2"),minHeight:r.Caption?xt("fontSizes.4"):xt("fontSizes.2"),fill:"currentColor"}},ml:2},r.LeadingVisual),n.default.isValidElement(r.Label)&&!r.Label.props.visuallyHidden||r.Caption?n.default.createElement(_t,{display:"flex",flexDirection:"column",ml:2},r.Label,r.Caption):n.default.createElement(n.default.Fragment,null,r.Label,r.Caption))))};gi.displayName="ToggleInputField";var pi=Object.assign(gi,{LeadingVisual:ui});const bi=({id:e,required:t,disabled:r,...a})=>(e&&console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),r&&console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),t&&console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),n.default.createElement(Zn,{name:"Input"},(({disabled:e,id:t,required:r,captionId:o})=>n.default.createElement(Js,Bt({"aria-describedby":o,id:t,required:r,disabled:e},a)))));bi.displayName="Input";const hi=e=>n.default.createElement(pi,e);hi.displayName="CheckboxInputField";var mi=Object.assign(hi,{Input:bi,Caption:ci.Caption,Label:ci.Label,LeadingVisual:ui});const vi=i.default.details`
   & > summary {
     list-style: none;
   }
@@ -1484,7 +1484,7 @@
   ${yt}
   ${ie}
   ${jt};
-`;function Tl({progress:e,bg:t,theme:r,...a}){return n.default.createElement($l,Bt({theme:r},a),n.default.createElement(Bl,{progress:e,bg:t,theme:r}))}Tl.displayName="ProgressBar",Tl.defaultProps={bg:"success.emphasis",barSize:"default"};const Sl=e=>n.default.createElement("input",Bt({type:"radio"},e));Sl.displayName="RadioInput";const El=({id:e,required:t,disabled:r,...a})=>(e&&console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),r&&console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),t&&console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),n.default.createElement(Zn,{name:"Input"},(({disabled:e,id:t,required:r,captionId:o})=>n.default.createElement(Sl,Bt({"aria-describedby":o,id:t,required:r,disabled:e},a)))));El.displayName="Input";const Cl=e=>n.default.createElement(pi,e);Cl.displayName="RadioInputField";var Il=Object.assign(Cl,{Input:El,Caption:ci.Caption,Label:ci.Label,Validation:ci.Validation,LeadingVisual:ui});function zl(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])}const Rl=t.createContext({}),Al=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")),Nl=i.default.div`
+`;function Tl({progress:e,bg:t,theme:r,...a}){return n.default.createElement($l,Bt({theme:r},a),n.default.createElement(Bl,{progress:e,bg:t,theme:r}))}Tl.displayName="ProgressBar",Tl.defaultProps={bg:"success.emphasis",barSize:"default"};const Sl=e=>n.default.createElement("input",Bt({type:"radio"},e));Sl.displayName="RadioInput";const El=({id:e,required:t,disabled:r,...a})=>(e&&console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),r&&console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),t&&console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),n.default.createElement(Zn,{name:"Input"},(({disabled:e,id:t,required:r,captionId:o})=>n.default.createElement(Sl,Bt({"aria-describedby":o,id:t,required:r,disabled:e},a)))));El.displayName="Input";const Cl=e=>n.default.createElement(pi,e);Cl.displayName="RadioInputField";var Il=Object.assign(Cl,{Input:El,Caption:ci.Caption,Label:ci.Label,LeadingVisual:ui});function zl(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])}const Rl=t.createContext({}),Al=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")),Nl=i.default.div`
   ${Al}
   ${jt};
 `;Nl.displayName="SelectMenu.Divider";var Ll=Nl;const Fl=i.default.form`