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

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

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar-week.js","sources":["../../../src/time-slot-bar-week/time-slot-bar-week.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport { Wrapper } from \"./time-slot-bar-week.style\";\nimport { TimeSlotBarWeekDays } from \"./time-slot-bar-week-days\";\nimport type { TimeSlotBarWeekProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\nexport const TimeSlotBarWeek = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    startTime,\n    endTime,\n    slots,\n    interval,\n    variant,\n    maxVisibleCellHeight,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotBarWeekProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderTimeSlotWeekDays = (calendarDate: dayjs.Dayjs) => {\n        return (\n            <TimeSlotBarWeekDays\n                calendarDate={calendarDate}\n                disabledDates={disabledDates}\n                selectedDate={selectedDate}\n                minDate={minDate}\n                maxDate={maxDate}\n                startTime={startTime}\n                endTime={endTime}\n                onSelect={handleDateSelect}\n                slots={slots}\n                interval={interval}\n                variant={variant}\n                maxVisibleCellHeight={maxVisibleCellHeight}\n                enableSelection={enableSelection}\n                onSlotClick={handleOnSlotClick}\n            />\n        );\n    };\n\n    return (\n        <Wrapper {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n            >\n                {({ calendarDate }) => {\n                    return renderTimeSlotWeekDays(calendarDate);\n                }}\n            </CalendarManager>\n        </Wrapper>\n    );\n};\n"],"names":["DATE_FORMAT","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Wrapper","Object","assign","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","TimeSlotBarWeekDays","onSelect","renderTimeSlotWeekDays"],"mappings":"0ZAYA,MAAMA,EAAc,qCAEYC,IAAA,IAAAC,cAC5BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,UACPA,EAASC,QACTA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,qBACPA,EAAoBC,qBACpBA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBhB,EAChBiB,EAAUC,SAAAlB,EAjBe,uOAsB5B,MAAOmB,EAAcC,GAAmBC,EAAAA,SAA6BjB,GAC/DkB,EAAqBC,EAAAA,OAA2B,MAChDC,EAAuBD,EAAAA,YAA0BE,GAKvDC,EAAAA,WAAU,KACNN,EAAgBhB,EAAM,GACvB,CAACA,IAMJ,MAAMuB,EAAoBvB,IACtB,MAAMwB,EAAcxB,EAAMyB,OAAO9B,GACjCqB,EAAgBQ,GAChBzB,SAAAA,EAAWyB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+B7B,IACjC,GAAIF,EAAqB,CACrB,MAAMgC,EAAc,CAChBC,KAAM,CACFC,eAAgBhC,EAAMiC,QAAQ,QAAQR,OAAO9B,GAC7CuC,cAAelC,EAAMmC,MAAM,QAAQV,OAAO9B,IAE9CyC,MAAOpC,EAAMoC,QAAU,EACvBC,KAAMrC,EAAMqC,QAGhBvC,EAAoBgC,EACxB,GAiCJ,OACIQ,EAAAA,IAACC,EAAAA,QAAOC,OAAAC,OAAA,GAAK5B,EAAU,CAAA6B,SACnBJ,EAAAA,IAACK,EAAAA,gBAAe,CACZC,IAAK1B,EACL2B,eAAa,EACbC,oBAlCDC,EAAAA,WAAWC,QAAQjC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO9B,GAiCJsD,kBAAmBlC,EACnBmC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBvD,GACFwD,EAAAA,QAAMD,GACDJ,SAAS,EAAG,QACZM,SAASzD,EAAS,QAE3B0D,qBAAuBH,KACjBtD,GACFuD,UAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQ1D,EAAS,QAExD2D,qBA9EwB7D,IAE3BoB,EAAqB0C,SACrB1C,EAAqB0C,QAAQC,OAAO/D,EAAO,SAE5C6B,EAA4B7B,GAEhCoB,EAAqB0C,QAAU9D,CAAK,EAwE5BS,qBAAsBA,EACtBR,QAASA,EACTC,QAASA,EACT8D,oBAAsBR,GAClBC,EAAAA,QAAMD,GAAcrB,MAAM,QAAQV,OAAO,OAE7CwC,mBAAqBT,GACjBC,EAAAA,QAAMD,GAAcrB,MAAM,QAAQV,OAAO,QAAOiB,SAGnD,EAAGc,kBAnDe,CAACA,GAExBlB,EAAAA,IAAC4B,EAAAA,oBAAmB,CAChBV,aAAcA,EACd3D,cAAeA,EACfkB,aAAcA,EACdd,QAASA,EACTC,QAASA,EACTC,UAAWA,EACXC,QAASA,EACT+D,SAAU5C,EACVlB,MAAOA,EACPC,SAAUA,EACVC,QAASA,EACTC,qBAAsBA,EACtBE,gBAAiBA,EACjBC,YAAae,IAoCF0C,CAAuBZ,OAGhC"}
+{"version":3,"file":"time-slot-bar-week.js","sources":["../../../src/time-slot-bar-week/time-slot-bar-week.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport { Wrapper } from \"./time-slot-bar-week.style\";\nimport { TimeSlotBarWeekDays } from \"./time-slot-bar-week-days\";\nimport type { TimeSlotBarWeekProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\nexport const TimeSlotBarWeek = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    startTime,\n    endTime,\n    slots,\n    interval,\n    variant,\n    maxVisibleCellHeight,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotBarWeekProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderTimeSlotWeekDays = (calendarDate: dayjs.Dayjs) => {\n        return (\n            <TimeSlotBarWeekDays\n                calendarDate={calendarDate}\n                disabledDates={disabledDates}\n                selectedDate={selectedDate}\n                minDate={minDate}\n                maxDate={maxDate}\n                startTime={startTime}\n                endTime={endTime}\n                onSelect={handleDateSelect}\n                slots={slots}\n                interval={interval}\n                variant={variant}\n                maxVisibleCellHeight={maxVisibleCellHeight}\n                enableSelection={enableSelection}\n                onSlotClick={handleOnSlotClick}\n            />\n        );\n    };\n\n    return (\n        <Wrapper {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n                isFocusable={true}\n            >\n                {({ calendarDate }) => {\n                    return renderTimeSlotWeekDays(calendarDate);\n                }}\n            </CalendarManager>\n        </Wrapper>\n    );\n};\n"],"names":["DATE_FORMAT","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Wrapper","Object","assign","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","isFocusable","TimeSlotBarWeekDays","onSelect","renderTimeSlotWeekDays"],"mappings":"0eAYA,MAAMA,EAAc,qCAEYC,IAAA,IAAAC,cAC5BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,UACPA,EAASC,QACTA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,qBACPA,EAAoBC,qBACpBA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBhB,EAChBiB,EAAUC,SAAAlB,EAjBe,uOAsB5B,MAAOmB,EAAcC,GAAmBC,EAAAA,SAA6BjB,GAC/DkB,EAAqBC,EAAAA,OAA2B,MAChDC,EAAuBD,EAAAA,YAA0BE,GAKvDC,EAAAA,WAAU,KACNN,EAAgBhB,EAAM,GACvB,CAACA,IAMJ,MAAMuB,EAAoBvB,IACtB,MAAMwB,EAAcxB,EAAMyB,OAAO9B,GACjCqB,EAAgBQ,GAChBzB,SAAAA,EAAWyB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+B7B,IACjC,GAAIF,EAAqB,CACrB,MAAMgC,EAAc,CAChBC,KAAM,CACFC,eAAgBhC,EAAMiC,QAAQ,QAAQR,OAAO9B,GAC7CuC,cAAelC,EAAMmC,MAAM,QAAQV,OAAO9B,IAE9CyC,MAAOpC,EAAMoC,QAAU,EACvBC,KAAMrC,EAAMqC,QAGhBvC,EAAoBgC,EACxB,GAiCJ,OACIQ,EAAAA,IAACC,EAAAA,QAAOC,OAAAC,OAAA,GAAK5B,EAAU,CAAA6B,SACnBJ,EAAAA,IAACK,EAAAA,gBAAe,CACZC,IAAK1B,EACL2B,eAAa,EACbC,oBAlCDC,EAAAA,WAAWC,QAAQjC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO9B,GAiCJsD,kBAAmBlC,EACnBmC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBvD,GACFwD,EAAAA,QAAMD,GACDJ,SAAS,EAAG,QACZM,SAASzD,EAAS,QAE3B0D,qBAAuBH,KACjBtD,GACFuD,UAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQ1D,EAAS,QAExD2D,qBA9EwB7D,IAE3BoB,EAAqB0C,SACrB1C,EAAqB0C,QAAQC,OAAO/D,EAAO,SAE5C6B,EAA4B7B,GAEhCoB,EAAqB0C,QAAU9D,CAAK,EAwE5BS,qBAAsBA,EACtBR,QAASA,EACTC,QAASA,EACT8D,oBAAsBR,GAClBC,EAAAA,QAAMD,GAAcrB,MAAM,QAAQV,OAAO,OAE7CwC,mBAAqBT,GACjBC,EAAAA,QAAMD,GAAcrB,MAAM,QAAQV,OAAO,QAE7CyC,aAAa,EAAIxB,SAEhB,EAAGc,kBApDe,CAACA,GAExBlB,EAAAA,IAAC6B,EAAAA,oBAAmB,CAChBX,aAAcA,EACd3D,cAAeA,EACfkB,aAAcA,EACdd,QAASA,EACTC,QAASA,EACTC,UAAWA,EACXC,QAASA,EACTgE,SAAU7C,EACVlB,MAAOA,EACPC,SAAUA,EACVC,QAASA,EACTC,qBAAsBA,EACtBE,gBAAiBA,EACjBC,YAAae,IAqCF2C,CAAuBb,OAGhC"}

package/cjs/time-slot-week-view/time-slot-week-days.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),l=require("../external/dayjs/dayjs.min.js"),r=require("../external/dayjs/plugin/isBetween.js"),t=require("react"),a=require("../shared/internal-calendar/day-cell/day-cell.js"),s=require("../time-slot-bar/time-slot-bar.styles.js"),i=require("../util/calendar-helper.js"),o=require("../v3_theme/index.js"),n=require("./time-slot-week-days.style.js");l.default.extend(r.default);const c="YYYY-MM-DD",d={id:"1",startTime:"",endTime:"",clickable:!1,styleAttributes:{color:"",styleType:"stripes",backgroundColor:o.V3_Colour["bg-stronger"],backgroundColor2:o.V3_Colour["bg-strongest"]}};exports.TimeSlotWeekDays=({calendarDate:r,disabledDates:o,selectedDate:u,onSelect:b,minDate:y,maxDate:m,slots:p,enableSelection:h=!0,onSlotClick:j})=>{const v=t.useMemo((()=>i.CalendarHelper.generateDaysForCurrentWeek(r)),[r]),[x,C]=t.useState(),T=e=>{C(e)},g=()=>{C(void 0)},f=e=>{const r=e.format(c),t=(e=>{const r=i.CalendarHelper.isWithinRange(e,y?l.default(y):void 0,m?l.default(m):void 0),t=!!o&&o.includes(e.format(c));return!r||t})(e),a=h&&!t,s=a&&x&&e.isSame(x,"day"),n=[u].includes(r),d={labelType:"available",interactive:h?a:null};return t&&(d.disabled=!0,d.labelType="unavailable"),n&&s?(d.labelType="selected-hover",d.circleLeft="selected-hover-outline",d.circleRight="selected-hover-outline"):n?(d.labelType="selected",d.circleLeft="selected-outline",d.circleRight="selected-outline"):s&&(d.labelType="hover",d.circleLeft="hover-subtle",d.circleRight="hover-subtle"),d};return e.jsxs(n.Wrapper,{children:[v.map(((r,t)=>{const s=f(r);return e.jsxs(n.HeaderCellWeek,{children:[e.jsx(a.DayCell,Object.assign({date:r,calendarDate:l.default(u),onSelect:()=>{((e,l)=>{!l&&h&&b(e)})(r,!s.interactive)},onHover:T,onHoverEnd:g},s),`day-${t}`),e.jsx(n.DayLabel,{$disabled:s.disabled,children:l.default(r).format("ddd")})]},`week-day-${t}`)})),e.jsx(n.ColumnWeekCell,{children:v.map(((l,r)=>{const t=l.format(c),a=p&&(p[t]?p[t]:[d]);return e.jsx(n.TimeSlotWrapper,{children:a&&a.map((l=>{const{id:r,startTime:a,endTime:o,clickable:c=!0,styleAttributes:d}=l,{color:u,styleType:b="default",backgroundColor:y,backgroundColor2:m}=d;return e.jsx(s.TimeSlot,{$type:"vertical",$variant:"default",$styleType:b,$bgColor:y,$bgColor2:m,$clickable:c,onClick:()=>c&&((e,l)=>{null==j||j(e,l)})(t,l),children:e.jsxs(n.TimeSlotText,{style:{color:u},children:[e.jsx("span",{children:i.CalendarHelper.convertTo12HourFormat(a)}),o&&a&&e.jsx("span",{children:"-"}),e.jsx("span",{children:i.CalendarHelper.convertTo12HourFormat(o)})]})},r)}))},`wrapper-${r}`)}))},`week-cell-${r.format(c)}`)]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("../external/dayjs/dayjs.min.js"),l=require("../external/dayjs/plugin/isBetween.js"),a=require("react"),t=require("../shared/accessibility/index.js"),n=require("../shared/internal-calendar/day-cell/day-cell.js"),o=require("../util/calendar-helper.js"),i=require("../util/time-helper.js"),s=require("../v3_theme/index.js"),d=require("./time-slot-week-days.style.js");r.default.extend(l.default);const c="YYYY-MM-DD",u={id:"1",startTime:"",endTime:"",clickable:!1,styleAttributes:{color:"",styleType:"stripes",backgroundColor:s.V3_Colour["bg-stronger"],backgroundColor2:s.V3_Colour["bg-strongest"]}};exports.TimeSlotWeekDays=({calendarDate:l,disabledDates:s,selectedDate:b,onSelect:p,minDate:v,maxDate:y,slots:m,enableSelection:h=!0,onSlotClick:k})=>{const f=a.useMemo((()=>o.CalendarHelper.generateDaysForCurrentWeek(l)),[l]),[j,x]=a.useState(),g=a.useRef({}),T=(e,r)=>{null==k||k(e,r)},C=(e,r)=>l=>{var a;l.stopPropagation(),(null===(a=r.clickable)||void 0===a||a)&&T(e,r)},D=e=>{x(e)},w=()=>{x(void 0)},$=e=>{const l=e.format(c),a=(e=>{const l=o.CalendarHelper.isWithinRange(e,v?r.default(v):void 0,y?r.default(y):void 0),a=!!s&&s.includes(e.format(c));return!l||a})(e),t=h&&!a,n=t&&j&&e.isSame(j,"day"),i=[b].includes(l),d={labelType:"available",interactive:!!h&&t};return a&&(d.disabled=!0,d.labelType="unavailable"),i&&n?(d.labelType="selected-hover",d.circleLeft="selected-hover-outline",d.circleRight="selected-hover-outline"):i?(d.labelType="selected",d.circleLeft="selected-outline",d.circleRight="selected-outline"):n&&(d.labelType="hover",d.circleLeft="hover-subtle",d.circleRight="hover-subtle"),d},H=(e,r)=>{const l=(a=r.date,(null!==(t=null==m?void 0:m[a])&&void 0!==t?t:[]).map(((e,r)=>({key:`${a}-${e.id}`,date:a,rowIndex:r}))));var a,t;const n=e=>{var r;e&&(null===(r=g.current[e.key])||void 0===r||r.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const a=l.findIndex((e=>e.key===r.key));n(l[a+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const a=l.findIndex((e=>e.key===r.key));n(l[a-1]);break}case"Home":case"PageUp":e.preventDefault(),n(l[0]);break;case"End":case"PageDown":e.preventDefault(),n(l[l.length-1])}},q=(e,l)=>{var a;const{startTime:n,endTime:o}=l;return t.concatIds(r.default(e).format("D MMMM YYYY dddd"),n&&o?i.TimeHelper.formatTimeRange(n,o):void 0,l.label,null===(a=l.clickable)||void 0===a||a?"Available":"Unavailable")};return e.jsxs(d.Wrapper,{role:"grid",children:[e.jsx(d.HeaderRow,{role:"row",onBlur:w,children:f.map(((l,a)=>{const t=$(l);return e.jsxs(d.HeaderCellWeek,{role:"presentation",children:[e.jsx(n.DayCell,Object.assign({date:l,calendarDate:r.default(b),onSelect:()=>{((e,r)=>{!r&&h&&p(e)})(l,!t.interactive)},onHover:D,onHoverEnd:w,onFocus:D,role:"columnheader",tabIndex:t.interactive?0:-1},t),`day-${a}`),e.jsx(d.DayLabel,{"aria-hidden":!0,$disabled:t.disabled,children:r.default(l).format("ddd")})]},`week-day-${a}`)}))}),e.jsx(d.ColumnWeekCell,{role:"row",children:f.map(((r,l)=>{var a;const n=r.format(c),i=null!==(a=null==m?void 0:m[n])&&void 0!==a?a:[u];return e.jsx(d.TimeSlotWrapper,{role:"gridcell",children:i&&i.map(((r,l)=>{const{id:a,startTime:i,endTime:s,clickable:c=!0,styleAttributes:b}=r,{color:p,styleType:v="default",backgroundColor:y,backgroundColor2:m}=b,h=`${n}-${a}`,k=r!==u;return e.jsxs(d.TimeSlotComponent,{$type:"vertical",$variant:"default",$styleType:v,$bgColor:y,$bgColor2:m,$clickable:c,onClick:()=>c&&T(n,r),children:[e.jsxs(d.TimeSlotText,{style:{color:p},children:[e.jsx("span",{children:o.CalendarHelper.convertTo12HourFormat(i)}),s&&i&&e.jsx("span",{children:"-"}),e.jsx("span",{children:o.CalendarHelper.convertTo12HourFormat(s)})]}),k&&e.jsx(t.VisuallyHidden,{children:e.jsx("button",{type:"button",ref:e=>{g.current[h]=e},"aria-disabled":!c,"aria-label":q(n,r),onKeyDown:e=>H(e,{key:h,date:n}),onClick:C(n,r)})})]},a)}))},`wrapper-${l}`)}))},`week-cell-${l.format(c)}`)]})};
 //# sourceMappingURL=time-slot-week-days.js.map

package/cjs/time-slot-week-view/time-slot-week-days.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-days.js","sources":["../../../src/time-slot-week-view/time-slot-week-days.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isBetween from \"dayjs/plugin/isBetween\";\nimport { useMemo, useState } from \"react\";\n\nimport type { InternalCalendarProps } from \"../shared/internal-calendar\";\nimport type { CellStyleProps } from \"../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../shared/internal-calendar/day-cell\";\nimport { TimeSlot as TimeSlotComponent } from \"../time-slot-bar/time-slot-bar.styles\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { V3_Colour } from \"../v3_theme\";\nimport {\n    ColumnWeekCell,\n    DayLabel,\n    HeaderCellWeek,\n    TimeSlotText,\n    TimeSlotWrapper,\n    Wrapper,\n} from \"./time-slot-week-days.style\";\n\ndayjs.extend(isBetween);\n\nexport type DayVariant = \"default\" | \"other-month\" | \"today\";\n\ninterface TimeSlotWeekDaysProps\n    extends Pick<\n        InternalCalendarProps,\n        \"disabledDates\" | \"minDate\" | \"maxDate\"\n    > {\n    selectedDate: string | undefined;\n    calendarDate: Dayjs;\n    onSelect: (value: Dayjs) => void;\n    slots?: { [date: string]: TimeSlot[] } | undefined;\n    enableSelection?: boolean | undefined;\n    onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) | undefined;\n}\n\nconst dateFormat = \"YYYY-MM-DD\";\n\nconst fallbackSlot: TimeSlot = {\n    id: \"1\",\n    startTime: \"\",\n    endTime: \"\",\n    clickable: false,\n    styleAttributes: {\n        color: \"\",\n        styleType: \"stripes\",\n        backgroundColor: V3_Colour[\"bg-stronger\"],\n        backgroundColor2: V3_Colour[\"bg-strongest\"],\n    },\n};\n\nexport const TimeSlotWeekDays = ({\n    calendarDate,\n    disabledDates,\n    selectedDate,\n    onSelect,\n    minDate,\n    maxDate,\n    slots: daySlots,\n    enableSelection = true,\n    onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const currentCalendarWeek = useMemo((): Dayjs[] => {\n        return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n    }, [calendarDate]);\n    const [hoverDay, setHoverDay] = useState<Dayjs>();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled || !enableSelection) return;\n\n        onSelect(value);\n    };\n\n    const handleSlotClick = (date: string, slot: TimeSlot) => {\n        onSlotClick?.(date, slot);\n    };\n\n    const handleDayHover = (value: Dayjs) => {\n        setHoverDay(value);\n    };\n\n    const handleDayMouseout = () => {\n        setHoverDay(undefined);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isDisabled = (day: Dayjs): boolean => {\n        const isWithinRange = CalendarHelper.isWithinRange(\n            day,\n            minDate ? dayjs(minDate) : undefined,\n            maxDate ? dayjs(maxDate) : undefined\n        );\n\n        const isDisabledDate =\n            !!disabledDates && disabledDates.includes(day.format(dateFormat));\n\n        return !isWithinRange || isDisabledDate;\n    };\n\n    const generateStyleProps = (day: Dayjs) => {\n        const dateStartWithYear = day.format(dateFormat);\n        const disabled = isDisabled(day);\n        const isHoverEnabled = enableSelection && !disabled;\n        const isHover =\n            isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n        const isSelected = [selectedDate].includes(dateStartWithYear);\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: \"available\",\n            interactive: !enableSelection ? null : isHoverEnabled,\n        };\n\n        if (disabled) {\n            dayCellStyleProps.disabled = true;\n            dayCellStyleProps.labelType = \"unavailable\";\n        }\n\n        if (isSelected && isHover) {\n            dayCellStyleProps.labelType = \"selected-hover\";\n            dayCellStyleProps.circleLeft = \"selected-hover-outline\";\n            dayCellStyleProps.circleRight = \"selected-hover-outline\";\n        } else if (isSelected) {\n            dayCellStyleProps.labelType = \"selected\";\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        } else if (isHover) {\n            dayCellStyleProps.labelType = \"hover\";\n            dayCellStyleProps.circleLeft = \"hover-subtle\";\n            dayCellStyleProps.circleRight = \"hover-subtle\";\n        }\n\n        return dayCellStyleProps;\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeader = () => {\n        return currentCalendarWeek.map((day, index) => {\n            const dayCellStyleProps = generateStyleProps(day);\n\n            return (\n                <HeaderCellWeek key={`week-day-${index}`}>\n                    <DayCell\n                        key={`day-${index}`}\n                        date={day}\n                        calendarDate={dayjs(selectedDate)}\n                        onSelect={() => {\n                            handleDayClick(day, !dayCellStyleProps.interactive);\n                        }}\n                        onHover={handleDayHover}\n                        onHoverEnd={handleDayMouseout}\n                        {...dayCellStyleProps}\n                    />\n                    <DayLabel $disabled={dayCellStyleProps.disabled}>\n                        {dayjs(day).format(\"ddd\")}\n                    </DayLabel>\n                </HeaderCellWeek>\n            );\n        });\n    };\n\n    const renderTimeSlotBarCells = () => {\n        return (\n            <ColumnWeekCell\n                key={`week-cell-${calendarDate.format(dateFormat)}`}\n            >\n                {currentCalendarWeek.map((day, dayIndex) => {\n                    const formattedDate = day.format(dateFormat);\n                    const slots =\n                        daySlots &&\n                        (daySlots[formattedDate]\n                            ? daySlots[formattedDate]\n                            : [fallbackSlot]);\n\n                    return (\n                        <TimeSlotWrapper key={`wrapper-${dayIndex}`}>\n                            {slots &&\n                                slots.map((slot) => {\n                                    const {\n                                        id,\n                                        startTime: slotStartTime,\n                                        endTime: slotEndTime,\n                                        clickable = true,\n                                        styleAttributes,\n                                    } = slot;\n                                    const {\n                                        color,\n                                        styleType = \"default\",\n                                        backgroundColor,\n                                        backgroundColor2,\n                                    } = styleAttributes;\n                                    return (\n                                        <TimeSlotComponent\n                                            $type=\"vertical\"\n                                            $variant=\"default\"\n                                            key={id}\n                                            $styleType={styleType}\n                                            $bgColor={backgroundColor}\n                                            $bgColor2={backgroundColor2}\n                                            $clickable={clickable}\n                                            onClick={() =>\n                                                clickable &&\n                                                handleSlotClick(\n                                                    formattedDate,\n                                                    slot\n                                                )\n                                            }\n                                        >\n                                            <TimeSlotText\n                                                style={{ color: color }}\n                                            >\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotStartTime\n                                                    )}\n                                                </span>\n                                                {slotEndTime &&\n                                                    slotStartTime && (\n                                                        <span>-</span>\n                                                    )}\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotEndTime\n                                                    )}\n                                                </span>\n                                            </TimeSlotText>\n                                        </TimeSlotComponent>\n                                    );\n                                })}\n                        </TimeSlotWrapper>\n                    );\n                })}\n            </ColumnWeekCell>\n        );\n    };\n\n    return (\n        <Wrapper>\n            {renderHeader()}\n            {renderTimeSlotBarCells()}\n        </Wrapper>\n    );\n};\n"],"names":["dayjs","extend","isBetween","dateFormat","fallbackSlot","id","startTime","endTime","clickable","styleAttributes","color","styleType","backgroundColor","V3_Colour","backgroundColor2","calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","slots","daySlots","enableSelection","onSlotClick","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","hoverDay","setHoverDay","useState","handleDayHover","value","handleDayMouseout","undefined","generateStyleProps","day","dateStartWithYear","format","disabled","isWithinRange","isDisabledDate","includes","isDisabled","isHoverEnabled","isHover","isSame","isSelected","dayCellStyleProps","labelType","interactive","circleLeft","circleRight","_jsxs","Wrapper","children","map","index","HeaderCellWeek","_jsx","DayCell","Object","assign","date","handleDayClick","onHover","onHoverEnd","DayLabel","$disabled","ColumnWeekCell","dayIndex","formattedDate","TimeSlotWrapper","slot","slotStartTime","slotEndTime","TimeSlotComponent","$type","$variant","$bgColor","$bgColor2","onClick","handleSlotClick","TimeSlotText","style","convertTo12HourFormat"],"mappings":"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"}
+{"version":3,"file":"time-slot-week-days.js","sources":["../../../src/time-slot-week-view/time-slot-week-days.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isBetween from \"dayjs/plugin/isBetween\";\nimport type React from \"react\";\nimport { useMemo, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport type { InternalCalendarProps } from \"../shared/internal-calendar\";\nimport type { CellStyleProps } from \"../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../shared/internal-calendar/day-cell\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { V3_Colour } from \"../v3_theme\";\nimport {\n    ColumnWeekCell,\n    DayLabel,\n    HeaderCellWeek,\n    HeaderRow,\n    TimeSlotComponent,\n    TimeSlotText,\n    TimeSlotWrapper,\n    Wrapper,\n} from \"./time-slot-week-days.style\";\n\ndayjs.extend(isBetween);\n\ninterface FocusableSlotMeta {\n    key: string;\n    date: string;\n    rowIndex: number;\n}\n\ninterface TimeSlotWeekDaysProps\n    extends Pick<\n        InternalCalendarProps,\n        \"disabledDates\" | \"minDate\" | \"maxDate\"\n    > {\n    selectedDate: string | undefined;\n    calendarDate: Dayjs;\n    onSelect: (value: Dayjs) => void;\n    slots?: { [date: string]: TimeSlot[] } | undefined;\n    enableSelection?: boolean | undefined;\n    onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) | undefined;\n}\n\nconst dateFormat = \"YYYY-MM-DD\";\n\nconst fallbackSlot: TimeSlot = {\n    id: \"1\",\n    startTime: \"\",\n    endTime: \"\",\n    clickable: false,\n    styleAttributes: {\n        color: \"\",\n        styleType: \"stripes\",\n        backgroundColor: V3_Colour[\"bg-stronger\"],\n        backgroundColor2: V3_Colour[\"bg-strongest\"],\n    },\n};\n\nexport const TimeSlotWeekDays = ({\n    calendarDate,\n    disabledDates,\n    selectedDate,\n    onSelect,\n    minDate,\n    maxDate,\n    slots: daySlots,\n    enableSelection = true,\n    onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const currentCalendarWeek = useMemo((): Dayjs[] => {\n        return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n    }, [calendarDate]);\n    const [hoverDay, setHoverDay] = useState<Dayjs>();\n    const slotButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled || !enableSelection) return;\n        onSelect(value);\n    };\n\n    const handleSlotClick = (date: string, slot: TimeSlot) => {\n        onSlotClick?.(date, slot);\n    };\n\n    const handleSlotButtonClick =\n        (date: string, slot: TimeSlot) =>\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n\n            if (slot.clickable ?? true) {\n                handleSlotClick(date, slot);\n            }\n        };\n\n    const handleDayHover = (value: Dayjs) => {\n        setHoverDay(value);\n    };\n\n    const handleDayHoverClear = () => {\n        setHoverDay(undefined);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isDisabled = (day: Dayjs): boolean => {\n        const isWithinRange = CalendarHelper.isWithinRange(\n            day,\n            minDate ? dayjs(minDate) : undefined,\n            maxDate ? dayjs(maxDate) : undefined\n        );\n\n        const isDisabledDate =\n            !!disabledDates && disabledDates.includes(day.format(dateFormat));\n\n        return !isWithinRange || isDisabledDate;\n    };\n\n    const generateStyleProps = (day: Dayjs) => {\n        const dateStartWithYear = day.format(dateFormat);\n        const disabled = isDisabled(day);\n        const isHoverEnabled = enableSelection && !disabled;\n        const isHover =\n            isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n        const isSelected = [selectedDate].includes(dateStartWithYear);\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: \"available\",\n            interactive: enableSelection ? isHoverEnabled : false,\n        };\n\n        if (disabled) {\n            dayCellStyleProps.disabled = true;\n            dayCellStyleProps.labelType = \"unavailable\";\n        }\n\n        if (isSelected && isHover) {\n            dayCellStyleProps.labelType = \"selected-hover\";\n            dayCellStyleProps.circleLeft = \"selected-hover-outline\";\n            dayCellStyleProps.circleRight = \"selected-hover-outline\";\n        } else if (isSelected) {\n            dayCellStyleProps.labelType = \"selected\";\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        } else if (isHover) {\n            dayCellStyleProps.labelType = \"hover\";\n            dayCellStyleProps.circleLeft = \"hover-subtle\";\n            dayCellStyleProps.circleRight = \"hover-subtle\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    const getFocusableSlotsForDate = (\n        formattedDate: string\n    ): FocusableSlotMeta[] => {\n        return (daySlots?.[formattedDate] ?? []).map((slot, index) => ({\n            key: `${formattedDate}-${slot.id}`,\n            date: formattedDate,\n            rowIndex: index,\n        }));\n    };\n\n    const handleSlotKeyDown = (\n        event: React.KeyboardEvent<HTMLButtonElement>,\n        currentSlot: FocusableSlotMeta\n    ) => {\n        const sameColumnSlots = getFocusableSlotsForDate(currentSlot.date);\n\n        const focusSlot = (slot?: FocusableSlotMeta) => {\n            if (!slot) return;\n            slotButtonRefs.current[slot.key]?.focus();\n        };\n\n        switch (event.key) {\n            case \"ArrowRight\":\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const currentIndex = sameColumnSlots.findIndex(\n                    (slot) => slot.key === currentSlot.key\n                );\n                focusSlot(sameColumnSlots[currentIndex + 1]);\n                break;\n            }\n            case \"ArrowLeft\":\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const currentIndex = sameColumnSlots.findIndex(\n                    (slot) => slot.key === currentSlot.key\n                );\n                focusSlot(sameColumnSlots[currentIndex - 1]);\n                break;\n            }\n            case \"Home\":\n            case \"PageUp\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[0]);\n                break;\n            case \"End\":\n            case \"PageDown\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const getSlotAriaLabel = (date: string, slot: TimeSlot) => {\n        const { startTime: slotStartTime, endTime: slotEndTime } = slot;\n\n        return concatIds(\n            dayjs(date).format(\"D MMMM YYYY dddd\"),\n            slotStartTime && slotEndTime\n                ? TimeHelper.formatTimeRange(slotStartTime, slotEndTime)\n                : undefined,\n            slot.label,\n            slot.clickable ?? true ? \"Available\" : \"Unavailable\"\n        );\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeader = () => {\n        return (\n            <HeaderRow role=\"row\" onBlur={handleDayHoverClear}>\n                {currentCalendarWeek.map((day, index) => {\n                    const dayCellStyleProps = generateStyleProps(day);\n\n                    return (\n                        <HeaderCellWeek\n                            key={`week-day-${index}`}\n                            role=\"presentation\"\n                        >\n                            <DayCell\n                                key={`day-${index}`}\n                                date={day}\n                                calendarDate={dayjs(selectedDate)}\n                                onSelect={() => {\n                                    handleDayClick(\n                                        day,\n                                        !dayCellStyleProps.interactive\n                                    );\n                                }}\n                                onHover={handleDayHover}\n                                onHoverEnd={handleDayHoverClear}\n                                onFocus={handleDayHover}\n                                role=\"columnheader\"\n                                tabIndex={\n                                    dayCellStyleProps.interactive ? 0 : -1\n                                }\n                                {...dayCellStyleProps}\n                            />\n                            <DayLabel\n                                aria-hidden\n                                $disabled={dayCellStyleProps.disabled}\n                            >\n                                {dayjs(day).format(\"ddd\")}\n                            </DayLabel>\n                        </HeaderCellWeek>\n                    );\n                })}\n            </HeaderRow>\n        );\n    };\n\n    const renderTimeSlotBarCells = () => {\n        return (\n            <ColumnWeekCell\n                key={`week-cell-${calendarDate.format(dateFormat)}`}\n                role=\"row\"\n            >\n                {currentCalendarWeek.map((day, dayIndex) => {\n                    const formattedDate = day.format(dateFormat);\n                    const slots = daySlots?.[formattedDate] ?? [fallbackSlot];\n\n                    return (\n                        <TimeSlotWrapper\n                            key={`wrapper-${dayIndex}`}\n                            role=\"gridcell\"\n                        >\n                            {slots &&\n                                slots.map((slot, rowIndex) => {\n                                    const {\n                                        id,\n                                        startTime: slotStartTime,\n                                        endTime: slotEndTime,\n                                        clickable = true,\n                                        styleAttributes,\n                                    } = slot;\n                                    const {\n                                        color,\n                                        styleType = \"default\",\n                                        backgroundColor,\n                                        backgroundColor2,\n                                    } = styleAttributes;\n                                    const slotKey = `${formattedDate}-${id}`;\n                                    const isActualSlot = slot !== fallbackSlot;\n\n                                    return (\n                                        <TimeSlotComponent\n                                            $type=\"vertical\"\n                                            $variant=\"default\"\n                                            key={id}\n                                            $styleType={styleType}\n                                            $bgColor={backgroundColor}\n                                            $bgColor2={backgroundColor2}\n                                            $clickable={clickable}\n                                            onClick={() =>\n                                                clickable &&\n                                                handleSlotClick(\n                                                    formattedDate,\n                                                    slot\n                                                )\n                                            }\n                                        >\n                                            <TimeSlotText\n                                                style={{ color: color }}\n                                            >\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotStartTime\n                                                    )}\n                                                </span>\n                                                {slotEndTime &&\n                                                    slotStartTime && (\n                                                        <span>-</span>\n                                                    )}\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotEndTime\n                                                    )}\n                                                </span>\n                                            </TimeSlotText>\n                                            {isActualSlot && (\n                                                <VisuallyHidden>\n                                                    <button\n                                                        type=\"button\"\n                                                        ref={(element) => {\n                                                            slotButtonRefs.current[\n                                                                slotKey\n                                                            ] = element;\n                                                        }}\n                                                        aria-disabled={\n                                                            !clickable\n                                                        }\n                                                        aria-label={getSlotAriaLabel(\n                                                            formattedDate,\n                                                            slot\n                                                        )}\n                                                        onKeyDown={(event) =>\n                                                            handleSlotKeyDown(\n                                                                event,\n                                                                {\n                                                                    key: slotKey,\n                                                                    date: formattedDate,\n                                                                    rowIndex,\n                                                                }\n                                                            )\n                                                        }\n                                                        onClick={handleSlotButtonClick(\n                                                            formattedDate,\n                                                            slot\n                                                        )}\n                                                    />\n                                                </VisuallyHidden>\n                                            )}\n                                        </TimeSlotComponent>\n                                    );\n                                })}\n                        </TimeSlotWrapper>\n                    );\n                })}\n            </ColumnWeekCell>\n        );\n    };\n\n    return (\n        <Wrapper role=\"grid\">\n            {renderHeader()}\n            {renderTimeSlotBarCells()}\n        </Wrapper>\n    );\n};\n"],"names":["dayjs","extend","isBetween","dateFormat","fallbackSlot","id","startTime","endTime","clickable","styleAttributes","color","styleType","backgroundColor","V3_Colour","backgroundColor2","calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","slots","daySlots","enableSelection","onSlotClick","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","hoverDay","setHoverDay","useState","slotButtonRefs","useRef","handleSlotClick","date","slot","handleSlotButtonClick","event","stopPropagation","_a","handleDayHover","value","handleDayHoverClear","undefined","generateStyleProps","day","dateStartWithYear","format","disabled","isWithinRange","isDisabledDate","includes","isDisabled","isHoverEnabled","isHover","isSame","isSelected","dayCellStyleProps","labelType","interactive","circleLeft","circleRight","handleSlotKeyDown","currentSlot","sameColumnSlots","formattedDate","map","index","key","rowIndex","focusSlot","current","focus","preventDefault","currentIndex","findIndex","length","getSlotAriaLabel","slotStartTime","slotEndTime","concatIds","TimeHelper","formatTimeRange","label","_jsxs","Wrapper","role","children","_jsx","HeaderRow","onBlur","HeaderCellWeek","DayCell","Object","assign","handleDayClick","onHover","onHoverEnd","onFocus","tabIndex","DayLabel","$disabled","ColumnWeekCell","dayIndex","TimeSlotWrapper","slotKey","isActualSlot","TimeSlotComponent","$type","$variant","$bgColor","$bgColor2","onClick","TimeSlotText","style","convertTo12HourFormat","VisuallyHidden","type","ref","element","onKeyDown"],"mappings":"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"}

package/cjs/time-slot-week-view/time-slot-week-days.style.js

@@ -1,41 +1,53 @@
-"use strict";var e=require("styled-components"),t=require("../v3_theme/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=l(e);const i=r.default.div`
+"use strict";var e=require("styled-components");require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var r=require("../theme/tokens/colour.js"),t=require("../theme/tokens/font.js");require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("../time-slot-bar/time-slot-bar.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e);const s=l.default.div`
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     user-select: none;
     margin-bottom: 0.188rem;
-`,o=r.default.div`
-    ${t.V3_Font["body-xs-semibold"]}
-    color:${t.V3_Colour.text};
+`,n=l.default.div`
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+`,d=l.default.div`
+    ${t.Font["body-xs-semibold"]}
+    color:${r.Colour.text};
 
-    ${l=>l.$disabled&&e.css`
-            color: ${t.V3_Colour["text-disabled-subtlest"]};
+    ${t=>t.$disabled&&e.css`
+            color: ${r.Colour["text-disabled-subtlest"]};
         `};
-`,d=r.default.div`
+`,a=l.default.div`
     width: 100%;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-`,n=r.default.div`
+`,u=l.default.div`
     grid-column: 1 / -1;
     display: flex;
     min-height: 7.625rem;
-`,s=r.default.div`
-    ${t.V3_Font["body-xs-semibold"]}
+`,m=l.default.div`
+    ${t.Font["body-xs-semibold"]}
     margin: 1rem 0rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     max-width: 2.5rem;
-    color: ${t.V3_Colour.text};
+    color: ${r.Colour.text};
     span {
         display: block;
     }
-`,a=r.default.div`
+`,p=l.default(i.TimeSlot)`
+    position: relative;
+
+    &:focus-within {
+        outline: 2px solid ${r.Colour["focus-ring"]};
+        outline-offset: 2px;
+        z-index: 1;
+    }
+`,c=l.default.div`
     display: flex;
     flex-direction: column;
     flex: 1;
     margin: 1px;
-`;exports.ColumnWeekCell=n,exports.DayLabel=o,exports.HeaderCellWeek=i,exports.TimeSlotText=s,exports.TimeSlotWrapper=a,exports.Wrapper=d;
+`;exports.ColumnWeekCell=u,exports.DayLabel=d,exports.HeaderCellWeek=s,exports.HeaderRow=n,exports.TimeSlotComponent=p,exports.TimeSlotText=m,exports.TimeSlotWrapper=c,exports.Wrapper=a;
 //# sourceMappingURL=time-slot-week-days.style.js.map

package/cjs/time-slot-week-view/time-slot-week-days.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-days.style.js","sources":["../../../src/time-slot-week-view/time-slot-week-days.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Font } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface LabelStyleProps {\n    $disabled: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const HeaderCellWeek = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    user-select: none;\n    margin-bottom: 0.188rem;\n`;\n\nexport const DayLabel = styled.div<LabelStyleProps>`\n    ${V3_Font[\"body-xs-semibold\"]}\n    color:${V3_Colour[\"text\"]};\n\n    ${(props) =>\n        props.$disabled &&\n        css`\n            color: ${V3_Colour[\"text-disabled-subtlest\"]};\n        `};\n`;\n\nexport const Wrapper = styled.div`\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const ColumnWeekCell = styled.div`\n    grid-column: 1 / -1;\n    display: flex;\n    min-height: 7.625rem;\n`;\n\nexport const TimeSlotText = styled.div`\n    ${V3_Font[\"body-xs-semibold\"]}\n    margin: 1rem 0rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    max-width: 2.5rem;\n    color: ${V3_Colour.text};\n    span {\n        display: block;\n    }\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin: 1px;\n`;\n"],"names":["HeaderCellWeek","styled","div","DayLabel","V3_Font","V3_Colour","props","$disabled","css","Wrapper","ColumnWeekCell","TimeSlotText","text","TimeSlotWrapper"],"mappings":"qKAcO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAG;;;;;;;EAS3BC,EAAWF,EAAAA,QAAOC,GAAoB;MAC7CE,EAAAA,QAAQ;YACFC,EAAAA,UAAgB;;MAErBC,GACCA,EAAMC,WACNC,KAAG;qBACUH,EAAAA,UAAU;;EAIlBI,EAAUR,EAAAA,QAAOC,GAAG;;;;EAMpBQ,EAAiBT,EAAAA,QAAOC,GAAG;;;;EAM3BS,EAAeV,EAAAA,QAAOC,GAAG;MAChCE,EAAAA,QAAQ;;;;;;;aAODC,EAAAA,UAAUO;;;;EAMVC,EAAkBZ,EAAAA,QAAOC,GAAG;;;;;"}
+{"version":3,"file":"time-slot-week-days.style.js","sources":["../../../src/time-slot-week-view/time-slot-week-days.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Colour, Font } from \"../theme\";\nimport { TimeSlot } from \"../time-slot-bar/time-slot-bar.styles\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface LabelStyleProps {\n    $disabled: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const HeaderCellWeek = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    user-select: none;\n    margin-bottom: 0.188rem;\n`;\n\nexport const HeaderRow = styled.div`\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const DayLabel = styled.div<LabelStyleProps>`\n    ${Font[\"body-xs-semibold\"]}\n    color:${Colour[\"text\"]};\n\n    ${(props) =>\n        props.$disabled &&\n        css`\n            color: ${Colour[\"text-disabled-subtlest\"]};\n        `};\n`;\n\nexport const Wrapper = styled.div`\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const ColumnWeekCell = styled.div`\n    grid-column: 1 / -1;\n    display: flex;\n    min-height: 7.625rem;\n`;\n\nexport const TimeSlotText = styled.div`\n    ${Font[\"body-xs-semibold\"]}\n    margin: 1rem 0rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    max-width: 2.5rem;\n    color: ${Colour[\"text\"]};\n    span {\n        display: block;\n    }\n`;\n\nexport const TimeSlotComponent = styled(TimeSlot)`\n    position: relative;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        z-index: 1;\n    }\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin: 1px;\n`;\n"],"names":["HeaderCellWeek","styled","div","HeaderRow","DayLabel","Font","Colour","props","$disabled","css","Wrapper","ColumnWeekCell","TimeSlotText","TimeSlotComponent","TimeSlot","TimeSlotWrapper"],"mappings":"2oBAeO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAG;;;;;;;EAS3BC,EAAYF,EAAAA,QAAOC,GAAG;;;;EAMtBE,EAAWH,EAAAA,QAAOC,GAAoB;MAC7CG,EAAAA,KAAK;YACCC,EAAAA,OAAa;;MAElBC,GACCA,EAAMC,WACNC,KAAG;qBACUH,EAAAA,OAAO;;EAIfI,EAAUT,EAAAA,QAAOC,GAAG;;;;EAMpBS,EAAiBV,EAAAA,QAAOC,GAAG;;;;EAM3BU,EAAeX,EAAAA,QAAOC,GAAG;MAChCG,EAAAA,KAAK;;;;;;;aAOEC,EAAAA,OAAa;;;;EAMbO,EAAoBZ,EAAAA,QAAOa,EAAAA,SAAS;;;;6BAIpBR,EAAAA,OAAO;;;;EAMvBS,EAAkBd,EAAAA,QAAOC,GAAG;;;;;"}

package/cjs/time-slot-week-view/time-slot-week-view.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),t=require("../external/dayjs/dayjs.min.js"),r=require("react"),n=require("../shared/internal-calendar/calendar-manager.js");require("../util/calendar-helper.js");var s=require("../util/date-helper.js");require("../util/string-helper.js");var i=require("./time-slot-week-days.js"),l=require("./time-slot-week-view.styles.js");const o="YYYY-MM-DD";exports.TimeSlotWeekView=d=>{var{disabledDates:u,onWeekDisplayChange:c,onChange:D,value:f,minDate:m,maxDate:k,slots:w,showNavigationHeader:h=!0,enableSelection:g,onSlotClick:j,currentCalendarDate:b}=d,y=e.__rest(d,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[C,v]=r.useState(f),S=r.useRef(null),q=r.useRef(void 0);r.useEffect((()=>{v(f)}),[f]);const x=e=>{const a=e.format(o);v(a),null==D||D(a)},p=(e,a)=>{j&&j(e,a)},Y=e=>{if(c){const a={week:{firstDayOfWeek:e.startOf("week").format(o),lastDayOfWeek:e.endOf("week").format(o)},month:e.month()+1,year:e.year()};c(a)}};return a.jsx(l.Wrapper,Object.assign({},y,{children:a.jsx(n.CalendarManager,{ref:S,dynamicHeight:!0,initialCalendarDate:s.DateHelper.toDayjs(C||b).endOf("week").format(o),selectedStartDate:C,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!m&&t.default(e).subtract(1,"week").isBefore(m,"week"),isRightArrowDisabled:e=>!!k&&t.default(e).add(1,"week").isAfter(k,"week"),onCalendarDateChange:e=>{q.current&&q.current.isSame(e,"week")||Y(e),q.current=e},showNavigationHeader:h,minDate:m,maxDate:k,getMonthHeaderLabel:e=>t.default(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t.default(e).endOf("week").format("YYYY"),children:({calendarDate:e})=>a.jsx(i.TimeSlotWeekDays,{calendarDate:e,disabledDates:u,selectedDate:C,minDate:m,maxDate:k,onSelect:x,slots:w,enableSelection:g,onSlotClick:p})})}))};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),t=require("../external/dayjs/dayjs.min.js"),r=require("react"),i=require("../shared/internal-calendar/calendar-manager.js");require("../util/calendar-helper.js");var n=require("../util/date-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var s=require("./time-slot-week-days.js"),l=require("./time-slot-week-view.styles.js");const o="YYYY-MM-DD";exports.TimeSlotWeekView=d=>{var{disabledDates:u,onWeekDisplayChange:c,onChange:D,value:f,minDate:m,maxDate:k,slots:w,showNavigationHeader:g=!0,enableSelection:h,onSlotClick:j,currentCalendarDate:b}=d,v=e.__rest(d,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[y,C]=r.useState(f),q=r.useRef(null),S=r.useRef(void 0);r.useEffect((()=>{C(f)}),[f]);const p=e=>{const a=e.format(o);C(a),null==D||D(a)},x=(e,a)=>{j&&j(e,a)},Y=e=>{if(c){const a={week:{firstDayOfWeek:e.startOf("week").format(o),lastDayOfWeek:e.endOf("week").format(o)},month:e.month()+1,year:e.year()};c(a)}};return a.jsx(l.Wrapper,Object.assign({},v,{children:a.jsx(i.CalendarManager,{ref:q,dynamicHeight:!0,initialCalendarDate:n.DateHelper.toDayjs(y||b).endOf("week").format(o),selectedStartDate:y,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!m&&t.default(e).subtract(1,"week").isBefore(m,"week"),isRightArrowDisabled:e=>!!k&&t.default(e).add(1,"week").isAfter(k,"week"),onCalendarDateChange:e=>{S.current&&S.current.isSame(e,"week")||Y(e),S.current=e},showNavigationHeader:g,minDate:m,maxDate:k,getMonthHeaderLabel:e=>t.default(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t.default(e).endOf("week").format("YYYY"),isFocusable:!0,children:({calendarDate:e})=>a.jsx(s.TimeSlotWeekDays,{calendarDate:e,disabledDates:u,selectedDate:y,minDate:m,maxDate:k,onSelect:p,slots:w,enableSelection:h,onSlotClick:x})})}))};
 //# sourceMappingURL=time-slot-week-view.js.map

package/cjs/time-slot-week-view/time-slot-week-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-view.js","sources":["../../../src/time-slot-week-view/time-slot-week-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport { TimeSlotWeekDays } from \"./time-slot-week-days\";\nimport { Wrapper } from \"./time-slot-week-view.styles\";\nimport type { TimeSlotWeekViewProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\nexport const TimeSlotWeekView = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    slots,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <Wrapper {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n            >\n                {({ calendarDate }) => {\n                    return (\n                        <TimeSlotWeekDays\n                            calendarDate={calendarDate}\n                            disabledDates={disabledDates}\n                            selectedDate={selectedDate}\n                            minDate={minDate}\n                            maxDate={maxDate}\n                            onSelect={handleDateSelect}\n                            slots={slots}\n                            enableSelection={enableSelection}\n                            onSlotClick={handleOnSlotClick}\n                        />\n                    );\n                }}\n            </CalendarManager>\n        </Wrapper>\n    );\n};\n"],"names":["DATE_FORMAT","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Wrapper","Object","assign","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","TimeSlotWeekDays","onSelect"],"mappings":"wZAYA,MAAMA,EAAc,sCAEaC,IAAA,IAAAC,cAC7BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,MACPA,EAAKC,qBACLA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBX,EAChBY,EAAUC,EAAAA,OAAAb,EAZgB,CAAA,gBAAA,sBAAA,WAAA,QAAA,UAAA,UAAA,QAAA,uBAAA,kBAAA,cAAA,wBAiB7B,MAAOc,EAAcC,GAAmBC,EAAAA,SAA6BZ,GAC/Da,EAAqBC,EAAAA,OAA2B,MAChDC,EAAuBD,EAAAA,YAA0BE,GAKvDC,EAAAA,WAAU,KACNN,EAAgBX,EAAM,GACvB,CAACA,IAMJ,MAAMkB,EAAoBlB,IACtB,MAAMmB,EAAcnB,EAAMoB,OAAOzB,GACjCgB,EAAgBQ,GAChBpB,SAAAA,EAAWoB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+BxB,IACjC,GAAIF,EAAqB,CACrB,MAAM2B,EAAc,CAChBC,KAAM,CACFC,eAAgB3B,EAAM4B,QAAQ,QAAQR,OAAOzB,GAC7CkC,cAAe7B,EAAM8B,MAAM,QAAQV,OAAOzB,IAE9CoC,MAAO/B,EAAM+B,QAAU,EACvBC,KAAMhC,EAAMgC,QAGhBlC,EAAoB2B,EACxB,GAaJ,OACIQ,EAAAA,IAACC,EAAAA,QAAOC,OAAAC,OAAA,GAAK5B,EAAU,CAAA6B,SACnBJ,EAAAA,IAACK,EAAAA,gBAAe,CACZC,IAAK1B,EACL2B,eAAa,EACbC,oBAdDC,EAAAA,WAAWC,QAAQjC,GAAgBH,GACrCuB,MAAM,QACNV,OAAOzB,GAaJiD,kBAAmBlC,EACnBmC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBlD,GACFmD,EAAAA,QAAMD,GACDJ,SAAS,EAAG,QACZM,SAASpD,EAAS,QAE3BqD,qBAAuBH,KACjBjD,GACFkD,UAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQrD,EAAS,QAExDsD,qBA1DwBxD,IAE3Be,EAAqB0C,SACrB1C,EAAqB0C,QAAQC,OAAO1D,EAAO,SAE5CwB,EAA4BxB,GAEhCe,EAAqB0C,QAAUzD,CAAK,EAoD5BI,qBAAsBA,EACtBH,QAASA,EACTC,QAASA,EACTyD,oBAAsBR,GAClBC,EAAAA,QAAMD,GAAcrB,MAAM,QAAQV,OAAO,OAE7CwC,mBAAqBT,GACjBC,EAAAA,QAAMD,GAAcrB,MAAM,QAAQV,OAAO,QAAOiB,SAGnD,EAAGc,kBAEIlB,EAAAA,IAAC4B,oBACGV,aAAcA,EACdtD,cAAeA,EACfa,aAAcA,EACdT,QAASA,EACTC,QAASA,EACT4D,SAAU5C,EACVf,MAAOA,EACPE,gBAAiBA,EACjBC,YAAae,QAKvB"}
+{"version":3,"file":"time-slot-week-view.js","sources":["../../../src/time-slot-week-view/time-slot-week-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport { TimeSlotWeekDays } from \"./time-slot-week-days\";\nimport { Wrapper } from \"./time-slot-week-view.styles\";\nimport type { TimeSlotWeekViewProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\nexport const TimeSlotWeekView = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    slots,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <Wrapper {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n                isFocusable={true}\n            >\n                {({ calendarDate }) => {\n                    return (\n                        <TimeSlotWeekDays\n                            calendarDate={calendarDate}\n                            disabledDates={disabledDates}\n                            selectedDate={selectedDate}\n                            minDate={minDate}\n                            maxDate={maxDate}\n                            onSelect={handleDateSelect}\n                            slots={slots}\n                            enableSelection={enableSelection}\n                            onSlotClick={handleOnSlotClick}\n                        />\n                    );\n                }}\n            </CalendarManager>\n        </Wrapper>\n    );\n};\n"],"names":["DATE_FORMAT","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Wrapper","Object","assign","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","isFocusable","TimeSlotWeekDays","onSelect"],"mappings":"weAYA,MAAMA,EAAc,sCAEaC,IAAA,IAAAC,cAC7BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,MACPA,EAAKC,qBACLA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBX,EAChBY,EAAUC,EAAAA,OAAAb,EAZgB,CAAA,gBAAA,sBAAA,WAAA,QAAA,UAAA,UAAA,QAAA,uBAAA,kBAAA,cAAA,wBAiB7B,MAAOc,EAAcC,GAAmBC,EAAAA,SAA6BZ,GAC/Da,EAAqBC,EAAAA,OAA2B,MAChDC,EAAuBD,EAAAA,YAA0BE,GAKvDC,EAAAA,WAAU,KACNN,EAAgBX,EAAM,GACvB,CAACA,IAMJ,MAAMkB,EAAoBlB,IACtB,MAAMmB,EAAcnB,EAAMoB,OAAOzB,GACjCgB,EAAgBQ,GAChBpB,SAAAA,EAAWoB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+BxB,IACjC,GAAIF,EAAqB,CACrB,MAAM2B,EAAc,CAChBC,KAAM,CACFC,eAAgB3B,EAAM4B,QAAQ,QAAQR,OAAOzB,GAC7CkC,cAAe7B,EAAM8B,MAAM,QAAQV,OAAOzB,IAE9CoC,MAAO/B,EAAM+B,QAAU,EACvBC,KAAMhC,EAAMgC,QAGhBlC,EAAoB2B,EACxB,GAaJ,OACIQ,EAAAA,IAACC,EAAAA,QAAOC,OAAAC,OAAA,GAAK5B,EAAU,CAAA6B,SACnBJ,EAAAA,IAACK,EAAAA,gBAAe,CACZC,IAAK1B,EACL2B,eAAa,EACbC,oBAdDC,EAAAA,WAAWC,QAAQjC,GAAgBH,GACrCuB,MAAM,QACNV,OAAOzB,GAaJiD,kBAAmBlC,EACnBmC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBlD,GACFmD,EAAAA,QAAMD,GACDJ,SAAS,EAAG,QACZM,SAASpD,EAAS,QAE3BqD,qBAAuBH,KACjBjD,GACFkD,UAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQrD,EAAS,QAExDsD,qBA1DwBxD,IAE3Be,EAAqB0C,SACrB1C,EAAqB0C,QAAQC,OAAO1D,EAAO,SAE5CwB,EAA4BxB,GAEhCe,EAAqB0C,QAAUzD,CAAK,EAoD5BI,qBAAsBA,EACtBH,QAASA,EACTC,QAASA,EACTyD,oBAAsBR,GAClBC,EAAAA,QAAMD,GAAcrB,MAAM,QAAQV,OAAO,OAE7CwC,mBAAqBT,GACjBC,EAAAA,QAAMD,GAAcrB,MAAM,QAAQV,OAAO,QAE7CyC,aAAa,EAAIxB,SAEhB,EAAGc,kBAEIlB,EAAAA,IAAC6B,oBACGX,aAAcA,EACdtD,cAAeA,EACfa,aAAcA,EACdT,QAASA,EACTC,QAASA,EACT6D,SAAU7C,EACVf,MAAOA,EACPE,gBAAiBA,EACjBC,YAAae,QAKvB"}

package/cjs/timepicker/timepicker.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),o=require("react");require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js");var a=require("../shared/dropdown-wrapper/element-with-dropdown.js"),l=require("../shared/input-wrapper/input-wrapper.js"),n=require("../shared/timepicker-dropdown/timepicker-dropdown.js"),i=require("../util/time-helper.js"),d=require("./timepicker.styles.js");exports.Timepicker=t=>{var{id:s,disabled:p=!1,readOnly:u=!1,error:c,value:m,placeholder:b,format:w="24hr",onChange:v,onFocus:y,onBlur:h,alignment:f,dropdownZIndex:j,dropdownRootNode:g,"aria-labelledby":k,"aria-describedby":x}=t,q=e.__rest(t,["id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","aria-labelledby","aria-describedby"]);const[D,O]=o.useState(!1),C=o.useRef(null),F=o.useRef(null),H=o.useCallback((()=>"12hr"===w?"HH:MMam":"HH:MM"),[w]),I=()=>{var e;null===(e=F.current)||void 0===e||e.focus({preventScroll:!0})},R=()=>{p||u||O(!0)},T=()=>{O(!1),I()},$=e=>{null==v||v(e),O(!1),I()},E=()=>{null==y||y()},M=e=>{var r;if(D)return;const o=e.relatedTarget;o&&(null===(r=C.current)||void 0===r?void 0:r.contains(o))||null==h||h()},_=e=>{p||u||"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),R())};return r.jsx(a.ElementWithDropdown,{enabled:!u&&!p,isOpen:D,renderElement:()=>r.jsx(l.InputWrapper,Object.assign({ref:C,role:"group",$readOnly:u,$disabled:p,$focused:D,$error:c},q,{children:r.jsx(d.InputSelectorElement,{ref:F,readOnly:!0,placeholder:b||H(),value:i.TimeHelper.formatDisplayValue(m,w),role:"combobox","aria-invalid":c||void 0,"aria-disabled":p||void 0,"aria-readonly":u||void 0,"aria-labelledby":k,"aria-describedby":x,"aria-expanded":!p&&!u&&D,"data-testid":s?`${s}-timepicker-selector`:"timepicker-selector",onFocus:E,onClick:R,onKeyDown:_,onBlur:M})})),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:a})=>r.jsx("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"Time picker"},a(),{children:r.jsx(n.TimepickerDropdown,{id:s,show:D,value:m,format:w,onCancel:T,onChange:$})})),onOpen:R,onClose:()=>{O(!1),null==h||h()},onDismiss:T,offset:8,alignment:f,customZIndex:j,rootNode:g})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),o=require("../shared/dropdown-wrapper/element-with-dropdown.js"),l=require("../shared/input-wrapper/input-wrapper.js"),n=require("../shared/timepicker-dropdown/timepicker-dropdown.js"),i=require("../util/time-helper.js"),d=require("./timepicker.styles.js");exports.Timepicker=s=>{var{id:t,disabled:u=!1,readOnly:p=!1,error:c,value:m,placeholder:b,format:v="24hr",onChange:w,onFocus:y,onBlur:h,alignment:f,dropdownZIndex:g,dropdownRootNode:j,className:k,"aria-labelledby":x,"aria-describedby":q}=s,D=e.__rest(s,["id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","aria-labelledby","aria-describedby"]);const[O,C]=a.useState(!1),N=a.useRef(null),F=a.useRef(null),H=a.useCallback((()=>"12hr"===v?"HH:MMam":"HH:MM"),[v]),I=()=>{var e;null===(e=F.current)||void 0===e||e.focus({preventScroll:!0})},R=()=>{u||p||C(!0)},T=()=>{C(!1),I()},B=e=>{null==w||w(e),C(!1),I()},E=()=>{null==y||y()},M=e=>{var r;if(O)return;const a=e.relatedTarget;a&&(null===(r=N.current)||void 0===r?void 0:r.contains(a))||null==h||h()},_=e=>{u||p||"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),R())};return r.jsx(o.ElementWithDropdown,{enabled:!p&&!u,isOpen:O,renderElement:()=>r.jsx(l.InputWrapper,Object.assign({ref:N,role:"group",readOnly:p,disabled:u,focused:O,error:c,className:k},D,{children:r.jsx(l.BasicInput,{ref:F,readOnly:!0,placeholder:b||H(),value:i.TimeHelper.formatDisplayValue(m,v),role:"combobox","aria-invalid":c||void 0,"aria-disabled":u||void 0,"aria-readonly":p||void 0,"aria-labelledby":x,"aria-describedby":q,"aria-expanded":!u&&!p&&O,"data-testid":t?`${t}-timepicker-selector`:"timepicker-selector",className:d.inputSelectorElement,onFocus:E,onClick:R,onKeyDown:_,onBlur:M})})),renderDropdown:({styles:e,setFloatingRef:a,getFloatingProps:o})=>r.jsx("div",Object.assign({ref:a,style:e,role:"dialog","aria-label":"Time picker"},o(),{children:r.jsx(n.TimepickerDropdown,{id:t,show:O,value:m,format:v,onCancel:T,onChange:B})})),onOpen:R,onClose:()=>{C(!1),null==h||h()},onDismiss:T,offset:8,alignment:f,customZIndex:g,rootNode:j})};
 //# sourceMappingURL=timepicker.js.map

package/cjs/timepicker/timepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.js","sources":["../../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { InputSelectorElement } from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\nexport const Timepicker = ({\n    id,\n    disabled = false,\n    readOnly = false,\n    error,\n    value,\n    placeholder,\n    format = \"24hr\",\n    onChange,\n    onFocus,\n    onBlur,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: TimepickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getPlaceholderValue = useCallback(() => {\n        switch (format) {\n            case \"12hr\":\n                return \"HH:MMam\";\n            case \"24hr\":\n            default:\n                return \"HH:MM\";\n        }\n    }, [format]);\n\n    const restoreFocusToSelector = () => {\n        selectorRef.current?.focus({ preventScroll: true });\n    };\n\n    // =============================================================================\n    // EVENT LISTENERS\n    // =============================================================================\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        onBlur?.();\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleChange = (v: string) => {\n        onChange?.(v);\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleFocus = () => {\n        onFocus?.();\n    };\n\n    const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n        if (isOpen) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (next && wrapperRef.current?.contains(next)) return;\n\n        onBlur?.();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n            e.preventDefault();\n            handleOpen();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderElement = () => (\n        <InputWrapper\n            ref={wrapperRef}\n            role=\"group\"\n            $readOnly={readOnly}\n            $disabled={disabled}\n            $focused={isOpen}\n            $error={error}\n            {...otherProps}\n        >\n            <InputSelectorElement\n                ref={selectorRef}\n                readOnly\n                placeholder={placeholder || getPlaceholderValue()}\n                value={TimeHelper.formatDisplayValue(value, format)}\n                role=\"combobox\"\n                aria-invalid={error || undefined}\n                aria-disabled={disabled || undefined}\n                aria-readonly={readOnly || undefined}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-expanded={!disabled && !readOnly ? isOpen : false}\n                data-testid={\n                    id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n                }\n                onFocus={handleFocus}\n                onClick={handleOpen}\n                onKeyDown={handleKeyDown}\n                onBlur={handleSelectorBlur}\n            />\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            ref={setFloatingRef}\n            style={styles}\n            role=\"dialog\"\n            aria-label=\"Time picker\"\n            {...getFloatingProps()}\n        >\n            <TimepickerDropdown\n                id={id}\n                show={isOpen}\n                value={value}\n                format={format}\n                onCancel={handleDismiss}\n                onChange={handleChange}\n            />\n        </div>\n    );\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={isOpen}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            offset={8}\n            alignment={alignment}\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","$readOnly","$disabled","$focused","$error","children","InputSelectorElement","TimeHelper","formatDisplayValue","undefined","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"+bAU2BA,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EACA,kBAAmBC,EACnB,mBAAoBC,GAAef,EAChCgB,EAAUC,EAAAA,OAAAjB,EAhBU,wLAqBvB,MAAOkB,EAAQC,GAAaC,EAAAA,UAAS,GAC/BC,EAAaC,EAAAA,OAAuB,MACpCC,EAAcD,EAAAA,OAAyB,MAKvCE,EAAsBC,EAAAA,aAAY,IAE3B,SADDlB,EAEO,UAGA,SAEhB,CAACA,IAEEmB,EAAyB,WACR,QAAnB1B,EAAAuB,EAAYI,eAAO,IAAA3B,GAAAA,EAAE4B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX5B,GAAYC,GAChBgB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClBzB,SAAAA,EAAWyB,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KAChBzB,SAAAA,GAAW,EAGT0B,EAAsBC,UACxB,GAAIlB,EAAQ,OAEZ,MAAMmB,EAAOD,EAAEE,cACXD,IAA0B,QAAlBrC,EAAAqB,EAAWM,eAAO,IAAA3B,OAAA,EAAAA,EAAEuC,SAASF,KAEzC3B,SAAAA,GAAU,EAGR8B,EAAiBJ,IACflC,GAAYC,GAIF,UAAViC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EA8DJ,OACIa,EAAAA,IAACC,EAAAA,oBAAmB,CAChBC,SAAU1C,IAAaD,EACvBgB,OAAQA,EACR4B,cA5Dc,IAClBH,MAACI,EAAAA,aAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QAAOC,UACDjD,EAAQkD,UACRnD,EAAQoD,SACTpC,EAAMqC,OACRnD,GACJY,EAAU,CAAAwC,SAEdb,EAAAA,IAACc,EAAAA,qBAAoB,CACjBP,IAAK3B,EACLpB,UAAQ,EACRG,YAAaA,GAAekB,IAC5BnB,MAAOqD,EAAAA,WAAWC,mBAAmBtD,EAAOE,GAC5C4C,KAAK,WAAU,eACD/C,QAASwD,EAAS,gBACjB1D,QAAY0D,EAAS,gBACrBzD,QAAYyD,EAAS,kBACnB9C,EAAc,mBACbC,EAAe,iBACjBb,IAAaC,GAAWe,EAAc,cAElDjB,EAAK,GAAGA,wBAA2B,sBAEvCQ,QAASyB,EACT2B,QAAS/B,EACTgC,UAAWtB,EACX9B,OAAQyB,OAiCZ4B,eA5Be,EACnBC,SACAC,iBACAC,sBAEAvB,EAAAA,IAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKe,EACLE,MAAOH,EACPb,KAAK,SAAQ,aACF,eACPe,IAAkB,CAAAV,SAEtBb,EAAAA,IAACyB,EAAAA,mBAAkB,CACfnE,GAAIA,EACJoE,KAAMnD,EACNb,MAAOA,EACPE,OAAQA,EACR+D,SAAUvC,EACVvB,SAAUwB,OAWduC,OAAQzC,EACR0C,QA1GY,KAChBrD,GAAU,GACVT,SAAAA,GAAU,EAyGN+D,UAAW1C,EACX2C,OAAQ,EACR/D,UAAWA,EACXgE,aAAc/D,EACdgE,SAAU/D,GACZ"}
+{"version":3,"file":"timepicker.js","sources":["../../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../shared/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\nexport const Timepicker = ({\n    id,\n    disabled = false,\n    readOnly = false,\n    error,\n    value,\n    placeholder,\n    format = \"24hr\",\n    onChange,\n    onFocus,\n    onBlur,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: TimepickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getPlaceholderValue = useCallback(() => {\n        switch (format) {\n            case \"12hr\":\n                return \"HH:MMam\";\n            case \"24hr\":\n            default:\n                return \"HH:MM\";\n        }\n    }, [format]);\n\n    const restoreFocusToSelector = () => {\n        selectorRef.current?.focus({ preventScroll: true });\n    };\n\n    // =============================================================================\n    // EVENT LISTENERS\n    // =============================================================================\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        onBlur?.();\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleChange = (v: string) => {\n        onChange?.(v);\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleFocus = () => {\n        onFocus?.();\n    };\n\n    const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n        if (isOpen) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (next && wrapperRef.current?.contains(next)) return;\n\n        onBlur?.();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n            e.preventDefault();\n            handleOpen();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderElement = () => (\n        <InputWrapper\n            ref={wrapperRef}\n            role=\"group\"\n            readOnly={readOnly}\n            disabled={disabled}\n            focused={isOpen}\n            error={error}\n            className={className}\n            {...otherProps}\n        >\n            <BasicInput\n                ref={selectorRef}\n                readOnly\n                placeholder={placeholder || getPlaceholderValue()}\n                value={TimeHelper.formatDisplayValue(value, format)}\n                role=\"combobox\"\n                aria-invalid={error || undefined}\n                aria-disabled={disabled || undefined}\n                aria-readonly={readOnly || undefined}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-expanded={!disabled && !readOnly ? isOpen : false}\n                data-testid={\n                    id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n                }\n                className={styles.inputSelectorElement}\n                onFocus={handleFocus}\n                onClick={handleOpen}\n                onKeyDown={handleKeyDown}\n                onBlur={handleSelectorBlur}\n            />\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            ref={setFloatingRef}\n            style={styles}\n            role=\"dialog\"\n            aria-label=\"Time picker\"\n            {...getFloatingProps()}\n        >\n            <TimepickerDropdown\n                id={id}\n                show={isOpen}\n                value={value}\n                format={format}\n                onCancel={handleDismiss}\n                onChange={handleChange}\n            />\n        </div>\n    );\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={isOpen}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            offset={8}\n            alignment={alignment}\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","focused","children","BasicInput","TimeHelper","formatDisplayValue","undefined","styles.inputSelectorElement","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"0XAU2BA,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,UAChBA,EACA,kBAAmBC,EACnB,mBAAoBC,KACjBC,EAAUC,EAAAA,OAAAlB,EAjBU,CAAA,KAAA,WAAA,WAAA,QAAA,QAAA,cAAA,SAAA,WAAA,UAAA,SAAA,YAAA,iBAAA,mBAAA,YAAA,kBAAA,qBAsBvB,MAAOmB,EAAQC,GAAaC,EAAAA,UAAS,GAC/BC,EAAaC,EAAAA,OAAuB,MACpCC,EAAcD,EAAAA,OAAyB,MAKvCE,EAAsBC,EAAAA,aAAY,IAE3B,SADDnB,EAEO,UAGA,SAEhB,CAACA,IAEEoB,EAAyB,WACR,QAAnB3B,EAAAwB,EAAYI,eAAO,IAAA5B,GAAAA,EAAE6B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX7B,GAAYC,GAChBiB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClB1B,SAAAA,EAAW0B,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KAChB1B,SAAAA,GAAW,EAGT2B,EAAsBC,UACxB,GAAIlB,EAAQ,OAEZ,MAAMmB,EAAOD,EAAEE,cACXD,IAA0B,QAAlBtC,EAAAsB,EAAWM,eAAO,IAAA5B,OAAA,EAAAA,EAAEwC,SAASF,KAEzC5B,SAAAA,GAAU,EAGR+B,EAAiBJ,IACfnC,GAAYC,GAIF,UAAVkC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EAgEJ,OACIa,EAAAA,IAACC,EAAAA,oBAAmB,CAChBC,SAAU3C,IAAaD,EACvBiB,OAAQA,EACR4B,cA9Dc,IAClBH,EAAAA,IAACI,EAAAA,aAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QACLjD,SAAUA,EACVD,SAAUA,EACVmD,QAASlC,EACTf,MAAOA,EACPU,UAAWA,GACPG,EAAU,CAAAqC,SAEdV,EAAAA,IAACW,EAAAA,WAAU,CACPJ,IAAK3B,EACLrB,YACAG,YAAaA,GAAemB,IAC5BpB,MAAOmD,EAAAA,WAAWC,mBAAmBpD,EAAOE,GAC5C6C,KAAK,WAAU,eACDhD,QAASsD,EAAS,gBACjBxD,QAAYwD,EAAS,gBACrBvD,QAAYuD,EAAS,kBACnB3C,EAAc,mBACbC,EAAe,iBACjBd,IAAaC,GAAWgB,EAAc,cAElDlB,EAAK,GAAGA,wBAA2B,sBAEvCa,UAAW6C,uBACXlD,QAAS0B,EACTyB,QAAS7B,EACT8B,UAAWpB,EACX/B,OAAQ0B,OAiCZ0B,eA5Be,EACnBC,SACAC,iBACAC,sBAEArB,EAAAA,IAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKa,EACLE,MAAOH,EACPX,KAAK,SAAQ,aACF,eACPa,IAAkB,CAAAX,SAEtBV,EAAAA,IAACuB,EAAAA,mBAAkB,CACflE,GAAIA,EACJmE,KAAMjD,EACNd,MAAOA,EACPE,OAAQA,EACR8D,SAAUrC,EACVxB,SAAUyB,OAWdqC,OAAQvC,EACRwC,QA5GY,KAChBnD,GAAU,GACVV,SAAAA,GAAU,EA2GN8D,UAAWxC,EACXyC,OAAQ,EACR9D,UAAWA,EACX+D,aAAc9D,EACd+D,SAAU9D,GACZ"}

package/cjs/timepicker/timepicker.styles.js

@@ -1,6 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../shared/input-wrapper/input-wrapper.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(e);n.default.div`
-    position: relative;
-`;const o=n.default(t.BasicInput)`
-    height: calc(3rem - 2px); // exclude top and bottom borders
-`;exports.InputSelectorElement=o;
+"use strict";require("./timepicker.styles_zmkhl8.css");exports.inputSelectorElement="ixpxnsh";
 //# sourceMappingURL=timepicker.styles.js.map

package/cjs/timepicker/timepicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.styles.js","sources":["../../../src/timepicker/timepicker.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { BasicInput } from \"../shared/input-wrapper/input-wrapper\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n    position: relative;\n`;\n\nexport const InputSelectorElement = styled(BasicInput)`\n    height: calc(3rem - 2px); // exclude top and bottom borders\n`;\n"],"names":["styled","div","InputSelectorElement","BasicInput"],"mappings":"yLAOuBA,EAAAA,QAAOC,GAAG;;QAIpBC,EAAuBF,EAAAA,QAAOG,EAAAA,WAAW;;"}
+{"version":3,"file":"timepicker.styles.js","sources":["../../../src/timepicker/timepicker.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSelectorElement = css`\n    height: calc(3rem - 2px); /* exclude top and bottom borders */\n`;\n"],"names":[],"mappings":"8GAKiC"}

package/cjs/timepicker/timepicker.styles_zmkhl8.css

@@ -0,0 +1 @@
+.ixpxnsh{height:calc(3rem - 2px);}

package/cjs/timetable/timetable-header/timetable-header.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),a=require("./timetable-header.style.js");exports.TimeTableHeader=l=>{var{selectedDate:s,loading:i,tableContainerRef:n,totalRecords:o,onPreviousDayClick:d,onNextDayClick:c,onRefresh:u,onCalendarDateSelect:g}=l,h=e.__rest(l,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const b=()=>{n.current&&(n.current.scrollTop=0)},x=()=>{u&&(b(),u())};return t.jsxs(a.NavigationHeaderWrapper,{children:[t.jsx(a.StyledDateNavigator,Object.assign({selectedDate:s,loading:i},h,{onRightArrowClick:e=>{b(),c(e)},onLeftArrowClick:e=>{b(),d(e)},onCalendarDateSelect:g})),void 0===o?t.jsx(t.Fragment,{}):t.jsxs(a.NavigationHeaderSubtitleWrapper,{children:[t.jsxs(a.StyledResultText,{"data-testid":"timetable-records-results",weight:"semibold",children:[o," results found"]}),u&&t.jsx(a.StyledRefreshButton,{"data-testid":"timetable-records-refresh-btn",styleType:"light",sizeType:"small",disabled:i,onClick:x,$loading:i,children:t.jsx(r.RefreshIcon,{})})]})]})};
+"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),a=require("./timetable-header.style.js");exports.TimeTableHeader=l=>{var{selectedDate:s,loading:i,tableContainerRef:o,totalRecords:n,onPreviousDayClick:d,onNextDayClick:c,onRefresh:u,onCalendarDateSelect:b}=l,g=e.__rest(l,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const h=()=>{o.current&&(o.current.scrollTop=0)},x=()=>{u&&(h(),u())};return t.jsxs(a.NavigationHeaderWrapper,{children:[t.jsx(a.StyledDateNavigator,Object.assign({selectedDate:s,loading:i},g,{onRightArrowClick:e=>{h(),c(e)},onLeftArrowClick:e=>{h(),d(e)},onCalendarDateSelect:b})),void 0===n?t.jsx(t.Fragment,{}):t.jsxs(a.NavigationHeaderSubtitleWrapper,{children:[t.jsxs(a.StyledResultText,{"data-testid":"timetable-records-results",weight:"semibold",children:[n," results found"]}),u&&t.jsx(a.StyledRefreshButton,{"data-testid":"timetable-records-refresh-btn","aria-label":"Refresh timetable records",styleType:"light",sizeType:"small",disabled:i,onClick:x,$loading:i,icon:t.jsx(r.RefreshIcon,{})})]})]})};
 //# sourceMappingURL=timetable-header.js.map

package/cjs/timetable/timetable-header/timetable-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"timetable-header.js","sources":["../../../../src/timetable/timetable-header/timetable-header.tsx"],"sourcesContent":["import { RefreshIcon } from \"@lifesg/react-icons\";\nimport type { RefObject } from \"react\";\n\nimport {\n    NavigationHeaderSubtitleWrapper,\n    NavigationHeaderWrapper,\n    StyledDateNavigator,\n    StyledRefreshButton,\n    StyledResultText,\n} from \"./timetable-header.style\";\n\ninterface TimeTableHeaderProps {\n    selectedDate: string;\n    loading: boolean;\n    tableContainerRef: RefObject<HTMLDivElement>;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    totalRecords?: number | undefined;\n    showDateAsShortForm?: boolean | undefined;\n    showCurrentDateAsToday?: boolean | undefined;\n    onPreviousDayClick: (currentDate: string) => void | undefined;\n    onNextDayClick: (currentDate: string) => void | undefined;\n    onRefresh?: (() => void) | undefined;\n    onCalendarDateSelect?: ((currentDate: string) => void) | undefined;\n}\n\nexport const TimeTableHeader = ({\n    selectedDate,\n    loading,\n    tableContainerRef,\n    totalRecords,\n    onPreviousDayClick,\n    onNextDayClick,\n    onRefresh,\n    onCalendarDateSelect,\n    ...otherProps\n}: TimeTableHeaderProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const scrollToTop = () => {\n        if (tableContainerRef.current) {\n            tableContainerRef.current.scrollTop = 0;\n        }\n    };\n\n    const handleRefresh = () => {\n        if (!onRefresh) return;\n        scrollToTop();\n        onRefresh();\n    };\n\n    const handleRightArrowClick = (date: string) => {\n        scrollToTop();\n        onNextDayClick(date);\n    };\n\n    const handleLeftArrowClick = (date: string) => {\n        scrollToTop();\n        onPreviousDayClick(date);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRecordsSection = () => {\n        if (totalRecords === undefined) return <></>;\n        return (\n            <NavigationHeaderSubtitleWrapper>\n                <StyledResultText\n                    data-testid=\"timetable-records-results\"\n                    weight={\"semibold\"}\n                >\n                    {totalRecords} results found\n                </StyledResultText>\n                {onRefresh && (\n                    <StyledRefreshButton\n                        data-testid=\"timetable-records-refresh-btn\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        disabled={loading}\n                        onClick={handleRefresh}\n                        $loading={loading}\n                    >\n                        <RefreshIcon />\n                    </StyledRefreshButton>\n                )}\n            </NavigationHeaderSubtitleWrapper>\n        );\n    };\n\n    return (\n        <NavigationHeaderWrapper>\n            <StyledDateNavigator\n                selectedDate={selectedDate}\n                loading={loading}\n                {...otherProps}\n                onRightArrowClick={handleRightArrowClick}\n                onLeftArrowClick={handleLeftArrowClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            {renderRecordsSection()}\n        </NavigationHeaderWrapper>\n    );\n};\n"],"names":["_a","selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect","otherProps","__rest","scrollToTop","current","scrollTop","handleRefresh","_jsxs","NavigationHeaderWrapper","children","_jsx","StyledDateNavigator","Object","assign","onRightArrowClick","date","onLeftArrowClick","undefined","NavigationHeaderSubtitleWrapper","StyledResultText","weight","StyledRefreshButton","styleType","sizeType","disabled","onClick","$loading","RefreshIcon"],"mappings":"wLA0BgCA,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAA,OAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA0Cf,OACIQ,OAACC,EAAAA,wBAAuB,CAAAC,SAAA,CACpBC,EAAAA,IAACC,sBAAmBC,OAAAC,OAAA,CAChBpB,aAAcA,EACdC,QAASA,GACLO,EAAU,CACda,kBA7CmBC,IAC3BZ,IACAL,EAAeiB,EAAK,EA4CZC,iBAzCkBD,IAC1BZ,IACAN,EAAmBkB,EAAK,EAwChBf,qBAAsBA,UAjCTiB,IAAjBrB,EAAmCc,EAAAA,mBAEnCH,EAAAA,KAACW,EAAAA,gCAA+B,CAAAT,SAAA,CAC5BF,EAAAA,KAACY,EAAAA,iBAAgB,CAAA,cACD,4BACZC,OAAQ,WAAUX,SAAA,CAEjBb,sBAEJG,GACGW,EAAAA,IAACW,EAAAA,oBAAmB,CAAA,cACJ,gCACZC,UAAU,QACVC,SAAS,QACTC,SAAU9B,EACV+B,QAASnB,EAAaoB,SACZhC,EAAOe,SAEjBC,MAACiB,EAAAA,uBAkBS"}
+{"version":3,"file":"timetable-header.js","sources":["../../../../src/timetable/timetable-header/timetable-header.tsx"],"sourcesContent":["import { RefreshIcon } from \"@lifesg/react-icons\";\nimport type { RefObject } from \"react\";\n\nimport {\n    NavigationHeaderSubtitleWrapper,\n    NavigationHeaderWrapper,\n    StyledDateNavigator,\n    StyledRefreshButton,\n    StyledResultText,\n} from \"./timetable-header.style\";\n\ninterface TimeTableHeaderProps {\n    selectedDate: string;\n    loading: boolean;\n    tableContainerRef: RefObject<HTMLDivElement>;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    totalRecords?: number | undefined;\n    showDateAsShortForm?: boolean | undefined;\n    showCurrentDateAsToday?: boolean | undefined;\n    onPreviousDayClick: (currentDate: string) => void | undefined;\n    onNextDayClick: (currentDate: string) => void | undefined;\n    onRefresh?: (() => void) | undefined;\n    onCalendarDateSelect?: ((currentDate: string) => void) | undefined;\n}\n\nexport const TimeTableHeader = ({\n    selectedDate,\n    loading,\n    tableContainerRef,\n    totalRecords,\n    onPreviousDayClick,\n    onNextDayClick,\n    onRefresh,\n    onCalendarDateSelect,\n    ...otherProps\n}: TimeTableHeaderProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const scrollToTop = () => {\n        if (tableContainerRef.current) {\n            tableContainerRef.current.scrollTop = 0;\n        }\n    };\n\n    const handleRefresh = () => {\n        if (!onRefresh) return;\n        scrollToTop();\n        onRefresh();\n    };\n\n    const handleRightArrowClick = (date: string) => {\n        scrollToTop();\n        onNextDayClick(date);\n    };\n\n    const handleLeftArrowClick = (date: string) => {\n        scrollToTop();\n        onPreviousDayClick(date);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRecordsSection = () => {\n        if (totalRecords === undefined) return <></>;\n        return (\n            <NavigationHeaderSubtitleWrapper>\n                <StyledResultText\n                    data-testid=\"timetable-records-results\"\n                    weight={\"semibold\"}\n                >\n                    {totalRecords} results found\n                </StyledResultText>\n                {onRefresh && (\n                    <StyledRefreshButton\n                        data-testid=\"timetable-records-refresh-btn\"\n                        aria-label=\"Refresh timetable records\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        disabled={loading}\n                        onClick={handleRefresh}\n                        $loading={loading}\n                        icon={<RefreshIcon />}\n                    />\n                )}\n            </NavigationHeaderSubtitleWrapper>\n        );\n    };\n\n    return (\n        <NavigationHeaderWrapper>\n            <StyledDateNavigator\n                selectedDate={selectedDate}\n                loading={loading}\n                {...otherProps}\n                onRightArrowClick={handleRightArrowClick}\n                onLeftArrowClick={handleLeftArrowClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            {renderRecordsSection()}\n        </NavigationHeaderWrapper>\n    );\n};\n"],"names":["_a","selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect","otherProps","__rest","scrollToTop","current","scrollTop","handleRefresh","_jsxs","NavigationHeaderWrapper","children","_jsx","StyledDateNavigator","Object","assign","onRightArrowClick","date","onLeftArrowClick","undefined","NavigationHeaderSubtitleWrapper","StyledResultText","weight","StyledRefreshButton","styleType","sizeType","disabled","onClick","$loading","icon","RefreshIcon"],"mappings":"wLA0BgCA,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAA,OAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA0Cf,OACIQ,OAACC,EAAAA,wBAAuB,CAAAC,SAAA,CACpBC,EAAAA,IAACC,sBAAmBC,OAAAC,OAAA,CAChBpB,aAAcA,EACdC,QAASA,GACLO,EAAU,CACda,kBA7CmBC,IAC3BZ,IACAL,EAAeiB,EAAK,EA4CZC,iBAzCkBD,IAC1BZ,IACAN,EAAmBkB,EAAK,EAwChBf,qBAAsBA,UAjCTiB,IAAjBrB,EAAmCc,EAAAA,mBAEnCH,EAAAA,KAACW,EAAAA,gCAA+B,CAAAT,SAAA,CAC5BF,EAAAA,KAACY,EAAAA,iBAAgB,CAAA,cACD,4BACZC,OAAQ,qBAEPxB,EAAY,oBAEhBG,GACGW,MAACW,EAAAA,oBAAmB,CAAA,cACJ,gCAA+B,aAChC,4BACXC,UAAU,QACVC,SAAS,QACTC,SAAU9B,EACV+B,QAASnB,EAAaoB,SACZhC,EACViC,KAAMjB,EAAAA,IAACkB,EAAAA,YAAW,WAkBR"}

package/cjs/timetable/timetable-header/timetable-header.style.js

@@ -1,9 +1,9 @@
-"use strict";var e=require("styled-components"),t=require("../../date-navigator/date-navigator.js"),a=require("../../icon-button/icon-button.js"),r=require("../../typography/index.js"),i=require("../../v3_theme/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(e);const s=e.keyframes`
+"use strict";var e=require("styled-components"),t=require("../../button/button.js"),a=require("../../date-navigator/date-navigator.js"),r=require("../../typography/index.js"),i=require("../../v3_theme/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(e);const s=e.keyframes`
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
-`,d=n.default(a.IconButton)`
+`,d=n.default(t.Button)`
     color: ${i.V3_Colour.icon};
     svg {
         ${t=>{if(t.$loading)return e.css`
@@ -22,7 +22,7 @@
     gap: ${i.V3_Spacing["spacing-8"]};
 `,l=n.default(r.Typography.BodySM)`
     color: ${i.V3_Colour["text-subtler"]};
-`,c=n.default(t.DateNavigator)`
+`,g=n.default(a.DateNavigator)`
     width: 400px;
-`;exports.NavigationHeaderSubtitleWrapper=u,exports.NavigationHeaderWrapper=p,exports.StyledDateNavigator=c,exports.StyledRefreshButton=d,exports.StyledResultText=l;
+`;exports.NavigationHeaderSubtitleWrapper=u,exports.NavigationHeaderWrapper=p,exports.StyledDateNavigator=g,exports.StyledRefreshButton=d,exports.StyledResultText=l;
 //# sourceMappingURL=timetable-header.style.js.map

package/cjs/timetable/timetable-header/timetable-header.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"timetable-header.style.js","sources":["../../../../src/timetable/timetable-header/timetable-header.style.tsx"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\n\nimport { DateNavigator } from \"../../date-navigator\";\nimport { IconButton } from \"../../icon-button\";\nimport { Typography } from \"../../typography\";\nimport { V3_Colour, V3_Spacing } from \"../../v3_theme\";\n\nconst spin = keyframes`\n    100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg);\n    }\n`;\n\nexport const StyledRefreshButton = styled(IconButton)<{ $loading: boolean }>`\n    color: ${V3_Colour[\"icon\"]};\n    svg {\n        ${(props) => {\n            if (props.$loading) {\n                return css`\n                    animation: ${spin} 4s linear infinite;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const NavigationHeaderWrapper = styled.div`\n    display: flex;\n    padding-bottom: ${V3_Spacing[\"spacing-16\"]};\n    justify-content: space-between;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const NavigationHeaderSubtitleWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const StyledResultText = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const StyledDateNavigator = styled(DateNavigator)`\n    width: 400px;\n`;\n"],"names":["spin","keyframes","StyledRefreshButton","styled","IconButton","V3_Colour","props","$loading","css","NavigationHeaderWrapper","div","V3_Spacing","NavigationHeaderSubtitleWrapper","StyledResultText","Typography","BodySM","StyledDateNavigator","DateNavigator"],"mappings":"iTAOA,MAAMA,EAAOC,EAAAA,SAAS;;;;;EAOTC,EAAsBC,EAAAA,QAAOC,EAAAA,WAAkC;aAC/DC,EAAAA,UAAgB;;UAElBC,IACC,GAAIA,EAAMC,SACN,OAAOC,KAAG;iCACOR;iBAErB;;EAKCS,EAA0BN,EAAAA,QAAOO,GAAG;;sBAE3BC,EAAAA,WAAW;;WAEtBA,EAAAA,WAAW;EAGTC,EAAkCT,EAAAA,QAAOO,GAAG;;;;WAI9CC,EAAAA,WAAW;EAGTE,EAAmBV,EAAAA,QAAOW,aAAWC,OAAO;aAC5CV,EAAAA,UAAU;EAGVW,EAAsBb,EAAAA,QAAOc,EAAAA,cAAc;;"}
+{"version":3,"file":"timetable-header.style.js","sources":["../../../../src/timetable/timetable-header/timetable-header.style.tsx"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\n\nimport { Button } from \"../../button\";\nimport { DateNavigator } from \"../../date-navigator\";\nimport { Typography } from \"../../typography\";\nimport { V3_Colour, V3_Spacing } from \"../../v3_theme\";\n\nconst spin = keyframes`\n    100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg);\n    }\n`;\n\nexport const StyledRefreshButton = styled(Button)<{ $loading: boolean }>`\n    color: ${V3_Colour[\"icon\"]};\n    svg {\n        ${(props) => {\n            if (props.$loading) {\n                return css`\n                    animation: ${spin} 4s linear infinite;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const NavigationHeaderWrapper = styled.div`\n    display: flex;\n    padding-bottom: ${V3_Spacing[\"spacing-16\"]};\n    justify-content: space-between;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const NavigationHeaderSubtitleWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const StyledResultText = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const StyledDateNavigator = styled(DateNavigator)`\n    width: 400px;\n`;\n"],"names":["spin","keyframes","StyledRefreshButton","styled","Button","V3_Colour","props","$loading","css","NavigationHeaderWrapper","div","V3_Spacing","NavigationHeaderSubtitleWrapper","StyledResultText","Typography","BodySM","StyledDateNavigator","DateNavigator"],"mappings":"uSAOA,MAAMA,EAAOC,EAAAA,SAAS;;;;;EAOTC,EAAsBC,EAAAA,QAAOC,EAAAA,OAA8B;aAC3DC,EAAAA,UAAgB;;UAElBC,IACC,GAAIA,EAAMC,SACN,OAAOC,KAAG;iCACOR;iBAErB;;EAKCS,EAA0BN,EAAAA,QAAOO,GAAG;;sBAE3BC,EAAAA,WAAW;;WAEtBA,EAAAA,WAAW;EAGTC,EAAkCT,EAAAA,QAAOO,GAAG;;;;WAI9CC,EAAAA,WAAW;EAGTE,EAAmBV,EAAAA,QAAOW,aAAWC,OAAO;aAC5CV,EAAAA,UAAU;EAGVW,EAAsBb,EAAAA,QAAOc,EAAAA,cAAc;;"}

package/cjs/timetable/timetable-row/row-bar.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../external/dayjs/dayjs.min.js"),r=require("react"),o=require("../../util/time-helper.js"),i=require("../const.js"),s=require("./row-bar.style.js"),a=require("./row-cell.js");exports.RowBar=({id:m,timetableMinTime:l,timetableMaxTime:n,rowMinTime:u,rowMaxTime:d,rowCells:T,rowBarColor:H,intervalWidth:f,containerRef:c,outOfRangeCellPopover:p})=>{const R=u?o.TimeHelper.roundToNearestInterval(u,i.ROW_INTERVAL):l,v=d?o.TimeHelper.roundToNearestInterval(d,i.ROW_INTERVAL,!0):n,h=r.useMemo((()=>{const e=[];R&&t.default(l,"HH:mm").isBefore(t.default(R,"HH:mm"))&&e.push({id:m,startTime:l,endTime:R,status:"blocked",customPopover:p});const r=[...T].sort(((e,r)=>{const o=t.default(e.startTime,"HH:mm"),i=t.default(r.startTime,"HH:mm");return o.isBefore(i)?-1:o.isAfter(i)?1:0}));let s;return r.forEach(((r,a)=>{var l;const{startTime:n,endTime:u}=r;let d=o.TimeHelper.roundToNearestInterval(n,i.ROW_INTERVAL);s&&t.default(d,"HH:mm").isBefore(t.default(s,"HH:mm"))&&(d=o.TimeHelper.roundToNearestInterval(n,i.ROW_INTERVAL,!0));const H=o.TimeHelper.roundToNearestInterval(u,i.ROW_INTERVAL,!0);e.push(Object.assign(Object.assign({},r),{roundedStartTime:d,roundedEndTime:H}));const f=(null===(l=T[a+1])||void 0===l?void 0:l.startTime)||v,c=t.default(o.TimeHelper.roundToNearestInterval(f,i.ROW_INTERVAL),"HH:mm");let p=t.default(H,"HH:mm");for(;p.isBefore(c);)if(R=c,p.get("hour")!=R.get("hour")){const t=p.add(1,"hour").startOf("hour");e.push({id:m,startTime:p.format("HH:mm").toString(),endTime:t.format("HH:mm").toString(),status:"disabled"}),p=t}else e.push({id:m,startTime:p.format("HH:mm").toString(),endTime:c.format("HH:mm").toString(),status:"disabled"}),p=c;var R;s=p.format("HH:mm").toString()})),v&&t.default(n,"HH:mm").isAfter(t.default(v,"HH:mm"))&&e.push({id:m,startTime:v,endTime:n,status:"blocked",customPopover:p}),0!==r.length||u||d||e.push({id:m,startTime:l,endTime:n,status:"blocked",customPopover:p}),e}),[R,l,T,v,n,u,d,m,p]);return e.jsx(s.RowCellContainer,{"data-testid":"timetable-row",children:h.map(((t,r)=>e.jsx(a.RowCell,Object.assign({},t,{intervalWidth:f,rowBarColor:H,containerRef:c}),`${r}-row-cell-key`)))})};
+"use strict";var e=require("react/jsx-runtime"),t=require("../../external/dayjs/dayjs.min.js"),r=require("react"),i=require("../../util/time-helper.js"),o=require("../const.js"),a=require("./row-bar.style.js"),m=require("./row-cell.js");exports.RowBar=({id:s,name:n,timetableMinTime:l,timetableMaxTime:u,rowMinTime:d,rowMaxTime:T,rowCells:H,rowBarColor:c,intervalWidth:f,containerRef:p,outOfRangeCellPopover:R})=>{const v=d?i.TimeHelper.roundToNearestInterval(d,o.ROW_INTERVAL):l,h=T?i.TimeHelper.roundToNearestInterval(T,o.ROW_INTERVAL,!0):u,I=r.useMemo((()=>{const e=[];v&&t.default(l,"HH:mm").isBefore(t.default(v,"HH:mm"))&&e.push({id:s,startTime:l,endTime:v,status:"blocked",customPopover:R});const r=[...H].sort(((e,r)=>{const i=t.default(e.startTime,"HH:mm"),o=t.default(r.startTime,"HH:mm");return i.isBefore(o)?-1:i.isAfter(o)?1:0}));let a;return r.forEach(((r,m)=>{var n;const{startTime:l,endTime:u}=r;let d=i.TimeHelper.roundToNearestInterval(l,o.ROW_INTERVAL);a&&t.default(d,"HH:mm").isBefore(t.default(a,"HH:mm"))&&(d=i.TimeHelper.roundToNearestInterval(l,o.ROW_INTERVAL,!0));const T=i.TimeHelper.roundToNearestInterval(u,o.ROW_INTERVAL,!0);e.push(Object.assign(Object.assign({},r),{roundedStartTime:d,roundedEndTime:T,isFocusable:!0}));const c=(null===(n=H[m+1])||void 0===n?void 0:n.startTime)||h,f=t.default(i.TimeHelper.roundToNearestInterval(c,o.ROW_INTERVAL),"HH:mm");let p=t.default(T,"HH:mm");for(;p.isBefore(f);)if(R=f,p.get("hour")!=R.get("hour")){const t=p.add(1,"hour").startOf("hour");e.push({id:s,startTime:p.format("HH:mm").toString(),endTime:t.format("HH:mm").toString(),status:"disabled"}),p=t}else e.push({id:s,startTime:p.format("HH:mm").toString(),endTime:f.format("HH:mm").toString(),status:"disabled"}),p=f;var R;a=p.format("HH:mm").toString()})),h&&t.default(u,"HH:mm").isAfter(t.default(h,"HH:mm"))&&e.push({id:s,startTime:h,endTime:u,status:"blocked",customPopover:R}),0!==r.length||d||T||e.push({id:s,startTime:l,endTime:u,status:"blocked",customPopover:R}),e}),[v,l,H,h,u,d,T,s,R]);return e.jsx(a.RowCellContainer,{"data-testid":"timetable-row",role:"presentation",children:I.map(((t,r)=>{return e.jsx(m.RowCell,Object.assign({},t,{ariaColIndex:(u=t.roundedStartTime||t.startTime,(i.TimeHelper.timeToMinutes(u)-i.TimeHelper.timeToMinutes(l))/o.ROW_INTERVAL+2),ariaColSpan:(a=t.roundedStartTime||t.startTime,s=t.roundedEndTime||t.endTime,(i.TimeHelper.timeToMinutes(s)-i.TimeHelper.timeToMinutes(a))/o.ROW_INTERVAL),rowName:n,intervalWidth:f,rowBarColor:c,containerRef:p}),`${r}-row-cell-key`);var a,s,u}))})};
 //# sourceMappingURL=row-bar.js.map

package/cjs/timetable/timetable-row/row-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"row-bar.js","sources":["../../../../src/timetable/timetable-row/row-bar.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_INTERVAL } from \"../const\";\nimport type {\n    InternalTimeTableRowCellData,\n    RowBarColors,\n} from \"../internal-types\";\nimport type { TimeTableRowData } from \"../types\";\nimport { RowCellContainer } from \"./row-bar.style\";\nimport { RowCell } from \"./row-cell\";\n\ninterface RowBarProps extends TimeTableRowData {\n    timetableMinTime: string;\n    timetableMaxTime: string;\n    intervalWidth: number;\n    containerRef: RefObject<HTMLDivElement>;\n    rowBarColor: RowBarColors;\n}\n\nexport const RowBar = ({\n    id,\n    timetableMinTime,\n    timetableMaxTime,\n    rowMinTime,\n    rowMaxTime,\n    rowCells,\n    rowBarColor,\n    intervalWidth,\n    containerRef,\n    outOfRangeCellPopover,\n}: RowBarProps) => {\n    const roundedMinTime = rowMinTime\n        ? TimeHelper.roundToNearestInterval(rowMinTime, ROW_INTERVAL)\n        : timetableMinTime;\n    const roundedMaxTime = rowMaxTime\n        ? TimeHelper.roundToNearestInterval(rowMaxTime, ROW_INTERVAL, true)\n        : timetableMaxTime;\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isOnTheSameHour = (\n        time1: dayjs.Dayjs,\n        time2: dayjs.Dayjs\n    ): boolean => {\n        return time1.get(\"hour\") == time2.get(\"hour\");\n    };\n\n    const rowCellArray = useMemo(() => {\n        const rowCellArray: InternalTimeTableRowCellData[] = [];\n\n        // Handle non-op before hours\n        if (\n            roundedMinTime &&\n            dayjs(timetableMinTime, \"HH:mm\").isBefore(\n                dayjs(roundedMinTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: roundedMinTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        const sortedRowCells = [...rowCells].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        let lastRoundedEndTime: string | undefined;\n\n        sortedRowCells.forEach((cell, index) => {\n            const { startTime, endTime } = cell;\n            let roundedStartTime = TimeHelper.roundToNearestInterval(\n                startTime,\n                ROW_INTERVAL\n            );\n\n            // NOTE - Prevent overlapping rounded start time and end time cells\n            const isStartTimeBeforePreviousEndTime =\n                lastRoundedEndTime &&\n                dayjs(roundedStartTime, \"HH:mm\").isBefore(\n                    dayjs(lastRoundedEndTime, \"HH:mm\")\n                );\n            if (isStartTimeBeforePreviousEndTime) {\n                roundedStartTime = TimeHelper.roundToNearestInterval(\n                    startTime,\n                    ROW_INTERVAL,\n                    true\n                );\n            }\n\n            const roundedEndTime = TimeHelper.roundToNearestInterval(\n                endTime,\n                ROW_INTERVAL,\n                true\n            );\n            rowCellArray.push({ ...cell, roundedStartTime, roundedEndTime });\n\n            const nextSlotStartTime =\n                rowCells[index + 1]?.startTime || roundedMaxTime; // Get next cell start time, if next cell don't exist, use current row max time\n            const roundedNextSlotStartTime = dayjs(\n                TimeHelper.roundToNearestInterval(\n                    nextSlotStartTime,\n                    ROW_INTERVAL\n                ),\n                \"HH:mm\"\n            );\n            const parsedEndTime = dayjs(roundedEndTime, \"HH:mm\");\n\n            let curr = parsedEndTime;\n\n            // Auto block slots between cell time gaps\n            while (curr.isBefore(roundedNextSlotStartTime)) {\n                if (!isOnTheSameHour(curr, roundedNextSlotStartTime)) {\n                    const nextHour = curr.add(1, \"hour\").startOf(\"hour\"); // Round to the next hour\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: nextHour.format(\"HH:mm\").toString(),\n                        status: \"disabled\",\n                    });\n                    curr = nextHour;\n                } else {\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: roundedNextSlotStartTime\n                            .format(\"HH:mm\")\n                            .toString(),\n                        status: \"disabled\",\n                    });\n                    curr = roundedNextSlotStartTime;\n                }\n            }\n            lastRoundedEndTime = curr.format(\"HH:mm\").toString();\n        });\n\n        // Handle non-op after hours\n        if (\n            roundedMaxTime &&\n            dayjs(timetableMaxTime, \"HH:mm\").isAfter(\n                dayjs(roundedMaxTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: roundedMaxTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        // Handle empty row cells and no min/max time to block from timetable min to max\n        if (sortedRowCells.length === 0 && !rowMinTime && !rowMaxTime) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n        return rowCellArray;\n    }, [\n        roundedMinTime,\n        timetableMinTime,\n        rowCells,\n        roundedMaxTime,\n        timetableMaxTime,\n        rowMinTime,\n        rowMaxTime,\n        id,\n        outOfRangeCellPopover,\n    ]);\n\n    return (\n        <RowCellContainer data-testid=\"timetable-row\">\n            {rowCellArray.map((cell, index) => {\n                return (\n                    <RowCell\n                        key={`${index}-row-cell-key`}\n                        {...cell}\n                        intervalWidth={intervalWidth}\n                        rowBarColor={rowBarColor}\n                        containerRef={containerRef}\n                    />\n                );\n            })}\n        </RowCellContainer>\n    );\n};\n"],"names":["id","timetableMinTime","timetableMaxTime","rowMinTime","rowMaxTime","rowCells","rowBarColor","intervalWidth","containerRef","outOfRangeCellPopover","roundedMinTime","TimeHelper","roundToNearestInterval","ROW_INTERVAL","roundedMaxTime","rowCellArray","useMemo","dayjs","isBefore","push","startTime","endTime","status","customPopover","sortedRowCells","sort","a","b","timeA","timeB","isAfter","lastRoundedEndTime","forEach","cell","index","roundedStartTime","roundedEndTime","Object","assign","nextSlotStartTime","_a","roundedNextSlotStartTime","curr","time2","get","nextHour","add","startOf","format","toString","length","_jsx","RowCellContainer","children","map","RowCell"],"mappings":"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"}
+{"version":3,"file":"row-bar.js","sources":["../../../../src/timetable/timetable-row/row-bar.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_INTERVAL } from \"../const\";\nimport type {\n    InternalTimeTableRowCellData,\n    RowBarColors,\n} from \"../internal-types\";\nimport type { TimeTableRowData } from \"../types\";\nimport { RowCellContainer } from \"./row-bar.style\";\nimport { RowCell } from \"./row-cell\";\n\ninterface RowBarProps extends TimeTableRowData {\n    timetableMinTime: string;\n    timetableMaxTime: string;\n    intervalWidth: number;\n    containerRef: RefObject<HTMLDivElement>;\n    rowBarColor: RowBarColors;\n}\n\nexport const RowBar = ({\n    id,\n    name,\n    timetableMinTime,\n    timetableMaxTime,\n    rowMinTime,\n    rowMaxTime,\n    rowCells,\n    rowBarColor,\n    intervalWidth,\n    containerRef,\n    outOfRangeCellPopover,\n}: RowBarProps) => {\n    const roundedMinTime = rowMinTime\n        ? TimeHelper.roundToNearestInterval(rowMinTime, ROW_INTERVAL)\n        : timetableMinTime;\n    const roundedMaxTime = rowMaxTime\n        ? TimeHelper.roundToNearestInterval(rowMaxTime, ROW_INTERVAL, true)\n        : timetableMaxTime;\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isOnTheSameHour = (\n        time1: dayjs.Dayjs,\n        time2: dayjs.Dayjs\n    ): boolean => {\n        return time1.get(\"hour\") == time2.get(\"hour\");\n    };\n\n    const getAriaColIndex = (time: string) => {\n        return (\n            (TimeHelper.timeToMinutes(time) -\n                TimeHelper.timeToMinutes(timetableMinTime)) /\n                ROW_INTERVAL +\n            2\n        );\n    };\n\n    const getAriaColSpan = (startTime: string, endTime: string) => {\n        return (\n            (TimeHelper.timeToMinutes(endTime) -\n                TimeHelper.timeToMinutes(startTime)) /\n            ROW_INTERVAL\n        );\n    };\n\n    const rowCellArray = useMemo(() => {\n        const rowCellArray: InternalTimeTableRowCellData[] = [];\n\n        // Handle non-op before hours\n        if (\n            roundedMinTime &&\n            dayjs(timetableMinTime, \"HH:mm\").isBefore(\n                dayjs(roundedMinTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: roundedMinTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        const sortedRowCells = [...rowCells].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        let lastRoundedEndTime: string | undefined;\n\n        sortedRowCells.forEach((cell, index) => {\n            const { startTime, endTime } = cell;\n            let roundedStartTime = TimeHelper.roundToNearestInterval(\n                startTime,\n                ROW_INTERVAL\n            );\n\n            // NOTE - Prevent overlapping rounded start time and end time cells\n            const isStartTimeBeforePreviousEndTime =\n                lastRoundedEndTime &&\n                dayjs(roundedStartTime, \"HH:mm\").isBefore(\n                    dayjs(lastRoundedEndTime, \"HH:mm\")\n                );\n            if (isStartTimeBeforePreviousEndTime) {\n                roundedStartTime = TimeHelper.roundToNearestInterval(\n                    startTime,\n                    ROW_INTERVAL,\n                    true\n                );\n            }\n\n            const roundedEndTime = TimeHelper.roundToNearestInterval(\n                endTime,\n                ROW_INTERVAL,\n                true\n            );\n            rowCellArray.push({\n                ...cell,\n                roundedStartTime,\n                roundedEndTime,\n                isFocusable: true,\n            });\n\n            const nextSlotStartTime =\n                rowCells[index + 1]?.startTime || roundedMaxTime; // Get next cell start time, if next cell don't exist, use current row max time\n            const roundedNextSlotStartTime = dayjs(\n                TimeHelper.roundToNearestInterval(\n                    nextSlotStartTime,\n                    ROW_INTERVAL\n                ),\n                \"HH:mm\"\n            );\n            const parsedEndTime = dayjs(roundedEndTime, \"HH:mm\");\n\n            let curr = parsedEndTime;\n\n            // Auto block slots between cell time gaps\n            while (curr.isBefore(roundedNextSlotStartTime)) {\n                if (!isOnTheSameHour(curr, roundedNextSlotStartTime)) {\n                    const nextHour = curr.add(1, \"hour\").startOf(\"hour\"); // Round to the next hour\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: nextHour.format(\"HH:mm\").toString(),\n                        status: \"disabled\",\n                    });\n                    curr = nextHour;\n                } else {\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: roundedNextSlotStartTime\n                            .format(\"HH:mm\")\n                            .toString(),\n                        status: \"disabled\",\n                    });\n                    curr = roundedNextSlotStartTime;\n                }\n            }\n            lastRoundedEndTime = curr.format(\"HH:mm\").toString();\n        });\n\n        // Handle non-op after hours\n        if (\n            roundedMaxTime &&\n            dayjs(timetableMaxTime, \"HH:mm\").isAfter(\n                dayjs(roundedMaxTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: roundedMaxTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        // Handle empty row cells and no min/max time to block from timetable min to max\n        if (sortedRowCells.length === 0 && !rowMinTime && !rowMaxTime) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n        return rowCellArray;\n    }, [\n        roundedMinTime,\n        timetableMinTime,\n        rowCells,\n        roundedMaxTime,\n        timetableMaxTime,\n        rowMinTime,\n        rowMaxTime,\n        id,\n        outOfRangeCellPopover,\n    ]);\n\n    return (\n        <RowCellContainer data-testid=\"timetable-row\" role=\"presentation\">\n            {rowCellArray.map((cell, index) => {\n                return (\n                    <RowCell\n                        key={`${index}-row-cell-key`}\n                        {...cell}\n                        ariaColIndex={getAriaColIndex(\n                            cell.roundedStartTime || cell.startTime\n                        )}\n                        ariaColSpan={getAriaColSpan(\n                            cell.roundedStartTime || cell.startTime,\n                            cell.roundedEndTime || cell.endTime\n                        )}\n                        rowName={name}\n                        intervalWidth={intervalWidth}\n                        rowBarColor={rowBarColor}\n                        containerRef={containerRef}\n                    />\n                );\n            })}\n        </RowCellContainer>\n    );\n};\n"],"names":["id","name","timetableMinTime","timetableMaxTime","rowMinTime","rowMaxTime","rowCells","rowBarColor","intervalWidth","containerRef","outOfRangeCellPopover","roundedMinTime","TimeHelper","roundToNearestInterval","ROW_INTERVAL","roundedMaxTime","rowCellArray","useMemo","dayjs","isBefore","push","startTime","endTime","status","customPopover","sortedRowCells","sort","a","b","timeA","timeB","isAfter","lastRoundedEndTime","forEach","cell","index","roundedStartTime","roundedEndTime","Object","assign","isFocusable","nextSlotStartTime","_a","roundedNextSlotStartTime","curr","time2","get","nextHour","add","startOf","format","toString","length","_jsx","RowCellContainer","role","map","RowCell","ariaColIndex","time","timeToMinutes","ariaColSpan","rowName"],"mappings":"4PAsBsB,EAClBA,KACAC,OACAC,mBACAC,mBACAC,aACAC,aACAC,WACAC,cACAC,gBACAC,eACAC,4BAEA,MAAMC,EAAiBP,EACjBQ,aAAWC,uBAAuBT,EAAYU,EAAAA,cAC9CZ,EACAa,EAAiBV,EACjBO,EAAAA,WAAWC,uBAAuBR,EAAYS,EAAAA,cAAc,GAC5DX,EA6BAa,EAAeC,EAAAA,SAAQ,KACzB,MAAMD,EAA+C,GAIjDL,GACAO,UAAMhB,EAAkB,SAASiB,SAC7BD,EAAAA,QAAMP,EAAgB,WAG1BK,EAAaI,KAAK,CACdpB,KACAqB,UAAWnB,EACXoB,QAASX,EACTY,OAAQ,UACRC,cAAed,IAIvB,MAAMe,EAAiB,IAAInB,GAAUoB,MAAK,CAACC,EAAGC,KAC1C,MAAMC,EAAQX,EAAAA,QAAMS,EAAEN,UAAW,SAC3BS,EAAQZ,EAAAA,QAAMU,EAAEP,UAAW,SACjC,OAAIQ,EAAMV,SAASW,IAAe,EAC9BD,EAAME,QAAQD,GAAe,EAC1B,CAAC,IAEZ,IAAIE,EAoGJ,OAlGAP,EAAeQ,SAAQ,CAACC,EAAMC,WAC1B,MAAMd,UAAEA,EAASC,QAAEA,GAAYY,EAC/B,IAAIE,EAAmBxB,EAAAA,WAAWC,uBAC9BQ,EACAP,EAAAA,cAKAkB,GACAd,EAAAA,QAAMkB,EAAkB,SAASjB,SAC7BD,UAAMc,EAAoB,YAG9BI,EAAmBxB,EAAAA,WAAWC,uBAC1BQ,EACAP,EAAAA,cACA,IAIR,MAAMuB,EAAiBzB,EAAAA,WAAWC,uBAC9BS,EACAR,EAAAA,cACA,GAEJE,EAAaI,KAAIkB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACVL,IACHE,mBACAC,iBACAG,aAAa,KAGjB,MAAMC,WACFC,EAAApC,EAAS6B,EAAQ,yBAAId,YAAaN,EAChC4B,EAA2BzB,EAAAA,QAC7BN,EAAAA,WAAWC,uBACP4B,EACA3B,EAAAA,cAEJ,SAIJ,IAAI8B,EAFkB1B,EAAAA,QAAMmB,EAAgB,SAK5C,KAAOO,EAAKzB,SAASwB,IACjB,GAlGRE,EAkGmCF,EAANC,EAhGhBE,IAAI,SAAWD,EAAMC,IAAI,QAgGwB,CAClD,MAAMC,EAAWH,EAAKI,IAAI,EAAG,QAAQC,QAAQ,QAC7CjC,EAAaI,KAAK,CACdpB,KACAqB,UAAWuB,EAAKM,OAAO,SAASC,WAChC7B,QAASyB,EAASG,OAAO,SAASC,WAClC5B,OAAQ,aAEZqB,EAAOG,CACX,MACI/B,EAAaI,KAAK,CACdpB,KACAqB,UAAWuB,EAAKM,OAAO,SAASC,WAChC7B,QAASqB,EACJO,OAAO,SACPC,WACL5B,OAAQ,aAEZqB,EAAOD,EAtHC,IAEpBE,EAuHIb,EAAqBY,EAAKM,OAAO,SAASC,UAAU,IAKpDpC,GACAG,UAAMf,EAAkB,SAAS4B,QAC7Bb,EAAAA,QAAMH,EAAgB,WAG1BC,EAAaI,KAAK,CACdpB,KACAqB,UAAWN,EACXO,QAASnB,EACToB,OAAQ,UACRC,cAAed,IAKO,IAA1Be,EAAe2B,QAAiBhD,GAAeC,GAC/CW,EAAaI,KAAK,CACdpB,KACAqB,UAAWnB,EACXoB,QAASnB,EACToB,OAAQ,UACRC,cAAed,IAGhBM,CAAY,GACpB,CACCL,EACAT,EACAI,EACAS,EACAZ,EACAC,EACAC,EACAL,EACAU,IAGJ,OACI2C,EAAAA,IAACC,EAAAA,gCAA6B,gBAAgBC,KAAK,wBAC9CvC,EAAawC,KAAI,CAACtB,EAAMC,KACrB,OACIkB,EAAAA,IAACI,EAAAA,QAAOnB,OAAAC,OAAA,GAEAL,EAAI,CACRwB,cAnKKC,EAoKDzB,EAAKE,kBAAoBF,EAAKb,WAlK7CT,EAAAA,WAAWgD,cAAcD,GACtB/C,EAAAA,WAAWgD,cAAc1D,IACzBY,EAAAA,aACJ,GAiKY+C,aA7JIxC,EA8JAa,EAAKE,kBAAoBF,EAAKb,UA9JXC,EA+JnBY,EAAKG,gBAAkBH,EAAKZ,SA7J3CV,EAAAA,WAAWgD,cAActC,GACtBV,EAAAA,WAAWgD,cAAcvC,IAC7BP,EAAAA,cA6JYgD,QAAS7D,EACTO,cAAeA,EACfD,YAAaA,EACbE,aAAcA,IAZT,GAAG0B,kBAxJL,IAACd,EAAmBC,EATlBqC,CA8KP,KAGK"}