@lifesg/react-design-system 1.0.0-alpha.14 → 1.0.0-alpha.16

package/cjs/index.js

@@ -2095,7 +2095,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
     ${e=>{if(e.$hide)return styled.css`
                 color: ${Color.Neutral[3]};
             `}}
-`,UnitNumberInput=({disabled:e,error:t,value:r,onChange:a,onBlur:i,onChangeRaw:n,onBlurRaw:s,readOnly:o,placeholder:l,...d})=>{const[h,c]=React.useState(""),[p,u]=React.useState(""),[m,f]=React.useState("none"),g=React.useRef(null),y=React.useRef(null),v=React.useRef(null),b=React.useRef(h),x=React.useRef(p),C=React.useRef(m),_=e=>{b.current=e,c(e)},S=e=>{x.current=e,u(e)},T=e=>{C.current=e,f(e)};React.useEffect((()=>(document.addEventListener("mousedown",$),g.current&&g.current.addEventListener("keydown",w),()=>{document.removeEventListener("mousedown",$),g.current&&g.current.removeEventListener("keydown",w)})),[m]),React.useEffect((()=>{"floor"===m&&3===h.length&&v.current&&v.current.focus()}),[h]),React.useEffect((()=>{P(r)}),[r]);const $=t=>{e||o||g&&g.current.contains(t.target)||"none"!==C.current&&(T("none"),I())},w=e=>{"unit"===e.target.name&&"Tab"===e.code&&(T("none"),I())},E=e=>{T(e.target.name),e.target.select()},k=e=>{const t=e.target.name,r=e.target.value;"floor"===t?_(R(r)):S(R(r))},A=e=>{const t=e.target.name,r=e.target.value.toLocaleUpperCase().replace(/[^0-9A-Za-z]/,"");"floor"===t?(_(r),M(r,t)):(S(r),M(r,t))},R=e=>/^[0-9]$/.test(e)?StringHelper.padValue(e,!0):e.toLocaleUpperCase(),P=e=>{if(void 0===e||""===e)_(""),S("");else{const t=e.split("-");if(0!==t.length){const e=t[0],r=t[1];_(R(e)),S(R(r))}}},M=(e,t)=>{if(a){const r={floor:h,unit:p};r[t]=e;const i=D(r);a(i)}if(n){const r=[..."floor"===t?[R(e)]:[h],..."unit"===t?[R(e)]:[p]];n(r)}},I=()=>{if(i){const e={floor:b.current,unit:x.current},t=D(e);i(t)}if(s){const e=[R(b.current),R(x.current)];s(e)}},D=e=>{const t=[R(e.floor),R(e.unit)];return e.floor.length>0&&e.unit.length>0?t.join("-"):t.every((e=>""===e))?"":INVALID_VALUE},L=e=>{if(void 0===e||""===e)return["00","8888"];return e.split("-")};return jsxRuntime.jsxs(Container$4,{ref:g,onClick:()=>{"none"===m&&y.current&&y.current.focus()},disabled:e,$error:t,$readOnly:o,"data-testid":d["data-testid"],children:[jsxRuntime.jsx(AddOnContainer,{"data-testid":"addon",disabled:e,$readOnly:o,children:"#"}),jsxRuntime.jsxs(InputContainer,{$readOnly:o,children:[jsxRuntime.jsx(FloorInput,{name:"floor",maxLength:3,value:h,ref:y,onFocus:E,onBlur:k,onChange:A,disabled:e,readOnly:o,type:"text",pattern:"[0-9A-Z]{2,3}","data-testid":"floor-input","aria-label":"floor-input",placeholder:"floor"!==m||o?L(l)[0]:""}),jsxRuntime.jsx(UnitNumberDivider,{$hide:0===h.length,children:"-"}),jsxRuntime.jsx(UnitInput,{name:"unit",maxLength:5,value:p,ref:v,onFocus:E,onBlur:k,onChange:A,onKeyDown:e=>{"Backspace"!==e.code&&"Backspace"!==e.key||"unit"===m&&0===p.length&&y.current.focus()},disabled:e,readOnly:o,type:"text",pattern:"[0-9A-Z]{2,5}","data-testid":"unit-input","aria-label":"unit-input",placeholder:"unit"!==m||o?L(l)[1]:""})]})]})},INVALID_VALUE="Invalid unit number",FormUnitNumberInput=({label:e,errorMessage:t,id:r="form-unit-number-input","data-error-testid":a,"data-testid":i,...n})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:n.disabled,children:jsxRuntime.jsx(UnitNumberInput,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),Form={DateInput:FormDateInput,Input:FormInput,InputGroup:FormInputGroup,Label:FormLabel,MultiSelect:FormMultiSelect,Select:FormSelect,Textarea:FormTextarea,Timepicker:FormTimepicker,CustomField:FormCustomField,UnitNumberInput:FormUnitNumberInput},Container$3=styled__default.default.div`
+`,UnitNumberInput=({disabled:e,error:t,value:r,onChange:a,onBlur:i,onChangeRaw:n,onBlurRaw:s,readOnly:o,placeholder:l,...d})=>{const[h,c]=React.useState(""),[p,u]=React.useState(""),[m,f]=React.useState("none"),g=React.useRef(null),y=React.useRef(null),v=React.useRef(null),b=React.useRef(h),x=React.useRef(p),C=React.useRef(m),_=e=>{b.current=e,c(e)},S=e=>{x.current=e,u(e)},T=e=>{C.current=e,f(e)};React.useEffect((()=>(document.addEventListener("mousedown",$),g.current&&g.current.addEventListener("keydown",w),()=>{document.removeEventListener("mousedown",$),g.current&&g.current.removeEventListener("keydown",w)})),[m]),React.useEffect((()=>{"floor"===m&&3===h.length&&v.current&&v.current.focus()}),[h]),React.useEffect((()=>{P(r)}),[r]);const $=t=>{e||o||g&&g.current.contains(t.target)||"none"!==C.current&&(T("none"),I())},w=e=>{"unit"===e.target.name&&"Tab"===e.code&&(T("none"),I())},E=e=>{T(e.target.name),e.target.select()},k=e=>{const t=e.target.name,r=e.target.value;"floor"===t?_(R(r)):S(R(r))},A=e=>{const t=e.target.name,r=e.target.value.toLocaleUpperCase().replace(/[^0-9A-Za-z]/,"");"floor"===t?(_(r),M(r,t)):(S(r),M(r,t))},R=e=>/^[0-9]$/.test(e)?StringHelper.padValue(e,!0):e.toLocaleUpperCase(),P=e=>{if(void 0===e||""===e)_(""),S("");else{const t=e.split("-");if(0!==t.length){const e=t[0],r=t[1];_(R(e)),S(R(r))}}},M=(e,t)=>{if(a){const r={floor:h,unit:p};r[t]=e;const i=D(r);a(i)}if(n){const r=[..."floor"===t?[R(e)]:[h],..."unit"===t?[R(e)]:[p]];n(r)}},I=()=>{if(i){const e={floor:b.current,unit:x.current},t=D(e);i(t)}if(s){const e=[R(b.current),R(x.current)];s(e)}},D=e=>{const t=[e.floor,e.unit];return e.floor.length>0&&e.unit.length>0?t.join("-"):t.every((e=>""===e))?"":INVALID_VALUE},L=e=>{if(void 0===e||""===e)return["00","8888"];return e.split("-")};return jsxRuntime.jsxs(Container$4,{ref:g,onClick:()=>{"none"===m&&y.current&&y.current.focus()},disabled:e,$error:t,$readOnly:o,"data-testid":d["data-testid"],children:[jsxRuntime.jsx(AddOnContainer,{"data-testid":"addon",disabled:e,$readOnly:o,children:"#"}),jsxRuntime.jsxs(InputContainer,{$readOnly:o,children:[jsxRuntime.jsx(FloorInput,{name:"floor",maxLength:3,value:h,ref:y,onFocus:E,onBlur:k,onChange:A,disabled:e,readOnly:o,type:"text",pattern:"[0-9A-Z]{2,3}","data-testid":"floor-input","aria-label":"floor-input",placeholder:"floor"!==m||o?L(l)[0]:""}),jsxRuntime.jsx(UnitNumberDivider,{$hide:0===h.length,children:"-"}),jsxRuntime.jsx(UnitInput,{name:"unit",maxLength:5,value:p,ref:v,onFocus:E,onBlur:k,onChange:A,onKeyDown:e=>{"Backspace"!==e.code&&"Backspace"!==e.key||"unit"===m&&0===p.length&&y.current.focus()},disabled:e,readOnly:o,type:"text",pattern:"[0-9A-Z]{2,5}","data-testid":"unit-input","aria-label":"unit-input",placeholder:"unit"!==m||o?L(l)[1]:""})]})]})},INVALID_VALUE="Invalid unit number",FormUnitNumberInput=({label:e,errorMessage:t,id:r="form-unit-number-input","data-error-testid":a,"data-testid":i,...n})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:n.disabled,children:jsxRuntime.jsx(UnitNumberInput,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),Form={DateInput:FormDateInput,Input:FormInput,InputGroup:FormInputGroup,Label:FormLabel,MultiSelect:FormMultiSelect,Select:FormSelect,Textarea:FormTextarea,Timepicker:FormTimepicker,CustomField:FormCustomField,UnitNumberInput:FormUnitNumberInput},Container$3=styled__default.default.div`
     border-top: 1px solid ${Color.Neutral[5]};
     border-bottom: 1px solid ${Color.Neutral[5]};
 `,ItemTitleDefault=styled__default.default(exports.Text.H3)`
@@ -2714,18 +2714,22 @@ function _typeof(e){return _typeof="function"==typeof Symbol&&"symbol"==typeof S
     height: auto;
     align-self: center;
 `,ButtonContainer=styled__default.default.div`
-    display: flex;
-    align-items: center;
+    max-width: 30%;
 `,StyledButton=styled__default.default(Button.Small)`
     padding: 0.5rem;
+    height: auto;
     & > span {
-        ${TextStyleHelper.getTextStyle("XSmall","semibold")}
+        overflow-wrap: anywhere;
+        ${TextStyleHelper.getTextStyle("XSmall","semibold")};
     }
 `,Title=styled__default.default(exports.Text.H6)`
+    overflow-wrap: anywhere;
     ${MediaQuery.MaxWidth.mobileM} {
         ${TextStyleHelper.getTextStyle("XSmall","semibold")}
     }
-`,Description=styled__default.default(exports.Text.XSmall)``,RatingContainer=styled__default.default.div`
+`,Description=styled__default.default(exports.Text.XSmall)`
+    overflow-wrap: anywhere;
+`,RatingContainer=styled__default.default.div`
     margin-top: 0.25rem;
     display: flex;
     align-items: center;
@@ -2735,7 +2739,7 @@ function _typeof(e){return _typeof="function"==typeof Symbol&&"symbol"==typeof S
         width: 1.5rem;
         padding-right: 0.25rem;
     }
-`,APP_ICON="https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png",STAR_IMG="https://assets.life.gov.sg/react-design-system/img/star-rating/full-star.svg",HALF_STAR_IMG="https://assets.life.gov.sg/react-design-system/img/star-rating/half-star.svg",EMPTY_STAR_IMG="https://assets.life.gov.sg/react-design-system/img/star-rating/empty-star.svg",ID="smart-app-banner";function SmartAppBannerComponent(e,t){const{className:r,show:a,href:i,content:n,offset:s=0,icon:o=APP_ICON,animated:l=!1,onDismiss:d,onClick:h}=e,{title:c,message:p,buttonLabel:u,buttonAriaLabel:m,numberOfStars:f}=n,g=e=>{e.stopPropagation(),window.open(i,"_blank","noreferrer"),d(),h?.()};return jsxRuntime.jsx(jsxRuntime.Fragment,{children:a&&jsxRuntime.jsxs(SmartAppBannerContainer,{ref:t,$isAnimated:l,$offset:s,className:r,children:[jsxRuntime.jsx(DismissContainer,{onClick:d,id:`${ID}-dismiss`,"data-testid":`${ID}-dismiss-container`,children:jsxRuntime.jsx(DismissButton,{"aria-label":"Dismiss",children:jsxRuntime.jsx(CrossIcon,{type:"cross"})})}),jsxRuntime.jsxs(ProceedContainer,{onClick:g,id:`${ID}-proceed`,"data-testid":`${ID}-proceed-container`,children:[jsxRuntime.jsx(BannerIcon,{src:o,alt:"lifesg-app-icon"}),jsxRuntime.jsxs(TextContainer,{children:[jsxRuntime.jsx(Title,{children:c}),jsxRuntime.jsx(Description,{children:p}),(()=>{if(isNaN(f)||f<0)return;const e=[],t=f-Math.floor(f)>=.4;for(let t=0;t<Math.floor(f);t++)e.push(jsxRuntime.jsx("img",{alt:"",src:STAR_IMG},`star${t}`));if(t&&e.push(jsxRuntime.jsx("img",{alt:"",src:HALF_STAR_IMG},"halfstar")),e.length<5){const t=5-e.length;for(let r=0;r<t;r++)e.push(jsxRuntime.jsx("img",{alt:"",src:EMPTY_STAR_IMG},`emptystar${r}`))}return jsxRuntime.jsx(RatingContainer,{children:e.slice(0,5)})})()]}),jsxRuntime.jsx(ButtonContainer,{children:jsxRuntime.jsx(StyledButton,{onClick:g,"aria-label":m,children:u})})]})]})})}const SmartAppBanner=React__default.default.forwardRef(SmartAppBannerComponent),baseListStyle=e=>`\n\tmargin-bottom: ${e||0}rem;\n`,BASE_MARGIN=3,StyledOrderedList=styled__default.default.ol`
+`,APP_ICON="https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png",STAR_IMG="https://assets.life.gov.sg/react-design-system/img/star-rating/full-star.svg",HALF_STAR_IMG="https://assets.life.gov.sg/react-design-system/img/star-rating/half-star.svg",EMPTY_STAR_IMG="https://assets.life.gov.sg/react-design-system/img/star-rating/empty-star.svg",ID="smart-app-banner";function SmartAppBannerComponent(e,t){const{className:r,show:a,href:i,content:n,offset:s=0,icon:o=APP_ICON,animated:l=!1,onDismiss:d,onClick:h}=e,{title:c,message:p,buttonLabel:u,buttonAriaLabel:m,numberOfStars:f}=n,g=e=>{e.stopPropagation(),window.open(i,"_blank","noreferrer"),h?.()};return jsxRuntime.jsx(jsxRuntime.Fragment,{children:a&&jsxRuntime.jsxs(SmartAppBannerContainer,{ref:t,$isAnimated:l,$offset:s,className:r,children:[jsxRuntime.jsx(DismissContainer,{onClick:d,id:`${ID}-dismiss`,"data-testid":`${ID}-dismiss-container`,children:jsxRuntime.jsx(DismissButton,{"aria-label":"Dismiss",children:jsxRuntime.jsx(CrossIcon,{type:"cross"})})}),jsxRuntime.jsxs(ProceedContainer,{onClick:g,id:`${ID}-proceed`,"data-testid":`${ID}-proceed-container`,children:[jsxRuntime.jsx(BannerIcon,{src:o,alt:"lifesg-app-icon"}),jsxRuntime.jsxs(TextContainer,{children:[jsxRuntime.jsx(Title,{children:c}),jsxRuntime.jsx(Description,{children:p}),(()=>{if(isNaN(f)||f<0)return;const e=[],t=f-Math.floor(f)>=.4;for(let t=0;t<Math.floor(f);t++)e.push(jsxRuntime.jsx("img",{alt:"",src:STAR_IMG},`star${t}`));if(t&&e.push(jsxRuntime.jsx("img",{alt:"",src:HALF_STAR_IMG},"halfstar")),e.length<5){const t=5-e.length;for(let r=0;r<t;r++)e.push(jsxRuntime.jsx("img",{alt:"",src:EMPTY_STAR_IMG},`emptystar${r}`))}return jsxRuntime.jsx(RatingContainer,{children:e.slice(0,5)})})()]}),jsxRuntime.jsx(ButtonContainer,{children:jsxRuntime.jsx(StyledButton,{onClick:g,"aria-label":m,children:u})})]})]})})}const SmartAppBanner=React__default.default.forwardRef(SmartAppBannerComponent),baseListStyle=e=>`\n\tmargin-bottom: ${e||0}rem;\n`,BASE_MARGIN=3,StyledOrderedList=styled__default.default.ol`
     ${e=>baseListStyle(e.bottomMargin)}
     margin-left: ${BASE_MARGIN}rem;