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

package/cjs/predictive-text-input/predictive-text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"predictive-text-input.js","sources":["../../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n    className,\n    \"data-testid\": testId,\n    selectedOption,\n    minimumCharacters = 3,\n    fetchOptions,\n    placeholder = \"Enter here...\",\n    readOnly = false,\n    disabled = false,\n    error,\n    valueExtractor,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n    const getDisplayValue = (item: T | undefined): string => {\n        if (!item) return \"\";\n        return displayValueExtractor\n            ? displayValueExtractor(item)\n            : item.toString();\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [input, setInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [searchedInput, setSearchedInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [options, setOptions] = useState<T[]>([]);\n    const [isLoading, setIsLoading] = useState<boolean>(true);\n    const [isError, setIsError] = useState<boolean>(false);\n    const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n        !!selectedOption\n    );\n    const [prevOptionSelected, setPrevOptionSelected] = useState<T | undefined>(\n        selectedOption\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n    const [resultAnnouncement, setResultAnnouncement] = useState<string | null>(\n        null\n    );\n    const instructionId = `${internalId}-instruction`;\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const selectorRef = useRef<HTMLInputElement | null>(null);\n\n    const fetchOptionsRef = useRef(fetchOptions);\n\n    // =============================================================================\n    // DEBOUNCE FUNCTIONS\n    // =============================================================================\n    const handleFetchOptions = useCallback(async (input: string) => {\n        if (!fetchOptionsRef.current) return;\n        setIsError(false);\n        setIsLoading(true);\n        try {\n            const fetchedOptions = await fetchOptionsRef.current(input);\n            setSearchedInput(input);\n            setOptions(fetchedOptions ?? []);\n            setIsLoading(false);\n        } catch {\n            setIsError(true);\n            setIsLoading(false);\n        }\n    }, []);\n\n    const fetchOptionsDebounced = useCallback(\n        debounce((input: string) => {\n            handleFetchOptions(input);\n        }, 500),\n        [handleFetchOptions]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        fetchOptionsRef.current = fetchOptions;\n    }, [fetchOptions]);\n\n    useEffect(() => {\n        /***\n         * Should not fetch options for the following the scenario :\n         * 1. When input < minimumCharacters\n         * 2. When user selected option from dropdown becomes input\n         * 3. Initial selectedOption passed in as input\n         */\n        if (input && input.length >= minimumCharacters) {\n            if (!isOptionSelected) {\n                setIsOpen(true);\n                fetchOptionsDebounced(input);\n            } else if (input !== searchedInput) {\n                fetchOptionsDebounced(input);\n            }\n        } else {\n            fetchOptionsDebounced.cancel();\n        }\n\n        if (input === \"\" && prevOptionSelected) {\n            onSelectOption?.(undefined, undefined);\n            handleDropdownDismiss();\n            setPrevOptionSelected(undefined);\n        }\n\n        if (selectedOption && input !== getDisplayValue(selectedOption)) {\n            setIsOptionSelected(false);\n        }\n    }, [input, selectedOption]);\n\n    useEffect(() => {\n        setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setPrevOptionSelected(selectedOption);\n        setOptions([]);\n        setIsOptionSelected(!!selectedOption);\n    }, [selectedOption]);\n\n    useEffect(() => {\n        const state = getItemsLoadState();\n        const count = options?.length ?? 0;\n\n        if (state === \"loading\" && input.length >= minimumCharacters) {\n            setResultAnnouncement(\"Loading suggested results\");\n            return;\n        }\n\n        if (state === \"fail\") {\n            setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n            return;\n        }\n\n        if (isOpen && !isLoading && !isError) {\n            if (count === 0) {\n                setResultAnnouncement(input ? \"No results found.\" : null);\n            } else {\n                setResultAnnouncement(\n                    `${count} result${\n                        count > 1 ? \"s\" : \"\"\n                    } found. Press down arrow to scroll through the list.`\n                );\n            }\n        }\n    }, [options, input, isError, isLoading]);\n\n    // =============================================================================\n    // Cleanup: cancel debounce on unmount\n    // =============================================================================\n    useEffect(() => {\n        return () => {\n            fetchOptionsDebounced.cancel();\n        };\n    }, [fetchOptionsDebounced]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setInput(getDisplayValue(item));\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(true);\n        setPrevOptionSelected(item);\n        setIsOpen(false);\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleOpen = () => {\n        if (!isOptionSelected && input.length >= minimumCharacters) {\n            setIsFocused(true);\n        }\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n    };\n\n    const handleNodeFocus = () => {\n        setIsFocused(true);\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            !isOpen &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setIsFocused(false);\n            handleOnBlur();\n        }\n    };\n\n    const handleListDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n        selectorRef.current?.focus();\n    };\n\n    const handleOnClear = () => {\n        setInput(\"\");\n        setOptions([]);\n        setIsOptionSelected(false);\n        setIsOpen(false);\n        onSelectOption?.(undefined, undefined);\n    };\n\n    const handleOnBlur = () => {\n        if (!isOptionSelected) {\n            if (prevOptionSelected) {\n                const prevValue = getDisplayValue(prevOptionSelected);\n                setInput(prevValue);\n                setIsOpen(false);\n            } else {\n                handleOnClear();\n            }\n        }\n    };\n\n    const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setInput(e.target.value);\n        setIsOptionSelected(false);\n    };\n\n    const handleDropdownDismiss = (item?: T) => {\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(!!item);\n        setOptions([]);\n        setIsLoading(true);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getItemsLoadState = (): ItemsLoadStateType => {\n        if (isError) return \"fail\";\n        return isLoading ? \"loading\" : \"success\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputElement = () => {\n        return (\n            <InputWrapper\n                className={className}\n                data-testid={testId}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={isFocused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <VisuallyHidden id={instructionId} aria-hidden>\n                    Type in {minimumCharacters} or more characters for suggested\n                    results.\n                </VisuallyHidden>\n                {resultAnnouncement && (\n                    <VisuallyHidden aria-live=\"polite\">\n                        {resultAnnouncement}\n                    </VisuallyHidden>\n                )}\n                <Input\n                    role=\"combobox\"\n                    ref={selectorRef}\n                    id={internalId}\n                    type=\"text\"\n                    value={input}\n                    onChange={handleTyping}\n                    placeholder={placeholder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    allowClear\n                    onClear={handleOnClear}\n                    aria-expanded={isOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                    aria-haspopup=\"listbox\"\n                    onBlur={\n                        input.length < minimumCharacters\n                            ? handleOnBlur\n                            : undefined\n                    }\n                    styleType=\"no-border\"\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    {...otherProps}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <>\n                <DropdownList\n                    listboxId={internalId}\n                    listItems={options}\n                    onSelectItem={handleListItemClick}\n                    onDismiss={handleListDismiss}\n                    valueExtractor={valueExtractor}\n                    listExtractor={listExtractor}\n                    itemsLoadState={getItemsLoadState()}\n                    itemTruncationType={\"end\"}\n                    itemMaxLines={1}\n                    labelDisplayType={\"next-line\"}\n                    disableItemFocus\n                    onRetry={() => handleFetchOptions(input)}\n                    width={dropdownWidth}\n                    matchElementWidth\n                />\n            </>\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={isOpen}\n                renderElement={renderInputElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","SimpleIdGenerator","generate","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","$focused","$readOnly","$error","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"predictive-text-input.js","sources":["../../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n    className,\n    \"data-testid\": testId,\n    selectedOption,\n    minimumCharacters = 3,\n    fetchOptions,\n    placeholder = \"Enter here...\",\n    readOnly = false,\n    disabled = false,\n    error,\n    valueExtractor,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n    const getDisplayValue = (item: T | undefined): string => {\n        if (!item) return \"\";\n        return displayValueExtractor\n            ? displayValueExtractor(item)\n            : item.toString();\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [input, setInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [searchedInput, setSearchedInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [options, setOptions] = useState<T[]>([]);\n    const [isLoading, setIsLoading] = useState<boolean>(true);\n    const [isError, setIsError] = useState<boolean>(false);\n    const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n        !!selectedOption\n    );\n    const [prevOptionSelected, setPrevOptionSelected] = useState<T | undefined>(\n        selectedOption\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const internalId = useId();\n    const [resultAnnouncement, setResultAnnouncement] = useState<string | null>(\n        null\n    );\n    const instructionId = `${internalId}-instruction`;\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const selectorRef = useRef<HTMLInputElement | null>(null);\n\n    const fetchOptionsRef = useRef(fetchOptions);\n\n    // =============================================================================\n    // DEBOUNCE FUNCTIONS\n    // =============================================================================\n    const handleFetchOptions = useCallback(async (input: string) => {\n        if (!fetchOptionsRef.current) return;\n        setIsError(false);\n        setIsLoading(true);\n        try {\n            const fetchedOptions = await fetchOptionsRef.current(input);\n            setSearchedInput(input);\n            setOptions(fetchedOptions ?? []);\n            setIsLoading(false);\n        } catch {\n            setIsError(true);\n            setIsLoading(false);\n        }\n    }, []);\n\n    const fetchOptionsDebounced = useCallback(\n        debounce((input: string) => {\n            handleFetchOptions(input);\n        }, 500),\n        [handleFetchOptions]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        fetchOptionsRef.current = fetchOptions;\n    }, [fetchOptions]);\n\n    useEffect(() => {\n        /***\n         * Should not fetch options for the following the scenario :\n         * 1. When input < minimumCharacters\n         * 2. When user selected option from dropdown becomes input\n         * 3. Initial selectedOption passed in as input\n         */\n        if (input && input.length >= minimumCharacters) {\n            if (!isOptionSelected) {\n                setIsOpen(true);\n                fetchOptionsDebounced(input);\n            } else if (input !== searchedInput) {\n                fetchOptionsDebounced(input);\n            }\n        } else {\n            fetchOptionsDebounced.cancel();\n        }\n\n        if (input === \"\" && prevOptionSelected) {\n            onSelectOption?.(undefined, undefined);\n            handleDropdownDismiss();\n            setPrevOptionSelected(undefined);\n        }\n\n        if (selectedOption && input !== getDisplayValue(selectedOption)) {\n            setIsOptionSelected(false);\n        }\n    }, [input, selectedOption]);\n\n    useEffect(() => {\n        setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setPrevOptionSelected(selectedOption);\n        setOptions([]);\n        setIsOptionSelected(!!selectedOption);\n    }, [selectedOption]);\n\n    useEffect(() => {\n        const state = getItemsLoadState();\n        const count = options?.length ?? 0;\n\n        if (state === \"loading\" && input.length >= minimumCharacters) {\n            setResultAnnouncement(\"Loading suggested results\");\n            return;\n        }\n\n        if (state === \"fail\") {\n            setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n            return;\n        }\n\n        if (isOpen && !isLoading && !isError) {\n            if (count === 0) {\n                setResultAnnouncement(input ? \"No results found.\" : null);\n            } else {\n                setResultAnnouncement(\n                    `${count} result${\n                        count > 1 ? \"s\" : \"\"\n                    } found. Press down arrow to scroll through the list.`\n                );\n            }\n        }\n    }, [options, input, isError, isLoading]);\n\n    // =============================================================================\n    // Cleanup: cancel debounce on unmount\n    // =============================================================================\n    useEffect(() => {\n        return () => {\n            fetchOptionsDebounced.cancel();\n        };\n    }, [fetchOptionsDebounced]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setInput(getDisplayValue(item));\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(true);\n        setPrevOptionSelected(item);\n        setIsOpen(false);\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleOpen = () => {\n        if (!isOptionSelected && input.length >= minimumCharacters) {\n            setIsFocused(true);\n        }\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n    };\n\n    const handleNodeFocus = () => {\n        setIsFocused(true);\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            !isOpen &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setIsFocused(false);\n            handleOnBlur();\n        }\n    };\n\n    const handleListDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n        selectorRef.current?.focus();\n    };\n\n    const handleOnClear = () => {\n        setInput(\"\");\n        setOptions([]);\n        setIsOptionSelected(false);\n        setIsOpen(false);\n        onSelectOption?.(undefined, undefined);\n    };\n\n    const handleOnBlur = () => {\n        if (!isOptionSelected) {\n            if (prevOptionSelected) {\n                const prevValue = getDisplayValue(prevOptionSelected);\n                setInput(prevValue);\n                setIsOpen(false);\n            } else {\n                handleOnClear();\n            }\n        }\n    };\n\n    const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setInput(e.target.value);\n        setIsOptionSelected(false);\n    };\n\n    const handleDropdownDismiss = (item?: T) => {\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(!!item);\n        setOptions([]);\n        setIsLoading(true);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getItemsLoadState = (): ItemsLoadStateType => {\n        if (isError) return \"fail\";\n        return isLoading ? \"loading\" : \"success\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputElement = () => {\n        return (\n            <InputWrapper\n                className={className}\n                data-testid={testId}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={isFocused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <VisuallyHidden id={instructionId} aria-hidden>\n                    Type in {minimumCharacters} or more characters for suggested\n                    results.\n                </VisuallyHidden>\n                {resultAnnouncement && (\n                    <VisuallyHidden aria-live=\"polite\">\n                        {resultAnnouncement}\n                    </VisuallyHidden>\n                )}\n                <Input\n                    role=\"combobox\"\n                    ref={selectorRef}\n                    id={internalId}\n                    type=\"text\"\n                    value={input}\n                    onChange={handleTyping}\n                    placeholder={placeholder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    allowClear\n                    onClear={handleOnClear}\n                    aria-expanded={isOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                    aria-haspopup=\"listbox\"\n                    onBlur={\n                        input.length < minimumCharacters\n                            ? handleOnBlur\n                            : undefined\n                    }\n                    styleType=\"no-border\"\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    {...otherProps}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <>\n                <DropdownList\n                    listboxId={internalId}\n                    listItems={options}\n                    onSelectItem={handleListItemClick}\n                    onDismiss={handleListDismiss}\n                    valueExtractor={valueExtractor}\n                    listExtractor={listExtractor}\n                    itemsLoadState={getItemsLoadState()}\n                    itemTruncationType={\"end\"}\n                    itemMaxLines={1}\n                    labelDisplayType={\"next-line\"}\n                    disableItemFocus\n                    onRetry={() => handleFetchOptions(input)}\n                    width={dropdownWidth}\n                    matchElementWidth\n                />\n            </>\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={isOpen}\n                renderElement={renderInputElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","useId","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","focused","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/cjs/radio-button/radio-button.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),d=require("react/jsx-runtime"),a=require("./radio-button.styles.js");exports.RadioButton=i=>{var{className:s,checked:t,disabled:r,displaySize:n="default",onChange:c}=i,l=e.__rest(i,["className","checked","disabled","displaySize","onChange"]);return d.jsxs(a.Container,{$selected:t,$disabled:r,className:s,$displaySize:n,"data-testid":"radio-button",children:[d.jsx(a.Input,Object.assign({type:"radio","data-testid":"radio-input",onChange:e=>{r||null==c||c(e)},checked:t,disabled:r},l)),t?d.jsx(a.StyledCheckedIcon,{"data-testid":"radio-checked",$disabled:r,"aria-hidden":!0}):d.jsx(a.StyledUnCheckedIcon,{"data-testid":"radio-unchecked",$disabled:r,"aria-hidden":!0})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),d=require("@lifesg/react-icons"),i=require("clsx"),t=require("./radio-button.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(i);exports.RadioButton=i=>{var{className:s,checked:n,disabled:r,displaySize:l="default",focusableWhenDisabled:u,onChange:o,tabIndex:b}=i,h=e.__rest(i,["className","checked","disabled","displaySize","focusableWhenDisabled","onChange","tabIndex"]);const f=!!r&&!!u,p=!!r&&!u;return a.jsxs("div",{className:c.default(t.container,s),"data-display-size":l,"data-testid":"radio-button",children:[a.jsx("input",Object.assign({type:"radio","data-testid":"radio-input",onChange:e=>{r?e.preventDefault():null==o||o(e)},checked:n,disabled:p,"aria-disabled":f,tabIndex:f?0:b,className:c.default(t.input,!r&&t.inputActive)},h)),n?a.jsx(d.CircleDotIcon,{"data-testid":"radio-checked",className:c.default(t.icon,r?t.checkedIconDisabled:t.checkedIcon),"aria-hidden":!0}):a.jsx(d.CircleIcon,{"data-testid":"radio-unchecked",className:c.default(t.icon,r?t.uncheckedIconDisabled:t.uncheckedIcon),"aria-hidden":!0})]})};
 //# sourceMappingURL=radio-button.js.map

package/cjs/radio-button/radio-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sources":["../../../src/radio-button/radio-button.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport {\n    Container,\n    Input,\n    StyledCheckedIcon,\n    StyledUnCheckedIcon,\n} from \"./radio-button.styles\";\nimport type { RadioButtonProps } from \"./types\";\n\nexport const RadioButton = ({\n    className,\n    checked,\n    disabled,\n    displaySize = \"default\",\n    onChange,\n    ...otherProps\n}: RadioButtonProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (!disabled) {\n            onChange?.(event);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderIcon = () => {\n        return checked ? (\n            <StyledCheckedIcon\n                data-testid=\"radio-checked\"\n                $disabled={disabled}\n                aria-hidden\n            />\n        ) : (\n            <StyledUnCheckedIcon\n                data-testid=\"radio-unchecked\"\n                $disabled={disabled}\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <Container\n            $selected={checked}\n            $disabled={disabled}\n            className={className}\n            $displaySize={displaySize}\n            data-testid=\"radio-button\"\n        >\n            <Input\n                type=\"radio\"\n                data-testid=\"radio-input\"\n                onChange={handleOnChange}\n                checked={checked}\n                disabled={disabled}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </Container>\n    );\n};\n"],"names":["_a","className","checked","disabled","displaySize","onChange","otherProps","__rest","_jsxs","Container","$selected","$disabled","$displaySize","children","_jsx","Input","Object","assign","type","event","StyledCheckedIcon","StyledUnCheckedIcon"],"mappings":"6IAU4BA,IAAA,IAAAC,UACxBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,YACRA,EAAc,UAASC,SACvBA,GAAQL,EACLM,EAAUC,EAAAA,OAAAP,EANW,6DAqCxB,OACIQ,EAAAA,KAACC,EAAAA,UAAS,CAAAC,UACKR,EAAOS,UACPR,EACXF,UAAWA,EAASW,aACNR,gBACF,eAAcS,SAAA,CAE1BC,EAAAA,IAACC,EAAAA,MAAKC,OAAAC,OAAA,CACFC,KAAK,sBACO,cACZb,SArCYc,IACfhB,GACDE,SAAAA,EAAWc,EACf,EAmCQjB,QAASA,EACTC,SAAUA,GACNG,IA7BLJ,EACHY,MAACM,EAAAA,kBAAiB,CAAA,cACF,gBAAeT,UAChBR,EAAQ,eAAA,IAIvBW,MAACO,EAAAA,oBAAmB,CAAA,cACJ,kBAAiBV,UAClBR,EAAQ,eAAA,MAuBf"}
+{"version":3,"file":"radio-button.js","sources":["../../../src/radio-button/radio-button.tsx"],"sourcesContent":["import { CircleDotIcon, CircleIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { ChangeEvent } from \"react\";\n\nimport * as styles from \"./radio-button.styles\";\nimport type { RadioButtonProps } from \"./types\";\n\nexport const RadioButton = ({\n    className,\n    checked,\n    disabled,\n    displaySize = \"default\",\n    focusableWhenDisabled,\n    onChange,\n    tabIndex,\n    ...otherProps\n}: RadioButtonProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        return checked ? (\n            <CircleDotIcon\n                data-testid=\"radio-checked\"\n                className={clsx(\n                    styles.icon,\n                    disabled ? styles.checkedIconDisabled : styles.checkedIcon\n                )}\n                aria-hidden\n            />\n        ) : (\n            <CircleIcon\n                data-testid=\"radio-unchecked\"\n                className={clsx(\n                    styles.icon,\n                    disabled\n                        ? styles.uncheckedIconDisabled\n                        : styles.uncheckedIcon\n                )}\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <div\n            className={clsx(styles.container, className)}\n            data-display-size={displaySize}\n            data-testid=\"radio-button\"\n        >\n            <input\n                type=\"radio\"\n                data-testid=\"radio-input\"\n                onChange={handleOnChange}\n                checked={checked}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                className={clsx(styles.input, !disabled && styles.inputActive)}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </div>\n    );\n};\n"],"names":["_a","className","checked","disabled","displaySize","focusableWhenDisabled","onChange","tabIndex","otherProps","__rest","isFocusableWhenDisabled","isNativeDisabled","_jsxs","clsx","styles.container","children","_jsx","Object","assign","type","event","preventDefault","styles.input","styles.inputActive","CircleDotIcon","styles.icon","styles.checkedIconDisabled","styles.checkedIcon","CircleIcon","styles.uncheckedIconDisabled","styles.uncheckedIcon"],"mappings":"mRAO4BA,QAAAC,UACxBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,YACRA,EAAc,UAASC,sBACvBA,EAAqBC,SACrBA,EAAQC,SACRA,GAAQP,EACLQ,EAAUC,SAAAT,EARW,gGAaxB,MAAMU,IAA4BP,KAAcE,EAC1CM,IAAqBR,IAAaE,EAyCxC,OACIO,EAAAA,KAAA,MAAA,CACIX,UAAWY,EAAAA,QAAKC,EAAAA,UAAkBb,GAAU,oBACzBG,gBACP,eAAcW,SAAA,CAE1BC,MAAA,QAAAC,OAAAC,OAAA,CACIC,KAAK,QAAO,cACA,cACZb,SA7CYc,IAChBjB,EACAiB,EAAMC,iBAIVf,SAAAA,EAAWc,EAAM,EAwCTlB,QAASA,EACTC,SAAUQ,EAAgB,gBACXD,EACfH,SAAUG,EAA0B,EAAIH,EACxCN,UAAWY,UAAKS,EAAAA,OAAenB,GAAYoB,EAAAA,cACvCf,IAtCLN,EACHc,EAAAA,IAACQ,EAAAA,cAAa,CAAA,cACE,gBACZvB,UAAWY,EAAAA,QACPY,OACAtB,EAAWuB,EAAAA,oBAA6BC,kCAKhDX,MAACY,EAAAA,WAAU,CAAA,cACK,kBACZ3B,UAAWY,EAAAA,QACPY,EAAAA,KACAtB,EACM0B,EAAAA,sBACAC,EAAAA,eACT,eAAA,MAwBH"}

package/cjs/radio-button/radio-button.styles.js

@@ -1,41 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons"),o=require("styled-components"),t=require("../v3_theme/index.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(o);const r=n.default.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    ${e=>"small"===e.$displaySize?o.css`
-                height: 1.5rem;
-                width: 1.5rem;
-            `:o.css`
-                height: 2rem;
-                width: 2rem;
-            `}
-    position: relative;
-`,d=n.default(e.CircleIcon)`
-    height: 100%;
-    width: 100%;
-    color: ${e=>e.$disabled?t.V3_Colour["icon-disabled-subtle"](e):t.V3_Colour["icon-subtle"](e)};
-    transition: ${t.V3_Motion["duration-150"]} ${t.V3_Motion["ease-default"]};
-`,l=n.default(e.CircleDotIcon)`
-    height: 100%;
-    width: 100%;
-    color: ${e=>e.$disabled?t.V3_Colour["icon-selected-disabled"](e):t.V3_Colour["icon-selected"](e)};
-
-    transition: ${t.V3_Motion["duration-150"]} ${t.V3_Motion["ease-default"]};
-`,s=n.default.input`
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    cursor: ${e=>e.disabled?"not-allowed":"pointer"};
-    z-index: 1;
-
-    appearance: none;
-    background: transparent;
-    border: none;
-
-    &:hover + ${d}, &:hover + ${l} {
-        @media (pointer: fine) {
-            color: ${e=>!e.disabled&&t.V3_Colour["icon-hover"](e)};
-        }
-    }
-`;exports.Container=r,exports.Input=s,exports.StyledCheckedIcon=l,exports.StyledUnCheckedIcon=d;
+"use strict";require("./radio-button.styles_1c4v6v.css");exports.checkedIcon="crf4g3g",exports.checkedIconDisabled="c1bv24bs",exports.container="c22ppgr",exports.icon="iwrt33w",exports.input="ie6234c",exports.inputActive="i1pcowd9",exports.uncheckedIcon="u16bhkcz",exports.uncheckedIconDisabled="ubjq3ci";
 //# sourceMappingURL=radio-button.styles.js.map

package/cjs/radio-button/radio-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.styles.js","sources":["../../../src/radio-button/radio-button.styles.tsx"],"sourcesContent":["import { CircleDotIcon, CircleIcon } from \"@lifesg/react-icons\";\nimport styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Motion } from \"../v3_theme\";\nimport type { RadioButtonProps, RadioButtonSize } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected?: boolean;\n    $disabled?: boolean;\n    $displaySize?: RadioButtonSize | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled.div<StyleProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    ${(props) => {\n        if (props.$displaySize === \"small\") {\n            return css`\n                height: 1.5rem;\n                width: 1.5rem;\n            `;\n        } else {\n            return css`\n                height: 2rem;\n                width: 2rem;\n            `;\n        }\n    }}\n    position: relative;\n`;\n\nexport const StyledUnCheckedIcon = styled(CircleIcon)<StyleProps>`\n    height: 100%;\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled\n            ? V3_Colour[\"icon-disabled-subtle\"](props)\n            : V3_Colour[\"icon-subtle\"](props)};\n    transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const StyledCheckedIcon = styled(CircleDotIcon)<StyleProps>`\n    height: 100%;\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled\n            ? V3_Colour[\"icon-selected-disabled\"](props)\n            : V3_Colour[\"icon-selected\"](props)};\n\n    transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const Input = styled.input<RadioButtonProps>`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    z-index: 1;\n\n    appearance: none;\n    background: transparent;\n    border: none;\n\n    &:hover + ${StyledUnCheckedIcon}, &:hover + ${StyledCheckedIcon} {\n        @media (pointer: fine) {\n            color: ${(props) =>\n                !props.disabled && V3_Colour[\"icon-hover\"](props)};\n        }\n    }\n`;\n"],"names":["Container","styled","div","props","$displaySize","css","StyledUnCheckedIcon","CircleIcon","$disabled","V3_Colour","V3_Motion","StyledCheckedIcon","CircleDotIcon","Input","input","disabled"],"mappings":"sMAoBO,MAAMA,EAAYC,EAAAA,QAAOC,GAAe;;;;MAIxCC,GAC4B,UAAvBA,EAAMC,aACCC,KAAG;;;cAKHA,KAAG;;;;;EASTC,EAAsBL,EAAAA,QAAOM,EAAAA,WAAuB;;;aAGnDJ,GACNA,EAAMK,UACAC,EAAAA,UAAU,wBAAwBN,GAClCM,YAAU,eAAeN;kBACrBO,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;EAG5CC,EAAoBV,EAAAA,QAAOW,EAAAA,cAA0B;;;aAGpDT,GACNA,EAAMK,UACAC,EAAAA,UAAU,0BAA0BN,GACpCM,YAAU,iBAAiBN;;kBAEvBO,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;EAG5CG,EAAQZ,EAAAA,QAAOa,KAAuB;;;;cAIpCX,GAAWA,EAAMY,SAAW,cAAgB;;;;;;;gBAO3CT,gBAAkCK;;qBAE5BR,IACLA,EAAMY,UAAYN,EAAAA,UAAU,cAAcN;;;"}
+{"version":3,"file":"radio-button.styles.js","sources":["../../../src/radio-button/radio-button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Motion } from \"../theme\";\n\nexport const classes = {} as const;\n\nexport const container = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n\n    &[data-display-size=\"small\"] {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &[data-display-size=\"default\"] {\n        height: 2rem;\n        width: 2rem;\n    }\n`;\n\nexport const icon = css`\n    height: 100%;\n    width: 100%;\n    transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const uncheckedIcon = css`\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const uncheckedIconDisabled = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const checkedIcon = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const checkedIconDisabled = css`\n    color: ${Colour[\"icon-selected-disabled\"]};\n`;\n\nexport const input = css`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: not-allowed;\n    z-index: 1;\n\n    appearance: none;\n    background: transparent;\n    border: none;\n`;\n\nexport const inputActive = css`\n    cursor: pointer;\n\n    &:hover + svg {\n        @media (pointer: fine) {\n            color: ${Colour[\"icon-hover\"]};\n        }\n    }\n`;\n"],"names":[],"mappings":"yGAqCwB,sCAIQ,6BAnCV,uBAiBL,wBAsBC,8BAYM,iCA5BE,yCAIQ"}

package/cjs/radio-button/radio-button.styles_1c4v6v.css

@@ -0,0 +1,8 @@
+.c22ppgr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}.c22ppgr[data-display-size="small"]{height:1.5rem;width:1.5rem;}.c22ppgr[data-display-size="default"]{height:2rem;width:2rem;}
+.iwrt33w{height:100%;width:100%;-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);}
+.u16bhkcz{color:var(--fds-colour-icon-subtle);}
+.ubjq3ci{color:var(--fds-colour-icon-disabled-subtle);}
+.crf4g3g{color:var(--fds-colour-icon-selected);}
+.c1bv24bs{color:var(--fds-colour-icon-selected-disabled);}
+.ie6234c{position:absolute;height:100%;width:100%;cursor:not-allowed;z-index:1;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:transparent;border:none;}
+.i1pcowd9{cursor:pointer;}@media (pointer: fine){.i1pcowd9:hover+svg{color:var(--fds-colour-icon-hover);}}

package/cjs/schedule/schedule-day-view/schedule-day-view.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("react"),t=require("../../animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("../../util/date-helper.js"),l=require("../../util/time-helper.js"),s=require("../shared/hooks.js"),o=require("../shared/utils.js"),a=require("../shared/with-optional-popover.js"),c=require("../time-indicator/time-indicator.js"),d=require("./schedule-day-view.styles.js");exports.ScheduleDayView=({serviceData:u,isMobile:m,onNextService:h,onPrevService:p,onEmptySlotClick:j,showPrevArrow:T,showNextArrow:x,minTime:f,maxTime:v,initialScrollTime:C,containerRef:S,loading:g,emptySlotPopover:y,blockedMessage:$="Unavailable"})=>{const k=s.useTimelineOffset(f,v),b=s.useInitialScroll(g,f,C),q=i.useRef(null),w=i.useMemo((()=>l.TimeHelper.generateTimings(30,"24hr",f,v)),[f,v]),P=(e,r,i)=>{if(null==r?void 0:r.customPopover)return r.customPopover;if(!((e,r)=>!!e.slots&&o.isTimeCellCovered(e.slots,r))(e,i)&&y){const r={startTime:i,endTime:n.DateHelper.addMinutesToTime(i,30),name:e.name};return y(r)}},H=(r,i)=>{const t=l.TimeHelper.calculateDuration(r.startTime,r.endTime),n=o.calculateSlotOffset(r.startTime,i);return e.jsx(d.SlotContent,{$status:r.status,$duration:t,$offsetTop:n,onClick:e=>r.onClick&&r.onClick(r,e),children:t>=15&&e.jsxs(e.Fragment,{children:[e.jsxs(d.SlotTime,{children:[l.TimeHelper.parseInput(r.startTime,"12hr"),"–"," ",l.TimeHelper.parseInput(r.endTime,"12hr")]}),e.jsx(d.SlotAvailability,{children:"blocked"===r.status?$:`${r.booked} / ${r.capacity}`})]})})},L=(r,i)=>{const t=((e,r)=>{if(!e.slots)return[];const i=l.TimeHelper.timeToMinutes(r),t=o.minutesToTime(i+30);return o.findSlotsStartingInTimeRange(e.slots,r,t)})(r,i);return t.length>0?e.jsx(d.SlotCell,{$dashed:i.endsWith(":00"),children:t.map(((t,n)=>{const l=P(r,t,i);return e.jsx(a.WithOptionalPopover,{containerRef:S,customPopover:l,children:H(t,i)},`${t.id}-${n}`)}))},i):e.jsx(d.SlotCell,{$dashed:i.endsWith(":00"),onClick:()=>((e,r)=>{if(j){const i=n.DateHelper.addMinutesToTime(e,30);j({startTime:e,endTime:i,name:r})}})(i,r.name),children:e.jsx(a.WithOptionalPopover,{containerRef:S,customPopover:P(r,void 0,i),children:e.jsx(d.EmptySlot,{})})},i)};return e.jsx(d.ScheduleContainer,{children:g?e.jsx(d.LoadingContainer,{children:e.jsx(t.ThemedLoadingSpinner,{})}):e.jsxs(e.Fragment,{children:[e.jsxs(d.HeaderContainer,{ref:q,onScroll:e=>{q.current&&b.current&&(b.current.scrollLeft=q.current.scrollLeft)},$isMobile:m,children:[e.jsx(d.BlankCell,{}),e.jsx(d.ServiceContainer,{$columnCount:u.length,children:u.map((i=>e.jsxs(d.ServiceColumn,{children:[m&&e.jsx(d.ArrowContainer,{children:T&&p&&e.jsx(d.ArrowButton,{styleType:"light",sizeType:"small",onClick:p,"aria-label":"Previous service",children:e.jsx(r.ChevronLeftIcon,{"aria-hidden":!0})})}),e.jsxs(d.ServiceHeaderContainer,{children:[e.jsx(d.Title,{children:i.name}),e.jsxs(d.Description,{children:[e.jsx("span",{children:i.slots.filter((e=>"available"===e.status)).length})," ","available"]})]}),m&&x&&h&&e.jsx(d.ArrowButton,{styleType:"light",sizeType:"small",onClick:h,"aria-label":"Next service",children:e.jsx(r.ChevronRightIcon,{"aria-hidden":!0})})]},i.id)))})]}),e.jsxs(d.BodyContainer,{ref:b,onScroll:e=>{if(q.current&&b.current){const e=17,r=b.current.scrollWidth-b.current.clientWidth-e,i=b.current.scrollLeft;i>r?(b.current.scrollLeft=r,q.current.scrollLeft=r):q.current.scrollLeft=i}},children:[e.jsx(c.TimeIndicator,{minTime:f,maxTime:v,format:"24hr",timelineOffset:k}),e.jsxs(d.SlotGrid,{$columnCount:u.length,children:[null!==k&&e.jsx(d.Timeline,{$top:k}),u.map((r=>e.jsx(d.SlotColumn,{children:w.map((e=>L(r,e)))},r.id)))]})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("react"),t=require("../../animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("../../util/date-helper.js"),l=require("../../util/time-helper.js"),s=require("../shared/hooks.js"),o=require("../shared/utils.js"),a=require("../shared/with-optional-popover.js"),c=require("../time-indicator/time-indicator.js"),d=require("./schedule-day-view.styles.js");const{ServiceContainer:u,ServiceColumn:m,ArrowContainer:h,ArrowButton:p,ServiceHeaderContainer:j,Title:T,Description:x,SlotContent:f,SlotTime:v,SlotAvailability:C,SlotCell:S,EmptySlot:g,SlotGrid:y,Timeline:$,SlotColumn:k,ScheduleContainer:b,LoadingContainer:q,HeaderContainer:P,BlankCell:w,BodyContainer:H}=d;exports.ScheduleDayView=({serviceData:d,isMobile:L,onNextService:I,onPrevService:M,onEmptySlotClick:D,showPrevArrow:R,showNextArrow:W,minTime:A,maxTime:O,initialScrollTime:B,containerRef:N,loading:z,emptySlotPopover:E,blockedMessage:F="Unavailable"})=>{const G=s.useTimelineOffset(A,O),U=s.useInitialScroll(z,A,B),V=i.useRef(null),J=i.useMemo((()=>l.TimeHelper.generateTimings(30,"24hr",A,O)),[A,O]),K=(e,r,i)=>{if(null==r?void 0:r.customPopover)return r.customPopover;if(!((e,r)=>!!e.slots&&o.isTimeCellCovered(e.slots,r))(e,i)&&E){const r={startTime:i,endTime:n.DateHelper.addMinutesToTime(i,30),name:e.name};return E(r)}},Q=(r,i)=>{const t=l.TimeHelper.calculateDuration(r.startTime,r.endTime),n=o.calculateSlotOffset(r.startTime,i);return e.jsx(f,{$status:r.status,$duration:t,$offsetTop:n,onClick:e=>r.onClick&&r.onClick(r,e),children:t>=15&&e.jsxs(e.Fragment,{children:[e.jsxs(v,{children:[l.TimeHelper.parseInput(r.startTime,"12hr"),"–"," ",l.TimeHelper.parseInput(r.endTime,"12hr")]}),e.jsx(C,{children:"blocked"===r.status?F:`${r.booked} / ${r.capacity}`})]})})},X=(r,i)=>{const t=((e,r)=>{if(!e.slots)return[];const i=l.TimeHelper.timeToMinutes(r),t=o.minutesToTime(i+30);return o.findSlotsStartingInTimeRange(e.slots,r,t)})(r,i);return t.length>0?e.jsx(S,{$dashed:i.endsWith(":00"),children:t.map(((t,n)=>{const l=K(r,t,i);return e.jsx(a.WithOptionalPopover,{containerRef:N,customPopover:l,children:Q(t,i)},`${t.id}-${n}`)}))},i):e.jsx(S,{$dashed:i.endsWith(":00"),onClick:()=>((e,r)=>{if(D){const i=n.DateHelper.addMinutesToTime(e,30);D({startTime:e,endTime:i,name:r})}})(i,r.name),children:e.jsx(a.WithOptionalPopover,{containerRef:N,customPopover:K(r,void 0,i),children:e.jsx(g,{})})},i)};return e.jsx(b,{children:z?e.jsx(q,{children:e.jsx(t.ThemedLoadingSpinner,{})}):e.jsxs(e.Fragment,{children:[e.jsxs(P,{ref:V,onScroll:e=>{V.current&&U.current&&(U.current.scrollLeft=V.current.scrollLeft)},$isMobile:L,children:[e.jsx(w,{}),e.jsx(u,{$columnCount:d.length,children:d.map((i=>e.jsxs(m,{children:[L&&e.jsx(h,{children:R&&M&&e.jsx(p,{styleType:"light",sizeType:"small",onClick:M,"aria-label":"Previous service",icon:e.jsx(r.ChevronLeftIcon,{"aria-hidden":!0})})}),e.jsxs(j,{children:[e.jsx(T,{children:i.name}),e.jsxs(x,{children:[e.jsx("span",{children:i.slots.filter((e=>"available"===e.status)).length})," ","available"]})]}),L&&W&&I&&e.jsx(p,{styleType:"light",sizeType:"small",onClick:I,"aria-label":"Next service",icon:e.jsx(r.ChevronRightIcon,{"aria-hidden":!0})})]},i.id)))})]}),e.jsxs(H,{ref:U,onScroll:e=>{if(V.current&&U.current){const e=17,r=U.current.scrollWidth-U.current.clientWidth-e,i=U.current.scrollLeft;i>r?(U.current.scrollLeft=r,V.current.scrollLeft=r):V.current.scrollLeft=i}},children:[e.jsx(c.TimeIndicator,{minTime:A,maxTime:O,format:"24hr",timelineOffset:G}),e.jsxs(y,{$columnCount:d.length,children:[null!==G&&e.jsx($,{$top:G}),d.map((r=>e.jsx(k,{children:J.map((e=>X(r,e)))},r.id)))]})]})]})})};
 //# sourceMappingURL=schedule-day-view.js.map

package/cjs/schedule/schedule-day-view/schedule-day-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-day-view.js","sources":["../../../../src/schedule/schedule-day-view/schedule-day-view.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@lifesg/react-icons\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    calculateSlotOffset,\n    findSlotsStartingInTimeRange,\n    isTimeCellCovered,\n    minutesToTime,\n    useInitialScroll,\n    useTimelineOffset,\n} from \"../shared\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport {\n    ArrowButton,\n    ArrowContainer,\n    BlankCell,\n    BodyContainer,\n    Description,\n    EmptySlot,\n    HeaderContainer,\n    LoadingContainer,\n    ScheduleContainer,\n    ServiceColumn,\n    ServiceContainer,\n    ServiceHeaderContainer,\n    SlotAvailability,\n    SlotCell,\n    SlotColumn,\n    SlotContent,\n    SlotGrid,\n    SlotTime,\n    Timeline,\n    Title,\n} from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\nexport const ScheduleDayView = ({\n    serviceData,\n    isMobile,\n    onNextService,\n    onPrevService,\n    onEmptySlotClick,\n    showPrevArrow,\n    showNextArrow,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    loading,\n    emptySlotPopover,\n    blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const timeSlots = useMemo(\n        () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n        [minTime, maxTime]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Handle empty slot click with slot details\n    const handleEmptySlotClick = (time: string, serviceName: string) => {\n        if (onEmptySlotClick) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            onEmptySlotClick({\n                startTime: time,\n                endTime: endTimeString,\n                name: serviceName,\n            });\n        }\n    };\n\n    // Synchronize horizontal scrolling between header and body\n    const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n            const SCROLL_BUFFER = 17;\n            const maxScrollLeft =\n                bodyRef.current.scrollWidth -\n                bodyRef.current.clientWidth -\n                SCROLL_BUFFER;\n            const currentScrollLeft = bodyRef.current.scrollLeft;\n            if (currentScrollLeft > maxScrollLeft) {\n                bodyRef.current.scrollLeft = maxScrollLeft;\n                headerRef.current.scrollLeft = maxScrollLeft;\n            } else {\n                headerRef.current.scrollLeft = currentScrollLeft;\n            }\n        }\n    };\n    const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    // Find all slots that should be displayed in a given time cell\n    const findSlotsForTimeCell = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): ScheduleSlotProps[] => {\n        if (!service.slots) return [];\n        const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n        const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n        const slots = findSlotsStartingInTimeRange(\n            service.slots,\n            timeSlot,\n            nextTime\n        );\n\n        return slots;\n    };\n\n    // Check if a time slot is covered by any existing booking\n    const isServiceTimeSlotCovered = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): boolean => {\n        return service.slots\n            ? isTimeCellCovered(service.slots, timeSlot)\n            : false;\n    };\n\n    const getPopoverConfig = (\n        service: ScheduleEntityProps,\n        slot: ScheduleSlotProps | undefined,\n        time: string\n    ) => {\n        if (slot?.customPopover) {\n            return slot.customPopover;\n        }\n        if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            const emptySlotData = {\n                startTime: time,\n                endTime: endTimeString,\n                name: service.name,\n            };\n            return emptySlotPopover(emptySlotData);\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderHeader = () => {\n        return (\n            <ServiceContainer $columnCount={serviceData.length}>\n                {serviceData.map((service) => (\n                    <ServiceColumn key={service.id}>\n                        {isMobile && (\n                            <ArrowContainer>\n                                {showPrevArrow && onPrevService && (\n                                    <ArrowButton\n                                        styleType=\"light\"\n                                        sizeType=\"small\"\n                                        onClick={onPrevService}\n                                        aria-label=\"Previous service\"\n                                    >\n                                        <ChevronLeftIcon aria-hidden />\n                                    </ArrowButton>\n                                )}\n                            </ArrowContainer>\n                        )}\n                        <ServiceHeaderContainer>\n                            <Title>{service.name}</Title>\n                            <Description>\n                                <span>\n                                    {\n                                        service.slots.filter(\n                                            (cell) =>\n                                                cell.status === \"available\"\n                                        ).length\n                                    }\n                                </span>{\" \"}\n                                available\n                            </Description>\n                        </ServiceHeaderContainer>\n                        {isMobile && showNextArrow && onNextService && (\n                            <ArrowButton\n                                styleType=\"light\"\n                                sizeType=\"small\"\n                                onClick={onNextService}\n                                aria-label=\"Next service\"\n                            >\n                                <ChevronRightIcon aria-hidden />\n                            </ArrowButton>\n                        )}\n                    </ServiceColumn>\n                ))}\n            </ServiceContainer>\n        );\n    };\n\n    const renderSlotContent = (\n        slot: ScheduleSlotProps,\n        timeSlotStart: string\n    ) => {\n        const duration = TimeHelper.calculateDuration(\n            slot.startTime,\n            slot.endTime\n        );\n        const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n        return (\n            <SlotContent\n                $status={slot.status}\n                $duration={duration}\n                $offsetTop={offsetTop}\n                onClick={(e) => slot.onClick && slot.onClick(slot, e)}\n            >\n                {duration >= 15 && (\n                    <>\n                        <SlotTime>\n                            {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n                            {\"\\u2013\"}{\" \"}\n                            {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n                        </SlotTime>\n                        <SlotAvailability>\n                            {slot.status === \"blocked\"\n                                ? blockedMessage\n                                : `${slot.booked} / ${slot.capacity}`}\n                        </SlotAvailability>\n                    </>\n                )}\n            </SlotContent>\n        );\n    };\n\n    const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n        const slots = findSlotsForTimeCell(service, time);\n        if (slots.length > 0) {\n            return (\n                <SlotCell key={time} $dashed={time.endsWith(\":00\")}>\n                    {slots.map((slot, index) => {\n                        const popoverConfig = getPopoverConfig(\n                            service,\n                            slot,\n                            time\n                        );\n                        return (\n                            <WithOptionalPopover\n                                key={`${slot.id}-${index}`}\n                                containerRef={containerRef}\n                                customPopover={popoverConfig}\n                            >\n                                {renderSlotContent(slot, time)}\n                            </WithOptionalPopover>\n                        );\n                    })}\n                </SlotCell>\n            );\n        } else {\n            return (\n                <SlotCell\n                    key={time}\n                    $dashed={time.endsWith(\":00\")}\n                    onClick={() => handleEmptySlotClick(time, service.name)}\n                >\n                    <WithOptionalPopover\n                        containerRef={containerRef}\n                        customPopover={getPopoverConfig(\n                            service,\n                            undefined,\n                            time\n                        )}\n                    >\n                        <EmptySlot />\n                    </WithOptionalPopover>\n                </SlotCell>\n            );\n        }\n    };\n\n    const renderTimeSlotGrid = () => {\n        return (\n            <SlotGrid $columnCount={serviceData.length}>\n                {timelineOffset !== null && <Timeline $top={timelineOffset} />}\n                {serviceData.map((service) => (\n                    <SlotColumn key={service.id}>\n                        {timeSlots.map((time) => renderSlotCell(service, time))}\n                    </SlotColumn>\n                ))}\n            </SlotGrid>\n        );\n    };\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {/* Service Name Header Row */}\n                    <HeaderContainer\n                        ref={headerRef}\n                        onScroll={handleHeaderScroll}\n                        $isMobile={isMobile}\n                    >\n                        <BlankCell />\n                        {renderHeader()}\n                    </HeaderContainer>\n\n                    <BodyContainer ref={bodyRef} onScroll={handleBodyScroll}>\n                        {/* Time labels */}\n                        <TimeIndicator\n                            minTime={minTime}\n                            maxTime={maxTime}\n                            format=\"24hr\"\n                            timelineOffset={timelineOffset}\n                        />\n                        {/* Time slot grid */}\n                        {renderTimeSlotGrid()}\n                    </BodyContainer>\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","blockedMessage","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","timeSlots","useMemo","TimeHelper","generateTimings","getPopoverConfig","service","slot","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","startTime","endTime","DateHelper","addMinutesToTime","name","renderSlotContent","timeSlotStart","duration","calculateDuration","offsetTop","calculateSlotOffset","_jsx","SlotContent","$status","status","$duration","onClick","e","children","_jsxs","_Fragment","SlotTime","parseInput","SlotAvailability","booked","capacity","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","length","SlotCell","$dashed","endsWith","map","index","popoverConfig","WithOptionalPopover","id","serviceName","endTimeString","handleEmptySlotClick","undefined","EmptySlot","ScheduleContainer","LoadingContainer","ThemedLoadingSpinner","HeaderContainer","ref","onScroll","_e","current","scrollLeft","$isMobile","BlankCell","ServiceContainer","$columnCount","ServiceColumn","ArrowContainer","ArrowButton","styleType","sizeType","ChevronLeftIcon","ServiceHeaderContainer","Title","Description","filter","cell","ChevronRightIcon","BodyContainer","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","SlotGrid","Timeline","$top","SlotColumn"],"mappings":"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"}
+{"version":3,"file":"schedule-day-view.js","sources":["../../../../src/schedule/schedule-day-view/schedule-day-view.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@lifesg/react-icons\";\nimport type { MouseEvent } from \"react\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    calculateSlotOffset,\n    findSlotsStartingInTimeRange,\n    isTimeCellCovered,\n    minutesToTime,\n    useInitialScroll,\n    useTimelineOffset,\n} from \"../shared\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport * as styles from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\nconst {\n    ServiceContainer,\n    ServiceColumn,\n    ArrowContainer,\n    ArrowButton,\n    ServiceHeaderContainer,\n    Title,\n    Description,\n    SlotContent,\n    SlotTime,\n    SlotAvailability,\n    SlotCell,\n    EmptySlot,\n    SlotGrid,\n    Timeline,\n    SlotColumn,\n    ScheduleContainer,\n    LoadingContainer,\n    HeaderContainer,\n    BlankCell,\n    BodyContainer,\n} = styles;\n\nexport const ScheduleDayView = ({\n    serviceData,\n    isMobile,\n    onNextService,\n    onPrevService,\n    onEmptySlotClick,\n    showPrevArrow,\n    showNextArrow,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    loading,\n    emptySlotPopover,\n    blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const timeSlots = useMemo(\n        () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n        [minTime, maxTime]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Handle empty slot click with slot details\n    const handleEmptySlotClick = (time: string, serviceName: string) => {\n        if (onEmptySlotClick) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            onEmptySlotClick({\n                startTime: time,\n                endTime: endTimeString,\n                name: serviceName,\n            });\n        }\n    };\n\n    // Synchronize horizontal scrolling between header and body\n    const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n            const SCROLL_BUFFER = 17;\n            const maxScrollLeft =\n                bodyRef.current.scrollWidth -\n                bodyRef.current.clientWidth -\n                SCROLL_BUFFER;\n            const currentScrollLeft = bodyRef.current.scrollLeft;\n            if (currentScrollLeft > maxScrollLeft) {\n                bodyRef.current.scrollLeft = maxScrollLeft;\n                headerRef.current.scrollLeft = maxScrollLeft;\n            } else {\n                headerRef.current.scrollLeft = currentScrollLeft;\n            }\n        }\n    };\n    const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    // Find all slots that should be displayed in a given time cell\n    const findSlotsForTimeCell = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): ScheduleSlotProps[] => {\n        if (!service.slots) return [];\n        const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n        const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n        const slots = findSlotsStartingInTimeRange(\n            service.slots,\n            timeSlot,\n            nextTime\n        );\n\n        return slots;\n    };\n\n    // Check if a time slot is covered by any existing booking\n    const isServiceTimeSlotCovered = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): boolean => {\n        return service.slots\n            ? isTimeCellCovered(service.slots, timeSlot)\n            : false;\n    };\n\n    const getPopoverConfig = (\n        service: ScheduleEntityProps,\n        slot: ScheduleSlotProps | undefined,\n        time: string\n    ) => {\n        if (slot?.customPopover) {\n            return slot.customPopover;\n        }\n        if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            const emptySlotData = {\n                startTime: time,\n                endTime: endTimeString,\n                name: service.name,\n            };\n            return emptySlotPopover(emptySlotData);\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderHeader = () => {\n        return (\n            <ServiceContainer $columnCount={serviceData.length}>\n                {serviceData.map((service) => (\n                    <ServiceColumn key={service.id}>\n                        {isMobile && (\n                            <ArrowContainer>\n                                {showPrevArrow && onPrevService && (\n                                    <ArrowButton\n                                        styleType=\"light\"\n                                        sizeType=\"small\"\n                                        onClick={onPrevService}\n                                        aria-label=\"Previous service\"\n                                        icon={<ChevronLeftIcon aria-hidden />}\n                                    />\n                                )}\n                            </ArrowContainer>\n                        )}\n                        <ServiceHeaderContainer>\n                            <Title>{service.name}</Title>\n                            <Description>\n                                <span>\n                                    {\n                                        service.slots.filter(\n                                            (cell) =>\n                                                cell.status === \"available\"\n                                        ).length\n                                    }\n                                </span>{\" \"}\n                                available\n                            </Description>\n                        </ServiceHeaderContainer>\n                        {isMobile && showNextArrow && onNextService && (\n                            <ArrowButton\n                                styleType=\"light\"\n                                sizeType=\"small\"\n                                onClick={onNextService}\n                                aria-label=\"Next service\"\n                                icon={<ChevronRightIcon aria-hidden />}\n                            />\n                        )}\n                    </ServiceColumn>\n                ))}\n            </ServiceContainer>\n        );\n    };\n\n    const renderSlotContent = (\n        slot: ScheduleSlotProps,\n        timeSlotStart: string\n    ) => {\n        const duration = TimeHelper.calculateDuration(\n            slot.startTime,\n            slot.endTime\n        );\n        const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n        return (\n            <SlotContent\n                $status={slot.status}\n                $duration={duration}\n                $offsetTop={offsetTop}\n                onClick={(e: MouseEvent) =>\n                    slot.onClick && slot.onClick(slot, e)\n                }\n            >\n                {duration >= 15 && (\n                    <>\n                        <SlotTime>\n                            {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n                            {\"\\u2013\"}{\" \"}\n                            {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n                        </SlotTime>\n                        <SlotAvailability>\n                            {slot.status === \"blocked\"\n                                ? blockedMessage\n                                : `${slot.booked} / ${slot.capacity}`}\n                        </SlotAvailability>\n                    </>\n                )}\n            </SlotContent>\n        );\n    };\n\n    const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n        const slots = findSlotsForTimeCell(service, time);\n        if (slots.length > 0) {\n            return (\n                <SlotCell key={time} $dashed={time.endsWith(\":00\")}>\n                    {slots.map((slot, index) => {\n                        const popoverConfig = getPopoverConfig(\n                            service,\n                            slot,\n                            time\n                        );\n                        return (\n                            <WithOptionalPopover\n                                key={`${slot.id}-${index}`}\n                                containerRef={containerRef}\n                                customPopover={popoverConfig}\n                            >\n                                {renderSlotContent(slot, time)}\n                            </WithOptionalPopover>\n                        );\n                    })}\n                </SlotCell>\n            );\n        } else {\n            return (\n                <SlotCell\n                    key={time}\n                    $dashed={time.endsWith(\":00\")}\n                    onClick={() => handleEmptySlotClick(time, service.name)}\n                >\n                    <WithOptionalPopover\n                        containerRef={containerRef}\n                        customPopover={getPopoverConfig(\n                            service,\n                            undefined,\n                            time\n                        )}\n                    >\n                        <EmptySlot />\n                    </WithOptionalPopover>\n                </SlotCell>\n            );\n        }\n    };\n\n    const renderTimeSlotGrid = () => {\n        return (\n            <SlotGrid $columnCount={serviceData.length}>\n                {timelineOffset !== null && <Timeline $top={timelineOffset} />}\n                {serviceData.map((service) => (\n                    <SlotColumn key={service.id}>\n                        {timeSlots.map((time) => renderSlotCell(service, time))}\n                    </SlotColumn>\n                ))}\n            </SlotGrid>\n        );\n    };\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {/* Service Name Header Row */}\n                    <HeaderContainer\n                        ref={headerRef}\n                        onScroll={handleHeaderScroll}\n                        $isMobile={isMobile}\n                    >\n                        <BlankCell />\n                        {renderHeader()}\n                    </HeaderContainer>\n\n                    <BodyContainer ref={bodyRef} onScroll={handleBodyScroll}>\n                        {/* Time labels */}\n                        <TimeIndicator\n                            minTime={minTime}\n                            maxTime={maxTime}\n                            format=\"24hr\"\n                            timelineOffset={timelineOffset}\n                        />\n                        {/* Time slot grid */}\n                        {renderTimeSlotGrid()}\n                    </BodyContainer>\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["ServiceContainer","ServiceColumn","ArrowContainer","ArrowButton","ServiceHeaderContainer","Title","Description","SlotContent","SlotTime","SlotAvailability","SlotCell","EmptySlot","SlotGrid","Timeline","SlotColumn","ScheduleContainer","LoadingContainer","HeaderContainer","BlankCell","BodyContainer","styles","serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","blockedMessage","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","timeSlots","useMemo","TimeHelper","generateTimings","getPopoverConfig","service","slot","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","startTime","endTime","DateHelper","addMinutesToTime","name","renderSlotContent","timeSlotStart","duration","calculateDuration","offsetTop","calculateSlotOffset","_jsx","$status","status","$duration","onClick","e","children","_jsxs","_Fragment","parseInput","booked","capacity","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","length","$dashed","endsWith","map","index","popoverConfig","WithOptionalPopover","id","serviceName","endTimeString","handleEmptySlotClick","undefined","ThemedLoadingSpinner","ref","onScroll","_e","current","scrollLeft","$isMobile","$columnCount","styleType","sizeType","icon","ChevronLeftIcon","filter","cell","ChevronRightIcon","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","$top"],"mappings":"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"}

package/cjs/schedule/schedule-day-view/schedule-day-view.styles.js

@@ -1,4 +1,4 @@
-"use strict";var e=require("styled-components"),o=require("../../icon-button/icon-button.js"),r=require("../../shared/styles/index.js"),t=require("../../typography/index.js"),i=require("../../v3_theme/index.js"),d=require("../const.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(e);const s=l.default(o.IconButton)`
+"use strict";var e=require("styled-components"),o=require("../../button/button.js"),r=require("../../shared/styles/index.js"),t=require("../../typography/index.js"),i=require("../../v3_theme/index.js"),d=require("../const.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(e);const s=l.default(o.Button)`
     color: ${i.V3_Colour.icon};
 `,a=l.default.div`
     width: 2rem;

package/cjs/schedule/schedule-day-view/schedule-day-view.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-day-view.styles.js","sources":["../../../../src/schedule/schedule-day-view/schedule-day-view.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { IconButton } from \"../../icon-button\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport {\n    CELL_HEIGHT,\n    HEADER_HEIGHT,\n    MIN_COLUMN_WIDTH,\n    TIME_INDICATOR_WIDTH,\n} from \"../const\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface HeaderContainerStyleProps {\n    $isMobile: boolean;\n}\n\ninterface ServiceContainerStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotGridStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotCellStyleProps {\n    $dashed?: boolean;\n}\n\ninterface SlotContentStyleProps {\n    $status?: string;\n    $duration?: number;\n    $offsetTop?: number;\n}\n\ninterface TimelineStyleProps {\n    $top: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ArrowButton = styled(IconButton)`\n    color: ${V3_Colour[\"icon\"]};\n`;\nexport const ArrowContainer = styled.div`\n    width: 2rem;\n`;\n\nexport const ScheduleContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n`;\n\nexport const LoadingContainer = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 25rem;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    background: ${V3_Colour[\"bg\"]};\n`;\n\nexport const HeaderContainer = styled.div<HeaderContainerStyleProps>`\n    z-index: 3;\n    max-height: ${HEADER_HEIGHT}px;\n    border-top-right-radius: ${V3_Radius[\"md\"]};\n    border-top-left-radius: ${V3_Radius[\"md\"]};\n    position: sticky;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    overflow-x: hidden;\n    overflow-y: hidden;\n\n    ${(props) =>\n        props.$isMobile\n            ? css`\n                  display: block;\n                  overflow: hidden;\n              `\n            : css`\n                  display: grid;\n                  grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n              `}\n`;\n\nexport const BlankCell = styled.div`\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    background: ${V3_Colour[\"bg-strong\"]};\n    position: sticky;\n    left: 0;\n`;\nexport const ServiceContainer = styled.div<ServiceContainerStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n`;\n\nexport const ServiceColumn = styled.div`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-8\"]};\n    background: ${V3_Colour[\"bg-strong\"]};\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const ServiceHeaderContainer = styled.div`\n    width: 15rem;\n    padding-left: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const Title = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-primary\"]};\n    font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    margin-top: 0;\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n    word-wrap: break-word;\n`;\n\nexport const Description = styled(Typography.BodySM)`\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    background-color: ${V3_Colour[\"bg-success-hover\"]};\n    border-radius: ${V3_Radius[\"full\"]};\n    width: fit-content;\n    padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-8\"]};\n    color: ${V3_Colour[\"text-success\"]};\n    font-weight: ${V3_Font.Spec[\"weight-regular\"]};\n    span {\n        font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    }\n`;\n\nexport const BodyContainer = styled.div`\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n    width: 100%;\n    overflow-x: auto;\n    overflow-y: auto;\n    flex: 1;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-top: none;\n    border-bottom-right-radius: ${V3_Radius[\"md\"]};\n    border-bottom-left-radius: ${V3_Radius[\"md\"]};\n`;\n\nexport const SlotGrid = styled.div<SlotGridStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n    min-width: max-content;\n    position: relative;\n`;\n\nexport const SlotColumn = styled.div`\n    display: flex;\n    flex-direction: column;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    min-height: fit-content;\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const SlotCell = styled.div<SlotCellStyleProps>`\n    min-height: ${CELL_HEIGHT}px;\n    position: relative;\n    border-bottom: ${V3_Border[\"width-010\"]} solid ${V3_Colour[\"border\"]};\n    ${(props) =>\n        props.$dashed &&\n        css`\n            border-bottom-style: dashed;\n        `}\n    cursor: pointer;\n`;\n\nexport const SlotContent = styled(Typography.BodyXS)<SlotContentStyleProps>`\n    margin-top: 0;\n    overflow: hidden;\n    width: calc(100% - 27px);\n    padding: 2px ${V3_Spacing[\"spacing-8\"]};\n    position: absolute;\n    top: ${(props) => props.$offsetTop || 0}px;\n    ${V3_Font[\"body-xs-semibold\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    z-index: 1;\n    height: ${(props) =>\n        props.$duration\n            ? `${(props.$duration / 30) * CELL_HEIGHT - 1}px`\n            : `${CELL_HEIGHT - 1}px`};\n    display: flex;\n    justify-content: space-between;\n    background: ${(props) => {\n        switch (props.$status) {\n            case \"pending\":\n                return css`\n                    repeating-linear-gradient(\n                        135deg,\n                        ${V3_Colour[\"bg-warning\"]},\n                        ${V3_Colour[\"bg-warning\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 10px\n                    )\n                `;\n            case \"blocked\":\n                return V3_Colour[\"bg-inverse-subtle\"];\n            case \"available\":\n                return V3_Colour[\"bg-success-hover\"];\n            case \"booked\":\n                return V3_Colour[\"bg-primary-subtler\"];\n            default:\n                return V3_Colour[\"bg\"];\n        }\n    }};\n\n    color: ${(props) =>\n        props.$status === \"blocked\"\n            ? V3_Colour[\"text-inverse\"]\n            : V3_Colour[\"text-subtle\"]};\n\n    border-left: ${V3_Border[\"width-040\"]} solid\n        ${(props) =>\n            props.$status === \"available\" ? V3_Colour[\"icon-success\"] : \"none\"};\n`;\n\nexport const SlotTime = styled.span`\n    ${V3_Font[\"body-xs-regular\"]};\n`;\n\nexport const SlotAvailability = styled.span`\n    ${V3_Font[\"body-xs-semibold\"]};\n`;\n\nexport const Timeline = styled.div<TimelineStyleProps>`\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background: ${V3_Colour[\"icon-primary\"]};\n    top: ${(props) => props.$top}px;\n    z-index: 2;\n`;\n\nexport const EmptySlot = styled.div`\n    width: 100%;\n    height: ${CELL_HEIGHT - 1}px;\n`;\n"],"names":["ArrowButton","styled","IconButton","V3_Colour","ArrowContainer","div","ScheduleContainer","LoadingContainer","V3_Border","solid","V3_Radius","HeaderContainer","HEADER_HEIGHT","props","$isMobile","css","TIME_INDICATOR_WIDTH","BlankCell","ServiceContainer","$columnCount","ServiceColumn","MIN_COLUMN_WIDTH","V3_Spacing","ServiceHeaderContainer","Title","Typography","BodyMD","V3_Font","Spec","lineClampCss","Description","BodySM","BodyContainer","SlotGrid","SlotColumn","SlotCell","CELL_HEIGHT","$dashed","SlotContent","BodyXS","$offsetTop","$duration","$status","SlotTime","span","SlotAvailability","Timeline","$top","EmptySlot"],"mappings":"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"}
+{"version":3,"file":"schedule-day-view.styles.js","sources":["../../../../src/schedule/schedule-day-view/schedule-day-view.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Button } from \"../../button\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport {\n    CELL_HEIGHT,\n    HEADER_HEIGHT,\n    MIN_COLUMN_WIDTH,\n    TIME_INDICATOR_WIDTH,\n} from \"../const\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface HeaderContainerStyleProps {\n    $isMobile: boolean;\n}\n\ninterface ServiceContainerStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotGridStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotCellStyleProps {\n    $dashed?: boolean;\n}\n\ninterface SlotContentStyleProps {\n    $status?: string;\n    $duration?: number;\n    $offsetTop?: number;\n}\n\ninterface TimelineStyleProps {\n    $top: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ArrowButton = styled(Button)`\n    color: ${V3_Colour[\"icon\"]};\n`;\nexport const ArrowContainer = styled.div`\n    width: 2rem;\n`;\n\nexport const ScheduleContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n`;\n\nexport const LoadingContainer = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 25rem;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    background: ${V3_Colour[\"bg\"]};\n`;\n\nexport const HeaderContainer = styled.div<HeaderContainerStyleProps>`\n    z-index: 3;\n    max-height: ${HEADER_HEIGHT}px;\n    border-top-right-radius: ${V3_Radius[\"md\"]};\n    border-top-left-radius: ${V3_Radius[\"md\"]};\n    position: sticky;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    overflow-x: hidden;\n    overflow-y: hidden;\n\n    ${(props) =>\n        props.$isMobile\n            ? css`\n                  display: block;\n                  overflow: hidden;\n              `\n            : css`\n                  display: grid;\n                  grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n              `}\n`;\n\nexport const BlankCell = styled.div`\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    background: ${V3_Colour[\"bg-strong\"]};\n    position: sticky;\n    left: 0;\n`;\nexport const ServiceContainer = styled.div<ServiceContainerStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n`;\n\nexport const ServiceColumn = styled.div`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-8\"]};\n    background: ${V3_Colour[\"bg-strong\"]};\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const ServiceHeaderContainer = styled.div`\n    width: 15rem;\n    padding-left: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const Title = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-primary\"]};\n    font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    margin-top: 0;\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n    word-wrap: break-word;\n`;\n\nexport const Description = styled(Typography.BodySM)`\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    background-color: ${V3_Colour[\"bg-success-hover\"]};\n    border-radius: ${V3_Radius[\"full\"]};\n    width: fit-content;\n    padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-8\"]};\n    color: ${V3_Colour[\"text-success\"]};\n    font-weight: ${V3_Font.Spec[\"weight-regular\"]};\n    span {\n        font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    }\n`;\n\nexport const BodyContainer = styled.div`\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n    width: 100%;\n    overflow-x: auto;\n    overflow-y: auto;\n    flex: 1;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-top: none;\n    border-bottom-right-radius: ${V3_Radius[\"md\"]};\n    border-bottom-left-radius: ${V3_Radius[\"md\"]};\n`;\n\nexport const SlotGrid = styled.div<SlotGridStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n    min-width: max-content;\n    position: relative;\n`;\n\nexport const SlotColumn = styled.div`\n    display: flex;\n    flex-direction: column;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    min-height: fit-content;\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const SlotCell = styled.div<SlotCellStyleProps>`\n    min-height: ${CELL_HEIGHT}px;\n    position: relative;\n    border-bottom: ${V3_Border[\"width-010\"]} solid ${V3_Colour[\"border\"]};\n    ${(props) =>\n        props.$dashed &&\n        css`\n            border-bottom-style: dashed;\n        `}\n    cursor: pointer;\n`;\n\nexport const SlotContent = styled(Typography.BodyXS)<SlotContentStyleProps>`\n    margin-top: 0;\n    overflow: hidden;\n    width: calc(100% - 27px);\n    padding: 2px ${V3_Spacing[\"spacing-8\"]};\n    position: absolute;\n    top: ${(props) => props.$offsetTop || 0}px;\n    ${V3_Font[\"body-xs-semibold\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    z-index: 1;\n    height: ${(props) =>\n        props.$duration\n            ? `${(props.$duration / 30) * CELL_HEIGHT - 1}px`\n            : `${CELL_HEIGHT - 1}px`};\n    display: flex;\n    justify-content: space-between;\n    background: ${(props) => {\n        switch (props.$status) {\n            case \"pending\":\n                return css`\n                    repeating-linear-gradient(\n                        135deg,\n                        ${V3_Colour[\"bg-warning\"]},\n                        ${V3_Colour[\"bg-warning\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 10px\n                    )\n                `;\n            case \"blocked\":\n                return V3_Colour[\"bg-inverse-subtle\"];\n            case \"available\":\n                return V3_Colour[\"bg-success-hover\"];\n            case \"booked\":\n                return V3_Colour[\"bg-primary-subtler\"];\n            default:\n                return V3_Colour[\"bg\"];\n        }\n    }};\n\n    color: ${(props) =>\n        props.$status === \"blocked\"\n            ? V3_Colour[\"text-inverse\"]\n            : V3_Colour[\"text-subtle\"]};\n\n    border-left: ${V3_Border[\"width-040\"]} solid\n        ${(props) =>\n            props.$status === \"available\" ? V3_Colour[\"icon-success\"] : \"none\"};\n`;\n\nexport const SlotTime = styled.span`\n    ${V3_Font[\"body-xs-regular\"]};\n`;\n\nexport const SlotAvailability = styled.span`\n    ${V3_Font[\"body-xs-semibold\"]};\n`;\n\nexport const Timeline = styled.div<TimelineStyleProps>`\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background: ${V3_Colour[\"icon-primary\"]};\n    top: ${(props) => props.$top}px;\n    z-index: 2;\n`;\n\nexport const EmptySlot = styled.div`\n    width: 100%;\n    height: ${CELL_HEIGHT - 1}px;\n`;\n"],"names":["ArrowButton","styled","Button","V3_Colour","ArrowContainer","div","ScheduleContainer","LoadingContainer","V3_Border","solid","V3_Radius","HeaderContainer","HEADER_HEIGHT","props","$isMobile","css","TIME_INDICATOR_WIDTH","BlankCell","ServiceContainer","$columnCount","ServiceColumn","MIN_COLUMN_WIDTH","V3_Spacing","ServiceHeaderContainer","Title","Typography","BodyMD","V3_Font","Spec","lineClampCss","Description","BodySM","BodyContainer","SlotGrid","SlotColumn","SlotCell","CELL_HEIGHT","$dashed","SlotContent","BodyXS","$offsetTop","$duration","$status","SlotTime","span","SlotAvailability","Timeline","$top","EmptySlot"],"mappings":"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"}

package/cjs/schedule/schedule-header/schedule-header.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),a=require("../../input-select/input-select.js");require("../../util/calendar-helper.js");var r=require("../../util/date-helper.js");require("../../external/dayjs/dayjs.min.js"),require("react"),require("../../util/string-helper.js");var l=require("./schedule-header.style.js");exports.ScheduleHeader=i=>{var{date:n,view:s="day",minDate:o,maxDate:c,onPreviousDayClick:d,onNextDayClick:u,onCalendarDateSelect:D,onViewChange:y,onTodayClick:j}=i,h=e.__rest(i,["date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick"]);const x=[{label:"Day",value:"day"},{label:"Week",value:"week"}],p=x.find((e=>e.value===s));return t.jsxs(l.ScheduleHeaderWrapper,Object.assign({},h,{children:[t.jsxs(l.LeftSection,{children:[t.jsx(l.StyledButton,{styleType:"light",onClick:j,children:"Today"}),t.jsx(l.StyledDateNavigator,{selectedDate:n,minDate:o,maxDate:c,view:s,onLeftArrowClick:e=>{if("week"===s){const t=r.DateHelper.toDayjs(e).subtract(1,"week");d(t.format("YYYY-MM-DD"))}else d(e)},onRightArrowClick:e=>{if("week"===s){const t=r.DateHelper.toDayjs(e).add(1,"week");u(t.format("YYYY-MM-DD"))}else u(e)},onCalendarDateSelect:D})]}),t.jsxs(l.RightSection,{children:[t.jsx(l.StyledText,{children:"View by:"}),t.jsx(a.InputSelect,{options:x,selectedOption:p,onSelectOption:e=>null==y?void 0:y(e.value),listExtractor:e=>e.label,displayValueExtractor:e=>e.label,dropdownWidth:l.DROPDOWN_WIDTH})]})]}))};
+"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),a=require("../../input-select/input-select.js");require("../../util/calendar-helper.js");var r=require("../../util/date-helper.js");require("../../external/dayjs/dayjs.min.js"),require("react"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./schedule-header.style.js");exports.ScheduleHeader=l=>{var{date:n,view:s="day",minDate:o,maxDate:c,onPreviousDayClick:d,onNextDayClick:u,onCalendarDateSelect:D,onViewChange:y,onTodayClick:j}=l,h=e.__rest(l,["date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick"]);const p=[{label:"Day",value:"day"},{label:"Week",value:"week"}],x=p.find((e=>e.value===s));return t.jsxs(i.ScheduleHeaderWrapper,Object.assign({},h,{children:[t.jsxs(i.LeftSection,{children:[t.jsx(i.StyledButton,{styleType:"light",onClick:j,children:"Today"}),t.jsx(i.StyledDateNavigator,{selectedDate:n,minDate:o,maxDate:c,view:s,onLeftArrowClick:e=>{if("week"===s){const t=r.DateHelper.toDayjs(e).subtract(1,"week");d(t.format("YYYY-MM-DD"))}else d(e)},onRightArrowClick:e=>{if("week"===s){const t=r.DateHelper.toDayjs(e).add(1,"week");u(t.format("YYYY-MM-DD"))}else u(e)},onCalendarDateSelect:D})]}),t.jsxs(i.RightSection,{children:[t.jsx(i.StyledText,{children:"View by:"}),t.jsx(a.InputSelect,{options:p,selectedOption:x,onSelectOption:e=>null==y?void 0:y(e.value),listExtractor:e=>e.label,displayValueExtractor:e=>e.label,dropdownWidth:i.DROPDOWN_WIDTH})]})]}))};
 //# sourceMappingURL=schedule-header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"schedule-header.js","sources":["../../../../src/schedule/schedule-header/schedule-header.tsx"],"sourcesContent":["import { InputSelect } from \"../../input-select\";\nimport { DateHelper } from \"../../util\";\nimport type { ScheduleView } from \"../types\";\nimport {\n    DROPDOWN_WIDTH,\n    LeftSection,\n    RightSection,\n    ScheduleHeaderWrapper,\n    StyledButton,\n    StyledDateNavigator,\n    StyledText,\n} from \"./schedule-header.style\";\n\nexport interface ScheduleHeaderProps {\n    id?: string | undefined;\n    date: string;\n    view: ScheduleView;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    onPreviousDayClick: (currentDate: string) => void;\n    onNextDayClick: (currentDate: string) => void;\n    onCalendarDateSelect?: (currentDate: string) => void;\n    onViewChange?: (view: ScheduleView) => void;\n    onTodayClick?: () => void;\n}\n\nexport const ScheduleHeader = ({\n    date,\n    view = \"day\",\n    minDate,\n    maxDate,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onViewChange,\n    onTodayClick,\n    ...otherProps\n}: ScheduleHeaderProps) => {\n    const viewOptions: Array<{ label: string; value: ScheduleView }> = [\n        { label: \"Day\", value: \"day\" },\n        { label: \"Week\", value: \"week\" },\n    ];\n    const selectedViewOption = viewOptions.find(\n        (option) => option.value === view\n    );\n\n    // Handle navigation based on view type\n    const handleLeftArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const previousWeek = currentDateObj.subtract(1, \"week\");\n            onPreviousDayClick(previousWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onPreviousDayClick(currentDate);\n        }\n    };\n\n    const handleRightArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const nextWeek = currentDateObj.add(1, \"week\");\n            onNextDayClick(nextWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onNextDayClick(currentDate);\n        }\n    };\n\n    return (\n        <ScheduleHeaderWrapper {...otherProps}>\n            <LeftSection>\n                <StyledButton styleType=\"light\" onClick={onTodayClick}>\n                    Today\n                </StyledButton>\n                <StyledDateNavigator\n                    selectedDate={date}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    view={view}\n                    onLeftArrowClick={handleLeftArrowClick}\n                    onRightArrowClick={handleRightArrowClick}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n            </LeftSection>\n\n            <RightSection>\n                <StyledText>View by:</StyledText>\n                <InputSelect\n                    options={viewOptions}\n                    selectedOption={selectedViewOption}\n                    onSelectOption={(option) => onViewChange?.(option.value)}\n                    listExtractor={(option) => option.label}\n                    displayValueExtractor={(option) => option.label}\n                    dropdownWidth={DROPDOWN_WIDTH}\n                />\n            </RightSection>\n        </ScheduleHeaderWrapper>\n    );\n};\n"],"names":["_a","date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick","otherProps","__rest","viewOptions","label","value","selectedViewOption","find","option","_jsxs","ScheduleHeaderWrapper","Object","assign","children","LeftSection","_jsx","StyledButton","styleType","onClick","StyledDateNavigator","selectedDate","onLeftArrowClick","currentDate","previousWeek","DateHelper","toDayjs","subtract","format","onRightArrowClick","nextWeek","add","RightSection","StyledText","InputSelect","options","selectedOption","onSelectOption","listExtractor","displayValueExtractor","dropdownWidth","DROPDOWN_WIDTH"],"mappings":"kYA0B+BA,QAAAC,KAC3BA,EAAIC,KACJA,EAAO,MAAKC,QACZA,EAAOC,QACPA,EAAOC,mBACPA,EAAkBC,eAClBA,EAAcC,qBACdA,EAAoBC,aACpBA,EAAYC,aACZA,KACGC,EAAUC,EAAAA,OAAAX,EAVc,CAAA,OAAA,OAAA,UAAA,UAAA,qBAAA,iBAAA,uBAAA,eAAA,iBAY3B,MAAMY,EAA6D,CAC/D,CAAEC,MAAO,MAAOC,MAAO,OACvB,CAAED,MAAO,OAAQC,MAAO,SAEtBC,EAAqBH,EAAYI,MAClCC,GAAWA,EAAOH,QAAUZ,IAwBjC,OACIgB,EAAAA,KAACC,EAAAA,sBAAqBC,OAAAC,OAAA,CAAA,EAAKX,EAAU,CAAAY,SAAA,CACjCJ,EAAAA,KAACK,EAAAA,YAAW,CAAAD,SAAA,CACRE,EAAAA,IAACC,EAAAA,aAAY,CAACC,UAAU,QAAQC,QAASlB,EAAYa,SAAA,UAGrDE,EAAAA,IAACI,EAAAA,oBAAmB,CAChBC,aAAc5B,EACdE,QAASA,EACTC,QAASA,EACTF,KAAMA,EACN4B,iBA/BcC,IAC1B,GAAa,SAAT7B,EAAiB,CACjB,MACM8B,EADiBC,EAAAA,WAAWC,QAAQH,GACNI,SAAS,EAAG,QAChD9B,EAAmB2B,EAAaI,OAAO,cAC3C,MACI/B,EAAmB0B,EACvB,EAyBYM,kBAtBeN,IAC3B,GAAa,SAAT7B,EAAiB,CACjB,MACMoC,EADiBL,EAAAA,WAAWC,QAAQH,GACVQ,IAAI,EAAG,QACvCjC,EAAegC,EAASF,OAAO,cACnC,MACI9B,EAAeyB,EACnB,EAgBYxB,qBAAsBA,OAI9BW,EAAAA,KAACsB,eAAY,CAAAlB,SAAA,CACTE,EAAAA,IAACiB,EAAAA,kCACDjB,EAAAA,IAACkB,EAAAA,YAAW,CACRC,QAAS/B,EACTgC,eAAgB7B,EAChB8B,eAAiB5B,GAAWT,aAAY,EAAZA,EAAeS,EAAOH,OAClDgC,cAAgB7B,GAAWA,EAAOJ,MAClCkC,sBAAwB9B,GAAWA,EAAOJ,MAC1CmC,cAAeC,EAAAA,uBAGH"}
+{"version":3,"file":"schedule-header.js","sources":["../../../../src/schedule/schedule-header/schedule-header.tsx"],"sourcesContent":["import { InputSelect } from \"../../input-select\";\nimport { DateHelper } from \"../../util\";\nimport type { ScheduleView } from \"../types\";\nimport {\n    DROPDOWN_WIDTH,\n    LeftSection,\n    RightSection,\n    ScheduleHeaderWrapper,\n    StyledButton,\n    StyledDateNavigator,\n    StyledText,\n} from \"./schedule-header.style\";\n\nexport interface ScheduleHeaderProps {\n    id?: string | undefined;\n    date: string;\n    view: ScheduleView;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    onPreviousDayClick: (currentDate: string) => void;\n    onNextDayClick: (currentDate: string) => void;\n    onCalendarDateSelect?: (currentDate: string) => void;\n    onViewChange?: (view: ScheduleView) => void;\n    onTodayClick?: () => void;\n}\n\nexport const ScheduleHeader = ({\n    date,\n    view = \"day\",\n    minDate,\n    maxDate,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onViewChange,\n    onTodayClick,\n    ...otherProps\n}: ScheduleHeaderProps) => {\n    const viewOptions: Array<{ label: string; value: ScheduleView }> = [\n        { label: \"Day\", value: \"day\" },\n        { label: \"Week\", value: \"week\" },\n    ];\n    const selectedViewOption = viewOptions.find(\n        (option) => option.value === view\n    );\n\n    // Handle navigation based on view type\n    const handleLeftArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const previousWeek = currentDateObj.subtract(1, \"week\");\n            onPreviousDayClick(previousWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onPreviousDayClick(currentDate);\n        }\n    };\n\n    const handleRightArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const nextWeek = currentDateObj.add(1, \"week\");\n            onNextDayClick(nextWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onNextDayClick(currentDate);\n        }\n    };\n\n    return (\n        <ScheduleHeaderWrapper {...otherProps}>\n            <LeftSection>\n                <StyledButton styleType=\"light\" onClick={onTodayClick}>\n                    Today\n                </StyledButton>\n                <StyledDateNavigator\n                    selectedDate={date}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    view={view}\n                    onLeftArrowClick={handleLeftArrowClick}\n                    onRightArrowClick={handleRightArrowClick}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n            </LeftSection>\n\n            <RightSection>\n                <StyledText>View by:</StyledText>\n                <InputSelect\n                    options={viewOptions}\n                    selectedOption={selectedViewOption}\n                    onSelectOption={(option) => onViewChange?.(option.value)}\n                    listExtractor={(option) => option.label}\n                    displayValueExtractor={(option) => option.label}\n                    dropdownWidth={DROPDOWN_WIDTH}\n                />\n            </RightSection>\n        </ScheduleHeaderWrapper>\n    );\n};\n"],"names":["_a","date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick","otherProps","__rest","viewOptions","label","value","selectedViewOption","find","option","_jsxs","ScheduleHeaderWrapper","Object","assign","children","LeftSection","_jsx","StyledButton","styleType","onClick","StyledDateNavigator","selectedDate","onLeftArrowClick","currentDate","previousWeek","DateHelper","toDayjs","subtract","format","onRightArrowClick","nextWeek","add","RightSection","StyledText","InputSelect","options","selectedOption","onSelectOption","listExtractor","displayValueExtractor","dropdownWidth","DROPDOWN_WIDTH"],"mappings":"qdA0B+BA,QAAAC,KAC3BA,EAAIC,KACJA,EAAO,MAAKC,QACZA,EAAOC,QACPA,EAAOC,mBACPA,EAAkBC,eAClBA,EAAcC,qBACdA,EAAoBC,aACpBA,EAAYC,aACZA,KACGC,EAAUC,EAAAA,OAAAX,EAVc,CAAA,OAAA,OAAA,UAAA,UAAA,qBAAA,iBAAA,uBAAA,eAAA,iBAY3B,MAAMY,EAA6D,CAC/D,CAAEC,MAAO,MAAOC,MAAO,OACvB,CAAED,MAAO,OAAQC,MAAO,SAEtBC,EAAqBH,EAAYI,MAClCC,GAAWA,EAAOH,QAAUZ,IAwBjC,OACIgB,EAAAA,KAACC,EAAAA,sBAAqBC,OAAAC,OAAA,CAAA,EAAKX,EAAU,CAAAY,SAAA,CACjCJ,EAAAA,KAACK,EAAAA,YAAW,CAAAD,SAAA,CACRE,EAAAA,IAACC,EAAAA,aAAY,CAACC,UAAU,QAAQC,QAASlB,EAAYa,SAAA,UAGrDE,EAAAA,IAACI,EAAAA,oBAAmB,CAChBC,aAAc5B,EACdE,QAASA,EACTC,QAASA,EACTF,KAAMA,EACN4B,iBA/BcC,IAC1B,GAAa,SAAT7B,EAAiB,CACjB,MACM8B,EADiBC,EAAAA,WAAWC,QAAQH,GACNI,SAAS,EAAG,QAChD9B,EAAmB2B,EAAaI,OAAO,cAC3C,MACI/B,EAAmB0B,EACvB,EAyBYM,kBAtBeN,IAC3B,GAAa,SAAT7B,EAAiB,CACjB,MACMoC,EADiBL,EAAAA,WAAWC,QAAQH,GACVQ,IAAI,EAAG,QACvCjC,EAAegC,EAASF,OAAO,cACnC,MACI9B,EAAeyB,EACnB,EAgBYxB,qBAAsBA,OAI9BW,EAAAA,KAACsB,eAAY,CAAAlB,SAAA,CACTE,EAAAA,IAACiB,EAAAA,kCACDjB,EAAAA,IAACkB,EAAAA,YAAW,CACRC,QAAS/B,EACTgC,eAAgB7B,EAChB8B,eAAiB5B,GAAWT,aAAY,EAAZA,EAAeS,EAAOH,OAClDgC,cAAgB7B,GAAWA,EAAOJ,MAClCkC,sBAAwB9B,GAAWA,EAAOJ,MAC1CmC,cAAeC,EAAAA,uBAGH"}

package/cjs/schedule/schedule-week-view/schedule-week-view.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("../../external/dayjs/dayjs.min.js"),r=require("react"),t=require("../../animations/themed-loading-spinner/themed-loading-spinner.js"),a=require("../../shared/internal-calendar/day-cell/day-cell.js"),s=require("../../util/time-helper.js"),n=require("../schedule-day-view/schedule-day-view.styles.js"),l=require("../shared/hooks.js"),d=require("../time-indicator/time-indicator.js"),c=require("./schedule-week-view.styles.js"),o=require("./time-cell.js"),m=require("./week-view-utils.js");exports.ScheduleWeekView=({date:u,serviceData:j,loading:h,minTime:x,maxTime:f,initialScrollTime:y,containerRef:S,blockedMessage:g,onClickHiddenSlots:p})=>{const T=l.useTimelineOffset(x,f),q=l.useInitialScroll(h,x,y),k=r.useMemo((()=>{const e=i.default(u).startOf("week");return Array.from({length:7},((i,r)=>e.add(r,"day")))}),[u]),v=r.useMemo((()=>s.TimeHelper.generateTimings(30,"24hr",x,f)),[x,f]),C=r.useMemo((()=>m.calculateSlotWidths(j,k,v)),[j,k,v]),D=i.default();return e.jsx(n.ScheduleContainer,{children:h?e.jsx(c.LoadingContainer,{children:e.jsx(t.ThemedLoadingSpinner,{})}):e.jsxs(e.Fragment,{children:[e.jsxs(c.HeaderContainer,{children:[e.jsx(c.BlankCell,{}),e.jsx(c.ServiceContainer,{children:k.map((r=>{const t=(e=>{const i=e.isSame(D,"day"),r={labelType:i?"current":"available",interactive:null};return i&&(r.circleLeft="selected-outline",r.circleRight="selected-outline"),r})(r);return e.jsxs(c.ServiceHeader,{children:[e.jsx(a.DayCell,Object.assign({date:r,calendarDate:i.default(u)},t)),e.jsx(c.Description,{children:r.format("ddd")})]},r.format("YYYY-MM-DD"))}))})]}),e.jsxs(c.BodyContainer,{ref:q,children:[e.jsx(d.TimeIndicator,{minTime:x,maxTime:f,format:"24hr",timelineOffset:T,isWeekView:!0}),e.jsx(c.SlotGrid,{children:k.map((i=>{const r=i.format("YYYY-MM-DD");return e.jsxs(c.SlotColumn,{children:[null!==T&&i.isSame(D,"day")&&e.jsx(c.Timeline,{$top:T}),v.map((i=>e.jsx(o.TimeCell,{dayDate:r,time:i,serviceData:j,slotLayoutMap:C,containerRef:S,blockedMessage:g,onClickHiddenSlots:p},i)))]},r)}))})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),i=require("../../external/dayjs/dayjs.min.js"),r=require("react"),t=require("../../animations/themed-loading-spinner/themed-loading-spinner.js"),a=require("../../shared/internal-calendar/day-cell/day-cell.js"),s=require("../../util/time-helper.js"),n=require("../schedule-day-view/schedule-day-view.styles.js"),l=require("../shared/hooks.js"),d=require("../time-indicator/time-indicator.js"),c=require("./schedule-week-view.styles.js"),o=require("./time-cell.js"),m=require("./week-view-utils.js");exports.ScheduleWeekView=({date:u,serviceData:j,loading:h,minTime:x,maxTime:f,initialScrollTime:y,containerRef:S,blockedMessage:g,onClickHiddenSlots:p})=>{const T=l.useTimelineOffset(x,f),q=l.useInitialScroll(h,x,y),v=r.useMemo((()=>{const e=i.default(u).startOf("week");return Array.from({length:7},((i,r)=>e.add(r,"day")))}),[u]),k=r.useMemo((()=>s.TimeHelper.generateTimings(30,"24hr",x,f)),[x,f]),C=r.useMemo((()=>m.calculateSlotWidths(j,v,k)),[j,v,k]),D=i.default();return e.jsx(n.ScheduleContainer,{children:h?e.jsx(c.LoadingContainer,{children:e.jsx(t.ThemedLoadingSpinner,{})}):e.jsxs(e.Fragment,{children:[e.jsxs(c.HeaderContainer,{children:[e.jsx(c.BlankCell,{}),e.jsx(c.ServiceContainer,{children:v.map((r=>{const t=(e=>{const i=e.isSame(D,"day"),r={labelType:i?"current":"available",interactive:void 0};return i&&(r.circleLeft="selected-outline",r.circleRight="selected-outline"),r})(r);return e.jsxs(c.ServiceHeader,{children:[e.jsx(a.DayCell,Object.assign({date:r,calendarDate:i.default(u)},t)),e.jsx(c.Description,{children:r.format("ddd")})]},r.format("YYYY-MM-DD"))}))})]}),e.jsxs(c.BodyContainer,{ref:q,children:[e.jsx(d.TimeIndicator,{minTime:x,maxTime:f,format:"24hr",timelineOffset:T,isWeekView:!0}),e.jsx(c.SlotGrid,{children:v.map((i=>{const r=i.format("YYYY-MM-DD");return e.jsxs(c.SlotColumn,{children:[null!==T&&i.isSame(D,"day")&&e.jsx(c.Timeline,{$top:T}),k.map((i=>e.jsx(o.TimeCell,{dayDate:r,time:i,serviceData:j,slotLayoutMap:C,containerRef:S,blockedMessage:g,onClickHiddenSlots:p},i)))]},r)}))})]})]})})};
 //# sourceMappingURL=schedule-week-view.js.map

package/cjs/schedule/schedule-week-view/schedule-week-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-week-view.js","sources":["../../../../src/schedule/schedule-week-view/schedule-week-view.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { useMemo } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport type { CellStyleProps } from \"../../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../../shared/internal-calendar/day-cell\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ScheduleContainer } from \"../schedule-day-view/schedule-day-view.styles\";\nimport { useInitialScroll, useTimelineOffset } from \"../shared\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport {\n    BlankCell,\n    BodyContainer,\n    Description,\n    HeaderContainer,\n    LoadingContainer,\n    ServiceContainer,\n    ServiceHeader,\n    SlotColumn,\n    SlotGrid,\n    Timeline,\n} from \"./schedule-week-view.styles\";\nimport { TimeCell } from \"./time-cell\";\nimport type { ScheduleWeekViewProps } from \"./types\";\nimport { calculateSlotWidths } from \"./week-view-utils\";\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport const ScheduleWeekView = ({\n    date,\n    serviceData,\n    loading,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    blockedMessage,\n    onClickHiddenSlots,\n}: ScheduleWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n\n    const weekDays = useMemo(() => {\n        const startOfWeek = dayjs(date).startOf(\"week\");\n        return Array.from({ length: 7 }, (_, i) => startOfWeek.add(i, \"day\"));\n    }, [date]);\n\n    const timeSlots = useMemo(() => {\n        return TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime);\n    }, [minTime, maxTime]);\n\n    const slotLayoutMap = useMemo(() => {\n        return calculateSlotWidths(serviceData, weekDays, timeSlots);\n    }, [serviceData, weekDays, timeSlots]);\n\n    const today = dayjs();\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const generateStyleProps = (day: dayjs.Dayjs): CellStyleProps => {\n        const isToday = day.isSame(today, \"day\");\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: isToday ? \"current\" : \"available\",\n            interactive: null,\n        };\n\n        if (isToday) {\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderHeader = () => {\n        return (\n            <HeaderContainer>\n                <BlankCell />\n                <ServiceContainer>\n                    {weekDays.map((day) => {\n                        const dayCellStyleProps = generateStyleProps(day);\n                        return (\n                            <ServiceHeader key={day.format(\"YYYY-MM-DD\")}>\n                                <DayCell\n                                    date={day}\n                                    calendarDate={dayjs(date)}\n                                    {...dayCellStyleProps}\n                                />\n                                <Description>{day.format(\"ddd\")}</Description>\n                            </ServiceHeader>\n                        );\n                    })}\n                </ServiceContainer>\n            </HeaderContainer>\n        );\n    };\n\n    const renderSlotGrid = () => (\n        <SlotGrid>\n            {weekDays.map((day) => {\n                const dayDate = day.format(\"YYYY-MM-DD\");\n                return (\n                    <SlotColumn key={dayDate}>\n                        {timelineOffset !== null &&\n                            day.isSame(today, \"day\") && (\n                                <Timeline $top={timelineOffset} />\n                            )}\n                        {timeSlots.map((time) => (\n                            <TimeCell\n                                key={time}\n                                dayDate={dayDate}\n                                time={time}\n                                serviceData={serviceData}\n                                slotLayoutMap={slotLayoutMap}\n                                containerRef={containerRef}\n                                blockedMessage={blockedMessage}\n                                onClickHiddenSlots={onClickHiddenSlots}\n                            />\n                        ))}\n                    </SlotColumn>\n                );\n            })}\n        </SlotGrid>\n    );\n\n    const renderBodyContainer = () => (\n        <BodyContainer ref={bodyRef}>\n            <TimeIndicator\n                minTime={minTime}\n                maxTime={maxTime}\n                format=\"24hr\"\n                timelineOffset={timelineOffset}\n                isWeekView={true}\n            />\n            {renderSlotGrid()}\n        </BodyContainer>\n    );\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {renderHeader()}\n                    {renderBodyContainer()}\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["date","serviceData","loading","minTime","maxTime","initialScrollTime","containerRef","blockedMessage","onClickHiddenSlots","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","weekDays","useMemo","startOfWeek","dayjs","startOf","Array","from","length","_","i","add","timeSlots","TimeHelper","generateTimings","slotLayoutMap","calculateSlotWidths","today","_jsx","ScheduleContainer","children","LoadingContainer","ThemedLoadingSpinner","_jsxs","HeaderContainer","BlankCell","ServiceContainer","map","day","dayCellStyleProps","isToday","isSame","labelType","interactive","circleLeft","circleRight","generateStyleProps","ServiceHeader","DayCell","calendarDate","Description","format","BodyContainer","ref","TimeIndicator","isWeekView","SlotGrid","dayDate","SlotColumn","Timeline","$top","time","TimeCell"],"mappings":"2jBA8BgC,EAC5BA,OACAC,cACAC,UACAC,UACAC,UACAC,oBACAC,eACAC,iBACAC,yBAKA,MAAMC,EAAiBC,EAAAA,kBAAkBP,EAASC,GAC5CO,EAAUC,EAAAA,iBAAiBV,EAASC,EAASE,GAE7CQ,EAAWC,EAAAA,SAAQ,KACrB,MAAMC,EAAcC,EAAAA,QAAMhB,GAAMiB,QAAQ,QACxC,OAAOC,MAAMC,KAAK,CAAEC,OAAQ,IAAK,CAACC,EAAGC,IAAMP,EAAYQ,IAAID,EAAG,QAAO,GACtE,CAACtB,IAEEwB,EAAYV,EAAAA,SAAQ,IACfW,EAAAA,WAAWC,gBAAgB,GAAI,OAAQvB,EAASC,IACxD,CAACD,EAASC,IAEPuB,EAAgBb,EAAAA,SAAQ,IACnBc,sBAAoB3B,EAAaY,EAAUW,IACnD,CAACvB,EAAaY,EAAUW,IAErBK,EAAQb,EAAAA,UAwFd,OACIc,MAACC,EAAAA,kBAAiB,CAAAC,SACb9B,EACG4B,MAACG,EAAAA,iBAAgB,CAAAD,SACbF,EAAAA,IAACI,uBAAoB,CAAA,KAGzBC,EAAAA,2BArEJA,EAAAA,KAACC,EAAAA,2BACGN,EAAAA,IAACO,EAAAA,cACDP,EAAAA,IAACQ,EAAAA,iBAAgB,CAAAN,SACZnB,EAAS0B,KAAKC,IACX,MAAMC,EAzBC,CAACD,IACxB,MAAME,EAAUF,EAAIG,OAAOd,EAAO,OAE5BY,EAAoC,CACtCG,UAAWF,EAAU,UAAY,YACjCG,YAAa,MAQjB,OALIH,IACAD,EAAkBK,WAAa,mBAC/BL,EAAkBM,YAAc,oBAG7BN,CAAiB,EAYkBO,CAAmBR,GAC7C,OACIL,EAAAA,KAACc,EAAAA,yBACGnB,EAAAA,IAACoB,EAAAA,uBACGlD,KAAMwC,EACNW,aAAcnC,EAAAA,QAAMhB,IAChByC,IAERX,EAAAA,IAACsB,EAAAA,YAAW,CAAApB,SAAEQ,EAAIa,OAAO,WANTb,EAAIa,OAAO,cAOf,SAqCpClB,OAACmB,EAAAA,cAAa,CAACC,IAAK5C,EAAOqB,SAAA,CACvBF,EAAAA,IAAC0B,EAAAA,cAAa,CACVrD,QAASA,EACTC,QAASA,EACTiD,OAAO,OACP5C,eAAgBA,EAChBgD,YAAY,IAlCpB3B,EAAAA,IAAC4B,EAAAA,SAAQ,CAAA1B,SACJnB,EAAS0B,KAAKC,IACX,MAAMmB,EAAUnB,EAAIa,OAAO,cAC3B,OACIlB,EAAAA,KAACyB,EAAAA,WAAU,CAAA5B,SAAA,CACa,OAAnBvB,GACG+B,EAAIG,OAAOd,EAAO,QACdC,EAAAA,IAAC+B,EAAAA,SAAQ,CAAAC,KAAOrD,IAEvBe,EAAUe,KAAKwB,GACZjC,EAAAA,IAACkC,EAAAA,SAAQ,CAELL,QAASA,EACTI,KAAMA,EACN9D,YAAaA,EACb0B,cAAeA,EACfrB,aAAcA,EACdC,eAAgBA,EAChBC,mBAAoBA,GAPfuD,OAPAJ,EAiBJ,aA+BL"}
+{"version":3,"file":"schedule-week-view.js","sources":["../../../../src/schedule/schedule-week-view/schedule-week-view.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { useMemo } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport type { CellStyleProps } from \"../../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../../shared/internal-calendar/day-cell\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ScheduleContainer } from \"../schedule-day-view/schedule-day-view.styles\";\nimport { useInitialScroll, useTimelineOffset } from \"../shared\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport {\n    BlankCell,\n    BodyContainer,\n    Description,\n    HeaderContainer,\n    LoadingContainer,\n    ServiceContainer,\n    ServiceHeader,\n    SlotColumn,\n    SlotGrid,\n    Timeline,\n} from \"./schedule-week-view.styles\";\nimport { TimeCell } from \"./time-cell\";\nimport type { ScheduleWeekViewProps } from \"./types\";\nimport { calculateSlotWidths } from \"./week-view-utils\";\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport const ScheduleWeekView = ({\n    date,\n    serviceData,\n    loading,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    blockedMessage,\n    onClickHiddenSlots,\n}: ScheduleWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n\n    const weekDays = useMemo(() => {\n        const startOfWeek = dayjs(date).startOf(\"week\");\n        return Array.from({ length: 7 }, (_, i) => startOfWeek.add(i, \"day\"));\n    }, [date]);\n\n    const timeSlots = useMemo(() => {\n        return TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime);\n    }, [minTime, maxTime]);\n\n    const slotLayoutMap = useMemo(() => {\n        return calculateSlotWidths(serviceData, weekDays, timeSlots);\n    }, [serviceData, weekDays, timeSlots]);\n\n    const today = dayjs();\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const generateStyleProps = (day: dayjs.Dayjs): CellStyleProps => {\n        const isToday = day.isSame(today, \"day\");\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: isToday ? \"current\" : \"available\",\n            interactive: undefined,\n        };\n\n        if (isToday) {\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderHeader = () => {\n        return (\n            <HeaderContainer>\n                <BlankCell />\n                <ServiceContainer>\n                    {weekDays.map((day) => {\n                        const dayCellStyleProps = generateStyleProps(day);\n                        return (\n                            <ServiceHeader key={day.format(\"YYYY-MM-DD\")}>\n                                <DayCell\n                                    date={day}\n                                    calendarDate={dayjs(date)}\n                                    {...dayCellStyleProps}\n                                />\n                                <Description>{day.format(\"ddd\")}</Description>\n                            </ServiceHeader>\n                        );\n                    })}\n                </ServiceContainer>\n            </HeaderContainer>\n        );\n    };\n\n    const renderSlotGrid = () => (\n        <SlotGrid>\n            {weekDays.map((day) => {\n                const dayDate = day.format(\"YYYY-MM-DD\");\n                return (\n                    <SlotColumn key={dayDate}>\n                        {timelineOffset !== null &&\n                            day.isSame(today, \"day\") && (\n                                <Timeline $top={timelineOffset} />\n                            )}\n                        {timeSlots.map((time) => (\n                            <TimeCell\n                                key={time}\n                                dayDate={dayDate}\n                                time={time}\n                                serviceData={serviceData}\n                                slotLayoutMap={slotLayoutMap}\n                                containerRef={containerRef}\n                                blockedMessage={blockedMessage}\n                                onClickHiddenSlots={onClickHiddenSlots}\n                            />\n                        ))}\n                    </SlotColumn>\n                );\n            })}\n        </SlotGrid>\n    );\n\n    const renderBodyContainer = () => (\n        <BodyContainer ref={bodyRef}>\n            <TimeIndicator\n                minTime={minTime}\n                maxTime={maxTime}\n                format=\"24hr\"\n                timelineOffset={timelineOffset}\n                isWeekView={true}\n            />\n            {renderSlotGrid()}\n        </BodyContainer>\n    );\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {renderHeader()}\n                    {renderBodyContainer()}\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["date","serviceData","loading","minTime","maxTime","initialScrollTime","containerRef","blockedMessage","onClickHiddenSlots","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","weekDays","useMemo","startOfWeek","dayjs","startOf","Array","from","length","_","i","add","timeSlots","TimeHelper","generateTimings","slotLayoutMap","calculateSlotWidths","today","_jsx","ScheduleContainer","children","LoadingContainer","ThemedLoadingSpinner","_jsxs","HeaderContainer","BlankCell","ServiceContainer","map","day","dayCellStyleProps","isToday","isSame","labelType","interactive","undefined","circleLeft","circleRight","generateStyleProps","ServiceHeader","DayCell","calendarDate","Description","format","BodyContainer","ref","TimeIndicator","isWeekView","SlotGrid","dayDate","SlotColumn","Timeline","$top","time","TimeCell"],"mappings":"2jBA8BgC,EAC5BA,OACAC,cACAC,UACAC,UACAC,UACAC,oBACAC,eACAC,iBACAC,yBAKA,MAAMC,EAAiBC,EAAAA,kBAAkBP,EAASC,GAC5CO,EAAUC,EAAAA,iBAAiBV,EAASC,EAASE,GAE7CQ,EAAWC,EAAAA,SAAQ,KACrB,MAAMC,EAAcC,EAAAA,QAAMhB,GAAMiB,QAAQ,QACxC,OAAOC,MAAMC,KAAK,CAAEC,OAAQ,IAAK,CAACC,EAAGC,IAAMP,EAAYQ,IAAID,EAAG,QAAO,GACtE,CAACtB,IAEEwB,EAAYV,EAAAA,SAAQ,IACfW,EAAAA,WAAWC,gBAAgB,GAAI,OAAQvB,EAASC,IACxD,CAACD,EAASC,IAEPuB,EAAgBb,EAAAA,SAAQ,IACnBc,sBAAoB3B,EAAaY,EAAUW,IACnD,CAACvB,EAAaY,EAAUW,IAErBK,EAAQb,EAAAA,UAwFd,OACIc,MAACC,EAAAA,kBAAiB,CAAAC,SACb9B,EACG4B,MAACG,EAAAA,iBAAgB,CAAAD,SACbF,EAAAA,IAACI,uBAAoB,CAAA,KAGzBC,EAAAA,2BArEJA,EAAAA,KAACC,EAAAA,2BACGN,EAAAA,IAACO,EAAAA,cACDP,EAAAA,IAACQ,EAAAA,iBAAgB,CAAAN,SACZnB,EAAS0B,KAAKC,IACX,MAAMC,EAzBC,CAACD,IACxB,MAAME,EAAUF,EAAIG,OAAOd,EAAO,OAE5BY,EAAoC,CACtCG,UAAWF,EAAU,UAAY,YACjCG,iBAAaC,GAQjB,OALIJ,IACAD,EAAkBM,WAAa,mBAC/BN,EAAkBO,YAAc,oBAG7BP,CAAiB,EAYkBQ,CAAmBT,GAC7C,OACIL,EAAAA,KAACe,EAAAA,yBACGpB,EAAAA,IAACqB,EAAAA,uBACGnD,KAAMwC,EACNY,aAAcpC,EAAAA,QAAMhB,IAChByC,IAERX,EAAAA,IAACuB,EAAAA,YAAW,CAAArB,SAAEQ,EAAIc,OAAO,WANTd,EAAIc,OAAO,cAOf,SAqCpCnB,OAACoB,EAAAA,cAAa,CAACC,IAAK7C,EAAOqB,SAAA,CACvBF,EAAAA,IAAC2B,EAAAA,cAAa,CACVtD,QAASA,EACTC,QAASA,EACTkD,OAAO,OACP7C,eAAgBA,EAChBiD,YAAY,IAlCpB5B,EAAAA,IAAC6B,EAAAA,SAAQ,CAAA3B,SACJnB,EAAS0B,KAAKC,IACX,MAAMoB,EAAUpB,EAAIc,OAAO,cAC3B,OACInB,EAAAA,KAAC0B,EAAAA,WAAU,CAAA7B,SAAA,CACa,OAAnBvB,GACG+B,EAAIG,OAAOd,EAAO,QACdC,EAAAA,IAACgC,EAAAA,SAAQ,CAAAC,KAAOtD,IAEvBe,EAAUe,KAAKyB,GACZlC,EAAAA,IAACmC,EAAAA,SAAQ,CAELL,QAASA,EACTI,KAAMA,EACN/D,YAAaA,EACb0B,cAAeA,EACfrB,aAAcA,EACdC,eAAgBA,EAChBC,mBAAoBA,GAPfwD,OAPAJ,EAiBJ,aA+BL"}

package/cjs/schedule/schedule-week-view/slot-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"slot-content.js","sources":["../../../../src/schedule/schedule-week-view/slot-content.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    SlotAvailability,\n    SlotContentContainer,\n    SlotServiceName,\n} from \"./slot-content.styles\";\nimport type { PositionedSlot } from \"./types\";\n\ninterface SlotContentProps {\n    positionedSlot: PositionedSlot;\n    blockedMessage?: string;\n}\n\nexport const SlotContent: React.FC<SlotContentProps> = ({\n    positionedSlot,\n    blockedMessage = \"Unavailable\",\n}) => {\n    const { slot, offsetTop } = positionedSlot;\n    const duration = TimeHelper.calculateDuration(slot.startTime, slot.endTime);\n\n    return (\n        <SlotContentContainer\n            $status={slot.status}\n            $duration={duration}\n            $offsetTop={offsetTop}\n            onClick={(e) => slot.onClick && slot.onClick(slot, e)}\n        >\n            <SlotServiceName>{slot.serviceName}</SlotServiceName>\n            {duration >= 30 && (\n                <SlotAvailability>\n                    {slot.status === \"blocked\"\n                        ? blockedMessage\n                        : `${slot.booked} / ${slot.capacity}`}\n                </SlotAvailability>\n            )}\n        </SlotContentContainer>\n    );\n};\n"],"names":["positionedSlot","blockedMessage","slot","offsetTop","duration","TimeHelper","calculateDuration","startTime","endTime","_jsxs","SlotContentContainer","$status","status","$duration","$offsetTop","onClick","e","children","_jsx","SlotServiceName","serviceName","SlotAvailability","booked","capacity"],"mappings":"iJAeuD,EACnDA,iBACAC,iBAAiB,kBAEjB,MAAMC,KAAEA,EAAIC,UAAEA,GAAcH,EACtBI,EAAWC,EAAAA,WAAWC,kBAAkBJ,EAAKK,UAAWL,EAAKM,SAEnE,OACIC,EAAAA,KAACC,EAAAA,qBAAoB,CAAAC,QACRT,EAAKU,OAAMC,UACTT,EAAQU,WACPX,EACZY,QAAUC,GAAMd,EAAKa,SAAWb,EAAKa,QAAQb,EAAMc,GAAEC,SAAA,CAErDC,EAAAA,IAACC,EAAAA,gBAAe,CAAAF,SAAEf,EAAKkB,cACtBhB,GAAY,IACTc,MAACG,EAAAA,2BACoB,YAAhBnB,EAAKU,OACAX,EACA,GAAGC,EAAKoB,YAAYpB,EAAKqB,eAGpB"}
+{"version":3,"file":"slot-content.js","sources":["../../../../src/schedule/schedule-week-view/slot-content.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    SlotAvailability,\n    SlotContentContainer,\n    SlotServiceName,\n} from \"./slot-content.styles\";\nimport type { PositionedSlot } from \"./types\";\n\ninterface SlotContentProps {\n    positionedSlot: PositionedSlot;\n    blockedMessage?: string;\n}\n\nexport const SlotContent: React.FC<SlotContentProps> = ({\n    positionedSlot,\n    blockedMessage = \"Unavailable\",\n}) => {\n    const { slot, offsetTop } = positionedSlot;\n    const duration = TimeHelper.calculateDuration(slot.startTime, slot.endTime);\n\n    return (\n        <SlotContentContainer\n            $status={slot.status}\n            $duration={duration}\n            $offsetTop={offsetTop}\n            onClick={(e: React.MouseEvent) =>\n                slot.onClick && slot.onClick(slot, e)\n            }\n        >\n            <SlotServiceName>{slot.serviceName}</SlotServiceName>\n            {duration >= 30 && (\n                <SlotAvailability>\n                    {slot.status === \"blocked\"\n                        ? blockedMessage\n                        : `${slot.booked} / ${slot.capacity}`}\n                </SlotAvailability>\n            )}\n        </SlotContentContainer>\n    );\n};\n"],"names":["positionedSlot","blockedMessage","slot","offsetTop","duration","TimeHelper","calculateDuration","startTime","endTime","_jsxs","SlotContentContainer","$status","status","$duration","$offsetTop","onClick","e","children","_jsx","SlotServiceName","serviceName","SlotAvailability","booked","capacity"],"mappings":"iJAeuD,EACnDA,iBACAC,iBAAiB,kBAEjB,MAAMC,KAAEA,EAAIC,UAAEA,GAAcH,EACtBI,EAAWC,EAAAA,WAAWC,kBAAkBJ,EAAKK,UAAWL,EAAKM,SAEnE,OACIC,EAAAA,KAACC,EAAAA,qBAAoB,CAAAC,QACRT,EAAKU,OAAMC,UACTT,EAAQU,WACPX,EACZY,QAAUC,GACNd,EAAKa,SAAWb,EAAKa,QAAQb,EAAMc,GAAEC,SAAA,CAGzCC,EAAAA,IAACC,EAAAA,gBAAe,CAAAF,SAAEf,EAAKkB,cACtBhB,GAAY,IACTc,MAACG,EAAAA,2BACoB,YAAhBnB,EAAKU,OACAX,EACA,GAAGC,EAAKoB,YAAYpB,EAAKqB,eAGpB"}

package/cjs/schedule/shared/with-optional-popover.js

@@ -1,6 +1,6 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("styled-components");require("../../_virtual/_tslib.js"),require("react"),require("../../modal-v2/index.js"),require("../../typography/typography.js"),require("../../v3_theme/index.js"),require("../../popover-v2/popover.styles.js");var o=require("../../popover-v2/popover-trigger.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../popover-v2/popover-inline/popover-inline.styles.js");const i=t(r).default(o.PopoverTrigger)`
+"use strict";var e=require("react/jsx-runtime"),r=require("styled-components");require("../../_virtual/_tslib.js"),require("clsx"),require("react"),require("../../theme/theme-provider/context.js"),require("../../typography/typography.js"),require("../../card/card.styles_1gh9gs3.css"),require("../../markup/markup.js"),require("../../modal-v2/index.js"),require("../../theme/theme-provider/index.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer"),require("../../popover-v2/popover.styles_lslc72.css");var t=require("../../popover-v2/popover-trigger.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../popover-v2/popover-inline/popover-inline.styles_ziag9c.css");const o=i(r).default(t.PopoverTrigger)`
     width: 100%;
     display: flex;
     flex-direction: column;
-`;exports.WithOptionalPopover=({containerRef:r,children:o,customPopover:t})=>{if(!t)return o;const n={position:"bottom-start",rootNode:r,customOffset:t.offset,children:o,trigger:t.trigger,delay:t.delay,popoverContent:t.content};return e.jsx(i,Object.assign({zIndex:2},n))};
+`;exports.WithOptionalPopover=({containerRef:r,children:t,customPopover:i})=>{if(!i)return t;const s={position:"bottom-start",rootNode:r,customOffset:i.offset,children:t,trigger:i.trigger,delay:i.delay,popoverContent:i.content};return e.jsx(o,Object.assign({zIndex:2},s))};
 //# sourceMappingURL=with-optional-popover.js.map

package/cjs/schedule/shared/with-optional-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-optional-popover.js","sources":["../../../../src/schedule/shared/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport styled from \"styled-components\";\n\nimport type { PopoverV2TriggerProps } from \"../../popover-v2\";\nimport { PopoverTrigger } from \"../../popover-v2\";\nimport type { SchedulePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: SchedulePopoverProps | undefined;\n}\n\nconst StyledPopoverTrigger = styled(PopoverTrigger)`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\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 <StyledPopoverTrigger zIndex={2} {...popoverTriggerProps} />;\n};\n"],"names":["StyledPopoverTrigger","styled","PopoverTrigger","containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","Object","assign","zIndex"],"mappings":"meAaA,MAAMA,OAAuBC,QAAOC,EAAAA,eAAe;;;;8BAMhB,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,EAAAA,IAACf,EAAoBgB,OAAAC,OAAA,CAACC,OAAQ,GAAOZ,GAAuB"}
+{"version":3,"file":"with-optional-popover.js","sources":["../../../../src/schedule/shared/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport styled from \"styled-components\";\n\nimport type { PopoverV2TriggerProps } from \"../../popover-v2\";\nimport { PopoverTrigger } from \"../../popover-v2\";\nimport type { SchedulePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: SchedulePopoverProps | undefined;\n}\n\nconst StyledPopoverTrigger = styled(PopoverTrigger)`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\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 <StyledPopoverTrigger zIndex={2} {...popoverTriggerProps} />;\n};\n"],"names":["StyledPopoverTrigger","styled","PopoverTrigger","containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","Object","assign","zIndex"],"mappings":"oiCAaA,MAAMA,OAAuBC,QAAOC,EAAAA,eAAe;;;;8BAMhB,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,EAAAA,IAACf,EAAoBgB,OAAAC,OAAA,CAACC,OAAQ,GAAOZ,GAAuB"}