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

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

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as r}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as d}from"react";import"../../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as l}from"../../shared/dropdown-wrapper/element-with-dropdown.js";import{RangeInputInnerContainer as a}from"../../shared/range-input-inner-container/range-input-inner-container.js";import{TimepickerDropdown as i}from"../../shared/timepicker-dropdown/timepicker-dropdown.js";import{TimeHelper as s}from"../../util/time-helper.js";import{Wrapper as c,TimeContainer as u,SelectorInput as p}from"../common.styles.js";const m=m=>{var{id:f,disabled:v=!1,error:g,value:h,format:w="24hr",readOnly:k,onChange:b,onFocus:F,onBlur:j,alignment:y="left",dropdownZIndex:C,dropdownRootNode:O}=m,x=e(m,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode"]);const[$,B]=t(!1),[D,I]=t("none"),[T,N]=t(""),[R,Z]=t(""),[V,_]=t(!1),A=!k&&!v,E=n(null);d((()=>{h&&(N(h.start),Z(h.end))}),[h]);const P=e=>{A&&(V||$||null==F||F(),_(!0),I(e),B(!0))},q=e=>{var o,r;const t=!!(null==e?void 0:e.keepFocus),n=null!==(o=null==e?void 0:e.triggerBlur)&&void 0!==o?o:!t;B(!1),I("none"),_(t),n&&(null==j||j()),t&&(null===(r=E.current)||void 0===r||r.focus())},z=e=>{var o,r,t;if(!V||$)return;const n=e.relatedTarget,d=(null===(o=null==n?void 0:n.matches)||void 0===o?void 0:o.call(n,"[data-floating-ui-focusable]"))||(null===(r=null==n?void 0:n.matches)||void 0===r?void 0:r.call(n,"[data-floating-ui-focus-guard]"));!(!n||!(null===(t=E.current)||void 0===t?void 0:t.contains(n)))||d||(_(!1),null==j||j())},G=e=>{N(e),null==b||b({start:e,end:R}),I("end"),B(!0),_(!0)},H=e=>{Z(e),null==b||b({start:T,end:e}),""===T?(I("start"),B(!0),_(!0)):q({keepFocus:!0})};return o(c,Object.assign({id:f},x,{children:o(l,{enabled:A,isOpen:$,renderElement:()=>o(c,Object.assign({ref:E,id:f,tabIndex:-1,onBlur:z,"data-testid":"timepicker-container"},x,{children:o(u,{$disabled:v,$error:g,$readOnly:k,$focused:V,children:r(a,{error:g,currentActive:D,children:[o(p,{onFocus:()=>P("start"),onClick:()=>P("start"),readOnly:!0,placeholder:"From",value:s.formatDisplayValue(T,w),disabled:v,"data-testid":x["data-testid"]?`${x["data-testid"]}-timepicker-selector-from`:"timepicker-selector-from"}),o(p,{onClick:()=>P("end"),readOnly:!0,placeholder:"To",value:s.formatDisplayValue(R,w),disabled:v,"data-testid":x["data-testid"]?`${x["data-testid"]}-timepicker-selector-to`:"timepicker-selector-to"})]})})})),renderDropdown:({styles:e,setFloatingRef:t,getFloatingProps:n})=>$?r("div",Object.assign({ref:t,style:e},n(),{children:["start"===D&&o(i,{id:f,show:!0,value:T,format:w,onCancel:()=>q({keepFocus:!0}),onChange:G}),"end"===D&&o(i,{id:f,show:!0,value:R,format:w,onCancel:()=>q({keepFocus:!1}),onChange:H})]})):null,onClose:()=>q({keepFocus:!1}),onDismiss:()=>q({keepFocus:!0}),clickToToggle:!1,offset:8,alignment:y,customZIndex:C,rootNode:O})}))};export{m as DialPicker};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as r,jsxs as a}from"react/jsx-runtime";import o from"clsx";import{useState as i,useRef as t,useEffect as l}from"react";import{concatIds as n}from"../../shared/accessibility/index.js";import{ElementWithDropdown as d}from"../../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as s,BasicInput as c}from"../../shared/input-wrapper/input-wrapper.js";import{RangeInputInnerContainer as m}from"../../shared/range-input-inner-container/range-input-inner-container.js";import{TimepickerDropdown as p}from"../../shared/timepicker-dropdown/timepicker-dropdown.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as u}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{TimeHelper as v}from"../../util/time-helper.js";import{wrapper as b,timeContainer as f,selectorInput as g}from"../common.styles.js";const h=h=>{var{id:y,disabled:j=!1,error:k,value:w,format:x="24hr",readOnly:F,onChange:C,onFocus:N,onBlur:O,alignment:$="left",dropdownZIndex:B,dropdownRootNode:D,"aria-labelledby":I,"aria-describedby":T,"aria-invalid":R}=h,S=e(h,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const[Z,E]=i(!1),[V,_]=i("none"),[A,P]=i(""),[q,z]=i(""),[G,H]=i(!1),J=!F&&!j,K=t(null),L=u(),M=`${L}-start-label`,Q=`${L}-end-label`,U=e=>n(I,"start"===e?M:Q),W=()=>n(T);l((()=>{w&&(P(w.start),z(w.end))}),[w]);const X=e=>{J&&(G||Z||null==N||N(),H(!0),_(e),E(!0))},Y=e=>{var r,a;const o=!!(null==e?void 0:e.keepFocus),i=null!==(r=null==e?void 0:e.triggerBlur)&&void 0!==r?r:!o;E(!1),_("none"),H(o),i&&(null==O||O()),o&&(null===(a=K.current)||void 0===a||a.focus())},ee=e=>{var r,a,o;if(!G||Z)return;const i=e.relatedTarget,t=(null===(r=null==i?void 0:i.matches)||void 0===r?void 0:r.call(i,"[data-floating-ui-focusable]"))||(null===(a=null==i?void 0:i.matches)||void 0===a?void 0:a.call(i,"[data-floating-ui-focus-guard]"));!(!i||!(null===(o=K.current)||void 0===o?void 0:o.contains(i)))||t||(H(!1),null==O||O())},re=e=>{P(e),null==C||C({start:e,end:q}),_("end"),E(!0),H(!0)},ae=e=>{z(e),null==C||C({start:A,end:e}),""===A?(_("start"),E(!0),H(!0)):Y({keepFocus:!0})};return r("div",Object.assign({id:y},S,{className:o(b,S.className),children:r(d,{enabled:J,isOpen:Z,renderElement:()=>r(s,{ref:K,tabIndex:-1,onBlur:ee,"data-testid":"timepicker-container",role:"group",disabled:j,error:k,readOnly:F,focused:G,className:f,children:a(m,{error:k,currentActive:V,children:[r(c,{onFocus:()=>X("start"),onClick:()=>X("start"),readOnly:!0,placeholder:"From",value:v.formatDisplayValue(A,x),"data-testid":S["data-testid"]?`${S["data-testid"]}-timepicker-selector-from`:"timepicker-selector-from",role:"combobox","aria-expanded":!j&&!F&&Z,"aria-invalid":k||R,"aria-disabled":j,"aria-readonly":F,"aria-labelledby":U("start"),"aria-describedby":W(),className:g}),r(c,{onClick:()=>X("end"),readOnly:!0,placeholder:"To",value:v.formatDisplayValue(q,x),"data-testid":S["data-testid"]?`${S["data-testid"]}-timepicker-selector-to`:"timepicker-selector-to",role:"combobox","aria-expanded":!j&&!F&&Z,"aria-invalid":k||R||void 0,"aria-disabled":j||void 0,"aria-readonly":F||void 0,"aria-labelledby":U("end"),"aria-describedby":W(),className:g})]})}),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:i})=>Z?a("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"start"===V?"Selecting for: Start time":"end"===V?"Selecting for: End time":void 0},i(),{children:["start"===V&&r(p,{id:y?`${y}-start`:void 0,show:!0,value:A,format:x,onCancel:()=>Y({keepFocus:!0}),onChange:re}),"end"===V&&r(p,{id:y?`${y}-end`:void 0,show:!0,value:q,format:x,onCancel:()=>Y({keepFocus:!1}),onChange:ae})]}),V):null,onClose:()=>Y({keepFocus:!1}),onDismiss:()=>Y({keepFocus:!0}),clickToToggle:!1,offset:8,alignment:$,customZIndex:B,rootNode:D})}))};export{h as DialPicker};
 //# sourceMappingURL=dial-picker.js.map

package/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 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 { 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    ...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\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        <Wrapper\n            ref={nodeRef}\n            id={id}\n            tabIndex={-1}\n            onBlur={handleContainerBlur}\n            data-testid=\"timepicker-container\"\n            {...otherProps}\n        >\n            <TimeContainer\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(\n                            startTimeVal,\n                            format\n                        )}\n                        disabled={disabled}\n                        data-testid={\n                            otherProps[\"data-testid\"]\n                                ? `${otherProps[\"data-testid\"]}-timepicker-selector-from`\n                                : \"timepicker-selector-from\"\n                        }\n                    />\n                    <SelectorInput\n                        onClick={() => handleOpen(\"end\")}\n                        readOnly\n                        placeholder=\"To\"\n                        value={TimeHelper.formatDisplayValue(\n                            endTimeVal,\n                            format\n                        )}\n                        disabled={disabled}\n                        data-testid={\n                            otherProps[\"data-testid\"]\n                                ? `${otherProps[\"data-testid\"]}-timepicker-selector-to`\n                                : \"timepicker-selector-to\"\n                        }\n                    />\n                </RangeInputInnerContainer>\n            </TimeContainer>\n        </Wrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => {\n        if (!isOpen) return null;\n\n        return (\n            <div ref={setFloatingRef} style={styles} {...getFloatingProps()}>\n                {active === \"start\" && (\n                    <TimepickerDropdown\n                        id={id}\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}\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":["DialPicker","_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","otherProps","__rest","isOpen","setIsOpen","useState","active","setActive","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","focused","setFocused","enabled","nodeRef","useRef","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","ref","tabIndex","TimeContainer","$disabled","$error","$focused","_jsxs","RangeInputInnerContainer","currentActive","SelectorInput","onClick","placeholder","TimeHelper","formatDisplayValue","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onClose","onDismiss","clickToToggle","offset","customZIndex","rootNode"],"mappings":"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"}
+{"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":["DialPicker","_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/time-range-picker/types.d.ts

@@ -10,6 +10,9 @@ export interface TimeRangePickerProps {
     className?: string | undefined;
     id?: string | undefined;
     style?: React.CSSProperties | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-invalid"?: boolean | undefined;
     "data-testid"?: string | undefined;
     /**
      * An object with `start` and `end` values as an empty string or a
@@ -40,6 +43,10 @@ export interface TimeRangePickerProps {
     startLimit?: string | undefined;
     /** Specifies the ending time for the dropdown options */
     endLimit?: string | undefined;
+    /** Specifies the initial start time to scroll to when the start dropdown opens */
+    initialScrollStartTime?: string | undefined;
+    /** Specifies the initial end time to scroll to when the end dropdown opens */
+    initialScrollEndTime?: string | undefined;
     /** Specifies the alignment of the dropdown to the left or right of the reference element */
     alignment?: DropdownAlignmentType | undefined;
     /** Specifies the z-index of the dropdown element */

package/time-slot-bar/helper.d.ts

@@ -1,3 +1,4 @@
+import type { TimeSlot as TTimeSlot, TimeSlotBarVariant } from "./types";
 export declare class TimeSlotBarHelper {
     /**
      * Format HH:mm to am/pm display
@@ -18,4 +19,27 @@ export declare class TimeSlotBarHelper {
      * @param type - "start" or "end" indicating which boundary to adjust
      */
     static adjustTimeForMarker(time: string, type: "start" | "end"): string;
+    /**
+     * Process raw slots and any gaps in the given time range.
+     *
+     * Builds a summary string and a list of slots that includes:
+     * - original slots,
+     * - leading/trailing unavailable time gaps,
+     * - gap slots inserted between non-contiguous slots.
+     *
+     * @param range - start/end bounds for the timeslot bar.
+     * @param slots - user-provided slots to render.
+     * @param variant - display variant controlling summary and aria label behavior.
+     * @returns summary for container aria-label and computed slots ready for rendering.
+     */
+    static processSlots(range: {
+        start: string;
+        end: string;
+    }, slots: TTimeSlot[], variant: TimeSlotBarVariant): {
+        summary: string;
+        computedSlots: (TTimeSlot & {
+            ariaLabel?: string;
+        })[];
+    };
 }
+export declare const getCellWidth: (variant: TimeSlotBarVariant) => 12 | 40;

package/time-slot-bar/helper.js

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

package/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 } from \"../util\";\n// Load plugins\ndayjs.extend(customParseFormat);\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"],"names":["dayjs","extend","customParseFormat","TimeSlotBarHelper","formatHourlyDisplay","timeString","format","calculateWidth","start","end","cellWidth","DateHelper","getTimeDiffInMinutes","adjustTimeForMarker","time","type","parsedTime","minute","set","nextHour","add","hour"],"mappings":"iPAKAA,EAAMC,OAAOC,SAMAC,EAKF,0BAAOC,CAAoBC,GAE9B,OADmBL,EAAMK,EAAY,SACnBC,OAAO,KAC7B,CAQO,qBAAOC,CACVC,EACAC,EACAC,GAMA,OACKC,EAAWC,qBAAqBJ,EAAOC,GAAO,IAAOC,EAAY,EAE1E,CAQO,0BAAOG,CACVC,EACAC,GAEA,MAAMC,EAAahB,EAAMc,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"}
+{"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","TimeSlotBarHelper","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","getCellWidth","styles.MINIFIED_CELL_SIZE","styles.DEFAULT_CELL_SIZE"],"mappings":"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"}

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

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

package/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 {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\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    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    // =============================================================================\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    // =============================================================================\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            styleType = \"default\",\n        } = styleAttributes;\n\n        const slotWidth = TimeSlotBarHelper.calculateWidth(\n            adjustedStartTime,\n            adjustedEndTime,\n            cellWidth\n        );\n\n        const isClickable = !!onClick && variant === \"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                    $clickable={isClickable}\n                    onClick={isClickable ? onClick : undefined}\n                />\n            </>\n        );\n    };\n\n    // Render time slots\n    const renderTimeSlots = () => {\n        return slots.map((slot) => {\n            const {\n                id,\n                startTime: slotStartTime,\n                endTime: slotEndTime,\n                label,\n                clickable = true,\n                styleAttributes,\n            } = slot;\n\n            const {\n                color,\n                styleType = \"default\",\n                backgroundColor,\n                backgroundColor2,\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\n            return (\n                <div key={id}>\n                    <TimeSlotBorder\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                        $clickable={isClickable}\n                        onClick={() => isClickable && onSlotClick(slot)}\n                    >\n                        {label && variant === \"default\" && (\n                            <CellText\n                                $slotWidth={slotWidth}\n                                $color={color}\n                                weight={\"semibold\"}\n                            >\n                                {showFullEllipsis(slotWidth) ? \"...\" : label}\n                            </CellText>\n                        )}\n                    </TimeSlot>\n                    {endTime !== slotEndTime && (\n                        <TimeSlotBorder\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                        $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                    $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                <TimeSlotWrapper\n                    data-testid={getDataTestId(\"time-slot-wrapper\")}\n                    data-id=\"slot-wrapper\"\n                >\n                    {renderDefaultTimeSlots()}\n                    {renderTimeSlots()}\n                </TimeSlotWrapper>\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","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","_jsxs","Container","children","TimeSlotBarContainer","$variant","_jsx","TimeMarkerWrapper","timeMarkers","startTimeFormatted","dayjs","endTimeFormatted","isBefore","add","displayLongTimeMarker","push","TimeMarker","format","$isLongMarker","TimeLabel","weight","formatHourlyDisplay","renderTimeMarkers","TimeSlotWrapper","backgroundColor","backgroundColor2","styleType","calculateWidth","isClickable","TimeSlotBorder","TimeSlot","$width","$left","$styleType","$bgColor2","$clickable","undefined","renderDefaultTimeSlots","map","slot","id","slotStartTime","slotEndTime","label","clickable","color","slotOffset","style","$bgColor","CellText","$slotWidth","_Fragment","ArrowButton","$direction","focusHighlight","focusOutline","ArrowIconLeft","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","ChevronRightIcon","styles.arrowIcon","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/time-slot-bar/time-slot-bar.styles.d.ts

@@ -1,57 +1,37 @@
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
-import type { Direction, SlotStyle, TimeSlotBarVariant } from "./types";
-export declare const getCellWidth: (variant: TimeSlotBarVariant) => 12 | 40;
-export declare const getCellHeight: (variant: TimeSlotBarVariant) => 12 | 40;
-interface ArrowStyleProps {
-    $direction?: Direction;
-    $variant: TimeSlotBarVariant;
-}
-export interface TimeSlotStyleProps {
-    $type?: "default" | "vertical";
-    $variant: TimeSlotBarVariant;
-    $width?: number;
-    $left?: number;
-    $styleType: SlotStyle;
-    $bgColor: string | ((props: V3_ThemeStyleProps) => string);
-    $bgColor2?: string | ((props: V3_ThemeStyleProps) => string);
-    $clickable?: boolean;
-}
-interface CellTextStyleProps {
-    $slotWidth: number;
-    $color?: string;
-}
-interface TimeMarkerStyleProps {
-    $isLongMarker: boolean;
-    $variant: TimeSlotBarVariant;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ArrowButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, ArrowStyleProps>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ArrowIconRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ArrowIconLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const TimeSlotBarContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $variant: TimeSlotBarVariant;
-}>> & string;
-export declare const TimeMarkerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimeSlotWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimeMarker: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TimeMarkerStyleProps>> & string;
-export declare const TimeLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const TimeSlot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TimeSlotStyleProps>> & string;
-export declare const TimeSlotBorder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $variant: TimeSlotBarVariant;
-}>> & string;
-export declare const CellText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, CellTextStyleProps>> & string;
-export {};
+export declare const DEFAULT_CELL_SIZE = 40;
+export declare const MINIFIED_CELL_SIZE = 12;
+export declare const tokens: {
+    readonly item: {
+        readonly width: "--fds-internal-timeSlotBar-item-width";
+        readonly left: "--fds-internal-timeSlotBar-item-left";
+        readonly color: "--fds-internal-timeSlotBar-item-color";
+    };
+    readonly border: {
+        readonly left: "--fds-internal-timeSlotBar-border-left";
+    };
+};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const arrowButton: import("@linaria/core").LinariaClassName;
+export declare const arrowButtonDefault: import("@linaria/core").LinariaClassName;
+export declare const arrowButtonMinified: import("@linaria/core").LinariaClassName;
+export declare const arrowButtonLeft: import("@linaria/core").LinariaClassName;
+export declare const arrowButtonRight: import("@linaria/core").LinariaClassName;
+export declare const arrowIcon: import("@linaria/core").LinariaClassName;
+export declare const timeSlotBarContainer: import("@linaria/core").LinariaClassName;
+export declare const containerDefault: import("@linaria/core").LinariaClassName;
+export declare const containerMinified: import("@linaria/core").LinariaClassName;
+export declare const timeMarkerWrapper: import("@linaria/core").LinariaClassName;
+export declare const timeSlotWrapper: import("@linaria/core").LinariaClassName;
+export declare const timeMarker: import("@linaria/core").LinariaClassName;
+export declare const timeMarkerDefault: import("@linaria/core").LinariaClassName;
+export declare const timeMarkerMinified: import("@linaria/core").LinariaClassName;
+export declare const timeMarkerLong: import("@linaria/core").LinariaClassName;
+export declare const timeLabel: import("@linaria/core").LinariaClassName;
+export declare const timeSlotBorder: import("@linaria/core").LinariaClassName;
+export declare const timeSlotBorderDefault: import("@linaria/core").LinariaClassName;
+export declare const timeSlotBorderMinified: import("@linaria/core").LinariaClassName;
+export declare const cellText: import("@linaria/core").LinariaClassName;
+export declare const timeSlotItem: import("@linaria/core").LinariaClassName;
+export declare const timeSlotItemContent: import("@linaria/core").LinariaClassName;
+export declare const timeSlotItemDefault: import("@linaria/core").LinariaClassName;
+export declare const timeSlotItemMinified: import("@linaria/core").LinariaClassName;

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

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