@primer/components 0.0.0-202191305320 → 0.0.0-2021913233916

package/CHANGELOG.md

@@ -1,6 +1,14 @@
 # @primer/components
 
-## 0.0.0-202191305320
+## 0.0.0-2021913233916
+
+### Minor Changes
+
+- [#1490](https://github.com/primer/react/pull/1490) [`c156b07a`](https://github.com/primer/react/commit/c156b07ab6f2f5ad6d35d1c4f89d8a7f37ad1cef) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds `Autocomplete`, `AutocompleteMenu`, `AutocompleteInput`, and `AutocompleteOverlay` components
+
+* [#1489](https://github.com/primer/react/pull/1489) [`273ef29d`](https://github.com/primer/react/commit/273ef29d1d8f28bb856faba4da803e7ad0892c6e) Thanks [@mperrotti](https://github.com/mperrotti)! - Add alpha `TextInputWithTokens` component
+
+- [#1488](https://github.com/primer/react/pull/1488) [`05ac5aab`](https://github.com/primer/react/commit/05ac5aabb6bf39150557732605f9ce0fb3b9d1ec) Thanks [@mperrotti](https://github.com/mperrotti)! - Add alpha `Token`, `AvatarToken`, `IssueLabelToken` components
 
 ### Patch Changes
 

package/dist/browser.esm.js

@@ -1809,6 +1809,7 @@ import e,{useState as r,useRef as t,useCallback as a,useEffect as o,useMemo as n
   cursor: ${e=>xl(e)?"pointer":"auto"};
   display: inline-flex;
   font-weight: ${Ar("fontWeights.bold")};
+  font-family: inherit;
   text-decoration: none;
   white-space: nowrap;
   ${vl}
@@ -1898,7 +1899,7 @@ import e,{useState as r,useRef as t,useCallback as a,useEffect as o,useMemo as n
 `,Cl=f("span")`
   flex-shrink: 0;
   line-height: 0;
-`,Al=i(((r,t)=>{const{as:a,onRemove:o,id:n,leadingVisual:i,text:d,size:l,hideRemoveButton:c,href:s,onClick:f,...g}=r,b=xl(r)&&Boolean(o)&&!c,u={as:a,href:s,onClick:f};return e.createElement(El,Mr({onRemove:o,hideRemoveButton:c||!o,id:null==n?void 0:n.toString(),text:d,size:l,isTokenInteractive:xl(r)},b?{}:u,g,{ref:t}),i?e.createElement(Cl,null,e.createElement(i,null)):null,e.createElement(Il,b?u:{},d),!c&&o?e.createElement(Sl,{borderOffset:1,onClick:e=>{e.stopPropagation(),o&&o()},size:l,isParentInteractive:xl(r),"aria-hidden":b?"true":"false",sx:b?{position:"relative",zIndex:"1"}:{}}):null)}));Al.displayName="Token",Al.defaultProps={size:"medium"};var zl=Al;function Nl({icon:a,contrast:o,className:n,block:i,disabled:d,theme:l,sx:c,tokens:s,onTokenRemove:f,tokenComponent:g,preventTokenWrapping:b,size:u,hideTokenRemoveButtons:p,maxHeight:h,width:m,minWidth:x,maxWidth:v,variant:y,...B},w){const{onFocus:k,onKeyDown:$,...T}=function(e){var r={};for(var t in e)hl.test(t)||(r[t]=e[t]);return r}(B),S=Ct(w),I=Pa(t(null),S),[E,C]=r(),{containerRef:A}=La({focusOutBehavior:"wrap",bindKeys:Ot.ArrowHorizontal|Ot.HomeAndEnd,focusableElementFilter:e=>!e.getAttributeNames().includes("aria-hidden"),getNextFocusable:e=>{var r;if(!E&&0!==E)return;let t=E+1;return"next"===e&&(t+=1),"previous"===e&&(t-=1),t>s.length||t<1?I.current||void 0:null===(r=A.current)||void 0===r?void 0:r.children[t]}},[E]),z=e=>{if(f(e),E){var r;(null===(r=A.current)||void 0===r?void 0:r.children[E]).focus()}},N=()=>{C(void 0)},R=e=>{var r;"Escape"===e.key&&(null===(r=S.current)||void 0===r||r.focus())};return e.createElement(an,{block:i,className:n,contrast:o,disabled:d,hasIcon:!!a,theme:l,width:m,minWidth:x,maxWidth:v,variant:y,ref:A,sx:{alignItems:"center",flexWrap:b?"nowrap":"wrap",gap:"0.25rem","> *":{flexShrink:0},...i?{display:"flex",width:"100%"}:{},...h?{maxHeight:h,overflow:"auto"}:{},...b?{overflow:"auto"}:{},...c}},e.createElement(at,{sx:{order:1,flexGrow:1}},a&&e.createElement(a,{className:"TextInput-icon"}),e.createElement(rn,Mr({ref:I,disabled:d,onFocus:e=>{k&&k(e),C(void 0)},onKeyDown:e=>{var r;if($&&$(e),null!==(r=S.current)&&void 0!==r&&r.value)return;const t=s[s.length-1];"Backspace"===e.key&&t&&(z(t.id),S.current&&(S.current.value=`${t.text} `),setTimeout((()=>{var e;null===(e=S.current)||void 0===e||e.select()}),0))},type:"text",sx:{height:"100%"}},T))),s.length&&g?s.map((({id:r,...t},a)=>{return e.createElement(g,Mr({key:r,onFocus:(o=a,()=>{C(o)}),onBlur:N,onKeyUp:R,isSelected:E===a,onRemove:()=>{z(r)},hideRemoveButton:p,size:u,tabIndex:0},t));var o})):null)}Nl.displayName="TextInputWithTokensInnerComponent";const Rl=e.forwardRef(Nl);Rl.defaultProps={tokenComponent:zl,size:"extralarge",hideTokenRemoveButtons:!1},Rl.displayName="TextInputWithTokens";var Ll=Rl;const Hl=f(at)`
+`,Al=i(((r,t)=>{const{as:a,onRemove:o,id:n,leadingVisual:i,text:d,size:l,hideRemoveButton:c,href:s,onClick:f,...g}=r,b=xl(r)&&Boolean(o)&&!c,u={as:a,href:s,onClick:f};return e.createElement(El,Mr({onRemove:o,hideRemoveButton:c||!o,id:null==n?void 0:n.toString(),text:d,size:l,isTokenInteractive:xl(r)},b?{}:u,g,{ref:t}),i?e.createElement(Cl,null,e.createElement(i,null)):null,e.createElement(Il,b?u:{},d),!c&&o?e.createElement(Sl,{borderOffset:1,onClick:e=>{e.stopPropagation(),o&&o()},size:l,isParentInteractive:xl(r),"aria-hidden":b?"true":"false",sx:b?{position:"relative",zIndex:"1"}:{}}):null)}));Al.displayName="Token",Al.defaultProps={size:"medium"};var zl=Al;function Nl({icon:a,contrast:o,className:n,block:i,disabled:d,theme:l,sx:c,tokens:s,onTokenRemove:f,tokenComponent:g,preventTokenWrapping:b,size:u,hideTokenRemoveButtons:p,maxHeight:h,width:m,minWidth:x,maxWidth:v,variant:y,...B},w){const{onFocus:k,onKeyDown:$,...T}=function(e){var r={};for(var t in e)hl.test(t)||(r[t]=e[t]);return r}(B),S=Ct(w),I=Pa(t(null),S),[E,C]=r(),{containerRef:A}=La({focusOutBehavior:"wrap",bindKeys:Ot.ArrowHorizontal|Ot.HomeAndEnd,focusableElementFilter:e=>!e.getAttributeNames().includes("aria-hidden"),getNextFocusable:e=>{var r;if(!E&&0!==E)return;let t=E+1;return"next"===e&&(t+=1),"previous"===e&&(t-=1),t>s.length||t<1?I.current||void 0:null===(r=A.current)||void 0===r?void 0:r.children[t]}},[E]),z=e=>{if(f(e),E){var r;(null===(r=A.current)||void 0===r?void 0:r.children[E]).focus()}},N=()=>{C(void 0)},R=e=>{var r;"Escape"===e.key&&(null===(r=S.current)||void 0===r||r.focus())};return e.createElement(an,{block:i,className:n,contrast:o,disabled:d,hasIcon:!!a,theme:l,width:m,minWidth:x,maxWidth:v,variant:y,ref:A,sx:{alignItems:"center",flexWrap:b?"nowrap":"wrap",gap:"0.25rem","> *":{flexShrink:0},...i?{display:"flex",width:"100%"}:{},...h?{maxHeight:h,overflow:"auto"}:{},...b?{overflow:"auto"}:{},...c}},e.createElement(at,{sx:{order:1,flexGrow:1}},a&&e.createElement(a,{className:"TextInput-icon"}),e.createElement(rn,Mr({ref:I,disabled:d,onFocus:e=>{k&&k(e),C(void 0)},onKeyDown:e=>{var r;if($&&$(e),null!==(r=S.current)&&void 0!==r&&r.value)return;const t=s[s.length-1];"Backspace"===e.key&&t&&(z(t.id),S.current&&(S.current.value=`${t.text} `),setTimeout((()=>{var e;null===(e=S.current)||void 0===e||e.select()}),0))},type:"text",sx:{height:"100%"}},T))),s.length&&g?s.map((({id:r,...t},a)=>{return e.createElement(g,Mr({key:r,onFocus:(o=a,()=>{C(o)}),onBlur:N,onKeyUp:R,isSelected:E===a,onRemove:()=>{z(r)},hideRemoveButton:p,size:u,tabIndex:0},t));var o})):null)}Nl.displayName="TextInputWithTokensInnerComponent";const Rl=e.forwardRef(Nl);Rl.defaultProps={tokenComponent:zl,size:"extralarge",hideTokenRemoveButtons:!1,preventTokenWrapping:!1},Rl.displayName="TextInputWithTokens";var Ll=Rl;const Hl=f(at)`
   display: flex;
   flex-direction: column;
   ${e=>e.clipSidebar&&u([".Timeline-Item:first-child{padding-top:0;}.Timeline-Item:last-child{padding-bottom:0;}"])}