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

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/lodash/debounce.js"),s=require("react"),i=require("../input/input.js"),a=require("../shared/accessibility/index.js");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var o=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css");var l=require("../shared/dropdown-list/dropdown-list.js"),n=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js"),u=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1qveyb9.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");exports.PredictiveTextInput=c=>{var{className:p,"data-testid":h,selectedOption:m,minimumCharacters:q=3,fetchOptions:f,placeholder:x="Enter here...",readOnly:g=!1,disabled:j=!1,error:w,valueExtractor:v,listExtractor:y,displayValueExtractor:b,onSelectOption:_,alignment:S,dropdownZIndex:T,dropdownRootNode:E,dropdownWidth:I,"aria-describedby":C}=c,O=e.__rest(c,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const k=e=>e?b?b(e):e.toString():"",[A,D]=s.useState((()=>m?k(m):"")),[H,N]=s.useState((()=>m?k(m):"")),[P,R]=s.useState([]),[G,L]=s.useState(!0),[M,W]=s.useState(!1),[B,V]=s.useState(!!m),[F,Z]=s.useState(m),[$,z]=s.useState(!1),[J,K]=s.useState(!1),Q=o.useId(),[U,X]=s.useState(null),Y=`${Q}-instruction`,ee=s.useRef(null),re=s.useRef(null),te=s.useRef(f),se=s.useCallback((r=>e.__awaiter(void 0,void 0,void 0,(function*(){if(te.current){W(!1),L(!0);try{const e=yield te.current(r);N(r),R(null!=e?e:[]),L(!1)}catch(e){W(!0),L(!1)}}}))),[]),ie=s.useCallback(t.default((e=>{se(e)}),500),[se]);s.useEffect((()=>{te.current=f}),[f]),s.useEffect((()=>{A&&A.length>=q?B?A!==H&&ie(A):(z(!0),ie(A)):ie.cancel(),""===A&&F&&(null==_||_(void 0,void 0),pe(),Z(void 0)),m&&A!==k(m)&&V(!1)}),[A,m]),s.useEffect((()=>{D(m?k(m):""),N(m?k(m):""),Z(m),R([]),V(!!m)}),[m]),s.useEffect((()=>{var e;const r=he(),t=null!==(e=null==P?void 0:P.length)&&void 0!==e?e:0;"loading"===r&&A.length>=q?X("Loading suggested results"):"fail"!==r?!$||G||M||X(0===t?A?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):X("Suggestions failed to load. Try again.")}),[P,A,M,G]),s.useEffect((()=>()=>{ie.cancel()}),[ie]);const ae=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),D(k(e)),N(e?k(e):""),V(!0),Z(e),z(!1),null==_||_(e,r)},oe=()=>{K(!0)},le=e=>{$||!ee.current||ee.current.contains(e.relatedTarget)||(K(!1),ue())},ne=()=>{z(!1),K(!1)},de=()=>{D(""),R([]),V(!1),z(!1),null==_||_(void 0,void 0)},ue=()=>{if(!B)if(F){const e=k(F);D(e),z(!1)}else de()},ce=e=>{D(e.target.value),V(!1)},pe=e=>{N(""),V(!1),R([]),L(!0)},he=()=>M?"fail":G?"loading":"success";return r.jsx(n.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!g&&!j,isOpen:$,renderElement:()=>r.jsxs(u.InputWrapper,{className:p,"data-testid":h,ref:ee,tabIndex:-1,onFocus:oe,onBlur:le,focused:J,disabled:j,readOnly:g,error:w,children:[r.jsxs(a.VisuallyHidden,{id:Y,"aria-hidden":!0,children:["Type in ",q," or more characters for suggested results."]}),U&&r.jsx(a.VisuallyHidden,{"aria-live":"polite",children:U}),r.jsx(i.Input,Object.assign({role:"combobox",ref:re,id:Q,type:"text",value:A,onChange:ce,placeholder:x,readOnly:g,disabled:j,allowClear:!0,onClear:de,"aria-expanded":$,"aria-controls":Q,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:A.length<q?ue:void 0,styleType:"no-border","aria-describedby":a.concatIds(C,Y)},O))]}),renderDropdown:()=>r.jsx(r.Fragment,{children:r.jsx(l.DropdownList,{listboxId:Q,listItems:P,onSelectItem:ae,onDismiss:ne,valueExtractor:v,listExtractor:y,itemsLoadState:he(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>se(A),width:I,matchElementWidth:!0})}),onOpen:()=>{!B&&A.length>=q&&K(!0)},onClose:()=>{z(!1),K(!1),ue()},onDismiss:()=>{var e;z(!1),K(!1),ue(),null===(e=re.current)||void 0===e||e.focus()},clickToToggle:!1,offset:8,alignment:S,fitAvailableHeight:!0,customZIndex:T,rootNode:E})})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/lodash/debounce.js"),s=require("react"),i=require("../input/input.js"),a=require("../shared/accessibility/index.js");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var o=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css");var l=require("../shared/dropdown-list/dropdown-list.js"),n=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js"),u=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");exports.PredictiveTextInput=c=>{var{className:p,"data-testid":h,selectedOption:m,minimumCharacters:q=3,fetchOptions:f,placeholder:x="Enter here...",readOnly:g=!1,disabled:j=!1,error:w,valueExtractor:v,listExtractor:y,displayValueExtractor:b,onSelectOption:_,alignment:S,dropdownZIndex:T,dropdownRootNode:E,dropdownWidth:I,"aria-describedby":k}=c,C=e.__rest(c,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const O=e=>e?b?b(e):e.toString():"",[A,D]=s.useState((()=>m?O(m):"")),[H,N]=s.useState((()=>m?O(m):"")),[P,R]=s.useState([]),[G,L]=s.useState(!0),[M,W]=s.useState(!1),[B,V]=s.useState(!!m),[F,Z]=s.useState(m),[$,z]=s.useState(!1),[J,K]=s.useState(!1),Q=o.useId(),[U,X]=s.useState(null),Y=`${Q}-instruction`,ee=s.useRef(null),re=s.useRef(null),te=s.useRef(f),se=s.useCallback((r=>e.__awaiter(void 0,void 0,void 0,(function*(){if(te.current){W(!1),L(!0);try{const e=yield te.current(r);N(r),R(null!=e?e:[]),L(!1)}catch(e){W(!0),L(!1)}}}))),[]),ie=s.useCallback(t.default((e=>{se(e)}),500),[se]);s.useEffect((()=>{te.current=f}),[f]),s.useEffect((()=>{A&&A.length>=q?B?A!==H&&ie(A):(z(!0),ie(A)):ie.cancel(),""===A&&F&&(null==_||_(void 0,void 0),pe(),Z(void 0)),m&&A!==O(m)&&V(!1)}),[A,m]),s.useEffect((()=>{D(m?O(m):""),N(m?O(m):""),Z(m),R([]),V(!!m)}),[m]),s.useEffect((()=>{var e;const r=he(),t=null!==(e=null==P?void 0:P.length)&&void 0!==e?e:0;"loading"===r&&A.length>=q?X("Loading suggested results"):"fail"!==r?!$||G||M||X(0===t?A?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):X("Suggestions failed to load. Try again.")}),[P,A,M,G]),s.useEffect((()=>()=>{ie.cancel()}),[ie]);const ae=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),D(O(e)),N(e?O(e):""),V(!0),Z(e),z(!1),null==_||_(e,r)},oe=()=>{K(!0)},le=e=>{$||!ee.current||ee.current.contains(e.relatedTarget)||(K(!1),ue())},ne=()=>{z(!1),K(!1)},de=()=>{D(""),R([]),V(!1),z(!1),null==_||_(void 0,void 0)},ue=()=>{if(!B)if(F){const e=O(F);D(e),z(!1)}else de()},ce=e=>{D(e.target.value),V(!1)},pe=e=>{N(""),V(!1),R([]),L(!0)},he=()=>M?"fail":G?"loading":"success";return r.jsx(n.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!g&&!j,isOpen:$,renderElement:()=>r.jsxs(u.InputWrapper,{className:p,"data-testid":h,ref:ee,tabIndex:-1,onFocus:oe,onBlur:le,focused:J,disabled:j,readOnly:g,error:w,children:[r.jsxs(a.VisuallyHidden,{id:Y,"aria-hidden":!0,children:["Type in ",q," or more characters for suggested results."]}),U&&r.jsx(a.VisuallyHidden,{"aria-live":"polite",children:U}),r.jsx(i.Input,Object.assign({role:"combobox",ref:re,id:Q,type:"text",value:A,onChange:ce,placeholder:x,readOnly:g,disabled:j,allowClear:!0,onClear:de,"aria-expanded":$,"aria-controls":Q,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:A.length<q?ue:void 0,styleType:"no-border","aria-describedby":a.concatIds(k,Y)},C))]}),renderDropdown:()=>r.jsx(r.Fragment,{children:r.jsx(l.DropdownList,{listboxId:Q,listItems:P,onSelectItem:ae,onDismiss:ne,valueExtractor:v,listExtractor:y,itemsLoadState:he(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>se(A),width:I,matchElementWidth:!0})}),onOpen:()=>{!B&&A.length>=q&&K(!0)},onClose:()=>{z(!1),K(!1),ue()},onDismiss:()=>{var e;z(!1),K(!1),ue(),null===(e=re.current)||void 0===e||e.focus()},clickToToggle:!1,offset:8,alignment:S,fitAvailableHeight:!0,customZIndex:T,rootNode:E})})};
 //# sourceMappingURL=predictive-text-input.js.map

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 { 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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"}
+{"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/progress-indicator/progress-indicator.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/lodash/kebabCase.js"),i=require("react"),s=require("../external/react-responsive/dist/react-responsive.js"),n=require("styled-components"),a=require("../shared/accessibility/index.js"),d=require("../v3_theme/index.js"),l=require("./progress-indicator.style.js");exports.ProgressIndicator=o=>{var{steps:c,currentIndex:u,displayExtractor:h,fadeColor:x,fadePosition:p}=o,j=e.__rest(o,["steps","currentIndex","displayExtractor","fadeColor","fadePosition"]);const g=i.useContext(n.ThemeContext),m=d.V3_Breakpoint["lg-max"]({theme:g}),v=s.reactResponsiveExports.useMediaQuery({maxWidth:m}),I=e=>{var r;return h?h(e):null!==(r=null==e?void 0:e.toString())&&void 0!==r?r:""},b=(e,r)=>e<r?"Completed step":e===r?"Current step":"Upcoming step",q=(e,r)=>t.default(`${b(e,r)} ${e}`);if(!c.length)return null;return r.jsxs(l.Wrapper,Object.assign({},j,{children:[r.jsx(l.Content,{children:c.map(((e,t)=>{const i=t<=u;return r.jsx(l.Indicator,{id:q(t,u),children:r.jsx(l.IndicatorBar,{$highlighted:i})},t)}))}),r.jsx(l.Content,{children:v?r.jsxs(l.Indicator,{id:q(u,u),children:[r.jsxs(l.IndicatorTitleTablet,{weight:"semibold",id:`${q(u,u)}-counter`,children:["Step ",u+1," of ",c.length]}),r.jsx(l.IndicatorTitleTablet,{weight:"regular",id:`${q(u,u)}-title`,children:I(c[u])})]},u):c.map(((e,t)=>{const i=t<=u,s=t===u,n=s?"bold":"regular";return r.jsx(l.Indicator,{id:`${q(t,u)}-title`,children:r.jsxs(l.IndicatorTitleDesktop,{$highlighted:i,weight:n,"aria-current":s,children:[I(e),r.jsx(a.VisuallyHidden,{children:b(t,u)})]})},t)}))})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),t=require("../external/lodash/kebabCase.js"),s=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("../theme/utils/use-media-query.js"),l=require("../typography/index.js"),n=require("./progress-indicator.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(i);exports.ProgressIndicator=i=>{var{steps:d,currentIndex:u,displayExtractor:o,className:h}=i,j=e.__rest(i,["steps","currentIndex","displayExtractor","className"]);const p=a.useMaxWidthMediaQuery("lg"),m=e=>{var r;return o?o(e):null!==(r=null==e?void 0:e.toString())&&void 0!==r?r:""},x=(e,r)=>e<r?"Completed step":e===r?"Current step":"Upcoming step",g=(e,r)=>t.default(`${x(e,r)} ${e}`);if(!d.length)return null;return r.jsxs("div",Object.assign({className:c.default(n.wrapper,h)},j,{children:[r.jsx("div",{className:n.content,children:d.map(((e,i)=>{const t=i<=u;return r.jsx("div",{id:g(i,u),className:n.indicator,children:r.jsx("div",{className:c.default(n.indicatorBar,t&&n.indicatorBarHighlighted)})},i)}))}),r.jsx("div",{className:n.content,children:p?r.jsxs("div",{id:g(u,u),className:n.indicator,children:[r.jsxs(l.Typography.BodyMD,{className:n.indicatorTitleTablet,weight:"semibold",id:`${g(u,u)}-counter`,children:["Step ",u+1," of ",d.length]}),r.jsx(l.Typography.BodyMD,{className:n.indicatorTitleTablet,weight:"regular",id:`${g(u,u)}-title`,children:m(d[u])})]},u):d.map(((e,i)=>{const t=i<=u,a=i===u,d=a?"bold":"regular";return r.jsx("div",{id:`${g(i,u)}-title`,className:n.indicator,children:r.jsxs(l.Typography.BodyMD,{className:c.default(n.indicatorTitleDesktop,t&&n.indicatorTitleDesktopHighlighted),weight:d,"aria-current":a,children:[m(e),r.jsx(s.VisuallyHidden,{children:x(i,u)})]})},i)}))})]}))};
 //# sourceMappingURL=progress-indicator.js.map

package/cjs/progress-indicator/progress-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicator.js","sources":["../../../src/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import kebabCase from \"lodash/kebabCase\";\nimport { useContext } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    Content,\n    Indicator,\n    IndicatorBar,\n    IndicatorTitleDesktop,\n    IndicatorTitleTablet,\n    Wrapper,\n} from \"./progress-indicator.style\";\nimport type { ProgressIndicatorProps } from \"./types\";\n\nexport const ProgressIndicator = <T,>({\n    steps,\n    currentIndex,\n    displayExtractor,\n    fadeColor: _fadeColor,\n    fadePosition: _fadePosition,\n    ...otherProps\n}: ProgressIndicatorProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n    const isTablet = useMediaQuery({\n        maxWidth: tabletBreakpoint,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = (item: T): string => {\n        if (displayExtractor) {\n            return displayExtractor(item);\n        }\n        return item?.toString() ?? \"\";\n    };\n\n    const getStepAriaLabel = (stepIndex: number, currentIndex: number) => {\n        if (stepIndex < currentIndex) {\n            return \"Completed step\";\n        } else if (stepIndex === currentIndex) {\n            return \"Current step\";\n        } else {\n            return \"Upcoming step\";\n        }\n    };\n\n    const getId = (stepIndex: number, currentIndex: number) => {\n        return kebabCase(\n            `${getStepAriaLabel(stepIndex, currentIndex)} ${stepIndex}`\n        );\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!steps.length) return null;\n\n    const renderBars = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            // previous and current index elements are highlighted\n            const highlighted = stepIndex <= currentIndex;\n\n            return (\n                <Indicator key={stepIndex} id={getId(stepIndex, currentIndex)}>\n                    <IndicatorBar $highlighted={highlighted}></IndicatorBar>\n                </Indicator>\n            );\n        });\n    };\n\n    const renderStepTitleDesktop = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            const highlighted = stepIndex <= currentIndex;\n            const current = stepIndex === currentIndex;\n            const fontWeight = current ? \"bold\" : \"regular\";\n\n            return (\n                <Indicator\n                    key={stepIndex}\n                    id={`${getId(stepIndex, currentIndex)}-title`}\n                >\n                    <IndicatorTitleDesktop\n                        $highlighted={highlighted}\n                        weight={fontWeight}\n                        aria-current={current}\n                    >\n                        {getDisplayValue(step)}\n                        <VisuallyHidden>\n                            {getStepAriaLabel(stepIndex, currentIndex)}\n                        </VisuallyHidden>\n                    </IndicatorTitleDesktop>\n                </Indicator>\n            );\n        });\n    };\n\n    const renderStepTitleTablet = () => {\n        return (\n            <Indicator\n                key={currentIndex}\n                id={getId(currentIndex, currentIndex)}\n            >\n                <IndicatorTitleTablet\n                    weight={\"semibold\"}\n                    id={`${getId(currentIndex, currentIndex)}-counter`}\n                >\n                    Step {currentIndex + 1} of {steps.length}\n                </IndicatorTitleTablet>\n                <IndicatorTitleTablet\n                    weight={\"regular\"}\n                    id={`${getId(currentIndex, currentIndex)}-title`}\n                >\n                    {getDisplayValue(steps[currentIndex])}\n                </IndicatorTitleTablet>\n            </Indicator>\n        );\n    };\n\n    return (\n        <Wrapper {...otherProps}>\n            <Content>{renderBars()}</Content>\n            <Content>\n                {isTablet ? renderStepTitleTablet() : renderStepTitleDesktop()}\n            </Content>\n        </Wrapper>\n    );\n};\n"],"names":["_a","steps","currentIndex","displayExtractor","fadeColor","_fadeColor","fadePosition","_fadePosition","otherProps","__rest","theme","useContext","ThemeContext","tabletBreakpoint","V3_Breakpoint","isTablet","useMediaQuery","maxWidth","getDisplayValue","item","toString","getStepAriaLabel","stepIndex","getId","kebabCase","length","_jsxs","Wrapper","Object","assign","children","_jsx","Content","map","step","highlighted","Indicator","id","IndicatorBar","$highlighted","IndicatorTitleTablet","weight","current","fontWeight","IndicatorTitleDesktop","VisuallyHidden"],"mappings":"0YAiBsCA,IAAA,IAAAC,MAClCA,EAAKC,aACLA,EAAYC,iBACZA,EACAC,UAAWC,EACXC,aAAcC,GAAaP,EACxBQ,EAAUC,EAAAA,OAAAT,EANqB,wEAWlC,MAAMU,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUJ,IAcRK,EAAmBC,UACrB,OAAIhB,EACOA,EAAiBgB,GAEL,QAAhBnB,EAAAmB,aAAI,EAAJA,EAAMC,kBAAU,IAAApB,EAAAA,EAAI,EAAE,EAG3BqB,EAAmB,CAACC,EAAmBpB,IACrCoB,EAAYpB,EACL,iBACAoB,IAAcpB,EACd,eAEA,gBAITqB,EAAQ,CAACD,EAAmBpB,IACvBsB,EAAAA,QACH,GAAGH,EAAiBC,EAAWpB,MAAiBoB,KAOxD,IAAKrB,EAAMwB,OAAQ,OAAO,KA+D1B,OACIC,OAACC,EAAAA,QAAOC,OAAAC,OAAA,CAAA,EAAKrB,EAAU,CAAAsB,SAAA,CACnBC,MAACC,EAAAA,QAAO,CAAAF,SA9DL7B,EAAMgC,KAAI,CAACC,EAASZ,KAEvB,MAAMa,EAAcb,GAAapB,EAEjC,OACI6B,EAAAA,IAACK,EAAAA,UAAS,CAAiBC,GAAId,EAAMD,EAAWpB,GAAa4B,SACzDC,EAAAA,IAACO,EAAAA,aAAY,CAAAC,aAAeJ,KADhBb,EAEJ,MAwDhBS,EAAAA,IAACC,EAAAA,QAAO,CAAAF,SACHf,EAxBLW,OAACU,EAAAA,UAAS,CAENC,GAAId,EAAMrB,EAAcA,GAAa4B,SAAA,CAErCJ,EAAAA,KAACc,EAAAA,qBAAoB,CACjBC,OAAQ,WACRJ,GAAI,GAAGd,EAAMrB,EAAcA,aAAuB4B,SAAA,CAAA,QAE5C5B,EAAe,EAAC,OAAMD,EAAMwB,UAEtCM,EAAAA,IAACS,EAAAA,qBAAoB,CACjBC,OAAQ,UACRJ,GAAI,GAAGd,EAAMrB,EAAcA,WAAqB4B,SAE/CZ,EAAgBjB,EAAMC,QAbtBA,GA5BND,EAAMgC,KAAI,CAACC,EAASZ,KACvB,MAAMa,EAAcb,GAAapB,EAC3BwC,EAAUpB,IAAcpB,EACxByC,EAAaD,EAAU,OAAS,UAEtC,OACIX,EAAAA,IAACK,EAAAA,UAAS,CAENC,GAAI,GAAGd,EAAMD,EAAWpB,WAAqB4B,SAE7CJ,OAACkB,EAAAA,sBAAqB,CAAAL,aACJJ,EACdM,OAAQE,iBACMD,EAAOZ,SAAA,CAEpBZ,EAAgBgB,GACjBH,EAAAA,IAACc,iBAAc,CAAAf,SACVT,EAAiBC,EAAWpB,SAVhCoB,EAaG,SAiCV"}
+{"version":3,"file":"progress-indicator.js","sources":["../../../src/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport kebabCase from \"lodash/kebabCase\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./progress-indicator.styles\";\nimport type { ProgressIndicatorProps } from \"./types\";\n\nexport const ProgressIndicator = <T,>({\n    steps,\n    currentIndex,\n    displayExtractor,\n    className,\n    ...otherProps\n}: ProgressIndicatorProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = (item: T): string => {\n        if (displayExtractor) {\n            return displayExtractor(item);\n        }\n        return item?.toString() ?? \"\";\n    };\n\n    const getStepAriaLabel = (stepIndex: number, currentIndex: number) => {\n        if (stepIndex < currentIndex) {\n            return \"Completed step\";\n        } else if (stepIndex === currentIndex) {\n            return \"Current step\";\n        } else {\n            return \"Upcoming step\";\n        }\n    };\n\n    const getId = (stepIndex: number, currentIndex: number) => {\n        return kebabCase(\n            `${getStepAriaLabel(stepIndex, currentIndex)} ${stepIndex}`\n        );\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!steps.length) return null;\n\n    const renderBars = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            // previous and current index elements are highlighted\n            const highlighted = stepIndex <= currentIndex;\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={getId(stepIndex, currentIndex)}\n                    className={styles.indicator}\n                >\n                    <div\n                        className={clsx(\n                            styles.indicatorBar,\n                            highlighted && styles.indicatorBarHighlighted\n                        )}\n                    />\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleDesktop = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            const highlighted = stepIndex <= currentIndex;\n            const current = stepIndex === currentIndex;\n            const fontWeight = current ? \"bold\" : \"regular\";\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={`${getId(stepIndex, currentIndex)}-title`}\n                    className={styles.indicator}\n                >\n                    <Typography.BodyMD\n                        className={clsx(\n                            styles.indicatorTitleDesktop,\n                            highlighted &&\n                                styles.indicatorTitleDesktopHighlighted\n                        )}\n                        weight={fontWeight}\n                        aria-current={current}\n                    >\n                        {getDisplayValue(step)}\n                        <VisuallyHidden>\n                            {getStepAriaLabel(stepIndex, currentIndex)}\n                        </VisuallyHidden>\n                    </Typography.BodyMD>\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleTablet = () => {\n        return (\n            <div\n                key={currentIndex}\n                id={getId(currentIndex, currentIndex)}\n                className={styles.indicator}\n            >\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"semibold\"}\n                    id={`${getId(currentIndex, currentIndex)}-counter`}\n                >\n                    Step {currentIndex + 1} of {steps.length}\n                </Typography.BodyMD>\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"regular\"}\n                    id={`${getId(currentIndex, currentIndex)}-title`}\n                >\n                    {getDisplayValue(steps[currentIndex])}\n                </Typography.BodyMD>\n            </div>\n        );\n    };\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div className={styles.content}>{renderBars()}</div>\n            <div className={styles.content}>\n                {isTablet ? renderStepTitleTablet() : renderStepTitleDesktop()}\n            </div>\n        </div>\n    );\n};\n"],"names":["_a","steps","currentIndex","displayExtractor","className","otherProps","__rest","isTablet","useMaxWidthMediaQuery","getDisplayValue","item","toString","getStepAriaLabel","stepIndex","getId","kebabCase","length","_jsxs","clsx","styles.wrapper","children","_jsx","styles.content","map","step","highlighted","id","styles.indicator","styles.indicatorBar","styles.indicatorBarHighlighted","Typography","BodyMD","styles.indicatorTitleTablet","weight","current","fontWeight","styles.indicatorTitleDesktop","styles.indicatorTitleDesktopHighlighted","VisuallyHidden"],"mappings":"s3BASsCA,IAAA,IAAAC,MAClCA,EAAKC,aACLA,EAAYC,iBACZA,EAAgBC,UAChBA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALqB,CAAA,QAAA,eAAA,mBAAA,cAUlC,MAAMO,EAAWC,EAAAA,sBAAsB,MAajCC,EAAmBC,UACrB,OAAIP,EACOA,EAAiBO,GAEL,QAAhBV,EAAAU,aAAI,EAAJA,EAAMC,kBAAU,IAAAX,EAAAA,EAAI,EAAE,EAG3BY,EAAmB,CAACC,EAAmBX,IACrCW,EAAYX,EACL,iBACAW,IAAcX,EACd,eAEA,gBAITY,EAAQ,CAACD,EAAmBX,IACvBa,EAAAA,QACH,GAAGH,EAAiBC,EAAWX,MAAiBW,KAOxD,IAAKZ,EAAMe,OAAQ,OAAO,KAgF1B,OACIC,EAAAA,0BAAKb,UAAWc,UAAKC,EAAAA,QAAgBf,IAAgBC,EAAU,CAAAe,SAAA,CAC3DC,EAAAA,IAAA,MAAA,CAAKjB,UAAWkB,EAAAA,QAAcF,SA/E3BnB,EAAMsB,KAAI,CAACC,EAASX,KAEvB,MAAMY,EAAcZ,GAAaX,EAEjC,OACImB,EAAAA,IAAA,MAAA,CAEIK,GAAIZ,EAAMD,EAAWX,GACrBE,UAAWuB,YAAgBP,SAE3BC,EAAAA,IAAA,MAAA,CACIjB,UAAWc,UACPU,EAAAA,aACAH,GAAeI,8BAPlBhB,EAUH,MAgEVQ,EAAAA,WAAKjB,UAAWkB,EAAAA,QAAcF,SACzBb,EA3BLU,EAAAA,KAAA,MAAA,CAEIS,GAAIZ,EAAMZ,EAAcA,GACxBE,UAAWuB,EAAAA,UAAgBP,SAAA,CAE3BH,EAAAA,KAACa,EAAAA,WAAWC,QACR3B,UAAW4B,EAAAA,qBACXC,OAAQ,WACRP,GAAI,GAAGZ,EAAMZ,EAAcA,+BAErBA,EAAe,EAAC,OAAMD,EAAMe,UAEtCK,EAAAA,IAACS,EAAAA,WAAWC,QACR3B,UAAW4B,EAAAA,qBACXC,OAAQ,UACRP,GAAI,GAAGZ,EAAMZ,EAAcA,oBAE1BO,EAAgBR,EAAMC,QAhBtBA,GAjCND,EAAMsB,KAAI,CAACC,EAASX,KACvB,MAAMY,EAAcZ,GAAaX,EAC3BgC,EAAUrB,IAAcX,EACxBiC,EAAaD,EAAU,OAAS,UAEtC,OACIb,EAAAA,IAAA,MAAA,CAEIK,GAAI,GAAGZ,EAAMD,EAAWX,WACxBE,UAAWuB,EAAAA,UAAgBP,SAE3BH,EAAAA,KAACa,EAAAA,WAAWC,OAAM,CACd3B,UAAWc,UACPkB,EAAAA,sBACAX,GACIY,oCAERJ,OAAQE,EAAU,eACJD,EAAOd,SAAA,CAEpBX,EAAgBe,GACjBH,EAAAA,IAACiB,EAAAA,eAAc,CAAAlB,SACVR,EAAiBC,EAAWX,SAfhCW,EAkBH,SAoCR"}

package/cjs/progress-indicator/progress-indicator.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./progress-indicator.styles_1c038s4.css");exports.content="ck7dr6z",exports.indicator="i1vcego5",exports.indicatorBar="i1k6bqsf",exports.indicatorBarHighlighted="inywq69",exports.indicatorTitleDesktop="i1ubzlq2",exports.indicatorTitleDesktopHighlighted="i8ugwdc",exports.indicatorTitleTablet="i8128on",exports.wrapper="w103113g";
+//# sourceMappingURL=progress-indicator.styles.js.map

package/cjs/progress-indicator/progress-indicator.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-indicator.styles.js","sources":["../../../src/progress-indicator/progress-indicator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Spacing } from \"../theme\";\n\n// Units in rem\nexport const INDICATOR_BAR_MARGIN_RIGHT_TABLET = 0.5;\n\n// =============================================================================\n// STYLE COMPONENTS\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n    width: 100%;\n\n    margin: 2rem 0;\n\n    ${MediaQuery.MaxWidth.xl} {\n        margin: 1.5rem 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: 1rem 0;\n    }\n`;\n\nexport const content = css`\n    display: flex;\n    flex-basis: 0;\n    justify-content: space-between;\n    width: 100%;\n`;\n\nexport const indicatorBar = css`\n    height: 4px;\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n    border-radius: ${Radius[\"full\"]};\n    background-color: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const indicatorBarHighlighted = css`\n    background-color: ${Colour[\"bg-primary-subtle\"]};\n`;\n\nexport const indicatorTitleDesktop = css`\n    overflow-wrap: anywhere;\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const indicatorTitleDesktopHighlighted = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const indicatorTitleTablet = css`\n    overflow-wrap: anywhere;\n    color: ${Colour.text};\n`;\n\nexport const indicator = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n\n    &:not(:last-child) {\n        margin-right: ${INDICATOR_BAR_MARGIN_RIGHT_TABLET + \"rem\"};\n    }\n`;\n"],"names":[],"mappings":"kHAyBoB,4BAgCE,gCAzBG,2CAOW,wCAIF,oDAKW,uCAIZ,0BA1Cb"}

package/cjs/progress-indicator/progress-indicator.styles_1c038s4.css

@@ -0,0 +1,8 @@
+.w103113g{position:relative;width:100%;margin:2rem 0;}:where(body.fds-breakpoint-xl-max) .w103113g{margin:1.5rem 0;}:where(body.fds-breakpoint-lg-max) .w103113g{margin:1rem 0;}
+.ck7dr6z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;width:100%;}
+.i1k6bqsf{height:4px;margin-bottom:var(--fds-spacing-8);border-radius:var(--fds-radius-full);background-color:var(--fds-colour-bg-disabled);}
+.inywq69{background-color:var(--fds-colour-bg-primary-subtle);}
+.i1ubzlq2{overflow-wrap:anywhere;color:var(--fds-colour-text-disabled);}
+.i8ugwdc{color:var(--fds-colour-text-primary);}
+.i8128on{overflow-wrap:anywhere;color:var(--fds-colour-text);}
+.i1vcego5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}.i1vcego5:not(:last-child){margin-right:0.5rem;}

package/cjs/schedule/schedule.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),i=require("../external/lodash/lodash.js"),t=require("react"),s=require("../external/react-responsive/dist/react-responsive.js"),l=require("styled-components"),n=require("../v3_theme/index.js"),o=require("./schedule.styles.js"),d=require("./schedule-day-view/schedule-day-view.js"),r=require("./schedule-header/schedule-header.js"),c=require("./schedule-week-view/schedule-week-view.js");exports.Schedule=m=>{var{id:u,className:h,view:C="day",date:x,serviceData:y,loading:v=!1,minTime:k="00:00",maxTime:S="23:59",initialScrollTime:p=k,minDate:D,maxDate:g,emptyContentMessage:j,emptySlotPopover:w,onPreviousDayClick:T,onNextDayClick:b,onCalendarDateSelect:q,onTodayClick:N,onEmptySlotClick:M,blockedMessage:P,onClickHiddenSlots:f,"data-testid":E="schedule"}=m,_=e.__rest(m,["id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","data-testid"]);const[H,R]=t.useState(C),V=t.useContext(l.ThemeContext),O=n.V3_Breakpoint["lg-max"]({theme:V}),A=s.reactResponsiveExports.useMediaQuery({maxWidth:O}),B=A?"day":H,W=t.useRef(null),[$,F]=t.useState(0),Q=0===y.length||i.lodashExports.isEmpty(y),z=t.useMemo((()=>y.map((e=>Object.assign(Object.assign({},e),{slots:e.slots.filter((e=>e.date===x))})))),[y,x]),G=A?z&&z.length>0?[z[$]]:[]:z;t.useEffect((()=>{F(0)}),[z]);const I=e=>{R(e)},J=t.useCallback((()=>{null==N||N()}),[N]),K=t.useCallback((()=>{z&&F((e=>e<z.length-1?e+1:e))}),[z]),L=t.useCallback((()=>{F((e=>e>0?e-1:e))}),[]);return Q?a.jsxs(o.Container,Object.assign({},_,{"data-testid":E,$loading:v,children:[a.jsx(r.ScheduleHeader,{"data-id":"schedule-header",date:x,view:B,minDate:D,maxDate:g,onPreviousDayClick:T,onNextDayClick:b,onCalendarDateSelect:q,onViewChange:I,onTodayClick:J}),a.jsx(o.EmptyTableContainer,{className:"empty-container",children:a.jsx(o.NoResultsFound,{type:"no-item-found",description:j})})]})):a.jsxs(o.Container,Object.assign({id:u,className:h,$loading:v,"data-testid":E},_,{children:[a.jsx(r.ScheduleHeader,{"data-id":"schedule-header",date:x,view:B,minDate:D,maxDate:g,onPreviousDayClick:T,onNextDayClick:b,onCalendarDateSelect:q,onViewChange:I,onTodayClick:J}),a.jsx(o.ScheduleBodyContainer,{ref:W,"data-id":"schedule-container",children:"day"===B?a.jsx(d.ScheduleDayView,{date:x,serviceData:G,loading:v,minTime:k,maxTime:S,initialScrollTime:p,emptySlotPopover:w,isMobile:A,onNextService:K,onPrevService:L,containerRef:W,showPrevArrow:A&&$>0,showNextArrow:A&&$<z.length-1,onEmptySlotClick:M,blockedMessage:P}):a.jsx(c.ScheduleWeekView,{date:x,serviceData:y,loading:v,minTime:k,maxTime:S,initialScrollTime:p,containerRef:W,blockedMessage:P,onClickHiddenSlots:f})})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),a=require("../external/lodash/lodash.js"),t=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var s=require("../theme/utils/use-media-query.js"),r=require("./schedule.styles.js"),l=require("./schedule-day-view/schedule-day-view.js"),n=require("./schedule-header/schedule-header.js"),o=require("./schedule-week-view/schedule-week-view.js");exports.Schedule=d=>{var{id:c,className:u,view:m="day",date:h,serviceData:y,loading:j=!1,minTime:C="00:00",maxTime:k="23:59",initialScrollTime:x=C,minDate:v,maxDate:S,emptyContentMessage:g,emptySlotPopover:D,onPreviousDayClick:p,onNextDayClick:q,onCalendarDateSelect:w,onTodayClick:T,onEmptySlotClick:b,blockedMessage:N,onClickHiddenSlots:M,"data-testid":f="schedule"}=d,P=e.__rest(d,["id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","data-testid"]);const[E,H]=t.useState(m),O=s.useMaxWidthMediaQuery("lg"),R=O?"day":E,V=t.useRef(null),[_,A]=t.useState(0),W=0===y.length||a.lodashExports.isEmpty(y),$=t.useMemo((()=>y.map((e=>Object.assign(Object.assign({},e),{slots:e.slots.filter((e=>e.date===h))})))),[y,h]),B=O?$&&$.length>0?[$[_]]:[]:$;t.useEffect((()=>{A(0)}),[$]);const F=e=>{H(e)},Q=t.useCallback((()=>{null==T||T()}),[T]),z=t.useCallback((()=>{$&&A((e=>e<$.length-1?e+1:e))}),[$]),G=t.useCallback((()=>{A((e=>e>0?e-1:e))}),[]);return W?i.jsxs(r.Container,Object.assign({},P,{"data-testid":f,$loading:j,children:[i.jsx(n.ScheduleHeader,{"data-id":"schedule-header",date:h,view:R,minDate:v,maxDate:S,onPreviousDayClick:p,onNextDayClick:q,onCalendarDateSelect:w,onViewChange:F,onTodayClick:Q}),i.jsx(r.EmptyTableContainer,{className:"empty-container",children:i.jsx(r.NoResultsFound,{type:"no-item-found",description:g})})]})):i.jsxs(r.Container,Object.assign({id:c,className:u,$loading:j,"data-testid":f},P,{children:[i.jsx(n.ScheduleHeader,{"data-id":"schedule-header",date:h,view:R,minDate:v,maxDate:S,onPreviousDayClick:p,onNextDayClick:q,onCalendarDateSelect:w,onViewChange:F,onTodayClick:Q}),i.jsx(r.ScheduleBodyContainer,{ref:V,"data-id":"schedule-container",children:"day"===R?i.jsx(l.ScheduleDayView,{date:h,serviceData:B,loading:j,minTime:C,maxTime:k,initialScrollTime:x,emptySlotPopover:D,isMobile:O,onNextService:z,onPrevService:G,containerRef:V,showPrevArrow:O&&_>0,showNextArrow:O&&_<$.length-1,onEmptySlotClick:b,blockedMessage:N}):i.jsx(o.ScheduleWeekView,{date:h,serviceData:y,loading:j,minTime:C,maxTime:k,initialScrollTime:x,containerRef:V,blockedMessage:N,onClickHiddenSlots:M})})]}))};
 //# sourceMappingURL=schedule.js.map

package/cjs/schedule/schedule.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule.js","sources":["../../../src/schedule/schedule.tsx"],"sourcesContent":["import { isEmpty } from \"lodash\";\nimport {\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    Container,\n    EmptyTableContainer,\n    NoResultsFound,\n    ScheduleBodyContainer,\n} from \"./schedule.styles\";\nimport { ScheduleDayView } from \"./schedule-day-view/schedule-day-view\";\nimport { ScheduleHeader } from \"./schedule-header/schedule-header\";\nimport { ScheduleWeekView } from \"./schedule-week-view/schedule-week-view\";\nimport type { ScheduleProps } from \"./types\";\n\nexport const Schedule = ({\n    id,\n    className,\n    view = \"day\",\n    date,\n    serviceData,\n    loading = false,\n    minTime = \"00:00\",\n    maxTime = \"23:59\",\n    initialScrollTime = minTime,\n    minDate,\n    maxDate,\n    emptyContentMessage,\n    emptySlotPopover,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onTodayClick,\n    onEmptySlotClick,\n    blockedMessage,\n    onClickHiddenSlots,\n    \"data-testid\": testId = \"schedule\",\n    ...otherProps\n}: ScheduleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentView, setCurrentView] = useState<\"day\" | \"week\">(view);\n    const theme = useContext(ThemeContext);\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n    const isSmallScreen = useMediaQuery({\n        maxWidth: tabletBreakpoint,\n    });\n    const effectiveView = isSmallScreen ? \"day\" : currentView;\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [visibleServiceIdx, setVisibleServiceIdx] = useState(0);\n    const isEmptyContent = serviceData.length === 0 || isEmpty(serviceData);\n    const filteredServiceData = useMemo(\n        () =>\n            serviceData.map((service) => ({\n                ...service,\n                slots: service.slots.filter((slot) => slot.date === date),\n            })),\n        [serviceData, date]\n    );\n\n    const visibleServiceData = isSmallScreen\n        ? filteredServiceData && filteredServiceData.length > 0\n            ? [filteredServiceData[visibleServiceIdx]]\n            : []\n        : filteredServiceData;\n\n    useEffect(() => {\n        setVisibleServiceIdx(0);\n    }, [filteredServiceData]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewChange = (newView: \"day\" | \"week\") => {\n        setCurrentView(newView);\n    };\n\n    const handleTodayClick = useCallback(() => {\n        onTodayClick?.();\n    }, [onTodayClick]);\n\n    const handleNextService = useCallback(() => {\n        if (!filteredServiceData) return;\n        setVisibleServiceIdx((idx) =>\n            idx < filteredServiceData.length - 1 ? idx + 1 : idx\n        );\n    }, [filteredServiceData]);\n\n    const handlePrevService = useCallback(() => {\n        setVisibleServiceIdx((idx) => (idx > 0 ? idx - 1 : idx));\n    }, []);\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    if (isEmptyContent) {\n        return (\n            <Container {...otherProps} data-testid={testId} $loading={loading}>\n                <ScheduleHeader\n                    data-id=\"schedule-header\"\n                    date={date}\n                    view={effectiveView}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                    onViewChange={handleViewChange}\n                    onTodayClick={handleTodayClick}\n                />\n                <EmptyTableContainer className=\"empty-container\">\n                    <NoResultsFound\n                        type=\"no-item-found\"\n                        description={emptyContentMessage}\n                    />\n                </EmptyTableContainer>\n            </Container>\n        );\n    }\n    return (\n        <Container\n            id={id}\n            className={className}\n            $loading={loading}\n            data-testid={testId}\n            {...otherProps}\n        >\n            <ScheduleHeader\n                data-id=\"schedule-header\"\n                date={date}\n                view={effectiveView}\n                minDate={minDate}\n                maxDate={maxDate}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n                onViewChange={handleViewChange}\n                onTodayClick={handleTodayClick}\n            />\n\n            <ScheduleBodyContainer\n                ref={contentContainerRef}\n                data-id=\"schedule-container\"\n            >\n                {effectiveView === \"day\" ? (\n                    <ScheduleDayView\n                        date={date}\n                        serviceData={visibleServiceData}\n                        loading={loading}\n                        minTime={minTime}\n                        maxTime={maxTime}\n                        initialScrollTime={initialScrollTime}\n                        emptySlotPopover={emptySlotPopover}\n                        isMobile={isSmallScreen}\n                        onNextService={handleNextService}\n                        onPrevService={handlePrevService}\n                        containerRef={contentContainerRef}\n                        showPrevArrow={isSmallScreen && visibleServiceIdx > 0}\n                        showNextArrow={\n                            isSmallScreen &&\n                            visibleServiceIdx < filteredServiceData.length - 1\n                        }\n                        onEmptySlotClick={onEmptySlotClick}\n                        blockedMessage={blockedMessage}\n                    />\n                ) : (\n                    <ScheduleWeekView\n                        date={date}\n                        serviceData={serviceData}\n                        loading={loading}\n                        minTime={minTime}\n                        maxTime={maxTime}\n                        initialScrollTime={initialScrollTime}\n                        containerRef={contentContainerRef}\n                        blockedMessage={blockedMessage}\n                        onClickHiddenSlots={onClickHiddenSlots}\n                    />\n                )}\n            </ScheduleBodyContainer>\n        </Container>\n    );\n};\n"],"names":["_a","id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","testId","otherProps","__rest","currentView","setCurrentView","useState","theme","useContext","ThemeContext","tabletBreakpoint","V3_Breakpoint","isSmallScreen","useMediaQuery","maxWidth","effectiveView","contentContainerRef","useRef","visibleServiceIdx","setVisibleServiceIdx","isEmptyContent","length","isEmpty","filteredServiceData","useMemo","map","service","slots","filter","slot","visibleServiceData","useEffect","handleViewChange","newView","handleTodayClick","useCallback","handleNextService","idx","handlePrevService","_jsxs","Container","Object","assign","$loading","_jsx","ScheduleHeader","onViewChange","EmptyTableContainer","children","NoResultsFound","type","description","ScheduleBodyContainer","ref","ScheduleDayView","isMobile","onNextService","onPrevService","containerRef","showPrevArrow","showNextArrow","ScheduleWeekView"],"mappings":"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"}
+{"version":3,"file":"schedule.js","sources":["../../../src/schedule/schedule.tsx"],"sourcesContent":["import { isEmpty } from \"lodash\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport {\n    Container,\n    EmptyTableContainer,\n    NoResultsFound,\n    ScheduleBodyContainer,\n} from \"./schedule.styles\";\nimport { ScheduleDayView } from \"./schedule-day-view/schedule-day-view\";\nimport { ScheduleHeader } from \"./schedule-header/schedule-header\";\nimport { ScheduleWeekView } from \"./schedule-week-view/schedule-week-view\";\nimport type { ScheduleProps } from \"./types\";\n\nexport const Schedule = ({\n    id,\n    className,\n    view = \"day\",\n    date,\n    serviceData,\n    loading = false,\n    minTime = \"00:00\",\n    maxTime = \"23:59\",\n    initialScrollTime = minTime,\n    minDate,\n    maxDate,\n    emptyContentMessage,\n    emptySlotPopover,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onTodayClick,\n    onEmptySlotClick,\n    blockedMessage,\n    onClickHiddenSlots,\n    \"data-testid\": testId = \"schedule\",\n    ...otherProps\n}: ScheduleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentView, setCurrentView] = useState<\"day\" | \"week\">(view);\n    const isSmallScreen = useMaxWidthMediaQuery(\"lg\");\n    const effectiveView = isSmallScreen ? \"day\" : currentView;\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [visibleServiceIdx, setVisibleServiceIdx] = useState(0);\n    const isEmptyContent = serviceData.length === 0 || isEmpty(serviceData);\n    const filteredServiceData = useMemo(\n        () =>\n            serviceData.map((service) => ({\n                ...service,\n                slots: service.slots.filter((slot) => slot.date === date),\n            })),\n        [serviceData, date]\n    );\n\n    const visibleServiceData = isSmallScreen\n        ? filteredServiceData && filteredServiceData.length > 0\n            ? [filteredServiceData[visibleServiceIdx]]\n            : []\n        : filteredServiceData;\n\n    useEffect(() => {\n        setVisibleServiceIdx(0);\n    }, [filteredServiceData]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewChange = (newView: \"day\" | \"week\") => {\n        setCurrentView(newView);\n    };\n\n    const handleTodayClick = useCallback(() => {\n        onTodayClick?.();\n    }, [onTodayClick]);\n\n    const handleNextService = useCallback(() => {\n        if (!filteredServiceData) return;\n        setVisibleServiceIdx((idx) =>\n            idx < filteredServiceData.length - 1 ? idx + 1 : idx\n        );\n    }, [filteredServiceData]);\n\n    const handlePrevService = useCallback(() => {\n        setVisibleServiceIdx((idx) => (idx > 0 ? idx - 1 : idx));\n    }, []);\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    if (isEmptyContent) {\n        return (\n            <Container {...otherProps} data-testid={testId} $loading={loading}>\n                <ScheduleHeader\n                    data-id=\"schedule-header\"\n                    date={date}\n                    view={effectiveView}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                    onViewChange={handleViewChange}\n                    onTodayClick={handleTodayClick}\n                />\n                <EmptyTableContainer className=\"empty-container\">\n                    <NoResultsFound\n                        type=\"no-item-found\"\n                        description={emptyContentMessage}\n                    />\n                </EmptyTableContainer>\n            </Container>\n        );\n    }\n    return (\n        <Container\n            id={id}\n            className={className}\n            $loading={loading}\n            data-testid={testId}\n            {...otherProps}\n        >\n            <ScheduleHeader\n                data-id=\"schedule-header\"\n                date={date}\n                view={effectiveView}\n                minDate={minDate}\n                maxDate={maxDate}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n                onViewChange={handleViewChange}\n                onTodayClick={handleTodayClick}\n            />\n\n            <ScheduleBodyContainer\n                ref={contentContainerRef}\n                data-id=\"schedule-container\"\n            >\n                {effectiveView === \"day\" ? (\n                    <ScheduleDayView\n                        date={date}\n                        serviceData={visibleServiceData}\n                        loading={loading}\n                        minTime={minTime}\n                        maxTime={maxTime}\n                        initialScrollTime={initialScrollTime}\n                        emptySlotPopover={emptySlotPopover}\n                        isMobile={isSmallScreen}\n                        onNextService={handleNextService}\n                        onPrevService={handlePrevService}\n                        containerRef={contentContainerRef}\n                        showPrevArrow={isSmallScreen && visibleServiceIdx > 0}\n                        showNextArrow={\n                            isSmallScreen &&\n                            visibleServiceIdx < filteredServiceData.length - 1\n                        }\n                        onEmptySlotClick={onEmptySlotClick}\n                        blockedMessage={blockedMessage}\n                    />\n                ) : (\n                    <ScheduleWeekView\n                        date={date}\n                        serviceData={serviceData}\n                        loading={loading}\n                        minTime={minTime}\n                        maxTime={maxTime}\n                        initialScrollTime={initialScrollTime}\n                        containerRef={contentContainerRef}\n                        blockedMessage={blockedMessage}\n                        onClickHiddenSlots={onClickHiddenSlots}\n                    />\n                )}\n            </ScheduleBodyContainer>\n        </Container>\n    );\n};\n"],"names":["_a","id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","testId","otherProps","__rest","currentView","setCurrentView","useState","isSmallScreen","useMaxWidthMediaQuery","effectiveView","contentContainerRef","useRef","visibleServiceIdx","setVisibleServiceIdx","isEmptyContent","length","isEmpty","filteredServiceData","useMemo","map","service","slots","filter","slot","visibleServiceData","useEffect","handleViewChange","newView","handleTodayClick","useCallback","handleNextService","idx","handlePrevService","_jsxs","Container","Object","assign","$loading","_jsx","ScheduleHeader","onViewChange","EmptyTableContainer","children","NoResultsFound","type","description","ScheduleBodyContainer","ref","ScheduleDayView","isMobile","onNextService","onPrevService","containerRef","showPrevArrow","showNextArrow","ScheduleWeekView"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-"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)`
+"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("../../theme/utils/use-media-query.js"),require("../../popover/popover.styles_ujnf0h.css");var t=require("../../popover/popover-trigger.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../popover/popover-inline/popover-inline.styles_bkopnt.css");const o=i(r).default(t.PopoverTrigger)`
     width: 100%;
     display: flex;
     flex-direction: column;

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":"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"}
+{"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 { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\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: PopoverTriggerProps = {\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":"2kCAaA,MAAMA,OAAuBC,QAAOC,EAAAA,eAAe;;;;8BAMhB,EAC/BC,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,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"}

package/cjs/select-histogram/select-histogram.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),i=require("../histogram-slider/histogram-slider.js");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css"),require("../shared/dropdown-list/dropdown-list.js");var n=require("../shared/dropdown-list/dropdown-list-state.js"),l=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var t=require("../shared/dropdown-wrapper/element-with-dropdown.js"),d=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1qveyb9.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");var o=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),u=require("../typography/index.js"),c=require("./select-histogram.styles.js");exports.SelectHistogram=p=>{var{alignment:h="left",className:g,disabled:q,dropdownZIndex:m,error:j,histogramSlider:b,id:x,"aria-labelledby":f,"aria-describedby":w,"aria-invalid":y,onBlur:v,onChange:_,onChangeEnd:T,optionTruncationType:S="end",placeholder:C="Select",rangeLabelPrefix:L,rangeLabelSuffix:A,readOnly:I,renderRangeLabel:k,value:E,dropdownRootNode:R}=p,O=e.__rest(p,["alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","aria-labelledby","aria-describedby","aria-invalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode"]);const{interval:B,bins:H=[],renderEmptyView:P,ariaLabels:N}=b,D=H.map((e=>e.minValue)),G=Math.min(...D),[M,F]=a.useState(ae()),[V,Z]=a.useState(!1),[W,$]=a.useState(!1),z=s.useId(),J=a.useRef(null),K=a.useRef(null),Q=a.useRef(null),U=O["data-testid"]||"select-histogram";a.useEffect((()=>{E!==M&&F(ae())}),[E]);const X=e=>{F(e),null==_||_(e)},Y=e=>{F(e),null==T||T(e)},ee=()=>{W||V||$(!0)},re=e=>{W&&!V&&J.current&&!J.current.contains(e.relatedTarget)&&($(!1),null==v||v())};function ae(){return null!=E?E:[G,G+B]}const ie=e=>k?k(e):r.jsxs(u.Typography.BodyBL,{children:[L,e,A]});return r.jsx(n.DropdownListState,{children:r.jsx(t.ElementWithDropdown,{enabled:!I&&!q,isOpen:V,renderElement:()=>r.jsx(d.InputBox,{className:g,"data-testid":U,id:x,ref:J,tabIndex:-1,onFocus:ee,onBlur:re,focused:W,disabled:q,readOnly:I,error:j,children:r.jsx(l.ExpandableElement,{ref:K,disabled:q,expanded:V,listboxId:z,popupRole:"dialog",readOnly:I,variant:"default","aria-labelledby":f,"aria-describedby":w,"aria-invalid":y,children:r.jsx("div",{className:o.labelContainer,ref:Q,"data-disabled":q||void 0,children:D&&0!==D.length?r.jsxs(c.Label,{children:[ie(M[0]),r.jsx(c.Separator,{children:"-"}),ie(M[1])]}):r.jsx(c.PlaceholderLabel,{$truncateType:S,$variant:"default",children:C})})})}),renderDropdown:({elementWidth:e,styles:a,setFloatingRef:s,getFloatingProps:n})=>r.jsx(c.HistogramSliderDropdownContainer,Object.assign({style:Object.assign(Object.assign({},a),{width:e}),ref:s},n(),{children:r.jsx(i.HistogramSlider,{interval:B,value:M,bins:H,onChange:X,onChangeEnd:Y,showRangeLabels:!1,renderEmptyView:P,ariaLabels:N})})),onOpen:()=>{Z(!0)},onClose:()=>{Z(!1)},onDismiss:()=>{var e;null===(e=K.current)||void 0===e||e.focus(),Z(!1)},clickToToggle:!0,offset:8,alignment:h,fitAvailableHeight:!0,customZIndex:m,rootNode:R})})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("clsx"),s=require("react"),i=require("../histogram-slider/histogram-slider.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var n=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css"),require("../shared/dropdown-list/dropdown-list.js");var l=require("../shared/dropdown-list/dropdown-list-state.js"),t=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js"),o=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");var u=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),c=require("../typography/index.js"),p=require("./select-histogram.styles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=h(a);exports.SelectHistogram=a=>{var{alignment:h="left",className:g,disabled:q,dropdownZIndex:j,error:b,histogramSlider:f,id:x,"aria-labelledby":w,"aria-describedby":y,"aria-invalid":v,onBlur:_,onChange:T,onChangeEnd:C,optionTruncationType:S="end",placeholder:L="Select",rangeLabelPrefix:k,rangeLabelSuffix:A,readOnly:E,renderRangeLabel:I,value:N,dropdownRootNode:R}=a,O=e.__rest(a,["alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","aria-labelledby","aria-describedby","aria-invalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode"]);const{interval:B,bins:H=[],renderEmptyView:P,ariaLabels:D}=f,G=H.map((e=>e.minValue)),M=Math.min(...G),[F,V]=s.useState(se()),[Z,W]=s.useState(!1),[z,$]=s.useState(!1),J=n.useId(),K=s.useRef(null),Q=s.useRef(null),U=s.useRef(null),X=O["data-testid"]||"select-histogram";s.useEffect((()=>{N!==F&&V(se())}),[N]);const Y=e=>{V(e),null==T||T(e)},ee=e=>{V(e),null==C||C(e)},re=()=>{z||Z||$(!0)},ae=e=>{z&&!Z&&K.current&&!K.current.contains(e.relatedTarget)&&($(!1),null==_||_())};function se(){return null!=N?N:[M,M+B]}const ie=e=>I?I(e):r.jsxs(c.Typography.BodyBL,{children:[k,e,A]});return r.jsx(l.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!E&&!q,isOpen:Z,renderElement:()=>r.jsx(o.InputBox,{className:g,"data-testid":X,id:x,ref:K,tabIndex:-1,onFocus:re,onBlur:ae,focused:z,disabled:q,readOnly:E,error:b,children:r.jsx(t.ExpandableElement,{ref:Q,disabled:q,expanded:Z,listboxId:J,popupRole:"dialog",readOnly:E,variant:"default","aria-labelledby":w,"aria-describedby":y,"aria-invalid":v,children:r.jsx("div",{className:u.labelContainer,ref:U,"data-disabled":q||void 0,children:G&&0!==G.length?r.jsxs("div",{className:p.label,children:[ie(F[0]),r.jsx("div",{className:p.separator,children:"-"}),ie(F[1])]}):r.jsx("div",{className:m.default(p.placeholderLabel,"middle"!==S&&p.placeholderLabelTruncateEnd),children:L})})})}),renderDropdown:({elementWidth:e,styles:a,setFloatingRef:s,getFloatingProps:n})=>r.jsx("div",Object.assign({className:p.histogramSliderDropdownContainer,style:Object.assign(Object.assign({},a),{width:e}),ref:s,"data-testid":`${X}-dropdown`},n(),{children:r.jsx(i.HistogramSlider,{interval:B,value:F,bins:H,onChange:Y,onChangeEnd:ee,showRangeLabels:!1,renderEmptyView:P,ariaLabels:D})})),onOpen:()=>{W(!0)},onClose:()=>{W(!1)},onDismiss:()=>{var e;null===(e=Q.current)||void 0===e||e.focus(),W(!1)},clickToToggle:!0,offset:8,alignment:h,fitAvailableHeight:!0,customZIndex:j,rootNode:R})})};
 //# sourceMappingURL=select-histogram.js.map

package/cjs/select-histogram/select-histogram.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.js","sources":["../../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport { DropdownListState, ExpandableElement } from \"../shared/dropdown-list\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport * as dropdownWrapperStyles from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport {\n    HistogramSliderDropdownContainer,\n    Label,\n    PlaceholderLabel,\n    Separator,\n} from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <PlaceholderLabel\n                $truncateType={optionTruncationType}\n                $variant=\"default\"\n            >\n                {placeholder}\n            </PlaceholderLabel>\n        ) : (\n            <Label>\n                {renderSelector(selection[0])}\n                <Separator>-</Separator>\n                {renderSelector(selection[1])}\n            </Label>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <div\n            className={dropdownWrapperStyles.labelContainer}\n            ref={labelContainerRef}\n            data-disabled={disabled || undefined}\n        >\n            {getDisplayValue()}\n        </div>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = ({\n        elementWidth,\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <HistogramSliderDropdownContainer\n            style={{ ...styles, width: elementWidth }}\n            ref={setFloatingRef}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </HistogramSliderDropdownContainer>\n    );\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","Label","Separator","PlaceholderLabel","$truncateType","$variant","renderDropdown","elementWidth","styles","setFloatingRef","getFloatingProps","HistogramSliderDropdownContainer","Object","assign","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"select-histogram.js","sources":["../../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport { DropdownListState, ExpandableElement } from \"../shared/dropdown-list\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport * as dropdownWrapperStyles from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <div\n                className={clsx(\n                    styles.placeholderLabel,\n                    optionTruncationType !== \"middle\" &&\n                        styles.placeholderLabelTruncateEnd\n                )}\n            >\n                {placeholder}\n            </div>\n        ) : (\n            <div className={styles.label}>\n                {renderSelector(selection[0])}\n                <div className={styles.separator}>-</div>\n                {renderSelector(selection[1])}\n            </div>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <div\n            className={dropdownWrapperStyles.labelContainer}\n            ref={labelContainerRef}\n            data-disabled={disabled || undefined}\n        >\n            {getDisplayValue()}\n        </div>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = ({\n        elementWidth,\n        styles: floatingStyles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            className={styles.histogramSliderDropdownContainer}\n            style={{ ...floatingStyles, width: elementWidth }}\n            ref={setFloatingRef}\n            data-testid={`${testId}-dropdown`}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </div>\n    );\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","styles.label","styles.separator","clsx","styles.placeholderLabel","styles.placeholderLabelTruncateEnd","renderDropdown","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","Object","assign","styles.histogramSliderDropdownContainer","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/cjs/select-histogram/select-histogram.styles.js

@@ -1,38 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../shared/styles/index.js"),i=require("../v3_theme/index.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=t(e);const d=a.default.div`
-    overflow: hidden;
-    border: ${i.V3_Border["width-010"]} ${i.V3_Border.solid}
-        ${i.V3_Colour.border};
-    border-radius: ${i.V3_Radius.sm};
-    background: ${i.V3_Colour.bg};
-    padding: ${i.V3_Spacing["spacing-16"]};
-    min-width: 23rem;
-
-    ${i.V3_MediaQuery.MaxWidth.sm} {
-        min-width: unset;
-        width: calc(100vw - ${i.V3_Breakpoint["sm-margin"]}px * 2);
-    }
-
-    ${i.V3_MediaQuery.MaxWidth.xs} {
-        width: calc(100vw - ${i.V3_Breakpoint["xs-margin"]}px * 2);
-    }
-
-    ${i.V3_MediaQuery.MaxWidth.xxs} {
-        width: calc(100vw - ${i.V3_Breakpoint["xxs-margin"]}px * 2);
-    }
-`,o=a.default.div`
-    display: flex;
-    align-items: baseline;
-`,l=a.default.div`
-    margin: 0 0.5rem;
-    color: ${i.V3_Colour.text};
-`,n=a.default.div`
-    ${e=>"small"===e.$variant?i.V3_Font["body-md-regular"]:i.V3_Font["body-baseline-regular"]}
-    text-align: left;
-    ${i=>{if("middle"!==i.$truncateType)return e.css`
-                    ${r.lineClampCss(1)}
-                `}}
-    overflow: hidden;
-`,s=a.default(n)`
-    color: ${i.V3_Colour["text-subtler"]};
-`;exports.HistogramSliderDropdownContainer=d,exports.Label=o,exports.PlaceholderLabel=s,exports.Separator=l,exports.ValueLabel=n;
+"use strict";require("./select-histogram.styles_11916eo.css");exports.histogramSliderDropdownContainer="h1snxaxy",exports.label="l1e4uw6e",exports.placeholderLabel="p11079xa",exports.placeholderLabelTruncateEnd="p1bydnw6",exports.separator="s134rtp9";
 //# sourceMappingURL=select-histogram.styles.js.map

package/cjs/select-histogram/select-histogram.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.styles.js","sources":["../../../src/select-histogram/select-histogram.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport type {\n    DropdownVariantType,\n    TruncateType,\n} from \"../shared/dropdown-list/types\";\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    V3_Border,\n    V3_Breakpoint,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\ninterface ValueLabelStyleProps {\n    $truncateType?: TruncateType;\n    $variant?: DropdownVariantType;\n}\n\nexport const HistogramSliderDropdownContainer = styled.div`\n    overflow: hidden;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    background: ${V3_Colour[\"bg\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    min-width: 23rem;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        min-width: unset;\n        width: calc(100vw - ${V3_Breakpoint[\"sm-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xs} {\n        width: calc(100vw - ${V3_Breakpoint[\"xs-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        width: calc(100vw - ${V3_Breakpoint[\"xxs-margin\"]}px * 2);\n    }\n`;\n\nexport const Label = styled.div`\n    display: flex;\n    align-items: baseline;\n`;\n\nexport const Separator = styled.div`\n    margin: 0 0.5rem;\n    color: ${V3_Colour[\"text\"]};\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n    text-align: left;\n    ${(props) => {\n        switch (props.$truncateType) {\n            case \"middle\":\n                break;\n            case \"end\":\n            default:\n                return css`\n                    ${lineClampCss(1)}\n                `;\n        }\n    }}\n    overflow: hidden;\n`;\n\nexport const PlaceholderLabel = styled(ValueLabel)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n"],"names":["HistogramSliderDropdownContainer","styled","div","V3_Border","V3_Colour","V3_Radius","V3_Spacing","V3_MediaQuery","MaxWidth","sm","V3_Breakpoint","xs","xxs","Label","Separator","ValueLabel","props","$variant","V3_Font","$truncateType","css","lineClampCss","PlaceholderLabel"],"mappings":"4MAsBO,MAAMA,EAAmCC,EAAAA,QAAOC,GAAG;;cAE5CC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CC,EAAAA,UAAkB;qBACPC,EAAAA,UAAc;kBACjBD,EAAAA,UAAc;eACjBE,EAAAA,WAAW;;;MAGpBC,EAAAA,cAAcC,SAASC;;8BAECC,EAAAA,cAAc;;;MAGtCH,EAAAA,cAAcC,SAASG;8BACCD,EAAAA,cAAc;;;MAGtCH,EAAAA,cAAcC,SAASI;8BACCF,EAAAA,cAAc;;EAI/BG,EAAQZ,EAAAA,QAAOC,GAAG;;;EAKlBY,EAAYb,EAAAA,QAAOC,GAAG;;aAEtBE,EAAAA,UAAgB;EAGhBW,EAAad,EAAAA,QAAOC,GAAyB;MACnDc,GACoB,UAAnBA,EAAMC,SACAC,EAAAA,QAAQ,mBACRA,EAAAA,QAAQ;;MAEfF,IACC,GACS,WADDA,EAAMG,cAKN,OAAOC,KAAG;sBACJC,EAAAA,aAAa;;;EAOtBC,EAAmBrB,EAAAA,QAAOc,EAAW;aACrCX,EAAAA,UAAU;"}
+{"version":3,"file":"select-histogram.styles.js","sources":["../../../src/select-histogram/select-histogram.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme\";\n\nexport const histogramSliderDropdownContainer = css`\n    overflow: hidden;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-16\"]};\n    min-width: 23rem;\n\n    ${MediaQuery.MaxWidth.sm} {\n        min-width: unset;\n        width: calc(100vw - ${Breakpoint[\"sm-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        width: calc(100vw - ${Breakpoint[\"xs-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: calc(100vw - ${Breakpoint[\"xxs-margin\"]} * 2);\n    }\n`;\n\nexport const label = css`\n    display: flex;\n    align-items: baseline;\n`;\n\nexport const separator = css`\n    margin: 0 0.5rem;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const placeholderLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    text-align: left;\n    overflow: hidden;\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const placeholderLabelTruncateEnd = css`\n    ${lineClampCss(1)}\n`;\n"],"names":[],"mappings":"uIAa6C,yBAsB3B,oCAUW,+CAOW,6BAZlB"}

package/cjs/select-histogram/select-histogram.styles_11916eo.css

@@ -0,0 +1,5 @@
+.h1snxaxy{overflow:hidden;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);padding:var(--fds-spacing-16);min-width:23rem;}:where(body.fds-breakpoint-sm-max) .h1snxaxy{min-width:unset;width:calc(100vw - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xxs) * 2);}
+.l1e4uw6e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}
+.s134rtp9{margin:0 0.5rem;color:var(--fds-colour-text);}
+.p11079xa{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);text-align:left;overflow:hidden;color:var(--fds-colour-text-subtler);}
+.p1bydnw6{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}

package/cjs/shared/component-loading-spinner/component-loading-spinner.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("clsx"),r=require("react"),s=require("../../theme/utils/use-apply-styles.js");require("../../theme/theme-provider/context.js");var t=require("./component-loading-spinner.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(i);exports.ComponentLoadingSpinner=i=>{var{color:a,className:o,size:u}=i,d=e.__rest(i,["color","className","size"]);const c=r.useRef(null);return s.useApplyStyle(c,{[t.tokens.rootSize]:u?`${u}px`:void 0,[t.tokens.rootColour]:a}),n.jsxs("div",Object.assign({ref:c,className:l.default(t.outerRing,o)},d,{"data-testid":"component-loading-spinner",children:[n.jsx("div",{id:"inner1",className:t.innerRing}),n.jsx("div",{id:"inner2",className:l.default(t.innerRing,t.innerRing2)}),n.jsx("div",{id:"inner3",className:l.default(t.innerRing,t.innerRing3)}),n.jsx("div",{id:"inner4",className:l.default(t.innerRing,t.innerRing4)})]}))};
+"use strict";var e=require("../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),n=require("clsx"),r=require("react"),s=require("../../theme/utils/use-apply-styles.js");require("../../theme/theme-provider/context.js"),require("../../theme/utils/use-media-query.js");var t=require("./component-loading-spinner.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(n);exports.ComponentLoadingSpinner=n=>{var{color:a,className:o,size:u}=n,d=e.__rest(n,["color","className","size"]);const c=r.useRef(null);return s.useApplyStyle(c,{[t.tokens.rootSize]:u?`${u}px`:void 0,[t.tokens.rootColour]:a}),i.jsxs("div",Object.assign({ref:c,className:l.default(t.outerRing,o)},d,{"data-testid":"component-loading-spinner",children:[i.jsx("div",{id:"inner1",className:t.innerRing}),i.jsx("div",{id:"inner2",className:l.default(t.innerRing,t.innerRing2)}),i.jsx("div",{id:"inner3",className:l.default(t.innerRing,t.innerRing3)}),i.jsx("div",{id:"inner4",className:l.default(t.innerRing,t.innerRing4)})]}))};
 //# sourceMappingURL=component-loading-spinner.js.map

package/cjs/shared/component-loading-spinner/component-loading-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-loading-spinner.js","sources":["../../../../src/shared/component-loading-spinner/component-loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme/utils\";\nimport * as styles from \"./component-loading-spinner.styles\";\n\ntype BaseProps = Omit<HTMLAttributes<HTMLDivElement>, \"color\">;\n\nexport interface ComponentLoadingSpinnerProps extends BaseProps {\n    /** Measurement in px */\n    size?: number | undefined;\n    /** rgb/hex value or Color token */\n    color?: string | undefined;\n}\n\n/**\n * This component is mainly used within components and is not to be confused\n * with the main loading spinner in animations/loading-spinner\n *\n * By default it inherits the font size and color of the parent container.\n *\n * The font size and color can be customised via the prop or through css.\n *\n * Example:\n * ```\n * const spinner = css`\n *   color: red;\n *   font-size: 1lh;\n * `\n *\n * <ComponentLoadingSpinner className={styles.spinner} />\n * ```\n */\nexport const ComponentLoadingSpinner = ({\n    color,\n    className,\n    size,\n    ...otherProps\n}: ComponentLoadingSpinnerProps): JSX.Element => {\n    const spinnerRef = useRef<HTMLDivElement>(null);\n    useApplyStyle(spinnerRef, {\n        [styles.tokens.rootSize]: size ? `${size}px` : undefined,\n        [styles.tokens.rootColour]: color,\n    });\n\n    return (\n        <div\n            ref={spinnerRef}\n            className={clsx(styles.outerRing, className)}\n            {...otherProps}\n            data-testid={\"component-loading-spinner\"}\n        >\n            <div id=\"inner1\" className={styles.innerRing} />\n            <div\n                id=\"inner2\"\n                className={clsx(styles.innerRing, styles.innerRing2)}\n            />\n            <div\n                id=\"inner3\"\n                className={clsx(styles.innerRing, styles.innerRing3)}\n            />\n            <div\n                id=\"inner4\"\n                className={clsx(styles.innerRing, styles.innerRing4)}\n            />\n        </div>\n    );\n};\n"],"names":["_a","color","className","size","otherProps","__rest","spinnerRef","useRef","useApplyStyle","styles.tokens","rootSize","undefined","rootColour","_jsxs","Object","assign","ref","clsx","styles.outerRing","children","_jsx","id","styles.innerRing","styles.innerRing2","styles.innerRing3","styles.innerRing4"],"mappings":"yYAkCwCA,QAAAC,MACpCA,EAAKC,UACLA,EAASC,KACTA,KACGC,EAAUC,EAAAA,OAAAL,EAJuB,CAAA,QAAA,YAAA,SAMpC,MAAMM,EAAaC,EAAAA,OAAuB,MAM1C,OALAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,EAAAA,OAAcC,UAAWP,EAAO,GAAGA,WAAWQ,EAC/C,CAACF,EAAAA,OAAcG,YAAaX,IAI5BY,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKV,EACLJ,UAAWe,EAAAA,QAAKC,EAAAA,UAAkBhB,IAC9BE,iBACS,4BAA2Be,SAAA,CAExCC,EAAAA,WAAKC,GAAG,SAASnB,UAAWoB,EAAAA,YAC5BF,EAAAA,WACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,YAAkBC,EAAAA,cAEtCH,MAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,EAAAA,UAAkBE,gBAEtCJ,EAAAA,IAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,EAAAA,UAAkBG,EAAAA,iBAEpC"}
+{"version":3,"file":"component-loading-spinner.js","sources":["../../../../src/shared/component-loading-spinner/component-loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme/utils\";\nimport * as styles from \"./component-loading-spinner.styles\";\n\ntype BaseProps = Omit<HTMLAttributes<HTMLDivElement>, \"color\">;\n\nexport interface ComponentLoadingSpinnerProps extends BaseProps {\n    /** Measurement in px */\n    size?: number | undefined;\n    /** rgb/hex value or Color token */\n    color?: string | undefined;\n}\n\n/**\n * This component is mainly used within components and is not to be confused\n * with the main loading spinner in animations/loading-spinner\n *\n * By default it inherits the font size and color of the parent container.\n *\n * The font size and color can be customised via the prop or through css.\n *\n * Example:\n * ```\n * const spinner = css`\n *   color: red;\n *   font-size: 1lh;\n * `\n *\n * <ComponentLoadingSpinner className={styles.spinner} />\n * ```\n */\nexport const ComponentLoadingSpinner = ({\n    color,\n    className,\n    size,\n    ...otherProps\n}: ComponentLoadingSpinnerProps): JSX.Element => {\n    const spinnerRef = useRef<HTMLDivElement>(null);\n    useApplyStyle(spinnerRef, {\n        [styles.tokens.rootSize]: size ? `${size}px` : undefined,\n        [styles.tokens.rootColour]: color,\n    });\n\n    return (\n        <div\n            ref={spinnerRef}\n            className={clsx(styles.outerRing, className)}\n            {...otherProps}\n            data-testid={\"component-loading-spinner\"}\n        >\n            <div id=\"inner1\" className={styles.innerRing} />\n            <div\n                id=\"inner2\"\n                className={clsx(styles.innerRing, styles.innerRing2)}\n            />\n            <div\n                id=\"inner3\"\n                className={clsx(styles.innerRing, styles.innerRing3)}\n            />\n            <div\n                id=\"inner4\"\n                className={clsx(styles.innerRing, styles.innerRing4)}\n            />\n        </div>\n    );\n};\n"],"names":["_a","color","className","size","otherProps","__rest","spinnerRef","useRef","useApplyStyle","styles.tokens","rootSize","undefined","rootColour","_jsxs","Object","assign","ref","clsx","styles.outerRing","children","_jsx","id","styles.innerRing","styles.innerRing2","styles.innerRing3","styles.innerRing4"],"mappings":"ybAkCwCA,QAAAC,MACpCA,EAAKC,UACLA,EAASC,KACTA,KACGC,EAAUC,EAAAA,OAAAL,EAJuB,CAAA,QAAA,YAAA,SAMpC,MAAMM,EAAaC,EAAAA,OAAuB,MAM1C,OALAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,EAAAA,OAAcC,UAAWP,EAAO,GAAGA,WAAWQ,EAC/C,CAACF,EAAAA,OAAcG,YAAaX,IAI5BY,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKV,EACLJ,UAAWe,EAAAA,QAAKC,EAAAA,UAAkBhB,IAC9BE,iBACS,4BAA2Be,SAAA,CAExCC,EAAAA,WAAKC,GAAG,SAASnB,UAAWoB,EAAAA,YAC5BF,EAAAA,WACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,YAAkBC,EAAAA,cAEtCH,MAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,EAAAA,UAAkBE,gBAEtCJ,EAAAA,IAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,EAAAA,UAAkBG,EAAAA,iBAEpC"}

package/cjs/shared/dropdown-list/dropdown-label.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),t=require("react"),i=require("../../external/react-resize-detector/build/index.esm.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js");var n=require("../../theme/tokens/font.js");require("../../theme/tokens/media-query.js");var l=require("../../theme/utils/use-apply-styles.js"),a=require("../../util/string-helper.js"),s=require("./dropdown-label.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(r);exports.DropdownLabel=({bold:r,displayType:d="inline",label:c,searchTerm:o,maxLines:m=2,selected:x,disabled:y,sublabel:p,truncationType:h="middle",variant:b="default"})=>{const f="small"===b?n.Font.Spec["body-size-md"]:n.Font.Spec["body-size-baseline"],T=n.Font.Spec["font-family"],{ref:j,width:S}=i.useResizeDetector(),q=t.useRef(null),L=t.useRef(null);l.useApplyStyle(q,{[s.tokens.primaryText.maxLines]:String(m)}),l.useApplyStyle(L,{[s.tokens.secondaryText.maxLines]:String(m)});const v=t.useCallback((e=>{if("inline"!==d||!S)return!1;return a.StringHelper.getTextWidth(e,`${f} '${T}'`)>S-50}),[S,d,f,T]),g=t.useMemo((()=>v(c)),[v,c]),N=t.useMemo((()=>p&&v(p)),[v,p]),k="middle"===h&&(g||N)?"next-line":d,F=r=>{if(!o)return r;const t=o.toLowerCase().trim(),i=r.toLowerCase().indexOf(t),n=i+o.length;return-1===i?r:e.jsxs(e.Fragment,{children:[c.slice(0,i),e.jsx("span",{className:s.matchedText,children:c.slice(i,n)}),c.slice(n)]})},w=r=>e.jsxs(e.Fragment,{children:[e.jsx("div",{className:u.default(s.baseTruncateStyle,s.truncateFirstLine,1===m&&s.truncateLineSingle),"aria-hidden":!0,children:F(r)}),e.jsx("div",{className:u.default(s.baseTruncateStyle,s.truncateSecondLine,1===m&&s.truncateLineSingle),"aria-hidden":!0,children:F(r)})]});return e.jsxs("div",{ref:j,className:u.default(s.label,"small"===b&&s.labelVariantSmall,"next-line"===k&&s.labelNextLine),children:[e.jsx("div",{ref:q,"aria-label":c,className:u.default(s.primaryText,r&&s.primaryTextBold,y&&s.primaryTextDisabled,!y&&x&&s.primaryTextSelected,"inline"===k&&s.primaryTextLabelInline,"end"===h&&s.primaryTextTruncateEnd),children:"middle"===h&&g?w(c):F(c)}),p&&e.jsx("div",{ref:L,"aria-label":p,className:u.default(s.secondaryText,"inline"===k&&s.secondaryTextLabelInline,"end"===h&&s.secondaryTextTruncateEnd,"next-line"===d?s.secondaryTextNextLine:s.secondaryTextInline),children:"middle"===h&&N?w(p):p})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),t=require("react"),i=require("../../external/react-resize-detector/build/index.esm.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js");var n=require("../../theme/tokens/font.js");require("../../theme/tokens/media-query.js");var l=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js");var a=require("../../util/string-helper.js"),s=require("./dropdown-label.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(r);exports.DropdownLabel=({bold:r,displayType:d="inline",label:c,searchTerm:o,maxLines:m=2,selected:x,disabled:y,sublabel:p,truncationType:h="middle",variant:b="default"})=>{const f="small"===b?n.Font.Spec["body-size-md"]:n.Font.Spec["body-size-baseline"],T=n.Font.Spec["font-family"],{ref:j,width:q}=i.useResizeDetector(),S=t.useRef(null),L=t.useRef(null);l.useApplyStyle(S,{[s.tokens.primaryText.maxLines]:String(m)}),l.useApplyStyle(L,{[s.tokens.secondaryText.maxLines]:String(m)});const v=t.useCallback((e=>{if("inline"!==d||!q)return!1;return a.StringHelper.getTextWidth(e,`${f} '${T}'`)>q-50}),[q,d,f,T]),g=t.useMemo((()=>v(c)),[v,c]),N=t.useMemo((()=>p&&v(p)),[v,p]),k="middle"===h&&(g||N)?"next-line":d,F=r=>{if(!o)return r;const t=o.toLowerCase().trim(),i=r.toLowerCase().indexOf(t),n=i+o.length;return-1===i?r:e.jsxs(e.Fragment,{children:[c.slice(0,i),e.jsx("span",{className:s.matchedText,children:c.slice(i,n)}),c.slice(n)]})},w=r=>e.jsxs(e.Fragment,{children:[e.jsx("div",{className:u.default(s.baseTruncateStyle,s.truncateFirstLine,1===m&&s.truncateLineSingle),"aria-hidden":!0,children:F(r)}),e.jsx("div",{className:u.default(s.baseTruncateStyle,s.truncateSecondLine,1===m&&s.truncateLineSingle),"aria-hidden":!0,children:F(r)})]});return e.jsxs("div",{ref:j,className:u.default(s.label,"small"===b&&s.labelVariantSmall,"next-line"===k&&s.labelNextLine),children:[e.jsx("div",{ref:S,"aria-label":c,className:u.default(s.primaryText,r&&s.primaryTextBold,y&&s.primaryTextDisabled,!y&&x&&s.primaryTextSelected,"inline"===k&&s.primaryTextLabelInline,"end"===h&&s.primaryTextTruncateEnd),children:"middle"===h&&g?w(c):F(c)}),p&&e.jsx("div",{ref:L,"aria-label":p,className:u.default(s.secondaryText,"inline"===k&&s.secondaryTextLabelInline,"end"===h&&s.secondaryTextTruncateEnd,"next-line"===d?s.secondaryTextNextLine:s.secondaryTextInline),children:"middle"===h&&N?w(p):p})]})};
 //# sourceMappingURL=dropdown-label.js.map