@primer/components 0.0.0-2021101801528 → 0.0.0-2021101801838

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # @primer/components
 
-## 0.0.0-2021101801528
+## 0.0.0-2021101801838
 
 ### Major Changes
 
-- [#1616](https://github.com/primer/react/pull/1616) [`667eaad8`](https://github.com/primer/react/commit/667eaad8059b192c90475adf6b78a74598544e77) Thanks [@jfuchs](https://github.com/jfuchs)! - StyledOcticon no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
+- [#1614](https://github.com/primer/react/pull/1614) [`8b2a3048`](https://github.com/primer/react/commit/8b2a3048afbd10a9a71aa7aac5a68eb52796418e) Thanks [@jfuchs](https://github.com/jfuchs)! - Dialog2 no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
 
 ### Minor Changes
 

package/dist/browser.esm.js

@@ -271,6 +271,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
   ${Lt};
   ${rr};
 `;var ho=i(((t,r)=>e.createElement(mo,Pt({ref:r,"aria-label":"Close"},t),e.createElement(bo,null))));const vo={"outside-top":["outside-bottom","outside-right","outside-left","outside-bottom"],"outside-bottom":["outside-top","outside-right","outside-left","outside-bottom"],"outside-left":["outside-right","outside-bottom","outside-top","outside-bottom"],"outside-right":["outside-left","outside-bottom","outside-top","outside-bottom"]};function xo(e,t,r={}){const o=function(e){let t=e.parentNode;for(;null!==t;){if(t instanceof HTMLElement&&"static"!==getComputedStyle(t).position)return t;t=t.parentNode}return document.body}(e),a=function(e){let t=e;for(;null!==t&&t!==document.body;){if("visible"!==getComputedStyle(t).overflow)break;t=t.parentNode}const r=t!==document.body&&t instanceof HTMLElement?t:document.body,o=r.getBoundingClientRect(),a=getComputedStyle(r),[n,i,l,d]=[a.borderTopWidth,a.borderLeftWidth,a.borderRightWidth,a.borderBottomWidth].map((e=>parseInt(e,10)||0));return{top:o.top+n,left:o.left+i,width:o.width-l-i,height:Math.max(o.height-n-d,r===document.body?window.innerHeight:-1/0)}}(o),n=getComputedStyle(o),i=o.getBoundingClientRect(),[l,d]=[n.borderTopWidth,n.borderLeftWidth].map((e=>parseInt(e,10)||0));return function(e,t,r,o,{side:a,align:n,allowOutOfBounds:i,anchorOffset:l,alignmentOffset:d}){const s={top:e.top-t.top,left:e.left-t.left,width:e.width,height:e.height};let c=To(r,o,a,n,l,d),f=a;if(c.top-=t.top,c.left-=t.left,!i){const i=vo[a];let g=0;if(i){let e=a;for(;g<i.length&&So(e,c,s,r);){const a=i[g++];e=a,c=To(r,o,a,n,l,d),c.top-=t.top,c.left-=t.left,f=a}}c.top<s.top&&(c.top=s.top),c.left<s.left&&(c.left=s.left),c.left+r.width>e.width+s.left&&(c.left=e.width+s.left-r.width),i&&g<i.length&&c.top+r.height>e.height+s.top&&(c.top=e.height+s.top-r.height)}return{...c,anchorSide:f}}(a,{top:i.top+l,left:i.left+d},e.getBoundingClientRect(),t instanceof Element?t.getBoundingClientRect():t,function(e={}){var t,r,o,a,n;const i=null!==(t=e.side)&&void 0!==t?t:yo,l=null!==(r=e.align)&&void 0!==r?r:wo;return{side:i,align:l,anchorOffset:null!==(o=e.anchorOffset)&&void 0!==o?o:"inside-center"===i?0:Bo,alignmentOffset:null!==(a=e.alignmentOffset)&&void 0!==a?a:"center"!==l&&i.startsWith("inside")?$o:0,allowOutOfBounds:null!==(n=e.allowOutOfBounds)&&void 0!==n?n:ko}}(r))}const yo="outside-bottom",wo="start",Bo=4,$o=4,ko=!1;function To(e,t,r,o,a,n){const i=t.left+t.width,l=t.top+t.height;let d=-1,s=-1;return"outside-top"===r?d=t.top-a-e.height:"outside-bottom"===r?d=l+a:"outside-left"===r?s=t.left-a-e.width:"outside-right"===r&&(s=i+a),"outside-top"!==r&&"outside-bottom"!==r||(s="start"===o?t.left+n:"center"===o?t.left-(e.width-t.width)/2+n:i-e.width-n),"outside-left"!==r&&"outside-right"!==r||(d="start"===o?t.top+n:"center"===o?t.top-(e.height-t.height)/2+n:l-e.height-n),"inside-top"===r?d=t.top+a:"inside-bottom"===r?d=l-a-e.height:"inside-left"===r?s=t.left+a:"inside-right"===r?s=i-a-e.width:"inside-center"===r&&(s=(i+t.left)/2-e.width/2+a),"inside-top"===r||"inside-bottom"===r?s="start"===o?t.left+n:"center"===o?t.left-(e.width-t.width)/2+n:i-e.width-n:"inside-left"!==r&&"inside-right"!==r&&"inside-center"!==r||(d="start"===o?t.top+n:"center"===o?t.top-(e.height-t.height)/2+n:l-e.height-n),{top:d,left:s}}function So(e,t,r,o){return"outside-top"===e||"outside-bottom"===e?t.top<r.top||t.top+o.height>r.height+r.top:t.left<r.left||t.left+o.width>r.width+r.left}var Eo="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?l:a;function Co(t,r=[]){const o=zr(null==t?void 0:t.floatingElementRef),a=zr(null==t?void 0:t.anchorElementRef),[n,i]=e.useState(void 0),l=e.useCallback((()=>{o.current instanceof Element&&a.current instanceof Element?i(xo(o.current,a.current,t)):i(void 0)}),[o,a,...r]);var d;return Eo(l,[l]),Eo((()=>{const e=new window.ResizeObserver((()=>d()));return e.observe(document.documentElement),()=>{e.disconnect()}}),[d=l]),{floatingElementRef:o,anchorElementRef:a,position:n}}Lr();const zo=[];let Io;function No(e,t=!1){return Br(e,{reverse:t,strict:!0,onlyTabbable:!0}).next().value}function Ao(e,t,r){const o=new AbortController,a=null!=r?r:o.signal;let n;function i(r){if(r instanceof HTMLElement&&document.contains(e)){if(e.contains(r))return void(n=r);if(n&&kr(n)&&e.contains(n))return void n.focus();if(t&&e.contains(t))return void t.focus();{const t=null===e.getAttribute("tabindex");return t&&e.setAttribute("tabindex","-1"),e.focus(),void(t&&e.addEventListener("blur",(()=>e.removeAttribute("tabindex")),{once:!0}))}}}e.setAttribute("data-focus-trap","active");const l=function(e){const t=new AbortController;return e.addEventListener("abort",(()=>{t.abort()})),t}(a);if(e.addEventListener("keydown",(t=>{if("Tab"!==t.key||t.defaultPrevented)return;const{target:r}=t,o=No(e),a=No(e,!0);r===o&&t.shiftKey?(t.preventDefault(),null==a||a.focus()):r!==a||t.shiftKey||(t.preventDefault(),null==o||o.focus())}),{signal:l.signal}),Io){const e=Io;Io.container.setAttribute("data-focus-trap","suspended"),Io.controller.abort(),zo.push(e)}l.signal.addEventListener("abort",(()=>{Io=void 0})),a.addEventListener("abort",(()=>{e.removeAttribute("data-focus-trap");const t=zo.findIndex((t=>t.container===e));t>=0&&zo.splice(t,1),function(){const e=zo.pop();e&&Ao(e.container,e.initialFocus,e.originalSignal)}()})),document.addEventListener("focus",(e=>{i(e.target)}),{signal:l.signal,capture:!0}),i(document.activeElement),Io={container:e,controller:l,initialFocus:t,originalSignal:a};const d=zo.findIndex((t=>t.container===e));if(d>=0&&zo.splice(d,1),!r)return o}function Ro(t,r=[]){const o=zr(null==t?void 0:t.containerRef),a=zr(null==t?void 0:t.initialFocusRef),n=null==t?void 0:t.disabled,i=e.useRef(),l=e.useRef(null);function d(){var e;null===(e=i.current)||void 0===e||e.abort(),null!=t&&t.restoreFocusOnCleanUp&&l.current instanceof HTMLElement&&(l.current.focus(),l.current=null)}return l.current||null!=t&&t.disabled||(l.current=document.activeElement),e.useEffect((()=>{if(o.current instanceof HTMLElement){var e;if(!n)return i.current=Ao(o.current,null!==(e=a.current)&&void 0!==e?e:void 0),()=>{d()};d()}}),[o,a,n,...r]),{containerRef:o,initialFocusRef:a}}function Lo({icon:t,...r}){return e.createElement(t,r)}Lo.displayName="Octicon";const Oo=f(Lo)`
+  ${Nt}
   ${rr}
 `;Oo.defaultProps={size:16};var Mo=Oo;function Po(t={},r=[]){const o=zr(t.containerRef),n=!!t.activeDescendantFocus,i=zr("boolean"!=typeof t.activeDescendantFocus&&t.activeDescendantFocus?t.activeDescendantFocus:void 0),l=t.disabled,d=e.useRef();return a((()=>{if(o.current instanceof HTMLElement&&(!n||i.current instanceof HTMLElement)){if(!l){var e;const r={...t,activeDescendantControl:null!==(e=i.current)&&void 0!==e?e:void 0};return d.current=_r(o.current,r),()=>{var e;null===(e=d.current)||void 0===e||e.abort()}}var r;null===(r=d.current)||void 0===r||r.abort()}}),[l,...r]),{containerRef:o,activeDescendantControlRef:i}}const Do={};function Ho(){const e=Do.__default__;if(!e||!document.body.contains(e)){let e=document.getElementById("__primerPortalRoot__");if(!(e instanceof Element)){e=document.createElement("div"),e.setAttribute("id","__primerPortalRoot__"),e.style.position="absolute",e.style.top="0",e.style.left="0";const t=document.querySelector("[data-portal-root]");t?t.appendChild(e):document.body.appendChild(e)}!function(e,t="__default__"){Do[t]=e}(e)}}var Wo=({children:t,onMount:r,containerName:o})=>{const a=document.createElement("div");a.style.position="relative",a.style.zIndex="1";const n=e.useRef(a);return Eo((()=>{let e=o;void 0===e&&(e="__default__",Ho());const t=Do[e];if(!t)throw new Error(`Portal container '${o}' is not yet registered. Container must be registered with registerPortal before use.`);const a=n.current;return t.appendChild(a),null==r||r(),()=>{t.removeChild(a)}}),[n]),v(t,n.current)};function Fo(...e){const t=r(null);return Eo((()=>{function r(t=null){for(const r of e){if(!r)return;"function"==typeof r?r(t):r.current=t}}return r(t.current),()=>{r(t.current)}}),[...e,t.current]),t}const _o={prefix:String(Math.round(1e10*Math.random())),current:0},jo=e.createContext(_o);function Uo(t){let r=d(jo),o=n((()=>({prefix:r===_o?"":r.prefix+"-"+ ++r.current,current:0})),[r]);return e.createElement(jo.Provider,{value:o},t.children)}let Go=Boolean("undefined"!=typeof window&&window.document&&window.document.createElement);function Vo(e){let t=d(jo);return t!==_o||Go||console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server."),n((()=>e||"react-aria"+t.prefix+"-"+ ++t.current),[e])}const Ko=f("div")`
   position: fixed;
@@ -317,26 +318,24 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
     }
   }
 
-  ${Nt};
-  ${Ot};
   ${rr};
-`,Jo=({dialogLabelId:t,title:r,subtitle:a,dialogDescriptionId:n,onClose:i})=>{const l=o((()=>{i("close-button")}),[i]);return e.createElement(sa.Header,null,e.createElement(or,{display:"flex"},e.createElement(or,{display:"flex",px:2,py:"6px",flexDirection:"column",flexGrow:1},e.createElement(sa.Title,{id:t},null!=r?r:"Dialog"),a&&e.createElement(sa.Subtitle,{id:n},a)),e.createElement(sa.CloseButton,{onClose:l})))};Jo.displayName="DefaultHeader";const Zo=({children:t})=>e.createElement(sa.Body,null,t);Zo.displayName="DefaultBody";const Qo=({footerButtons:t})=>{const{containerRef:r}=Po({bindKeys:Mr.ArrowHorizontal|Mr.Tab,focusInStrategy:"closest"});return t?e.createElement(sa.Footer,{ref:r},e.createElement(sa.Buttons,{buttons:t})):null},ea=e.forwardRef(((t,o)=>{const{title:a="Dialog",subtitle:n="",renderHeader:i,renderBody:l,renderFooter:d,onClose:s,role:c="dialog",width:f="xlarge",height:g="auto",footerButtons:u=[]}=t,p=Vo(),b=Vo(),m=r(null);for(const e of u)e.autoFocus&&(e.ref=m);const h={...t,title:a,subtitle:n,role:c,dialogLabelId:p,dialogDescriptionId:b},v=r(null),x=Fo(v,o),y=r(null);Ro({containerRef:v,restoreFocusOnCleanUp:!0,initialFocusRef:m}),Cr((e=>{s("escape"),e.preventDefault()}),[s]);const w=(null!=i?i:Jo)(h),B=(null!=l?l:Zo)(h),$=(null!=d?d:Qo)(h);return e.createElement(e.Fragment,null,e.createElement(Wo,null,e.createElement(Ko,{ref:y},e.createElement(Yo,{width:f,height:g,ref:x,role:c,"aria-labelledby":p,"aria-describedby":b},w,B,$))))}));ea.displayName="Dialog";const ta=f(or).attrs({as:"header"})`
+`,Jo=({dialogLabelId:t,title:r,subtitle:a,dialogDescriptionId:n,onClose:i})=>{const l=o((()=>{i("close-button")}),[i]);return e.createElement(sa.Header,null,e.createElement(or,{display:"flex"},e.createElement(or,{display:"flex",px:2,py:"6px",flexDirection:"column",flexGrow:1},e.createElement(sa.Title,{id:t},null!=r?r:"Dialog"),a&&e.createElement(sa.Subtitle,{id:n},a)),e.createElement(sa.CloseButton,{onClose:l})))};Jo.displayName="DefaultHeader";const Zo=({children:t})=>e.createElement(sa.Body,null,t);Zo.displayName="DefaultBody";const Qo=({footerButtons:t})=>{const{containerRef:r}=Po({bindKeys:Mr.ArrowHorizontal|Mr.Tab,focusInStrategy:"closest"});return t?e.createElement(sa.Footer,{ref:r},e.createElement(sa.Buttons,{buttons:t})):null},ea=e.forwardRef(((t,o)=>{const{title:a="Dialog",subtitle:n="",renderHeader:i,renderBody:l,renderFooter:d,onClose:s,role:c="dialog",width:f="xlarge",height:g="auto",footerButtons:u=[]}=t,p=Vo(),b=Vo(),m=r(null);for(const e of u)e.autoFocus&&(e.ref=m);const h={...t,title:a,subtitle:n,role:c,dialogLabelId:p,dialogDescriptionId:b},v=r(null),x=Fo(v,o),y=r(null);Ro({containerRef:v,restoreFocusOnCleanUp:!0,initialFocusRef:m}),Cr((e=>{s("escape"),e.preventDefault()}),[s]);const w=(null!=i?i:Jo)(h),B=(null!=l?l:Zo)(h),$=(null!=d?d:Qo)(h);return e.createElement(e.Fragment,null,e.createElement(Wo,null,e.createElement(Ko,{ref:y},e.createElement(Yo,{width:f,height:g,ref:x,role:c,"aria-labelledby":p,"aria-describedby":b},w,B,$))))}));ea.displayName="Dialog";const ta=f.div.attrs({as:"header"})`
   box-shadow: 0 1px 0 ${It("colors.border.default")};
   padding: ${It("space.2")};
   z-index: 1;
   flex-shrink: 0;
-`,ra=f(or)`
+`,ra=f.div`
   font-size: ${It("fontSizes.1")};
   font-weight: ${It("fontWeights.bold")};
-`,oa=f(or)`
+`,oa=f.div`
   font-size: ${It("fontSizes.0")};
   margin-top: ${It("space.1")};
   color: ${It("colors.fg.muted")};
-`,aa=f(or)`
+`,aa=f.div`
   flex-grow: 1;
   overflow: auto;
   padding: ${It("space.3")};
-`,na=f(or).attrs({as:"footer"})`
+`,na=f.div.attrs({as:"footer"})`
   box-shadow: 0 -1px 0 ${It("colors.border.default")};
   padding: ${It("space.3")};
   display: flex;
@@ -1012,7 +1011,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
   }
   ${Nt};
   ${rr};
-`;si.defaultProps={direction:"sw"},si.displayName="Dropdown.Menu",ci.displayName="Dropdown.Item",li.defaultProps=qr.defaultProps,li.displayName="Dropdown.Button",di.displayName="Dropdown.Caret",ii.defaultProps=Kn.defaultProps;var fi=Object.assign(ii,{Caret:di,Menu:si,Item:ci,Button:li});const gi=e.forwardRef((({children:t,...r},o)=>e.createElement(qr,Pt({ref:o,type:"button"},r),t,e.createElement(Mo,{icon:po,sx:{ml:1}}))));function ui({renderAnchor:t=(t=>e.createElement(gi,t)),anchorRef:r,placeholder:a,selectedItem:i,onChange:l,overlayProps:d,items:s,open:c,onOpenChange:f,...g}){const[u,p]=Xa(c,f,!1),b=o((()=>p(!0)),[p]),m=o((()=>p(!1)),[p]),h=zr(r),v=n((()=>null===t?null:e=>{var r;return t({...e,children:null!==(r=null==i?void 0:i.text)&&void 0!==r?r:a})}),[a,t,null==i?void 0:i.text]),x=n((()=>s.map((e=>({...e,role:"option",selected:e===i,onAction:(t,r)=>{var o;null===(o=e.onAction)||void 0===o||o.call(e,t,r),r.defaultPrevented||(m(),null==l||l(e===i?void 0:e))}})))),[s,l,m,i]);return e.createElement(qa,{renderAnchor:v,anchorRef:h,open:u,onOpen:b,onClose:m,overlayProps:d},e.createElement(Fa,Pt({},g,{role:"listbox",items:x})))}ui.displayName="DropdownMenu",ui.displayName="DropdownMenu";var pi=f.div`
+`;si.defaultProps={direction:"sw"},si.displayName="Dropdown.Menu",ci.displayName="Dropdown.Item",li.defaultProps=qr.defaultProps,li.displayName="Dropdown.Button",di.displayName="Dropdown.Caret",ii.defaultProps=Kn.defaultProps;var fi=Object.assign(ii,{Caret:di,Menu:si,Item:ci,Button:li});const gi=e.forwardRef((({children:t,...r},o)=>e.createElement(qr,Pt({ref:o,type:"button"},r),t,e.createElement(Mo,{icon:po,ml:1}))));function ui({renderAnchor:t=(t=>e.createElement(gi,t)),anchorRef:r,placeholder:a,selectedItem:i,onChange:l,overlayProps:d,items:s,open:c,onOpenChange:f,...g}){const[u,p]=Xa(c,f,!1),b=o((()=>p(!0)),[p]),m=o((()=>p(!1)),[p]),h=zr(r),v=n((()=>null===t?null:e=>{var r;return t({...e,children:null!==(r=null==i?void 0:i.text)&&void 0!==r?r:a})}),[a,t,null==i?void 0:i.text]),x=n((()=>s.map((e=>({...e,role:"option",selected:e===i,onAction:(t,r)=>{var o;null===(o=e.onAction)||void 0===o||o.call(e,t,r),r.defaultPrevented||(m(),null==l||l(e===i?void 0:e))}})))),[s,l,m,i]);return e.createElement(qa,{renderAnchor:v,anchorRef:h,open:u,onOpen:b,onClose:m,overlayProps:d},e.createElement(Fa,Pt({},g,{role:"listbox",items:x})))}ui.displayName="DropdownMenu",ui.displayName="DropdownMenu";var pi=f.div`
   ${Nt};
   display: flex;
   align-items: stretch;
@@ -1700,7 +1699,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
   ${ad};
   ${Nt};
   ${rr};
-`;function id({children:t,status:r,variant:o,...a}){const n="small"===o?{width:"1em"}:{};return e.createElement(nd,Pt({},a,{variant:o,status:r}),r&&e.createElement(Mo,Pt({},n,{icon:rd[r]||uo,sx:{mr:1}})),t)}id.displayName="StateLabel",id.defaultProps={variant:"normal"};const ld=f.nav`
+`;function id({children:t,status:r,variant:o,...a}){const n="small"===o?{width:"1em"}:{};return e.createElement(nd,Pt({},a,{variant:o,status:r}),r&&e.createElement(Mo,Pt({mr:1},n,{icon:rd[r]||uo})),t)}id.displayName="StateLabel",id.defaultProps={variant:"normal"};const ld=f.nav`
   display: flex;
   justify-content: space-between;