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

package/timetable/timetable-row/with-optional-popover.d.ts

@@ -1,9 +1,7 @@
-import type { RefObject } from "react";
 import type { TimeTablePopoverProps } from "../types";
 interface ConditionalCellWrapperProps {
-    containerRef: RefObject<HTMLDivElement>;
     children: JSX.Element;
     customPopover?: TimeTablePopoverProps | undefined;
 }
-export declare const WithOptionalPopover: ({ containerRef, children, customPopover, }: ConditionalCellWrapperProps) => JSX.Element;
+export declare const WithOptionalPopover: ({ children, customPopover, }: ConditionalCellWrapperProps) => JSX.Element;
 export {};

package/timetable/timetable-row/with-optional-popover.js

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import"../../_virtual/_tslib.js";import"react";import"styled-components";import"../../modal-v2/index.js";import"../../typography/typography.js";import"../../v3_theme/index.js";import"../../popover-v2/popover.styles.js";import{PopoverTrigger as t}from"../../popover-v2/popover-trigger.js";import"../../popover-v2/popover-inline/popover-inline.styles.js";const r=({containerRef:r,children:e,customPopover:p})=>{if(!p)return e;const i={position:"bottom-start",rootNode:r,customOffset:p.offset,children:e,trigger:p.trigger,delay:p.delay,popoverContent:p.content};return o(t,Object.assign({},i))};export{r as WithOptionalPopover};
+import{jsx as t}from"react/jsx-runtime";import"../../_virtual/_tslib.js";import"clsx";import"react";import"../../theme/theme-provider/context.js";import"../../typography/typography.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"../../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"../../popover-v2/popover.styles_lslc72.css";import{PopoverTrigger as r}from"../../popover-v2/popover-trigger.js";import"../../popover-v2/popover-inline/popover-inline.styles_ziag9c.css";const e=({children:e,customPopover:o})=>{if(!o)return e;const i={position:"bottom-start",customOffset:o.offset,children:e,trigger:o.trigger,delay:o.delay,popoverContent:o.content};return t(r,Object.assign({},i))};export{e as WithOptionalPopover};
 //# sourceMappingURL=with-optional-popover.js.map

package/timetable/timetable-row/with-optional-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-optional-popover.js","sources":["../../../src/timetable/timetable-row/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\n\nimport type { PopoverV2TriggerProps } from \"../../popover-v2\";\nimport { PopoverTrigger } from \"../../popover-v2\";\nimport type { TimeTablePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: TimeTablePopoverProps | undefined;\n}\n\nexport const WithOptionalPopover = ({\n    containerRef,\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverV2TriggerProps = {\n        position: \"bottom-start\",\n        rootNode: containerRef,\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <PopoverTrigger {...popoverTriggerProps} />;\n};\n"],"names":["WithOptionalPopover","containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"yYAYO,MAAMA,EAAsB,EAC/BC,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA6C,CAC/CC,SAAU,eACVC,SAAUL,EACVM,aAAcJ,EAAcK,OAC5BN,SAAUA,EACVO,QAASN,EAAcM,QACvBC,MAAOP,EAAcO,MACrBC,eAAgBR,EAAcS,SAGlC,OAAOC,EAACC,EAAcC,OAAAC,OAAA,CAAA,EAAKZ,GAAuB"}
+{"version":3,"file":"with-optional-popover.js","sources":["../../../src/timetable/timetable-row/with-optional-popover.tsx"],"sourcesContent":["import type { PopoverV2TriggerProps } from \"../../popover-v2\";\nimport { PopoverTrigger } from \"../../popover-v2\";\nimport type { TimeTablePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    children: JSX.Element;\n    customPopover?: TimeTablePopoverProps | undefined;\n}\n\nexport const WithOptionalPopover = ({\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverV2TriggerProps = {\n        position: \"bottom-start\",\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <PopoverTrigger {...popoverTriggerProps} />;\n};\n"],"names":["WithOptionalPopover","children","customPopover","popoverTriggerProps","position","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"y4BASO,MAAMA,EAAsB,EAC/BC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA6C,CAC/CC,SAAU,eACVC,aAAcH,EAAcI,OAC5BL,SAAUA,EACVM,QAASL,EAAcK,QACvBC,MAAON,EAAcM,MACrBC,eAAgBP,EAAcQ,SAGlC,OAAOC,EAACC,EAAcC,OAAAC,OAAA,CAAA,EAAKX,GAAuB"}

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 s,createElement as d}from"react";import{l as c}from"../external/lodash/lodash.js";import{useResizeDetector as m}from"../external/react-resize-detector/build/index.esm.js";import{TimeHelper as h}from"../util/time-helper.js";import{ROW_INTERVAL as u,ROW_HEADER_WIDTH as p,MIN_INTERVAL_WIDTH as f,ROW_BAR_COLOR_ALTERNATE_COLOR as w,ROW_BAR_COLOR_SEQUENCE as g}from"./const.js";import{Container as C,EmptyTableContainer as D,NoResultsFound as b,Loader as y,TimeTableContainer as $,RowColumnHeader as v,RowHeaderColumn as T,ColumnHeaderRow as R,RowHeader as S,ClickableRowHeaderTitle as x,RowHeaderSubtitle as k,ColumnHeader as j,ColumnHeaderTitle as P,ContentContainer as N,StyledPopoverTrigger as A,LoadingBar as H,LoadingWrapper as O,LoadingCell as I}from"./timetable.style.js";import{TimeTableHeader as M}from"./timetable-header/timetable-header.js";import{RowBar as z}from"./timetable-row/row-bar.js";const E=a(((a,E)=>{const{date:L,emptyContentMessage:F,rowData:W,loading:_,minTime:B="00:00",maxTime:X="23:00",initialScrollTime:Y,minDate:q,maxDate:G,totalRecords:J,showCurrentDateAsToday:K,showDateAsShortForm:Q,onPage:U,onRefresh:V,onNextDayClick:Z,onPreviousDayClick:ee,onCalendarDateSelect:te,roundInitialScrollTime:re=!0}=a,oe=e(a,["date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime"]),ae=oe["data-testid"]||"timetable",ie=h.roundToNearestInterval(B,60),ne=h.roundToNearestInterval(X,60,!0),le=h.generateHourlyIntervals(ie,ne),se=0===J||c.isEmpty(W),de=se||W.length===J,ce=i(null),me=i(null),[he,ue]=n(!1),[pe,fe]=n(!1),[we,ge]=n(0),[Ce,De]=n(!1);l(E,(()=>({resetScroll:ye}))),s((()=>{const e=c.throttle((()=>{if(ce.current&&(ue(ce.current.scrollLeft>0),fe(ce.current.scrollTop>0)),Ce||!ce.current)return;const{scrollTop:e,clientHeight:t,scrollHeight:r}=ce.current;Math.ceil(e+t)>=r-1&&!de&&U&&!_&&(De(!0),U())}),100),t=ce.current;return t&&t.addEventListener("scroll",e),()=>{t&&t.removeEventListener("scroll",e)}}),[de,Ce,_,U]),s((()=>{De(!1)}),[W]),s((()=>{ye()}),[Y,we,ie,ne]);m({onResize:()=>{if(ce.current){const e=Math.ceil(60*le.length/u),t=(ce.current.clientWidth-p)/e;ge(t>f?t:f)}},targetRef:ce,refreshMode:"debounce",refreshRate:50});const be=(()=>{let e=0;const t=g.length;return()=>{const r=g[e],o=w[e];return e=(e+1)%t,{mainColor:r,alternateColor:o}}})(),ye=()=>{if(Y&&ce.current&&we>0){const e=h.calculateScrollPosition({scrollTime:Y,minTime:ie,maxTime:ne,interval:u,intervalWidth:we,options:{roundToInterval:re}});null!==e&&(ce.current.scrollLeft=e)}},$e=({wrapper:e,children:t})=>e(t),ve=()=>{if(!_&&Ce)return r(S,{$isScrolled:he,children:r(H,{})})},Te=()=>{if(!_&&Ce)return r(O,{"data-testid":"lazy-loader",children:le.map(((e,t)=>r(I,{$width:4*we,children:r(H,{})},`lazy-load-cell-${t}`)))})};return t(C,se?Object.assign({},oe,{"data-testid":ae,children:[r(M,{selectedDate:L,loading:_||Ce,tableContainerRef:ce,minDate:q,maxDate:G,totalRecords:J,showCurrentDateAsToday:K,showDateAsShortForm:Q,onPreviousDayClick:ee,onNextDayClick:Z,onRefresh:V,onCalendarDateSelect:te}),r(D,{className:"empty-container",children:_?r(y,{$isEmptyContent:se}):r(b,{type:"no-item-found",description:F})})]}):Object.assign({},oe,{"data-testid":ae,children:[r(M,{"data-id":"timetable-date-navigator",selectedDate:L,loading:_||Ce,tableContainerRef:ce,minDate:q,maxDate:G,totalRecords:J,showCurrentDateAsToday:K,showDateAsShortForm:Q,onPreviousDayClick:ee,onNextDayClick:Z,onRefresh:V,onCalendarDateSelect:te}),t($,{"data-id":"timetable-container","data-testid":"timetable-container",ref:ce,$loading:_,$allRecordsLoaded:de||!U,children:[r(v,{$isScrolledY:pe,$isScrolledX:he}),r(T,{$numOfRows:W.length,$isScrolled:he,"data-testid":"row-header-column-id",children:t(o,{children:[W.map(((e,o)=>r($e,{wrapper:t=>((e,t)=>{if(!e.rowHeaderPopover)return t;const r={position:"bottom-start",rootNode:ce,customOffset:e.rowHeaderPopover.offset,children:t,trigger:e.rowHeaderPopover.trigger,delay:e.rowHeaderPopover.delay,popoverContent:e.rowHeaderPopover.content};return d(A,Object.assign({},r,{key:`${e.id}-popover-trigger`,zIndex:2}),t)})(e,t),children:t(S,{$isScrolled:he,children:[r(x,{$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(k,{weight:"bold",$show:!!e.subtitle,"data-testid":`${e.id}-row-header-subtitle`,children:e.subtitle})]},`${e.id}-row-header`)},o))),ve()]})}),r(R,{$numOfColumns:le.length,$isScrolled:pe,children:le.map((e=>r(j,{"data-testid":`${e}-column`,children:r(P,{weight:"semibold",children:e})},`${e}-column-key`)))}),_?r(y,{$isEmptyContent:se}):t(N,{"data-testid":"content-container-id",ref:me,$numOfRows:W.length,children:[W.map(((e,t)=>r(z,Object.assign({timetableMinTime:ie,timetableMaxTime:ne,rowBarColor:be(),intervalWidth:we,containerRef:me},e),`${t}-row-bar`))),Te()]})]})]}))}));export{E 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 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};
 //# sourceMappingURL=timetable.js.map

package/timetable/timetable.js.map

@@ -1 +1 @@
-{"version":3,"file":"timetable.js","sources":["../../src/timetable/timetable.tsx"],"sourcesContent":["import { 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 { 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    ContentContainer,\n    EmptyTableContainer,\n    Loader,\n    LoadingBar,\n    LoadingCell,\n    LoadingWrapper,\n    NoResultsFound,\n    RowColumnHeader,\n    RowHeader,\n    RowHeaderColumn,\n    RowHeaderSubtitle,\n    StyledPopoverTrigger,\n    TimeTableContainer,\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\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            rootNode: tableContainerRef,\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\n    const ConditionalCellWrapper = ({\n        wrapper,\n        children,\n    }: {\n        wrapper: (child: JSX.Element) => JSX.Element;\n        children: JSX.Element;\n    }) => {\n        return wrapper(children);\n    };\n\n    const renderRowHeaderColumn = () => {\n        return (\n            <>\n                {rowData.map((data, index) => {\n                    return (\n                        <ConditionalCellWrapper\n                            key={index}\n                            wrapper={(child: JSX.Element) =>\n                                buildPopoverTrigger(data, child)\n                            }\n                        >\n                            <RowHeader\n                                $isScrolled={isScrolledX}\n                                key={`${data.id}-row-header`}\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                            </RowHeader>\n                        </ConditionalCellWrapper>\n                    );\n                })}\n                {renderRowHeaderColumnLazyLoad()}\n            </>\n        );\n    };\n\n    const renderRowHeaderColumnLazyLoad = () => {\n        if (loading || !loadMore) return;\n        return (\n            <RowHeader $isScrolled={isScrolledX}>\n                <LoadingBar />\n            </RowHeader>\n        );\n    };\n\n    const renderColumnHeaders = () => {\n        // Don't render first column if there are no rows\n        return hourlyIntervals.map((columnHeader: string) => {\n            return (\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\n    const renderRowBarData = () => {\n        if (loading) return <Loader $isEmptyContent={isEmptyContent} />;\n        return (\n            <ContentContainer\n                data-testid=\"content-container-id\"\n                ref={contentContainerRef}\n                $numOfRows={rowData.length}\n            >\n                {rowData.map((data, index) => {\n                    return (\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                    );\n                })}\n                {renderRowDataLazyLoad()}\n            </ContentContainer>\n        );\n    };\n\n    const renderRowDataLazyLoad = () => {\n        if (loading || !loadMore) return;\n        return (\n            <LoadingWrapper data-testid=\"lazy-loader\">\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        );\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 className=\"empty-container\">\n                    {!loading ? (\n                        <NoResultsFound\n                            type=\"no-item-found\"\n                            description={emptyContentMessage}\n                        />\n                    ) : (\n                        <Loader $isEmptyContent={isEmptyContent}></Loader>\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            >\n                <RowColumnHeader\n                    $isScrolledY={isScrolledY}\n                    $isScrolledX={isScrolledX}\n                ></RowColumnHeader>\n                <RowHeaderColumn\n                    $numOfRows={rowData.length}\n                    $isScrolled={isScrolledX}\n                    data-testid={\"row-header-column-id\"}\n                >\n                    {renderRowHeaderColumn()}\n                </RowHeaderColumn>\n                <ColumnHeaderRow\n                    $numOfColumns={hourlyIntervals.length}\n                    $isScrolled={isScrolledY}\n                >\n                    {renderColumnHeaders()}\n                </ColumnHeaderRow>\n                {renderRowBarData()}\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","isEmptyContent","isEmpty","allRecordsLoaded","length","tableContainerRef","useRef","contentContainerRef","isScrolledX","setIsScrolledX","useState","isScrolledY","setIsScrolledY","intervalWidth","setIntervalWidth","loadMore","setLoadMore","useImperativeHandle","resetScroll","useEffect","handleScroll","throttle","current","scrollLeft","scrollTop","clientHeight","scrollHeight","Math","ceil","tableContainer","addEventListener","removeEventListener","useResizeDetector","onResize","numberOfIntervalsPerRowBar","ROW_INTERVAL","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","scrollPosition","calculateScrollPosition","scrollTime","interval","options","roundToInterval","ConditionalCellWrapper","wrapper","children","renderRowHeaderColumnLazyLoad","_jsx","RowHeader","$isScrolled","LoadingBar","renderRowDataLazyLoad","LoadingWrapper","map","_","index","LoadingCell","_jsxs","Container","Object","assign","TimeTableHeader","selectedDate","EmptyTableContainer","className","Loader","$isEmptyContent","NoResultsFound","type","description","TimeTableContainer","$loading","$allRecordsLoaded","RowColumnHeader","$isScrolledY","$isScrolledX","RowHeaderColumn","$numOfRows","_Fragment","data","child","rowHeaderPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_createElement","StyledPopoverTrigger","key","id","zIndex","buildPopoverTrigger","ClickableRowHeaderTitle","onRowNameClick","onClick","event","handleRowNameClick","weight","name","RowHeaderSubtitle","$show","subtitle","ColumnHeaderRow","$numOfColumns","columnHeader","ColumnHeader","ColumnHeaderTitle","ContentContainer","RowBar","rowBarColor","containerRef"],"mappings":"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"}
+{"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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"}

package/timetable/timetable.style.d.ts

@@ -1,9 +1,6 @@
 interface ColumnHeaderRowProps {
     $numOfColumns: number;
-    $isScrolled: boolean;
-}
-interface RowHeaderColumnProps {
-    $numOfRows: number;
+    $intervalWidth: number;
     $isScrolled: boolean;
 }
 interface TimeTableContainerProps {
@@ -26,34 +23,80 @@ interface RowHeaderSubtitleProps {
 interface LoadingCellWrapperProps {
     $width: number;
 }
-interface ContentContainerPopoverProps {
-    $numOfRows: number;
-}
 interface LoaderProps {
     $isEmptyContent: boolean;
 }
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const EmptyTableContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimeTableContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TimeTableContainerProps>> & string;
-export declare const RowColumnHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, RowColumnHeaderProps>> & string;
-export declare const RowHeaderColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, RowHeaderColumnProps>> & string;
-export declare const ColumnHeaderRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ColumnHeaderRowProps>> & string;
-export declare const ColumnHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ColumnHeaderTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentContainerPopoverProps>> & string;
-export declare const RowHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, RowHeaderProps>> & string;
-export declare const ClickableRowHeaderTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, ClickableRowHeaderTitleProps>> & string;
-export declare const RowHeaderSubtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, RowHeaderSubtitleProps>> & string;
-export declare const Loader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").CustomisableAnimationProps, LoaderProps>> & string & Omit<({ color, ...otherProps }: import("..").CustomisableAnimationProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const NoResultsFound: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ErrorDisplayProps, never>> & string & Omit<({ type, img, title, description, actionButton, additionalProps, imageOnly, illustrationScheme, ...otherProps }: import("..").ErrorDisplayProps) => import("react/jsx-runtime").JSX.Element | null, keyof import("react").Component<any, {}, any>>;
-export declare const LoadingWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LoadingCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LoadingCellWrapperProps>> & string;
-export declare const LoadingBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledPopoverTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").PopoverV2TriggerProps, never>> & string & Omit<({ children, popoverContent, trigger: _trigger, position, zIndex, rootNode, customOffset, delay, onPopoverAppear, onPopoverDismiss, popoverAriaLabel, enableFlip, enableResize, overflow, triggerOnFocus, isModal, ...otherProps }: import("..").PopoverV2TriggerProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Container: 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 EmptyTableContainer: 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 TimeTableContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TimeTableContainerProps> & TimeTableContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TimeTableContainerProps> & TimeTableContainerProps, never>>> & string;
+export declare const RowColumnHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RowColumnHeaderProps> & RowColumnHeaderProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof RowColumnHeaderProps> & RowColumnHeaderProps, never>>> & string;
+export declare const TimeTableHeaderRow: 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 ColumnHeaderRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ColumnHeaderRowProps> & ColumnHeaderRowProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ColumnHeaderRowProps> & ColumnHeaderRowProps, never>>> & string;
+export declare const ColumnHeader: 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 ColumnHeaderTitle: import("styled-components/dist/types").IStyledComponentBase<"web", 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>, never> & Partial<Pick<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>, 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 TimeTableBody: 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 TimeTableRow: 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 RowHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isScrolled"> & RowHeaderProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isScrolled"> & RowHeaderProps, never>>> & string;
+export declare const ClickableRowHeaderTitle: 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>, "$isClickable"> & ClickableRowHeaderTitleProps, 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>, "$isClickable"> & ClickableRowHeaderTitleProps, 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 RowHeaderSubtitle: 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>, "$show"> & RowHeaderSubtitleProps, 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>, "$show"> & RowHeaderSubtitleProps, 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 Loader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("..").CustomisableAnimationProps, "$isEmptyContent"> & LoaderProps, never> & Partial<Pick<import("styled-components").FastOmit<import("..").CustomisableAnimationProps, "$isEmptyContent"> & LoaderProps, never>>> & string & Omit<({ className, color, ...otherProps }: import("..").CustomisableAnimationProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const NoResultsFound: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ErrorDisplayProps, never> & Partial<Pick<import("..").ErrorDisplayProps, never>>> & string & Omit<({ type, img, title, description, actionButton, additionalProps, imageOnly, illustrationScheme, className, ...otherProps }: import("..").ErrorDisplayProps) => import("react/jsx-runtime").JSX.Element | null, keyof import("react").Component<any, {}, any>>;
+export declare const LoadingWrapper: 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 LoadingCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$width"> & LoadingCellWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$width"> & LoadingCellWrapperProps, never>>> & string;
+export declare const LoadingBar: 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 StyledPopoverTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").PopoverV2TriggerProps, never> & Partial<Pick<import("..").PopoverV2TriggerProps, never>>> & string & Omit<({ children, popoverContent, trigger: _trigger, position, zIndex, rootNode, customOffset, delay, onPopoverAppear, onPopoverDismiss, popoverAriaLabel, enableFlip, enableResize, overflow, triggerOnFocus, isModal, className, ...otherProps }: import("..").PopoverV2TriggerProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export {};

package/timetable/timetable.style.js

@@ -1,31 +1,33 @@
-import i,{css as o,keyframes as t}from"styled-components";import"../animations/loading-dots/loading-dots.js";import{LoadingDotsSpinner as r}from"../animations/loading-dots-spinner/loading-dots-spinner.js";import"../animations/loading-spinner/loading-spinner.js";import"react/jsx-runtime";import"react";import{ErrorDisplay as e}from"../error-display/error-display.js";import{V3_Colour as d,V3_Border as n,V3_Shadow as s,V3_Spacing as l}from"../v3_theme/index.js";import"../_virtual/_tslib.js";import"../modal-v2/index.js";import{Typography as p}from"../typography/index.js";import"../popover-v2/popover.styles.js";import{PopoverTrigger as a}from"../popover-v2/popover-trigger.js";import"../popover-v2/popover-inline/popover-inline.styles.js";import{ROW_HEADER_WIDTH as $,ROW_HEIGHT as m,MIN_HOURLY_INTERVAL_WIDTH as c}from"./const.js";const g=i.div``,h=i.div`
+import i,{css as o,keyframes as t}from"styled-components";import"../animations/loading-dots/loading-dots.js";import{LoadingDotsSpinner as e}from"../animations/loading-dots-spinner/loading-dots-spinner.js";import"../animations/loading-spinner/loading-spinner.js";import"react/jsx-runtime";import"react";import"../theme/theme-provider/context.js";import{ErrorDisplay as r}from"../error-display/error-display.js";import"../_virtual/_tslib.js";import"clsx";import{Typography as n}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{Border as s}from"../theme/tokens/border.js";import{Colour as d}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Spacing as p}from"../theme/tokens/spacing.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"../popover-v2/popover.styles_lslc72.css";import{PopoverTrigger as l}from"../popover-v2/popover-trigger.js";import"../popover-v2/popover-inline/popover-inline.styles_ziag9c.css";import{V3_Colour as a,V3_Border as m,V3_Shadow as c,V3_Spacing as $}from"../v3_theme/index.js";import{ROW_HEADER_WIDTH as h,ROW_HEIGHT as g,MIN_HOURLY_INTERVAL_WIDTH as x}from"./const.js";const u=i.div``,b=i.div`
     display: grid;
     overflow: scroll;
     position: relative;
-    grid-template-columns: ${$}px auto;
-`,b=i.div`
+    grid-template-columns: ${h}px auto;
+`,v=i.div`
     display: grid;
+    align-content: start;
     overflow: scroll;
     position: relative;
-    grid-template-columns: ${$}px fit-content(100%);
     padding-bottom: ${i=>i.$allRecordsLoaded?"0":"128px"};
+    isolation: isolate;
     ${i=>{if(i.$loading)return o`
                 &:hover {
                     cursor: not-allowed;
                     padding-bottom: 0;
                 }
             `}}
-`,u=i.div`
+`,w=i.div`
     position: sticky;
     top: 0;
     left: 0;
-    background-color: ${d.bg};
-    width: ${$}px;
+    background-color: ${a.bg};
+    width: ${h}px;
+    height: ${g}px;
     z-index: 2;
-    border-bottom: ${n["width-010"]} ${n.solid}
-        ${d.border};
+    border-bottom: ${m["width-010"]} ${m.solid}
+        ${a.border};
     ${i=>i.$isScrolledX||i.$isScrolledY?o`
-                box-shadow: ${s["md-subtle"]};
+                box-shadow: ${c["md-subtle"]};
                 clip-path: inset(
                     0 ${i.$isScrolledX?"-0.12px":"0"}
                         ${i.$isScrolledY?"-0.12px":"0"} 0
@@ -38,40 +40,46 @@ import i,{css as o,keyframes as t}from"styled-components";import"../animations/l
                 transition: box-shadow 0.5s ease-in-out,
                     clip-path 0.5s ease-in-out;
             `};
-`,x=i.div`
+`,f=i.div`
     display: grid;
     position: sticky;
-    grid-column: 1 / 2;
-    left: 0;
-    z-index: 1;
+    top: 0;
+    z-index: 4;
     background-color: ${d.bg};
-    grid-template-rows: repeat(${i=>i.$numOfRows}, ${m}px);
-`,w=i.div`
+    grid-template-columns: ${h}px max-content;
+    width: max-content;
+    min-width: 100%;
+    height: ${g}px;
+`,y=i.div`
     display: grid;
-    position: sticky;
-    grid-column: 2 / 3;
-    grid-row: 1 / 2;
-    top: 0;
-    z-index: 1;
     background-color: ${d.bg};
-    grid-template-columns: repeat(${i=>i.$numOfColumns}, 1fr);
-    width: 100%;
-    border-bottom: ${n["width-010"]} ${n.solid}
-        ${d.border};
+    height: ${g}px;
+    grid-template-columns: repeat(
+        ${i=>i.$numOfColumns},
+        ${i=>Math.max(4*i.$intervalWidth,x)}px
+    );
+    border-bottom: ${s["width-010"]} ${s.solid} ${d.border};
     transition: all 0.5s ease-in-out;
     ${i=>{if(i.$isScrolled)return o`
-                box-shadow: ${s["md-subtle"]};
+                box-shadow: ${c["md-subtle"]};
             `}};
-`,v=i.div`
-    min-width: ${c}px;
-    align-content: end;
-    margin-bottom: ${l["spacing-4"]};
-`,f=i(p.BodySM)`
-    color: ${d["text-subtler"]};
-`,y=i.div`
-    display: grid;
-    grid-template-rows: repeat(${i=>i.$numOfRows}, ${m}px);
 `,j=i.div`
+    min-width: ${x}px;
+    display: flex;
+    align-items: flex-end;
+    padding-bottom: ${p["spacing-4"]};
+`,k=i(n.BodySM)`
+    color: ${a["text-subtler"]};
+`,_=i.div`
+    width: max-content;
+    min-width: 100%;
+`,S=i.div`
+    display: grid;
+    grid-template-columns: ${h}px max-content;
+    width: max-content;
+    min-width: 100%;
+    height: ${g}px;
+`,A=i.div`
     display: flex;
     flex-direction: column;
     align-items: flex-end;
@@ -79,42 +87,43 @@ import i,{css as o,keyframes as t}from"styled-components";import"../animations/l
     position: sticky;
     left: 0;
     background-color: ${d.bg};
-    width: ${$}px;
-    height: ${m}px;
+    z-index: 3;
+    width: ${h}px;
+    height: ${g}px;
     text-align: right;
-    padding: 0 ${l["spacing-16"]} 0 ${l["spacing-32"]};
-    border-bottom: ${n["width-010"]} ${n.solid}
-        ${d.border};
-    border-right: ${n["width-005"]} ${n.solid}
-        ${d["border-primary"]};
-    border-left: ${n["width-010"]} ${n.solid}
-        ${d.border};
+    padding: 0 ${$["spacing-16"]} 0 ${$["spacing-32"]};
+    border-bottom: ${m["width-010"]} ${m.solid}
+        ${a.border};
+    border-right: ${m["width-005"]} ${m.solid}
+        ${a["border-primary"]};
+    border-left: ${m["width-010"]} ${m.solid}
+        ${a.border};
     transition: all 0.5s ease-in-out;
     ${i=>i.$isScrolled?o`
-                box-shadow: ${s["md-subtle"]};
+                box-shadow: ${c["md-subtle"]};
                 clip-path: inset(0 -6px 0 0);
             `:o`
                 box-shadow: none;
             `};
-`,k=i(p.BodyMD)`
+`,C=i(n.BodyMD)`
     display: inline-block;
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
     white-space: nowrap;
-    color: ${d["text-primary"]};
+    color: ${a["text-primary"]};
     &:hover {
         cursor: ${i=>i.$isClickable?"pointer":"default"};
     }
-`,S=i(p.BodyXS)`
+`,M=i(n.BodyXS)`
     display: inline-flex;
-    gap: ${l["spacing-4"]};
+    gap: ${$["spacing-4"]};
     align-items: center;
-    color: ${d["text-subtler"]};
+    color: ${a["text-subtler"]};
     ${i=>{if(!i.$show)return o`
                 display: none;
             `}}
-`,z=i(r)`
+`,P=i(e)`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -122,42 +131,42 @@ import i,{css as o,keyframes as t}from"styled-components";import"../animations/l
     grid-row: 2;
     width: 100%;
     height: 100%;
-`,B=i(e)`
+`,z=i(r)`
     grid-column: 1 / -1;
     grid-row: 2;
-    padding: ${l["spacing-72"]} 0;
-`,C=i.div`
+    padding: ${$["spacing-72"]} 0;
+`,B=i.div`
     display: flex;
-    border-bottom: ${n["width-010"]} ${n.solid}
-        ${d.border};
-`,O=i.div`
-    border-right: ${n["width-005"]} ${n.solid}
-        ${d["border-primary"]};
+    border-bottom: ${m["width-010"]} ${m.solid}
+        ${a.border};
+`,G=i.div`
+    border-right: ${m["width-005"]} ${m.solid}
+        ${a["border-primary"]};
     width: ${i=>`${i.$width}px`};
     height: 100%;
-    padding: ${l["spacing-20"]} ${l["spacing-12"]};
-`,P=t`
+    padding: ${$["spacing-20"]} ${$["spacing-12"]};
+`,H=t`
   0% {
         background-position: -468px 0;
     }
     100% {
         background-position: 468px 0;
     }
-`,R=i.div`
+`,I=i.div`
     height: 28px;
     width: 100%;
     background: linear-gradient(
         to right,
-        ${d.Primitive["neutral-95"]} 8%,
-        ${d.Primitive["neutral-100"]} 18%,
-        ${d.Primitive["neutral-95"]} 33%
+        ${a.Primitive["neutral-95"]} 8%,
+        ${a.Primitive["neutral-100"]} 18%,
+        ${a.Primitive["neutral-95"]} 33%
     );
     background-size: 800px 104px;
-    animation: ${P} 1.5s forwards infinite;
-`,X=i(a)`
+    animation: ${H} 1.5s forwards infinite;
+`,T=i(l)`
     max-width: 24rem !important;
     &:hover {
         cursor: default;
     }
-`;export{k as ClickableRowHeaderTitle,v as ColumnHeader,w as ColumnHeaderRow,f as ColumnHeaderTitle,g as Container,y as ContentContainer,h as EmptyTableContainer,z as Loader,R as LoadingBar,O as LoadingCell,C as LoadingWrapper,B as NoResultsFound,u as RowColumnHeader,j as RowHeader,x as RowHeaderColumn,S as RowHeaderSubtitle,X as StyledPopoverTrigger,b as TimeTableContainer};
+`;export{C as ClickableRowHeaderTitle,j as ColumnHeader,y as ColumnHeaderRow,k as ColumnHeaderTitle,u as Container,b as EmptyTableContainer,P as Loader,I as LoadingBar,G as LoadingCell,B as LoadingWrapper,z as NoResultsFound,w as RowColumnHeader,A as RowHeader,M as RowHeaderSubtitle,T as StyledPopoverTrigger,_ as TimeTableBody,v as TimeTableContainer,f as TimeTableHeaderRow,S as TimeTableRow};
 //# sourceMappingURL=timetable.style.js.map