@lifesg/react-design-system 1.1.1 → 1.1.2

package/form/index.js

@@ -268,7 +268,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.pr
                 background-color: ${_r.Neutral[7]};
             `}
     }
-`,nn=i.forwardRef((({children:e,focusHighlight:t=!0,focusOutline:n="none",...a},i)=>r(rn,{ref:i,$outline:n,$highlight:t,...a,children:e}))),an=$.div`
+`,nn=i.forwardRef((({children:e,focusHighlight:t=!0,focusOutline:n="none",type:a="button",...i},o)=>r(rn,{ref:o,$outline:n,$highlight:t,type:a,...i,children:e}))),an=$.div`
     position: relative;
     display: flex;
     flex-direction: column;
@@ -889,7 +889,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.pr
                 `:x`
                     margin: auto 0 auto 0.625rem; // to counter the padding
                 `}
-`,fd=i.forwardRef((({disabledDates:e,onYearMonthDisplayChange:a,onCalendarView:i,onSelect:d,onHover:c,onDismiss:u,actionComponent:h,isOpen:p,value:f,endValue:m,currentFocus:g,withButton:b,variant:y,between:w,type:$="standalone",...x},C)=>{const[S,k]=o(Sn()),[O,_]=o("default"),[M,j]=o(),[D,T]=o(),[B,N]=o(),[L,I]=o(!0),E=s(null),A=s(null),P=va();v(C,(()=>({defaultView(){_("default"),i("default")}})),[]),l((()=>{p&&(k(Sn()),_("default"),"range"===y&&f?.length&&m?.length&&I(!1))}),[p]),l((()=>{const e="end"===g?m:f;N(Sn(e)),e&&k(Sn(e))}),[g]),l((()=>{I(!0),f?("input"===h&&k(Sn(f)),j(f),k(Sn(f))):j(void 0)}),[f]),l((()=>{I(!0),m?("input"===h&&k(Sn(m)),T(m)):T(void 0)}),[m]);const F=()=>{switch(O){case"default":N((e=>e.subtract(1,"month"))),k((e=>{const t=e.subtract(1,"month");return q(t),t}));break;case"month-options":k((e=>e.subtract(1,"year")));break;case"year-options":k((e=>e.subtract(10,"year")))}},H=()=>{switch(O){case"default":N((e=>e.add(1,"month"))),k((e=>{const t=e.add(1,"month");return q(t),t}));break;case"month-options":k((e=>e.add(1,"year")));break;case"year-options":k((e=>e.add(10,"year")))}},R=e=>{const t=e.format("YYYY-MM-DD");k(e),N(e),Q(t),U(t)},z=e=>{k(e),N(e),q(e)},V=()=>{k(Sn("end"===g?m:f)),Z("reset")},W=e=>{Y(e)},U=e=>{d&&d(e)},Y=e=>{c&&c(e)},q=e=>{if(a){const t={month:e.month()+1,year:e.year()};a(t)}},Z=e=>{u&&u(e)},Q=e=>{if(g)switch(g){case"start":default:j(e);break;case"end":T(e)}else j(e)},G=()=>{"month-options"!==O?(_("month-options"),J("month-options"),P.ref.current.focus()):(_("default"),k(B),J("default"))},X=()=>{"default"!==O?(_("default"),k(B),J("default")):(_("year-options"),J("year-options"))},K=()=>{if("year-options"===O){const{beginDecade:e,endDecade:t}=sl.getStartEndDecade(S);return`${e} to ${t}`}return Sn(S).format("YYYY")},J=e=>{i&&i(e)},ee=()=>t(n,{children:[t(sd,{type:"button",tabIndex:-1,$type:$,$expandedDisplay:"month-options"===O,$visible:"default"===O,id:"month-dropdown",onClick:G,children:[r(ld,{$type:$,children:Sn(S).format("MMM")}),r(Kl,{})]}),t(sd,{type:"button",tabIndex:-1,$type:$,$expandedDisplay:"default"!==O,id:"year-dropdown",onClick:X,children:[r(ld,{$type:$,children:K()}),r(Kl,{})]})]}),te=()=>{switch(O){case"month-options":return r(Cl,{type:$,calendarDate:S,currentFocus:g,selectedStartDate:M,selectedEndDate:D,viewCalendarDate:B,between:w,isNewSelection:L,onMonthSelect:z});case"year-options":return r(_l,{type:$,calendarDate:S,currentFocus:g,selectedStartDate:M,selectedEndDate:D,viewCalendarDate:B,between:w,isNewSelection:L,onYearSelect:z});default:return null}},re=()=>{switch($){case"standalone":default:return r(od,{children:ee()});case"input":return t(ad,{children:[r(id,{children:ee()}),t(dd,{children:[r(cd,{tabIndex:-1,onClick:F,children:r(Gl,{})}),r(cd,{tabIndex:-1,onClick:H,children:r(Xl,{})})]})]})}},ne=()=>{if("standalone"===$||!b)return;let e=!0;const n=["default"].includes(O);switch(y){case"single":e=!M;break;case"range":e=!M||!D}const a=!!n&&e;return t(ud,{children:[r(hd,{ref:A,"data-testid":"cancel-button",styleType:"light",onClick:V,children:"Cancel"}),r(hd,{"data-testid":"done-button",ref:E,onClick:()=>(e=>{e||(k(B),Z("confirmed"))})(a),disabled:a,children:"Done"})]})},ae=()=>t(ed,{ref:P.ref,tabIndex:-1,"data-id":"calendar-container",$type:$,...x,children:["standalone"===$&&r(pd,{$direction:"left",onClick:F,children:r(Gl,{})}),t(td,{children:[re(),t(rd,{children:[r(vl,{type:$,calendarDate:S,currentFocus:g,disabledDates:e,selectedStartDate:M,selectedEndDate:D,variant:y,between:w,isNewSelection:L,onSelect:R,onHover:W}),r(nd,{$visible:"default"!==O,children:te()})]}),ne()]}),"standalone"===$&&r(pd,{$direction:"right",onClick:H,children:r(Xl,{})})]}),ie=As({height:p?P.height+64:0});return"input"===$?r(Jl,{style:ie,children:ae()}):r(n,{children:ae()})}));var md;Sn.extend(yl),function(e){const t=/^\d{4}-\d{2}-\d{2}$/;e.validate=(e,r,n,a)=>{if(!e||!r)return!1;if(Sn(e).isAfter(r))return!1;if(n&&n.length&&n.some((t=>[e,r].includes(t))))return!1;if(a&&a.length){if(![e,r].every((e=>Sn(e).isBetween(a[0],a[1],"day","[]"))))return!1;if(!a.every((e=>t.test(e))))return!1}return!0},e.validateSingle=(e,r,n)=>{if(0===e.length)return!1;if(r&&r.length&&r.some((t=>e===t)))return!1;if(n&&n.length&&!Sn(e).isBetween(n[0],n[1],"day","[]")){if(!Sn(e).isBetween(n[0],n[1],"day","[]"))return!1;if(!n.every((e=>t.test(e))))return!1}return!0},e.getFormattedRawValue=(e,t)=>{const[r,n,a]=e.split("-"),i=[a,n,r];let o;if(t){const[e,r,n]=t.split("-");o=[n,r,e]}return{start:i,end:o}},e.sleep=(e,t)=>new Promise((r=>{const n=setTimeout(r,e);t.signal.addEventListener("abort",(()=>{clearTimeout(n)}))}))}(md||(md={}));const gd=[1,3,5,7,8,10,12],bd=[4,6,9,11];var yd,vd,wd;!function(e){e.clampDay=(t,r,n)=>{const a=parseInt(t),i=parseInt(r),o=parseInt(n);return 0==a?"1":gd.includes(i)?Math.min(a,31).toString():bd.includes(i)?Math.min(a,30).toString():2===i?e.isLeapYear(o)?Math.min(a,29).toString():Math.min(a,28).toString():t},e.clampMonth=e=>{const t=parseInt(e);return 0==t?"1":t>12?"12":e},e.isLeapYear=e=>e%4==0&&e%100!=0||e%400==0,e.getTimeDiffInMinutes=(e,t,r="HH:mm")=>{const n=Sn(e,r);return Sn(t,r).diff(n,"minute")}}(yd||(yd={})),function(e){e.generate=()=>Math.random().toString(36).substring(2,9)}(vd||(vd={})),function(e){e.transformWithSpaces=(e,t)=>{const r="(.{"+t+"})";return e.replace(/[^\dA-Z]/gi,"").replace(new RegExp(r,"g"),"$1 ").trim()},e.padValue=(e,t)=>{if("0"===e)return t?e:e.padStart(2,"0");if(""===e)return e;return parseInt(e).toString().padStart(2,"0")},e.shouldTruncateToTwoLines=(e,t)=>{const r=Math.floor(t/9);return e.length>=2*r||1===e.split(" ").length&&e.length>r},e.truncateOneLine=(e,t,r,n)=>{let a=0;t>r&&(a=Math.floor((t-r)/8));const i=n+a;if(i<e.length){const t=Math.floor(i/2);return e.substring(0,t)+" ... "+e.substring(e.length-t,e.length)}return e}}(wd||(wd={}));const $d=$.div`
+`,fd=i.forwardRef((({disabledDates:e,onYearMonthDisplayChange:a,onCalendarView:i,onSelect:d,onHover:c,onDismiss:u,actionComponent:h,isOpen:p,value:f,endValue:m,currentFocus:g,withButton:b,variant:y,between:w,type:$="standalone",...x},C)=>{const[S,k]=o(Sn()),[O,_]=o("default"),[M,j]=o(),[D,T]=o(),[B,N]=o(),[L,I]=o(!0),E=s(null),A=s(null),P=va();v(C,(()=>({defaultView(){_("default"),i("default")}})),[]),l((()=>{p&&(k(Sn()),_("default"),"range"===y&&f?.length&&m?.length&&I(!1))}),[p]),l((()=>{const e="end"===g?m:f;N(Sn(e)),e&&k(Sn(e))}),[g]),l((()=>{I(!0),f?("input"===h&&k(Sn(f)),j(f),k(Sn(f))):j(void 0)}),[f]),l((()=>{I(!0),m?("input"===h&&k(Sn(m)),T(m)):T(void 0)}),[m]);const F=()=>{switch(O){case"default":N((e=>e.subtract(1,"month"))),k((e=>{const t=e.subtract(1,"month");return q(t),t}));break;case"month-options":k((e=>e.subtract(1,"year")));break;case"year-options":k((e=>e.subtract(10,"year")))}},H=()=>{switch(O){case"default":N((e=>e.add(1,"month"))),k((e=>{const t=e.add(1,"month");return q(t),t}));break;case"month-options":k((e=>e.add(1,"year")));break;case"year-options":k((e=>e.add(10,"year")))}},R=e=>{const t=e.format("YYYY-MM-DD");k(e),N(e),Q(t),U(t)},z=e=>{k(e),N(e),q(e)},V=()=>{k(Sn("end"===g?m:f)),Z("reset")},W=e=>{Y(e)},U=e=>{d&&d(e)},Y=e=>{c&&c(e)},q=e=>{if(a){const t={month:e.month()+1,year:e.year()};a(t)}},Z=e=>{u&&u(e)},Q=e=>{if(g)switch(g){case"start":default:j(e);break;case"end":T(e)}else j(e)},G=()=>{"month-options"!==O?(_("month-options"),J("month-options"),P.ref.current.focus()):(_("default"),k(B),J("default"))},X=()=>{"default"!==O?(_("default"),k(B),J("default")):(_("year-options"),J("year-options"))},K=()=>{if("year-options"===O){const{beginDecade:e,endDecade:t}=sl.getStartEndDecade(S);return`${e} to ${t}`}return Sn(S).format("YYYY")},J=e=>{i&&i(e)},ee=()=>t(n,{children:[t(sd,{type:"button",tabIndex:-1,$type:$,$expandedDisplay:"month-options"===O,$visible:"default"===O,id:"month-dropdown",onClick:G,children:[r(ld,{$type:$,children:Sn(S).format("MMM")}),r(Kl,{})]}),t(sd,{type:"button",tabIndex:-1,$type:$,$expandedDisplay:"default"!==O,id:"year-dropdown",onClick:X,children:[r(ld,{$type:$,children:K()}),r(Kl,{})]})]}),te=()=>{switch(O){case"month-options":return r(Cl,{type:$,calendarDate:S,currentFocus:g,selectedStartDate:M,selectedEndDate:D,viewCalendarDate:B,between:w,isNewSelection:L,onMonthSelect:z});case"year-options":return r(_l,{type:$,calendarDate:S,currentFocus:g,selectedStartDate:M,selectedEndDate:D,viewCalendarDate:B,between:w,isNewSelection:L,onYearSelect:z});default:return null}},re=()=>{switch($){case"standalone":default:return r(od,{children:ee()});case"input":return t(ad,{children:[r(id,{children:ee()}),t(dd,{children:[r(cd,{tabIndex:-1,onClick:F,children:r(Gl,{})}),r(cd,{tabIndex:-1,onClick:H,children:r(Xl,{})})]})]})}},ne=()=>{if("standalone"===$||!b)return;let e=!0;const n=["default"].includes(O);switch(y){case"single":e=!M;break;case"range":e=!M||!D}const a=!!n&&e;return t(ud,{children:[r(hd,{ref:A,type:"button","data-testid":"cancel-button",styleType:"light",onClick:V,children:"Cancel"}),r(hd,{"data-testid":"done-button",type:"button",ref:E,onClick:()=>(e=>{e||(k(B),Z("confirmed"))})(a),disabled:a,children:"Done"})]})},ae=()=>t(ed,{ref:P.ref,tabIndex:-1,"data-id":"calendar-container",$type:$,...x,children:["standalone"===$&&r(pd,{$direction:"left",onClick:F,children:r(Gl,{})}),t(td,{children:[re(),t(rd,{children:[r(vl,{type:$,calendarDate:S,currentFocus:g,disabledDates:e,selectedStartDate:M,selectedEndDate:D,variant:y,between:w,isNewSelection:L,onSelect:R,onHover:W}),r(nd,{$visible:"default"!==O,children:te()})]}),ne()]}),"standalone"===$&&r(pd,{$direction:"right",onClick:H,children:r(Xl,{})})]}),ie=As({height:p?P.height+64:0});return"input"===$?r(Jl,{style:ie,children:ae()}):r(n,{children:ae()})}));var md;Sn.extend(yl),function(e){const t=/^\d{4}-\d{2}-\d{2}$/;e.validate=(e,r,n,a)=>{if(!e||!r)return!1;if(Sn(e).isAfter(r))return!1;if(n&&n.length&&n.some((t=>[e,r].includes(t))))return!1;if(a&&a.length){if(![e,r].every((e=>Sn(e).isBetween(a[0],a[1],"day","[]"))))return!1;if(!a.every((e=>t.test(e))))return!1}return!0},e.validateSingle=(e,r,n)=>{if(0===e.length)return!1;if(r&&r.length&&r.some((t=>e===t)))return!1;if(n&&n.length&&!Sn(e).isBetween(n[0],n[1],"day","[]")){if(!Sn(e).isBetween(n[0],n[1],"day","[]"))return!1;if(!n.every((e=>t.test(e))))return!1}return!0},e.getFormattedRawValue=(e,t)=>{const[r,n,a]=e.split("-"),i=[a,n,r];let o;if(t){const[e,r,n]=t.split("-");o=[n,r,e]}return{start:i,end:o}},e.sleep=(e,t)=>new Promise((r=>{const n=setTimeout(r,e);t.signal.addEventListener("abort",(()=>{clearTimeout(n)}))}))}(md||(md={}));const gd=[1,3,5,7,8,10,12],bd=[4,6,9,11];var yd,vd,wd;!function(e){e.clampDay=(t,r,n)=>{const a=parseInt(t),i=parseInt(r),o=parseInt(n);return 0==a?"1":gd.includes(i)?Math.min(a,31).toString():bd.includes(i)?Math.min(a,30).toString():2===i?e.isLeapYear(o)?Math.min(a,29).toString():Math.min(a,28).toString():t},e.clampMonth=e=>{const t=parseInt(e);return 0==t?"1":t>12?"12":e},e.isLeapYear=e=>e%4==0&&e%100!=0||e%400==0,e.getTimeDiffInMinutes=(e,t,r="HH:mm")=>{const n=Sn(e,r);return Sn(t,r).diff(n,"minute")}}(yd||(yd={})),function(e){e.generate=()=>Math.random().toString(36).substring(2,9)}(vd||(vd={})),function(e){e.transformWithSpaces=(e,t)=>{const r="(.{"+t+"})";return e.replace(/[^\dA-Z]/gi,"").replace(new RegExp(r,"g"),"$1 ").trim()},e.padValue=(e,t)=>{if("0"===e)return t?e:e.padStart(2,"0");if(""===e)return e;return parseInt(e).toString().padStart(2,"0")},e.shouldTruncateToTwoLines=(e,t)=>{const r=Math.floor(t/9);return e.length>=2*r||1===e.split(" ").length&&e.length>r},e.truncateOneLine=(e,t,r,n)=>{let a=0;t>r&&(a=Math.floor((t-r)/8));const i=n+a;if(i<e.length){const t=Math.floor(i/2);return e.substring(0,t)+" ... "+e.substring(e.length-t,e.length)}return e}}(wd||(wd={}));const $d=$.div`
     position: relative;
     display: flex;
     align-items: center;
@@ -1226,7 +1226,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.pr
 `,Jd=$(Kr)`
     height: 1.25rem;
     width: 1.25rem;
-`,ec=i.forwardRef((({value:e,spacing:n,type:a,error:i,disabled:o,readOnly:l,onChange:d,onClear:c,allowClear:u=!1,className:h,...p},f)=>{const m=s();v(f,(()=>m.current),[]);const g=()=>"tel"===a&&n,b=e=>{const t=e.target,r=t.value,n=t.value.replace(/\s/g,"");t.value=n,d(e),t.value=r},y=e?(e=>e?g()?wd.transformWithSpaces(e,n):e:"")(e):e;return t(Gd,{disabled:o,$error:i,$readOnly:l,className:h,children:[r(Xd,{"data-testid":"input",ref:m,disabled:o,value:y,onChange:e=>{d&&(g()?b(e):d(e))},type:a,readOnly:l,...p}),u&&!o&&!l&&!!e&&r(Kd,{onClick:()=>{c&&c(),m&&m.current&&m.current.focus()},children:r(Jd,{})})]})})),tc=i.forwardRef(((e,t)=>{const{label:n,errorMessage:a,id:i="form-field","data-error-testid":o,"data-testid":s,...l}=e;return r(xn,{id:i,label:n,errorMessage:a,disabled:l.disabled,"data-error-testid":o,children:r(ec,{id:`${i}-base`,"data-testid":s||i,ref:t,error:!!a,...l})})})),rc=$.div`
+`,ec=i.forwardRef((({value:e,spacing:n,type:a,error:i,disabled:o,readOnly:l,onChange:d,onClear:c,allowClear:u=!1,className:h,...p},f)=>{const m=s();v(f,(()=>m.current),[]);const g=()=>"tel"===a&&n,b=e=>{const t=e.target,r=t.value,n=t.value.replace(/\s/g,"");t.value=n,d(e),t.value=r},y=e?(e=>e?g()?wd.transformWithSpaces(e,n):e:"")(e):e;return t(Gd,{disabled:o,$error:i,$readOnly:l,className:h,children:[r(Xd,{"data-testid":"input",ref:m,disabled:o,value:y,onChange:e=>{d&&(g()?b(e):d(e))},type:a,readOnly:l,...p}),u&&!o&&!l&&!!e&&r(Kd,{onClick:()=>{c&&c(),m&&m.current&&m.current.focus()},type:"button",children:r(Jd,{})})]})})),tc=i.forwardRef(((e,t)=>{const{label:n,errorMessage:a,id:i="form-field","data-error-testid":o,"data-testid":s,...l}=e;return r(xn,{id:i,label:n,errorMessage:a,disabled:l.disabled,"data-error-testid":o,children:r(ec,{id:`${i}-base`,"data-testid":s||i,ref:t,error:!!a,...l})})})),rc=$.div`
     display: flex;
     position: relative;
     border: 1px solid ${_r.Neutral[5]};
@@ -1520,7 +1520,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.pr
     height: 1.375rem;
     width: 1.375rem;
     color: ${_r.Neutral[3]};
-`,Xp=m(((e,n)=>{const{onClear:a,...i}=e;return t(Yp,{children:[r(Zp,{}),r(qp,{ref:n,...i}),i.value&&r(Qp,{"aria-label":"Clear search",focusOutline:"browser",onClick:a,children:r(Gp,{})})]},"search")})),Kp=({listItems:e,listExtractor:a,valueExtractor:i,onSelectItem:d,listStyleWidth:c,visible:u,enableSearch:h,searchPlaceholder:p="Search",onSearch:f,searchFunction:m,onDismiss:g,multiSelect:b,selectedItems:y,onSelectAll:v,onRetry:w,itemsLoadState:$="success",itemTruncationType:x="end",renderListItem:C,onBlur:S,hideNoResultsDisplay:k,renderCustomCallToAction:O,..._})=>{const[M,j]=o(0),[D,T]=o(""),[B,N]=o(e),[L,I]=o(0),E=As({height:L}),A=s(),P=s(),F=s([]),H=s(),R=s(),z=s(M),V=s(B),W=e=>{z.current=e,j(e)},U=e=>{V.current=e,N(e)};l((()=>(document.addEventListener("keydown",X),()=>{document.removeEventListener("keydown",X)})),[]),l((()=>{Q(D)}),[D]),l((()=>{T(""),u?(setTimeout((()=>{I(G())})),H&&H.current?(H.current.focus(),W(-1)):F.current[M]&&F.current[M].focus()):I(0)}),[u]),l((()=>{if(u){const e=G();I(e)}}),[B]),l((()=>{U(e),T(""),W(0)}),[e]);const Y=e=>a?a(e):e.toString(),q=e=>{const t=a?a(e):e.toString();let r=0;return P&&P.current&&(r=P.current.getBoundingClientRect().width-100),wd.shouldTruncateToTwoLines("string"==typeof t?t:t.title,r)},Z=e=>!!pp(y,(t=>gp(t,e))),Q=t=>{if(""===t)U(e);else if(m){const e=m(t);U(e)}else{const r=e.filter((e=>{const r=Y(e),n="object"==typeof r?r.title.toLowerCase():r.toLowerCase();return"object"==typeof r&&r.secondaryLabel?n.includes(t.trim().toLowerCase())||r.secondaryLabel.includes(t.trim().toLowerCase()):n.includes(t.trim().toLowerCase())}));U(r)}},G=()=>(P&&P.current?P.current.getBoundingClientRect().height:0)+(R.current?R.current.getBoundingClientRect().height:0),X=e=>{if(A&&A.current.contains(e.target))switch(e.code){case"ArrowDown":if(z.current<V.current.length-1){const e=z.current+1;F.current[e].focus(),W(e)}break;case"ArrowUp":if(z.current>0){const e=z.current-1;F.current[e].focus(),W(z.current-1)}break;case"Escape":g&&g(!0)}},K=(e,t)=>{e.preventDefault(),d&&d(t,(e=>i?i(e):e)(t))},J=e=>{const t=e.target.value;T(t),f&&f()},ee=()=>{T(""),f&&f()},te=()=>{w&&w()},re=()=>{S&&S()},ne=e=>{const n=Y(e),a="string"==typeof n?n:n.title;return t(Np,{"data-testid":"truncate-middle-container",children:[r(Lp,{children:a}),t(Ip,{children:[" ",a]})]})},ae=e=>{const a=Y(e);return"string"==typeof a?r(n,{children:a}):t(n,{children:[a.title,a.secondaryLabel&&r(Bp,{children:a.secondaryLabel})]})},ie=()=>{if(!w||w&&"success"===$)return B.map(((e,n)=>r(jp,{checked:Z(e)&&!b,children:t(Dp,{onClick:t=>{K(t,e)},ref:e=>F.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:u?0:-1,multiSelect:b,onBlur:re,children:[b&&r(Ep,{checked:Z(e),displaySize:"small"}),C?C(e,{selected:Z(e)}):r(Tp,{truncateType:x,children:"middle"===x&&q(e)?ne(e):ae(e)})]})},((e,t)=>`item_${t}__${i?i(e):e}`)(e,n))))},oe=()=>{if(b&&B.length>0&&!D&&"success"===$)return r(Ap,{children:r(Pp,{onClick:v,children:0===y.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!k&&D&&0===B.length)return t(Fp,{"data-testid":"list-no-results",children:[r(Rp,{"data-testid":"no-result-icon"}),r(Hp,{children:"No results found."})]},"noResults")},le=()=>{if(w&&"loading"===$)return t(Fp,{"data-testid":"list-loading",children:[r(ql,{$buttonStyle:"secondary",size:24}),r(Hp,{children:"Loading..."})]},"loading")},de=()=>{if(w&&"fail"===$)return t(Fp,{"data-testid":"list-fail",children:[r(Rp,{"data-testid":"load-error-icon"}),r(Hp,{children:"Failed to load."}),r(Pp,{onClick:te,children:"Try again."})]},"noResults")};return r(n,{children:t(_p,{style:E,"data-testid":u?"dropdown-container":"dropdown-container-hidden",ref:A,children:[(()=>{if(u)return t(Mp,{ref:P,"data-testid":"dropdown-list",width:c,role:"list",..._,children:[(h||m)&&"success"===$?r(Xp,{ref:H,onChange:J,value:D,placeholder:p,"data-testid":"search-input","aria-label":"search-input",tabIndex:u?0:-1,onClear:ee}):null,oe(),se(),le(),de(),ie()]})})(),(()=>{if(u&&O)return r("div",{ref:R,"data-testid":"custom-cta",children:O(g,B)})})()]})})},Jp=$.div`
+`,Xp=m(((e,n)=>{const{onClear:a,...i}=e;return t(Yp,{children:[r(Zp,{}),r(qp,{ref:n,...i}),i.value&&r(Qp,{"aria-label":"Clear search",focusOutline:"browser",onClick:a,children:r(Gp,{})})]},"search")})),Kp=({listItems:e,listExtractor:a,valueExtractor:i,onSelectItem:d,listStyleWidth:c,visible:u,enableSearch:h,searchPlaceholder:p="Search",onSearch:f,searchFunction:m,onDismiss:g,multiSelect:b,selectedItems:y,onSelectAll:v,onRetry:w,itemsLoadState:$="success",itemTruncationType:x="end",renderListItem:C,onBlur:S,hideNoResultsDisplay:k,renderCustomCallToAction:O,..._})=>{const[M,j]=o(0),[D,T]=o(""),[B,N]=o(e),[L,I]=o(0),E=As({height:L}),A=s(),P=s(),F=s([]),H=s(),R=s(),z=s(M),V=s(B),W=e=>{z.current=e,j(e)},U=e=>{V.current=e,N(e)};l((()=>(document.addEventListener("keydown",X),()=>{document.removeEventListener("keydown",X)})),[]),l((()=>{Q(D)}),[D]),l((()=>{T(""),u?(setTimeout((()=>{I(G())})),H&&H.current?(H.current.focus(),W(-1)):F.current[M]&&F.current[M].focus()):I(0)}),[u]),l((()=>{if(u){const e=G();I(e)}}),[B]),l((()=>{U(e),T(""),W(0)}),[e]);const Y=e=>a?a(e):e.toString(),q=e=>{const t=a?a(e):e.toString();let r=0;return P&&P.current&&(r=P.current.getBoundingClientRect().width-100),wd.shouldTruncateToTwoLines("string"==typeof t?t:t.title,r)},Z=e=>!!pp(y,(t=>gp(t,e))),Q=t=>{if(""===t)U(e);else if(m){const e=m(t);U(e)}else{const r=e.filter((e=>{const r=Y(e),n="object"==typeof r?r.title.toLowerCase():r.toLowerCase();return"object"==typeof r&&r.secondaryLabel?n.includes(t.trim().toLowerCase())||r.secondaryLabel.includes(t.trim().toLowerCase()):n.includes(t.trim().toLowerCase())}));U(r)}},G=()=>(P&&P.current?P.current.getBoundingClientRect().height:0)+(R.current?R.current.getBoundingClientRect().height:0),X=e=>{if(A&&A.current.contains(e.target))switch(e.code){case"ArrowDown":if(z.current<V.current.length-1){const e=z.current+1;F.current[e].focus(),W(e)}break;case"ArrowUp":if(z.current>0){const e=z.current-1;F.current[e].focus(),W(z.current-1)}break;case"Escape":g&&g(!0)}},K=(e,t)=>{e.preventDefault(),d&&d(t,(e=>i?i(e):e)(t))},J=e=>{const t=e.target.value;T(t),f&&f()},ee=()=>{T(""),f&&f()},te=()=>{w&&w()},re=()=>{S&&S()},ne=e=>{const n=Y(e),a="string"==typeof n?n:n.title;return t(Np,{"data-testid":"truncate-middle-container",children:[r(Lp,{children:a}),t(Ip,{children:[" ",a]})]})},ae=e=>{const a=Y(e);return"string"==typeof a?r(n,{children:a}):t(n,{children:[a.title,a.secondaryLabel&&r(Bp,{children:a.secondaryLabel})]})},ie=()=>{if(!w||w&&"success"===$)return B.map(((e,n)=>r(jp,{checked:Z(e)&&!b,children:t(Dp,{onClick:t=>{K(t,e)},ref:e=>F.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:u?0:-1,multiSelect:b,onBlur:re,children:[b&&r(Ep,{checked:Z(e),displaySize:"small"}),C?C(e,{selected:Z(e)}):r(Tp,{truncateType:x,children:"middle"===x&&q(e)?ne(e):ae(e)})]})},((e,t)=>`item_${t}__${i?i(e):e}`)(e,n))))},oe=()=>{if(b&&B.length>0&&!D&&"success"===$)return r(Ap,{children:r(Pp,{onClick:v,type:"button",children:0===y.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!k&&D&&0===B.length)return t(Fp,{"data-testid":"list-no-results",children:[r(Rp,{"data-testid":"no-result-icon"}),r(Hp,{children:"No results found."})]},"noResults")},le=()=>{if(w&&"loading"===$)return t(Fp,{"data-testid":"list-loading",children:[r(ql,{$buttonStyle:"secondary",size:24}),r(Hp,{children:"Loading..."})]},"loading")},de=()=>{if(w&&"fail"===$)return t(Fp,{"data-testid":"list-fail",children:[r(Rp,{"data-testid":"load-error-icon"}),r(Hp,{children:"Failed to load."}),r(Pp,{onClick:te,type:"button",children:"Try again."})]},"noResults")};return r(n,{children:t(_p,{style:E,"data-testid":u?"dropdown-container":"dropdown-container-hidden",ref:A,children:[(()=>{if(u)return t(Mp,{ref:P,"data-testid":"dropdown-list",width:c,role:"list",..._,children:[(h||m)&&"success"===$?r(Xp,{ref:H,onChange:J,value:D,placeholder:p,"data-testid":"search-input","aria-label":"search-input",tabIndex:u?0:-1,onClear:ee}):null,oe(),se(),le(),de(),ie()]})})(),(()=>{if(u&&O)return r("div",{ref:R,"data-testid":"custom-cta",children:O(g,B)})})()]})})},Jp=$.div`
     position: relative;
     min-height: 3rem;
     height: 3rem; // Need this to persist the height when expanding or collapsing list