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

package/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":["Timeline","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","TimelineItem","TimelineIndicators","CircleIndicator","$variant","VisuallyHidden","LineIndicator","TimelineItemContent","TimelinePills"],"mappings":"0hBAmBO,MAAMA,EAAW,EACpBC,QACAC,YACAC,KACAC,QACAC,WACAC,UACA,6BAA8BC,EAC9B,cAAeC,EAAS,WACxBC,eAAe,EACfC,gBAAgB,MAKhB,MAAMC,EAAiBC,GACI,iBAAZA,EAEHC,EAACC,EAAWC,OAAM,CAACb,UAAU,6BAA4Bc,SACpDJ,IAKNC,EAAAI,EAAA,CAAAD,SAAGJ,IAGRM,EAAc,CAChBd,EACAe,IAEqB,iBAAVf,EAEHS,EAACO,EAAiB,CACdC,YAAY,kBACAF,EACZG,OAAO,WACPpB,UAAU,sBAAqBc,SAE9BZ,IAKNS,EAAAI,EAAA,CAAAD,SAAGZ,IAGRmB,EAAqBC,GAEIA,EAASC,MAAM,EAAG,GACnBC,KAAI,CAACC,EAAmBC,IAE1CC,EAACC,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,EAACwB,EAAQ,CAAA,eAAA,IACpB,IAAK,QACD,OAAOxB,EAACyB,EAAyB,CAAA,eAAA,IACrC,IAAK,UACD,OAAOzB,oCAAmBe,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,EAACC,EAAe,CACZvC,UAAWA,EACXC,GAAIA,EAAE,cACOK,YACFH,EAAQqC,SACTpC,EAAOU,SAAA,CAEjBH,EAAC8B,EAAa,CACVtB,YAAY,KAAI,aACJZ,gBACA,iBACZa,OAAO,gBAENlB,IAELS,EAAA,MAAA,CAAK+B,KAAK,OAAM5B,SAnDpBf,EAAMyB,KAAI,CAACmB,EAAyBjB,KAChC,MAAMxB,MAAEA,EAAKQ,QAAEA,EAAOY,SAAEA,EAAUY,QAASU,GAAaD,EAIlDT,EACFU,IAAuB,IAAVlB,EAAc,UAAY,mBAE3C,OACIY,EAACO,GAA4CH,KAAK,WAAU5B,SAAA,CACxDwB,EAACQ,EAAkB,CAAAhC,SAAA,CACfwB,EAACS,EAAe,CAAA,cATE1C,EACxB,kBAAkBqB,EAAQ,SAASrB,IACnC,kBAQ4C2C,SACxBd,YAEVvB,EAACsC,EAAc,CAAAnC,SACVuB,EAAUH,EAASR,KAEvBO,EAAWC,EAASR,MAEzBf,EAACuC,YAAwBhB,OAE7BI,EAACa,EAAmB,CAACnD,UAAU,kCAC1BgB,EAAYd,EAAOK,EAAe,GAClCe,GACGX,EAACyC,EAAa,CAAAtC,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":["Timeline","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","styles.timelineItem","styles.timelineIndicators","styles.circleIndicator","VisuallyHidden","styles.lineIndicator","styles.timelineItemContent","styles.timelinePills"],"mappings":"w6BAYO,MAAMA,EAAW,EACpBC,QACAC,YACAC,KACAC,QACAC,WACAC,UACA,6BAA8BC,EAC9B,cAAeC,EAAS,WACxBC,eAAe,EACfC,gBAAgB,MAEhB,MAAMC,EAAaC,EAAuB,MAE1CC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQV,UAAWA,EAClC,CAACS,EAAcC,QAAQT,SAAUA,IAMrC,MAAMU,EAAiBC,GACI,iBAAZA,EAEHC,EAACC,EAAWC,OAAM,CAAClB,UAAU,6BAA4BmB,SACpDJ,IAKNC,EAAAI,EAAA,CAAAD,SAAGJ,IAGRM,EAAc,CAChBnB,EACAoB,IAEqB,iBAAVpB,EAEHc,EAACC,EAAWM,UAAS,CACjBC,GAAG,KAAI,aACKF,EACZG,OAAO,WACPzB,UAAW0B,EACPC,EACA,uBACHR,SAEAjB,IAKNc,EAAAI,EAAA,CAAAD,SAAGjB,IAGR0B,EAAqBC,GAEIA,EAASC,MAAM,EAAG,GACnBC,KAAI,CAACC,EAAmBC,IAE1CC,EAACC,EAAIC,OAAAC,OAAA,GACGL,EAAM,CACVM,KAAMN,EAAOM,KACbC,IAAK,eAAeN,IAAO,cACf,cACZjC,UAAU,yBAETgC,EAAOb,YAMlBqB,EAAa,CAACC,EAAkBR,KAClC,OAAQQ,GACJ,IAAK,YACD,OAAOzB,EAAC0B,EAAQ,CAAA,eAAA,IACpB,IAAK,QACD,OAAO1B,EAAC2B,EAAyB,CAAA,eAAA,IACrC,IAAK,UACD,OAAO3B,oCAAmBiB,EAAQ,EAAIzB,IAC1C,QACI,OAAO,OAIboC,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,EAAIzB,IACtC,QACI,MAAO,KAqDnB,OACIqC,EAAA,MAAA,CACIC,IAAKrC,EACLT,UAAW0B,EAAKqB,EAAwB/C,GACxCC,GAAIA,EAAE,cACOK,EAAMa,SAAA,CAEnBH,EAACC,EAAW+B,UAAS,CACjBxB,GAAG,KAAI,aACKjB,EAAY,cACZ,iBACZkB,OAAO,OACPzB,UAAWiD,EAAoB9B,SAE9BjB,IAELc,EAAA,MAAA,CAAKkC,KAAK,OAAM/B,SAhEpBpB,EAAMgC,KAAI,CAACoB,EAAyBlB,KAChC,MAAM/B,MAAEA,EAAKa,QAAEA,EAAOc,SAAEA,EAAUY,QAASW,GAAaD,EAIlDV,EACFW,IAAuB,IAAVnB,EAAc,UAAY,mBAE3C,OACIY,EAAA,MAAA,CAEIK,KAAK,WACLlD,UAAWqD,EAAmBlC,SAAA,CAE9B0B,SAAK7C,UAAWsD,EAAyBnC,SAAA,CACrC0B,uBAbkBxC,EACxB,kBAAkB4B,EAAQ,SAAS5B,IACnC,kBAaUL,UAAWuD,EAAsB,eACnBd,EAAOtB,SAAA,CAErBH,EAACwC,EAAc,CAAArC,SACVyB,EAAUH,EAASR,KAEvBO,EAAWC,EAASR,MAEzBjB,EAAA,MAAA,CACIhB,UAAWyD,EAAoB,eACjBhB,OAGtBI,EAAA,MAAA,CACI7C,UAAW0B,EACPgC,EACA,yBACHvC,SAAA,CAEAE,EAAYnB,EAAOK,EAAe,GAClCsB,GACGb,EAAA,MAAA,CAAKhB,UAAW2D,EAAoBxC,SAC/BS,EAAkBC,KAG1Bf,EAAcC,QAhCd,iBAAiBkB,IAkCpB,QAqBR"}

package/timeline/timeline.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const tokens: {
+    readonly wrapper: {
+        readonly startCol: "--fds-internal-timeline-wrapper-startCol";
+        readonly colSpan: "--fds-internal-timeline-wrapper-colSpan";
+    };
+};
+export declare const circleIndicator: import("@linaria/core").LinariaClassName;
+export declare const lineIndicator: import("@linaria/core").LinariaClassName;
+export declare const timelineIndicators: import("@linaria/core").LinariaClassName;
+export declare const timelineWrapper: import("@linaria/core").LinariaClassName;
+export declare const timelineTitle: import("@linaria/core").LinariaClassName;
+export declare const timelineItemTitle: import("@linaria/core").LinariaClassName;
+export declare const timelineItem: import("@linaria/core").LinariaClassName;
+export declare const timelineItemContent: import("@linaria/core").LinariaClassName;
+export declare const timelinePills: import("@linaria/core").LinariaClassName;

package/timeline/timeline.styles.js

@@ -0,0 +1,2 @@
+import"./timeline.styles_1wcnzot.css";const t={wrapper:{startCol:"--fds-internal-timeline-wrapper-startCol",colSpan:"--fds-internal-timeline-wrapper-colSpan"}},e="c1epf9wu",p="l1ff2pyq",l="t1qzwom7",a="tuaspcp",n="tfsmff8",r="t1qpo82v",i="t1d2q33u",s="tvlbvjk",o="t1afag3x";export{e as circleIndicator,p as lineIndicator,l as timelineIndicators,i as timelineItem,s as timelineItemContent,r as timelineItemTitle,o as timelinePills,n as timelineTitle,a as timelineWrapper,t as tokens};
+//# sourceMappingURL=timeline.styles.js.map

package/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":["tokens","wrapper","startCol","colSpan","circleIndicator","lineIndicator","timelineIndicators","timelineWrapper","timelineTitle","timelineItemTitle","timelineItem","timelineItemContent","timelinePills"],"mappings":"8DAOO,MAAMA,EAAS,CAClBC,QAAS,CACLC,SAAU,2CACVC,QAAS,4CAIJC,EAAe,WAmDfC,EAAa,WAkCbC,EAAkB,WAOlBC,EAAe,UAefC,EAAa,UAQbC,EAAiB,WAMjBC,EAAY,WAQZC,EAAmB,UAKnBC,EAAa"}

package/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/timepicker/timepicker.d.ts

@@ -1,2 +1,2 @@
 import type { TimepickerProps } from "./types";
-export declare const Timepicker: ({ id, disabled, readOnly, error, value, placeholder, format, onChange, onFocus, onBlur, alignment, dropdownZIndex, dropdownRootNode, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: TimepickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Timepicker: ({ id, disabled, readOnly, error, value, placeholder, format, onChange, onFocus, onBlur, alignment, dropdownZIndex, dropdownRootNode, className, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: TimepickerProps) => import("react/jsx-runtime").JSX.Element;

package/timepicker/timepicker.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useState as o,useRef as a,useCallback as n}from"react";import"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as l}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as d}from"../shared/input-wrapper/input-wrapper.js";import{TimepickerDropdown as i}from"../shared/timepicker-dropdown/timepicker-dropdown.js";import{TimeHelper as t}from"../util/time-helper.js";import{InputSelectorElement as s}from"./timepicker.styles.js";const p=p=>{var{id:m,disabled:c=!1,readOnly:u=!1,error:b,value:f,placeholder:w,format:y="24hr",onChange:v,onFocus:h,onBlur:g,alignment:j,dropdownZIndex:k,dropdownRootNode:O,"aria-labelledby":x,"aria-describedby":C}=p,D=e(p,["id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","aria-labelledby","aria-describedby"]);const[F,$]=o(!1),H=a(null),M=a(null),B=n((()=>"12hr"===y?"HH:MMam":"HH:MM"),[y]),I=()=>{var e;null===(e=M.current)||void 0===e||e.focus({preventScroll:!0})},N=()=>{c||u||$(!0)},R=()=>{$(!1),I()},Z=e=>{null==v||v(e),$(!1),I()},E=()=>{null==h||h()},T=e=>{var r;if(F)return;const o=e.relatedTarget;o&&(null===(r=H.current)||void 0===r?void 0:r.contains(o))||null==g||g()},_=e=>{c||u||"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),N())};return r(l,{enabled:!u&&!c,isOpen:F,renderElement:()=>r(d,Object.assign({ref:H,role:"group",$readOnly:u,$disabled:c,$focused:F,$error:b},D,{children:r(s,{ref:M,readOnly:!0,placeholder:w||B(),value:t.formatDisplayValue(f,y),role:"combobox","aria-invalid":b||void 0,"aria-disabled":c||void 0,"aria-readonly":u||void 0,"aria-labelledby":x,"aria-describedby":C,"aria-expanded":!c&&!u&&F,"data-testid":m?`${m}-timepicker-selector`:"timepicker-selector",onFocus:E,onClick:N,onKeyDown:_,onBlur:T})})),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:a})=>r("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"Time picker"},a(),{children:r(i,{id:m,show:F,value:f,format:y,onCancel:R,onChange:Z})})),onOpen:N,onClose:()=>{$(!1),null==g||g()},onDismiss:R,offset:8,alignment:j,customZIndex:k,rootNode:O})};export{p as Timepicker};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useState as o,useRef as a,useCallback as l}from"react";import{ElementWithDropdown as n}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as i,BasicInput as d}from"../shared/input-wrapper/input-wrapper.js";import{TimepickerDropdown as t}from"../shared/timepicker-dropdown/timepicker-dropdown.js";import{TimeHelper as s}from"../util/time-helper.js";import{inputSelectorElement as p}from"./timepicker.styles.js";const m=m=>{var{id:c,disabled:u=!1,readOnly:b=!1,error:f,value:y,placeholder:v,format:w="24hr",onChange:h,onFocus:g,onBlur:k,alignment:j,dropdownZIndex:O,dropdownRootNode:x,className:N,"aria-labelledby":C,"aria-describedby":D}=m,F=e(m,["id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","aria-labelledby","aria-describedby"]);const[H,M]=o(!1),B=a(null),I=a(null),R=l((()=>"12hr"===w?"HH:MMam":"HH:MM"),[w]),Z=()=>{var e;null===(e=I.current)||void 0===e||e.focus({preventScroll:!0})},E=()=>{u||b||M(!0)},T=()=>{M(!1),Z()},_=e=>{null==h||h(e),M(!1),Z()},A=()=>{null==g||g()},K=e=>{var r;if(H)return;const o=e.relatedTarget;o&&(null===(r=B.current)||void 0===r?void 0:r.contains(o))||null==k||k()},P=e=>{u||b||"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),E())};return r(n,{enabled:!b&&!u,isOpen:H,renderElement:()=>r(i,Object.assign({ref:B,role:"group",readOnly:b,disabled:u,focused:H,error:f,className:N},F,{children:r(d,{ref:I,readOnly:!0,placeholder:v||R(),value:s.formatDisplayValue(y,w),role:"combobox","aria-invalid":f||void 0,"aria-disabled":u||void 0,"aria-readonly":b||void 0,"aria-labelledby":C,"aria-describedby":D,"aria-expanded":!u&&!b&&H,"data-testid":c?`${c}-timepicker-selector`:"timepicker-selector",className:p,onFocus:A,onClick:E,onKeyDown:P,onBlur:K})})),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:a})=>r("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"Time picker"},a(),{children:r(t,{id:c,show:H,value:y,format:w,onCancel:T,onChange:_})})),onOpen:E,onClose:()=>{M(!1),null==k||k()},onDismiss:T,offset:8,alignment:j,customZIndex:O,rootNode:x})};export{m as Timepicker};
 //# sourceMappingURL=timepicker.js.map

package/timepicker/timepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { InputSelectorElement } from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\nexport const Timepicker = ({\n    id,\n    disabled = false,\n    readOnly = false,\n    error,\n    value,\n    placeholder,\n    format = \"24hr\",\n    onChange,\n    onFocus,\n    onBlur,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: TimepickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getPlaceholderValue = useCallback(() => {\n        switch (format) {\n            case \"12hr\":\n                return \"HH:MMam\";\n            case \"24hr\":\n            default:\n                return \"HH:MM\";\n        }\n    }, [format]);\n\n    const restoreFocusToSelector = () => {\n        selectorRef.current?.focus({ preventScroll: true });\n    };\n\n    // =============================================================================\n    // EVENT LISTENERS\n    // =============================================================================\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        onBlur?.();\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleChange = (v: string) => {\n        onChange?.(v);\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleFocus = () => {\n        onFocus?.();\n    };\n\n    const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n        if (isOpen) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (next && wrapperRef.current?.contains(next)) return;\n\n        onBlur?.();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n            e.preventDefault();\n            handleOpen();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderElement = () => (\n        <InputWrapper\n            ref={wrapperRef}\n            role=\"group\"\n            $readOnly={readOnly}\n            $disabled={disabled}\n            $focused={isOpen}\n            $error={error}\n            {...otherProps}\n        >\n            <InputSelectorElement\n                ref={selectorRef}\n                readOnly\n                placeholder={placeholder || getPlaceholderValue()}\n                value={TimeHelper.formatDisplayValue(value, format)}\n                role=\"combobox\"\n                aria-invalid={error || undefined}\n                aria-disabled={disabled || undefined}\n                aria-readonly={readOnly || undefined}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-expanded={!disabled && !readOnly ? isOpen : false}\n                data-testid={\n                    id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n                }\n                onFocus={handleFocus}\n                onClick={handleOpen}\n                onKeyDown={handleKeyDown}\n                onBlur={handleSelectorBlur}\n            />\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            ref={setFloatingRef}\n            style={styles}\n            role=\"dialog\"\n            aria-label=\"Time picker\"\n            {...getFloatingProps()}\n        >\n            <TimepickerDropdown\n                id={id}\n                show={isOpen}\n                value={value}\n                format={format}\n                onCancel={handleDismiss}\n                onChange={handleChange}\n            />\n        </div>\n    );\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={isOpen}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            offset={8}\n            alignment={alignment}\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","$readOnly","$disabled","$focused","$error","children","InputSelectorElement","TimeHelper","formatDisplayValue","undefined","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"ikBAUO,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EACA,kBAAmBC,EACnB,mBAAoBC,GAAef,EAChCgB,EAAUC,EAAAjB,EAhBU,wLAqBvB,MAAOkB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDlB,EAEO,UAGA,SAEhB,CAACA,IAEEmB,EAAyB,WACR,QAAnB1B,EAAAuB,EAAYI,eAAO,IAAA3B,GAAAA,EAAE4B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX5B,GAAYC,GAChBgB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClBzB,SAAAA,EAAWyB,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KAChBzB,SAAAA,GAAW,EAGT0B,EAAsBC,UACxB,GAAIlB,EAAQ,OAEZ,MAAMmB,EAAOD,EAAEE,cACXD,IAA0B,QAAlBrC,EAAAqB,EAAWM,eAAO,IAAA3B,OAAA,EAAAA,EAAEuC,SAASF,KAEzC3B,SAAAA,GAAU,EAGR8B,EAAiBJ,IACflC,GAAYC,GAIF,UAAViC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EA8DJ,OACIa,EAACC,EAAmB,CAChBC,SAAU1C,IAAaD,EACvBgB,OAAQA,EACR4B,cA5Dc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QAAOC,UACDjD,EAAQkD,UACRnD,EAAQoD,SACTpC,EAAMqC,OACRnD,GACJY,EAAU,CAAAwC,SAEdb,EAACc,EAAoB,CACjBP,IAAK3B,EACLpB,UAAQ,EACRG,YAAaA,GAAekB,IAC5BnB,MAAOqD,EAAWC,mBAAmBtD,EAAOE,GAC5C4C,KAAK,WAAU,eACD/C,QAASwD,EAAS,gBACjB1D,QAAY0D,EAAS,gBACrBzD,QAAYyD,EAAS,kBACnB9C,EAAc,mBACbC,EAAe,iBACjBb,IAAaC,GAAWe,EAAc,cAElDjB,EAAK,GAAGA,wBAA2B,sBAEvCQ,QAASyB,EACT2B,QAAS/B,EACTgC,UAAWtB,EACX9B,OAAQyB,OAiCZ4B,eA5Be,EACnBC,SACAC,iBACAC,sBAEAvB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKe,EACLE,MAAOH,EACPb,KAAK,SAAQ,aACF,eACPe,IAAkB,CAAAV,SAEtBb,EAACyB,EAAkB,CACfnE,GAAIA,EACJoE,KAAMnD,EACNb,MAAOA,EACPE,OAAQA,EACR+D,SAAUvC,EACVvB,SAAUwB,OAWduC,OAAQzC,EACR0C,QA1GY,KAChBrD,GAAU,GACVT,SAAAA,GAAU,EAyGN+D,UAAW1C,EACX2C,OAAQ,EACR/D,UAAWA,EACXgE,aAAc/D,EACdgE,SAAU/D,GACZ"}
+{"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../shared/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\nexport const Timepicker = ({\n    id,\n    disabled = false,\n    readOnly = false,\n    error,\n    value,\n    placeholder,\n    format = \"24hr\",\n    onChange,\n    onFocus,\n    onBlur,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: TimepickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getPlaceholderValue = useCallback(() => {\n        switch (format) {\n            case \"12hr\":\n                return \"HH:MMam\";\n            case \"24hr\":\n            default:\n                return \"HH:MM\";\n        }\n    }, [format]);\n\n    const restoreFocusToSelector = () => {\n        selectorRef.current?.focus({ preventScroll: true });\n    };\n\n    // =============================================================================\n    // EVENT LISTENERS\n    // =============================================================================\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        onBlur?.();\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleChange = (v: string) => {\n        onChange?.(v);\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleFocus = () => {\n        onFocus?.();\n    };\n\n    const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n        if (isOpen) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (next && wrapperRef.current?.contains(next)) return;\n\n        onBlur?.();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n            e.preventDefault();\n            handleOpen();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderElement = () => (\n        <InputWrapper\n            ref={wrapperRef}\n            role=\"group\"\n            readOnly={readOnly}\n            disabled={disabled}\n            focused={isOpen}\n            error={error}\n            className={className}\n            {...otherProps}\n        >\n            <BasicInput\n                ref={selectorRef}\n                readOnly\n                placeholder={placeholder || getPlaceholderValue()}\n                value={TimeHelper.formatDisplayValue(value, format)}\n                role=\"combobox\"\n                aria-invalid={error || undefined}\n                aria-disabled={disabled || undefined}\n                aria-readonly={readOnly || undefined}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-expanded={!disabled && !readOnly ? isOpen : false}\n                data-testid={\n                    id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n                }\n                className={styles.inputSelectorElement}\n                onFocus={handleFocus}\n                onClick={handleOpen}\n                onKeyDown={handleKeyDown}\n                onBlur={handleSelectorBlur}\n            />\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            ref={setFloatingRef}\n            style={styles}\n            role=\"dialog\"\n            aria-label=\"Time picker\"\n            {...getFloatingProps()}\n        >\n            <TimepickerDropdown\n                id={id}\n                show={isOpen}\n                value={value}\n                format={format}\n                onCancel={handleDismiss}\n                onChange={handleChange}\n            />\n        </div>\n    );\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={isOpen}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            offset={8}\n            alignment={alignment}\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","focused","children","BasicInput","TimeHelper","formatDisplayValue","undefined","styles.inputSelectorElement","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"mhBAUO,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,UAChBA,EACA,kBAAmBC,EACnB,mBAAoBC,KACjBC,EAAUC,EAAAlB,EAjBU,CAAA,KAAA,WAAA,WAAA,QAAA,QAAA,cAAA,SAAA,WAAA,UAAA,SAAA,YAAA,iBAAA,mBAAA,YAAA,kBAAA,qBAsBvB,MAAOmB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDnB,EAEO,UAGA,SAEhB,CAACA,IAEEoB,EAAyB,WACR,QAAnB3B,EAAAwB,EAAYI,eAAO,IAAA5B,GAAAA,EAAE6B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX7B,GAAYC,GAChBiB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClB1B,SAAAA,EAAW0B,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KAChB1B,SAAAA,GAAW,EAGT2B,EAAsBC,UACxB,GAAIlB,EAAQ,OAEZ,MAAMmB,EAAOD,EAAEE,cACXD,IAA0B,QAAlBtC,EAAAsB,EAAWM,eAAO,IAAA5B,OAAA,EAAAA,EAAEwC,SAASF,KAEzC5B,SAAAA,GAAU,EAGR+B,EAAiBJ,IACfnC,GAAYC,GAIF,UAAVkC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EAgEJ,OACIa,EAACC,EAAmB,CAChBC,SAAU3C,IAAaD,EACvBiB,OAAQA,EACR4B,cA9Dc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QACLjD,SAAUA,EACVD,SAAUA,EACVmD,QAASlC,EACTf,MAAOA,EACPU,UAAWA,GACPG,EAAU,CAAAqC,SAEdV,EAACW,EAAU,CACPJ,IAAK3B,EACLrB,YACAG,YAAaA,GAAemB,IAC5BpB,MAAOmD,EAAWC,mBAAmBpD,EAAOE,GAC5C6C,KAAK,WAAU,eACDhD,QAASsD,EAAS,gBACjBxD,QAAYwD,EAAS,gBACrBvD,QAAYuD,EAAS,kBACnB3C,EAAc,mBACbC,EAAe,iBACjBd,IAAaC,GAAWgB,EAAc,cAElDlB,EAAK,GAAGA,wBAA2B,sBAEvCa,UAAW6C,EACXlD,QAAS0B,EACTyB,QAAS7B,EACT8B,UAAWpB,EACX/B,OAAQ0B,OAiCZ0B,eA5Be,EACnBC,SACAC,iBACAC,sBAEArB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKa,EACLE,MAAOH,EACPX,KAAK,SAAQ,aACF,eACPa,IAAkB,CAAAX,SAEtBV,EAACuB,EAAkB,CACflE,GAAIA,EACJmE,KAAMjD,EACNd,MAAOA,EACPE,OAAQA,EACR8D,SAAUrC,EACVxB,SAAUyB,OAWdqC,OAAQvC,EACRwC,QA5GY,KAChBnD,GAAU,GACVV,SAAAA,GAAU,EA2GN8D,UAAWxC,EACXyC,OAAQ,EACR9D,UAAWA,EACX+D,aAAc9D,EACd+D,SAAU9D,GACZ"}

package/timepicker/timepicker.styles.d.ts

@@ -1,4 +1 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const InputSelectorElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, never>> & string;
+export declare const inputSelectorElement: import("@linaria/core").LinariaClassName;

package/timepicker/timepicker.styles.js

@@ -1,6 +1,2 @@
-import o from"styled-components";import{BasicInput as r}from"../shared/input-wrapper/input-wrapper.js";o.div`
-    position: relative;
-`;const t=o(r)`
-    height: calc(3rem - 2px); // exclude top and bottom borders
-`;export{t as InputSelectorElement};
+import"./timepicker.styles_zmkhl8.css";const e="ixpxnsh";export{e as inputSelectorElement};
 //# sourceMappingURL=timepicker.styles.js.map

package/timepicker/timepicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.styles.js","sources":["../../src/timepicker/timepicker.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { BasicInput } from \"../shared/input-wrapper/input-wrapper\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n    position: relative;\n`;\n\nexport const InputSelectorElement = styled(BasicInput)`\n    height: calc(3rem - 2px); // exclude top and bottom borders\n`;\n"],"names":["styled","div","InputSelectorElement","BasicInput"],"mappings":"uGAOuBA,EAAOC,GAAG;;QAIpBC,EAAuBF,EAAOG,EAAW;;"}
+{"version":3,"file":"timepicker.styles.js","sources":["../../src/timepicker/timepicker.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSelectorElement = css`\n    height: calc(3rem - 2px); /* exclude top and bottom borders */\n`;\n"],"names":["inputSelectorElement"],"mappings":"iEAKO,MAAMA,EAAoB"}

package/timepicker/timepicker.styles_zmkhl8.css

@@ -0,0 +1 @@
+.ixpxnsh{height:calc(3rem - 2px);}

package/timetable/const.js

@@ -1,2 +1,2 @@
-const F=["#FFE6BB","#D8EFEB","#E6EAFE","#FAE4E5","#D3EEFC"],E=2,D=15,B=21,o=252,t=68,A=84,C=["#FFF2DD","#EBF7F5","#F2F4FE","#FCF1F2","#E9F6FD"];export{A as MIN_HOURLY_INTERVAL_WIDTH,B as MIN_INTERVAL_WIDTH,C as ROW_BAR_COLOR_ALTERNATE_COLOR,F as ROW_BAR_COLOR_SEQUENCE,E as ROW_CELL_GAP,o as ROW_HEADER_WIDTH,t as ROW_HEIGHT,D as ROW_INTERVAL};
+const F=["#FFE6BB","#D8EFEB","#E6EAFE","#FAE4E5","#D3EEFC"],E=2,D=15,B=21,o=252,t=["#FFF2DD","#EBF7F5","#F2F4FE","#FCF1F2","#E9F6FD"];export{B as MIN_INTERVAL_WIDTH,t as ROW_BAR_COLOR_ALTERNATE_COLOR,F as ROW_BAR_COLOR_SEQUENCE,E as ROW_CELL_GAP,o as ROW_HEADER_WIDTH,D as ROW_INTERVAL};
 //# sourceMappingURL=const.js.map

package/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":["ROW_BAR_COLOR_SEQUENCE","ROW_CELL_GAP","ROW_INTERVAL","MIN_INTERVAL_WIDTH","ROW_HEADER_WIDTH","ROW_HEIGHT","MIN_HOURLY_INTERVAL_WIDTH","ROW_BAR_COLOR_ALTERNATE_COLOR"],"mappings":"AAAO,MAAMA,EAAyB,CAClC,UACA,UACA,UACA,UACA,WAGSC,EAAe,EACfC,EAAe,GACfC,EAAqB,GACrBC,EAAmB,IACnBC,EAAa,GACbC,EAA4B,GAC5BC,EAAgC,CACzC,UACA,UACA,UACA,UACA"}
+{"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":["ROW_BAR_COLOR_SEQUENCE","ROW_CELL_GAP","ROW_INTERVAL","MIN_INTERVAL_WIDTH","ROW_HEADER_WIDTH","ROW_BAR_COLOR_ALTERNATE_COLOR"],"mappings":"AAAO,MAAMA,EAAyB,CAClC,UACA,UACA,UACA,UACA,WAGSC,EAAe,EACfC,EAAe,GACfC,EAAqB,GACrBC,EAAmB,IAGnBC,EAAgC,CACzC,UACA,UACA,UACA,UACA"}

package/timetable/internal-types.d.ts

@@ -3,6 +3,7 @@ import type { TimeTableRowCellData } from "./types";
 export type InternalTimeTableRowCellData = TimeTableRowCellData & {
     roundedStartTime?: string;
     roundedEndTime?: string;
+    isFocusable?: boolean;
 };
 export interface RowBarColors {
     mainColor: RowBarMainColors;

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

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

package/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                        styleType=\"light\"\n                        sizeType=\"small\"\n                        disabled={loading}\n                        onClick={handleRefresh}\n                        $loading={loading}\n                    >\n                        <RefreshIcon />\n                    </StyledRefreshButton>\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":["TimeTableHeader","_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","RefreshIcon"],"mappings":"uVA0BO,MAAMA,EAAmBC,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA0Cf,OACIQ,EAACC,EAAuB,CAAAC,SAAA,CACpBC,EAACC,EAAmBC,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,QAEnCH,EAACW,EAA+B,CAAAT,SAAA,CAC5BF,EAACY,EAAgB,CAAA,cACD,4BACZC,OAAQ,WAAUX,SAAA,CAEjBb,sBAEJG,GACGW,EAACW,EAAmB,CAAA,cACJ,gCACZC,UAAU,QACVC,SAAS,QACTC,SAAU9B,EACV+B,QAASnB,EAAaoB,SACZhC,EAAOe,SAEjBC,EAACiB,aAkBS"}
+{"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":["TimeTableHeader","_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":"kiBAwBO,MAAMA,EAAmBC,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA8Cf,OACIQ,SAAKC,UAAWC,YACZC,EAACC,iBACGH,UAAWI,EACXnB,aAAcA,EACdC,QAASA,GACLO,EAAU,CACdY,kBAlDmBC,IAC3BX,IACAL,EAAegB,EAAK,EAiDZC,iBA9CkBD,IAC1BX,IACAN,EAAmBiB,EAAK,EA6ChBd,qBAAsBA,UAtCTgB,IAAjBpB,EAAmCc,QAEnCH,EAAA,MAAA,CAAKC,UAAWS,EAAsCC,SAAA,CAClDX,EAACY,EAAWC,QACRZ,UAAWa,gBACC,4BACZC,OAAQ,qBAEP1B,EAAY,UAA0B,IAAjBA,EAAqB,IAAM,GAAE,YAEtDG,GACGW,EAACa,EAAM,CAAA,cACS,6CACD,4BACXC,UAAU,QACVC,SAAS,QACTC,SAAUhC,EACViC,QAASrB,EACTE,UAAWoB,EACPC,EACAnC,GAAWoC,GAEfC,KAAMrB,EAACsB,EAAW,CAAA,UAmB5B"}

package/timetable/timetable-header/timetable-header.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const refreshButton: import("@linaria/core").LinariaClassName;
+export declare const refreshButtonLoading: import("@linaria/core").LinariaClassName;
+export declare const navigationHeaderWrapper: import("@linaria/core").LinariaClassName;
+export declare const navigationHeaderSubtitleWrapper: import("@linaria/core").LinariaClassName;
+export declare const resultText: import("@linaria/core").LinariaClassName;
+export declare const dateNavigator: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./timetable-header.styles_11gl1h4.css";const e="r1dkvl6z",t="r1u01cjw",s="n17unxsd",l="n1oy278s",r="r64l2hv",a="d13zs1sk";export{a as dateNavigator,l as navigationHeaderSubtitleWrapper,s as navigationHeaderWrapper,e as refreshButton,t as refreshButtonLoading,r as resultText};
+//# sourceMappingURL=timetable-header.styles.js.map

package/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":["refreshButton","refreshButtonLoading","navigationHeaderWrapper","navigationHeaderSubtitleWrapper","resultText","dateNavigator"],"mappings":"wFAIO,MAAMA,EAAa,WAWbC,EAAoB,WAMpBC,EAAuB,WAOvBC,EAA+B,WAO/BC,EAAU,UAIVC,EAAa"}

package/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/timetable/timetable-row/row-bar.d.ts

@@ -8,5 +8,5 @@ interface RowBarProps extends TimeTableRowData {
     containerRef: RefObject<HTMLDivElement>;
     rowBarColor: RowBarColors;
 }
-export declare const RowBar: ({ id, timetableMinTime, timetableMaxTime, rowMinTime, rowMaxTime, rowCells, rowBarColor, intervalWidth, containerRef, outOfRangeCellPopover, }: RowBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RowBar: ({ id, name, timetableMinTime, timetableMaxTime, rowMinTime, rowMaxTime, rowCells, rowBarColor, intervalWidth, containerRef, outOfRangeCellPopover, }: RowBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

package/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    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 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({ ...cell, roundedStartTime, roundedEndTime });\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\">\n            {rowCellArray.map((cell, index) => {\n                return (\n                    <RowCell\n                        key={`${index}-row-cell-key`}\n                        {...cell}\n                        intervalWidth={intervalWidth}\n                        rowBarColor={rowBarColor}\n                        containerRef={containerRef}\n                    />\n                );\n            })}\n        </RowCellContainer>\n    );\n};\n"],"names":["RowBar","id","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","nextSlotStartTime","_a","roundedNextSlotStartTime","curr","time2","get","nextHour","add","startOf","format","toString","length","_jsx","RowCellContainer","children","map","RowCell"],"mappings":"yTAsBO,MAAMA,EAAS,EAClBC,KACAC,mBACAC,mBACAC,aACAC,aACAC,WACAC,cACAC,gBACAC,eACAC,4BAEA,MAAMC,EAAiBP,EACjBQ,EAAWC,uBAAuBT,EAAYU,GAC9CZ,EACAa,EAAiBV,EACjBO,EAAWC,uBAAuBR,EAAYS,GAAc,GAC5DX,EAYAa,EAAeC,GAAQ,KACzB,MAAMD,EAA+C,GAIjDL,GACAO,EAAMhB,EAAkB,SAASiB,SAC7BD,EAAMP,EAAgB,WAG1BK,EAAaI,KAAK,CACdnB,KACAoB,UAAWnB,EACXoB,QAASX,EACTY,OAAQ,UACRC,cAAed,IAIvB,MAAMe,EAAiB,IAAInB,GAAUoB,MAAK,CAACC,EAAGC,KAC1C,MAAMC,EAAQX,EAAMS,EAAEN,UAAW,SAC3BS,EAAQZ,EAAMU,EAAEP,UAAW,SACjC,OAAIQ,EAAMV,SAASW,IAAe,EAC9BD,EAAME,QAAQD,GAAe,EAC1B,CAAC,IAEZ,IAAIE,EA+FJ,OA7FAP,EAAeQ,SAAQ,CAACC,EAAMC,WAC1B,MAAMd,UAAEA,EAASC,QAAEA,GAAYY,EAC/B,IAAIE,EAAmBxB,EAAWC,uBAC9BQ,EACAP,GAKAkB,GACAd,EAAMkB,EAAkB,SAASjB,SAC7BD,EAAMc,EAAoB,YAG9BI,EAAmBxB,EAAWC,uBAC1BQ,EACAP,GACA,IAIR,MAAMuB,EAAiBzB,EAAWC,uBAC9BS,EACAR,GACA,GAEJE,EAAaI,KAAIkB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAML,IAAME,mBAAkBC,oBAE/C,MAAMG,WACFC,EAAAnC,EAAS6B,EAAQ,yBAAId,YAAaN,EAChC2B,EAA2BxB,EAC7BN,EAAWC,uBACP2B,EACA1B,GAEJ,SAIJ,IAAI6B,EAFkBzB,EAAMmB,EAAgB,SAK5C,KAAOM,EAAKxB,SAASuB,IACjB,GA5ERE,EA4EmCF,EAANC,EA1EhBE,IAAI,SAAWD,EAAMC,IAAI,QA0EwB,CAClD,MAAMC,EAAWH,EAAKI,IAAI,EAAG,QAAQC,QAAQ,QAC7ChC,EAAaI,KAAK,CACdnB,KACAoB,UAAWsB,EAAKM,OAAO,SAASC,WAChC5B,QAASwB,EAASG,OAAO,SAASC,WAClC3B,OAAQ,aAEZoB,EAAOG,CACX,MACI9B,EAAaI,KAAK,CACdnB,KACAoB,UAAWsB,EAAKM,OAAO,SAASC,WAChC5B,QAASoB,EACJO,OAAO,SACPC,WACL3B,OAAQ,aAEZoB,EAAOD,EAhGC,IAEpBE,EAiGIZ,EAAqBW,EAAKM,OAAO,SAASC,UAAU,IAKpDnC,GACAG,EAAMf,EAAkB,SAAS4B,QAC7Bb,EAAMH,EAAgB,WAG1BC,EAAaI,KAAK,CACdnB,KACAoB,UAAWN,EACXO,QAASnB,EACToB,OAAQ,UACRC,cAAed,IAKO,IAA1Be,EAAe0B,QAAiB/C,GAAeC,GAC/CW,EAAaI,KAAK,CACdnB,KACAoB,UAAWnB,EACXoB,QAASnB,EACToB,OAAQ,UACRC,cAAed,IAGhBM,CAAY,GACpB,CACCL,EACAT,EACAI,EACAS,EACAZ,EACAC,EACAC,EACAJ,EACAS,IAGJ,OACI0C,EAACC,EAAgB,CAAA,cAAa,gBAAeC,SACxCtC,EAAauC,KAAI,CAACrB,EAAMC,IAEjBiB,EAACI,EAAOlB,OAAAC,OAAA,GAEAL,EAAI,CACR1B,cAAeA,EACfD,YAAaA,EACbE,aAAcA,IAJT,GAAG0B,qBAQL"}
+{"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":["RowBar","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":"0TAsBO,MAAMA,EAAS,EAClBC,KACAC,OACAC,mBACAC,mBACAC,aACAC,aACAC,WACAC,cACAC,gBACAC,eACAC,4BAEA,MAAMC,EAAiBP,EACjBQ,EAAWC,uBAAuBT,EAAYU,GAC9CZ,EACAa,EAAiBV,EACjBO,EAAWC,uBAAuBR,EAAYS,GAAc,GAC5DX,EA6BAa,EAAeC,GAAQ,KACzB,MAAMD,EAA+C,GAIjDL,GACAO,EAAMhB,EAAkB,SAASiB,SAC7BD,EAAMP,EAAgB,WAG1BK,EAAaI,KAAK,CACdpB,KACAqB,UAAWnB,EACXoB,QAASX,EACTY,OAAQ,UACRC,cAAed,IAIvB,MAAMe,EAAiB,IAAInB,GAAUoB,MAAK,CAACC,EAAGC,KAC1C,MAAMC,EAAQX,EAAMS,EAAEN,UAAW,SAC3BS,EAAQZ,EAAMU,EAAEP,UAAW,SACjC,OAAIQ,EAAMV,SAASW,IAAe,EAC9BD,EAAME,QAAQD,GAAe,EAC1B,CAAC,IAEZ,IAAIE,EAoGJ,OAlGAP,EAAeQ,SAAQ,CAACC,EAAMC,WAC1B,MAAMd,UAAEA,EAASC,QAAEA,GAAYY,EAC/B,IAAIE,EAAmBxB,EAAWC,uBAC9BQ,EACAP,GAKAkB,GACAd,EAAMkB,EAAkB,SAASjB,SAC7BD,EAAMc,EAAoB,YAG9BI,EAAmBxB,EAAWC,uBAC1BQ,EACAP,GACA,IAIR,MAAMuB,EAAiBzB,EAAWC,uBAC9BS,EACAR,GACA,GAEJE,EAAaI,KAAIkB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACVL,IACHE,mBACAC,iBACAG,aAAa,KAGjB,MAAMC,WACFC,EAAApC,EAAS6B,EAAQ,yBAAId,YAAaN,EAChC4B,EAA2BzB,EAC7BN,EAAWC,uBACP4B,EACA3B,GAEJ,SAIJ,IAAI8B,EAFkB1B,EAAMmB,EAAgB,SAK5C,KAAOO,EAAKzB,SAASwB,IACjB,GAlGRE,EAkGmCF,EAANC,EAhGhBE,IAAI,SAAWD,EAAMC,IAAI,QAgGwB,CAClD,MAAMC,EAAWH,EAAKI,IAAI,EAAG,QAAQC,QAAQ,QAC7CjC,EAAaI,KAAK,CACdpB,KACAqB,UAAWuB,EAAKM,OAAO,SAASC,WAChC7B,QAASyB,EAASG,OAAO,SAASC,WAClC5B,OAAQ,aAEZqB,EAAOG,CACX,MACI/B,EAAaI,KAAK,CACdpB,KACAqB,UAAWuB,EAAKM,OAAO,SAASC,WAChC7B,QAASqB,EACJO,OAAO,SACPC,WACL5B,OAAQ,aAEZqB,EAAOD,EAtHC,IAEpBE,EAuHIb,EAAqBY,EAAKM,OAAO,SAASC,UAAU,IAKpDpC,GACAG,EAAMf,EAAkB,SAAS4B,QAC7Bb,EAAMH,EAAgB,WAG1BC,EAAaI,KAAK,CACdpB,KACAqB,UAAWN,EACXO,QAASnB,EACToB,OAAQ,UACRC,cAAed,IAKO,IAA1Be,EAAe2B,QAAiBhD,GAAeC,GAC/CW,EAAaI,KAAK,CACdpB,KACAqB,UAAWnB,EACXoB,QAASnB,EACToB,OAAQ,UACRC,cAAed,IAGhBM,CAAY,GACpB,CACCL,EACAT,EACAI,EACAS,EACAZ,EACAC,EACAC,EACAL,EACAU,IAGJ,OACI2C,SACIC,UAAWC,EAAuB,cACtB,gBACZC,KAAK,eAAcC,SAElBzC,EAAa0C,KAAI,CAACxB,EAAMC,KACrB,OACIkB,EAACM,EAAOrB,OAAAC,OAAA,GAEAL,EAAI,CACR0B,cAvKKC,EAwKD3B,EAAKE,kBAAoBF,EAAKb,WAtK7CT,EAAWkD,cAAcD,GACtBjD,EAAWkD,cAAc5D,IACzBY,EACJ,GAqKYiD,aAjKI1C,EAkKAa,EAAKE,kBAAoBF,EAAKb,UAlKXC,EAmKnBY,EAAKG,gBAAkBH,EAAKZ,SAjK3CV,EAAWkD,cAAcxC,GACtBV,EAAWkD,cAAczC,IAC7BP,GAiKYkD,QAAS/D,EACTO,cAAeA,EACfD,YAAaA,EACbE,aAAcA,IAZT,GAAG0B,kBA5JL,IAACd,EAAmBC,EATlBuC,CAkLP,KAGR"}

package/timetable/timetable-row/row-bar.styles.d.ts

@@ -0,0 +1 @@
+export declare const rowCellContainer: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./row-bar.styles_1x0vrsz.css";const t="r1vzjzkv";export{t as rowCellContainer};
+//# sourceMappingURL=row-bar.styles.js.map

package/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":["rowCellContainer"],"mappings":"4EAEO,MAAMA,EAAgB"}

package/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/timetable/timetable-row/row-cell.d.ts

@@ -5,6 +5,9 @@ interface RowCellProps extends InternalTimeTableRowCellData {
     containerRef: RefObject<HTMLDivElement>;
     intervalWidth: number;
     rowBarColor: RowBarColors;
+    ariaColIndex: number;
+    ariaColSpan: number;
+    rowName: string;
 }
-export declare const RowCell: React.MemoExoticComponent<({ id, startTime, endTime, title, subtitle, status, intervalWidth, rowBarColor, containerRef, customPopover, cellStyleAttributes, roundedStartTime, roundedEndTime, onClick, }: RowCellProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const RowCell: React.MemoExoticComponent<({ id, startTime, endTime, title, subtitle, status, intervalWidth, rowBarColor, customPopover, cellStyleAttributes, isFocusable, roundedStartTime, roundedEndTime, ariaColIndex, ariaColSpan, rowName, onClick, }: RowCellProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

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

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

package/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 { DateHelper } from \"../../util\";\nimport { ROW_CELL_GAP, ROW_INTERVAL } from \"../const\";\nimport type {\n    InternalTimeTableRowCellData,\n    RowBarColors,\n} from \"../internal-types\";\nimport {\n    Block,\n    BlockContainer,\n    BlockDescription,\n    BlockTitle,\n    Gap,\n    Wrapper,\n} from \"./row-cell.style\";\nimport { WithOptionalPopover } from \"./with-optional-popover\";\n\ninterface RowCellProps extends InternalTimeTableRowCellData {\n    containerRef: RefObject<HTMLDivElement>;\n    intervalWidth: number;\n    rowBarColor: RowBarColors;\n}\n\nconst Component = ({\n    id,\n    startTime,\n    endTime,\n    title,\n    subtitle,\n    status,\n    intervalWidth,\n    rowBarColor,\n    containerRef,\n    customPopover,\n    cellStyleAttributes,\n    roundedStartTime = startTime,\n    roundedEndTime = endTime,\n    onClick,\n}: RowCellProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isOnTheHour = dayjs(roundedEndTime, \"HH:mm\").get(\"minutes\") === 0;\n    const numberOfIntervals =\n        DateHelper.getTimeDiffInMinutes(roundedStartTime, roundedEndTime) /\n        ROW_INTERVAL;\n    const totalCellWidth = numberOfIntervals * intervalWidth;\n    const adjustedCellWidth = totalCellWidth - ROW_CELL_GAP;\n    const isClickable =\n        !!onClick || (customPopover && customPopover.trigger === \"click\");\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleCellClick = (event: React.MouseEvent) => {\n        if (onClick) {\n            onClick(\n                {\n                    id,\n                    startTime,\n                    endTime,\n                    status,\n                    title,\n                    subtitle,\n                    customPopover,\n                },\n                event\n            );\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <WithOptionalPopover\n            containerRef={containerRef}\n            customPopover={customPopover}\n        >\n            <BlockContainer\n                key={`block-container-key`}\n                data-testid={`block-container`}\n                $isOnTheHour={isOnTheHour}\n            >\n                <Wrapper>\n                    <Block\n                        $width={adjustedCellWidth}\n                        $status={status}\n                        $mainColor={rowBarColor.mainColor}\n                        $altColor={rowBarColor.alternateColor}\n                        $isClickable={isClickable}\n                        $customMainColor={cellStyleAttributes?.backgroundColor}\n                        $customAltColor={\n                            cellStyleAttributes?.altBackgroundColor\n                        }\n                        $customHoverColor={\n                            cellStyleAttributes?.hoverBackgroundColor\n                        }\n                        $customAltHoverColor={\n                            cellStyleAttributes?.altHoverBackgroundColor\n                        }\n                        $styleType={cellStyleAttributes?.styleType}\n                        onClick={handleCellClick}\n                    >\n                        {title && (\n                            <BlockTitle weight={\"semibold\"}>{title}</BlockTitle>\n                        )}\n                        {subtitle && (\n                            <BlockDescription weight={\"bold\"}>\n                                {subtitle}\n                            </BlockDescription>\n                        )}\n                    </Block>\n                    <Gap />\n                </Wrapper>\n            </BlockContainer>\n        </WithOptionalPopover>\n    );\n};\n\nexport const RowCell = React.memo(Component);\n"],"names":["RowCell","React","memo","id","startTime","endTime","title","subtitle","status","intervalWidth","rowBarColor","containerRef","customPopover","cellStyleAttributes","roundedStartTime","roundedEndTime","onClick","isOnTheHour","dayjs","get","adjustedCellWidth","DateHelper","getTimeDiffInMinutes","ROW_INTERVAL","ROW_CELL_GAP","isClickable","trigger","_jsx","WithOptionalPopover","children","BlockContainer","$isOnTheHour","_jsxs","Wrapper","Block","$width","$status","$mainColor","mainColor","$altColor","alternateColor","$isClickable","$customMainColor","backgroundColor","$customAltColor","altBackgroundColor","$customHoverColor","hoverBackgroundColor","$customAltHoverColor","altHoverBackgroundColor","$styleType","styleType","event","BlockTitle","weight","BlockDescription","Gap"],"mappings":"mfA0BA,MAiGaA,EAAUC,EAAMC,MAjGX,EACdC,KACAC,YACAC,UACAC,QACAC,WACAC,SACAC,gBACAC,cACAC,eACAC,gBACAC,sBACAC,mBAAmBV,EACnBW,iBAAiBV,EACjBW,cAKA,MAAMC,EAAgE,IAAlDC,EAAMH,EAAgB,SAASI,IAAI,WAKjDC,EAHFC,EAAWC,qBAAqBR,EAAkBC,GAClDQ,EACuCd,EACAe,EACrCC,IACAT,GAAYJ,GAA2C,UAA1BA,EAAcc,QAyBjD,OACIC,EAACC,EAAmB,CAChBjB,aAAcA,EACdC,cAAeA,EAAaiB,SAE5BF,EAACG,EAAc,CAAA,cAEE,kBAAiBC,aAChBd,EAAWY,SAEzBG,EAACC,EAAO,CAAAJ,SAAA,CACJG,EAACE,EAAK,CAAAC,OACMf,EAAiBgB,QAChB5B,EAAM6B,WACH3B,EAAY4B,UAASC,UACtB7B,EAAY8B,eAAcC,aACvBhB,EAAWiB,iBACP7B,aAAmB,EAAnBA,EAAqB8B,gBAAeC,gBAElD/B,aAAmB,EAAnBA,EAAqBgC,mBAAkBC,kBAGvCjC,aAAmB,EAAnBA,EAAqBkC,qBAAoBC,qBAGzCnC,aAAmB,EAAnBA,EAAqBoC,wBAAuBC,WAEpCrC,aAAmB,EAAnBA,EAAqBsC,UACjCnC,QAhDKoC,IACjBpC,GACAA,EACI,CACIb,KACAC,YACAC,UACAG,SACAF,QACAC,WACAK,iBAEJwC,EAER,EAkCwCvB,SAAA,CAEvBvB,GACGqB,EAAC0B,EAAU,CAACC,OAAQ,WAAUzB,SAAGvB,IAEpCC,GACGoB,EAAC4B,EAAgB,CAACD,OAAQ,OAAMzB,SAC3BtB,OAIboB,EAAC6B,EAAG,QAjCH,wBAoCS"}
+{"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":"q0CA8BA,MAAMA,EAA8D,CAChEC,QAAS,UACTC,MAAO,WAGLC,EAWF,CACAC,QAAS,CACLC,UAAW,UACXC,QAASC,EAAO,eAChBC,SAAUD,EAAO,gBACjBE,mBAAoB,eAExBC,OAAQ,CACJL,UAAW,UACXC,QAAS,OAAOK,EAAcC,MAAMC,cAExCC,SAAU,CACNT,UAAW,UACXC,QAASC,EAAO,eAChBE,mBAAoB,eAExBM,QAAS,CACLV,UAAW,UACXC,QAAS,OAAOK,EAAcC,MAAMC,aACpCL,SAAU,OAAOG,EAAcC,MAAMI,YACrCP,mBAAoB,eAExBQ,QAAS,CACLZ,UAAW,UACXC,QAAS,cACTY,aAAcX,EAAO,qBA2JhBY,EAAUC,EAAMC,MAvJX,EACdC,KACAC,YACAC,UACAC,QACAC,WACAC,SACAC,gBACAC,cACAC,gBACAC,sBACAC,cACAC,mBAAmBV,EACnBW,iBAAiBV,EACjBW,eACAC,cACAC,UACAC,cAKA,MAAMC,EAAgE,IAAlDC,EAAMN,EAAgB,SAASO,IAAI,WAKjDC,EAHFC,EAAWC,qBAAqBX,EAAkBC,GAClDW,EACuCjB,EACAkB,EACrCC,IACAT,GAAYR,GAA2C,UAA1BA,EAAckB,QAC3CC,EAAeC,EACjB,GAAGC,EAAWC,gBAAgB7B,EAAWC,KACzCa,EACAZ,EACAC,EACA,GAAGC,KAGD0B,EAAWC,EAAuB,MAExCC,EAAcF,EAAU,CACpB,CAAC1C,EAAcC,MAAM4C,OAAQC,EAAgBf,EAAmB,MAChE,CAAC/B,EAAcC,MAAMC,WAAYgB,EAAYhB,UAC7C,CAACF,EAAcC,MAAMI,UAAWa,EAAY6B,iBAMhD,MAAMC,EAAmBC,IACjBtB,GACAA,EACI,CACIhB,KACAC,YACAC,UACAG,SACAF,QACAC,WACAI,iBAEJ8B,EAER,EAuEJ,OACIC,EAAA,MAAA,CAAA,cAEiB,kBACbC,UAAWC,EACPC,EACAzB,GAAe0B,GAEnBC,KAAK,2BACU/B,EAAY,eACbC,EAAW+B,SA3EP,YACtB,MAAM9D,UACFA,EAASC,QACTA,EAAOE,SACPA,EAAQU,aACRA,EAAYkD,cACZA,EAAa3D,mBACbA,GACAN,EAAyBwB,GAEvB0C,EAAmD,QAA9BC,EAAAvC,aAAmB,EAAnBA,EAAqB1B,iBAAS,IAAAiE,EAAAA,EAAI,UACvDC,EACqB,YAAvBF,EACMhE,EACAL,EAAoBqE,GACxBG,GAAgBzC,aAAmB,EAAnBA,EAAqB0C,kBAAmBnE,EACxDoE,GACF3C,aAAmB,EAAnBA,EAAqB4C,qBAAsBnE,EACzCoE,GACF7C,aAAmB,EAAnBA,EAAqB8C,uBAAwB3D,EAC3C4D,GACF/C,aAAmB,EAAnBA,EAAqBgD,0BAA2BX,EAEpD,OACIP,EAACmB,EAAmB,CAAClD,cAAeA,EAAaqC,SAC7Cc,EAAA,MAAA,CAAKnB,UAAWoB,EAAcf,SAAA,CAC1Bc,EAACE,EAAQ,CACLrB,UAAWsB,EACXC,IAAKhC,EACLiC,UAAWvC,EACXzC,QAASkE,EACThE,SAAUkE,EACVxD,aAAc0D,EACdR,cAAeU,EACfrE,mBAAoBA,EACpB6B,QAASqB,EACTtD,UAAWkE,EACXgB,SAAUvD,EAAc,OAAIwD,EAASrB,SAAA,CAErCN,EAAC4B,EAAc,CAAAtB,SAAElB,IAChBxB,GACGoC,EAAC6B,EAAWC,OAAM,CACd7B,UAAW8B,EACXC,OAAO,WAAU,eAAA,EAAA1B,SAGhB1C,IAGRC,GACGmC,EAAC6B,EAAWI,OAAM,CACdhC,UAAWiC,EACXF,OAAO,OAAM,eAAA,EAAA1B,SAGZzC,OAIbmC,SAAKC,UAAWkC,QAEF,EAgBrBC,IAVI,sBAWH"}

package/timetable/timetable-row/row-cell.styles.d.ts

@@ -0,0 +1,14 @@
+export declare const tokens: {
+    block: {
+        mainColor: string;
+        altColor: string;
+        width: string;
+    };
+};
+export declare const blockContainer: import("@linaria/core").LinariaClassName;
+export declare const blockContainerOnTheHour: import("@linaria/core").LinariaClassName;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const gap: import("@linaria/core").LinariaClassName;
+export declare const block: import("@linaria/core").LinariaClassName;
+export declare const blockTitle: import("@linaria/core").LinariaClassName;
+export declare const blockDescription: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./row-cell.styles_y1dl5j.css";const l={block:{mainColor:"--fds-internal-timetable-rowCellBlock-mainColor",altColor:"--fds-internal-timetable-rowCellBlock-altColor",width:"--fds-internal-timetable-rowCellBlock-width"}},t="brs2fuo",o="b1tkj60f",e="w3l6hrm",r="g1ly7zml",i="byp749t",b="bhkclis",a="bbb5nib";export{i as block,t as blockContainer,o as blockContainerOnTheHour,a as blockDescription,b as blockTitle,r as gap,l as tokens,e as wrapper};
+//# sourceMappingURL=row-cell.styles.js.map

package/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":["tokens","block","mainColor","altColor","width","blockContainer","blockContainerOnTheHour","wrapper","gap","blockTitle","blockDescription"],"mappings":"4EAIO,MAAMA,EAAS,CAClBC,MAAO,CACHC,UAAW,kDACXC,SAAU,iDACVC,MAAO,gDAIFC,EAAc,UAIdC,EAAuB,WAIvBC,EAAO,UAMPC,EAAG,WAKHP,EAAK,UAaLQ,EAAU,UAMVC,EAAgB"}

package/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/timetable/timetable-row/with-optional-popover.d.ts

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

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

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import"../../_virtual/_tslib.js";import"react";import"styled-components";import"../../modal-v2/index.js";import"../../typography/typography.js";import"../../v3_theme/index.js";import"../../popover-v2/popover.styles.js";import{PopoverTrigger as t}from"../../popover-v2/popover-trigger.js";import"../../popover-v2/popover-inline/popover-inline.styles.js";const r=({containerRef:r,children:e,customPopover:p})=>{if(!p)return e;const i={position:"bottom-start",rootNode:r,customOffset:p.offset,children:e,trigger:p.trigger,delay:p.delay,popoverContent:p.content};return o(t,Object.assign({},i))};export{r as WithOptionalPopover};
+import{jsx as t}from"react/jsx-runtime";import"../../_virtual/_tslib.js";import"clsx";import"react";import"../../theme/theme-provider/context.js";import"../../typography/typography.js";import"../../card/card.styles_1gh9gs3.css";import"../../markup/markup.js";import"../../modal-v2/index.js";import"../../theme/theme-provider/index.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"../../theme/utils/use-media-query.js";import"../../popover/popover.styles_ujnf0h.css";import{PopoverTrigger as e}from"../../popover/popover-trigger.js";import"../../popover/popover-inline/popover-inline.styles_bkopnt.css";const r=({children:r,customPopover:o})=>{if(!o)return r;const i={position:"bottom-start",customOffset:o.offset,children:r,trigger:o.trigger,delay:o.delay,popoverContent:o.content};return t(e,Object.assign({},i))};export{r as WithOptionalPopover};
 //# sourceMappingURL=with-optional-popover.js.map