@lifesg/react-design-system 1.0.0-alpha.20 → 1.0.0-alpha.21

package/input-group/input-group-list-addon.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { InputGroupProps } from "./types";
-export declare const InputGroupListAddon: <T, V>({ addon, error, onChange, ...otherProps }: InputGroupProps<T, V>) => JSX.Element;
+export declare const InputGroupListAddon: <T, V>({ addon, error, onChange, readOnly, className, onBlur, ...otherProps }: InputGroupProps<T, V>) => JSX.Element;

package/input-group/input-group-list-addon.style.d.ts

@@ -1,12 +1,20 @@
 /// <reference types="react" />
+import { InputGroupAddonPosition } from "./types";
 interface StyleProps {
     disabled?: boolean;
+    $readOnly?: boolean;
     $expanded?: boolean;
+    $position?: InputGroupAddonPosition;
+}
+interface DividerStyleProps {
+    $readOnly?: boolean;
+    $position?: InputGroupAddonPosition;
 }
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ElementBoundary: import("styled-components").StyledComponent<"div", any, import("../input-select/input-select.styles").InputSelectStyleProps, never>;
 export declare const DisplayContainer: import("styled-components").StyledComponent<"div", any, StyleProps, never>;
 export declare const Selector: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const SelectorReadOnly: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IconContainer: import("styled-components").StyledComponent<"div", any, StyleProps, never>;
 export declare const StyledChevronIcon: import("styled-components").StyledComponent<{
     (props: import("react").SVGProps<SVGSVGElement>): JSX.Element;
@@ -15,5 +23,5 @@ export declare const StyledChevronIcon: import("styled-components").StyledCompon
 export declare const LabelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ValueLabel: import("styled-components").StyledComponent<"p", any, import("..").TextProps, never>;
 export declare const PlaceholderLabel: import("styled-components").StyledComponent<"p", any, import("..").TextProps, never>;
-export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Divider: import("styled-components").StyledComponent<"div", any, DividerStyleProps, never>;
 export {};

package/input-group/input-group.style.d.ts

@@ -1,14 +1,11 @@
 /// <reference types="react" />
-interface AddonStyleProps {
+import { InputGroupAddonPosition } from "./types";
+export interface AddonStyleProps {
     disabled?: boolean;
     $error?: boolean;
     $readOnly?: boolean;
-    $position?: "left" | "right";
-}
-interface MainInputStyleProps {
-    $position?: "left" | "right" | undefined;
+    $position?: InputGroupAddonPosition;
 }
 export declare const Container: import("styled-components").StyledComponent<"div", any, AddonStyleProps, never>;
-export declare const MainInput: import("styled-components").StyledComponent<(props: import("..").InputProps & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, MainInputStyleProps, never>;
+export declare const MainInput: import("styled-components").StyledComponent<(props: import("..").InputProps & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {}, never>;
 export declare const AddOnContainer: import("styled-components").StyledComponent<"div", any, AddonStyleProps, never>;
-export {};

package/input-group/types.d.ts

@@ -2,6 +2,7 @@
 import { InputProps } from "../input/types";
 import { DropdownDisplayProps, DropdownSearchProps, ItemsLoadStateType, TruncateType } from "../shared/dropdown-list/types";
 export declare type InputGroupAddonType = "label" | "list" | "custom";
+export declare type InputGroupAddonPosition = "left" | "right" | undefined;
 export interface CustomAddon {
     children?: JSX.Element | undefined;
 }
@@ -9,7 +10,6 @@ export interface LabelAddon {
     value?: string | undefined;
 }
 export interface ListAddon<T, V> extends DropdownDisplayProps<T, V>, DropdownSearchProps<T> {
-    value?: T | undefined;
     placeholder?: string | undefined;
     displayValueExtractor?: ((item: T) => string) | undefined;
     "data-selector-testid"?: string | undefined;
@@ -30,10 +30,11 @@ export interface ListAddon<T, V> extends DropdownDisplayProps<T, V>, DropdownSea
 export interface AddonProps<T, V> {
     type?: InputGroupAddonType | undefined;
     attributes: ListAddon<T, V> | LabelAddon | CustomAddon;
-    position?: "left" | "right" | undefined;
+    position?: InputGroupAddonPosition;
 }
 export interface InputGroupProps<T, V> extends InputProps {
     addon?: AddonProps<T, V> | undefined;
+    onBlur?: (() => void) | undefined;
 }
 /** To be exposed for Form component inheritance */
 export declare type InputGroupPartialProps<T, V> = Omit<InputGroupProps<T, V>, "error">;

package/input-select/index.js

@@ -465,6 +465,7 @@ import e,{jsxs as t,jsx as n,Fragment as r}from"react/jsx-runtime";import*as i f
     background: transparent;
     flex: 1;
     padding: 0 0.5rem 0 0;
+    width: 100%;
 
     :focus,
     :active {
@@ -489,14 +490,14 @@ import e,{jsxs as t,jsx as n,Fragment as r}from"react/jsx-runtime";import*as i f
     height: 1.375rem;
     width: 1.375rem;
     color: ${Hl.Neutral[3]};
-`,eu=u(((e,r)=>{const{onClear:i,...o}=e;return t(Gc,{children:[n(Kc,{}),n(Xc,{ref:r,...o}),o.value&&n(Yc,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:n(Jc,{})})]},"search")})),tu=({listItems:e,listExtractor:i,valueExtractor:o,onSelectItem:s,listStyleWidth:u,visible:d,enableSearch:h,searchPlaceholder:p="Search",onSearch:f,searchFunction:g,onDismiss:m,multiSelect:y,selectedItems:v,onSelectAll:b,onRetry:w,itemsLoadState:_="success",itemTruncationType:S="end",renderListItem:x,...$})=>{const[C,k]=l(0),[F,j]=l(""),[O,B]=l(e),[A,I]=l(0),P=function(e,t){const n=ho.fun(e),[[r],i]=ll(1,n?e:[e],n?t||[]:t);return n||2==arguments.length?[r,i]:r}({height:A}),z=c(),D=c(),E=c([]),H=c(),M=c(C),N=c(O),T=e=>{M.current=e,k(e)},L=e=>{N.current=e,B(e)};a((()=>(document.addEventListener("keydown",Q),()=>{document.removeEventListener("keydown",Q)})),[]),a((()=>{q(F)}),[F]),a((()=>{j(""),d?(I(U()),H&&H.current?(H.current.focus(),T(-1)):E.current[C]&&E.current[C].focus()):I(0)}),[d]),a((()=>{if(d){const e=U();I(e)}}),[O]),a((()=>{L(e),j(""),T(0)}),[e]);const V=e=>i?i(e):e.toString(),R=e=>{const t=i?i(e):e.toString();let n=0;return D&&D.current&&(n=D.current.getBoundingClientRect().width-100),hc.shouldTruncateToTwoLines("string"==typeof t?t:t.title,n)},W=e=>qi(v,e)>-1,q=t=>{if(""===t)L(e);else if(g){const e=g(t);L(e)}else{const n=e.filter((e=>{const n=V(e),r="object"==typeof n?n.title.toLowerCase():n.toLowerCase();return"object"==typeof n&&n.secondaryLabel?r.includes(t.trim().toLowerCase())||n.secondaryLabel.includes(t.trim().toLowerCase()):r.includes(t.trim().toLowerCase())}));L(n)}},U=()=>D&&D.current?D.current.getBoundingClientRect().height:0,Q=e=>{if(z&&z.current.contains(e.target))switch(e.code){case"ArrowDown":if(M.current<N.current.length-1){const e=M.current+1;E.current[e].focus(),T(e)}break;case"ArrowUp":if(M.current>0){const e=M.current-1;E.current[e].focus(),T(M.current-1)}break;case"Escape":m&&m()}},Z=(e,t)=>{e.preventDefault(),s&&s(t,(e=>o?o(e):e)(t))},G=e=>{const t=e.target.value;j(t),f&&f()},X=()=>{j(""),f&&f()},K=()=>{w&&w()},Y=e=>{const r=V(e),i="string"==typeof r?r:r.title;return t(Bc,{"data-testid":"truncate-middle-container",children:[n(Ac,{children:i}),t(Ic,{children:[" ",i]})]})},J=e=>{const i=V(e);return"string"==typeof i?n(r,{children:i}):t(r,{children:[i.title,i.secondaryLabel&&n(Oc,{children:i.secondaryLabel})]})},ee=()=>{if(!w||w&&"success"===_)return O.map(((e,r)=>n(kc,{checked:W(e)&&!y,children:t(Fc,{onClick:t=>{Z(t,e)},ref:e=>E.current[r]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,multiSelect:y,children:[y&&n(Pc,{checked:W(e),displaySize:"small"}),x?x(e,{selected:W(e)}):n(jc,{truncateType:S,children:"middle"===S&&R(e)?Y(e):J(e)})]})},((e,t)=>`item_${t}__${o?o(e):e}`)(e,r))))},te=()=>{if(y&&O.length>0&&!F&&"success"===_)return n(zc,{children:n(Dc,{onClick:b,children:0===v.length?"Select all":"Unselect all"})},"selectAll")},ne=()=>{if(F&&0===O.length)return t(Ec,{"data-testid":"list-no-results",children:[n(Mc,{"data-testid":"no-result-icon"}),n(Hc,{children:"No results found."})]},"noResults")},re=()=>{if(w&&"loading"===_)return t(Ec,{"data-testid":"list-loading",children:[n(dc,{$buttonStyle:"secondary",size:24}),n(Hc,{children:"Loading..."})]},"loading")},ie=()=>{if(w&&"fail"===_)return t(Ec,{"data-testid":"list-fail",children:[n(Mc,{"data-testid":"load-error-icon"}),n(Hc,{children:"Failed to load."}),n(Dc,{onClick:K,children:"Try again."})]},"noResults")};return n($c,{style:P,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:z,children:(()=>{if(d)return t(Cc,{ref:D,"data-testid":"dropdown-list",width:u,role:"list",...$,children:[(h||g)&&"success"===_?n(eu,{ref:H,onChange:G,value:F,placeholder:p,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:X}):null,te(),ne(),re(),ie(),ee()]})})()})};var nu,ru={};Object.defineProperty(ru,"__esModule",{value:!0});var iu=e;const ou=e=>iu.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:iu.jsx("path",{d:"M2.62611 5.81312C2.84811 5.59112 3.10478 5.48012 3.39611 5.48012C3.68811 5.48012 3.94511 5.59112 4.16711 5.81312L10.1881 11.8341L16.2301 5.79212C16.4381 5.58412 16.6881 5.48012 16.9801 5.48012C17.2714 5.48012 17.5281 5.59112 17.7501 5.81312C17.9588 6.02179 18.0631 6.27545 18.0631 6.57412C18.0631 6.87279 17.9588 7.12612 17.7501 7.33412L10.8131 14.2721C10.7158 14.3688 10.6151 14.4381 10.5111 14.4801C10.4071 14.5215 10.2994 14.5421 10.1881 14.5421C10.0768 14.5421 9.96911 14.5215 9.86511 14.4801C9.76111 14.4381 9.66044 14.3688 9.56311 14.2721L2.60511 7.31312C2.38244 7.09112 2.27811 6.83779 2.29211 6.55312C2.30611 6.26845 2.41744 6.02179 2.62611 5.81312Z",fill:"currentColor"})});ou.displayName="ChevronDownIcon",nu=ru.ChevronDownIcon=ou;const au={collections:{base:{InputBoxShadow:y`
+`,eu=u(((e,r)=>{const{onClear:i,...o}=e;return t(Gc,{children:[n(Kc,{}),n(Xc,{ref:r,...o}),o.value&&n(Yc,{"aria-label":"Clear search",focusOutline:"browser",onClick:i,children:n(Jc,{})})]},"search")})),tu=({listItems:e,listExtractor:i,valueExtractor:o,onSelectItem:s,listStyleWidth:u,visible:d,enableSearch:h,searchPlaceholder:p="Search",onSearch:f,searchFunction:g,onDismiss:m,multiSelect:y,selectedItems:v,onSelectAll:b,onRetry:w,itemsLoadState:_="success",itemTruncationType:S="end",renderListItem:x,onBlur:$,...C})=>{const[k,F]=l(0),[j,O]=l(""),[B,A]=l(e),[I,P]=l(0),z=function(e,t){const n=ho.fun(e),[[r],i]=ll(1,n?e:[e],n?t||[]:t);return n||2==arguments.length?[r,i]:r}({height:I}),D=c(),E=c(),H=c([]),M=c(),N=c(k),T=c(B),L=e=>{N.current=e,F(e)},V=e=>{T.current=e,A(e)};a((()=>(document.addEventListener("keydown",Z),()=>{document.removeEventListener("keydown",Z)})),[]),a((()=>{U(j)}),[j]),a((()=>{O(""),d?(P(Q()),M&&M.current?(M.current.focus(),L(-1)):H.current[k]&&H.current[k].focus()):P(0)}),[d]),a((()=>{if(d){const e=Q();P(e)}}),[B]),a((()=>{V(e),O(""),L(0)}),[e]);const R=e=>i?i(e):e.toString(),W=e=>{const t=i?i(e):e.toString();let n=0;return E&&E.current&&(n=E.current.getBoundingClientRect().width-100),hc.shouldTruncateToTwoLines("string"==typeof t?t:t.title,n)},q=e=>qi(v,e)>-1,U=t=>{if(""===t)V(e);else if(g){const e=g(t);V(e)}else{const n=e.filter((e=>{const n=R(e),r="object"==typeof n?n.title.toLowerCase():n.toLowerCase();return"object"==typeof n&&n.secondaryLabel?r.includes(t.trim().toLowerCase())||n.secondaryLabel.includes(t.trim().toLowerCase()):r.includes(t.trim().toLowerCase())}));V(n)}},Q=()=>E&&E.current?E.current.getBoundingClientRect().height:0,Z=e=>{if(D&&D.current.contains(e.target))switch(e.code){case"ArrowDown":if(N.current<T.current.length-1){const e=N.current+1;H.current[e].focus(),L(e)}break;case"ArrowUp":if(N.current>0){const e=N.current-1;H.current[e].focus(),L(N.current-1)}break;case"Escape":m&&m()}},G=(e,t)=>{e.preventDefault(),s&&s(t,(e=>o?o(e):e)(t))},X=e=>{const t=e.target.value;O(t),f&&f()},K=()=>{O(""),f&&f()},Y=()=>{w&&w()},J=()=>{$&&$()},ee=e=>{const r=R(e),i="string"==typeof r?r:r.title;return t(Bc,{"data-testid":"truncate-middle-container",children:[n(Ac,{children:i}),t(Ic,{children:[" ",i]})]})},te=e=>{const i=R(e);return"string"==typeof i?n(r,{children:i}):t(r,{children:[i.title,i.secondaryLabel&&n(Oc,{children:i.secondaryLabel})]})},ne=()=>{if(!w||w&&"success"===_)return B.map(((e,r)=>n(kc,{checked:q(e)&&!y,children:t(Fc,{onClick:t=>{G(t,e)},ref:e=>H.current[r]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,multiSelect:y,onBlur:J,children:[y&&n(Pc,{checked:q(e),displaySize:"small"}),x?x(e,{selected:q(e)}):n(jc,{truncateType:S,children:"middle"===S&&W(e)?ee(e):te(e)})]})},((e,t)=>`item_${t}__${o?o(e):e}`)(e,r))))},re=()=>{if(y&&B.length>0&&!j&&"success"===_)return n(zc,{children:n(Dc,{onClick:b,children:0===v.length?"Select all":"Unselect all"})},"selectAll")},ie=()=>{if(j&&0===B.length)return t(Ec,{"data-testid":"list-no-results",children:[n(Mc,{"data-testid":"no-result-icon"}),n(Hc,{children:"No results found."})]},"noResults")},oe=()=>{if(w&&"loading"===_)return t(Ec,{"data-testid":"list-loading",children:[n(dc,{$buttonStyle:"secondary",size:24}),n(Hc,{children:"Loading..."})]},"loading")},ae=()=>{if(w&&"fail"===_)return t(Ec,{"data-testid":"list-fail",children:[n(Mc,{"data-testid":"load-error-icon"}),n(Hc,{children:"Failed to load."}),n(Dc,{onClick:Y,children:"Try again."})]},"noResults")};return n($c,{style:z,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:D,children:(()=>{if(d)return t(Cc,{ref:E,"data-testid":"dropdown-list",width:u,role:"list",...C,children:[(h||g)&&"success"===_?n(eu,{ref:M,onChange:X,value:j,placeholder:p,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:K}):null,re(),ie(),oe(),ae(),ne()]})})()})};var nu,ru={};Object.defineProperty(ru,"__esModule",{value:!0});var iu=e;const ou=e=>iu.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:iu.jsx("path",{d:"M2.62611 5.81312C2.84811 5.59112 3.10478 5.48012 3.39611 5.48012C3.68811 5.48012 3.94511 5.59112 4.16711 5.81312L10.1881 11.8341L16.2301 5.79212C16.4381 5.58412 16.6881 5.48012 16.9801 5.48012C17.2714 5.48012 17.5281 5.59112 17.7501 5.81312C17.9588 6.02179 18.0631 6.27545 18.0631 6.57412C18.0631 6.87279 17.9588 7.12612 17.7501 7.33412L10.8131 14.2721C10.7158 14.3688 10.6151 14.4381 10.5111 14.4801C10.4071 14.5215 10.2994 14.5421 10.1881 14.5421C10.0768 14.5421 9.96911 14.5215 9.86511 14.4801C9.76111 14.4381 9.66044 14.3688 9.56311 14.2721L2.60511 7.31312C2.38244 7.09112 2.27811 6.83779 2.29211 6.55312C2.30611 6.26845 2.41744 6.02179 2.62611 5.81312Z",fill:"currentColor"})});ou.displayName="ChevronDownIcon",nu=ru.ChevronDownIcon=ou;const au={collections:{base:{InputBoxShadow:y`
         inset 0 0 6px 1px ${Hl.Shadow.Accent}
     `,InputErrorBoxShadow:y`
         inset 0 0 6px 1px ${Hl.Shadow.Red}
     `}},defaultValue:"base"},su=e=>t=>{const n=t.theme,r=Pl(au,n[zl.designTokenScheme]);return n.options?.designToken?Il(r,e,n.options.designToken):Il(r,e)},lu=su("InputBoxShadow"),cu=su("InputErrorBoxShadow"),uu="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",du=g.div`
     position: relative;
     min-height: 3rem;
-    height: 3rem;
+    height: 3rem; // Need this to persist the height when expanding or collapsing list
     width: 100%;
 
     ${Tl.tablet} {
@@ -507,7 +508,8 @@ import e,{jsxs as t,jsx as n,Fragment as r}from"react/jsx-runtime";import*as i f
     position: relative;
     align-items: center;
     justify-content: space-between;
-    padding: 0.702rem 1rem; // To make it exactly 3rem height
+    padding: 0 1rem;
+    height: 3rem;
     width: 100%;
     border-radius: ${"4px"};
     cursor: pointer;
@@ -518,6 +520,10 @@ import e,{jsxs as t,jsx as n,Fragment as r}from"react/jsx-runtime";import*as i f
     :active {
         outline: none;
     }
+
+    :focus-visible {
+        outline: 2px solid ${Hl.Accent.Light[3]};
+    }
 `,pu=m`
 	from {
 		position: absolute;
@@ -609,5 +615,5 @@ import e,{jsxs as t,jsx as n,Fragment as r}from"react/jsx-runtime";import*as i f
     overflow: hidden;
 `,wu=g(bu)`
     color: ${Hl.Neutral[3]};
-`,_u=({children:e,show:t,error:r,disabled:i,testId:o,onBlur:s,readOnly:l})=>{const u=c(),d=c(t);a((()=>(document.addEventListener("mousedown",h),()=>{document.removeEventListener("mousedown",h)})),[]),a((()=>{d.current=t}),[t]);const h=e=>{if(!i){if(u&&u.current.contains(e.target))return;d.current&&s()}};return n(du,{children:n(fu,{ref:u,error:r&&!t,disabled:i,$readOnly:l,expanded:t,"data-testid":o,children:e})})},Su=({selectedOption:e,placeholder:i="Select",options:o,disabled:s,error:u,"data-testid":d,id:h,enableSearch:p=!1,searchFunction:f,searchPlaceholder:g,valueExtractor:m,valueToStringFunction:y,listExtractor:v,displayValueExtractor:b,onSelectOption:w,listStyleWidth:_,onShowOptions:S,onHideOptions:x,onRetry:$,optionsLoadState:C="success",optionTruncationType:k="end",renderCustomSelectedOption:F,renderListItem:j,...O})=>{const[B,A]=l(e),[I,P]=l(!1),z=c(),D=c();a((()=>{A(e)}),[e]);const E=(e,t)=>{A(e),P(!1),N(!1),z&&z.current.focus(),w&&w(e,t)},H=()=>{I&&(P(!1),N(!1)),z&&z.current.focus()},M=e=>{if("middle"===k){let t=0;return D&&D.current&&(t=D.current.getBoundingClientRect().width),hc.truncateOneLine((e=>"string"==typeof e?e:y(e)||e.toString())(e),t,120,8)}return e},N=e=>{!e&&x&&x(),e&&S&&S()};return t(_u,{show:I,error:u&&!I,disabled:s,readOnly:O.readOnly,testId:d,onBlur:()=>{P(!1),N(!1)},children:[n(hu,{ref:z,type:"button","data-testid":h||"selector",onClick:e=>{e.preventDefault(),s||O.readOnly||(P(!I),N(!I))},...O,children:t(r,{children:[n(vu,{ref:D,children:B?F?F(B):n(bu,{truncateType:k,children:M(b?b(B):m?m(B):B.toString())}):n(wu,{truncateType:k,children:i})}),!O.readOnly&&n(gu,{expanded:I,children:n(mu,{})})]})}),I&&n(yu,{}),o&&o.length>0?n(tu,{listItems:o,onSelectItem:E,onDismiss:H,valueExtractor:m,listExtractor:v,listStyleWidth:_,visible:I,enableSearch:p,searchPlaceholder:g,searchFunction:f,"data-testid":"dropdown-list",selectedItems:B?[B]:[],onRetry:$,itemsLoadState:C,itemTruncationType:k,renderListItem:j}):null]})},xu=({selectedOptions:e,placeholder:i="Select",options:o,disabled:s,error:u,"data-testid":d,enableSearch:h=!1,searchFunction:p,searchPlaceholder:f,valueExtractor:g,listExtractor:m,onSelectOptions:y,listStyleWidth:v,onShowOptions:b,onHideOptions:w,onRetry:_,optionsLoadState:S="success",optionTruncationType:x="end",...$})=>{const[C,k]=l(e||[]),[F,j]=l(!1),O=c();a((()=>{k(e||[])}),[e]);const B=(e,t)=>{const n=[...C],r=qi(C,(e=>(g?g(e):e)===t));r>-1?n.splice(r,1):n.push(e),k(n),P(!1),O&&O.current.focus(),y&&y(n)},A=()=>{F&&(j(!1),P(!1)),O&&O.current.focus()},I=()=>{C&&C.length>0?(k([]),y([])):(k(o),y(o))},P=e=>{!e&&w&&w(),e&&b&&b()};return t(_u,{show:F,error:u&&!F,disabled:s,testId:d,onBlur:()=>{j(!1),P(!1)},children:[n(hu,{ref:O,type:"button","data-testid":"selector",onClick:e=>{e.preventDefault(),s||(j(!F),P(!F))},...$,children:t(r,{children:[n(vu,{children:C&&0!==C.length?n(bu,{children:C&&0!=C.length?`${C.length} selected`:i}):n(wu,{truncateType:x,children:i})}),n(gu,{expanded:F,children:n(mu,{})})]})}),F&&n(yu,{}),o&&o.length>0||_?n(tu,{listItems:o,onSelectItem:B,onDismiss:A,valueExtractor:g,listExtractor:m,listStyleWidth:v,visible:F,enableSearch:h,searchFunction:p,searchPlaceholder:f,"data-testid":"dropdown-list",multiSelect:!0,selectedItems:C,onSelectAll:I,onRetry:_,itemsLoadState:S,itemTruncationType:x}):null]})};export{xu as InputMultiSelect,Su as InputSelect};
+`,_u=({children:e,show:t,error:r,disabled:i,testId:o,onBlur:s,readOnly:l})=>{const u=c(),d=c(t);a((()=>(document.addEventListener("mousedown",h),()=>{document.removeEventListener("mousedown",h)})),[]),a((()=>{d.current=t}),[t]);const h=e=>{if(!i){if(u&&u.current.contains(e.target))return;d.current&&s()}};return n(du,{children:n(fu,{ref:u,error:r&&!t,disabled:i,$readOnly:l,expanded:t,"data-testid":o,children:e})})},Su=({selectedOption:e,placeholder:i="Select",options:o,disabled:s,error:u,"data-testid":d,id:h,enableSearch:p=!1,searchFunction:f,searchPlaceholder:g,valueExtractor:m,valueToStringFunction:y,listExtractor:v,displayValueExtractor:b,onSelectOption:w,listStyleWidth:_,onShowOptions:S,onHideOptions:x,onRetry:$,optionsLoadState:C="success",optionTruncationType:k="end",renderCustomSelectedOption:F,renderListItem:j,...O})=>{const[B,A]=l(e),[I,P]=l(!1),z=c(),D=c();a((()=>{A(e)}),[e]);const E=(e,t)=>{A(e),P(!1),N(!1),z&&z.current.focus(),w&&w(e,t)},H=()=>{I&&(P(!1),N(!1)),z&&z.current.focus()},M=e=>{if("middle"===k){let t=0;return D&&D.current&&(t=D.current.getBoundingClientRect().width),hc.truncateOneLine((e=>"string"==typeof e?e:y(e)||e.toString())(e),t,120,8)}return e},N=e=>{!e&&x&&x(),e&&S&&S()};return t(_u,{show:I,error:u&&!I,disabled:s,readOnly:O.readOnly,testId:d,onBlur:()=>{P(!1),N(!1)},children:[n(hu,{ref:z,type:"button","data-testid":h||"selector",disabled:s,onClick:e=>{e.preventDefault(),s||O.readOnly||(P(!I),N(!I))},...O,children:t(r,{children:[n(vu,{ref:D,children:B?F?F(B):n(bu,{truncateType:k,children:M(b?b(B):m?m(B):B.toString())}):n(wu,{truncateType:k,children:i})}),!O.readOnly&&n(gu,{expanded:I,children:n(mu,{})})]})}),I&&n(yu,{}),o&&o.length>0?n(tu,{listItems:o,onSelectItem:E,onDismiss:H,valueExtractor:m,listExtractor:v,listStyleWidth:_,visible:I,enableSearch:p,searchPlaceholder:g,searchFunction:f,"data-testid":"dropdown-list",selectedItems:B?[B]:[],onRetry:$,itemsLoadState:C,itemTruncationType:k,renderListItem:j}):null]})},xu=({selectedOptions:e,placeholder:i="Select",options:o,disabled:s,error:u,"data-testid":d,enableSearch:h=!1,searchFunction:p,searchPlaceholder:f,valueExtractor:g,listExtractor:m,onSelectOptions:y,listStyleWidth:v,onShowOptions:b,onHideOptions:w,onRetry:_,optionsLoadState:S="success",optionTruncationType:x="end",...$})=>{const[C,k]=l(e||[]),[F,j]=l(!1),O=c();a((()=>{k(e||[])}),[e]);const B=(e,t)=>{const n=[...C],r=qi(C,(e=>(g?g(e):e)===t));r>-1?n.splice(r,1):n.push(e),k(n),P(!1),O&&O.current.focus(),y&&y(n)},A=()=>{F&&(j(!1),P(!1)),O&&O.current.focus()},I=()=>{C&&C.length>0?(k([]),y([])):(k(o),y(o))},P=e=>{!e&&w&&w(),e&&b&&b()};return t(_u,{show:F,error:u&&!F,disabled:s,testId:d,onBlur:()=>{j(!1),P(!1)},children:[n(hu,{ref:O,type:"button","data-testid":"selector",onClick:e=>{e.preventDefault(),s||(j(!F),P(!F))},...$,children:t(r,{children:[n(vu,{children:C&&0!==C.length?n(bu,{children:C&&0!=C.length?`${C.length} selected`:i}):n(wu,{truncateType:x,children:i})}),n(gu,{expanded:F,children:n(mu,{})})]})}),F&&n(yu,{}),o&&o.length>0||_?n(tu,{listItems:o,onSelectItem:B,onDismiss:A,valueExtractor:g,listExtractor:m,listStyleWidth:v,visible:F,enableSearch:h,searchFunction:p,searchPlaceholder:f,"data-testid":"dropdown-list",multiSelect:!0,selectedItems:C,onSelectAll:I,onRetry:_,itemsLoadState:S,itemTruncationType:x}):null]})};export{xu as InputMultiSelect,Su as InputSelect};
 //# sourceMappingURL=index.js.map