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

package/timetable/timetable.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r,Fragment as o}from"react/jsx-runtime";import{forwardRef as a,useRef as i,useState as n,useImperativeHandle as l,useEffect as d,createElement as s}from"react";import c from"../external/dayjs/dayjs.min.js";import{l as m}from"../external/lodash/lodash.js";import{useResizeDetector as h}from"../external/react-resize-detector/build/index.esm.js";import{VisuallyHidden as u}from"../shared/accessibility/index.js";import{TimeHelper as f}from"../util/time-helper.js";import{ROW_INTERVAL as p,ROW_HEADER_WIDTH as b,MIN_INTERVAL_WIDTH as w,ROW_BAR_COLOR_ALTERNATE_COLOR as g,ROW_BAR_COLOR_SEQUENCE as y}from"./const.js";import{Container as D,EmptyTableContainer as C,NoResultsFound as $,Loader as v,TimeTableContainer as x,TimeTableHeaderRow as T,RowColumnHeader as R,ColumnHeaderRow as S,ColumnHeader as j,ColumnHeaderTitle as k,TimeTableBody as H,TimeTableRow as M,ClickableRowHeaderTitle as P,RowHeaderSubtitle as N,RowHeader as I,LoadingBar as A,LoadingWrapper as L,LoadingCell as O,StyledPopoverTrigger as z}from"./timetable.style.js";import{TimeTableHeader as E}from"./timetable-header/timetable-header.js";import{RowBar as Y}from"./timetable-row/row-bar.js";const F=a(((a,F)=>{const{date:W,emptyContentMessage:_,rowData:B,loading:X,minTime:q="00:00",maxTime:G="23:00",initialScrollTime:J,minDate:K,maxDate:Q,totalRecords:U,showCurrentDateAsToday:V,showDateAsShortForm:Z,onPage:ee,onRefresh:te,onNextDayClick:re,onPreviousDayClick:oe,onCalendarDateSelect:ae,roundInitialScrollTime:ie=!0}=a,ne=e(a,["date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime"]),le=ne["data-testid"]||"timetable",de=f.roundToNearestInterval(q,60),se=f.roundToNearestInterval(G,60,!0),ce=f.generateHourlyIntervals(de,se),me=Math.ceil(60*ce.length/p),he=`Timetable of resource availability, for ${c(W).format("D MMMM YYYY")}, from ${c(de,"HH:mm").format("ha")} to ${c(se,"HH:mm").format("ha")}`,ue=(U||B.length)+1,fe=me+1,pe=0===U||m.isEmpty(B),be=pe||B.length===U,we=i(null),ge=i(null),[ye,De]=n(!1),[Ce,$e]=n(!1),[ve,xe]=n(0),[Te,Re]=n(!1);l(F,(()=>({resetScroll:ke}))),d((()=>{const e=m.throttle((()=>{if(we.current&&(De(we.current.scrollLeft>0),$e(we.current.scrollTop>0)),Te||!we.current)return;const{scrollTop:e,clientHeight:t,scrollHeight:r}=we.current;Math.ceil(e+t)>=r-1&&!be&&ee&&!X&&(Re(!0),ee())}),100),t=we.current;return t&&t.addEventListener("scroll",e),()=>{t&&t.removeEventListener("scroll",e)}}),[be,Te,X,ee]),d((()=>{Re(!1)}),[B]),d((()=>{ke()}),[J,ve,de,se]);h({onResize:()=>{if(we.current){const e=Math.ceil(60*ce.length/p),t=(we.current.clientWidth-b)/e;xe(t>w?t:w)}},targetRef:we,refreshMode:"debounce",refreshRate:50});const Se=(()=>{let e=0;const t=y.length;return()=>{const r=y[e],o=g[e];return e=(e+1)%t,{mainColor:r,alternateColor:o}}})(),je=(e,t)=>{if(!e.rowHeaderPopover)return t;const r={position:"bottom-start",customOffset:e.rowHeaderPopover.offset,children:t,trigger:e.rowHeaderPopover.trigger,delay:e.rowHeaderPopover.delay,popoverContent:e.rowHeaderPopover.content};return s(z,Object.assign({},r,{key:`${e.id}-popover-trigger`,zIndex:2}),t)},ke=()=>{if(J&&we.current&&ve>0){const e=f.calculateScrollPosition({scrollTime:J,minTime:de,maxTime:se,interval:p,intervalWidth:ve,options:{roundToInterval:ie}});null!==e&&(we.current.scrollLeft=e)}},He=e=>{const a=t(o,{children:[r(P,{$isClickable:!!e.onRowNameClick,onClick:t=>((e,t)=>{e.onRowNameClick&&e.onRowNameClick(e,t)})(e,t),weight:"semibold","data-testid":`${e.id}-row-header-title`,children:e.name}),r(N,{weight:"bold",$show:!!e.subtitle,"data-testid":`${e.id}-row-header-subtitle`,children:e.subtitle})]});return r(I,{$isScrolled:ye,role:"rowheader","aria-colindex":1,children:je(e,a)},`${e.id}-row-header`)},Me=()=>{if(!X&&Te)return t(M,{children:[r(I,{$isScrolled:ye,children:r(A,{})}),r(L,{"data-testid":"lazy-loader",role:"presentation",children:ce.map(((e,t)=>r(O,{$width:4*ve,children:r(A,{})},`lazy-load-cell-${t}`)))})]})};return t(D,pe?Object.assign({},ne,{"data-testid":le,children:[r(E,{selectedDate:W,loading:X||Te,tableContainerRef:we,minDate:K,maxDate:Q,totalRecords:U,showCurrentDateAsToday:V,showDateAsShortForm:Z,onPreviousDayClick:oe,onNextDayClick:re,onRefresh:te,onCalendarDateSelect:ae}),r(C,{className:"empty-container",tabIndex:0,"aria-live":"polite","aria-atomic":!0,"aria-busy":X,children:X?t(o,{children:[r(u,{children:`Loading ${he}`}),r(v,{$isEmptyContent:pe})]}):r($,{type:"no-item-found",description:_})})]}):Object.assign({},ne,{"data-testid":le,children:[r(E,{"data-id":"timetable-date-navigator",selectedDate:W,loading:X||Te,tableContainerRef:we,minDate:K,maxDate:Q,totalRecords:U,showCurrentDateAsToday:V,showDateAsShortForm:Z,onPreviousDayClick:oe,onNextDayClick:re,onRefresh:te,onCalendarDateSelect:ae}),t(x,{"data-id":"timetable-container","data-testid":"timetable-container",ref:we,$loading:X,$allRecordsLoaded:be||!ee,role:"grid","aria-label":he,"aria-rowcount":ue,"aria-colcount":fe,"aria-busy":Te,tabIndex:0,children:[t(T,{role:"row","aria-rowindex":1,"data-testid":"row-header-column-id",children:[r(R,{$isScrolledY:Ce,$isScrolledX:ye,role:"columnheader","aria-colindex":1,children:r(u,{children:"Resource"})}),r(S,{$numOfColumns:ce.length,$intervalWidth:ve,$isScrolled:Ce,role:"presentation",children:ce.map((e=>r(j,{"data-testid":`${e}-column`,children:r(k,{weight:"semibold",children:e})},`${e}-column-key`)))})]}),X?r(v,{$isEmptyContent:pe}):t(H,{"data-testid":"content-container-id",ref:ge,role:"rowgroup",children:[B.map(((e,o)=>t(M,{role:"row","aria-rowindex":o+2,"aria-label":e.name,children:[He(e),r(Y,Object.assign({timetableMinTime:de,timetableMaxTime:se,rowBarColor:Se(),intervalWidth:ve,containerRef:ge},e),`${o}-row-bar`)]},`${o}-timetable-row`))),Me()]})]})]}))}));export{F as TimeTable};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r,Fragment as o}from"react/jsx-runtime";import{forwardRef as a,useRef as i,useState as n,useImperativeHandle as l,useEffect as s,createElement as d}from"react";import m from"clsx";import c from"../external/dayjs/dayjs.min.js";import{l as p}from"../external/lodash/lodash.js";import{useResizeDetector as h}from"../external/react-resize-detector/build/index.esm.js";import"../animations/loading-dots/loading-dots.js";import{LoadingDotsSpinner as u}from"../animations/loading-dots-spinner/loading-dots-spinner.js";import"../animations/loading-spinner/loading-spinner.js";import"../theme/theme-provider/context.js";import{ErrorDisplay as f}from"../error-display/error-display.js";import{Typography as v}from"../typography/index.js";import"../card/card.styles_1gh9gs3.css";import"../markup/markup.js";import"../modal-v2/index.js";import"../theme/theme-provider/index.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 g}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../popover/popover.styles_ujnf0h.css";import{PopoverTrigger as y}from"../popover/popover-trigger.js";import"../popover/popover-inline/popover-inline.styles_bkopnt.css";import{VisuallyHidden as b}from"../shared/accessibility/index.js";import{TimeHelper as w}from"../util/time-helper.js";import{ROW_INTERVAL as j,ROW_HEADER_WIDTH as D,MIN_INTERVAL_WIDTH as x,ROW_BAR_COLOR_ALTERNATE_COLOR as C,ROW_BAR_COLOR_SEQUENCE as N}from"./const.js";import{tokens as T,noResultsFound as k,loadingSpinner as R,loadingSpinnerEmptyContent as M,loadingSpinnerHasContent as H,emptyTableContainer as S,timeTableHeaderRow as P,rowColumnHeader as A,rowColumnHeaderScrolled as _,rowColumnHeaderScrolledX as $,rowColumnHeaderScrolledY as I,columnHeaderRow as W,columnHeaderRowScrolled as z,timeTableContainer as L,timeTableContainerNotAllLoaded as O,timeTableContainerLoading as B,columnHeader as F,columnHeaderTitle as Y,timeTableBody as E,timeTableRow as G,clickableRowHeaderTitle as q,clickableRowHeaderTitleClickable as X,rowHeaderSubtitle as J,rowHeaderSubtitleHidden as K,rowHeader as Q,rowHeaderScrolled as U,loadingBar as V,loadingWrapper as Z,loadingCell as ee,popoverTrigger as te}from"./timetable.styles.js";import{TimeTableHeader as re}from"./timetable-header/timetable-header.js";import{RowBar as oe}from"./timetable-row/row-bar.js";const ae=a(((a,ae)=>{const{date:ie,emptyContentMessage:ne,rowData:le,loading:se,minTime:de="00:00",maxTime:me="23:00",initialScrollTime:ce,minDate:pe,maxDate:he,totalRecords:ue,showCurrentDateAsToday:fe,showDateAsShortForm:ve,onPage:ge,onRefresh:ye,onNextDayClick:be,onPreviousDayClick:we,onCalendarDateSelect:je,roundInitialScrollTime:De=!0}=a,xe=e(a,["date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime"]),Ce=xe["data-testid"]||"timetable",Ne=w.roundToNearestInterval(de,60),Te=w.roundToNearestInterval(me,60,!0),ke=w.generateHourlyIntervals(Ne,Te),Re=Math.ceil(60*ke.length/j),Me=`Timetable of resource availability, for ${c(ie).format("D MMMM YYYY")}, from ${c(Ne,"HH:mm").format("ha")} to ${c(Te,"HH:mm").format("ha")}`,He=(ue||le.length)+1,Se=Re+1,Pe=0===ue||p.isEmpty(le),Ae=Pe||le.length===ue,_e=!Ae&&!!ge,$e=i(null),Ie=i(null),We=i(null),ze=i(null),[Le,Oe]=n(!1),[Be,Fe]=n(!1),[Ye,Ee]=n(0),[Ge,qe]=n(!1);l(ae,(()=>({resetScroll:Ke}))),g(We,{[T.columnHeaderRow.columnWidth]:4*Ye+"px"}),g(ze,{[T.loadingWrapper.cellWidth]:4*Ye+"px"}),s((()=>{const e=p.throttle((()=>{if($e.current&&(Oe($e.current.scrollLeft>0),Fe($e.current.scrollTop>0)),Ge||!$e.current)return;const{scrollTop:e,clientHeight:t,scrollHeight:r}=$e.current;Math.ceil(e+t)>=r-1&&!Ae&&ge&&!se&&(qe(!0),ge())}),100),t=$e.current;return t&&t.addEventListener("scroll",e),()=>{t&&t.removeEventListener("scroll",e)}}),[Ae,Ge,se,ge]),s((()=>{qe(!1)}),[le]),s((()=>{Ke()}),[ce,Ye,Ne,Te]);h({onResize:()=>{if($e.current){const e=Math.ceil(60*ke.length/j),t=($e.current.clientWidth-D)/e;Ee(t>x?t:x)}},targetRef:$e,refreshMode:"debounce",refreshRate:50});const Xe=(()=>{let e=0;const t=N.length;return()=>{const r=N[e],o=C[e];return e=(e+1)%t,{mainColor:r,alternateColor:o}}})(),Je=(e,t)=>{if(!e.rowHeaderPopover)return t;const r={position:"bottom-start",customOffset:e.rowHeaderPopover.offset,children:t,trigger:e.rowHeaderPopover.trigger,delay:e.rowHeaderPopover.delay,popoverContent:e.rowHeaderPopover.content};return d(y,Object.assign({},r,{className:te,key:`${e.id}-popover-trigger`,zIndex:2}),t)},Ke=()=>{if(ce&&$e.current&&Ye>0){const e=w.calculateScrollPosition({scrollTime:ce,minTime:Ne,maxTime:Te,interval:j,intervalWidth:Ye,options:{roundToInterval:De}});null!==e&&($e.current.scrollLeft=e)}},Qe=e=>{const a=t(o,{children:[r(v.BodyMD,{className:m(q,!!e.onRowNameClick&&X),onClick:t=>((e,t)=>{e.onRowNameClick&&e.onRowNameClick(e,t)})(e,t),weight:"semibold","data-testid":`${e.id}-row-header-title`,children:e.name}),r(v.BodyXS,{weight:"bold",className:m(J,!e.subtitle&&K),"data-testid":`${e.id}-row-header-subtitle`,children:e.subtitle})]});return r("div",{className:m(Q,Le&&U),role:"rowheader","aria-colindex":1,children:Je(e,a)},`${e.id}-row-header`)},Ue=()=>{if(!se&&Ge)return t("div",{className:G,children:[r("div",{className:m(Q,Le&&U),children:r("div",{className:V})}),r("div",{ref:ze,className:Z,"data-testid":"lazy-loader",role:"presentation",children:ke.map(((e,t)=>r("div",{className:ee,children:r("div",{className:V})},`lazy-load-cell-${t}`)))})]})};return t("div",Pe?Object.assign({},xe,{"data-testid":Ce,children:[r(re,{selectedDate:ie,loading:se||Ge,tableContainerRef:$e,minDate:pe,maxDate:he,totalRecords:ue,showCurrentDateAsToday:fe,showDateAsShortForm:ve,onPreviousDayClick:we,onNextDayClick:be,onRefresh:ye,onCalendarDateSelect:je}),r("div",{className:m(S,"empty-container"),tabIndex:0,"aria-live":"polite","aria-atomic":!0,"aria-busy":se,children:se?t(o,{children:[r(b,{children:`Loading ${Me}`}),r(u,{"data-testid":"timetable-loading-spinner",className:m(R,Pe?M:H)})]}):r(f,{className:k,type:"no-item-found",description:ne})})]}):Object.assign({},xe,{"data-testid":Ce,children:[r(re,{"data-id":"timetable-date-navigator",selectedDate:ie,loading:se||Ge,tableContainerRef:$e,minDate:pe,maxDate:he,totalRecords:ue,showCurrentDateAsToday:fe,showDateAsShortForm:ve,onPreviousDayClick:we,onNextDayClick:be,onRefresh:ye,onCalendarDateSelect:je}),t("div",{"data-id":"timetable-container","data-testid":"timetable-container",ref:$e,className:m(L,_e&&O,se&&B),role:"grid","aria-label":Me,"aria-rowcount":He,"aria-colcount":Se,"aria-busy":Ge,tabIndex:0,children:[t("div",{className:P,role:"row","aria-rowindex":1,"data-testid":"row-header-column-id",children:[r("div",{className:m(A,(Le||Be)&&_,Le&&$,Be&&I),role:"columnheader","aria-colindex":1,children:r(b,{children:"Resource"})}),r("div",{ref:We,className:m(W,Be&&z),role:"presentation",children:ke.map((e=>r("div",{className:F,"data-testid":`${e}-column`,children:r(v.BodySM,{className:Y,weight:"semibold",children:e})},`${e}-column-key`)))})]}),se?r(u,{"data-testid":"timetable-loading-spinner",className:m(R,Pe?M:H)}):t("div",{className:E,"data-testid":"content-container-id",ref:Ie,role:"rowgroup",children:[le.map(((e,o)=>t("div",{className:G,role:"row","aria-rowindex":o+2,"aria-label":e.name,children:[Qe(e),r(oe,Object.assign({timetableMinTime:Ne,timetableMaxTime:Te,rowBarColor:Xe(),intervalWidth:Ye,containerRef:Ie},e),`${o}-row-bar`)]},`${o}-timetable-row`))),Ue()]})]})]}))}));export{ae as TimeTable};
 //# sourceMappingURL=timetable.js.map

package/timetable/timetable.js.map

@@ -1 +1 @@
-{"version":3,"file":"timetable.js","sources":["../../src/timetable/timetable.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { isEmpty, throttle } from \"lodash\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport type { PopoverV2TriggerProps } from \"../popover-v2\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n    MIN_INTERVAL_WIDTH,\n    ROW_BAR_COLOR_ALTERNATE_COLOR,\n    ROW_BAR_COLOR_SEQUENCE,\n    ROW_HEADER_WIDTH,\n    ROW_INTERVAL,\n} from \"./const\";\nimport {\n    ClickableRowHeaderTitle,\n    ColumnHeader,\n    ColumnHeaderRow,\n    ColumnHeaderTitle,\n    Container,\n    EmptyTableContainer,\n    Loader,\n    LoadingBar,\n    LoadingCell,\n    LoadingWrapper,\n    NoResultsFound,\n    RowColumnHeader,\n    RowHeader,\n    RowHeaderSubtitle,\n    StyledPopoverTrigger,\n    TimeTableBody,\n    TimeTableContainer,\n    TimeTableHeaderRow,\n    TimeTableRow,\n} from \"./timetable.style\";\nimport { TimeTableHeader } from \"./timetable-header/timetable-header\";\nimport { RowBar } from \"./timetable-row/row-bar\";\nimport type { TimeTableProps, TimeTableRef, TimeTableRowData } from \"./types\";\n\nconst Component = (props: TimeTableProps, ref: React.Ref<TimeTableRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        date,\n        emptyContentMessage,\n        rowData,\n        loading,\n        minTime = \"00:00\",\n        maxTime = \"23:00\",\n        initialScrollTime,\n        minDate,\n        maxDate,\n        totalRecords,\n        showCurrentDateAsToday,\n        showDateAsShortForm,\n        onPage,\n        onRefresh,\n        onNextDayClick,\n        onPreviousDayClick,\n        onCalendarDateSelect,\n        roundInitialScrollTime = true,\n        ...otherProps\n    } = props;\n    const testId = otherProps[\"data-testid\"] || \"timetable\";\n    const timetableMinTime = TimeHelper.roundToNearestInterval(minTime, 60);\n    const timetableMaxTime = TimeHelper.roundToNearestInterval(\n        maxTime,\n        60,\n        true\n    );\n    const hourlyIntervals = TimeHelper.generateHourlyIntervals(\n        timetableMinTime,\n        timetableMaxTime\n    );\n    const numberOfIntervals = Math.ceil(\n        (hourlyIntervals.length * 60) / ROW_INTERVAL\n    );\n    const formattedDate = dayjs(date).format(\"D MMMM YYYY\");\n    const timetableAriaLabel = `Timetable of resource availability, for ${formattedDate}, from ${dayjs(\n        timetableMinTime,\n        \"HH:mm\"\n    ).format(\"ha\")} to ${dayjs(timetableMaxTime, \"HH:mm\").format(\"ha\")}`;\n    const ariaRowCount = (totalRecords || rowData.length) + 1;\n    const ariaColCount = numberOfIntervals + 1;\n\n    const isEmptyContent = totalRecords === 0 || isEmpty(rowData);\n    const allRecordsLoaded = isEmptyContent || rowData.length === totalRecords;\n    const tableContainerRef = useRef<HTMLDivElement>(null);\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [isScrolledX, setIsScrolledX] = useState<boolean>(false);\n    const [isScrolledY, setIsScrolledY] = useState<boolean>(false);\n    const [intervalWidth, setIntervalWidth] = useState<number>(0);\n    const [loadMore, setLoadMore] = useState<boolean>(false);\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const handleScroll = throttle(() => {\n            if (tableContainerRef.current) {\n                setIsScrolledX(tableContainerRef.current.scrollLeft > 0);\n                setIsScrolledY(tableContainerRef.current.scrollTop > 0);\n            }\n\n            if (loadMore || !tableContainerRef.current) return;\n\n            const { scrollTop, clientHeight, scrollHeight } =\n                tableContainerRef.current;\n            const scrollBottomTolerance = 1;\n            const isEndReached =\n                Math.ceil(scrollTop + clientHeight) >=\n                scrollHeight - scrollBottomTolerance;\n            const shouldLoadMore =\n                isEndReached && !allRecordsLoaded && onPage && !loading;\n\n            if (shouldLoadMore) {\n                setLoadMore(true);\n                onPage();\n            }\n        }, 100);\n\n        const tableContainer = tableContainerRef.current;\n\n        if (tableContainer) {\n            tableContainer.addEventListener(\"scroll\", handleScroll);\n        }\n\n        return () => {\n            if (tableContainer) {\n                tableContainer.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, [allRecordsLoaded, loadMore, loading, onPage]);\n\n    useEffect(() => {\n        setLoadMore(false);\n    }, [rowData]);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, intervalWidth, timetableMinTime, timetableMaxTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    /**\n     * Handles when the TimeTable component is resized.\n     *\n     * @remarks\n     * When the component is resized, we recalculate the width of each interval\n     * in the Timetable. We do this by dividing the width of the container by\n     * the number of intervals per row bar. We also make sure that the width\n     * of each interval is at least 21px, otherwise it becomes too small.\n     */\n    const handleResize = () => {\n        if (tableContainerRef.current) {\n            const numberOfIntervalsPerRowBar = Math.ceil(\n                (hourlyIntervals.length * 60) / ROW_INTERVAL\n            );\n            const tableContainerWidth =\n                tableContainerRef.current.clientWidth - ROW_HEADER_WIDTH;\n            const calcWidth = tableContainerWidth / numberOfIntervalsPerRowBar;\n            const width =\n                calcWidth > MIN_INTERVAL_WIDTH ? calcWidth : MIN_INTERVAL_WIDTH;\n            setIntervalWidth(width);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: tableContainerRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    const handleRowNameClick = (\n        data: TimeTableRowData,\n        event: React.MouseEvent\n    ) => {\n        if (data.onRowNameClick) {\n            data.onRowNameClick(data, event);\n        }\n    };\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * Using closures to more efficiently loop through and wrap the color sequencing instead of modding large numbers repeatedly\n     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#closure\n     */\n    const getColorFromSequence = (() => {\n        let colorIndex = 0;\n        const colorSequenceLength = ROW_BAR_COLOR_SEQUENCE.length;\n\n        return () => {\n            const mainColor = ROW_BAR_COLOR_SEQUENCE[colorIndex];\n            const alternateColor = ROW_BAR_COLOR_ALTERNATE_COLOR[colorIndex];\n            colorIndex = (colorIndex + 1) % colorSequenceLength;\n            return { mainColor, alternateColor };\n        };\n    })();\n\n    const buildPopoverTrigger = (\n        data: TimeTableRowData,\n        child: JSX.Element\n    ) => {\n        if (!data.rowHeaderPopover) {\n            return child;\n        }\n\n        const popoverTriggerProps: PopoverV2TriggerProps = {\n            position: \"bottom-start\",\n            customOffset: data.rowHeaderPopover.offset,\n            children: child,\n            trigger: data.rowHeaderPopover.trigger,\n            delay: data.rowHeaderPopover.delay,\n            popoverContent: data.rowHeaderPopover.content,\n        };\n\n        return (\n            <StyledPopoverTrigger\n                {...popoverTriggerProps}\n                key={`${data.id}-popover-trigger`}\n                zIndex={2}\n            >\n                {child}\n            </StyledPopoverTrigger>\n        );\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (\n            initialScrollTime &&\n            tableContainerRef.current &&\n            intervalWidth > 0\n        ) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: timetableMinTime,\n                maxTime: timetableMaxTime,\n                interval: ROW_INTERVAL,\n                intervalWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                tableContainerRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRowHeader = (data: TimeTableRowData) => {\n        const rowHeaderContent = (\n            <>\n                <ClickableRowHeaderTitle\n                    $isClickable={!!data.onRowNameClick}\n                    onClick={(event: React.MouseEvent) =>\n                        handleRowNameClick(data, event)\n                    }\n                    weight=\"semibold\"\n                    data-testid={`${data.id}-row-header-title`}\n                >\n                    {data.name}\n                </ClickableRowHeaderTitle>\n\n                <RowHeaderSubtitle\n                    weight=\"bold\"\n                    $show={!!data.subtitle}\n                    data-testid={`${data.id}-row-header-subtitle`}\n                >\n                    {data.subtitle}\n                </RowHeaderSubtitle>\n            </>\n        );\n\n        return (\n            <RowHeader\n                $isScrolled={isScrolledX}\n                key={`${data.id}-row-header`}\n                role=\"rowheader\"\n                aria-colindex={1}\n            >\n                {buildPopoverTrigger(data, rowHeaderContent)}\n            </RowHeader>\n        );\n    };\n\n    const renderColumnHeaders = () => {\n        // Don't render first column if there are no rows\n\n        return hourlyIntervals.map((columnHeader: string) => (\n            <ColumnHeader\n                key={`${columnHeader}-column-key`}\n                data-testid={`${columnHeader}-column`}\n            >\n                <ColumnHeaderTitle weight={\"semibold\"}>\n                    {columnHeader}\n                </ColumnHeaderTitle>\n            </ColumnHeader>\n        ));\n    };\n\n    const renderRows = () => {\n        if (loading) return <Loader $isEmptyContent={isEmptyContent} />;\n        return (\n            <TimeTableBody\n                data-testid=\"content-container-id\"\n                ref={contentContainerRef}\n                role=\"rowgroup\"\n            >\n                {rowData.map((data, index) => {\n                    return (\n                        <TimeTableRow\n                            key={`${index}-timetable-row`}\n                            role=\"row\"\n                            aria-rowindex={index + 2}\n                            aria-label={data.name}\n                        >\n                            {renderRowHeader(data)}\n                            <RowBar\n                                key={`${index}-row-bar`}\n                                timetableMinTime={timetableMinTime}\n                                timetableMaxTime={timetableMaxTime}\n                                rowBarColor={getColorFromSequence()}\n                                intervalWidth={intervalWidth}\n                                containerRef={contentContainerRef}\n                                {...data}\n                            />\n                        </TimeTableRow>\n                    );\n                })}\n                {renderLazyLoadRow()}\n            </TimeTableBody>\n        );\n    };\n\n    const renderLazyLoadRow = () => {\n        if (loading || !loadMore) return;\n        return (\n            <TimeTableRow>\n                <RowHeader $isScrolled={isScrolledX}>\n                    <LoadingBar />\n                </RowHeader>\n                <LoadingWrapper data-testid=\"lazy-loader\" role=\"presentation\">\n                    {hourlyIntervals.map((_, index) => (\n                        <LoadingCell\n                            key={`lazy-load-cell-${index}`}\n                            $width={intervalWidth * 4}\n                        >\n                            <LoadingBar />\n                        </LoadingCell>\n                    ))}\n                </LoadingWrapper>\n            </TimeTableRow>\n        );\n    };\n\n    if (isEmptyContent) {\n        return (\n            <Container {...otherProps} data-testid={testId}>\n                <TimeTableHeader\n                    selectedDate={date}\n                    loading={loading || loadMore}\n                    tableContainerRef={tableContainerRef}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    totalRecords={totalRecords}\n                    showCurrentDateAsToday={showCurrentDateAsToday}\n                    showDateAsShortForm={showDateAsShortForm}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onRefresh={onRefresh}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n                <EmptyTableContainer\n                    className=\"empty-container\"\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    aria-atomic\n                    aria-busy={loading}\n                >\n                    {!loading ? (\n                        <NoResultsFound\n                            type=\"no-item-found\"\n                            description={emptyContentMessage}\n                        />\n                    ) : (\n                        <>\n                            <VisuallyHidden>{`Loading ${timetableAriaLabel}`}</VisuallyHidden>\n                            <Loader $isEmptyContent={isEmptyContent}></Loader>\n                        </>\n                    )}\n                </EmptyTableContainer>\n            </Container>\n        );\n    }\n\n    return (\n        <Container {...otherProps} data-testid={testId}>\n            <TimeTableHeader\n                data-id=\"timetable-date-navigator\"\n                selectedDate={date}\n                loading={loading || loadMore}\n                tableContainerRef={tableContainerRef}\n                minDate={minDate}\n                maxDate={maxDate}\n                totalRecords={totalRecords}\n                showCurrentDateAsToday={showCurrentDateAsToday}\n                showDateAsShortForm={showDateAsShortForm}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onRefresh={onRefresh}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            <TimeTableContainer\n                data-id=\"timetable-container\"\n                data-testid=\"timetable-container\"\n                ref={tableContainerRef}\n                $loading={loading}\n                $allRecordsLoaded={allRecordsLoaded || !onPage}\n                role=\"grid\"\n                aria-label={timetableAriaLabel}\n                aria-rowcount={ariaRowCount}\n                aria-colcount={ariaColCount}\n                aria-busy={loadMore}\n                tabIndex={0}\n            >\n                <TimeTableHeaderRow\n                    role=\"row\"\n                    aria-rowindex={1}\n                    data-testid={\"row-header-column-id\"}\n                >\n                    <RowColumnHeader\n                        $isScrolledY={isScrolledY}\n                        $isScrolledX={isScrolledX}\n                        role=\"columnheader\"\n                        aria-colindex={1}\n                    >\n                        <VisuallyHidden>Resource</VisuallyHidden>\n                    </RowColumnHeader>\n                    <ColumnHeaderRow\n                        $numOfColumns={hourlyIntervals.length}\n                        $intervalWidth={intervalWidth}\n                        $isScrolled={isScrolledY}\n                        role=\"presentation\"\n                    >\n                        {renderColumnHeaders()}\n                    </ColumnHeaderRow>\n                </TimeTableHeaderRow>\n                {renderRows()}\n            </TimeTableContainer>\n        </Container>\n    );\n};\n\nexport const TimeTable = forwardRef<TimeTableRef, TimeTableProps>(Component);\n"],"names":["TimeTable","forwardRef","props","ref","date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime","otherProps","testId","timetableMinTime","TimeHelper","roundToNearestInterval","timetableMaxTime","hourlyIntervals","generateHourlyIntervals","numberOfIntervals","Math","ceil","length","ROW_INTERVAL","timetableAriaLabel","dayjs","format","ariaRowCount","ariaColCount","isEmptyContent","isEmpty","allRecordsLoaded","tableContainerRef","useRef","contentContainerRef","isScrolledX","setIsScrolledX","useState","isScrolledY","setIsScrolledY","intervalWidth","setIntervalWidth","loadMore","setLoadMore","useImperativeHandle","resetScroll","useEffect","handleScroll","throttle","current","scrollLeft","scrollTop","clientHeight","scrollHeight","tableContainer","addEventListener","removeEventListener","useResizeDetector","onResize","numberOfIntervalsPerRowBar","calcWidth","clientWidth","ROW_HEADER_WIDTH","MIN_INTERVAL_WIDTH","targetRef","refreshMode","refreshRate","getColorFromSequence","colorIndex","colorSequenceLength","ROW_BAR_COLOR_SEQUENCE","mainColor","alternateColor","ROW_BAR_COLOR_ALTERNATE_COLOR","buildPopoverTrigger","data","child","rowHeaderPopover","popoverTriggerProps","position","customOffset","offset","children","trigger","delay","popoverContent","content","_createElement","StyledPopoverTrigger","Object","assign","key","id","zIndex","scrollPosition","calculateScrollPosition","scrollTime","interval","options","roundToInterval","renderRowHeader","rowHeaderContent","_jsxs","_Fragment","_jsx","ClickableRowHeaderTitle","$isClickable","onRowNameClick","onClick","event","handleRowNameClick","weight","name","RowHeaderSubtitle","subtitle","RowHeader","$isScrolled","role","renderLazyLoadRow","TimeTableRow","LoadingBar","LoadingWrapper","map","_","index","LoadingCell","$width","Container","TimeTableHeader","selectedDate","EmptyTableContainer","className","tabIndex","VisuallyHidden","Loader","$isEmptyContent","NoResultsFound","type","description","TimeTableContainer","$loading","$allRecordsLoaded","TimeTableHeaderRow","RowColumnHeader","$isScrolledY","$isScrolledX","ColumnHeaderRow","$numOfColumns","$intervalWidth","columnHeader","ColumnHeader","ColumnHeaderTitle","TimeTableBody","RowBar","rowBarColor","containerRef"],"mappings":"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"}
+{"version":3,"file":"timetable.js","sources":["../../src/timetable/timetable.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { isEmpty, throttle } from \"lodash\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { ErrorDisplay } from \"../error-display\";\nimport type { PopoverTriggerProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n    MIN_INTERVAL_WIDTH,\n    ROW_BAR_COLOR_ALTERNATE_COLOR,\n    ROW_BAR_COLOR_SEQUENCE,\n    ROW_HEADER_WIDTH,\n    ROW_INTERVAL,\n} from \"./const\";\nimport * as styles from \"./timetable.styles\";\nimport { TimeTableHeader } from \"./timetable-header/timetable-header\";\nimport { RowBar } from \"./timetable-row/row-bar\";\nimport type { TimeTableProps, TimeTableRef, TimeTableRowData } from \"./types\";\n\nconst Component = (props: TimeTableProps, ref: React.Ref<TimeTableRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        date,\n        emptyContentMessage,\n        rowData,\n        loading,\n        minTime = \"00:00\",\n        maxTime = \"23:00\",\n        initialScrollTime,\n        minDate,\n        maxDate,\n        totalRecords,\n        showCurrentDateAsToday,\n        showDateAsShortForm,\n        onPage,\n        onRefresh,\n        onNextDayClick,\n        onPreviousDayClick,\n        onCalendarDateSelect,\n        roundInitialScrollTime = true,\n        ...otherProps\n    } = props;\n    const testId = otherProps[\"data-testid\"] || \"timetable\";\n    const timetableMinTime = TimeHelper.roundToNearestInterval(minTime, 60);\n    const timetableMaxTime = TimeHelper.roundToNearestInterval(\n        maxTime,\n        60,\n        true\n    );\n    const hourlyIntervals = TimeHelper.generateHourlyIntervals(\n        timetableMinTime,\n        timetableMaxTime\n    );\n    const numberOfIntervals = Math.ceil(\n        (hourlyIntervals.length * 60) / ROW_INTERVAL\n    );\n    const formattedDate = dayjs(date).format(\"D MMMM YYYY\");\n    const timetableAriaLabel = `Timetable of resource availability, for ${formattedDate}, from ${dayjs(\n        timetableMinTime,\n        \"HH:mm\"\n    ).format(\"ha\")} to ${dayjs(timetableMaxTime, \"HH:mm\").format(\"ha\")}`;\n    const ariaRowCount = (totalRecords || rowData.length) + 1;\n    const ariaColCount = numberOfIntervals + 1;\n\n    const isEmptyContent = totalRecords === 0 || isEmpty(rowData);\n    const allRecordsLoaded = isEmptyContent || rowData.length === totalRecords;\n    const hasLazyLoad = !allRecordsLoaded && !!onPage;\n    const tableContainerRef = useRef<HTMLDivElement>(null);\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const columnHeaderRowRef = useRef<HTMLDivElement>(null);\n    const loadingWrapperRef = useRef<HTMLDivElement>(null);\n    const [isScrolledX, setIsScrolledX] = useState<boolean>(false);\n    const [isScrolledY, setIsScrolledY] = useState<boolean>(false);\n    const [intervalWidth, setIntervalWidth] = useState<number>(0);\n    const [loadMore, setLoadMore] = useState<boolean>(false);\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    useApplyStyle(columnHeaderRowRef, {\n        [styles.tokens.columnHeaderRow.columnWidth]: `${intervalWidth * 4}px`,\n    });\n\n    useApplyStyle(loadingWrapperRef, {\n        [styles.tokens.loadingWrapper.cellWidth]: `${intervalWidth * 4}px`,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const handleScroll = throttle(() => {\n            if (tableContainerRef.current) {\n                setIsScrolledX(tableContainerRef.current.scrollLeft > 0);\n                setIsScrolledY(tableContainerRef.current.scrollTop > 0);\n            }\n\n            if (loadMore || !tableContainerRef.current) return;\n\n            const { scrollTop, clientHeight, scrollHeight } =\n                tableContainerRef.current;\n            const scrollBottomTolerance = 1;\n            const isEndReached =\n                Math.ceil(scrollTop + clientHeight) >=\n                scrollHeight - scrollBottomTolerance;\n            const shouldLoadMore =\n                isEndReached && !allRecordsLoaded && onPage && !loading;\n\n            if (shouldLoadMore) {\n                setLoadMore(true);\n                onPage();\n            }\n        }, 100);\n\n        const tableContainer = tableContainerRef.current;\n\n        if (tableContainer) {\n            tableContainer.addEventListener(\"scroll\", handleScroll);\n        }\n\n        return () => {\n            if (tableContainer) {\n                tableContainer.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, [allRecordsLoaded, loadMore, loading, onPage]);\n\n    useEffect(() => {\n        setLoadMore(false);\n    }, [rowData]);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, intervalWidth, timetableMinTime, timetableMaxTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    /**\n     * Handles when the TimeTable component is resized.\n     *\n     * @remarks\n     * When the component is resized, we recalculate the width of each interval\n     * in the Timetable. We do this by dividing the width of the container by\n     * the number of intervals per row bar. We also make sure that the width\n     * of each interval is at least 21px, otherwise it becomes too small.\n     */\n    const handleResize = () => {\n        if (tableContainerRef.current) {\n            const numberOfIntervalsPerRowBar = Math.ceil(\n                (hourlyIntervals.length * 60) / ROW_INTERVAL\n            );\n            const tableContainerWidth =\n                tableContainerRef.current.clientWidth - ROW_HEADER_WIDTH;\n            const calcWidth = tableContainerWidth / numberOfIntervalsPerRowBar;\n            const width =\n                calcWidth > MIN_INTERVAL_WIDTH ? calcWidth : MIN_INTERVAL_WIDTH;\n            setIntervalWidth(width);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: tableContainerRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    const handleRowNameClick = (\n        data: TimeTableRowData,\n        event: React.MouseEvent\n    ) => {\n        if (data.onRowNameClick) {\n            data.onRowNameClick(data, event);\n        }\n    };\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * Using closures to more efficiently loop through and wrap the color sequencing instead of modding large numbers repeatedly\n     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#closure\n     */\n    const getColorFromSequence = (() => {\n        let colorIndex = 0;\n        const colorSequenceLength = ROW_BAR_COLOR_SEQUENCE.length;\n\n        return () => {\n            const mainColor = ROW_BAR_COLOR_SEQUENCE[colorIndex];\n            const alternateColor = ROW_BAR_COLOR_ALTERNATE_COLOR[colorIndex];\n            colorIndex = (colorIndex + 1) % colorSequenceLength;\n            return { mainColor, alternateColor };\n        };\n    })();\n\n    const buildPopoverTrigger = (\n        data: TimeTableRowData,\n        child: JSX.Element\n    ) => {\n        if (!data.rowHeaderPopover) {\n            return child;\n        }\n\n        const popoverTriggerProps: PopoverTriggerProps = {\n            position: \"bottom-start\",\n            customOffset: data.rowHeaderPopover.offset,\n            children: child,\n            trigger: data.rowHeaderPopover.trigger,\n            delay: data.rowHeaderPopover.delay,\n            popoverContent: data.rowHeaderPopover.content,\n        };\n\n        return (\n            <PopoverTrigger\n                {...popoverTriggerProps}\n                className={styles.popoverTrigger}\n                key={`${data.id}-popover-trigger`}\n                zIndex={2}\n            >\n                {child}\n            </PopoverTrigger>\n        );\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (\n            initialScrollTime &&\n            tableContainerRef.current &&\n            intervalWidth > 0\n        ) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: timetableMinTime,\n                maxTime: timetableMaxTime,\n                interval: ROW_INTERVAL,\n                intervalWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                tableContainerRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRowHeader = (data: TimeTableRowData) => {\n        const rowHeaderContent = (\n            <>\n                <Typography.BodyMD\n                    className={clsx(\n                        styles.clickableRowHeaderTitle,\n                        !!data.onRowNameClick &&\n                            styles.clickableRowHeaderTitleClickable\n                    )}\n                    onClick={(event: React.MouseEvent) =>\n                        handleRowNameClick(data, event)\n                    }\n                    weight=\"semibold\"\n                    data-testid={`${data.id}-row-header-title`}\n                >\n                    {data.name}\n                </Typography.BodyMD>\n\n                <Typography.BodyXS\n                    weight=\"bold\"\n                    className={clsx(\n                        styles.rowHeaderSubtitle,\n                        !data.subtitle && styles.rowHeaderSubtitleHidden\n                    )}\n                    data-testid={`${data.id}-row-header-subtitle`}\n                >\n                    {data.subtitle}\n                </Typography.BodyXS>\n            </>\n        );\n\n        return (\n            <div\n                className={clsx(\n                    styles.rowHeader,\n                    isScrolledX && styles.rowHeaderScrolled\n                )}\n                key={`${data.id}-row-header`}\n                role=\"rowheader\"\n                aria-colindex={1}\n            >\n                {buildPopoverTrigger(data, rowHeaderContent)}\n            </div>\n        );\n    };\n\n    const renderColumnHeaders = () => {\n        // Don't render first column if there are no rows\n\n        return hourlyIntervals.map((columnHeader: string) => (\n            <div\n                className={styles.columnHeader}\n                key={`${columnHeader}-column-key`}\n                data-testid={`${columnHeader}-column`}\n            >\n                <Typography.BodySM\n                    className={styles.columnHeaderTitle}\n                    weight={\"semibold\"}\n                >\n                    {columnHeader}\n                </Typography.BodySM>\n            </div>\n        ));\n    };\n\n    const renderRows = () => {\n        if (loading) {\n            return (\n                <LoadingDotsSpinner\n                    data-testid=\"timetable-loading-spinner\"\n                    className={clsx(\n                        styles.loadingSpinner,\n                        isEmptyContent\n                            ? styles.loadingSpinnerEmptyContent\n                            : styles.loadingSpinnerHasContent\n                    )}\n                />\n            );\n        }\n\n        return (\n            <div\n                className={styles.timeTableBody}\n                data-testid=\"content-container-id\"\n                ref={contentContainerRef}\n                role=\"rowgroup\"\n            >\n                {rowData.map((data, index) => {\n                    return (\n                        <div\n                            className={styles.timeTableRow}\n                            key={`${index}-timetable-row`}\n                            role=\"row\"\n                            aria-rowindex={index + 2}\n                            aria-label={data.name}\n                        >\n                            {renderRowHeader(data)}\n                            <RowBar\n                                key={`${index}-row-bar`}\n                                timetableMinTime={timetableMinTime}\n                                timetableMaxTime={timetableMaxTime}\n                                rowBarColor={getColorFromSequence()}\n                                intervalWidth={intervalWidth}\n                                containerRef={contentContainerRef}\n                                {...data}\n                            />\n                        </div>\n                    );\n                })}\n                {renderLazyLoadRow()}\n            </div>\n        );\n    };\n\n    const renderLazyLoadRow = () => {\n        if (loading || !loadMore) return;\n        return (\n            <div className={styles.timeTableRow}>\n                <div\n                    className={clsx(\n                        styles.rowHeader,\n                        isScrolledX && styles.rowHeaderScrolled\n                    )}\n                >\n                    <div className={styles.loadingBar} />\n                </div>\n                <div\n                    ref={loadingWrapperRef}\n                    className={styles.loadingWrapper}\n                    data-testid=\"lazy-loader\"\n                    role=\"presentation\"\n                >\n                    {hourlyIntervals.map((_, index) => (\n                        <div\n                            className={styles.loadingCell}\n                            key={`lazy-load-cell-${index}`}\n                        >\n                            <div className={styles.loadingBar} />\n                        </div>\n                    ))}\n                </div>\n            </div>\n        );\n    };\n\n    if (isEmptyContent) {\n        return (\n            <div {...otherProps} data-testid={testId}>\n                <TimeTableHeader\n                    selectedDate={date}\n                    loading={loading || loadMore}\n                    tableContainerRef={tableContainerRef}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    totalRecords={totalRecords}\n                    showCurrentDateAsToday={showCurrentDateAsToday}\n                    showDateAsShortForm={showDateAsShortForm}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onRefresh={onRefresh}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n                <div\n                    className={clsx(\n                        styles.emptyTableContainer,\n                        \"empty-container\"\n                    )}\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    aria-atomic\n                    aria-busy={loading}\n                >\n                    {!loading ? (\n                        <ErrorDisplay\n                            className={styles.noResultsFound}\n                            type=\"no-item-found\"\n                            description={emptyContentMessage}\n                        />\n                    ) : (\n                        <>\n                            <VisuallyHidden>{`Loading ${timetableAriaLabel}`}</VisuallyHidden>\n                            <LoadingDotsSpinner\n                                data-testid=\"timetable-loading-spinner\"\n                                className={clsx(\n                                    styles.loadingSpinner,\n                                    isEmptyContent\n                                        ? styles.loadingSpinnerEmptyContent\n                                        : styles.loadingSpinnerHasContent\n                                )}\n                            />\n                        </>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div {...otherProps} data-testid={testId}>\n            <TimeTableHeader\n                data-id=\"timetable-date-navigator\"\n                selectedDate={date}\n                loading={loading || loadMore}\n                tableContainerRef={tableContainerRef}\n                minDate={minDate}\n                maxDate={maxDate}\n                totalRecords={totalRecords}\n                showCurrentDateAsToday={showCurrentDateAsToday}\n                showDateAsShortForm={showDateAsShortForm}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onRefresh={onRefresh}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            <div\n                data-id=\"timetable-container\"\n                data-testid=\"timetable-container\"\n                ref={tableContainerRef}\n                className={clsx(\n                    styles.timeTableContainer,\n                    hasLazyLoad && styles.timeTableContainerNotAllLoaded,\n                    loading && styles.timeTableContainerLoading\n                )}\n                role=\"grid\"\n                aria-label={timetableAriaLabel}\n                aria-rowcount={ariaRowCount}\n                aria-colcount={ariaColCount}\n                aria-busy={loadMore}\n                tabIndex={0}\n            >\n                <div\n                    className={styles.timeTableHeaderRow}\n                    role=\"row\"\n                    aria-rowindex={1}\n                    data-testid={\"row-header-column-id\"}\n                >\n                    <div\n                        className={clsx(\n                            styles.rowColumnHeader,\n                            (isScrolledX || isScrolledY) &&\n                                styles.rowColumnHeaderScrolled,\n                            isScrolledX && styles.rowColumnHeaderScrolledX,\n                            isScrolledY && styles.rowColumnHeaderScrolledY\n                        )}\n                        role=\"columnheader\"\n                        aria-colindex={1}\n                    >\n                        <VisuallyHidden>Resource</VisuallyHidden>\n                    </div>\n                    <div\n                        ref={columnHeaderRowRef}\n                        className={clsx(\n                            styles.columnHeaderRow,\n                            isScrolledY && styles.columnHeaderRowScrolled\n                        )}\n                        role=\"presentation\"\n                    >\n                        {renderColumnHeaders()}\n                    </div>\n                </div>\n                {renderRows()}\n            </div>\n        </div>\n    );\n};\n\nexport const TimeTable = forwardRef<TimeTableRef, TimeTableProps>(Component);\n"],"names":["TimeTable","forwardRef","props","ref","date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime","otherProps","testId","timetableMinTime","TimeHelper","roundToNearestInterval","timetableMaxTime","hourlyIntervals","generateHourlyIntervals","numberOfIntervals","Math","ceil","length","ROW_INTERVAL","timetableAriaLabel","dayjs","format","ariaRowCount","ariaColCount","isEmptyContent","isEmpty","allRecordsLoaded","hasLazyLoad","tableContainerRef","useRef","contentContainerRef","columnHeaderRowRef","loadingWrapperRef","isScrolledX","setIsScrolledX","useState","isScrolledY","setIsScrolledY","intervalWidth","setIntervalWidth","loadMore","setLoadMore","useImperativeHandle","resetScroll","useApplyStyle","styles.tokens","columnHeaderRow","columnWidth","loadingWrapper","cellWidth","useEffect","handleScroll","throttle","current","scrollLeft","scrollTop","clientHeight","scrollHeight","tableContainer","addEventListener","removeEventListener","useResizeDetector","onResize","numberOfIntervalsPerRowBar","calcWidth","clientWidth","ROW_HEADER_WIDTH","MIN_INTERVAL_WIDTH","targetRef","refreshMode","refreshRate","getColorFromSequence","colorIndex","colorSequenceLength","ROW_BAR_COLOR_SEQUENCE","mainColor","alternateColor","ROW_BAR_COLOR_ALTERNATE_COLOR","buildPopoverTrigger","data","child","rowHeaderPopover","popoverTriggerProps","position","customOffset","offset","children","trigger","delay","popoverContent","content","_createElement","PopoverTrigger","Object","assign","className","styles.popoverTrigger","key","id","zIndex","scrollPosition","calculateScrollPosition","scrollTime","interval","options","roundToInterval","renderRowHeader","rowHeaderContent","_jsxs","_Fragment","_jsx","Typography","BodyMD","clsx","styles.clickableRowHeaderTitle","onRowNameClick","styles.clickableRowHeaderTitleClickable","onClick","event","handleRowNameClick","weight","name","BodyXS","styles.rowHeaderSubtitle","subtitle","styles.rowHeaderSubtitleHidden","styles.rowHeader","styles.rowHeaderScrolled","role","renderLazyLoadRow","styles.timeTableRow","styles.loadingBar","styles.loadingWrapper","map","_","index","styles.loadingCell","TimeTableHeader","selectedDate","styles.emptyTableContainer","tabIndex","VisuallyHidden","LoadingDotsSpinner","styles.loadingSpinner","styles.loadingSpinnerEmptyContent","styles.loadingSpinnerHasContent","ErrorDisplay","styles.noResultsFound","type","description","styles.timeTableContainer","styles.timeTableContainerNotAllLoaded","styles.timeTableContainerLoading","styles.timeTableHeaderRow","styles.rowColumnHeader","styles.rowColumnHeaderScrolled","styles.rowColumnHeaderScrolledX","styles.rowColumnHeaderScrolledY","styles.columnHeaderRow","styles.columnHeaderRowScrolled","columnHeader","styles.columnHeader","BodySM","styles.columnHeaderTitle","styles.timeTableBody","RowBar","rowBarColor","containerRef"],"mappings":"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"}

package/timetable/timetable.styles.d.ts

@@ -0,0 +1,41 @@
+export declare const tokens: {
+    rowColumnHeader: {
+        clipRight: string;
+        clipBottom: string;
+    };
+    columnHeaderRow: {
+        columnWidth: string;
+    };
+    loadingWrapper: {
+        cellWidth: string;
+    };
+};
+export declare const emptyTableContainer: import("@linaria/core").LinariaClassName;
+export declare const timeTableContainer: import("@linaria/core").LinariaClassName;
+export declare const timeTableContainerNotAllLoaded: import("@linaria/core").LinariaClassName;
+export declare const timeTableContainerLoading: import("@linaria/core").LinariaClassName;
+export declare const rowColumnHeader: import("@linaria/core").LinariaClassName;
+export declare const rowColumnHeaderScrolled: import("@linaria/core").LinariaClassName;
+export declare const rowColumnHeaderScrolledX: import("@linaria/core").LinariaClassName;
+export declare const rowColumnHeaderScrolledY: import("@linaria/core").LinariaClassName;
+export declare const timeTableHeaderRow: import("@linaria/core").LinariaClassName;
+export declare const columnHeaderRow: import("@linaria/core").LinariaClassName;
+export declare const columnHeaderRowScrolled: import("@linaria/core").LinariaClassName;
+export declare const columnHeader: import("@linaria/core").LinariaClassName;
+export declare const columnHeaderTitle: import("@linaria/core").LinariaClassName;
+export declare const timeTableBody: import("@linaria/core").LinariaClassName;
+export declare const timeTableRow: import("@linaria/core").LinariaClassName;
+export declare const rowHeader: import("@linaria/core").LinariaClassName;
+export declare const rowHeaderScrolled: import("@linaria/core").LinariaClassName;
+export declare const clickableRowHeaderTitle: import("@linaria/core").LinariaClassName;
+export declare const clickableRowHeaderTitleClickable: import("@linaria/core").LinariaClassName;
+export declare const rowHeaderSubtitle: import("@linaria/core").LinariaClassName;
+export declare const rowHeaderSubtitleHidden: import("@linaria/core").LinariaClassName;
+export declare const loadingSpinner: import("@linaria/core").LinariaClassName;
+export declare const loadingSpinnerEmptyContent: import("@linaria/core").LinariaClassName;
+export declare const loadingSpinnerHasContent: import("@linaria/core").LinariaClassName;
+export declare const noResultsFound: import("@linaria/core").LinariaClassName;
+export declare const loadingWrapper: import("@linaria/core").LinariaClassName;
+export declare const loadingCell: import("@linaria/core").LinariaClassName;
+export declare const loadingBar: import("@linaria/core").LinariaClassName;
+export declare const popoverTrigger: import("@linaria/core").LinariaClassName;

package/timetable/timetable.styles.js

@@ -0,0 +1,2 @@
+import"./timetable.styles_7rp8kz.css";const l={columnHeaderRow:{columnWidth:"--fds-internal-timetable-columnHeaderRow-columnWidth"},loadingWrapper:{cellWidth:"--fds-internal-timetable-loadingWrapper-cellWidth"}},t="erxhy6s",e="t1e3v70i",r="t1rmyx7n",c="t1gzwlj3",i="rlj7vfj",n="r1wcbob7",d="rwd1dpu",o="r14gjl6n",a="tvbecqk",b="club8pr",p="c1ww0xmb",w="cu00ucx",m="c78q521",u="t12ob72k",s="tcjynx9",x="r1bl65p4",y="r18q97gy",g="c1wixfzv",j="c1ydv4q1",q="r1g67qip",v="rr9vcmw",W="lywjuzz",h="l1x75bdd",z="l1c8n8nw",f="n1c42c7o",k="l5bp49u",_="l1gsk7y7",H="lwaowax",A="p1l2dqit";export{g as clickableRowHeaderTitle,j as clickableRowHeaderTitleClickable,w as columnHeader,b as columnHeaderRow,p as columnHeaderRowScrolled,m as columnHeaderTitle,t as emptyTableContainer,H as loadingBar,_ as loadingCell,W as loadingSpinner,h as loadingSpinnerEmptyContent,z as loadingSpinnerHasContent,k as loadingWrapper,f as noResultsFound,A as popoverTrigger,i as rowColumnHeader,n as rowColumnHeaderScrolled,d as rowColumnHeaderScrolledX,o as rowColumnHeaderScrolledY,x as rowHeader,y as rowHeaderScrolled,q as rowHeaderSubtitle,v as rowHeaderSubtitleHidden,u as timeTableBody,e as timeTableContainer,c as timeTableContainerLoading,r as timeTableContainerNotAllLoaded,a as timeTableHeaderRow,s as timeTableRow,l as tokens};
+//# sourceMappingURL=timetable.styles.js.map

package/timetable/timetable.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timetable.styles.js","sources":["../../src/timetable/timetable.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Shadow, Spacing } from \"../theme\";\nimport {\n    MIN_HOURLY_INTERVAL_WIDTH,\n    ROW_HEADER_WIDTH,\n    ROW_HEIGHT,\n} from \"./const\";\n\nexport const tokens = {\n    rowColumnHeader: {\n        clipRight: \"--fds-internal-timetable-rowColumnHeader-clipRight\",\n        clipBottom: \"--fds-internal-timetable-rowColumnHeader-clipBottom\",\n    },\n    columnHeaderRow: {\n        columnWidth: \"--fds-internal-timetable-columnHeaderRow-columnWidth\",\n    },\n    loadingWrapper: {\n        cellWidth: \"--fds-internal-timetable-loadingWrapper-cellWidth\",\n    },\n};\n\n// -----------------------------------------------------------------------------\n// TABLE\n// -----------------------------------------------------------------------------\n\nexport const emptyTableContainer = css`\n    display: grid;\n    overflow: scroll;\n    position: relative;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px auto;\n`;\n\nexport const timeTableContainer = css`\n    display: grid;\n    align-content: start;\n    overflow: scroll;\n    position: relative;\n    isolation: isolate;\n`;\n\nexport const timeTableContainerNotAllLoaded = css`\n    padding-bottom: 128px;\n`;\n\nexport const timeTableContainerLoading = css`\n    &:hover {\n        cursor: not-allowed;\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// TABLE HEADER\n// -----------------------------------------------------------------------------\n\nexport const rowColumnHeader = css`\n    ${tokens.rowColumnHeader.clipRight}: 0;\n    ${tokens.rowColumnHeader.clipBottom}: 0;\n\n    position: sticky;\n    top: 0;\n    left: 0;\n    background-color: ${Colour[\"bg\"]};\n    width: ${ROW_HEADER_WIDTH}px;\n    height: ${ROW_HEIGHT}px;\n    z-index: 2;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    box-shadow: none;\n    clip-path: inset(0);\n    transition: box-shadow 0.5s ease-in-out, clip-path 0.5s ease-in-out;\n`;\n\nexport const rowColumnHeaderScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n    clip-path: inset(\n        0 var(${tokens.rowColumnHeader.clipRight})\n            var(${tokens.rowColumnHeader.clipBottom}) 0\n    );\n`;\n\nexport const rowColumnHeaderScrolledX = css`\n    ${tokens.rowColumnHeader.clipRight}: -0.12px;\n`;\n\nexport const rowColumnHeaderScrolledY = css`\n    ${tokens.rowColumnHeader.clipBottom}: -0.12px;\n`;\n\nexport const timeTableHeaderRow = css`\n    display: grid;\n    position: sticky;\n    top: 0;\n    z-index: 4;\n    background-color: ${Colour[\"bg\"]};\n    grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n    width: max-content;\n    min-width: 100%;\n    height: ${ROW_HEIGHT}px;\n`;\n\nexport const columnHeaderRow = css`\n    display: grid;\n    background-color: ${Colour[\"bg\"]};\n    height: ${ROW_HEIGHT}px;\n    grid-auto-flow: column;\n    grid-auto-columns: max(\n        var(${tokens.columnHeaderRow.columnWidth}),\n        ${MIN_HOURLY_INTERVAL_WIDTH}px\n    );\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n`;\n\nexport const columnHeaderRowScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n\nexport const columnHeader = css`\n    min-width: ${MIN_HOURLY_INTERVAL_WIDTH}px;\n    display: flex;\n    align-items: flex-end;\n    padding-bottom: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const columnHeaderTitle = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// TABLE BODY\n// -----------------------------------------------------------------------------\n\nexport const timeTableBody = css`\n    width: max-content;\n    min-width: 100%;\n`;\n\nexport const timeTableRow = css`\n    display: grid;\n    grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n    width: max-content;\n    min-width: 100%;\n    height: ${ROW_HEIGHT}px;\n`;\n\nexport const rowHeader = css`\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: center;\n    position: sticky;\n    left: 0;\n    background-color: ${Colour[\"bg\"]};\n    z-index: 3;\n    width: ${ROW_HEADER_WIDTH}px;\n    height: ${ROW_HEIGHT}px;\n    text-align: right;\n    padding: 0 ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-32\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-right: ${Border[\"width-005\"]} ${Border[\"solid\"]}\n        ${Colour[\"border-primary\"]};\n    border-left: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    transition: all 0.5s ease-in-out;\n`;\n\nexport const rowHeaderScrolled = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n    clip-path: inset(0 -6px 0 0);\n`;\n\nexport const clickableRowHeaderTitle = css`\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 100%;\n    white-space: nowrap;\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const clickableRowHeaderTitleClickable = css`\n    &:hover {\n        cursor: pointer;\n    }\n`;\n\nexport const rowHeaderSubtitle = css`\n    display: inline-flex;\n    gap: ${Spacing[\"spacing-4\"]};\n    align-items: center;\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const rowHeaderSubtitleHidden = css`\n    display: none;\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING AND ERROR\n// -----------------------------------------------------------------------------\n\nexport const loadingSpinner = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    grid-row: 2;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const loadingSpinnerEmptyContent = css`\n    grid-column: 1 / -1;\n`;\n\nexport const loadingSpinnerHasContent = css`\n    grid-column: 2 / -1;\n`;\n\nexport const noResultsFound = css`\n    grid-column: 1 / -1;\n    grid-row: 2;\n    padding: ${Spacing[\"spacing-72\"]} 0;\n`;\n\n// -----------------------------------------------------------------------------\n// LAZY LOADING\n// -----------------------------------------------------------------------------\n\nexport const loadingWrapper = css`\n    /* reset variable to prevent leaking to child components */\n    ${tokens.loadingWrapper.cellWidth}: initial;\n\n    display: flex;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const loadingCell = css`\n    border-right: ${Border[\"width-005\"]} ${Border[\"solid\"]}\n        ${Colour[\"border-primary\"]};\n    width: var(${tokens.loadingWrapper.cellWidth});\n    height: 100%;\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-12\"]};\n`;\n\nexport const loadingBar = css`\n    @keyframes timetable-loading-gradient {\n        0% {\n            background-position: -468px 0;\n        }\n        100% {\n            background-position: 468px 0;\n        }\n    }\n\n    height: 28px;\n    width: 100%;\n    background: linear-gradient(\n        to right,\n        ${Colour.Primitive[\"neutral-95\"]} 8%,\n        ${Colour.Primitive[\"neutral-100\"]} 18%,\n        ${Colour.Primitive[\"neutral-95\"]} 33%\n    );\n    background-size: 800px 104px;\n    animation: timetable-loading-gradient 1.5s forwards infinite;\n`;\n\n// -----------------------------------------------------------------------------\n// MISCELLANEOUS\n// -----------------------------------------------------------------------------\n\nexport const popoverTrigger = css`\n    max-width: 24rem !important;\n    &:hover {\n        cursor: default;\n    }\n`;\n"],"names":["tokens","columnHeaderRow","columnWidth","loadingWrapper","cellWidth","emptyTableContainer","timeTableContainer","timeTableContainerNotAllLoaded","timeTableContainerLoading","rowColumnHeader","rowColumnHeaderScrolled","rowColumnHeaderScrolledX","rowColumnHeaderScrolledY","timeTableHeaderRow","columnHeaderRowScrolled","columnHeader","columnHeaderTitle","timeTableBody","timeTableRow","rowHeader","rowHeaderScrolled","clickableRowHeaderTitle","clickableRowHeaderTitleClickable","rowHeaderSubtitle","rowHeaderSubtitleHidden","loadingSpinner","loadingSpinnerEmptyContent","loadingSpinnerHasContent","noResultsFound","loadingCell","loadingBar","popoverTrigger"],"mappings":"+DASO,MAAMA,EAAS,CAKlBC,gBAAiB,CACbC,YAAa,wDAEjBC,eAAgB,CACZC,UAAW,sDAQNC,EAAmB,UAOnBC,EAAkB,WAQlBC,EAA8B,WAI9BC,EAAyB,WAUzBC,EAAe,UAiBfC,EAAuB,WAQvBC,EAAwB,UAIxBC,EAAwB,WAIxBC,EAAkB,UAYlBZ,EAAe,UAafa,EAAuB,WAIvBC,EAAY,UAOZC,EAAiB,UAQjBC,EAAa,WAKbC,EAAY,UAQZC,EAAS,WAoBTC,EAAiB,WAKjBC,EAAuB,WASvBC,EAAgC,WAMhCC,EAAiB,WAOjBC,EAAuB,UAQvBC,EAAc,UASdC,EAA0B,WAI1BC,EAAwB,WAIxBC,EAAc,WAUdzB,EAAc,UAQd0B,EAAW,WAQXC,EAAU,UA0BVC,EAAc"}

package/timetable/timetable.styles_7rp8kz.css

@@ -0,0 +1,46 @@
+.erxhy6s{display:-ms-grid;display:grid;overflow:scroll;position:relative;-ms-grid-columns:252px auto;grid-template-columns:252px auto;}
+.t1e3v70i{display:-ms-grid;display:grid;-webkit-align-content:start;-ms-flex-line-pack:start;align-content:start;overflow:scroll;position:relative;isolation:isolate;}
+.t1rmyx7n{padding-bottom:128px;}
+.t1gzwlj3:hover{cursor:not-allowed;}
+.rlj7vfj{--fds-internal-timetable-rowColumnHeader-clipRight:0;--fds-internal-timetable-rowColumnHeader-clipBottom:0;position:-webkit-sticky;position:sticky;top:0;left:0;background-color:var(--fds-colour-bg);width:252px;height:68px;z-index:2;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);box-shadow:none;-webkit-clip-path:inset(0);clip-path:inset(0);-webkit-transition:box-shadow 0.5s ease-in-out,clip-path 0.5s ease-in-out;transition:box-shadow 0.5s ease-in-out,clip-path 0.5s ease-in-out;}
+.r1wcbob7{box-shadow:var(--fds-shadow-md-subtle);-webkit-clip-path:inset(
+        0 var(--fds-internal-timetable-rowColumnHeader-clipRight)
+            var(--fds-internal-timetable-rowColumnHeader-clipBottom) 0
+    );clip-path:inset(
+        0 var(--fds-internal-timetable-rowColumnHeader-clipRight)
+            var(--fds-internal-timetable-rowColumnHeader-clipBottom) 0
+    );}
+.rwd1dpu{--fds-internal-timetable-rowColumnHeader-clipRight:-0.12px;}
+.r14gjl6n{--fds-internal-timetable-rowColumnHeader-clipBottom:-0.12px;}
+.tvbecqk{display:-ms-grid;display:grid;position:-webkit-sticky;position:sticky;top:0;z-index:4;background-color:var(--fds-colour-bg);-ms-grid-columns:252px max-content;grid-template-columns:252px max-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;height:68px;}
+.club8pr{display:-ms-grid;display:grid;background-color:var(--fds-colour-bg);height:68px;-ms-grid-auto-flow:column;grid-auto-flow:column;-ms-grid-auto-columns:max(
+        var(--fds-internal-timetable-columnHeaderRow-columnWidth),
+        84px
+    );grid-auto-columns:max(
+        var(--fds-internal-timetable-columnHeaderRow-columnWidth),
+        84px
+    );border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
+.c1ww0xmb{box-shadow:var(--fds-shadow-md-subtle);}
+.cu00ucx{min-width:84px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;padding-bottom:var(--fds-spacing-4);}
+.c78q521{color:var(--fds-colour-text-subtler);}
+.t12ob72k{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;}
+.tcjynx9{display:-ms-grid;display:grid;-ms-grid-columns:252px max-content;grid-template-columns:252px max-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;height:68px;}
+.r1bl65p4{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:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:-webkit-sticky;position:sticky;left:0;background-color:var(--fds-colour-bg);z-index:3;width:252px;height:68px;text-align:right;padding:0 var(--fds-spacing-16) 0 var(--fds-spacing-32);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-right:var(--fds-border-width-005) var(--fds-border-style-solid) var(--fds-colour-border-primary);border-left:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
+.r18q97gy{box-shadow:var(--fds-shadow-md-subtle);-webkit-clip-path:inset(0 -6px 0 0);clip-path:inset(0 -6px 0 0);}
+.c1wixfzv{display:inline-block;text-overflow:ellipsis;overflow:hidden;width:100%;white-space:nowrap;color:var(--fds-colour-text-primary);}
+.c1ydv4q1:hover{cursor:pointer;}
+.r1g67qip{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;gap:var(--fds-spacing-4);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--fds-colour-text-subtler);}
+.rr9vcmw{display:none;}
+.lywjuzz{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;-ms-grid-row:2;grid-row:2;width:100%;height:100%;}
+.l1x75bdd{-ms-grid-column:1/-1;grid-column:1/-1;}
+.l1c8n8nw{-ms-grid-column:2/-1;grid-column:2/-1;}
+.n1c42c7o{-ms-grid-column:1/-1;grid-column:1/-1;-ms-grid-row:2;grid-row:2;padding:var(--fds-spacing-72) 0;}
+.l5bp49u{--fds-internal-timetable-loadingWrapper-cellWidth:initial;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.l1gsk7y7{border-right:var(--fds-border-width-005) var(--fds-border-style-solid) var(--fds-colour-border-primary);width:var(--fds-internal-timetable-loadingWrapper-cellWidth);height:100%;padding:var(--fds-spacing-20) var(--fds-spacing-12);}
+.lwaowax{height:28px;width:100%;background:linear-gradient(
+        to right,
+        var(--fds-colour-neutral-95) 8%,
+        var(--fds-colour-neutral-100) 18%,
+        var(--fds-colour-neutral-95) 33%
+    );-webkit-background-size:800px 104px;background-size:800px 104px;-webkit-animation:timetable-loading-gradient-lwaowax 1.5s forwards infinite;animation:timetable-loading-gradient-lwaowax 1.5s forwards infinite;}@-webkit-keyframes timetable-loading-gradient-lwaowax{0%{-webkit-background-position:-468px 0;background-position:-468px 0;}100%{-webkit-background-position:468px 0;background-position:468px 0;}}@keyframes timetable-loading-gradient-lwaowax{0%{-webkit-background-position:-468px 0;background-position:-468px 0;}100%{-webkit-background-position:468px 0;background-position:468px 0;}}
+.p1l2dqit{max-width:24rem!important;}.p1l2dqit:hover{cursor:default;}

package/timetable/types.d.ts

@@ -1,15 +1,14 @@
-import type { PopoverV2TriggerType } from "../popover-v2";
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
+import type { PopoverTriggerType } from "../popover";
 export type TimeTableCellType = "filled" | "blocked" | "default" | "disabled" | "pending";
 export interface TimeTableCellStyleAttributes {
     /** Main background color for the cell */
-    backgroundColor?: string | ((props: V3_ThemeStyleProps) => string) | undefined;
+    backgroundColor?: string | undefined;
     /** Alternate background color (used for striped patterns in blocked/pending status) */
-    altBackgroundColor?: string | ((props: V3_ThemeStyleProps) => string) | undefined;
+    altBackgroundColor?: string | undefined;
     /** Hover background color for the cell */
-    hoverBackgroundColor?: string | ((props: V3_ThemeStyleProps) => string) | undefined;
+    hoverBackgroundColor?: string | undefined;
     /** Alternate hover background color for the cell */
-    altHoverBackgroundColor?: string | ((props: V3_ThemeStyleProps) => string) | undefined;
+    altHoverBackgroundColor?: string | undefined;
     /** Display style for the cell. If not set, defaults based on cell type (blocked/pending = striped, others = solid) */
     styleType?: "default" | "solid" | "stripes" | undefined;
 }
@@ -39,7 +38,7 @@ export interface TimeTableRowData {
 }
 export interface TimeTablePopoverProps {
     /** The trigger type for showing the popover */
-    trigger: PopoverV2TriggerType;
+    trigger: PopoverTriggerType;
     /** The content to display in the popover */
     content: string | JSX.Element | (() => React.ReactNode);
     /** Delay in milliseconds before opening/closing the popover */

package/toast/toast.d.ts

@@ -1,2 +1,2 @@
 import type { ToastProps } from "./types";
-export declare const Toast: ({ type, title, label, autoDismiss, autoDismissTime, onDismiss, fixed, actionButton, ...otherProps }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toast: ({ type, title, label, className, autoDismiss, autoDismissTime, onDismiss, fixed, actionButton, ...otherProps }: ToastProps) => import("react/jsx-runtime").JSX.Element;

package/toast/toast.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i}from"react/jsx-runtime";import{CrossIcon as r,ICircleFillIcon as n,ExclamationCircleFillIcon as s,ExclamationTriangleFillIcon as o,TickCircleFillIcon as a}from"@lifesg/react-icons";import{useSpring as l,easings as c}from"@react-spring/web";import m,{useRef as d,useState as u,useContext as p,useEffect as f}from"react";import{r as y}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as h}from"styled-components";import{inertValue as v,VisuallyHidden as x}from"../shared/accessibility/index.js";import{V3_Breakpoint as g}from"../v3_theme/index.js";import{Wrapper as b,ContentWrapper as j,TextIconWrapper as k,TextContainer as D,ActionButton as E,DismissButton as $,Title as T,DescriptionMD as w,DescriptionBL as C}from"./toast.styles.js";const _=4e3,B={success:a,warning:o,error:s,info:n},L=n=>{var{type:s="success",title:o,label:a,autoDismiss:L,autoDismissTime:O=_,onDismiss:Q,fixed:V=!0,actionButton:X}=n,Y=e(n,["type","title","label","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton"]);const I=d(null),[M,R]=u(!1),W=p(h),q=g["lg-max"]({theme:W}),z=y.useMediaQuery({maxWidth:q});f((()=>{R(!0)}),[]),f((()=>{if(!L)return;const e=setTimeout((()=>{R(!1)}),O);return()=>clearTimeout(e)}),[L]),f((()=>{const e=e=>{var t;"Escape"===e.key&&(null===(t=I.current)||void 0===t?void 0:t.contains(document.activeElement))&&A()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[]);const A=()=>{R(!1)},F=l({opacity:M?1:0,transform:M?z?"translateY(0%)":"translateX(0%)":z?"translateY(-1500%)":"translateX(150%)",config:{easing:c.easeInOutQuart,duration:1e3},onRest:()=>{M||null==Q||Q()}});return t(b,Object.assign({ref:I,style:F,$type:s,$fixed:V,role:"alert",inert:v(!M)},Y,{children:[i(x,{children:s}),t(j,{children:[t(k,{$type:s,children:[(()=>{const e=B[s];return e&&i(e,{"aria-hidden":!0})})(),t(D,{children:[o&&(m.isValidElement(o)?o:i(T,{$type:s,role:"presentation",children:o})),a&&(m.isValidElement(a)?a:i(o?w:C,{$type:s,children:a}))]})]}),X&&i(E,{styleType:"light",onClick:X.onClick,children:X.label})]}),t($,{$type:s,onClick:A,children:[i(x,{role:"presentation",children:"Close notification"}),i(r,{"aria-hidden":!0})]})]}))};export{L as Toast};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i}from"react/jsx-runtime";import{CrossIcon as r,ICircleFillIcon as s,ExclamationCircleFillIcon as o,ExclamationTriangleFillIcon as n,TickCircleFillIcon as a}from"@lifesg/react-icons";import{useSpring as l,easings as m,animated as c}from"@react-spring/web";import d from"clsx";import p,{useRef as u,useState as h,useEffect as f}from"react";import{Button as y}from"../button/button.js";import{inertValue as j,VisuallyHidden as v}from"../shared/accessibility/index.js";import{ClickableIcon as b}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.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"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as k}from"../theme/utils/use-media-query.js";import{Typography as g}from"../typography/index.js";import{wrapper as x,contentWrapper as N,textIconWrapper as D,textContainer as E,actionButton as T,dismissButton as B,title as w,description as C}from"./toast.styles.js";const L=4e3,q={success:a,warning:n,error:o,info:s},O=s=>{var{type:o="success",title:n,label:a,className:O,autoDismiss:V,autoDismissTime:X=L,onDismiss:Y,fixed:_=!0,actionButton:z}=s,I=e(s,["type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton"]);const M=u(null),[Q,R]=h(!1),A=k("lg");f((()=>{R(!0)}),[]),f((()=>{if(!V)return;const e=setTimeout((()=>{R(!1)}),X);return()=>clearTimeout(e)}),[V,X]),f((()=>{const e=e=>{var t;"Escape"===e.key&&(null===(t=M.current)||void 0===t?void 0:t.contains(document.activeElement))&&F()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[]);const F=()=>{R(!1)},G=l({opacity:Q?1:0,transform:Q?A?"translateY(0%)":"translateX(0%)":A?"translateY(-1500%)":"translateX(150%)",config:{easing:m.easeInOutQuart,duration:1e3},onRest:()=>{Q||null==Y||Y()}});return t(c.div,Object.assign({ref:M,style:G,className:d(x,O),"data-type":o,"data-fixed":_,role:"alert",inert:j(!Q)},I,{children:[i(v,{children:o}),t("div",{className:N,children:[t("div",{className:D,"data-type":o,children:[(()=>{const e=q[o];return e&&i(e,{"aria-hidden":!0})})(),t("div",{className:E,children:[n&&(p.isValidElement(n)?n:i("h2",{className:w,role:"presentation",children:n})),a&&(p.isValidElement(a)?a:i(n?g.BodyMD:g.BodyBL,{className:C,children:a}))]})]}),z&&i(y,{className:T,styleType:"light",onClick:z.onClick,sizeType:"small",children:z.label})]}),t(b,{className:B,onClick:F,children:[i(v,{role:"presentation",children:"Close notification"}),i(r,{"aria-hidden":!0})]})]}))};export{O as Toast};
 //# sourceMappingURL=toast.js.map

package/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { easings, useSpring } from \"@react-spring/web\";\nimport React, { useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    ActionButton,\n    ContentWrapper,\n    DescriptionBL,\n    DescriptionMD,\n    DismissButton,\n    TextContainer,\n    TextIconWrapper,\n    Title,\n    Wrapper,\n} from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const theme = useContext(ThemeContext);\n\n    const mobileBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: 1000,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <Title $type={type} role=\"presentation\">\n                    {title}\n                </Title>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return <DescriptionMD $type={type}>{label}</DescriptionMD>;\n        } else {\n            return <DescriptionBL $type={type}>{label}</DescriptionBL>;\n        }\n    };\n\n    return (\n        <Wrapper\n            ref={toastRef}\n            style={transitions}\n            $type={type}\n            $fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <ContentWrapper>\n                <TextIconWrapper $type={type}>\n                    {renderIcon()}\n                    <TextContainer>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </TextContainer>\n                </TextIconWrapper>\n\n                {actionButton && (\n                    <ActionButton\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                    >\n                        {actionButton.label}\n                    </ActionButton>\n                )}\n            </ContentWrapper>\n            <DismissButton $type={type} onClick={handleDismiss}>\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </DismissButton>\n        </Wrapper>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","Toast","_a","type","title","label","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","Wrapper","Object","assign","ref","style","$type","$fixed","role","inert","inertValue","children","_jsx","VisuallyHidden","ContentWrapper","TextIconWrapper","Icon","renderIcon","TextContainer","React","isValidElement","Title","DescriptionMD","DescriptionBL","ActionButton","styleType","onClick","DismissButton","CrossIcon"],"mappings":"w0BA2BA,MAAMA,EAA4B,IAE5BC,EAAiB,CACnBC,QAASC,EACTC,QAASC,EACTC,MAAOC,EACPC,KAAMC,GAGGC,EAASC,QAAAC,KAClBA,EAAO,UAASC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,gBACXA,EAAkBhB,EAAyBiB,UAC3CA,EAASC,MACTA,GAAQ,EAAIC,aACZA,GAAYR,EACTS,EAAUC,EAAAV,EATK,CAAA,OAAA,QAAA,QAAA,cAAA,kBAAA,YAAA,QAAA,iBAclB,MAAMW,EAAWC,EAAuB,OACjCC,EAAWC,GAAcC,GAAkB,GAE5CC,EAAQC,EAAWC,GAEnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,cAAc,CAC3BC,SAAUJ,IAMdK,GAAU,KACNV,GAAW,EAAK,GACjB,IAEHU,GAAU,KACN,IAAKpB,EAAa,OAElB,MAAMqB,EAAUC,YAAW,KACvBZ,GAAW,EAAM,GAClBT,GAEH,MAAO,IAAMsB,aAAaF,EAAQ,GACnC,CAACrB,IAEJoB,GAAU,KACN,MAAMI,EAAiBC,UAED,WAAdA,EAAMC,MACU,QAAhB9B,EAAAW,EAASoB,eAAO,IAAA/B,OAAA,EAAAA,EAAEgC,SAASC,SAASC,iBAEpCC,GACJ,EAIJ,OADAF,SAASG,iBAAiB,UAAWR,GAC9B,KACHK,SAASI,oBAAoB,UAAWT,EAAc,CACzD,GACF,IAKH,MAAMO,EAAgB,KAClBrB,GAAW,EAAM,EAMfwB,EAAcC,EAAU,CAC1BC,QAAS3B,EAAY,EAAI,EACzB4B,UAAW5B,EACLQ,EACI,iBACA,iBACJA,EACA,qBACA,mBACNqB,OAAQ,CACJC,OAAQC,EAAQC,eAChBC,SAAU,KAEdC,OAAQ,KACClC,GAAWP,SAAAA,GAAa,IAkCrC,OACI0C,EAACC,EAAOC,OAAAC,OAAA,CACJC,IAAKzC,EACL0C,MAAOf,EAAWgB,MACXrD,EAAIsD,OACHhD,EACRiD,KAAK,QACLC,MAAOC,GAAY7C,IACfJ,EAAU,CAAAkD,SAAA,CAEdC,EAACC,EAAc,CAAAF,SAAE1D,IACjB+C,EAACc,EAAc,CAAAH,SAAA,CACXX,EAACe,EAAe,CAAAT,MAAQrD,EAAI0D,SAAA,CAvCrB,MACf,MAAMK,EAAO1E,EAAeW,GAC5B,OAAO+D,GAAQJ,EAACI,qBAAmB,EAsCtBC,GACDjB,EAACkB,EAAa,CAAAP,SAAA,CACTzD,IApCbiE,EAAMC,eAAelE,GACdA,EAGH0D,EAACS,EAAK,CAAAf,MAAQrD,EAAMuD,KAAK,eAAcG,SAClCzD,KAgCIC,IAzBbgE,EAAMC,eAAejE,GACdA,EAEAyD,EADA1D,EACCoE,EAEAC,EAFa,CAAAjB,MAAQrD,EAAI0D,SAAGxD,WA0B/BK,GACGoD,EAACY,EAAY,CACTC,UAAU,QACVC,QAASlE,EAAakE,QAAOf,SAE5BnD,EAAaL,WAI1B6C,EAAC2B,EAAa,CAAArB,MAAQrD,EAAMyE,QAASvC,EAAawB,SAAA,CAC9CC,EAACC,GAAeL,KAAK,eAAcG,SAAA,uBAGnCC,EAACgB,EAAS,CAAA,eAAA,UAER"}
+{"version":3,"file":"toast.js","sources":["../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { animated, easings, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\nconst EASING_DURATION = 1000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    className,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const isMobile = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss, autoDismissTime]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: EASING_DURATION,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <h2 className={styles.title} role=\"presentation\">\n                    {title}\n                </h2>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {label}\n                </Typography.BodyMD>\n            );\n        } else {\n            return (\n                <Typography.BodyBL className={styles.description}>\n                    {label}\n                </Typography.BodyBL>\n            );\n        }\n    };\n\n    return (\n        <animated.div\n            ref={toastRef}\n            style={transitions}\n            className={clsx(styles.wrapper, className)}\n            data-type={type}\n            data-fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <div className={styles.contentWrapper}>\n                <div className={styles.textIconWrapper} data-type={type}>\n                    {renderIcon()}\n                    <div className={styles.textContainer}>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </div>\n                </div>\n\n                {actionButton && (\n                    <Button\n                        className={styles.actionButton}\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                        sizeType=\"small\"\n                    >\n                        {actionButton.label}\n                    </Button>\n                )}\n            </div>\n            <ClickableIcon\n                className={styles.dismissButton}\n                onClick={handleDismiss}\n            >\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </ClickableIcon>\n        </animated.div>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","Toast","_a","type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","isMobile","useMaxWidthMediaQuery","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","animated","div","Object","assign","ref","style","clsx","styles.wrapper","role","inert","inertValue","children","_jsx","VisuallyHidden","styles.contentWrapper","styles.textIconWrapper","Icon","renderIcon","styles.textContainer","React","isValidElement","styles.title","Typography","BodyMD","BodyBL","styles.description","Button","styles.actionButton","styleType","onClick","sizeType","ClickableIcon","styles.dismissButton","CrossIcon"],"mappings":"+xCAmBA,MAAMA,EAA4B,IAG5BC,EAAiB,CACnBC,QAASC,EACTC,QAASC,EACTC,MAAOC,EACPC,KAAMC,GAGGC,EAASC,IAAA,IAAAC,KAClBA,EAAO,gBACPC,EAAKC,MACLA,EAAKC,UACLA,EAASC,YACTA,EAAWC,gBACXA,EAAkBjB,EAAyBkB,UAC3CA,EAASC,MACTA,GAAQ,EAAIC,aACZA,GAAYT,EACTU,EAAUC,EAAAX,EAVK,CAAA,OAAA,QAAA,QAAA,YAAA,cAAA,kBAAA,YAAA,QAAA,iBAelB,MAAMY,EAAWC,EAAuB,OACjCC,EAAWC,GAAcC,GAAkB,GAE5CC,EAAWC,EAAsB,MAKvCC,GAAU,KACNJ,GAAW,EAAK,GACjB,IAEHI,GAAU,KACN,IAAKd,EAAa,OAElB,MAAMe,EAAUC,YAAW,KACvBN,GAAW,EAAM,GAClBT,GAEH,MAAO,IAAMgB,aAAaF,EAAQ,GACnC,CAACf,EAAaC,IAEjBa,GAAU,KACN,MAAMI,EAAiBC,UAED,WAAdA,EAAMC,MACU,QAAhBzB,EAAAY,EAASc,eAAO,IAAA1B,OAAA,EAAAA,EAAE2B,SAASC,SAASC,iBAEpCC,GACJ,EAIJ,OADAF,SAASG,iBAAiB,UAAWR,GAC9B,KACHK,SAASI,oBAAoB,UAAWT,EAAc,CACzD,GACF,IAKH,MAAMO,EAAgB,KAClBf,GAAW,EAAM,EAMfkB,EAAcC,EAAU,CAC1BC,QAASrB,EAAY,EAAI,EACzBsB,UAAWtB,EACLG,EACI,iBACA,iBACJA,EACA,qBACA,mBACNoB,OAAQ,CACJC,OAAQC,EAAQC,eAChBC,SAnFY,KAqFhBC,OAAQ,KACC5B,GAAWP,SAAAA,GAAa,IA0CrC,OACIoC,EAACC,EAASC,IAAGC,OAAAC,OAAA,CACTC,IAAKpC,EACLqC,MAAOhB,EACP7B,UAAW8C,EAAKC,EAAgB/C,GAAU,YAC/BH,EAAI,aACHO,EACZ4C,KAAK,QACLC,MAAOC,GAAYxC,IACfJ,EAAU,CAAA6C,SAAA,CAEdC,EAACC,EAAc,CAAAF,SAAEtD,IACjB0C,EAAA,MAAA,CAAKvC,UAAWsD,EAAqBH,SAAA,CACjCZ,EAAA,MAAA,CAAKvC,UAAWuD,EAAsB,YAAa1D,EAAIsD,SAAA,CAhDhD,MACf,MAAMK,EAAOtE,EAAeW,GAC5B,OAAO2D,GAAQJ,EAACI,qBAAmB,EA+CtBC,GACDlB,EAAA,MAAA,CAAKvC,UAAW0D,EAAoBP,SAAA,CAC/BrD,IA7Cb6D,EAAMC,eAAe9D,GACdA,EAGHsD,EAAA,KAAA,CAAIpD,UAAW6D,EAAcb,KAAK,eAAcG,SAC3CrD,KAyCIC,IAlCb4D,EAAMC,eAAe7D,GACdA,EAGHqD,EAFGtD,EAEFgE,EAAWC,OAMXD,EAAWE,OANM,CAAChE,UAAWiE,EAAkBd,SAC3CpD,WAiCJM,GACG+C,EAACc,EAAM,CACHlE,UAAWmE,EACXC,UAAU,QACVC,QAAShE,EAAagE,QACtBC,SAAS,QAAOnB,SAEf9C,EAAaN,WAI1BwC,EAACgC,GACGvE,UAAWwE,EACXH,QAAS3C,EAAayB,SAAA,CAEtBC,EAACC,EAAc,CAACL,KAAK,eAAcG,SAAA,uBAGnCC,EAACqB,EAAS,CAAA,eAAA,UAEH"}

package/toast/toast.styles.d.ts

@@ -1,51 +1,8 @@
-import type { ToastType } from "./types";
-interface StyleProps {
-    $type: ToastType;
-    $fixed?: boolean | undefined;
-}
-export declare const Wrapper: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string>;
-export declare const ContentWrapper: 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 TextIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const TextContainer: 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 Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const DescriptionMD: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, keyof StyleProps> & StyleProps, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const DescriptionBL: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, keyof StyleProps> & StyleProps, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const DismissButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, keyof StyleProps> & StyleProps, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const contentWrapper: import("@linaria/core").LinariaClassName;
+export declare const textIconWrapper: import("@linaria/core").LinariaClassName;
+export declare const textContainer: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const actionButton: import("@linaria/core").LinariaClassName;
+export declare const dismissButton: import("@linaria/core").LinariaClassName;