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

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 clsx from \"clsx\";\nimport { 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\n// @catalog\n/**\n * A form input for selecting a time value through a dropdown interface.\n *\n * Use `Timepicker` when a user needs to choose a specific time.\n * @keywords clock, field, form, input, picker, time selection\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        if (disabled) return;\n        onFocus?.();\n    };\n\n    const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n        if (isOpen || disabled) 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={clsx(\n                    styles.inputSelectorElement,\n                    disabled && styles.inputSelectorElementDisabled\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","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","clsx","styles.inputSelectorElement","styles.inputSelectorElementDisabled","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"ykBAkBO,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,KACZjC,GACJO,SAAAA,GAAW,EAGT2B,EAAsBC,UACxB,GAAIlB,GAAUjB,EAAU,OAExB,MAAMoC,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,EAmEJ,OACIa,EAACC,EAAmB,CAChBC,SAAU3C,IAAaD,EACvBiB,OAAQA,EACR4B,cAjEc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QACLjD,SAAUA,EACVD,SAAUA,EACVmD,QAASlC,EACTf,MAAOA,EACPU,UAAWA,GACPG,EAAU,CAAAqC,SAEdV,EAACW,GACGJ,IAAK3B,EACLrB,UAAQ,EACRG,YAAaA,GAAemB,IAC5BpB,MAAOmD,EAAWC,mBAAmBpD,EAAOE,GAC5C6C,KAAK,0BACShD,QAASsD,EAAS,gBACjBxD,QAAYwD,EAAS,gBACrBvD,QAAYuD,EAAS,kBACnB3C,EAAc,mBACbC,EAAe,iBACjBd,IAAaC,GAAWgB,EAAc,cAElDlB,EAAK,GAAGA,wBAA2B,sBAEvCa,UAAW6C,EACPC,EACA1D,GAAY2D,GAEhBpD,QAAS0B,EACT2B,QAAS/B,EACTgC,UAAWtB,EACX/B,OAAQ0B,OAiCZ4B,eA5Be,EACnBC,SACAC,iBACAC,sBAEAvB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKe,EACLE,MAAOH,EACPb,KAAK,SAAQ,aACF,eACPe,IAAkB,CAAAb,SAEtBV,EAACyB,EAAkB,CACfpE,GAAIA,EACJqE,KAAMnD,EACNd,MAAOA,EACPE,OAAQA,EACRgE,SAAUvC,EACVxB,SAAUyB,OAWduC,OAAQzC,EACR0C,QAhHY,KAChBrD,GAAU,GACVV,SAAAA,GAAU,EA+GNgE,UAAW1C,EACX2C,OAAQ,EACRhE,UAAWA,EACXiE,aAAchE,EACdiE,SAAUhE,GACZ"}

package/timepicker/timepicker.styles.d.ts

@@ -1,4 +1,2 @@
-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;
+export declare const inputSelectorElementDisabled: 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_lyizvq.css";const i="ixpxnsh",e="isljmoe";export{i as inputSelectorElement,e as inputSelectorElementDisabled};
 //# 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\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSelectorElement = css`\n    height: calc(3rem - 2px); /* exclude top and bottom borders */\n    cursor: inherit;\n`;\n\nexport const inputSelectorElementDisabled = css`\n    color: ${Colour[\"text-subtler\"]};\n    cursor: not-allowed;\n`;\n"],"names":["inputSelectorElement","inputSelectorElementDisabled"],"mappings":"iEAOO,MAAMA,EAAoB,UAKpBC,EAA4B"}

package/timepicker/timepicker.styles_lyizvq.css

@@ -0,0 +1,2 @@
+@layer fds{.ixpxnsh{height:calc(3rem - 2px);cursor:inherit;}
+.isljmoe{color:var(--fds-colour-text-subtler);cursor:not-allowed;}}

package/timepicker/types.d.ts

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

package/timetable/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 @@
+@layer fds{.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 @@
+@layer fds{.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 @@
+@layer fds{.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/modal-v2.js";import"../../theme/theme-provider/index.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"../../theme/utils/use-media-query.js";import"../../popover/popover.styles_ujnf0h.css";import{PopoverTrigger as e}from"../../popover/popover-trigger.js";import"../../popover/popover-inline/popover-inline.styles_bkopnt.css";const r=({children:r,customPopover:o})=>{if(!o)return r;const i={position:"bottom-start",customOffset:o.offset,children:r,trigger:o.trigger,delay:o.delay,popoverContent:o.content};return t(e,Object.assign({},i))};export{r as WithOptionalPopover};
 //# sourceMappingURL=with-optional-popover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"with-optional-popover.js","sources":["../../../src/timetable/timetable-row/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\n\nimport type { PopoverV2TriggerProps } from \"../../popover-v2\";\nimport { PopoverTrigger } from \"../../popover-v2\";\nimport type { TimeTablePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: TimeTablePopoverProps | undefined;\n}\n\nexport const WithOptionalPopover = ({\n    containerRef,\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverV2TriggerProps = {\n        position: \"bottom-start\",\n        rootNode: containerRef,\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <PopoverTrigger {...popoverTriggerProps} />;\n};\n"],"names":["WithOptionalPopover","containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"yYAYO,MAAMA,EAAsB,EAC/BC,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA6C,CAC/CC,SAAU,eACVC,SAAUL,EACVM,aAAcJ,EAAcK,OAC5BN,SAAUA,EACVO,QAASN,EAAcM,QACvBC,MAAOP,EAAcO,MACrBC,eAAgBR,EAAcS,SAGlC,OAAOC,EAACC,EAAcC,OAAAC,OAAA,CAAA,EAAKZ,GAAuB"}
+{"version":3,"file":"with-optional-popover.js","sources":["../../../src/timetable/timetable-row/with-optional-popover.tsx"],"sourcesContent":["import type { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\nimport type { TimeTablePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    children: JSX.Element;\n    customPopover?: TimeTablePopoverProps | undefined;\n}\n\nexport const WithOptionalPopover = ({\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverTriggerProps = {\n        position: \"bottom-start\",\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <PopoverTrigger {...popoverTriggerProps} />;\n};\n"],"names":["WithOptionalPopover","children","customPopover","popoverTriggerProps","position","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign"],"mappings":"g7BASO,MAAMA,EAAsB,EAC/BC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,SAAU,eACVC,aAAcH,EAAcI,OAC5BL,SAAUA,EACVM,QAASL,EAAcK,QACvBC,MAAON,EAAcM,MACrBC,eAAgBP,EAAcQ,SAGlC,OAAOC,EAACC,EAAcC,OAAAC,OAAA,CAAA,EAAKX,GAAuB"}

package/timetable/timetable.d.ts

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