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

package/unit-number/types.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Props for `UnitNumberInput`.
+ */
 export interface UnitNumberInputProps extends React.AriaAttributes {
     className?: string | undefined;
     id?: string | undefined;
@@ -5,23 +8,46 @@ export interface UnitNumberInputProps extends React.AriaAttributes {
     tabIndex?: number | undefined;
     "data-testid"?: string | undefined;
     readOnly?: boolean | undefined;
+    /**
+     * Placeholder text in `"floor-unit"` format.
+     *
+     * @default "00-8888"
+     */
     placeholder?: string | undefined;
     role?: React.AriaRole | undefined;
+    /**
+     * The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).
+     */
     value?: string | undefined;
     name?: string | undefined;
+    /** Renders the input in an error state. */
     error?: boolean | undefined;
     disabled?: boolean | undefined;
     autoComplete?: string | undefined;
+    /**
+     * Called when the value of either sub-input changes.
+     *
+     * @param value The combined value in `"floor-unit"` format, an empty string when
+     * both fields are empty, or `"Invalid unit number"` when only one field is filled.
+     */
     onChange?: ((value: string) => void) | undefined;
     /**
-     * Function that returns the raw values in the UnitNumberInput on change in an array format
-     * as such [floor, unit]
+     * Called when either sub-input changes.
+     *
+     * @param value The raw individual field values as `[floor, unit]`.
      */
     onChangeRaw?: ((value: string[]) => void) | undefined;
+    /**
+     * Called when focus leaves the component entirely.
+     *
+     * @param value The combined value in `"floor-unit"` format, an empty string when
+     * both fields are empty, or `"Invalid unit number"` when only one field is filled.
+     */
     onBlur?: ((value: string) => void) | undefined;
     /**
-     * Function that returns the raw values in the UnitNumberInput on blur in an array format
-     * as such [floor, unit]
+     * Called when focus leaves the component.
+     *
+     * @param value The raw individual field values as `[floor, unit]`.
      */
     onBlurRaw?: ((value: string[]) => void) | undefined;
 }

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

@@ -1,2 +1,9 @@
 import type { UnitNumberInputProps } from "./types";
-export declare const UnitNumberInput: ({ disabled, error, value, onChange, onBlur, onChangeRaw, onBlurRaw, readOnly, placeholder, autoComplete, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...otherProps }: UnitNumberInputProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A two-field input for entering Singapore-style unit numbers in `floor-unit` format.
+ *
+ * Use `UnitNumberInput` when you need a structured unit number entry that splits
+ * floor and unit into separate fields.
+ * @keywords address, field, floor, form, input, unit
+ */
+export declare const UnitNumberInput: ({ disabled, error, value, onChange, onBlur, onChangeRaw, onBlurRaw, readOnly, placeholder, autoComplete, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, className, ...otherProps }: UnitNumberInputProps) => import("react/jsx-runtime").JSX.Element;

package/unit-number/unit-number-input.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as n}from"react/jsx-runtime";import{useState as a,useRef as i,useMemo as o,useEffect as l}from"react";import{VisuallyHidden as d,concatIds as u}from"../shared/accessibility/index.js";import{InputWrapper as s}from"../shared/input-wrapper/input-wrapper.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as c}from"../util/simple-id-generator.js";import{StringHelper as p}from"../util/string-helper.js";import{useNextInputState as f}from"../util/use-next-input-state.js";import{HashContainer as b,ReadOnlyContainer as h,ReadOnlyLabel as m,UnitNumberDivider as y,FloorInput as g,UnitInput as v}from"./unit-number-input.style.js";const j=j=>{var{disabled:C,error:$,value:B,onChange:w,onBlur:O,onChangeRaw:k,onBlurRaw:A,readOnly:L,placeholder:R="00-8888",autoComplete:D,"aria-labelledby":I,"aria-describedby":T,"aria-invalid":V}=j,Z=e(j,["disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","aria-labelledby","aria-describedby","aria-invalid"]);const[E,F]=a(""),[H,P]=a(""),[U,_]=a("none"),[z]=a((()=>c.generate())),K=`${z}-floor-label`,q=`${z}-unit-label`,G=`${z}-live-message`,J=i(null),M=i(null),N=i(null),Q=i(E),S=i(H),W=i(U),X=e=>e.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g,""),Y=f({ref:M,formatter:X}),ee=f({ref:N,formatter:X}),re=o((()=>{let e="";const r=he("Hash",E),t=he("Dash",H);switch(U){case"floor":e=r;break;case"unit":e=E?[r,t].join(" "):t;break;default:e=""}return e}),[U,E,H]),te=e=>{Q.current=e,F(e)},ne=e=>{S.current=e,P(e)},ae=e=>{W.current=e,_(e)};l((()=>{"floor"===U&&3===E.length&&N.current&&N.current.focus()}),[E]),l((()=>{se(B)}),[B]);const ie=e=>{ae(e.target.name),e.target.select()},oe=e=>{const r=e.target.name,t=e.target.value,n=ue(t);"floor"===r?(te(n),n!==E&&ce(n,r)):"unit"===r&&(ne(n),n!==H&&ce(n,r))},le=e=>{const r=e.target.name;if("floor"===r){const e=Y();if(!e)return;const{nextValue:t,updateCaretPosition:n}=e;n(),te(t),ce(t,r)}else if("unit"===r){const e=ee();if(!e)return;const{nextValue:t,updateCaretPosition:n}=e;n(),ne(t),ce(t,r)}},de=e=>{var r;"Backspace"!==e.code&&"Backspace"!==e.key||"unit"===U&&0===H.length&&(null===(r=M.current)||void 0===r||r.focus())},ue=e=>/^[0-9]$/.test(e)?p.padValue(e,!0):e.toLocaleUpperCase(),se=e=>{if(e!==x)if(void 0===e||0===e.length)te(""),ne("");else{const r=e.split("-");if(2===r.length){const e=r[0],t=r[1];te("floor"===U?e:ue(e)),ne("unit"===U?t:ue(t))}}},ce=(e,r)=>{if(!w&&!k)return;const t={floor:Q.current,unit:S.current};if(t[r]=e,w){const e=fe(t);w(e)}k&&k([t.floor,t.unit])},pe=()=>{if(!O&&!A)return;const e={floor:ue(Q.current),unit:ue(S.current)};if(O){const r=fe(e);O(r)}A&&A([e.floor,e.unit])},fe=e=>{const r=[e.floor,e.unit];return e.floor.length>0&&e.unit.length>0?r.join("-"):r.every((e=>""===e))?"":x},be=e=>e.split("-");function he(e,r){return r?`${e} ${Array.from(r).join(" ")}`:""}return r(s,Object.assign({},Z,{ref:J,onClick:()=>{"none"===U&&M.current&&M.current.focus()},$disabled:C,$error:$,$readOnly:L,tabIndex:-1,onBlur:e=>{J.current&&J.current.contains(e.relatedTarget)||"none"!==W.current&&(ae("none"),pe())},children:[t(b,{"data-testid":"addon",$disabled:C,$readOnly:L,children:"#"}),L&&B?(e=>{const n=e.split("-"),a=[he("Hash",n[0]),he("Dash",n[1])].join(" ");return r(h,{"data-testid":"readonly-display",tabIndex:0,role:"textbox","aria-readonly":!0,"aria-labelledby":I,"aria-describedby":T,"aria-invalid":V,children:[t(m,{children:n[0]}),t(y,{children:"-"}),t(m,{children:n[1]}),t(d,{children:a})]})})(B):r(n,{children:[t(g,{name:"floor",maxLength:3,value:E,ref:M,onFocus:ie,onBlur:oe,onChange:le,disabled:C,readOnly:L,type:"text",pattern:"[0-9A-Z]{2,3}","data-testid":"floor-input","aria-labelledby":u(I,K),"aria-describedby":u(T,G),"aria-invalid":V,placeholder:"floor"!==U||L||C?be(R)[0]:"",autoComplete:D,styleType:"no-border"}),t(d,{"aria-hidden":!0,id:K,children:"Enter floor number"}),t(y,{$inactive:0===E.length,children:"-"}),t(v,{name:"unit",maxLength:5,value:H,ref:N,onFocus:ie,onBlur:oe,onChange:le,onKeyDown:de,disabled:C,readOnly:L,type:"text",pattern:"[0-9A-Z]{2,5}","data-testid":"unit-input","aria-labelledby":u(I,q),"aria-describedby":u(T,G),"aria-invalid":V,placeholder:"unit"!==U||L||C?be(R)[1]:"",autoComplete:D,styleType:"no-border"}),t(d,{"aria-hidden":!0,id:q,children:"Enter unit number"}),t(d,{id:G,"aria-live":"polite",children:re})]})]}))},x="Invalid unit number";export{j as UnitNumberInput};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as a}from"react/jsx-runtime";import n from"clsx";import{useState as o,useRef as i,useMemo as l,useEffect as s}from"react";import{Input as d}from"../input/input.js";import{labelAddonContainer as u}from"../input-group/input-group.styles.js";import{VisuallyHidden as c,concatIds as p}from"../shared/accessibility/index.js";import{InputWrapper as m}from"../shared/input-wrapper/input-wrapper.js";import{Typography as f}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as h}from"../util/simple-id-generator.js";import{StringHelper as b}from"../util/string-helper.js";import"@react-aria/live-announcer";import{useNextInputState as y}from"../util/use-next-input-state.js";import{hashContainer as g,readOnlyContainer as v,unitNumberDivider as j,input as x,floorInput as B,unitNumberDividerInactive as C,unitInput as N}from"./unit-number-input.styles.js";const w=w=>{var{disabled:k,error:O,value:$,onChange:A,onBlur:R,onChangeRaw:D,onBlurRaw:I,readOnly:T,placeholder:V="00-8888",autoComplete:Z,"aria-labelledby":E,"aria-describedby":F,"aria-invalid":H,className:P}=w,U=e(w,["disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","aria-labelledby","aria-describedby","aria-invalid","className"]);const[_,z]=o(""),[K,q]=o(""),[G,J]=o("none"),M=h(),Q=`${M}-floor-label`,S=`${M}-unit-label`,W=`${M}-live-message`,X=i(null),Y=i(null),ee=i(null),re=i(_),te=i(K),ae=i(G),ne=e=>e.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g,""),oe=y({ref:Y,formatter:ne}),ie=y({ref:ee,formatter:ne}),le=l((()=>{let e="";const r=xe("Hash",_),t=xe("Dash",K);switch(G){case"floor":e=r;break;case"unit":e=_?[r,t].join(" "):t;break;default:e=""}return e}),[G,_,K]),se=e=>{re.current=e,z(e)},de=e=>{te.current=e,q(e)},ue=e=>{ae.current=e,J(e)};s((()=>{"floor"===G&&3===_.length&&ee.current&&ee.current.focus()}),[_]),s((()=>{be($)}),[$]);const ce=e=>{ue(e.target.name),e.target.select()},pe=e=>{const r=e.target.name,t=e.target.value,a=he(t);"floor"===r?(se(a),a!==_&&ye(a,r)):"unit"===r&&(de(a),a!==K&&ye(a,r))},me=e=>{const r=e.target.name;if("floor"===r){const e=oe();if(!e)return;const{nextValue:t,updateCaretPosition:a}=e;a(),se(t),ye(t,r)}else if("unit"===r){const e=ie();if(!e)return;const{nextValue:t,updateCaretPosition:a}=e;a(),de(t),ye(t,r)}},fe=e=>{var r;"Backspace"!==e.code&&"Backspace"!==e.key||"unit"===G&&0===K.length&&(null===(r=Y.current)||void 0===r||r.focus())},he=e=>/^[0-9]$/.test(e)?b.padValue(e,!0):e.toLocaleUpperCase(),be=e=>{if(e!==L)if(void 0===e||0===e.length)se(""),de("");else{const r=e.split("-");if(2===r.length){const e=r[0],t=r[1];se("floor"===G?e:he(e)),de("unit"===G?t:he(t))}}},ye=(e,r)=>{if(!A&&!D)return;const t={floor:re.current,unit:te.current};if(t[r]=e,A){const e=ve(t);A(e)}D&&D([t.floor,t.unit])},ge=()=>{if(!R&&!I)return;const e={floor:he(re.current),unit:he(te.current)};if(R){const r=ve(e);R(r)}I&&I([e.floor,e.unit])},ve=e=>{const r=[e.floor,e.unit];return e.floor.length>0&&e.unit.length>0?r.join("-"):r.every((e=>""===e))?"":L},je=e=>e.split("-");function xe(e,r){return r?`${e} ${Array.from(r).join(" ")}`:""}return r(m,Object.assign({},U,{ref:X,onClick:()=>{"none"===G&&Y.current&&Y.current.focus()},disabled:k,error:O,readOnly:T,tabIndex:-1,onBlur:e=>{X.current&&X.current.contains(e.relatedTarget)||"none"!==ae.current&&(ue("none"),ge())},className:P,children:[t("div",{"data-testid":"addon",className:n(g,u),"data-disabled":k,"data-read-only":T,children:"#"}),T&&$?(e=>{const a=e.split("-"),n=[xe("Hash",a[0]),xe("Dash",a[1])].join(" ");return r("div",{"data-testid":"readonly-display",tabIndex:0,role:"textbox","aria-readonly":!0,"aria-labelledby":E,"aria-describedby":F,"aria-invalid":H,className:v,children:[t(f.BodyBL,{children:a[0]}),t(f.BodyBL,{className:j,children:"-"}),t(f.BodyBL,{children:a[1]}),t(c,{children:n})]})})($):r(a,{children:[t(d,{name:"floor",maxLength:3,value:_,ref:Y,onFocus:ce,onBlur:pe,onChange:me,disabled:k,readOnly:T,type:"text",pattern:"[0-9A-Z]{2,3}","data-testid":"floor-input","aria-labelledby":p(E,Q),"aria-describedby":p(F,W),"aria-invalid":H,placeholder:"floor"!==G||T||k?je(V)[0]:"",autoComplete:Z,styleType:"no-border",className:n(x,B)}),t(c,{"aria-hidden":!0,id:Q,children:"Enter floor number"}),t(f.BodyBL,{className:n(j,0===_.length&&C),children:"-"}),t(d,{name:"unit",maxLength:5,value:K,ref:ee,onFocus:ce,onBlur:pe,onChange:me,onKeyDown:fe,disabled:k,readOnly:T,type:"text",pattern:"[0-9A-Z]{2,5}","data-testid":"unit-input","aria-labelledby":p(E,S),"aria-describedby":p(F,W),"aria-invalid":H,placeholder:"unit"!==G||T||k?je(V)[1]:"",autoComplete:Z,styleType:"no-border",className:n(x,B,N)}),t(c,{"aria-hidden":!0,id:S,children:"Enter unit number"}),t(c,{id:W,"aria-live":"polite",children:le})]})]}))},L="Invalid unit number";export{w as UnitNumberInput};
 //# sourceMappingURL=unit-number-input.js.map

package/unit-number/unit-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"unit-number-input.js","sources":["../../src/unit-number/unit-number-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator, StringHelper, useNextInputState } from \"../util\";\nimport type { UnitNumberInputProps } from \"./types\";\nimport {\n    FloorInput,\n    HashContainer,\n    ReadOnlyContainer,\n    ReadOnlyLabel,\n    UnitInput,\n    UnitNumberDivider,\n} from \"./unit-number-input.style\";\n\ntype FieldType = \"floor\" | \"unit\" | \"none\";\ntype ValueFieldTypes = Exclude<FieldType, \"none\">;\n\nexport const UnitNumberInput = ({\n    disabled,\n    error,\n    value,\n    onChange,\n    onBlur,\n    onChangeRaw,\n    onBlurRaw,\n    readOnly,\n    placeholder = \"00-8888\",\n    autoComplete,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...otherProps\n}: UnitNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [floorValue, _setFloorValue] = useState<string>(\"\");\n    const [unitValue, _setUnitValue] = useState<string>(\"\");\n    const [currentFocus, _setCurrentFocus] = useState<FieldType>(\"none\");\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n    const floorLabelId = `${internalId}-floor-label`;\n    const unitLabelId = `${internalId}-unit-label`;\n    const liveMessageId = `${internalId}-live-message`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const floorInputRef = useRef<HTMLInputElement>(null);\n    const unitInputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * Have to use refs to allow the state values to be accessible\n     * by the event listener callback functions\n     * Reference:\n     * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n     */\n\n    const floorValueStateRef = useRef<string>(floorValue);\n    const unitValueStateRef = useRef<string>(unitValue);\n    const currentFocusStateRef = useRef<FieldType>(currentFocus);\n\n    const formatter = (value: string) =>\n        value.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g, \"\");\n    const getNextFloorInputState = useNextInputState({\n        ref: floorInputRef,\n        formatter,\n    });\n    const getNextUnitInputState = useNextInputState({\n        ref: unitInputRef,\n        formatter,\n    });\n\n    const liveMessage = useMemo(() => {\n        let msg = \"\";\n        const floorMsg = formatPhraseWithPrefix(\"Hash\", floorValue);\n        const unitMsg = formatPhraseWithPrefix(\"Dash\", unitValue);\n        switch (currentFocus) {\n            case \"floor\":\n                msg = floorMsg;\n                break;\n            case \"unit\":\n                msg = floorValue ? [floorMsg, unitMsg].join(\" \") : unitMsg;\n                break;\n            default:\n                msg = \"\";\n        }\n        return msg;\n    }, [currentFocus, floorValue, unitValue]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setFloorValue = (data: string) => {\n        floorValueStateRef.current = data;\n        _setFloorValue(data);\n    };\n\n    const setUnitValue = (data: string) => {\n        unitValueStateRef.current = data;\n        _setUnitValue(data);\n    };\n\n    const setCurrentFocus = (data: FieldType) => {\n        currentFocusStateRef.current = data;\n        _setCurrentFocus(data);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        // Auto focus feature\n        if (\n            currentFocus === \"floor\" &&\n            floorValue.length === 3 &&\n            unitInputRef.current\n        ) {\n            unitInputRef.current.focus();\n        }\n    }, [floorValue]);\n\n    useEffect(() => {\n        updateValues(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setCurrentFocus(event.target.name as FieldType);\n        event.target.select();\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value;\n        const formattedInput = formatInput(targetValue);\n\n        if (targetName === \"floor\") {\n            setFloorValue(formattedInput);\n            if (formattedInput !== floorValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        } else if (targetName === \"unit\") {\n            setUnitValue(formattedInput);\n            if (formattedInput !== unitValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n\n        if (targetName === \"floor\") {\n            const nextInputState = getNextFloorInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setFloorValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        } else if (targetName === \"unit\") {\n            const nextInputState = getNextUnitInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setUnitValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        }\n    };\n\n    const handleNodeClick = () => {\n        if (currentFocus === \"none\" && floorInputRef.current) {\n            floorInputRef.current.focus();\n        }\n    };\n\n    const handleNodeBlur = (event: React.FocusEvent) => {\n        if (nodeRef.current && nodeRef.current.contains(event.relatedTarget)) {\n            // internal element received focus\n            return;\n        }\n        if (currentFocusStateRef.current !== \"none\") {\n            setCurrentFocus(\"none\");\n            performOnBlurHandler();\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 === \"unit\" && unitValue.length === 0) {\n                floorInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const formatInput = (value: string) => {\n        return /^[0-9]$/.test(value)\n            ? StringHelper.padValue(value, true)\n            : value.toLocaleUpperCase();\n    };\n\n    const updateValues = (value: string | undefined) => {\n        if (value === INVALID_VALUE) {\n            return;\n        } else if (value === undefined || value.length === 0) {\n            setFloorValue(\"\");\n            setUnitValue(\"\");\n        } else {\n            const valueArr = value.split(\"-\");\n            if (valueArr.length === 2) {\n                // Valid value\n                const floor = valueArr[0];\n                const unit = valueArr[1];\n                setFloorValue(\n                    currentFocus === \"floor\" ? floor : formatInput(floor)\n                );\n                setUnitValue(\n                    currentFocus === \"unit\" ? unit : formatInput(unit)\n                );\n            }\n        }\n    };\n\n    const performOnChangeHandler = (\n        changeValue: string,\n        field: ValueFieldTypes\n    ) => {\n        if (!onChange && !onChangeRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: floorValueStateRef.current,\n            unit: unitValueStateRef.current,\n        };\n\n        // Update the specific field value\n        values[field] = changeValue;\n\n        if (onChange) {\n            const returnValue = getFormattedValue(values);\n            onChange(returnValue);\n        }\n\n        if (onChangeRaw) {\n            onChangeRaw([values.floor, values.unit]);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (!onBlur && !onBlurRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: formatInput(floorValueStateRef.current),\n            unit: formatInput(unitValueStateRef.current),\n        };\n\n        if (onBlur) {\n            const returnValue = getFormattedValue(values);\n            onBlur(returnValue);\n        }\n\n        if (onBlurRaw) {\n            onBlurRaw([values.floor, values.unit]);\n        }\n    };\n\n    const getFormattedValue = (values: Record<ValueFieldTypes, string>) => {\n        const valueArr = [values.floor, values.unit];\n\n        if (values.floor.length > 0 && values.unit.length > 0) {\n            return valueArr.join(\"-\");\n        } else if (valueArr.every((value) => value === \"\")) {\n            return \"\";\n        } else {\n            return INVALID_VALUE;\n        }\n    };\n\n    const getPlaceholder = (value: string) => {\n        return value.split(\"-\");\n    };\n\n    function formatPhraseWithPrefix(prefix: string, v: string) {\n        return v ? `${prefix} ${Array.from(v).join(\" \")}` : \"\";\n    }\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputs = () => (\n        <>\n            <FloorInput\n                name=\"floor\"\n                maxLength={3}\n                value={floorValue}\n                ref={floorInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,3}\"\n                data-testid=\"floor-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, floorLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"floor\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[0]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n            />\n            <VisuallyHidden aria-hidden id={floorLabelId}>\n                Enter floor number\n            </VisuallyHidden>\n            <UnitNumberDivider $inactive={floorValue.length === 0}>\n                -\n            </UnitNumberDivider>\n            <UnitInput\n                name=\"unit\"\n                maxLength={5}\n                value={unitValue}\n                ref={unitInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,5}\"\n                data-testid=\"unit-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, unitLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"unit\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[1]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n            />\n            <VisuallyHidden aria-hidden id={unitLabelId}>\n                Enter unit number\n            </VisuallyHidden>\n            {/** Live message for AT reader to read with the combination of prefix and current value for both floor input and unit input */}\n            <VisuallyHidden id={liveMessageId} aria-live=\"polite\">\n                {liveMessage}\n            </VisuallyHidden>\n        </>\n    );\n\n    const renderReadOnly = (displayValue: string) => {\n        const displayValueArr = displayValue.split(\"-\");\n        const liveMessageForReadOnly = [\n            formatPhraseWithPrefix(\"Hash\", displayValueArr[0]),\n            formatPhraseWithPrefix(\"Dash\", displayValueArr[1]),\n        ].join(\" \");\n\n        return (\n            <ReadOnlyContainer\n                data-testid=\"readonly-display\"\n                tabIndex={0}\n                role=\"textbox\"\n                aria-readonly\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-invalid={ariaInvalid}\n            >\n                <ReadOnlyLabel>{displayValueArr[0]}</ReadOnlyLabel>\n                <UnitNumberDivider>-</UnitNumberDivider>\n                <ReadOnlyLabel>{displayValueArr[1]}</ReadOnlyLabel>\n                <VisuallyHidden>{liveMessageForReadOnly}</VisuallyHidden>\n            </ReadOnlyContainer>\n        );\n    };\n\n    return (\n        <InputWrapper\n            {...otherProps}\n            ref={nodeRef}\n            onClick={handleNodeClick}\n            $disabled={disabled}\n            $error={error}\n            $readOnly={readOnly}\n            tabIndex={-1}\n            onBlur={handleNodeBlur}\n        >\n            <HashContainer\n                data-testid=\"addon\"\n                $disabled={disabled}\n                $readOnly={readOnly}\n            >\n                #\n            </HashContainer>\n            {readOnly && value ? renderReadOnly(value) : renderInputs()}\n        </InputWrapper>\n    );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst INVALID_VALUE = \"Invalid unit number\";\n"],"names":["UnitNumberInput","_a","disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","floorValue","_setFloorValue","useState","unitValue","_setUnitValue","currentFocus","_setCurrentFocus","internalId","SimpleIdGenerator","generate","floorLabelId","unitLabelId","liveMessageId","nodeRef","useRef","floorInputRef","unitInputRef","floorValueStateRef","unitValueStateRef","currentFocusStateRef","formatter","toLocaleUpperCase","replace","getNextFloorInputState","useNextInputState","ref","getNextUnitInputState","liveMessage","useMemo","msg","floorMsg","formatPhraseWithPrefix","unitMsg","join","setFloorValue","data","current","setUnitValue","setCurrentFocus","useEffect","length","focus","updateValues","handleFocus","event","target","name","select","handleBlur","targetName","targetValue","formattedInput","formatInput","performOnChangeHandler","handleChange","nextInputState","nextValue","updateCaretPosition","handleKeyDown","code","key","test","StringHelper","padValue","INVALID_VALUE","undefined","valueArr","split","floor","unit","changeValue","field","values","returnValue","getFormattedValue","performOnBlurHandler","every","getPlaceholder","prefix","v","Array","from","_jsxs","InputWrapper","Object","assign","onClick","$error","$readOnly","tabIndex","contains","relatedTarget","_jsx","HashContainer","$disabled","children","displayValue","displayValueArr","liveMessageForReadOnly","ReadOnlyContainer","role","ReadOnlyLabel","UnitNumberDivider","VisuallyHidden","renderReadOnly","_Fragment","FloorInput","maxLength","onFocus","type","pattern","concatIds","styleType","id","$inactive","UnitInput","onKeyDown"],"mappings":"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"}
+{"version":3,"file":"unit-number-input.js","sources":["../../src/unit-number/unit-number-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport * as inputGroupStyles from \"../input-group/input-group.styles\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId, useNextInputState } from \"../util\";\nimport type { UnitNumberInputProps } from \"./types\";\nimport * as styles from \"./unit-number-input.styles\";\n\ntype FieldType = \"floor\" | \"unit\" | \"none\";\ntype ValueFieldTypes = Exclude<FieldType, \"none\">;\n\n// @catalog\n/**\n * A two-field input for entering Singapore-style unit numbers in `floor-unit` format.\n *\n * Use `UnitNumberInput` when you need a structured unit number entry that splits\n * floor and unit into separate fields.\n * @keywords address, field, floor, form, input, unit\n */\nexport const UnitNumberInput = ({\n    disabled,\n    error,\n    value,\n    onChange,\n    onBlur,\n    onChangeRaw,\n    onBlurRaw,\n    readOnly,\n    placeholder = \"00-8888\",\n    autoComplete,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    className,\n    ...otherProps\n}: UnitNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [floorValue, _setFloorValue] = useState<string>(\"\");\n    const [unitValue, _setUnitValue] = useState<string>(\"\");\n    const [currentFocus, _setCurrentFocus] = useState<FieldType>(\"none\");\n    const internalId = useId();\n    const floorLabelId = `${internalId}-floor-label`;\n    const unitLabelId = `${internalId}-unit-label`;\n    const liveMessageId = `${internalId}-live-message`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const floorInputRef = useRef<HTMLInputElement>(null);\n    const unitInputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * Have to use refs to allow the state values to be accessible\n     * by the event listener callback functions\n     * Reference:\n     * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n     */\n\n    const floorValueStateRef = useRef<string>(floorValue);\n    const unitValueStateRef = useRef<string>(unitValue);\n    const currentFocusStateRef = useRef<FieldType>(currentFocus);\n\n    const formatter = (value: string) =>\n        value.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g, \"\");\n    const getNextFloorInputState = useNextInputState({\n        ref: floorInputRef,\n        formatter,\n    });\n    const getNextUnitInputState = useNextInputState({\n        ref: unitInputRef,\n        formatter,\n    });\n\n    const liveMessage = useMemo(() => {\n        let msg = \"\";\n        const floorMsg = formatPhraseWithPrefix(\"Hash\", floorValue);\n        const unitMsg = formatPhraseWithPrefix(\"Dash\", unitValue);\n        switch (currentFocus) {\n            case \"floor\":\n                msg = floorMsg;\n                break;\n            case \"unit\":\n                msg = floorValue ? [floorMsg, unitMsg].join(\" \") : unitMsg;\n                break;\n            default:\n                msg = \"\";\n        }\n        return msg;\n    }, [currentFocus, floorValue, unitValue]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setFloorValue = (data: string) => {\n        floorValueStateRef.current = data;\n        _setFloorValue(data);\n    };\n\n    const setUnitValue = (data: string) => {\n        unitValueStateRef.current = data;\n        _setUnitValue(data);\n    };\n\n    const setCurrentFocus = (data: FieldType) => {\n        currentFocusStateRef.current = data;\n        _setCurrentFocus(data);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        // Auto focus feature\n        if (\n            currentFocus === \"floor\" &&\n            floorValue.length === 3 &&\n            unitInputRef.current\n        ) {\n            unitInputRef.current.focus();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [floorValue]);\n\n    useEffect(() => {\n        updateValues(value);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setCurrentFocus(event.target.name as FieldType);\n        event.target.select();\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value;\n        const formattedInput = formatInput(targetValue);\n\n        if (targetName === \"floor\") {\n            setFloorValue(formattedInput);\n            if (formattedInput !== floorValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        } else if (targetName === \"unit\") {\n            setUnitValue(formattedInput);\n            if (formattedInput !== unitValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n\n        if (targetName === \"floor\") {\n            const nextInputState = getNextFloorInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setFloorValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        } else if (targetName === \"unit\") {\n            const nextInputState = getNextUnitInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setUnitValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        }\n    };\n\n    const handleNodeClick = () => {\n        if (currentFocus === \"none\" && floorInputRef.current) {\n            floorInputRef.current.focus();\n        }\n    };\n\n    const handleNodeBlur = (event: React.FocusEvent) => {\n        if (nodeRef.current && nodeRef.current.contains(event.relatedTarget)) {\n            // internal element received focus\n            return;\n        }\n        if (currentFocusStateRef.current !== \"none\") {\n            setCurrentFocus(\"none\");\n            performOnBlurHandler();\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 === \"unit\" && unitValue.length === 0) {\n                floorInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const formatInput = (value: string) => {\n        return /^[0-9]$/.test(value)\n            ? StringHelper.padValue(value, true)\n            : value.toLocaleUpperCase();\n    };\n\n    const updateValues = (value: string | undefined) => {\n        if (value === INVALID_VALUE) {\n            return;\n        } else if (value === undefined || value.length === 0) {\n            setFloorValue(\"\");\n            setUnitValue(\"\");\n        } else {\n            const valueArr = value.split(\"-\");\n            if (valueArr.length === 2) {\n                // Valid value\n                const floor = valueArr[0];\n                const unit = valueArr[1];\n                setFloorValue(\n                    currentFocus === \"floor\" ? floor : formatInput(floor)\n                );\n                setUnitValue(\n                    currentFocus === \"unit\" ? unit : formatInput(unit)\n                );\n            }\n        }\n    };\n\n    const performOnChangeHandler = (\n        changeValue: string,\n        field: ValueFieldTypes\n    ) => {\n        if (!onChange && !onChangeRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: floorValueStateRef.current,\n            unit: unitValueStateRef.current,\n        };\n\n        // Update the specific field value\n        values[field] = changeValue;\n\n        if (onChange) {\n            const returnValue = getFormattedValue(values);\n            onChange(returnValue);\n        }\n\n        if (onChangeRaw) {\n            onChangeRaw([values.floor, values.unit]);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (!onBlur && !onBlurRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: formatInput(floorValueStateRef.current),\n            unit: formatInput(unitValueStateRef.current),\n        };\n\n        if (onBlur) {\n            const returnValue = getFormattedValue(values);\n            onBlur(returnValue);\n        }\n\n        if (onBlurRaw) {\n            onBlurRaw([values.floor, values.unit]);\n        }\n    };\n\n    const getFormattedValue = (values: Record<ValueFieldTypes, string>) => {\n        const valueArr = [values.floor, values.unit];\n\n        if (values.floor.length > 0 && values.unit.length > 0) {\n            return valueArr.join(\"-\");\n        } else if (valueArr.every((value) => value === \"\")) {\n            return \"\";\n        } else {\n            return INVALID_VALUE;\n        }\n    };\n\n    const getPlaceholder = (value: string) => {\n        return value.split(\"-\");\n    };\n\n    function formatPhraseWithPrefix(prefix: string, v: string) {\n        return v ? `${prefix} ${Array.from(v).join(\" \")}` : \"\";\n    }\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputs = () => (\n        <>\n            <Input\n                name=\"floor\"\n                maxLength={3}\n                value={floorValue}\n                ref={floorInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,3}\"\n                data-testid=\"floor-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, floorLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"floor\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[0]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n                className={clsx(styles.input, styles.floorInput)}\n            />\n            <VisuallyHidden aria-hidden id={floorLabelId}>\n                Enter floor number\n            </VisuallyHidden>\n            <Typography.BodyBL\n                className={clsx(\n                    styles.unitNumberDivider,\n                    floorValue.length === 0 && styles.unitNumberDividerInactive\n                )}\n            >\n                -\n            </Typography.BodyBL>\n            <Input\n                name=\"unit\"\n                maxLength={5}\n                value={unitValue}\n                ref={unitInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,5}\"\n                data-testid=\"unit-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, unitLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"unit\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[1]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n                className={clsx(\n                    styles.input,\n                    styles.floorInput,\n                    styles.unitInput\n                )}\n            />\n            <VisuallyHidden aria-hidden id={unitLabelId}>\n                Enter unit number\n            </VisuallyHidden>\n            {/** Live message for AT reader to read with the combination of prefix and current value for both floor input and unit input */}\n            <VisuallyHidden id={liveMessageId} aria-live=\"polite\">\n                {liveMessage}\n            </VisuallyHidden>\n        </>\n    );\n\n    const renderReadOnly = (displayValue: string) => {\n        const displayValueArr = displayValue.split(\"-\");\n        const liveMessageForReadOnly = [\n            formatPhraseWithPrefix(\"Hash\", displayValueArr[0]),\n            formatPhraseWithPrefix(\"Dash\", displayValueArr[1]),\n        ].join(\" \");\n\n        return (\n            <div\n                data-testid=\"readonly-display\"\n                tabIndex={0}\n                role=\"textbox\"\n                aria-readonly\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-invalid={ariaInvalid}\n                className={styles.readOnlyContainer}\n            >\n                <Typography.BodyBL>{displayValueArr[0]}</Typography.BodyBL>\n                <Typography.BodyBL className={styles.unitNumberDivider}>\n                    -\n                </Typography.BodyBL>\n                <Typography.BodyBL>{displayValueArr[1]}</Typography.BodyBL>\n                <VisuallyHidden>{liveMessageForReadOnly}</VisuallyHidden>\n            </div>\n        );\n    };\n\n    return (\n        <InputWrapper\n            {...otherProps}\n            ref={nodeRef}\n            onClick={handleNodeClick}\n            disabled={disabled}\n            error={error}\n            readOnly={readOnly}\n            tabIndex={-1}\n            onBlur={handleNodeBlur}\n            className={className}\n        >\n            <div\n                data-testid=\"addon\"\n                className={clsx(\n                    styles.hashContainer,\n                    inputGroupStyles.labelAddonContainer\n                )}\n                data-disabled={disabled}\n                data-read-only={readOnly}\n            >\n                #\n            </div>\n            {readOnly && value ? renderReadOnly(value) : renderInputs()}\n        </InputWrapper>\n    );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst INVALID_VALUE = \"Invalid unit number\";\n"],"names":["UnitNumberInput","_a","disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","ariaLabelledBy","ariaDescribedBy","ariaInvalid","className","otherProps","__rest","floorValue","_setFloorValue","useState","unitValue","_setUnitValue","currentFocus","_setCurrentFocus","internalId","useId","floorLabelId","unitLabelId","liveMessageId","nodeRef","useRef","floorInputRef","unitInputRef","floorValueStateRef","unitValueStateRef","currentFocusStateRef","formatter","toLocaleUpperCase","replace","getNextFloorInputState","useNextInputState","ref","getNextUnitInputState","liveMessage","useMemo","msg","floorMsg","formatPhraseWithPrefix","unitMsg","join","setFloorValue","data","current","setUnitValue","setCurrentFocus","useEffect","length","focus","updateValues","handleFocus","event","target","name","select","handleBlur","targetName","targetValue","formattedInput","formatInput","performOnChangeHandler","handleChange","nextInputState","nextValue","updateCaretPosition","handleKeyDown","code","key","test","StringHelper","padValue","INVALID_VALUE","undefined","valueArr","split","floor","unit","changeValue","field","values","returnValue","getFormattedValue","performOnBlurHandler","every","getPlaceholder","prefix","v","Array","from","_jsxs","InputWrapper","Object","assign","onClick","tabIndex","contains","relatedTarget","children","_jsx","clsx","styles.hashContainer","inputGroupStyles.labelAddonContainer","displayValue","displayValueArr","liveMessageForReadOnly","role","styles.readOnlyContainer","Typography","BodyBL","styles.unitNumberDivider","VisuallyHidden","renderReadOnly","_Fragment","Input","maxLength","onFocus","type","pattern","concatIds","styleType","styles.input","styles.floorInput","id","styles.unitNumberDividerInactive","onKeyDown","styles.unitInput"],"mappings":"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"}

package/unit-number/unit-number-input.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const hashContainer: import("@linaria/core").LinariaClassName;
+export declare const input: import("@linaria/core").LinariaClassName;
+export declare const floorInput: import("@linaria/core").LinariaClassName;
+export declare const unitInput: import("@linaria/core").LinariaClassName;
+export declare const unitNumberDivider: import("@linaria/core").LinariaClassName;
+export declare const unitNumberDividerInactive: import("@linaria/core").LinariaClassName;
+export declare const readOnlyContainer: import("@linaria/core").LinariaClassName;

package/unit-number/unit-number-input.styles.js

@@ -0,0 +1,2 @@
+import"./unit-number-input.styles_8yizj.css";const t="h1ujh1ah",u="i1a7rbgo",r="fqv7th5",i="u1g8qqjx",n="u52196f",s="urthzty",h="rwsbmaf";export{r as floorInput,t as hashContainer,u as input,h as readOnlyContainer,i as unitInput,n as unitNumberDivider,s as unitNumberDividerInactive};
+//# sourceMappingURL=unit-number-input.styles.js.map

package/unit-number/unit-number-input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unit-number-input.styles.js","sources":["../../src/unit-number/unit-number-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\nexport const hashContainer = css`\n    margin-right: 0.5rem;\n`;\n\nexport const input = css`\n    input {\n        text-align: center;\n    }\n`;\n\nexport const floorInput = css`\n    width: 2.5rem;\n`;\n\nexport const unitInput = css`\n    /* Cheat to balance the placeholder look while ensuring enough width */\n    margin-left: 0.5rem;\n    width: 6rem;\n\n    input {\n        text-align: left;\n    }\n`;\n\nexport const unitNumberDivider = css`\n    margin: 0 0.25rem;\n`;\n\nexport const unitNumberDividerInactive = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const readOnlyContainer = css`\n    display: flex;\n    align-items: center;\n    height: calc(3rem - 2px); /* exclude top and bottom borders */\n`;\n"],"names":["hashContainer","input","floorInput","unitInput","unitNumberDivider","unitNumberDividerInactive","readOnlyContainer"],"mappings":"wEAIO,MAAMA,EAAa,WAIbC,EAAK,WAMLC,EAAU,UAIVC,EAAS,WAUTC,EAAiB,UAIjBC,EAAyB,UAIzBC,EAAiB"}

package/unit-number/unit-number-input.styles_8yizj.css

@@ -0,0 +1,7 @@
+@layer fds{.h1ujh1ah{margin-right:0.5rem;}
+.i1a7rbgo input{text-align:center;}
+.fqv7th5{width:2.5rem;}
+.u1g8qqjx{margin-left:0.5rem;width:6rem;}.u1g8qqjx input{text-align:left;}
+.u52196f{margin:0 0.25rem;}
+.urthzty{color:var(--fds-colour-text-disabled);}
+.rwsbmaf{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;height:calc(3rem - 2px);}}

package/util/index.d.ts

@@ -13,4 +13,5 @@ export * from "./use-mount";
 export * from "./use-next-input-state";
 export * from "./use-previous";
 export * from "./use-state-ref";
+export * from "./use-throttle";
 export * from "./version";

package/util/is-styled-components.d.ts

@@ -0,0 +1,5 @@
+type StyledComponentBrand = {
+    readonly _sc: symbol;
+};
+export default function isStyledComponent(target: any): target is StyledComponentBrand;
+export {};

package/util/is-styled-components.js

@@ -0,0 +1,2 @@
+function t(t){return null!=t&&("function"==typeof t||"object"==typeof t)&&"styledComponentId"in t}export{t as default};
+//# sourceMappingURL=is-styled-components.js.map

package/util/is-styled-components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-styled-components.js","sources":["../../src/util/is-styled-components.ts"],"sourcesContent":["/*\n    Extracted isStyledComponent function from styled-components repo \n    Refer to the original implementation here:\n    https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/isStyledComponent.ts\n*/\n\ntype StyledComponentBrand = { readonly _sc: symbol };\n\nexport default function isStyledComponent(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    target: any\n): target is StyledComponentBrand {\n    return (\n        target != null &&\n        (typeof target === \"function\" || typeof target === \"object\") &&\n        \"styledComponentId\" in target\n    );\n}\n"],"names":["isStyledComponent","target"],"mappings":"AAQc,SAAUA,EAEpBC,GAEA,OACc,MAAVA,IACmB,mBAAXA,GAA2C,iBAAXA,IACxC,sBAAuBA,CAE/B"}

package/util/merge-refs.d.ts

@@ -1,2 +1,2 @@
 import type { Ref } from "react";
-export declare const mergeRefs: <T>(...refs: Ref<T>[]) => (value: T | null) => (() => void) | undefined;
+export declare const mergeRefs: <T>(...refs: (Ref<T> | undefined)[]) => (value: T | null) => (() => void) | undefined;

package/util/merge-refs.js.map

@@ -1 +1 @@
-{"version":3,"file":"merge-refs.js","sources":["../../src/util/merge-refs.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\n\nimport { isReact19 } from \"./version\";\n\nexport const mergeRefs = <T>(...refs: Ref<T>[]) => {\n    return (value: T | null) => {\n        const cleanups: (() => void)[] = [];\n\n        for (const ref of refs) {\n            if (typeof ref === \"function\") {\n                const cleanup = ref(value);\n                const isCleanup = typeof cleanup === \"function\";\n                cleanups.push(isCleanup ? cleanup : () => ref(null));\n            } else if (ref) {\n                (ref as MutableRefObject<T | null>).current = value;\n                cleanups.push(() => {\n                    (ref as MutableRefObject<T | null>).current = null;\n                });\n            }\n        }\n\n        if (isReact19()) {\n            return () => {\n                for (const cleanup of cleanups) cleanup();\n            };\n        }\n    };\n};\n"],"names":["mergeRefs","refs","value","cleanups","ref","cleanup","isCleanup","push","current","isReact19"],"mappings":"+CAIaA,EAAY,IAAOC,IACpBC,IACJ,MAAMC,EAA2B,GAEjC,IAAK,MAAMC,KAAOH,EACd,GAAmB,mBAARG,EAAoB,CAC3B,MAAMC,EAAUD,EAAIF,GACdI,EAA+B,mBAAZD,EACzBF,EAASI,KAAKD,EAAYD,EAAU,IAAMD,EAAI,MAClD,MAAWA,IACNA,EAAmCI,QAAUN,EAC9CC,EAASI,MAAK,KACTH,EAAmCI,QAAU,IAAI,KAK9D,GAAIC,IACA,MAAO,KACH,IAAK,MAAMJ,KAAWF,EAAUE,GAAS,CAEjD"}
+{"version":3,"file":"merge-refs.js","sources":["../../src/util/merge-refs.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\n\nimport { isReact19 } from \"./version\";\n\nexport const mergeRefs = <T>(...refs: (Ref<T> | undefined)[]) => {\n    return (value: T | null) => {\n        const cleanups: (() => void)[] = [];\n\n        for (const ref of refs) {\n            if (typeof ref === \"function\") {\n                const cleanup = ref(value);\n                const isCleanup = typeof cleanup === \"function\";\n                cleanups.push(isCleanup ? cleanup : () => ref(null));\n            } else if (ref) {\n                (ref as MutableRefObject<T | null>).current = value;\n                cleanups.push(() => {\n                    (ref as MutableRefObject<T | null>).current = null;\n                });\n            }\n        }\n\n        if (isReact19()) {\n            return () => {\n                for (const cleanup of cleanups) cleanup();\n            };\n        }\n    };\n};\n"],"names":["mergeRefs","refs","value","cleanups","ref","cleanup","isCleanup","push","current","isReact19"],"mappings":"+CAIaA,EAAY,IAAOC,IACpBC,IACJ,MAAMC,EAA2B,GAEjC,IAAK,MAAMC,KAAOH,EACd,GAAmB,mBAARG,EAAoB,CAC3B,MAAMC,EAAUD,EAAIF,GACdI,EAA+B,mBAAZD,EACzBF,EAASI,KAAKD,EAAYD,EAAU,IAAMD,EAAI,MAClD,MAAWA,IACNA,EAAmCI,QAAUN,EAC9CC,EAASI,MAAK,KACTH,EAAmCI,QAAU,IAAI,KAK9D,GAAIC,IACA,MAAO,KACH,IAAK,MAAMJ,KAAWF,EAAUE,GAAS,CAEjD"}

package/util/simple-id-generator.d.ts

@@ -4,3 +4,4 @@ export declare class SimpleIdGenerator {
      */
     static generate(): string;
 }
+export declare const useId: () => string;

package/util/simple-id-generator.js

@@ -1,2 +1,2 @@
-class t{static generate(){return Math.random().toString(36).substring(2,9)}}export{t as SimpleIdGenerator};
+import t from"react";var r;class e{static generate(){return Math.random().toString(36).substring(2,9)}}const n=null!==(r=t.useId)&&void 0!==r?r:()=>{const[r]=t.useState((()=>e.generate()));return r};export{e as SimpleIdGenerator,n as useId};
 //# sourceMappingURL=simple-id-generator.js.map

package/util/simple-id-generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-id-generator.js","sources":["../../src/util/simple-id-generator.ts"],"sourcesContent":["export class SimpleIdGenerator {\n    /**\n     * Generates a simple generator for element ids\n     */\n    public static generate(): string {\n        return Math.random().toString(36).substring(2, 9);\n    }\n}\n"],"names":["SimpleIdGenerator","generate","Math","random","toString","substring"],"mappings":"MAAaA,EAIF,eAAOC,GACV,OAAOC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,EACnD"}
+{"version":3,"file":"simple-id-generator.js","sources":["../../src/util/simple-id-generator.ts"],"sourcesContent":["import React from \"react\";\n\nexport class SimpleIdGenerator {\n    /**\n     * Generates a simple generator for element ids\n     */\n    public static generate(): string {\n        return Math.random().toString(36).substring(2, 9);\n    }\n}\n\nconst useSimpleId = () => {\n    const [id] = React.useState(() => SimpleIdGenerator.generate());\n    return id;\n};\n\n// TODO: can be removed when React 17 support is dropped\n// @ts-expect-error useId is only available in React 18+\nexport const useId: () => string = React.useId ?? useSimpleId;\n"],"names":["SimpleIdGenerator","generate","Math","random","toString","substring","useId","_a","React","id","useState"],"mappings":"iCAEaA,EAIF,eAAOC,GACV,OAAOC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,EACnD,EAGJ,MAOaC,EAAiC,QAAXC,EAAAC,EAAMF,aAAK,IAAAC,EAAAA,EAP1B,KAChB,MAAOE,GAAMD,EAAME,UAAS,IAAMV,EAAkBC,aACpD,OAAOQ,CAAE"}

package/util/string-helper.d.ts

@@ -46,9 +46,10 @@ export declare class StringHelper {
     static getTextWidth(text: string, font: string): number;
     static maskValue(value: string, options: MaskValueOptions): string;
     private static determineStartAndEndIndex;
-    private static ordinalPluralRules;
-    private static suffixes;
+    private static readonly ordinalPluralRules;
+    private static readonly suffixes;
     static formatOrdinal(n: number): string;
     static getMaskedDescription(value: string, displayMaskState: "masked" | "unmasked", maskRange?: number[]): string;
+    static joinNonEmptyStrings(strings: (string | undefined | null)[], delimiter?: string): string;
 }
 export {};

package/util/string-helper.js

@@ -1,2 +1,2 @@
-class t{static transformWithSpaces(t,e){const n="(.{"+e+"})";return t.replace(/[^\dA-Z]/gi,"").replace(new RegExp(n,"g"),"$1 ").trim()}static padValue(t,e){if("0"===t)return e?t:t.padStart(2,"0");if(""===t)return t;return parseInt(t).toString().padStart(2,"0")}static shouldTruncateToTwoLines(t,e){const n=Math.floor(e/9);return t.length>=2*n||1===t.split(" ").length&&t.length>n}static truncateOneLine(t,e,n,r,s=8){let a=0;e>n&&(a=Math.floor((e-n)/s));const i=r+a;if(i<t.length){const e=Math.floor(i/2);return t.substring(0,e)+" ... "+t.substring(t.length-e,t.length)}return t}static truncateTwoLines(t,e,n,r=1.2){const s=Math.floor(2*e/(.6*n))*(2/r);if(t.length<=s)return t;const a=Math.floor(.6*s),i=Math.floor(.2*s);return`${t.substring(0,a)}...${t.substring(t.length-i)}`}static getTextWidth(e,n){if("undefined"==typeof document)return 0;const r=(t.getTextWidth.canvas||(t.getTextWidth.canvas=document.createElement("canvas"))).getContext("2d");r.font=n;return r.measureText(e).width}static maskValue(e,n){if(!e)return e;const{maskRange:r,unmaskRange:s,maskChar:a="•",maskRegex:i,maskTransformer:u}=n;if(u)return u(e);if(i)return e.replace(i,a);if(r){const{startIndex:n,endIndex:s}=t.determineStartAndEndIndex(r[0],r[1]);return e.substring(0,n)+a.repeat(e.substring(n,s+1).length)+e.substring(s+1)}if(s){const{startIndex:n,endIndex:r}=t.determineStartAndEndIndex(s[0],s[1]);return a.repeat(e.substring(0,n).length)+e.substring(n,r+1)+a.repeat(e.substring(r+1).length)}return e}static determineStartAndEndIndex(t,e){return t<e?{startIndex:t,endIndex:e}:{startIndex:e,endIndex:t}}static formatOrdinal(e){const n=t.ordinalPluralRules.select(e);return`${e}${t.suffixes.get(n)}`}static getMaskedDescription(t,e,n){if(!t||"masked"!==e||!n)return"";const[r,s]=n,a=r>0,i=s<t.length-1,u=a?t.substring(0,r):"",d=i?t.substring(s+1):"";return a&&i?`Starting with ${u} and ending with ${d}`:a?`Starting with ${u}`:i?`Ending with ${d}`:""}}t.ordinalPluralRules=new Intl.PluralRules("en",{type:"ordinal"}),t.suffixes=new Map([["one","st"],["two","nd"],["few","rd"],["other","th"]]);export{t as StringHelper};
+class t{static transformWithSpaces(t,e){const n="(.{"+e+"})";return t.replace(/[^\dA-Z]/gi,"").replace(new RegExp(n,"g"),"$1 ").trim()}static padValue(t,e){if("0"===t)return e?t:t.padStart(2,"0");if(""===t)return t;return parseInt(t).toString().padStart(2,"0")}static shouldTruncateToTwoLines(t,e){const n=Math.floor(e/9);return t.length>=2*n||1===t.split(" ").length&&t.length>n}static truncateOneLine(t,e,n,r,s=8){let a=0;e>n&&(a=Math.floor((e-n)/s));const i=r+a;if(i<t.length){const e=Math.floor(i/2);return t.substring(0,e)+" ... "+t.substring(t.length-e,t.length)}return t}static truncateTwoLines(t,e,n,r=1.2){const s=Math.floor(2*e/(.6*n))*(2/r);if(t.length<=s)return t;const a=Math.floor(.6*s),i=Math.floor(.2*s);return`${t.substring(0,a)}...${t.substring(t.length-i)}`}static getTextWidth(t,e){if("undefined"==typeof document)return 0;const n=(this.getTextWidth.canvas||(this.getTextWidth.canvas=document.createElement("canvas"))).getContext("2d");n.font=e;return n.measureText(t).width}static maskValue(t,e){if(!t)return t;const{maskRange:n,unmaskRange:r,maskChar:s="•",maskRegex:a,maskTransformer:i}=e;if(i)return i(t);if(a)return t.replace(a,s);if(n){const{startIndex:e,endIndex:r}=this.determineStartAndEndIndex(n[0],n[1]);return t.substring(0,e)+s.repeat(t.substring(e,r+1).length)+t.substring(r+1)}if(r){const{startIndex:e,endIndex:n}=this.determineStartAndEndIndex(r[0],r[1]);return s.repeat(t.substring(0,e).length)+t.substring(e,n+1)+s.repeat(t.substring(n+1).length)}return t}static determineStartAndEndIndex(t,e){return t<e?{startIndex:t,endIndex:e}:{startIndex:e,endIndex:t}}static formatOrdinal(t){const e=this.ordinalPluralRules.select(t);return`${t}${this.suffixes.get(e)}`}static getMaskedDescription(t,e,n){if(!t||"masked"!==e||!n)return"";const[r,s]=n,a=r>0,i=s<t.length-1,u=a?t.substring(0,r):"",o=i?t.substring(s+1):"";return a&&i?`Starting with ${u} and ending with ${o}`:a?`Starting with ${u}`:i?`Ending with ${o}`:""}static joinNonEmptyStrings(t,e=", "){return t.filter(Boolean).join(e)}}t.ordinalPluralRules=new Intl.PluralRules("en",{type:"ordinal"}),t.suffixes=new Map([["one","st"],["two","nd"],["few","rd"],["other","th"]]);export{t as StringHelper};
 //# sourceMappingURL=string-helper.js.map

package/util/string-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"string-helper.js","sources":["../../src/util/string-helper.ts"],"sourcesContent":["// =============================================================================\n// TYPINGS\n// =============================================================================\ninterface MaskValueOptions {\n    maskRange?: number[] | undefined;\n    unmaskRange?: number[] | undefined;\n    maskRegex?: RegExp | undefined;\n    maskTransformer?: ((value: string) => string) | undefined;\n    maskChar?: string | undefined;\n}\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport class StringHelper {\n    public static transformWithSpaces(\n        value: string | any,\n        groupLength: number\n    ): string {\n        const regex = \"(.{\" + groupLength + \"})\";\n        return value\n            .replace(/[^\\dA-Z]/gi, \"\")\n            .replace(new RegExp(regex, \"g\"), \"$1 \")\n            .trim();\n    }\n\n    /**\n     * Pads single digit values with a zero and trims leading zero for\n     * values of length more than 2\n     * @param value the string value\n     * @param retainSingleZero setting true will allow single zero value\n     */\n    public static padValue(value: string, retainSingleZero?: boolean): string {\n        if (value === \"0\") {\n            return retainSingleZero ? value : value.padStart(2, \"0\");\n        }\n\n        if (value === \"\") {\n            return value;\n        }\n\n        const trimmedValue = parseInt(value);\n        return trimmedValue.toString().padStart(2, \"0\");\n    }\n\n    /**\n     * Checks if the text is required to be truncated and broken into two lines based\n     * on the available width of container. **Note: This is relevant to font size 18px or 1.125rem only **\n     * @param text input text\n     * @param widthOfElement element width in px\n     */\n    public static shouldTruncateToTwoLines(\n        text: string,\n        widthOfElement: number\n    ): boolean {\n        // This is arbitrary and based on tests to derive that every 9px increment ~= 1 char length.\n        // But this applies to font size 18px or 1.125rem only\n        const estimatedCharOnLine = Math.floor(widthOfElement / 9);\n        return (\n            text.length >= estimatedCharOnLine * 2 ||\n            (text.split(\" \").length === 1 && text.length > estimatedCharOnLine)\n        );\n    }\n\n    /**\n     * Performs a truncation by adding ellipsis in the middle of the text.\n     * @param text input text\n     * @param widthOfElement the dynamic width of the container in px\n     * @param minDivSize the minimum container size (using size on mobileS viewport as baseline)\n     * @param baselineCharLength the baseline amount of characters to be displayed before truncation kicks. This\n     * will be increased if there is more space available (derived from `widthOfElement`)\n     * @param incrementFactor the size (in px).\n     */\n    public static truncateOneLine(\n        text: string,\n        widthOfElement: number,\n        minDivSize: number,\n        baselineCharLength: number,\n        incrementFactor = 8 // Arbitrary based on tests and applies to font size of 18px or 1.125rem\n    ): string {\n        let additionalCharAllowed = 0;\n        if (widthOfElement > minDivSize) {\n            additionalCharAllowed = Math.floor(\n                (widthOfElement - minDivSize) / incrementFactor\n            );\n        }\n        const allowedCharLength = baselineCharLength + additionalCharAllowed;\n        if (allowedCharLength < text.length) {\n            const thresholdIndex = Math.floor(allowedCharLength / 2); // We will cut it halfway to derive x num of characters\n            return (\n                text.substring(0, thresholdIndex) + // Use the first x\n                \" ... \" +\n                text.substring(text.length - thresholdIndex, text.length) // Use the last x\n            );\n        }\n\n        return text;\n    }\n\n    /**\n     * Performs a truncation by adding ellipsis in the middle of the text.\n     * @param text input text\n     * @param widthOfElement the dynamic width of the container in px\n     * @param fontSize the fontsize of the text\n     * @param lineHeight the line height of the text\n     */\n    public static truncateTwoLines(\n        text: string,\n        widthOfElement: number,\n        fontSize: number,\n        lineHeight = 1.2\n    ): string {\n        // Estimate characters per line based on width and font size\n        const charsPerLine = Math.floor(\n            (widthOfElement * 2) / (fontSize * 0.6) // 0.6 is an approximation for average char width\n        );\n\n        // Calculate total characters allowed in two lines\n        const totalCharsAllowed = charsPerLine * (2 / lineHeight);\n\n        if (text.length <= totalCharsAllowed) {\n            return text; // No truncation needed\n        }\n\n        // Calculate the number of characters to keep\n        const keepFromStart = Math.floor(totalCharsAllowed * 0.6); // Keep 60% from start\n        const keepFromEnd = Math.floor(totalCharsAllowed * 0.2); // Keep 20% from end\n\n        // Truncate the text\n        const start = text.substring(0, keepFromStart);\n        const end = text.substring(text.length - keepFromEnd);\n\n        return `${start}...${end}`;\n    }\n\n    /**\n     * Returns the width of the text in the specified font\n     * https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393\n     */\n    public static getTextWidth(text: string, font: string): number {\n        if (typeof document === \"undefined\") {\n            return 0;\n        }\n\n        // create a reusable canvas object for better performance\n        const canvas =\n            (StringHelper.getTextWidth as any).canvas ||\n            ((StringHelper.getTextWidth as any).canvas =\n                document.createElement(\"canvas\"));\n        const context = canvas.getContext(\"2d\");\n        context.font = font;\n\n        const metrics = context.measureText(text);\n        return metrics.width;\n    }\n\n    public static maskValue(value: string, options: MaskValueOptions): string {\n        if (!value) {\n            return value;\n        }\n\n        const {\n            maskRange,\n            unmaskRange,\n            maskChar = \"•\",\n            maskRegex,\n            maskTransformer,\n        } = options;\n\n        if (maskTransformer) {\n            return maskTransformer(value);\n        } else if (maskRegex) {\n            return value.replace(maskRegex, maskChar);\n        } else if (maskRange) {\n            const { startIndex, endIndex } =\n                StringHelper.determineStartAndEndIndex(\n                    maskRange[0],\n                    maskRange[1]\n                );\n            return (\n                value.substring(0, startIndex) +\n                maskChar.repeat(\n                    value.substring(startIndex, endIndex + 1).length\n                ) +\n                value.substring(endIndex + 1)\n            );\n        } else if (unmaskRange) {\n            const { startIndex, endIndex } =\n                StringHelper.determineStartAndEndIndex(\n                    unmaskRange[0],\n                    unmaskRange[1]\n                );\n            return (\n                maskChar.repeat(value.substring(0, startIndex).length) +\n                value.substring(startIndex, endIndex + 1) +\n                maskChar.repeat(value.substring(endIndex + 1).length)\n            );\n        }\n\n        return value;\n    }\n\n    private static determineStartAndEndIndex(index0: number, index1: number) {\n        return index0 < index1\n            ? { startIndex: index0, endIndex: index1 }\n            : { startIndex: index1, endIndex: index0 };\n    }\n\n    private static ordinalPluralRules = new Intl.PluralRules(\"en\", {\n        type: \"ordinal\",\n    });\n\n    private static suffixes = new Map([\n        [\"one\", \"st\"],\n        [\"two\", \"nd\"],\n        [\"few\", \"rd\"],\n        [\"other\", \"th\"],\n    ]);\n\n    public static formatOrdinal(n: number) {\n        const rule = StringHelper.ordinalPluralRules.select(n);\n        const suffix = StringHelper.suffixes.get(rule);\n        return `${n}${suffix}`;\n    }\n\n    public static getMaskedDescription(\n        value: string,\n        displayMaskState: \"masked\" | \"unmasked\",\n        maskRange?: number[]\n    ): string {\n        if (!value || displayMaskState !== \"masked\" || !maskRange) return \"\";\n\n        const [startIndex, endIndex] = maskRange;\n        const hasStart = startIndex > 0;\n        const hasEnd = endIndex < value.length - 1;\n\n        const start = hasStart ? value.substring(0, startIndex) : \"\";\n        const end = hasEnd ? value.substring(endIndex + 1) : \"\";\n\n        if (hasStart && hasEnd)\n            return `Starting with ${start} and ending with ${end}`;\n        if (hasStart) return `Starting with ${start}`;\n        if (hasEnd) return `Ending with ${end}`;\n\n        return \"\";\n    }\n}\n"],"names":["StringHelper","transformWithSpaces","value","groupLength","regex","replace","RegExp","trim","padValue","retainSingleZero","padStart","parseInt","toString","shouldTruncateToTwoLines","text","widthOfElement","estimatedCharOnLine","Math","floor","length","split","truncateOneLine","minDivSize","baselineCharLength","incrementFactor","additionalCharAllowed","allowedCharLength","thresholdIndex","substring","truncateTwoLines","fontSize","lineHeight","totalCharsAllowed","keepFromStart","keepFromEnd","getTextWidth","font","document","context","canvas","createElement","getContext","measureText","width","maskValue","options","maskRange","unmaskRange","maskChar","maskRegex","maskTransformer","startIndex","endIndex","determineStartAndEndIndex","repeat","index0","index1","formatOrdinal","n","rule","ordinalPluralRules","select","suffixes","get","getMaskedDescription","displayMaskState","hasStart","hasEnd","start","end","Intl","PluralRules","type","Map"],"mappings":"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"}
+{"version":3,"file":"string-helper.js","sources":["../../src/util/string-helper.ts"],"sourcesContent":["// =============================================================================\n// TYPINGS\n// =============================================================================\ninterface MaskValueOptions {\n    maskRange?: number[] | undefined;\n    unmaskRange?: number[] | undefined;\n    maskRegex?: RegExp | undefined;\n    maskTransformer?: ((value: string) => string) | undefined;\n    maskChar?: string | undefined;\n}\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport class StringHelper {\n    public static transformWithSpaces(\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        value: string | any,\n        groupLength: number\n    ): string {\n        const regex = \"(.{\" + groupLength + \"})\";\n        return value\n            .replace(/[^\\dA-Z]/gi, \"\")\n            .replace(new RegExp(regex, \"g\"), \"$1 \")\n            .trim();\n    }\n\n    /**\n     * Pads single digit values with a zero and trims leading zero for\n     * values of length more than 2\n     * @param value the string value\n     * @param retainSingleZero setting true will allow single zero value\n     */\n    public static padValue(value: string, retainSingleZero?: boolean): string {\n        if (value === \"0\") {\n            return retainSingleZero ? value : value.padStart(2, \"0\");\n        }\n\n        if (value === \"\") {\n            return value;\n        }\n\n        const trimmedValue = parseInt(value);\n        return trimmedValue.toString().padStart(2, \"0\");\n    }\n\n    /**\n     * Checks if the text is required to be truncated and broken into two lines based\n     * on the available width of container. **Note: This is relevant to font size 18px or 1.125rem only **\n     * @param text input text\n     * @param widthOfElement element width in px\n     */\n    public static shouldTruncateToTwoLines(\n        text: string,\n        widthOfElement: number\n    ): boolean {\n        // This is arbitrary and based on tests to derive that every 9px increment ~= 1 char length.\n        // But this applies to font size 18px or 1.125rem only\n        const estimatedCharOnLine = Math.floor(widthOfElement / 9);\n        return (\n            text.length >= estimatedCharOnLine * 2 ||\n            (text.split(\" \").length === 1 && text.length > estimatedCharOnLine)\n        );\n    }\n\n    /**\n     * Performs a truncation by adding ellipsis in the middle of the text.\n     * @param text input text\n     * @param widthOfElement the dynamic width of the container in px\n     * @param minDivSize the minimum container size (using size on mobileS viewport as baseline)\n     * @param baselineCharLength the baseline amount of characters to be displayed before truncation kicks. This\n     * will be increased if there is more space available (derived from `widthOfElement`)\n     * @param incrementFactor the size (in px).\n     */\n    public static truncateOneLine(\n        text: string,\n        widthOfElement: number,\n        minDivSize: number,\n        baselineCharLength: number,\n        incrementFactor = 8 // Arbitrary based on tests and applies to font size of 18px or 1.125rem\n    ): string {\n        let additionalCharAllowed = 0;\n        if (widthOfElement > minDivSize) {\n            additionalCharAllowed = Math.floor(\n                (widthOfElement - minDivSize) / incrementFactor\n            );\n        }\n        const allowedCharLength = baselineCharLength + additionalCharAllowed;\n        if (allowedCharLength < text.length) {\n            const thresholdIndex = Math.floor(allowedCharLength / 2); // We will cut it halfway to derive x num of characters\n            return (\n                text.substring(0, thresholdIndex) + // Use the first x\n                \" ... \" +\n                text.substring(text.length - thresholdIndex, text.length) // Use the last x\n            );\n        }\n\n        return text;\n    }\n\n    /**\n     * Performs a truncation by adding ellipsis in the middle of the text.\n     * @param text input text\n     * @param widthOfElement the dynamic width of the container in px\n     * @param fontSize the fontsize of the text\n     * @param lineHeight the line height of the text\n     */\n    public static truncateTwoLines(\n        text: string,\n        widthOfElement: number,\n        fontSize: number,\n        lineHeight = 1.2\n    ): string {\n        // Estimate characters per line based on width and font size\n        const charsPerLine = Math.floor(\n            (widthOfElement * 2) / (fontSize * 0.6) // 0.6 is an approximation for average char width\n        );\n\n        // Calculate total characters allowed in two lines\n        const totalCharsAllowed = charsPerLine * (2 / lineHeight);\n\n        if (text.length <= totalCharsAllowed) {\n            return text; // No truncation needed\n        }\n\n        // Calculate the number of characters to keep\n        const keepFromStart = Math.floor(totalCharsAllowed * 0.6); // Keep 60% from start\n        const keepFromEnd = Math.floor(totalCharsAllowed * 0.2); // Keep 20% from end\n\n        // Truncate the text\n        const start = text.substring(0, keepFromStart);\n        const end = text.substring(text.length - keepFromEnd);\n\n        return `${start}...${end}`;\n    }\n\n    /**\n     * Returns the width of the text in the specified font\n     * https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393\n     */\n    public static getTextWidth(text: string, font: string): number {\n        if (typeof document === \"undefined\") {\n            return 0;\n        }\n\n        // create a reusable canvas object for better performance\n        const canvas =\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (this.getTextWidth as any).canvas ||\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            ((this.getTextWidth as any).canvas =\n                document.createElement(\"canvas\"));\n        const context = canvas.getContext(\"2d\");\n        context.font = font;\n\n        const metrics = context.measureText(text);\n        return metrics.width;\n    }\n\n    public static maskValue(value: string, options: MaskValueOptions): string {\n        if (!value) {\n            return value;\n        }\n\n        const {\n            maskRange,\n            unmaskRange,\n            maskChar = \"•\",\n            maskRegex,\n            maskTransformer,\n        } = options;\n\n        if (maskTransformer) {\n            return maskTransformer(value);\n        } else if (maskRegex) {\n            return value.replace(maskRegex, maskChar);\n        } else if (maskRange) {\n            const { startIndex, endIndex } = this.determineStartAndEndIndex(\n                maskRange[0],\n                maskRange[1]\n            );\n            return (\n                value.substring(0, startIndex) +\n                maskChar.repeat(\n                    value.substring(startIndex, endIndex + 1).length\n                ) +\n                value.substring(endIndex + 1)\n            );\n        } else if (unmaskRange) {\n            const { startIndex, endIndex } = this.determineStartAndEndIndex(\n                unmaskRange[0],\n                unmaskRange[1]\n            );\n            return (\n                maskChar.repeat(value.substring(0, startIndex).length) +\n                value.substring(startIndex, endIndex + 1) +\n                maskChar.repeat(value.substring(endIndex + 1).length)\n            );\n        }\n\n        return value;\n    }\n\n    private static determineStartAndEndIndex(index0: number, index1: number) {\n        return index0 < index1\n            ? { startIndex: index0, endIndex: index1 }\n            : { startIndex: index1, endIndex: index0 };\n    }\n\n    private static readonly ordinalPluralRules = new Intl.PluralRules(\"en\", {\n        type: \"ordinal\",\n    });\n\n    private static readonly suffixes = new Map([\n        [\"one\", \"st\"],\n        [\"two\", \"nd\"],\n        [\"few\", \"rd\"],\n        [\"other\", \"th\"],\n    ]);\n\n    public static formatOrdinal(n: number) {\n        const rule = this.ordinalPluralRules.select(n);\n        const suffix = this.suffixes.get(rule);\n        return `${n}${suffix}`;\n    }\n\n    public static getMaskedDescription(\n        value: string,\n        displayMaskState: \"masked\" | \"unmasked\",\n        maskRange?: number[]\n    ): string {\n        if (!value || displayMaskState !== \"masked\" || !maskRange) return \"\";\n\n        const [startIndex, endIndex] = maskRange;\n        const hasStart = startIndex > 0;\n        const hasEnd = endIndex < value.length - 1;\n\n        const start = hasStart ? value.substring(0, startIndex) : \"\";\n        const end = hasEnd ? value.substring(endIndex + 1) : \"\";\n\n        if (hasStart && hasEnd)\n            return `Starting with ${start} and ending with ${end}`;\n        if (hasStart) return `Starting with ${start}`;\n        if (hasEnd) return `Ending with ${end}`;\n\n        return \"\";\n    }\n\n    public static joinNonEmptyStrings(\n        strings: (string | undefined | null)[],\n        delimiter = \", \"\n    ): string {\n        return strings.filter(Boolean).join(delimiter);\n    }\n}\n"],"names":["StringHelper","transformWithSpaces","value","groupLength","regex","replace","RegExp","trim","padValue","retainSingleZero","padStart","parseInt","toString","shouldTruncateToTwoLines","text","widthOfElement","estimatedCharOnLine","Math","floor","length","split","truncateOneLine","minDivSize","baselineCharLength","incrementFactor","additionalCharAllowed","allowedCharLength","thresholdIndex","substring","truncateTwoLines","fontSize","lineHeight","totalCharsAllowed","keepFromStart","keepFromEnd","getTextWidth","font","document","context","this","canvas","createElement","getContext","measureText","width","maskValue","options","maskRange","unmaskRange","maskChar","maskRegex","maskTransformer","startIndex","endIndex","determineStartAndEndIndex","repeat","index0","index1","formatOrdinal","n","rule","ordinalPluralRules","select","suffixes","get","getMaskedDescription","displayMaskState","hasStart","hasEnd","start","end","joinNonEmptyStrings","strings","delimiter","filter","Boolean","join","Intl","PluralRules","type","Map"],"mappings":"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"}

package/util/styling-helper.d.ts

@@ -0,0 +1,6 @@
+import type { ColourCSSVariableString, RadiusCSSVariableString } from "../theme";
+import { BorderThickness } from "../theme";
+import type { ValueOf } from "./utility-types";
+export declare const isRadiusToken: (value: unknown) => value is RadiusCSSVariableString;
+export declare const isThicknessToken: (value: unknown) => value is ValueOf<typeof BorderThickness>;
+export declare const isColourToken: (value: unknown) => value is ColourCSSVariableString;

package/util/styling-helper.js

@@ -0,0 +1,2 @@
+import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import{BorderThickness as e}from"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as t}from"../theme/tokens/radius.js";import"./calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"./simple-id-generator.js";import"./string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import{isTokenWithPrefix as r,isTokenFromSet as o}from"../theme/utils/token-resolver.js";const m=new Set(Object.values(t)),s=new Set(Object.values(e)),i=e=>o(e,m),p=e=>o(e,s),n=e=>r(e,"var(--fds-colour-");export{n as isColourToken,i as isRadiusToken,p as isThicknessToken};
+//# sourceMappingURL=styling-helper.js.map

package/util/styling-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styling-helper.js","sources":["../../src/util/styling-helper.ts"],"sourcesContent":["import type {\n    ColourCSSVariableString,\n    RadiusCSSVariableString,\n} from \"../theme\";\nimport { BorderThickness, Radius } from \"../theme\";\nimport { isTokenFromSet, isTokenWithPrefix } from \"../theme/utils\";\nimport type { ValueOf } from \"./utility-types\";\n\nconst radiusTokenSet = new Set<string>(Object.values(Radius));\nconst thicknessTokenSet = new Set<string>(Object.values(BorderThickness));\n\nexport const isRadiusToken = (\n    value: unknown\n): value is RadiusCSSVariableString => {\n    return isTokenFromSet<RadiusCSSVariableString>(value, radiusTokenSet);\n};\n\nexport const isThicknessToken = (\n    value: unknown\n): value is ValueOf<typeof BorderThickness> => {\n    return isTokenFromSet<ValueOf<typeof BorderThickness>>(\n        value,\n        thicknessTokenSet\n    );\n};\n\nexport const isColourToken = (\n    value: unknown\n): value is ColourCSSVariableString => {\n    return isTokenWithPrefix<ColourCSSVariableString>(\n        value,\n        \"var(--fds-colour-\"\n    );\n};\n"],"names":["radiusTokenSet","Set","Object","values","Radius","thicknessTokenSet","BorderThickness","isRadiusToken","value","isTokenFromSet","isThicknessToken","isColourToken","isTokenWithPrefix"],"mappings":"gmBAQA,MAAMA,EAAiB,IAAIC,IAAYC,OAAOC,OAAOC,IAC/CC,EAAoB,IAAIJ,IAAYC,OAAOC,OAAOG,IAE3CC,EACTC,GAEOC,EAAwCD,EAAOR,GAG7CU,EACTF,GAEOC,EACHD,EACAH,GAIKM,EACTH,GAEOI,EACHJ,EACA"}

package/util/time-helper.d.ts

@@ -41,6 +41,14 @@ export declare class TimeHelper {
     static updateHours(valueString: string, direction: "add" | "minus"): string;
     static convertTo24HourFormat(values: TimeValues): string;
     static convertHourTo12HourFormat(hourValue: string): string;
+    /**
+     * Formats a 24hr time range into a 12hr display string.
+     * @param start - "HH:mm" e.g. "13:00"
+     * @param end   - "HH:mm" e.g. "14:30"
+     * @returns e.g. "1:00PM to 2:30PM"
+     */
+    static formatTimeRange(start: string, end: string): string;
+    static isSameTime(a: string, b: string): boolean;
     static formatDisplayValue(value: string | undefined, format: TimeFormat): string;
     static toMinutesSeconds(_seconds: number): {
         minutes: number;
@@ -49,7 +57,7 @@ export declare class TimeHelper {
     static to24Hour(time: string): string;
     static generateTimings(interval: number, // In minutes
     format?: TimeFormat, startTime?: string | undefined, endTime?: string | undefined): string[];
-    static parseInput(input: string, format?: TimeFormat): string | undefined;
+    static parseInput(input: string | undefined, format?: TimeFormat): string | undefined;
     static findClosestFlooredTime(inputTime: string | undefined, timeArray: string[]): string | undefined;
     static timeToMinutes(time: string): number;
     static calculateDuration(startTime: string, endTime: string): number;

package/util/time-helper.js

@@ -1,2 +1,2 @@
-import t from"../external/dayjs/dayjs.min.js";import{StringHelper as r}from"./string-helper.js";var e;!function(t){t.AM="AM",t.PM="PM"}(e||(e={}));class o{static roundToNearestInterval(t,r,e){const[o,n]=t.split(":"),a=parseInt(o,10),i=parseInt(n,10);if(isNaN(a)||isNaN(i)||i<0||i>=60)throw new Error("Invalid time format");const s=60*a+i,u=s%r,l=0===u?s:e?s+(r-u):s-u,c=l%60;return`${Math.floor(l/60).toString().padStart(2,"0")}:${c.toString().padStart(2,"0")}`}static generateHourlyIntervals(r,e,o="ha"){const n="HH:mm";let a=t(r,n),i=t(e,n);a.isSame(i)&&(i=i.add(1,"day"));const s=[];for(;a.isBefore(i);)s.push(a.format(o)),a=a.add(1,"hour");return s}static getTimeValues(t,o){const n={hour:"",minute:"",period:e.AM};if(!o)return n;try{if("24hr"===t){const a=s(o,t);n.minute=r.padValue(a.minute);const i=parseInt(a.hour);0===Math.floor(i/12)?(n.period=e.AM,n.hour=0===i?"12":r.padValue(i.toString())):(n.period=e.PM,n.hour=12===i?i.toString():r.padValue((i-12).toString()))}else{const{hour:a,minute:i,period:u=""}=s(o,t);n.hour=r.padValue(a),n.minute=r.padValue(i),n.period="am"===u.toLowerCase()?e.AM:e.PM}return n}catch(t){return n}}static updateMinutes(t,e){const o=parseInt(t);if(isNaN(o))return"add"===e?r.padValue("0"):"55";const n=Math.floor(o/5),a=(("add"===e?n+1:o%5==0?n-1:n)%12+12)%12;return r.padValue((5*a).toString())}static updateHours(t,e){const o=parseInt(t);if(isNaN(o))return"add"===e?r.padValue("1"):"12";const n="add"===e?o+1:o-1;return n<=12&&n>0?r.padValue(n.toString()):13===n?r.padValue("1"):"12"}static convertTo24HourFormat(t){const r=parseInt(t.hour);let o;return o=t.period===e.PM?12===r?r.toString():(r+12).toString():12===r?"00":t.hour,`${o}:${t.minute}`}static convertHourTo12HourFormat(t){const e=parseInt(t),o=e%12==0?12..toString():(e%12).toString();return r.padValue(o)}static formatDisplayValue(t,e){try{const{hour:o,minute:n,period:a=""}=s(t,e),i=r.padValue(o);let u=`${i}:${r.padValue(n)}`;return"12hr"===e?(u+=a.toLowerCase(),u):u}catch(t){return""}}static toMinutesSeconds(t){return{minutes:Math.floor(t/60),seconds:t%60}}static to24Hour(t){if((null==t?void 0:t.includes("am"))||(null==t?void 0:t.includes("pm"))){const[r,e]=t.split(/(am|pm)/i),[o,n]=r.split(":").map(Number);let a=o;return"pm"===e&&a<12&&(a+=12),"am"===e&&12===a&&(a=0),u(a,n)}return t}static generateTimings(t,r="12hr",e,n){const a=[];let i=0,s=1440-t;for(e&&(i=o.timeToMinutes(e)),n&&(s=o.timeToMinutes(n));i<=s;){let e=Math.floor(i/60);const o=i%60;if("12hr"===r){const t=e>=12?"pm":"am";e%=12,e=e||12;const r=u(e,o,t);a.push(r)}else{const t=u(e,o);a.push(t)}i+=t}return a}static parseInput(t,r="12hr"){if(""===t||void 0===t)return t;const e=t.trim().toLowerCase(),o=/^(?:(\d{1,2})([:.])?(\d{2})?)?(a|p|am|pm)?$/.exec(e);if(!o)return;let n=parseInt(o[1]||"0",10);const a=parseInt(o[3]||"0",10);let i=o[4];if(void 0===o[1]||n>24||a>59)return;if("a"===i?i="am":"p"===i&&(i="pm"),"24hr"===r)return"pm"===i&&n<12?n+=12:("am"===i&&12===n||24===n)&&(n=0),u(n,a);i?0===n||24===n?(i="am",n=12):n>12&&(i="pm",n-=12):(i=0===n||24===n||n>6&&n<12?"am":"pm",n=n%12||12);return u(n,a,i)}static findClosestFlooredTime(t,r){if(!t)return t;const e=o.timeToMinutes(t);let n="",a=1/0;for(const t of r){const r=o.timeToMinutes(t)-e;if(r<=0&&Math.abs(r)<a)a=Math.abs(r),n=t;else if(r>0)break}return n}static timeToMinutes(t){const[r,e]=t.toLowerCase().split(/(am|pm)/),[o,n]=r.split(":").map(Number);let a=o;return"pm"===e&&12!==a&&(a+=12),"am"===e&&12===a&&(a=0),60*a+n}static calculateDuration(t,r){const e=o.timeToMinutes(t);return o.timeToMinutes(r)-e}static calculateScrollPosition(t){const{scrollTime:r,minTime:e,maxTime:a,interval:i,intervalWidth:s,options:u}=t;try{if(!/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/.test(r))return console.warn(`Invalid scrollTime format: "${r}". Expected format: HH:mm.`),null;const t=(null==u?void 0:u.roundToInterval)?o.roundToNearestInterval(r,i):r,[l,c]=n(t);if(isNaN(l)||isNaN(c))return console.warn(`Invalid scrollTime: "${r}".`),null;const m=60*l+c,[p,d]=n(e),h=60*p+d,[f,g]=n(a);(m<h||m>60*f+g)&&console.warn(`scrollTime "${r}" is outside the range (${e} - ${a}).`);return(m-h)/i*s}catch(t){return console.warn(`Error processing scrollTime: "${r}".`,t),null}}}const n=t=>t.split(":").map(Number),a=(t,r)=>{const e=parseInt(t);return"24hr"===r?e>=0&&e<=23:e>=1&&e<=12},i=t=>{const r=parseInt(t);return r>=0&&r<=59},s=(t,r)=>{const e=t?t.split(":"):[],o=new Error("Invalid format");if("12hr"===r){if(2!==e.length||4!==e[1].length)throw o;const t=e[1].substring(0,2),s=e[1].substring(2);if(!a(e[0],r)||!i(t)||"am"!==(n=s).toLowerCase()&&"pm"!==n.toLowerCase())throw o;return{hour:e[0],minute:t,period:e[1].substring(2)}}if(2!==e.length)throw o;if(!a(e[0],r)||!i(e[1]))throw o;return{hour:e[0],minute:e[1]};var n},u=(t,r,e)=>e?`${t}:${r.toString().padStart(2,"0")}${e}`:`${t.toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`;export{e as EPeriod,o as TimeHelper};
+import t from"../external/dayjs/dayjs.min.js";import{StringHelper as r}from"./string-helper.js";var e;!function(t){t.AM="AM",t.PM="PM"}(e||(e={}));class o{static roundToNearestInterval(t,r,e){const[o,n]=t.split(":"),a=parseInt(o,10),i=parseInt(n,10);if(isNaN(a)||isNaN(i)||i<0||i>=60)throw new Error("Invalid time format");const s=60*a+i,u=s%r,m=0===u?s:e?s+(r-u):s-u,l=m%60;return`${Math.floor(m/60).toString().padStart(2,"0")}:${l.toString().padStart(2,"0")}`}static generateHourlyIntervals(r,e,o="ha"){const n="HH:mm";let a=t(r,n),i=t(e,n);a.isSame(i)&&(i=i.add(1,"day"));const s=[];for(;a.isBefore(i);)s.push(a.format(o)),a=a.add(1,"hour");return s}static getTimeValues(t,o){const n={hour:"",minute:"",period:e.AM};if(!o)return n;try{if("24hr"===t){const a=s(o,t);n.minute=r.padValue(a.minute);const i=parseInt(a.hour);0===Math.floor(i/12)?(n.period=e.AM,n.hour=0===i?"12":r.padValue(i.toString())):(n.period=e.PM,n.hour=12===i?i.toString():r.padValue((i-12).toString()))}else{const{hour:a,minute:i,period:u=""}=s(o,t);n.hour=r.padValue(a),n.minute=r.padValue(i),n.period="am"===u.toLowerCase()?e.AM:e.PM}return n}catch(t){return n}}static updateMinutes(t,e){const o=parseInt(t);if(isNaN(o))return"add"===e?r.padValue("0"):"55";const n=Math.floor(o/5),a=(("add"===e?n+1:o%5==0?n-1:n)%12+12)%12;return r.padValue((5*a).toString())}static updateHours(t,e){const o=parseInt(t);if(isNaN(o))return"add"===e?r.padValue("1"):"12";const n="add"===e?o+1:o-1;return n<=12&&n>0?r.padValue(n.toString()):13===n?r.padValue("1"):"12"}static convertTo24HourFormat(t){const r=parseInt(t.hour);let o;return o=t.period===e.PM?12===r?r.toString():(r+12).toString():12===r?"00":t.hour,`${o}:${t.minute}`}static convertHourTo12HourFormat(t){const e=parseInt(t),o=e%12==0?12..toString():(e%12).toString();return r.padValue(o)}static formatTimeRange(r,e){return`${t(r,"HH:mm").format("h:mmA")} to ${t(e,"HH:mm").format("h:mmA")}`}static isSameTime(r,e){return t(r,"H:mm").isSame(t(e,"H:mm"),"minute")}static formatDisplayValue(t,e){try{const{hour:o,minute:n,period:a=""}=s(t,e),i=r.padValue(o);let u=`${i}:${r.padValue(n)}`;return"12hr"===e?(u+=a.toLowerCase(),u):u}catch(t){return""}}static toMinutesSeconds(t){return{minutes:Math.floor(t/60),seconds:t%60}}static to24Hour(t){if((null==t?void 0:t.includes("am"))||(null==t?void 0:t.includes("pm"))){const[r,e]=t.split(/(am|pm)/i),[o,n]=r.split(":").map(Number);let a=o;return"pm"===e&&a<12&&(a+=12),"am"===e&&12===a&&(a=0),u(a,n)}return t}static generateTimings(t,r="12hr",e,n){const a=[];let i=0,s=1440-t;for(e&&(i=o.timeToMinutes(e)),n&&(s=o.timeToMinutes(n));i<=s;){let e=Math.floor(i/60);const o=i%60;if("12hr"===r){const t=e>=12?"pm":"am";e%=12,e=e||12;const r=u(e,o,t);a.push(r)}else{const t=u(e,o);a.push(t)}i+=t}return a}static parseInput(t,r="12hr"){if(""===t||void 0===t)return t;const e=t.trim().toLowerCase(),o=/^(?:(\d{1,2})([:.])?(\d{2})?)?(a|p|am|pm)?$/.exec(e);if(!o)return;let n=parseInt(o[1]||"0",10);const a=parseInt(o[3]||"0",10);let i=o[4];if(void 0===o[1]||n>24||a>59)return;if("a"===i?i="am":"p"===i&&(i="pm"),"24hr"===r)return"pm"===i&&n<12?n+=12:("am"===i&&12===n||24===n)&&(n=0),u(n,a);i?0===n||24===n?(i="am",n=12):n>12&&(i="pm",n-=12):(i=0===n||24===n||n>6&&n<12?"am":"pm",n=n%12||12);return u(n,a,i)}static findClosestFlooredTime(t,r){if(!t)return t;const e=o.timeToMinutes(t);let n="",a=1/0;for(const t of r){const r=o.timeToMinutes(t)-e;if(r<=0&&Math.abs(r)<a)a=Math.abs(r),n=t;else if(r>0)break}return n}static timeToMinutes(t){const[r,e]=t.toLowerCase().split(/(am|pm)/),[o,n]=r.split(":").map(Number);let a=o;return"pm"===e&&12!==a&&(a+=12),"am"===e&&12===a&&(a=0),60*a+n}static calculateDuration(t,r){const e=o.timeToMinutes(t);return o.timeToMinutes(r)-e}static calculateScrollPosition(t){const{scrollTime:r,minTime:e,maxTime:a,interval:i,intervalWidth:s,options:u}=t;try{if(!/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/.test(r))return console.warn(`Invalid scrollTime format: "${r}". Expected format: HH:mm.`),null;const t=(null==u?void 0:u.roundToInterval)?o.roundToNearestInterval(r,i):r,[m,l]=n(t);if(isNaN(m)||isNaN(l))return console.warn(`Invalid scrollTime: "${r}".`),null;const c=60*m+l,[p,d]=n(e),h=60*p+d,[f,g]=n(a);(c<h||c>60*f+g)&&console.warn(`scrollTime "${r}" is outside the range (${e} - ${a}).`);return(c-h)/i*s}catch(t){return console.warn(`Error processing scrollTime: "${r}".`,t),null}}}const n=t=>t.split(":").map(Number),a=(t,r)=>{const e=parseInt(t);return"24hr"===r?e>=0&&e<=23:e>=1&&e<=12},i=t=>{const r=parseInt(t);return r>=0&&r<=59},s=(t,r)=>{const e=t?t.split(":"):[],o=new Error("Invalid format");if("12hr"===r){if(2!==e.length||4!==e[1].length)throw o;const t=e[1].substring(0,2),s=e[1].substring(2);if(!a(e[0],r)||!i(t)||"am"!==(n=s).toLowerCase()&&"pm"!==n.toLowerCase())throw o;return{hour:e[0],minute:t,period:e[1].substring(2)}}if(2!==e.length)throw o;if(!a(e[0],r)||!i(e[1]))throw o;return{hour:e[0],minute:e[1]};var n},u=(t,r,e)=>e?`${t}:${r.toString().padStart(2,"0")}${e}`:`${t.toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`;export{e as EPeriod,o as TimeHelper};
 //# sourceMappingURL=time-helper.js.map