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

package/popover/popover.styles.d.ts

@@ -8,4 +8,5 @@ export declare const BubbleWrap: import("styled-components").StyledComponent<"di
 export declare const MobileModalBox: import("styled-components").StyledComponent<({ id, children, onClose, showCloseButton, ...otherProps }: import("..").ModalBoxProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const HOCWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const HOCTrigger: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/predictive-text-input/index.js

@@ -625,7 +625,7 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
     height: 1.375rem;
     width: 1.375rem;
     color: ${fn.Neutral[3]};
-`,Nc=c(((n,r)=>{const{onClear:i,...o}=n;return e(zc,{children:[t(Ic,{}),t(Tc,{ref:r,...o}),o.value&&t(Pc,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:t(Hc,{})})]},"search")})),Lc=({listItems:r,listExtractor:i,valueExtractor:a,onSelectItem:l,listStyleWidth:c,visible:d,enableSearch:h,searchPlaceholder:f="Search",onSearch:p,searchFunction:g,onDismiss:m,disableItemFocus:y,multiSelect:v,selectedItems:b,onSelectAll:w,onRetry:$,itemsLoadState:S="success",itemTruncationType:x="end",itemMaxLines:_=2,labelDisplayType:F="inline",renderListItem:k,onBlur:D,hideNoResultsDisplay:B,renderCustomCallToAction:O,...M})=>{const[A,E]=u(0),[j,C]=u(""),[z,T]=u(r),[I,P]=u(0),H=Cu({height:I}),N=o(),L=o(),R=o([]),V=o(),W=o(),Y=o(A),q=o(z),U=e=>{Y.current=e,E(e)},Q=e=>{q.current=e,T(e)};s((()=>(document.addEventListener("keydown",ee),()=>{document.removeEventListener("keydown",ee)})),[]),s((()=>{J(j)}),[j]),s((()=>{if(C(""),d){if(setTimeout((()=>{P(K())})),y)return;V&&V.current?(V.current.focus(),U(-1)):R.current[A]&&R.current[A].focus()}else P(0)}),[d]),s((()=>{if(d){const e=K();P(e)}}),[z,S]),s((()=>{Q(r),C(""),U(0)}),[r]);const Z=e=>i?i(e):e.toString(),G=e=>{if("inline"!==F)return!1;let t=0;L&&L.current&&(t=L.current.getBoundingClientRect().width-60);return tr.getTextWidth(e,"1.125rem 'Open Sans'")>t*_},X=e=>!!ga(b,(t=>ya(t,e))),J=e=>{if(""===e)Q(r);else if(g){const t=g(e);Q(t)}else{const t=r.filter((t=>{const n=Z(t),r="object"==typeof n?n.title.toLowerCase():n.toLowerCase();return"object"==typeof n&&n.secondaryLabel?r.includes(e.trim().toLowerCase())||n.secondaryLabel.includes(e.trim().toLowerCase()):r.includes(e.trim().toLowerCase())}));Q(t)}},K=()=>(L&&L.current?L.current.getBoundingClientRect().height:0)+(W.current?W.current.getBoundingClientRect().height:0),ee=e=>{if(N&&N.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":m&&m(!0)}},te=(e,t)=>{e.preventDefault(),l&&l(t,(e=>a?a(e):e)(t))},ne=e=>{const t=e.target.value;C(t),p&&p()},re=()=>{C(""),V.current.focus(),p&&p()},ie=()=>{$&&$()},oe=()=>{D&&D()},ae=r=>e(n,{children:[t(Fc,{$maxLines:_,"aria-hidden":!0,children:r}),t(kc,{$maxLines:_,"aria-hidden":!0,children:r})]}),se=n=>{const r=Z(n),i="string"==typeof r?r:r.title,o="string"==typeof r?void 0:r.secondaryLabel,a=G(i),s=o&&G(o);return e(_c,{$labelDisplayType:a||s?"next-line":F,children:[t(Sc,{$truncateType:x,$maxLines:_,"aria-label":i,children:"middle"===x&&a?ae(i):i}),o&&t(xc,{$truncateType:x,$maxLines:_,$labelDisplayType:F,"aria-label":o,children:"middle"===x&&s?ae(o):o})]})},le=()=>{if(!$||$&&"success"===S)return z.map(((n,r)=>t(bc,{$checked:X(n)&&!v,children:e(wc,{$hasNextLineLabel:"next-line"===F&&z.length>0&&i&&"string"!=typeof i(z[0]),onClick:e=>{te(e,n)},ref:e=>R.current[r]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,$multiSelect:v,onBlur:oe,children:[v&&t(Dc,{checked:X(n),displaySize:"small"}),k?k(n,{selected:X(n)}):se(n)]})},((e,t)=>`item_${t}__${a?a(e):e}`)(n,r))))},ue=()=>{if(v&&z.length>0&&!j&&"success"===S)return t(Bc,{children:t(Oc,{onClick:w,type:"button",children:0===b.length?"Select all":"Unselect all"})},"selectAll")},ce=()=>{if(!B&&(j||!h)&&0===z.length&&"success"===S)return e(Mc,{"data-testid":"list-no-results",children:[t(Ec,{"data-testid":"no-result-icon"}),t(Ac,{children:"No results found."})]},"noResults")},de=()=>{if($&&"loading"===S)return e(Mc,{"data-testid":"list-loading",children:[t(fc,{$buttonStyle:"secondary",size:24}),t(Ac,{children:"Loading..."})]},"loading")},he=()=>{if($&&"fail"===S)return e(Mc,{"data-testid":"list-fail",children:[t(Ec,{"data-testid":"load-error-icon"}),t(Ac,{children:"Failed to load."}),t(Oc,{onClick:ie,type:"button",children:"Try again."})]},"noResults")};return t(n,{children:e(yc,{style:H,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:N,children:[(()=>{if(d)return e(vc,{ref:L,"data-testid":"dropdown-list",width:c,role:"list",...M,children:[(h||g)&&"success"===S?t(Nc,{ref:V,onChange:ne,value:j,placeholder:f,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:re}):null,ue(),ce(),de(),he(),le()]})})(),(()=>{if(d&&O)return t("div",{ref:W,"data-testid":"custom-cta",children:O(m,z)})})()]})})},Rc="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",Vc=p.div`
+`,Nc=c(((n,r)=>{const{onClear:i,...o}=n;return e(zc,{children:[t(Ic,{}),t(Tc,{ref:r,...o}),o.value&&t(Pc,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:t(Hc,{})})]},"search")})),Lc=({listItems:r,listExtractor:i,valueExtractor:a,onSelectItem:l,listStyleWidth:c,visible:d,enableSearch:h,searchPlaceholder:f="Search",onSearch:p,searchFunction:g,onDismiss:m,disableItemFocus:y,multiSelect:v,selectedItems:b,onSelectAll:w,onRetry:$,itemsLoadState:S="success",itemTruncationType:x="end",itemMaxLines:_=2,labelDisplayType:F="inline",renderListItem:k,onBlur:D,hideNoResultsDisplay:B,renderCustomCallToAction:O,...M})=>{const[A,E]=u(0),[j,C]=u(""),[z,T]=u(r),[I,P]=u(0),H=Cu({height:I}),N=o(),L=o(),R=o([]),V=o(),W=o(),Y=o(A),q=o(z),U=e=>{Y.current=e,E(e)},Q=e=>{q.current=e,T(e)};s((()=>(document.addEventListener("keydown",ee),()=>{document.removeEventListener("keydown",ee)})),[]),s((()=>{J(j)}),[j]),s((()=>{if(C(""),d){if(setTimeout((()=>{P(K())})),y)return;V&&V.current?(V.current.focus(),U(-1)):R.current[A]&&R.current[A].focus()}else P(0)}),[d]),s((()=>{if(d){const e=K();P(e)}}),[z,S]),s((()=>{Q(r),C(""),U(0)}),[r]);const Z=e=>i?i(e):e.toString(),G=e=>{if("inline"!==F)return!1;let t=0;L&&L.current&&(t=L.current.getBoundingClientRect().width-60);return tr.getTextWidth(e,"1.125rem 'Open Sans'")>t*_},X=e=>!!ga(b,(t=>ya(t,e))),J=e=>{if(""===e)Q(r);else if(g){const t=g(e);Q(t)}else{const t=r.filter((t=>{const n=Z(t),r="object"==typeof n?n.title.toLowerCase():n.toLowerCase(),i="string"==typeof n?void 0:n.secondaryLabel?.toLowerCase(),o=e.trim().toLowerCase();return r.includes(o)||i&&i.includes(o)}));Q(t)}},K=()=>(L&&L.current?L.current.getBoundingClientRect().height:0)+(W.current?W.current.getBoundingClientRect().height:0),ee=e=>{if(N&&N.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":m&&m(!0)}},te=(e,t)=>{e.preventDefault(),l&&l(t,(e=>a?a(e):e)(t))},ne=e=>{const t=e.target.value;C(t),p&&p()},re=()=>{C(""),V.current.focus(),p&&p()},ie=()=>{$&&$()},oe=()=>{D&&D()},ae=r=>e(n,{children:[t(Fc,{$maxLines:_,"aria-hidden":!0,children:r}),t(kc,{$maxLines:_,"aria-hidden":!0,children:r})]}),se=n=>{const r=Z(n),i="string"==typeof r?r:r.title,o="string"==typeof r?void 0:r.secondaryLabel,a=G(i),s=o&&G(o);return e(_c,{$labelDisplayType:a||s?"next-line":F,children:[t(Sc,{$truncateType:x,$maxLines:_,"aria-label":i,children:"middle"===x&&a?ae(i):i}),o&&t(xc,{$truncateType:x,$maxLines:_,$labelDisplayType:F,"aria-label":o,children:"middle"===x&&s?ae(o):o})]})},le=()=>{if(!$||$&&"success"===S)return z.map(((n,r)=>t(bc,{$checked:X(n)&&!v,children:e(wc,{$hasNextLineLabel:"next-line"===F&&z.length>0&&i&&"string"!=typeof i(z[0]),onClick:e=>{te(e,n)},ref:e=>R.current[r]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,$multiSelect:v,onBlur:oe,children:[v&&t(Dc,{checked:X(n),displaySize:"small"}),k?k(n,{selected:X(n)}):se(n)]})},((e,t)=>`item_${t}__${a?a(e):e}`)(n,r))))},ue=()=>{if(v&&z.length>0&&!j&&"success"===S)return t(Bc,{children:t(Oc,{onClick:w,type:"button",children:0===b.length?"Select all":"Unselect all"})},"selectAll")},ce=()=>{if(!B&&(j||!h)&&0===z.length&&"success"===S)return e(Mc,{"data-testid":"list-no-results",children:[t(Ec,{"data-testid":"no-result-icon"}),t(Ac,{children:"No results found."})]},"noResults")},de=()=>{if($&&"loading"===S)return e(Mc,{"data-testid":"list-loading",children:[t(fc,{$buttonStyle:"secondary",size:24}),t(Ac,{children:"Loading..."})]},"loading")},he=()=>{if($&&"fail"===S)return e(Mc,{"data-testid":"list-fail",children:[t(Ec,{"data-testid":"load-error-icon"}),t(Ac,{children:"Failed to load."}),t(Oc,{onClick:ie,type:"button",children:"Try again."})]},"noResults")};return t(n,{children:e(yc,{style:H,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:N,children:[(()=>{if(d)return e(vc,{ref:L,"data-testid":"dropdown-list",width:c,role:"list",...M,children:[(h||g)&&"success"===S?t(Nc,{ref:V,onChange:ne,value:j,placeholder:f,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:re}):null,ue(),ce(),de(),he(),le()]})})(),(()=>{if(d&&O)return t("div",{ref:W,"data-testid":"custom-cta",children:O(m,z)})})()]})})},Rc="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",Vc=p.div`
     position: relative;
     min-height: 3rem;
     height: 3rem; // Need this to persist the height when expanding or collapsing list