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

package/phone-number-input/phone-number-input-helper.d.ts

@@ -1,5 +1,5 @@
 import { CountryValue } from "./types";
 export declare namespace PhoneNumberInputHelper {
-    const getCountries: CountryValue[];
-    const formatNumber: (text: string, country: CountryValue | undefined) => string;
+    const getCountries: () => CountryValue[];
+    const formatNumber: (numberText?: string, country?: CountryValue) => string;
 }

package/phone-number-input/phone-number-input.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { PhoneNumberInputProps } from "./types";
-export declare const PhoneNumberInput: ({ onChange, value, allowClear, onClear, error, optionPlaceholder, optionSearchPlaceholder, enableSearch, onHideOptions, onShowOptions, placeholder, ...otherProps }: PhoneNumberInputProps) => JSX.Element;
+export declare const PhoneNumberInput: ({ onChange, value, allowClear, onClear, onBlur, error, fixedCountry, optionPlaceholder, optionSearchPlaceholder, enableSearch, onHideOptions, onShowOptions, placeholder, ...otherProps }: PhoneNumberInputProps) => JSX.Element;

package/phone-number-input/types.d.ts

@@ -15,14 +15,23 @@ export interface PhoneNumberInputValue {
     number?: string | undefined;
 }
 export interface PhoneNumberInputProps extends React.AriaAttributes {
+    /** The value of the input */
     value?: PhoneNumberInputValue | undefined;
     error?: boolean | undefined;
     /** Specifies if the clear button should be present in the input */
     allowClear?: boolean | undefined;
     "data-testid"?: string | undefined;
+    className?: string | undefined;
+    /**
+     * Specifies if the country code is a fixed value and the user
+     * cannot select another option
+     */
+    fixedCountry?: boolean | undefined;
     onChange?: ((value: PhoneNumberInputValue) => void) | undefined;
     /** Called when the clear button in the input field is clicked */
     onClear?: () => void | undefined;
+    /** Called when a defocus happens */
+    onBlur?: (() => void) | undefined;
     /** The placeholder value for the dropdown selector */
     optionPlaceholder?: string | undefined;
     /** The placeholder value for the dropdown search */

package/popover/index.js

@@ -229,7 +229,7 @@ var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.pr
             `,e.$disableTransition&&(t+=s`
                 transition: none;
             `),t}}
-`,bn=({show:e=!1,rootId:t,onOverlayClick:r,children:c,backgroundOpacity:s,backgroundBlur:d=!0,disableTransition:f=!1,enableOverlayClick:p=!1,zIndex:h,id:y})=>{const[m,g]=i(null),[v,b]=i(),w=a(),S=a(null),x=c&&o.cloneElement(c,{ref:S}),$=y?`lifesg-ds-overlay-root-${y}`:"lifesg-ds-overlay-root";l((()=>{if(e){const e=O();if(_(e),!e){const e=setTimeout((()=>{C("add")}),200);return()=>clearTimeout(e)}}else if(!w.current){const e=setTimeout((()=>{C("remove")}),200);return()=>clearTimeout(e)}}),[e]),l((()=>{g(F());const e=O();return _(e),e||j(),()=>{C("remove")}}),[]);const _=e=>{w.current=e,b(e)},F=()=>document&&t?document.getElementById(t):document?document.body:null,O=()=>document.body.classList.contains(Sn),j=()=>{if(!document.getElementById(wn)){const e=document.createElement("style");e.id=wn;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${Sn} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${Sn}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},C=e=>{const t=document.body.classList.contains(Sn);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(Sn):document.body.classList.add(Sn)},H=e=>{e.preventDefault();const t=S.current?.firstChild;t&&t.contains(e.target)||r&&p&&r()};return m?u.createPortal(n(gn,{id:$,"data-testid":$,$show:e,zIndex:h,$stacked:v,children:c&&n(vn,{"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:s||(v?.5:.8),$backgroundBlur:d,$disableTransition:f,$enableOverlayClick:p,onClick:H,children:x})}),m):null},wn="lifesg-ds-overlay-stylesheet",Sn="lifesg-ds-overlay-open",xn=e=>Object.keys(h).reduce(((t,n)=>{const r=h[n];return t[n]=`@media screen and (${e}: ${r}px)`,t}),{}),$n=xn("max-width"),_n=(xn("min-width"),c.div`
+`,bn=({show:e=!1,rootId:t,onOverlayClick:r,children:c,backgroundOpacity:s,backgroundBlur:d=!0,disableTransition:f=!1,enableOverlayClick:p=!1,zIndex:h,id:y})=>{const[m,g]=i(null),[v,b]=i(),w=a(),S=a(null),x=c&&o.cloneElement(c,{ref:S}),$=y?`lifesg-ds-overlay-root-${y}`:"lifesg-ds-overlay-root";l((()=>{if(e){const e=O();if(_(e),!e){const e=setTimeout((()=>{C("add")}),200);return()=>clearTimeout(e)}}else if(!w.current){const e=setTimeout((()=>{C("remove")}),200);return()=>clearTimeout(e)}}),[e]),l((()=>{g(F());const e=O();return _(e),e||j(),()=>{C("remove")}}),[]);const _=e=>{w.current=e,b(e)},F=()=>document&&t?document.getElementById(t):document?document.body:null,O=()=>document.body.classList.contains(Sn),j=()=>{if(!document.getElementById(wn)){const e=document.createElement("style");e.id=wn;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${Sn} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${Sn}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},C=e=>{const t=document.body.classList.contains(Sn);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(Sn):document.body.classList.add(Sn)},H=e=>{const t=S.current?.firstChild;t&&t.contains(e.target)||r&&p&&(e.preventDefault(),r())};return m?u.createPortal(n(gn,{id:$,"data-testid":$,$show:e,zIndex:h,$stacked:v,children:c&&n(vn,{"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:s||(v?.5:.8),$backgroundBlur:d,$disableTransition:f,$enableOverlayClick:p,onClick:H,children:x})}),m):null},wn="lifesg-ds-overlay-stylesheet",Sn="lifesg-ds-overlay-open",xn=e=>Object.keys(h).reduce(((t,n)=>{const r=h[n];return t[n]=`@media screen and (${e}: ${r}px)`,t}),{}),$n=xn("max-width"),_n=(xn("min-width"),c.div`
     position: relative;
     display: flex;
     justify-content: center;