@lifesg/react-design-system 1.0.0-alpha.17 → 1.0.0-alpha.18

package/input-group/types.d.ts

@@ -11,11 +11,11 @@ export interface LabelAddon {
 export interface ListAddon<T, V> extends DropdownDisplayProps<T, V>, DropdownSearchProps<T> {
     value?: T | undefined;
     placeholder?: string | undefined;
-    displayValueExtractor?: (item: T) => string | undefined;
+    displayValueExtractor?: ((item: T) => string) | undefined;
     "data-selector-testid"?: string | undefined;
     options?: T[] | undefined;
     selectedOption?: T | undefined;
-    onSelectOption?: (option: T, extractedValue: T | V) => void | undefined;
+    onSelectOption?: ((option: T, extractedValue: T | V) => void) | undefined;
     /**
      * Used when items are loaded from an api call.
      * Values: "loading" | "fail" | "success"
@@ -23,9 +23,9 @@ export interface ListAddon<T, V> extends DropdownDisplayProps<T, V>, DropdownSea
     optionsLoadState?: ItemsLoadStateType | undefined;
     /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Values: "middle" | "end" */
     optionTruncationType?: TruncateType | undefined;
-    onRetry?: () => void | undefined;
-    onHideOptions?: () => void | undefined;
-    onShowOptions?: () => void | undefined;
+    onRetry?: (() => void) | undefined;
+    onHideOptions?: (() => void) | undefined;
+    onShowOptions?: (() => void) | undefined;
 }
 export interface AddonProps<T, V> {
     type?: InputGroupAddonType | undefined;
@@ -33,7 +33,7 @@ export interface AddonProps<T, V> {
     position?: "left" | "right" | undefined;
 }
 export interface InputGroupProps<T, V> extends InputProps {
-    addon?: AddonProps<T, V>;
+    addon?: AddonProps<T, V> | undefined;
 }
 /** To be exposed for Form component inheritance */
 export declare type InputGroupPartialProps<T, V> = Omit<InputGroupProps<T, V>, "error">;

package/input-select/index.js

@@ -403,7 +403,7 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
         outline-color: ${Tl.Accent.Light[3]};
         color: ${Tl.Neutral[1]};
     }
-`;const Rc=p((({className:n,checked:r,disabled:i,onClick:a,onKeyPress:l,displaySize:c="default",...u})=>{const[d,h]=s(r);o((()=>{h(r)}),[r]);const C=e=>{i||(a&&a(e),l&&l(e))};return e(wc,{selected:d,disabled:i,className:n,"data-testid":"checkbox",onKeyPress:C,tabIndex:i?-1:0,role:"checkbox",$displaySize:c,children:[t(Vc,{type:"checkbox","data-testid":"checkbox-input",onClick:C,disabled:i,tabIndex:-1,...u}),d&&t(_c,{type:"tick",id:"checkmark","data-testid":"checkmark",disabled:i,$displaySize:c})]})}))`
+`;const Rc=p((({className:n,checked:r,disabled:i,onChange:a,onKeyPress:l,displaySize:c="default",...u})=>{const[d,h]=s(r);o((()=>{h(r)}),[r]);const C=e=>{if(!i){const t=e;if(!(" "===t.key||"change"===e.type))return;a&&a(e),l&&l(t)}};return e(wc,{selected:d,disabled:i,className:n,"data-testid":"checkbox",$displaySize:c,role:"checkbox","aria-checked":d,"aria-labelledby":"checkbox-input",tabIndex:i?-1:0,onKeyDown:C,children:[t(Vc,{id:"checkbox-input","data-testid":"checkbox-input","aria-hidden":"true",type:"checkbox",tabIndex:-1,onChange:C,disabled:i,checked:d,...u}),d&&t(_c,{type:"tick",id:"checkmark","data-testid":"checkmark",disabled:i,$displaySize:c})]})}))`
     flex: 0 0 1.5rem;
     margin-right: 1rem;
 `,jc=p.div`
@@ -466,7 +466,7 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
     width: 1.5rem;
     margin: 0 0.5rem;
     color: ${Tl.Neutral[3]};
-`,Nc=c(((n,r)=>e(Ic,{children:[t(Ec,{type:"search"}),t(Dc,{ref:r,...n})]},"search"))),Tc=({listItems:n,listExtractor:r,valueExtractor:i,onSelectItem:a,listStyleWidth:c,visible:u,enableSearch:d,searchPlaceholder:h="Search",onSearch:C,searchFunction:p,onDismiss:f,multiSelect:g,selectedItems:m,onSelectAll:v,onRetry:y,itemsLoadState:L="success",itemTruncationType:b="end",renderListItem:H,...w})=>{const[V,_]=s(0),[S,M]=s(""),[x,$]=s(n),[k,Z]=s(0),F=function(e,t){const n=yo.fun(e),[[r],i]=fl(1,n?e:[e],n?t||[]:t);return n||2==arguments.length?[r,i]:r}({height:k}),O=l(),R=l(),j=l([]),B=l(),A=l(V),P=l(x),z=e=>{A.current=e,_(e)},I=e=>{P.current=e,$(e)};o((()=>(document.addEventListener("keydown",q),()=>{document.removeEventListener("keydown",q)})),[]),o((()=>{T(S)}),[S]),o((()=>{M(""),u?(Z(W()),B&&B.current?(B.current.focus(),z(-1)):j.current[V]&&j.current[V].focus()):Z(0)}),[u]),o((()=>{if(u){const e=W();Z(e)}}),[x]),o((()=>{I(n),M(""),z(0)}),[n]);const D=e=>r?r(e):e.toString(),E=e=>{const t=r?r(e):e.toString();let n=0;return R&&R.current&&(n=R.current.getBoundingClientRect().width-100),Hc.shouldTruncateToTwoLines(t,n)},N=e=>Ti(m,e)>-1,T=e=>{if(""===e)I(n);else if(p){const t=p(e);I(t)}else{const t=n.filter((t=>D(t).toLowerCase().includes(e.trim().toLowerCase())));I(t)}},W=()=>R&&R.current?R.current.getBoundingClientRect().height:0,q=e=>{if(O&&O.current.contains(e.target))switch(e.code){case"ArrowDown":if(A.current<P.current.length-1){const e=A.current+1;j.current[e].focus(),z(e)}break;case"ArrowUp":if(A.current>0){const e=A.current-1;j.current[e].focus(),z(A.current-1)}break;case"Escape":f&&f()}},U=(e,t)=>{e.preventDefault(),a&&a(t,(e=>i?i(e):e)(t))},Q=()=>{y&&y()},G=n=>{const i=r?r(n):n.toString();return e(Zc,{"data-testid":"truncate-middle-container",children:[t(Fc,{children:i}),e(Oc,{children:[" ",i]})]})};return t(Sc,{style:F,"data-testid":u?"dropdown-container":"dropdown-container-hidden",ref:O,children:e(Mc,{ref:R,"data-testid":"dropdown-list",width:c,role:"list",...w,children:[(d||p)&&"success"===L?t(Nc,{ref:B,onChange:e=>{const t=e.target.value;M(t),C&&C()},value:S,placeholder:h,"data-testid":"search-input","aria-label":"search-input",tabIndex:u?0:-1}):null,(()=>{if(g&&x.length>0&&!S&&"success"===L)return t(jc,{children:t(Bc,{onClick:v,children:0===m.length?"Select all":"Unselect all"})},"selectAll")})(),(()=>{if(S&&0===x.length)return e(Ac,{"data-testid":"list-no-results",children:[t(zc,{"data-testid":"no-result-icon",children:t(Yi,{})}),t(Pc,{children:"No results found."})]},"noResults")})(),(()=>{if(y&&"loading"===L)return e(Ac,{"data-testid":"list-loading",children:[t(bc,{$buttonStyle:"secondary",size:24}),t(Pc,{children:"Loading..."})]},"loading")})(),(()=>{if(y&&"fail"===L)return e(Ac,{"data-testid":"list-fail",children:[t(zc,{"data-testid":"load-error-icon",children:t(Yi,{})}),t(Pc,{children:"Failed to load."}),t(Bc,{onClick:Q,children:"Try again."})]},"noResults")})(),(()=>{if(!y||y&&"success"===L)return x.map(((n,r)=>t(xc,{checked:N(n)&&!g,children:e($c,{onClick:e=>{U(e,n)},ref:e=>j.current[r]=e,"data-testid":"list-item",type:"button",tabIndex:u?0:-1,multiSelect:g,children:[g&&t(Rc,{checked:N(n),displaySize:"small"}),H?H(n,{selected:N(n)}):t(kc,{truncateType:b,children:"middle"===b&&E(n)?G(n):D(n)})]})},((e,t)=>`item_${t}__${i?i(e):e}`)(n,r))))})()]})})},Wc="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",qc=p.div`
+`,Nc=c(((n,r)=>e(Ic,{children:[t(Ec,{type:"search"}),t(Dc,{ref:r,...n})]},"search"))),Tc=({listItems:n,listExtractor:r,valueExtractor:i,onSelectItem:a,listStyleWidth:c,visible:u,enableSearch:d,searchPlaceholder:h="Search",onSearch:C,searchFunction:p,onDismiss:f,multiSelect:g,selectedItems:m,onSelectAll:v,onRetry:y,itemsLoadState:L="success",itemTruncationType:b="end",renderListItem:H,...w})=>{const[V,_]=s(0),[S,M]=s(""),[x,$]=s(n),[k,Z]=s(0),F=function(e,t){const n=yo.fun(e),[[r],i]=fl(1,n?e:[e],n?t||[]:t);return n||2==arguments.length?[r,i]:r}({height:k}),O=l(),R=l(),j=l([]),B=l(),A=l(V),P=l(x),z=e=>{A.current=e,_(e)},I=e=>{P.current=e,$(e)};o((()=>(document.addEventListener("keydown",q),()=>{document.removeEventListener("keydown",q)})),[]),o((()=>{T(S)}),[S]),o((()=>{M(""),u?(Z(W()),B&&B.current?(B.current.focus(),z(-1)):j.current[V]&&j.current[V].focus()):Z(0)}),[u]),o((()=>{if(u){const e=W();Z(e)}}),[x]),o((()=>{I(n),M(""),z(0)}),[n]);const D=e=>r?r(e):e.toString(),E=e=>{const t=r?r(e):e.toString();let n=0;return R&&R.current&&(n=R.current.getBoundingClientRect().width-100),Hc.shouldTruncateToTwoLines(t,n)},N=e=>Ti(m,e)>-1,T=e=>{if(""===e)I(n);else if(p){const t=p(e);I(t)}else{const t=n.filter((t=>D(t).toLowerCase().includes(e.trim().toLowerCase())));I(t)}},W=()=>R&&R.current?R.current.getBoundingClientRect().height:0,q=e=>{if(O&&O.current.contains(e.target))switch(e.code){case"ArrowDown":if(A.current<P.current.length-1){const e=A.current+1;j.current[e].focus(),z(e)}break;case"ArrowUp":if(A.current>0){const e=A.current-1;j.current[e].focus(),z(A.current-1)}break;case"Escape":f&&f()}},U=(e,t)=>{e.preventDefault(),a&&a(t,(e=>i?i(e):e)(t))},Q=e=>{const t=e.target.value;M(t),C&&C()},G=()=>{y&&y()},X=n=>{const i=r?r(n):n.toString();return e(Zc,{"data-testid":"truncate-middle-container",children:[t(Fc,{children:i}),e(Oc,{children:[" ",i]})]})},K=()=>{if(!y||y&&"success"===L)return x.map(((n,r)=>t(xc,{checked:N(n)&&!g,children:e($c,{onClick:e=>{U(e,n)},ref:e=>j.current[r]=e,"data-testid":"list-item",type:"button",tabIndex:u?0:-1,multiSelect:g,children:[g&&t(Rc,{checked:N(n),displaySize:"small"}),H?H(n,{selected:N(n)}):t(kc,{truncateType:b,children:"middle"===b&&E(n)?X(n):D(n)})]})},((e,t)=>`item_${t}__${i?i(e):e}`)(n,r))))},Y=()=>{if(g&&x.length>0&&!S&&"success"===L)return t(jc,{children:t(Bc,{onClick:v,children:0===m.length?"Select all":"Unselect all"})},"selectAll")},J=()=>{if(S&&0===x.length)return e(Ac,{"data-testid":"list-no-results",children:[t(zc,{"data-testid":"no-result-icon",children:t(Yi,{})}),t(Pc,{children:"No results found."})]},"noResults")},ee=()=>{if(y&&"loading"===L)return e(Ac,{"data-testid":"list-loading",children:[t(bc,{$buttonStyle:"secondary",size:24}),t(Pc,{children:"Loading..."})]},"loading")},te=()=>{if(y&&"fail"===L)return e(Ac,{"data-testid":"list-fail",children:[t(zc,{"data-testid":"load-error-icon",children:t(Yi,{})}),t(Pc,{children:"Failed to load."}),t(Bc,{onClick:G,children:"Try again."})]},"noResults")};return t(Sc,{style:F,"data-testid":u?"dropdown-container":"dropdown-container-hidden",ref:O,children:(()=>{if(u)return e(Mc,{ref:R,"data-testid":"dropdown-list",width:c,role:"list",...w,children:[(d||p)&&"success"===L?t(Nc,{ref:B,onChange:Q,value:S,placeholder:h,"data-testid":"search-input","aria-label":"search-input",tabIndex:u?0:-1}):null,Y(),J(),ee(),te(),K()]})})()})},Wc="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",qc=p.div`
     position: relative;
     min-height: 3rem;
     height: 3rem;
@@ -535,6 +535,18 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
                     border: 1px solid ${Tl.Neutral[5](e)};
                     box-shadow: none;
                 }
+            `:e.$readOnly?g`
+                border: none;
+                background: transparent !important;
+
+                ${Uc} {
+                    padding-left: 0rem;
+                }
+
+                :focus-within {
+                    border: none;
+                    box-shadow: none;
+                }
             `:e.error?g`
                 border: 1px solid ${Tl.Validation.Red.Border(e)};
 
@@ -570,5 +582,5 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
     overflow: hidden;
 `,tu=p(eu)`
     color: ${Tl.Neutral[3]};
-`,nu=({children:e,show:n,error:r,disabled:i,testId:a,onBlur:s})=>{const c=l(),u=l(n);o((()=>(document.addEventListener("mousedown",d),()=>{document.removeEventListener("mousedown",d)})),[]),o((()=>{u.current=n}),[n]);const d=e=>{if(!i){if(c&&c.current.contains(e.target))return;u.current&&s()}};return t(qc,{children:t(Gc,{ref:c,error:r&&!n,disabled:i,expanded:n,"data-testid":a,children:e})})},ru=({selectedOption:r,placeholder:i="Select",options:a,disabled:c,error:u,"data-testid":d,id:h,enableSearch:C=!1,searchFunction:p,searchPlaceholder:f,valueExtractor:g,valueToStringFunction:m,listExtractor:v,displayValueExtractor:y,onSelectOption:L,listStyleWidth:b,onShowOptions:H,onHideOptions:w,onRetry:V,optionsLoadState:_="success",optionTruncationType:S="end",renderCustomSelectedOption:M,renderListItem:x,...$})=>{const[k,Z]=s(r),[F,O]=s(!1),R=l(),j=l();o((()=>{Z(r)}),[r]);const B=(e,t)=>{Z(e),O(!1),z(!1),R&&R.current.focus(),L&&L(e,t)},A=()=>{F&&(O(!1),z(!1)),R&&R.current.focus()},P=e=>{if("middle"===S){let t=0;return j&&j.current&&(t=j.current.getBoundingClientRect().width),Hc.truncateOneLine((e=>"string"==typeof e?e:m(e)||e.toString())(e),t,120,8)}return e},z=e=>{!e&&w&&w(),e&&H&&H()};return e(nu,{show:F,error:u&&!F,disabled:c,testId:d,onBlur:()=>{O(!1),z(!1)},children:[t(Uc,{ref:R,type:"button","data-testid":h||"selector",onClick:e=>{e.preventDefault(),c||(O(!F),z(!F))},...$,children:e(n,{children:[t(Jc,{ref:j,children:k?M?M(k):t(eu,{truncateType:S,children:P(y?y(k):g?g(k):k.toString())}):t(tu,{truncateType:S,children:i})}),t(Xc,{expanded:F,children:t(Kc,{type:"chevron-down"})})]})}),F&&t(Yc,{}),a&&a.length>0?t(Tc,{listItems:a,onSelectItem:B,onDismiss:A,valueExtractor:g,listExtractor:v,listStyleWidth:b,visible:F,enableSearch:C,searchPlaceholder:f,searchFunction:p,"data-testid":"dropdown-list",selectedItems:k?[k]:[],onRetry:V,itemsLoadState:_,itemTruncationType:S,renderListItem:x}):null]})},iu=({selectedOptions:r,placeholder:i="Select",options:a,disabled:c,error:u,"data-testid":d,enableSearch:h=!1,searchFunction:C,searchPlaceholder:p,valueExtractor:f,listExtractor:g,onSelectOptions:m,listStyleWidth:v,onShowOptions:y,onHideOptions:L,onRetry:b,optionsLoadState:H="success",optionTruncationType:w="end",...V})=>{const[_,S]=s(r||[]),[M,x]=s(!1),$=l();o((()=>{S(r||[])}),[r]);const k=(e,t)=>{const n=[..._],r=Ti(_,(e=>(f?f(e):e)===t));r>-1?n.splice(r,1):n.push(e),S(n),O(!1),$&&$.current.focus(),m&&m(n)},Z=()=>{M&&(x(!1),O(!1)),$&&$.current.focus()},F=()=>{_&&_.length>0?(S([]),m([])):(S(a),m(a))},O=e=>{!e&&L&&L(),e&&y&&y()};return e(nu,{show:M,error:u&&!M,disabled:c,testId:d,onBlur:()=>{x(!1),O(!1)},children:[t(Uc,{ref:$,type:"button","data-testid":"selector",onClick:e=>{e.preventDefault(),c||(x(!M),O(!M))},...V,children:e(n,{children:[t(Jc,{children:_&&0!==_.length?t(eu,{children:_&&0!=_.length?`${_.length} selected`:i}):t(tu,{truncateType:w,children:i})}),t(Xc,{expanded:M,children:t(Kc,{type:"chevron-down"})})]})}),M&&t(Yc,{}),a&&a.length>0||b?t(Tc,{listItems:a,onSelectItem:k,onDismiss:Z,valueExtractor:f,listExtractor:g,listStyleWidth:v,visible:M,enableSearch:h,searchFunction:C,searchPlaceholder:p,"data-testid":"dropdown-list",multiSelect:!0,selectedItems:_,onSelectAll:F,onRetry:b,itemsLoadState:H,itemTruncationType:w}):null]})};export{iu as InputMultiSelect,ru as InputSelect};
+`,nu=({children:e,show:n,error:r,disabled:i,testId:a,onBlur:s,readOnly:c})=>{const u=l(),d=l(n);o((()=>(document.addEventListener("mousedown",h),()=>{document.removeEventListener("mousedown",h)})),[]),o((()=>{d.current=n}),[n]);const h=e=>{if(!i){if(u&&u.current.contains(e.target))return;d.current&&s()}};return t(qc,{children:t(Gc,{ref:u,error:r&&!n,disabled:i,$readOnly:c,expanded:n,"data-testid":a,children:e})})},ru=({selectedOption:r,placeholder:i="Select",options:a,disabled:c,error:u,"data-testid":d,id:h,enableSearch:C=!1,searchFunction:p,searchPlaceholder:f,valueExtractor:g,valueToStringFunction:m,listExtractor:v,displayValueExtractor:y,onSelectOption:L,listStyleWidth:b,onShowOptions:H,onHideOptions:w,onRetry:V,optionsLoadState:_="success",optionTruncationType:S="end",renderCustomSelectedOption:M,renderListItem:x,...$})=>{const[k,Z]=s(r),[F,O]=s(!1),R=l(),j=l();o((()=>{Z(r)}),[r]);const B=(e,t)=>{Z(e),O(!1),z(!1),R&&R.current.focus(),L&&L(e,t)},A=()=>{F&&(O(!1),z(!1)),R&&R.current.focus()},P=e=>{if("middle"===S){let t=0;return j&&j.current&&(t=j.current.getBoundingClientRect().width),Hc.truncateOneLine((e=>"string"==typeof e?e:m(e)||e.toString())(e),t,120,8)}return e},z=e=>{!e&&w&&w(),e&&H&&H()};return e(nu,{show:F,error:u&&!F,disabled:c,readOnly:$.readOnly,testId:d,onBlur:()=>{O(!1),z(!1)},children:[t(Uc,{ref:R,type:"button","data-testid":h||"selector",onClick:e=>{e.preventDefault(),c||$.readOnly||(O(!F),z(!F))},...$,children:e(n,{children:[t(Jc,{ref:j,children:k?M?M(k):t(eu,{truncateType:S,children:P(y?y(k):g?g(k):k.toString())}):t(tu,{truncateType:S,children:i})}),!$.readOnly&&t(Xc,{expanded:F,children:t(Kc,{type:"chevron-down"})})]})}),F&&t(Yc,{}),a&&a.length>0?t(Tc,{listItems:a,onSelectItem:B,onDismiss:A,valueExtractor:g,listExtractor:v,listStyleWidth:b,visible:F,enableSearch:C,searchPlaceholder:f,searchFunction:p,"data-testid":"dropdown-list",selectedItems:k?[k]:[],onRetry:V,itemsLoadState:_,itemTruncationType:S,renderListItem:x}):null]})},iu=({selectedOptions:r,placeholder:i="Select",options:a,disabled:c,error:u,"data-testid":d,enableSearch:h=!1,searchFunction:C,searchPlaceholder:p,valueExtractor:f,listExtractor:g,onSelectOptions:m,listStyleWidth:v,onShowOptions:y,onHideOptions:L,onRetry:b,optionsLoadState:H="success",optionTruncationType:w="end",...V})=>{const[_,S]=s(r||[]),[M,x]=s(!1),$=l();o((()=>{S(r||[])}),[r]);const k=(e,t)=>{const n=[..._],r=Ti(_,(e=>(f?f(e):e)===t));r>-1?n.splice(r,1):n.push(e),S(n),O(!1),$&&$.current.focus(),m&&m(n)},Z=()=>{M&&(x(!1),O(!1)),$&&$.current.focus()},F=()=>{_&&_.length>0?(S([]),m([])):(S(a),m(a))},O=e=>{!e&&L&&L(),e&&y&&y()};return e(nu,{show:M,error:u&&!M,disabled:c,testId:d,onBlur:()=>{x(!1),O(!1)},children:[t(Uc,{ref:$,type:"button","data-testid":"selector",onClick:e=>{e.preventDefault(),c||(x(!M),O(!M))},...V,children:e(n,{children:[t(Jc,{children:_&&0!==_.length?t(eu,{children:_&&0!=_.length?`${_.length} selected`:i}):t(tu,{truncateType:w,children:i})}),t(Xc,{expanded:M,children:t(Kc,{type:"chevron-down"})})]})}),M&&t(Yc,{}),a&&a.length>0||b?t(Tc,{listItems:a,onSelectItem:k,onDismiss:Z,valueExtractor:f,listExtractor:g,listStyleWidth:v,visible:M,enableSearch:h,searchFunction:C,searchPlaceholder:p,"data-testid":"dropdown-list",multiSelect:!0,selectedItems:_,onSelectAll:F,onRetry:b,itemsLoadState:H,itemTruncationType:w}):null]})};export{iu as InputMultiSelect,ru as InputSelect};
 //# sourceMappingURL=index.js.map