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

package/cjs/time-range-picker/dial-picker/dial-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"dial-picker.js","sources":["../../../../src/time-range-picker/dial-picker/dial-picker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { concatIds } from \"../../shared/accessibility\";\nimport type { DropdownRenderProps } from \"../../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { TimepickerDropdown } from \"../../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { SelectorInput, TimeContainer, Wrapper } from \"../common.styles\";\nimport type { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\n\ntype Active = \"start\" | \"end\" | \"none\";\n\nexport const DialPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"24hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\n    dropdownRootNode,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...otherProps\n}: TimeRangePickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const [active, setActive] = useState<Active>(\"none\");\n    const [startTimeVal, setStartTimeVal] = useState(\"\");\n    const [endTimeVal, setEndTimeVal] = useState(\"\");\n    const [focused, setFocused] = useState(false);\n\n    const enabled = !readOnly && !disabled;\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const startLabelId = `${internalId}-start-label`;\n    const endLabelId = `${internalId}-end-label`;\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDropdownAriaLabel = () => {\n        if (active === \"start\") {\n            return \"Selecting for: Start time\";\n        }\n\n        if (active === \"end\") {\n            return \"Selecting for: End time\";\n        }\n\n        return undefined;\n    };\n\n    const getInputLabelledBy = (type: Exclude<Active, \"none\">) => {\n        return concatIds(\n            ariaLabelledBy,\n            type === \"start\" ? startLabelId : endLabelId\n        );\n    };\n\n    const getInputDescribedBy = () => {\n        return concatIds(ariaDescribedBy);\n    };\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (value) {\n            setStartTimeVal(value.start);\n            setEndTimeVal(value.end);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = (next: Exclude<Active, \"none\">) => {\n        if (!enabled) return;\n        if (!focused && !isOpen) onFocus?.();\n        setFocused(true);\n        setActive(next);\n        setIsOpen(true);\n    };\n\n    const handleClose = (opts?: {\n        keepFocus?: boolean;\n        triggerBlur?: boolean;\n    }) => {\n        const keepFocus = !!opts?.keepFocus;\n        const triggerBlur = opts?.triggerBlur ?? !keepFocus;\n\n        setIsOpen(false);\n        setActive(\"none\");\n        setFocused(keepFocus);\n\n        if (triggerBlur) onBlur?.();\n\n        if (keepFocus) nodeRef.current?.focus();\n    };\n\n    const handleContainerBlur = (\n        event: React.FocusEvent<HTMLDivElement, Element>\n    ) => {\n        if (!focused || isOpen) return;\n\n        const target = event.relatedTarget as HTMLElement | null;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode = !!(target && nodeRef.current?.contains(target));\n\n        if (!isInsideNode && !isFloatingElement) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleStartTime = (value: string) => {\n        setStartTimeVal(value);\n        onChange?.({ start: value, end: endTimeVal } as TimeRangePickerValue);\n\n        setActive(\"end\");\n        setIsOpen(true);\n        setFocused(true);\n    };\n\n    const handleEndTime = (value: string) => {\n        setEndTimeVal(value);\n        onChange?.({ start: startTimeVal, end: value } as TimeRangePickerValue);\n\n        if (startTimeVal === \"\") {\n            setActive(\"start\");\n            setIsOpen(true);\n            setFocused(true);\n        } else {\n            handleClose({ keepFocus: true });\n        }\n    };\n\n    const renderElement = () => (\n        <TimeContainer\n            ref={nodeRef}\n            tabIndex={-1}\n            onBlur={handleContainerBlur}\n            data-testid=\"timepicker-container\"\n            role=\"group\"\n            disabled={disabled}\n            error={error}\n            readOnly={readOnly}\n            focused={focused}\n        >\n            <RangeInputInnerContainer error={error} currentActive={active}>\n                <SelectorInput\n                    onFocus={() => handleOpen(\"start\")}\n                    onClick={() => handleOpen(\"start\")}\n                    readOnly\n                    placeholder=\"From\"\n                    value={TimeHelper.formatDisplayValue(startTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-from`\n                            : \"timepicker-selector-from\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid}\n                    aria-disabled={disabled}\n                    aria-readonly={readOnly}\n                    aria-labelledby={getInputLabelledBy(\"start\")}\n                    aria-describedby={getInputDescribedBy()}\n                />\n                <SelectorInput\n                    onClick={() => handleOpen(\"end\")}\n                    readOnly\n                    placeholder=\"To\"\n                    value={TimeHelper.formatDisplayValue(endTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-to`\n                            : \"timepicker-selector-to\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid || undefined}\n                    aria-disabled={disabled || undefined}\n                    aria-readonly={readOnly || undefined}\n                    aria-labelledby={getInputLabelledBy(\"end\")}\n                    aria-describedby={getInputDescribedBy()}\n                />\n            </RangeInputInnerContainer>\n        </TimeContainer>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => {\n        if (!isOpen) return null;\n\n        return (\n            <div\n                ref={setFloatingRef}\n                style={styles}\n                role=\"dialog\"\n                key={active}\n                aria-label={getDropdownAriaLabel()}\n                {...getFloatingProps()}\n            >\n                {active === \"start\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-start` : undefined}\n                        show\n                        value={startTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: true })}\n                        onChange={handleStartTime}\n                    />\n                )}\n                {active === \"end\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-end` : undefined}\n                        show\n                        value={endTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: false })}\n                        onChange={handleEndTime}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <Wrapper id={id} {...otherProps}>\n            <ElementWithDropdown\n                enabled={enabled}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onClose={() => handleClose({ keepFocus: false })}\n                onDismiss={() => handleClose({ keepFocus: true })}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </Wrapper>\n    );\n};\n"],"names":["_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","isOpen","setIsOpen","useState","active","setActive","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","focused","setFocused","enabled","nodeRef","useRef","internalId","useId","startLabelId","endLabelId","getInputLabelledBy","type","concatIds","getInputDescribedBy","useEffect","start","end","handleOpen","next","handleClose","opts","keepFocus","triggerBlur","_b","current","focus","handleContainerBlur","event","target","relatedTarget","isFloatingElement","matches","call","_c","contains","handleStartTime","handleEndTime","_jsx","Wrapper","Object","assign","children","ElementWithDropdown","renderElement","TimeContainer","ref","tabIndex","role","_jsxs","RangeInputInnerContainer","currentActive","SelectorInput","onClick","placeholder","TimeHelper","formatDisplayValue","undefined","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onClose","onDismiss","clickToToggle","offset","customZIndex","rootNode"],"mappings":"6qBAc2BA,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,OACLA,EAAS,OAAMC,SACfA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAAY,OAAMC,eAClBA,EAAcC,iBACdA,EACA,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,KACbC,EAAUC,EAAAA,OAAAjB,EAhBU,CAAA,KAAA,WAAA,QAAA,QAAA,SAAA,WAAA,WAAA,UAAA,SAAA,YAAA,iBAAA,mBAAA,kBAAA,mBAAA,iBAqBvB,MAAOkB,EAAQC,GAAaC,EAAAA,UAAS,IAC9BC,EAAQC,GAAaF,EAAAA,SAAiB,SACtCG,EAAcC,GAAmBJ,EAAAA,SAAS,KAC1CK,EAAYC,GAAiBN,EAAAA,SAAS,KACtCO,EAASC,GAAcR,EAAAA,UAAS,GAEjCS,GAAWvB,IAAaJ,EACxB4B,EAAUC,EAAAA,OAAuB,MACjCC,EAAaC,EAAAA,QACbC,EAAe,GAAGF,gBAClBG,EAAa,GAAGH,cAiBhBI,EAAsBC,GACjBC,EAAAA,UACHzB,EACS,UAATwB,EAAmBH,EAAeC,GAIpCI,EAAsB,IACjBD,EAAAA,UAAUxB,GAKrB0B,EAAAA,WAAU,KACFpC,IACAoB,EAAgBpB,EAAMqC,OACtBf,EAActB,EAAMsC,KACxB,GACD,CAACtC,IAKJ,MAAMuC,EAAcC,IACXf,IACAF,GAAYT,GAAQV,SAAAA,IACzBoB,GAAW,GACXN,EAAUsB,GACVzB,GAAU,GAAK,EAGb0B,EAAeC,YAIjB,MAAMC,KAAcD,aAAI,EAAJA,EAAMC,WACpBC,EAA+B,QAAjBhD,EAAA8C,aAAI,EAAJA,EAAME,mBAAW,IAAAhD,EAAAA,GAAK+C,EAE1C5B,GAAU,GACVG,EAAU,QACVM,EAAWmB,GAEPC,IAAavC,SAAAA,KAEbsC,IAA0B,QAAfE,EAAAnB,EAAQoB,eAAO,IAAAD,GAAAA,EAAEE,QAAO,EAGrCC,EACFC,cAEA,IAAK1B,GAAWT,EAAQ,OAExB,MAAMoC,EAASD,EAAME,cAEfC,GACa,QAAfxD,EAAAsD,aAAM,EAANA,EAAQG,eAAO,IAAAzD,OAAA,EAAAA,EAAA0D,KAAAJ,EAAG,mCACH,QAAfL,EAAAK,aAAM,EAANA,EAAQG,eAAO,IAAAR,OAAA,EAAAA,EAAAS,KAAAJ,EAAG,sCACEA,aAAUK,EAAA7B,EAAQoB,8BAASU,SAASN,MAEtCE,IAClB5B,GAAW,GACXnB,SAAAA,IACJ,EAGEoD,EAAmBzD,IACrBoB,EAAgBpB,GAChBG,SAAAA,EAAW,CAAEkC,MAAOrC,EAAOsC,IAAKjB,IAEhCH,EAAU,OACVH,GAAU,GACVS,GAAW,EAAK,EAGdkC,EAAiB1D,IACnBsB,EAActB,GACdG,SAAAA,EAAW,CAAEkC,MAAOlB,EAAcmB,IAAKtC,IAElB,KAAjBmB,GACAD,EAAU,SACVH,GAAU,GACVS,GAAW,IAEXiB,EAAY,CAAEE,WAAW,GAC7B,EAiGJ,OACIgB,EAAAA,IAACC,UAAOC,OAAAC,OAAA,CAACjE,GAAIA,GAAQe,EAAU,CAAAmD,SAC3BJ,EAAAA,IAACK,EAAAA,oBAAmB,CAChBvC,QAASA,EACTX,OAAQA,EACRmD,cAnGU,IAClBN,MAACO,EAAAA,cAAa,CACVC,IAAKzC,EACL0C,UAAU,EACV/D,OAAQ2C,EAAmB,cACf,uBACZqB,KAAK,QACLvE,SAAUA,EACVC,MAAOA,EACPG,SAAUA,EACVqB,QAASA,EAAOwC,SAEhBO,EAAAA,KAACC,EAAAA,yBAAwB,CAACxE,MAAOA,EAAOyE,cAAevD,EAAM8C,SAAA,CACzDJ,EAAAA,IAACc,EAAAA,cAAa,CACVrE,QAAS,IAAMmC,EAAW,SAC1BmC,QAAS,IAAMnC,EAAW,SAC1BrC,UAAQ,EACRyE,YAAY,OACZ3E,MAAO4E,EAAAA,WAAWC,mBAAmB1D,EAAclB,GAAO,cAEtDW,EAAW,eACL,GAAGA,EAAW,0CACd,2BAEVyD,KAAK,WAAU,iBACCvE,IAAaI,GAAWY,EAAc,eACxCf,GAASY,EAAW,gBACnBb,EAAQ,gBACRI,EAAQ,kBACN8B,EAAmB,SAAQ,mBAC1BG,MAEtBwB,EAAAA,IAACc,gBAAa,CACVC,QAAS,IAAMnC,EAAW,OAC1BrC,UAAQ,EACRyE,YAAY,KACZ3E,MAAO4E,EAAAA,WAAWC,mBAAmBxD,EAAYpB,GAAO,cAEpDW,EAAW,eACL,GAAGA,EAAW,wCACd,yBAEVyD,KAAK,WAAU,iBACCvE,IAAaI,GAAWY,EAAc,eACxCf,GAASY,QAAemE,kBACvBhF,QAAYgF,EAAS,gBACrB5E,QAAY4E,EAAS,kBACnB9C,EAAmB,OAAM,mBACxBG,WAoDtB4C,eA9CW,EACnBC,SACAC,iBACAC,sBAEKpE,EAGDwD,EAAAA,KAAA,MAAAT,OAAAC,OAAA,CACIK,IAAKc,EACLE,MAAOH,EACPX,KAAK,SAAQ,aAnKN,UAAXpD,EACO,4BAGI,QAAXA,EACO,+BADX,GAkKYiE,IAAkB,CAAAnB,SAAA,CAEV,UAAX9C,GACG0C,EAAAA,IAACyB,qBAAkB,CACfvF,GAAIA,EAAK,GAAGA,eAAaiF,EACzBO,MAAI,EACJrF,MAAOmB,EACPlB,OAAQA,EACRqF,SAAU,IAAM7C,EAAY,CAAEE,WAAW,IACzCxC,SAAUsD,IAGN,QAAXxC,GACG0C,EAAAA,IAACyB,EAAAA,mBAAkB,CACfvF,GAAIA,EAAK,GAAGA,aAAWiF,EACvBO,MAAI,EACJrF,MAAOqB,EACPpB,OAAQA,EACRqF,SAAU,IAAM7C,EAAY,CAAEE,WAAW,IACzCxC,SAAUuD,OArBbzC,GAPO,KA0CZsE,QAAS,IAAM9C,EAAY,CAAEE,WAAW,IACxC6C,UAAW,IAAM/C,EAAY,CAAEE,WAAW,IAC1C8C,eAAe,EACfC,OAAQ,EACRpF,UAAWA,EACXqF,aAAcpF,EACdqF,SAAUpF,MAER"}
+{"version":3,"file":"dial-picker.js","sources":["../../../../src/time-range-picker/dial-picker/dial-picker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { concatIds } from \"../../shared/accessibility\";\nimport type { DropdownRenderProps } from \"../../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../../shared/input-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { TimepickerDropdown } from \"../../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport * as styles from \"../common.styles\";\nimport type { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\n\ntype Active = \"start\" | \"end\" | \"none\";\n\nexport const DialPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"24hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\n    dropdownRootNode,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...otherProps\n}: TimeRangePickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const [active, setActive] = useState<Active>(\"none\");\n    const [startTimeVal, setStartTimeVal] = useState(\"\");\n    const [endTimeVal, setEndTimeVal] = useState(\"\");\n    const [focused, setFocused] = useState(false);\n\n    const enabled = !readOnly && !disabled;\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const startLabelId = `${internalId}-start-label`;\n    const endLabelId = `${internalId}-end-label`;\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDropdownAriaLabel = () => {\n        if (active === \"start\") {\n            return \"Selecting for: Start time\";\n        }\n\n        if (active === \"end\") {\n            return \"Selecting for: End time\";\n        }\n\n        return undefined;\n    };\n\n    const getInputLabelledBy = (type: Exclude<Active, \"none\">) => {\n        return concatIds(\n            ariaLabelledBy,\n            type === \"start\" ? startLabelId : endLabelId\n        );\n    };\n\n    const getInputDescribedBy = () => {\n        return concatIds(ariaDescribedBy);\n    };\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (value) {\n            setStartTimeVal(value.start);\n            setEndTimeVal(value.end);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = (next: Exclude<Active, \"none\">) => {\n        if (!enabled) return;\n        if (!focused && !isOpen) onFocus?.();\n        setFocused(true);\n        setActive(next);\n        setIsOpen(true);\n    };\n\n    const handleClose = (opts?: {\n        keepFocus?: boolean;\n        triggerBlur?: boolean;\n    }) => {\n        const keepFocus = !!opts?.keepFocus;\n        const triggerBlur = opts?.triggerBlur ?? !keepFocus;\n\n        setIsOpen(false);\n        setActive(\"none\");\n        setFocused(keepFocus);\n\n        if (triggerBlur) onBlur?.();\n\n        if (keepFocus) nodeRef.current?.focus();\n    };\n\n    const handleContainerBlur = (\n        event: React.FocusEvent<HTMLDivElement, Element>\n    ) => {\n        if (!focused || isOpen) return;\n\n        const target = event.relatedTarget as HTMLElement | null;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode = !!(target && nodeRef.current?.contains(target));\n\n        if (!isInsideNode && !isFloatingElement) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleStartTime = (value: string) => {\n        setStartTimeVal(value);\n        onChange?.({ start: value, end: endTimeVal } as TimeRangePickerValue);\n\n        setActive(\"end\");\n        setIsOpen(true);\n        setFocused(true);\n    };\n\n    const handleEndTime = (value: string) => {\n        setEndTimeVal(value);\n        onChange?.({ start: startTimeVal, end: value } as TimeRangePickerValue);\n\n        if (startTimeVal === \"\") {\n            setActive(\"start\");\n            setIsOpen(true);\n            setFocused(true);\n        } else {\n            handleClose({ keepFocus: true });\n        }\n    };\n\n    const renderElement = () => (\n        <InputWrapper\n            ref={nodeRef}\n            tabIndex={-1}\n            onBlur={handleContainerBlur}\n            data-testid=\"timepicker-container\"\n            role=\"group\"\n            disabled={disabled}\n            error={error}\n            readOnly={readOnly}\n            focused={focused}\n            className={styles.timeContainer}\n        >\n            <RangeInputInnerContainer error={error} currentActive={active}>\n                <BasicInput\n                    onFocus={() => handleOpen(\"start\")}\n                    onClick={() => handleOpen(\"start\")}\n                    readOnly\n                    placeholder=\"From\"\n                    value={TimeHelper.formatDisplayValue(startTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-from`\n                            : \"timepicker-selector-from\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid}\n                    aria-disabled={disabled}\n                    aria-readonly={readOnly}\n                    aria-labelledby={getInputLabelledBy(\"start\")}\n                    aria-describedby={getInputDescribedBy()}\n                    className={styles.selectorInput}\n                />\n                <BasicInput\n                    onClick={() => handleOpen(\"end\")}\n                    readOnly\n                    placeholder=\"To\"\n                    value={TimeHelper.formatDisplayValue(endTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-to`\n                            : \"timepicker-selector-to\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid || undefined}\n                    aria-disabled={disabled || undefined}\n                    aria-readonly={readOnly || undefined}\n                    aria-labelledby={getInputLabelledBy(\"end\")}\n                    aria-describedby={getInputDescribedBy()}\n                    className={styles.selectorInput}\n                />\n            </RangeInputInnerContainer>\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => {\n        if (!isOpen) return null;\n\n        return (\n            <div\n                ref={setFloatingRef}\n                style={styles}\n                role=\"dialog\"\n                key={active}\n                aria-label={getDropdownAriaLabel()}\n                {...getFloatingProps()}\n            >\n                {active === \"start\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-start` : undefined}\n                        show\n                        value={startTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: true })}\n                        onChange={handleStartTime}\n                    />\n                )}\n                {active === \"end\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-end` : undefined}\n                        show\n                        value={endTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: false })}\n                        onChange={handleEndTime}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            id={id}\n            {...otherProps}\n            className={clsx(styles.wrapper, otherProps.className)}\n        >\n            <ElementWithDropdown\n                enabled={enabled}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onClose={() => handleClose({ keepFocus: false })}\n                onDismiss={() => handleClose({ keepFocus: true })}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </div>\n    );\n};\n"],"names":["_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","isOpen","setIsOpen","useState","active","setActive","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","focused","setFocused","enabled","nodeRef","useRef","internalId","useId","startLabelId","endLabelId","getInputLabelledBy","type","concatIds","getInputDescribedBy","useEffect","start","end","handleOpen","next","handleClose","opts","keepFocus","triggerBlur","_b","current","focus","handleContainerBlur","event","target","relatedTarget","isFloatingElement","matches","call","_c","contains","handleStartTime","handleEndTime","_jsx","Object","assign","className","clsx","styles.wrapper","children","ElementWithDropdown","renderElement","InputWrapper","ref","tabIndex","role","styles.timeContainer","_jsxs","RangeInputInnerContainer","currentActive","BasicInput","onClick","placeholder","TimeHelper","formatDisplayValue","styles.selectorInput","undefined","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onClose","onDismiss","clickToToggle","offset","customZIndex","rootNode"],"mappings":"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"}

package/cjs/time-slot-bar/helper.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../external/dayjs/dayjs.min.js"),t=require("../external/dayjs/plugin/customParseFormat.js");require("../util/calendar-helper.js");var r=require("../util/date-helper.js");require("react");var i=require("../util/simple-id-generator.js"),a=require("../util/string-helper.js");require("@react-aria/live-announcer");var n,s=require("../util/time-helper.js");e.default.extend(t.default),function(e){e.avail="Available",e.unavail="Unavailable"}(n||(n={}));const m=(e,t,r)=>({id:r,startTime:e,endTime:t,clickable:!1,label:void 0,styleAttributes:{backgroundColor:"transparent"}});exports.TimeSlotBarHelper=class{static formatHourlyDisplay(t){return e.default(t,"HH:mm").format("ha")}static calculateWidth(e,t,i){return r.DateHelper.getTimeDiffInMinutes(e,t)/15*(i/2)}static adjustTimeForMarker(t,r){const i=e.default(t,"HH:mm");switch(r){case"start":if(i.minute()>0&&i.minute()<30)return i.set("minute",0).format("HH:mm");if(i.minute()>30&&i.minute()<60)return i.set("minute",30).format("HH:mm");break;case"end":if(i.minute()>0&&i.minute()<30)return i.set("minute",30).format("HH:mm");if(i.minute()>30&&i.minute()<60){const e=i.add(1,"hour");return 0===e.hour()?"24:00":e.set("minute",0).format("HH:mm")}break;default:return t}return t}static processSlots(t,r,l){const u=["Time slot bar"],o=[],c=e=>{var t;const r=(i=e.startTime,m=e.endTime,c=null===(t=e.clickable)||void 0===t||t,d=e.label,a.StringHelper.joinNonEmptyStrings([s.TimeHelper.formatTimeRange(i,m),c?n.avail:n.unavail,d]));var i,m,c,d;"minified"===l&&u.push(r),o.push(Object.assign(Object.assign({},e),{ariaLabel:"default"===l?r:void 0}))};if(r.length<1){const e=m(t.start,t.end,i.SimpleIdGenerator.generate());return c(e),{summary:a.StringHelper.joinNonEmptyStrings(u),computedSlots:o}}const d=[...r].sort(((t,r)=>{const i=e.default(t.startTime,"HH:mm"),a=e.default(r.startTime,"HH:mm");return i.isBefore(a)?-1:i.isAfter(a)?1:0}));if(!s.TimeHelper.isSameTime(t.start,d[0].startTime)){const e=m(t.start,d[0].startTime,i.SimpleIdGenerator.generate());c(e)}d.forEach(((e,t,r)=>{var a;c(e);const{endTime:n}=e,{startTime:l}=null!==(a=r[t+1])&&void 0!==a?a:{};if(l&&!s.TimeHelper.isSameTime(n,l)){const e=m(n,l,i.SimpleIdGenerator.generate());c(e)}}));const f=d[d.length-1];if(!s.TimeHelper.isSameTime(t.end,f.endTime)){const e=m(f.endTime,t.end,i.SimpleIdGenerator.generate());c(e)}return{summary:a.StringHelper.joinNonEmptyStrings(u),computedSlots:o}}};
+"use strict";var e=require("../external/dayjs/dayjs.min.js"),t=require("../external/dayjs/plugin/customParseFormat.js");require("../util/calendar-helper.js");var r=require("../util/date-helper.js");require("react");var i=require("../util/simple-id-generator.js"),a=require("../util/string-helper.js");require("@react-aria/live-announcer");var n,s=require("../util/time-helper.js"),m=require("./time-slot-bar.styles.js");e.default.extend(t.default),function(e){e.avail="Available",e.unavail="Unavailable"}(n||(n={}));const l=(e,t,r)=>({id:r,startTime:e,endTime:t,clickable:!1,label:void 0,styleAttributes:{backgroundColor:"transparent"}});exports.TimeSlotBarHelper=class{static formatHourlyDisplay(t){return e.default(t,"HH:mm").format("ha")}static calculateWidth(e,t,i){return r.DateHelper.getTimeDiffInMinutes(e,t)/15*(i/2)}static adjustTimeForMarker(t,r){const i=e.default(t,"HH:mm");switch(r){case"start":if(i.minute()>0&&i.minute()<30)return i.set("minute",0).format("HH:mm");if(i.minute()>30&&i.minute()<60)return i.set("minute",30).format("HH:mm");break;case"end":if(i.minute()>0&&i.minute()<30)return i.set("minute",30).format("HH:mm");if(i.minute()>30&&i.minute()<60){const e=i.add(1,"hour");return 0===e.hour()?"24:00":e.set("minute",0).format("HH:mm")}break;default:return t}return t}static processSlots(t,r,m){const u=["Time slot bar"],o=[],d=e=>{var t;const r=(i=e.startTime,l=e.endTime,d=null===(t=e.clickable)||void 0===t||t,c=e.label,a.StringHelper.joinNonEmptyStrings([s.TimeHelper.formatTimeRange(i,l),d?n.avail:n.unavail,c]));var i,l,d,c;"minified"===m&&u.push(r),o.push(Object.assign(Object.assign({},e),{ariaLabel:"default"===m?r:void 0}))};if(r.length<1){const e=l(t.start,t.end,i.SimpleIdGenerator.generate());return d(e),{summary:a.StringHelper.joinNonEmptyStrings(u),computedSlots:o}}const c=[...r].sort(((t,r)=>{const i=e.default(t.startTime,"HH:mm"),a=e.default(r.startTime,"HH:mm");return i.isBefore(a)?-1:i.isAfter(a)?1:0}));if(!s.TimeHelper.isSameTime(t.start,c[0].startTime)){const e=l(t.start,c[0].startTime,i.SimpleIdGenerator.generate());d(e)}c.forEach(((e,t,r)=>{var a;d(e);const{endTime:n}=e,{startTime:m}=null!==(a=r[t+1])&&void 0!==a?a:{};if(m&&!s.TimeHelper.isSameTime(n,m)){const e=l(n,m,i.SimpleIdGenerator.generate());d(e)}}));const f=c[c.length-1];if(!s.TimeHelper.isSameTime(t.end,f.endTime)){const e=l(f.endTime,t.end,i.SimpleIdGenerator.generate());d(e)}return{summary:a.StringHelper.joinNonEmptyStrings(u),computedSlots:o}}},exports.getCellWidth=e=>"minified"===e?m.MINIFIED_CELL_SIZE:m.DEFAULT_CELL_SIZE;
 //# sourceMappingURL=helper.js.map

package/cjs/time-slot-bar/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sources":["../../../src/time-slot-bar/helper.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport { DateHelper, SimpleIdGenerator, StringHelper } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport type { TimeSlot as TTimeSlot, TimeSlotBarVariant } from \"./types\";\n// Load plugins\ndayjs.extend(customParseFormat);\n\n// ===========================================================================\n// INTERNAL TYPES\n// ===========================================================================\n\nenum ESlotStateLabel {\n    avail = \"Available\",\n    unavail = \"Unavailable\",\n}\n\n// ===========================================================================\n// INTERNAL HELPERS\n// ===========================================================================\n\nconst getSlotAriaLabel = (\n    slotStartTime: string,\n    slotEndTime: string,\n    isAvail?: boolean,\n    label?: string\n) =>\n    StringHelper.joinNonEmptyStrings([\n        TimeHelper.formatTimeRange(slotStartTime, slotEndTime),\n        isAvail ? ESlotStateLabel.avail : ESlotStateLabel.unavail,\n        label,\n    ]);\n\nconst buildUnavailableSlot = (\n    startTime: string,\n    endTime: string,\n    id: string\n): TTimeSlot & { ariaLabel?: string } => ({\n    id,\n    startTime,\n    endTime,\n    clickable: false,\n    label: undefined,\n    styleAttributes: { backgroundColor: \"transparent\" },\n});\n\n// ===========================================================================\n// HELPER FUNCTIONS\n// ===========================================================================\n\nexport class TimeSlotBarHelper {\n    /**\n     * Format HH:mm to am/pm display\n     * @param timeString input timeString string\n     */\n    public static formatHourlyDisplay(timeString: string): string {\n        const parsedTime = dayjs(timeString, \"HH:mm\");\n        return parsedTime.format(\"ha\");\n    }\n\n    /**\n     * Calculate width in px base on the time range in respect the cell width\n     * @param start input start string\n     * @param end input end string\n     * @param cellWidth input cellWidth number\n     */\n    public static calculateWidth(\n        start: string,\n        end: string,\n        cellWidth: number\n    ): number {\n        /**\n         * Each CELL_WIDTH is 30min interval\n         * Assuming 15 minutes corresponds to a fixed width of x cellWidth pixels (1/2 of CELL_WIDTH)\n         */\n        return (\n            (DateHelper.getTimeDiffInMinutes(start, end) / 15) * (cellWidth / 2)\n        );\n    }\n\n    /**\n     * Based on the time type, adjust the time to the nearest hour or 30 minuites marker.\n     * this helps to always show time slot marker properly.\n     * @param time - time to be adjusted\n     * @param type - \"start\" or \"end\" indicating which boundary to adjust\n     */\n    public static adjustTimeForMarker(\n        time: string,\n        type: \"start\" | \"end\"\n    ): string {\n        const parsedTime = dayjs(time, \"HH:mm\");\n        switch (type) {\n            case \"start\": {\n                // For xx:01 to xx:29, adjust to xx:00\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to xx:30\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                break;\n            }\n            case \"end\": {\n                // For xx:01 to xx:29, adjust to xx:30\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to next hour xx:00\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    const nextHour = parsedTime.add(1, \"hour\");\n                    // If it's 23:xx and rounds up to 24:00\n                    if (nextHour.hour() === 0) {\n                        return \"24:00\";\n                    }\n                    return nextHour.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                break;\n            }\n            default:\n                return time;\n        }\n        return time;\n    }\n\n    /**\n     * Process raw slots and any gaps in the given time range.\n     *\n     * Builds a summary string and a list of slots that includes:\n     * - original slots,\n     * - leading/trailing unavailable time gaps,\n     * - gap slots inserted between non-contiguous slots.\n     *\n     * @param range - start/end bounds for the timeslot bar.\n     * @param slots - user-provided slots to render.\n     * @param variant - display variant controlling summary and aria label behavior.\n     * @returns summary for container aria-label and computed slots ready for rendering.\n     */\n    public static processSlots(\n        range: { start: string; end: string },\n        slots: TTimeSlot[],\n        variant: TimeSlotBarVariant\n    ) {\n        const summaryParts: string[] = [\"Time slot bar\"];\n        // Build visible slots plus any unavailable gaps\n        const computedSlots: (TTimeSlot & {\n            ariaLabel?: string;\n        })[] = [];\n\n        const createAriaLabelAndPushSlot = (slot: TTimeSlot) => {\n            const ariaLabel = getSlotAriaLabel(\n                slot.startTime,\n                slot.endTime,\n                slot.clickable ?? true,\n                slot.label\n            );\n\n            if (variant === \"minified\") summaryParts.push(ariaLabel);\n            computedSlots.push({\n                ...slot,\n                ariaLabel: variant === \"default\" ? ariaLabel : undefined,\n            });\n        };\n\n        if (slots.length < 1) {\n            // No real slots: represent the whole range as unavailable\n            const fullUnavailSlot = buildUnavailableSlot(\n                range.start,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(fullUnavailSlot);\n\n            return {\n                summary: StringHelper.joinNonEmptyStrings(summaryParts),\n                computedSlots,\n            };\n        }\n\n        const sortedSlots = [...slots].sort((a, b) => {\n            const timeA = dayjs(a.startTime, \"HH:mm\");\n            const timeB = dayjs(b.startTime, \"HH:mm\");\n            if (timeA.isBefore(timeB)) return -1;\n            if (timeA.isAfter(timeB)) return 1;\n            return 0;\n        });\n\n        if (!TimeHelper.isSameTime(range.start, sortedSlots[0].startTime)) {\n            // Add leading unavailable gap before the first slot\n            const leadingUnavailSlot = buildUnavailableSlot(\n                range.start,\n                sortedSlots[0].startTime,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(leadingUnavailSlot);\n        }\n\n        sortedSlots.forEach((slot, index, self) => {\n            createAriaLabelAndPushSlot(slot);\n\n            const { endTime: slotEndTime } = slot;\n            const { startTime: nextSlotStartTime } = self[index + 1] ?? {};\n            const hasGapAfter =\n                nextSlotStartTime &&\n                !TimeHelper.isSameTime(slotEndTime, nextSlotStartTime);\n\n            if (hasGapAfter) {\n                // Add a gap slot between consecutive slots if non-contiguous\n                const unavailSlot = buildUnavailableSlot(\n                    slotEndTime,\n                    nextSlotStartTime,\n                    SimpleIdGenerator.generate()\n                );\n                createAriaLabelAndPushSlot(unavailSlot);\n            }\n        });\n\n        const lastSlot = sortedSlots[sortedSlots.length - 1];\n        if (!TimeHelper.isSameTime(range.end, lastSlot.endTime)) {\n            // Add trailing unavailable gap after the last slot\n            const trailingUnavailSlot = buildUnavailableSlot(\n                lastSlot.endTime,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(trailingUnavailSlot);\n        }\n\n        return {\n            summary: StringHelper.joinNonEmptyStrings(summaryParts),\n            computedSlots,\n        };\n    }\n}\n"],"names":["ESlotStateLabel","dayjs","extend","customParseFormat","buildUnavailableSlot","startTime","endTime","id","clickable","label","undefined","styleAttributes","backgroundColor","formatHourlyDisplay","timeString","format","calculateWidth","start","end","cellWidth","DateHelper","getTimeDiffInMinutes","adjustTimeForMarker","time","type","parsedTime","minute","set","nextHour","add","hour","processSlots","range","slots","variant","summaryParts","computedSlots","createAriaLabelAndPushSlot","slot","ariaLabel","slotStartTime","slotEndTime","isAvail","_a","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","avail","unavail","push","Object","assign","length","fullUnavailSlot","SimpleIdGenerator","generate","summary","sortedSlots","sort","a","b","timeA","timeB","isBefore","isAfter","isSameTime","leadingUnavailSlot","forEach","index","self","nextSlotStartTime","unavailSlot","lastSlot","trailingUnavailSlot"],"mappings":"uVAaKA,sCANLC,EAAAA,QAAMC,OAAOC,EAAAA,SAMb,SAAKH,GACDA,EAAA,MAAA,YACAA,EAAA,QAAA,aACH,CAHD,CAAKA,IAAAA,EAAe,CAAA,IASpB,MAYMI,EAAuB,CACzBC,EACAC,EACAC,KAAU,CAEVA,KACAF,YACAC,UACAE,WAAW,EACXC,WAAOC,EACPC,gBAAiB,CAAEC,gBAAiB,iDAY7B,0BAAOC,CAAoBC,GAE9B,OADmBb,EAAAA,QAAMa,EAAY,SACnBC,OAAO,KAC7B,CAQO,qBAAOC,CACVC,EACAC,EACAC,GAMA,OACKC,EAAAA,WAAWC,qBAAqBJ,EAAOC,GAAO,IAAOC,EAAY,EAE1E,CAQO,0BAAOG,CACVC,EACAC,GAEA,MAAMC,EAAaxB,EAAAA,QAAMsB,EAAM,SAC/B,OAAQC,GACJ,IAAK,QAED,GAAIC,EAAWC,SAAW,GAAKD,EAAWC,SAAW,GACjD,OAAOD,EAAWE,IAAI,SAAU,GAAGZ,OAAO,SAG9C,GAAIU,EAAWC,SAAW,IAAMD,EAAWC,SAAW,GAClD,OAAOD,EAAWE,IAAI,SAAU,IAAIZ,OAAO,SAE/C,MAEJ,IAAK,MAED,GAAIU,EAAWC,SAAW,GAAKD,EAAWC,SAAW,GACjD,OAAOD,EAAWE,IAAI,SAAU,IAAIZ,OAAO,SAG/C,GAAIU,EAAWC,SAAW,IAAMD,EAAWC,SAAW,GAAI,CACtD,MAAME,EAAWH,EAAWI,IAAI,EAAG,QAEnC,OAAwB,IAApBD,EAASE,OACF,QAEJF,EAASD,IAAI,SAAU,GAAGZ,OAAO,QAC5C,CACA,MAEJ,QACI,OAAOQ,EAEf,OAAOA,CACX,CAeO,mBAAOQ,CACVC,EACAC,EACAC,GAEA,MAAMC,EAAyB,CAAC,iBAE1BC,EAEC,GAEDC,EAA8BC,UAChC,MAAMC,GAhIdC,EAiIYF,EAAKjC,UAhIjBoC,EAiIYH,EAAKhC,QAhIjBoC,EAiI0B,QAAdC,EAAAL,EAAK9B,iBAAS,IAAAmC,GAAAA,EAhI1BlC,EAiIY6B,EAAK7B,MA/HjBmC,EAAAA,aAAaC,oBAAoB,CAC7BC,aAAWC,gBAAgBP,EAAeC,GAC1CC,EAAU1C,EAAgBgD,MAAQhD,EAAgBiD,QAClDxC,KATiB,IACrB+B,EACAC,EACAC,EACAjC,EAoIwB,aAAZyB,GAAwBC,EAAae,KAAKX,GAC9CH,EAAcc,KAAIC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACXd,GAAI,CACPC,UAAuB,YAAZL,EAAwBK,OAAY7B,IACjD,EAGN,GAAIuB,EAAMoB,OAAS,EAAG,CAElB,MAAMC,EAAkBlD,EACpB4B,EAAMf,MACNe,EAAMd,IACNqC,oBAAkBC,YAItB,OAFAnB,EAA2BiB,GAEpB,CACHG,QAASb,EAAAA,aAAaC,oBAAoBV,GAC1CC,gBAER,CAEA,MAAMsB,EAAc,IAAIzB,GAAO0B,MAAK,CAACC,EAAGC,KACpC,MAAMC,EAAQ7D,EAAAA,QAAM2D,EAAEvD,UAAW,SAC3B0D,EAAQ9D,EAAAA,QAAM4D,EAAExD,UAAW,SACjC,OAAIyD,EAAME,SAASD,IAAe,EAC9BD,EAAMG,QAAQF,GAAe,EAC1B,CAAC,IAGZ,IAAKjB,EAAAA,WAAWoB,WAAWlC,EAAMf,MAAOyC,EAAY,GAAGrD,WAAY,CAE/D,MAAM8D,EAAqB/D,EACvB4B,EAAMf,MACNyC,EAAY,GAAGrD,UACfkD,oBAAkBC,YAEtBnB,EAA2B8B,EAC/B,CAEAT,EAAYU,SAAQ,CAAC9B,EAAM+B,EAAOC,WAC9BjC,EAA2BC,GAE3B,MAAQhC,QAASmC,GAAgBH,GACzBjC,UAAWkE,GAAqC,QAAf5B,EAAA2B,EAAKD,EAAQ,UAAE,IAAA1B,EAAAA,EAAI,CAAA,EAK5D,GAHI4B,IACCzB,aAAWoB,WAAWzB,EAAa8B,GAEvB,CAEb,MAAMC,EAAcpE,EAChBqC,EACA8B,EACAhB,EAAAA,kBAAkBC,YAEtBnB,EAA2BmC,EAC/B,KAGJ,MAAMC,EAAWf,EAAYA,EAAYL,OAAS,GAClD,IAAKP,EAAAA,WAAWoB,WAAWlC,EAAMd,IAAKuD,EAASnE,SAAU,CAErD,MAAMoE,EAAsBtE,EACxBqE,EAASnE,QACT0B,EAAMd,IACNqC,oBAAkBC,YAEtBnB,EAA2BqC,EAC/B,CAEA,MAAO,CACHjB,QAASb,EAAAA,aAAaC,oBAAoBV,GAC1CC,gBAER"}
+{"version":3,"file":"helper.js","sources":["../../../src/time-slot-bar/helper.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport { DateHelper, SimpleIdGenerator, StringHelper } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlot as TTimeSlot, TimeSlotBarVariant } from \"./types\";\n// Load plugins\ndayjs.extend(customParseFormat);\n\n// ===========================================================================\n// INTERNAL TYPES\n// ===========================================================================\n\nenum ESlotStateLabel {\n    avail = \"Available\",\n    unavail = \"Unavailable\",\n}\n\n// ===========================================================================\n// INTERNAL HELPERS\n// ===========================================================================\n\nconst getSlotAriaLabel = (\n    slotStartTime: string,\n    slotEndTime: string,\n    isAvail?: boolean,\n    label?: string\n) =>\n    StringHelper.joinNonEmptyStrings([\n        TimeHelper.formatTimeRange(slotStartTime, slotEndTime),\n        isAvail ? ESlotStateLabel.avail : ESlotStateLabel.unavail,\n        label,\n    ]);\n\nconst buildUnavailableSlot = (\n    startTime: string,\n    endTime: string,\n    id: string\n): TTimeSlot & { ariaLabel?: string } => ({\n    id,\n    startTime,\n    endTime,\n    clickable: false,\n    label: undefined,\n    styleAttributes: { backgroundColor: \"transparent\" },\n});\n\n// ===========================================================================\n// HELPER FUNCTIONS\n// ===========================================================================\n\nexport class TimeSlotBarHelper {\n    /**\n     * Format HH:mm to am/pm display\n     * @param timeString input timeString string\n     */\n    public static formatHourlyDisplay(timeString: string): string {\n        const parsedTime = dayjs(timeString, \"HH:mm\");\n        return parsedTime.format(\"ha\");\n    }\n\n    /**\n     * Calculate width in px base on the time range in respect the cell width\n     * @param start input start string\n     * @param end input end string\n     * @param cellWidth input cellWidth number\n     */\n    public static calculateWidth(\n        start: string,\n        end: string,\n        cellWidth: number\n    ): number {\n        /**\n         * Each CELL_WIDTH is 30min interval\n         * Assuming 15 minutes corresponds to a fixed width of x cellWidth pixels (1/2 of CELL_WIDTH)\n         */\n        return (\n            (DateHelper.getTimeDiffInMinutes(start, end) / 15) * (cellWidth / 2)\n        );\n    }\n\n    /**\n     * Based on the time type, adjust the time to the nearest hour or 30 minuites marker.\n     * this helps to always show time slot marker properly.\n     * @param time - time to be adjusted\n     * @param type - \"start\" or \"end\" indicating which boundary to adjust\n     */\n    public static adjustTimeForMarker(\n        time: string,\n        type: \"start\" | \"end\"\n    ): string {\n        const parsedTime = dayjs(time, \"HH:mm\");\n        switch (type) {\n            case \"start\": {\n                // For xx:01 to xx:29, adjust to xx:00\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to xx:30\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                break;\n            }\n            case \"end\": {\n                // For xx:01 to xx:29, adjust to xx:30\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to next hour xx:00\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    const nextHour = parsedTime.add(1, \"hour\");\n                    // If it's 23:xx and rounds up to 24:00\n                    if (nextHour.hour() === 0) {\n                        return \"24:00\";\n                    }\n                    return nextHour.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                break;\n            }\n            default:\n                return time;\n        }\n        return time;\n    }\n\n    /**\n     * Process raw slots and any gaps in the given time range.\n     *\n     * Builds a summary string and a list of slots that includes:\n     * - original slots,\n     * - leading/trailing unavailable time gaps,\n     * - gap slots inserted between non-contiguous slots.\n     *\n     * @param range - start/end bounds for the timeslot bar.\n     * @param slots - user-provided slots to render.\n     * @param variant - display variant controlling summary and aria label behavior.\n     * @returns summary for container aria-label and computed slots ready for rendering.\n     */\n    public static processSlots(\n        range: { start: string; end: string },\n        slots: TTimeSlot[],\n        variant: TimeSlotBarVariant\n    ) {\n        const summaryParts: string[] = [\"Time slot bar\"];\n        // Build visible slots plus any unavailable gaps\n        const computedSlots: (TTimeSlot & {\n            ariaLabel?: string;\n        })[] = [];\n\n        const createAriaLabelAndPushSlot = (slot: TTimeSlot) => {\n            const ariaLabel = getSlotAriaLabel(\n                slot.startTime,\n                slot.endTime,\n                slot.clickable ?? true,\n                slot.label\n            );\n\n            if (variant === \"minified\") summaryParts.push(ariaLabel);\n            computedSlots.push({\n                ...slot,\n                ariaLabel: variant === \"default\" ? ariaLabel : undefined,\n            });\n        };\n\n        if (slots.length < 1) {\n            // No real slots: represent the whole range as unavailable\n            const fullUnavailSlot = buildUnavailableSlot(\n                range.start,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(fullUnavailSlot);\n\n            return {\n                summary: StringHelper.joinNonEmptyStrings(summaryParts),\n                computedSlots,\n            };\n        }\n\n        const sortedSlots = [...slots].sort((a, b) => {\n            const timeA = dayjs(a.startTime, \"HH:mm\");\n            const timeB = dayjs(b.startTime, \"HH:mm\");\n            if (timeA.isBefore(timeB)) return -1;\n            if (timeA.isAfter(timeB)) return 1;\n            return 0;\n        });\n\n        if (!TimeHelper.isSameTime(range.start, sortedSlots[0].startTime)) {\n            // Add leading unavailable gap before the first slot\n            const leadingUnavailSlot = buildUnavailableSlot(\n                range.start,\n                sortedSlots[0].startTime,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(leadingUnavailSlot);\n        }\n\n        sortedSlots.forEach((slot, index, self) => {\n            createAriaLabelAndPushSlot(slot);\n\n            const { endTime: slotEndTime } = slot;\n            const { startTime: nextSlotStartTime } = self[index + 1] ?? {};\n            const hasGapAfter =\n                nextSlotStartTime &&\n                !TimeHelper.isSameTime(slotEndTime, nextSlotStartTime);\n\n            if (hasGapAfter) {\n                // Add a gap slot between consecutive slots if non-contiguous\n                const unavailSlot = buildUnavailableSlot(\n                    slotEndTime,\n                    nextSlotStartTime,\n                    SimpleIdGenerator.generate()\n                );\n                createAriaLabelAndPushSlot(unavailSlot);\n            }\n        });\n\n        const lastSlot = sortedSlots[sortedSlots.length - 1];\n        if (!TimeHelper.isSameTime(range.end, lastSlot.endTime)) {\n            // Add trailing unavailable gap after the last slot\n            const trailingUnavailSlot = buildUnavailableSlot(\n                lastSlot.endTime,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(trailingUnavailSlot);\n        }\n\n        return {\n            summary: StringHelper.joinNonEmptyStrings(summaryParts),\n            computedSlots,\n        };\n    }\n}\n\n// Function to get the width of a cell in px\nexport const getCellWidth = (variant: TimeSlotBarVariant) => {\n    return variant === \"minified\"\n        ? styles.MINIFIED_CELL_SIZE\n        : styles.DEFAULT_CELL_SIZE;\n};\n"],"names":["ESlotStateLabel","dayjs","extend","customParseFormat","buildUnavailableSlot","startTime","endTime","id","clickable","label","undefined","styleAttributes","backgroundColor","formatHourlyDisplay","timeString","format","calculateWidth","start","end","cellWidth","DateHelper","getTimeDiffInMinutes","adjustTimeForMarker","time","type","parsedTime","minute","set","nextHour","add","hour","processSlots","range","slots","variant","summaryParts","computedSlots","createAriaLabelAndPushSlot","slot","ariaLabel","slotStartTime","slotEndTime","isAvail","_a","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","avail","unavail","push","Object","assign","length","fullUnavailSlot","SimpleIdGenerator","generate","summary","sortedSlots","sort","a","b","timeA","timeB","isBefore","isAfter","isSameTime","leadingUnavailSlot","forEach","index","self","nextSlotStartTime","unavailSlot","lastSlot","trailingUnavailSlot","styles.MINIFIED_CELL_SIZE","styles.DEFAULT_CELL_SIZE"],"mappings":"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"}

package/cjs/time-slot-bar/time-slot-bar.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/dayjs/dayjs.min.js"),l=require("react"),i=require("../external/react-resize-detector/build/index.esm.js"),a=require("../shared/accessibility/index.js"),o=require("../util/time-helper.js"),s=require("./helper.js"),n=require("./time-slot-bar.styles.js");const d=l.forwardRef(((d,c)=>{const{"data-testid":u,className:m,variant:h="default",startTime:f,endTime:p,slots:T,onSlotClick:b,onClick:x,styleAttributes:$,initialScrollTime:g,roundInitialScrollTime:j=!0}=d,v=l.useRef(null),[C,k]=l.useState(0),[B,S]=l.useState(0),H=n.getCellWidth(h),y=s.TimeSlotBarHelper.adjustTimeForMarker(f,"start"),w=s.TimeSlotBarHelper.adjustTimeForMarker(p,"end"),W=2.5*H;l.useImperativeHandle(c,(()=>({resetScroll:E})));const{summary:L,computedSlots:q}=l.useMemo((()=>s.TimeSlotBarHelper.processSlots({start:y,end:w},T,h)),[y,w,T,h]);l.useEffect((()=>{const e=v.current;return e&&(e.addEventListener("scroll",I),S(e.clientWidth)),()=>{e&&e.removeEventListener("scroll",I)}}),[]),l.useEffect((()=>{E()}),[g,H,f,p]);const I=()=>{v.current&&k(v.current.scrollLeft)},M=e=>{v.current&&v.current.scrollBy({left:"left"===e?-W:W,behavior:"smooth"})};i.useResizeDetector({onResize:()=>{v.current&&S(v.current.clientWidth)},targetRef:v,refreshMode:"debounce",refreshRate:50});const R=e=>e<=H/2,A=e=>{if(u)return`${u}-${e}`},F=(e,r,t)=>{const l=0===e.minute();if("default"===t)return l;return l&&(r?e.hour()%2==0:e.hour()%2==1)},E=()=>{if(g&&v.current&&H>0){const e=o.TimeHelper.calculateScrollPosition({scrollTime:g,minTime:y,maxTime:w,interval:30,intervalWidth:H,options:{roundToInterval:j}});null!==e&&(v.current.scrollLeft=e)}},_=e=>h===e;return r.jsxs(n.Container,{className:m,children:[r.jsxs(n.TimeSlotBarContainer,{"data-testid":u,ref:v,$variant:h,children:[r.jsx(n.TimeMarkerWrapper,{"data-testid":A("time-marker-wrapper"),"data-id":"marker-wrapper",children:(()=>{const e=[],l=t.default(y,"HH:mm"),i=t.default(w,"HH:mm"),a=l.hour()%2==0;for(let t=l;t.isBefore(i);t=t.add(30,"minute")){const l=F(t,a,h);e.push(r.jsx(n.TimeMarker,{"data-testid":`${t.format("HH:mm")}-marker`,$isLongMarker:l,$variant:h,children:l&&r.jsx(n.TimeLabel,{weight:"semibold",children:s.TimeSlotBarHelper.formatHourlyDisplay(t.format("HH:mm"))})},t.format("HH:mm")))}return e})()}),r.jsx("div",{role:"grid","aria-label":L,tabIndex:0,children:r.jsxs(n.TimeSlotWrapper,{"data-testid":A("time-slot-wrapper"),"data-id":"slot-wrapper",role:"row",children:[(()=>{if(!$)return;const{backgroundColor:e,backgroundColor2:t,hoverBackgroundColor:l,hoverBackgroundColor2:i,styleType:a="default"}=$,o=s.TimeSlotBarHelper.calculateWidth(y,w,H),d=!!x&&_("default");return r.jsxs(r.Fragment,{children:[r.jsx(n.TimeSlotBorder,{$variant:h}),r.jsx(n.TimeSlot,{"data-testid":A("default-timeslot"),$width:o,$variant:h,$left:0,$styleType:a,$bgColor:e,$bgColor2:t,$hoverBgColor:l,$hoverBgColor2:i,$clickable:d,onClick:d?x:void 0},"default-timeslot")]})})(),q.map((t=>{const{id:l,startTime:i,endTime:o,label:d,clickable:c=!0,styleAttributes:u,ariaLabel:m}=t,{color:f,styleType:T="default",backgroundColor:x,backgroundColor2:$,hoverBackgroundColor:g,hoverBackgroundColor2:j}=u,v=s.TimeSlotBarHelper.calculateWidth(i,o,H),C=s.TimeSlotBarHelper.calculateWidth(y,i,H),k=c&&"default"===h,B=_("default")&&d,S=r=>t=>{t.stopPropagation();const{ariaLabel:l}=r,i=e.__rest(r,["ariaLabel"]);k&&b(i)};return r.jsxs("div",{role:"gridcell",children:[r.jsx(n.TimeSlotBorder,{"data-testid":"start-border",$variant:h,style:{left:`${C}px`}}),r.jsxs(n.TimeSlot,{"data-testid":A(`${l}-timeslot`),$width:v,$left:C,$styleType:T,$variant:h,$bgColor:x,$bgColor2:$,$hoverBgColor:g,$hoverBgColor2:j,$clickable:k,onClick:S(t),children:[!!m&&r.jsx(a.VisuallyHidden,{children:r.jsx("button",{type:"button","aria-disabled":!k,"aria-label":m,onClick:S(t)})}),B&&r.jsx(n.CellText,{$slotWidth:v,$color:f,weight:"semibold","aria-hidden":!m,children:R(v)?"...":d})]}),p!==o&&r.jsx(n.TimeSlotBorder,{"data-testid":"end-border",$variant:h,style:{left:`${C+v}px`}})]},l)}))]})})]}),r.jsx(r.Fragment,{children:C>0&&r.jsx(n.ArrowButton,{"data-testid":A("arrow-left"),"aria-hidden":!0,tabIndex:-1,$direction:"left",$variant:h,focusHighlight:!1,focusOutline:"none",onClick:()=>{M("left")},children:r.jsx(n.ArrowIconLeft,{})})}),C+B<s.TimeSlotBarHelper.calculateWidth(y,w,H)?r.jsx(n.ArrowButton,{"data-testid":A("arrow-right"),"aria-hidden":!0,tabIndex:-1,$direction:"right",$variant:h,focusHighlight:!1,focusOutline:"none",onClick:()=>{M("right")},children:r.jsx(n.ArrowIconRight,{})}):r.jsx(r.Fragment,{})]})}));exports.TimeSlotBar=d;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-left"),l=require("@lifesg/react-icons/chevron-right"),a=require("clsx"),i=require("../external/dayjs/dayjs.min.js"),o=require("react"),s=require("../external/react-resize-detector/build/index.esm.js"),n=require("../shared/accessibility/index.js"),d=require("../shared/clickable-icon/clickable-icon.js"),c=require("../shared/time-slot/time-slot.js"),u=require("../typography/index.js"),m=require("../util/time-helper.js"),f=require("./helper.js"),h=require("./time-slot-bar.styles.js"),p=require("./time-slot-divider.js"),j=require("./time-slot-item.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=b(a);const g=o.forwardRef(((a,b)=>{const{"data-testid":g,className:T,variant:x="default",startTime:k,endTime:y,slots:C,onSlotClick:B,onClick:S,styleAttributes:H,initialScrollTime:q,roundInitialScrollTime:w=!0}=a,I=o.useRef(null),[N,M]=o.useState(0),[W,L]=o.useState(0),R=f.getCellWidth(x),D=f.TimeSlotBarHelper.adjustTimeForMarker(k,"start"),$=f.TimeSlotBarHelper.adjustTimeForMarker(y,"end"),E=2.5*R;o.useImperativeHandle(b,(()=>({resetScroll:X})));const{summary:_,computedSlots:z}=o.useMemo((()=>f.TimeSlotBarHelper.processSlots({start:D,end:$},C,x)),[D,$,C,x]);o.useEffect((()=>{const e=I.current;return e&&(e.addEventListener("scroll",F),L(e.clientWidth)),()=>{e&&e.removeEventListener("scroll",F)}}),[]),o.useEffect((()=>{X()}),[q,R,k,y]);const F=()=>{I.current&&M(I.current.scrollLeft)};s.useResizeDetector({onResize:()=>{I.current&&L(I.current.clientWidth)},targetRef:I,refreshMode:"debounce",refreshRate:50});const O=e=>e<=R/2,A=e=>{if(g)return`${g}-${e}`},P=(e,r,t)=>{const l=0===e.minute();if("default"===t)return l;return l&&(r?e.hour()%2==0:e.hour()%2==1)},X=()=>{if(q&&I.current&&R>0){const e=m.TimeHelper.calculateScrollPosition({scrollTime:q,minTime:D,maxTime:$,interval:30,intervalWidth:R,options:{roundToInterval:w}});null!==e&&(I.current.scrollLeft=e)}},V=e=>x===e,G=e=>{const a="left"===e,i=f.TimeSlotBarHelper.calculateWidth(D,$,R);if(!(a?N>0:N+W<i))return null;const o=a?h.arrowButtonLeft:h.arrowButtonRight,s="default"===x?h.arrowButtonDefault:h.arrowButtonMinified,n=a?r.jsx(t.ChevronLeftIcon,{className:h.arrowIcon}):r.jsx(l.ChevronRightIcon,{className:h.arrowIcon});return r.jsx(d.ClickableIcon,{"data-testid":A(`arrow-${e}`),"aria-hidden":!0,tabIndex:-1,className:v.default(h.arrowButton,o,s),focusHighlight:!1,focusOutline:"none",onClick:()=>{(e=>{I.current&&I.current.scrollBy({left:"left"===e?-E:E,behavior:"smooth"})})(e)},children:n})};return r.jsxs("div",{className:v.default(h.container,T),children:[r.jsxs("div",{"data-testid":g,ref:I,className:v.default(h.timeSlotBarContainer,"default"===x?h.containerDefault:h.containerMinified),children:[r.jsx("div",{className:h.timeMarkerWrapper,"data-testid":A("time-marker-wrapper"),"data-id":"marker-wrapper",children:(()=>{const e=[],t=i.default(D,"HH:mm"),l=i.default($,"HH:mm"),a=t.hour()%2==0;for(let i=t;i.isBefore(l);i=i.add(30,"minute")){const t=P(i,a,x);e.push(r.jsx("div",{"data-testid":`${i.format("HH:mm")}-marker`,className:v.default(h.timeMarker,"default"===x?h.timeMarkerDefault:h.timeMarkerMinified,t&&h.timeMarkerLong),children:t&&r.jsx(u.Typography.BodyXS,{className:h.timeLabel,weight:"semibold",children:f.TimeSlotBarHelper.formatHourlyDisplay(i.format("HH:mm"))})},i.format("HH:mm")))}return e})()}),r.jsx("div",{role:"grid","aria-label":_,tabIndex:0,children:r.jsxs("div",{className:h.timeSlotWrapper,"data-testid":A("time-slot-wrapper"),"data-id":"slot-wrapper",role:"row",children:[(()=>{if(!H)return;const{backgroundColor:e,backgroundColor2:t,hoverBackgroundColor:l,hoverBackgroundColor2:a,styleType:i="default"}=H,o=f.TimeSlotBarHelper.calculateWidth(D,$,R),s=!!S&&V("default");return r.jsxs(r.Fragment,{children:[r.jsx(p.default,{variant:x}),r.jsx(j.default,{variant:x,dataTestId:A("default-timeslot"),slotWidth:o,slotOffset:0,onClick:s?S:void 0,children:r.jsx(c.TimeSlot,{className:h.timeSlotItemContent,styleType:i,bgColor:e,bgColor2:t,hoverBgColor:l,hoverBgColor2:a,clickable:s})},"default-timeslot")]})})(),z.map((t=>{const{id:l,startTime:a,endTime:i,label:o,clickable:s=!0,styleAttributes:d,ariaLabel:m}=t,{color:b,styleType:v="default",backgroundColor:g,backgroundColor2:T,hoverBackgroundColor:k,hoverBackgroundColor2:C}=d,S=f.TimeSlotBarHelper.calculateWidth(a,i,R),H=f.TimeSlotBarHelper.calculateWidth(D,a,R),q=s&&"default"===x,w=V("default")&&o,I=r=>t=>{t.stopPropagation();const{ariaLabel:l}=r,a=e.__rest(r,["ariaLabel"]);q&&B(a)};return r.jsxs("div",{role:"gridcell",children:[r.jsx(p.default,{variant:x,left:H,dataTestId:"start-border"}),r.jsx(j.default,{variant:x,dataTestId:A(`${l}-timeslot`),slotWidth:S,slotOffset:H,color:b,onClick:I(t),children:r.jsxs(c.TimeSlot,{className:h.timeSlotItemContent,styleType:v,bgColor:g,bgColor2:T,hoverBgColor:k,hoverBgColor2:C,clickable:q,children:[!!m&&r.jsx(n.VisuallyHidden,{children:r.jsx("button",{type:"button","aria-disabled":!q,"aria-label":m,onClick:I(t)})}),w&&r.jsx(u.Typography.BodyXS,{className:h.cellText,weight:"semibold","aria-hidden":!m,children:O(S)?"...":o})]})}),y!==i&&r.jsx(p.default,{variant:x,dataTestId:"end-border",left:H+S})]},l)}))]})})]}),G("left"),G("right")]})}));exports.TimeSlotBar=g;
 //# sourceMappingURL=time-slot-bar.js.map

package/cjs/time-slot-bar/time-slot-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar.js","sources":["../../../src/time-slot-bar/time-slot-bar.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport type { MouseEvent } from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { TimeSlotBarHelper } from \"./helper\";\nimport {\n    ArrowButton,\n    ArrowIconLeft,\n    ArrowIconRight,\n    CellText,\n    Container,\n    getCellWidth,\n    TimeLabel,\n    TimeMarker,\n    TimeMarkerWrapper,\n    TimeSlot,\n    TimeSlotBarContainer,\n    TimeSlotBorder,\n    TimeSlotWrapper,\n} from \"./time-slot-bar.styles\";\nimport type {\n    Direction,\n    TimeSlot as TTimeSlot,\n    TimeSlotBarProps,\n    TimeSlotBarRef,\n    TimeSlotBarVariant,\n} from \"./types\";\n\nconst CELL_DURATION = 30; // In minutes\n\nconst Component = (props: TimeSlotBarProps, ref: React.Ref<TimeSlotBarRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        \"data-testid\": testId,\n        className,\n        variant = \"default\",\n        startTime,\n        endTime,\n        slots,\n        onSlotClick,\n        onClick,\n        styleAttributes,\n        initialScrollTime,\n        roundInitialScrollTime = true,\n    } = props;\n    const barRef = useRef<HTMLDivElement>(null);\n    const [scrollPosition, setScrollPosition] = useState<number>(0);\n    const [clientWidth, setClientWidth] = useState<number>(0);\n    const cellWidth = getCellWidth(variant);\n\n    const adjustedStartTime = TimeSlotBarHelper.adjustTimeForMarker(\n        startTime,\n        \"start\"\n    );\n    const adjustedEndTime = TimeSlotBarHelper.adjustTimeForMarker(\n        endTime,\n        \"end\"\n    );\n\n    const SCROLL_INCREMENT = cellWidth * 2.5; // In px. Each scroll increment corresponds to 75mins\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    const { summary: slotsSummary, computedSlots: allSlots } = useMemo(() => {\n        return TimeSlotBarHelper.processSlots(\n            { start: adjustedStartTime, end: adjustedEndTime },\n            slots,\n            variant\n        );\n    }, [adjustedStartTime, adjustedEndTime, slots, variant]);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        const container = barRef.current;\n        if (container) {\n            container.addEventListener(\"scroll\", handleScroll);\n            // Initialize clientWidth on mount\n            setClientWidth(container.clientWidth);\n        }\n\n        return () => {\n            if (container) {\n                container.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, []);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, cellWidth, startTime, endTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleScroll = () => {\n        if (barRef.current) {\n            setScrollPosition(barRef.current.scrollLeft);\n        }\n    };\n\n    const handleArrowButtonClick = (direction: Direction) => {\n        if (barRef.current) {\n            barRef.current.scrollBy({\n                left:\n                    direction === \"left\" ? -SCROLL_INCREMENT : SCROLL_INCREMENT,\n                behavior: \"smooth\",\n            });\n        }\n    };\n\n    const handleResize = () => {\n        if (barRef.current) {\n            setClientWidth(barRef.current.clientWidth);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: barRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * NOTE: Special condition\n     * Show ellipsis only if the slotWidth is smaller or equal to\n     * 15min interval\n     */\n    const showFullEllipsis = (slotWidth: number) => {\n        return slotWidth <= cellWidth / 2;\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!testId) return undefined;\n        return `${testId}-${subStr}`;\n    };\n\n    /**\n     * Function to determine if a long time marker should be displayed\n     * For minified variant the long time marker is displayed every alternate hour\n     */\n    const shouldDisplayLongTimeMarker = (\n        currentTime: Dayjs,\n        isStartHourEven: boolean, // To determine if the first hour is even or odd for minified\n        variant: TimeSlotBarVariant\n    ) => {\n        const isHour = currentTime.minute() === 0;\n\n        if (variant === \"default\") {\n            return isHour;\n        }\n\n        const isAlternateHour =\n            isHour &&\n            (isStartHourEven\n                ? currentTime.hour() % 2 === 0\n                : currentTime.hour() % 2 === 1);\n\n        return isAlternateHour;\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (initialScrollTime && barRef.current && cellWidth > 0) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: adjustedStartTime,\n                maxTime: adjustedEndTime,\n                interval: CELL_DURATION,\n                intervalWidth: cellWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                barRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    const isVariant = (v: TimeSlotBarVariant) => {\n        if (variant === v) return true;\n        return false;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    // Render time markers\n    const renderTimeMarkers = () => {\n        const timeMarkers = [];\n        const startTimeFormatted = dayjs(adjustedStartTime, \"HH:mm\");\n        const endTimeFormatted = dayjs(adjustedEndTime, \"HH:mm\");\n\n        const isStartHourEven = startTimeFormatted.hour() % 2 === 0;\n\n        for (\n            let currentTime = startTimeFormatted;\n            currentTime.isBefore(endTimeFormatted);\n            currentTime = currentTime.add(CELL_DURATION, \"minute\")\n        ) {\n            const displayLongTimeMarker = shouldDisplayLongTimeMarker(\n                currentTime,\n                isStartHourEven,\n                variant\n            );\n\n            timeMarkers.push(\n                <TimeMarker\n                    data-testid={`${currentTime.format(\"HH:mm\")}-marker`}\n                    key={currentTime.format(\"HH:mm\")}\n                    $isLongMarker={displayLongTimeMarker}\n                    $variant={variant}\n                >\n                    {displayLongTimeMarker && (\n                        <TimeLabel weight=\"semibold\">\n                            {TimeSlotBarHelper.formatHourlyDisplay(\n                                currentTime.format(\"HH:mm\")\n                            )}\n                        </TimeLabel>\n                    )}\n                </TimeMarker>\n            );\n        }\n        return timeMarkers;\n    };\n\n    // Render default time slot (aka background)\n    const renderDefaultTimeSlots = () => {\n        if (!styleAttributes) return;\n\n        const {\n            backgroundColor,\n            backgroundColor2,\n            hoverBackgroundColor,\n            hoverBackgroundColor2,\n            styleType = \"default\",\n        } = styleAttributes;\n\n        const slotWidth = TimeSlotBarHelper.calculateWidth(\n            adjustedStartTime,\n            adjustedEndTime,\n            cellWidth\n        );\n\n        const isClickable = !!onClick && isVariant(\"default\");\n\n        return (\n            <>\n                <TimeSlotBorder $variant={variant} />\n                <TimeSlot\n                    key={\"default-timeslot\"}\n                    data-testid={getDataTestId(\"default-timeslot\")}\n                    $width={slotWidth}\n                    $variant={variant}\n                    $left={0}\n                    $styleType={styleType}\n                    $bgColor={backgroundColor}\n                    $bgColor2={backgroundColor2}\n                    $hoverBgColor={hoverBackgroundColor}\n                    $hoverBgColor2={hoverBackgroundColor2}\n                    $clickable={isClickable}\n                    onClick={isClickable ? onClick : undefined}\n                />\n            </>\n        );\n    };\n\n    // Render time slots\n    const renderTimeSlots = () => {\n        return allSlots.map((slot) => {\n            const {\n                id,\n                startTime: slotStartTime,\n                endTime: slotEndTime,\n                label,\n                clickable = true,\n                styleAttributes,\n                ariaLabel,\n            } = slot;\n\n            const {\n                color,\n                styleType = \"default\",\n                backgroundColor,\n                backgroundColor2,\n                hoverBackgroundColor,\n                hoverBackgroundColor2,\n            } = styleAttributes;\n\n            const slotWidth = TimeSlotBarHelper.calculateWidth(\n                slotStartTime,\n                slotEndTime,\n                cellWidth\n            );\n            const slotOffset = TimeSlotBarHelper.calculateWidth(\n                adjustedStartTime,\n                slotStartTime,\n                cellWidth\n            );\n\n            const isClickable = clickable && variant === \"default\";\n            const showLabel = isVariant(\"default\") && label;\n\n            const handleSlotClick =\n                (clickedSlot: TTimeSlot & { ariaLabel?: string }) =>\n                (evt: MouseEvent<HTMLElement>) => {\n                    evt.stopPropagation();\n                    const { ariaLabel: _, ...slot } = clickedSlot;\n                    if (isClickable) onSlotClick(slot);\n                };\n\n            return (\n                <div key={id} role=\"gridcell\">\n                    <TimeSlotBorder\n                        data-testid=\"start-border\"\n                        $variant={variant}\n                        style={{\n                            left: `${slotOffset}px`,\n                        }}\n                    />\n                    <TimeSlot\n                        data-testid={getDataTestId(`${id}-timeslot`)}\n                        $width={slotWidth}\n                        $left={slotOffset}\n                        $styleType={styleType}\n                        $variant={variant}\n                        $bgColor={backgroundColor}\n                        $bgColor2={backgroundColor2}\n                        $hoverBgColor={hoverBackgroundColor}\n                        $hoverBgColor2={hoverBackgroundColor2}\n                        $clickable={isClickable}\n                        onClick={handleSlotClick(slot)}\n                    >\n                        {!!ariaLabel && (\n                            <VisuallyHidden>\n                                <button\n                                    type=\"button\" // overrides default type=\"submit\" when used with <form>\n                                    aria-disabled={!isClickable}\n                                    aria-label={ariaLabel}\n                                    onClick={handleSlotClick(slot)} // use `button` element native keyboard activation handling\n                                />\n                            </VisuallyHidden>\n                        )}\n\n                        {showLabel && (\n                            <CellText\n                                $slotWidth={slotWidth}\n                                $color={color}\n                                weight={\"semibold\"}\n                                aria-hidden={!ariaLabel}\n                            >\n                                {showFullEllipsis(slotWidth) ? \"...\" : label}\n                            </CellText>\n                        )}\n                    </TimeSlot>\n                    {endTime !== slotEndTime && (\n                        <TimeSlotBorder\n                            data-testid=\"end-border\"\n                            $variant={variant}\n                            style={{\n                                left: `${slotOffset + slotWidth}px`,\n                            }}\n                        />\n                    )}\n                </div>\n            );\n        });\n    };\n\n    const renderArrowButtonLeft = () => {\n        return (\n            <>\n                {/* Show the left ArrowButton when the scroll position is greater than 0 */}\n                {scrollPosition > 0 && (\n                    <ArrowButton\n                        data-testid={getDataTestId(\"arrow-left\")}\n                        aria-hidden\n                        tabIndex={-1}\n                        $direction={\"left\"}\n                        $variant={variant}\n                        focusHighlight={false}\n                        focusOutline=\"none\"\n                        onClick={() => {\n                            handleArrowButtonClick(\"left\");\n                        }}\n                    >\n                        <ArrowIconLeft />\n                    </ArrowButton>\n                )}\n            </>\n        );\n    };\n\n    const renderArrowButtonRight = () => {\n        // Show the right ArrowButton when the scroll position is less than the maximum possible scroll value\n        if (\n            scrollPosition + clientWidth <\n            TimeSlotBarHelper.calculateWidth(\n                adjustedStartTime,\n                adjustedEndTime,\n                cellWidth\n            )\n        ) {\n            return (\n                <ArrowButton\n                    data-testid={getDataTestId(\"arrow-right\")}\n                    aria-hidden\n                    tabIndex={-1}\n                    $direction={\"right\"}\n                    $variant={variant}\n                    focusHighlight={false}\n                    focusOutline=\"none\"\n                    onClick={() => {\n                        handleArrowButtonClick(\"right\");\n                    }}\n                >\n                    <ArrowIconRight />\n                </ArrowButton>\n            );\n        }\n\n        return <></>;\n    };\n\n    return (\n        <Container className={className}>\n            <TimeSlotBarContainer\n                data-testid={testId}\n                ref={barRef}\n                $variant={variant}\n            >\n                <TimeMarkerWrapper\n                    data-testid={getDataTestId(\"time-marker-wrapper\")}\n                    data-id=\"marker-wrapper\"\n                >\n                    {renderTimeMarkers()}\n                </TimeMarkerWrapper>\n                <div role=\"grid\" aria-label={slotsSummary} tabIndex={0}>\n                    <TimeSlotWrapper\n                        data-testid={getDataTestId(\"time-slot-wrapper\")}\n                        data-id=\"slot-wrapper\"\n                        role=\"row\"\n                    >\n                        {renderDefaultTimeSlots()}\n                        {renderTimeSlots()}\n                    </TimeSlotWrapper>\n                </div>\n            </TimeSlotBarContainer>\n            {renderArrowButtonLeft()}\n            {renderArrowButtonRight()}\n        </Container>\n    );\n};\n\nexport const TimeSlotBar = forwardRef<TimeSlotBarRef, TimeSlotBarProps>(\n    Component\n);\n"],"names":["TimeSlotBar","forwardRef","props","ref","testId","className","variant","startTime","endTime","slots","onSlotClick","onClick","styleAttributes","initialScrollTime","roundInitialScrollTime","barRef","useRef","scrollPosition","setScrollPosition","useState","clientWidth","setClientWidth","cellWidth","getCellWidth","adjustedStartTime","TimeSlotBarHelper","adjustTimeForMarker","adjustedEndTime","SCROLL_INCREMENT","useImperativeHandle","resetScroll","summary","slotsSummary","computedSlots","allSlots","useMemo","processSlots","start","end","useEffect","container","current","addEventListener","handleScroll","removeEventListener","scrollLeft","handleArrowButtonClick","direction","scrollBy","left","behavior","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","showFullEllipsis","slotWidth","getDataTestId","subStr","shouldDisplayLongTimeMarker","currentTime","isStartHourEven","isHour","minute","hour","TimeHelper","calculateScrollPosition","scrollTime","minTime","maxTime","interval","intervalWidth","options","roundToInterval","isVariant","v","_jsxs","Container","children","TimeSlotBarContainer","$variant","_jsx","TimeMarkerWrapper","timeMarkers","startTimeFormatted","dayjs","endTimeFormatted","isBefore","add","displayLongTimeMarker","push","TimeMarker","format","$isLongMarker","TimeLabel","weight","formatHourlyDisplay","renderTimeMarkers","role","tabIndex","TimeSlotWrapper","backgroundColor","backgroundColor2","hoverBackgroundColor","hoverBackgroundColor2","styleType","calculateWidth","isClickable","TimeSlotBorder","TimeSlot","$width","$left","$styleType","$bgColor","$hoverBgColor","$hoverBgColor2","undefined","renderDefaultTimeSlots","map","slot","id","slotStartTime","slotEndTime","label","clickable","ariaLabel","color","slotOffset","showLabel","handleSlotClick","clickedSlot","evt","stopPropagation","_","__rest","style","$bgColor2","$clickable","VisuallyHidden","type","CellText","$slotWidth","$color","_Fragment","ArrowButton","focusHighlight","focusOutline","ArrowIconLeft","$direction","ArrowIconRight"],"mappings":"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"}
+{"version":3,"file":"time-slot-bar.js","sources":["../../../src/time-slot-bar/time-slot-bar.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport dayjs, { type Dayjs } from \"dayjs\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { TimeSlot } from \"../shared/time-slot\";\nimport { Typography } from \"../typography\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { getCellWidth, TimeSlotBarHelper } from \"./helper\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport TimeSlotDivider from \"./time-slot-divider\";\nimport TimeSlotItem from \"./time-slot-item\";\nimport type {\n    Direction,\n    TimeSlot as TTimeSlot,\n    TimeSlotBarProps,\n    TimeSlotBarRef,\n    TimeSlotBarVariant,\n} from \"./types\";\n\nconst CELL_DURATION = 30; // In minutes\n\nconst Component = (props: TimeSlotBarProps, ref: React.Ref<TimeSlotBarRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        \"data-testid\": testId,\n        className,\n        variant = \"default\",\n        startTime,\n        endTime,\n        slots,\n        onSlotClick,\n        onClick,\n        styleAttributes,\n        initialScrollTime,\n        roundInitialScrollTime = true,\n    } = props;\n    const barRef = useRef<HTMLDivElement>(null);\n    const [scrollPosition, setScrollPosition] = useState<number>(0);\n    const [clientWidth, setClientWidth] = useState<number>(0);\n    const cellWidth = getCellWidth(variant);\n\n    const adjustedStartTime = TimeSlotBarHelper.adjustTimeForMarker(\n        startTime,\n        \"start\"\n    );\n    const adjustedEndTime = TimeSlotBarHelper.adjustTimeForMarker(\n        endTime,\n        \"end\"\n    );\n\n    const SCROLL_INCREMENT = cellWidth * 2.5; // In px. Each scroll increment corresponds to 75mins\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    const { summary: slotsSummary, computedSlots: allSlots } = useMemo(() => {\n        return TimeSlotBarHelper.processSlots(\n            { start: adjustedStartTime, end: adjustedEndTime },\n            slots,\n            variant\n        );\n    }, [adjustedStartTime, adjustedEndTime, slots, variant]);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        const container = barRef.current;\n        if (container) {\n            container.addEventListener(\"scroll\", handleScroll);\n            // Initialize clientWidth on mount\n            setClientWidth(container.clientWidth);\n        }\n\n        return () => {\n            if (container) {\n                container.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, []);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, cellWidth, startTime, endTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleScroll = () => {\n        if (barRef.current) {\n            setScrollPosition(barRef.current.scrollLeft);\n        }\n    };\n\n    const handleArrowButtonClick = (direction: Direction) => {\n        if (barRef.current) {\n            barRef.current.scrollBy({\n                left:\n                    direction === \"left\" ? -SCROLL_INCREMENT : SCROLL_INCREMENT,\n                behavior: \"smooth\",\n            });\n        }\n    };\n\n    const handleResize = () => {\n        if (barRef.current) {\n            setClientWidth(barRef.current.clientWidth);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: barRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * NOTE: Special condition\n     * Show ellipsis only if the slotWidth is smaller or equal to\n     * 15min interval\n     */\n    const showFullEllipsis = (slotWidth: number) => {\n        return slotWidth <= cellWidth / 2;\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!testId) return undefined;\n        return `${testId}-${subStr}`;\n    };\n\n    /**\n     * Function to determine if a long time marker should be displayed\n     * For minified variant the long time marker is displayed every alternate hour\n     */\n    const shouldDisplayLongTimeMarker = (\n        currentTime: Dayjs,\n        isStartHourEven: boolean, // To determine if the first hour is even or odd for minified\n        variant: TimeSlotBarVariant\n    ) => {\n        const isHour = currentTime.minute() === 0;\n\n        if (variant === \"default\") {\n            return isHour;\n        }\n\n        const isAlternateHour =\n            isHour &&\n            (isStartHourEven\n                ? currentTime.hour() % 2 === 0\n                : currentTime.hour() % 2 === 1);\n\n        return isAlternateHour;\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (initialScrollTime && barRef.current && cellWidth > 0) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: adjustedStartTime,\n                maxTime: adjustedEndTime,\n                interval: CELL_DURATION,\n                intervalWidth: cellWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                barRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    const isVariant = (v: TimeSlotBarVariant) => {\n        if (variant === v) return true;\n        return false;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    // Render time markers\n    const renderTimeMarkers = () => {\n        const timeMarkers = [];\n        const startTimeFormatted = dayjs(adjustedStartTime, \"HH:mm\");\n        const endTimeFormatted = dayjs(adjustedEndTime, \"HH:mm\");\n\n        const isStartHourEven = startTimeFormatted.hour() % 2 === 0;\n\n        for (\n            let currentTime = startTimeFormatted;\n            currentTime.isBefore(endTimeFormatted);\n            currentTime = currentTime.add(CELL_DURATION, \"minute\")\n        ) {\n            const displayLongTimeMarker = shouldDisplayLongTimeMarker(\n                currentTime,\n                isStartHourEven,\n                variant\n            );\n\n            timeMarkers.push(\n                <div\n                    data-testid={`${currentTime.format(\"HH:mm\")}-marker`}\n                    key={currentTime.format(\"HH:mm\")}\n                    className={clsx(\n                        styles.timeMarker,\n                        variant === \"default\"\n                            ? styles.timeMarkerDefault\n                            : styles.timeMarkerMinified,\n                        displayLongTimeMarker && styles.timeMarkerLong\n                    )}\n                >\n                    {displayLongTimeMarker && (\n                        <Typography.BodyXS\n                            className={styles.timeLabel}\n                            weight=\"semibold\"\n                        >\n                            {TimeSlotBarHelper.formatHourlyDisplay(\n                                currentTime.format(\"HH:mm\")\n                            )}\n                        </Typography.BodyXS>\n                    )}\n                </div>\n            );\n        }\n        return timeMarkers;\n    };\n\n    // Render default time slot (aka background)\n    const renderDefaultTimeSlots = () => {\n        if (!styleAttributes) return;\n\n        const {\n            backgroundColor,\n            backgroundColor2,\n            hoverBackgroundColor,\n            hoverBackgroundColor2,\n            styleType = \"default\",\n        } = styleAttributes;\n\n        const slotWidth = TimeSlotBarHelper.calculateWidth(\n            adjustedStartTime,\n            adjustedEndTime,\n            cellWidth\n        );\n\n        const isClickable = !!onClick && isVariant(\"default\");\n\n        return (\n            <>\n                <TimeSlotDivider variant={variant} />\n                <TimeSlotItem\n                    key={\"default-timeslot\"}\n                    variant={variant}\n                    dataTestId={getDataTestId(\"default-timeslot\")}\n                    slotWidth={slotWidth}\n                    slotOffset={0}\n                    onClick={isClickable ? onClick : undefined}\n                >\n                    <TimeSlot\n                        className={styles.timeSlotItemContent}\n                        styleType={styleType}\n                        bgColor={backgroundColor}\n                        bgColor2={backgroundColor2}\n                        hoverBgColor={hoverBackgroundColor}\n                        hoverBgColor2={hoverBackgroundColor2}\n                        clickable={isClickable}\n                    />\n                </TimeSlotItem>\n            </>\n        );\n    };\n\n    // Render time slots\n    const renderTimeSlots = () => {\n        return allSlots.map((slot) => {\n            const {\n                id,\n                startTime: slotStartTime,\n                endTime: slotEndTime,\n                label,\n                clickable = true,\n                styleAttributes,\n                ariaLabel,\n            } = slot;\n\n            const {\n                color,\n                styleType = \"default\",\n                backgroundColor,\n                backgroundColor2,\n                hoverBackgroundColor,\n                hoverBackgroundColor2,\n            } = styleAttributes;\n\n            const slotWidth = TimeSlotBarHelper.calculateWidth(\n                slotStartTime,\n                slotEndTime,\n                cellWidth\n            );\n            const slotOffset = TimeSlotBarHelper.calculateWidth(\n                adjustedStartTime,\n                slotStartTime,\n                cellWidth\n            );\n\n            const isClickable = clickable && variant === \"default\";\n            const showLabel = isVariant(\"default\") && label;\n\n            const handleSlotClick =\n                (clickedSlot: TTimeSlot & { ariaLabel?: string }) =>\n                (evt: React.MouseEvent<HTMLElement>) => {\n                    evt.stopPropagation();\n\n                    const { ariaLabel: _, ...slot } = clickedSlot;\n                    if (isClickable) onSlotClick(slot);\n                };\n\n            return (\n                <div key={id} role=\"gridcell\">\n                    <TimeSlotDivider\n                        variant={variant}\n                        left={slotOffset}\n                        dataTestId=\"start-border\"\n                    />\n                    <TimeSlotItem\n                        variant={variant}\n                        dataTestId={getDataTestId(`${id}-timeslot`)}\n                        slotWidth={slotWidth}\n                        slotOffset={slotOffset}\n                        color={color}\n                        onClick={handleSlotClick(slot)}\n                    >\n                        <TimeSlot\n                            className={styles.timeSlotItemContent}\n                            styleType={styleType}\n                            bgColor={backgroundColor}\n                            bgColor2={backgroundColor2}\n                            hoverBgColor={hoverBackgroundColor}\n                            hoverBgColor2={hoverBackgroundColor2}\n                            clickable={isClickable}\n                        >\n                            {!!ariaLabel && (\n                                <VisuallyHidden>\n                                    <button\n                                        type=\"button\" // overrides default type=\"submit\" when used with <form>\n                                        aria-disabled={!isClickable}\n                                        aria-label={ariaLabel}\n                                        onClick={handleSlotClick(slot)} // use `button` element native keyboard activation handling\n                                    />\n                                </VisuallyHidden>\n                            )}\n\n                            {showLabel && (\n                                <Typography.BodyXS\n                                    className={styles.cellText}\n                                    weight={\"semibold\"}\n                                    aria-hidden={!ariaLabel}\n                                >\n                                    {showFullEllipsis(slotWidth)\n                                        ? \"...\"\n                                        : label}\n                                </Typography.BodyXS>\n                            )}\n                        </TimeSlot>\n                    </TimeSlotItem>\n                    {endTime !== slotEndTime && (\n                        <TimeSlotDivider\n                            variant={variant}\n                            dataTestId=\"end-border\"\n                            left={slotOffset + slotWidth}\n                        />\n                    )}\n                </div>\n            );\n        });\n    };\n\n    const renderArrowButton = (direction: Direction) => {\n        const isLeft = direction === \"left\";\n        const totalScrollableWidth = TimeSlotBarHelper.calculateWidth(\n            adjustedStartTime,\n            adjustedEndTime,\n            cellWidth\n        );\n        const hasContentOnLeft = scrollPosition > 0;\n        const hasContentOnRight =\n            scrollPosition + clientWidth < totalScrollableWidth;\n        const shouldShowArrow = isLeft ? hasContentOnLeft : hasContentOnRight;\n\n        if (!shouldShowArrow) return null;\n\n        const directionClass = isLeft\n            ? styles.arrowButtonLeft\n            : styles.arrowButtonRight;\n        const variantClass =\n            variant === \"default\"\n                ? styles.arrowButtonDefault\n                : styles.arrowButtonMinified;\n        const arrowIcon = isLeft ? (\n            <ChevronLeftIcon className={styles.arrowIcon} />\n        ) : (\n            <ChevronRightIcon className={styles.arrowIcon} />\n        );\n\n        return (\n            <ClickableIcon\n                data-testid={getDataTestId(`arrow-${direction}`)}\n                aria-hidden\n                tabIndex={-1}\n                className={clsx(\n                    styles.arrowButton,\n                    directionClass,\n                    variantClass\n                )}\n                focusHighlight={false}\n                focusOutline=\"none\"\n                onClick={() => {\n                    handleArrowButtonClick(direction);\n                }}\n            >\n                {arrowIcon}\n            </ClickableIcon>\n        );\n    };\n\n    return (\n        <div className={clsx(styles.container, className)}>\n            <div\n                data-testid={testId}\n                ref={barRef}\n                className={clsx(\n                    styles.timeSlotBarContainer,\n                    variant === \"default\"\n                        ? styles.containerDefault\n                        : styles.containerMinified\n                )}\n            >\n                <div\n                    className={styles.timeMarkerWrapper}\n                    data-testid={getDataTestId(\"time-marker-wrapper\")}\n                    data-id=\"marker-wrapper\"\n                >\n                    {renderTimeMarkers()}\n                </div>\n                <div role=\"grid\" aria-label={slotsSummary} tabIndex={0}>\n                    <div\n                        className={styles.timeSlotWrapper}\n                        data-testid={getDataTestId(\"time-slot-wrapper\")}\n                        data-id=\"slot-wrapper\"\n                        role=\"row\"\n                    >\n                        {renderDefaultTimeSlots()}\n                        {renderTimeSlots()}\n                    </div>\n                </div>\n            </div>\n            {renderArrowButton(\"left\")}\n            {renderArrowButton(\"right\")}\n        </div>\n    );\n};\n\nexport const TimeSlotBar = forwardRef<TimeSlotBarRef, TimeSlotBarProps>(\n    Component\n);\n"],"names":["TimeSlotBar","forwardRef","props","ref","testId","className","variant","startTime","endTime","slots","onSlotClick","onClick","styleAttributes","initialScrollTime","roundInitialScrollTime","barRef","useRef","scrollPosition","setScrollPosition","useState","clientWidth","setClientWidth","cellWidth","getCellWidth","adjustedStartTime","TimeSlotBarHelper","adjustTimeForMarker","adjustedEndTime","SCROLL_INCREMENT","useImperativeHandle","resetScroll","summary","slotsSummary","computedSlots","allSlots","useMemo","processSlots","start","end","useEffect","container","current","addEventListener","handleScroll","removeEventListener","scrollLeft","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","showFullEllipsis","slotWidth","getDataTestId","subStr","shouldDisplayLongTimeMarker","currentTime","isStartHourEven","isHour","minute","hour","TimeHelper","calculateScrollPosition","scrollTime","minTime","maxTime","interval","intervalWidth","options","roundToInterval","isVariant","v","renderArrowButton","direction","isLeft","totalScrollableWidth","calculateWidth","directionClass","styles.arrowButtonLeft","styles.arrowButtonRight","variantClass","styles.arrowButtonDefault","styles.arrowButtonMinified","arrowIcon","_jsx","ChevronLeftIcon","styles.arrowIcon","ChevronRightIcon","ClickableIcon","tabIndex","clsx","styles.arrowButton","focusHighlight","focusOutline","scrollBy","left","behavior","handleArrowButtonClick","children","_jsxs","styles.container","styles.timeSlotBarContainer","styles.containerDefault","styles.containerMinified","styles.timeMarkerWrapper","timeMarkers","startTimeFormatted","dayjs","endTimeFormatted","isBefore","add","displayLongTimeMarker","push","format","styles.timeMarker","styles.timeMarkerDefault","styles.timeMarkerMinified","styles.timeMarkerLong","Typography","BodyXS","styles.timeLabel","weight","formatHourlyDisplay","renderTimeMarkers","role","styles.timeSlotWrapper","backgroundColor","backgroundColor2","hoverBackgroundColor","hoverBackgroundColor2","styleType","isClickable","_Fragment","TimeSlotDivider","TimeSlotItem","dataTestId","slotOffset","undefined","TimeSlot","styles.timeSlotItemContent","bgColor","bgColor2","hoverBgColor","hoverBgColor2","clickable","renderDefaultTimeSlots","map","slot","id","slotStartTime","slotEndTime","label","ariaLabel","color","showLabel","handleSlotClick","clickedSlot","evt","stopPropagation","_","__rest","VisuallyHidden","type","styles.cellText"],"mappings":"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"}

package/cjs/time-slot-bar/time-slot-bar.styles.js

@@ -1,128 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/chevron-left"),o=require("@lifesg/react-icons/chevron-right"),r=require("styled-components"),t=require("../shared/clickable-icon/clickable-icon.js"),i=require("../typography/index.js"),l=require("../v3_theme/index.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=a(r);const n=1.25,d=e=>"minified"===e?12:40,g=e=>"minified"===e?12:40,p=s.default.div`
-    position: relative;
-    display: flex;
-    align-items: center;
-`,$=s.default(t.ClickableIcon)`
-    z-index: 2;
-    position: absolute;
-    bottom: ${({$variant:e})=>"default"===e?"0.25rem":"0rem"};
-    background-color: ${l.V3_Colour.bg};
-    box-shadow: ${l.V3_Shadow["md-strong"]};
-    border-radius: 100%;
-    padding: 0.5rem;
-    width: 2rem;
-    height: 2rem;
-
-    ${e=>"right"===e.$direction?r.css`
-                  right: 0;
-              `:r.css`
-                  left: 0;
-              `}
-
-    > div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    &:focus {
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
-`,c=s.default(o.ChevronRightIcon)`
-    width: 1rem;
-    height: 1rem;
-    color: ${l.V3_Colour["icon-primary"]};
-`,h=s.default(e.ChevronLeftIcon)`
-    font-size: 1rem;
-    color: ${l.V3_Colour["icon-primary"]};
-`,u=s.default.div`
-    overflow: hidden;
-    flex-grow: 1;
-    position: relative;
-    height: ${({$variant:e})=>`${20+g(e)}px`};
-`,b=s.default.div`
-    position: relative;
-    white-space: nowrap;
-    height: ${n}rem;
-`,f=s.default.div`
-    display: flex;
-    white-space: nowrap;
-`,x=s.default.div`
-    display: inline-block;
-    width: ${({$variant:e})=>`${d(e)}px`};
-    position: relative;
-    border-left: ${l.V3_Border["width-010"]} ${l.V3_Border.solid}
-        ${l.V3_Colour["border-stronger"]};
-    ${e=>{let o=0;switch(e.$variant){case"default":o=e.$isLongMarker?n:.625;break;case"minified":o=e.$isLongMarker?n:0;break;default:o=0}return r.css`
-            height: ${o}rem;
-        `}}
-`,C=s.default(i.Typography.BodyXS)`
-    color: ${l.V3_Colour["text-subtle"]};
-    position: absolute;
-    bottom: 10%;
-    left: 10%;
-`,v=s.default.div`
-    ${e=>"vertical"===e.$type?r.css`
-                display: flex;
-                flex-grow: 1;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-                margin: 1px 0px;
-            `:r.css`
-                position: absolute;
-                height: ${g(e.$variant)}px;
-                width: ${e.$width}px;
-                left: ${e.$left}px;
-            `}
-    background-color: ${({$bgColor:e})=>e};
-    cursor: ${({$clickable:e})=>e?"pointer":"default"};
-    ${({$hoverBgColor:e,$clickable:o})=>e&&o&&r.css`
-            &:hover {
-                background-color: ${e};
-            }
-        `}
-
-    ${e=>"stripes"===e.$styleType&&r.css`
-            background: repeating-linear-gradient(
-                135deg,
-                ${e.$bgColor2||l.V3_Colour["bg-strongest"]} 0px,
-                ${e.$bgColor2||l.V3_Colour["bg-strongest"]} 10px,
-                ${e.$bgColor||l.V3_Colour["bg-stronger"]} 10px,
-                ${e.$bgColor||l.V3_Colour["bg-stronger"]} 20px
-            );
-            ${(e.$hoverBgColor||e.$hoverBgColor2)&&e.$clickable&&r.css`
-                &:hover {
-                    background: repeating-linear-gradient(
-                        135deg,
-                        ${e.$hoverBgColor2||e.$bgColor2||l.V3_Colour["bg-strongest"]}
-                            0px,
-                        ${e.$hoverBgColor2||e.$bgColor2||l.V3_Colour["bg-strongest"]}
-                            10px,
-                        ${e.$hoverBgColor||e.$bgColor||l.V3_Colour["bg-stronger"]}
-                            10px,
-                        ${e.$hoverBgColor||e.$bgColor||l.V3_Colour["bg-stronger"]}
-                            20px
-                    );
-                }
-            `}
-        `}
-`,m=s.default.div`
-    position: absolute;
-    top: ${n}rem;
-    height: ${({$variant:e})=>`${g(e)}px`};
-    z-index: 1;
-    border-right: ${l.V3_Border["width-010"]} ${l.V3_Border.solid}
-        ${l.V3_Colour["border-stronger"]};
-`,w=s.default(i.Typography.BodyXS)`
-    color: ${e=>e.$color||l.V3_Colour.text(e)};
-    position: absolute;
-    bottom: 0;
-    padding-left: 4px;
-    padding-bottom: 4px;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;exports.ArrowButton=$,exports.ArrowIconLeft=h,exports.ArrowIconRight=c,exports.CellText=w,exports.Container=p,exports.TimeLabel=C,exports.TimeMarker=x,exports.TimeMarkerWrapper=b,exports.TimeSlot=v,exports.TimeSlotBarContainer=u,exports.TimeSlotBorder=m,exports.TimeSlotWrapper=f,exports.getCellHeight=g,exports.getCellWidth=d;
+"use strict";require("./time-slot-bar.styles_wigbyd.css");exports.DEFAULT_CELL_SIZE=40,exports.MINIFIED_CELL_SIZE=12,exports.arrowButton="a18tsztd",exports.arrowButtonDefault="a9mraed",exports.arrowButtonLeft="av3ykv8",exports.arrowButtonMinified="aljok3x",exports.arrowButtonRight="as5dred",exports.arrowIcon="a195ar7o",exports.cellText="c1yanpy9",exports.container="cleto2",exports.containerDefault="c1w55l7b",exports.containerMinified="cqcczbk",exports.timeLabel="te99x8g",exports.timeMarker="t1iag8mt",exports.timeMarkerDefault="t1iopuc",exports.timeMarkerLong="t7d7vtm",exports.timeMarkerMinified="tbp961o",exports.timeMarkerWrapper="t10z816e",exports.timeSlotBarContainer="t1dmizys",exports.timeSlotBorder="t1e383ch",exports.timeSlotBorderDefault="tyac3mh",exports.timeSlotBorderMinified="twiecck",exports.timeSlotItem="tfycdxa",exports.timeSlotItemContent="t11y98ca",exports.timeSlotItemDefault="t1kzvg2s",exports.timeSlotItemMinified="t4axcvt",exports.timeSlotWrapper="t1ukhl9h",exports.tokens={item:{width:"--fds-internal-timeSlotBar-item-width",left:"--fds-internal-timeSlotBar-item-left",color:"--fds-internal-timeSlotBar-item-color"},border:{left:"--fds-internal-timeSlotBar-border-left"}};
 //# sourceMappingURL=time-slot-bar.styles.js.map

package/cjs/time-slot-bar/time-slot-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar.styles.js","sources":["../../../src/time-slot-bar/time-slot-bar.styles.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour, V3_Shadow } from \"../v3_theme\";\nimport type { V3_ThemeStyleProps } from \"../v3_theme/types\";\nimport type { Direction, SlotStyle, TimeSlotBarVariant } from \"./types\";\n\nconst MAX_LINE_HEIGHT = 1.25; // NOTE in rem\n\n// =============================================================================\n// STYLING HELPERS\n// =============================================================================\n\n// Function to get the width of a cell in px\nexport const getCellWidth = (variant: TimeSlotBarVariant) => {\n    if (variant === \"minified\") {\n        return 12;\n    } else {\n        return 40;\n    }\n};\n\n// Function to get the height of a cell in px\nexport const getCellHeight = (variant: TimeSlotBarVariant) => {\n    if (variant === \"minified\") {\n        return 12;\n    } else {\n        return 40;\n    }\n};\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\n\ninterface ArrowStyleProps {\n    $direction?: Direction;\n    $variant: TimeSlotBarVariant;\n}\n\nexport interface TimeSlotStyleProps {\n    $type?: \"default\" | \"vertical\";\n    $variant: TimeSlotBarVariant;\n    $width?: number;\n    $left?: number;\n    $styleType: SlotStyle;\n    $bgColor: string | ((props: V3_ThemeStyleProps) => string);\n    $bgColor2?: string | ((props: V3_ThemeStyleProps) => string);\n    $hoverBgColor?: string | ((props: V3_ThemeStyleProps) => string);\n    $hoverBgColor2?: string | ((props: V3_ThemeStyleProps) => string);\n    $clickable?: boolean;\n}\n\ninterface CellTextStyleProps {\n    $slotWidth: number;\n    $color?: string;\n}\n\ninterface TimeMarkerStyleProps {\n    $isLongMarker: boolean;\n    $variant: TimeSlotBarVariant;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div`\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\nexport const ArrowButton = styled(ClickableIcon)<ArrowStyleProps>`\n    z-index: 2;\n    position: absolute;\n    bottom: ${({ $variant }) => ($variant === \"default\" ? \"0.25rem\" : \"0rem\")};\n    background-color: ${V3_Colour.bg};\n    box-shadow: ${V3_Shadow[\"md-strong\"]};\n    border-radius: 100%;\n    padding: 0.5rem;\n    width: 2rem;\n    height: 2rem;\n\n    ${(props) =>\n        props.$direction === \"right\"\n            ? css`\n                  right: 0;\n              `\n            : css`\n                  left: 0;\n              `}\n\n    > div {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    &:focus {\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    }\n`;\n\nexport const ArrowIconRight = styled(ChevronRightIcon)`\n    width: 1rem;\n    height: 1rem;\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const ArrowIconLeft = styled(ChevronLeftIcon)`\n    font-size: 1rem;\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const TimeSlotBarContainer = styled.div<{\n    $variant: TimeSlotBarVariant;\n}>`\n    overflow: hidden;\n    flex-grow: 1;\n    position: relative;\n    height: ${({ $variant }) =>\n        `${MAX_LINE_HEIGHT * 16 + getCellHeight($variant)}px`};\n`;\n\nexport const TimeMarkerWrapper = styled.div`\n    position: relative;\n    white-space: nowrap;\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    white-space: nowrap;\n`;\n\nexport const TimeMarker = styled.div<TimeMarkerStyleProps>`\n    display: inline-block;\n    width: ${({ $variant }) => `${getCellWidth($variant)}px`};\n    position: relative;\n    border-left: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border-stronger\"]};\n    ${(props) => {\n        let markerHeight = 0;\n\n        switch (props.$variant) {\n            case \"default\":\n                markerHeight = props.$isLongMarker ? MAX_LINE_HEIGHT : 0.625;\n                break;\n            case \"minified\":\n                markerHeight = props.$isLongMarker ? MAX_LINE_HEIGHT : 0;\n                break;\n            default:\n                markerHeight = 0;\n                break;\n        }\n\n        return css`\n            height: ${markerHeight}rem;\n        `;\n    }}\n`;\n\nexport const TimeLabel = styled(Typography.BodyXS)`\n    color: ${V3_Colour[\"text-subtle\"]};\n    position: absolute;\n    bottom: 10%;\n    left: 10%;\n`;\n\nexport const TimeSlot = styled.div<TimeSlotStyleProps>`\n    ${(props) => {\n        if (props.$type === \"vertical\") {\n            return css`\n                display: flex;\n                flex-grow: 1;\n                align-items: center;\n                justify-content: center;\n                width: 100%;\n                margin: 1px 0px;\n            `;\n        } else {\n            return css`\n                position: absolute;\n                height: ${getCellHeight(props.$variant)}px;\n                width: ${props.$width}px;\n                left: ${props.$left}px;\n            `;\n        }\n    }}\n    background-color: ${({ $bgColor }) => $bgColor};\n    cursor: ${({ $clickable }) => ($clickable ? \"pointer\" : \"default\")};\n    ${({ $hoverBgColor, $clickable }) =>\n        $hoverBgColor &&\n        $clickable &&\n        css`\n            &:hover {\n                background-color: ${$hoverBgColor};\n            }\n        `}\n\n    ${(props) =>\n        props.$styleType === \"stripes\" &&\n        css`\n            background: repeating-linear-gradient(\n                135deg,\n                ${props.$bgColor2 || V3_Colour[\"bg-strongest\"]} 0px,\n                ${props.$bgColor2 || V3_Colour[\"bg-strongest\"]} 10px,\n                ${props.$bgColor || V3_Colour[\"bg-stronger\"]} 10px,\n                ${props.$bgColor || V3_Colour[\"bg-stronger\"]} 20px\n            );\n            ${(props.$hoverBgColor || props.$hoverBgColor2) &&\n            props.$clickable &&\n            css`\n                &:hover {\n                    background: repeating-linear-gradient(\n                        135deg,\n                        ${props.$hoverBgColor2 ||\n                            props.$bgColor2 ||\n                            V3_Colour[\"bg-strongest\"]}\n                            0px,\n                        ${props.$hoverBgColor2 ||\n                            props.$bgColor2 ||\n                            V3_Colour[\"bg-strongest\"]}\n                            10px,\n                        ${props.$hoverBgColor ||\n                            props.$bgColor ||\n                            V3_Colour[\"bg-stronger\"]}\n                            10px,\n                        ${props.$hoverBgColor ||\n                            props.$bgColor ||\n                            V3_Colour[\"bg-stronger\"]}\n                            20px\n                    );\n                }\n            `}\n        `}\n`;\n\nexport const TimeSlotBorder = styled.div<{ $variant: TimeSlotBarVariant }>`\n    position: absolute;\n    top: ${MAX_LINE_HEIGHT}rem;\n    height: ${({ $variant }) => `${getCellHeight($variant)}px`};\n    z-index: 1;\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border-stronger\"]};\n`;\n\nexport const CellText = styled(Typography.BodyXS)<CellTextStyleProps>`\n    color: ${(props) => props.$color || V3_Colour.text(props)};\n    position: absolute;\n    bottom: 0;\n    padding-left: 4px;\n    padding-bottom: 4px;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n`;\n"],"names":["MAX_LINE_HEIGHT","getCellWidth","variant","getCellHeight","Container","styled","div","ArrowButton","ClickableIcon","$variant","V3_Colour","bg","V3_Shadow","props","$direction","css","ArrowIconRight","ChevronRightIcon","ArrowIconLeft","ChevronLeftIcon","TimeSlotBarContainer","TimeMarkerWrapper","TimeSlotWrapper","TimeMarker","V3_Border","solid","markerHeight","$isLongMarker","TimeLabel","Typography","BodyXS","TimeSlot","$type","$width","$left","$bgColor","$clickable","$hoverBgColor","$styleType","$bgColor2","$hoverBgColor2","TimeSlotBorder","CellText","$color","text"],"mappings":"8VAUA,MAAMA,EAAkB,KAOXC,EAAgBC,GACT,aAAZA,EACO,GAEA,GAKFC,EAAiBD,GACV,aAAZA,EACO,GAEA,GAwCFE,EAAYC,EAAAA,QAAOC,GAAG;;;;EAMtBC,EAAcF,EAAAA,QAAOG,EAAAA,cAA+B;;;cAGnD,EAAGC,cAA6B,YAAbA,EAAyB,UAAY;wBAC9CC,EAAAA,UAAUC;kBAChBC,EAAAA,UAAU;;;;;;MAMrBC,GACsB,UAArBA,EAAMC,WACAC,KAAG;;gBAGHA,KAAG;;;;;;;;;;;;;EAeJC,EAAiBX,EAAAA,QAAOY,EAAAA,iBAAiB;;;aAGzCP,EAAAA,UAAU;EAGVQ,EAAgBb,EAAAA,QAAOc,EAAAA,gBAAgB;;aAEvCT,EAAAA,UAAU;EAGVU,EAAuBf,EAAAA,QAAOC,GAEzC;;;;cAIY,EAAGG,cACT,GAAGT,GAAuBG,EAAcM;EAGnCY,EAAoBhB,EAAAA,QAAOC,GAAG;;;cAG7BN;EAGDsB,EAAkBjB,EAAAA,QAAOC,GAAG;;;EAK5BiB,EAAalB,EAAAA,QAAOC,GAAyB;;aAE7C,EAAGG,cAAe,GAAGR,EAAaQ;;mBAE5Be,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC;UAC7Cf,EAAAA,UAAU;MACbG,IACC,IAAIa,EAAe,EAEnB,OAAQb,EAAMJ,UACV,IAAK,UACDiB,EAAeb,EAAMc,cAAgB3B,EAAkB,KACvD,MACJ,IAAK,WACD0B,EAAeb,EAAMc,cAAgB3B,EAAkB,EACvD,MACJ,QACI0B,EAAe,EAIvB,OAAOX,KAAG;sBACIW;SACb;EAIIE,EAAYvB,EAAAA,QAAOwB,aAAWC,OAAO;aACrCpB,EAAAA,UAAU;;;;EAMVqB,EAAW1B,EAAAA,QAAOC,GAAuB;MAC/CO,GACqB,aAAhBA,EAAMmB,MACCjB,KAAG;;;;;;;cASHA,KAAG;;0BAEIZ,EAAcU,EAAMJ;yBACrBI,EAAMoB;wBACPpB,EAAMqB;;wBAIN,EAAGC,cAAeA;cAC5B,EAAGC,gBAAkBA,EAAa,UAAY;MACtD,EAAGC,gBAAeD,gBAChBC,GACAD,GACArB,KAAG;;oCAEyBsB;;;;MAI7BxB,GACsB,YAArBA,EAAMyB,YACNvB,KAAG;;;kBAGOF,EAAM0B,WAAa7B,EAAAA,UAAU;kBAC7BG,EAAM0B,WAAa7B,EAAAA,UAAU;kBAC7BG,EAAMsB,UAAYzB,EAAAA,UAAU;kBAC5BG,EAAMsB,UAAYzB,EAAAA,UAAU;;eAE/BG,EAAMwB,eAAiBxB,EAAM2B,iBAChC3B,EAAMuB,YACNrB,KAAG;;;;0BAIWF,EAAM2B,gBACJ3B,EAAM0B,WACN7B,EAAAA,UAAU;;0BAEZG,EAAM2B,gBACJ3B,EAAM0B,WACN7B,EAAAA,UAAU;;0BAEZG,EAAMwB,eACJxB,EAAMsB,UACNzB,EAAAA,UAAU;;0BAEZG,EAAMwB,eACJxB,EAAMsB,UACNzB,EAAAA,UAAU;;;;;;EAQzB+B,EAAiBpC,EAAAA,QAAOC,GAAqC;;WAE/DN;cACG,EAAGS,cAAe,GAAGN,EAAcM;;oBAE7Be,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC;UAC9Cf,EAAAA,UAAU;EAGPgC,EAAWrC,EAAAA,QAAOwB,aAAWC,OAA2B;aACvDjB,GAAUA,EAAM8B,QAAUjC,EAAAA,UAAUkC,KAAK/B;;;;;;;;;"}
+{"version":3,"file":"time-slot-bar.styles.js","sources":["../../../src/time-slot-bar/time-slot-bar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Shadow } from \"../theme\";\n\nconst MAX_LINE_HEIGHT = 1.25; // NOTE in rem\nexport const DEFAULT_CELL_SIZE = 40;\nexport const MINIFIED_CELL_SIZE = 12;\n\nexport const tokens = {\n    item: {\n        width: \"--fds-internal-timeSlotBar-item-width\",\n        left: \"--fds-internal-timeSlotBar-item-left\",\n        color: \"--fds-internal-timeSlotBar-item-color\",\n    },\n    border: {\n        left: \"--fds-internal-timeSlotBar-border-left\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\nexport const arrowButton = css`\n    z-index: 2;\n    position: absolute;\n    bottom: 0rem;\n    background-color: ${Colour.bg};\n    box-shadow: ${Shadow[\"md-strong\"]};\n    border-radius: 100%;\n    padding: 0.5rem;\n    width: 2rem;\n    height: 2rem;\n\n    > div {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    &:focus {\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    }\n`;\n\nexport const arrowButtonDefault = css`\n    bottom: 0.25rem;\n`;\n\nexport const arrowButtonMinified = css`\n    bottom: 0rem;\n`;\n\nexport const arrowButtonLeft = css`\n    left: 0;\n`;\n\nexport const arrowButtonRight = css`\n    right: 0;\n`;\n\nexport const arrowIcon = css`\n    width: 1rem;\n    height: 1rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const timeSlotBarContainer = css`\n    overflow: hidden;\n    flex-grow: 1;\n    position: relative;\n`;\n\nexport const containerDefault = css`\n    height: ${MAX_LINE_HEIGHT * 16 + DEFAULT_CELL_SIZE}px;\n`;\n\nexport const containerMinified = css`\n    height: ${MAX_LINE_HEIGHT * 16 + MINIFIED_CELL_SIZE}px;\n`;\n\nexport const timeMarkerWrapper = css`\n    position: relative;\n    white-space: nowrap;\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const timeSlotWrapper = css`\n    display: flex;\n    white-space: nowrap;\n`;\n\nexport const timeMarker = css`\n    display: inline-block;\n    position: relative;\n    border-left: ${Border[\"width-010\"]} ${Border.solid}\n        ${Colour[\"border-stronger\"]};\n`;\n\nexport const timeMarkerDefault = css`\n    width: ${DEFAULT_CELL_SIZE}px;\n    height: 0.625rem;\n`;\n\nexport const timeMarkerMinified = css`\n    width: ${MINIFIED_CELL_SIZE}px;\n    height: 0rem;\n`;\n\nexport const timeMarkerLong = css`\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const timeLabel = css`\n    color: ${Colour[\"text-subtle\"]};\n    position: absolute;\n    bottom: 10%;\n    left: 10%;\n`;\n\nexport const timeSlotBorder = css`\n    /* reset variable to prevent leaking to child components */\n    ${tokens.border.left}: initial;\n\n    position: absolute;\n    top: ${MAX_LINE_HEIGHT}rem;\n    z-index: 1;\n    left: var(${tokens.border.left});\n    border-right: ${Border[\"width-010\"]} ${Border.solid}\n        ${Colour[\"border-stronger\"]};\n`;\n\nexport const timeSlotBorderDefault = css`\n    height: ${DEFAULT_CELL_SIZE}px;\n`;\n\nexport const timeSlotBorderMinified = css`\n    height: ${MINIFIED_CELL_SIZE}px;\n`;\n\nexport const cellText = css`\n    position: absolute;\n    bottom: 0;\n    padding-left: 4px;\n    padding-bottom: 4px;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: inherit;\n`;\n\nexport const timeSlotItem = css`\n    /* reset variables to prevent leaking to child components */\n    ${tokens.item.left}: initial;\n    ${tokens.item.width}: initial;\n    ${tokens.item.color}: initial;\n\n    position: absolute;\n    color: var(${tokens.item.color});\n    left: var(${tokens.item.left});\n    width: var(${tokens.item.width});\n`;\n\nexport const timeSlotItemContent = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const timeSlotItemDefault = css`\n    height: ${DEFAULT_CELL_SIZE}px;\n`;\n\nexport const timeSlotItemMinified = css`\n    height: ${MINIFIED_CELL_SIZE}px;\n`;\n"],"names":["item","width","left","color","border"],"mappings":"iHAKiC,8BACC,uBAmBV,sCAsBO,kCAQH,sCAJI,mCAQH,4BAIP,4BA+ED,6BA3HC,kCAwDO,qCAIC,4BAoCR,6BArBC,qCAOO,iCAUH,qCALI,oCAvBD,wCAdG,kCAqDN,yCAYO,yCAIC,+BAgBV,sCAYO,uCAKA,wCAIC,kCAtFL,0BAjFN,CAClBA,KAAM,CACFC,MAAO,wCACPC,KAAM,uCACNC,MAAO,yCAEXC,OAAQ,CACJF,KAAM"}

package/cjs/time-slot-bar/time-slot-bar.styles_wigbyd.css

@@ -0,0 +1,25 @@
+.cleto2{position:relative;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;}
+.a18tsztd{z-index:2;position:absolute;bottom:0rem;background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-md-strong);border-radius:100%;padding:0.5rem;width:2rem;height:2rem;}.a18tsztd >div{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;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.a18tsztd:focus{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
+.a9mraed{bottom:0.25rem;}
+.aljok3x{bottom:0rem;}
+.av3ykv8{left:0;}
+.as5dred{right:0;}
+.a195ar7o{width:1rem;height:1rem;color:var(--fds-colour-icon-primary);}
+.t1dmizys{overflow:hidden;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;}
+.c1w55l7b{height:60px;}
+.cqcczbk{height:32px;}
+.t10z816e{position:relative;white-space:nowrap;height:1.25rem;}
+.t1ukhl9h{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;white-space:nowrap;}
+.t1iag8mt{display:inline-block;position:relative;border-left:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-stronger);}
+.t1iopuc{width:40px;height:0.625rem;}
+.tbp961o{width:12px;height:0rem;}
+.t7d7vtm{height:1.25rem;}
+.te99x8g{color:var(--fds-colour-text-subtle);position:absolute;bottom:10%;left:10%;}
+.t1e383ch{--fds-internal-timeSlotBar-border-left:initial;position:absolute;top:1.25rem;z-index:1;left:var(--fds-internal-timeSlotBar-border-left);border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-stronger);}
+.tyac3mh{height:40px;}
+.twiecck{height:12px;}
+.c1yanpy9{position:absolute;bottom:0;padding-left:4px;padding-bottom:4px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;}
+.tfycdxa{--fds-internal-timeSlotBar-item-left:initial;--fds-internal-timeSlotBar-item-width:initial;--fds-internal-timeSlotBar-item-color:initial;position:absolute;color:var(--fds-internal-timeSlotBar-item-color);left:var(--fds-internal-timeSlotBar-item-left);width:var(--fds-internal-timeSlotBar-item-width);}
+.t11y98ca{width:100%;height:100%;}
+.t1kzvg2s{height:40px;}
+.t4axcvt{height:12px;}

package/cjs/time-slot-bar/time-slot-divider.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("clsx"),t=require("react");require("../theme/theme-provider/index.js");var s=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var i=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var u=require("./time-slot-bar.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(r);exports.default=({variant:r,left:o,dataTestId:l})=>{const d=t.useRef(null);return i.useApplyStyle(d,{[u.tokens.border.left]:void 0===o?void 0:s.formatUnitValue(o,"px")}),e.jsx("div",{ref:d,"data-testid":l,className:a.default(u.timeSlotBorder,"default"===r?u.timeSlotBorderDefault:u.timeSlotBorderMinified)})};
+//# sourceMappingURL=time-slot-divider.js.map

package/cjs/time-slot-bar/time-slot-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-divider.js","sources":["../../../src/time-slot-bar/time-slot-divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlotBarVariant } from \"./types\";\n\ninterface TimeSlotDividerProps {\n    variant: TimeSlotBarVariant;\n    left?: number;\n    dataTestId?: string;\n}\n\nconst TimeSlotDivider = ({\n    variant,\n    left,\n    dataTestId,\n}: TimeSlotDividerProps) => {\n    const dividerRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(dividerRef, {\n        [styles.tokens.border.left]:\n            left === undefined ? undefined : formatUnitValue(left, \"px\"),\n    });\n\n    return (\n        <div\n            ref={dividerRef}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.timeSlotBorder,\n                variant === \"default\"\n                    ? styles.timeSlotBorderDefault\n                    : styles.timeSlotBorderMinified\n            )}\n        />\n    );\n};\n\nexport default TimeSlotDivider;\n"],"names":["variant","left","dataTestId","dividerRef","useRef","useApplyStyle","styles.tokens","border","undefined","formatUnitValue","_jsx","ref","className","clsx","styles.timeSlotBorder","styles.timeSlotBorderDefault","styles.timeSlotBorderMinified"],"mappings":"4pBAawB,EACpBA,UACAC,OACAC,iBAEA,MAAMC,EAAaC,EAAAA,OAAuB,MAO1C,OALAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,EAAAA,OAAcC,OAAON,WACTO,IAATP,OAAqBO,EAAYC,EAAAA,gBAAgBR,EAAM,QAI3DS,MAAA,MAAA,CACIC,IAAKR,EAAU,cACFD,EACbU,UAAWC,UACPC,EAAAA,eACY,YAAZd,EACMe,EAAAA,sBACAC,EAAAA,yBAEZ"}

package/cjs/time-slot-bar/time-slot-item.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("clsx"),r=require("react");require("../theme/theme-provider/index.js");var i=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var s=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var u=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var l=require("./time-slot-bar.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t);exports.default=({children:t,color:o,dataTestId:m,onClick:n,slotOffset:d,slotWidth:c,variant:f})=>{const h=r.useRef(null);return u.useApplyStyle(h,{[l.tokens.item.width]:i.formatUnitValue(c,"px"),[l.tokens.item.left]:i.formatUnitValue(d,"px"),[l.tokens.item.color]:o||s.Colour.text}),e.jsx("div",{ref:h,"data-testid":m,className:a.default(l.timeSlotItem,"default"===f?l.timeSlotItemDefault:l.timeSlotItemMinified),onClick:n,children:t})};
+//# sourceMappingURL=time-slot-item.js.map

package/cjs/time-slot-bar/time-slot-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-item.js","sources":["../../../src/time-slot-bar/time-slot-item.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type MouseEvent, useRef } from \"react\";\n\nimport { Colour, formatUnitValue, useApplyStyle } from \"../theme\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlotBarVariant } from \"./types\";\n\ninterface TimeSlotItemProps {\n    children: React.ReactNode;\n    color?: string;\n    dataTestId?: string;\n    onClick?: (() => void) | ((evt: MouseEvent<HTMLElement>) => void);\n    slotOffset: number;\n    slotWidth: number;\n    variant: TimeSlotBarVariant;\n}\n\nconst TimeSlotItem = ({\n    children,\n    color,\n    dataTestId,\n    onClick,\n    slotOffset,\n    slotWidth,\n    variant,\n}: TimeSlotItemProps) => {\n    const itemRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(itemRef, {\n        [styles.tokens.item.width]: formatUnitValue(slotWidth, \"px\"),\n        [styles.tokens.item.left]: formatUnitValue(slotOffset, \"px\"),\n        [styles.tokens.item.color]: color || Colour.text,\n    });\n\n    return (\n        <div\n            ref={itemRef}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.timeSlotItem,\n                variant === \"default\"\n                    ? styles.timeSlotItemDefault\n                    : styles.timeSlotItemMinified\n            )}\n            onClick={onClick}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport default TimeSlotItem;\n"],"names":["children","color","dataTestId","onClick","slotOffset","slotWidth","variant","itemRef","useRef","useApplyStyle","styles.tokens","item","width","formatUnitValue","left","Colour","text","_jsx","ref","className","clsx","styles.timeSlotItem","styles.timeSlotItemDefault","styles.timeSlotItemMinified"],"mappings":"kqBAiBqB,EACjBA,WACAC,QACAC,aACAC,UACAC,aACAC,YACAC,cAEA,MAAMC,EAAUC,EAAAA,OAAuB,MAQvC,OANAC,EAAAA,cAAcF,EAAS,CACnB,CAACG,EAAAA,OAAcC,KAAKC,OAAQC,EAAAA,gBAAgBR,EAAW,MACvD,CAACK,EAAAA,OAAcC,KAAKG,MAAOD,EAAAA,gBAAgBT,EAAY,MACvD,CAACM,EAAAA,OAAcC,KAAKV,OAAQA,GAASc,EAAAA,OAAOC,OAI5CC,MAAA,MAAA,CACIC,IAAKX,EAAO,cACCL,EACbiB,UAAWC,UACPC,EAAAA,aACY,YAAZf,EACMgB,EAAAA,oBACAC,EAAAA,sBAEVpB,QAASA,EAAOH,SAEfA,GACC"}