@lifesg/react-design-system 2.0.0-canary.7 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "2.0.0-canary.7",
+  "version": "2.0.0",
   "description": "A component design system for LifeSG web apps",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/pagination/index.js

@@ -634,7 +634,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.pr
     height: 1.375rem;
     width: 1.375rem;
     color: ${pu.Neutral[3]};
-`,bc=g(((r,n)=>{const{onClear:i,...o}=r;return e(pc,{children:[t(gc,{}),t(mc,{ref:n,...o}),o.value&&t(yc,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:t(vc,{})})]},"search")})),wc=({listItems:n,listExtractor:i,valueExtractor:o,onSelectItem:a,listStyleWidth:s,visible:l,enableSearch:u,searchPlaceholder:c="Search",onSearch:d,searchFunction:f,onDismiss:g,disableItemFocus:y,multiSelect:v,selectedItems:b,onSelectAll:w,onRetry:$,itemsLoadState:x="success",itemTruncationType:S="end",itemMaxLines:_=2,labelDisplayType:O="inline",renderListItem:F,onBlur:k,hideNoResultsDisplay:j,renderCustomCallToAction:D,...M})=>{const[B,A]=p(0),[P,C]=p(""),[E,T]=p(n),[I,z]=p(0),N=Nl({height:I}),H=m(),L=m(),R=m([]),W=m(),V=m(),Y=m(B),q=m(E),U=e=>{Y.current=e,A(e)},Q=e=>{q.current=e,T(e)};h((()=>(document.addEventListener("keydown",ee),()=>{document.removeEventListener("keydown",ee)})),[]),h((()=>{J(P)}),[P]),h((()=>{if(C(""),l){if(setTimeout((()=>{z(K())})),y)return;W&&W.current?(W.current.focus(),U(-1)):R.current[B]&&R.current[B].focus()}else z(0)}),[l]),h((()=>{if(l){const e=K();z(e)}}),[E,x]),h((()=>{Q(n),C(""),U(0)}),[n]);const Z=e=>i?i(e):e.toString(),X=e=>{if("inline"!==O)return!1;let t=0;L&&L.current&&(t=L.current.getBoundingClientRect().width-60);return Hu.getTextWidth(e,"1.125rem 'Open Sans'")>t*_},G=e=>!!wo(b,(t=>xo(t,e))),J=e=>{if(""===e)Q(n);else if(f){const t=f(e);Q(t)}else{const t=n.filter((t=>{const r=Z(t),n="object"==typeof r?r.title.toLowerCase():r.toLowerCase();return"object"==typeof r&&r.secondaryLabel?n.includes(e.trim().toLowerCase())||r.secondaryLabel.includes(e.trim().toLowerCase()):n.includes(e.trim().toLowerCase())}));Q(t)}},K=()=>(L&&L.current?L.current.getBoundingClientRect().height:0)+(V.current?V.current.getBoundingClientRect().height:0),ee=e=>{if(H&&H.current.contains(e.target))switch(e.code){case"ArrowDown":if(Y.current<q.current.length-1){const e=Y.current+1;R.current[e].focus(),U(e)}break;case"ArrowUp":if(Y.current>0){const e=Y.current-1;R.current[e].focus(),U(Y.current-1)}break;case"Escape":g&&g(!0)}},te=(e,t)=>{e.preventDefault(),a&&a(t,(e=>o?o(e):e)(t))},re=e=>{const t=e.target.value;C(t),d&&d()},ne=()=>{C(""),W.current.focus(),d&&d()},ie=()=>{$&&$()},oe=()=>{k&&k()},ae=n=>e(r,{children:[t(Ju,{$maxLines:_,"aria-hidden":!0,children:n}),t(Ku,{$maxLines:_,"aria-hidden":!0,children:n})]}),se=r=>{const n=Z(r),i="string"==typeof n?n:n.title,o="string"==typeof n?void 0:n.secondaryLabel,a=X(i),s=o&&X(o);return e(Gu,{$labelDisplayType:a||s?"next-line":O,children:[t(Zu,{$truncateType:S,$maxLines:_,"aria-label":i,children:"middle"===S&&a?ae(i):i}),o&&t(Xu,{$truncateType:S,$maxLines:_,$labelDisplayType:O,"aria-label":o,children:"middle"===S&&s?ae(o):o})]})},le=()=>{if(!$||$&&"success"===x)return E.map(((r,n)=>t(qu,{$checked:G(r)&&!v,children:e(Uu,{$hasNextLineLabel:"next-line"===O&&E.length>0&&i&&"string"!=typeof i(E[0]),onClick:e=>{te(e,r)},ref:e=>R.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:l?0:-1,$multiSelect:v,onBlur:oe,children:[v&&t(ec,{checked:G(r),displaySize:"small"}),F?F(r,{selected:G(r)}):se(r)]})},((e,t)=>`item_${t}__${o?o(e):e}`)(r,n))))},ue=()=>{if(v&&E.length>0&&!P&&"success"===x)return t(tc,{children:t(rc,{onClick:w,type:"button",children:0===b.length?"Select all":"Unselect all"})},"selectAll")},ce=()=>{if(!j&&(P||!u)&&0===E.length&&"success"===x)return e(nc,{"data-testid":"list-no-results",children:[t(oc,{"data-testid":"no-result-icon"}),t(ic,{children:"No results found."})]},"noResults")},de=()=>{if($&&"loading"===x)return e(nc,{"data-testid":"list-loading",children:[t(Nu,{$buttonStyle:"secondary",size:24}),t(ic,{children:"Loading..."})]},"loading")},he=()=>{if($&&"fail"===x)return e(nc,{"data-testid":"list-fail",children:[t(oc,{"data-testid":"load-error-icon"}),t(ic,{children:"Failed to load."}),t(rc,{onClick:ie,type:"button",children:"Try again."})]},"noResults")};return t(r,{children:e(Vu,{style:N,"data-testid":l?"dropdown-container":"dropdown-container-hidden",ref:H,children:[(()=>{if(l)return e(Yu,{ref:L,"data-testid":"dropdown-list",width:s,role:"list",...M,children:[(u||f)&&"success"===x?t(bc,{ref:W,onChange:re,value:P,placeholder:c,"data-testid":"search-input","aria-label":"search-input",tabIndex:l?0:-1,onClear:ne}):null,ue(),ce(),de(),he(),le()]})})(),(()=>{if(l&&D)return t("div",{ref:V,"data-testid":"custom-cta",children:D(g,E)})})()]})})},$c="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",xc=x.div`
+`,bc=g(((r,n)=>{const{onClear:i,...o}=r;return e(pc,{children:[t(gc,{}),t(mc,{ref:n,...o}),o.value&&t(yc,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:t(vc,{})})]},"search")})),wc=({listItems:n,listExtractor:i,valueExtractor:o,onSelectItem:a,listStyleWidth:s,visible:l,enableSearch:u,searchPlaceholder:c="Search",onSearch:d,searchFunction:f,onDismiss:g,disableItemFocus:y,multiSelect:v,selectedItems:b,onSelectAll:w,onRetry:$,itemsLoadState:x="success",itemTruncationType:S="end",itemMaxLines:_=2,labelDisplayType:O="inline",renderListItem:F,onBlur:k,hideNoResultsDisplay:j,renderCustomCallToAction:D,...M})=>{const[B,A]=p(0),[P,C]=p(""),[E,T]=p(n),[I,z]=p(0),N=Nl({height:I}),H=m(),L=m(),R=m([]),W=m(),V=m(),Y=m(B),q=m(E),U=e=>{Y.current=e,A(e)},Q=e=>{q.current=e,T(e)};h((()=>(document.addEventListener("keydown",ee),()=>{document.removeEventListener("keydown",ee)})),[]),h((()=>{J(P)}),[P]),h((()=>{if(C(""),l){if(setTimeout((()=>{z(K())})),y)return;W&&W.current?(W.current.focus(),U(-1)):R.current[B]&&R.current[B].focus()}else z(0)}),[l]),h((()=>{if(l){const e=K();z(e)}}),[E,x]),h((()=>{Q(n),C(""),U(0)}),[n]);const Z=e=>i?i(e):e.toString(),X=e=>{if("inline"!==O)return!1;let t=0;L&&L.current&&(t=L.current.getBoundingClientRect().width-60);return Hu.getTextWidth(e,"1.125rem 'Open Sans'")>t*_},G=e=>!!wo(b,(t=>xo(t,e))),J=e=>{if(""===e)Q(n);else if(f){const t=f(e);Q(t)}else{const t=n.filter((t=>{const r=Z(t),n="object"==typeof r?r.title.toLowerCase():r.toLowerCase(),i="string"==typeof r?void 0:r.secondaryLabel?.toLowerCase(),o=e.trim().toLowerCase();return n.includes(o)||i&&i.includes(o)}));Q(t)}},K=()=>(L&&L.current?L.current.getBoundingClientRect().height:0)+(V.current?V.current.getBoundingClientRect().height:0),ee=e=>{if(H&&H.current.contains(e.target))switch(e.code){case"ArrowDown":if(Y.current<q.current.length-1){const e=Y.current+1;R.current[e].focus(),U(e)}break;case"ArrowUp":if(Y.current>0){const e=Y.current-1;R.current[e].focus(),U(Y.current-1)}break;case"Escape":g&&g(!0)}},te=(e,t)=>{e.preventDefault(),a&&a(t,(e=>o?o(e):e)(t))},re=e=>{const t=e.target.value;C(t),d&&d()},ne=()=>{C(""),W.current.focus(),d&&d()},ie=()=>{$&&$()},oe=()=>{k&&k()},ae=n=>e(r,{children:[t(Ju,{$maxLines:_,"aria-hidden":!0,children:n}),t(Ku,{$maxLines:_,"aria-hidden":!0,children:n})]}),se=r=>{const n=Z(r),i="string"==typeof n?n:n.title,o="string"==typeof n?void 0:n.secondaryLabel,a=X(i),s=o&&X(o);return e(Gu,{$labelDisplayType:a||s?"next-line":O,children:[t(Zu,{$truncateType:S,$maxLines:_,"aria-label":i,children:"middle"===S&&a?ae(i):i}),o&&t(Xu,{$truncateType:S,$maxLines:_,$labelDisplayType:O,"aria-label":o,children:"middle"===S&&s?ae(o):o})]})},le=()=>{if(!$||$&&"success"===x)return E.map(((r,n)=>t(qu,{$checked:G(r)&&!v,children:e(Uu,{$hasNextLineLabel:"next-line"===O&&E.length>0&&i&&"string"!=typeof i(E[0]),onClick:e=>{te(e,r)},ref:e=>R.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:l?0:-1,$multiSelect:v,onBlur:oe,children:[v&&t(ec,{checked:G(r),displaySize:"small"}),F?F(r,{selected:G(r)}):se(r)]})},((e,t)=>`item_${t}__${o?o(e):e}`)(r,n))))},ue=()=>{if(v&&E.length>0&&!P&&"success"===x)return t(tc,{children:t(rc,{onClick:w,type:"button",children:0===b.length?"Select all":"Unselect all"})},"selectAll")},ce=()=>{if(!j&&(P||!u)&&0===E.length&&"success"===x)return e(nc,{"data-testid":"list-no-results",children:[t(oc,{"data-testid":"no-result-icon"}),t(ic,{children:"No results found."})]},"noResults")},de=()=>{if($&&"loading"===x)return e(nc,{"data-testid":"list-loading",children:[t(Nu,{$buttonStyle:"secondary",size:24}),t(ic,{children:"Loading..."})]},"loading")},he=()=>{if($&&"fail"===x)return e(nc,{"data-testid":"list-fail",children:[t(oc,{"data-testid":"load-error-icon"}),t(ic,{children:"Failed to load."}),t(rc,{onClick:ie,type:"button",children:"Try again."})]},"noResults")};return t(r,{children:e(Vu,{style:N,"data-testid":l?"dropdown-container":"dropdown-container-hidden",ref:H,children:[(()=>{if(l)return e(Yu,{ref:L,"data-testid":"dropdown-list",width:s,role:"list",...M,children:[(u||f)&&"success"===x?t(bc,{ref:W,onChange:re,value:P,placeholder:c,"data-testid":"search-input","aria-label":"search-input",tabIndex:l?0:-1,onClear:ne}):null,ue(),ce(),de(),he(),le()]})})(),(()=>{if(l&&D)return t("div",{ref:V,"data-testid":"custom-cta",children:D(g,E)})})()]})})},$c="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",xc=x.div`
     position: relative;
     min-height: 3rem;
     height: 3rem; // Need this to persist the height when expanding or collapsing list