@lifesg/react-design-system 2.0.0-canary.6 → 2.0.0-canary.8

package/input/input.style.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
-interface StyleProps {
+export interface InputStyleProps {
     type?: React.HTMLInputTypeAttribute;
 }
-export declare const InputElement: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, StyleProps, never>;
-export declare const ClearContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyleProps, never>;
+export declare const InputElement: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputStyleProps, never>;
+export declare const ClearContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, InputStyleProps, never>;
 export declare const ClearIcon: import("styled-components").StyledComponent<{
     (props: import("react").SVGProps<SVGSVGElement>): JSX.Element;
     displayName: string;
 }, import("styled-components").DefaultTheme, {}, never>;
 export declare const BasicWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export {};

package/input-group/index.js

@@ -250,7 +250,7 @@ import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import*as n from
 `,Ir=p.button`
     position: relative;
     height: auto;
-    padding: 0 1rem;
+    padding: 0.75rem 1rem;
 
     margin-right: -1rem; // offset the padding
     cursor: pointer;
@@ -712,7 +712,7 @@ import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import*as n from
     height: 1.375rem;
     width: 1.375rem;
     color: ${qt.Neutral[3]};
-`,Cc=c(((r,n)=>{const{onClear:i,...o}=r;return e(Oc,{children:[t(Mc,{}),t(Bc,{ref:n,...o}),o.value&&t(Ac,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:t(Ec,{})})]},"search")})),jc=({listItems:n,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:x="success",itemTruncationType:S="end",itemMaxLines:_=2,labelDisplayType:F="inline",renderListItem:k,onBlur:D,hideNoResultsDisplay:O,renderCustomCallToAction:B,...M})=>{const[A,E]=u(0),[C,j]=u(""),[z,I]=u(n),[P,N]=u(0),H=Du({height:P}),T=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,I(e)};s((()=>(document.addEventListener("keydown",ee),()=>{document.removeEventListener("keydown",ee)})),[]),s((()=>{J(C)}),[C]),s((()=>{if(j(""),d){if(setTimeout((()=>{N(K())})),y)return;V&&V.current?(V.current.focus(),U(-1)):R.current[A]&&R.current[A].focus()}else N(0)}),[d]),s((()=>{if(d){const e=K();N(e)}}),[z,x]),s((()=>{Q(n),j(""),U(0)}),[n]);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 jr.getTextWidth(e,"1.125rem 'Open Sans'")>t*_},X=e=>!!la(b,(t=>ca(t,e))),J=e=>{if(""===e)Q(n);else if(g){const t=g(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)+(W.current?W.current.getBoundingClientRect().height:0),ee=e=>{if(T&&T.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))},re=e=>{const t=e.target.value;j(t),p&&p()},ne=()=>{j(""),V.current.focus(),p&&p()},ie=()=>{$&&$()},oe=()=>{D&&D()},ae=n=>e(r,{children:[t(vc,{$maxLines:_,"aria-hidden":!0,children:n}),t(bc,{$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=G(i),s=o&&G(o);return e(yc,{$labelDisplayType:a||s?"next-line":F,children:[t(gc,{$truncateType:S,$maxLines:_,"aria-label":i,children:"middle"===S&&a?ae(i):i}),o&&t(mc,{$truncateType:S,$maxLines:_,$labelDisplayType:F,"aria-label":o,children:"middle"===S&&s?ae(o):o})]})},le=()=>{if(!$||$&&"success"===x)return z.map(((r,n)=>t(hc,{$checked:X(r)&&!v,children:e(fc,{$hasNextLineLabel:"next-line"===F&&z.length>0&&i&&"string"!=typeof i(z[0]),onClick:e=>{te(e,r)},ref:e=>R.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,$multiSelect:v,onBlur:oe,children:[v&&t(wc,{checked:X(r),displaySize:"small"}),k?k(r,{selected:X(r)}):se(r)]})},((e,t)=>`item_${t}__${a?a(e):e}`)(r,n))))},ue=()=>{if(v&&z.length>0&&!C&&"success"===x)return t($c,{children:t(xc,{onClick:w,type:"button",children:0===b.length?"Select all":"Unselect all"})},"selectAll")},ce=()=>{if(!O&&(C||!h)&&0===z.length&&"success"===x)return e(Sc,{"data-testid":"list-no-results",children:[t(Fc,{"data-testid":"no-result-icon"}),t(_c,{children:"No results found."})]},"noResults")},de=()=>{if($&&"loading"===x)return e(Sc,{"data-testid":"list-loading",children:[t(ac,{$buttonStyle:"secondary",size:24}),t(_c,{children:"Loading..."})]},"loading")},he=()=>{if($&&"fail"===x)return e(Sc,{"data-testid":"list-fail",children:[t(Fc,{"data-testid":"load-error-icon"}),t(_c,{children:"Failed to load."}),t(xc,{onClick:ie,type:"button",children:"Try again."})]},"noResults")};return t(r,{children:e(cc,{style:H,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:T,children:[(()=>{if(d)return e(dc,{ref:L,"data-testid":"dropdown-list",width:c,role:"list",...M,children:[(h||g)&&"success"===x?t(Cc,{ref:V,onChange:re,value:C,placeholder:f,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:ne}):null,ue(),ce(),de(),he(),le()]})})(),(()=>{if(d&&B)return t("div",{ref:W,"data-testid":"custom-cta",children:B(m,z)})})()]})})},zc="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",Ic=p.div`
+`,Cc=c(((r,n)=>{const{onClear:i,...o}=r;return e(Oc,{children:[t(Mc,{}),t(Bc,{ref:n,...o}),o.value&&t(Ac,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:t(Ec,{})})]},"search")})),jc=({listItems:n,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:x="success",itemTruncationType:S="end",itemMaxLines:_=2,labelDisplayType:F="inline",renderListItem:k,onBlur:D,hideNoResultsDisplay:O,renderCustomCallToAction:B,...M})=>{const[A,E]=u(0),[C,j]=u(""),[z,I]=u(n),[P,N]=u(0),H=Du({height:P}),T=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,I(e)};s((()=>(document.addEventListener("keydown",ee),()=>{document.removeEventListener("keydown",ee)})),[]),s((()=>{J(C)}),[C]),s((()=>{if(j(""),d){if(setTimeout((()=>{N(K())})),y)return;V&&V.current?(V.current.focus(),U(-1)):R.current[A]&&R.current[A].focus()}else N(0)}),[d]),s((()=>{if(d){const e=K();N(e)}}),[z,x]),s((()=>{Q(n),j(""),U(0)}),[n]);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 jr.getTextWidth(e,"1.125rem 'Open Sans'")>t*_},X=e=>!!la(b,(t=>ca(t,e))),J=e=>{if(""===e)Q(n);else if(g){const t=g(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)+(W.current?W.current.getBoundingClientRect().height:0),ee=e=>{if(T&&T.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))},re=e=>{const t=e.target.value;j(t),p&&p()},ne=()=>{j(""),V.current.focus(),p&&p()},ie=()=>{$&&$()},oe=()=>{D&&D()},ae=n=>e(r,{children:[t(vc,{$maxLines:_,"aria-hidden":!0,children:n}),t(bc,{$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=G(i),s=o&&G(o);return e(yc,{$labelDisplayType:a||s?"next-line":F,children:[t(gc,{$truncateType:S,$maxLines:_,"aria-label":i,children:"middle"===S&&a?ae(i):i}),o&&t(mc,{$truncateType:S,$maxLines:_,$labelDisplayType:F,"aria-label":o,children:"middle"===S&&s?ae(o):o})]})},le=()=>{if(!$||$&&"success"===x)return z.map(((r,n)=>t(hc,{$checked:X(r)&&!v,children:e(fc,{$hasNextLineLabel:"next-line"===F&&z.length>0&&i&&"string"!=typeof i(z[0]),onClick:e=>{te(e,r)},ref:e=>R.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,$multiSelect:v,onBlur:oe,children:[v&&t(wc,{checked:X(r),displaySize:"small"}),k?k(r,{selected:X(r)}):se(r)]})},((e,t)=>`item_${t}__${a?a(e):e}`)(r,n))))},ue=()=>{if(v&&z.length>0&&!C&&"success"===x)return t($c,{children:t(xc,{onClick:w,type:"button",children:0===b.length?"Select all":"Unselect all"})},"selectAll")},ce=()=>{if(!O&&(C||!h)&&0===z.length&&"success"===x)return e(Sc,{"data-testid":"list-no-results",children:[t(Fc,{"data-testid":"no-result-icon"}),t(_c,{children:"No results found."})]},"noResults")},de=()=>{if($&&"loading"===x)return e(Sc,{"data-testid":"list-loading",children:[t(ac,{$buttonStyle:"secondary",size:24}),t(_c,{children:"Loading..."})]},"loading")},he=()=>{if($&&"fail"===x)return e(Sc,{"data-testid":"list-fail",children:[t(Fc,{"data-testid":"load-error-icon"}),t(_c,{children:"Failed to load."}),t(xc,{onClick:ie,type:"button",children:"Try again."})]},"noResults")};return t(r,{children:e(cc,{style:H,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:T,children:[(()=>{if(d)return e(dc,{ref:L,"data-testid":"dropdown-list",width:c,role:"list",...M,children:[(h||g)&&"success"===x?t(Cc,{ref:V,onChange:re,value:C,placeholder:f,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:ne}):null,ue(),ce(),de(),he(),le()]})})(),(()=>{if(d&&B)return t("div",{ref:W,"data-testid":"custom-cta",children:B(m,z)})})()]})})},zc="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",Ic=p.div`
     position: relative;
     min-height: 3rem;
     height: 3rem; // Need this to persist the height when expanding or collapsing list