npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.1 → 4.0.0-alpha.2 - Mend

@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2348) hide show

package/shared/range-input-inner-container/range-input-inner-container.styles.d.ts CHANGED Viewed

@@ -1,18 +1,8 @@
-interface GeneralStyleProps {
-    $wrap?: boolean;
-}
-interface IndicatorStyleProps extends GeneralStyleProps {
-    $position: "start" | "end" | "none";
-    $error: boolean | undefined;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GeneralStyleProps>> & string;
-export declare const Break: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ElementContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ArrowRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const Indicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IndicatorStyleProps>> & string;
-export {};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperWrap: import("@linaria/core").LinariaClassName;
+export declare const elementContainer: import("@linaria/core").LinariaClassName;
+export declare const arrowRight: import("@linaria/core").LinariaClassName;
+export declare const lineBreak: import("@linaria/core").LinariaClassName;
+export declare const indicator: import("@linaria/core").LinariaClassName;
+export declare const indicatorError: import("@linaria/core").LinariaClassName;
+export declare const indicatorWrap: import("@linaria/core").LinariaClassName;

package/shared/range-input-inner-container/range-input-inner-container.styles.js CHANGED Viewed

@@ -1,65 +1,2 @@
-import{ArrowRightIcon as e}from"@lifesg/react-icons";import i,{css as n}from"styled-components";import{V3_Font as a,V3_Spacing as t,V3_Colour as r,V3_Motion as o}from"../../v3_theme/index.js";const s=i.div`
-    position: relative;
-    height: 100%;
-    display: flex;
-    flex: 1;
-    ${e=>{if(e.$wrap)return n`
-                /* Parent container need to provide space */
-                flex-wrap: wrap;
-                [data-id="range-container-elem1-container"],
-                [data-id="range-container-elem2-container"] {
-                    // 100% - Icon size - 2padding
-                    max-width: calc(
-                        100% - ${a.Spec["body-size-baseline"]} -
-                            ${t["spacing-16"]}
-                    );
-                    flex: unset;
-                }
-                [data-id="range-container-elem2-container"] {
-                    margin-top: ${t["spacing-8"]};
-                }
-            `}}
-`,c=i.div`
-    width: 100%; // Force next flex item to break to next line
-`,d=i.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-`,l=i(e)`
-    color: ${r.icon};
-    width: ${a.Spec["body-size-baseline"]};
-    height: ${a.Spec["body-size-baseline"]};
-    flex-shrink: 0;
-    margin: 0 ${t["spacing-8"]};
-    align-self: center;
-`,p=i.div`
-    position: absolute;
-    background: ${e=>e.$error?r["border-error-focus-strong"]:r["border-focus-strong"]};
-    height: 2px;
-    // half - half padding - half icon width
-    width: calc(
-        50% - ${t["spacing-8"]} -
-            (${a.Spec["body-size-baseline"]} / 2)
-    );
-    transition: left ${o["duration-350"]} ${o["ease-standard"]},
-        opacity ${o["duration-350"]} ${o["ease-standard"]};
-    left: 0;
-    bottom: 0;
-    ${e=>{switch(e.$position){case"start":return n`
-                    opacity: 1;
-                `;case"end":return n`
-                    left: calc(50% + ${t["spacing-16"]});
-                    opacity: 1;
-                `;case"none":return n`
-                    opacity: 0;
-                `}}}
-    ${e=>{if(e.$wrap)return n`
-                display: none;
-            `}}
-`;export{l as ArrowRight,c as Break,d as ElementContainer,p as Indicator,s as Wrapper};
+import"./range-input-inner-container.styles_1v61utg.css";const n="w1i0lopf",i="ws05n6a",e="e13aheiu",r="a1uc2vum",t="lk3rj3g",a="i1c4xw6e",s="i1gifs7v",c="i175ocg1";export{r as arrowRight,e as elementContainer,a as indicator,s as indicatorError,c as indicatorWrap,t as lineBreak,n as wrapper,i as wrapperWrap};
 //# sourceMappingURL=range-input-inner-container.styles.js.map

package/shared/range-input-inner-container/range-input-inner-container.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"range-input-inner-container.styles.js","sources":["../../../src/shared/range-input-inner-container/range-input-inner-container.styles.~~tsx~~"],"sourcesContent":["import { ~~ArrowRightIcon~~ } from \"@~~lifesg~~/~~react-icons~~\";\~~nimport styled, { css } from \"styled-components\";\~~n\nimport { ~~V3_Colour~~, ~~V3_Font~~, ~~V3_Motion~~, ~~V3_Spacing~~ } from \"../../~~v3_theme~~\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface GeneralStyleProps {\n $wrap?: boolean;\n}\n\ninterface IndicatorStyleProps extends GeneralStyleProps {\n $position: \"start\" \| \"end\" \| \"none\";\n $error: boolean \| undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const ~~Wrapper~~ = ~~styled.div<GeneralStyleProps>`\~~n position: relative;\n height: 100%;\n display: flex;\n flex: 1;\n\~~n ${(props)~~ => ~~{\n if~~ ~~(props.$wrap)~~ ~~{\n return~~ css`\n /* Parent container need to provide space */\n flex-wrap: wrap;\n\n [data-id=\"range-container-elem1-container\"],\n [data-id=\"range-container-elem2-container\"] {\n // 100% - Icon size - 2padding\n max-width: calc(\n 100% - ${~~V3_Font~~.Spec[\"body-size-baseline\"]} ~~-\n~~ ${~~V3_Spacing~~[\"spacing-16\"]}\n );\n flex: unset;\n }\n\n [data-id=\"range-container-elem2-container\"] {\n margin-top: ${~~V3_Spacing~~[\"spacing-8\"]};\n ~~}\n `;\n }\n~~ }}\n`;\n\nexport const ~~Break~~ = ~~styled.div~~`\n ~~width: 100%; // Force next flex item to break to next line\n`;\n\nexport const ElementContainer = styled.div`\n~~ display: flex;\n flex: 1;\n align-items: center;\n`;\n\nexport const ~~ArrowRight~~ = ~~styled(ArrowRightIcon)~~`\n color: ${~~V3_Colour~~[\"icon\"]};\n width: ${~~V3_Font~~.Spec[\"body-size-baseline\"]};\n height: ${~~V3_Font~~.Spec[\"body-size-baseline\"]};\n flex-shrink: 0;\n margin: 0 ${~~V3_Spacing~~[\"spacing-8\"]};\n align-self: center;\n`;\n\nexport const ~~Indicator~~ = ~~styled.div<IndicatorStyleProps>`\~~n position: absolute;\n background: ${~~(props) =>\n props.$error\n ? V3_Colour~~[\"border-~~error-~~focus-strong\"]~~\n : V3_Colour[\"border-focus-strong\"]~~};\n height: 2px;\n // half - half padding - half icon width\n width: calc(\n 50% - ${~~V3_Spacing~~[\"spacing-8\"]} ~~-\n~~ (${~~V3_Font~~.Spec[\"body-size-baseline\"]} / 2)\n );\n transition: left ${~~V3_Motion~~[\"duration-350\"]} ${~~V3_Motion~~[\"ease-standard\"]},\n opacity ${~~V3_Motion~~[\"duration-350\"]} ${~~V3_Motion~~[\"ease-standard\"]};\n left: 0;\n bottom: 0;\n\n ~~${(props)~~ ~~=> {~~\n ~~switch (props.$~~position~~) {\n case \~~"start\"~~:\n return~~ ~~css`\~~n opacity: 1;\n ~~`;\~~n ~~case~~ \"end\"~~:\n return~~ ~~css`\~~n left: calc(50% + ${~~V3_Spacing~~[\"spacing-16\"]});\n opacity: 1;\n `;\n ~~case~~ \~~"none\":\n return~~ css`\n ~~opacity~~: 0;\n `;\n }\~~n }}\n\n ${(props)~~ => ~~{\n if~~ ~~(props.$wrap)~~ ~~{\n return~~ css`\n display: none;\n `;\n ~~}\n }}\n`;\n~~"],"names":["~~Wrapper~~","~~styled~~","~~div~~","~~props~~","~~$wrap~~","~~css~~","~~V3_Font~~","~~Spec~~"~~,"V3_Spacing","Break","ElementContainer","ArrowRight","ArrowRightIcon","V3_Colour","Indicator","$error","V3_Motion","$position"~~],"mappings":"~~gMAqBO~~,MAAMA,~~EAAUC~~,~~EAAOC~~,~~GAAsB;;;;;;MAM7CC,IACC,GAAIA,EAAMC,MACN,OAAOC,CAAG;;;;;;;;iCAQWC,EAAQC,KAAK;8BAChBC,~~EAAW~~;;;;;;kCAMPA~~,~~EAAW;;aAGrC;EAIKC~~,~~EAAQR,EAAOC,GAAG;;EAIlBQ,EAAmBT,EAAOC,GAAG;;;;EAM7BS,EAAaV,EAAOW,EAAe;aACnCC,~~EAAgB~~;aAChBP~~,~~EAAQC~~,~~KAAK;cACZD,EAAQC,KAAK;;gBAEXC,EAAW;;EAIdM,EAAYb,EAAOC,GAAwB;;kBAErCC,GACXA,EAAMY,OACAF,~~EAAU,~~6BACVA~~,~~EAAU;;;;gBAIRL~~,~~EAAW;eACZF~~,~~EAAQC~~,~~KAAK;;uBAELS~~,~~EAAU~~,~~mBAAmBA~~,EAAU;kBAC5CA,EAAU,mBAAmBA,EAAU;;;;MAIlDb,IACC,OAAQA,EAAMc,WACV,IAAK,QACD,OAAOZ,CAAG;;kBAGd,IAAK,MACD,OAAOA,CAAG;uCACaG,EAAW;;kBAGtC,IAAK,OACD,OAAOH,CAAG;;;;MAMnBF,IACC,GAAIA,EAAMC,MACN,OAAOC,CAAG;;aAGd;"}
1	+ {"version":3,"file":"range-input-inner-container.styles.js","sources":["../../../src/shared/range-input-inner-container/range-input-inner-container.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Spacing } from \"../../theme\";\n\nexport const wrapper = css`\n position: relative;\n height: 100%;\n display: flex;\n flex: 1;\n`;\n\nexport const wrapperWrap = css`\n /* Parent container need to provide space */\n flex-wrap: wrap;\n\n [data-id=\"range-container-elem1-container\"],\n [data-id=\"range-container-elem2-container\"] {\n // 100% - Icon size - 2padding\n max-width: calc(\n 100% - ${Font.Spec[\"body-size-baseline\"]} - ${Spacing[\"spacing-16\"]}\n );\n flex: unset;\n }\n\n [data-id=\"range-container-elem2-container\"] {\n margin-top: ${Spacing[\"spacing-8\"]};\n }\n`;\n\nexport const elementContainer = css`\n display: flex;\n flex: 1;\n align-items: center;\n`;\n\nexport const arrowRight = css`\n color: ${Colour[\"icon\"]};\n width: ${Font.Spec[\"body-size-baseline\"]};\n height: ${Font.Spec[\"body-size-baseline\"]};\n flex-shrink: 0;\n margin: 0 ${Spacing[\"spacing-8\"]};\n align-self: center;\n`;\n\nexport const lineBreak = css`\n width: 100%; // Force next flex item to break to next line\n`;\n\nexport const indicator = css`\n position: absolute;\n background: ${Colour[\"border-focus-strong\"]};\n height: 2px;\n // half - half padding - half icon width\n width: calc(\n 50% - ${Spacing[\"spacing-8\"]} - (${Font.Spec[\"body-size-baseline\"]} / 2)\n );\n transition: left ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]},\n opacity ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n left: 0;\n bottom: 0;\n opacity: 0;\n\n &[data-position=\"start\"] {\n opacity: 1;\n }\n\n &[data-position=\"end\"] {\n left: calc(50% + ${Spacing[\"spacing-16\"]});\n opacity: 1;\n }\n`;\n\nexport const indicatorError = css`\n background: ${Colour[\"border-error-focus-strong\"]};\n`;\n\nexport const indicatorWrap = css`\n display: none;\n`;\n"],"names":["wrapper","wrapperWrap","elementContainer","arrowRight","lineBreak","indicator","indicatorError","indicatorWrap"],"mappings":"2GAIO,MAAMA,EAAO,WAOPC,EAAW,UAkBXC,EAAgB,WAMhBC,EAAU,WASVC,EAAS,UAITC,EAAS,WAwBTC,EAAc,WAIdC,EAAa"}

package/shared/range-input-inner-container/range-input-inner-container.styles_1v61utg.css ADDED Viewed

@@ -0,0 +1,12 @@
+.w1i0lopf{position:relative;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;}
+.ws05n6a{-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}.ws05n6a [data-id="range-container-elem1-container"],.ws05n6a [data-id="range-container-elem2-container"]{max-width:calc(
+            100% - var(--fds-font-body-size-baseline) - var(--fds-spacing-16)
+        );-webkit-flex:unset;-ms-flex:unset;flex:unset;}.ws05n6a [data-id="range-container-elem2-container"]{margin-top:var(--fds-spacing-8);}
+.e13aheiu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.a1uc2vum{color:var(--fds-colour-icon);width:var(--fds-font-body-size-baseline);height:var(--fds-font-body-size-baseline);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0 var(--fds-spacing-8);-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}
+.lk3rj3g{width:100%;}
+.i1c4xw6e{position:absolute;background:var(--fds-colour-border-focus-strong);height:2px;width:calc(
+        50% - var(--fds-spacing-8) - (var(--fds-font-body-size-baseline) / 2)
+    );-webkit-transition:left var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard),opacity var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:left var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard),opacity var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);left:0;bottom:0;opacity:0;}.i1c4xw6e[data-position="start"]{opacity:1;}.i1c4xw6e[data-position="end"]{left:calc(50% + var(--fds-spacing-16));opacity:1;}
+.i1gifs7v{background:var(--fds-colour-border-error-focus-strong);}
+.i175ocg1{display:none;}

package/shared/standalone-date-input/standalone-date-input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as n}from"react/jsx-runtime";import t from"../../external/dayjs/dayjs.min.js";import r from"../../external/dayjs/plugin/customParseFormat.js";import a,{useState as o,useRef as l,useEffect as u,useImperativeHandle as c}from"react";import"../../util/calendar-helper.js";import{DateInputHelper as i}from"../../util/date-input-helper.js";import{StringHelper as d}from"../../util/string-helper.js";import{useStateRef as s}from"../../util/use-state-ref.js";import{InputSection as p,InputContainer as m,DayInput as f,Divider as h,MonthInput as v,YearInput as g,Placeholder as y}from"./standalone-date-input.style.js";t.extend(r);const b=({disabled:r,readOnly:a,names:b,value:Y,focused:x,hoverValue:$,placeholder:D,label:M,onChange:j,onFocus:C,onBlur:k,hideInputKeyboard:w,inputLabels:B=["Date","Month","Year"]},F)=>{const I=w?"none":"numeric",[V,L,O]=s(""),[E,K,S]=s(""),[P,R,z]=s(""),[T,q]=o("none"),[A,G]=o(!1),H=l(null),J=l(null),N=l(null),Q=l(null),[U,W,X]=re($);u((()=>{var e;const[n="",t="",r=""]=re(Y);L(n),K(t),R(r),n||t||r||!H.current||!H.current.contains(document.activeElement)||null===(e=J.current)||void 0===e||e.focus()}),[Y]),u((()=>{var e;x||q("none"),x&&(G(!0),H.current&&!H.current.contains(document.activeElement)&&(null===(e=J.current)||void 0===e||e.focus()))}),[x]),c(F,(()=>({ref:H,resetPlaceholder(){G(!1)},resetInput(){const[e="",n="",t=""]=re(Y);L(e),K(n),R(t)},focusYearRef(){var e;null===(e=Q.current)||void 0===e||e.focus()}})),[L,K,R,Y]);const Z=e=>{var n;e.preventDefault(),null===(n=J.current)||void 0===n||n.focus()},_=e=>{e.target.select();const n=e.target.name;q(n)},ee=e=>{const[n,r,a]=b,o={[n]:O.current,[r]:S.current,[a]:z.current},l=e.target.name,u=o[l],c=l!==a?d.padValue(u,!0):u;switch(l){case n:o[n]=c,L(c);break;case r:o[r]=c,K(c)}const i=`${o[a]}-${o[r]}-${o[n]}`,s=t(i,"YYYY-MM-DD",!0).isValid(),p=!o[n]&&!o[r]&&!o[a];s&&u!==c&&j(i),H.current&&!H.current.contains(e.relatedTarget)&&(q("none"),null==k||k(p||s))},ne=e=>{var n,r;if($)return;const a=e.target.name,o=e.target.value.replace(/[^0-9]/g,""),l={day:V,month:E,year:P};switch(a){case b[0]:l.day=o,L(o),2===o.length&&(null===(n=N.current)||void 0===n||n.focus());break;case b[1]:l.month=o,K(o),2===o.length&&(null===(r=Q.current)||void 0===r||r.focus());break;case b[2]:l.year=o,R(o)}if(!l.day&&!l.month&&!l.year)return void j("");const u=`${l.year}-${l.month}-${l.day}`;t(u,"YYYY-MM-DD",!0).isValid()&&j(u)},te=e=>{var n,t;"Backspace"!==e.code&&"Backspace"!==e.key||(T===b[1]&&0===E.length&&(null===(n=J.current)||void 0===n||n.focus()),T===b[2]&&0===P.length&&(null===(t=N.current)||void 0===t||t.focus()))};function re(e){if(e){const n=i.sanitizeInput(e);if(!n)return[void 0,void 0,void 0];const r=t(n,"YYYY-MM-DD",!0);return[d.padValue(r.date().toString()),d.padValue((r.month()+1).toString()),r.year().toString()]}return[void 0,void 0,void 0]}return e(p,{role:"group","aria-label":M,onClick:()=>{var e;r||a||(G(!0),H.current&&!H.current.contains(document.activeElement)&&(null===(e=J.current)||void 0===e||e.focus()))},onFocus:e=>{r||(G(!0),x||null==C||C(e))},children:[e(m,{ref:H,$hover:!!$,children:[n(f,{ref:J,name:b[0],maxLength:2,value:null!=U?U:V,onFocus:_,onBlur:ee,onChange:ne,type:"text",inputMode:I,pattern:"[0-9]{2}","data-testid":`${b[0]}-input`,"aria-label":B[0],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:T!==b[0]||a?"DD":""}),n(h,{$inactive:0===V.length,children:"/"}),n(v,{ref:N,name:b[1],maxLength:2,value:null!=W?W:E,onFocus:_,onBlur:ee,onChange:ne,onKeyDown:te,type:"text",inputMode:I,pattern:"[0-9]{2}","data-testid":`${b[1]}-input`,"aria-label":B[1],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:T!==b[1]||a?"MM":""}),n(h,{$inactive:0===E.length,children:"/"}),n(g,{ref:Q,name:b[2],maxLength:4,value:null!=X?X:P,onFocus:_,onBlur:ee,onChange:ne,onKeyDown:te,type:"text",inputMode:I,pattern:"[0-9]{4}","data-testid":`${b[2]}-input`,"aria-label":B[2],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:T!==b[2]||a?"YYYY":""})]}),(()=>{if(!Y&&!a&&D)return n(y,{$hide:A,$disabled:r,onMouseDown:Z,children:D})})()]})},Y=a.forwardRef(b);export{b as Component,Y as StandaloneDateInput};
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import t from"clsx";import a from"../../external/dayjs/dayjs.min.js";import r from"../../external/dayjs/plugin/customParseFormat.js";import o,{useState as l,useRef as u,useEffect as c,useImperativeHandle as s}from"react";import"../../util/calendar-helper.js";import{DateInputHelper as i}from"../../util/date-input-helper.js";import"../../util/simple-id-generator.js";import{StringHelper as d}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{useStateRef as m}from"../../util/use-state-ref.js";import{inputSection as p,inputContainer as f,baseInput as h,baseInputHover as v,inputSizerBase as g,dayInputSizer as y,divider as Y,dividerInactive as b,dividerHover as x,monthInputSizer as D,yearInputSizer as M,placeholder as j,placeholderDisabled as N,placeholderHide as $}from"./standalone-date-input.styles.js";a.extend(r);const C=({disabled:r,readOnly:o,names:C,value:k,focused:w,hoverValue:B,placeholder:F,label:I,onChange:V,onFocus:L,onBlur:O,hideInputKeyboard:E,inputLabels:K=["Date","Month","Year"]},S)=>{const P=E?"none":"numeric",[R,z,T]=m(""),[q,A,G]=m(""),[H,J,Q]=m(""),[U,W]=l("none"),[X,Z]=l(!1),_=u(null),ee=u(null),ne=u(null),te=u(null),[ae,re,oe]=de(B);c((()=>{var e;const[n="",t="",a=""]=de(k);z(n),A(t),J(a),n||t||a||!_.current||!_.current.contains(document.activeElement)||null===(e=ee.current)||void 0===e||e.focus()}),[k]),c((()=>{var e;w||W("none"),w&&(Z(!0),_.current&&!_.current.contains(document.activeElement)&&(null===(e=ee.current)||void 0===e||e.focus()))}),[w]),s(S,(()=>({ref:_,resetPlaceholder(){Z(!1)},resetInput(){const[e="",n="",t=""]=de(k);z(e),A(n),J(t)},focusYearRef(){var e;null===(e=te.current)||void 0===e||e.focus()}})),[z,A,J,k]);const le=e=>{var n;e.preventDefault(),null===(n=ee.current)||void 0===n||n.focus()},ue=e=>{e.target.select();const n=e.target.name;W(n)},ce=e=>{const[n,t,r]=C,o={[n]:T.current,[t]:G.current,[r]:Q.current},l=e.target.name,u=o[l],c=l!==r?d.padValue(u,!0):u;switch(l){case n:o[n]=c,z(c);break;case t:o[t]=c,A(c)}const s=`${o[r]}-${o[t]}-${o[n]}`,i=a(s,"YYYY-MM-DD",!0).isValid(),m=!o[n]&&!o[t]&&!o[r];i&&u!==c&&V(s),_.current&&!_.current.contains(e.relatedTarget)&&(W("none"),null==O||O(m||i))},se=e=>{var n,t;if(B)return;const r=e.target.name,o=e.target.value.replace(/[^0-9]/g,""),l={day:R,month:q,year:H};switch(r){case C[0]:l.day=o,z(o),2===o.length&&(null===(n=ne.current)||void 0===n||n.focus());break;case C[1]:l.month=o,A(o),2===o.length&&(null===(t=te.current)||void 0===t||t.focus());break;case C[2]:l.year=o,J(o)}if(!l.day&&!l.month&&!l.year)return void V("");const u=`${l.year}-${l.month}-${l.day}`;a(u,"YYYY-MM-DD",!0).isValid()&&V(u)},ie=e=>{var n,t;"Backspace"!==e.code&&"Backspace"!==e.key||(U===C[1]&&0===q.length&&(null===(n=ee.current)||void 0===n||n.focus()),U===C[2]&&0===H.length&&(null===(t=ne.current)||void 0===t||t.focus()))};function de(e){if(e){const n=i.sanitizeInput(e);if(!n)return[void 0,void 0,void 0];const t=a(n,"YYYY-MM-DD",!0);return[d.padValue(t.date().toString()),d.padValue((t.month()+1).toString()),t.year().toString()]}return[void 0,void 0,void 0]}return e("div",{role:"group","aria-label":I,className:p,onClick:()=>{var e;r||o||(Z(!0),_.current&&!_.current.contains(document.activeElement)&&(null===(e=ee.current)||void 0===e||e.focus()))},onFocus:e=>{r||(Z(!0),w||null==L||L(e))},children:[e("div",{ref:_,className:f,children:[n("span",{className:t(g,y),children:n("input",{ref:ee,name:C[0],maxLength:2,value:null!=ae?ae:R,onFocus:ue,onBlur:ce,onChange:se,type:"text",inputMode:P,pattern:"[0-9]{2}","data-testid":`${C[0]}-input`,"aria-label":K[0],disabled:r,readOnly:o,tabIndex:o?-1:0,autoComplete:"off",placeholder:U!==C[0]||o?"DD":"",className:t(h,!!B&&v)})}),n("span",{className:t(Y,0===R.length&&b,!!B&&x),children:"/"}),n("span",{className:t(g,D),children:n("input",{ref:ne,name:C[1],maxLength:2,value:null!=re?re:q,onFocus:ue,onBlur:ce,onChange:se,onKeyDown:ie,type:"text",inputMode:P,pattern:"[0-9]{2}","data-testid":`${C[1]}-input`,"aria-label":K[1],disabled:r,readOnly:o,tabIndex:o?-1:0,autoComplete:"off",placeholder:U!==C[1]||o?"MM":"",className:t(h,!!B&&v)})}),n("span",{className:t(Y,0===q.length&&b,!!B&&x),children:"/"}),n("span",{className:t(g,M),children:n("input",{ref:te,name:C[2],maxLength:4,value:null!=oe?oe:H,onFocus:ue,onBlur:ce,onChange:se,onKeyDown:ie,type:"text",inputMode:P,pattern:"[0-9]{4}","data-testid":`${C[2]}-input`,"aria-label":K[2],disabled:r,readOnly:o,tabIndex:o?-1:0,autoComplete:"off",placeholder:U!==C[2]||o?"YYYY":"",className:t(h,!!B&&v)})})]}),(()=>{if(!k&&!o&&F)return n("div",{className:t(j,r&&N,X&&$),onMouseDown:le,children:F})})()]})},k=o.forwardRef(C);export{C as Component,k as StandaloneDateInput};
 //# sourceMappingURL=standalone-date-input.js.map

package/shared/standalone-date-input/standalone-date-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"standalone-date-input.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport {\n DayInput,\n Divider,\n InputContainer,\n InputSection,\n MonthInput,\n Placeholder,\n YearInput,\n} from \"./standalone-date-input.style\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n \| StartInputNames[number]\n \| EndInputNames[number]\n \| \"none\";\n\ninterface Props {\n disabled?: boolean \| undefined;\n readOnly?: boolean \| undefined;\n hideInputKeyboard?: boolean \| undefined;\n names: StartInputNames \| EndInputNames;\n value: string \| undefined;\n hoverValue?: string \| undefined;\n focused: boolean;\n placeholder?: string \| undefined;\n label?: string \| undefined;\n inputLabels?: string[] \| undefined;\n onChange: (value: string) => void;\n onFocus?: ((event: React.FocusEvent) => void) \| undefined;\n onBlur?: ((valid: boolean) => void) \| undefined;\n}\n\nexport interface StandaloneDateInputRef {\n ref: React.RefObject<HTMLDivElement>;\n resetPlaceholder: () => void;\n resetInput: () => void;\n focusYearRef: () => void;\n}\n\nexport const Component = (\n {\n disabled,\n readOnly,\n names,\n value,\n focused,\n hoverValue,\n placeholder,\n label,\n onChange,\n onFocus,\n onBlur,\n hideInputKeyboard,\n inputLabels = [\"Date\", \"Month\", \"Year\"],\n }: Props,\n ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const dayInputRef = useRef<HTMLInputElement>(null);\n const monthInputRef = useRef<HTMLInputElement>(null);\n const yearInputRef = useRef<HTMLInputElement>(null);\n\n const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n parseToInputValues(hoverValue);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n setDayValue(day);\n setMonthValue(month);\n setYearValue(year);\n\n // re-focus on day input if all 3 inputs get cleared while typing\n if (\n !day &&\n !month &&\n !year &&\n nodeRef.current &&\n nodeRef.current.contains(document.activeElement)\n )\n dayInputRef.current?.focus();\n }, [value]);\n\n useEffect(() => {\n // clear internal focus state\n if (!focused) {\n setCurrentFocus(\"none\");\n }\n\n // ensure at least one input is focused\n if (focused) {\n setHidePlaceholder(true);\n\n if (\n nodeRef.current &&\n !nodeRef.current.contains(document.activeElement)\n ) {\n dayInputRef.current?.focus();\n }\n }\n }, [focused]);\n\n useImperativeHandle(\n ref,\n () => ({\n ref: nodeRef,\n resetPlaceholder() {\n setHidePlaceholder(false);\n },\n resetInput() {\n const [day = \"\", month = \"\", year = \"\"] =\n parseToInputValues(value);\n setDayValue(day);\n setMonthValue(month);\n setYearValue(year);\n },\n focusYearRef() {\n yearInputRef.current?.focus();\n },\n }),\n [setDayValue, setMonthValue, setYearValue, value]\n );\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSectionClick = () => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n setHidePlaceholder(true);\n\n if (\n nodeRef.current &&\n !nodeRef.current.contains(document.activeElement)\n ) {\n dayInputRef.current?.focus();\n }\n };\n\n const handleSectionFocus = (event: React.FocusEvent) => {\n if (disabled) {\n return;\n }\n\n setHidePlaceholder(true);\n\n if (!focused) {\n onFocus?.(event);\n }\n };\n\n const handlePlaceholderClick = (event: React.MouseEvent) => {\n event.preventDefault();\n dayInputRef.current?.focus();\n };\n\n const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n event.target.select();\n const targetName = event.target.name as FieldType;\n setCurrentFocus(targetName);\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const [dayName, monthName, yearName] = names;\n const date = {\n [dayName]: dayValueRef.current,\n [monthName]: monthValueRef.current,\n [yearName]: yearValueRef.current,\n };\n\n const targetName = event.target.name as FieldType;\n const targetValue = date[targetName];\n\n // pad single digits for day and month inputs\n\n const paddedValue =\n targetName !== yearName\n ? StringHelper.padValue(targetValue, true)\n : targetValue;\n\n switch (targetName) {\n case dayName:\n date[dayName] = paddedValue;\n setDayValue(paddedValue);\n break;\n case monthName:\n date[monthName] = paddedValue;\n setMonthValue(paddedValue);\n break;\n case yearName:\n default:\n break;\n }\n\n const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n const isPadded = targetValue !== paddedValue;\n\n if (isValid && isPadded) {\n onChange(value);\n }\n\n if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n // entire field was blurred\n setCurrentFocus(\"none\");\n onBlur?.(isEmpty \|\| isValid);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (hoverValue) {\n // do not modify inputs when selecting date from another source\n return;\n }\n\n const targetName = event.target.name as FieldType;\n const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n const date = {\n day: dayValue,\n month: monthValue,\n year: yearValue,\n };\n\n switch (targetName) {\n case names[0]:\n date.day = targetValue;\n setDayValue(targetValue);\n // auto focus the next input once filled in\n if (targetValue.length === 2) {\n monthInputRef.current?.focus();\n }\n break;\n case names[1]:\n date.month = targetValue;\n setMonthValue(targetValue);\n // auto focus the next input once filled in\n if (targetValue.length === 2) {\n yearInputRef.current?.focus();\n }\n break;\n case names[2]:\n date.year = targetValue;\n setYearValue(targetValue);\n break;\n default:\n break;\n }\n\n if (!date.day && !date.month && !date.year) {\n onChange(\"\");\n return;\n }\n\n const value = `${date.year}-${date.month}-${date.day}`;\n const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n if (isValid) {\n onChange(value);\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n /*\n Allow going to the field before if user presses Backspace\n * on an empty field\n */\n if (event.code === \"Backspace\" \|\| event.key === \"Backspace\") {\n if (currentFocus === names[1] && monthValue.length === 0) {\n dayInputRef.current?.focus();\n }\n\n if (currentFocus === names[2] && yearValue.length === 0) {\n monthInputRef.current?.focus();\n }\n }\n };\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n function parseToInputValues(stringVal: string \| undefined) {\n if (!stringVal) {\n return [undefined, undefined, undefined];\n } else {\n const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n if (!sanitized) {\n return [undefined, undefined, undefined];\n }\n\n const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n return [\n StringHelper.padValue(day.date().toString()),\n StringHelper.padValue((day.month() + 1).toString()),\n day.year().toString(),\n ];\n }\n }\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderPlaceholder = () => {\n if (value \|\| readOnly \|\| !placeholder) {\n return;\n }\n\n return (\n <Placeholder\n $hide={hidePlaceholder}\n $disabled={disabled}\n onMouseDown={handlePlaceholderClick}\n >\n {placeholder}\n </Placeholder>\n );\n };\n\n return (\n <InputSection\n role=\"group\"\n aria-label={label}\n onClick={handleSectionClick}\n onFocus={handleSectionFocus}\n >\n <InputContainer ref={nodeRef} $hover={!!hoverValue}>\n <DayInput\n ref={dayInputRef}\n name={names[0]}\n maxLength={2}\n value={hoverDayValue ?? dayValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{2}\"\n data-testid={`${names[0]}-input`}\n aria-label={inputLabels[0]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n }\n />\n <Divider $inactive={dayValue.length === 0}>/</Divider>\n <MonthInput\n ref={monthInputRef}\n name={names[1]}\n maxLength={2}\n value={hoverMonthValue ?? monthValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{2}\"\n data-testid={`${names[1]}-input`}\n aria-label={inputLabels[1]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n }\n />\n <Divider $inactive={monthValue.length === 0}>/</Divider>\n <YearInput\n ref={yearInputRef}\n name={names[2]}\n maxLength={4}\n value={hoverYearValue ?? yearValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{4}\"\n data-testid={`${names[2]}-input`}\n aria-label={inputLabels[2]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n }\n />\n </InputContainer>\n {renderPlaceholder()}\n </InputSection>\n );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","InputSection","role","onClick","children","InputContainer","$hover","_jsx","DayInput","maxLength","type","pattern","tabIndex","autoComplete","Divider","$inactive","MonthInput","onKeyDown","YearInput","Placeholder","$hide","$disabled","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}
1	+ {"version":3,"file":"standalone-date-input.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport * as styles from \"./standalone-date-input.styles\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n \| StartInputNames[number]\n \| EndInputNames[number]\n \| \"none\";\n\ninterface Props {\n disabled?: boolean \| undefined;\n readOnly?: boolean \| undefined;\n hideInputKeyboard?: boolean \| undefined;\n names: StartInputNames \| EndInputNames;\n value: string \| undefined;\n hoverValue?: string \| undefined;\n focused: boolean;\n placeholder?: string \| undefined;\n label?: string \| undefined;\n inputLabels?: string[] \| undefined;\n onChange: (value: string) => void;\n onFocus?: ((event: React.FocusEvent) => void) \| undefined;\n onBlur?: ((valid: boolean) => void) \| undefined;\n}\n\nexport interface StandaloneDateInputRef {\n ref: React.RefObject<HTMLDivElement>;\n resetPlaceholder: () => void;\n resetInput: () => void;\n focusYearRef: () => void;\n}\n\nexport const Component = (\n {\n disabled,\n readOnly,\n names,\n value,\n focused,\n hoverValue,\n placeholder,\n label,\n onChange,\n onFocus,\n onBlur,\n hideInputKeyboard,\n inputLabels = [\"Date\", \"Month\", \"Year\"],\n }: Props,\n ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const dayInputRef = useRef<HTMLInputElement>(null);\n const monthInputRef = useRef<HTMLInputElement>(null);\n const yearInputRef = useRef<HTMLInputElement>(null);\n\n const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n parseToInputValues(hoverValue);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n setDayValue(day);\n setMonthValue(month);\n setYearValue(year);\n\n // re-focus on day input if all 3 inputs get cleared while typing\n if (\n !day &&\n !month &&\n !year &&\n nodeRef.current &&\n nodeRef.current.contains(document.activeElement)\n )\n dayInputRef.current?.focus();\n }, [value]);\n\n useEffect(() => {\n // clear internal focus state\n if (!focused) {\n setCurrentFocus(\"none\");\n }\n\n // ensure at least one input is focused\n if (focused) {\n setHidePlaceholder(true);\n\n if (\n nodeRef.current &&\n !nodeRef.current.contains(document.activeElement)\n ) {\n dayInputRef.current?.focus();\n }\n }\n }, [focused]);\n\n useImperativeHandle(\n ref,\n () => ({\n ref: nodeRef,\n resetPlaceholder() {\n setHidePlaceholder(false);\n },\n resetInput() {\n const [day = \"\", month = \"\", year = \"\"] =\n parseToInputValues(value);\n setDayValue(day);\n setMonthValue(month);\n setYearValue(year);\n },\n focusYearRef() {\n yearInputRef.current?.focus();\n },\n }),\n [setDayValue, setMonthValue, setYearValue, value]\n );\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSectionClick = () => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n setHidePlaceholder(true);\n\n if (\n nodeRef.current &&\n !nodeRef.current.contains(document.activeElement)\n ) {\n dayInputRef.current?.focus();\n }\n };\n\n const handleSectionFocus = (event: React.FocusEvent) => {\n if (disabled) {\n return;\n }\n\n setHidePlaceholder(true);\n\n if (!focused) {\n onFocus?.(event);\n }\n };\n\n const handlePlaceholderClick = (event: React.MouseEvent) => {\n event.preventDefault();\n dayInputRef.current?.focus();\n };\n\n const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n event.target.select();\n const targetName = event.target.name as FieldType;\n setCurrentFocus(targetName);\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const [dayName, monthName, yearName] = names;\n const date = {\n [dayName]: dayValueRef.current,\n [monthName]: monthValueRef.current,\n [yearName]: yearValueRef.current,\n };\n\n const targetName = event.target.name as FieldType;\n const targetValue = date[targetName];\n\n // pad single digits for day and month inputs\n\n const paddedValue =\n targetName !== yearName\n ? StringHelper.padValue(targetValue, true)\n : targetValue;\n\n switch (targetName) {\n case dayName:\n date[dayName] = paddedValue;\n setDayValue(paddedValue);\n break;\n case monthName:\n date[monthName] = paddedValue;\n setMonthValue(paddedValue);\n break;\n case yearName:\n default:\n break;\n }\n\n const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n const isPadded = targetValue !== paddedValue;\n\n if (isValid && isPadded) {\n onChange(value);\n }\n\n if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n // entire field was blurred\n setCurrentFocus(\"none\");\n onBlur?.(isEmpty \|\| isValid);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (hoverValue) {\n // do not modify inputs when selecting date from another source\n return;\n }\n\n const targetName = event.target.name as FieldType;\n const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n const date = {\n day: dayValue,\n month: monthValue,\n year: yearValue,\n };\n\n switch (targetName) {\n case names[0]:\n date.day = targetValue;\n setDayValue(targetValue);\n // auto focus the next input once filled in\n if (targetValue.length === 2) {\n monthInputRef.current?.focus();\n }\n break;\n case names[1]:\n date.month = targetValue;\n setMonthValue(targetValue);\n // auto focus the next input once filled in\n if (targetValue.length === 2) {\n yearInputRef.current?.focus();\n }\n break;\n case names[2]:\n date.year = targetValue;\n setYearValue(targetValue);\n break;\n default:\n break;\n }\n\n if (!date.day && !date.month && !date.year) {\n onChange(\"\");\n return;\n }\n\n const value = `${date.year}-${date.month}-${date.day}`;\n const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n if (isValid) {\n onChange(value);\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n /*\n Allow going to the field before if user presses Backspace\n * on an empty field\n */\n if (event.code === \"Backspace\" \|\| event.key === \"Backspace\") {\n if (currentFocus === names[1] && monthValue.length === 0) {\n dayInputRef.current?.focus();\n }\n\n if (currentFocus === names[2] && yearValue.length === 0) {\n monthInputRef.current?.focus();\n }\n }\n };\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n function parseToInputValues(stringVal: string \| undefined) {\n if (!stringVal) {\n return [undefined, undefined, undefined];\n } else {\n const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n if (!sanitized) {\n return [undefined, undefined, undefined];\n }\n\n const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n return [\n StringHelper.padValue(day.date().toString()),\n StringHelper.padValue((day.month() + 1).toString()),\n day.year().toString(),\n ];\n }\n }\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderPlaceholder = () => {\n if (value \|\| readOnly \|\| !placeholder) {\n return;\n }\n\n return (\n <div\n className={clsx(\n styles.placeholder,\n disabled && styles.placeholderDisabled,\n hidePlaceholder && styles.placeholderHide\n )}\n onMouseDown={handlePlaceholderClick}\n >\n {placeholder}\n </div>\n );\n };\n\n return (\n <div\n role=\"group\"\n aria-label={label}\n className={styles.inputSection}\n onClick={handleSectionClick}\n onFocus={handleSectionFocus}\n >\n <div ref={nodeRef} className={styles.inputContainer}>\n <span\n className={clsx(\n styles.inputSizerBase,\n styles.dayInputSizer\n )}\n >\n <input\n ref={dayInputRef}\n name={names[0]}\n maxLength={2}\n value={hoverDayValue ?? dayValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{2}\"\n data-testid={`${names[0]}-input`}\n aria-label={inputLabels[0]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n }\n className={clsx(\n styles.baseInput,\n !!hoverValue && styles.baseInputHover\n )}\n />\n </span>\n <span\n className={clsx(\n styles.divider,\n dayValue.length === 0 && styles.dividerInactive,\n !!hoverValue && styles.dividerHover\n )}\n >\n /\n </span>\n <span\n className={clsx(\n styles.inputSizerBase,\n styles.monthInputSizer\n )}\n >\n <input\n ref={monthInputRef}\n name={names[1]}\n maxLength={2}\n value={hoverMonthValue ?? monthValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{2}\"\n data-testid={`${names[1]}-input`}\n aria-label={inputLabels[1]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n }\n className={clsx(\n styles.baseInput,\n !!hoverValue && styles.baseInputHover\n )}\n />\n </span>\n <span\n className={clsx(\n styles.divider,\n monthValue.length === 0 && styles.dividerInactive,\n !!hoverValue && styles.dividerHover\n )}\n >\n /\n </span>\n <span\n className={clsx(\n styles.inputSizerBase,\n styles.yearInputSizer\n )}\n >\n <input\n ref={yearInputRef}\n name={names[2]}\n maxLength={4}\n value={hoverYearValue ?? yearValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{4}\"\n data-testid={`${names[2]}-input`}\n aria-label={inputLabels[2]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n }\n className={clsx(\n styles.baseInput,\n !!hoverValue && styles.baseInputHover\n )}\n />\n </span>\n </div>\n {renderPlaceholder()}\n </div>\n );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","role","className","styles.inputSection","onClick","children","styles.inputContainer","_jsx","clsx","styles.inputSizerBase","styles.dayInputSizer","maxLength","type","pattern","tabIndex","autoComplete","styles.baseInput","styles.baseInputHover","styles.divider","styles.dividerInactive","styles.dividerHover","styles.monthInputSizer","onKeyDown","styles.yearInputSizer","styles.placeholder","styles.placeholderDisabled","styles.placeholderHide","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}

package/shared/standalone-date-input/standalone-date-input.styles.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+export declare const inputSection: import("@linaria/core").LinariaClassName;
+export declare const baseInput: import("@linaria/core").LinariaClassName;
+export declare const baseInputHover: import("@linaria/core").LinariaClassName;
+export declare const divider: import("@linaria/core").LinariaClassName;
+export declare const dividerInactive: import("@linaria/core").LinariaClassName;
+export declare const dividerHover: import("@linaria/core").LinariaClassName;
+export declare const inputContainer: import("@linaria/core").LinariaClassName;
+export declare const inputSizerBase: import("@linaria/core").LinariaClassName;
+export declare const dayInputSizer: import("@linaria/core").LinariaClassName;
+export declare const monthInputSizer: import("@linaria/core").LinariaClassName;
+export declare const yearInputSizer: import("@linaria/core").LinariaClassName;
+export declare const placeholder: import("@linaria/core").LinariaClassName;
+export declare const placeholderDisabled: import("@linaria/core").LinariaClassName;
+export declare const placeholderHide: import("@linaria/core").LinariaClassName;

package/shared/standalone-date-input/standalone-date-input.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./standalone-date-input.styles_1mqophx.css";const t="i48x656",d="b11lxf0g",n="b1owk99f",p="d1hrb2q6",o="d1ednuur",s="d12gn07d",a="iay8f6w",e="i1tizbfo",i="d8v7mt3",b="m1nfq8ts",f="y1kizbwh",r="pzrktuq",u="p1jcopfd",c="p10ypbkc";export{d as baseInput,n as baseInputHover,i as dayInputSizer,p as divider,s as dividerHover,o as dividerInactive,a as inputContainer,t as inputSection,e as inputSizerBase,b as monthInputSizer,r as placeholder,u as placeholderDisabled,c as placeholderHide,f as yearInputSizer};
2	+ //# sourceMappingURL=standalone-date-input.styles.js.map

package/shared/standalone-date-input/standalone-date-input.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"standalone-date-input.styles.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSection = css`\n display: flex;\n align-items: center;\n position: relative;\n\n flex: 1;\n`;\n\nexport const baseInput = css`\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n display: block;\n background: transparent;\n border: none;\n outline: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n text-align: center;\n position: absolute;\n inset: 0;\n\n &:disabled {\n color: ${Colour[\"text-subtler\"]};\n\n &:hover {\n cursor: not-allowed;\n }\n }\n\n &::placeholder,\n &::-webkit-input-placeholder {\n color: ${Colour[\"text-subtler\"]};\n }\n\n // Chrome, Safari, Edge, Opera\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n // Safari (remove top shadow)\n --webkit-appearance: none;\n\n // Firefox\n --moz-appearance: textfield;\n`;\n\nexport const baseInputHover = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const divider = css`\n ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const dividerInactive = css`\n color: ${Colour[\"text\"]};\n`;\n\nexport const dividerHover = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const inputContainer = css`\n display: flex;\n align-items: center;\n gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const inputSizerBase = css`\n display: inline-block;\n position: relative;\n\n &::after {\n ${Font[\"body-baseline-regular\"]}\n visibility: hidden;\n pointer-events: none;\n white-space: pre;\n }\n`;\n\nexport const dayInputSizer = css`\n &::after {\n content: \"DD\";\n }\n`;\n\nexport const monthInputSizer = css`\n &::after {\n content: \"MM\";\n }\n`;\n\nexport const yearInputSizer = css`\n &::after {\n content: \"YYYY\";\n }\n`;\n\nexport const placeholder = css`\n ${Font[\"body-baseline-regular\"]}\n background-color: ${Colour[\"bg\"]};\n color: ${Colour[\"text-subtler\"]};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n`;\n\nexport const placeholderDisabled = css`\n background-color: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n`;\n\nexport const placeholderHide = css`\n display: none;\n`;\n"],"names":["inputSection","baseInput","baseInputHover","divider","dividerInactive","dividerHover","inputContainer","inputSizerBase","dayInputSizer","monthInputSizer","yearInputSizer","placeholder","placeholderDisabled","placeholderHide"],"mappings":"+FAOO,MAAMA,EAAY,UAQZC,EAAS,WAyCTC,EAAc,WAIdC,EAAO,WAIPC,EAAe,WAIfC,EAAY,WAIZC,EAAc,UAMdC,EAAc,WAYdC,EAAa,UAMbC,EAAe,WAMfC,EAAc,WAMdC,EAAW,UAWXC,EAAmB,WAKnBC,EAAe"}

package/shared/standalone-date-input/standalone-date-input.styles_1mqophx.css ADDED Viewed

@@ -0,0 +1,14 @@
+.i48x656{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;}
+.b11lxf0g{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);display:block;background:transparent;border:none;outline:none;box-shadow:none;padding:0;margin:0;text-align:center;position:absolute;inset:0;--webkit-appearance:none;--moz-appearance:textfield;}.b11lxf0g:disabled{color:var(--fds-colour-text-subtler);}.b11lxf0g:disabled:hover{cursor:not-allowed;}.b11lxf0g::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::-webkit-outer-spin-button,.b11lxf0g::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}.b11lxf0g::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::-moz-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::placeholder{color:var(--fds-colour-text-subtler);}
+.b1owk99f{color:var(--fds-colour-text-subtler);}
+.d1hrb2q6{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.d1ednuur{color:var(--fds-colour-text);}
+.d12gn07d{color:var(--fds-colour-text-subtler);}
+.iay8f6w{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-4);}
+.i1tizbfo{display:inline-block;position:relative;}.i1tizbfo::after{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);visibility:hidden;pointer-events:none;white-space:pre;}
+.d8v7mt3::after{content:"DD";}
+.m1nfq8ts::after{content:"MM";}
+.y1kizbwh::after{content:"YYYY";}
+.pzrktuq{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);background-color:var(--fds-colour-bg);color:var(--fds-colour-text-subtler);position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;}
+.p1jcopfd{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;}
+.p10ypbkc{display:none;}

package/shared/styles/index.d.ts CHANGED Viewed

@@ -1 +1,18 @@
-export declare const lineClampCss: (lines: number) => import("styled-components").RuleSet<object>;
+/**
+ * Generates CSS for limiting text to a specified number of lines after which it
+ * is truncated with an ellipsis.
+ */
+export declare const lineClampCss: (lines: number) => string;
+/**
+ * Generates CSS for limiting text to a number of lines (specified via a CSS
+ * variable) after which it is truncated with an ellipsis.
+ *
+ * @example
+ * ```
+ * css`
+ *   ${lineClampDynamicCss("--my-variable")}
+ *   --my-variable: 3;
+ * `
+ * ```
+ */
+export declare const lineClampDynamicCss: (variableName: string) => string;

package/shared/styles/index.js CHANGED Viewed

@@ -1,7 +1,2 @@
-import{css as e}from"styled-components";const o=o=>e`
-    display: -webkit-box;
-    -webkit-line-clamp: ${o};
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-`;export{o as lineClampCss};
+const e=e=>`\n    display: -webkit-box;\n    -webkit-line-clamp: ${e};\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n`;export{e as lineClampCss};
 //# sourceMappingURL=index.js.map

package/shared/styles/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/shared/styles/index.ts"],"sourcesContent":["~~import~~ { ~~css~~ } ~~from~~ \"~~styled~~-~~components~~\";\n\nexport const ~~lineClampCss~~ = (~~lines~~: ~~number~~) => ~~css~~`\n display: -webkit-box;\n -webkit-line-clamp: ${~~lines~~};\n -webkit-box-orient: vertical;\n overflow: hidden;\n`;\n"],"names":["lineClampCss","lines"~~,"css"~~],"mappings":"~~wCAEO~~,~~MAAMA,~~EAAgBC,~~GAAkBC~~,~~CAAG;;0BAExBD;;;~~"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/shared/styles/index.ts"],"sourcesContent":["/*\n Generates CSS for limiting text to a specified number of lines after which it\n * is truncated with an ellipsis.\n /\nexport const lineClampCss = (lines: number) => `\n display: -webkit-box;\n -webkit-line-clamp: ${lines};\n -webkit-box-orient: vertical;\n overflow: hidden;\n`;\n\n/\n Generates CSS for limiting text to a number of lines (specified via a CSS\n * variable) after which it is truncated with an ellipsis.\n \n @example\n * ```\n * css`\n * ${lineClampDynamicCss(\"--my-variable\")}\n * --my-variable: 3;\n * `\n * ```\n /\nexport const lineClampDynamicCss = (variableName: string) => `\n / reset variable to prevent leaking to child components */\n ${variableName}: initial;\n display: -webkit-box;\n -webkit-line-clamp: var(${variableName});\n -webkit-box-orient: vertical;\n overflow: hidden;\n`;\n"],"names":["lineClampCss","lines"],"mappings":"MAIaA,EAAgBC,GAAkB,wDAErBA"}

package/shared/timepicker-dropdown/timepicker-dropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ChevronDownIcon as n}from"@lifesg/react-icons/chevron-down";import{ChevronUpIcon as r}from"@lifesg/react-icons/chevron-up";import{useState as a,useRef as i,useEffect as o,useCallback as c}from"react";import{StringHelper as l}from"../../util/string-helper.js";import{TimeHelper as d,EPeriod as u}from"../../util/time-helper.js";import{inertValue as s}from"../accessibility/index.js";import{StyledDiv as m,Container as h,InputSection as p,HourMinuteSection as g,DividerLabel as b,ControlSection as M,ControlButton as U,InputContainer as k,SwitchButton as f,TimeInputBox as v,TimeInput as D,TimePeriodSection as w,TimePeriodToggle as N}from"./timepicker-dropdown.styles.js";var H,T,y;!function(e){e.HOUR_UP="hour-up",e.HOUR_DOWN="hour-down",e.MINUTE_UP="minute-up",e.MINUTE_DOWN="minute-down"}(H||(H={})),function(e){e.HOUR="hour",e.MINUTE="minute"}(T||(T={})),function(e){e.AM="am",e.PM="pm"}(y||(y={}));const O=({id:O,value:I,show:E,format:C,onChange:P,onCancel:_})=>{const x=d.getTimeValues(C,I),[A,R]=a(x.hour),[L,W]=a(x.minute),[j,$]=a(x.period),B=i(null),F=i(null);o((()=>{if(E&&B.current&&B.current.focus({preventScroll:!0}),E){const{hour:e,minute:t,period:n}=d.getTimeValues(C,I);R(e),W(t),$(n)}}),[E,I,C]),o((()=>{const e=B.current,t=F.current;return e&&e.addEventListener("keydown",V),t&&t.addEventListener("keydown",V),()=>{e&&e.removeEventListener("keydown",V),t&&t.removeEventListener("keydown",V)}}),[]);const V=e=>{["Digit0","Digit1","Digit2","Digit3","Digit4","Digit5","Digit6","Digit7","Digit8","Digit9","Tab","Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.code)||["Backspace","0","1","2","3","4","5","6","7","8","9"].includes(e.key)||e.preventDefault()},S=c((e=>{switch(e.currentTarget.name){case H.MINUTE_UP:W(d.updateMinutes(L,"add"));break;case H.MINUTE_DOWN:W(d.updateMinutes(L,"minus"));break;case H.HOUR_UP:R(d.updateHours(A,"add"));break;case H.HOUR_DOWN:R(d.updateHours(A,"minus"))}}),[A,L]),q=e=>{e.target.select()},z=e=>{const t=e.target.value;switch(e.target.name){case T.HOUR:t.length<=2&&R(t);break;case T.MINUTE:t.length<=2&&W(t)}},G=e=>{const t=parseInt(e.target.value);if(!isNaN(t))switch(e.target.name){case T.HOUR:{const n=t>23||t<0?x.hour:d.convertHourTo12HourFormat(e.target.value);R(n);break}case T.MINUTE:{const n=t>59||t<0?x.minute:e.target.value;W(l.padValue(n));break}}},J=e=>{switch(e.target.name){case y.AM:$(u.AM);break;case y.PM:$(u.PM)}},K=e=>O?`${O}-${e}`:e;return e(m,{children:t(h,{"data-testid":K("timepicker-dropdown"),inert:s(!E),children:[t(p,{children:[t(g,{children:[t(k,{children:[e(f,{"aria-label":"increase hour",name:H.HOUR_UP,tabIndex:-1,onClick:S,"data-testid":K("hour-increment-button"),children:e(r,{})}),e(v,{children:e(D,{"aria-label":"hour",type:"number",name:T.HOUR,id:"hour",maxLength:2,pattern:"[0-9]{2}",ref:B,value:A,onFocus:q,onChange:z,onBlur:G,min:1,max:12,placeholder:"HH","data-testid":K("hour-input")})}),e(f,{"aria-label":"decrease hour",name:H.HOUR_DOWN,tabIndex:-1,onClick:S,"data-testid":K("hour-decrement-button"),children:e(n,{})})]}),e(b,{children:":"}),t(k,{children:[e(f,{"aria-label":"increase minute",name:H.MINUTE_UP,tabIndex:-1,onClick:S,"data-testid":K("minute-increment-button"),children:e(r,{})}),e(v,{children:e(D,{"aria-label":"minute",type:"number",name:T.MINUTE,id:"minute",maxLength:2,pattern:"[0-9]{2}",ref:F,value:L,onChange:z,onBlur:G,onFocus:q,min:0,max:59,placeholder:"MM","data-testid":K("minute-input")})}),e(f,{"aria-label":"decrease minute",name:H.MINUTE_DOWN,tabIndex:-1,onClick:S,"data-testid":K("minute-decrement-button"),children:e(n,{})})]})]}),t(w,{children:[e(N,{checked:j===u.AM,name:y.AM,type:"radio",onChange:J,"data-testid":K("am-toggle"),"aria-label":"AM",children:"AM"}),e(N,{checked:j===u.PM,name:y.PM,type:"radio",onChange:J,"data-testid":K("pm-toggle"),"aria-label":"PM",children:"PM"})]})]}),t(M,{children:[e(U,{"aria-label":"close selector",type:"button",styleType:"secondary",onClick:_,"data-testid":K("cancel-button"),children:"Cancel"}),e(U,{"aria-label":"confirm selection",type:"button",onClick:()=>{let e;e="24hr"===C?d.convertTo24HourFormat({hour:A,minute:L,period:j}):`${A}:${L}${j}`,P(e)},disabled:""===A||""===L,"data-testid":K("confirm-button"),children:"Done"})]})]})})};export{O as TimepickerDropdown};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ChevronDownIcon as a}from"@lifesg/react-icons/chevron-down";import{ChevronUpIcon as r}from"@lifesg/react-icons/chevron-up";import{useState as n,useRef as i,useEffect as o,useCallback as c}from"react";import{Button as s}from"../../button/button.js";import{Toggle as l}from"../../toggle/toggle.js";import{Typography as m}from"../../typography/index.js";import{StringHelper as d}from"../../util/string-helper.js";import{TimeHelper as u,EPeriod as p}from"../../util/time-helper.js";import{inertValue as h}from"../accessibility/index.js";import{ClickableIcon as g}from"../clickable-icon/clickable-icon.js";import{InputBox as N,BasicInput as b}from"../input-wrapper/input-wrapper.js";import{root as v,container as M,inputSection as f,hourMinuteSection as U,dividerLabel as k,controlSection as w,controlButton as y,inputContainer as D,switchButton as T,timeInputBox as H,timeInput as O,timePeriodSection as I,timePeriodToggle as E}from"./timepicker-dropdown.styles.js";var C,P,x;!function(e){e.HOUR_UP="hour-up",e.HOUR_DOWN="hour-down",e.MINUTE_UP="minute-up",e.MINUTE_DOWN="minute-down"}(C||(C={})),function(e){e.HOUR="hour",e.MINUTE="minute"}(P||(P={})),function(e){e.AM="am",e.PM="pm"}(x||(x={}));const _=({id:_,value:A,show:R,format:j,onChange:L,onCancel:B})=>{const W=u.getTimeValues(j,A),[$,F]=n(W.hour),[V,z]=n(W.minute),[S,q]=n(W.period),G=i(null),J=i(null);o((()=>{if(R&&G.current&&G.current.focus({preventScroll:!0}),R){const{hour:e,minute:t,period:a}=u.getTimeValues(j,A);F(e),z(t),q(a)}}),[R,A,j]),o((()=>{const e=G.current,t=J.current;return e&&e.addEventListener("keydown",K),t&&t.addEventListener("keydown",K),()=>{e&&e.removeEventListener("keydown",K),t&&t.removeEventListener("keydown",K)}}),[]);const K=e=>{["Digit0","Digit1","Digit2","Digit3","Digit4","Digit5","Digit6","Digit7","Digit8","Digit9","Tab","Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.code)||["Backspace","0","1","2","3","4","5","6","7","8","9"].includes(e.key)||e.preventDefault()},Q=c((e=>{switch(e.currentTarget.name){case C.MINUTE_UP:z(u.updateMinutes(V,"add"));break;case C.MINUTE_DOWN:z(u.updateMinutes(V,"minus"));break;case C.HOUR_UP:F(u.updateHours($,"add"));break;case C.HOUR_DOWN:F(u.updateHours($,"minus"))}}),[$,V]),X=e=>{e.target.select()},Y=e=>{const t=e.target.value;switch(e.target.name){case P.HOUR:t.length<=2&&F(t);break;case P.MINUTE:t.length<=2&&z(t)}},Z=e=>{const t=parseInt(e.target.value);if(!isNaN(t))switch(e.target.name){case P.HOUR:{const a=t>23||t<0?W.hour:u.convertHourTo12HourFormat(e.target.value);F(a);break}case P.MINUTE:{const a=t>59||t<0?W.minute:e.target.value;z(d.padValue(a));break}}},ee=e=>{switch(e.target.name){case x.AM:q(p.AM);break;case x.PM:q(p.PM)}},te=e=>_?`${_}-${e}`:e;return e("div",{className:v,children:t("div",{className:M,"data-testid":te("timepicker-dropdown"),inert:h(!R),children:[t("div",{className:f,children:[t("div",{className:U,children:[t("div",{className:D,children:[e(g,{className:T,"aria-label":"increase hour",name:C.HOUR_UP,tabIndex:-1,onClick:Q,"data-testid":te("hour-increment-button"),children:e(r,{})}),e(N,{className:H,children:e(b,{className:O,"aria-label":"hour",type:"number",name:P.HOUR,id:"hour",maxLength:2,pattern:"[0-9]{2}",ref:G,value:$,onFocus:X,onChange:Y,onBlur:Z,min:1,max:12,placeholder:"HH","data-testid":te("hour-input")})}),e(g,{className:T,"aria-label":"decrease hour",name:C.HOUR_DOWN,tabIndex:-1,onClick:Q,"data-testid":te("hour-decrement-button"),children:e(a,{})})]}),e(m.BodyBL,{className:k,children:":"}),t("div",{className:D,children:[e(g,{className:T,"aria-label":"increase minute",name:C.MINUTE_UP,tabIndex:-1,onClick:Q,"data-testid":te("minute-increment-button"),children:e(r,{})}),e(N,{className:H,children:e(b,{className:O,"aria-label":"minute",type:"number",name:P.MINUTE,id:"minute",maxLength:2,pattern:"[0-9]{2}",ref:J,value:V,onChange:Y,onBlur:Z,onFocus:X,min:0,max:59,placeholder:"MM","data-testid":te("minute-input")})}),e(g,{className:T,"aria-label":"decrease minute",name:C.MINUTE_DOWN,tabIndex:-1,onClick:Q,"data-testid":te("minute-decrement-button"),children:e(a,{})})]})]}),t("div",{className:I,children:[e(l,{className:E,checked:S===p.AM,name:x.AM,type:"radio",onChange:ee,"data-testid":te("am-toggle"),"aria-label":"AM",children:"AM"}),e(l,{className:E,checked:S===p.PM,name:x.PM,type:"radio",onChange:ee,"data-testid":te("pm-toggle"),"aria-label":"PM",children:"PM"})]})]}),t("div",{className:w,children:[e(s,{className:y,sizeType:"small",type:"button",onClick:()=>{let e;e="24hr"===j?u.convertTo24HourFormat({hour:$,minute:V,period:S}):`${$}:${V}${S}`,L(e)},disabled:""===$||""===V,"data-testid":te("confirm-button"),children:"Done"}),e(s,{className:y,sizeType:"small",type:"button",styleType:"secondary",onClick:B,"data-testid":te("cancel-button"),children:"Cancel"})]})]})})};export{_ as TimepickerDropdown};
 //# sourceMappingURL=timepicker-dropdown.js.map

package/shared/timepicker-dropdown/timepicker-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timepicker-dropdown.js","sources":["../../../src/shared/timepicker-dropdown/timepicker-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { StringHelper } from \"../../util/string-helper\";\nimport type { TimeFormat } from \"../../util/time-helper\";\nimport { EPeriod, TimeHelper } from \"../../util/time-helper\";\nimport { inertValue } from \"../accessibility\";\nimport {\n Container,\n ControlButton,\n ControlSection,\n DividerLabel,\n HourMinuteSection,\n InputContainer,\n InputSection,\n StyledDiv,\n SwitchButton,\n TimeInput,\n TimeInputBox,\n TimePeriodSection,\n TimePeriodToggle,\n} from \"./timepicker-dropdown.styles\";\n\nenum EInputButtonName {\n HOUR_UP = \"hour-up\",\n HOUR_DOWN = \"hour-down\",\n MINUTE_UP = \"minute-up\",\n MINUTE_DOWN = \"minute-down\",\n}\n\nenum EInputName {\n HOUR = \"hour\",\n MINUTE = \"minute\",\n}\n\nenum ETimePeriodToggleName {\n AM = \"am\",\n PM = \"pm\",\n}\n\ninterface TimepickerDropdownProps {\n id?: string;\n value: string \| undefined;\n show: boolean;\n format: TimeFormat;\n onChange: (value: string) => void;\n onCancel: () => void;\n}\n\nexport const TimepickerDropdown = ({\n id,\n value,\n show,\n format,\n onChange,\n onCancel,\n}: TimepickerDropdownProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const timeValues = TimeHelper.getTimeValues(format, value);\n\n const [hourValue, setHourValue] = useState<string>(timeValues.hour);\n const [minuteValue, setMinuteValue] = useState<string>(timeValues.minute);\n const [timePeriod, setTimePeriod] = useState<EPeriod>(timeValues.period);\n\n const hourInputRef = useRef<HTMLInputElement>(null);\n const minuteInputRef = useRef<HTMLInputElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n // Focus hour input on display of dropdown\n if (show && hourInputRef.current) {\n hourInputRef.current.focus({ preventScroll: true });\n }\n\n if (show) {\n // reset time values especially when a Cancel or blur event happened\n const { hour, minute, period } = TimeHelper.getTimeValues(\n format,\n value\n );\n setHourValue(hour);\n setMinuteValue(minute);\n setTimePeriod(period);\n }\n }, [show, value, format]);\n\n useEffect(() => {\n const hourInput = hourInputRef.current;\n const minuteInput = minuteInputRef.current;\n\n if (hourInput) hourInput.addEventListener(\"keydown\", handleKeyDown);\n if (minuteInput) minuteInput.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n if (hourInput)\n hourInput.removeEventListener(\"keydown\", handleKeyDown);\n if (minuteInput)\n minuteInput.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, []);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleKeyDown = (event: KeyboardEvent) => {\n /*\n NOTE: This is the most deterministic way in handling\n * incorrect characters from being entered. The pattern\n * added in the input still allows some special characters\n * to slip through.\n /\n\n const permittableEventCodes = [\n \"Digit0\",\n \"Digit1\",\n \"Digit2\",\n \"Digit3\",\n \"Digit4\",\n \"Digit5\",\n \"Digit6\",\n \"Digit7\",\n \"Digit8\",\n \"Digit9\",\n \"Tab\",\n \"Backspace\",\n \"Delete\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"ArrowUp\",\n \"ArrowDown\",\n ];\n\n const permittableEventKeys = [\n \"Backspace\",\n \"0\",\n \"1\",\n \"2\",\n \"3\",\n \"4\",\n \"5\",\n \"6\",\n \"7\",\n \"8\",\n \"9\",\n ];\n\n if (\n !permittableEventCodes.includes(event.code) &&\n !permittableEventKeys.includes(event.key) // mobile devices\n ) {\n event.preventDefault();\n }\n };\n\n const handleInputButtonClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n switch (event.currentTarget.name) {\n case EInputButtonName.MINUTE_UP:\n setMinuteValue(\n TimeHelper.updateMinutes(minuteValue, \"add\")\n );\n break;\n case EInputButtonName.MINUTE_DOWN:\n setMinuteValue(\n TimeHelper.updateMinutes(minuteValue, \"minus\")\n );\n break;\n case EInputButtonName.HOUR_UP:\n setHourValue(TimeHelper.updateHours(hourValue, \"add\"));\n break;\n case EInputButtonName.HOUR_DOWN:\n setHourValue(TimeHelper.updateHours(hourValue, \"minus\"));\n break;\n default:\n break;\n }\n },\n [hourValue, minuteValue]\n );\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n event.target.select();\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n\n switch (event.target.name) {\n case EInputName.HOUR:\n if (value.length <= 2) setHourValue(value);\n break;\n case EInputName.MINUTE:\n if (value.length <= 2) setMinuteValue(value);\n break;\n default:\n break;\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const value = parseInt(event.target.value);\n\n if (isNaN(value)) return;\n\n switch (event.target.name) {\n case EInputName.HOUR: {\n const valueToSet =\n value > 23 \|\| value < 0\n ? timeValues.hour\n : TimeHelper.convertHourTo12HourFormat(\n event.target.value\n );\n\n setHourValue(valueToSet);\n break;\n }\n case EInputName.MINUTE: {\n const valueToSet =\n value > 59 \|\| value < 0\n ? timeValues.minute\n : event.target.value;\n\n setMinuteValue(StringHelper.padValue(valueToSet));\n break;\n }\n default:\n break;\n }\n };\n\n const handleTimePeriodChange = (\n event: React.ChangeEvent<HTMLInputElement>\n ) => {\n switch (event.target.name) {\n case ETimePeriodToggleName.AM:\n setTimePeriod(EPeriod.AM);\n break;\n case ETimePeriodToggleName.PM:\n setTimePeriod(EPeriod.PM);\n break;\n default:\n break;\n }\n };\n\n const handleConfirm = () => {\n let formattedValue: string;\n\n if (format === \"24hr\") {\n formattedValue = TimeHelper.convertTo24HourFormat({\n hour: hourValue,\n minute: minuteValue,\n period: timePeriod,\n });\n } else {\n formattedValue = `${hourValue}:${minuteValue}${timePeriod}`;\n }\n\n onChange(formattedValue);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getTestId = (baseTestId: string): string => {\n return id ? `${id}-${baseTestId}` : baseTestId;\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHourInput = () => (\n <InputContainer>\n <SwitchButton\n aria-label=\"increase hour\"\n name={EInputButtonName.HOUR_UP}\n tabIndex={-1} / Prevent tab, use arrow keys to change /\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"hour-increment-button\")}\n >\n <ChevronUpIcon />\n </SwitchButton>\n <TimeInputBox>\n <TimeInput\n aria-label=\"hour\"\n type=\"number\"\n name={EInputName.HOUR}\n id=\"hour\"\n maxLength={2}\n pattern=\"[0-9]{2}\"\n ref={hourInputRef}\n value={hourValue}\n onFocus={handleFocus}\n onChange={handleChange}\n onBlur={handleBlur}\n min={1}\n max={12}\n placeholder=\"HH\"\n data-testid={getTestId(\"hour-input\")}\n />\n </TimeInputBox>\n <SwitchButton\n aria-label=\"decrease hour\"\n name={EInputButtonName.HOUR_DOWN}\n tabIndex={-1} / Prevent tab, use arrow keys to change /\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"hour-decrement-button\")}\n >\n <ChevronDownIcon />\n </SwitchButton>\n </InputContainer>\n );\n\n const renderMinuteInput = () => (\n <InputContainer>\n <SwitchButton\n aria-label=\"increase minute\"\n name={EInputButtonName.MINUTE_UP}\n tabIndex={-1} / Prevent tab, use arrow keys to change /\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"minute-increment-button\")}\n >\n <ChevronUpIcon />\n </SwitchButton>\n <TimeInputBox>\n <TimeInput\n aria-label=\"minute\"\n type=\"number\"\n name={EInputName.MINUTE}\n id=\"minute\"\n maxLength={2}\n pattern=\"[0-9]{2}\"\n ref={minuteInputRef}\n value={minuteValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n min={0}\n max={59}\n placeholder=\"MM\"\n data-testid={getTestId(\"minute-input\")}\n />\n </TimeInputBox>\n <SwitchButton\n aria-label=\"decrease minute\"\n name={EInputButtonName.MINUTE_DOWN}\n tabIndex={-1} / Prevent tab, use arrow keys to change */\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"minute-decrement-button\")}\n >\n <ChevronDownIcon />\n </SwitchButton>\n </InputContainer>\n );\n\n const renderTimePeriodControl = () => (\n <TimePeriodSection>\n <TimePeriodToggle\n checked={timePeriod === EPeriod.AM}\n name={ETimePeriodToggleName.AM}\n type=\"radio\"\n onChange={handleTimePeriodChange}\n data-testid={getTestId(\"am-toggle\")}\n aria-label=\"AM\"\n >\n AM\n </TimePeriodToggle>\n <TimePeriodToggle\n checked={timePeriod === EPeriod.PM}\n name={ETimePeriodToggleName.PM}\n type=\"radio\"\n onChange={handleTimePeriodChange}\n data-testid={getTestId(\"pm-toggle\")}\n aria-label=\"PM\"\n >\n PM\n </TimePeriodToggle>\n </TimePeriodSection>\n );\n\n return (\n <StyledDiv>\n <Container\n data-testid={getTestId(\"timepicker-dropdown\")}\n inert={inertValue(!show)}\n >\n <InputSection>\n <HourMinuteSection>\n {renderHourInput()}\n <DividerLabel>:</DividerLabel>\n {renderMinuteInput()}\n </HourMinuteSection>\n {renderTimePeriodControl()}\n </InputSection>\n <ControlSection>\n <ControlButton\n aria-label=\"close selector\"\n type=\"button\"\n styleType=\"secondary\"\n onClick={onCancel}\n data-testid={getTestId(\"cancel-button\")}\n >\n Cancel\n </ControlButton>\n <ControlButton\n aria-label=\"confirm selection\"\n type=\"button\"\n onClick={handleConfirm}\n disabled={hourValue === \"\" \|\| minuteValue === \"\"}\n data-testid={getTestId(\"confirm-button\")}\n >\n Done\n </ControlButton>\n </ControlSection>\n </Container>\n </StyledDiv>\n );\n};\n"],"names":["EInputButtonName","EInputName","ETimePeriodToggleName","TimepickerDropdown","id","value","show","format","onChange","onCancel","timeValues","TimeHelper","getTimeValues","hourValue","setHourValue","useState","hour","minuteValue","setMinuteValue","minute","timePeriod","setTimePeriod","period","hourInputRef","useRef","minuteInputRef","useEffect","current","focus","preventScroll","hourInput","minuteInput","addEventListener","handleKeyDown","removeEventListener","event","includes","code","key","preventDefault","handleInputButtonClick","useCallback","currentTarget","name","MINUTE_UP","updateMinutes","MINUTE_DOWN","HOUR_UP","updateHours","HOUR_DOWN","handleFocus","target","select","handleChange","HOUR","length","MINUTE","handleBlur","parseInt","isNaN","valueToSet","convertHourTo12HourFormat","StringHelper","padValue","handleTimePeriodChange","AM","EPeriod","PM","getTestId","baseTestId","_jsx","StyledDiv","children","_jsxs","Container","inert","inertValue","InputSection","HourMinuteSection","InputContainer","SwitchButton","tabIndex","onClick","ChevronUpIcon","TimeInputBox","TimeInput","type","maxLength","pattern","ref","onFocus","onBlur","min","max","placeholder","ChevronDownIcon","DividerLabel","TimePeriodSection","TimePeriodToggle","checked","ControlSection","ControlButton","styleType","formattedValue","convertTo24HourFormat","disabled"],"mappings":"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"}
1	+ {"version":3,"file":"timepicker-dropdown.js","sources":["../../../src/shared/timepicker-dropdown/timepicker-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../../button\";\nimport { Toggle } from \"../../toggle\";\nimport { Typography } from \"../../typography\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport type { TimeFormat } from \"../../util/time-helper\";\nimport { EPeriod, TimeHelper } from \"../../util/time-helper\";\nimport { inertValue } from \"../accessibility\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport { BasicInput, InputBox } from \"../input-wrapper\";\nimport * as styles from \"./timepicker-dropdown.styles\";\n\nenum EInputButtonName {\n HOUR_UP = \"hour-up\",\n HOUR_DOWN = \"hour-down\",\n MINUTE_UP = \"minute-up\",\n MINUTE_DOWN = \"minute-down\",\n}\n\nenum EInputName {\n HOUR = \"hour\",\n MINUTE = \"minute\",\n}\n\nenum ETimePeriodToggleName {\n AM = \"am\",\n PM = \"pm\",\n}\n\ninterface TimepickerDropdownProps {\n id?: string;\n value: string \| undefined;\n show: boolean;\n format: TimeFormat;\n onChange: (value: string) => void;\n onCancel: () => void;\n}\n\nexport const TimepickerDropdown = ({\n id,\n value,\n show,\n format,\n onChange,\n onCancel,\n}: TimepickerDropdownProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const timeValues = TimeHelper.getTimeValues(format, value);\n\n const [hourValue, setHourValue] = useState<string>(timeValues.hour);\n const [minuteValue, setMinuteValue] = useState<string>(timeValues.minute);\n const [timePeriod, setTimePeriod] = useState<EPeriod>(timeValues.period);\n\n const hourInputRef = useRef<HTMLInputElement>(null);\n const minuteInputRef = useRef<HTMLInputElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n // Focus hour input on display of dropdown\n if (show && hourInputRef.current) {\n hourInputRef.current.focus({ preventScroll: true });\n }\n\n if (show) {\n // reset time values especially when a Cancel or blur event happened\n const { hour, minute, period } = TimeHelper.getTimeValues(\n format,\n value\n );\n setHourValue(hour);\n setMinuteValue(minute);\n setTimePeriod(period);\n }\n }, [show, value, format]);\n\n useEffect(() => {\n const hourInput = hourInputRef.current;\n const minuteInput = minuteInputRef.current;\n\n if (hourInput) hourInput.addEventListener(\"keydown\", handleKeyDown);\n if (minuteInput) minuteInput.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n if (hourInput)\n hourInput.removeEventListener(\"keydown\", handleKeyDown);\n if (minuteInput)\n minuteInput.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, []);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleKeyDown = (event: KeyboardEvent) => {\n /*\n NOTE: This is the most deterministic way in handling\n * incorrect characters from being entered. The pattern\n * added in the input still allows some special characters\n * to slip through.\n /\n\n const permittableEventCodes = [\n \"Digit0\",\n \"Digit1\",\n \"Digit2\",\n \"Digit3\",\n \"Digit4\",\n \"Digit5\",\n \"Digit6\",\n \"Digit7\",\n \"Digit8\",\n \"Digit9\",\n \"Tab\",\n \"Backspace\",\n \"Delete\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"ArrowUp\",\n \"ArrowDown\",\n ];\n\n const permittableEventKeys = [\n \"Backspace\",\n \"0\",\n \"1\",\n \"2\",\n \"3\",\n \"4\",\n \"5\",\n \"6\",\n \"7\",\n \"8\",\n \"9\",\n ];\n\n if (\n !permittableEventCodes.includes(event.code) &&\n !permittableEventKeys.includes(event.key) // mobile devices\n ) {\n event.preventDefault();\n }\n };\n\n const handleInputButtonClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n switch (event.currentTarget.name) {\n case EInputButtonName.MINUTE_UP:\n setMinuteValue(\n TimeHelper.updateMinutes(minuteValue, \"add\")\n );\n break;\n case EInputButtonName.MINUTE_DOWN:\n setMinuteValue(\n TimeHelper.updateMinutes(minuteValue, \"minus\")\n );\n break;\n case EInputButtonName.HOUR_UP:\n setHourValue(TimeHelper.updateHours(hourValue, \"add\"));\n break;\n case EInputButtonName.HOUR_DOWN:\n setHourValue(TimeHelper.updateHours(hourValue, \"minus\"));\n break;\n default:\n break;\n }\n },\n [hourValue, minuteValue]\n );\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n event.target.select();\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n\n switch (event.target.name) {\n case EInputName.HOUR:\n if (value.length <= 2) setHourValue(value);\n break;\n case EInputName.MINUTE:\n if (value.length <= 2) setMinuteValue(value);\n break;\n default:\n break;\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const value = parseInt(event.target.value);\n\n if (isNaN(value)) return;\n\n switch (event.target.name) {\n case EInputName.HOUR: {\n const valueToSet =\n value > 23 \|\| value < 0\n ? timeValues.hour\n : TimeHelper.convertHourTo12HourFormat(\n event.target.value\n );\n\n setHourValue(valueToSet);\n break;\n }\n case EInputName.MINUTE: {\n const valueToSet =\n value > 59 \|\| value < 0\n ? timeValues.minute\n : event.target.value;\n\n setMinuteValue(StringHelper.padValue(valueToSet));\n break;\n }\n default:\n break;\n }\n };\n\n const handleTimePeriodChange = (\n event: React.ChangeEvent<HTMLInputElement>\n ) => {\n switch (event.target.name) {\n case ETimePeriodToggleName.AM:\n setTimePeriod(EPeriod.AM);\n break;\n case ETimePeriodToggleName.PM:\n setTimePeriod(EPeriod.PM);\n break;\n default:\n break;\n }\n };\n\n const handleConfirm = () => {\n let formattedValue: string;\n\n if (format === \"24hr\") {\n formattedValue = TimeHelper.convertTo24HourFormat({\n hour: hourValue,\n minute: minuteValue,\n period: timePeriod,\n });\n } else {\n formattedValue = `${hourValue}:${minuteValue}${timePeriod}`;\n }\n\n onChange(formattedValue);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getTestId = (baseTestId: string): string => {\n return id ? `${id}-${baseTestId}` : baseTestId;\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHourInput = () => (\n <div className={styles.inputContainer}>\n <ClickableIcon\n className={styles.switchButton}\n aria-label=\"increase hour\"\n name={EInputButtonName.HOUR_UP}\n tabIndex={-1} / Prevent tab, use arrow keys to change /\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"hour-increment-button\")}\n >\n <ChevronUpIcon />\n </ClickableIcon>\n <InputBox className={styles.timeInputBox}>\n <BasicInput\n className={styles.timeInput}\n aria-label=\"hour\"\n type=\"number\"\n name={EInputName.HOUR}\n id=\"hour\"\n maxLength={2}\n pattern=\"[0-9]{2}\"\n ref={hourInputRef}\n value={hourValue}\n onFocus={handleFocus}\n onChange={handleChange}\n onBlur={handleBlur}\n min={1}\n max={12}\n placeholder=\"HH\"\n data-testid={getTestId(\"hour-input\")}\n />\n </InputBox>\n <ClickableIcon\n className={styles.switchButton}\n aria-label=\"decrease hour\"\n name={EInputButtonName.HOUR_DOWN}\n tabIndex={-1} / Prevent tab, use arrow keys to change /\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"hour-decrement-button\")}\n >\n <ChevronDownIcon />\n </ClickableIcon>\n </div>\n );\n\n const renderMinuteInput = () => (\n <div className={styles.inputContainer}>\n <ClickableIcon\n className={styles.switchButton}\n aria-label=\"increase minute\"\n name={EInputButtonName.MINUTE_UP}\n tabIndex={-1} / Prevent tab, use arrow keys to change /\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"minute-increment-button\")}\n >\n <ChevronUpIcon />\n </ClickableIcon>\n <InputBox className={styles.timeInputBox}>\n <BasicInput\n className={styles.timeInput}\n aria-label=\"minute\"\n type=\"number\"\n name={EInputName.MINUTE}\n id=\"minute\"\n maxLength={2}\n pattern=\"[0-9]{2}\"\n ref={minuteInputRef}\n value={minuteValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n min={0}\n max={59}\n placeholder=\"MM\"\n data-testid={getTestId(\"minute-input\")}\n />\n </InputBox>\n <ClickableIcon\n className={styles.switchButton}\n aria-label=\"decrease minute\"\n name={EInputButtonName.MINUTE_DOWN}\n tabIndex={-1} / Prevent tab, use arrow keys to change */\n onClick={handleInputButtonClick}\n data-testid={getTestId(\"minute-decrement-button\")}\n >\n <ChevronDownIcon />\n </ClickableIcon>\n </div>\n );\n\n const renderTimePeriodControl = () => (\n <div className={styles.timePeriodSection}>\n <Toggle\n className={styles.timePeriodToggle}\n checked={timePeriod === EPeriod.AM}\n name={ETimePeriodToggleName.AM}\n type=\"radio\"\n onChange={handleTimePeriodChange}\n data-testid={getTestId(\"am-toggle\")}\n aria-label=\"AM\"\n >\n AM\n </Toggle>\n <Toggle\n className={styles.timePeriodToggle}\n checked={timePeriod === EPeriod.PM}\n name={ETimePeriodToggleName.PM}\n type=\"radio\"\n onChange={handleTimePeriodChange}\n data-testid={getTestId(\"pm-toggle\")}\n aria-label=\"PM\"\n >\n PM\n </Toggle>\n </div>\n );\n\n return (\n <div className={styles.root}>\n <div\n className={styles.container}\n data-testid={getTestId(\"timepicker-dropdown\")}\n inert={inertValue(!show)}\n >\n <div className={styles.inputSection}>\n <div className={styles.hourMinuteSection}>\n {renderHourInput()}\n <Typography.BodyBL className={styles.dividerLabel}>\n :\n </Typography.BodyBL>\n {renderMinuteInput()}\n </div>\n {renderTimePeriodControl()}\n </div>\n <div className={styles.controlSection}>\n <Button\n className={styles.controlButton}\n sizeType=\"small\"\n type=\"button\"\n onClick={handleConfirm}\n disabled={hourValue === \"\" \|\| minuteValue === \"\"}\n data-testid={getTestId(\"confirm-button\")}\n >\n Done\n </Button>\n <Button\n className={styles.controlButton}\n sizeType=\"small\"\n type=\"button\"\n styleType=\"secondary\"\n onClick={onCancel}\n data-testid={getTestId(\"cancel-button\")}\n >\n Cancel\n </Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["EInputButtonName","EInputName","ETimePeriodToggleName","TimepickerDropdown","id","value","show","format","onChange","onCancel","timeValues","TimeHelper","getTimeValues","hourValue","setHourValue","useState","hour","minuteValue","setMinuteValue","minute","timePeriod","setTimePeriod","period","hourInputRef","useRef","minuteInputRef","useEffect","current","focus","preventScroll","hourInput","minuteInput","addEventListener","handleKeyDown","removeEventListener","event","includes","code","key","preventDefault","handleInputButtonClick","useCallback","currentTarget","name","MINUTE_UP","updateMinutes","MINUTE_DOWN","HOUR_UP","updateHours","HOUR_DOWN","handleFocus","target","select","handleChange","HOUR","length","MINUTE","handleBlur","parseInt","isNaN","valueToSet","convertHourTo12HourFormat","StringHelper","padValue","handleTimePeriodChange","AM","EPeriod","PM","getTestId","baseTestId","_jsx","className","styles.root","children","_jsxs","styles.container","inert","inertValue","styles.inputSection","styles.hourMinuteSection","styles.inputContainer","ClickableIcon","styles.switchButton","tabIndex","onClick","ChevronUpIcon","InputBox","styles.timeInputBox","BasicInput","styles.timeInput","type","maxLength","pattern","ref","onFocus","onBlur","min","max","placeholder","ChevronDownIcon","Typography","BodyBL","styles.dividerLabel","styles.timePeriodSection","Toggle","styles.timePeriodToggle","checked","styles.controlSection","Button","styles.controlButton","sizeType","formattedValue","convertTo24HourFormat","disabled","styleType"],"mappings":"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"}

package/shared/timepicker-dropdown/timepicker-dropdown.styles.d.ts CHANGED Viewed

@@ -1,19 +1,13 @@
-export declare const StyledDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const InputSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ControlSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const HourMinuteSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimePeriodSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SwitchButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const DividerLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const TimeInputBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../input-wrapper").InputWrapperStyleProps> & import("../input-wrapper").InputWrapperStyleProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const TimeInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, never>> & string;
-export declare const TimePeriodToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").ToggleProps, never>> & string & Omit<({ type, indicator, checked, styleType, children, childrenMaxLines, subLabel, disabled, error, name, id, className, compositeSection, removable, onRemove, "data-testid": testId, onChange, useContentWidth, "aria-describedby": ariaDescribedBy, ...otherProps }: import("../..").ToggleProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const ControlButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const root: import("@linaria/core").LinariaClassName;
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const inputSection: import("@linaria/core").LinariaClassName;
+export declare const controlSection: import("@linaria/core").LinariaClassName;
+export declare const hourMinuteSection: import("@linaria/core").LinariaClassName;
+export declare const timePeriodSection: import("@linaria/core").LinariaClassName;
+export declare const inputContainer: import("@linaria/core").LinariaClassName;
+export declare const switchButton: import("@linaria/core").LinariaClassName;
+export declare const dividerLabel: import("@linaria/core").LinariaClassName;
+export declare const timeInputBox: import("@linaria/core").LinariaClassName;
+export declare const timeInput: import("@linaria/core").LinariaClassName;
+export declare const timePeriodToggle: import("@linaria/core").LinariaClassName;
+export declare const controlButton: import("@linaria/core").LinariaClassName;