@primer/components 0.0.0-20211010142947 → 0.0.0-2021101015253

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/components
 
-## 0.0.0-20211010142947
+## 0.0.0-2021101015253
 
 ### Minor Changes
 
@@ -12,9 +12,7 @@
 
 * Fake entry to force publishing
 
-- [#1592](https://github.com/primer/react/pull/1592) [`a18c01e5`](https://github.com/primer/react/commit/a18c01e58ea67e51e62ba7bb2d516f23104992c3) Thanks [@rezrah](https://github.com/rezrah)! - Fixes a styling bug in TextInput components while using its `icon` and `block` props together
-
-* [#1549](https://github.com/primer/react/pull/1549) [`f565840f`](https://github.com/primer/react/commit/f565840f2d879b987ef9df7cd046e146214ed5f5) Thanks [@michael-lefebvre](https://github.com/michael-lefebvre)! - Fix `auxiliaryText` in ActionList Group header
+- [#1549](https://github.com/primer/react/pull/1549) [`f565840f`](https://github.com/primer/react/commit/f565840f2d879b987ef9df7cd046e146214ed5f5) Thanks [@michael-lefebvre](https://github.com/michael-lefebvre)! - Fix `auxiliaryText` in ActionList Group header
 
 ## 31.1.0
 

package/dist/browser.esm.js

@@ -650,7 +650,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
     ${we}
     ${on}
     ${rr};
-`;const nn=e.forwardRef((({icon:t,block:r,className:o,contrast:a,disabled:n,sx:i,theme:l,width:d,minWidth:s,maxWidth:c,variant:f,...g},u)=>{const p=tn(o,"TextInput-wrapper"),b=t&&r&&{...i,display:"flex"};return e.createElement(an,{block:r,className:p,contrast:a,disabled:n,hasIcon:!!t,sx:b||i,theme:l,width:d,minWidth:s,maxWidth:c,variant:f},t&&e.createElement(t,{className:"TextInput-icon"}),e.createElement(rn,Pt({ref:u,disabled:n},g)))}));nn.defaultProps={type:"text"},nn.displayName="TextInput";var ln=nn;const dn=e.forwardRef((({as:r=ln,onFocus:n,onBlur:i,onChange:l,onKeyDown:s,onKeyUp:c,onKeyPress:f,value:g,...u},p)=>{const b=d(Za);if(null===b)throw new Error("AutocompleteContext returned null values");const{activeDescendantRef:m,autocompleteSuggestion:h="",id:v,inputRef:x,inputValue:y="",isMenuDirectlyActivated:w,setInputValue:B,setShowMenu:$,showMenu:k}=b,T=Wo(x,p),[S,E]=t(!0),C=o((e=>{n&&n(e),$(!0)}),[n,$]),z=o((e=>{i&&i(e),setTimeout((()=>{document.activeElement!==T.current&&$(!1)}),0)}),[i,$,T]),N=o((e=>{l&&l(e),B(e.currentTarget.value),k||$(!0)}),[l,B,$,k]),I=o((e=>{var t;s&&s(e),"Backspace"===e.key&&E(!1),"Escape"===e.key&&null!==(t=x.current)&&void 0!==t&&t.value&&(B(""),x.current.value="")}),[x,B,E,s]),A=o((e=>{c&&c(e),"Backspace"===e.key&&E(!0)}),[E,c]),R=o((e=>{if(f&&f(e),k&&"Enter"===e.key&&m.current){e.preventDefault(),e.nativeEvent.stopImmediatePropagation();const t=new KeyboardEvent(e.type,e.nativeEvent);m.current.dispatchEvent(t)}}),[m,k,f]);return a((()=>{x.current&&(h||(x.current.value=y),S&&h&&(y||w)&&(x.current.value=h,0===h.toLowerCase().indexOf(y.toLowerCase())&&x.current.setSelectionRange(y.length,h.length)))}),[h,y,x,w]),a((()=>{g&&B(g.toString())}),[g,B]),e.createElement(r,Pt({onFocus:C,onBlur:z,onChange:N,onKeyDown:I,onKeyPress:R,onKeyUp:A,ref:T,"aria-controls":`${v}-listbox`,"aria-autocomplete":"both",role:"combobox","aria-expanded":k,"aria-haspopup":"listbox","aria-owns":`${v}-listbox`,autocomplete:"off"},u))}));dn.displayName="AutocompleteInput";var sn=dn;const cn=(e,t,r="vertical",o=8,a=0,n="smooth")=>{const i="vertical"===r?"top":"left",l="vertical"===r?"bottom":"right",d="vertical"===r?"scrollTop":"scrollLeft",{[i]:s,[l]:c}=e.getBoundingClientRect(),{[i]:f,[l]:g}=t.getBoundingClientRect(),u=c>g-o;if(s<f+a){const e=s-f+t[d];t.scrollTo({behavior:n,[i]:e-a})}else if(u){const e=c-g+t[d];t.scrollTo({behavior:n,[i]:e+o})}};function fn(o){const i=d(Za);if(null===i)throw new Error("AutocompleteContext returned null values");const{activeDescendantRef:l,id:s,inputRef:c,inputValue:f="",scrollContainerRef:g,setAutocompleteSuggestion:u,setShowMenu:p,setInputValue:b,setIsMenuDirectlyActivated:m,setSelectedItemLength:h,showMenu:v}=i,{items:x,selectedItemIds:y,sortOnCloseFn:w,emptyStateText:B,addNewItem:$,loading:k,selectionVariant:T,filterFn:S,"aria-labelledby":E,onOpenChange:C,onSelectedChange:z,customScrollContainerRef:N}=o,I=r(null),[A,R]=t(),[L,O]=t(x.map((({id:e})=>e))),M=n((()=>x.map((e=>({...e,role:"option",id:e.id,selected:"multiple"===T?y.includes(e.id):void 0,onAction:e=>{const t=y.filter((t=>t!==e.id)),r=y.includes(e.id)?t:[...t,e.id];var o,a;((z||(o=b,function(e){const{text:t=""}=Array.isArray(e)?e.slice(-1)[0]:e;o(t)}))(r.map((e=>function(e,t){return t.find((t=>t.id===e))}(e,x)))),"multiple"===T)?(b(""),u("")):(p(!1),null===(a=c.current)||void 0===a||a.setSelectionRange(c.current.value.length,c.current.value.length))}})))),[x,y,c,z,T,u,b,p]),P=n((()=>L.reduce(((e,t,r)=>(e[t]=r,e)),{})),[L]),H=n((()=>{return M.filter(S||(e=f,function(t,r){var o;return Boolean(null===(o=t.text)||void 0===o?void 0:o.toLowerCase().startsWith(e.toLowerCase()))})).sort(((e,t)=>P[e.id]-P[t.id]));var e}),[M,P,S,f]),D=n((()=>[...H,...$?[{...$,leadingVisual:()=>e.createElement(fo,null),onAction:e=>{$.handleAddItem({...e,id:e.id||Hr(),leadingVisual:void 0}),"multiple"===T&&(b(""),u(""))}}]:[]]),[H,$,u,T,b]);return Mo({containerRef:I,focusOutBehavior:"wrap",focusableElementFilter:e=>!(e instanceof HTMLInputElement),activeDescendantFocus:c,onActiveDescendantChanged:(e,t,r)=>{if(l.current=e||null,e){const t=M.find((t=>t.id.toString()===e.getAttribute("data-id")));R(t),m(r)}e&&N&&N.current&&r?cn(e,N.current):e&&g.current&&r&&cn(e,g.current)}},[k]),a((()=>{var e;null!=A&&null!==(e=A.text)&&void 0!==e&&e.startsWith(f)&&!y.includes(A.id)?u(A.text):u("")}),[A,f,y,u]),a((()=>{const e=[...L].sort(w||(t=e=>((e,t)=>t.includes(e))(e,y),(e,r)=>t(e)===t(r)?0:t(e)?-1:1));var t;const r=e.length===L.length&&e.every(((e,t)=>e===L[t]));!1!==v||r||O(e),C&&C(Boolean(v))}),[v,C,y,w,L]),a((()=>{y.length&&h(y.length)}),[y,h]),e.createElement(or,{sx:v?{}:{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",borderWidth:"0"}},k?e.createElement(or,{p:3,display:"flex",justifyContent:"center"},e.createElement(kl,null)):e.createElement("div",{ref:I},D.length?e.createElement(Fa,{selectionVariant:"multiple",items:D,role:"listbox",id:`${s}-listbox`,"aria-labelledby":E}):e.createElement(or,{p:3},B)))}function gn({menuAnchorRef:t,overlayProps:r,children:a}){const n=d(Za);if(null===n)throw new Error("AutocompleteContext returned null values");const{inputRef:i,scrollContainerRef:l,selectedItemLength:s,setShowMenu:c,showMenu:f=!1}=n,{floatingElementRef:g,position:u}=Eo({side:"outside-bottom",align:"start",anchorElementRef:t||i},[f,s]),p=Wo(l,g),b=o((()=>{c(!1)}),[c]);return"undefined"==typeof window?null:e.createElement(Va,Pt({returnFocusRef:i,preventFocusOnOpen:!0,onClickOutside:b,onEscape:b,ref:p,top:null==u?void 0:u.top,left:null==u?void 0:u.left,visibility:f?"visible":"hidden",sx:{overflow:"auto"}},r),a)}fn.displayName="AutocompleteMenu",fn.defaultProps={emptyStateText:"No selectable options",selectionVariant:"single"},fn.displayName="AutocompleteMenu",gn.displayName="AutocompleteOverlay",gn.displayName="AutocompleteOverlay";const un={inputValue:"",showMenu:!1,isMenuDirectlyActivated:!1,autocompleteSuggestion:"",selectedItemLength:0},pn=(e,t)=>{const{type:r,payload:o}=t;switch(r){case"inputValue":return{...e,inputValue:o};case"showMenu":return{...e,showMenu:o};case"isMenuDirectlyActivated":return{...e,isMenuDirectlyActivated:o};case"autocompleteSuggestion":return{...e,autocompleteSuggestion:o};case"selectedItemLength":return{...e,selectedItemLength:o};default:return e}},bn=({children:t,id:a})=>{const n=r(null),i=r(null),l=r(null),[d,s]=c(pn,un),{inputValue:f,showMenu:g,autocompleteSuggestion:u,isMenuDirectlyActivated:p,selectedItemLength:b}=d,m=o((e=>{s({type:"inputValue",payload:e})}),[]),h=o((e=>{s({type:"showMenu",payload:e})}),[]),v=o((e=>{s({type:"autocompleteSuggestion",payload:e})}),[]),x=o((e=>{s({type:"isMenuDirectlyActivated",payload:e})}),[]),y=o((e=>{s({type:"selectedItemLength",payload:e})}),[]),w=Go(a);return e.createElement(Za.Provider,{value:{activeDescendantRef:n,autocompleteSuggestion:u,id:w,inputRef:l,inputValue:f,isMenuDirectlyActivated:p,scrollContainerRef:i,selectedItemLength:b,setAutocompleteSuggestion:v,setInputValue:m,setIsMenuDirectlyActivated:x,setShowMenu:h,setSelectedItemLength:y,showMenu:g}},t)};bn.displayName="Autocomplete";var mn=Object.assign(bn,{Input:sn,Menu:fn,Overlay:gn});const hn=f.img.attrs((e=>({height:e.size,width:e.size})))`
+`;const nn=e.forwardRef((({icon:t,block:r,className:o,contrast:a,disabled:n,sx:i,theme:l,width:d,minWidth:s,maxWidth:c,variant:f,...g},u)=>{const p=tn(o,"TextInput-wrapper");return e.createElement(an,{block:r,className:p,contrast:a,disabled:n,hasIcon:!!t,sx:i,theme:l,width:d,minWidth:s,maxWidth:c,variant:f},t&&e.createElement(t,{className:"TextInput-icon"}),e.createElement(rn,Pt({ref:u,disabled:n},g)))}));nn.defaultProps={type:"text"},nn.displayName="TextInput";var ln=nn;const dn=e.forwardRef((({as:r=ln,onFocus:n,onBlur:i,onChange:l,onKeyDown:s,onKeyUp:c,onKeyPress:f,value:g,...u},p)=>{const b=d(Za);if(null===b)throw new Error("AutocompleteContext returned null values");const{activeDescendantRef:m,autocompleteSuggestion:h="",id:v,inputRef:x,inputValue:y="",isMenuDirectlyActivated:w,setInputValue:B,setShowMenu:$,showMenu:k}=b,T=Wo(x,p),[S,E]=t(!0),C=o((e=>{n&&n(e),$(!0)}),[n,$]),z=o((e=>{i&&i(e),setTimeout((()=>{document.activeElement!==T.current&&$(!1)}),0)}),[i,$,T]),N=o((e=>{l&&l(e),B(e.currentTarget.value),k||$(!0)}),[l,B,$,k]),I=o((e=>{var t;s&&s(e),"Backspace"===e.key&&E(!1),"Escape"===e.key&&null!==(t=x.current)&&void 0!==t&&t.value&&(B(""),x.current.value="")}),[x,B,E,s]),A=o((e=>{c&&c(e),"Backspace"===e.key&&E(!0)}),[E,c]),R=o((e=>{if(f&&f(e),k&&"Enter"===e.key&&m.current){e.preventDefault(),e.nativeEvent.stopImmediatePropagation();const t=new KeyboardEvent(e.type,e.nativeEvent);m.current.dispatchEvent(t)}}),[m,k,f]);return a((()=>{x.current&&(h||(x.current.value=y),S&&h&&(y||w)&&(x.current.value=h,0===h.toLowerCase().indexOf(y.toLowerCase())&&x.current.setSelectionRange(y.length,h.length)))}),[h,y,x,w]),a((()=>{g&&B(g.toString())}),[g,B]),e.createElement(r,Pt({onFocus:C,onBlur:z,onChange:N,onKeyDown:I,onKeyPress:R,onKeyUp:A,ref:T,"aria-controls":`${v}-listbox`,"aria-autocomplete":"both",role:"combobox","aria-expanded":k,"aria-haspopup":"listbox","aria-owns":`${v}-listbox`,autocomplete:"off"},u))}));dn.displayName="AutocompleteInput";var sn=dn;const cn=(e,t,r="vertical",o=8,a=0,n="smooth")=>{const i="vertical"===r?"top":"left",l="vertical"===r?"bottom":"right",d="vertical"===r?"scrollTop":"scrollLeft",{[i]:s,[l]:c}=e.getBoundingClientRect(),{[i]:f,[l]:g}=t.getBoundingClientRect(),u=c>g-o;if(s<f+a){const e=s-f+t[d];t.scrollTo({behavior:n,[i]:e-a})}else if(u){const e=c-g+t[d];t.scrollTo({behavior:n,[i]:e+o})}};function fn(o){const i=d(Za);if(null===i)throw new Error("AutocompleteContext returned null values");const{activeDescendantRef:l,id:s,inputRef:c,inputValue:f="",scrollContainerRef:g,setAutocompleteSuggestion:u,setShowMenu:p,setInputValue:b,setIsMenuDirectlyActivated:m,setSelectedItemLength:h,showMenu:v}=i,{items:x,selectedItemIds:y,sortOnCloseFn:w,emptyStateText:B,addNewItem:$,loading:k,selectionVariant:T,filterFn:S,"aria-labelledby":E,onOpenChange:C,onSelectedChange:z,customScrollContainerRef:N}=o,I=r(null),[A,R]=t(),[L,O]=t(x.map((({id:e})=>e))),M=n((()=>x.map((e=>({...e,role:"option",id:e.id,selected:"multiple"===T?y.includes(e.id):void 0,onAction:e=>{const t=y.filter((t=>t!==e.id)),r=y.includes(e.id)?t:[...t,e.id];var o,a;((z||(o=b,function(e){const{text:t=""}=Array.isArray(e)?e.slice(-1)[0]:e;o(t)}))(r.map((e=>function(e,t){return t.find((t=>t.id===e))}(e,x)))),"multiple"===T)?(b(""),u("")):(p(!1),null===(a=c.current)||void 0===a||a.setSelectionRange(c.current.value.length,c.current.value.length))}})))),[x,y,c,z,T,u,b,p]),P=n((()=>L.reduce(((e,t,r)=>(e[t]=r,e)),{})),[L]),H=n((()=>{return M.filter(S||(e=f,function(t,r){var o;return Boolean(null===(o=t.text)||void 0===o?void 0:o.toLowerCase().startsWith(e.toLowerCase()))})).sort(((e,t)=>P[e.id]-P[t.id]));var e}),[M,P,S,f]),D=n((()=>[...H,...$?[{...$,leadingVisual:()=>e.createElement(fo,null),onAction:e=>{$.handleAddItem({...e,id:e.id||Hr(),leadingVisual:void 0}),"multiple"===T&&(b(""),u(""))}}]:[]]),[H,$,u,T,b]);return Mo({containerRef:I,focusOutBehavior:"wrap",focusableElementFilter:e=>!(e instanceof HTMLInputElement),activeDescendantFocus:c,onActiveDescendantChanged:(e,t,r)=>{if(l.current=e||null,e){const t=M.find((t=>t.id.toString()===e.getAttribute("data-id")));R(t),m(r)}e&&N&&N.current&&r?cn(e,N.current):e&&g.current&&r&&cn(e,g.current)}},[k]),a((()=>{var e;null!=A&&null!==(e=A.text)&&void 0!==e&&e.startsWith(f)&&!y.includes(A.id)?u(A.text):u("")}),[A,f,y,u]),a((()=>{const e=[...L].sort(w||(t=e=>((e,t)=>t.includes(e))(e,y),(e,r)=>t(e)===t(r)?0:t(e)?-1:1));var t;const r=e.length===L.length&&e.every(((e,t)=>e===L[t]));!1!==v||r||O(e),C&&C(Boolean(v))}),[v,C,y,w,L]),a((()=>{y.length&&h(y.length)}),[y,h]),e.createElement(or,{sx:v?{}:{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",borderWidth:"0"}},k?e.createElement(or,{p:3,display:"flex",justifyContent:"center"},e.createElement(kl,null)):e.createElement("div",{ref:I},D.length?e.createElement(Fa,{selectionVariant:"multiple",items:D,role:"listbox",id:`${s}-listbox`,"aria-labelledby":E}):e.createElement(or,{p:3},B)))}function gn({menuAnchorRef:t,overlayProps:r,children:a}){const n=d(Za);if(null===n)throw new Error("AutocompleteContext returned null values");const{inputRef:i,scrollContainerRef:l,selectedItemLength:s,setShowMenu:c,showMenu:f=!1}=n,{floatingElementRef:g,position:u}=Eo({side:"outside-bottom",align:"start",anchorElementRef:t||i},[f,s]),p=Wo(l,g),b=o((()=>{c(!1)}),[c]);return"undefined"==typeof window?null:e.createElement(Va,Pt({returnFocusRef:i,preventFocusOnOpen:!0,onClickOutside:b,onEscape:b,ref:p,top:null==u?void 0:u.top,left:null==u?void 0:u.left,visibility:f?"visible":"hidden",sx:{overflow:"auto"}},r),a)}fn.displayName="AutocompleteMenu",fn.defaultProps={emptyStateText:"No selectable options",selectionVariant:"single"},fn.displayName="AutocompleteMenu",gn.displayName="AutocompleteOverlay",gn.displayName="AutocompleteOverlay";const un={inputValue:"",showMenu:!1,isMenuDirectlyActivated:!1,autocompleteSuggestion:"",selectedItemLength:0},pn=(e,t)=>{const{type:r,payload:o}=t;switch(r){case"inputValue":return{...e,inputValue:o};case"showMenu":return{...e,showMenu:o};case"isMenuDirectlyActivated":return{...e,isMenuDirectlyActivated:o};case"autocompleteSuggestion":return{...e,autocompleteSuggestion:o};case"selectedItemLength":return{...e,selectedItemLength:o};default:return e}},bn=({children:t,id:a})=>{const n=r(null),i=r(null),l=r(null),[d,s]=c(pn,un),{inputValue:f,showMenu:g,autocompleteSuggestion:u,isMenuDirectlyActivated:p,selectedItemLength:b}=d,m=o((e=>{s({type:"inputValue",payload:e})}),[]),h=o((e=>{s({type:"showMenu",payload:e})}),[]),v=o((e=>{s({type:"autocompleteSuggestion",payload:e})}),[]),x=o((e=>{s({type:"isMenuDirectlyActivated",payload:e})}),[]),y=o((e=>{s({type:"selectedItemLength",payload:e})}),[]),w=Go(a);return e.createElement(Za.Provider,{value:{activeDescendantRef:n,autocompleteSuggestion:u,id:w,inputRef:l,inputValue:f,isMenuDirectlyActivated:p,scrollContainerRef:i,selectedItemLength:b,setAutocompleteSuggestion:v,setInputValue:m,setIsMenuDirectlyActivated:x,setShowMenu:h,setSelectedItemLength:y,showMenu:g}},t)};bn.displayName="Autocomplete";var mn=Object.assign(bn,{Input:sn,Menu:fn,Overlay:gn});const hn=f.img.attrs((e=>({height:e.size,width:e.size})))`
   display: inline-block;
   overflow: hidden; // Ensure page layout in Firefox should images fail to load
   line-height: ${Nt("lineHeights.condensedUltra")};