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

package/cjs/time-slot-week-view/time-slot-week-days.style.js

@@ -1,31 +1,31 @@
-"use strict";var e=require("styled-components");require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var r=require("../theme/tokens/colour.js"),t=require("../theme/tokens/font.js");require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("../time-slot-bar/time-slot-bar.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e);const s=l.default.div`
+"use strict";var e=require("styled-components"),t=require("../shared/time-slot/time-slot.js");require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var r=require("../theme/tokens/colour.js"),i=require("../theme/tokens/font.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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("../theme/utils/use-media-query.js");var o=l(e);const s=o.default.div`
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     user-select: none;
     margin-bottom: 0.188rem;
-`,n=l.default.div`
+`,n=o.default.div`
     grid-column: 1 / -1;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-`,d=l.default.div`
-    ${t.Font["body-xs-semibold"]}
+`,d=o.default.div`
+    ${i.Font["body-xs-semibold"]}
     color:${r.Colour.text};
 
     ${t=>t.$disabled&&e.css`
             color: ${r.Colour["text-disabled-subtlest"]};
         `};
-`,a=l.default.div`
+`,a=o.default.div`
     width: 100%;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-`,u=l.default.div`
+`,u=o.default.div`
     grid-column: 1 / -1;
     display: flex;
     min-height: 7.625rem;
-`,m=l.default.div`
-    ${t.Font["body-xs-semibold"]}
+`,m=o.default.div`
+    ${i.Font["body-xs-semibold"]}
     margin: 1rem 0rem;
     display: flex;
     flex-direction: column;
@@ -36,7 +36,13 @@
     span {
         display: block;
     }
-`,p=l.default(i.TimeSlot)`
+`,p=o.default(t.TimeSlot)`
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin: 1px 0px;
     position: relative;
 
     &:focus-within {
@@ -44,7 +50,7 @@
         outline-offset: 2px;
         z-index: 1;
     }
-`,c=l.default.div`
+`,c=o.default.div`
     display: flex;
     flex-direction: column;
     flex: 1;

package/cjs/time-slot-week-view/time-slot-week-days.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-days.style.js","sources":["../../../src/time-slot-week-view/time-slot-week-days.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Colour, Font } from \"../theme\";\nimport { TimeSlot } from \"../time-slot-bar/time-slot-bar.styles\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface LabelStyleProps {\n    $disabled: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const HeaderCellWeek = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    user-select: none;\n    margin-bottom: 0.188rem;\n`;\n\nexport const HeaderRow = styled.div`\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const DayLabel = styled.div<LabelStyleProps>`\n    ${Font[\"body-xs-semibold\"]}\n    color:${Colour[\"text\"]};\n\n    ${(props) =>\n        props.$disabled &&\n        css`\n            color: ${Colour[\"text-disabled-subtlest\"]};\n        `};\n`;\n\nexport const Wrapper = styled.div`\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const ColumnWeekCell = styled.div`\n    grid-column: 1 / -1;\n    display: flex;\n    min-height: 7.625rem;\n`;\n\nexport const TimeSlotText = styled.div`\n    ${Font[\"body-xs-semibold\"]}\n    margin: 1rem 0rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    max-width: 2.5rem;\n    color: ${Colour[\"text\"]};\n    span {\n        display: block;\n    }\n`;\n\nexport const TimeSlotComponent = styled(TimeSlot)`\n    position: relative;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        z-index: 1;\n    }\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin: 1px;\n`;\n"],"names":["HeaderCellWeek","styled","div","HeaderRow","DayLabel","Font","Colour","props","$disabled","css","Wrapper","ColumnWeekCell","TimeSlotText","TimeSlotComponent","TimeSlot","TimeSlotWrapper"],"mappings":"2oBAeO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAG;;;;;;;EAS3BC,EAAYF,EAAAA,QAAOC,GAAG;;;;EAMtBE,EAAWH,EAAAA,QAAOC,GAAoB;MAC7CG,EAAAA,KAAK;YACCC,EAAAA,OAAa;;MAElBC,GACCA,EAAMC,WACNC,KAAG;qBACUH,EAAAA,OAAO;;EAIfI,EAAUT,EAAAA,QAAOC,GAAG;;;;EAMpBS,EAAiBV,EAAAA,QAAOC,GAAG;;;;EAM3BU,EAAeX,EAAAA,QAAOC,GAAG;MAChCG,EAAAA,KAAK;;;;;;;aAOEC,EAAAA,OAAa;;;;EAMbO,EAAoBZ,EAAAA,QAAOa,EAAAA,SAAS;;;;6BAIpBR,EAAAA,OAAO;;;;EAMvBS,EAAkBd,EAAAA,QAAOC,GAAG;;;;;"}
+{"version":3,"file":"time-slot-week-days.style.js","sources":["../../../src/time-slot-week-view/time-slot-week-days.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { TimeSlot } from \"../shared/time-slot\";\nimport { Colour, Font } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface LabelStyleProps {\n    $disabled: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const HeaderCellWeek = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    user-select: none;\n    margin-bottom: 0.188rem;\n`;\n\nexport const HeaderRow = styled.div`\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const DayLabel = styled.div<LabelStyleProps>`\n    ${Font[\"body-xs-semibold\"]}\n    color:${Colour[\"text\"]};\n\n    ${(props) =>\n        props.$disabled &&\n        css`\n            color: ${Colour[\"text-disabled-subtlest\"]};\n        `};\n`;\n\nexport const Wrapper = styled.div`\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const ColumnWeekCell = styled.div`\n    grid-column: 1 / -1;\n    display: flex;\n    min-height: 7.625rem;\n`;\n\nexport const TimeSlotText = styled.div`\n    ${Font[\"body-xs-semibold\"]}\n    margin: 1rem 0rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    max-width: 2.5rem;\n    color: ${Colour[\"text\"]};\n    span {\n        display: block;\n    }\n`;\n\nexport const TimeSlotComponent = styled(TimeSlot)`\n    display: flex;\n    flex-grow: 1;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    margin: 1px 0px;\n    position: relative;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        z-index: 1;\n    }\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin: 1px;\n`;\n"],"names":["HeaderCellWeek","styled","div","HeaderRow","DayLabel","Font","Colour","props","$disabled","css","Wrapper","ColumnWeekCell","TimeSlotText","TimeSlotComponent","TimeSlot","TimeSlotWrapper"],"mappings":"4qBAeO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAG;;;;;;;EAS3BC,EAAYF,EAAAA,QAAOC,GAAG;;;;EAMtBE,EAAWH,EAAAA,QAAOC,GAAoB;MAC7CG,EAAAA,KAAK;YACCC,EAAAA,OAAa;;MAElBC,GACCA,EAAMC,WACNC,KAAG;qBACUH,EAAAA,OAAO;;EAIfI,EAAUT,EAAAA,QAAOC,GAAG;;;;EAMpBS,EAAiBV,EAAAA,QAAOC,GAAG;;;;EAM3BU,EAAeX,EAAAA,QAAOC,GAAG;MAChCG,EAAAA,KAAK;;;;;;;aAOEC,EAAAA,OAAa;;;;EAMbO,EAAoBZ,EAAAA,QAAOa,EAAAA,SAAS;;;;;;;;;;6BAUpBR,EAAAA,OAAO;;;;EAMvBS,EAAkBd,EAAAA,QAAOC,GAAG;;;;;"}

package/cjs/timeline/timeline.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),r=require("../shared/accessibility/index.js"),n=require("../typography/index.js"),s=require("./timeline.style.js");exports.Timeline=({items:a,className:l,id:c,title:d,startCol:m,colSpan:o,"data-base-indicator-testid":u,"data-testid":p="timeline",headingLevel:h=2,counterOffset:x=0})=>{const j=e=>"string"==typeof e?i.jsx(n.Typography.BodyMD,{className:"timeline-item-content-text",children:e}):i.jsx(i.Fragment,{children:e}),g=(e,t)=>"string"==typeof e?i.jsx(s.TimelineItemTitle,{forwardedAs:"h3","aria-level":t,weight:"semibold",className:"timeline-item-title",children:e}):i.jsx(i.Fragment,{children:e}),v=i=>i.slice(0,2).map(((i,t)=>e.createElement(s.TimelinePill,Object.assign({},i,{type:i.type,key:`status-pill-${t}`,"data-testid":"status-pill",className:"timeline-status-pill"}),i.children))),y=(e,r)=>{switch(e){case"completed":return i.jsx(t.TickIcon,{"aria-hidden":!0});case"error":return i.jsx(t.ExclamationCircleFillIcon,{"aria-hidden":!0});case"numeric":return i.jsx("span",{"aria-hidden":!0,children:r+1+x});default:return null}},T=(e,i)=>{switch(e){case"current":return"Current step";case"completed":return"Completed step";case"upcoming-active":return"Upcoming active step";case"upcoming-inactive":return"Upcoming inactive step";case"disabled":return"Inactive step";case"error":return"Current step, action required";case"numeric":return`Step number ${i+1+x}`;default:return""}};return i.jsxs(s.TimelineWrapper,{className:l,id:c,"data-testid":p,$startCol:m,$colSpan:o,children:[i.jsx(s.TimelineTitle,{forwardedAs:"h2","aria-level":h,"data-testid":"timeline-title",weight:"bold",children:d}),i.jsx("div",{role:"list",children:a.map(((e,t)=>{const{title:n,content:a,statuses:l,variant:c}=e,d=u?`circleindicator${t+1}_div_${u}`:"circleindicator",m=c||(0===t?"current":"upcoming-active");return i.jsxs(s.TimelineItem,{role:"listitem",children:[i.jsxs(s.TimelineIndicators,{children:[i.jsxs(s.CircleIndicator,{"data-testid":d,$variant:m,children:[i.jsx(r.VisuallyHidden,{children:T(m,t)}),y(m,t)]}),i.jsx(s.LineIndicator,{$variant:m})]}),i.jsxs(s.TimelineItemContent,{className:"timeline-item-content",children:[g(n,h+1),l&&i.jsx(s.TimelinePills,{children:v(l)}),j(a)]})]},`timeline-item-${t}`)}))})]})};
+"use strict";var e=require("react"),t=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),r=require("clsx"),s=require("../pill/pill.js"),a=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var n=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var l=require("../typography/index.js"),c=require("./timeline.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(r);exports.Timeline=({items:r,className:d,id:m,title:o,startCol:p,colSpan:h,"data-base-indicator-testid":j,"data-testid":v="timeline",headingLevel:x=2,counterOffset:y=0})=>{const g=e.useRef(null);n.useApplyStyle(g,{[c.tokens.wrapper.startCol]:p,[c.tokens.wrapper.colSpan]:h});const q=e=>"string"==typeof e?t.jsx(l.Typography.BodyMD,{className:"timeline-item-content-text",children:e}):t.jsx(t.Fragment,{children:e}),f=(e,i)=>"string"==typeof e?t.jsx(l.Typography.HeadingXS,{as:"h3","aria-level":i,weight:"semibold",className:u.default(c.timelineItemTitle,"timeline-item-title"),children:e}):t.jsx(t.Fragment,{children:e}),N=t=>t.slice(0,2).map(((t,i)=>e.createElement(s.Pill,Object.assign({},t,{type:t.type,key:`status-pill-${i}`,"data-testid":"status-pill",className:"timeline-status-pill"}),t.children))),b=(e,r)=>{switch(e){case"completed":return t.jsx(i.TickIcon,{"aria-hidden":!0});case"error":return t.jsx(i.ExclamationCircleFillIcon,{"aria-hidden":!0});case"numeric":return t.jsx("span",{"aria-hidden":!0,children:r+1+y});default:return null}},I=(e,t)=>{switch(e){case"current":return"Current step";case"completed":return"Completed step";case"upcoming-active":return"Upcoming active step";case"upcoming-inactive":return"Upcoming inactive step";case"disabled":return"Inactive step";case"error":return"Current step, action required";case"numeric":return`Step number ${t+1+y}`;default:return""}};return t.jsxs("div",{ref:g,className:u.default(c.timelineWrapper,d),id:m,"data-testid":v,children:[t.jsx(l.Typography.HeadingSM,{as:"h2","aria-level":x,"data-testid":"timeline-title",weight:"bold",className:c.timelineTitle,children:o}),t.jsx("div",{role:"list",children:r.map(((e,i)=>{const{title:r,content:s,statuses:n,variant:l}=e,d=j?`circleindicator${i+1}_div_${j}`:"circleindicator",m=l||(0===i?"current":"upcoming-active");return t.jsxs("div",{role:"listitem",className:c.timelineItem,children:[t.jsxs("div",{className:c.timelineIndicators,children:[t.jsxs("div",{"data-testid":d,className:c.circleIndicator,"data-variant":m,children:[t.jsx(a.VisuallyHidden,{children:I(m,i)}),b(m,i)]}),t.jsx("div",{className:c.lineIndicator,"data-variant":m})]}),t.jsxs("div",{className:u.default(c.timelineItemContent,"timeline-item-content"),children:[f(r,x+1),n&&t.jsx("div",{className:c.timelinePills,children:N(n)}),q(s)]})]},`timeline-item-${i}`)}))})]})};
 //# sourceMappingURL=timeline.js.map

package/cjs/timeline/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sources":["../../../src/timeline/timeline.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon, TickIcon } from \"@lifesg/react-icons\";\n\nimport type { PillProps } from \"../pill\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport {\n    CircleIndicator,\n    LineIndicator,\n    TimelineIndicators,\n    TimelineItem,\n    TimelineItemContent,\n    TimelineItemTitle,\n    TimelinePill,\n    TimelinePills,\n    TimelineTitle,\n    TimelineWrapper,\n} from \"./timeline.style\";\nimport type { TimelineItemProps, TimelineProps, Variant } from \"./types\";\n\nexport const Timeline = ({\n    items,\n    className,\n    id,\n    title,\n    startCol,\n    colSpan,\n    \"data-base-indicator-testid\": baseIndicatorTestId,\n    \"data-testid\": testId = \"timeline\",\n    headingLevel = 2,\n    counterOffset = 0,\n}: TimelineProps): JSX.Element => {\n    // ===========================================================================\n    // RENDER\n    // ===========================================================================\n    const renderContent = (content: string | JSX.Element): JSX.Element => {\n        if (typeof content === \"string\") {\n            return (\n                <Typography.BodyMD className=\"timeline-item-content-text\">\n                    {content}\n                </Typography.BodyMD>\n            );\n        }\n\n        return <>{content}</>;\n    };\n\n    const renderTitle = (\n        title: string | JSX.Element,\n        level: number\n    ): JSX.Element => {\n        if (typeof title === \"string\") {\n            return (\n                <TimelineItemTitle\n                    forwardedAs=\"h3\"\n                    aria-level={level}\n                    weight=\"semibold\"\n                    className=\"timeline-item-title\"\n                >\n                    {title}\n                </TimelineItemTitle>\n            );\n        }\n\n        return <>{title}</>;\n    };\n\n    const renderStatusPills = (statuses: PillProps[]): JSX.Element[] => {\n        // maximum 2 pills allowed\n        const renderableStatuses = statuses.slice(0, 2);\n        return renderableStatuses.map((status: PillProps, index) => {\n            return (\n                <TimelinePill\n                    {...status}\n                    type={status.type}\n                    key={`status-pill-${index}`}\n                    data-testid=\"status-pill\"\n                    className=\"timeline-status-pill\"\n                >\n                    {status.children}\n                </TimelinePill>\n            );\n        });\n    };\n\n    const renderIcon = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"completed\":\n                return <TickIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"numeric\":\n                return <span aria-hidden>{index + 1 + counterOffset}</span>;\n            default:\n                return null;\n        }\n    };\n\n    const getStatus = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"current\":\n                return \"Current step\";\n            case \"completed\":\n                return \"Completed step\";\n            case \"upcoming-active\":\n                return \"Upcoming active step\";\n            case \"upcoming-inactive\":\n                return \"Upcoming inactive step\";\n            case \"disabled\":\n                return \"Inactive step\";\n            case \"error\":\n                return \"Current step, action required\";\n            case \"numeric\":\n                return `Step number ${index + 1 + counterOffset}`;\n            default:\n                return \"\";\n        }\n    };\n\n    const renderItems = () =>\n        items.map((item: TimelineItemProps, index) => {\n            const { title, content, statuses, variant: _variant } = item;\n            const circleIndicatorTestId = baseIndicatorTestId\n                ? `circleindicator${index + 1}_div_${baseIndicatorTestId}`\n                : \"circleindicator\";\n            const variant =\n                _variant || (index === 0 ? \"current\" : \"upcoming-active\");\n\n            return (\n                <TimelineItem key={`timeline-item-${index}`} role=\"listitem\">\n                    <TimelineIndicators>\n                        <CircleIndicator\n                            data-testid={circleIndicatorTestId}\n                            $variant={variant}\n                        >\n                            <VisuallyHidden>\n                                {getStatus(variant, index)}\n                            </VisuallyHidden>\n                            {renderIcon(variant, index)}\n                        </CircleIndicator>\n                        <LineIndicator $variant={variant} />\n                    </TimelineIndicators>\n                    <TimelineItemContent className=\"timeline-item-content\">\n                        {renderTitle(title, headingLevel + 1)}\n                        {statuses && (\n                            <TimelinePills>\n                                {renderStatusPills(statuses)}\n                            </TimelinePills>\n                        )}\n                        {renderContent(content)}\n                    </TimelineItemContent>\n                </TimelineItem>\n            );\n        });\n\n    return (\n        <TimelineWrapper\n            className={className}\n            id={id}\n            data-testid={testId}\n            $startCol={startCol}\n            $colSpan={colSpan}\n        >\n            <TimelineTitle\n                forwardedAs=\"h2\"\n                aria-level={headingLevel}\n                data-testid=\"timeline-title\"\n                weight=\"bold\"\n            >\n                {title}\n            </TimelineTitle>\n            <div role=\"list\">{renderItems()}</div>\n        </TimelineWrapper>\n    );\n};\n"],"names":["items","className","id","title","startCol","colSpan","baseIndicatorTestId","testId","headingLevel","counterOffset","renderContent","content","_jsx","Typography","BodyMD","children","_Fragment","renderTitle","level","TimelineItemTitle","forwardedAs","weight","renderStatusPills","statuses","slice","map","status","index","_createElement","TimelinePill","Object","assign","type","key","renderIcon","variant","TickIcon","ExclamationCircleFillIcon","getStatus","_jsxs","TimelineWrapper","$colSpan","TimelineTitle","role","item","_variant","circleIndicatorTestId","TimelineItem","TimelineIndicators","CircleIndicator","$variant","VisuallyHidden","LineIndicator","TimelineItemContent","TimelinePills"],"mappings":"wOAmBwB,EACpBA,QACAC,YACAC,KACAC,QACAC,WACAC,UACA,6BAA8BC,EAC9B,cAAeC,EAAS,WACxBC,eAAe,EACfC,gBAAgB,MAKhB,MAAMC,EAAiBC,GACI,iBAAZA,EAEHC,EAAAA,IAACC,EAAAA,WAAWC,OAAM,CAACb,UAAU,6BAA4Bc,SACpDJ,IAKNC,EAAAA,IAAAI,EAAAA,SAAA,CAAAD,SAAGJ,IAGRM,EAAc,CAChBd,EACAe,IAEqB,iBAAVf,EAEHS,EAAAA,IAACO,EAAAA,kBAAiB,CACdC,YAAY,kBACAF,EACZG,OAAO,WACPpB,UAAU,sBAAqBc,SAE9BZ,IAKNS,EAAAA,IAAAI,EAAAA,SAAA,CAAAD,SAAGZ,IAGRmB,EAAqBC,GAEIA,EAASC,MAAM,EAAG,GACnBC,KAAI,CAACC,EAAmBC,IAE1CC,EAAAA,cAACC,eAAYC,OAAAC,OAAA,GACLL,EAAM,CACVM,KAAMN,EAAOM,KACbC,IAAK,eAAeN,IAAO,cACf,cACZ1B,UAAU,yBAETyB,EAAOX,YAMlBmB,EAAa,CAACC,EAAkBR,KAClC,OAAQQ,GACJ,IAAK,YACD,OAAOvB,EAAAA,IAACwB,EAAAA,SAAQ,CAAA,eAAA,IACpB,IAAK,QACD,OAAOxB,EAAAA,IAACyB,EAAAA,0BAAyB,CAAA,eAAA,IACrC,IAAK,UACD,OAAOzB,EAAAA,sCAAmBe,EAAQ,EAAIlB,IAC1C,QACI,OAAO,OAIb6B,EAAY,CAACH,EAAkBR,KACjC,OAAQQ,GACJ,IAAK,UACD,MAAO,eACX,IAAK,YACD,MAAO,iBACX,IAAK,kBACD,MAAO,uBACX,IAAK,oBACD,MAAO,yBACX,IAAK,WACD,MAAO,gBACX,IAAK,QACD,MAAO,gCACX,IAAK,UACD,MAAO,eAAeR,EAAQ,EAAIlB,IACtC,QACI,MAAO,KAwCnB,OACI8B,EAAAA,KAACC,EAAAA,gBAAe,CACZvC,UAAWA,EACXC,GAAIA,EAAE,cACOK,YACFH,EAAQqC,SACTpC,EAAOU,SAAA,CAEjBH,EAAAA,IAAC8B,EAAAA,cAAa,CACVtB,YAAY,KAAI,aACJZ,gBACA,iBACZa,OAAO,gBAENlB,IAELS,EAAAA,IAAA,MAAA,CAAK+B,KAAK,OAAM5B,SAnDpBf,EAAMyB,KAAI,CAACmB,EAAyBjB,KAChC,MAAMxB,MAAEA,EAAKQ,QAAEA,EAAOY,SAAEA,EAAUY,QAASU,GAAaD,EAClDE,EAAwBxC,EACxB,kBAAkBqB,EAAQ,SAASrB,IACnC,kBACA6B,EACFU,IAAuB,IAAVlB,EAAc,UAAY,mBAE3C,OACIY,EAAAA,KAACQ,EAAAA,cAA4CJ,KAAK,WAAU5B,SAAA,CACxDwB,EAAAA,KAACS,EAAAA,mBAAkB,CAAAjC,SAAA,CACfwB,EAAAA,KAACU,EAAAA,gBAAe,CAAA,cACCH,EAAqBI,SACxBf,YAEVvB,EAAAA,IAACuC,EAAAA,eAAc,CAAApC,SACVuB,EAAUH,EAASR,KAEvBO,EAAWC,EAASR,MAEzBf,EAAAA,IAACwC,EAAAA,wBAAwBjB,OAE7BI,EAAAA,KAACc,sBAAmB,CAACpD,UAAU,kCAC1BgB,EAAYd,EAAOK,EAAe,GAClCe,GACGX,EAAAA,IAAC0C,EAAAA,cAAa,CAAAvC,SACTO,EAAkBC,KAG1Bb,EAAcC,QApBJ,iBAAiBgB,IAsBrB,QAqBL"}
+{"version":3,"file":"timeline.js","sources":["../../../src/timeline/timeline.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon, TickIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { PillProps } from \"../pill\";\nimport { Pill } from \"../pill\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./timeline.styles\";\nimport type { TimelineItemProps, TimelineProps, Variant } from \"./types\";\n\nexport const Timeline = ({\n    items,\n    className,\n    id,\n    title,\n    startCol,\n    colSpan,\n    \"data-base-indicator-testid\": baseIndicatorTestId,\n    \"data-testid\": testId = \"timeline\",\n    headingLevel = 2,\n    counterOffset = 0,\n}: TimelineProps): JSX.Element => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.wrapper.startCol]: startCol,\n        [styles.tokens.wrapper.colSpan]: colSpan,\n    });\n\n    // ===========================================================================\n    // RENDER\n    // ===========================================================================\n    const renderContent = (content: string | JSX.Element): JSX.Element => {\n        if (typeof content === \"string\") {\n            return (\n                <Typography.BodyMD className=\"timeline-item-content-text\">\n                    {content}\n                </Typography.BodyMD>\n            );\n        }\n\n        return <>{content}</>;\n    };\n\n    const renderTitle = (\n        title: string | JSX.Element,\n        level: number\n    ): JSX.Element => {\n        if (typeof title === \"string\") {\n            return (\n                <Typography.HeadingXS\n                    as=\"h3\"\n                    aria-level={level}\n                    weight=\"semibold\"\n                    className={clsx(\n                        styles.timelineItemTitle,\n                        \"timeline-item-title\"\n                    )}\n                >\n                    {title}\n                </Typography.HeadingXS>\n            );\n        }\n\n        return <>{title}</>;\n    };\n\n    const renderStatusPills = (statuses: PillProps[]): JSX.Element[] => {\n        // maximum 2 pills allowed\n        const renderableStatuses = statuses.slice(0, 2);\n        return renderableStatuses.map((status: PillProps, index) => {\n            return (\n                <Pill\n                    {...status}\n                    type={status.type}\n                    key={`status-pill-${index}`}\n                    data-testid=\"status-pill\"\n                    className=\"timeline-status-pill\"\n                >\n                    {status.children}\n                </Pill>\n            );\n        });\n    };\n\n    const renderIcon = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"completed\":\n                return <TickIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"numeric\":\n                return <span aria-hidden>{index + 1 + counterOffset}</span>;\n            default:\n                return null;\n        }\n    };\n\n    const getStatus = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"current\":\n                return \"Current step\";\n            case \"completed\":\n                return \"Completed step\";\n            case \"upcoming-active\":\n                return \"Upcoming active step\";\n            case \"upcoming-inactive\":\n                return \"Upcoming inactive step\";\n            case \"disabled\":\n                return \"Inactive step\";\n            case \"error\":\n                return \"Current step, action required\";\n            case \"numeric\":\n                return `Step number ${index + 1 + counterOffset}`;\n            default:\n                return \"\";\n        }\n    };\n\n    const renderItems = () =>\n        items.map((item: TimelineItemProps, index) => {\n            const { title, content, statuses, variant: _variant } = item;\n            const circleIndicatorTestId = baseIndicatorTestId\n                ? `circleindicator${index + 1}_div_${baseIndicatorTestId}`\n                : \"circleindicator\";\n            const variant =\n                _variant || (index === 0 ? \"current\" : \"upcoming-active\");\n\n            return (\n                <div\n                    key={`timeline-item-${index}`}\n                    role=\"listitem\"\n                    className={styles.timelineItem}\n                >\n                    <div className={styles.timelineIndicators}>\n                        <div\n                            data-testid={circleIndicatorTestId}\n                            className={styles.circleIndicator}\n                            data-variant={variant}\n                        >\n                            <VisuallyHidden>\n                                {getStatus(variant, index)}\n                            </VisuallyHidden>\n                            {renderIcon(variant, index)}\n                        </div>\n                        <div\n                            className={styles.lineIndicator}\n                            data-variant={variant}\n                        />\n                    </div>\n                    <div\n                        className={clsx(\n                            styles.timelineItemContent,\n                            \"timeline-item-content\"\n                        )}\n                    >\n                        {renderTitle(title, headingLevel + 1)}\n                        {statuses && (\n                            <div className={styles.timelinePills}>\n                                {renderStatusPills(statuses)}\n                            </div>\n                        )}\n                        {renderContent(content)}\n                    </div>\n                </div>\n            );\n        });\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.timelineWrapper, className)}\n            id={id}\n            data-testid={testId}\n        >\n            <Typography.HeadingSM\n                as=\"h2\"\n                aria-level={headingLevel}\n                data-testid=\"timeline-title\"\n                weight=\"bold\"\n                className={styles.timelineTitle}\n            >\n                {title}\n            </Typography.HeadingSM>\n            <div role=\"list\">{renderItems()}</div>\n        </div>\n    );\n};\n"],"names":["items","className","id","title","startCol","colSpan","baseIndicatorTestId","testId","headingLevel","counterOffset","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","renderContent","content","_jsx","Typography","BodyMD","children","_Fragment","renderTitle","level","HeadingXS","as","weight","clsx","styles.timelineItemTitle","renderStatusPills","statuses","slice","map","status","index","_createElement","Pill","Object","assign","type","key","renderIcon","variant","TickIcon","ExclamationCircleFillIcon","getStatus","_jsxs","ref","styles.timelineWrapper","HeadingSM","styles.timelineTitle","role","item","_variant","circleIndicatorTestId","styles.timelineItem","styles.timelineIndicators","styles.circleIndicator","VisuallyHidden","styles.lineIndicator","styles.timelineItemContent","styles.timelinePills"],"mappings":"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"}

package/cjs/timeline/timeline.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./timeline.styles_1wcnzot.css");exports.circleIndicator="c1epf9wu",exports.lineIndicator="l1ff2pyq",exports.timelineIndicators="t1qzwom7",exports.timelineItem="t1d2q33u",exports.timelineItemContent="tvlbvjk",exports.timelineItemTitle="t1qpo82v",exports.timelinePills="t1afag3x",exports.timelineTitle="tfsmff8",exports.timelineWrapper="tuaspcp",exports.tokens={wrapper:{startCol:"--fds-internal-timeline-wrapper-startCol",colSpan:"--fds-internal-timeline-wrapper-colSpan"}};
+//# sourceMappingURL=timeline.styles.js.map

package/cjs/timeline/timeline.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.styles.js","sources":["../../../src/timeline/timeline.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\n\n// =============================================================================\n// TOKENS\n// =============================================================================\nexport const tokens = {\n    wrapper: {\n        startCol: \"--fds-internal-timeline-wrapper-startCol\",\n        colSpan: \"--fds-internal-timeline-wrapper-colSpan\",\n    },\n} as const;\n\nexport const circleIndicator = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1.5rem;\n    height: 1.5rem;\n    border-radius: 100%;\n\n    &[data-variant=\"current\"] {\n        background-color: ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    &[data-variant=\"upcoming-active\"] {\n        border: 4px solid ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    &[data-variant=\"upcoming-inactive\"] {\n        border: 4px solid ${Colour[\"icon-subtle\"]};\n    }\n\n    &[data-variant=\"disabled\"] {\n        background-color: ${Colour[\"icon-disabled-subtle\"]};\n    }\n\n    &[data-variant=\"completed\"] {\n        background-color: ${Colour[\"icon-success\"]};\n\n        svg {\n            color: ${Colour[\"icon-inverse\"]};\n        }\n    }\n\n    &[data-variant=\"numeric\"] {\n        background-color: ${Colour[\"icon-info\"]};\n        color: ${Colour[\"text-inverse\"]};\n        ${Font[\"body-sm-bold\"]}\n    }\n\n    &[data-variant=\"error\"] {\n        width: 1.8rem;\n        height: 1.8rem;\n        margin: -0.15rem 0 -0.15rem -0.15rem;\n\n        svg {\n            color: ${Colour[\"icon-error\"]};\n            height: 100%;\n            width: 100%;\n        }\n    }\n`;\n\nexport const lineIndicator = css`\n    width: 4px;\n    flex-grow: 1;\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n    border-radius: ${Radius[\"full\"]};\n\n    &[data-variant=\"completed\"] {\n        background-color: ${Colour[\"icon-success\"]};\n    }\n\n    &[data-variant=\"current\"],\n    &[data-variant=\"upcoming-active\"] {\n        background-color: ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    &[data-variant=\"upcoming-inactive\"] {\n        background-color: ${Colour[\"icon-subtle\"]};\n    }\n\n    &[data-variant=\"disabled\"] {\n        background-color: ${Colour[\"icon-disabled-subtle\"]};\n    }\n\n    &[data-variant=\"numeric\"] {\n        background-color: ${Colour[\"icon-info\"]};\n    }\n\n    &[data-variant=\"error\"] {\n        margin-left: -0.15rem;\n        background-color: ${Colour[\"icon-error\"]};\n    }\n`;\n\nexport const timelineIndicators = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-right: 1rem;\n`;\n\nexport const timelineWrapper = css`\n    ${tokens.wrapper.startCol}: initial;\n    ${tokens.wrapper.colSpan}: initial;\n    grid-column: var(${tokens.wrapper.startCol}, 3) / span\n        var(${tokens.wrapper.colSpan}, 8);\n\n    ${MediaQuery.MaxWidth.lg} {\n        grid-column: span 8;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        grid-column: span 8;\n    }\n`;\n\nexport const timelineTitle = css`\n    margin-bottom: 1rem;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-bottom: 1.5rem;\n    }\n`;\n\nexport const timelineItemTitle = css`\n    margin-top: -0.125rem;\n    margin-bottom: 0.5rem;\n`;\n\n// default is 2-8-2 on desktop\nexport const timelineItem = css`\n    display: flex;\n\n    &:last-of-type .${lineIndicator} {\n        margin-bottom: 0;\n    }\n`;\n\nexport const timelineItemContent = css`\n    margin-bottom: 2rem;\n    width: 100%;\n`;\n\nexport const timelinePills = css`\n    display: flex;\n    flex-wrap: wrap;\n    margin-bottom: 0.5rem;\n    gap: 0.5rem;\n`;\n"],"names":["wrapper","startCol","colSpan"],"mappings":"sGAc4B,iCAmDF,sCAkCK,gCAoCN,uCAQO,oCAdF,iCAmBJ,iCA3BA,kCAfE,yBAnGN,CAClBA,QAAS,CACLC,SAAU,2CACVC,QAAS"}

package/cjs/timeline/timeline.styles_1wcnzot.css

@@ -0,0 +1,9 @@
+.c1epf9wu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:1.5rem;height:1.5rem;border-radius:100%;}.c1epf9wu[data-variant="current"]{background-color:var(--fds-colour-icon-primary-subtle);}.c1epf9wu[data-variant="upcoming-active"]{border:4px solid var(--fds-colour-icon-primary-subtle);}.c1epf9wu[data-variant="upcoming-inactive"]{border:4px solid var(--fds-colour-icon-subtle);}.c1epf9wu[data-variant="disabled"]{background-color:var(--fds-colour-icon-disabled-subtle);}.c1epf9wu[data-variant="completed"]{background-color:var(--fds-colour-icon-success);}.c1epf9wu[data-variant="completed"] svg{color:var(--fds-colour-icon-inverse);}.c1epf9wu[data-variant="numeric"]{background-color:var(--fds-colour-icon-info);color:var(--fds-colour-text-inverse);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}.c1epf9wu[data-variant="error"]{width:1.8rem;height:1.8rem;margin:-0.15rem 0 -0.15rem -0.15rem;}.c1epf9wu[data-variant="error"] svg{color:var(--fds-colour-icon-error);height:100%;width:100%;}
+.l1ff2pyq{width:4px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin-top:0.5rem;margin-bottom:0.5rem;border-radius:var(--fds-radius-full);}.l1ff2pyq[data-variant="completed"]{background-color:var(--fds-colour-icon-success);}.l1ff2pyq[data-variant="current"],.l1ff2pyq[data-variant="upcoming-active"]{background-color:var(--fds-colour-icon-primary-subtle);}.l1ff2pyq[data-variant="upcoming-inactive"]{background-color:var(--fds-colour-icon-subtle);}.l1ff2pyq[data-variant="disabled"]{background-color:var(--fds-colour-icon-disabled-subtle);}.l1ff2pyq[data-variant="numeric"]{background-color:var(--fds-colour-icon-info);}.l1ff2pyq[data-variant="error"]{margin-left:-0.15rem;background-color:var(--fds-colour-icon-error);}
+.t1qzwom7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:1rem;}
+.tuaspcp{--fds-internal-timeline-wrapper-startCol:initial;--fds-internal-timeline-wrapper-colSpan:initial;grid-column:var(--fds-internal-timeline-wrapper-startCol, 3)/span var(--fds-internal-timeline-wrapper-colSpan, 8);}:where(body.fds-breakpoint-lg-max) .tuaspcp{grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .tuaspcp{grid-column:span 8;}
+.tfsmff8{margin-bottom:1rem;}:where(body.fds-breakpoint-lg-max) .tfsmff8{margin-bottom:1.5rem;}
+.t1qpo82v{margin-top:-0.125rem;margin-bottom:0.5rem;}
+.t1d2q33u{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.t1d2q33u:last-of-type .l1ff2pyq{margin-bottom:0;}
+.tvlbvjk{margin-bottom:2rem;width:100%;}
+.t1afag3x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0.5rem;gap:0.5rem;}

package/cjs/timetable/const.js

@@ -1,2 +1,2 @@
-"use strict";exports.MIN_HOURLY_INTERVAL_WIDTH=84,exports.MIN_INTERVAL_WIDTH=21,exports.ROW_BAR_COLOR_ALTERNATE_COLOR=["#FFF2DD","#EBF7F5","#F2F4FE","#FCF1F2","#E9F6FD"],exports.ROW_BAR_COLOR_SEQUENCE=["#FFE6BB","#D8EFEB","#E6EAFE","#FAE4E5","#D3EEFC"],exports.ROW_CELL_GAP=2,exports.ROW_HEADER_WIDTH=252,exports.ROW_HEIGHT=68,exports.ROW_INTERVAL=15;
+"use strict";exports.MIN_INTERVAL_WIDTH=21,exports.ROW_BAR_COLOR_ALTERNATE_COLOR=["#FFF2DD","#EBF7F5","#F2F4FE","#FCF1F2","#E9F6FD"],exports.ROW_BAR_COLOR_SEQUENCE=["#FFE6BB","#D8EFEB","#E6EAFE","#FAE4E5","#D3EEFC"],exports.ROW_CELL_GAP=2,exports.ROW_HEADER_WIDTH=252,exports.ROW_INTERVAL=15;
 //# sourceMappingURL=const.js.map

package/cjs/timetable/const.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.js","sources":["../../../src/timetable/const.ts"],"sourcesContent":["export const ROW_BAR_COLOR_SEQUENCE = [\n    \"#FFE6BB\",\n    \"#D8EFEB\",\n    \"#E6EAFE\",\n    \"#FAE4E5\",\n    \"#D3EEFC\",\n] as const; // Assert to be a readonly tuple\nexport type RowBarMainColors = (typeof ROW_BAR_COLOR_SEQUENCE)[number];\nexport const ROW_CELL_GAP = 2;\nexport const ROW_INTERVAL = 15;\nexport const MIN_INTERVAL_WIDTH = 21;\nexport const ROW_HEADER_WIDTH = 252;\nexport const ROW_HEIGHT = 68;\nexport const MIN_HOURLY_INTERVAL_WIDTH = 84;\nexport const ROW_BAR_COLOR_ALTERNATE_COLOR = [\n    \"#FFF2DD\",\n    \"#EBF7F5\",\n    \"#F2F4FE\",\n    \"#FCF1F2\",\n    \"#E9F6FD\",\n] as const;\nexport type RowBarAlternateColors =\n    (typeof ROW_BAR_COLOR_ALTERNATE_COLOR)[number];\n"],"names":[],"mappings":"+CAayC,8BAHP,yCAIW,CACzC,UACA,UACA,UACA,UACA,0CAnBkC,CAClC,UACA,UACA,UACA,UACA,gCAGwB,2BAGI,uBACN,wBAHE"}
+{"version":3,"file":"const.js","sources":["../../../src/timetable/const.ts"],"sourcesContent":["export const ROW_BAR_COLOR_SEQUENCE = [\n    \"#FFE6BB\",\n    \"#D8EFEB\",\n    \"#E6EAFE\",\n    \"#FAE4E5\",\n    \"#D3EEFC\",\n] as const; // Assert to be a readonly tuple\nexport type RowBarMainColors = (typeof ROW_BAR_COLOR_SEQUENCE)[number];\nexport const ROW_CELL_GAP = 2;\nexport const ROW_INTERVAL = 15;\nexport const MIN_INTERVAL_WIDTH = 21;\nexport const ROW_HEADER_WIDTH = 252;\nexport const ROW_HEIGHT = 68;\nexport const MIN_HOURLY_INTERVAL_WIDTH = 84;\nexport const ROW_BAR_COLOR_ALTERNATE_COLOR = [\n    \"#FFF2DD\",\n    \"#EBF7F5\",\n    \"#F2F4FE\",\n    \"#FCF1F2\",\n    \"#E9F6FD\",\n] as const;\nexport type RowBarAlternateColors =\n    (typeof ROW_BAR_COLOR_ALTERNATE_COLOR)[number];\n"],"names":[],"mappings":"wCAUkC,yCAIW,CACzC,UACA,UACA,UACA,UACA,0CAnBkC,CAClC,UACA,UACA,UACA,UACA,gCAGwB,2BAGI,yBAFJ"}

package/cjs/timetable/timetable-header/timetable-header.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),a=require("./timetable-header.style.js");exports.TimeTableHeader=l=>{var{selectedDate:s,loading:i,tableContainerRef:o,totalRecords:n,onPreviousDayClick:d,onNextDayClick:c,onRefresh:u,onCalendarDateSelect:b}=l,g=e.__rest(l,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const h=()=>{o.current&&(o.current.scrollTop=0)},x=()=>{u&&(h(),u())};return t.jsxs(a.NavigationHeaderWrapper,{children:[t.jsx(a.StyledDateNavigator,Object.assign({selectedDate:s,loading:i},g,{onRightArrowClick:e=>{h(),c(e)},onLeftArrowClick:e=>{h(),d(e)},onCalendarDateSelect:b})),void 0===n?t.jsx(t.Fragment,{}):t.jsxs(a.NavigationHeaderSubtitleWrapper,{children:[t.jsxs(a.StyledResultText,{"data-testid":"timetable-records-results",weight:"semibold",children:[n," results found"]}),u&&t.jsx(a.StyledRefreshButton,{"data-testid":"timetable-records-refresh-btn","aria-label":"Refresh timetable records",styleType:"light",sizeType:"small",disabled:i,onClick:x,$loading:i,icon:t.jsx(r.RefreshIcon,{})})]})]})};
+"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),a=require("clsx"),s=require("../../button/button.js"),i=require("../../date-navigator/date-navigator.js"),l=require("../../typography/index.js"),o=require("./timetable-header.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(a);exports.TimeTableHeader=a=>{var{selectedDate:n,loading:c,tableContainerRef:u,totalRecords:g,onPreviousDayClick:b,onNextDayClick:f,onRefresh:h,onCalendarDateSelect:j}=a,v=e.__rest(a,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const m=()=>{u.current&&(u.current.scrollTop=0)},x=()=>{h&&(m(),h())};return t.jsxs("div",{className:o.navigationHeaderWrapper,children:[t.jsx(i.DateNavigator,Object.assign({className:o.dateNavigator,selectedDate:n,loading:c},v,{onRightArrowClick:e=>{m(),f(e)},onLeftArrowClick:e=>{m(),b(e)},onCalendarDateSelect:j})),void 0===g?t.jsx(t.Fragment,{}):t.jsxs("div",{className:o.navigationHeaderSubtitleWrapper,children:[t.jsxs(l.Typography.BodySM,{className:o.resultText,"data-testid":"timetable-records-results",weight:"semibold",children:[g," result",1!==g?"s":""," found"]}),h&&t.jsx(s.Button,{"data-testid":"timetable-records-refresh-btn","aria-label":"Refresh timetable records",styleType:"light",sizeType:"small",disabled:c,onClick:x,className:d.default(o.refreshButton,c&&o.refreshButtonLoading),icon:t.jsx(r.RefreshIcon,{})})]})]})};
 //# sourceMappingURL=timetable-header.js.map

package/cjs/timetable/timetable-header/timetable-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"timetable-header.js","sources":["../../../../src/timetable/timetable-header/timetable-header.tsx"],"sourcesContent":["import { RefreshIcon } from \"@lifesg/react-icons\";\nimport type { RefObject } from \"react\";\n\nimport {\n    NavigationHeaderSubtitleWrapper,\n    NavigationHeaderWrapper,\n    StyledDateNavigator,\n    StyledRefreshButton,\n    StyledResultText,\n} from \"./timetable-header.style\";\n\ninterface TimeTableHeaderProps {\n    selectedDate: string;\n    loading: boolean;\n    tableContainerRef: RefObject<HTMLDivElement>;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    totalRecords?: number | undefined;\n    showDateAsShortForm?: boolean | undefined;\n    showCurrentDateAsToday?: boolean | undefined;\n    onPreviousDayClick: (currentDate: string) => void | undefined;\n    onNextDayClick: (currentDate: string) => void | undefined;\n    onRefresh?: (() => void) | undefined;\n    onCalendarDateSelect?: ((currentDate: string) => void) | undefined;\n}\n\nexport const TimeTableHeader = ({\n    selectedDate,\n    loading,\n    tableContainerRef,\n    totalRecords,\n    onPreviousDayClick,\n    onNextDayClick,\n    onRefresh,\n    onCalendarDateSelect,\n    ...otherProps\n}: TimeTableHeaderProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const scrollToTop = () => {\n        if (tableContainerRef.current) {\n            tableContainerRef.current.scrollTop = 0;\n        }\n    };\n\n    const handleRefresh = () => {\n        if (!onRefresh) return;\n        scrollToTop();\n        onRefresh();\n    };\n\n    const handleRightArrowClick = (date: string) => {\n        scrollToTop();\n        onNextDayClick(date);\n    };\n\n    const handleLeftArrowClick = (date: string) => {\n        scrollToTop();\n        onPreviousDayClick(date);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRecordsSection = () => {\n        if (totalRecords === undefined) return <></>;\n        return (\n            <NavigationHeaderSubtitleWrapper>\n                <StyledResultText\n                    data-testid=\"timetable-records-results\"\n                    weight={\"semibold\"}\n                >\n                    {totalRecords} results found\n                </StyledResultText>\n                {onRefresh && (\n                    <StyledRefreshButton\n                        data-testid=\"timetable-records-refresh-btn\"\n                        aria-label=\"Refresh timetable records\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        disabled={loading}\n                        onClick={handleRefresh}\n                        $loading={loading}\n                        icon={<RefreshIcon />}\n                    />\n                )}\n            </NavigationHeaderSubtitleWrapper>\n        );\n    };\n\n    return (\n        <NavigationHeaderWrapper>\n            <StyledDateNavigator\n                selectedDate={selectedDate}\n                loading={loading}\n                {...otherProps}\n                onRightArrowClick={handleRightArrowClick}\n                onLeftArrowClick={handleLeftArrowClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            {renderRecordsSection()}\n        </NavigationHeaderWrapper>\n    );\n};\n"],"names":["_a","selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect","otherProps","__rest","scrollToTop","current","scrollTop","handleRefresh","_jsxs","NavigationHeaderWrapper","children","_jsx","StyledDateNavigator","Object","assign","onRightArrowClick","date","onLeftArrowClick","undefined","NavigationHeaderSubtitleWrapper","StyledResultText","weight","StyledRefreshButton","styleType","sizeType","disabled","onClick","$loading","icon","RefreshIcon"],"mappings":"wLA0BgCA,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAA,OAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA0Cf,OACIQ,OAACC,EAAAA,wBAAuB,CAAAC,SAAA,CACpBC,EAAAA,IAACC,sBAAmBC,OAAAC,OAAA,CAChBpB,aAAcA,EACdC,QAASA,GACLO,EAAU,CACda,kBA7CmBC,IAC3BZ,IACAL,EAAeiB,EAAK,EA4CZC,iBAzCkBD,IAC1BZ,IACAN,EAAmBkB,EAAK,EAwChBf,qBAAsBA,UAjCTiB,IAAjBrB,EAAmCc,EAAAA,mBAEnCH,EAAAA,KAACW,EAAAA,gCAA+B,CAAAT,SAAA,CAC5BF,EAAAA,KAACY,EAAAA,iBAAgB,CAAA,cACD,4BACZC,OAAQ,qBAEPxB,EAAY,oBAEhBG,GACGW,MAACW,EAAAA,oBAAmB,CAAA,cACJ,gCAA+B,aAChC,4BACXC,UAAU,QACVC,SAAS,QACTC,SAAU9B,EACV+B,QAASnB,EAAaoB,SACZhC,EACViC,KAAMjB,EAAAA,IAACkB,EAAAA,YAAW,WAkBR"}
+{"version":3,"file":"timetable-header.js","sources":["../../../../src/timetable/timetable-header/timetable-header.tsx"],"sourcesContent":["import { RefreshIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { RefObject } from \"react\";\n\nimport { Button } from \"../../button\";\nimport { DateNavigator } from \"../../date-navigator\";\nimport { Typography } from \"../../typography\";\nimport * as styles from \"./timetable-header.styles\";\n\ninterface TimeTableHeaderProps {\n    selectedDate: string;\n    loading: boolean;\n    tableContainerRef: RefObject<HTMLDivElement>;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    totalRecords?: number | undefined;\n    showDateAsShortForm?: boolean | undefined;\n    showCurrentDateAsToday?: boolean | undefined;\n    onPreviousDayClick: (currentDate: string) => void | undefined;\n    onNextDayClick: (currentDate: string) => void | undefined;\n    onRefresh?: (() => void) | undefined;\n    onCalendarDateSelect?: ((currentDate: string) => void) | undefined;\n}\n\nexport const TimeTableHeader = ({\n    selectedDate,\n    loading,\n    tableContainerRef,\n    totalRecords,\n    onPreviousDayClick,\n    onNextDayClick,\n    onRefresh,\n    onCalendarDateSelect,\n    ...otherProps\n}: TimeTableHeaderProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const scrollToTop = () => {\n        if (tableContainerRef.current) {\n            tableContainerRef.current.scrollTop = 0;\n        }\n    };\n\n    const handleRefresh = () => {\n        if (!onRefresh) return;\n        scrollToTop();\n        onRefresh();\n    };\n\n    const handleRightArrowClick = (date: string) => {\n        scrollToTop();\n        onNextDayClick(date);\n    };\n\n    const handleLeftArrowClick = (date: string) => {\n        scrollToTop();\n        onPreviousDayClick(date);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRecordsSection = () => {\n        if (totalRecords === undefined) return <></>;\n        return (\n            <div className={styles.navigationHeaderSubtitleWrapper}>\n                <Typography.BodySM\n                    className={styles.resultText}\n                    data-testid=\"timetable-records-results\"\n                    weight={\"semibold\"}\n                >\n                    {totalRecords} result{totalRecords !== 1 ? \"s\" : \"\"} found\n                </Typography.BodySM>\n                {onRefresh && (\n                    <Button\n                        data-testid=\"timetable-records-refresh-btn\"\n                        aria-label=\"Refresh timetable records\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        disabled={loading}\n                        onClick={handleRefresh}\n                        className={clsx(\n                            styles.refreshButton,\n                            loading && styles.refreshButtonLoading\n                        )}\n                        icon={<RefreshIcon />}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <div className={styles.navigationHeaderWrapper}>\n            <DateNavigator\n                className={styles.dateNavigator}\n                selectedDate={selectedDate}\n                loading={loading}\n                {...otherProps}\n                onRightArrowClick={handleRightArrowClick}\n                onLeftArrowClick={handleLeftArrowClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            {renderRecordsSection()}\n        </div>\n    );\n};\n"],"names":["_a","selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect","otherProps","__rest","scrollToTop","current","scrollTop","handleRefresh","_jsxs","className","styles.navigationHeaderWrapper","_jsx","DateNavigator","styles.dateNavigator","onRightArrowClick","date","onLeftArrowClick","undefined","styles.navigationHeaderSubtitleWrapper","children","Typography","BodySM","styles.resultText","weight","Button","styleType","sizeType","disabled","onClick","clsx","styles.refreshButton","styles.refreshButtonLoading","icon","RefreshIcon"],"mappings":"6ZAwBgCA,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAA,OAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA8Cf,OACIQ,EAAAA,YAAKC,UAAWC,EAAAA,kCACZC,MAACC,EAAAA,6BACGH,UAAWI,EAAAA,cACXnB,aAAcA,EACdC,QAASA,GACLO,EAAU,CACdY,kBAlDmBC,IAC3BX,IACAL,EAAegB,EAAK,EAiDZC,iBA9CkBD,IAC1BX,IACAN,EAAmBiB,EAAK,EA6ChBd,qBAAsBA,UAtCTgB,IAAjBpB,EAAmCc,EAAAA,mBAEnCH,OAAA,MAAA,CAAKC,UAAWS,EAAAA,gCAAsCC,SAAA,CAClDX,EAAAA,KAACY,EAAAA,WAAWC,QACRZ,UAAWa,EAAAA,yBACC,4BACZC,OAAQ,qBAEP1B,EAAY,UAA0B,IAAjBA,EAAqB,IAAM,GAAE,YAEtDG,GACGW,EAAAA,IAACa,EAAAA,OAAM,CAAA,cACS,6CACD,4BACXC,UAAU,QACVC,SAAS,QACTC,SAAUhC,EACViC,QAASrB,EACTE,UAAWoB,EAAAA,QACPC,EAAAA,cACAnC,GAAWoC,EAAAA,sBAEfC,KAAMrB,EAAAA,IAACsB,EAAAA,YAAW,CAAA,UAmB5B"}

package/cjs/timetable/timetable-header/timetable-header.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./timetable-header.styles_11gl1h4.css");exports.dateNavigator="d13zs1sk",exports.navigationHeaderSubtitleWrapper="n1oy278s",exports.navigationHeaderWrapper="n17unxsd",exports.refreshButton="r1dkvl6z",exports.refreshButtonLoading="r1u01cjw",exports.resultText="r64l2hv";
+//# sourceMappingURL=timetable-header.styles.js.map

package/cjs/timetable/timetable-header/timetable-header.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timetable-header.styles.js","sources":["../../../../src/timetable/timetable-header/timetable-header.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../../theme\";\n\nexport const refreshButton = css`\n    color: ${Colour[\"icon\"]};\n\n    @keyframes timetable-refresh-icon-spin {\n        100% {\n            -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n        }\n    }\n`;\n\nexport const refreshButtonLoading = css`\n    svg {\n        animation: timetable-refresh-icon-spin 4s linear infinite;\n    }\n`;\n\nexport const navigationHeaderWrapper = css`\n    display: flex;\n    padding-bottom: ${Spacing[\"spacing-16\"]};\n    justify-content: space-between;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const navigationHeaderSubtitleWrapper = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const resultText = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const dateNavigator = css`\n    width: 400px;\n`;\n"],"names":[],"mappings":"8HAuC0B,mDAXkB,2CAPR,iCAjBV,wCAWO,8BAoBV"}

package/cjs/timetable/timetable-header/timetable-header.styles_11gl1h4.css

@@ -0,0 +1,6 @@
+.r1dkvl6z{color:var(--fds-colour-icon);}@-webkit-keyframes timetable-refresh-icon-spin-r1dkvl6z{100%{-webkit-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes timetable-refresh-icon-spin-r1dkvl6z{100%{-webkit-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+.r1u01cjw svg{-webkit-animation:timetable-refresh-icon-spin 4s linear infinite;animation:timetable-refresh-icon-spin 4s linear infinite;}
+.n17unxsd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-bottom:var(--fds-spacing-16);-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:var(--fds-spacing-8);}
+.n1oy278s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;gap:var(--fds-spacing-8);}
+.r64l2hv{color:var(--fds-colour-text-subtler);}
+.d13zs1sk{width:400px;}

package/cjs/timetable/timetable-row/row-bar.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../external/dayjs/dayjs.min.js"),r=require("react"),i=require("../../util/time-helper.js"),o=require("../const.js"),a=require("./row-bar.style.js"),m=require("./row-cell.js");exports.RowBar=({id:s,name:n,timetableMinTime:l,timetableMaxTime:u,rowMinTime:d,rowMaxTime:T,rowCells:H,rowBarColor:c,intervalWidth:f,containerRef:p,outOfRangeCellPopover:R})=>{const v=d?i.TimeHelper.roundToNearestInterval(d,o.ROW_INTERVAL):l,h=T?i.TimeHelper.roundToNearestInterval(T,o.ROW_INTERVAL,!0):u,I=r.useMemo((()=>{const e=[];v&&t.default(l,"HH:mm").isBefore(t.default(v,"HH:mm"))&&e.push({id:s,startTime:l,endTime:v,status:"blocked",customPopover:R});const r=[...H].sort(((e,r)=>{const i=t.default(e.startTime,"HH:mm"),o=t.default(r.startTime,"HH:mm");return i.isBefore(o)?-1:i.isAfter(o)?1:0}));let a;return r.forEach(((r,m)=>{var n;const{startTime:l,endTime:u}=r;let d=i.TimeHelper.roundToNearestInterval(l,o.ROW_INTERVAL);a&&t.default(d,"HH:mm").isBefore(t.default(a,"HH:mm"))&&(d=i.TimeHelper.roundToNearestInterval(l,o.ROW_INTERVAL,!0));const T=i.TimeHelper.roundToNearestInterval(u,o.ROW_INTERVAL,!0);e.push(Object.assign(Object.assign({},r),{roundedStartTime:d,roundedEndTime:T,isFocusable:!0}));const c=(null===(n=H[m+1])||void 0===n?void 0:n.startTime)||h,f=t.default(i.TimeHelper.roundToNearestInterval(c,o.ROW_INTERVAL),"HH:mm");let p=t.default(T,"HH:mm");for(;p.isBefore(f);)if(R=f,p.get("hour")!=R.get("hour")){const t=p.add(1,"hour").startOf("hour");e.push({id:s,startTime:p.format("HH:mm").toString(),endTime:t.format("HH:mm").toString(),status:"disabled"}),p=t}else e.push({id:s,startTime:p.format("HH:mm").toString(),endTime:f.format("HH:mm").toString(),status:"disabled"}),p=f;var R;a=p.format("HH:mm").toString()})),h&&t.default(u,"HH:mm").isAfter(t.default(h,"HH:mm"))&&e.push({id:s,startTime:h,endTime:u,status:"blocked",customPopover:R}),0!==r.length||d||T||e.push({id:s,startTime:l,endTime:u,status:"blocked",customPopover:R}),e}),[v,l,H,h,u,d,T,s,R]);return e.jsx(a.RowCellContainer,{"data-testid":"timetable-row",role:"presentation",children:I.map(((t,r)=>{return e.jsx(m.RowCell,Object.assign({},t,{ariaColIndex:(u=t.roundedStartTime||t.startTime,(i.TimeHelper.timeToMinutes(u)-i.TimeHelper.timeToMinutes(l))/o.ROW_INTERVAL+2),ariaColSpan:(a=t.roundedStartTime||t.startTime,s=t.roundedEndTime||t.endTime,(i.TimeHelper.timeToMinutes(s)-i.TimeHelper.timeToMinutes(a))/o.ROW_INTERVAL),rowName:n,intervalWidth:f,rowBarColor:c,containerRef:p}),`${r}-row-cell-key`);var a,s,u}))})};
+"use strict";var e=require("react/jsx-runtime"),t=require("../../external/dayjs/dayjs.min.js"),r=require("react"),i=require("../../util/time-helper.js"),o=require("../const.js"),a=require("./row-bar.styles.js"),m=require("./row-cell.js");exports.RowBar=({id:s,name:n,timetableMinTime:l,timetableMaxTime:d,rowMinTime:u,rowMaxTime:T,rowCells:H,rowBarColor:c,intervalWidth:f,containerRef:p,outOfRangeCellPopover:R})=>{const v=u?i.TimeHelper.roundToNearestInterval(u,o.ROW_INTERVAL):l,h=T?i.TimeHelper.roundToNearestInterval(T,o.ROW_INTERVAL,!0):d,N=r.useMemo((()=>{const e=[];v&&t.default(l,"HH:mm").isBefore(t.default(v,"HH:mm"))&&e.push({id:s,startTime:l,endTime:v,status:"blocked",customPopover:R});const r=[...H].sort(((e,r)=>{const i=t.default(e.startTime,"HH:mm"),o=t.default(r.startTime,"HH:mm");return i.isBefore(o)?-1:i.isAfter(o)?1:0}));let a;return r.forEach(((r,m)=>{var n;const{startTime:l,endTime:d}=r;let u=i.TimeHelper.roundToNearestInterval(l,o.ROW_INTERVAL);a&&t.default(u,"HH:mm").isBefore(t.default(a,"HH:mm"))&&(u=i.TimeHelper.roundToNearestInterval(l,o.ROW_INTERVAL,!0));const T=i.TimeHelper.roundToNearestInterval(d,o.ROW_INTERVAL,!0);e.push(Object.assign(Object.assign({},r),{roundedStartTime:u,roundedEndTime:T,isFocusable:!0}));const c=(null===(n=H[m+1])||void 0===n?void 0:n.startTime)||h,f=t.default(i.TimeHelper.roundToNearestInterval(c,o.ROW_INTERVAL),"HH:mm");let p=t.default(T,"HH:mm");for(;p.isBefore(f);)if(R=f,p.get("hour")!=R.get("hour")){const t=p.add(1,"hour").startOf("hour");e.push({id:s,startTime:p.format("HH:mm").toString(),endTime:t.format("HH:mm").toString(),status:"disabled"}),p=t}else e.push({id:s,startTime:p.format("HH:mm").toString(),endTime:f.format("HH:mm").toString(),status:"disabled"}),p=f;var R;a=p.format("HH:mm").toString()})),h&&t.default(d,"HH:mm").isAfter(t.default(h,"HH:mm"))&&e.push({id:s,startTime:h,endTime:d,status:"blocked",customPopover:R}),0!==r.length||u||T||e.push({id:s,startTime:l,endTime:d,status:"blocked",customPopover:R}),e}),[v,l,H,h,d,u,T,s,R]);return e.jsx("div",{className:a.rowCellContainer,"data-testid":"timetable-row",role:"presentation",children:N.map(((t,r)=>{return e.jsx(m.RowCell,Object.assign({},t,{ariaColIndex:(d=t.roundedStartTime||t.startTime,(i.TimeHelper.timeToMinutes(d)-i.TimeHelper.timeToMinutes(l))/o.ROW_INTERVAL+2),ariaColSpan:(a=t.roundedStartTime||t.startTime,s=t.roundedEndTime||t.endTime,(i.TimeHelper.timeToMinutes(s)-i.TimeHelper.timeToMinutes(a))/o.ROW_INTERVAL),rowName:n,intervalWidth:f,rowBarColor:c,containerRef:p}),`${r}-row-cell-key`);var a,s,d}))})};
 //# sourceMappingURL=row-bar.js.map

package/cjs/timetable/timetable-row/row-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"row-bar.js","sources":["../../../../src/timetable/timetable-row/row-bar.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_INTERVAL } from \"../const\";\nimport type {\n    InternalTimeTableRowCellData,\n    RowBarColors,\n} from \"../internal-types\";\nimport type { TimeTableRowData } from \"../types\";\nimport { RowCellContainer } from \"./row-bar.style\";\nimport { RowCell } from \"./row-cell\";\n\ninterface RowBarProps extends TimeTableRowData {\n    timetableMinTime: string;\n    timetableMaxTime: string;\n    intervalWidth: number;\n    containerRef: RefObject<HTMLDivElement>;\n    rowBarColor: RowBarColors;\n}\n\nexport const RowBar = ({\n    id,\n    name,\n    timetableMinTime,\n    timetableMaxTime,\n    rowMinTime,\n    rowMaxTime,\n    rowCells,\n    rowBarColor,\n    intervalWidth,\n    containerRef,\n    outOfRangeCellPopover,\n}: RowBarProps) => {\n    const roundedMinTime = rowMinTime\n        ? TimeHelper.roundToNearestInterval(rowMinTime, ROW_INTERVAL)\n        : timetableMinTime;\n    const roundedMaxTime = rowMaxTime\n        ? TimeHelper.roundToNearestInterval(rowMaxTime, ROW_INTERVAL, true)\n        : timetableMaxTime;\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isOnTheSameHour = (\n        time1: dayjs.Dayjs,\n        time2: dayjs.Dayjs\n    ): boolean => {\n        return time1.get(\"hour\") == time2.get(\"hour\");\n    };\n\n    const getAriaColIndex = (time: string) => {\n        return (\n            (TimeHelper.timeToMinutes(time) -\n                TimeHelper.timeToMinutes(timetableMinTime)) /\n                ROW_INTERVAL +\n            2\n        );\n    };\n\n    const getAriaColSpan = (startTime: string, endTime: string) => {\n        return (\n            (TimeHelper.timeToMinutes(endTime) -\n                TimeHelper.timeToMinutes(startTime)) /\n            ROW_INTERVAL\n        );\n    };\n\n    const rowCellArray = useMemo(() => {\n        const rowCellArray: InternalTimeTableRowCellData[] = [];\n\n        // Handle non-op before hours\n        if (\n            roundedMinTime &&\n            dayjs(timetableMinTime, \"HH:mm\").isBefore(\n                dayjs(roundedMinTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: roundedMinTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        const sortedRowCells = [...rowCells].sort((a, b) => {\n            const timeA = dayjs(a.startTime, \"HH:mm\");\n            const timeB = dayjs(b.startTime, \"HH:mm\");\n            if (timeA.isBefore(timeB)) return -1;\n            if (timeA.isAfter(timeB)) return 1;\n            return 0;\n        });\n        let lastRoundedEndTime: string | undefined;\n\n        sortedRowCells.forEach((cell, index) => {\n            const { startTime, endTime } = cell;\n            let roundedStartTime = TimeHelper.roundToNearestInterval(\n                startTime,\n                ROW_INTERVAL\n            );\n\n            // NOTE - Prevent overlapping rounded start time and end time cells\n            const isStartTimeBeforePreviousEndTime =\n                lastRoundedEndTime &&\n                dayjs(roundedStartTime, \"HH:mm\").isBefore(\n                    dayjs(lastRoundedEndTime, \"HH:mm\")\n                );\n            if (isStartTimeBeforePreviousEndTime) {\n                roundedStartTime = TimeHelper.roundToNearestInterval(\n                    startTime,\n                    ROW_INTERVAL,\n                    true\n                );\n            }\n\n            const roundedEndTime = TimeHelper.roundToNearestInterval(\n                endTime,\n                ROW_INTERVAL,\n                true\n            );\n            rowCellArray.push({\n                ...cell,\n                roundedStartTime,\n                roundedEndTime,\n                isFocusable: true,\n            });\n\n            const nextSlotStartTime =\n                rowCells[index + 1]?.startTime || roundedMaxTime; // Get next cell start time, if next cell don't exist, use current row max time\n            const roundedNextSlotStartTime = dayjs(\n                TimeHelper.roundToNearestInterval(\n                    nextSlotStartTime,\n                    ROW_INTERVAL\n                ),\n                \"HH:mm\"\n            );\n            const parsedEndTime = dayjs(roundedEndTime, \"HH:mm\");\n\n            let curr = parsedEndTime;\n\n            // Auto block slots between cell time gaps\n            while (curr.isBefore(roundedNextSlotStartTime)) {\n                if (!isOnTheSameHour(curr, roundedNextSlotStartTime)) {\n                    const nextHour = curr.add(1, \"hour\").startOf(\"hour\"); // Round to the next hour\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: nextHour.format(\"HH:mm\").toString(),\n                        status: \"disabled\",\n                    });\n                    curr = nextHour;\n                } else {\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: roundedNextSlotStartTime\n                            .format(\"HH:mm\")\n                            .toString(),\n                        status: \"disabled\",\n                    });\n                    curr = roundedNextSlotStartTime;\n                }\n            }\n            lastRoundedEndTime = curr.format(\"HH:mm\").toString();\n        });\n\n        // Handle non-op after hours\n        if (\n            roundedMaxTime &&\n            dayjs(timetableMaxTime, \"HH:mm\").isAfter(\n                dayjs(roundedMaxTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: roundedMaxTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        // Handle empty row cells and no min/max time to block from timetable min to max\n        if (sortedRowCells.length === 0 && !rowMinTime && !rowMaxTime) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n        return rowCellArray;\n    }, [\n        roundedMinTime,\n        timetableMinTime,\n        rowCells,\n        roundedMaxTime,\n        timetableMaxTime,\n        rowMinTime,\n        rowMaxTime,\n        id,\n        outOfRangeCellPopover,\n    ]);\n\n    return (\n        <RowCellContainer data-testid=\"timetable-row\" role=\"presentation\">\n            {rowCellArray.map((cell, index) => {\n                return (\n                    <RowCell\n                        key={`${index}-row-cell-key`}\n                        {...cell}\n                        ariaColIndex={getAriaColIndex(\n                            cell.roundedStartTime || cell.startTime\n                        )}\n                        ariaColSpan={getAriaColSpan(\n                            cell.roundedStartTime || cell.startTime,\n                            cell.roundedEndTime || cell.endTime\n                        )}\n                        rowName={name}\n                        intervalWidth={intervalWidth}\n                        rowBarColor={rowBarColor}\n                        containerRef={containerRef}\n                    />\n                );\n            })}\n        </RowCellContainer>\n    );\n};\n"],"names":["id","name","timetableMinTime","timetableMaxTime","rowMinTime","rowMaxTime","rowCells","rowBarColor","intervalWidth","containerRef","outOfRangeCellPopover","roundedMinTime","TimeHelper","roundToNearestInterval","ROW_INTERVAL","roundedMaxTime","rowCellArray","useMemo","dayjs","isBefore","push","startTime","endTime","status","customPopover","sortedRowCells","sort","a","b","timeA","timeB","isAfter","lastRoundedEndTime","forEach","cell","index","roundedStartTime","roundedEndTime","Object","assign","isFocusable","nextSlotStartTime","_a","roundedNextSlotStartTime","curr","time2","get","nextHour","add","startOf","format","toString","length","_jsx","RowCellContainer","role","map","RowCell","ariaColIndex","time","timeToMinutes","ariaColSpan","rowName"],"mappings":"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"}
+{"version":3,"file":"row-bar.js","sources":["../../../../src/timetable/timetable-row/row-bar.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_INTERVAL } from \"../const\";\nimport type {\n    InternalTimeTableRowCellData,\n    RowBarColors,\n} from \"../internal-types\";\nimport type { TimeTableRowData } from \"../types\";\nimport * as styles from \"./row-bar.styles\";\nimport { RowCell } from \"./row-cell\";\n\ninterface RowBarProps extends TimeTableRowData {\n    timetableMinTime: string;\n    timetableMaxTime: string;\n    intervalWidth: number;\n    containerRef: RefObject<HTMLDivElement>;\n    rowBarColor: RowBarColors;\n}\n\nexport const RowBar = ({\n    id,\n    name,\n    timetableMinTime,\n    timetableMaxTime,\n    rowMinTime,\n    rowMaxTime,\n    rowCells,\n    rowBarColor,\n    intervalWidth,\n    containerRef,\n    outOfRangeCellPopover,\n}: RowBarProps) => {\n    const roundedMinTime = rowMinTime\n        ? TimeHelper.roundToNearestInterval(rowMinTime, ROW_INTERVAL)\n        : timetableMinTime;\n    const roundedMaxTime = rowMaxTime\n        ? TimeHelper.roundToNearestInterval(rowMaxTime, ROW_INTERVAL, true)\n        : timetableMaxTime;\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isOnTheSameHour = (\n        time1: dayjs.Dayjs,\n        time2: dayjs.Dayjs\n    ): boolean => {\n        return time1.get(\"hour\") == time2.get(\"hour\");\n    };\n\n    const getAriaColIndex = (time: string) => {\n        return (\n            (TimeHelper.timeToMinutes(time) -\n                TimeHelper.timeToMinutes(timetableMinTime)) /\n                ROW_INTERVAL +\n            2\n        );\n    };\n\n    const getAriaColSpan = (startTime: string, endTime: string) => {\n        return (\n            (TimeHelper.timeToMinutes(endTime) -\n                TimeHelper.timeToMinutes(startTime)) /\n            ROW_INTERVAL\n        );\n    };\n\n    const rowCellArray = useMemo(() => {\n        const rowCellArray: InternalTimeTableRowCellData[] = [];\n\n        // Handle non-op before hours\n        if (\n            roundedMinTime &&\n            dayjs(timetableMinTime, \"HH:mm\").isBefore(\n                dayjs(roundedMinTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: roundedMinTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        const sortedRowCells = [...rowCells].sort((a, b) => {\n            const timeA = dayjs(a.startTime, \"HH:mm\");\n            const timeB = dayjs(b.startTime, \"HH:mm\");\n            if (timeA.isBefore(timeB)) return -1;\n            if (timeA.isAfter(timeB)) return 1;\n            return 0;\n        });\n        let lastRoundedEndTime: string | undefined;\n\n        sortedRowCells.forEach((cell, index) => {\n            const { startTime, endTime } = cell;\n            let roundedStartTime = TimeHelper.roundToNearestInterval(\n                startTime,\n                ROW_INTERVAL\n            );\n\n            // NOTE - Prevent overlapping rounded start time and end time cells\n            const isStartTimeBeforePreviousEndTime =\n                lastRoundedEndTime &&\n                dayjs(roundedStartTime, \"HH:mm\").isBefore(\n                    dayjs(lastRoundedEndTime, \"HH:mm\")\n                );\n            if (isStartTimeBeforePreviousEndTime) {\n                roundedStartTime = TimeHelper.roundToNearestInterval(\n                    startTime,\n                    ROW_INTERVAL,\n                    true\n                );\n            }\n\n            const roundedEndTime = TimeHelper.roundToNearestInterval(\n                endTime,\n                ROW_INTERVAL,\n                true\n            );\n            rowCellArray.push({\n                ...cell,\n                roundedStartTime,\n                roundedEndTime,\n                isFocusable: true,\n            });\n\n            const nextSlotStartTime =\n                rowCells[index + 1]?.startTime || roundedMaxTime; // Get next cell start time, if next cell don't exist, use current row max time\n            const roundedNextSlotStartTime = dayjs(\n                TimeHelper.roundToNearestInterval(\n                    nextSlotStartTime,\n                    ROW_INTERVAL\n                ),\n                \"HH:mm\"\n            );\n            const parsedEndTime = dayjs(roundedEndTime, \"HH:mm\");\n\n            let curr = parsedEndTime;\n\n            // Auto block slots between cell time gaps\n            while (curr.isBefore(roundedNextSlotStartTime)) {\n                if (!isOnTheSameHour(curr, roundedNextSlotStartTime)) {\n                    const nextHour = curr.add(1, \"hour\").startOf(\"hour\"); // Round to the next hour\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: nextHour.format(\"HH:mm\").toString(),\n                        status: \"disabled\",\n                    });\n                    curr = nextHour;\n                } else {\n                    rowCellArray.push({\n                        id,\n                        startTime: curr.format(\"HH:mm\").toString(),\n                        endTime: roundedNextSlotStartTime\n                            .format(\"HH:mm\")\n                            .toString(),\n                        status: \"disabled\",\n                    });\n                    curr = roundedNextSlotStartTime;\n                }\n            }\n            lastRoundedEndTime = curr.format(\"HH:mm\").toString();\n        });\n\n        // Handle non-op after hours\n        if (\n            roundedMaxTime &&\n            dayjs(timetableMaxTime, \"HH:mm\").isAfter(\n                dayjs(roundedMaxTime, \"HH:mm\")\n            )\n        ) {\n            rowCellArray.push({\n                id,\n                startTime: roundedMaxTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n\n        // Handle empty row cells and no min/max time to block from timetable min to max\n        if (sortedRowCells.length === 0 && !rowMinTime && !rowMaxTime) {\n            rowCellArray.push({\n                id,\n                startTime: timetableMinTime,\n                endTime: timetableMaxTime,\n                status: \"blocked\",\n                customPopover: outOfRangeCellPopover,\n            });\n        }\n        return rowCellArray;\n    }, [\n        roundedMinTime,\n        timetableMinTime,\n        rowCells,\n        roundedMaxTime,\n        timetableMaxTime,\n        rowMinTime,\n        rowMaxTime,\n        id,\n        outOfRangeCellPopover,\n    ]);\n\n    return (\n        <div\n            className={styles.rowCellContainer}\n            data-testid=\"timetable-row\"\n            role=\"presentation\"\n        >\n            {rowCellArray.map((cell, index) => {\n                return (\n                    <RowCell\n                        key={`${index}-row-cell-key`}\n                        {...cell}\n                        ariaColIndex={getAriaColIndex(\n                            cell.roundedStartTime || cell.startTime\n                        )}\n                        ariaColSpan={getAriaColSpan(\n                            cell.roundedStartTime || cell.startTime,\n                            cell.roundedEndTime || cell.endTime\n                        )}\n                        rowName={name}\n                        intervalWidth={intervalWidth}\n                        rowBarColor={rowBarColor}\n                        containerRef={containerRef}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["id","name","timetableMinTime","timetableMaxTime","rowMinTime","rowMaxTime","rowCells","rowBarColor","intervalWidth","containerRef","outOfRangeCellPopover","roundedMinTime","TimeHelper","roundToNearestInterval","ROW_INTERVAL","roundedMaxTime","rowCellArray","useMemo","dayjs","isBefore","push","startTime","endTime","status","customPopover","sortedRowCells","sort","a","b","timeA","timeB","isAfter","lastRoundedEndTime","forEach","cell","index","roundedStartTime","roundedEndTime","Object","assign","isFocusable","nextSlotStartTime","_a","roundedNextSlotStartTime","curr","time2","get","nextHour","add","startOf","format","toString","length","_jsx","className","styles.rowCellContainer","role","children","map","RowCell","ariaColIndex","time","timeToMinutes","ariaColSpan","rowName"],"mappings":"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"}

package/cjs/timetable/timetable-row/row-bar.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./row-bar.styles_1x0vrsz.css");exports.rowCellContainer="r1vzjzkv";
+//# sourceMappingURL=row-bar.styles.js.map

package/cjs/timetable/timetable-row/row-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-bar.styles.js","sources":["../../../../src/timetable/timetable-row/row-bar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const rowCellContainer = css`\n    display: flex;\n    width: 100%;\n`;\n"],"names":[],"mappings":"qHAE6B"}

package/cjs/timetable/timetable-row/row-bar.styles_1x0vrsz.css

@@ -0,0 +1 @@
+.r1vzjzkv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}

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

@@ -1,2 +1,2 @@
-"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;
+"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),o=require("../../external/dayjs/dayjs.min.js"),l=require("react"),t=require("../../shared/accessibility/index.js"),i=require("../../shared/time-slot/time-slot.js");require("../../theme/theme-provider/index.js");var s=require("../../theme/utils/css-variable.js");require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var a=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var n=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js");var u=require("../../typography/index.js");require("../../util/calendar-helper.js");var d=require("../../util/date-helper.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("../../util/time-helper.js"),m=require("../const.js"),b=require("./row-cell.styles.js"),p=require("./with-optional-popover.js");function C(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=C(r),g=C(l);const v={stripes:"stripes",solid:"default"},k={blocked:{styleType:"stripes",bgColor:a.Colour["bg-stronger"],bgColor2:a.Colour["bg-strongest"],nonClickableCursor:"not-allowed"},filled:{styleType:"default",bgColor:`var(${b.tokens.block.mainColor})`},disabled:{styleType:"default",bgColor:a.Colour["bg-disabled"],nonClickableCursor:"not-allowed"},pending:{styleType:"stripes",bgColor:`var(${b.tokens.block.mainColor})`,bgColor2:`var(${b.tokens.block.altColor})`,nonClickableCursor:"not-allowed"},default:{styleType:"default",bgColor:"transparent",hoverBgColor:a.Colour["bg-hover-subtle"]}},y=g.default.memo((({id:r,startTime:a,endTime:C,title:g,subtitle:y,status:j,intervalWidth:q,rowBarColor:T,customPopover:f,cellStyleAttributes:x,isFocusable:w,roundedStartTime:B=a,roundedEndTime:N=C,ariaColIndex:H,ariaColSpan:S,rowName:R,onClick:I})=>{const P=0===o.default(N,"HH:mm").get("minutes"),$=d.DateHelper.getTimeDiffInMinutes(B,N)/m.ROW_INTERVAL*q-m.ROW_CELL_GAP,A=!!I||f&&"click"===f.trigger,O=t.concatIds(`${c.TimeHelper.formatTimeRange(a,C)}`,R,g,y,`${j}`),W=l.useRef(null);n.useApplyStyle(W,{[b.tokens.block.width]:s.formatUnitValue($,"px"),[b.tokens.block.mainColor]:T.mainColor,[b.tokens.block.altColor]:T.alternateColor});const D=e=>{I&&I({id:r,startTime:a,endTime:C,status:j,title:g,subtitle:y,customPopover:f},e)};return e.jsx("div",{"data-testid":"block-container",className:h.default(b.blockContainer,P&&b.blockContainerOnTheHour),role:"gridcell","aria-colindex":H,"aria-colspan":S,children:(()=>{var r;const{styleType:o,bgColor:l,bgColor2:s,hoverBgColor:a,hoverBgColor2:n,nonClickableCursor:d}=k[j],c=null!==(r=null==x?void 0:x.styleType)&&void 0!==r?r:"default",m="default"===c?o:v[c],C=(null==x?void 0:x.backgroundColor)||l,h=(null==x?void 0:x.altBackgroundColor)||s,q=(null==x?void 0:x.hoverBackgroundColor)||a,T=(null==x?void 0:x.altHoverBackgroundColor)||n;return e.jsx(p.WithOptionalPopover,{customPopover:f,children:e.jsxs("div",{className:b.wrapper,children:[e.jsxs(i.TimeSlot,{className:b.block,ref:W,clickable:A,bgColor:C,bgColor2:h,hoverBgColor:q,hoverBgColor2:T,nonClickableCursor:d,onClick:D,styleType:m,tabIndex:w?0:void 0,children:[e.jsx(t.VisuallyHidden,{children:O}),g&&e.jsx(u.Typography.BodySM,{className:b.blockTitle,weight:"semibold","aria-hidden":!0,children:g}),y&&e.jsx(u.Typography.BodyXS,{className:b.blockDescription,weight:"bold","aria-hidden":!0,children:y})]}),e.jsx("div",{className:b.gap})]})})})()},"block-container-key")}));exports.RowCell=y;
 //# sourceMappingURL=row-cell.js.map

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

@@ -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 { 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"}
+{"version":3,"file":"row-cell.js","sources":["../../../../src/timetable/timetable-row/row-cell.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport React, { useRef } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../../shared/accessibility\";\nimport type { SlotStyle, TimeSlotProps } from \"../../shared/time-slot\";\nimport { TimeSlot } from \"../../shared/time-slot\";\nimport { Colour, formatUnitValue, useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\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 type { TimeTableCellType } from \"../types\";\nimport * as styles from \"./row-cell.styles\";\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 styleTypeToSlotType: Record<\"solid\" | \"stripes\", SlotStyle> = {\n    stripes: \"stripes\",\n    solid: \"default\",\n};\n\nconst statusToTimeSlotPropsMap: Record<\n    TimeTableCellType,\n    Pick<\n        TimeSlotProps,\n        | \"bgColor\"\n        | \"bgColor2\"\n        | \"hoverBgColor\"\n        | \"hoverBgColor2\"\n        | \"styleType\"\n        | \"nonClickableCursor\"\n    >\n> = {\n    blocked: {\n        styleType: \"stripes\",\n        bgColor: Colour[\"bg-stronger\"],\n        bgColor2: Colour[\"bg-strongest\"],\n        nonClickableCursor: \"not-allowed\",\n    },\n    filled: {\n        styleType: \"default\",\n        bgColor: `var(${styles.tokens.block.mainColor})`,\n    },\n    disabled: {\n        styleType: \"default\",\n        bgColor: Colour[\"bg-disabled\"],\n        nonClickableCursor: \"not-allowed\",\n    },\n    pending: {\n        styleType: \"stripes\",\n        bgColor: `var(${styles.tokens.block.mainColor})`,\n        bgColor2: `var(${styles.tokens.block.altColor})`,\n        nonClickableCursor: \"not-allowed\",\n    },\n    default: {\n        styleType: \"default\",\n        bgColor: \"transparent\",\n        hoverBgColor: Colour[\"bg-hover-subtle\"],\n    },\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    const blockRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(blockRef, {\n        [styles.tokens.block.width]: formatUnitValue(adjustedCellWidth, \"px\"),\n        [styles.tokens.block.mainColor]: rowBarColor.mainColor,\n        [styles.tokens.block.altColor]: rowBarColor.alternateColor,\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        const {\n            styleType,\n            bgColor,\n            bgColor2,\n            hoverBgColor,\n            hoverBgColor2,\n            nonClickableCursor,\n        } = statusToTimeSlotPropsMap[status];\n\n        const timetableStyleType = cellStyleAttributes?.styleType ?? \"default\";\n        const timeslotStyleType =\n            timetableStyleType === \"default\"\n                ? styleType\n                : styleTypeToSlotType[timetableStyleType];\n        const customBgColor = cellStyleAttributes?.backgroundColor || bgColor;\n        const customBg2Color =\n            cellStyleAttributes?.altBackgroundColor || bgColor2;\n        const customHoverBgColor =\n            cellStyleAttributes?.hoverBackgroundColor || hoverBgColor;\n        const customHoverBg2Color =\n            cellStyleAttributes?.altHoverBackgroundColor || hoverBgColor2;\n\n        return (\n            <WithOptionalPopover customPopover={customPopover}>\n                <div className={styles.wrapper}>\n                    <TimeSlot\n                        className={styles.block}\n                        ref={blockRef}\n                        clickable={isClickable}\n                        bgColor={customBgColor}\n                        bgColor2={customBg2Color}\n                        hoverBgColor={customHoverBgColor}\n                        hoverBgColor2={customHoverBg2Color}\n                        nonClickableCursor={nonClickableCursor}\n                        onClick={handleCellClick}\n                        styleType={timeslotStyleType}\n                        tabIndex={isFocusable ? 0 : undefined}\n                    >\n                        <VisuallyHidden>{rowAriaLabel}</VisuallyHidden>\n                        {title && (\n                            <Typography.BodySM\n                                className={styles.blockTitle}\n                                weight=\"semibold\"\n                                aria-hidden\n                            >\n                                {title}\n                            </Typography.BodySM>\n                        )}\n                        {subtitle && (\n                            <Typography.BodyXS\n                                className={styles.blockDescription}\n                                weight=\"bold\"\n                                aria-hidden\n                            >\n                                {subtitle}\n                            </Typography.BodyXS>\n                        )}\n                    </TimeSlot>\n                    <div className={styles.gap} />\n                </div>\n            </WithOptionalPopover>\n        );\n    };\n\n    return (\n        <div\n            key={`block-container-key`}\n            data-testid={`block-container`}\n            className={clsx(\n                styles.blockContainer,\n                isOnTheHour && styles.blockContainerOnTheHour\n            )}\n            role=\"gridcell\"\n            aria-colindex={ariaColIndex}\n            aria-colspan={ariaColSpan}\n        >\n            {renderCellContent()}\n        </div>\n    );\n};\n\nexport const RowCell = React.memo(Component);\n"],"names":["styleTypeToSlotType","stripes","solid","statusToTimeSlotPropsMap","blocked","styleType","bgColor","Colour","bgColor2","nonClickableCursor","filled","styles.tokens","block","mainColor","disabled","pending","altColor","default","hoverBgColor","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","blockRef","useRef","useApplyStyle","width","formatUnitValue","alternateColor","handleCellClick","event","_jsx","className","clsx","styles.blockContainer","styles.blockContainerOnTheHour","role","children","hoverBgColor2","timetableStyleType","_a","timeslotStyleType","customBgColor","backgroundColor","customBg2Color","altBackgroundColor","customHoverBgColor","hoverBackgroundColor","customHoverBg2Color","altHoverBackgroundColor","WithOptionalPopover","_jsxs","styles.wrapper","TimeSlot","styles.block","ref","clickable","tabIndex","undefined","VisuallyHidden","Typography","BodySM","styles.blockTitle","weight","BodyXS","styles.blockDescription","styles.gap","renderCellContent"],"mappings":"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"}

package/cjs/timetable/timetable-row/row-cell.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./row-cell.styles_y1dl5j.css");exports.block="byp749t",exports.blockContainer="brs2fuo",exports.blockContainerOnTheHour="b1tkj60f",exports.blockDescription="bbb5nib",exports.blockTitle="bhkclis",exports.gap="g1ly7zml",exports.tokens={block:{mainColor:"--fds-internal-timetable-rowCellBlock-mainColor",altColor:"--fds-internal-timetable-rowCellBlock-altColor",width:"--fds-internal-timetable-rowCellBlock-width"}},exports.wrapper="w3l6hrm";
+//# sourceMappingURL=row-cell.styles.js.map

package/cjs/timetable/timetable-row/row-cell.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-cell.styles.js","sources":["../../../../src/timetable/timetable-row/row-cell.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Spacing } from \"../../theme\";\n\nexport const tokens = {\n    block: {\n        mainColor: \"--fds-internal-timetable-rowCellBlock-mainColor\",\n        altColor: \"--fds-internal-timetable-rowCellBlock-altColor\",\n        width: \"--fds-internal-timetable-rowCellBlock-width\",\n    },\n};\n\nexport const blockContainer = css`\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const blockContainerOnTheHour = css`\n    box-shadow: inset -0.5px 0px ${Colour[\"border-primary\"]};\n`;\n\nexport const wrapper = css`\n    display: flex;\n    margin-bottom: 2px;\n    height: 65px;\n`;\n\nexport const gap = css`\n    width: 2px;\n    height: 100%;\n`;\n\nexport const block = css`\n    /* reset variables to prevent leaking to child components */\n    ${tokens.block.width}: initial;\n    ${tokens.block.mainColor}: initial;\n    ${tokens.block.altColor}: initial;\n\n    height: 100%;\n    width: var(${tokens.block.width});\n    border-radius: ${Radius[\"sm\"]};\n    box-sizing: border-box;\n    padding: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const blockTitle = css`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n`;\n\nexport const blockDescription = css`\n    color: ${Colour[\"text-subtler\"]};\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n`;\n"],"names":["block","mainColor","altColor","width"],"mappings":"0GA+BkB,iCAnBS,0CAIS,oCAkCP,6BANN,sBAlBP,0BAtBM,CAClBA,MAAO,CACHC,UAAW,kDACXC,SAAU,iDACVC,MAAO,gEAYK"}

package/cjs/timetable/timetable-row/row-cell.styles_y1dl5j.css

@@ -0,0 +1,7 @@
+.brs2fuo{border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.b1tkj60f{box-shadow:inset -0.5px 0px var(--fds-colour-border-primary);}
+.w3l6hrm{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:2px;height:65px;}
+.g1ly7zml{width:2px;height:100%;}
+.byp749t{--fds-internal-timetable-rowCellBlock-width:initial;--fds-internal-timetable-rowCellBlock-mainColor:initial;--fds-internal-timetable-rowCellBlock-altColor:initial;height:100%;width:var(--fds-internal-timetable-rowCellBlock-width);border-radius:var(--fds-radius-sm);box-sizing:border-box;padding:var(--fds-spacing-4);}
+.bhkclis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
+.bbb5nib{color:var(--fds-colour-text-subtler);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}

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

@@ -1,2 +1,2 @@
-"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))};
+"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("../../theme/utils/use-media-query.js"),require("../../popover/popover.styles_ujnf0h.css");var r=require("../../popover/popover-trigger.js");require("../../popover/popover-inline/popover-inline.styles_bkopnt.css");exports.WithOptionalPopover=({children:t,customPopover:i})=>{if(!i)return t;const s={position:"bottom-start",customOffset:i.offset,children:t,trigger:i.trigger,delay:i.delay,popoverContent:i.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

@@ -1 +1 @@
-{"version":3,"file":"with-optional-popover.js","sources":["../../../../src/timetable/timetable-row/with-optional-popover.tsx"],"sourcesContent":["import type { PopoverV2TriggerProps } from \"../../popover-v2\";\nimport { PopoverTrigger } from \"../../popover-v2\";\nimport type { TimeTablePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    children: JSX.Element;\n    customPopover?: TimeTablePopoverProps | undefined;\n}\n\nexport const WithOptionalPopover = ({\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverV2TriggerProps = {\n        position: \"bottom-start\",\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <PopoverTrigger {...popoverTriggerProps} />;\n};\n"],"names":["children","customPopover","popoverTriggerProps","position","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"y9BASmC,EAC/BA,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA6C,CAC/CC,SAAU,eACVC,aAAcH,EAAcI,OAC5BL,SAAUA,EACVM,QAASL,EAAcK,QACvBC,MAAON,EAAcM,MACrBC,eAAgBP,EAAcQ,SAGlC,OAAOC,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKX,GAAuB"}
+{"version":3,"file":"with-optional-popover.js","sources":["../../../../src/timetable/timetable-row/with-optional-popover.tsx"],"sourcesContent":["import type { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\nimport type { TimeTablePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    children: JSX.Element;\n    customPopover?: TimeTablePopoverProps | undefined;\n}\n\nexport const WithOptionalPopover = ({\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverTriggerProps = {\n        position: \"bottom-start\",\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <PopoverTrigger {...popoverTriggerProps} />;\n};\n"],"names":["children","customPopover","popoverTriggerProps","position","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"ggCASmC,EAC/BA,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,SAAU,eACVC,aAAcH,EAAcI,OAC5BL,SAAUA,EACVM,QAASL,EAAcK,QACvBC,MAAON,EAAcM,MACrBC,eAAgBP,EAAcQ,SAGlC,OAAOC,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKX,GAAuB"}

package/cjs/timetable/timetable.js

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