npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.2 → 4.0.0-alpha.4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2426) hide show

package/cjs/timetable/timetable-row/with-optional-popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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":["children","customPopover","popoverTriggerProps","position","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"~~y9BASmC~~,EAC/BA,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,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKX,GAAuB"}
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":["children","customPopover","popoverTriggerProps","position","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"ggCASmC,EAC/BA,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,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKX,GAAuB"}

package/cjs/timetable/timetable.js CHANGED Viewed

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

package/cjs/timetable/timetable.js.map CHANGED Viewed

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

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./timetable.styles_7rp8kz.css");exports.clickableRowHeaderTitle="c1wixfzv",exports.clickableRowHeaderTitleClickable="c1ydv4q1",exports.columnHeader="cu00ucx",exports.columnHeaderRow="club8pr",exports.columnHeaderRowScrolled="c1ww0xmb",exports.columnHeaderTitle="c78q521",exports.emptyTableContainer="erxhy6s",exports.loadingBar="lwaowax",exports.loadingCell="l1gsk7y7",exports.loadingSpinner="lywjuzz",exports.loadingSpinnerEmptyContent="l1x75bdd",exports.loadingSpinnerHasContent="l1c8n8nw",exports.loadingWrapper="l5bp49u",exports.noResultsFound="n1c42c7o",exports.popoverTrigger="p1l2dqit",exports.rowColumnHeader="rlj7vfj",exports.rowColumnHeaderScrolled="r1wcbob7",exports.rowColumnHeaderScrolledX="rwd1dpu",exports.rowColumnHeaderScrolledY="r14gjl6n",exports.rowHeader="r1bl65p4",exports.rowHeaderScrolled="r18q97gy",exports.rowHeaderSubtitle="r1g67qip",exports.rowHeaderSubtitleHidden="rr9vcmw",exports.timeTableBody="t12ob72k",exports.timeTableContainer="t1e3v70i",exports.timeTableContainerLoading="t1gzwlj3",exports.timeTableContainerNotAllLoaded="t1rmyx7n",exports.timeTableHeaderRow="tvbecqk",exports.timeTableRow="tcjynx9",exports.tokens={columnHeaderRow:{columnWidth:"--fds-internal-timetable-columnHeaderRow-columnWidth"},loadingWrapper:{cellWidth:"--fds-internal-timetable-loadingWrapper-cellWidth"}};
2	+ //# sourceMappingURL=timetable.styles.js.map

package/cjs/timetable/timetable.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"timetable.styles.js","sources":["../../../src/timetable/timetable.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Shadow, Spacing } from \"../theme\";\nimport {\n MIN_HOURLY_INTERVAL_WIDTH,\n ROW_HEADER_WIDTH,\n ROW_HEIGHT,\n} from \"./const\";\n\nexport const tokens = {\n rowColumnHeader: {\n clipRight: \"--fds-internal-timetable-rowColumnHeader-clipRight\",\n clipBottom: \"--fds-internal-timetable-rowColumnHeader-clipBottom\",\n },\n columnHeaderRow: {\n columnWidth: \"--fds-internal-timetable-columnHeaderRow-columnWidth\",\n },\n loadingWrapper: {\n cellWidth: \"--fds-internal-timetable-loadingWrapper-cellWidth\",\n },\n};\n\n// -----------------------------------------------------------------------------\n// TABLE\n// -----------------------------------------------------------------------------\n\nexport const emptyTableContainer = css`\n display: grid;\n overflow: scroll;\n position: relative;\n grid-template-columns: ${ROW_HEADER_WIDTH}px auto;\n`;\n\nexport const timeTableContainer = css`\n display: grid;\n align-content: start;\n overflow: scroll;\n position: relative;\n isolation: isolate;\n`;\n\nexport const timeTableContainerNotAllLoaded = css`\n padding-bottom: 128px;\n`;\n\nexport const timeTableContainerLoading = css`\n &:hover {\n cursor: not-allowed;\n }\n`;\n\n// -----------------------------------------------------------------------------\n// TABLE HEADER\n// -----------------------------------------------------------------------------\n\nexport const rowColumnHeader = css`\n ${tokens.rowColumnHeader.clipRight}: 0;\n ${tokens.rowColumnHeader.clipBottom}: 0;\n\n position: sticky;\n top: 0;\n left: 0;\n background-color: ${Colour[\"bg\"]};\n width: ${ROW_HEADER_WIDTH}px;\n height: ${ROW_HEIGHT}px;\n z-index: 2;\n border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n box-shadow: none;\n clip-path: inset(0);\n transition: box-shadow 0.5s ease-in-out, clip-path 0.5s ease-in-out;\n`;\n\nexport const rowColumnHeaderScrolled = css`\n box-shadow: ${Shadow[\"md-subtle\"]};\n clip-path: inset(\n 0 var(${tokens.rowColumnHeader.clipRight})\n var(${tokens.rowColumnHeader.clipBottom}) 0\n );\n`;\n\nexport const rowColumnHeaderScrolledX = css`\n ${tokens.rowColumnHeader.clipRight}: -0.12px;\n`;\n\nexport const rowColumnHeaderScrolledY = css`\n ${tokens.rowColumnHeader.clipBottom}: -0.12px;\n`;\n\nexport const timeTableHeaderRow = css`\n display: grid;\n position: sticky;\n top: 0;\n z-index: 4;\n background-color: ${Colour[\"bg\"]};\n grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n width: max-content;\n min-width: 100%;\n height: ${ROW_HEIGHT}px;\n`;\n\nexport const columnHeaderRow = css`\n display: grid;\n background-color: ${Colour[\"bg\"]};\n height: ${ROW_HEIGHT}px;\n grid-auto-flow: column;\n grid-auto-columns: max(\n var(${tokens.columnHeaderRow.columnWidth}),\n ${MIN_HOURLY_INTERVAL_WIDTH}px\n );\n border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n transition: all 0.5s ease-in-out;\n`;\n\nexport const columnHeaderRowScrolled = css`\n box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n\nexport const columnHeader = css`\n min-width: ${MIN_HOURLY_INTERVAL_WIDTH}px;\n display: flex;\n align-items: flex-end;\n padding-bottom: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const columnHeaderTitle = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// TABLE BODY\n// -----------------------------------------------------------------------------\n\nexport const timeTableBody = css`\n width: max-content;\n min-width: 100%;\n`;\n\nexport const timeTableRow = css`\n display: grid;\n grid-template-columns: ${ROW_HEADER_WIDTH}px max-content;\n width: max-content;\n min-width: 100%;\n height: ${ROW_HEIGHT}px;\n`;\n\nexport const rowHeader = css`\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: center;\n position: sticky;\n left: 0;\n background-color: ${Colour[\"bg\"]};\n z-index: 3;\n width: ${ROW_HEADER_WIDTH}px;\n height: ${ROW_HEIGHT}px;\n text-align: right;\n padding: 0 ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-32\"]};\n border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-right: ${Border[\"width-005\"]} ${Border[\"solid\"]}\n ${Colour[\"border-primary\"]};\n border-left: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n transition: all 0.5s ease-in-out;\n`;\n\nexport const rowHeaderScrolled = css`\n box-shadow: ${Shadow[\"md-subtle\"]};\n clip-path: inset(0 -6px 0 0);\n`;\n\nexport const clickableRowHeaderTitle = css`\n display: inline-block;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n white-space: nowrap;\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const clickableRowHeaderTitleClickable = css`\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const rowHeaderSubtitle = css`\n display: inline-flex;\n gap: ${Spacing[\"spacing-4\"]};\n align-items: center;\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const rowHeaderSubtitleHidden = css`\n display: none;\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING AND ERROR\n// -----------------------------------------------------------------------------\n\nexport const loadingSpinner = css`\n display: flex;\n align-items: center;\n justify-content: center;\n grid-row: 2;\n width: 100%;\n height: 100%;\n`;\n\nexport const loadingSpinnerEmptyContent = css`\n grid-column: 1 / -1;\n`;\n\nexport const loadingSpinnerHasContent = css`\n grid-column: 2 / -1;\n`;\n\nexport const noResultsFound = css`\n grid-column: 1 / -1;\n grid-row: 2;\n padding: ${Spacing[\"spacing-72\"]} 0;\n`;\n\n// -----------------------------------------------------------------------------\n// LAZY LOADING\n// -----------------------------------------------------------------------------\n\nexport const loadingWrapper = css`\n /* reset variable to prevent leaking to child components */\n ${tokens.loadingWrapper.cellWidth}: initial;\n\n display: flex;\n border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const loadingCell = css`\n border-right: ${Border[\"width-005\"]} ${Border[\"solid\"]}\n ${Colour[\"border-primary\"]};\n width: var(${tokens.loadingWrapper.cellWidth});\n height: 100%;\n padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-12\"]};\n`;\n\nexport const loadingBar = css`\n @keyframes timetable-loading-gradient {\n 0% {\n background-position: -468px 0;\n }\n 100% {\n background-position: 468px 0;\n }\n }\n\n height: 28px;\n width: 100%;\n background: linear-gradient(\n to right,\n ${Colour.Primitive[\"neutral-95\"]} 8%,\n ${Colour.Primitive[\"neutral-100\"]} 18%,\n ${Colour.Primitive[\"neutral-95\"]} 33%\n );\n background-size: 800px 104px;\n animation: timetable-loading-gradient 1.5s forwards infinite;\n`;\n\n// -----------------------------------------------------------------------------\n// MISCELLANEOUS\n// -----------------------------------------------------------------------------\n\nexport const popoverTrigger = css`\n max-width: 24rem !important;\n &:hover {\n cursor: default;\n }\n`;\n"],"names":["columnHeaderRow","columnWidth","loadingWrapper","cellWidth"],"mappings":"+GA0KoC,oDASS,gCA9DpB,kCAjBG,0CAaQ,qCAWN,sCAlGE,6BAyNT,8BARC,kCAnCG,6CASY,4CAIF,kCAcV,iCAVA,kCAoDA,mCAtNC,0CAiBQ,4CAQC,2CAIA,6BA6Df,qCAoBQ,qCAoBA,2CAOM,gCA5DV,sCAnGK,6CAYO,kDAJK,sCA+CZ,+BAiDN,yBAhIH,CAKlBA,gBAAiB,CACbC,YAAa,wDAEjBC,eAAgB,CACZC,UAAW"}

package/cjs/timetable/timetable.styles_7rp8kz.css ADDED Viewed

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

package/cjs/toast/toast.js CHANGED Viewed

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

package/cjs/toast/toast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toast.js","sources":["../../../src/toast/toast.tsx"],"sourcesContent":["import {\n CrossIcon,\n ExclamationCircleFillIcon,\n ExclamationTriangleFillIcon,\n ICircleFillIcon,\n TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { easings, useSpring } from \"@react-spring/web\";\nimport React, { ~~useContext,~~ useEffect, useRef, useState } from \"react\";\nimport { ~~useMediaQuery~~ } from \"~~react-responsive~~\";\nimport { ~~ThemeContext~~ } from \"~~styled-components~~\";\n\nimport { ~~inertValue,~~ ~~VisuallyHidden~~ } from \"../shared/~~accessibility~~\";\nimport { ~~V3_Breakpoint~~ } from \"../~~v3_theme~~\";\nimport {~~\n ActionButton,\n ContentWrapper,\n DescriptionBL,\n DescriptionMD,\n DismissButton,\n TextContainer,\n TextIconWrapper,\n Title,\n Wrapper,\n~~} from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\n\nconst TOAST_ICON_MAP = {\n success: TickCircleFillIcon,\n warning: ExclamationTriangleFillIcon,\n error: ExclamationCircleFillIcon,\n info: ICircleFillIcon,\n};\n\nexport const Toast = ({\n type = \"success\",\n title,\n label,\n autoDismiss,\n autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n onDismiss,\n fixed = true,\n actionButton,\n ...otherProps\n}: ToastProps) => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const toastRef = useRef<HTMLDivElement>(null);\n const [isVisible, setVisible] = useState<boolean>(false);\n\n const ~~theme~~ = ~~useContext~~(~~ThemeContext);\n~~\~~n const mobileBreakpoint = V3_Breakpoint[\~~"lg~~-max~~\"~~]({ theme }~~);\n ~~const isMobile = useMediaQuery({~~\n ~~maxWidth: mobileBreakpoint,\n~~ ~~});\n\n~~ // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setVisible(true);\n }, []);\n\n useEffect(() => {\n if (!autoDismiss) return;\n\n const timeout = setTimeout(() => {\n setVisible(false);\n }, autoDismissTime);\n\n return () => clearTimeout(timeout);\n }, [autoDismiss]);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === \"Escape\" &&\n toastRef.current?.contains(document.activeElement)\n ) {\n handleDismiss();\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, []);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleDismiss = () => {\n setVisible(false);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const transitions = useSpring({\n opacity: isVisible ? 1 : 0,\n transform: isVisible\n ? isMobile\n ? `translateY(0%)`\n : `translateX(0%)`\n : isMobile\n ? `translateY(-1500%)`\n : `translateX(150%)`,\n config: {\n easing: easings.easeInOutQuart,\n duration: ~~1000~~,\n },\n onRest: () => {\n if (!isVisible) onDismiss?.();\n },\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderIcon = () => {\n const Icon = TOAST_ICON_MAP[type];\n return Icon && <Icon aria-hidden />;\n };\n\n const renderTitle = () => {\n if (React.isValidElement(title)) {\n return title;\n } else {\n return (\n <~~Title~~ ~~$type~~={~~type~~} role=\"presentation\">\n {title}\n </~~Title~~>\n );\n }\n };\n\n const renderDesc = () => {\n if (React.isValidElement(label)) {\n return label;\n } else if (title) {\n return <~~DescriptionMD~~ ~~$type~~={~~type~~}>{label}</~~DescriptionMD>;\~~n } else {\n return <~~DescriptionBL~~ ~~$type~~={~~type~~}>{label}</~~DescriptionBL>;\~~n }\n };\n\n return (\n <~~Wrapper~~\n ref={toastRef}\n style={transitions}\n $type={type}\n $fixed={fixed}\n role=\"alert\"\n inert={inertValue(!isVisible)}\n {...otherProps}\n >\n <VisuallyHidden>{type}</VisuallyHidden>\n <~~ContentWrapper~~>\n <~~TextIconWrapper~~ $type={type}>\n {renderIcon()}\n <~~TextContainer~~>\n {title && renderTitle()}\n {label && renderDesc()}\n </~~TextContainer~~>\n </~~TextIconWrapper~~>\n\n {actionButton && (\n <~~ActionButton~~\n styleType=\"light\"\n onClick={actionButton.onClick}\n >\n {actionButton.label}\n </~~ActionButton~~>\n )}\n </~~ContentWrapper~~>\n <~~DismissButton $type~~={~~type~~} onClick={handleDismiss}>\n <VisuallyHidden role=\"presentation\">\n Close notification\n </VisuallyHidden>\n <CrossIcon aria-hidden />\n </~~DismissButton~~>\n </~~Wrapper~~>\n );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","_a","type","title","label","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","~~theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","~~isMobile","~~useMediaQuery~~","~~maxWidth","~~useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","~~Wrapper~~","Object","assign","ref","style","~~$type~~","~~$fixed~~","role","inert","inertValue","children","_jsx","VisuallyHidden","~~ContentWrapper~~","~~TextIconWrapper~~","Icon","renderIcon","~~TextContainer~~","React","isValidElement","~~Title~~","~~DescriptionMD~~","~~DescriptionBL~~","~~ActionButton~~","styleType","onClick","~~DismissButton~~","CrossIcon"],"mappings":"~~0cA2BA~~,MAAMA,EAA4B,~~IAE5BC~~,EAAiB,CACnBC,QAASC,EAAAA,mBACTC,QAASC,EAAAA,4BACTC,MAAOC,EAAAA,0BACPC,KAAMC,EAAAA,+BAGYC,~~QAAAC~~,KAClBA,EAAO,UAASC,MAChBA,EAAKC,MACLA,EAAKC,~~YACLA~~,EAAWC,gBACXA,~~EAAkBf~~,~~EAAyBgB~~,UAC3CA,EAASC,MACTA,GAAQ,EAAIC,aACZA,~~GAAYR~~,~~EACTS~~,EAAUC,EAAAA,~~OAAAV~~,~~EATK~~,CAAA,OAAA,QAAA,QAAA,cAAA,kBAAA,YAAA,QAAA,~~iBAclB~~,~~MAAMW~~,EAAWC,EAAAA,OAAuB,OACjCC,EAAWC,GAAcC,EAAAA,UAAkB,GAE5CC,~~EAAQC,EAAAA,WAAWC,gBAEnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,~~EAAWC,EAAAA,~~uBAAAA~~,~~cAAc~~,~~CAC3BC,SAAUJ,IAMdK,~~EAAAA,WAAU,~~KACNV~~,GAAW,EAAK,GACjB,~~IAEHU~~,EAAAA,WAAU,KACN,~~IAAKpB~~,EAAa,OAElB,~~MAAMqB~~,EAAUC,YAAW,~~KACvBZ~~,GAAW,EAAM,GAClBT,GAEH,MAAO,~~IAAMsB~~,aAAaF,EAAQ,GACnC,~~CAACrB~~,~~IAEJoB~~,EAAAA,WAAU,KACN,MAAMI,EAAiBC,UAED,WAAdA,EAAMC,MACU,~~QAAhB9B~~,~~EAAAW~~,~~EAASoB~~,eAAO,~~IAAA/B~~,OAAA,EAAAA,~~EAAEgC~~,SAASC,SAASC,iBAEpCC,GACJ,EAIJ,OADAF,SAASG,iBAAiB,UAAWR,GAC9B,KACHK,SAASI,oBAAoB,UAAWT,EAAc,CACzD,GACF,IAKH,MAAMO,EAAgB,~~KAClBrB~~,GAAW,EAAM,~~EAMfwB~~,EAAcC,EAAAA,UAAU,CAC1BC,~~QAAS3B~~,EAAY,EAAI,~~EACzB4B~~,~~UAAW5B~~,~~EACLQ~~,EACI,iBACA,iBACJA,EACA,qBACA,~~mBACNqB~~,OAAQ,CACJC,OAAQC,EAAAA,QAAQC,eAChBC,~~SAAU~~,~~KAEdC~~,OAAQ,~~KACClC~~,GAAWP,SAAAA,GAAa,~~IAkCrC~~,~~OACI0C~~,EAAAA,~~KAACC~~,~~UAAOC~~,OAAAC,OAAA,~~CACJC~~,~~IAAKzC~~,~~EACL0C~~,~~MAAOf~~,~~EAAWgB~~,~~MACXrD~~,~~EAAIsD~~,~~OACHhD~~,~~EACRiD~~,KAAK,QACLC,MAAOC,EAAAA,~~YAAY7C~~,IACfJ,EAAU,~~CAAAkD~~,SAAA,CAEdC,~~MAACC~~,EAAAA,eAAc,CAAAF,~~SAAE1D~~,~~IACjB+C~~,EAAAA,~~KAACc~~,EAAAA,~~eAAc~~,~~CAAAH,~~SAAA,~~CACXX~~,EAAAA,~~KAACe~~,EAAAA,~~gBAAe~~,~~CAAAT~~,~~MAAQrD~~,~~EAAI0D,~~SAAA,~~CAvCrB~~,MACf,MAAMK,~~EAAOzE~~,EAAeU,GAC5B,~~OAAO+D~~,GAAQJ,EAAAA,IAACI,qBAAmB,~~EAsCtBC~~,~~GACDjB~~,~~EAAAA~~,~~KAACkB~~,~~EAAAA~~,~~cAAa~~,~~CAAAP~~,SAAA,~~CACTzD~~,~~IApCbiE~~,EAAAA,QAAMC,~~eAAelE~~,GACdA,~~EAGH0D~~,EAAAA,~~IAACS~~,~~QAAK~~,~~CAAAf~~,~~MAAQrD~~,~~EAAMuD~~,KAAK,eAAcG,~~SAClCzD~~,~~KAgCIC~~,~~IAzBbgE~~,EAAAA,QAAMC,~~eAAejE~~,GACdA,EACAD,~~EACA0D~~,EAAAA,IAACU,EAAAA,~~cAAa~~,~~CAAAhB~~,~~MAAQrD~~,~~EAAI0D~~,~~SAAGxD~~,~~IAE7ByD~~,EAAAA,~~IAACW~~,EAAAA,~~cAAa~~,~~CAAAjB~~,~~MAAQrD~~,~~EAAI0D~~,~~SAAGxD~~,~~WAwB/BK~~,~~GACGoD~~,EAAAA,~~IAACY~~,EAAAA,~~aAAY~~,~~CACTC~~,UAAU,QACVC,~~QAASlE~~,~~EAAakE~~,~~QAAOf~~,~~SAE5BnD~~,~~EAAaL~~,~~WAI1B6C~~,~~OAAC2B~~,EAAAA,~~cAAa~~,~~CAAArB~~,~~MAAQrD~~,~~EAAMyE~~,~~QAASvC~~,~~EAAawB~~,SAAA,~~CAC9CC~~,EAAAA,IAACC,EAAAA,~~gBAAeL~~,KAAK,eAAcG,SAAA,uBAGnCC,~~MAACgB~~,EAAAA,UAAS,CAAA,eAAA,~~UAER~~"}
1	+ {"version":3,"file":"toast.js","sources":["../../../src/toast/toast.tsx"],"sourcesContent":["import {\n CrossIcon,\n ExclamationCircleFillIcon,\n ExclamationTriangleFillIcon,\n ICircleFillIcon,\n TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { animated, easings, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\nconst EASING_DURATION = 1000;\n\nconst TOAST_ICON_MAP = {\n success: TickCircleFillIcon,\n warning: ExclamationTriangleFillIcon,\n error: ExclamationCircleFillIcon,\n info: ICircleFillIcon,\n};\n\nexport const Toast = ({\n type = \"success\",\n title,\n label,\n className,\n autoDismiss,\n autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n onDismiss,\n fixed = true,\n actionButton,\n ...otherProps\n}: ToastProps) => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const toastRef = useRef<HTMLDivElement>(null);\n const [isVisible, setVisible] = useState<boolean>(false);\n\n const isMobile = useMaxWidthMediaQuery(\"lg\");\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setVisible(true);\n }, []);\n\n useEffect(() => {\n if (!autoDismiss) return;\n\n const timeout = setTimeout(() => {\n setVisible(false);\n }, autoDismissTime);\n\n return () => clearTimeout(timeout);\n }, [autoDismiss, autoDismissTime]);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === \"Escape\" &&\n toastRef.current?.contains(document.activeElement)\n ) {\n handleDismiss();\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, []);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleDismiss = () => {\n setVisible(false);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const transitions = useSpring({\n opacity: isVisible ? 1 : 0,\n transform: isVisible\n ? isMobile\n ? `translateY(0%)`\n : `translateX(0%)`\n : isMobile\n ? `translateY(-1500%)`\n : `translateX(150%)`,\n config: {\n easing: easings.easeInOutQuart,\n duration: EASING_DURATION,\n },\n onRest: () => {\n if (!isVisible) onDismiss?.();\n },\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderIcon = () => {\n const Icon = TOAST_ICON_MAP[type];\n return Icon && <Icon aria-hidden />;\n };\n\n const renderTitle = () => {\n if (React.isValidElement(title)) {\n return title;\n } else {\n return (\n <h2 className={styles.title} role=\"presentation\">\n {title}\n </h2>\n );\n }\n };\n\n const renderDesc = () => {\n if (React.isValidElement(label)) {\n return label;\n } else if (title) {\n return (\n <Typography.BodyMD className={styles.description}>\n {label}\n </Typography.BodyMD>\n );\n } else {\n return (\n <Typography.BodyBL className={styles.description}>\n {label}\n </Typography.BodyBL>\n );\n }\n };\n\n return (\n <animated.div\n ref={toastRef}\n style={transitions}\n className={clsx(styles.wrapper, className)}\n data-type={type}\n data-fixed={fixed}\n role=\"alert\"\n inert={inertValue(!isVisible)}\n {...otherProps}\n >\n <VisuallyHidden>{type}</VisuallyHidden>\n <div className={styles.contentWrapper}>\n <div className={styles.textIconWrapper} data-type={type}>\n {renderIcon()}\n <div className={styles.textContainer}>\n {title && renderTitle()}\n {label && renderDesc()}\n </div>\n </div>\n\n {actionButton && (\n <Button\n className={styles.actionButton}\n styleType=\"light\"\n onClick={actionButton.onClick}\n sizeType=\"small\"\n >\n {actionButton.label}\n </Button>\n )}\n </div>\n <ClickableIcon\n className={styles.dismissButton}\n onClick={handleDismiss}\n >\n <VisuallyHidden role=\"presentation\">\n Close notification\n </VisuallyHidden>\n <CrossIcon aria-hidden />\n </ClickableIcon>\n </animated.div>\n );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","_a","type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","isMobile","useMaxWidthMediaQuery","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","animated","div","Object","assign","ref","style","clsx","styles.wrapper","role","inert","inertValue","children","_jsx","VisuallyHidden","styles.contentWrapper","styles.textIconWrapper","Icon","renderIcon","styles.textContainer","React","isValidElement","styles.title","Typography","BodyMD","styles.description","BodyBL","Button","styles.actionButton","styleType","onClick","sizeType","ClickableIcon","styles.dismissButton","CrossIcon"],"mappings":"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"}

package/cjs/toast/toast.styles.js CHANGED Viewed

@@ -1,99 +1,2 @@
-"use strict";var e=require("@react-spring/web"),r=require("styled-components"),t=require("../button/button.js"),o=require("../shared/clickable-icon/clickable-icon.js"),i=require("../typography/index.js"),n=require("../v3_theme/index.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=a(r);const d=e=>{const r={success:{Background:"bg-success",Border:"border-success",Text:"text-success",Icon:"icon-success"},warning:{Background:"bg-warning",Border:"border-warning",Text:"text-warning",Icon:"icon-warning"},error:{Background:"bg-error",Border:"border-error",Text:"text-error",Icon:"icon-error"},info:{Background:"bg-info",Border:"border-info",Text:"text-info",Icon:"icon-info"}}[e.$type];return{Background:n.V3_Colour[r.Background],Border:n.V3_Colour[r.Border],Text:n.V3_Colour[r.Text],Icon:n.V3_Colour[r.Icon]}},c=e.animated(s.default.div`
-    display: flex;
-    flex-direction: row;
-    position: ${e=>e.$fixed?"fixed":"relative"};
-    margin: ${e=>e.$fixed?"1rem":0};
-    top: 0;
-    right: 0;
-    padding: 1rem;
-    border-radius: ${n.V3_Radius.md};
-    z-index: 10;
-    align-items: center;
-    gap: 2rem;
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        left: 0;
-    }
-    ${e=>r.css`
-            background: ${d(e).Background};
-            border: 1px solid ${d(e).Border};
-            color: ${d(e).Text};
-        `};
-`),l=s.default.div`
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-    flex: 1;
-    justify-content: space-between;
-    ${n.V3_MediaQuery.MaxWidth.sm} {
-        display: flex;
-        align-items: flex-start;
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-`,u=s.default.div`
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    ${e=>r.css`
-            & > svg {
-                flex-shrink: 0;
-                width: 1.5rem;
-                height: 1.5rem;
-                margin-top: 0.0625rem;
-                margin-right: 0.5rem;
-                color: ${d(e).Icon};
-            }
-        `};
-`,x=s.default.div`
-    display: flex;
-    flex-direction: column;
-`,g=s.default.h2`
-    display: flex;
-    ${n.V3_Font["body-baseline-semibold"]}
-    ${e=>r.css`
-            color: ${d(e).Text};
-        `}
-`,f=s.default(i.Typography.BodyMD)`
-    ${e=>r.css`
-            color: ${d(e).Text};
-        `}
-`,p=s.default(i.Typography.BodyBL)`
-    ${e=>r.css`
-            color: ${d(e).Text};
-        `}
-`,m=s.default(t.Button.Small)`
-    align-self: center;
-    margin-left: auto;
-    height: auto;
-    width: fit-content;
-    flex-shrink: 0;
-    ${n.V3_MediaQuery.MaxWidth.sm} {
-        align-self: flex-start;
-        margin-left: 2rem;
-    }
-`,h=s.default(o.ClickableIcon)`
-    padding: 0.75rem;
-    margin: -0.75rem;
-    align-self: stretch;
-    ${e=>r.css`
-            svg {
-                width: 1.5rem;
-                height: 1.5rem;
-                color: ${d(e).Text};
-            }
-            &:hover {
-                background: transparent;
-            }
-            ${n.V3_MediaQuery.MaxWidth.sm} {
-                align-self: center;
-            }
-        `};
-`;exports.ActionButton=m,exports.ContentWrapper=l,exports.DescriptionBL=p,exports.DescriptionMD=f,exports.DismissButton=h,exports.TextContainer=x,exports.TextIconWrapper=u,exports.Title=g,exports.Wrapper=c;
+"use strict";require("./toast.styles_1e0l60w.css");exports.actionButton="a10z10pl",exports.contentWrapper="c1ll5mdk",exports.description="dmmbr7j",exports.dismissButton="d1jd4l4i",exports.textContainer="t1j1n9on",exports.textIconWrapper="t1mt05g8",exports.title="t1see4ey",exports.wrapper="wqf508q";
 //# sourceMappingURL=toast.styles.js.map

package/cjs/toast/toast.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toast.styles.js","sources":["../../../src/toast/toast.styles.~~tsx~~"],"sourcesContent":["import { ~~animated~~ } from \"@~~react-spring~~/~~web~~\";\~~nimport styled, { css } from \"styled-components\";\~~n\nimport { ~~Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour~~, ~~V3_Font~~, ~~V3_MediaQuery~~, ~~V3_Radius~~ } from \"../~~v3_theme~~\";\~~nimport type { V3_SemanticColourSet } from \"../v3_theme/types\";\nimport type { ToastType } from \"./types\";\~~n\~~n//=============================================================================\n//~~ ~~STYLE~~ ~~INTERFACE\n//=============================================================================\ninterface~~ ~~StyleProps~~ {\n ~~$type~~: ~~ToastType~~;\n ~~$fixed?:~~ ~~boolean \| undefined~~;\n~~}\n\nconst getValidationColorAttributes = (props~~: ~~StyleProps) => {\~~n ~~const~~ ~~type = props.$type~~;\n\n ~~const typeMapping~~: ~~Record<\~~n ~~ToastType,\n Record<string,~~ ~~keyof V3_SemanticColourSet>\~~n > ~~= {\~~n ~~success~~: {\~~n Background: \~~"~~bg-success~~\",\n ~~Border~~: ~~\"border~~-~~success\",\n Text~~: ~~\"text-success\",\~~n ~~Icon~~: \~~"icon-success\",\~~n }~~,\n warning:~~ {\n ~~Background~~: \~~"bg-warning~~\~~",\~~n ~~Border: \~~"~~border-warning~~\"~~,\n Text:~~ \~~"text-warning\",\~~n ~~Icon~~: ~~\"icon-warning\",\~~n ~~},\n error~~: {\n ~~Background:~~ \~~"bg-error\",\~~n ~~Border: \"border~~-~~error\~~"~~,\n Text:~~ \"~~text-error\",\n Icon:~~ \~~"icon-error\",\~~n ~~},\n info~~: {\~~n Background: \~~"bg-~~info~~\",\n ~~Border~~: \"border-~~info~~\",\n ~~Text~~: \"text-~~info~~\"~~,\n Icon: \"icon-info\",\n~~ },\n };\n\n ~~const selectedTypeMapping = typeMapping~~[type]~~;\n\n return~~ {\n ~~Background~~: ~~V3_Colour~~[~~selectedTypeMapping.Background~~],\n ~~Border~~: ~~V3_Colour[selectedTypeMapping.Border],\n Text:~~ ~~V3_Colour~~[~~selectedTypeMapping.Text~~],\n ~~Icon~~: ~~V3_Colour~~[~~selectedTypeMapping.Icon~~]~~,\n~~ };\n}~~;\n~~\n~~// =============================================================================\n// STYLING~~\n~~// =============================================================================\nexport const Wrapper = animated(styled.div<StyleProps>`\n~~ ~~display: flex;\n flex~~-~~direction: row;\n position: ${(props) => (props.$fixed ? \~~"~~fixed~~\" : \~~"relative\")};\~~n ~~margin~~: ${~~(props) => (props.$fixed ?~~ \"~~1rem~~\" ~~: 0)~~};\n ~~top~~: ~~0;\n right:~~ ~~0;\n padding:~~ ~~1rem;\n border-radius:~~ ${~~V3_Radius~~[\"md\"]};\n ~~z-index~~: ~~10;\n align~~-~~items: center;\n gap: 2rem;\n~~\~~n ${V3_MediaQuery.MaxWidth.lg~~} ~~{\n left: 0~~;\n }\n\n ~~${(props)~~ => {\n ~~return css`\n~~ background: ${~~getValidationColorAttributes(props).Background~~};\n border: 1px solid ${~~getValidationColorAttributes(props).Border~~};\n color: ${~~getValidationColorAttributes(props).Text~~};\n ~~`;\n~~ }~~};\~~n~~`);\~~n\nexport const ~~ContentWrapper~~ = ~~styled.div~~`\n display: flex;\n align-items: center;\n gap: 2rem;\n flex: 1;\n justify-content: space-between;\n\n ${~~V3_MediaQuery~~.MaxWidth.sm} {\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n gap: 0.75rem;\n }\n`;\n\nexport const ~~TextIconWrapper~~ = ~~styled.div<StyleProps>`\~~n display: flex;\n flex-direction: row;\n align-items: flex-start;\n\n ~~${(props) => {\n return css`\n~~ & > svg {\n flex-shrink: 0;\n width: 1.5rem;\n height: 1.5rem;\n margin-top: 0.0625rem;\n margin-right: 0.5rem;\n color: ${~~getValidationColorAttributes(props).Icon~~};\n }\n ~~`;\~~n ~~}};\n`;\n~~\~~nexport~~ ~~const~~ ~~TextContainer~~ ~~= styled.div`\~~n ~~display~~: ~~flex~~;\n ~~flex-direction: column;\~~n~~`;\~~n\~~nexport~~ ~~const~~ ~~Title~~ ~~= styled.h2<StyleProps>`\~~n ~~display~~: ~~flex;\n~~ ${~~V3_Font~~[\"~~body~~-~~baseline-semibold~~\"]}\n\n ~~${(props)~~ => {\n ~~return css`\n~~ color: ${~~getValidationColorAttributes(props).Text~~};\n ~~`;\n~~ }}\n`;\n\nexport const ~~DescriptionMD~~ = ~~styled(Typography.BodyMD)<StyleProps>`\~~n ~~${(props)~~ => {\~~n return~~ css`\n ~~color~~: ~~${getValidationColorAttributes(props).Text}~~;\n ~~`;\n~~ }}\n`;\n\nexport const ~~DescriptionBL~~ = ~~styled(Typography.BodyBL)<StyleProps>`\n ${(props) => {\n return~~ css`\n color: ~~${getValidationColorAttributes(props).Text}~~;\n `;\n }}\~~n`;\n\~~nexport const ~~ActionButton~~ = ~~styled(Button.Small)~~`\n align-self: center;\n margin-left: auto;\n height: auto;\n width: fit-content;\n flex-shrink: 0;\n\n ${~~V3_MediaQuery~~.MaxWidth.sm} {\n align-self: flex-start;\n margin-left: 2rem;\n }\n`;\n\nexport const ~~DismissButton~~ = ~~styled(ClickableIcon)<StyleProps>`\~~n padding: 0.75rem;\n margin: -0.75rem;\n align-self: stretch;\n\n ~~${(props)~~ => {\n ~~return~~ ~~css`\~~n svg {\n width: 1.5rem;\n height: 1.5rem;\n color: ~~${getValidationColorAttributes(props).Text}~~;\n }\n ~~&:hover {~~\n ~~background: transparent;\n }\n~~ ${~~V3_MediaQuery~~.MaxWidth.sm} {\n align-self: center;\n }\n `;\n ~~}};\n`;\n~~"],"names":["getValidationColorAttributes","props","selectedTypeMapping","success","Background","Border","Text","Icon","warning","error","info","$type","V3_Colour","Wrapper","animated","styled","div","$fixed","V3_Radius","V3_MediaQuery","MaxWidth","lg","css","ContentWrapper","sm","TextIconWrapper","TextContainer","Title","h2","V3_Font","DescriptionMD","Typography","BodyMD","DescriptionBL","BodyBL","ActionButton","Button","Small","DismissButton","ClickableIcon"],"mappings":"~~iUAkBA~~,~~MAAMA~~,~~EAAgCC~~,~~IAClC~~,~~MAgCMC~~,~~EA3BF~~,CACAC,QAAS,CACLC,WAAY,aACZC,OAAQ,iBACRC,KAAM,eACNC,KAAM,gBAEVC,QAAS,CACLJ,WAAY,aACZC,OAAQ,iBACRC,KAAM,eACNC,KAAM,gBAEVE,MAAO,CACHL,WAAY,WACZC,OAAQ,eACRC,KAAM,aACNC,KAAM,cAEVG,KAAM,CACFN,WAAY,UACZC,OAAQ,cACRC,KAAM,YACNC,KAAM,cA5BDN,EAAMU,OAkCnB,MAAO,CACHP,WAAYQ,EAAAA,UAAUV,EAAoBE,YAC1CC,OAAQO,EAAAA,UAAUV,EAAoBG,QACtCC,KAAMM,EAAAA,UAAUV,EAAoBI,MACpCC,KAAMK,EAAAA,UAAUV,EAAoBK,MACvC,EAMQM,EAAUC,EAAAA,SAASC,EAAAA,QAAOC,GAAe;;;gBAGrCf,GAAWA,EAAMgB,OAAS,QAAU;cACtChB,GAAWA,EAAMgB,OAAS,OAAS;;;;qBAI7BC,EAAAA,UAAc;;;;;MAK7BC,EAAAA,cAAcC,SAASC;;;;MAItBpB,GACQqB,KAAG;0BACQtB,EAA6BC,GAAOG;gCAC9BJ,EAA6BC,GAAOI;qBAC/CL,EAA6BC,GAAOK;;GAK5CiB,EAAiBR,EAAAA,QAAOC,GAAG;;;;;;;MAOlCG,EAAAA,cAAcC,SAASI;;;;;;EAQhBC,EAAkBV,EAAAA,QAAOC,GAAe;;;;;MAK9Cf,GACQqB,KAAG;;;;;;;yBAOOtB,EAA6BC,GAAOM;;;EAMhDmB,EAAgBX,EAAAA,QAAOC,GAAG;;;EAK1BW,EAAQZ,EAAAA,QAAOa,EAAc;;MAEpCC,EAAAA,QAAQ;;MAEP5B,GACQqB,KAAG;qBACGtB,EAA6BC,GAAOK;;EAK5CwB,EAAgBf,EAAAA,QAAOgB,aAAWC,OAAmB;MAC3D/B,GACQqB,KAAG;qBACGtB,EAA6BC,GAAOK;;EAK5C2B,EAAgBlB,EAAAA,QAAOgB,aAAWG,OAAmB;MAC3DjC,GACQqB,KAAG;qBACGtB,EAA6BC,GAAOK;;EAK5C6B,EAAepB,EAAAA,QAAOqB,SAAOC,MAAM;;;;;;;MAO1ClB,EAAAA,cAAcC,SAASI;;;;EAMhBc,EAAgBvB,EAAAA,QAAOwB,EAAAA,cAA0B;;;;;MAKvDtC,GACQqB,KAAG;;;;yBAIOtB,EAA6BC,GAAOK;;;;;cAK/Ca,EAAAA,cAAcC,SAASI;;;;"}
1	+ {"version":3,"file":"toast.styles.js","sources":["../../../src/toast/toast.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\n\nexport const wrapper = css`\n display: flex;\n flex-direction: row;\n position: relative;\n margin: 0;\n top: 0;\n right: 0;\n padding: 1rem;\n border-radius: ${Radius[\"md\"]};\n z-index: 10;\n align-items: center;\n gap: 2rem;\n\n ${MediaQuery.MaxWidth.lg} {\n left: 0;\n }\n\n &[data-fixed=\"true\"] {\n position: fixed;\n margin: 1rem;\n }\n\n &[data-type=\"success\"] {\n background: ${Colour[\"bg-success\"]};\n border: 1px solid ${Colour[\"border-success\"]};\n color: ${Colour[\"text-success\"]};\n }\n\n &[data-type=\"warning\"] {\n background: ${Colour[\"bg-warning\"]};\n border: 1px solid ${Colour[\"border-warning\"]};\n color: ${Colour[\"text-warning\"]};\n }\n\n &[data-type=\"error\"] {\n background: ${Colour[\"bg-error\"]};\n border: 1px solid ${Colour[\"border-error\"]};\n color: ${Colour[\"text-error\"]};\n }\n\n &[data-type=\"info\"] {\n background: ${Colour[\"bg-info\"]};\n border: 1px solid ${Colour[\"border-info\"]};\n color: ${Colour[\"text-info\"]};\n }\n`;\n\nexport const contentWrapper = css`\n display: flex;\n align-items: center;\n gap: 2rem;\n flex: 1;\n justify-content: space-between;\n\n ${MediaQuery.MaxWidth.sm} {\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n gap: 0.75rem;\n }\n`;\n\nexport const textIconWrapper = css`\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n\n & > svg {\n flex-shrink: 0;\n width: 1.5rem;\n height: 1.5rem;\n margin-top: 0.0625rem;\n margin-right: 0.5rem;\n }\n\n &[data-type=\"success\"] > svg {\n color: ${Colour[\"icon-success\"]};\n }\n\n &[data-type=\"warning\"] > svg {\n color: ${Colour[\"icon-warning\"]};\n }\n\n &[data-type=\"error\"] > svg {\n color: ${Colour[\"icon-error\"]};\n }\n\n &[data-type=\"info\"] > svg {\n color: ${Colour[\"icon-info\"]};\n }\n`;\n\nexport const textContainer = css`\n display: flex;\n flex-direction: column;\n`;\n\nexport const title = css`\n display: flex;\n ${Font[\"body-baseline-semibold\"]}\n color: inherit;\n`;\n\nexport const description = css`\n color: inherit;\n`;\n\nexport const actionButton = css`\n align-self: center;\n margin-left: auto;\n height: auto;\n width: fit-content;\n flex-shrink: 0;\n\n ${MediaQuery.MaxWidth.sm} {\n align-self: flex-start;\n margin-left: 2rem;\n }\n`;\n\nexport const dismissButton = css`\n padding: 0.75rem;\n margin: -0.75rem;\n align-self: stretch;\n color: inherit;\n\n &:hover {\n background: transparent;\n }\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n color: inherit;\n }\n\n ${MediaQuery.MaxWidth.sm} {\n align-self: center;\n }\n`;\n"],"names":[],"mappings":"6FA+GyB,kCA5DE,+BAwDH,gCAiBE,iCA5BA,mCA9BE,yBAmCV,2BAjGE"}

package/cjs/toast/toast.styles_1e0l60w.css ADDED Viewed

@@ -0,0 +1,8 @@
+.wqf508q{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;margin:0;top:0;right:0;padding:1rem;border-radius:var(--fds-radius-md);z-index:10;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:2rem;}:where(body.fds-breakpoint-lg-max) .wqf508q{left:0;}.wqf508q[data-fixed="true"]{position:fixed;margin:1rem;}.wqf508q[data-type="success"]{background:var(--fds-colour-bg-success);border:1px solid var(--fds-colour-border-success);color:var(--fds-colour-text-success);}.wqf508q[data-type="warning"]{background:var(--fds-colour-bg-warning);border:1px solid var(--fds-colour-border-warning);color:var(--fds-colour-text-warning);}.wqf508q[data-type="error"]{background:var(--fds-colour-bg-error);border:1px solid var(--fds-colour-border-error);color:var(--fds-colour-text-error);}.wqf508q[data-type="info"]{background:var(--fds-colour-bg-info);border:1px solid var(--fds-colour-border-info);color:var(--fds-colour-text-info);}
+.c1ll5mdk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:2rem;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}:where(body.fds-breakpoint-sm-max) .c1ll5mdk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.75rem;}
+.t1mt05g8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.t1mt05g8>svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:1.5rem;height:1.5rem;margin-top:0.0625rem;margin-right:0.5rem;}.t1mt05g8[data-type="success"]>svg{color:var(--fds-colour-icon-success);}.t1mt05g8[data-type="warning"]>svg{color:var(--fds-colour-icon-warning);}.t1mt05g8[data-type="error"]>svg{color:var(--fds-colour-icon-error);}.t1mt05g8[data-type="info"]>svg{color:var(--fds-colour-icon-info);}
+.t1j1n9on{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.t1see4ey{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:inherit;}
+.dmmbr7j{color:inherit;}
+.a10z10pl{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;margin-left:auto;height:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .a10z10pl{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;margin-left:2rem;}
+.d1jd4l4i{padding:0.75rem;margin:-0.75rem;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;color:inherit;}.d1jd4l4i:hover{background:transparent;}.d1jd4l4i svg{width:1.5rem;height:1.5rem;color:inherit;}:where(body.fds-breakpoint-sm-max) .d1jd4l4i{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}

package/cjs/toggle/toggle.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-down"),l=require("@lifesg/react-icons/chevron-up"),i=require("clsx"),a=require("react"),o=require("../alert/alert.js"),n=require("../markup/markup.js"),s=require("../text-list/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var d=require("../theme/utils/use-apply-styles.js"),c=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var u=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var b=require("./toggle.styles.js"),h=require("./toggle-icon.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=g(i);exports.Toggle=i=>{var{type:g="checkbox",indicator:p,checked:x,styleType:j="default",children:v,childrenMaxLines:C,subLabel:f,disabled:y,error:k,name:q,id:N,className:D,compositeSection:T,removable:S,focusableWhenDisabled:$,useContentWidth:L,onRemove:B,onChange:E,"data-testid":I,"aria-describedby":w}=i,A=e.__rest(i,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:M=!0,errors:R,children:W,initialExpanded:_}=T||{},[F,P]=a.useState(x),[H,U]=a.useState(!!_),z=a.useMemo((()=>{const e=Array.isArray(R)&&(null==R?void 0:R.length)>0,r=!Array.isArray(R)&&!!R;return e||r}),[R]),O=u.useId(),G=N?`${N}`:`tg-${O}`,J=a.useRef(null),K=a.useRef(null);d.useApplyStyle(K,{[b.tokens.label.desktopLineClamp]:null==(null==C?void 0:C.desktop)?null:`${C.desktop}`,[b.tokens.label.tabletLineClamp]:null==(null==C?void 0:C.tablet)?null:`${C.tablet}`,[b.tokens.label.mobileLineClamp]:null==(null==C?void 0:C.mobile)?null:`${C.mobile}`});const Q=!!y&&!!$,V=!!y&&!$,X=!!y;a.useEffect((()=>{P(x)}),[x]),a.useEffect((()=>{F&&U(null==_||_)}),[F]);const Y=e=>{if(X)e.preventDefault();else if(E)E(e);else switch(g){case"checkbox":P((e=>!e));break;case"radio":case"yes":case"no":F||P(!0)}},Z=()=>{y||U(!H)},ee=()=>{y||!B||B()},re=()=>{var e;null===(e=null==J?void 0:J.current)||void 0===e||e.click()},te=e=>{e.stopPropagation()},le=()=>{let e;switch(g){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=g}return r.jsx(h.ToggleIcon,{type:e,active:F,disabled:y})},ie=()=>{if(!f)return null;let e;return e="function"==typeof f?f():f,r.jsx("div",{"data-id":"toggle-sublabel",id:`${G}-sublabel`,"aria-hidden":!0,className:b.subLabel,children:e})},ae=()=>{const e=!H&&!z;return M&&r.jsxs("button",{className:m.default(b.expandButton,y&&b.disabledColorCursor,e&&b.expandButtonPaddingTopRequired),disabled:y,onClick:Z,"data-testid":H?"collapse-button":"expand-button",children:[H?"Show less":"Show more",H?r.jsx(l.ChevronUpIcon,{"aria-hidden":!0}):r.jsx(t.ChevronDownIcon,{"aria-hidden":!0})]})},oe=e=>r.jsxs(r.Fragment,{children:[r.jsx(c.Typography.BodyMD,{weight:"semibold",className:m.default(b.colorTextError,y&&b.colorTextDisabled),children:"Error"}),r.jsx(s.TextList.Ul,{className:m.default(b.colorTextError,y&&b.colorTextDisabled),children:null==e?void 0:e.map(((e,t)=>r.jsx("li",{id:`${G}-error-list-item-${t}`,children:r.jsx(c.Typography.BodyMD,{weight:"semibold",className:m.default(b.colorTextError,y&&b.colorTextDisabled),children:e})},t)))})]});return r.jsxs("div",{className:m.default(b.container,"no-border"===j?k?m.default(b.colorBorderError,!y&&b.toggleContainerError):y?F?b.toggleContainerNoBorderDisabledSelected:b.toggleContainerNoBorderDisabled:F?b.toggleContainerNoBorderSelected:b.toggleContainerNoBorder:k?y?b.colorBorderError:b.toggleContainerError:y?F?b.toggleContainerDisabledSelected:b.toggleContainerDisabled:F?b.toggleContainerSelected:b.toggleContainer,(()=>{if(!y)return!k&&F?b.toggleContainerHoverSelected:b.toggleContainerHoverDefault})(),!p&&b.noIndicatorContainer,L&&b.useContentWidthContainer,D),id:N,"data-testid":I,children:[(()=>{const e=["string"==typeof f?`${G}-sublabel`:null,w].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{id:`${G}-header-container`,className:b.headerContainer,children:[r.jsx("div",{className:m.default(b.indicatorLabelContainer,S&&b.indicatorLabelContainerAddPadding),children:r.jsxs("div",{id:`${G}-input-container`,onClick:re,className:b.inputContainer,children:[r.jsx("input",Object.assign({ref:J,name:q,id:`${G}-input`,type:"checkbox"===g?"checkbox":"radio","data-testid":"toggle-input",className:m.default(b.input,y&&b.toggleInputDisabled),disabled:V,"aria-disabled":Q,onChange:Y,onClick:te,checked:F,tabIndex:Q?0:void 0,"aria-describedby":e},A)),p&&le(),r.jsxs("div",{className:m.default(b.textContainer,y?F?b.toggleTextContainerDisabledSelected:b.colorTextDisabled:F?b.toggleTextContainerSelected:void 0),children:[r.jsx("label",{ref:K,htmlFor:`${G}-input`,"data-testid":"toggle-label",id:`${G}-label`,className:m.default(b.label,F?b.toggleLabelSelected:b.toggleLabelDefault),children:v}),f&&ie()]})]})}),S&&r.jsx("button",{type:"button",className:m.default(b.removeButton,y&&b.disabledColorCursor),onClick:ee,id:`${G}-remove-button`,children:"Remove"})]})})(),W&&r.jsxs("div",{children:[(!M||H)&&r.jsx("div",{"data-id":"toggle-composite-children",className:m.default(b.children,!M&&b.childrenIsFinalItem,y&&b.colorTextDisabled),children:r.jsx(n.Markup,{baseTextSize:"body-md",children:W})}),M&&!H&&z&&r.jsx("div",{className:m.default(b.errorContainer,y&&b.disabledColorCursor),onClick:Z,id:`${G}-error-alert`,children:r.jsx(o.Alert,{type:y?"description":"error",className:b.alertContainer,showIcon:!0,children:Array.isArray(R)?oe(R):R})}),ae()]})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-down"),l=require("@lifesg/react-icons/chevron-up"),i=require("clsx"),a=require("react"),o=require("../alert/alert.js"),n=require("../markup/markup.js"),s=require("../text-list/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var d=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var c=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var u=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var b=require("./toggle.styles.js"),h=require("./toggle-icon.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=g(i);exports.Toggle=i=>{var{type:g="checkbox",indicator:p,checked:x,styleType:j="default",children:v,childrenMaxLines:C,subLabel:f,disabled:y,error:k,name:q,id:N,className:D,compositeSection:T,removable:S,focusableWhenDisabled:$,useContentWidth:L,onRemove:B,onChange:E,"data-testid":I,"aria-describedby":w}=i,A=e.__rest(i,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:M=!0,errors:R,children:W,initialExpanded:_}=T||{},[F,P]=a.useState(x),[H,U]=a.useState(!!_),z=a.useMemo((()=>{const e=Array.isArray(R)&&(null==R?void 0:R.length)>0,r=!Array.isArray(R)&&!!R;return e||r}),[R]),O=u.useId(),G=N?`${N}`:`tg-${O}`,J=a.useRef(null),K=a.useRef(null);d.useApplyStyle(K,{[b.tokens.label.desktopLineClamp]:null==(null==C?void 0:C.desktop)?null:`${C.desktop}`,[b.tokens.label.tabletLineClamp]:null==(null==C?void 0:C.tablet)?null:`${C.tablet}`,[b.tokens.label.mobileLineClamp]:null==(null==C?void 0:C.mobile)?null:`${C.mobile}`});const Q=!!y&&!!$,V=!!y&&!$,X=!!y;a.useEffect((()=>{P(x)}),[x]),a.useEffect((()=>{F&&U(null==_||_)}),[F]);const Y=e=>{if(X)e.preventDefault();else if(E)E(e);else switch(g){case"checkbox":P((e=>!e));break;case"radio":case"yes":case"no":F||P(!0)}},Z=()=>{y||U(!H)},ee=()=>{y||!B||B()},re=()=>{var e;null===(e=null==J?void 0:J.current)||void 0===e||e.click()},te=e=>{e.stopPropagation()},le=()=>{let e;switch(g){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=g}return r.jsx(h.ToggleIcon,{type:e,active:F,disabled:y})},ie=()=>{if(!f)return null;let e;return e="function"==typeof f?f():f,r.jsx("div",{"data-id":"toggle-sublabel",id:`${G}-sublabel`,"aria-hidden":!0,className:b.subLabel,children:e})},ae=()=>{const e=!H&&!z;return M&&r.jsxs("button",{className:m.default(b.expandButton,y&&b.disabledColorCursor,e&&b.expandButtonPaddingTopRequired),disabled:y,onClick:Z,"data-testid":H?"collapse-button":"expand-button",children:[H?"Show less":"Show more",H?r.jsx(l.ChevronUpIcon,{"aria-hidden":!0}):r.jsx(t.ChevronDownIcon,{"aria-hidden":!0})]})},oe=e=>r.jsxs(r.Fragment,{children:[r.jsx(c.Typography.BodyMD,{weight:"semibold",className:m.default(b.colorTextError,y&&b.colorTextDisabled),children:"Error"}),r.jsx(s.TextList.Ul,{className:m.default(b.colorTextError,y&&b.colorTextDisabled),children:null==e?void 0:e.map(((e,t)=>r.jsx("li",{id:`${G}-error-list-item-${t}`,children:r.jsx(c.Typography.BodyMD,{weight:"semibold",className:m.default(b.colorTextError,y&&b.colorTextDisabled),children:e})},t)))})]});return r.jsxs("div",{className:m.default(b.container,"no-border"===j?k?m.default(b.colorBorderError,!y&&b.toggleContainerError):y?F?b.toggleContainerNoBorderDisabledSelected:b.toggleContainerNoBorderDisabled:F?b.toggleContainerNoBorderSelected:b.toggleContainerNoBorder:k?y?b.colorBorderError:b.toggleContainerError:y?F?b.toggleContainerDisabledSelected:b.toggleContainerDisabled:F?b.toggleContainerSelected:b.toggleContainer,(()=>{if(!y)return!k&&F?b.toggleContainerHoverSelected:b.toggleContainerHoverDefault})(),!p&&b.noIndicatorContainer,L&&b.useContentWidthContainer,D),id:N,"data-testid":I,children:[(()=>{const e=["string"==typeof f?`${G}-sublabel`:null,w].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{id:`${G}-header-container`,className:b.headerContainer,children:[r.jsx("div",{className:m.default(b.indicatorLabelContainer,S&&b.indicatorLabelContainerAddPadding),children:r.jsxs("div",{id:`${G}-input-container`,onClick:re,className:b.inputContainer,children:[r.jsx("input",Object.assign({ref:J,name:q,id:`${G}-input`,type:"checkbox"===g?"checkbox":"radio","data-testid":"toggle-input",className:m.default(b.input,y&&b.toggleInputDisabled),disabled:V,"aria-disabled":Q,onChange:Y,onClick:te,checked:F,tabIndex:Q?0:void 0,"aria-describedby":e},A)),p&&le(),r.jsxs("div",{className:m.default(b.textContainer,y?F?b.toggleTextContainerDisabledSelected:b.colorTextDisabled:F?b.toggleTextContainerSelected:void 0),children:[r.jsx("label",{ref:K,htmlFor:`${G}-input`,"data-testid":"toggle-label",id:`${G}-label`,className:m.default(b.label,F?b.toggleLabelSelected:b.toggleLabelDefault),children:v}),f&&ie()]})]})}),S&&r.jsx("button",{type:"button",className:m.default(b.removeButton,y&&b.disabledColorCursor),onClick:ee,id:`${G}-remove-button`,children:"Remove"})]})})(),W&&r.jsxs("div",{children:[(!M||H)&&r.jsx("div",{"data-id":"toggle-composite-children",className:m.default(b.children,!M&&b.childrenIsFinalItem,y&&b.colorTextDisabled),children:r.jsx(n.Markup,{baseTextSize:"body-md",children:W})}),M&&!H&&z&&r.jsx("div",{className:m.default(b.errorContainer,y&&b.disabledColorCursor),onClick:Z,id:`${G}-error-alert`,children:r.jsx(o.Alert,{type:y?"description":"error",className:b.alertContainer,showIcon:!0,children:Array.isArray(R)?oe(R):R})}),ae()]})]})};
 //# sourceMappingURL=toggle.js.map