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

package/cjs/time-slot-bar-week/time-slot-bar-week-days.styles_evdvs9.css

@@ -0,0 +1,17 @@
+@layer fds{.h1pfybo4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:var(--fds-spacing-8);-webkit-flex:1;-ms-flex:1;flex:1;}
+.cm1jktd{color:var(--fds-colour-text-disabled-subtlest);}
+.hfnrvvn{-ms-grid-column:2/-1;grid-column:2/-1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.w10itm92{width:100%;}
+.g1ijsvx5{width:100%;display:-ms-grid;display:grid;-ms-grid-columns:auto repeat(7, 1fr);grid-template-columns:auto repeat(7, 1fr);-webkit-column-gap:var(--fds-spacing-4);column-gap:var(--fds-spacing-4);}
+.eljtyj8{-ms-grid-column:2/-1;grid-column:2/-1;overflow:hidden;}
+.crbcp6c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);overflow:hidden;}
+.t13lf4s5{--fds-internal-timeSlotBarWeek-timeColumn-height:initial;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-ms-grid-row:3/auto;grid-row:3/auto;gap:var(--fds-spacing-4);width:1.375rem;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);overflow:hidden;height:var(--fds-internal-timeSlotBarWeek-timeColumn-height);}
+.t4v35lv{min-height:60px;}.t4v35lv:last-child{min-height:0;}
+.t1v9il5y{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-subtler);text-align:center;line-height:12px;}.t1v9il5y:first-line{font-size:var(--fds-font-body-size-sm);}
+.t1xo1xfl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;gap:var(--fds-spacing-4);}
+.cyddonb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:var(--fds-spacing-8);}
+.c5f9kvb{width:100%;height:2.5rem;}
+.c1hid59d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-8);}
+.cfi87m2{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}
+.ctpwme7{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.t1wrn5bg{--fds-internal-timeSlotBarWeek-timeSlotComponent-height:initial;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:200px;height:var(--fds-internal-timeSlotBarWeek-timeSlotComponent-height);min-height:var(--fds-internal-timeSlotBarWeek-timeSlotComponent-height);border-radius:var(--fds-radius-xs);}.t1wrn5bg:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:1px;}}

package/cjs/time-slot-bar-week/time-slot-bar-week.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"),i=require("../shared/internal-calendar/calendar-manager.js");require("../util/calendar-helper.js");var l=require("../util/date-helper.js");require("../util/string-helper.js");var n=require("./time-slot-bar-week.style.js"),s=require("./time-slot-bar-week-days.js");const o="YYYY-MM-DD";exports.TimeSlotBarWeek=d=>{var{disabledDates:u,onWeekDisplayChange:c,onChange:m,value:D,minDate:f,maxDate:k,startTime:h,endTime:g,slots:w,interval:b,variant:v,maxVisibleCellHeight:j,showNavigationHeader:C=!0,enableSelection:x,onSlotClick:y,currentCalendarDate:S}=d,q=e.__rest(d,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[H,p]=r.useState(D),Y=r.useRef(null),O=r.useRef(void 0);r.useEffect((()=>{p(D)}),[D]);const T=e=>{const a=e.format(o);p(a),null==m||m(a)},M=(e,a)=>{y&&y(e,a)},W=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(n.Wrapper,Object.assign({},q,{children:a.jsx(i.CalendarManager,{ref:Y,dynamicHeight:!0,initialCalendarDate:l.DateHelper.toDayjs(H||S).endOf("week").format(o),selectedStartDate:H,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!f&&t.default(e).subtract(1,"week").isBefore(f,"week"),isRightArrowDisabled:e=>!!k&&t.default(e).add(1,"week").isAfter(k,"week"),onCalendarDateChange:e=>{O.current&&O.current.isSame(e,"week")||W(e),O.current=e},showNavigationHeader:C,minDate:f,maxDate:k,getMonthHeaderLabel:e=>t.default(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t.default(e).endOf("week").format("YYYY"),children:({calendarDate:e})=>(e=>a.jsx(s.TimeSlotBarWeekDays,{calendarDate:e,disabledDates:u,selectedDate:H,minDate:f,maxDate:k,startTime:h,endTime:g,onSelect:T,slots:w,interval:b,variant:v,maxVisibleCellHeight:j,enableSelection:x,onSlotClick:M}))(e)})}))};
+"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 l=require("../util/date-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./time-slot-bar-week.styles.js"),s=require("./time-slot-bar-week-days.js");const o="YYYY-MM-DD";exports.TimeSlotBarWeek=d=>{var{disabledDates:u,onWeekDisplayChange:c,onChange:m,value:D,minDate:f,maxDate:k,startTime:g,endTime:h,slots:w,interval:b,variant:v,maxVisibleCellHeight:j,showNavigationHeader:C=!0,enableSelection:x,onSlotClick:y,currentCalendarDate:q}=d,S=e.__rest(d,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[p,H]=r.useState(D),Y=r.useRef(null),O=r.useRef(void 0);r.useEffect((()=>{H(D)}),[D]);const T=e=>{const a=e.format(o);H(a),null==m||m(a)},M=(e,a)=>{y&&y(e,a)},W=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("div",Object.assign({className:n.wrapper},S,{children:a.jsx(i.CalendarManager,{ref:Y,dynamicHeight:!0,initialCalendarDate:l.DateHelper.toDayjs(p||q).endOf("week").format(o),selectedStartDate:p,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!f&&t.default(e).subtract(1,"week").isBefore(f,"week"),isRightArrowDisabled:e=>!!k&&t.default(e).add(1,"week").isAfter(k,"week"),onCalendarDateChange:e=>{O.current&&O.current.isSame(e,"week")||W(e),O.current=e},showNavigationHeader:C,minDate:f,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})=>(e=>a.jsx(s.TimeSlotBarWeekDays,{calendarDate:e,disabledDates:u,selectedDate:p,minDate:f,maxDate:k,startTime:g,endTime:h,onSelect:T,slots:w,interval:b,variant:v,maxVisibleCellHeight:j,enableSelection:x,onSlotClick:M}))(e)})}))};
 //# sourceMappingURL=time-slot-bar-week.js.map

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 * as styles from \"./time-slot-bar-week.styles\";\nimport { TimeSlotBarWeekDays } from \"./time-slot-bar-week-days\";\nimport type { TimeSlotBarWeekProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\n// @catalog\n/**\n * A week calendar grid with a time axis, rendering detailed slot bars within\n * each day column.\n *\n * Use `TimeSlotBarWeek` for detailed time-of-day scheduling where each cell\n * represents a configurable time interval. For a simpler day-level overview\n * without a time axis, use `TimeSlotWeekView` instead.\n * @keywords availability, calendar, scheduling, weekly\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        <div className={styles.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        </div>\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","Object","assign","className","styles.wrapper","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":"2eAYA,MAAMA,EAAc,qCAYYC,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,IAAA,MAAAC,OAAAC,OAAA,CAAKC,UAAWC,EAAAA,SAAoB7B,EAAU,CAAA8B,SAC1CL,MAACM,EAAAA,gBAAe,CACZC,IAAK3B,EACL4B,eAAa,EACbC,oBAlCDC,EAAAA,WAAWC,QAAQlC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO9B,GAiCJuD,kBAAmBnC,EACnBoC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBxD,GACFyD,EAAAA,QAAMD,GACDJ,SAAS,EAAG,QACZM,SAAS1D,EAAS,QAE3B2D,qBAAuBH,KACjBvD,GACFwD,UAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQ3D,EAAS,QAExD4D,qBA9EwB9D,IAE3BoB,EAAqB2C,SACrB3C,EAAqB2C,QAAQC,OAAOhE,EAAO,SAE5C6B,EAA4B7B,GAEhCoB,EAAqB2C,QAAU/D,CAAK,EAwE5BS,qBAAsBA,EACtBR,QAASA,EACTC,QAASA,EACT+D,oBAAsBR,GAClBC,EAAAA,QAAMD,GAActB,MAAM,QAAQV,OAAO,OAE7CyC,mBAAqBT,GACjBC,EAAAA,QAAMD,GAActB,MAAM,QAAQV,OAAO,QAE7C0C,aAAa,EAAIxB,SAEhB,EAAGc,kBApDe,CAACA,GAExBnB,EAAAA,IAAC8B,EAAAA,oBAAmB,CAChBX,aAAcA,EACd5D,cAAeA,EACfkB,aAAcA,EACdd,QAASA,EACTC,QAASA,EACTC,UAAWA,EACXC,QAASA,EACTiE,SAAU9C,EACVlB,MAAOA,EACPC,SAAUA,EACVC,QAASA,EACTC,qBAAsBA,EACtBE,gBAAiBA,EACjBC,YAAae,IAqCF4C,CAAuBb,OAGpC"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./time-slot-bar-week.styles_11ybf42.css");exports.wrapper="w1qkct16";
+//# sourceMappingURL=time-slot-bar-week.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-bar-week.styles.js","sources":["../../../src/time-slot-bar-week/time-slot-bar-week.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport * as calendarDropdownStyles from \"../shared/internal-calendar/calendar-dropdown.styles\";\nimport { MediaQuery, Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    ${calendarDropdownStyles.tokens.headerBottomSpacing}: ${Spacing[\n        \"spacing-8\"\n    ]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${calendarDropdownStyles.tokens.horizontalInset}: ${Spacing[\n            \"spacing-20\"\n        ]};\n    }\n\n    min-width: 18.5rem;\n`;\n"],"names":[],"mappings":"kHAKoB"}

package/cjs/time-slot-bar-week/time-slot-bar-week.styles_11ybf42.css

@@ -0,0 +1 @@
+@layer fds{.w1qkct16{--fds-internal-calendarDropdown-headerBottomSpacing:var(--fds-spacing-8);min-width:18.5rem;}:where(body.fds-breakpoint-sm-max) .w1qkct16{--fds-internal-calendarDropdown-horizontalInset:var(--fds-spacing-20);}}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("../shared/accessibility/index.js"),l=require("../shared/time-slot/time-slot.js");require("../theme/theme-provider/index.js");var i=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var o=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var s=require("./consts.js"),n=require("./time-slot-bar-week-days.styles.js");exports.WeekTimeSlotCell=({formattedDate:a,slot:u,variant:d,hasCollapsedContent:c,expandAll:m,visibleRowCount:h,onSlotClick:y,getSlotAriaLabel:b,onSlotKeyDown:j,onSlotButtonClick:q,slotButtonRefs:k})=>{var p;const{id:v,clickable:x=!0,isActualSlot:C,styleAttributes:S,cellLength:f,halfFill:T}=u,{styleType:g="default",backgroundColor:w,backgroundColor2:A}=S,H=`${a}-${v}`,I=c&&!m&&(null!==(p=u.rowIndex)&&void 0!==p?p:0)>=h,L="fixed"===d?f*s.SLOT_HEIGHT+(f-1)*s.SLOT_GAP:s.SLOT_HEIGHT,D=t.useRef(null);return o.useApplyStyle(D,{[n.tokens.timeSlot.height]:i.formatUnitValue(L,"px")}),e.jsx(l.TimeSlot,{ref:D,styleType:g,bgColor:w,bgColor2:A,clickable:x,fill:T,className:n.timeSlotComponent,onClick:()=>x&&y(a,u),children:C&&e.jsx(r.VisuallyHidden,{inert:r.inertValue(I),children:e.jsx("button",{type:"button",ref:e=>{k.current[H]=e},"aria-disabled":!x,"aria-label":b(a,u),onKeyDown:e=>{var t;return j(e,{key:H,date:a,rowIndex:null!==(t=u.rowIndex)&&void 0!==t?t:0})},onClick:x?q(a,u):void 0})})})};
+//# sourceMappingURL=time-slot-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-cell.js","sources":["../../../src/time-slot-bar-week/time-slot-cell.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { TimeSlot as TimeSlotComponent } from \"../shared/time-slot\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { SLOT_GAP, SLOT_HEIGHT } from \"./consts\";\nimport * as styles from \"./time-slot-bar-week-days.styles\";\nimport type { TimeSlotCellsVariant } from \"./types\";\n\nexport interface TimeSlotCell extends TimeSlot {\n    cellLength: number;\n    halfFill?: \"default\" | \"top\" | \"bottom\" | undefined;\n    isActualSlot?: boolean | undefined;\n    rowIndex?: number | undefined;\n}\n\nexport interface FocusableSlotMeta {\n    key: string;\n    date: string;\n    rowIndex: number;\n}\n\nexport interface WeekTimeSlotCellProps {\n    formattedDate: string;\n    slot: TimeSlotCell;\n    variant: TimeSlotCellsVariant;\n    hasCollapsedContent: boolean;\n    expandAll: boolean;\n    visibleRowCount: number;\n    onSlotClick: (date: string, slot: TimeSlot) => void;\n    getSlotAriaLabel: (date: string, slot: TimeSlot) => string;\n    onSlotKeyDown: (\n        event: React.KeyboardEvent<HTMLButtonElement>,\n        meta: FocusableSlotMeta\n    ) => void;\n    onSlotButtonClick: (\n        date: string,\n        slot: TimeSlot\n    ) => (event: React.MouseEvent<HTMLButtonElement>) => void;\n    slotButtonRefs: React.MutableRefObject<\n        Record<string, HTMLButtonElement | null>\n    >;\n}\n\nexport const WeekTimeSlotCell = ({\n    formattedDate,\n    slot,\n    variant,\n    hasCollapsedContent,\n    expandAll,\n    visibleRowCount,\n    onSlotClick,\n    getSlotAriaLabel,\n    onSlotKeyDown,\n    onSlotButtonClick,\n    slotButtonRefs,\n}: WeekTimeSlotCellProps) => {\n    const {\n        id,\n        clickable = true,\n        isActualSlot,\n        styleAttributes,\n        cellLength,\n        halfFill,\n    } = slot;\n    const {\n        styleType = \"default\",\n        backgroundColor,\n        backgroundColor2,\n    } = styleAttributes;\n    const slotId = `${formattedDate}-${id}`;\n    const isCollapsedSlot =\n        hasCollapsedContent &&\n        !expandAll &&\n        (slot.rowIndex ?? 0) >= visibleRowCount;\n\n    const slotHeight =\n        variant === \"fixed\"\n            ? cellLength * SLOT_HEIGHT + (cellLength - 1) * SLOT_GAP\n            : SLOT_HEIGHT;\n\n    const slotRef = useRef<HTMLDivElement>(null);\n    useApplyStyle(slotRef, {\n        [styles.tokens.timeSlot.height]: formatUnitValue(slotHeight, \"px\"),\n    });\n\n    return (\n        <TimeSlotComponent\n            ref={slotRef}\n            styleType={styleType}\n            bgColor={backgroundColor}\n            bgColor2={backgroundColor2}\n            clickable={clickable}\n            fill={halfFill}\n            className={styles.timeSlotComponent}\n            onClick={() => clickable && onSlotClick(formattedDate, slot)}\n        >\n            {isActualSlot && (\n                <VisuallyHidden inert={inertValue(isCollapsedSlot)}>\n                    <button\n                        type=\"button\"\n                        ref={(element) => {\n                            slotButtonRefs.current[slotId] = element;\n                        }}\n                        aria-disabled={!clickable}\n                        aria-label={getSlotAriaLabel(formattedDate, slot)}\n                        onKeyDown={(event) =>\n                            onSlotKeyDown(event, {\n                                key: slotId,\n                                date: formattedDate,\n                                rowIndex: slot.rowIndex ?? 0,\n                            })\n                        }\n                        onClick={\n                            clickable\n                                ? onSlotButtonClick(formattedDate, slot)\n                                : undefined\n                        }\n                    />\n                </VisuallyHidden>\n            )}\n        </TimeSlotComponent>\n    );\n};\n"],"names":["formattedDate","slot","variant","hasCollapsedContent","expandAll","visibleRowCount","onSlotClick","getSlotAriaLabel","onSlotKeyDown","onSlotButtonClick","slotButtonRefs","id","clickable","isActualSlot","styleAttributes","cellLength","halfFill","styleType","backgroundColor","backgroundColor2","slotId","isCollapsedSlot","_a","rowIndex","slotHeight","SLOT_HEIGHT","SLOT_GAP","slotRef","useRef","useApplyStyle","styles.tokens","timeSlot","height","formatUnitValue","_jsx","TimeSlotComponent","ref","bgColor","bgColor2","fill","className","styles.timeSlotComponent","onClick","children","VisuallyHidden","inert","inertValue","type","element","current","onKeyDown","event","key","date","undefined"],"mappings":"woBA8CgC,EAC5BA,gBACAC,OACAC,UACAC,sBACAC,YACAC,kBACAC,cACAC,mBACAC,gBACAC,oBACAC,2BAEA,MAAMC,GACFA,EAAEC,UACFA,GAAY,EAAIC,aAChBA,EAAYC,gBACZA,EAAeC,WACfA,EAAUC,SACVA,GACAf,GACEgB,UACFA,EAAY,UAASC,gBACrBA,EAAeC,iBACfA,GACAL,EACEM,EAAS,GAAGpB,KAAiBW,IAC7BU,EACFlB,IACCC,YACAkB,EAAArB,EAAKsB,wBAAY,IAAMlB,EAEtBmB,EACU,UAAZtB,EACMa,EAAaU,EAAAA,aAAeV,EAAa,GAAKW,EAAAA,SAC9CD,EAAAA,YAEJE,EAAUC,EAAAA,OAAuB,MAKvC,OAJAC,EAAAA,cAAcF,EAAS,CACnB,CAACG,EAAAA,OAAcC,SAASC,QAASC,EAAAA,gBAAgBT,EAAY,QAI7DU,EAAAA,IAACC,EAAAA,SAAiB,CACdC,IAAKT,EACLV,UAAWA,EACXoB,QAASnB,EACToB,SAAUnB,EACVP,UAAWA,EACX2B,KAAMvB,EACNwB,UAAWC,EAAAA,kBACXC,QAAS,IAAM9B,GAAaN,EAAYN,EAAeC,GAAK0C,SAE3D9B,GACGqB,MAACU,EAAAA,eAAc,CAACC,MAAOC,EAAAA,WAAWzB,YAC9Ba,EAAAA,IAAA,SAAA,CACIa,KAAK,SACLX,IAAMY,IACFtC,EAAeuC,QAAQ7B,GAAU4B,CAAO,mBAE5BpC,EAAS,aACbL,EAAiBP,EAAeC,GAC5CiD,UAAYC,UACR,OAAA3C,EAAc2C,EAAO,CACjBC,IAAKhC,EACLiC,KAAMrD,EACNuB,iBAAUD,EAAArB,EAAKsB,wBAAY,GAC7B,EAENmB,QACI9B,EACMH,EAAkBT,EAAeC,QACjCqD,OAKN"}

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("clsx"),l=require("../external/dayjs/dayjs.min.js"),t=require("../external/dayjs/plugin/isBetween.js"),a=require("react"),s=require("../shared/accessibility/index.js"),i=require("../shared/internal-calendar/day-cell/day-cell.js"),o=require("../shared/time-slot/time-slot.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var n=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var d=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var c=require("../util/calendar-helper.js"),u=require("../util/time-helper.js"),m=require("./time-slot-week-days.styles.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=v(r);l.default.extend(t.default);const y="YYYY-MM-DD",b={id:"1",startTime:"",endTime:"",clickable:!1,styleAttributes:{color:"",styleType:"stripes",backgroundColor:n.Colour["bg-stronger"],backgroundColor2:n.Colour["bg-strongest"]}},h=({color:r,children:l})=>{const t=a.useRef(null);return d.useApplyStyle(t,{[m.tokens.timeSlotText.color]:r}),e.jsx("div",{ref:t,className:m.timeSlotText,children:l})};exports.TimeSlotWeekDays=({calendarDate:r,disabledDates:t,selectedDate:n,onSelect:d,minDate:v,maxDate:j,slots:f,enableSelection:k=!0,onSlotClick:x})=>{const g=a.useMemo((()=>c.CalendarHelper.generateDaysForCurrentWeek(r)),[r]),[T,q]=a.useState(),C=a.useRef({}),D=(e,r)=>{null==x||x(e,r)},w=(e,r)=>l=>{var t;l.stopPropagation(),(null===(t=r.clickable)||void 0===t||t)&&D(e,r)},S=e=>{q(e)},H=()=>{q(void 0)},R=e=>{const r=e.format(y),a=(e=>{const r=c.CalendarHelper.isWithinRange(e,v?l.default(v):void 0,j?l.default(j):void 0),a=!!t&&t.includes(e.format(y));return!r||a})(e),s=k&&!a,i=s&&T&&e.isSame(T,"day"),o=[n].includes(r),d={labelType:"available",interactive:!!k&&s};return a&&(d.disabled=!0,d.labelType="unavailable"),o&&i?(d.labelType="selected-hover",d.circleLeft="selected-hover-outline",d.circleRight="selected-hover-outline"):o?(d.labelType="selected",d.circleLeft="selected-outline",d.circleRight="selected-outline"):i&&(d.labelType="hover",d.circleLeft="hover-subtle",d.circleRight="hover-subtle"),d},A=(e,r)=>{const l=(t=r.date,(null!==(a=null==f?void 0:f[t])&&void 0!==a?a:[]).map(((e,r)=>({key:`${t}-${e.id}`,date:t,rowIndex:r}))));var t,a;const s=e=>{var r;e&&(null===(r=C.current[e.key])||void 0===r||r.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const t=l.findIndex((e=>e.key===r.key));s(l[t+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const t=l.findIndex((e=>e.key===r.key));s(l[t-1]);break}case"Home":case"PageUp":e.preventDefault(),s(l[0]);break;case"End":case"PageDown":e.preventDefault(),s(l[l.length-1])}},N=(e,r)=>{var t;const{startTime:a,endTime:i}=r;return s.concatIds(l.default(e).format("D MMMM YYYY dddd"),a&&i?u.TimeHelper.formatTimeRange(a,i):void 0,r.label,null===(t=r.clickable)||void 0===t||t?"Available":"Unavailable")};return e.jsxs("div",{className:m.wrapper,role:"grid",children:[e.jsx("div",{className:m.headerRow,role:"row",onBlur:H,children:g.map(((r,t)=>{const a=R(r);return e.jsxs("div",{className:m.headerCellWeek,role:"presentation",children:[e.jsx(i.DayCell,Object.assign({date:r,calendarDate:l.default(n),onSelect:()=>{((e,r)=>{!r&&k&&d(e)})(r,!a.interactive)},onHover:S,onHoverEnd:H,onFocus:S,role:"columnheader",tabIndex:a.interactive?0:-1},a),`day-${t}`),e.jsx("div",{"aria-hidden":!0,className:p.default(m.dayLabel,a.disabled&&m.dayLabelDisabled),children:l.default(r).format("ddd")})]},`week-day-${t}`)}))}),e.jsx("div",{className:m.columnWeekCell,role:"row",children:g.map(((r,l)=>{var t;const a=r.format(y),i=null!==(t=null==f?void 0:f[a])&&void 0!==t?t:[b];return e.jsx("div",{className:m.timeSlotWrapper,role:"gridcell",children:i&&i.map(((r,l)=>{const{id:t,startTime:i,endTime:n,clickable:d=!0,styleAttributes:u}=r,{color:v,styleType:p="default",backgroundColor:y,backgroundColor2:j}=u,f=`${a}-${t}`,k=r!==b;return e.jsxs(o.TimeSlot,{className:m.timeSlotComponent,styleType:p,bgColor:y,bgColor2:j,clickable:d,onClick:()=>d&&D(a,r),children:[e.jsxs(h,{color:v,children:[e.jsx("span",{children:c.CalendarHelper.convertTo12HourFormat(i)}),n&&i&&e.jsx("span",{children:"-"}),e.jsx("span",{children:c.CalendarHelper.convertTo12HourFormat(n)})]}),k&&e.jsx(s.VisuallyHidden,{children:e.jsx("button",{type:"button",ref:e=>{C.current[f]=e},"aria-disabled":!d,"aria-label":N(a,r),onKeyDown:e=>A(e,{key:f,date:a}),onClick:w(a,r)})})]},t)}))},`wrapper-${l}`)}))},`week-cell-${r.format(y)}`)]})};
 //# 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 clsx from \"clsx\";\nimport 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 { TimeSlot as TimeSlotComponent } from \"../shared/time-slot\";\nimport { Colour, useApplyStyle } from \"../theme\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./time-slot-week-days.styles\";\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: Colour[\"bg-stronger\"],\n        backgroundColor2: Colour[\"bg-strongest\"],\n    },\n};\n\nconst TimeSlotTextWithColor = ({\n    color,\n    children,\n}: {\n    color: string | undefined;\n    children: React.ReactNode;\n}) => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(ref, {\n        [styles.tokens.timeSlotText.color]: color,\n    });\n\n    return (\n        <div ref={ref} className={styles.timeSlotText}>\n            {children}\n        </div>\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            <div\n                className={styles.headerRow}\n                role=\"row\"\n                onBlur={handleDayHoverClear}\n            >\n                {currentCalendarWeek.map((day, index) => {\n                    const dayCellStyleProps = generateStyleProps(day);\n\n                    return (\n                        <div\n                            className={styles.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                            <div\n                                aria-hidden\n                                className={clsx(\n                                    styles.dayLabel,\n                                    dayCellStyleProps.disabled &&\n                                        styles.dayLabelDisabled\n                                )}\n                            >\n                                {dayjs(day).format(\"ddd\")}\n                            </div>\n                        </div>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    const renderTimeSlotBarCells = () => {\n        return (\n            <div\n                className={styles.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                        <div\n                            className={styles.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                                            key={id}\n                                            className={styles.timeSlotComponent}\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                                            <TimeSlotTextWithColor\n                                                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                                            </TimeSlotTextWithColor>\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                        </div>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    return (\n        <div className={styles.wrapper} role=\"grid\">\n            {renderHeader()}\n            {renderTimeSlotBarCells()}\n        </div>\n    );\n};\n"],"names":["dayjs","extend","isBetween","dateFormat","fallbackSlot","id","startTime","endTime","clickable","styleAttributes","color","styleType","backgroundColor","Colour","backgroundColor2","TimeSlotTextWithColor","children","ref","useRef","useApplyStyle","styles.tokens","timeSlotText","_jsx","className","styles.timeSlotText","calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","slots","daySlots","enableSelection","onSlotClick","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","hoverDay","setHoverDay","useState","slotButtonRefs","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","styles.wrapper","role","styles.headerRow","onBlur","styles.headerCellWeek","DayCell","Object","assign","handleDayClick","onHover","onHoverEnd","onFocus","tabIndex","clsx","styles.dayLabel","styles.dayLabelDisabled","styles.columnWeekCell","dayIndex","styles.timeSlotWrapper","slotKey","isActualSlot","TimeSlotComponent","styles.timeSlotComponent","bgColor","bgColor2","onClick","convertTo12HourFormat","VisuallyHidden","type","element","onKeyDown"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./time-slot-week-days.styles_1h21vyw.css");exports.columnWeekCell="c1fvren",exports.dayLabel="d4p8eye",exports.dayLabelDisabled="dl9xaeu",exports.headerCellWeek="h1u5a4vg",exports.headerRow="hi684jn",exports.timeSlotComponent="t1nixg7y",exports.timeSlotText="tiecbfv",exports.timeSlotWrapper="t17yohj6",exports.tokens={timeSlotText:{color:"--fds-internal-timeSlotWeekDays-timeSlotText-color"}},exports.wrapper="w1jgoij2";
+//# sourceMappingURL=time-slot-week-days.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-week-days.styles.js","sources":["../../../src/time-slot-week-view/time-slot-week-days.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../theme\";\n\n// =============================================================================\n// TOKENS\n// =============================================================================\nexport const tokens = {\n    timeSlotText: {\n        color: \"--fds-internal-timeSlotWeekDays-timeSlotText-color\",\n    },\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const headerCellWeek = css`\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 = css`\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const dayLabel = css`\n    ${Font[\"body-xs-semibold\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const dayLabelDisabled = css`\n    color: ${Colour[\"text-disabled-subtlest\"]};\n`;\n\nexport const wrapper = css`\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const columnWeekCell = css`\n    grid-column: 1 / -1;\n    display: flex;\n    min-height: 7.625rem;\n`;\n\nexport const timeSlotText = css`\n    ${tokens.timeSlotText.color}: initial;\n\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: var(${tokens.timeSlotText.color}, ${Colour[\"text\"]});\n`;\n\nexport const timeSlotComponent = css`\n    display: flex;\n    flex-grow: 1;\n    align-items: center;\n    justify-content: center;\n    margin: 1px 0px;\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 = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin: 1px;\n`;\n"],"names":["timeSlotText","color"],"mappings":"2HA8C2B,2BAfN,mCAKQ,iCApBF,6BASL,oCAwCQ,gCAbL,kCA4BG,0BAzEN,CAClBA,aAAc,CACVC,MAAO,uEA+BK"}

package/cjs/time-slot-week-view/time-slot-week-days.styles_1h21vyw.css

@@ -0,0 +1,9 @@
+@layer fds{.h1u5a4vg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:0.188rem;}
+.hi684jn{-ms-grid-column:1/-1;grid-column:1/-1;display:-ms-grid;display:grid;-ms-grid-columns:repeat(7, 1fr);grid-template-columns:repeat(7, 1fr);}
+.d4p8eye{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text);}
+.dl9xaeu{color:var(--fds-colour-text-disabled-subtlest);}
+.w1jgoij2{width:100%;display:-ms-grid;display:grid;-ms-grid-columns:repeat(7, 1fr);grid-template-columns:repeat(7, 1fr);}
+.c1fvren{-ms-grid-column:1/-1;grid-column:1/-1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:7.625rem;}
+.tiecbfv{--fds-internal-timeSlotWeekDays-timeSlotText-color:initial;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);margin:1rem 0rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;max-width:2.5rem;color:var(--fds-internal-timeSlotWeekDays-timeSlotText-color, var(--fds-colour-text));}
+.t1nixg7y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin:1px 0px;position:relative;}.t1nixg7y:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:2px;z-index:1;}
+.t17yohj6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;margin:1px;}}

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 s=require("../util/date-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=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:w,slots:k,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("div",Object.assign({className:l.wrapper},v,{children:a.jsx(i.CalendarManager,{ref:q,dynamicHeight:!0,initialCalendarDate:s.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=>!!w&&t.default(e).add(1,"week").isAfter(w,"week"),onCalendarDateChange:e=>{S.current&&S.current.isSame(e,"week")||Y(e),S.current=e},showNavigationHeader:g,minDate:m,maxDate:w,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(n.TimeSlotWeekDays,{calendarDate:e,disabledDates:u,selectedDate:y,minDate:m,maxDate:w,onSelect:p,slots:k,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 * as styles from \"./time-slot-week-view.styles\";\nimport type { TimeSlotWeekViewProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\n// @catalog\n/**\n * A week calendar grid that displays slot availability within each day column.\n *\n * Use `TimeSlotWeekView` for a day-level overview of slot availability across\n * a week. For detailed time-of-day scheduling with a time axis, use\n * `TimeSlotBarWeek` instead.\n * @keywords availability, calendar, scheduling, weekly\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        <div className={styles.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        </div>\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","Object","assign","className","styles.wrapper","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,sCAWaC,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,IAAA,MAAAC,OAAAC,OAAA,CAAKC,UAAWC,EAAAA,SAAoB7B,EAAU,CAAA8B,SAC1CL,MAACM,EAAAA,gBAAe,CACZC,IAAK3B,EACL4B,eAAa,EACbC,oBAdDC,EAAAA,WAAWC,QAAQlC,GAAgBH,GACrCuB,MAAM,QACNV,OAAOzB,GAaJkD,kBAAmBnC,EACnBoC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBnD,GACFoD,EAAAA,QAAMD,GACDJ,SAAS,EAAG,QACZM,SAASrD,EAAS,QAE3BsD,qBAAuBH,KACjBlD,GACFmD,UAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQtD,EAAS,QAExDuD,qBA1DwBzD,IAE3Be,EAAqB2C,SACrB3C,EAAqB2C,QAAQC,OAAO3D,EAAO,SAE5CwB,EAA4BxB,GAEhCe,EAAqB2C,QAAU1D,CAAK,EAoD5BI,qBAAsBA,EACtBH,QAASA,EACTC,QAASA,EACT0D,oBAAsBR,GAClBC,EAAAA,QAAMD,GAActB,MAAM,QAAQV,OAAO,OAE7CyC,mBAAqBT,GACjBC,EAAAA,QAAMD,GAActB,MAAM,QAAQV,OAAO,QAE7C0C,aAAa,EAAIxB,SAEhB,EAAGc,kBAEInB,EAAAA,IAAC8B,oBACGX,aAAcA,EACdvD,cAAeA,EACfa,aAAcA,EACdT,QAASA,EACTC,QAASA,EACT8D,SAAU9C,EACVf,MAAOA,EACPE,gBAAiBA,EACjBC,YAAae,QAK3B"}

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

@@ -1,10 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../v3_theme/index.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const i=r(e).default.div`
-    --header-bottom-spacing: 0.5rem;
-
-    ${t.V3_MediaQuery.MaxWidth.sm} {
-        --header-horizontal-inset: 1.25rem;
-    }
-
-    min-width: 18.5rem;
-`;exports.Wrapper=i;
+"use strict";require("./time-slot-week-view.styles_gqgsw2.css");exports.wrapper="wgz4q8s";
 //# sourceMappingURL=time-slot-week-view.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-view.styles.js","sources":["../../../src/time-slot-week-view/time-slot-week-view.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_MediaQuery } from \"../v3_theme\";\n\nexport const Wrapper = styled.div`\n    --header-bottom-spacing: 0.5rem;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        --header-horizontal-inset: 1.25rem;\n    }\n\n    min-width: 18.5rem;\n`;\n"],"names":["Wrapper","styled","div","V3_MediaQuery","MaxWidth","sm"],"mappings":"0JAIO,MAAMA,OAAUC,QAAOC,GAAG;;;MAG3BC,EAAAA,cAAcC,SAASC;;;;;"}
+{"version":3,"file":"time-slot-week-view.styles.js","sources":["../../../src/time-slot-week-view/time-slot-week-view.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport * as calendarDropdownStyles from \"../shared/internal-calendar/calendar-dropdown.styles\";\nimport { Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    ${calendarDropdownStyles.tokens.headerBottomSpacing}: ${Spacing[\n        \"spacing-8\"\n    ]};\n    min-width: 18.5rem;\n`;\n"],"names":[],"mappings":"mHAKoB"}

package/cjs/time-slot-week-view/time-slot-week-view.styles_gqgsw2.css

@@ -0,0 +1 @@
+@layer fds{.wgz4q8s{--fds-internal-calendarDropdown-headerBottomSpacing:var(--fds-spacing-8);min-width:18.5rem;}}

package/cjs/timeline/timeline.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),r=require("../shared/accessibility/index.js"),n=require("../typography/index.js"),s=require("./timeline.style.js");exports.Timeline=({items:a,className:l,id:c,title:d,startCol:m,colSpan:o,"data-base-indicator-testid":u,"data-testid":p="timeline",headingLevel:h=2,counterOffset:x=0})=>{const j=e=>"string"==typeof e?i.jsx(n.Typography.BodyMD,{className:"timeline-item-content-text",children:e}):i.jsx(i.Fragment,{children:e}),g=(e,t)=>"string"==typeof e?i.jsx(s.TimelineItemTitle,{forwardedAs:"h3","aria-level":t,weight:"semibold",className:"timeline-item-title",children:e}):i.jsx(i.Fragment,{children:e}),v=i=>i.slice(0,2).map(((i,t)=>e.createElement(s.TimelinePill,Object.assign({},i,{type:i.type,key:`status-pill-${t}`,"data-testid":"status-pill",className:"timeline-status-pill"}),i.children))),y=(e,r)=>{switch(e){case"completed":return i.jsx(t.TickIcon,{"aria-hidden":!0});case"error":return i.jsx(t.ExclamationCircleFillIcon,{"aria-hidden":!0});case"numeric":return i.jsx("span",{"aria-hidden":!0,children:r+1+x});default:return null}},T=(e,i)=>{switch(e){case"current":return"Current step";case"completed":return"Completed step";case"upcoming-active":return"Upcoming active step";case"upcoming-inactive":return"Upcoming inactive step";case"disabled":return"Inactive step";case"error":return"Current step, action required";case"numeric":return`Step number ${i+1+x}`;default:return""}};return i.jsxs(s.TimelineWrapper,{className:l,id:c,"data-testid":p,$startCol:m,$colSpan:o,children:[i.jsx(s.TimelineTitle,{forwardedAs:"h2","aria-level":h,"data-testid":"timeline-title",weight:"bold",children:d}),i.jsx("div",{role:"list",children:a.map(((e,t)=>{const{title:n,content:a,statuses:l,variant:c}=e,d=u?`circleindicator${t+1}_div_${u}`:"circleindicator",m=c||(0===t?"current":"upcoming-active");return i.jsxs(s.TimelineItem,{role:"listitem",children:[i.jsxs(s.TimelineIndicators,{children:[i.jsxs(s.CircleIndicator,{"data-testid":d,$variant:m,children:[i.jsx(r.VisuallyHidden,{children:T(m,t)}),y(m,t)]}),i.jsx(s.LineIndicator,{$variant:m})]}),i.jsxs(s.TimelineItemContent,{className:"timeline-item-content",children:[g(n,h+1),l&&i.jsx(s.TimelinePills,{children:v(l)}),j(a)]})]},`timeline-item-${t}`)}))})]})};
+"use strict";var e=require("react"),t=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),r=require("clsx"),s=require("../pill/pill.js"),a=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var n=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var l=require("../typography/index.js"),c=require("./timeline.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(r);exports.Timeline=({items:r,className:d,id:m,title:o,startCol:p,colSpan:h,"data-base-indicator-testid":j,"data-testid":v="timeline",headingLevel:x=2,counterOffset:y=0})=>{const g=e.useRef(null);n.useApplyStyle(g,{[c.tokens.wrapper.startCol]:p,[c.tokens.wrapper.colSpan]:h});const q=e=>"string"==typeof e?t.jsx(l.Typography.BodyMD,{className:"timeline-item-content-text",children:e}):t.jsx(t.Fragment,{children:e}),f=(e,i)=>"string"==typeof e?t.jsx(l.Typography.HeadingXS,{as:"h3","aria-level":i,weight:"semibold",className:u.default(c.timelineItemTitle,"timeline-item-title"),children:e}):t.jsx(t.Fragment,{children:e}),N=t=>t.slice(0,2).map(((t,i)=>e.createElement(s.Pill,Object.assign({},t,{type:t.type,key:`status-pill-${i}`,"data-testid":"status-pill",className:"timeline-status-pill"}),t.children))),b=(e,r)=>{switch(e){case"completed":return t.jsx(i.TickIcon,{"aria-hidden":!0});case"error":return t.jsx(i.ExclamationCircleFillIcon,{"aria-hidden":!0});case"numeric":return t.jsx("span",{"aria-hidden":!0,children:r+1+y});default:return null}},I=(e,t)=>{switch(e){case"current":return"Current step";case"completed":return"Completed step";case"upcoming-active":return"Upcoming active step";case"upcoming-inactive":return"Upcoming inactive step";case"disabled":return"Inactive step";case"error":return"Current step, action required";case"numeric":return`Step number ${t+1+y}`;default:return""}};return t.jsxs("div",{ref:g,className:u.default(c.timelineWrapper,d),id:m,"data-testid":v,children:[t.jsx(l.Typography.HeadingSM,{as:"h2","aria-level":x,"data-testid":"timeline-title",weight:"bold",className:c.timelineTitle,children:o}),t.jsx("div",{role:"list",children:r.map(((e,i)=>{const{title:r,content:s,statuses:n,variant:l}=e,d=j?`circleindicator${i+1}_div_${j}`:"circleindicator",m=l||(0===i?"current":"upcoming-active");return t.jsxs("div",{role:"listitem",className:c.timelineItem,children:[t.jsxs("div",{className:c.timelineIndicators,children:[t.jsxs("div",{"data-testid":d,className:c.circleIndicator,"data-variant":m,children:[t.jsx(a.VisuallyHidden,{children:I(m,i)}),b(m,i)]}),t.jsx("div",{className:c.lineIndicator,"data-variant":m})]}),t.jsxs("div",{className:u.default(c.timelineItemContent,"timeline-item-content"),children:[f(r,x+1),n&&t.jsx("div",{className:c.timelinePills,children:N(n)}),q(s)]})]},`timeline-item-${i}`)}))})]})};
 //# sourceMappingURL=timeline.js.map

package/cjs/timeline/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sources":["../../../src/timeline/timeline.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon, TickIcon } from \"@lifesg/react-icons\";\n\nimport type { PillProps } from \"../pill\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport {\n    CircleIndicator,\n    LineIndicator,\n    TimelineIndicators,\n    TimelineItem,\n    TimelineItemContent,\n    TimelineItemTitle,\n    TimelinePill,\n    TimelinePills,\n    TimelineTitle,\n    TimelineWrapper,\n} from \"./timeline.style\";\nimport type { TimelineItemProps, TimelineProps, Variant } from \"./types\";\n\nexport const Timeline = ({\n    items,\n    className,\n    id,\n    title,\n    startCol,\n    colSpan,\n    \"data-base-indicator-testid\": baseIndicatorTestId,\n    \"data-testid\": testId = \"timeline\",\n    headingLevel = 2,\n    counterOffset = 0,\n}: TimelineProps): JSX.Element => {\n    // ===========================================================================\n    // RENDER\n    // ===========================================================================\n    const renderContent = (content: string | JSX.Element): JSX.Element => {\n        if (typeof content === \"string\") {\n            return (\n                <Typography.BodyMD className=\"timeline-item-content-text\">\n                    {content}\n                </Typography.BodyMD>\n            );\n        }\n\n        return <>{content}</>;\n    };\n\n    const renderTitle = (\n        title: string | JSX.Element,\n        level: number\n    ): JSX.Element => {\n        if (typeof title === \"string\") {\n            return (\n                <TimelineItemTitle\n                    forwardedAs=\"h3\"\n                    aria-level={level}\n                    weight=\"semibold\"\n                    className=\"timeline-item-title\"\n                >\n                    {title}\n                </TimelineItemTitle>\n            );\n        }\n\n        return <>{title}</>;\n    };\n\n    const renderStatusPills = (statuses: PillProps[]): JSX.Element[] => {\n        // maximum 2 pills allowed\n        const renderableStatuses = statuses.slice(0, 2);\n        return renderableStatuses.map((status: PillProps, index) => {\n            return (\n                <TimelinePill\n                    {...status}\n                    type={status.type}\n                    key={`status-pill-${index}`}\n                    data-testid=\"status-pill\"\n                    className=\"timeline-status-pill\"\n                >\n                    {status.children}\n                </TimelinePill>\n            );\n        });\n    };\n\n    const renderIcon = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"completed\":\n                return <TickIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"numeric\":\n                return <span aria-hidden>{index + 1 + counterOffset}</span>;\n            default:\n                return null;\n        }\n    };\n\n    const getStatus = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"current\":\n                return \"Current step\";\n            case \"completed\":\n                return \"Completed step\";\n            case \"upcoming-active\":\n                return \"Upcoming active step\";\n            case \"upcoming-inactive\":\n                return \"Upcoming inactive step\";\n            case \"disabled\":\n                return \"Inactive step\";\n            case \"error\":\n                return \"Current step, action required\";\n            case \"numeric\":\n                return `Step number ${index + 1 + counterOffset}`;\n            default:\n                return \"\";\n        }\n    };\n\n    const renderItems = () =>\n        items.map((item: TimelineItemProps, index) => {\n            const { title, content, statuses, variant: _variant } = item;\n            const circleIndicatorTestId = baseIndicatorTestId\n                ? `circleindicator${index + 1}_div_${baseIndicatorTestId}`\n                : \"circleindicator\";\n            const variant =\n                _variant || (index === 0 ? \"current\" : \"upcoming-active\");\n\n            return (\n                <TimelineItem key={`timeline-item-${index}`} role=\"listitem\">\n                    <TimelineIndicators>\n                        <CircleIndicator\n                            data-testid={circleIndicatorTestId}\n                            $variant={variant}\n                        >\n                            <VisuallyHidden>\n                                {getStatus(variant, index)}\n                            </VisuallyHidden>\n                            {renderIcon(variant, index)}\n                        </CircleIndicator>\n                        <LineIndicator $variant={variant} />\n                    </TimelineIndicators>\n                    <TimelineItemContent className=\"timeline-item-content\">\n                        {renderTitle(title, headingLevel + 1)}\n                        {statuses && (\n                            <TimelinePills>\n                                {renderStatusPills(statuses)}\n                            </TimelinePills>\n                        )}\n                        {renderContent(content)}\n                    </TimelineItemContent>\n                </TimelineItem>\n            );\n        });\n\n    return (\n        <TimelineWrapper\n            className={className}\n            id={id}\n            data-testid={testId}\n            $startCol={startCol}\n            $colSpan={colSpan}\n        >\n            <TimelineTitle\n                forwardedAs=\"h2\"\n                aria-level={headingLevel}\n                data-testid=\"timeline-title\"\n                weight=\"bold\"\n            >\n                {title}\n            </TimelineTitle>\n            <div role=\"list\">{renderItems()}</div>\n        </TimelineWrapper>\n    );\n};\n"],"names":["items","className","id","title","startCol","colSpan","baseIndicatorTestId","testId","headingLevel","counterOffset","renderContent","content","_jsx","Typography","BodyMD","children","_Fragment","renderTitle","level","TimelineItemTitle","forwardedAs","weight","renderStatusPills","statuses","slice","map","status","index","_createElement","TimelinePill","Object","assign","type","key","renderIcon","variant","TickIcon","ExclamationCircleFillIcon","getStatus","_jsxs","TimelineWrapper","$colSpan","TimelineTitle","role","item","_variant","circleIndicatorTestId","TimelineItem","TimelineIndicators","CircleIndicator","$variant","VisuallyHidden","LineIndicator","TimelineItemContent","TimelinePills"],"mappings":"wOAmBwB,EACpBA,QACAC,YACAC,KACAC,QACAC,WACAC,UACA,6BAA8BC,EAC9B,cAAeC,EAAS,WACxBC,eAAe,EACfC,gBAAgB,MAKhB,MAAMC,EAAiBC,GACI,iBAAZA,EAEHC,EAAAA,IAACC,EAAAA,WAAWC,OAAM,CAACb,UAAU,6BAA4Bc,SACpDJ,IAKNC,EAAAA,IAAAI,EAAAA,SAAA,CAAAD,SAAGJ,IAGRM,EAAc,CAChBd,EACAe,IAEqB,iBAAVf,EAEHS,EAAAA,IAACO,EAAAA,kBAAiB,CACdC,YAAY,kBACAF,EACZG,OAAO,WACPpB,UAAU,sBAAqBc,SAE9BZ,IAKNS,EAAAA,IAAAI,EAAAA,SAAA,CAAAD,SAAGZ,IAGRmB,EAAqBC,GAEIA,EAASC,MAAM,EAAG,GACnBC,KAAI,CAACC,EAAmBC,IAE1CC,EAAAA,cAACC,eAAYC,OAAAC,OAAA,GACLL,EAAM,CACVM,KAAMN,EAAOM,KACbC,IAAK,eAAeN,IAAO,cACf,cACZ1B,UAAU,yBAETyB,EAAOX,YAMlBmB,EAAa,CAACC,EAAkBR,KAClC,OAAQQ,GACJ,IAAK,YACD,OAAOvB,EAAAA,IAACwB,EAAAA,SAAQ,CAAA,eAAA,IACpB,IAAK,QACD,OAAOxB,EAAAA,IAACyB,EAAAA,0BAAyB,CAAA,eAAA,IACrC,IAAK,UACD,OAAOzB,EAAAA,sCAAmBe,EAAQ,EAAIlB,IAC1C,QACI,OAAO,OAIb6B,EAAY,CAACH,EAAkBR,KACjC,OAAQQ,GACJ,IAAK,UACD,MAAO,eACX,IAAK,YACD,MAAO,iBACX,IAAK,kBACD,MAAO,uBACX,IAAK,oBACD,MAAO,yBACX,IAAK,WACD,MAAO,gBACX,IAAK,QACD,MAAO,gCACX,IAAK,UACD,MAAO,eAAeR,EAAQ,EAAIlB,IACtC,QACI,MAAO,KAwCnB,OACI8B,EAAAA,KAACC,EAAAA,gBAAe,CACZvC,UAAWA,EACXC,GAAIA,EAAE,cACOK,YACFH,EAAQqC,SACTpC,EAAOU,SAAA,CAEjBH,EAAAA,IAAC8B,EAAAA,cAAa,CACVtB,YAAY,KAAI,aACJZ,gBACA,iBACZa,OAAO,gBAENlB,IAELS,EAAAA,IAAA,MAAA,CAAK+B,KAAK,OAAM5B,SAnDpBf,EAAMyB,KAAI,CAACmB,EAAyBjB,KAChC,MAAMxB,MAAEA,EAAKQ,QAAEA,EAAOY,SAAEA,EAAUY,QAASU,GAAaD,EAClDE,EAAwBxC,EACxB,kBAAkBqB,EAAQ,SAASrB,IACnC,kBACA6B,EACFU,IAAuB,IAAVlB,EAAc,UAAY,mBAE3C,OACIY,EAAAA,KAACQ,EAAAA,cAA4CJ,KAAK,WAAU5B,SAAA,CACxDwB,EAAAA,KAACS,EAAAA,mBAAkB,CAAAjC,SAAA,CACfwB,EAAAA,KAACU,EAAAA,gBAAe,CAAA,cACCH,EAAqBI,SACxBf,YAEVvB,EAAAA,IAACuC,EAAAA,eAAc,CAAApC,SACVuB,EAAUH,EAASR,KAEvBO,EAAWC,EAASR,MAEzBf,EAAAA,IAACwC,EAAAA,wBAAwBjB,OAE7BI,EAAAA,KAACc,sBAAmB,CAACpD,UAAU,kCAC1BgB,EAAYd,EAAOK,EAAe,GAClCe,GACGX,EAAAA,IAAC0C,EAAAA,cAAa,CAAAvC,SACTO,EAAkBC,KAG1Bb,EAAcC,QApBJ,iBAAiBgB,IAsBrB,QAqBL"}
+{"version":3,"file":"timeline.js","sources":["../../../src/timeline/timeline.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon, TickIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { PillProps } from \"../pill\";\nimport { Pill } from \"../pill\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./timeline.styles\";\nimport type { TimelineItemProps, TimelineProps, Variant } from \"./types\";\n\n// @catalog\n/**\n * A vertically ordered list of steps with visual state indicators.\n *\n * Use `Timeline` to communicate multi-step progress such as application stages\n * or process flows.\n * @keywords history, process, progress, stages, steps\n */\nexport const Timeline = ({\n    items,\n    className,\n    id,\n    title,\n    startCol,\n    colSpan,\n    \"data-base-indicator-testid\": baseIndicatorTestId,\n    \"data-testid\": testId = \"timeline\",\n    headingLevel = 2,\n    counterOffset = 0,\n}: TimelineProps): JSX.Element => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.wrapper.startCol]: startCol,\n        [styles.tokens.wrapper.colSpan]: colSpan,\n    });\n\n    // ===========================================================================\n    // RENDER\n    // ===========================================================================\n    const renderContent = (content: string | JSX.Element): JSX.Element => {\n        if (typeof content === \"string\") {\n            return (\n                <Typography.BodyMD className=\"timeline-item-content-text\">\n                    {content}\n                </Typography.BodyMD>\n            );\n        }\n\n        return <>{content}</>;\n    };\n\n    const renderTitle = (\n        title: string | JSX.Element,\n        level: number\n    ): JSX.Element => {\n        if (typeof title === \"string\") {\n            return (\n                <Typography.HeadingXS\n                    as=\"h3\"\n                    aria-level={level}\n                    weight=\"semibold\"\n                    className={clsx(\n                        styles.timelineItemTitle,\n                        \"timeline-item-title\"\n                    )}\n                >\n                    {title}\n                </Typography.HeadingXS>\n            );\n        }\n\n        return <>{title}</>;\n    };\n\n    const renderStatusPills = (statuses: PillProps[]): JSX.Element[] => {\n        // maximum 2 pills allowed\n        const renderableStatuses = statuses.slice(0, 2);\n        return renderableStatuses.map((status: PillProps, index) => {\n            return (\n                <Pill\n                    {...status}\n                    type={status.type}\n                    key={`status-pill-${index}`}\n                    data-testid=\"status-pill\"\n                    className=\"timeline-status-pill\"\n                >\n                    {status.children}\n                </Pill>\n            );\n        });\n    };\n\n    const renderIcon = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"completed\":\n                return <TickIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"numeric\":\n                return <span aria-hidden>{index + 1 + counterOffset}</span>;\n            default:\n                return null;\n        }\n    };\n\n    const getStatus = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"current\":\n                return \"Current step\";\n            case \"completed\":\n                return \"Completed step\";\n            case \"upcoming-active\":\n                return \"Upcoming active step\";\n            case \"upcoming-inactive\":\n                return \"Upcoming inactive step\";\n            case \"disabled\":\n                return \"Inactive step\";\n            case \"error\":\n                return \"Current step, action required\";\n            case \"numeric\":\n                return `Step number ${index + 1 + counterOffset}`;\n            default:\n                return \"\";\n        }\n    };\n\n    const renderItems = () =>\n        items.map((item: TimelineItemProps, index) => {\n            const { title, content, statuses, variant: _variant } = item;\n            const circleIndicatorTestId = baseIndicatorTestId\n                ? `circleindicator${index + 1}_div_${baseIndicatorTestId}`\n                : \"circleindicator\";\n            const variant =\n                _variant || (index === 0 ? \"current\" : \"upcoming-active\");\n\n            return (\n                <div\n                    key={`timeline-item-${index}`}\n                    role=\"listitem\"\n                    className={styles.timelineItem}\n                >\n                    <div className={styles.timelineIndicators}>\n                        <div\n                            data-testid={circleIndicatorTestId}\n                            className={styles.circleIndicator}\n                            data-variant={variant}\n                        >\n                            <VisuallyHidden>\n                                {getStatus(variant, index)}\n                            </VisuallyHidden>\n                            {renderIcon(variant, index)}\n                        </div>\n                        <div\n                            className={styles.lineIndicator}\n                            data-variant={variant}\n                        />\n                    </div>\n                    <div\n                        className={clsx(\n                            styles.timelineItemContent,\n                            \"timeline-item-content\"\n                        )}\n                    >\n                        {renderTitle(title, headingLevel + 1)}\n                        {statuses && (\n                            <div className={styles.timelinePills}>\n                                {renderStatusPills(statuses)}\n                            </div>\n                        )}\n                        {renderContent(content)}\n                    </div>\n                </div>\n            );\n        });\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.timelineWrapper, className)}\n            id={id}\n            data-testid={testId}\n        >\n            <Typography.HeadingSM\n                as=\"h2\"\n                aria-level={headingLevel}\n                data-testid=\"timeline-title\"\n                weight=\"bold\"\n                className={styles.timelineTitle}\n            >\n                {title}\n            </Typography.HeadingSM>\n            <div role=\"list\">{renderItems()}</div>\n        </div>\n    );\n};\n"],"names":["items","className","id","title","startCol","colSpan","baseIndicatorTestId","testId","headingLevel","counterOffset","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","renderContent","content","_jsx","Typography","BodyMD","children","_Fragment","renderTitle","level","HeadingXS","as","weight","clsx","styles.timelineItemTitle","renderStatusPills","statuses","slice","map","status","index","_createElement","Pill","Object","assign","type","key","renderIcon","variant","TickIcon","ExclamationCircleFillIcon","getStatus","_jsxs","ref","styles.timelineWrapper","HeadingSM","styles.timelineTitle","role","item","_variant","circleIndicatorTestId","styles.timelineItem","styles.timelineIndicators","styles.circleIndicator","VisuallyHidden","styles.lineIndicator","styles.timelineItemContent","styles.timelinePills"],"mappings":"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"}

package/cjs/timeline/timeline.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./timeline.styles_1jxzik4.css");exports.circleIndicator="c1epf9wu",exports.lineIndicator="l1ff2pyq",exports.timelineIndicators="t1qzwom7",exports.timelineItem="t1d2q33u",exports.timelineItemContent="tvlbvjk",exports.timelineItemTitle="t1qpo82v",exports.timelinePills="t1afag3x",exports.timelineTitle="tfsmff8",exports.timelineWrapper="tuaspcp",exports.tokens={wrapper:{startCol:"--fds-internal-timeline-wrapper-startCol",colSpan:"--fds-internal-timeline-wrapper-colSpan"}};
+//# sourceMappingURL=timeline.styles.js.map

package/cjs/timeline/timeline.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.styles.js","sources":["../../../src/timeline/timeline.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\n\n// =============================================================================\n// TOKENS\n// =============================================================================\nexport const tokens = {\n    wrapper: {\n        startCol: \"--fds-internal-timeline-wrapper-startCol\",\n        colSpan: \"--fds-internal-timeline-wrapper-colSpan\",\n    },\n} as const;\n\nexport const circleIndicator = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1.5rem;\n    height: 1.5rem;\n    border-radius: 100%;\n\n    &[data-variant=\"current\"] {\n        background-color: ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    &[data-variant=\"upcoming-active\"] {\n        border: 4px solid ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    &[data-variant=\"upcoming-inactive\"] {\n        border: 4px solid ${Colour[\"icon-subtle\"]};\n    }\n\n    &[data-variant=\"disabled\"] {\n        background-color: ${Colour[\"icon-disabled-subtle\"]};\n    }\n\n    &[data-variant=\"completed\"] {\n        background-color: ${Colour[\"icon-success\"]};\n\n        svg {\n            color: ${Colour[\"icon-inverse\"]};\n        }\n    }\n\n    &[data-variant=\"numeric\"] {\n        background-color: ${Colour[\"icon-info\"]};\n        color: ${Colour[\"text-inverse\"]};\n        ${Font[\"body-sm-bold\"]}\n    }\n\n    &[data-variant=\"error\"] {\n        width: 1.8rem;\n        height: 1.8rem;\n        margin: -0.15rem 0 -0.15rem -0.15rem;\n\n        svg {\n            color: ${Colour[\"icon-error\"]};\n            height: 100%;\n            width: 100%;\n        }\n    }\n`;\n\nexport const lineIndicator = css`\n    width: 4px;\n    flex-grow: 1;\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n    border-radius: ${Radius[\"full\"]};\n\n    &[data-variant=\"completed\"] {\n        background-color: ${Colour[\"icon-success\"]};\n    }\n\n    &[data-variant=\"current\"],\n    &[data-variant=\"upcoming-active\"] {\n        background-color: ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    &[data-variant=\"upcoming-inactive\"] {\n        background-color: ${Colour[\"icon-subtle\"]};\n    }\n\n    &[data-variant=\"disabled\"] {\n        background-color: ${Colour[\"icon-disabled-subtle\"]};\n    }\n\n    &[data-variant=\"numeric\"] {\n        background-color: ${Colour[\"icon-info\"]};\n    }\n\n    &[data-variant=\"error\"] {\n        margin-left: -0.15rem;\n        background-color: ${Colour[\"icon-error\"]};\n    }\n`;\n\nexport const timelineIndicators = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-right: 1rem;\n`;\n\nexport const timelineWrapper = css`\n    ${tokens.wrapper.startCol}: initial;\n    ${tokens.wrapper.colSpan}: initial;\n    grid-column: var(${tokens.wrapper.startCol}, 3) / span\n        var(${tokens.wrapper.colSpan}, 8);\n\n    ${MediaQuery.MaxWidth.lg} {\n        grid-column: span 8;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        grid-column: span 8;\n    }\n`;\n\nexport const timelineTitle = css`\n    margin-bottom: 1rem;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-bottom: 1.5rem;\n    }\n`;\n\nexport const timelineItemTitle = css`\n    margin-top: -0.125rem;\n    margin-bottom: 0.5rem;\n`;\n\n// default is 2-8-2 on desktop\nexport const timelineItem = css`\n    display: flex;\n\n    &:last-of-type .${lineIndicator} {\n        margin-bottom: 0;\n    }\n`;\n\nexport const timelineItemContent = css`\n    margin-bottom: 2rem;\n    width: 100%;\n`;\n\nexport const timelinePills = css`\n    display: flex;\n    flex-wrap: wrap;\n    margin-bottom: 0.5rem;\n    gap: 0.5rem;\n`;\n"],"names":["wrapper","startCol","colSpan"],"mappings":"sGAc4B,iCAmDF,sCAkCK,gCAoCN,uCAQO,oCAdF,iCAmBJ,iCA3BA,kCAfE,yBAnGN,CAClBA,QAAS,CACLC,SAAU,2CACVC,QAAS"}

package/cjs/timeline/timeline.styles_1jxzik4.css

@@ -0,0 +1,9 @@
+@layer fds{.c1epf9wu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:1.5rem;height:1.5rem;border-radius:100%;}.c1epf9wu[data-variant="current"]{background-color:var(--fds-colour-icon-primary-subtle);}.c1epf9wu[data-variant="upcoming-active"]{border:4px solid var(--fds-colour-icon-primary-subtle);}.c1epf9wu[data-variant="upcoming-inactive"]{border:4px solid var(--fds-colour-icon-subtle);}.c1epf9wu[data-variant="disabled"]{background-color:var(--fds-colour-icon-disabled-subtle);}.c1epf9wu[data-variant="completed"]{background-color:var(--fds-colour-icon-success);}.c1epf9wu[data-variant="completed"] svg{color:var(--fds-colour-icon-inverse);}.c1epf9wu[data-variant="numeric"]{background-color:var(--fds-colour-icon-info);color:var(--fds-colour-text-inverse);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}.c1epf9wu[data-variant="error"]{width:1.8rem;height:1.8rem;margin:-0.15rem 0 -0.15rem -0.15rem;}.c1epf9wu[data-variant="error"] svg{color:var(--fds-colour-icon-error);height:100%;width:100%;}
+.l1ff2pyq{width:4px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin-top:0.5rem;margin-bottom:0.5rem;border-radius:var(--fds-radius-full);}.l1ff2pyq[data-variant="completed"]{background-color:var(--fds-colour-icon-success);}.l1ff2pyq[data-variant="current"],.l1ff2pyq[data-variant="upcoming-active"]{background-color:var(--fds-colour-icon-primary-subtle);}.l1ff2pyq[data-variant="upcoming-inactive"]{background-color:var(--fds-colour-icon-subtle);}.l1ff2pyq[data-variant="disabled"]{background-color:var(--fds-colour-icon-disabled-subtle);}.l1ff2pyq[data-variant="numeric"]{background-color:var(--fds-colour-icon-info);}.l1ff2pyq[data-variant="error"]{margin-left:-0.15rem;background-color:var(--fds-colour-icon-error);}
+.t1qzwom7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:1rem;}
+.tuaspcp{--fds-internal-timeline-wrapper-startCol:initial;--fds-internal-timeline-wrapper-colSpan:initial;grid-column:var(--fds-internal-timeline-wrapper-startCol, 3)/span var(--fds-internal-timeline-wrapper-colSpan, 8);}:where(body.fds-breakpoint-lg-max) .tuaspcp{grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .tuaspcp{grid-column:span 8;}
+.tfsmff8{margin-bottom:1rem;}:where(body.fds-breakpoint-lg-max) .tfsmff8{margin-bottom:1.5rem;}
+.t1qpo82v{margin-top:-0.125rem;margin-bottom:0.5rem;}
+.t1d2q33u{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.t1d2q33u:last-of-type .l1ff2pyq{margin-bottom:0;}
+.tvlbvjk{margin-bottom:2rem;width:100%;}
+.t1afag3x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0.5rem;gap:0.5rem;}}

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