@primer/components 0.0.0-2021827223713 → 0.0.0-2021828162730
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 +7 -3
- package/dist/browser.esm.js +8 -4
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +8 -4
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList/Item.d.ts +17 -4
- package/lib/ActionList/Item.js +9 -7
- package/lib/ActionList/List.d.ts +11 -7
- package/lib/ActionList/List.js +2 -2
- package/lib/ActionList/index.d.ts +1 -2
- package/lib/Breadcrumbs.d.ts +7 -8
- package/lib/Breadcrumbs.js +12 -7
- package/lib-esm/ActionList/Item.d.ts +17 -4
- package/lib-esm/ActionList/Item.js +9 -6
- package/lib-esm/ActionList/List.d.ts +11 -7
- package/lib-esm/ActionList/List.js +2 -2
- package/lib-esm/ActionList/index.d.ts +1 -2
- package/lib-esm/Breadcrumbs.d.ts +7 -8
- package/lib-esm/Breadcrumbs.js +13 -8
- package/package.json +2 -1
package/dist/browser.umd.js
CHANGED
@@ -413,7 +413,7 @@
|
|
413
413
|
background: ${vt("colors.border.muted")};
|
414
414
|
margin-top: calc(${vt("space.2")} - 1px);
|
415
415
|
margin-bottom: ${vt("space.2")};
|
416
|
-
`;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:"
|
416
|
+
`;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`
|
417
417
|
display: flex;
|
418
418
|
min-width: 0;
|
419
419
|
|
@@ -438,6 +438,7 @@
|
|
438
438
|
color: ${({variant:e,item:t})=>ya(e,null==t?void 0:t.disabled).color};
|
439
439
|
// 2 frames on a 60hz monitor
|
440
440
|
transition: background 33.333ms linear;
|
441
|
+
text-decoration: none;
|
441
442
|
|
442
443
|
@media (hover: hover) and (pointer: fine) {
|
443
444
|
:hover {
|
@@ -541,7 +542,7 @@
|
|
541
542
|
flex-basis: var(--description-container-flex-basis);
|
542
543
|
`,Aa=d.default.input`
|
543
544
|
pointer-events: none;
|
544
|
-
|
545
|
+
`,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`
|
545
546
|
font-size: ${vt("fontSizes.1")};
|
546
547
|
/* 14px font-size * 1.428571429 = 20px line height
|
547
548
|
*
|
@@ -554,7 +555,7 @@
|
|
554
555
|
--item-hover-bg-override: none;
|
555
556
|
--item-hover-divider-border-color-override: ${vt("colors.border.muted")};
|
556
557
|
}
|
557
|
-
`;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`
|
558
|
+
`;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`
|
558
559
|
background-color: ${vt("colors.canvas.overlay")};
|
559
560
|
box-shadow: ${vt("shadows.overlay.shadow")};
|
560
561
|
position: absolute;
|
@@ -748,8 +749,10 @@
|
|
748
749
|
`,on=d.default.nav`
|
749
750
|
display: flex;
|
750
751
|
justify-content: space-between;
|
752
|
+
${yt};
|
753
|
+
${St};
|
751
754
|
${Xt};
|
752
|
-
`;function an({className:e,children:t,
|
755
|
+
`;function an({className:e,children:t,theme:r,...o}){const a=n.default.Children.map(t,(e=>n.default.createElement(rn,{theme:r},e)));return n.default.createElement(on,Tt({className:e,"aria-label":"Breadcrumbs",theme:r},o),n.default.createElement(Vt,{as:"ol",my:0,pl:0},a))}an.displayName="Breadcrumbs";const nn=d.default.a.attrs((e=>({activeClassName:"string"==typeof e.to?"selected":"",className:Ja(e.selected&&"selected",e.className),"aria-current":e.selected?"page":null})))`
|
753
756
|
color: ${vt("colors.accent.fg")};
|
754
757
|
display: inline-block;
|
755
758
|
font-size: ${vt("fontSizes.1")};
|
@@ -761,6 +764,7 @@
|
|
761
764
|
color: ${vt("colors.fg.default")};
|
762
765
|
pointer-events: none;
|
763
766
|
}
|
767
|
+
${yt}
|
764
768
|
${Xt};
|
765
769
|
`;an.displayName="Breadcrumbs",nn.displayName="Breadcrumbs.Item";var dn=Object.assign(an,{Item:nn});const ln=Object.assign(an,{Item:nn}),cn={top:"Bottom",right:"Left",bottom:"Top",left:"Right"},sn={top:"Left",right:"Top",bottom:"Left",left:"Top"};function fn(e,t,r){const o=cn[e].toLowerCase(),a=sn[e].toLowerCase();return{[o]:"100%",[t||a]:t?r:"50%"}}const bn=ut({prop:"bg",key:"colors"}),gn=ut({prop:"borderColor",key:"colors"}),un=ut({prop:"borderWidth",key:"borderWidths",scale:[0,1]});function pn(e){var t;const o=n.default.useContext(r.ThemeContext),a={...e,theme:null!==(t=e.theme)&&void 0!==t?t:o},{bg:d}=bn(a),{borderColor:i}=gn(a),{borderWidth:l}=un(a),{size:c=8,location:s="bottom"}=e,[f,b]=function(e){const[t,r]=e.split("-");return[t,r]}(s),g=sn[f],u=[-c,0],p=[0,c],m=[c,0],h=`M${u}L${p}L${m}L${u}Z`,x=`M${u}L${p}L${m}`,v={top:`translate(${[c,2*c]}) rotate(180)`,right:`translate(${[0,c]}) rotate(-90)`,bottom:`translate(${[c,0]})`,left:`translate(${[2*c,c]}) rotate(90)`}[f];return n.default.createElement("svg",{width:2*c,height:2*c,style:{pointerEvents:"none",position:"absolute",...fn(f,b,c),[`margin${g}`]:b?null:-c}},n.default.createElement("g",{transform:v},n.default.createElement("path",{d:h,fill:d}),n.default.createElement("path",{d:x,fill:"none",stroke:i,strokeWidth:l})))}pn.displayName="Caret",pn.locations=["top","top-left","top-right","right","right-top","right-bottom","bottom","bottom-left","bottom-right","left","left-top","left-bottom"],pn.defaultProps={bg:"bg.canvas",borderColor:"border.primary",borderWidth:1};const mn={small:56,medium:96,large:128},hn=d.default.div`
|
766
770
|
display: ${e=>e.inline?"inline-flex":"flex"};
|