@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 +1 -1
- package/dist/browser.esm.js +3 -3
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +3 -3
- package/dist/browser.umd.js.map +1 -1
- package/lib/CheckboxInputField.d.ts +0 -1
- package/lib/CheckboxInputField.js +0 -1
- package/lib/RadioInputField.d.ts +0 -1
- package/lib/RadioInputField.js +0 -1
- package/lib/_InputCaption.d.ts +7 -0
- package/lib/_InputCaption.js +9 -6
- package/lib/_InputField/InputFieldCaption.js +4 -2
- package/lib-esm/CheckboxInputField.d.ts +0 -1
- package/lib-esm/CheckboxInputField.js +0 -1
- package/lib-esm/RadioInputField.d.ts +0 -1
- package/lib-esm/RadioInputField.js +0 -1
- package/lib-esm/_InputCaption.d.ts +7 -0
- package/lib-esm/_InputCaption.js +9 -6
- package/lib-esm/_InputField/InputFieldCaption.js +4 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/dist/browser.esm.js
CHANGED
@@ -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,
|
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,
|
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,
|
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`
|