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

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-bar-week-days.styles.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week-days.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Radius, Spacing } from \"../theme\";\n\nexport const tokens = {\n    timeColumn: {\n        height: \"--fds-internal-timeSlotBarWeek-timeColumn-height\",\n    },\n    timeSlot: {\n        height: \"--fds-internal-timeSlotBarWeek-timeSlotComponent-height\",\n    },\n};\n\nexport const headerCellWeek = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    user-select: none;\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n    flex: 1;\n`;\n\nexport const cellWeekTextDisabled = css`\n    color: ${Colour[\"text-disabled-subtlest\"]};\n`;\n\nexport const headerCellWeekColumn = css`\n    grid-column: 2 / -1;\n    display: flex;\n`;\n\nexport const wrapper = css`\n    width: 100%;\n`;\n\nexport const gridWrapper = css`\n    width: 100%;\n    display: grid;\n    grid-template-columns: auto repeat(7, 1fr);\n    column-gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const expandable = css`\n    grid-column: 2 / -1;\n    overflow: hidden;\n`;\n\nexport const columnWeekCell = css`\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    overflow: hidden;\n`;\n\nexport const timeColumn = css`\n    ${tokens.timeColumn.height}: initial;\n    display: flex;\n    flex-direction: column;\n    grid-row: 3 / auto;\n    gap: ${Spacing[\"spacing-4\"]};\n    width: 1.375rem;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    overflow: hidden;\n    height: var(${tokens.timeColumn.height});\n`;\n\nexport const timeColumnWrapper = css`\n    min-height: 60px;\n\n    &:last-child {\n        min-height: 0;\n    }\n`;\n\nexport const timeColumnText = css`\n    ${Font[\"body-xs-bold\"]}\n    color: ${Colour[\"text-subtler\"]};\n    text-align: center;\n    line-height: 12px; // align with cell on the same row\n\n    &:first-line {\n        font-size: ${Font.Spec[\"body-size-sm\"]};\n    }\n`;\n\nexport const timeSlotWrapper = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const collapseExpandAllWrapper = css`\n    display: flex;\n    margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const collapseExpandAllButton = css`\n    width: 100%;\n    height: 2.5rem;\n`;\n\nexport const collapseExpandAllButtonContent = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const chevronIcon = css`\n    transform: rotate(180deg);\n    transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const chevronIconExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const timeSlotComponent = css`\n    ${tokens.timeSlot.height}: initial;\n    flex-grow: 1;\n    max-width: 200px;\n    height: var(${tokens.timeSlot.height});\n    min-height: var(${tokens.timeSlot.height});\n    border-radius: ${Radius.xs};\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 1px;\n    }\n`;\n"],"names":["tokens","timeColumn","height","timeSlot","headerCellWeek","cellWeekTextDisabled","headerCellWeekColumn","wrapper","gridWrapper","expandable","columnWeekCell","timeColumnWrapper","timeColumnText","timeSlotWrapper","collapseExpandAllWrapper","collapseExpandAllButton","collapseExpandAllButtonContent","chevronIcon","chevronIconExpanded","timeSlotComponent"],"mappings":"sFAIO,MAAMA,EAAS,CAClBC,WAAY,CACRC,OAAQ,oDAEZC,SAAU,CACND,OAAQ,4DAIHE,EAAc,WAUdC,EAAoB,UAIpBC,EAAoB,UAKpBC,EAAO,WAIPC,EAAW,WAOXC,EAAU,UAKVC,EAAc,UAOdT,EAAU,WAYVU,EAAiB,UAQjBC,EAAc,WAWdC,EAAe,WAOfC,EAAwB,UAKxBC,EAAuB,UAKvBC,EAA8B,WAM9BC,EAAW,UAKXC,EAAmB,UAInBC,EAAiB"}

package/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/time-slot-bar-week/time-slot-bar-week.js

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

package/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                isFocusable={true}\n            >\n                {({ calendarDate }) => {\n                    return renderTimeSlotWeekDays(calendarDate);\n                }}\n            </CalendarManager>\n        </Wrapper>\n    );\n};\n"],"names":["DATE_FORMAT","TimeSlotBarWeek","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Wrapper","Object","assign","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","isFocusable","TimeSlotBarWeekDays","onSelect","renderTimeSlotWeekDays"],"mappings":"glBAYA,MAAMA,EAAc,aAEPC,EAAmBC,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,EAAAlB,EAjBe,uOAsB5B,MAAOmB,EAAcC,GAAmBC,EAA6BjB,GAC/DkB,EAAqBC,EAA2B,MAChDC,EAAuBD,OAA0BE,GAKvDC,GAAU,KACNN,EAAgBhB,EAAM,GACvB,CAACA,IAMJ,MAAMuB,EAAoBvB,IACtB,MAAMwB,EAAcxB,EAAMyB,OAAO/B,GACjCsB,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,OAAO/B,GAC7CwC,cAAelC,EAAMmC,MAAM,QAAQV,OAAO/B,IAE9C0C,MAAOpC,EAAMoC,QAAU,EACvBC,KAAMrC,EAAMqC,QAGhBvC,EAAoBgC,EACxB,GAiCJ,OACIQ,EAACC,EAAOC,OAAAC,OAAA,GAAK5B,EAAU,CAAA6B,SACnBJ,EAACK,EAAe,CACZC,IAAK1B,EACL2B,eAAa,EACbC,oBAlCDC,EAAWC,QAAQjC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO/B,GAiCJuD,kBAAmBlC,EACnBmC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBvD,GACFwD,EAAMD,GACDJ,SAAS,EAAG,QACZM,SAASzD,EAAS,QAE3B0D,qBAAuBH,KACjBtD,GACFuD,EAAMD,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,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,OAE7CwC,mBAAqBT,GACjBC,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,QAE7CyC,aAAa,EAAIxB,SAEhB,EAAGc,kBApDe,CAACA,GAExBlB,EAAC6B,EAAmB,CAChBX,aAAcA,EACd3D,cAAeA,EACfkB,aAAcA,EACdd,QAASA,EACTC,QAASA,EACTC,UAAWA,EACXC,QAASA,EACTgE,SAAU7C,EACVlB,MAAOA,EACPC,SAAUA,EACVC,QAASA,EACTC,qBAAsBA,EACtBE,gBAAiBA,EACjBC,YAAae,IAqCF2C,CAAuBb,OAGhC"}
+{"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\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","TimeSlotBarWeek","_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":"ilBAYA,MAAMA,EAAc,aAEPC,EAAmBC,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,EAAAlB,EAjBe,uOAsB5B,MAAOmB,EAAcC,GAAmBC,EAA6BjB,GAC/DkB,EAAqBC,EAA2B,MAChDC,EAAuBD,OAA0BE,GAKvDC,GAAU,KACNN,EAAgBhB,EAAM,GACvB,CAACA,IAMJ,MAAMuB,EAAoBvB,IACtB,MAAMwB,EAAcxB,EAAMyB,OAAO/B,GACjCsB,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,OAAO/B,GAC7CwC,cAAelC,EAAMmC,MAAM,QAAQV,OAAO/B,IAE9C0C,MAAOpC,EAAMoC,QAAU,EACvBC,KAAMrC,EAAMqC,QAGhBvC,EAAoBgC,EACxB,GAiCJ,OACIQ,EAAA,MAAAC,OAAAC,OAAA,CAAKC,UAAWC,GAAoB7B,EAAU,CAAA8B,SAC1CL,EAACM,EAAe,CACZC,IAAK3B,EACL4B,eAAa,EACbC,oBAlCDC,EAAWC,QAAQlC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO/B,GAiCJwD,kBAAmBnC,EACnBoC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBxD,GACFyD,EAAMD,GACDJ,SAAS,EAAG,QACZM,SAAS1D,EAAS,QAE3B2D,qBAAuBH,KACjBvD,GACFwD,EAAMD,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,EAAMD,GAActB,MAAM,QAAQV,OAAO,OAE7CyC,mBAAqBT,GACjBC,EAAMD,GAActB,MAAM,QAAQV,OAAO,QAE7C0C,aAAa,EAAIxB,SAEhB,EAAGc,kBApDe,CAACA,GAExBnB,EAAC8B,EAAmB,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/time-slot-bar-week/time-slot-bar-week.styles.d.ts

@@ -0,0 +1 @@
+export declare const wrapper: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./time-slot-bar-week.styles_11ybf42.css";const t="w1qkct16";export{t as wrapper};
+//# sourceMappingURL=time-slot-bar-week.styles.js.map

package/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":["wrapper"],"mappings":"kFAKO,MAAMA,EAAO"}

package/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/time-slot-bar-week/time-slot-cell.d.ts

@@ -0,0 +1,28 @@
+import type React from "react";
+import type { TimeSlot } from "../time-slot-bar/types";
+import type { TimeSlotCellsVariant } from "./types";
+export interface TimeSlotCell extends TimeSlot {
+    cellLength: number;
+    halfFill?: "default" | "top" | "bottom" | undefined;
+    isActualSlot?: boolean | undefined;
+    rowIndex?: number | undefined;
+}
+export interface FocusableSlotMeta {
+    key: string;
+    date: string;
+    rowIndex: number;
+}
+export interface WeekTimeSlotCellProps {
+    formattedDate: string;
+    slot: TimeSlotCell;
+    variant: TimeSlotCellsVariant;
+    hasCollapsedContent: boolean;
+    expandAll: boolean;
+    visibleRowCount: number;
+    onSlotClick: (date: string, slot: TimeSlot) => void;
+    getSlotAriaLabel: (date: string, slot: TimeSlot) => string;
+    onSlotKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>, meta: FocusableSlotMeta) => void;
+    onSlotButtonClick: (date: string, slot: TimeSlot) => (event: React.MouseEvent<HTMLButtonElement>) => void;
+    slotButtonRefs: React.MutableRefObject<Record<string, HTMLButtonElement | null>>;
+}
+export declare const WeekTimeSlotCell: ({ formattedDate, slot, variant, hasCollapsedContent, expandAll, visibleRowCount, onSlotClick, getSlotAriaLabel, onSlotKeyDown, onSlotButtonClick, slotButtonRefs, }: WeekTimeSlotCellProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/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":["WeekTimeSlotCell","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":"8uBA8CO,MAAMA,EAAmB,EAC5BC,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,GAAeV,EAAa,GAAKW,EAC9CD,EAEJE,EAAUC,EAAuB,MAKvC,OAJAC,EAAcF,EAAS,CACnB,CAACG,EAAcC,SAASC,QAASC,EAAgBT,EAAY,QAI7DU,EAACC,EAAiB,CACdC,IAAKT,EACLV,UAAWA,EACXoB,QAASnB,EACToB,SAAUnB,EACVP,UAAWA,EACX2B,KAAMvB,EACNwB,UAAWC,EACXC,QAAS,IAAM9B,GAAaN,EAAYN,EAAeC,GAAK0C,SAE3D9B,GACGqB,EAACU,EAAc,CAACC,MAAOC,EAAWzB,YAC9Ba,EAAA,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/time-slot-week-view/time-slot-week-days.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import t from"../external/dayjs/dayjs.min.js";import o from"../external/dayjs/plugin/isBetween.js";import{useMemo as l,useState as a,useRef as i}from"react";import{VisuallyHidden as n,concatIds as c}from"../shared/accessibility/index.js";import{DayCell as s}from"../shared/internal-calendar/day-cell/day-cell.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as d}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{CalendarHelper as m}from"../util/calendar-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import{TimeHelper as u}from"../util/time-helper.js";import{Wrapper as p,HeaderRow as b,HeaderCellWeek as h,DayLabel as v,ColumnWeekCell as y,TimeSlotWrapper as f,TimeSlotComponent as k,TimeSlotText as g}from"./time-slot-week-days.style.js";t.extend(o);const j="YYYY-MM-DD",D={id:"1",startTime:"",endTime:"",clickable:!1,styleAttributes:{color:"",styleType:"stripes",backgroundColor:d["bg-stronger"],backgroundColor2:d["bg-strongest"]}},T=({calendarDate:o,disabledDates:d,selectedDate:T,onSelect:w,minDate:x,maxDate:C,slots:$,enableSelection:Y=!0,onSlotClick:A})=>{const M=l((()=>m.generateDaysForCurrentWeek(o)),[o]),[R,H]=a(),S=i({}),F=(e,r)=>{null==A||A(e,r)},I=(e,r)=>t=>{var o;t.stopPropagation(),(null===(o=r.clickable)||void 0===o||o)&&F(e,r)},L=e=>{H(e)},P=()=>{H(void 0)},U=e=>{const r=e.format(j),o=(e=>{const r=m.isWithinRange(e,x?t(x):void 0,C?t(C):void 0),o=!!d&&d.includes(e.format(j));return!r||o})(e),l=Y&&!o,a=l&&R&&e.isSame(R,"day"),i=[T].includes(r),n={labelType:"available",interactive:!!Y&&l};return o&&(n.disabled=!0,n.labelType="unavailable"),i&&a?(n.labelType="selected-hover",n.circleLeft="selected-hover-outline",n.circleRight="selected-hover-outline"):i?(n.labelType="selected",n.circleLeft="selected-outline",n.circleRight="selected-outline"):a&&(n.labelType="hover",n.circleLeft="hover-subtle",n.circleRight="hover-subtle"),n},q=(e,r)=>{const t=(o=r.date,(null!==(l=null==$?void 0:$[o])&&void 0!==l?l:[]).map(((e,r)=>({key:`${o}-${e.id}`,date:o,rowIndex:r}))));var o,l;const a=e=>{var r;e&&(null===(r=S.current[e.key])||void 0===r||r.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const o=t.findIndex((e=>e.key===r.key));a(t[o+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const o=t.findIndex((e=>e.key===r.key));a(t[o-1]);break}case"Home":case"PageUp":e.preventDefault(),a(t[0]);break;case"End":case"PageDown":e.preventDefault(),a(t[t.length-1])}},B=(e,r)=>{var o;const{startTime:l,endTime:a}=r;return c(t(e).format("D MMMM YYYY dddd"),l&&a?u.formatTimeRange(l,a):void 0,r.label,null===(o=r.clickable)||void 0===o||o?"Available":"Unavailable")};return e(p,{role:"grid",children:[r(b,{role:"row",onBlur:P,children:M.map(((o,l)=>{const a=U(o);return e(h,{role:"presentation",children:[r(s,Object.assign({date:o,calendarDate:t(T),onSelect:()=>{((e,r)=>{!r&&Y&&w(e)})(o,!a.interactive)},onHover:L,onHoverEnd:P,onFocus:L,role:"columnheader",tabIndex:a.interactive?0:-1},a),`day-${l}`),r(v,{"aria-hidden":!0,$disabled:a.disabled,children:t(o).format("ddd")})]},`week-day-${l}`)}))}),r(y,{role:"row",children:M.map(((t,o)=>{var l;const a=t.format(j),i=null!==(l=null==$?void 0:$[a])&&void 0!==l?l:[D];return r(f,{role:"gridcell",children:i&&i.map(((t,o)=>{const{id:l,startTime:i,endTime:c,clickable:s=!0,styleAttributes:d}=t,{color:u,styleType:p="default",backgroundColor:b,backgroundColor2:h}=d,v=`${a}-${l}`,y=t!==D;return e(k,{styleType:p,bgColor:b,bgColor2:h,clickable:s,onClick:()=>s&&F(a,t),children:[e(g,{style:{color:u},children:[r("span",{children:m.convertTo12HourFormat(i)}),c&&i&&r("span",{children:"-"}),r("span",{children:m.convertTo12HourFormat(c)})]}),y&&r(n,{children:r("button",{type:"button",ref:e=>{S.current[v]=e},"aria-disabled":!s,"aria-label":B(a,t),onKeyDown:e=>q(e,{key:v,date:a}),onClick:I(a,t)})})]},l)}))},`wrapper-${o}`)}))},`week-cell-${o.format(j)}`)]})};export{T as TimeSlotWeekDays};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import t from"clsx";import l from"../external/dayjs/dayjs.min.js";import o from"../external/dayjs/plugin/isBetween.js";import{useMemo as a,useState as i,useRef as n}from"react";import{VisuallyHidden as s,concatIds as c}from"../shared/accessibility/index.js";import{DayCell as d}from"../shared/internal-calendar/day-cell/day-cell.js";import{TimeSlot as m}from"../shared/time-slot/time-slot.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as u}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as p}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{CalendarHelper as v}from"../util/calendar-helper.js";import{TimeHelper as h}from"../util/time-helper.js";import{wrapper as b,headerRow as y,headerCellWeek as f,dayLabel as k,dayLabelDisabled as g,columnWeekCell as j,timeSlotWrapper as T,timeSlotComponent as D,tokens as w,timeSlotText as x}from"./time-slot-week-days.styles.js";l.extend(o);const C="YYYY-MM-DD",N={id:"1",startTime:"",endTime:"",clickable:!1,styleAttributes:{color:"",styleType:"stripes",backgroundColor:u["bg-stronger"],backgroundColor2:u["bg-strongest"]}},Y=({color:e,children:t})=>{const l=n(null);return p(l,{[w.timeSlotText.color]:e}),r("div",{ref:l,className:x,children:t})},$=({calendarDate:o,disabledDates:u,selectedDate:p,onSelect:w,minDate:x,maxDate:$,slots:A,enableSelection:M=!0,onSlotClick:R})=>{const S=a((()=>v.generateDaysForCurrentWeek(o)),[o]),[H,F]=i(),I=n({}),L=(e,r)=>{null==R||R(e,r)},P=(e,r)=>t=>{var l;t.stopPropagation(),(null===(l=r.clickable)||void 0===l||l)&&L(e,r)},U=e=>{F(e)},q=()=>{F(void 0)},B=e=>{const r=e.format(C),t=(e=>{const r=v.isWithinRange(e,x?l(x):void 0,$?l($):void 0),t=!!u&&u.includes(e.format(C));return!r||t})(e),o=M&&!t,a=o&&H&&e.isSame(H,"day"),i=[p].includes(r),n={labelType:"available",interactive:!!M&&o};return t&&(n.disabled=!0,n.labelType="unavailable"),i&&a?(n.labelType="selected-hover",n.circleLeft="selected-hover-outline",n.circleRight="selected-hover-outline"):i?(n.labelType="selected",n.circleLeft="selected-outline",n.circleRight="selected-outline"):a&&(n.labelType="hover",n.circleLeft="hover-subtle",n.circleRight="hover-subtle"),n},E=(e,r)=>{const t=(l=r.date,(null!==(o=null==A?void 0:A[l])&&void 0!==o?o:[]).map(((e,r)=>({key:`${l}-${e.id}`,date:l,rowIndex:r}))));var l,o;const a=e=>{var r;e&&(null===(r=I.current[e.key])||void 0===r||r.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const l=t.findIndex((e=>e.key===r.key));a(t[l+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const l=t.findIndex((e=>e.key===r.key));a(t[l-1]);break}case"Home":case"PageUp":e.preventDefault(),a(t[0]);break;case"End":case"PageDown":e.preventDefault(),a(t[t.length-1])}},W=(e,r)=>{var t;const{startTime:o,endTime:a}=r;return c(l(e).format("D MMMM YYYY dddd"),o&&a?h.formatTimeRange(o,a):void 0,r.label,null===(t=r.clickable)||void 0===t||t?"Available":"Unavailable")};return e("div",{className:b,role:"grid",children:[r("div",{className:y,role:"row",onBlur:q,children:S.map(((o,a)=>{const i=B(o);return e("div",{className:f,role:"presentation",children:[r(d,Object.assign({date:o,calendarDate:l(p),onSelect:()=>{((e,r)=>{!r&&M&&w(e)})(o,!i.interactive)},onHover:U,onHoverEnd:q,onFocus:U,role:"columnheader",tabIndex:i.interactive?0:-1},i),`day-${a}`),r("div",{"aria-hidden":!0,className:t(k,i.disabled&&g),children:l(o).format("ddd")})]},`week-day-${a}`)}))}),r("div",{className:j,role:"row",children:S.map(((t,l)=>{var o;const a=t.format(C),i=null!==(o=null==A?void 0:A[a])&&void 0!==o?o:[N];return r("div",{className:T,role:"gridcell",children:i&&i.map(((t,l)=>{const{id:o,startTime:i,endTime:n,clickable:c=!0,styleAttributes:d}=t,{color:u,styleType:p="default",backgroundColor:h,backgroundColor2:b}=d,y=`${a}-${o}`,f=t!==N;return e(m,{className:D,styleType:p,bgColor:h,bgColor2:b,clickable:c,onClick:()=>c&&L(a,t),children:[e(Y,{color:u,children:[r("span",{children:v.convertTo12HourFormat(i)}),n&&i&&r("span",{children:"-"}),r("span",{children:v.convertTo12HourFormat(n)})]}),f&&r(s,{children:r("button",{type:"button",ref:e=>{I.current[y]=e},"aria-disabled":!c,"aria-label":W(a,t),onKeyDown:e=>E(e,{key:y,date:a}),onClick:P(a,t)})})]},o)}))},`wrapper-${l}`)}))},`week-cell-${o.format(C)}`)]})};export{$ as TimeSlotWeekDays};
 //# sourceMappingURL=time-slot-week-days.js.map

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

@@ -0,0 +1,14 @@
+export declare const tokens: {
+    timeSlotText: {
+        color: string;
+    };
+};
+export declare const headerCellWeek: import("@linaria/core").LinariaClassName;
+export declare const headerRow: import("@linaria/core").LinariaClassName;
+export declare const dayLabel: import("@linaria/core").LinariaClassName;
+export declare const dayLabelDisabled: import("@linaria/core").LinariaClassName;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const columnWeekCell: import("@linaria/core").LinariaClassName;
+export declare const timeSlotText: import("@linaria/core").LinariaClassName;
+export declare const timeSlotComponent: import("@linaria/core").LinariaClassName;
+export declare const timeSlotWrapper: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./time-slot-week-days.styles_1h21vyw.css";const e={timeSlotText:{color:"--fds-internal-timeSlotWeekDays-timeSlotText-color"}},t="h1u5a4vg",o="hi684jn",i="d4p8eye",l="dl9xaeu",s="w1jgoij2",y="c1fvren",c="tiecbfv",m="t1nixg7y",n="t17yohj6";export{y as columnWeekCell,i as dayLabel,l as dayLabelDisabled,t as headerCellWeek,o as headerRow,m as timeSlotComponent,c as timeSlotText,n as timeSlotWrapper,e as tokens,s as wrapper};
+//# sourceMappingURL=time-slot-week-days.styles.js.map

package/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":["tokens","timeSlotText","color","headerCellWeek","headerRow","dayLabel","dayLabelDisabled","wrapper","columnWeekCell","timeSlotComponent","timeSlotWrapper"],"mappings":"oFAOO,MAAMA,EAAS,CAClBC,aAAc,CACVC,MAAO,uDAOFC,EAAc,WASdC,EAAS,UAMTC,EAAQ,UAKRC,EAAgB,UAIhBC,EAAO,WAMPC,EAAc,UAMdP,EAAY,UAaZQ,EAAiB,WAejBC,EAAe"}

package/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/time-slot-week-view/time-slot-week-view.js

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

package/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                isFocusable={true}\n            >\n                {({ calendarDate }) => {\n                    return (\n                        <TimeSlotWeekDays\n                            calendarDate={calendarDate}\n                            disabledDates={disabledDates}\n                            selectedDate={selectedDate}\n                            minDate={minDate}\n                            maxDate={maxDate}\n                            onSelect={handleDateSelect}\n                            slots={slots}\n                            enableSelection={enableSelection}\n                            onSlotClick={handleOnSlotClick}\n                        />\n                    );\n                }}\n            </CalendarManager>\n        </Wrapper>\n    );\n};\n"],"names":["DATE_FORMAT","TimeSlotWeekView","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Wrapper","Object","assign","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","isFocusable","TimeSlotWeekDays","onSelect"],"mappings":"2kBAYA,MAAMA,EAAc,aAEPC,EAAoBC,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,EAAAb,EAZgB,CAAA,gBAAA,sBAAA,WAAA,QAAA,UAAA,UAAA,QAAA,uBAAA,kBAAA,cAAA,wBAiB7B,MAAOc,EAAcC,GAAmBC,EAA6BZ,GAC/Da,EAAqBC,EAA2B,MAChDC,EAAuBD,OAA0BE,GAKvDC,GAAU,KACNN,EAAgBX,EAAM,GACvB,CAACA,IAMJ,MAAMkB,EAAoBlB,IACtB,MAAMmB,EAAcnB,EAAMoB,OAAO1B,GACjCiB,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,OAAO1B,GAC7CmC,cAAe7B,EAAM8B,MAAM,QAAQV,OAAO1B,IAE9CqC,MAAO/B,EAAM+B,QAAU,EACvBC,KAAMhC,EAAMgC,QAGhBlC,EAAoB2B,EACxB,GAaJ,OACIQ,EAACC,EAAOC,OAAAC,OAAA,GAAK5B,EAAU,CAAA6B,SACnBJ,EAACK,EAAe,CACZC,IAAK1B,EACL2B,eAAa,EACbC,oBAdDC,EAAWC,QAAQjC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO1B,GAaJkD,kBAAmBlC,EACnBmC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBlD,GACFmD,EAAMD,GACDJ,SAAS,EAAG,QACZM,SAASpD,EAAS,QAE3BqD,qBAAuBH,KACjBjD,GACFkD,EAAMD,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,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,OAE7CwC,mBAAqBT,GACjBC,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,QAE7CyC,aAAa,EAAIxB,SAEhB,EAAGc,kBAEIlB,EAAC6B,GACGX,aAAcA,EACdtD,cAAeA,EACfa,aAAcA,EACdT,QAASA,EACTC,QAASA,EACT6D,SAAU7C,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\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","TimeSlotWeekView","_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":"2kBAYA,MAAMA,EAAc,aAEPC,EAAoBC,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,EAAAb,EAZgB,CAAA,gBAAA,sBAAA,WAAA,QAAA,UAAA,UAAA,QAAA,uBAAA,kBAAA,cAAA,wBAiB7B,MAAOc,EAAcC,GAAmBC,EAA6BZ,GAC/Da,EAAqBC,EAA2B,MAChDC,EAAuBD,OAA0BE,GAKvDC,GAAU,KACNN,EAAgBX,EAAM,GACvB,CAACA,IAMJ,MAAMkB,EAAoBlB,IACtB,MAAMmB,EAAcnB,EAAMoB,OAAO1B,GACjCiB,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,OAAO1B,GAC7CmC,cAAe7B,EAAM8B,MAAM,QAAQV,OAAO1B,IAE9CqC,MAAO/B,EAAM+B,QAAU,EACvBC,KAAMhC,EAAMgC,QAGhBlC,EAAoB2B,EACxB,GAaJ,OACIQ,EAAA,MAAAC,OAAAC,OAAA,CAAKC,UAAWC,GAAoB7B,EAAU,CAAA8B,SAC1CL,EAACM,EAAe,CACZC,IAAK3B,EACL4B,eAAa,EACbC,oBAdDC,EAAWC,QAAQlC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO1B,GAaJmD,kBAAmBnC,EACnBoC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBnD,GACFoD,EAAMD,GACDJ,SAAS,EAAG,QACZM,SAASrD,EAAS,QAE3BsD,qBAAuBH,KACjBlD,GACFmD,EAAMD,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,EAAMD,GAActB,MAAM,QAAQV,OAAO,OAE7CyC,mBAAqBT,GACjBC,EAAMD,GAActB,MAAM,QAAQV,OAAO,QAE7C0C,aAAa,EAAIxB,SAEhB,EAAGc,kBAEInB,EAAC8B,GACGX,aAAcA,EACdvD,cAAeA,EACfa,aAAcA,EACdT,QAASA,EACTC,QAASA,EACT8D,SAAU9C,EACVf,MAAOA,EACPE,gBAAiBA,EACjBC,YAAae,QAK3B"}

package/time-slot-week-view/time-slot-week-view.styles.d.ts

@@ -1 +1 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const wrapper: import("@linaria/core").LinariaClassName;

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

@@ -1,10 +1,2 @@
-import e from"styled-components";import{V3_MediaQuery as t}from"../v3_theme/index.js";const m=e.div`
-    --header-bottom-spacing: 0.5rem;
-
-    ${t.MaxWidth.sm} {
-        --header-horizontal-inset: 1.25rem;
-    }
-
-    min-width: 18.5rem;
-`;export{m as Wrapper};
+import"./time-slot-week-view.styles_gqgsw2.css";const e="wgz4q8s";export{e as wrapper};
 //# sourceMappingURL=time-slot-week-view.styles.js.map

package/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":"sFAIO,MAAMA,EAAUC,EAAOC,GAAG;;;MAG3BC,EAAcC,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":["wrapper"],"mappings":"mFAKO,MAAMA,EAAO"}

package/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/timeline/timeline.styles.js

@@ -1,2 +1,2 @@
-import"./timeline.styles_1wcnzot.css";const t={wrapper:{startCol:"--fds-internal-timeline-wrapper-startCol",colSpan:"--fds-internal-timeline-wrapper-colSpan"}},e="c1epf9wu",p="l1ff2pyq",l="t1qzwom7",a="tuaspcp",n="tfsmff8",r="t1qpo82v",i="t1d2q33u",s="tvlbvjk",o="t1afag3x";export{e as circleIndicator,p as lineIndicator,l as timelineIndicators,i as timelineItem,s as timelineItemContent,r as timelineItemTitle,o as timelinePills,n as timelineTitle,a as timelineWrapper,t as tokens};
+import"./timeline.styles_1jxzik4.css";const t={wrapper:{startCol:"--fds-internal-timeline-wrapper-startCol",colSpan:"--fds-internal-timeline-wrapper-colSpan"}},e="c1epf9wu",p="l1ff2pyq",l="t1qzwom7",a="tuaspcp",i="tfsmff8",r="t1qpo82v",n="t1d2q33u",s="tvlbvjk",f="t1afag3x";export{e as circleIndicator,p as lineIndicator,l as timelineIndicators,n as timelineItem,s as timelineItemContent,r as timelineItemTitle,f as timelinePills,i as timelineTitle,a as timelineWrapper,t as tokens};
 //# sourceMappingURL=timeline.styles.js.map

package/timeline/{timeline.styles_1wcnzot.css → timeline.styles_1jxzik4.css}

@@ -1,4 +1,4 @@
-.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);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%;}
+@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;}
@@ -6,4 +6,4 @@
 .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;}
+.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/timepicker/timepicker.js

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

package/timepicker/timepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../shared/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\nexport const Timepicker = ({\n    id,\n    disabled = false,\n    readOnly = false,\n    error,\n    value,\n    placeholder,\n    format = \"24hr\",\n    onChange,\n    onFocus,\n    onBlur,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: TimepickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getPlaceholderValue = useCallback(() => {\n        switch (format) {\n            case \"12hr\":\n                return \"HH:MMam\";\n            case \"24hr\":\n            default:\n                return \"HH:MM\";\n        }\n    }, [format]);\n\n    const restoreFocusToSelector = () => {\n        selectorRef.current?.focus({ preventScroll: true });\n    };\n\n    // =============================================================================\n    // EVENT LISTENERS\n    // =============================================================================\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        onBlur?.();\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleChange = (v: string) => {\n        onChange?.(v);\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleFocus = () => {\n        onFocus?.();\n    };\n\n    const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n        if (isOpen) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (next && wrapperRef.current?.contains(next)) return;\n\n        onBlur?.();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n            e.preventDefault();\n            handleOpen();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderElement = () => (\n        <InputWrapper\n            ref={wrapperRef}\n            role=\"group\"\n            readOnly={readOnly}\n            disabled={disabled}\n            focused={isOpen}\n            error={error}\n            className={className}\n            {...otherProps}\n        >\n            <BasicInput\n                ref={selectorRef}\n                readOnly\n                placeholder={placeholder || getPlaceholderValue()}\n                value={TimeHelper.formatDisplayValue(value, format)}\n                role=\"combobox\"\n                aria-invalid={error || undefined}\n                aria-disabled={disabled || undefined}\n                aria-readonly={readOnly || undefined}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-expanded={!disabled && !readOnly ? isOpen : false}\n                data-testid={\n                    id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n                }\n                className={styles.inputSelectorElement}\n                onFocus={handleFocus}\n                onClick={handleOpen}\n                onKeyDown={handleKeyDown}\n                onBlur={handleSelectorBlur}\n            />\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            ref={setFloatingRef}\n            style={styles}\n            role=\"dialog\"\n            aria-label=\"Time picker\"\n            {...getFloatingProps()}\n        >\n            <TimepickerDropdown\n                id={id}\n                show={isOpen}\n                value={value}\n                format={format}\n                onCancel={handleDismiss}\n                onChange={handleChange}\n            />\n        </div>\n    );\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={isOpen}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            offset={8}\n            alignment={alignment}\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","focused","children","BasicInput","TimeHelper","formatDisplayValue","undefined","styles.inputSelectorElement","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"mhBAUO,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,UAChBA,EACA,kBAAmBC,EACnB,mBAAoBC,KACjBC,EAAUC,EAAAlB,EAjBU,CAAA,KAAA,WAAA,WAAA,QAAA,QAAA,cAAA,SAAA,WAAA,UAAA,SAAA,YAAA,iBAAA,mBAAA,YAAA,kBAAA,qBAsBvB,MAAOmB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDnB,EAEO,UAGA,SAEhB,CAACA,IAEEoB,EAAyB,WACR,QAAnB3B,EAAAwB,EAAYI,eAAO,IAAA5B,GAAAA,EAAE6B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX7B,GAAYC,GAChBiB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClB1B,SAAAA,EAAW0B,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KAChB1B,SAAAA,GAAW,EAGT2B,EAAsBC,UACxB,GAAIlB,EAAQ,OAEZ,MAAMmB,EAAOD,EAAEE,cACXD,IAA0B,QAAlBtC,EAAAsB,EAAWM,eAAO,IAAA5B,OAAA,EAAAA,EAAEwC,SAASF,KAEzC5B,SAAAA,GAAU,EAGR+B,EAAiBJ,IACfnC,GAAYC,GAIF,UAAVkC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EAgEJ,OACIa,EAACC,EAAmB,CAChBC,SAAU3C,IAAaD,EACvBiB,OAAQA,EACR4B,cA9Dc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QACLjD,SAAUA,EACVD,SAAUA,EACVmD,QAASlC,EACTf,MAAOA,EACPU,UAAWA,GACPG,EAAU,CAAAqC,SAEdV,EAACW,EAAU,CACPJ,IAAK3B,EACLrB,YACAG,YAAaA,GAAemB,IAC5BpB,MAAOmD,EAAWC,mBAAmBpD,EAAOE,GAC5C6C,KAAK,WAAU,eACDhD,QAASsD,EAAS,gBACjBxD,QAAYwD,EAAS,gBACrBvD,QAAYuD,EAAS,kBACnB3C,EAAc,mBACbC,EAAe,iBACjBd,IAAaC,GAAWgB,EAAc,cAElDlB,EAAK,GAAGA,wBAA2B,sBAEvCa,UAAW6C,EACXlD,QAAS0B,EACTyB,QAAS7B,EACT8B,UAAWpB,EACX/B,OAAQ0B,OAiCZ0B,eA5Be,EACnBC,SACAC,iBACAC,sBAEArB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKa,EACLE,MAAOH,EACPX,KAAK,SAAQ,aACF,eACPa,IAAkB,CAAAX,SAEtBV,EAACuB,EAAkB,CACflE,GAAIA,EACJmE,KAAMjD,EACNd,MAAOA,EACPE,OAAQA,EACR8D,SAAUrC,EACVxB,SAAUyB,OAWdqC,OAAQvC,EACRwC,QA5GY,KAChBnD,GAAU,GACVV,SAAAA,GAAU,EA2GN8D,UAAWxC,EACXyC,OAAQ,EACR9D,UAAWA,EACX+D,aAAc9D,EACd+D,SAAU9D,GACZ"}
+{"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../shared/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\nexport const Timepicker = ({\n    id,\n    disabled = false,\n    readOnly = false,\n    error,\n    value,\n    placeholder,\n    format = \"24hr\",\n    onChange,\n    onFocus,\n    onBlur,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: TimepickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getPlaceholderValue = useCallback(() => {\n        switch (format) {\n            case \"12hr\":\n                return \"HH:MMam\";\n            case \"24hr\":\n            default:\n                return \"HH:MM\";\n        }\n    }, [format]);\n\n    const restoreFocusToSelector = () => {\n        selectorRef.current?.focus({ preventScroll: true });\n    };\n\n    // =============================================================================\n    // EVENT LISTENERS\n    // =============================================================================\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        onBlur?.();\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleChange = (v: string) => {\n        onChange?.(v);\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleFocus = () => {\n        if (disabled) return;\n        onFocus?.();\n    };\n\n    const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n        if (isOpen || disabled) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (next && wrapperRef.current?.contains(next)) return;\n\n        onBlur?.();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n            e.preventDefault();\n            handleOpen();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderElement = () => (\n        <InputWrapper\n            ref={wrapperRef}\n            role=\"group\"\n            readOnly={readOnly}\n            disabled={disabled}\n            focused={isOpen}\n            error={error}\n            className={className}\n            {...otherProps}\n        >\n            <BasicInput\n                ref={selectorRef}\n                readOnly\n                placeholder={placeholder || getPlaceholderValue()}\n                value={TimeHelper.formatDisplayValue(value, format)}\n                role=\"combobox\"\n                aria-invalid={error || undefined}\n                aria-disabled={disabled || undefined}\n                aria-readonly={readOnly || undefined}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-expanded={!disabled && !readOnly ? isOpen : false}\n                data-testid={\n                    id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n                }\n                className={styles.inputSelectorElement}\n                onFocus={handleFocus}\n                onClick={handleOpen}\n                onKeyDown={handleKeyDown}\n                onBlur={handleSelectorBlur}\n            />\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            ref={setFloatingRef}\n            style={styles}\n            role=\"dialog\"\n            aria-label=\"Time picker\"\n            {...getFloatingProps()}\n        >\n            <TimepickerDropdown\n                id={id}\n                show={isOpen}\n                value={value}\n                format={format}\n                onCancel={handleDismiss}\n                onChange={handleChange}\n            />\n        </div>\n    );\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={isOpen}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            offset={8}\n            alignment={alignment}\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","focused","children","BasicInput","TimeHelper","formatDisplayValue","undefined","styles.inputSelectorElement","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"mhBAUO,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,UAChBA,EACA,kBAAmBC,EACnB,mBAAoBC,KACjBC,EAAUC,EAAAlB,EAjBU,CAAA,KAAA,WAAA,WAAA,QAAA,QAAA,cAAA,SAAA,WAAA,UAAA,SAAA,YAAA,iBAAA,mBAAA,YAAA,kBAAA,qBAsBvB,MAAOmB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDnB,EAEO,UAGA,SAEhB,CAACA,IAEEoB,EAAyB,WACR,QAAnB3B,EAAAwB,EAAYI,eAAO,IAAA5B,GAAAA,EAAE6B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX7B,GAAYC,GAChBiB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClB1B,SAAAA,EAAW0B,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KACZjC,GACJO,SAAAA,GAAW,EAGT2B,EAAsBC,UACxB,GAAIlB,GAAUjB,EAAU,OAExB,MAAMoC,EAAOD,EAAEE,cACXD,IAA0B,QAAlBtC,EAAAsB,EAAWM,eAAO,IAAA5B,OAAA,EAAAA,EAAEwC,SAASF,KAEzC5B,SAAAA,GAAU,EAGR+B,EAAiBJ,IACfnC,GAAYC,GAIF,UAAVkC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EAgEJ,OACIa,EAACC,EAAmB,CAChBC,SAAU3C,IAAaD,EACvBiB,OAAQA,EACR4B,cA9Dc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QACLjD,SAAUA,EACVD,SAAUA,EACVmD,QAASlC,EACTf,MAAOA,EACPU,UAAWA,GACPG,EAAU,CAAAqC,SAEdV,EAACW,EAAU,CACPJ,IAAK3B,EACLrB,YACAG,YAAaA,GAAemB,IAC5BpB,MAAOmD,EAAWC,mBAAmBpD,EAAOE,GAC5C6C,KAAK,WAAU,eACDhD,QAASsD,EAAS,gBACjBxD,QAAYwD,EAAS,gBACrBvD,QAAYuD,EAAS,kBACnB3C,EAAc,mBACbC,EAAe,iBACjBd,IAAaC,GAAWgB,EAAc,cAElDlB,EAAK,GAAGA,wBAA2B,sBAEvCa,UAAW6C,EACXlD,QAAS0B,EACTyB,QAAS7B,EACT8B,UAAWpB,EACX/B,OAAQ0B,OAiCZ0B,eA5Be,EACnBC,SACAC,iBACAC,sBAEArB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKa,EACLE,MAAOH,EACPX,KAAK,SAAQ,aACF,eACPa,IAAkB,CAAAX,SAEtBV,EAACuB,EAAkB,CACflE,GAAIA,EACJmE,KAAMjD,EACNd,MAAOA,EACPE,OAAQA,EACR8D,SAAUrC,EACVxB,SAAUyB,OAWdqC,OAAQvC,EACRwC,QA7GY,KAChBnD,GAAU,GACVV,SAAAA,GAAU,EA4GN8D,UAAWxC,EACXyC,OAAQ,EACR9D,UAAWA,EACX+D,aAAc9D,EACd+D,SAAU9D,GACZ"}

package/timepicker/timepicker.styles.js

@@ -1,2 +1,2 @@
-import"./timepicker.styles_zmkhl8.css";const e="ixpxnsh";export{e as inputSelectorElement};
+import"./timepicker.styles_1jm33yw.css";const e="ixpxnsh";export{e as inputSelectorElement};
 //# sourceMappingURL=timepicker.styles.js.map