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

package/timepicker/types.d.ts

@@ -1,47 +1,82 @@
 import type { RefObject } from "react";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper/types";
+/**
+ * Time display and value format used by `Timepicker`.
+ *
+ * - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }`
+ * - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }`
+ */
 export type TimepickerFormat = "12hr" | "24hr";
+/**
+ * Props for the `Timepicker` component.
+ */
 export interface TimepickerProps {
     className?: string | undefined;
     id?: string | undefined;
     style?: React.CSSProperties | undefined;
+    /**
+     * ID of an element that labels the timepicker input.
+     */
     "aria-labelledby"?: string | undefined;
+    /**
+     * ID of an element that describes the timepicker input.
+     */
     "aria-describedby"?: string | undefined;
     "data-testid"?: string | undefined;
     /**
-     * The value of the time input in a string based format
-     *
-     * 24 hour uses "hh:mm" e.g. `"13:00"`
+     * The controlled time value as a string.
      *
-     * 12 hour uses "hh:mmA" e.g. `"01:00PM"`
+     * - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }`
+     * - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }`
      */
     value?: string | undefined;
+    /**
+     * Placeholder text shown when no value is selected.
+     *
+     * @default "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format.
+     */
     placeholder?: string | undefined;
     /**
-     * The time input format in `12hr` or `24hr`. Defaults to `24hr`
+     * The time display and input format.
+     *
+     * @default "24hr"
      */
     format?: TimepickerFormat | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
+    /**
+     * Renders the input in an error state when `true`.
+     */
     error?: boolean | undefined;
+    /** Aligns the dropdown relative to the trigger element. */
     alignment?: DropdownAlignmentType | undefined;
+    /** CSS `z-index` applied to the dropdown overlay. */
     dropdownZIndex?: number | undefined;
-    dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**
-     * Called when the user makes a selection and clicks on the "Confirm" button
-     * in the time selection box. Returns a string based format.
+     * The root element that contains the dropdown element.
+     *
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
      *
-     * 24 hour returns "hh:mm" e.g. `"13:00"`
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
      *
-     * 12 hour returns "hh:mmA" e.g. `"01:00PM"`
+     * @default document.body
      */
-    onChange?: ((value: string) => void) | undefined;
+    dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**
-     * Called when the field is focused
+     * Called when the user confirms a selection.
+     *
+     * @param value The selected time value as a string.
+     * - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }`
+     * - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }`
      */
-    onFocus?: (() => void) | undefined;
+    onChange?: ((value: string) => void) | undefined;
     /**
-     * Called when a defocus is made on the field
+     * Called when the timepicker input receives focus.
      */
+    onFocus?: (() => void) | undefined;
+    /** Called when focus leaves both the input and the dropdown. */
     onBlur?: (() => void) | undefined;
 }

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

@@ -1,2 +1,2 @@
-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"../../theme/utils/use-media-query.js";import"../../popover/popover.styles_ujnf0h.css";import{PopoverTrigger as e}from"../../popover/popover-trigger.js";import"../../popover/popover-inline/popover-inline.styles_bkopnt.css";const r=({children:r,customPopover:o})=>{if(!o)return r;const i={position:"bottom-start",customOffset:o.offset,children:r,trigger:o.trigger,delay:o.delay,popoverContent:o.content};return t(e,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/modal-v2.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"../../theme/utils/use-media-query.js";import"../../popover/popover.styles_ujnf0h.css";import{PopoverTrigger as e}from"../../popover/popover-trigger.js";import"../../popover/popover-inline/popover-inline.styles_bkopnt.css";const r=({children:r,customPopover:o})=>{if(!o)return r;const i={position:"bottom-start",customOffset:o.offset,children:r,trigger:o.trigger,delay:o.delay,popoverContent:o.content};return t(e,Object.assign({},i))};export{r 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 { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\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: PopoverTriggerProps = {\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":"66BASO,MAAMA,EAAsB,EAC/BC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,SAAU,eACVC,aAAcH,EAAcI,OAC5BL,SAAUA,EACVM,QAASL,EAAcK,QACvBC,MAAON,EAAcM,MACrBC,eAAgBP,EAAcQ,SAGlC,OAAOC,EAACC,EAAcC,OAAAC,OAAA,CAAA,EAAKX,GAAuB"}
+{"version":3,"file":"with-optional-popover.js","sources":["../../../src/timetable/timetable-row/with-optional-popover.tsx"],"sourcesContent":["import type { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\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: PopoverTriggerProps = {\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":"g7BASO,MAAMA,EAAsB,EAC/BC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,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.d.ts

@@ -1,2 +1,8 @@
 import type { TimeTableProps, TimeTableRef } from "./types";
+/**
+ * A scrollable grid that visualises time slot availability across a day.
+ *
+ * Use `TimeTable` to display one day's schedule for multiple resources side by
+ * side.
+ */
 export declare const TimeTable: (props: TimeTableProps & import("react").RefAttributes<TimeTableRef>) => React.ReactElement | null;

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 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};
+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 l,useImperativeHandle as n,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/modal-v2.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:le,rowData:ne,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||ne.length)+1,Se=Re+1,Pe=0===ue||p.isEmpty(ne),Ae=Pe||ne.length===ue,_e=!Ae&&!!ge,$e=i(null),Ie=i(null),We=i(null),ze=i(null),[Le,Oe]=l(!1),[Be,Fe]=l(!1),[Ye,Ee]=l(0),[Ge,qe]=l(!1);n(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)}),[ne]),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:le})})]}):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:[ne.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 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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"}
+{"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\n// @catalog\n/**\n * A scrollable grid that visualises time slot availability across a day.\n *\n * Use `TimeTable` to display one day's schedule for multiple resources side by\n * side.\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/types.d.ts

@@ -1,115 +1,240 @@
 import type { PopoverTriggerType } from "../popover";
+/**
+ * Visual and interaction state of a timetable cell.
+ *
+ * - `"filled"` — cell represents an occupied or confirmed entry
+ * - `"blocked"` — cell is unavailable and cannot be selected
+ * - `"default"` — cell is available with no special state
+ * - `"disabled"` — cell is inactive and non-interactive
+ * - `"pending"` — cell represents a provisional or in-progress entry
+ */
 export type TimeTableCellType = "filled" | "blocked" | "default" | "disabled" | "pending";
+/**
+ * Background pattern for a timetable cell.
+ *
+ * - `"solid"` renders a flat fill.
+ * - `"stripes"` renders a diagonal stripe pattern.
+ * - `"default"` uses `"stripes"` for `"blocked"` and `"pending"` cells,
+ *   and `"solid"` for all other statuses.
+ */
+export type TimeTableCellStyleType = "default" | "solid" | "stripes";
+/**
+ * Custom visual styling overrides for an individual timetable cell.
+ */
 export interface TimeTableCellStyleAttributes {
-    /** Main background color for the cell */
+    /** Main background color for the cell. */
     backgroundColor?: string | undefined;
-    /** Alternate background color (used for striped patterns in blocked/pending status) */
+    /**
+     * Alternate background color used for the second stripe in striped patterns.
+     */
     altBackgroundColor?: string | undefined;
-    /** Hover background color for the cell */
+    /** Background color applied on hover. */
     hoverBackgroundColor?: string | undefined;
-    /** Alternate hover background color for the cell */
+    /** Alternate background color applied on hover for striped patterns. */
     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;
+    /**
+     * Cell background pattern.
+     *
+     * @default "default"
+     */
+    styleType?: TimeTableCellStyleType | undefined;
 }
+/**
+ * Imperative handle returned by `TimeTable` via `ref`.
+ */
 export interface TimeTableRef {
-    /** Resets the scroll position to the initialScrollTime if provided */
+    /**
+     * Scrolls the timetable back to `initialScrollTime`.
+     * No-op when `initialScrollTime` is not set.
+     */
     resetScroll: () => void;
 }
+/**
+ * Represents a single row in the timetable.
+ */
 export interface TimeTableRowData {
-    /** Unique identifier for the row */
+    /** Unique identifier for the row. */
     id?: string | undefined;
-    /** Display name of the row */
+    /** Display name shown in the row header. */
     name: string;
-    /** Array of cell data for this row */
+    /** Cells occupying time slots within this row. */
     rowCells: TimeTableRowCellData[];
-    /** Optional subtitle text or element displayed below the row name */
+    /** Secondary text or element rendered beneath the row name in the header. */
     subtitle?: string | JSX.Element | undefined;
-    /** Popover configuration for the row header */
+    /** Popover attached to the row header label. */
     rowHeaderPopover?: TimeTablePopoverProps | undefined;
-    /** Popover configuration for cells outside the time range */
+    /**
+     * Popover shown when the user interacts with cells outside the active time range.
+     */
     outOfRangeCellPopover?: TimeTablePopoverProps | undefined;
-    /** The minimum time for this row. Format in HH:mm. Defaults to minTime */
+    /**
+     * Earliest time this row is active, in `HH:mm` format.
+     * Time slots before this value are rendered as out-of-range.
+     *
+     * @remarks Falls back to the timetable-level `minTime` when omitted.
+     */
     rowMinTime?: string | undefined;
-    /** The maximum time for this row. Format in HH:mm. Defaults to maxTime */
+    /**
+     * Latest time this row is active, in `HH:mm` format.
+     * Time slots after this value are rendered as out-of-range.
+     *
+     * @remarks Falls back to the timetable-level `maxTime` when omitted.
+     */
     rowMaxTime?: string | undefined;
-    /** Callback function when the row name is clicked */
+    /**
+     * Called when the row header name is clicked.
+     *
+     * @param rowData The full row data object for this row.
+     * @param e The originating mouse event.
+     */
     onRowNameClick?: ((rowData: TimeTableRowData, e: React.MouseEvent) => void) | undefined;
 }
+/**
+ * Configuration for a popover attached to a timetable row header or cell.
+ */
 export interface TimeTablePopoverProps {
-    /** The trigger type for showing the popover */
+    /** Interaction that opens the popover */
     trigger: PopoverTriggerType;
-    /** The content to display in the popover */
+    /** Content rendered inside the popover. */
     content: string | JSX.Element | (() => React.ReactNode);
-    /** Delay in milliseconds before opening/closing the popover */
+    /**
+     * Open and close delays in milliseconds.
+     * Useful for hover popovers to avoid flickering on quick mouse movements.
+     */
     delay?: {
         open?: number | undefined;
         close?: number | undefined;
     } | undefined;
-    /** Offset distance of the popover from the trigger element */
+    /** Distance in pixels between the popover and its trigger element. */
     offset?: number | undefined;
 }
+/**
+ * Props for the `TimeTable` component.
+ */
 export interface TimeTableProps {
-    /** Unique identifier for the timetable */
     id?: string | undefined;
-    /** Additional CSS class name */
     className?: string | undefined;
-    /** Test identifier for testing purposes */
     "data-testid"?: string | undefined;
-    /** The date to display in the timetable */
+    /**
+     * The date currently displayed.
+     */
     date: string;
-    /** Message to display when there is no content */
+    /**
+     * Text shown in the empty state when `rowData` is empty or
+     * `totalRecords` is `0`.
+     */
     emptyContentMessage?: string;
-    /** Array of row data to display in the timetable */
+    /** Rows to render in the timetable grid. */
     rowData: TimeTableRowData[];
-    /** Whether the timetable is in a loading state */
+    /**
+     * When `true`, replaces row content with a loading spinner.
+     */
     loading?: boolean | undefined;
-    /** The minimum time of the timetable. Format in HH:mm */
+    /**
+     * Earliest hour column displayed, in `HH:mm` format.
+     * Rounded to the nearest full hour internally.
+     *
+     * @default "00:00"
+     */
     minTime?: string | undefined;
-    /** The maximum time of the timetable. Format in HH:mm */
+    /**
+     * Latest hour column displayed, in `HH:mm` format.
+     * Rounded up to the nearest full hour internally.
+     *
+     * @default "23:00"
+     */
     maxTime?: string | undefined;
-    /** Initial scroll position in HH:mm format (e.g., "09:00" will scroll to 9am on mount) */
+    /**
+     * Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).
+     */
     initialScrollTime?: string | undefined;
-    /** The minimum selectable date */
+    /**
+     * Earliest date the user can navigate to in the date picker.
+     */
     minDate?: string | undefined;
-    /** The maximum selectable date */
+    /**
+     * Latest date the user can navigate to in the date picker
+     */
     maxDate?: string | undefined;
-    /** Total number of records for pagination */
+    /**
+     * Total number of records across all pages.
+     *
+     * When `0`, the empty state is shown regardless of `rowData`.
+     */
     totalRecords?: number | undefined;
-    /** Whether to display the current date as "Today" */
+    /**
+     * When `true`, the date header displays `"Today"` instead of the
+     * formatted date string when `date` matches the current calendar day.
+     */
     showCurrentDateAsToday?: boolean | undefined;
-    /** Whether to display the date in short form */
+    /** When `true`, the date header uses an abbreviated date format. */
     showDateAsShortForm?: boolean | undefined;
-    /** Rounds initial scroll time to the nearest interval, e.g 6:30 will be clamped to 6:00 when interval = 60. Default is true */
+    /**
+     * When `true`, `initialScrollTime` is snapped to the nearest time
+     * interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute
+     * interval).
+     *
+     * @default true
+     */
     roundInitialScrollTime?: boolean | undefined;
-    /** Callback function when the refresh button is clicked */
+    /** Called when the user clicks the refresh button in the header. */
     onRefresh?: (() => void) | undefined;
-    /** Callback function for pagination */
+    /**
+     * Called when the timetable needs to load the next page of rows.
+     *
+     * @remarks Triggered automatically when the user scrolls to the bottom
+     * and `rowData.length` is less than `totalRecords`. Providing this
+     * prop enables lazy loading.
+     */
     onPage?: (() => void) | undefined;
-    /** Callback function when the previous day button is clicked */
+    /**
+     * Called when the user navigates to the previous day.
+     *
+     * @param currentDate The date currently displayed before navigation.
+     */
     onPreviousDayClick: (currentDate: string) => void;
-    /** Callback function when the next day button is clicked */
+    /**
+     * Called when the user navigates to the next day.
+     *
+     * @param currentDate The date currently displayed before navigation.
+     */
     onNextDayClick: (currentDate: string) => void;
-    /** Callback function when a date is selected from the calendar */
+    /**
+     * Called when the user selects a date from the calendar picker.
+     *
+     * @param currentDate The date the user selected.
+     */
     onCalendarDateSelect?: ((currentDate: string) => void) | undefined;
 }
+/**
+ * Represents a single time-slot cell within a timetable row.
+ */
 export interface TimeTableRowCellData {
-    /** Unique identifier for the cell */
+    /** Unique identifier for the cell. */
     id?: string | undefined;
-    /** The start time of the cell. Format in HH:mm */
+    /** Start time of the cell in `HH:mm` format. */
     startTime: string;
-    /** The end time of the cell. Format in HH:mm */
+    /** End time of the cell in `HH:mm` format. */
     endTime: string;
-    /** The status/type of the cell. Values: "filled" | "blocked" | "default" | "disabled" | "pending" */
+    /**
+     * Visual and interaction state of the cell.
+     */
     status: TimeTableCellType;
-    /** Title text displayed in the cell */
+    /** Primary label rendered inside the cell. */
     title?: string | undefined;
-    /** Subtitle text displayed in the cell */
+    /** Secondary label rendered below `title` inside the cell. */
     subtitle?: string | undefined;
-    /** Custom popover configuration for this cell */
+    /** Popover shown when the user interacts with this cell. */
     customPopover?: TimeTablePopoverProps | undefined;
-    /** Custom style attributes for the cell. If not specified, falls back to default row bar colors. */
+    /**
+     * Color and pattern overrides for this cell.
+     */
     cellStyleAttributes?: TimeTableCellStyleAttributes | undefined;
-    /** Callback function when the cell is clicked */
+    /**
+     * Called when the user clicks this cell.
+     *
+     * @param data The cell data for this cell.
+     * @param e The originating mouse event.
+     */
     onClick?: ((data: TimeTableRowCellData, e: React.MouseEvent) => void) | undefined;
 }

package/toast/toast.d.ts

@@ -1,2 +1,8 @@
 import type { ToastProps } from "./types";
+/**
+ * A brief notification that appears on screen to provide feedback about an
+ * operation or event.
+ *
+ * Use `Toast` to surface status messages without interrupting the user's workflow.
+ */
 export declare const Toast: ({ type, title, label, className, autoDismiss, autoDismissTime, onDismiss, fixed, actionButton, ...otherProps }: ToastProps) => import("react/jsx-runtime").JSX.Element;