@primer/components 0.0.0-20211030163410 → 0.0.0-20211030164933

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @primer/components
2
2
 
3
- ## 0.0.0-20211030163410
3
+ ## 0.0.0-20211030164933
4
4
 
5
5
  ### Minor Changes
6
6
 
@@ -864,9 +864,9 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
864
864
  height: auto;
865
865
  max-width: 60%;
866
866
  max-height: 55%;
867
- `;qn.defaultProps={inline:!1},Kn.displayName="CircleBadge.Icon";var Gn=Object.assign(qn,{Icon:Kn});function Xn(t){const{size:r,as:o}=t,{icon:a,bg:n,...i}=t;return e.createElement(Qt,{as:o,bg:n,overflow:"hidden",borderWidth:0,size:r,borderRadius:"50%",borderStyle:"solid",borderColor:"border.default"},e.createElement(Qt,Lt({display:"flex"},i,{alignItems:"center",justifyContent:"center"}),e.createElement(a,{size:r})))}Xn.displayName="CircleOcticon",Xn.defaultProps={...Qt.defaultProps,size:32};const Yn={success:ro,error:eo},Jn={success:"success.fg",error:"danger.fg"},Zn=({children:t,id:r,validationStatus:o})=>{const a=o?Yn[o]:void 0,n=o?Jn[o]:void 0;return e.createElement(Ci,{display:"flex",color:n,fontSize:0,sx:{alignItems:"baseline",a:{color:"currentColor",textDecoration:"underline"}}},a&&e.createElement(Qt,{as:"span",mr:1},e.createElement(a,{size:12,fill:"currentColor"})),e.createElement("span",{id:r},t))};Zn.displayName="InputValidation";var Qn=Zn;const ei=t=>e.createElement(Ci,Lt({color:"fg.muted",fontSize:0},t));ei.displayName="InputCaption";var ti=ei;var ri=t=>{const r=e.createContext({registerSlot:()=>null,unregisterSlot:()=>null,context:{}});return{Slots:({context:o={},children:a})=>{const n={};t.map((e=>n[e]=null));const i=e.useRef(n),l=(()=>{const[,t]=e.useState({});return e.useCallback((()=>t({})),[])})(),[d,s]=e.useState(!1);e.useEffect((()=>{l(),s(!0)}),[l]);const c=e.useCallback(((e,t)=>{i.current[e]=t,d&&l()}),[d,l]),g=e.useCallback((e=>{i.current[e]=null,l()}),[l]),f=i.current;return e.createElement(r.Provider,{value:{registerSlot:c,unregisterSlot:g,context:o}},a(f))},Slot:({name:t,children:o})=>{const{registerSlot:a,unregisterSlot:n,context:i}=e.useContext(r);return e.useEffect((()=>(a(t,"function"==typeof o?o(i):o),()=>n(t))),[t,o,a,n,i]),null}}};const{Slots:oi,Slot:ai}=ri(["Caption","Input","Label","LeadingVisual"]),ni=({children:t})=>e.createElement(ai,{name:"Caption"},(({captionId:r})=>e.createElement(ti,{id:r},t)));ni.displayName="InputFieldCaption";var ii=ni;const li=({children:t,disabled:r,required:o,visuallyHidden:a,htmlFor:n})=>e.createElement(sn,{isVisible:!a,as:"label",htmlFor:n,title:o?"required field":void 0,sx:{fontWeight:"bold",fontSize:1,display:"block",color:r?"fg.muted":"fg.default"}},o?e.createElement(Qt,{display:"flex",as:"span"},e.createElement(Qt,{mr:1},t),e.createElement("span",null,"*")):t);li.displayName="InputLabel";var di=li;const si=({children:t,visuallyHidden:r})=>e.createElement(ai,{name:"Label"},(({disabled:o,id:a,required:n})=>e.createElement(di,{htmlFor:a,visuallyHidden:r,required:n,disabled:o},t)));si.displayName="InputFieldLabel";var ci=si;var gi=({children:t})=>e.createElement(e.Fragment,null,t);const fi=h(["0%{opacity:0;transform:translateY(-100%);}100%{opacity:1;transform:translateY(0);}"]),ui=g.div`
867
+ `;qn.defaultProps={inline:!1},Kn.displayName="CircleBadge.Icon";var Gn=Object.assign(qn,{Icon:Kn});function Xn(t){const{size:r,as:o}=t,{icon:a,bg:n,...i}=t;return e.createElement(Qt,{as:o,bg:n,overflow:"hidden",borderWidth:0,size:r,borderRadius:"50%",borderStyle:"solid",borderColor:"border.default"},e.createElement(Qt,Lt({display:"flex"},i,{alignItems:"center",justifyContent:"center"}),e.createElement(a,{size:r})))}Xn.displayName="CircleOcticon",Xn.defaultProps={...Qt.defaultProps,size:32};const Yn={success:ro,error:eo},Jn={success:"success.fg",error:"danger.fg"},Zn=({children:t,id:r,validationStatus:o})=>{const a=o?Yn[o]:void 0,n=o?Jn[o]:void 0;return e.createElement(Ci,{display:"flex",color:n,fontSize:0,sx:{alignItems:"baseline",a:{color:"currentColor",textDecoration:"underline"}}},a&&e.createElement(Qt,{as:"span",mr:1},e.createElement(a,{size:12,fill:"currentColor"})),e.createElement("span",{id:r},t))};Zn.displayName="InputValidation";var Qn=Zn;const ei=({children:t,disabled:r,id:o})=>e.createElement(Ci,{color:r?"fg.subtle":"fg.muted",fontSize:0,id:o},t);ei.displayName="InputCaption";var ti=ei;var ri=t=>{const r=e.createContext({registerSlot:()=>null,unregisterSlot:()=>null,context:{}});return{Slots:({context:o={},children:a})=>{const n={};t.map((e=>n[e]=null));const i=e.useRef(n),l=(()=>{const[,t]=e.useState({});return e.useCallback((()=>t({})),[])})(),[d,s]=e.useState(!1);e.useEffect((()=>{l(),s(!0)}),[l]);const c=e.useCallback(((e,t)=>{i.current[e]=t,d&&l()}),[d,l]),g=e.useCallback((e=>{i.current[e]=null,l()}),[l]),f=i.current;return e.createElement(r.Provider,{value:{registerSlot:c,unregisterSlot:g,context:o}},a(f))},Slot:({name:t,children:o})=>{const{registerSlot:a,unregisterSlot:n,context:i}=e.useContext(r);return e.useEffect((()=>(a(t,"function"==typeof o?o(i):o),()=>n(t))),[t,o,a,n,i]),null}}};const{Slots:oi,Slot:ai}=ri(["Caption","Input","Label","LeadingVisual"]),ni=({children:t})=>e.createElement(ai,{name:"Caption"},(({captionId:r,disabled:o})=>e.createElement(ti,{id:r,disabled:o},t)));ni.displayName="InputFieldCaption";var ii=ni;const li=({children:t,disabled:r,required:o,visuallyHidden:a,htmlFor:n})=>e.createElement(sn,{isVisible:!a,as:"label",htmlFor:n,title:o?"required field":void 0,sx:{fontWeight:"bold",fontSize:1,display:"block",color:r?"fg.muted":"fg.default"}},o?e.createElement(Qt,{display:"flex",as:"span"},e.createElement(Qt,{mr:1},t),e.createElement("span",null,"*")):t);li.displayName="InputLabel";var di=li;const si=({children:t,visuallyHidden:r})=>e.createElement(ai,{name:"Label"},(({disabled:o,id:a,required:n})=>e.createElement(di,{htmlFor:a,visuallyHidden:r,required:n,disabled:o},t)));si.displayName="InputFieldLabel";var ci=si;var gi=({children:t})=>e.createElement(e.Fragment,null,t);const fi=h(["0%{opacity:0;transform:translateY(-100%);}100%{opacity:1;transform:translateY(0);}"]),ui=g.div`
868
868
  animation: ${e=>e.show&&p(["170ms "," cubic-bezier(0.44,0.74,0.36,1);"],fi)};
869
- `;var pi=({show:r,children:o})=>{const[n,i]=t(r);a((()=>{r&&i(!0)}),[r]);return n?e.createElement(Qt,{height:r?"auto":0,overflow:"hidden"},e.createElement(ui,{show:r,onAnimationEnd:()=>{r||i(!1)}},o)):null};const bi=({children:t,disabled:r,id:o,required:a,validationMap:n,validationResult:i})=>{var l,d;const s=o||Rr(),c=null===(l=e.Children.map(t,(t=>e.isValidElement(t)&&t.type===gi?t:null)))||void 0===l?void 0:l.filter(Boolean),g=null===(d=e.Children.map(t,(t=>e.isValidElement(t)&&t.type===ii?t:null)))||void 0===d?void 0:d.filter(Boolean),f=null==c?void 0:c.find((e=>e.props.validationKey===i)),u=f?`${s}-validationMsg`:void 0,p=null!=g&&g.length?`${s}-caption`:void 0;return e.createElement(oi,{context:{captionId:p,disabled:r,id:s,required:a,validationMessageId:u}},(r=>{const o=e.isValidElement(r.Label)&&r.Label.props.visuallyHidden;return r.Input&&!r.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.`),e.createElement(Qt,{display:"flex",flexDirection:"column",width:"100%",sx:o?{"> *:not(label) + *":{marginTop:2}}:{"> * + *":{marginTop:2}}},e.Children.toArray(t).filter((t=>e.isValidElement(t)&&t.type!==gi)),r.Label,r.Input,f&&n&&i&&u&&e.createElement(pi,{show:!0},e.createElement(Qn,{validationStatus:n[i],id:u},f)),r.Caption)}))};bi.displayName="InputField";var hi=Object.assign(bi,{Caption:ii,Label:ci,Validation:gi});const mi=({children:t})=>e.createElement(ai,{name:"LeadingVisual"},t);mi.displayName="ToggleInputLeadingVisual";var vi=mi;const xi=({children:t,disabled:r,id:o,validationStatus:a})=>{const n=o||Rr();return e.createElement(oi,{context:{captionId:`${o}-caption`,disabled:r,id:n,validationStatus:a}},(o=>e.createElement(Qt,{display:"flex",alignItems:o.LeadingVisual?"center":void 0},t,e.createElement(Qt,{sx:{"> input":{marginLeft:0,marginRight:0}}},o.Input),o.LeadingVisual&&e.createElement(Qt,{color:r?"fg.muted":"fg.default",sx:{"> *":{minWidth:o.Caption?zt("fontSizes.4"):zt("fontSizes.2"),minHeight:o.Caption?zt("fontSizes.4"):zt("fontSizes.2"),fill:"currentColor"}},ml:2},o.LeadingVisual),e.isValidElement(o.Label)&&!o.Label.props.visuallyHidden||o.Caption?e.createElement(Qt,{display:"flex",flexDirection:"column",ml:2},o.Label,o.Caption):e.createElement(e.Fragment,null,o.Label,o.Caption))))};xi.displayName="ToggleInputField";var yi=Object.assign(xi,{LeadingVisual:vi});const wi=({id:t,required:r,disabled:o,...a})=>(t&&console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),o&&console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),r&&console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),e.createElement(ai,{name:"Input"},(({disabled:t,id:r,required:o,captionId:n})=>e.createElement(rc,Lt({"aria-describedby":n,id:r,required:o,disabled:t},a)))));wi.displayName="Input";const Bi=t=>e.createElement(yi,t);Bi.displayName="CheckboxInputField";var ki=Object.assign(Bi,{Input:wi,Caption:hi.Caption,Label:hi.Label,Validation:hi.Validation,LeadingVisual:vi});const $i=g.details`
869
+ `;var pi=({show:r,children:o})=>{const[n,i]=t(r);a((()=>{r&&i(!0)}),[r]);return n?e.createElement(Qt,{height:r?"auto":0,overflow:"hidden"},e.createElement(ui,{show:r,onAnimationEnd:()=>{r||i(!1)}},o)):null};const bi=({children:t,disabled:r,id:o,required:a,validationMap:n,validationResult:i})=>{var l,d;const s=o||Rr(),c=null===(l=e.Children.map(t,(t=>e.isValidElement(t)&&t.type===gi?t:null)))||void 0===l?void 0:l.filter(Boolean),g=null===(d=e.Children.map(t,(t=>e.isValidElement(t)&&t.type===ii?t:null)))||void 0===d?void 0:d.filter(Boolean),f=null==c?void 0:c.find((e=>e.props.validationKey===i)),u=f?`${s}-validationMsg`:void 0,p=null!=g&&g.length?`${s}-caption`:void 0;return e.createElement(oi,{context:{captionId:p,disabled:r,id:s,required:a,validationMessageId:u}},(r=>{const o=e.isValidElement(r.Label)&&r.Label.props.visuallyHidden;return r.Input&&!r.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.`),e.createElement(Qt,{display:"flex",flexDirection:"column",width:"100%",sx:o?{"> *:not(label) + *":{marginTop:2}}:{"> * + *":{marginTop:2}}},e.Children.toArray(t).filter((t=>e.isValidElement(t)&&t.type!==gi)),r.Label,r.Input,f&&n&&i&&u&&e.createElement(pi,{show:!0},e.createElement(Qn,{validationStatus:n[i],id:u},f)),r.Caption)}))};bi.displayName="InputField";var hi=Object.assign(bi,{Caption:ii,Label:ci,Validation:gi});const mi=({children:t})=>e.createElement(ai,{name:"LeadingVisual"},t);mi.displayName="ToggleInputLeadingVisual";var vi=mi;const xi=({children:t,disabled:r,id:o,validationStatus:a})=>{const n=o||Rr();return e.createElement(oi,{context:{captionId:`${o}-caption`,disabled:r,id:n,validationStatus:a}},(o=>e.createElement(Qt,{display:"flex",alignItems:o.LeadingVisual?"center":void 0},t,e.createElement(Qt,{sx:{"> input":{marginLeft:0,marginRight:0}}},o.Input),o.LeadingVisual&&e.createElement(Qt,{color:r?"fg.muted":"fg.default",sx:{"> *":{minWidth:o.Caption?zt("fontSizes.4"):zt("fontSizes.2"),minHeight:o.Caption?zt("fontSizes.4"):zt("fontSizes.2"),fill:"currentColor"}},ml:2},o.LeadingVisual),e.isValidElement(o.Label)&&!o.Label.props.visuallyHidden||o.Caption?e.createElement(Qt,{display:"flex",flexDirection:"column",ml:2},o.Label,o.Caption):e.createElement(e.Fragment,null,o.Label,o.Caption))))};xi.displayName="ToggleInputField";var yi=Object.assign(xi,{LeadingVisual:vi});const wi=({id:t,required:r,disabled:o,...a})=>(t&&console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),o&&console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),r&&console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),e.createElement(ai,{name:"Input"},(({disabled:t,id:r,required:o,captionId:n})=>e.createElement(rc,Lt({"aria-describedby":n,id:r,required:o,disabled:t},a)))));wi.displayName="Input";const Bi=t=>e.createElement(yi,t);Bi.displayName="CheckboxInputField";var ki=Object.assign(Bi,{Input:wi,Caption:hi.Caption,Label:hi.Label,LeadingVisual:vi});const $i=g.details`
870
870
  & > summary {
871
871
  list-style: none;
872
872
  }
@@ -1484,7 +1484,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
1484
1484
  ${At}
1485
1485
  ${me}
1486
1486
  ${Zt};
1487
- `;function Al({progress:t,bg:r,theme:o,...a}){return e.createElement(zl,Lt({theme:o},a),e.createElement(Cl,{progress:t,bg:r,theme:o}))}Al.displayName="ProgressBar",Al.defaultProps={bg:"success.emphasis",barSize:"default"};const Nl=t=>e.createElement("input",Lt({type:"radio"},t));Nl.displayName="RadioInput";const Ll=({id:t,required:r,disabled:o,...a})=>(t&&console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),o&&console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),r&&console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),e.createElement(ai,{name:"Input"},(({disabled:t,id:r,required:o,captionId:n})=>e.createElement(Nl,Lt({"aria-describedby":n,id:r,required:o,disabled:t},a)))));Ll.displayName="Input";const Rl=t=>e.createElement(yi,t);Rl.displayName="RadioInputField";var Fl=Object.assign(Rl,{Input:Ll,Caption:hi.Caption,Label:hi.Label,Validation:hi.Validation,LeadingVisual:vi});function Dl(e,t,r){const n=o((o=>{const a=()=>{r(!0)},n=t=>{const r=Array.from(e.current.querySelectorAll('[role^="menuitem"]:not([hidden]):not([disabled]):not([aria-disabled="true"])')),o=document.activeElement,a=r.indexOf(o),n=t?r[a+1]:r[a-1],i=t?r[0]:r[r.length-1];return n||i};if(!(o instanceof KeyboardEvent))return;const i=o.target instanceof Element&&"SUMMARY"===o.target.tagName;switch(o.key){case"Escape":t&&((()=>{r(!1);const t=e.current.querySelector("summary");t&&t.focus()})(),o.preventDefault(),o.stopPropagation());break;case"ArrowDown":{i&&!t&&a();const e=n(!0);e&&e.focus(),o.preventDefault()}break;case"ArrowUp":{i&&!t&&a();const e=n(!1);e&&e.focus(),o.preventDefault()}break;case" ":case"Enter":{const t=document.activeElement;t&&(e=>{const t=e.getAttribute("role");return"menuitem"===t||"menuitemcheckbox"===t||"menuitemradio"===t})(t)&&t.closest("details")===e&&(o.preventDefault(),o.stopPropagation(),t.click())}}}),[e,t,r]);a((()=>{const t=e.current;if(t)return t.addEventListener("keydown",n),()=>{t.removeEventListener("keydown",n)}}),[e,n])}const Ml=s({}),Ol=p(["padding:"," ",";margin:0;font-size:",";font-weight:",";color:",";background-color:",";border-bottom:"," solid ",";"],zt("space.1"),zt("space.3"),zt("fontSizes.0"),zt("fontWeights.bold"),zt("colors.fg.muted"),zt("colors.canvas.subtle"),zt("borderWidths.1"),zt("colors.border.muted")),Pl=g.div`
1487
+ `;function Al({progress:t,bg:r,theme:o,...a}){return e.createElement(zl,Lt({theme:o},a),e.createElement(Cl,{progress:t,bg:r,theme:o}))}Al.displayName="ProgressBar",Al.defaultProps={bg:"success.emphasis",barSize:"default"};const Nl=t=>e.createElement("input",Lt({type:"radio"},t));Nl.displayName="RadioInput";const Ll=({id:t,required:r,disabled:o,...a})=>(t&&console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),o&&console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),r&&console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>"),e.createElement(ai,{name:"Input"},(({disabled:t,id:r,required:o,captionId:n})=>e.createElement(Nl,Lt({"aria-describedby":n,id:r,required:o,disabled:t},a)))));Ll.displayName="Input";const Rl=t=>e.createElement(yi,t);Rl.displayName="RadioInputField";var Fl=Object.assign(Rl,{Input:Ll,Caption:hi.Caption,Label:hi.Label,LeadingVisual:vi});function Dl(e,t,r){const n=o((o=>{const a=()=>{r(!0)},n=t=>{const r=Array.from(e.current.querySelectorAll('[role^="menuitem"]:not([hidden]):not([disabled]):not([aria-disabled="true"])')),o=document.activeElement,a=r.indexOf(o),n=t?r[a+1]:r[a-1],i=t?r[0]:r[r.length-1];return n||i};if(!(o instanceof KeyboardEvent))return;const i=o.target instanceof Element&&"SUMMARY"===o.target.tagName;switch(o.key){case"Escape":t&&((()=>{r(!1);const t=e.current.querySelector("summary");t&&t.focus()})(),o.preventDefault(),o.stopPropagation());break;case"ArrowDown":{i&&!t&&a();const e=n(!0);e&&e.focus(),o.preventDefault()}break;case"ArrowUp":{i&&!t&&a();const e=n(!1);e&&e.focus(),o.preventDefault()}break;case" ":case"Enter":{const t=document.activeElement;t&&(e=>{const t=e.getAttribute("role");return"menuitem"===t||"menuitemcheckbox"===t||"menuitemradio"===t})(t)&&t.closest("details")===e&&(o.preventDefault(),o.stopPropagation(),t.click())}}}),[e,t,r]);a((()=>{const t=e.current;if(t)return t.addEventListener("keydown",n),()=>{t.removeEventListener("keydown",n)}}),[e,n])}const Ml=s({}),Ol=p(["padding:"," ",";margin:0;font-size:",";font-weight:",";color:",";background-color:",";border-bottom:"," solid ",";"],zt("space.1"),zt("space.3"),zt("fontSizes.0"),zt("fontWeights.bold"),zt("colors.fg.muted"),zt("colors.canvas.subtle"),zt("borderWidths.1"),zt("colors.border.muted")),Pl=g.div`
1488
1488
  ${Ol}
1489
1489
  ${Zt};
1490
1490
  `;Pl.displayName="SelectMenu.Divider";var Hl=Pl;const Wl=g.form`