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

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

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 (2348) hide show

package/cjs/timetable/timetable-row/row-cell.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("../../external/dayjs/dayjs.min.js"),t=require("react");require("../../util/calendar-helper.js");var o=require("../../util/date-helper.js");require("../../util/string-helper.js");var l=require("../const.js"),i=require("./row-cell.style.js"),n=require("./with-optional-popover.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=s(t).default.memo((({id:t,startTime:s,endTime:a,title:u,subtitle:c,status:d,intervalWidth:m,rowBarColor:p,containerRef:C,customPopover:j,cellStyleAttributes:v,roundedStartTime:h=s,roundedEndTime:k=a,onClick:T})=>{const g=0===r.default(k,"HH:mm").get("minutes"),$=o.DateHelper.getTimeDiffInMinutes(h,k)/l.ROW_INTERVAL*m-l.ROW_CELL_GAP,b=!!T||j&&"click"===j.trigger;return e.jsx(n.WithOptionalPopover,{containerRef:C,customPopover:j,children:e.jsx(i.BlockContainer,{"data-testid":"block-container",$isOnTheHour:g,children:e.jsxs(i.Wrapper,{children:[e.jsxs(i.Block,{$width:$,$status:d,$mainColor:p.mainColor,$altColor:p.alternateColor,$isClickable:b,$customMainColor:null==v?void 0:v.backgroundColor,$customAltColor:null==v?void 0:v.altBackgroundColor,$customHoverColor:null==v?void 0:v.hoverBackgroundColor,$customAltHoverColor:null==v?void 0:v.altHoverBackgroundColor,$styleType:null==v?void 0:v.styleType,onClick:e=>{T&&T({id:t,startTime:s,endTime:a,status:d,title:u,subtitle:c,customPopover:j},e)},children:[u&&e.jsx(i.BlockTitle,{weight:"semibold",children:u}),c&&e.jsx(i.BlockDescription,{weight:"bold",children:c})]}),e.jsx(i.Gap,{})]})},"block-container-key")})}));exports.RowCell=a;
+"use strict";var e=require("react/jsx-runtime"),r=require("../../external/dayjs/dayjs.min.js"),i=require("react"),o=require("../../shared/accessibility/index.js");require("../../util/calendar-helper.js");var l=require("../../util/date-helper.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var t=require("../../util/time-helper.js"),a=require("../const.js"),n=require("./row-cell.style.js"),s=require("./with-optional-popover.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=u(i).default.memo((({id:i,startTime:u,endTime:d,title:c,subtitle:m,status:p,intervalWidth:h,rowBarColor:j,customPopover:C,cellStyleAttributes:v,isFocusable:k,roundedStartTime:x=u,roundedEndTime:g=d,ariaColIndex:T,ariaColSpan:b,rowName:q,onClick:$})=>{const y=0===r.default(g,"HH:mm").get("minutes"),f=l.DateHelper.getTimeDiffInMinutes(x,g)/a.ROW_INTERVAL*h-a.ROW_CELL_GAP,H=!!$||C&&"click"===C.trigger,w=o.concatIds(`${t.TimeHelper.formatTimeRange(u,d)}`,q,c,m,`${p}`),B=e=>{$&&$({id:i,startTime:u,endTime:d,status:p,title:c,subtitle:m,customPopover:C},e)};return e.jsx(n.BlockContainer,{"data-testid":"block-container",$isOnTheHour:y,role:"gridcell","aria-colindex":T,"aria-colspan":b,children:e.jsx(s.WithOptionalPopover,{customPopover:C,children:e.jsxs(n.Wrapper,{children:[e.jsxs(n.Block,{$width:f,$status:p,$mainColor:j.mainColor,$altColor:j.alternateColor,$isClickable:H,$customMainColor:null==v?void 0:v.backgroundColor,$customAltColor:null==v?void 0:v.altBackgroundColor,$customHoverColor:null==v?void 0:v.hoverBackgroundColor,$customAltHoverColor:null==v?void 0:v.altHoverBackgroundColor,$styleType:null==v?void 0:v.styleType,tabIndex:k?0:void 0,onClick:B,children:[e.jsx(o.VisuallyHidden,{children:w}),c&&e.jsx(n.BlockTitle,{weight:"semibold","aria-hidden":!0,children:c}),m&&e.jsx(n.BlockDescription,{weight:"bold","aria-hidden":!0,children:m})]}),e.jsx(n.Gap,{})]})})},"block-container-key")}));exports.RowCell=d;
 //# sourceMappingURL=row-cell.js.map

package/cjs/timetable/timetable-row/row-cell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"row-cell.js","sources":["../../../../src/timetable/timetable-row/row-cell.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport React from \"react\";\n\nimport { DateHelper } from \"../../util\";\nimport { ROW_CELL_GAP, ROW_INTERVAL } from \"../const\";\nimport type {\n InternalTimeTableRowCellData,\n RowBarColors,\n} from \"../internal-types\";\nimport {\n Block,\n BlockContainer,\n BlockDescription,\n BlockTitle,\n Gap,\n Wrapper,\n} from \"./row-cell.style\";\nimport { WithOptionalPopover } from \"./with-optional-popover\";\n\ninterface RowCellProps extends InternalTimeTableRowCellData {\n containerRef: RefObject<HTMLDivElement>;\n intervalWidth: number;\n rowBarColor: RowBarColors;\n}\n\nconst Component = ({\n id,\n startTime,\n endTime,\n title,\n subtitle,\n status,\n intervalWidth,\n rowBarColor,\n ~~containerRef~~,\n ~~customPopover~~,\n ~~cellStyleAttributes~~,\n roundedStartTime = startTime,\n roundedEndTime = endTime,\n onClick,\n}: RowCellProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const isOnTheHour = dayjs(roundedEndTime, \"HH:mm\").get(\"minutes\") === 0;\n const numberOfIntervals =\n DateHelper.getTimeDiffInMinutes(roundedStartTime, roundedEndTime) /\n ROW_INTERVAL;\n const totalCellWidth = numberOfIntervals * intervalWidth;\n const adjustedCellWidth = totalCellWidth - ROW_CELL_GAP;\n const isClickable =\n !!onClick \|\| (customPopover && customPopover.trigger === \"click\");\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleCellClick = (event: React.MouseEvent) => {\n if (onClick) {\n onClick(\n {\n id,\n startTime,\n endTime,\n status,\n title,\n subtitle,\n customPopover,\n },\n event\n );\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n ~~return~~ (\n <WithOptionalPopover~~\n containerRef={containerRef}\n~~ customPopover={customPopover}\n >\n <~~BlockContainer\n key={`block-container-key`}\n data-testid={`block-container`}\n $isOnTheHour={isOnTheHour}\n~~ >\n <~~Wrapper>\n <~~Block\n $width={adjustedCellWidth}\n $status={status}\n $mainColor={rowBarColor.mainColor}\n $altColor={rowBarColor.alternateColor}\n $isClickable={isClickable}\n $customMainColor={cellStyleAttributes?.backgroundColor}\n $customAltColor={\n cellStyleAttributes?.altBackgroundColor\n }\n $customHoverColor={\n cellStyleAttributes?.hoverBackgroundColor\n }\n $customAltHoverColor={\n cellStyleAttributes?.altHoverBackgroundColor\n }\n $styleType={cellStyleAttributes?.styleType}\n onClick={handleCellClick}\n >\n {title && (\n <BlockTitle weight={\"semibold\"}>{title}</BlockTitle>\n )}\n {subtitle && (\n <BlockDescription weight={\"bold\"}>\n {subtitle}\n </BlockDescription>\n )}\n </Block>\n <Gap />\n </Wrapper>\n </BlockContainer>\n </~~WithOptionalPopover~~>\n );\n};\n\nexport const RowCell = React.memo(Component);\n"],"names":["RowCell","React","memo","id","startTime","endTime","title","subtitle","status","intervalWidth","rowBarColor","~~containerRef~~","~~customPopover~~","~~cellStyleAttributes~~","roundedStartTime","roundedEndTime","onClick","isOnTheHour","dayjs","get","adjustedCellWidth","DateHelper","getTimeDiffInMinutes","ROW_INTERVAL","ROW_CELL_GAP","isClickable","trigger","~~_jsx~~","~~WithOptionalPopover~~","~~children~~","BlockContainer","$isOnTheHour","_jsxs","Wrapper","Block","$width","$status","$mainColor","mainColor","$altColor","alternateColor","$isClickable","$customMainColor","backgroundColor","$customAltColor","altBackgroundColor","$customHoverColor","hoverBackgroundColor","$customAltHoverColor","altHoverBackgroundColor","$styleType","styleType","~~event~~","BlockTitle","weight","BlockDescription","Gap"],"mappings":"~~2ZA0BA~~,~~MAiGaA~~,OAAUC,QAAMC,~~MAjGX~~,EACdC,KACAC,YACAC,UACAC,QACAC,WACAC,SACAC,gBACAC,cACAC,~~eACAC,~~gBACAC,sBACAC,mBAAmBV,EACnBW,iBAAiBV,EACjBW,cAKA,MAAMC,EAAgE,IAAlDC,EAAAA,~~QAAMH~~,EAAgB,~~SAASI~~,IAAI,WAKjDC,EAHFC,EAAAA,WAAWC,~~qBAAqBR~~,EAAkBC,~~GAClDQ~~,EAAAA,~~aACuCd~~,~~EACAe~~,EAAAA,aACrCC,IACAT,~~GAAYJ~~,GAA2C,UAA1BA,~~EAAcc~~,~~QAyBjD~~,~~OACIC~~,~~MAACC~~,EAAAA,~~oBAAmB~~,~~CAChBjB~~,~~aAAcA~~,~~EACdC~~,~~cAAeA~~,~~EAAaiB~~,~~SAE5BF~~,EAAAA,~~IAACG~~,~~iBAAc~~,CAAA,cAEE,kBAAiBC,~~aAChBd~~,~~EAAWY~~,~~SAEzBG~~,EAAAA,KAACC,EAAAA,QAAO,~~CAAAJ~~,SAAA,~~CACJG~~,EAAAA,KAACE,~~EAAAA~~,~~MAAK,~~CAAAC,~~OACMf~~,~~EAAiBgB~~,~~QAChB5B~~,~~EAAM6B~~,~~WACH3B~~,~~EAAY4B~~,UAASC,~~UACtB7B~~,~~EAAY8B~~,eAAcC,~~aACvBhB~~,~~EAAWiB~~,~~iBACP7B~~,aAAmB,EAAnBA,~~EAAqB8B~~,gBAAeC,~~gBAElD/B~~,aAAmB,EAAnBA,~~EAAqBgC~~,mBAAkBC,~~kBAGvCjC~~,aAAmB,EAAnBA,~~EAAqBkC~~,qBAAoBC,~~qBAGzCnC~~,aAAmB,EAAnBA,~~EAAqBoC~~,wBAAuBC,~~WAEpCrC~~,aAAmB,EAAnBA,~~EAAqBsC~~,~~UACjCnC~~,~~QAhDKoC~~,~~IACjBpC~~,~~GACAA~~,~~EACI~~,~~CACIb~~,~~KACAC~~,~~YACAC~~,~~UACAG~~,~~SACAF~~,~~QACAC~~,~~WACAK~~,~~iBAEJwC~~,~~EAER~~,~~EAkCwCvB~~,~~SAAA~~,~~CAEvBvB,GACGqB,~~EAAAA,~~IAAC0B~~,EAAAA,WAAU,CAACC,OAAQ,~~WAAUzB~~,~~SAAGvB~~,~~IAEpCC~~,~~GACGoB~~,EAAAA,~~IAAC4B~~,EAAAA,iBAAgB,CAACD,OAAQ,~~OAAMzB~~,~~SAC3BtB~~,~~OAIboB~~,EAAAA,~~IAAC6B~~,EAAAA,IAAG,~~QAjCH~~,~~wBAoCS~~"}
1	+ {"version":3,"file":"row-cell.js","sources":["../../../../src/timetable/timetable-row/row-cell.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport React from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../../shared/accessibility\";\nimport { DateHelper } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_CELL_GAP, ROW_INTERVAL } from \"../const\";\nimport type {\n InternalTimeTableRowCellData,\n RowBarColors,\n} from \"../internal-types\";\nimport {\n Block,\n BlockContainer,\n BlockDescription,\n BlockTitle,\n Gap,\n Wrapper,\n} from \"./row-cell.style\";\nimport { WithOptionalPopover } from \"./with-optional-popover\";\n\ninterface RowCellProps extends InternalTimeTableRowCellData {\n containerRef: RefObject<HTMLDivElement>;\n intervalWidth: number;\n rowBarColor: RowBarColors;\n ariaColIndex: number;\n ariaColSpan: number;\n rowName: string;\n}\n\nconst Component = ({\n id,\n startTime,\n endTime,\n title,\n subtitle,\n status,\n intervalWidth,\n rowBarColor,\n customPopover,\n cellStyleAttributes,\n isFocusable,\n roundedStartTime = startTime,\n roundedEndTime = endTime,\n ariaColIndex,\n ariaColSpan,\n rowName,\n onClick,\n}: RowCellProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const isOnTheHour = dayjs(roundedEndTime, \"HH:mm\").get(\"minutes\") === 0;\n const numberOfIntervals =\n DateHelper.getTimeDiffInMinutes(roundedStartTime, roundedEndTime) /\n ROW_INTERVAL;\n const totalCellWidth = numberOfIntervals * intervalWidth;\n const adjustedCellWidth = totalCellWidth - ROW_CELL_GAP;\n const isClickable =\n !!onClick \|\| (customPopover && customPopover.trigger === \"click\");\n const rowAriaLabel = concatIds(\n `${TimeHelper.formatTimeRange(startTime, endTime)}`,\n rowName,\n title,\n subtitle,\n `${status}`\n );\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleCellClick = (event: React.MouseEvent) => {\n if (onClick) {\n onClick(\n {\n id,\n startTime,\n endTime,\n status,\n title,\n subtitle,\n customPopover,\n },\n event\n );\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderCellContent = () => (\n <WithOptionalPopover customPopover={customPopover}>\n <Wrapper>\n <Block\n $width={adjustedCellWidth}\n $status={status}\n $mainColor={rowBarColor.mainColor}\n $altColor={rowBarColor.alternateColor}\n $isClickable={isClickable}\n $customMainColor={cellStyleAttributes?.backgroundColor}\n $customAltColor={cellStyleAttributes?.altBackgroundColor}\n $customHoverColor={\n cellStyleAttributes?.hoverBackgroundColor\n }\n $customAltHoverColor={\n cellStyleAttributes?.altHoverBackgroundColor\n }\n $styleType={cellStyleAttributes?.styleType}\n tabIndex={isFocusable ? 0 : undefined}\n onClick={handleCellClick}\n >\n <VisuallyHidden>{rowAriaLabel}</VisuallyHidden>\n {title && (\n <BlockTitle weight={\"semibold\"} aria-hidden>\n {title}\n </BlockTitle>\n )}\n {subtitle && (\n <BlockDescription weight={\"bold\"} aria-hidden>\n {subtitle}\n </BlockDescription>\n )}\n </Block>\n <Gap />\n </Wrapper>\n </WithOptionalPopover>\n );\n\n return (\n <BlockContainer\n key={`block-container-key`}\n data-testid={`block-container`}\n $isOnTheHour={isOnTheHour}\n role=\"gridcell\"\n aria-colindex={ariaColIndex}\n aria-colspan={ariaColSpan}\n >\n {renderCellContent()}\n </BlockContainer>\n );\n};\n\nexport const RowCell = React.memo(Component);\n"],"names":["RowCell","React","memo","id","startTime","endTime","title","subtitle","status","intervalWidth","rowBarColor","customPopover","cellStyleAttributes","isFocusable","roundedStartTime","roundedEndTime","ariaColIndex","ariaColSpan","rowName","onClick","isOnTheHour","dayjs","get","adjustedCellWidth","DateHelper","getTimeDiffInMinutes","ROW_INTERVAL","ROW_CELL_GAP","isClickable","trigger","rowAriaLabel","concatIds","TimeHelper","formatTimeRange","handleCellClick","event","_jsx","BlockContainer","$isOnTheHour","role","children","WithOptionalPopover","_jsxs","Wrapper","Block","$width","$status","$mainColor","mainColor","$altColor","alternateColor","$isClickable","$customMainColor","backgroundColor","$customAltColor","altBackgroundColor","$customHoverColor","hoverBackgroundColor","$customAltHoverColor","altHoverBackgroundColor","$styleType","styleType","tabIndex","undefined","VisuallyHidden","BlockTitle","weight","BlockDescription","Gap"],"mappings":"skBA+BA,MAiHaA,OAAUC,QAAMC,MAjHX,EACdC,KACAC,YACAC,UACAC,QACAC,WACAC,SACAC,gBACAC,cACAC,gBACAC,sBACAC,cACAC,mBAAmBV,EACnBW,iBAAiBV,EACjBW,eACAC,cACAC,UACAC,cAKA,MAAMC,EAAgE,IAAlDC,EAAAA,QAAMN,EAAgB,SAASO,IAAI,WAKjDC,EAHFC,EAAAA,WAAWC,qBAAqBX,EAAkBC,GAClDW,EAAAA,aACuCjB,EACAkB,EAAAA,aACrCC,IACAT,GAAYR,GAA2C,UAA1BA,EAAckB,QAC3CC,EAAeC,EAAAA,UACjB,GAAGC,EAAAA,WAAWC,gBAAgB7B,EAAWC,KACzCa,EACAZ,EACAC,EACA,GAAGC,KAMD0B,EAAmBC,IACjBhB,GACAA,EACI,CACIhB,KACAC,YACAC,UACAG,SACAF,QACAC,WACAI,iBAEJwB,EAER,EA4CJ,OACIC,EAAAA,IAACC,EAAAA,eAAc,CAAA,cAEE,kBAAiBC,aAChBlB,EACdmB,KAAK,2BACUvB,EAAY,eACbC,EAAWuB,SA5C7BJ,MAACK,EAAAA,oBAAmB,CAAC9B,cAAeA,EAAa6B,SAC7CE,EAAAA,KAACC,EAAAA,QAAO,CAAAH,SAAA,CACJE,EAAAA,KAACE,QAAK,CAAAC,OACMtB,EAAiBuB,QAChBtC,EAAMuC,WACHrC,EAAYsC,UAASC,UACtBvC,EAAYwC,eAAcC,aACvBvB,EAAWwB,iBACPxC,aAAmB,EAAnBA,EAAqByC,gBAAeC,gBACrC1C,aAAmB,EAAnBA,EAAqB2C,mBAAkBC,kBAEpD5C,aAAmB,EAAnBA,EAAqB6C,qBAAoBC,qBAGzC9C,aAAmB,EAAnBA,EAAqB+C,wBAAuBC,WAEpChD,aAAmB,EAAnBA,EAAqBiD,UACjCC,SAAUjD,EAAc,OAAIkD,EAC5B5C,QAASe,EAAeM,SAAA,CAExBJ,EAAAA,IAAC4B,iBAAc,CAAAxB,SAAEV,IAChBxB,GACG8B,EAAAA,IAAC6B,EAAAA,WAAU,CAACC,OAAQ,WAAU,eAAA,EAAA1B,SACzBlC,IAGRC,GACG6B,EAAAA,IAAC+B,EAAAA,iBAAgB,CAACD,OAAQ,OAAM,eAAA,EAAA1B,SAC3BjC,OAIb6B,EAAAA,IAACgC,EAAAA,IAAG,CAAA,SAOH,sBAQQ"}

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

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

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 { ~~RefObject } from \"react\";\n\nimport type {~~ PopoverV2TriggerProps } from \"../../popover-v2\";\nimport { PopoverTrigger } from \"../../popover-v2\";\nimport type { TimeTablePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n ~~containerRef: RefObject<HTMLDivElement>;\n~~ children: JSX.Element;\n customPopover?: TimeTablePopoverProps \| undefined;\n}\n\nexport const WithOptionalPopover = ({\n ~~containerRef,\n~~ children,\n customPopover,\n}: ConditionalCellWrapperProps) => {\n if (!customPopover) {\n return children;\n }\n\n const popoverTriggerProps: PopoverV2TriggerProps = {\n position: \"bottom-start\",\n ~~rootNode: containerRef,\n~~ customOffset: customPopover.offset,\n children: children,\n trigger: customPopover.trigger,\n delay: customPopover.delay,\n popoverContent: customPopover.content,\n };\n\n return <PopoverTrigger {...popoverTriggerProps} />;\n};\n"],"names":["~~containerRef","~~children","customPopover","popoverTriggerProps","position","~~rootNode","~~customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"~~qbAYmC~~,EAC/BA,~~eACAC,~~WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA6C,CAC/CC,SAAU,eACVC,~~SAAUL~~,~~EACVM~~,~~aAAcJ~~,~~EAAcK,OAC5BN,~~SAAUA,~~EACVO~~,~~QAASN~~,~~EAAcM~~,QACvBC,~~MAAOP~~,~~EAAcO~~,MACrBC,~~eAAgBR~~,~~EAAcS~~,SAGlC,OAAOC,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,~~EAAKZ~~,GAAuB"}
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"}

package/cjs/timetable/timetable.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),a=require("../external/lodash/lodash.js"),o=require("../external/react-resize-detector/build/index.esm.js"),i=require("../util/time-helper.js"),n=require("./const.js"),l=require("./timetable.style.js"),s=require("./timetable-header/timetable-header.js"),d=require("./timetable-row/row-bar.js");const c=r.forwardRef(((c,m)=>{const{date:u,emptyContentMessage:h,rowData:R,loading:C,minTime:T="00:00",maxTime:x="23:00",initialScrollTime:w,minDate:p,maxDate:g,totalRecords:j,showCurrentDateAsToday:f,showDateAsShortForm:D,onPage:b,onRefresh:y,onNextDayClick:H,onPreviousDayClick:S,onCalendarDateSelect:v,roundInitialScrollTime:E=!0}=c,$=e.__rest(c,["date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime"]),O=$["data-testid"]||"timetable",_=i.TimeHelper.roundToNearestInterval(T,60),N=i.TimeHelper.roundToNearestInterval(x,60,!0),L=i.TimeHelper.generateHourlyIntervals(_,N),A=0===j||a.lodashExports.isEmpty(R),I=A||R.length===j,k=r.useRef(null),P=r.useRef(null),[W,q]=r.useState(!1),[M,B]=r.useState(!1),[z,F]=r.useState(0),[V,Q]=r.useState(!1);r.useImperativeHandle(m,(()=>({resetScroll:X}))),r.useEffect((()=>{const e=a.lodashExports.throttle((()=>{if(k.current&&(q(k.current.scrollLeft>0),B(k.current.scrollTop>0)),V||!k.current)return;const{scrollTop:e,clientHeight:t,scrollHeight:r}=k.current;Math.ceil(e+t)>=r-1&&!I&&b&&!C&&(Q(!0),b())}),100),t=k.current;return t&&t.addEventListener("scroll",e),()=>{t&&t.removeEventListener("scroll",e)}}),[I,V,C,b]),r.useEffect((()=>{Q(!1)}),[R]),r.useEffect((()=>{X()}),[w,z,_,N]);o.useResizeDetector({onResize:()=>{if(k.current){const e=Math.ceil(60*L.length/n.ROW_INTERVAL),t=(k.current.clientWidth-n.ROW_HEADER_WIDTH)/e,r=t>n.MIN_INTERVAL_WIDTH?t:n.MIN_INTERVAL_WIDTH;F(r)}},targetRef:k,refreshMode:"debounce",refreshRate:50});const U=(()=>{let e=0;const t=n.ROW_BAR_COLOR_SEQUENCE.length;return()=>{const r=n.ROW_BAR_COLOR_SEQUENCE[e],a=n.ROW_BAR_COLOR_ALTERNATE_COLOR[e];return e=(e+1)%t,{mainColor:r,alternateColor:a}}})(),X=()=>{if(w&&k.current&&z>0){const e=i.TimeHelper.calculateScrollPosition({scrollTime:w,minTime:_,maxTime:N,interval:n.ROW_INTERVAL,intervalWidth:z,options:{roundToInterval:E}});null!==e&&(k.current.scrollLeft=e)}},Y=({wrapper:e,children:t})=>e(t),G=()=>{if(!C&&V)return t.jsx(l.RowHeader,{$isScrolled:W,children:t.jsx(l.LoadingBar,{})})},J=()=>{if(!C&&V)return t.jsx(l.LoadingWrapper,{"data-testid":"lazy-loader",children:L.map(((e,r)=>t.jsx(l.LoadingCell,{$width:4*z,children:t.jsx(l.LoadingBar,{})},`lazy-load-cell-${r}`)))})};return A?t.jsxs(l.Container,Object.assign({},$,{"data-testid":O,children:[t.jsx(s.TimeTableHeader,{selectedDate:u,loading:C||V,tableContainerRef:k,minDate:p,maxDate:g,totalRecords:j,showCurrentDateAsToday:f,showDateAsShortForm:D,onPreviousDayClick:S,onNextDayClick:H,onRefresh:y,onCalendarDateSelect:v}),t.jsx(l.EmptyTableContainer,{className:"empty-container",children:C?t.jsx(l.Loader,{$isEmptyContent:A}):t.jsx(l.NoResultsFound,{type:"no-item-found",description:h})})]})):t.jsxs(l.Container,Object.assign({},$,{"data-testid":O,children:[t.jsx(s.TimeTableHeader,{"data-id":"timetable-date-navigator",selectedDate:u,loading:C||V,tableContainerRef:k,minDate:p,maxDate:g,totalRecords:j,showCurrentDateAsToday:f,showDateAsShortForm:D,onPreviousDayClick:S,onNextDayClick:H,onRefresh:y,onCalendarDateSelect:v}),t.jsxs(l.TimeTableContainer,{"data-id":"timetable-container","data-testid":"timetable-container",ref:k,$loading:C,$allRecordsLoaded:I||!b,children:[t.jsx(l.RowColumnHeader,{$isScrolledY:M,$isScrolledX:W}),t.jsx(l.RowHeaderColumn,{$numOfRows:R.length,$isScrolled:W,"data-testid":"row-header-column-id",children:t.jsxs(t.Fragment,{children:[R.map(((e,a)=>t.jsx(Y,{wrapper:t=>((e,t)=>{if(!e.rowHeaderPopover)return t;const a={position:"bottom-start",rootNode:k,customOffset:e.rowHeaderPopover.offset,children:t,trigger:e.rowHeaderPopover.trigger,delay:e.rowHeaderPopover.delay,popoverContent:e.rowHeaderPopover.content};return r.createElement(l.StyledPopoverTrigger,Object.assign({},a,{key:`${e.id}-popover-trigger`,zIndex:2}),t)})(e,t),children:t.jsxs(l.RowHeader,{$isScrolled:W,children:[t.jsx(l.ClickableRowHeaderTitle,{$isClickable:!!e.onRowNameClick,onClick:t=>((e,t)=>{e.onRowNameClick&&e.onRowNameClick(e,t)})(e,t),weight:"semibold","data-testid":`${e.id}-row-header-title`,children:e.name}),t.jsx(l.RowHeaderSubtitle,{weight:"bold",$show:!!e.subtitle,"data-testid":`${e.id}-row-header-subtitle`,children:e.subtitle})]},`${e.id}-row-header`)},a))),G()]})}),t.jsx(l.ColumnHeaderRow,{$numOfColumns:L.length,$isScrolled:M,children:L.map((e=>t.jsx(l.ColumnHeader,{"data-testid":`${e}-column`,children:t.jsx(l.ColumnHeaderTitle,{weight:"semibold",children:e})},`${e}-column-key`)))}),C?t.jsx(l.Loader,{$isEmptyContent:A}):t.jsxs(l.ContentContainer,{"data-testid":"content-container-id",ref:P,$numOfRows:R.length,children:[R.map(((e,r)=>t.jsx(d.RowBar,Object.assign({timetableMinTime:_,timetableMaxTime:N,rowBarColor:U(),intervalWidth:z,containerRef:P},e),`${r}-row-bar`))),J()]})]})]}))}));exports.TimeTable=c;
+"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;
 //# 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 { isEmpty, throttle } from \"lodash\";\nimport {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport type { PopoverV2TriggerProps } from \"../popover-v2\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n MIN_INTERVAL_WIDTH,\n ROW_BAR_COLOR_ALTERNATE_COLOR,\n ROW_BAR_COLOR_SEQUENCE,\n ROW_HEADER_WIDTH,\n ROW_INTERVAL,\n} from \"./const\";\nimport {\n ClickableRowHeaderTitle,\n ColumnHeader,\n ColumnHeaderRow,\n ColumnHeaderTitle,\n Container,\n ContentContainer,\n EmptyTableContainer,\n Loader,\n LoadingBar,\n LoadingCell,\n LoadingWrapper,\n NoResultsFound,\n RowColumnHeader,\n RowHeader,\n RowHeaderColumn,\n RowHeaderSubtitle,\n StyledPopoverTrigger,\n TimeTableContainer,\n} from \"./timetable.style\";\nimport { TimeTableHeader } from \"./timetable-header/timetable-header\";\nimport { RowBar } from \"./timetable-row/row-bar\";\nimport type { TimeTableProps, TimeTableRef, TimeTableRowData } from \"./types\";\n\nconst Component = (props: TimeTableProps, ref: React.Ref<TimeTableRef>) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n date,\n emptyContentMessage,\n rowData,\n loading,\n minTime = \"00:00\",\n maxTime = \"23:00\",\n initialScrollTime,\n minDate,\n maxDate,\n totalRecords,\n showCurrentDateAsToday,\n showDateAsShortForm,\n onPage,\n onRefresh,\n onNextDayClick,\n onPreviousDayClick,\n onCalendarDateSelect,\n roundInitialScrollTime = true,\n ...otherProps\n } = props;\n const testId = otherProps[\"data-testid\"] \|\| \"timetable\";\n const timetableMinTime = TimeHelper.roundToNearestInterval(minTime, 60);\n const timetableMaxTime = TimeHelper.roundToNearestInterval(\n maxTime,\n 60,\n true\n );\n const hourlyIntervals = TimeHelper.generateHourlyIntervals(\n timetableMinTime,\n timetableMaxTime\n );\n\n const isEmptyContent = totalRecords === 0 \|\| isEmpty(rowData);\n const allRecordsLoaded = isEmptyContent \|\| rowData.length === totalRecords;\n const tableContainerRef = useRef<HTMLDivElement>(null);\n const contentContainerRef = useRef<HTMLDivElement>(null);\n const [isScrolledX, setIsScrolledX] = useState<boolean>(false);\n const [isScrolledY, setIsScrolledY] = useState<boolean>(false);\n const [intervalWidth, setIntervalWidth] = useState<number>(0);\n const [loadMore, setLoadMore] = useState<boolean>(false);\n\n // Expose imperative handle\n useImperativeHandle(ref, () => ({\n resetScroll,\n }));\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const handleScroll = throttle(() => {\n if (tableContainerRef.current) {\n setIsScrolledX(tableContainerRef.current.scrollLeft > 0);\n setIsScrolledY(tableContainerRef.current.scrollTop > 0);\n }\n\n if (loadMore \|\| !tableContainerRef.current) return;\n\n const { scrollTop, clientHeight, scrollHeight } =\n tableContainerRef.current;\n const scrollBottomTolerance = 1;\n const isEndReached =\n Math.ceil(scrollTop + clientHeight) >=\n scrollHeight - scrollBottomTolerance;\n const shouldLoadMore =\n isEndReached && !allRecordsLoaded && onPage && !loading;\n\n if (shouldLoadMore) {\n setLoadMore(true);\n onPage();\n }\n }, 100);\n\n const tableContainer = tableContainerRef.current;\n\n if (tableContainer) {\n tableContainer.addEventListener(\"scroll\", handleScroll);\n }\n\n return () => {\n if (tableContainer) {\n tableContainer.removeEventListener(\"scroll\", handleScroll);\n }\n };\n }, [allRecordsLoaded, loadMore, loading, onPage]);\n\n useEffect(() => {\n setLoadMore(false);\n }, [rowData]);\n\n // Initial scroll on mount and when dependencies change\n useEffect(() => {\n resetScroll();\n }, [initialScrollTime, intervalWidth, timetableMinTime, timetableMaxTime]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n /*\n Handles when the TimeTable component is resized.\n \n @remarks\n * When the component is resized, we recalculate the width of each interval\n * in the Timetable. We do this by dividing the width of the container by\n * the number of intervals per row bar. We also make sure that the width\n * of each interval is at least 21px, otherwise it becomes too small.\n /\n const handleResize = () => {\n if (tableContainerRef.current) {\n const numberOfIntervalsPerRowBar = Math.ceil(\n (hourlyIntervals.length 60) / ROW_INTERVAL\n );\n const tableContainerWidth =\n tableContainerRef.current.clientWidth - ROW_HEADER_WIDTH;\n const calcWidth = tableContainerWidth / numberOfIntervalsPerRowBar;\n const width =\n calcWidth > MIN_INTERVAL_WIDTH ? calcWidth : MIN_INTERVAL_WIDTH;\n setIntervalWidth(width);\n }\n };\n\n useResizeDetector({\n onResize: handleResize,\n targetRef: tableContainerRef,\n refreshMode: \"debounce\",\n refreshRate: 50,\n });\n\n const handleRowNameClick = (\n data: TimeTableRowData,\n event: React.MouseEvent\n ) => {\n if (data.onRowNameClick) {\n data.onRowNameClick(data, event);\n }\n };\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n /*\n Using closures to more efficiently loop through and wrap the color sequencing instead of modding large numbers repeatedly\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#closure\n /\n const getColorFromSequence = (() => {\n let colorIndex = 0;\n const colorSequenceLength = ROW_BAR_COLOR_SEQUENCE.length;\n\n return () => {\n const mainColor = ROW_BAR_COLOR_SEQUENCE[colorIndex];\n const alternateColor = ROW_BAR_COLOR_ALTERNATE_COLOR[colorIndex];\n colorIndex = (colorIndex + 1) % colorSequenceLength;\n return { mainColor, alternateColor };\n };\n })();\n\n const buildPopoverTrigger = (\n data: TimeTableRowData,\n child: JSX.Element\n ) => {\n if (!data.rowHeaderPopover) {\n return child;\n }\n\n const popoverTriggerProps: PopoverV2TriggerProps = {\n position: \"bottom-start\",\n rootNode: tableContainerRef,\n customOffset: data.rowHeaderPopover.offset,\n children: child,\n trigger: data.rowHeaderPopover.trigger,\n delay: data.rowHeaderPopover.delay,\n popoverContent: data.rowHeaderPopover.content,\n };\n\n return (\n <StyledPopoverTrigger\n {...popoverTriggerProps}\n key={`${data.id}-popover-trigger`}\n zIndex={2}\n >\n {child}\n </StyledPopoverTrigger>\n );\n };\n\n // Function to reset scroll to initialScrollTime\n const resetScroll = () => {\n if (\n initialScrollTime &&\n tableContainerRef.current &&\n intervalWidth > 0\n ) {\n const scrollPosition = TimeHelper.calculateScrollPosition({\n scrollTime: initialScrollTime,\n minTime: timetableMinTime,\n maxTime: timetableMaxTime,\n interval: ROW_INTERVAL,\n intervalWidth,\n options: {\n roundToInterval: roundInitialScrollTime,\n },\n });\n\n if (scrollPosition !== null) {\n tableContainerRef.current.scrollLeft = scrollPosition;\n }\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const ConditionalCellWrapper = ({\n wrapper,\n children,\n }: {\n wrapper: (child: JSX.Element) => JSX.Element;\n children: JSX.Element;\n }) => {\n return wrapper(children);\n };\n\n const renderRowHeaderColumn = () => {\n return (\n <>\n {rowData.map((data, index) => {\n return (\n <ConditionalCellWrapper\n key={index}\n wrapper={(child: JSX.Element) =>\n buildPopoverTrigger(data, child)\n }\n >\n <RowHeader\n $isScrolled={isScrolledX}\n key={`${data.id}-row-header`}\n >\n <ClickableRowHeaderTitle\n $isClickable={!!data.onRowNameClick}\n onClick={(event: React.MouseEvent) =>\n handleRowNameClick(data, event)\n }\n weight=\"semibold\"\n data-testid={`${data.id}-row-header-title`}\n >\n {data.name}\n </ClickableRowHeaderTitle>\n\n <RowHeaderSubtitle\n weight=\"bold\"\n $show={!!data.subtitle}\n data-testid={`${data.id}-row-header-subtitle`}\n >\n {data.subtitle}\n </RowHeaderSubtitle>\n </RowHeader>\n </ConditionalCellWrapper>\n );\n })}\n {renderRowHeaderColumnLazyLoad()}\n </>\n );\n };\n\n const renderRowHeaderColumnLazyLoad = () => {\n if (loading \|\| !loadMore) return;\n return (\n <RowHeader $isScrolled={isScrolledX}>\n <LoadingBar />\n </RowHeader>\n );\n };\n\n const renderColumnHeaders = () => {\n // Don't render first column if there are no rows\n return hourlyIntervals.map((columnHeader: string) => {\n return (\n <ColumnHeader\n key={`${columnHeader}-column-key`}\n data-testid={`${columnHeader}-column`}\n >\n <ColumnHeaderTitle weight={\"semibold\"}>\n {columnHeader}\n </ColumnHeaderTitle>\n </ColumnHeader>\n );\n });\n };\n\n const renderRowBarData = () => {\n if (loading) return <Loader $isEmptyContent={isEmptyContent} />;\n return (\n <ContentContainer\n data-testid=\"content-container-id\"\n ref={contentContainerRef}\n $numOfRows={rowData.length}\n >\n {rowData.map((data, index) => {\n return (\n <RowBar\n key={`${index}-row-bar`}\n timetableMinTime={timetableMinTime}\n timetableMaxTime={timetableMaxTime}\n rowBarColor={getColorFromSequence()}\n intervalWidth={intervalWidth}\n containerRef={contentContainerRef}\n {...data}\n />\n );\n })}\n {renderRowDataLazyLoad()}\n </ContentContainer>\n );\n };\n\n const renderRowDataLazyLoad = () => {\n if (loading \|\| !loadMore) return;\n return (\n <LoadingWrapper data-testid=\"lazy-loader\">\n {hourlyIntervals.map((_, index) => (\n <LoadingCell\n key={`lazy-load-cell-${index}`}\n $width={intervalWidth 4}\n >\n <LoadingBar />\n </LoadingCell>\n ))}\n </LoadingWrapper>\n );\n };\n\n if (isEmptyContent) {\n return (\n <Container {...otherProps} data-testid={testId}>\n <TimeTableHeader\n selectedDate={date}\n loading={loading \|\| loadMore}\n tableContainerRef={tableContainerRef}\n minDate={minDate}\n maxDate={maxDate}\n totalRecords={totalRecords}\n showCurrentDateAsToday={showCurrentDateAsToday}\n showDateAsShortForm={showDateAsShortForm}\n onPreviousDayClick={onPreviousDayClick}\n onNextDayClick={onNextDayClick}\n onRefresh={onRefresh}\n onCalendarDateSelect={onCalendarDateSelect}\n />\n <EmptyTableContainer className=\"empty-container\">\n {!loading ? (\n <NoResultsFound\n type=\"no-item-found\"\n description={emptyContentMessage}\n />\n ) : (\n <Loader $isEmptyContent={isEmptyContent}></Loader>\n )}\n </EmptyTableContainer>\n </Container>\n );\n }\n\n return (\n <Container {...otherProps} data-testid={testId}>\n <TimeTableHeader\n data-id=\"timetable-date-navigator\"\n selectedDate={date}\n loading={loading \|\| loadMore}\n tableContainerRef={tableContainerRef}\n minDate={minDate}\n maxDate={maxDate}\n totalRecords={totalRecords}\n showCurrentDateAsToday={showCurrentDateAsToday}\n showDateAsShortForm={showDateAsShortForm}\n onPreviousDayClick={onPreviousDayClick}\n onNextDayClick={onNextDayClick}\n onRefresh={onRefresh}\n onCalendarDateSelect={onCalendarDateSelect}\n />\n <TimeTableContainer\n data-id=\"timetable-container\"\n data-testid=\"timetable-container\"\n ref={tableContainerRef}\n $loading={loading}\n $allRecordsLoaded={allRecordsLoaded \|\| !onPage}\n >\n <RowColumnHeader\n $isScrolledY={isScrolledY}\n $isScrolledX={isScrolledX}\n ></RowColumnHeader>\n <RowHeaderColumn\n $numOfRows={rowData.length}\n $isScrolled={isScrolledX}\n data-testid={\"row-header-column-id\"}\n >\n {renderRowHeaderColumn()}\n </RowHeaderColumn>\n <ColumnHeaderRow\n $numOfColumns={hourlyIntervals.length}\n $isScrolled={isScrolledY}\n >\n {renderColumnHeaders()}\n </ColumnHeaderRow>\n {renderRowBarData()}\n </TimeTableContainer>\n </Container>\n );\n};\n\nexport const TimeTable = forwardRef<TimeTableRef, TimeTableProps>(Component);\n"],"names":["TimeTable","forwardRef","props","ref","date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime","otherProps","testId","timetableMinTime","TimeHelper","roundToNearestInterval","timetableMaxTime","hourlyIntervals","generateHourlyIntervals","isEmptyContent","isEmpty","allRecordsLoaded","length","tableContainerRef","useRef","contentContainerRef","isScrolledX","setIsScrolledX","useState","isScrolledY","setIsScrolledY","intervalWidth","setIntervalWidth","loadMore","setLoadMore","useImperativeHandle","resetScroll","useEffect","handleScroll","throttle","current","scrollLeft","scrollTop","clientHeight","scrollHeight","Math","ceil","tableContainer","addEventListener","removeEventListener","useResizeDetector","onResize","numberOfIntervalsPerRowBar","ROW_INTERVAL","calcWidth","clientWidth","ROW_HEADER_WIDTH","width","MIN_INTERVAL_WIDTH","targetRef","refreshMode","refreshRate","getColorFromSequence","colorIndex","colorSequenceLength","ROW_BAR_COLOR_SEQUENCE","mainColor","alternateColor","ROW_BAR_COLOR_ALTERNATE_COLOR","scrollPosition","calculateScrollPosition","scrollTime","interval","options","roundToInterval","ConditionalCellWrapper","wrapper","children","renderRowHeaderColumnLazyLoad","_jsx","RowHeader","$isScrolled","LoadingBar","renderRowDataLazyLoad","LoadingWrapper","map","_","index","LoadingCell","_jsxs","Container","Object","assign","TimeTableHeader","selectedDate","EmptyTableContainer","className","Loader","$isEmptyContent","NoResultsFound","type","description","TimeTableContainer","$loading","$allRecordsLoaded","RowColumnHeader","$isScrolledY","$isScrolledX","RowHeaderColumn","$numOfRows","_Fragment","data","child","rowHeaderPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_createElement","StyledPopoverTrigger","key","id","zIndex","buildPopoverTrigger","ClickableRowHeaderTitle","onRowNameClick","onClick","event","handleRowNameClick","weight","name","RowHeaderSubtitle","$show","subtitle","ColumnHeaderRow","$numOfColumns","columnHeader","ColumnHeader","ColumnHeaderTitle","ContentContainer","RowBar","rowBarColor","containerRef"],"mappings":"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"}
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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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"timetable.style.js","sources":["../../../src/timetable/timetable.style.tsx"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { PopoverTrigger } from \"../popover-v2\";\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour, V3_Shadow, V3_Spacing } from \"../v3_theme\";\nimport {\n MIN_HOURLY_INTERVAL_WIDTH,\n ROW_HEADER_WIDTH,\n ROW_HEIGHT,\n} from \"./const\";\n\ninterface ColumnHeaderRowProps {\n $numOfColumns: number;\n $isScrolled: boolean;\n}\n\ninterface RowHeaderColumnProps {\n $numOfRows: number;\n $isScrolled: boolean;\n}\n\ninterface TimeTableContainerProps {\n $loading: boolean \| undefined;\n $allRecordsLoaded: boolean;\n}\n\ninterface RowColumnHeaderProps {\n $isScrolledY: boolean;\n $isScrolledX: boolean;\n}\n\ninterface RowHeaderProps {\n $isScrolled: boolean;\n}\n\ninterface ClickableRowHeaderTitleProps {\n $isClickable: boolean;\n}\n\ninterface RowHeaderSubtitleProps {\n $show: boolean;\n}\n\ninterface LoadingCellWrapperProps {\n $width: number;\n}\n\ninterface ContentContainerPopoverProps {\n $numOfRows: number;\n}\n\ninterface LoaderProps {\n $isEmptyContent: boolean;\n}\n\nexport const Container = styled.div``;\n\nexport const EmptyTableContainer = styled.div`\n display: grid;\n overflow: scroll;\n position: relative;\n grid-template-columns: ${ROW_HEADER_WIDTH}px auto;\n`;\n\nexport const TimeTableContainer = styled.div<TimeTableContainerProps>`\n display: grid;\n overflow: scroll;\n position: relative;\n grid-template-columns: ${ROW_HEADER_WIDTH}px fit-content(100%);\n padding-bottom: ${(props) => (props.$allRecordsLoaded ? \"0\" : \"128px\")};\n ${(props) => {\n if (props.$loading) {\n return css`\n &:hover {\n cursor: not-allowed;\n padding-bottom: 0;\n }\n `;\n }\n }}\n`;\n\nexport const RowColumnHeader = styled.div<RowColumnHeaderProps>`\n position: sticky;\n top: 0;\n left: 0;\n background-color: ${V3_Colour[\"bg\"]};\n width: ${ROW_HEADER_WIDTH}px;\n z-index: 2;\n border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${V3_Colour[\"border\"]};\n ${(props) => {\n if (props.$isScrolledX \|\| props.$isScrolledY) {\n return css`\n box-shadow: ${V3_Shadow[\"md-subtle\"]};\n clip-path: inset(\n 0 ${props.$isScrolledX ? \"-0.12px\" : \"0\"}\n ${props.$isScrolledY ? \"-0.12px\" : \"0\"} 0\n );\n transition: box-shadow 0.5s ease-in-out,\n clip-path 0.5s ease-in-out;\n `;\n } else {\n return css`\n box-shadow: none;\n clip-path: inset(0);\n transition: box-shadow 0.5s ease-in-out,\n clip-path 0.5s ease-in-out;\n `;\n }\n }};\n`;\n\nexport const RowHeaderColumn = styled.div<RowHeaderColumnProps>`\n display: grid;\n position: sticky;\n grid-column: 1 / 2;\n left: 0;\n z-index: 1;\n background-color: ${V3_Colour[\"bg\"]};\n grid-template-rows: repeat(${(props) => props.$numOfRows}, ${ROW_HEIGHT}px);\n`;\n\nexport const ColumnHeaderRow = styled.div<ColumnHeaderRowProps>`\n display: grid;\n position: sticky;\n grid-column: 2 / 3;\n grid-row: 1 / 2;\n top: 0;\n z-index: 1;\n background-color: ${V3_Colour[\"bg\"]};\n grid-template-columns: repeat(${(props) => props.$numOfColumns}, 1fr);\n width: 100%;\n border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${V3_Colour[\"border\"]};\n transition: all 0.5s ease-in-out;\n ${(props) => {\n if (props.$isScrolled) {\n return css`\n box-shadow: ${V3_Shadow[\"md-subtle\"]};\n `;\n }\n }};\n`;\n\nexport const ColumnHeader = styled.div`\n min-width: ${MIN_HOURLY_INTERVAL_WIDTH}px;\n align-content: end;\n margin-bottom: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const ColumnHeaderTitle = styled(Typography.BodySM)`\n color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const ContentContainer = styled.div<ContentContainerPopoverProps>`\n display: grid;\n grid-template-rows: repeat(${(props) => props.$numOfRows}, ${ROW_HEIGHT}px);\n`;\n\nexport const RowHeader = styled.div<RowHeaderProps>`\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: ${V3_Colour[\"bg\"]};\n width: ${ROW_HEADER_WIDTH}px;\n height: ${ROW_HEIGHT}px;\n text-align: right;\n padding: 0 ${V3_Spacing[\"spacing-16\"]} 0 ${V3_Spacing[\"spacing-32\"]};\n border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${V3_Colour[\"border\"]};\n border-right: ${V3_Border[\"width-005\"]} ${V3_Border[\"solid\"]}\n ${V3_Colour[\"border-primary\"]};\n border-left: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${V3_Colour[\"border\"]};\n transition: all 0.5s ease-in-out;\n ${(props) => {\n if (props.$isScrolled) {\n return css`\n box-shadow: ${V3_Shadow[\"md-subtle\"]};\n clip-path: inset(0 -6px 0 0);\n `;\n } else {\n return css`\n box-shadow: none;\n `;\n }\n }};\n`;\n\nexport const ClickableRowHeaderTitle = styled(\n Typography.BodyMD\n)<ClickableRowHeaderTitleProps>`\n display: inline-block;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n white-space: nowrap;\n color: ${V3_Colour[\"text-primary\"]};\n &:hover {\n cursor: ${(props) => (props.$isClickable ? \"pointer\" : \"default\")};\n }\n`;\n\nexport const RowHeaderSubtitle = styled(\n Typography.BodyXS\n)<RowHeaderSubtitleProps>`\n display: inline-flex;\n gap: ${V3_Spacing[\"spacing-4\"]};\n align-items: center;\n color: ${V3_Colour[\"text-subtler\"]};\n ${(props) => {\n if (!props.$show) {\n return css`\n display: none;\n `;\n }\n }}\n`;\n\nexport const Loader = styled(LoadingDotsSpinner)<LoaderProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n grid-column: ${(props) => (props.$isEmptyContent ? \"1 / -1\" : \"2 / -1\")};\n grid-row: 2;\n width: 100%;\n height: 100%;\n`;\n\nexport const NoResultsFound = styled(ErrorDisplay)`\n grid-column: 1 / -1;\n grid-row: 2;\n padding: ${V3_Spacing[\"spacing-72\"]} 0;\n`;\n\nexport const LoadingWrapper = styled.div`\n display: flex;\n border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${V3_Colour[\"border\"]};\n`;\n\nexport const LoadingCell = styled.div<LoadingCellWrapperProps>`\n border-right: ${V3_Border[\"width-005\"]} ${V3_Border[\"solid\"]}\n ${V3_Colour[\"border-primary\"]};\n width: ${(props) => `${props.$width}px`};\n height: 100%;\n padding: ${V3_Spacing[\"spacing-20\"]} ${V3_Spacing[\"spacing-12\"]};\n`;\n\nconst gradientAnimation = keyframes`\n 0% {\n background-position: -468px 0;\n }\n 100% {\n background-position: 468px 0;\n }\n`;\n\nexport const LoadingBar = styled.div`\n height: 28px;\n width: 100%;\n background: linear-gradient(\n to right,\n ${V3_Colour.Primitive[\"neutral-95\"]} 8%,\n ${V3_Colour.Primitive[\"neutral-100\"]} 18%,\n ${V3_Colour.Primitive[\"neutral-95\"]} 33%\n );\n background-size: 800px 104px;\n animation: ${gradientAnimation} 1.5s forwards infinite;\n`;\n\nexport const StyledPopoverTrigger = styled(PopoverTrigger)`\n max-width: 24rem !important;\n &:hover {\n cursor: default;\n }\n`;\n"],"names":["Container","styled","div","EmptyTableContainer","ROW_HEADER_WIDTH","TimeTableContainer","props","$allRecordsLoaded","$loading","css","RowColumnHeader","V3_Colour","V3_Border","$isScrolledX","$isScrolledY","V3_Shadow","RowHeaderColumn","$numOfRows","ROW_HEIGHT","ColumnHeaderRow","$numOfColumns","$isScrolled","ColumnHeader","MIN_HOURLY_INTERVAL_WIDTH","V3_Spacing","ColumnHeaderTitle","Typography","BodySM","ContentContainer","RowHeader","ClickableRowHeaderTitle","BodyMD","$isClickable","RowHeaderSubtitle","BodyXS","$show","Loader","LoadingDotsSpinner","$isEmptyContent","NoResultsFound","ErrorDisplay","LoadingWrapper","LoadingCell","$width","gradientAnimation","keyframes","LoadingBar","Primitive","StyledPopoverTrigger","PopoverTrigger"],"mappings":"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"}
1	+ {"version":3,"file":"timetable.style.js","sources":["../../../src/timetable/timetable.style.tsx"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { PopoverTrigger } from \"../popover-v2\";\nimport { Border, Colour, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour, V3_Shadow, V3_Spacing } from \"../v3_theme\";\nimport {\n MIN_HOURLY_INTERVAL_WIDTH,\n ROW_HEADER_WIDTH,\n ROW_HEIGHT,\n} from \"./const\";\n\ninterface ColumnHeaderRowProps {\n $numOfColumns: number;\n $intervalWidth: number;\n $isScrolled: boolean;\n}\n\ninterface TimeTableContainerProps {\n $loading: boolean \| undefined;\n $allRecordsLoaded: boolean;\n}\n\ninterface RowColumnHeaderProps {\n $isScrolledY: boolean;\n $isScrolledX: boolean;\n}\n\ninterface RowHeaderProps {\n $isScrolled: boolean;\n}\n\ninterface ClickableRowHeaderTitleProps {\n $isClickable: boolean;\n}\n\ninterface RowHeaderSubtitleProps {\n $show: boolean;\n}\n\ninterface LoadingCellWrapperProps {\n $width: number;\n}\n\ninterface LoaderProps {\n $isEmptyContent: boolean;\n}\n\nexport const Container = styled.div``;\n\nexport const EmptyTableContainer = styled.div`\n display: grid;\n overflow: scroll;\n position: relative;\n grid-template-columns: ${ROW_HEADER_WIDTH}px auto;\n`;\n\nexport const TimeTableContainer = styled.div<TimeTableContainerProps>`\n display: grid;\n align-content: start;\n overflow: scroll;\n position: relative;\n padding-bottom: ${(props) => (props.$allRecordsLoaded ? \"0\" : \"128px\")};\n isolation: isolate;\n ${(props) => {\n if (props.$loading) {\n return css`\n &:hover {\n cursor: not-allowed;\n padding-bottom: 0;\n }\n `;\n }\n }}\n`;\n\nexport const RowColumnHeader = styled.div<RowColumnHeaderProps>`\n position: sticky;\n top: 0;\n left: 0;\n background-color: ${V3_Colour[\"bg\"]};\n width: ${ROW_HEADER_WIDTH}px;\n height: ${ROW_HEIGHT}px;\n z-index: 2;\n border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${V3_Colour[\"border\"]};\n ${(props) => {\n if (props.$isScrolledX \|\| props.$isScrolledY) {\n return css`\n box-shadow: ${V3_Shadow[\"md-subtle\"]};\n clip-path: inset(\n 0 ${props.$isScrolledX ? \"-0.12px\" : \"0\"}\n ${props.$isScrolledY ? \"-0.12px\" : \"0\"} 0\n );\n transition: box-shadow 0.5s ease-in-out,\n clip-path 0.5s ease-in-out;\n `;\n } else {\n return css`\n box-shadow: none;\n clip-path: inset(0);\n transition: box-shadow 0.5s ease-in-out,\n clip-path 0.5s ease-in-out;\n `;\n }\n }};\n`;\n\nexport const TimeTableHeaderRow = styled.div`\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 = styled.div<ColumnHeaderRowProps>`\n display: grid;\n background-color: ${Colour[\"bg\"]};\n height: ${ROW_HEIGHT}px;\n grid-template-columns: repeat(\n ${(props) => props.$numOfColumns},\n ${(props) =>\n Math.max(props.$intervalWidth * 4, 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 ${(props) => {\n if (props.$isScrolled) {\n return css`\n box-shadow: ${V3_Shadow[\"md-subtle\"]};\n `;\n }\n }};\n`;\n\nexport const ColumnHeader = styled.div`\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 = styled(Typography.BodySM)`\n color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const TimeTableBody = styled.div`\n width: max-content;\n min-width: 100%;\n`;\n\nexport const TimeTableRow = styled.div`\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 = styled.div<RowHeaderProps>`\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 ${V3_Spacing[\"spacing-16\"]} 0 ${V3_Spacing[\"spacing-32\"]};\n border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${V3_Colour[\"border\"]};\n border-right: ${V3_Border[\"width-005\"]} ${V3_Border[\"solid\"]}\n ${V3_Colour[\"border-primary\"]};\n border-left: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${V3_Colour[\"border\"]};\n transition: all 0.5s ease-in-out;\n ${(props) => {\n if (props.$isScrolled) {\n return css`\n box-shadow: ${V3_Shadow[\"md-subtle\"]};\n clip-path: inset(0 -6px 0 0);\n `;\n } else {\n return css`\n box-shadow: none;\n `;\n }\n }};\n`;\n\nexport const ClickableRowHeaderTitle = styled(\n Typography.BodyMD\n)<ClickableRowHeaderTitleProps>`\n display: inline-block;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n white-space: nowrap;\n color: ${V3_Colour[\"text-primary\"]};\n &:hover {\n cursor: ${(props) => (props.$isClickable ? \"pointer\" : \"default\")};\n }\n`;\n\nexport const RowHeaderSubtitle = styled(\n Typography.BodyXS\n)<RowHeaderSubtitleProps>`\n display: inline-flex;\n gap: ${V3_Spacing[\"spacing-4\"]};\n align-items: center;\n color: ${V3_Colour[\"text-subtler\"]};\n ${(props) => {\n if (!props.$show) {\n return css`\n display: none;\n `;\n }\n }}\n`;\n\nexport const Loader = styled(LoadingDotsSpinner)<LoaderProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n grid-column: ${(props) => (props.$isEmptyContent ? \"1 / -1\" : \"2 / -1\")};\n grid-row: 2;\n width: 100%;\n height: 100%;\n`;\n\nexport const NoResultsFound = styled(ErrorDisplay)`\n grid-column: 1 / -1;\n grid-row: 2;\n padding: ${V3_Spacing[\"spacing-72\"]} 0;\n`;\n\nexport const LoadingWrapper = styled.div`\n display: flex;\n border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${V3_Colour[\"border\"]};\n`;\n\nexport const LoadingCell = styled.div<LoadingCellWrapperProps>`\n border-right: ${V3_Border[\"width-005\"]} ${V3_Border[\"solid\"]}\n ${V3_Colour[\"border-primary\"]};\n width: ${(props) => `${props.$width}px`};\n height: 100%;\n padding: ${V3_Spacing[\"spacing-20\"]} ${V3_Spacing[\"spacing-12\"]};\n`;\n\nconst gradientAnimation = keyframes`\n 0% {\n background-position: -468px 0;\n }\n 100% {\n background-position: 468px 0;\n }\n`;\n\nexport const LoadingBar = styled.div`\n height: 28px;\n width: 100%;\n background: linear-gradient(\n to right,\n ${V3_Colour.Primitive[\"neutral-95\"]} 8%,\n ${V3_Colour.Primitive[\"neutral-100\"]} 18%,\n ${V3_Colour.Primitive[\"neutral-95\"]} 33%\n );\n background-size: 800px 104px;\n animation: ${gradientAnimation} 1.5s forwards infinite;\n`;\n\nexport const StyledPopoverTrigger = styled(PopoverTrigger)`\n max-width: 24rem !important;\n &:hover {\n cursor: default;\n }\n`;\n"],"names":["Container","styled","div","EmptyTableContainer","ROW_HEADER_WIDTH","TimeTableContainer","props","$allRecordsLoaded","$loading","css","RowColumnHeader","V3_Colour","ROW_HEIGHT","V3_Border","$isScrolledX","$isScrolledY","V3_Shadow","TimeTableHeaderRow","Colour","ColumnHeaderRow","$numOfColumns","Math","max","$intervalWidth","MIN_HOURLY_INTERVAL_WIDTH","Border","$isScrolled","ColumnHeader","Spacing","ColumnHeaderTitle","Typography","BodySM","TimeTableBody","TimeTableRow","RowHeader","V3_Spacing","ClickableRowHeaderTitle","BodyMD","$isClickable","RowHeaderSubtitle","BodyXS","$show","Loader","LoadingDotsSpinner","$isEmptyContent","NoResultsFound","ErrorDisplay","LoadingWrapper","LoadingCell","$width","gradientAnimation","keyframes","LoadingBar","Primitive","StyledPopoverTrigger","PopoverTrigger"],"mappings":"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"}

package/cjs/toggle/toggle-icon.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons/circle"),c=require("@lifesg/react-icons/circle-dot"),i=require("@lifesg/react-icons/cross"),s=require("@lifesg/react-icons/square"),a=require("@lifesg/react-icons/square-tick-fill"),t=require("@lifesg/react-icons/tick"),l=require("clsx"),o=require("./toggle-icon.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(l);exports.ToggleIcon=({type:l,active:n=!1,disabled:d,className:f})=>{let q;switch(l){case"checkbox":q=n?e.jsx(a.SquareTickFillIcon,{}):e.jsx(s.SquareIcon,{});break;case"radio":q=n?e.jsx(c.CircleDotIcon,{}):e.jsx(r.CircleIcon,{});break;case"tick":q=e.jsx(t.TickIcon,{});break;case"cross":q=e.jsx(i.CrossIcon,{});break;default:q=null}return e.jsx("div",{className:u.default(o.wrapperBase,n&&d?o.wrapperActiveDisabled:d?o.wrapperDisabled:n?o.wrapperActive:void 0,f),"aria-hidden":!0,children:q})};
2	+ //# sourceMappingURL=toggle-icon.js.map

package/cjs/toggle/toggle-icon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"toggle-icon.js","sources":["../../../src/toggle/toggle-icon.tsx"],"sourcesContent":["import { CircleIcon } from \"@lifesg/react-icons/circle\";\nimport { CircleDotIcon } from \"@lifesg/react-icons/circle-dot\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\n\nimport * as styles from \"./toggle-icon.styles\";\n\nexport type ToggleIconType = \"checkbox\" | \"radio\" | \"tick\" | \"cross\";\n\nexport interface ToggleIconProps {\n type: ToggleIconType;\n active?: boolean | undefined;\n disabled?: boolean | undefined;\n className?: string | undefined;\n}\n\nexport const ToggleIcon = ({\n type,\n active = false,\n disabled,\n className,\n}: ToggleIconProps) => {\n let component: JSX.Element | null;\n\n const getWrapperStateClass = () => {\n if (active && disabled) {\n return styles.wrapperActiveDisabled;\n }\n\n if (disabled) {\n return styles.wrapperDisabled;\n }\n\n if (active) {\n return styles.wrapperActive;\n }\n\n return undefined;\n };\n\n switch (type) {\n case \"checkbox\":\n component = active ? <SquareTickFillIcon /> : <SquareIcon />;\n break;\n case \"radio\":\n component = active ? <CircleDotIcon /> : <CircleIcon />;\n break;\n case \"tick\":\n component = <TickIcon />;\n break;\n case \"cross\":\n component = <CrossIcon />;\n break;\n default:\n component = null;\n break;\n }\n\n return (\n <div\n className={clsx(\n styles.wrapperBase,\n getWrapperStateClass(),\n className\n )}\n aria-hidden\n >\n {component}\n </div>\n );\n};\n"],"names":["type","active","disabled","className","component","_jsx","SquareTickFillIcon","SquareIcon","CircleDotIcon","CircleIcon","TickIcon","CrossIcon","clsx","styles.wrapperBase","styles.wrapperActiveDisabled","styles.wrapperDisabled","styles.wrapperActive"],"mappings":"wcAmB0B,EACtBA,OACAC,UAAS,EACTC,WACAC,gBAEA,IAAIC,EAkBJ,OAAQJ,GACJ,IAAK,WACDI,EAAYH,EAASI,EAAAA,IAACC,EAAAA,mBAAkB,CAAA,GAAMD,EAAAA,IAACE,EAAAA,eAC/C,MACJ,IAAK,QACDH,EAAYH,EAASI,EAAAA,IAACG,EAAAA,cAAa,CAAA,GAAMH,EAAAA,IAACI,EAAAA,eAC1C,MACJ,IAAK,OACDL,EAAYC,EAAAA,IAACK,EAAAA,SAAQ,IACrB,MACJ,IAAK,QACDN,EAAYC,EAAAA,IAACM,EAAAA,UAAS,IACtB,MACJ,QACIP,EAAY,KAIpB,OACIC,EAAAA,IAAA,MAAA,CACIF,UAAWS,EAAAA,QACPC,EAAAA,YApCJZ,GAAUC,EACHY,EAAAA,sBAGPZ,EACOa,EAAAA,gBAGPd,EACOe,EAAAA,mBADX,EA8BQb,6BAIHC,GACC"}