@primer/components 31.0.2-rc.1e80de40 → 31.0.2-rc.c7dafefb

package/CHANGELOG.md

@@ -4,7 +4,9 @@
 
 ### Patch Changes
 
-- [#1526](https://github.com/primer/react/pull/1526) [`1378e771`](https://github.com/primer/react/commit/1378e771323a48e6084c5ffac7d93b54960f4a0e) Thanks [@mperrotti](https://github.com/mperrotti)! - replaces flexbox gap usage with margins
+- [#1529](https://github.com/primer/react/pull/1529) [`da566044`](https://github.com/primer/react/commit/da566044649a114e23789e3ac90c022cdbf5eaeb) Thanks [@mperrotti](https://github.com/mperrotti)! - Fixes a bug in `TextInputWithTokens` where the next token would not receive focus after the user deleted the first token using the keyboard
+
+* [#1526](https://github.com/primer/react/pull/1526) [`1378e771`](https://github.com/primer/react/commit/1378e771323a48e6084c5ffac7d93b54960f4a0e) Thanks [@mperrotti](https://github.com/mperrotti)! - replaces flexbox gap usage with margins
 
 ## 31.0.1
 

package/dist/browser.esm.js

@@ -1907,7 +1907,7 @@ import e,{useState as t,useRef as r,useCallback as o,useEffect as a,useMemo as n
   line-height: 0;
 
   ${e=>{switch(e.size){case"large":case"extralarge":return p(["margin-right:",";"],Nt("space.2"));default:return p(["margin-right:",";"],Nt("space.1"))}}}
-`,Nd=i(((t,r)=>{const{as:o,onRemove:a,id:n,leadingVisual:i,text:l,size:d,hideRemoveButton:s,href:c,onClick:f,...g}=t,u=vd(t)&&Boolean(a)&&!s,p={as:o,href:c,onClick:f};return e.createElement(Cd,Pt({onRemove:a,hideRemoveButton:s||!a,id:null==n?void 0:n.toString(),text:l,size:d,isTokenInteractive:vd(t)},u?{}:p,g,{ref:r}),i?e.createElement(zd,{size:d},e.createElement(i,null)):null,e.createElement(Ed,u?p:{},l),!s&&a?e.createElement(Sd,{borderOffset:1,onClick:e=>{e.stopPropagation(),a&&a()},size:d,isParentInteractive:vd(t),"aria-hidden":u?"true":"false",sx:u?{position:"relative",zIndex:"1"}:{}}):null)}));Nd.displayName="Token",Nd.defaultProps={size:"medium"};var Id=Nd;function Ad({icon:o,contrast:a,className:n,block:i,disabled:l,theme:d,sx:s,tokens:c,onTokenRemove:f,tokenComponent:g,preventTokenWrapping:u,size:p,hideTokenRemoveButtons:b,maxHeight:m,width:h,minWidth:v,maxWidth:x,variant:y,...w},B){const{onFocus:$,onKeyDown:k,...T}=function(e){var t={};for(var r in e)md.test(r)||(t[r]=e[r]);return t}(w),S=zr(B),E=Do(r(null),S),[C,z]=t(),{containerRef:N}=Oo({focusOutBehavior:"wrap",bindKeys:Mr.ArrowHorizontal|Mr.HomeAndEnd,focusableElementFilter:e=>!e.getAttributeNames().includes("aria-hidden"),getNextFocusable:e=>{var t;if(!C&&0!==C)return;let r=C+1;return"next"===e&&(r+=1),"previous"===e&&(r-=1),r>c.length||r<1?E.current||void 0:null===(t=N.current)||void 0===t?void 0:t.children[r]}},[C]),I=e=>{if(f(e),C){var t;(null===(t=N.current)||void 0===t?void 0:t.children[C]).focus()}},A=()=>{z(void 0)},R=e=>{var t;"Escape"===e.key&&(null===(t=S.current)||void 0===t||t.focus())};return e.createElement(on,{block:i,className:n,contrast:a,disabled:l,hasIcon:!!o,theme:d,width:h,minWidth:v,maxWidth:x,variant:y,sx:{...i?{display:"flex",width:"100%"}:{},...m?{maxHeight:m,overflow:"auto"}:{},...u?{overflow:"auto"}:{},...s}},e.createElement(or,{ref:N,display:"flex",sx:{alignItems:"center",flexWrap:u?"nowrap":"wrap",marginLeft:"-0.25rem",marginBottom:"-0.25rem",flexGrow:1,"> *":{flexShrink:0,marginLeft:"0.25rem",marginBottom:"0.25rem"}}},e.createElement(or,{sx:{order:1,flexGrow:1}},o&&e.createElement(o,{className:"TextInput-icon"}),e.createElement(tn,Pt({ref:E,disabled:l,onFocus:e=>{$&&$(e),z(void 0)},onKeyDown:e=>{var t;if(k&&k(e),null!==(t=S.current)&&void 0!==t&&t.value)return;const r=c[c.length-1];"Backspace"===e.key&&r&&(I(r.id),S.current&&(S.current.value=`${r.text} `),setTimeout((()=>{var e;null===(e=S.current)||void 0===e||e.select()}),0))},type:"text",sx:{height:"100%"}},T))),c.length&&g?c.map((({id:t,...r},o)=>{return e.createElement(g,Pt({key:t,onFocus:(a=o,()=>{z(a)}),onBlur:A,onKeyUp:R,isSelected:C===o,onRemove:()=>{I(t)},hideRemoveButton:b,size:p,tabIndex:0},r));var a})):null))}Ad.displayName="TextInputWithTokensInnerComponent";const Rd=e.forwardRef(Ad);Rd.defaultProps={tokenComponent:Id,size:"extralarge",hideTokenRemoveButtons:!1,preventTokenWrapping:!1},Rd.displayName="TextInputWithTokens";var Ld=Rd;const Od=f(or)`
+`,Nd=i(((t,r)=>{const{as:o,onRemove:a,id:n,leadingVisual:i,text:l,size:d,hideRemoveButton:s,href:c,onClick:f,...g}=t,u=vd(t)&&Boolean(a)&&!s,p={as:o,href:c,onClick:f};return e.createElement(Cd,Pt({onRemove:a,hideRemoveButton:s||!a,id:null==n?void 0:n.toString(),text:l,size:d,isTokenInteractive:vd(t)},u?{}:p,g,{ref:r}),i?e.createElement(zd,{size:d},e.createElement(i,null)):null,e.createElement(Ed,u?p:{},l),!s&&a?e.createElement(Sd,{borderOffset:1,onClick:e=>{e.stopPropagation(),a&&a()},size:d,isParentInteractive:vd(t),"aria-hidden":u?"true":"false",sx:u?{position:"relative",zIndex:"1"}:{}}):null)}));Nd.displayName="Token",Nd.defaultProps={size:"medium"};var Id=Nd;function Ad({icon:o,contrast:a,className:n,block:i,disabled:l,theme:d,sx:s,tokens:c,onTokenRemove:f,tokenComponent:g,preventTokenWrapping:u,size:p,hideTokenRemoveButtons:b,maxHeight:m,width:h,minWidth:v,maxWidth:x,variant:y,...w},B){const{onFocus:$,onKeyDown:k,...T}=function(e){var t={};for(var r in e)md.test(r)||(t[r]=e[r]);return t}(w),S=zr(B),E=Do(r(null),S),[C,z]=t(),{containerRef:N}=Oo({focusOutBehavior:"wrap",bindKeys:Mr.ArrowHorizontal|Mr.HomeAndEnd,focusableElementFilter:e=>!e.getAttributeNames().includes("aria-hidden"),getNextFocusable:e=>{var t;if(!C&&0!==C)return;let r=C+1;return"next"===e&&(r+=1),"previous"===e&&(r-=1),r>c.length||r<1?E.current||void 0:null===(t=N.current)||void 0===t?void 0:t.children[r]}},[C]),I=e=>{f(e),setTimeout((()=>{var e,t;const r=null===(e=N.current)||void 0===e?void 0:e.children[C||0],o=r&&$r(r)?r:Array.from((null===(t=N.current)||void 0===t?void 0:t.children)||[]).find((e=>$r(e)));var a;o?o.focus():null===(a=S.current)||void 0===a||a.focus()}),0)},A=()=>{z(void 0)},R=e=>{var t;"Escape"===e.key&&(null===(t=S.current)||void 0===t||t.focus())};return e.createElement(on,{block:i,className:n,contrast:a,disabled:l,hasIcon:!!o,theme:d,width:h,minWidth:v,maxWidth:x,variant:y,sx:{...i?{display:"flex",width:"100%"}:{},...m?{maxHeight:m,overflow:"auto"}:{},...u?{overflow:"auto"}:{},...s}},e.createElement(or,{ref:N,display:"flex",sx:{alignItems:"center",flexWrap:u?"nowrap":"wrap",marginLeft:"-0.25rem",marginBottom:"-0.25rem",flexGrow:1,"> *":{flexShrink:0,marginLeft:"0.25rem",marginBottom:"0.25rem"}}},e.createElement(or,{sx:{order:1,flexGrow:1}},o&&e.createElement(o,{className:"TextInput-icon"}),e.createElement(tn,Pt({ref:E,disabled:l,onFocus:e=>{$&&$(e),z(void 0)},onKeyDown:e=>{var t;if(k&&k(e),null!==(t=S.current)&&void 0!==t&&t.value)return;const r=c[c.length-1];"Backspace"===e.key&&r&&(I(r.id),S.current&&(S.current.value=`${r.text} `),setTimeout((()=>{var e;null===(e=S.current)||void 0===e||e.select()}),0))},type:"text",sx:{height:"100%"}},T))),c.length&&g?c.map((({id:t,...r},o)=>{return e.createElement(g,Pt({key:t,onFocus:(a=o,()=>{z(a)}),onBlur:A,onKeyUp:R,isSelected:C===o,onRemove:()=>{I(t)},hideRemoveButton:b,size:p,tabIndex:0},r));var a})):null))}Ad.displayName="TextInputWithTokensInnerComponent";const Rd=e.forwardRef(Ad);Rd.defaultProps={tokenComponent:Id,size:"extralarge",hideTokenRemoveButtons:!1,preventTokenWrapping:!1},Rd.displayName="TextInputWithTokens";var Ld=Rd;const Od=f(or)`
   display: flex;
   flex-direction: column;
   ${e=>e.clipSidebar&&p([".Timeline-Item:first-child{padding-top:0;}.Timeline-Item:last-child{padding-bottom:0;}"])}