@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

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

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

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

@@ -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\";\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport {\n    DayInput,\n    DayInputSizer,\n    Divider,\n    InputContainer,\n    InputSection,\n    MonthInput,\n    MonthInputSizer,\n    Placeholder,\n    YearInput,\n    YearInputSizer,\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                <DayInputSizer>\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                </DayInputSizer>\n                <Divider $inactive={dayValue.length === 0} $disabled={disabled}>\n                    /\n                </Divider>\n                <MonthInputSizer>\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                </MonthInputSizer>\n                <Divider\n                    $inactive={monthValue.length === 0}\n                    $disabled={disabled}\n                >\n                    /\n                </Divider>\n                <YearInputSizer>\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                </YearInputSizer>\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","DayInputSizer","DayInput","maxLength","type","pattern","tabIndex","autoComplete","Divider","$disabled","MonthInputSizer","MonthInput","onKeyDown","$inactive","YearInputSizer","YearInput","Placeholder","$hide","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}
+{"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        // eslint-disable-next-line react-hooks/exhaustive-deps\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                        !!hoverValue && styles.dividerHover,\n                        disabled && styles.dividerDisabled,\n                        !disabled &&\n                            dayValue.length === 0 &&\n                            styles.dividerInactive\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                        !!hoverValue && styles.dividerHover,\n                        disabled && styles.dividerDisabled,\n                        !disabled &&\n                            monthValue.length === 0 &&\n                            styles.dividerInactive\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.dividerHover","styles.dividerDisabled","styles.dividerInactive","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

@@ -0,0 +1,15 @@
+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 dividerHover: import("@linaria/core").LinariaClassName;
+export declare const dividerInactive: import("@linaria/core").LinariaClassName;
+export declare const dividerDisabled: 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

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

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

@@ -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    color: ${Colour[\"text\"]};\n`;\n\nexport const dividerHover = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const dividerInactive = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const dividerDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\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","dividerHover","dividerInactive","dividerDisabled","inputContainer","inputSizerBase","dayInputSizer","monthInputSizer","yearInputSizer","placeholder","placeholderDisabled","placeholderHide"],"mappings":"+FAOO,MAAMA,EAAY,UAQZC,EAAS,WAyCTC,EAAc,WAIdC,EAAO,WAKPC,EAAY,WAIZC,EAAe,WAIfC,EAAe,UAIfC,EAAc,WAMdC,EAAc,UAYdC,EAAa,WAMbC,EAAe,WAMfC,EAAc,UAMdC,EAAW,WAWXC,EAAmB,WAKnBC,EAAe"}

package/shared/standalone-date-input/standalone-date-input.styles_157qo89.css

@@ -0,0 +1,15 @@
+@layer fds{.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-body);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-body);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);}
+.d1ednuur{color:var(--fds-colour-text-subtler);}
+.d12gn07d{color:var(--fds-colour-text-subtler);}
+.day8f6w{color:var(--fds-colour-text-disabled);}
+.i1tizbfo{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);}
+.i8v7mt3{display:inline-block;position:relative;}.i8v7mt3::after{font-family:var(--fds-font-family-body);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;}
+.d1nfq8ts::after{content:"DD";}
+.m1kizbwh::after{content:"MM";}
+.yzrktuq::after{content:"YYYY";}
+.p1jcopfd{font-family:var(--fds-font-family-body);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%;}
+.p10ypbkc{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;}
+.p1yc7tqu{display:none;}}

package/shared/styles/index.d.ts

@@ -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/time-slot/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./time-slot";
+export * from "./types";

package/shared/time-slot/time-slot.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import type { SlotStyle } from "./types";
+export interface TimeSlotProps {
+    "data-testid"?: string | undefined;
+    bgColor: string;
+    bgColor2?: string | undefined;
+    children?: ReactNode;
+    className?: string | undefined;
+    clickable?: boolean | undefined;
+    fill?: "default" | "top" | "bottom" | undefined;
+    hoverBgColor?: string | undefined;
+    hoverBgColor2?: string | undefined;
+    nonClickableCursor?: "default" | "not-allowed" | undefined;
+    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    styleType: SlotStyle;
+    tabIndex?: number | undefined;
+}
+export declare const TimeSlot: (props: TimeSlotProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/shared/time-slot/time-slot.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import t from"clsx";import{forwardRef as o,useRef as r}from"react";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as s}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as l}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as i,timeSlot as m,timeSlotHalfFillBottom as a,timeSlotHalfFillTop as p}from"./time-slot.styles.js";const n=o((({className:o,"data-testid":n,bgColor:d,bgColor2:c,children:h,clickable:u,fill:j="default",hoverBgColor:b,hoverBgColor2:C,nonClickableCursor:f,onClick:g,styleType:y,tabIndex:k},v)=>{const x=r(null);s(x,{[i.slot.bgColor]:d,[i.slot.bgColor2]:c,[i.slot.hoverBgColor]:b,[i.slot.hoverBgColor2]:C,[i.slot.cursor]:f});return e("div",{ref:l(x,v),className:t(m,{[p]:"top"===j,[a]:"bottom"===j},o),"data-style-type":y,"data-clickable":!!u,"data-hoverable":!!(u&&("stripes"===y?b||C:b)),onClick:g,"data-testid":n,tabIndex:k,children:h})}));export{n as TimeSlot};
+//# sourceMappingURL=time-slot.js.map

package/shared/time-slot/time-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot.js","sources":["../../../src/shared/time-slot/time-slot.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { mergeRefs } from \"../../util\";\nimport * as styles from \"./time-slot.styles\";\nimport type { SlotStyle } from \"./types\";\n\nexport interface TimeSlotProps {\n    \"data-testid\"?: string | undefined;\n    bgColor: string;\n    bgColor2?: string | undefined;\n    children?: ReactNode;\n    className?: string | undefined;\n    clickable?: boolean | undefined;\n    fill?: \"default\" | \"top\" | \"bottom\" | undefined;\n    hoverBgColor?: string | undefined;\n    hoverBgColor2?: string | undefined;\n    nonClickableCursor?: \"default\" | \"not-allowed\" | undefined;\n    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n    styleType: SlotStyle;\n    tabIndex?: number | undefined;\n}\n\nconst Component = (\n    {\n        className,\n        \"data-testid\": dataTestId,\n        bgColor,\n        bgColor2,\n        children,\n        clickable,\n        fill = \"default\",\n        hoverBgColor,\n        hoverBgColor2,\n        nonClickableCursor,\n        onClick,\n        styleType,\n        tabIndex,\n    }: TimeSlotProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const slotRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(slotRef, {\n        [styles.tokens.slot.bgColor]: bgColor,\n        [styles.tokens.slot.bgColor2]: bgColor2,\n        [styles.tokens.slot.hoverBgColor]: hoverBgColor,\n        [styles.tokens.slot.hoverBgColor2]: hoverBgColor2,\n        [styles.tokens.slot.cursor]: nonClickableCursor,\n    });\n\n    const isHoverable = () => {\n        if (!clickable) {\n            return false;\n        }\n\n        if (styleType === \"stripes\") {\n            return !!(hoverBgColor || hoverBgColor2);\n        }\n\n        return !!hoverBgColor;\n    };\n\n    return (\n        <div\n            ref={mergeRefs(slotRef, ref)}\n            className={clsx(\n                styles.timeSlot,\n                {\n                    [styles.timeSlotHalfFillTop]: fill === \"top\",\n                    [styles.timeSlotHalfFillBottom]: fill === \"bottom\",\n                },\n                className\n            )}\n            data-style-type={styleType}\n            data-clickable={!!clickable}\n            data-hoverable={isHoverable()}\n            onClick={onClick}\n            data-testid={dataTestId}\n            tabIndex={tabIndex}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport const TimeSlot = forwardRef(Component);\n"],"names":["TimeSlot","forwardRef","className","dataTestId","bgColor","bgColor2","children","clickable","fill","hoverBgColor","hoverBgColor2","nonClickableCursor","onClick","styleType","tabIndex","ref","slotRef","useRef","useApplyStyle","styles.tokens","slot","cursor","_jsx","mergeRefs","clsx","styles.timeSlot","timeSlotHalfFillTop","styles.timeSlotHalfFillTop","timeSlotHalfFillBottom","styles.timeSlotHalfFillBottom"],"mappings":"uzBAyBA,MA+DaA,EAAWC,GA/DN,EAEVC,YACA,cAAeC,EACfC,UACAC,WACAC,WACAC,YACAC,OAAO,UACPC,eACAC,gBACAC,qBACAC,UACAC,YACAC,YAEJC,KAEA,MAAMC,EAAUC,EAAuB,MAEvCC,EAAcF,EAAS,CACnB,CAACG,EAAcC,KAAKhB,SAAUA,EAC9B,CAACe,EAAcC,KAAKf,UAAWA,EAC/B,CAACc,EAAcC,KAAKX,cAAeA,EACnC,CAACU,EAAcC,KAAKV,eAAgBA,EACpC,CAACS,EAAcC,KAAKC,QAASV,IAejC,OACIW,EAAA,MAAA,CACIP,IAAKQ,EAAUP,EAASD,GACxBb,UAAWsB,EACPC,EACA,CACIC,CAACC,GAAsC,QAATnB,EAC9BoB,CAACC,GAAyC,WAATrB,GAErCN,GACH,kBACgBW,EAAS,mBACRN,EAAS,oBAvB1BA,IAIa,YAAdM,EACUJ,GAAgBC,EAGrBD,IAiBLG,QAASA,EAAO,cACHT,EACbW,SAAUA,EAAQR,SAEjBA,GACC"}

package/shared/time-slot/time-slot.styles.d.ts

@@ -0,0 +1,12 @@
+export declare const tokens: {
+    slot: {
+        bgColor: string;
+        bgColor2: string;
+        hoverBgColor: string;
+        hoverBgColor2: string;
+        cursor: string;
+    };
+};
+export declare const timeSlot: import("@linaria/core").LinariaClassName;
+export declare const timeSlotHalfFillTop: import("@linaria/core").LinariaClassName;
+export declare const timeSlotHalfFillBottom: import("@linaria/core").LinariaClassName;

package/shared/time-slot/time-slot.styles.js

@@ -0,0 +1,2 @@
+import"./time-slot.styles_18s0to7.css";const o={slot:{bgColor:"--fds-internal-timeSlot-slot-bgColor",bgColor2:"--fds-internal-timeSlot-slot-bgColor2",hoverBgColor:"--fds-internal-timeSlot-slot-hoverBgColor",hoverBgColor2:"--fds-internal-timeSlot-slot-hoverBgColor2",cursor:"--fds-internal-timeSlot-slot-cursor"}},t="tsti7hb",l="tmgdrss",r="t31kbad";export{t as timeSlot,r as timeSlotHalfFillBottom,l as timeSlotHalfFillTop,o as tokens};
+//# sourceMappingURL=time-slot.styles.js.map

package/shared/time-slot/time-slot.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot.styles.js","sources":["../../../src/shared/time-slot/time-slot.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../../theme\";\n\nexport const tokens = {\n    slot: {\n        bgColor: \"--fds-internal-timeSlot-slot-bgColor\",\n        bgColor2: \"--fds-internal-timeSlot-slot-bgColor2\",\n        hoverBgColor: \"--fds-internal-timeSlot-slot-hoverBgColor\",\n        hoverBgColor2: \"--fds-internal-timeSlot-slot-hoverBgColor2\",\n        cursor: \"--fds-internal-timeSlot-slot-cursor\",\n    },\n};\n\nconst stripesGradient = `repeating-linear-gradient(\n    135deg,\n    var(${tokens.slot.bgColor2}) 0px,\n    var(${tokens.slot.bgColor2}) 6px,\n    var(${tokens.slot.bgColor}) 6px,\n    var(${tokens.slot.bgColor}) 12px\n)`;\n\nexport const timeSlot = css`\n    ${tokens.slot.bgColor}: ${Colour[\"bg-stronger\"]};\n    ${tokens.slot.bgColor2}: ${Colour[\"bg-strongest\"]};\n    ${tokens.slot.hoverBgColor}: ${Colour[\"bg-stronger\"]};\n    ${tokens.slot.hoverBgColor2}: ${Colour[\"bg-strongest\"]};\n\n    cursor: var(${tokens.slot.cursor}, default);\n\n    &[data-clickable=\"true\"] {\n        cursor: pointer;\n    }\n\n    &[data-style-type=\"default\"] {\n        background-color: var(${tokens.slot.bgColor});\n    }\n\n    &[data-style-type=\"default\"][data-hoverable=\"true\"] {\n        &:hover {\n            background-color: var(${tokens.slot.hoverBgColor});\n        }\n    }\n\n    &[data-style-type=\"stripes\"] {\n        background: ${stripesGradient};\n    }\n\n    &[data-style-type=\"stripes\"][data-hoverable=\"true\"] {\n        &:hover {\n            background: repeating-linear-gradient(\n                135deg,\n                var(${tokens.slot.hoverBgColor2}, var(${tokens.slot.bgColor2}))\n                    0px,\n                var(${tokens.slot.hoverBgColor2}, var(${tokens.slot.bgColor2}))\n                    6px,\n                var(${tokens.slot.hoverBgColor}, var(${tokens.slot.bgColor}))\n                    6px,\n                var(${tokens.slot.hoverBgColor}, var(${tokens.slot.bgColor}))\n                    12px\n            );\n        }\n    }\n`;\n\nexport const timeSlotHalfFillTop = css`\n    &[data-style-type=\"default\"] {\n        background: linear-gradient(\n            to top,\n            var(${tokens.slot.bgColor}) 50%,\n            ${Colour[\"bg-strongest\"]} 50%\n        );\n    }\n\n    &[data-style-type=\"stripes\"] {\n        background: linear-gradient(\n                to top,\n                transparent 50%,\n                ${Colour[\"bg-strongest\"]} 50%\n            ),\n            ${stripesGradient};\n    }\n`;\n\nexport const timeSlotHalfFillBottom = css`\n    &[data-style-type=\"default\"] {\n        background: linear-gradient(\n            to bottom,\n            var(${tokens.slot.bgColor}) 50%,\n            ${Colour[\"bg-strongest\"]} 50%\n        );\n    }\n\n    &[data-style-type=\"stripes\"] {\n        background: linear-gradient(\n                to bottom,\n                transparent 50%,\n                ${Colour[\"bg-strongest\"]} 50%\n            ),\n            ${stripesGradient};\n    }\n`;\n"],"names":["tokens","slot","bgColor","bgColor2","hoverBgColor","hoverBgColor2","cursor","timeSlot","timeSlotHalfFillTop","timeSlotHalfFillBottom"],"mappings":"uEAIO,MAAMA,EAAS,CAClBC,KAAM,CACFC,QAAS,uCACTC,SAAU,wCACVC,aAAc,4CACdC,cAAe,6CACfC,OAAQ,wCAYHC,EAAQ,UA2CRC,EAAmB,UAmBnBC,EAAsB"}

package/shared/time-slot/time-slot.styles_18s0to7.css

@@ -0,0 +1,29 @@
+@layer fds{.tsti7hb{--fds-internal-timeSlot-slot-bgColor:var(--fds-colour-bg-stronger);--fds-internal-timeSlot-slot-bgColor2:var(--fds-colour-bg-strongest);--fds-internal-timeSlot-slot-hoverBgColor:var(--fds-colour-bg-stronger);--fds-internal-timeSlot-slot-hoverBgColor2:var(--fds-colour-bg-strongest);cursor:var(--fds-internal-timeSlot-slot-cursor, default);}.tsti7hb[data-clickable="true"]{cursor:pointer;}.tsti7hb[data-style-type="default"]{background-color:var(--fds-internal-timeSlot-slot-bgColor);}.tsti7hb[data-style-type="default"][data-hoverable="true"]:hover{background-color:var(--fds-internal-timeSlot-slot-hoverBgColor);}.tsti7hb[data-style-type="stripes"]{background:repeating-linear-gradient(     135deg,     var(--fds-internal-timeSlot-slot-bgColor2) 0px,     var(--fds-internal-timeSlot-slot-bgColor2) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 12px );}.tsti7hb[data-style-type="stripes"][data-hoverable="true"]:hover{background:repeating-linear-gradient(
+                135deg,
+                var(--fds-internal-timeSlot-slot-hoverBgColor2, var(--fds-internal-timeSlot-slot-bgColor2))
+                    0px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor2, var(--fds-internal-timeSlot-slot-bgColor2))
+                    6px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor, var(--fds-internal-timeSlot-slot-bgColor))
+                    6px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor, var(--fds-internal-timeSlot-slot-bgColor))
+                    12px
+            );}
+.tmgdrss[data-style-type="default"]{background:linear-gradient(
+            to top,
+            var(--fds-internal-timeSlot-slot-bgColor) 50%,
+            var(--fds-colour-bg-strongest) 50%
+        );}.tmgdrss[data-style-type="stripes"]{background:linear-gradient(
+                to top,
+                transparent 50%,
+                var(--fds-colour-bg-strongest) 50%
+            ),repeating-linear-gradient(     135deg,     var(--fds-internal-timeSlot-slot-bgColor2) 0px,     var(--fds-internal-timeSlot-slot-bgColor2) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 12px );}
+.t31kbad[data-style-type="default"]{background:linear-gradient(
+            to bottom,
+            var(--fds-internal-timeSlot-slot-bgColor) 50%,
+            var(--fds-colour-bg-strongest) 50%
+        );}.t31kbad[data-style-type="stripes"]{background:linear-gradient(
+                to bottom,
+                transparent 50%,
+                var(--fds-colour-bg-strongest) 50%
+            ),repeating-linear-gradient(     135deg,     var(--fds-internal-timeSlot-slot-bgColor2) 0px,     var(--fds-internal-timeSlot-slot-bgColor2) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 12px );}}

package/shared/time-slot/types.d.ts

@@ -0,0 +1 @@
+export type SlotStyle = "default" | "stripes";

package/shared/timepicker-dropdown/timepicker-dropdown.d.ts

@@ -1,4 +1,4 @@
-import { TimeFormat } from "../../util/time-helper";
+import type { TimeFormat } from "../../util/time-helper";
 interface TimepickerDropdownProps {
     id?: string;
     value: string | undefined;

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

@@ -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 d}from"../../util/string-helper.js";import{TimeHelper as u,EPeriod as l}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=u.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}=u.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(u.updateMinutes(L,"add"));break;case H.MINUTE_DOWN:W(u.updateMinutes(L,"minus"));break;case H.HOUR_UP:R(u.updateHours(A,"add"));break;case H.HOUR_DOWN:R(u.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:u.convertHourTo12HourFormat(e.target.value);R(n);break}case T.MINUTE:{const n=t>59||t<0?x.minute:e.target.value;W(d.padValue(n));break}}},J=e=>{switch(e.target.name){case y.AM:$(l.AM);break;case y.PM:$(l.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===l.AM,name:y.AM,type:"radio",onChange:J,"data-testid":K("am-toggle"),"aria-label":"AM",children:"AM"}),e(N,{checked:j===l.PM,name:y.PM,type:"radio",onChange:J,"data-testid":K("pm-toggle"),"aria-label":"PM",children:"PM"})]})]}),t(M,{children:[e(U,{type:"button",styleType:"secondary",onClick:_,"data-testid":K("cancel-button"),children:"Cancel"}),e(U,{type:"button",onClick:()=>{let e;e="24hr"===C?u.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

@@ -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 React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport { EPeriod, TimeFormat, 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                        type=\"button\"\n                        styleType=\"secondary\"\n                        onClick={onCancel}\n                        data-testid={getTestId(\"cancel-button\")}\n                    >\n                        Cancel\n                    </ControlButton>\n                    <ControlButton\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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"}
+{"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

@@ -1,43 +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> & Partial<Pick<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> & Partial<Pick<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> & Partial<Pick<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> & Partial<Pick<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> & Partial<Pick<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> & Partial<Pick<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> & Partial<Pick<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> & Partial<Pick<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;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;
-export declare const TimeInputBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../input-wrapper").InputWrapperStyleProps> & import("../input-wrapper").InputWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../input-wrapper").InputWrapperStyleProps> & import("../input-wrapper").InputWrapperStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../input-wrapper").InputWrapperStyleProps> & import("../input-wrapper").InputWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../input-wrapper").InputWrapperStyleProps> & import("../input-wrapper").InputWrapperStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "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("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../input-wrapper").InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../input-wrapper").InputStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../input-wrapper").InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../input-wrapper").InputStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "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> & Partial<Pick<import("../..").ToggleProps, never>>> & string & Omit<({ type, indicator, checked, styleType, children, childrenMaxLines, subLabel, disabled, error, name, id, className, compositeSection, removable, focusableWhenDisabled, useContentWidth, onRemove, onChange, "data-testid": testId, "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> & Partial<Pick<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;