@lifesg/react-design-system 3.5.0 → 3.6.0-canary.1

package/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../src/pagination/pagination.tsx"],"sourcesContent":["import { Chevron2LeftIcon } from \"@lifesg/react-icons/chevron-2-left\";\nimport { Chevron2RightIcon } from \"@lifesg/react-icons/chevron-2-right\";\nimport { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronLineLeftIcon } from \"@lifesg/react-icons/chevron-line-left\";\nimport { ChevronLineRightIcon } from \"@lifesg/react-icons/chevron-line-right\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { EllipsisHorizontalIcon } from \"@lifesg/react-icons/ellipsis-horizontal\";\nimport React, { useContext, useEffect, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { InputSelect } from \"../input-select\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Breakpoint } from \"../theme\";\nimport { useId } from \"../util\";\nimport {\n    EllipsisButton,\n    EllipsisContainer,\n    Hover,\n    InputSelectWrapper,\n    InputView,\n    Label,\n    LabelDivider,\n    NavigationButton,\n    PageItem,\n    PaginationList,\n    PaginationMenu,\n    PaginationMobileInput,\n    PaginationWrapper,\n} from \"./pagination.styles\";\nimport { PageSizeItemProps, PaginationProps } from \"./types\";\n\nconst Component = (\n    {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        pageSize = 10,\n        totalItems,\n        activePage,\n        pageSizeOptions = DEFAULT_OPTIONS,\n        showFirstAndLastNav,\n        showPageSizeChanger = false,\n        onPageChange,\n        onPageSizeChange,\n    }: PaginationProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = Breakpoint[\"sm-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n    const [hoverRightButton, setHoverRightButton] = useState(false);\n    const [hoverLeftButton, setHoverLeftButton] = useState(false);\n    const [inputText, setInputText] = useState<string>(\"\");\n\n    const [selectedOption, setSelectedOption] = useState<\n        PageSizeItemProps | undefined\n    >(pageSizeOptions[0]);\n    const [pageSizeLocal, setPageSize] = useState<number>(\n        !isMobile && showPageSizeChanger\n            ? selectedOption\n                ? selectedOption.value\n                : pageSize\n            : pageSize\n    );\n\n    const boundaryRange = 1;\n    const siblingRange = 1;\n\n    const internalId = useId();\n    const paginationId = `${internalId}-pagination`;\n\n    const totalPages = Math.ceil(totalItems / pageSizeLocal);\n    const isFirstPage = activePage === 1;\n    const isLastPage = activePage === totalPages;\n\n    const firstPaginationItem =\n        activePage > 1 ? () => handlePaginationItemClick(1) : undefined;\n    const lastPaginationItem =\n        activePage < totalPages\n            ? () => handlePaginationItemClick(totalPages)\n            : undefined;\n    const prevPaginationItem =\n        activePage > 1\n            ? () => handlePaginationItemClick(activePage - 1)\n            : undefined;\n    const nextPaginationItem =\n        activePage < totalPages\n            ? () =>\n                  handlePaginationItemClick(parseInt(activePage.toString()) + 1)\n            : undefined;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (activePage) {\n            setInputValue(activePage);\n        }\n    }, [activePage]);\n\n    useEffect(() => {\n        setPageSize(pageSize);\n        setSelectedOption(\n            pageSizeOptions.find((option) => option.value === pageSize)\n        );\n    }, [pageSize]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const setInputValue = (value: number) => {\n        setInputText(value.toString());\n    };\n\n    const closeAllTooltips = () => {\n        setHoverRightButton(false);\n        setHoverLeftButton(false);\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handlePaginationItemClick = (pageIndex: number) => {\n        if (onPageChange) {\n            onPageChange(pageIndex);\n            setInputValue(pageIndex);\n        }\n    };\n\n    const handleFastForwardClick = () => {\n        const currentIndex = Math.min(totalPages, activePage + 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(true);\n        setHoverLeftButton(false);\n    };\n\n    const handleFastBackwardClick = () => {\n        const currentIndex = Math.max(1, activePage - 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(false);\n        setHoverLeftButton(true);\n    };\n\n    const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = event.target.value;\n        const numericRegex = /^[0-9]+$/;\n        if (value === undefined || value.length === 0) {\n            setInputText(\"\");\n        } else if (!numericRegex.test(value)) {\n            setInputText(value.replace(/[^0-9]/g, \"\"));\n        } else {\n            const newPage = parseInt(value.replace(/[^0-9]/g, \"\"));\n            setInputValue(Math.max(1, Math.min(totalPages, newPage)));\n        }\n    };\n\n    const handleInputSubmit = (event: React.FormEvent) => {\n        event.preventDefault();\n        if (inputText) {\n            onPageChange?.(parseInt(inputText));\n        }\n    };\n\n    const onHoverRightButton = () => {\n        setHoverRightButton(true);\n    };\n\n    const onBlurRightButton = () => {\n        setHoverRightButton(false);\n    };\n\n    const onHoverLeftButton = () => {\n        setHoverLeftButton(true);\n    };\n\n    const onBlurLeftButton = () => {\n        setHoverLeftButton(false);\n    };\n\n    const handleListItemClick = (item: PageSizeItemProps) => {\n        setSelectedOption(item);\n        const pagesize = item.value;\n        const totalPage = Math.ceil(totalItems / pagesize);\n\n        setPageSize(pagesize);\n\n        const page = activePage >= totalPage ? totalPage : activePage;\n\n        if (onPageSizeChange) {\n            onPageSizeChange(page, pagesize);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPaginationItems = () => {\n        return [...Array(totalPages)].map((e, i) => {\n            const pageIndex = i + 1;\n            const startRange = boundaryRange + 2 + siblingRange * 2;\n            const endRange = totalPages - startRange;\n            const totalRange = (boundaryRange + siblingRange) * 2 + 3;\n            const active = activePage === pageIndex;\n            if (totalPages <= totalRange) {\n                return (\n                    <PageItem\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        $selected={active}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </PageItem>\n                );\n            }\n\n            const ellipsisStart =\n                activePage + siblingRange > startRange &&\n                pageIndex === boundaryRange + 1;\n            if (ellipsisStart) {\n                return renderStartEllipsis(pageIndex);\n            }\n\n            const ellipsisEnd =\n                activePage - siblingRange <= endRange &&\n                pageIndex === totalPages - boundaryRange - 1;\n            if (ellipsisEnd) {\n                return renderEndEllipsis(pageIndex);\n            }\n\n            const paginationStart =\n                (pageIndex <= startRange &&\n                    activePage + siblingRange <= startRange) ||\n                pageIndex <= boundaryRange;\n            const paginationMiddle =\n                pageIndex === activePage ||\n                (pageIndex <= activePage + siblingRange &&\n                    pageIndex >= activePage - siblingRange - 1);\n            const paginationEnd =\n                (pageIndex > endRange &&\n                    activePage - siblingRange > endRange) ||\n                pageIndex > totalPages - boundaryRange;\n            if (paginationStart || paginationMiddle || paginationEnd) {\n                return (\n                    <PageItem\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        $selected={active}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </PageItem>\n                );\n            }\n\n            return null;\n        });\n    };\n\n    const renderStartEllipsis = (pageIndex: number) => (\n        <EllipsisContainer key={pageIndex}>\n            <EllipsisButton\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Previous 5 pages\"}\n                onMouseEnter={onHoverLeftButton}\n                onMouseLeave={onBlurLeftButton}\n                onFocus={onHoverLeftButton}\n                onBlur={onBlurLeftButton}\n                onClick={handleFastBackwardClick}\n            >\n                {hoverLeftButton ? (\n                    <Chevron2LeftIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </EllipsisButton>\n            {hoverLeftButton && <Hover>Previous 5 pages</Hover>}\n        </EllipsisContainer>\n    );\n\n    const renderEndEllipsis = (pageIndex: number) => (\n        <EllipsisContainer key={pageIndex}>\n            <EllipsisButton\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Next 5 pages\"}\n                onMouseEnter={onHoverRightButton}\n                onMouseLeave={onBlurRightButton}\n                onFocus={onHoverRightButton}\n                onBlur={onBlurRightButton}\n                onClick={handleFastForwardClick}\n            >\n                {hoverRightButton ? (\n                    <Chevron2RightIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </EllipsisButton>\n            {hoverRightButton && <Hover>Next 5 pages</Hover>}\n        </EllipsisContainer>\n    );\n\n    const renderMobile = () => (\n        <PaginationMobileInput>\n            <form onSubmit={handleInputSubmit}>\n                <InputView\n                    value={inputText}\n                    onChange={handleInput}\n                    autoComplete=\"off\"\n                    type=\"numeric\"\n                    id={(id || \"pagination\") + \"-input\"}\n                    data-testid={(dataTestId || \"pagination\") + \"-input\"}\n                    aria-label={`Page ${activePage} of ${totalPages}`}\n                />\n            </form>\n            <LabelDivider>/</LabelDivider>\n            <Label>{totalPages}</Label>\n        </PaginationMobileInput>\n    );\n\n    return (\n        <PaginationWrapper\n            className={className}\n            ref={ref}\n            id={id || \"pagination-wrapper\"}\n            data-testid={dataTestId || \"pagination\"}\n            aria-labelledby={paginationId}\n        >\n            <VisuallyHidden id={paginationId} aria-hidden>\n                pagination\n            </VisuallyHidden>\n            <PaginationList>\n                <PaginationMenu>\n                    {showFirstAndLastNav && (\n                        <NavigationButton\n                            onClick={firstPaginationItem}\n                            disabled={isFirstPage}\n                            focusHighlight={false}\n                            $position=\"left\"\n                            aria-label=\"First page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineLeftIcon aria-hidden />\n                        </NavigationButton>\n                    )}\n                    <NavigationButton\n                        onClick={prevPaginationItem}\n                        disabled={isFirstPage}\n                        focusHighlight={false}\n                        $position=\"left\"\n                        aria-label=\"Previous page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronLeftIcon aria-hidden />\n                    </NavigationButton>\n                    {isMobile ? renderMobile() : renderPaginationItems()}\n                    <NavigationButton\n                        onClick={nextPaginationItem}\n                        disabled={isLastPage}\n                        focusHighlight={false}\n                        $position=\"right\"\n                        aria-label=\"Next page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronRightIcon aria-hidden />\n                    </NavigationButton>\n                    {showFirstAndLastNav && (\n                        <NavigationButton\n                            onClick={lastPaginationItem}\n                            disabled={isLastPage}\n                            focusHighlight={false}\n                            $position=\"right\"\n                            aria-label=\"Last page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineRightIcon aria-hidden />\n                        </NavigationButton>\n                    )}\n                </PaginationMenu>\n            </PaginationList>\n            {showPageSizeChanger && !isMobile && (\n                <InputSelectWrapper>\n                    <VisuallyHidden id={`${paginationId}-page-size`}>\n                        Items per page\n                    </VisuallyHidden>\n                    <InputSelect\n                        aria-labelledby={`${paginationId}-page-size`}\n                        options={pageSizeOptions}\n                        valueExtractor={(item) => item.value}\n                        listExtractor={(item) => item.label}\n                        displayValueExtractor={(item) => item.label}\n                        selectedOption={selectedOption}\n                        onSelectOption={handleListItemClick}\n                    />\n                </InputSelectWrapper>\n            )}\n        </PaginationWrapper>\n    );\n};\nexport const Pagination = React.forwardRef(Component);\n\nconst DEFAULT_OPTIONS: PageSizeItemProps[] = [\n    { value: 10, label: \"10 per page\" },\n    { value: 20, label: \"20 per page\" },\n    { value: 30, label: \"30 per page\" },\n];\n"],"names":["Pagination","React","forwardRef","id","dataTestId","className","pageSize","totalItems","activePage","pageSizeOptions","DEFAULT_OPTIONS","showFirstAndLastNav","showPageSizeChanger","onPageChange","onPageSizeChange","ref","theme","useContext","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","selectedOption","setSelectedOption","pageSizeLocal","setPageSize","value","paginationId","useId","totalPages","Math","ceil","isFirstPage","isLastPage","firstPaginationItem","handlePaginationItemClick","undefined","lastPaginationItem","prevPaginationItem","nextPaginationItem","parseInt","toString","useEffect","setInputValue","find","option","closeAllTooltips","pageIndex","handleFastForwardClick","currentIndex","min","handleFastBackwardClick","max","handleInput","event","target","length","test","newPage","replace","handleInputSubmit","preventDefault","onHoverRightButton","onBlurRightButton","onHoverLeftButton","onBlurLeftButton","renderStartEllipsis","_jsxs","EllipsisContainer","children","_jsx","EllipsisButton","focusHighlight","focusOutline","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","Chevron2LeftIcon","EllipsisHorizontalIcon","Hover","renderEndEllipsis","Chevron2RightIcon","PaginationWrapper","VisuallyHidden","PaginationList","PaginationMenu","NavigationButton","disabled","$position","ChevronLineLeftIcon","ChevronLeftIcon","PaginationMobileInput","onSubmit","InputView","onChange","autoComplete","type","LabelDivider","Label","Array","map","e","i","endRange","boundaryRange","active","PageItem","onMouseOver","ChevronRightIcon","ChevronLineRightIcon","InputSelectWrapper","InputSelect","options","valueExtractor","item","listExtractor","label","displayValueExtractor","onSelectOption","pagesize","totalPage"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../src/pagination/pagination.tsx"],"sourcesContent":["import { Chevron2LeftIcon } from \"@lifesg/react-icons/chevron-2-left\";\nimport { Chevron2RightIcon } from \"@lifesg/react-icons/chevron-2-right\";\nimport { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronLineLeftIcon } from \"@lifesg/react-icons/chevron-line-left\";\nimport { ChevronLineRightIcon } from \"@lifesg/react-icons/chevron-line-right\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { EllipsisHorizontalIcon } from \"@lifesg/react-icons/ellipsis-horizontal\";\nimport React, { useContext, useEffect, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { InputSelect } from \"../input-select\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Breakpoint } from \"../theme\";\nimport { useId } from \"../util\";\nimport {\n    EllipsisButton,\n    EllipsisContainer,\n    Hover,\n    InputSelectWrapper,\n    InputView,\n    Label,\n    LabelDivider,\n    NavigationButton,\n    PageItem,\n    PaginationList,\n    PaginationMenu,\n    PaginationMobileInput,\n    PaginationWrapper,\n} from \"./pagination.styles\";\nimport { PageSizeItemProps, PaginationProps } from \"./types\";\n\nconst getPageSizeOption = (\n    pageSizeOptions: PageSizeItemProps[],\n    value: number\n) =>\n    pageSizeOptions.find((option) => option.value === value) ??\n    pageSizeOptions[0];\n\nconst Component = (\n    {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        pageSize = 10,\n        totalItems,\n        activePage,\n        pageSizeOptions = DEFAULT_OPTIONS,\n        showFirstAndLastNav,\n        showPageSizeChanger = false,\n        variant = \"default\",\n        onPageChange,\n        onPageSizeChange,\n    }: PaginationProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = Breakpoint[\"sm-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n    const resolvedVariant =\n        variant === \"default\" ? (isMobile ? \"compact\" : \"full\") : variant;\n    const usesPageSizeChanger =\n        showPageSizeChanger && resolvedVariant === \"full\";\n\n    const [hoverRightButton, setHoverRightButton] = useState(false);\n    const [hoverLeftButton, setHoverLeftButton] = useState(false);\n    const [inputText, setInputText] = useState<string>(\"\");\n\n    const [pageSizeLocal, setPageSize] = useState<number>(pageSize);\n    const selectedOption = getPageSizeOption(pageSizeOptions, pageSizeLocal);\n\n    const boundaryRange = 1;\n    const siblingRange = 1;\n\n    const internalId = useId();\n    const paginationId = `${internalId}-pagination`;\n\n    const totalPages = Math.ceil(totalItems / pageSizeLocal);\n    const isFirstPage = activePage === 1;\n    const isLastPage = activePage === totalPages;\n\n    const firstPaginationItem =\n        activePage > 1 ? () => handlePaginationItemClick(1) : undefined;\n    const lastPaginationItem =\n        activePage < totalPages\n            ? () => handlePaginationItemClick(totalPages)\n            : undefined;\n    const prevPaginationItem =\n        activePage > 1\n            ? () => handlePaginationItemClick(activePage - 1)\n            : undefined;\n    const nextPaginationItem =\n        activePage < totalPages\n            ? () =>\n                  handlePaginationItemClick(parseInt(activePage.toString()) + 1)\n            : undefined;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (activePage) {\n            setInputValue(activePage);\n        }\n    }, [activePage]);\n\n    useEffect(() => {\n        setPageSize(pageSize);\n    }, [pageSize]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const setInputValue = (value: number) => {\n        setInputText(value.toString());\n    };\n\n    const closeAllTooltips = () => {\n        setHoverRightButton(false);\n        setHoverLeftButton(false);\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handlePaginationItemClick = (pageIndex: number) => {\n        if (onPageChange) {\n            onPageChange(pageIndex);\n            setInputValue(pageIndex);\n        }\n    };\n\n    const handleFastForwardClick = () => {\n        const currentIndex = Math.min(totalPages, activePage + 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(true);\n        setHoverLeftButton(false);\n    };\n\n    const handleFastBackwardClick = () => {\n        const currentIndex = Math.max(1, activePage - 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(false);\n        setHoverLeftButton(true);\n    };\n\n    const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = event.target.value;\n        const numericRegex = /^[0-9]+$/;\n        if (value === undefined || value.length === 0) {\n            setInputText(\"\");\n        } else if (!numericRegex.test(value)) {\n            setInputText(value.replace(/[^0-9]/g, \"\"));\n        } else {\n            const newPage = parseInt(value.replace(/[^0-9]/g, \"\"));\n            setInputValue(Math.max(1, Math.min(totalPages, newPage)));\n        }\n    };\n\n    const handleInputSubmit = (event: React.FormEvent) => {\n        event.preventDefault();\n        if (inputText) {\n            onPageChange?.(parseInt(inputText));\n        }\n    };\n\n    const onHoverRightButton = () => {\n        setHoverRightButton(true);\n    };\n\n    const onBlurRightButton = () => {\n        setHoverRightButton(false);\n    };\n\n    const onHoverLeftButton = () => {\n        setHoverLeftButton(true);\n    };\n\n    const onBlurLeftButton = () => {\n        setHoverLeftButton(false);\n    };\n\n    const handleListItemClick = (item: PageSizeItemProps) => {\n        const pagesize = item.value;\n        const totalPage = Math.ceil(totalItems / pagesize);\n\n        setPageSize(pagesize);\n\n        const page = activePage >= totalPage ? totalPage : activePage;\n\n        if (onPageSizeChange) {\n            onPageSizeChange(page, pagesize);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPaginationItems = () => {\n        return [...Array(totalPages)].map((e, i) => {\n            const pageIndex = i + 1;\n            const startRange = boundaryRange + 2 + siblingRange * 2;\n            const endRange = totalPages - startRange;\n            const totalRange = (boundaryRange + siblingRange) * 2 + 3;\n            const active = activePage === pageIndex;\n            if (totalPages <= totalRange) {\n                return (\n                    <PageItem\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        $selected={active}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </PageItem>\n                );\n            }\n\n            const ellipsisStart =\n                activePage + siblingRange > startRange &&\n                pageIndex === boundaryRange + 1;\n            if (ellipsisStart) {\n                return renderStartEllipsis(pageIndex);\n            }\n\n            const ellipsisEnd =\n                activePage - siblingRange <= endRange &&\n                pageIndex === totalPages - boundaryRange - 1;\n            if (ellipsisEnd) {\n                return renderEndEllipsis(pageIndex);\n            }\n\n            const paginationStart =\n                (pageIndex <= startRange &&\n                    activePage + siblingRange <= startRange) ||\n                pageIndex <= boundaryRange;\n            const paginationMiddle =\n                pageIndex === activePage ||\n                (pageIndex <= activePage + siblingRange &&\n                    pageIndex >= activePage - siblingRange - 1);\n            const paginationEnd =\n                (pageIndex > endRange &&\n                    activePage - siblingRange > endRange) ||\n                pageIndex > totalPages - boundaryRange;\n            if (paginationStart || paginationMiddle || paginationEnd) {\n                return (\n                    <PageItem\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        $selected={active}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </PageItem>\n                );\n            }\n\n            return null;\n        });\n    };\n\n    const renderStartEllipsis = (pageIndex: number) => (\n        <EllipsisContainer key={pageIndex}>\n            <EllipsisButton\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Previous 5 pages\"}\n                onMouseEnter={onHoverLeftButton}\n                onMouseLeave={onBlurLeftButton}\n                onFocus={onHoverLeftButton}\n                onBlur={onBlurLeftButton}\n                onClick={handleFastBackwardClick}\n            >\n                {hoverLeftButton ? (\n                    <Chevron2LeftIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </EllipsisButton>\n            {hoverLeftButton && <Hover>Previous 5 pages</Hover>}\n        </EllipsisContainer>\n    );\n\n    const renderEndEllipsis = (pageIndex: number) => (\n        <EllipsisContainer key={pageIndex}>\n            <EllipsisButton\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Next 5 pages\"}\n                onMouseEnter={onHoverRightButton}\n                onMouseLeave={onBlurRightButton}\n                onFocus={onHoverRightButton}\n                onBlur={onBlurRightButton}\n                onClick={handleFastForwardClick}\n            >\n                {hoverRightButton ? (\n                    <Chevron2RightIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </EllipsisButton>\n            {hoverRightButton && <Hover>Next 5 pages</Hover>}\n        </EllipsisContainer>\n    );\n\n    const renderMobile = () => (\n        <PaginationMobileInput>\n            <form onSubmit={handleInputSubmit}>\n                <InputView\n                    value={inputText}\n                    onChange={handleInput}\n                    autoComplete=\"off\"\n                    type=\"numeric\"\n                    id={(id || \"pagination\") + \"-input\"}\n                    data-testid={(dataTestId || \"pagination\") + \"-input\"}\n                    aria-label={`Page ${activePage} of ${totalPages}`}\n                />\n            </form>\n            <LabelDivider>/</LabelDivider>\n            <Label>{totalPages}</Label>\n        </PaginationMobileInput>\n    );\n\n    return (\n        <PaginationWrapper\n            className={className}\n            ref={ref}\n            id={id || \"pagination-wrapper\"}\n            data-testid={dataTestId || \"pagination\"}\n            aria-labelledby={paginationId}\n        >\n            <VisuallyHidden id={paginationId} aria-hidden>\n                pagination\n            </VisuallyHidden>\n            <PaginationList>\n                <PaginationMenu>\n                    {showFirstAndLastNav && (\n                        <NavigationButton\n                            onClick={firstPaginationItem}\n                            disabled={isFirstPage}\n                            focusHighlight={false}\n                            $position=\"left\"\n                            aria-label=\"First page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineLeftIcon aria-hidden />\n                        </NavigationButton>\n                    )}\n                    <NavigationButton\n                        onClick={prevPaginationItem}\n                        disabled={isFirstPage}\n                        focusHighlight={false}\n                        $position=\"left\"\n                        aria-label=\"Previous page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronLeftIcon aria-hidden />\n                    </NavigationButton>\n                    {resolvedVariant === \"compact\"\n                        ? renderMobile()\n                        : renderPaginationItems()}\n                    <NavigationButton\n                        onClick={nextPaginationItem}\n                        disabled={isLastPage}\n                        focusHighlight={false}\n                        $position=\"right\"\n                        aria-label=\"Next page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronRightIcon aria-hidden />\n                    </NavigationButton>\n                    {showFirstAndLastNav && (\n                        <NavigationButton\n                            onClick={lastPaginationItem}\n                            disabled={isLastPage}\n                            focusHighlight={false}\n                            $position=\"right\"\n                            aria-label=\"Last page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineRightIcon aria-hidden />\n                        </NavigationButton>\n                    )}\n                </PaginationMenu>\n            </PaginationList>\n            {usesPageSizeChanger && (\n                <InputSelectWrapper>\n                    <VisuallyHidden id={`${paginationId}-page-size`}>\n                        Items per page\n                    </VisuallyHidden>\n                    <InputSelect\n                        aria-labelledby={`${paginationId}-page-size`}\n                        options={pageSizeOptions}\n                        valueExtractor={(item) => item.value}\n                        listExtractor={(item) => item.label}\n                        displayValueExtractor={(item) => item.label}\n                        selectedOption={selectedOption}\n                        onSelectOption={handleListItemClick}\n                    />\n                </InputSelectWrapper>\n            )}\n        </PaginationWrapper>\n    );\n};\nexport const Pagination = React.forwardRef(Component);\n\nconst DEFAULT_OPTIONS: PageSizeItemProps[] = [\n    { value: 10, label: \"10 per page\" },\n    { value: 20, label: \"20 per page\" },\n    { value: 30, label: \"30 per page\" },\n];\n"],"names":["Pagination","React","forwardRef","id","dataTestId","className","pageSize","totalItems","activePage","pageSizeOptions","DEFAULT_OPTIONS","showFirstAndLastNav","showPageSizeChanger","variant","onPageChange","onPageSizeChange","ref","theme","useContext","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","resolvedVariant","usesPageSizeChanger","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","pageSizeLocal","setPageSize","selectedOption","value","_a","find","option","getPageSizeOption","paginationId","useId","totalPages","Math","ceil","isFirstPage","isLastPage","firstPaginationItem","handlePaginationItemClick","undefined","lastPaginationItem","prevPaginationItem","nextPaginationItem","parseInt","toString","useEffect","setInputValue","closeAllTooltips","pageIndex","handleFastForwardClick","currentIndex","min","handleFastBackwardClick","max","handleInput","event","target","length","test","newPage","replace","handleInputSubmit","preventDefault","onHoverRightButton","onBlurRightButton","onHoverLeftButton","onBlurLeftButton","renderStartEllipsis","_jsxs","EllipsisContainer","children","_jsx","EllipsisButton","focusHighlight","focusOutline","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","Chevron2LeftIcon","EllipsisHorizontalIcon","Hover","renderEndEllipsis","Chevron2RightIcon","PaginationWrapper","VisuallyHidden","PaginationList","PaginationMenu","NavigationButton","disabled","$position","ChevronLineLeftIcon","ChevronLeftIcon","PaginationMobileInput","onSubmit","InputView","onChange","autoComplete","type","LabelDivider","Label","Array","map","e","i","endRange","boundaryRange","active","PageItem","onMouseOver","ChevronRightIcon","ChevronLineRightIcon","InputSelectWrapper","InputSelect","options","valueExtractor","item","listExtractor","label","displayValueExtractor","onSelectOption","pagesize","totalPage"],"mappings":"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"}

package/pagination/types.d.ts

@@ -8,6 +8,7 @@ export interface PaginationProps {
     pageSizeOptions?: PageSizeItemProps[] | undefined;
     showFirstAndLastNav?: boolean | undefined;
     showPageSizeChanger?: boolean | undefined;
+    variant?: "default" | "full" | "compact" | undefined;
     onPageChange?: ((page: number) => void) | undefined;
     onPageSizeChange?: ((page: number, pageSize: number) => void) | undefined;
 }

package/select-histogram/types.d.ts

@@ -12,7 +12,7 @@ export interface SelectHistogramProps extends Pick<AriaAttributes, "aria-labelle
     error?: boolean | undefined;
     id?: string | undefined;
     histogramSlider: SelectHistogramSliderProps;
-    /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Values: "middle" | "end" */
+    /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Specify "none" to display the text in full. Values: "middle" | "end" | "none" */
     optionTruncationType?: TruncateType | undefined;
     placeholder?: string | undefined;
     rangeLabelPrefix?: string | undefined;

package/shared/dropdown-list/dropdown-label.d.ts

@@ -1,4 +1,4 @@
-import { DropdownVariantType, LabelDisplayType } from "./types";
+import { DropdownVariantType, LabelDisplayType, TruncateType } from "./types";
 interface DropdownLabelProps {
     bold?: boolean | undefined;
     displayType?: LabelDisplayType | undefined;
@@ -8,7 +8,7 @@ interface DropdownLabelProps {
     selected?: boolean | undefined;
     disabled?: boolean | undefined;
     sublabel?: string | undefined;
-    truncationType?: "middle" | "end" | undefined;
+    truncationType?: TruncateType | undefined;
     variant?: DropdownVariantType | undefined;
 }
 export declare const DropdownLabel: ({ bold, displayType, label, searchTerm, maxLines, selected, disabled, sublabel, truncationType, variant, }: DropdownLabelProps) => JSX.Element;

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import{useContext as t,useCallback as l,useMemo as n}from"react";import{useResizeDetector as a}from"../../external/react-resize-detector/build/index.esm.js";import{ThemeContext as d}from"styled-components";import{Font as s}from"../../theme/index.js";import{StringHelper as m}from"../../util/string-helper.js";import{Label as o,PrimaryText as c,SecondaryText as p,TruncateFirstLine as h,TruncateSecondLine as b,MatchedText as f}from"./dropdown-label.styles.js";const $=({bold:$,displayType:y="inline",label:u,searchTerm:x,maxLines:T=2,selected:L,disabled:j,sublabel:w,truncationType:g="middle",variant:v="default"})=>{const z=t(d),S="small"===v?s.Spec["body-size-md"]({theme:z}):s.Spec["body-size-baseline"]({theme:z}),C=s.Spec["font-family"]({theme:z}),{ref:D,width:O}=a(),W=l((e=>{if("inline"!==y||!O)return!1;return m.getTextWidth(e,`${S} '${C}'`)>O*T-50}),[O,y,S,C,T]),k=n((()=>W(u)),[W,u]),q=n((()=>w&&W(w)),[W,w]),A=t=>{if(!x)return t;const l=x.toLowerCase().trim(),n=t.toLowerCase().indexOf(l),a=n+x.length;return-1===n?t:e(r,{children:[u.slice(0,n),i(f,{$variant:v,children:u.slice(n,a)}),u.slice(a)]})},B=t=>e(r,{children:[i(h,{$maxLines:T,"aria-hidden":!0,children:A(t)}),i(b,{$maxLines:T,"aria-hidden":!0,children:A(t)})]});return e(o,{ref:D,$labelDisplayType:k||q?"next-line":y,$variant:v,children:[i(c,{"aria-label":u,$bold:$,$maxLines:T,$selected:L,$disabled:j,$truncateType:g,children:"middle"===g&&k?B(u):A(u)}),w&&i(p,{"aria-label":w,$maxLines:T,$truncateType:g,$labelDisplayType:y,children:"middle"===g&&q?B(w):w})]})};export{$ as DropdownLabel};
+import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import{useContext as t,useCallback as l,useMemo as n}from"react";import{useResizeDetector as a}from"../../external/react-resize-detector/build/index.esm.js";import{ThemeContext as d}from"styled-components";import{Font as s}from"../../theme/index.js";import{StringHelper as m}from"../../util/string-helper.js";import{Label as o,PrimaryText as c,SecondaryText as p,TruncateFirstLine as h,TruncateSecondLine as b,MatchedText as f}from"./dropdown-label.styles.js";const $=({bold:$,displayType:y="inline",label:u,searchTerm:x,maxLines:T=2,selected:L,disabled:j,sublabel:w,truncationType:g="middle",variant:v="default"})=>{const z=t(d),S="small"===v?s.Spec["body-size-md"]({theme:z}):s.Spec["body-size-baseline"]({theme:z}),C=s.Spec["font-family"]({theme:z}),{ref:D,width:O}=a(),W="none"===g,k=l((e=>{if(W||"inline"!==y||!O)return!1;return m.getTextWidth(e,`${S} '${C}'`)>O*T-50}),[W,O,y,S,C,T]),q=n((()=>k(u)),[k,u]),A=n((()=>w&&k(w)),[k,w]),B=t=>{if(!x)return t;const l=x.toLowerCase().trim(),n=t.toLowerCase().indexOf(l),a=n+x.length;return-1===n?t:e(r,{children:[u.slice(0,n),i(f,{$variant:v,children:u.slice(n,a)}),u.slice(a)]})},E=t=>e(r,{children:[i(h,{$maxLines:T,"aria-hidden":!0,children:B(t)}),i(b,{$maxLines:T,"aria-hidden":!0,children:B(t)})]});return e(o,{ref:D,$labelDisplayType:q||A?"next-line":y,$variant:v,children:[i(c,{"aria-label":u,$bold:$,$maxLines:T,$selected:L,$disabled:j,$truncateType:g,children:"middle"===g&&q?E(u):B(u)}),w&&i(p,{"aria-label":w,$maxLines:T,$truncateType:g,$labelDisplayType:y,children:"middle"===g&&A?E(w):w})]})};export{$ as DropdownLabel};
 //# sourceMappingURL=dropdown-label.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-label.js","sources":["../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import { useCallback, useContext, useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\nimport { Font } from \"../../theme\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport { DropdownVariantType, LabelDisplayType } from \"./types\";\nimport {\n    Label,\n    MatchedText,\n    PrimaryText,\n    SecondaryText,\n    TruncateFirstLine,\n    TruncateSecondLine,\n} from \"./dropdown-label.styles\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: \"middle\" | \"end\" | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const theme = useContext(ThemeContext);\n\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]({ theme })\n            : Font.Spec[\"body-size-baseline\"]({ theme });\n    const fontFamily = Font.Spec[\"font-family\"]({ theme });\n    const { ref, width } = useResizeDetector();\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width * maxLines - 50;\n        },\n        [width, displayType, fontSize, fontFamily, maxLines]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        shouldTruncateTitle || shouldTruncateLabel ? \"next-line\" : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <MatchedText $variant={variant}>\n                    {label.slice(startIndex, endIndex)}\n                </MatchedText>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <TruncateFirstLine $maxLines={maxLines} aria-hidden>\n                    {renderMatchInBold(displayText)}\n                </TruncateFirstLine>\n                <TruncateSecondLine $maxLines={maxLines} aria-hidden>\n                    {renderMatchInBold(displayText)}\n                </TruncateSecondLine>\n            </>\n        );\n    };\n\n    return (\n        <Label ref={ref} $labelDisplayType={itemDisplayType} $variant={variant}>\n            <PrimaryText\n                aria-label={label}\n                $bold={bold}\n                $maxLines={maxLines}\n                $selected={selected}\n                $disabled={disabled}\n                $truncateType={truncationType}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </PrimaryText>\n            {sublabel && (\n                <SecondaryText\n                    aria-label={sublabel}\n                    $maxLines={maxLines}\n                    $truncateType={truncationType}\n                    $labelDisplayType={displayType}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </SecondaryText>\n            )}\n        </Label>\n    );\n};\n"],"names":["DropdownLabel","bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","theme","useContext","ThemeContext","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","MatchedText","$variant","renderTruncatedText","TruncateFirstLine","$maxLines","TruncateSecondLine","Label","$labelDisplayType","PrimaryText","$bold","$selected","$disabled","$truncateType","SecondaryText"],"mappings":"4gBA4BO,MAAMA,EAAgB,EACzBC,OACAC,cAAc,SACdC,QACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EAAQC,EAAWC,GAEnBC,EACU,UAAZJ,EACMK,EAAKC,KAAK,gBAAgB,CAAEL,UAC5BI,EAAKC,KAAK,sBAAsB,CAAEL,UACtCM,EAAaF,EAAKC,KAAK,eAAe,CAAEL,WACxCO,IAAEA,EAAGC,MAAEA,GAAUC,IAKjBC,EAAuBC,GACxBC,IACG,GAAoB,WAAhBrB,IAA6BiB,EAC7B,OAAO,EAaX,OAPkBK,EAAaC,aAC3BF,EACA,GAAGT,MAAaG,MAKDE,EAAQd,EAAW,EAAE,GAE5C,CAACc,EAAOjB,EAAaY,EAAUG,EAAYZ,IAMzCqB,EAAsBC,GACxB,IAAMN,EAAqBlB,IAC3B,CAACkB,EAAsBlB,IAErByB,EAAsBD,GACxB,IAAMnB,GAAYa,EAAqBb,IACvC,CAACa,EAAsBb,IAWrBqB,EAAqBN,IACvB,IAAKnB,EACD,OAAOmB,EAGX,MAAMO,EAAQ1B,EAAW2B,cAAcC,OACjCC,EAAaV,EAAYQ,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAa7B,EAAWgC,OAEzC,OAAmB,IAAfH,EACOV,EAIPc,EAAAC,EAAA,CAAAC,SAAA,CACKpC,EAAMqC,MAAM,EAAGP,GAChBQ,EAACC,EAAW,CAAAC,SAAWjC,EAAO6B,SACzBpC,EAAMqC,MAAMP,EAAYE,KAE5BhC,EAAMqC,MAAML,KACd,EAILS,EAAuBrB,GAErBc,EAAAC,EAAA,CAAAC,SAAA,CACIE,EAACI,EAAiB,CAAAC,UAAYzC,EAAQ,eAAA,EAAAkC,SACjCV,EAAkBN,KAEvBkB,EAACM,EAAkB,CAAAD,UAAYzC,EAAQ,eAAA,EAAAkC,SAClCV,EAAkBN,QAMnC,OACIc,EAACW,EAAK,CAAC9B,IAAKA,EAAG+B,kBA3CfvB,GAAuBE,EAAsB,YAAc1B,EA2CRyC,SAAYjC,EAAO6B,SAAA,CAClEE,EAACS,EAAW,CAAA,aACI/C,EAAKgD,MACVlD,EAAI6C,UACAzC,EAAQ+C,UACR9C,EAAQ+C,UACR9C,EAAQ+C,cACJ7C,EAAc8B,SAET,WAAnB9B,GAA+BiB,EAC1BkB,EAAoBzC,GACpB0B,EAAkB1B,KAE3BK,GACGiC,EAACc,gBACe/C,EAAQsC,UACTzC,EAAQiD,cACJ7C,EAAcwC,kBACV/C,EAAWqC,SAEV,WAAnB9B,GAA+BmB,EAC1BgB,EAAoBpC,GACpBA,MAGV"}
+{"version":3,"file":"dropdown-label.js","sources":["../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import { useCallback, useContext, useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\nimport { Font } from \"../../theme\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport { DropdownVariantType, LabelDisplayType, TruncateType } from \"./types\";\nimport {\n    Label,\n    MatchedText,\n    PrimaryText,\n    SecondaryText,\n    TruncateFirstLine,\n    TruncateSecondLine,\n} from \"./dropdown-label.styles\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: TruncateType | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const theme = useContext(ThemeContext);\n\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]({ theme })\n            : Font.Spec[\"body-size-baseline\"]({ theme });\n    const fontFamily = Font.Spec[\"font-family\"]({ theme });\n    const { ref, width } = useResizeDetector();\n\n    const noTruncation = truncationType === \"none\";\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (noTruncation || displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width * maxLines - 50;\n        },\n        [noTruncation, width, displayType, fontSize, fontFamily, maxLines]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        shouldTruncateTitle || shouldTruncateLabel ? \"next-line\" : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <MatchedText $variant={variant}>\n                    {label.slice(startIndex, endIndex)}\n                </MatchedText>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <TruncateFirstLine $maxLines={maxLines} aria-hidden>\n                    {renderMatchInBold(displayText)}\n                </TruncateFirstLine>\n                <TruncateSecondLine $maxLines={maxLines} aria-hidden>\n                    {renderMatchInBold(displayText)}\n                </TruncateSecondLine>\n            </>\n        );\n    };\n\n    return (\n        <Label ref={ref} $labelDisplayType={itemDisplayType} $variant={variant}>\n            <PrimaryText\n                aria-label={label}\n                $bold={bold}\n                $maxLines={maxLines}\n                $selected={selected}\n                $disabled={disabled}\n                $truncateType={truncationType}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </PrimaryText>\n            {sublabel && (\n                <SecondaryText\n                    aria-label={sublabel}\n                    $maxLines={maxLines}\n                    $truncateType={truncationType}\n                    $labelDisplayType={displayType}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </SecondaryText>\n            )}\n        </Label>\n    );\n};\n"],"names":["DropdownLabel","bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","theme","useContext","ThemeContext","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","noTruncation","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","MatchedText","$variant","renderTruncatedText","TruncateFirstLine","$maxLines","TruncateSecondLine","Label","$labelDisplayType","PrimaryText","$bold","$selected","$disabled","$truncateType","SecondaryText"],"mappings":"4gBA4BO,MAAMA,EAAgB,EACzBC,OACAC,cAAc,SACdC,QACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EAAQC,EAAWC,GAEnBC,EACU,UAAZJ,EACMK,EAAKC,KAAK,gBAAgB,CAAEL,UAC5BI,EAAKC,KAAK,sBAAsB,CAAEL,UACtCM,EAAaF,EAAKC,KAAK,eAAe,CAAEL,WACxCO,IAAEA,EAAGC,MAAEA,GAAUC,IAEjBC,EAAkC,SAAnBZ,EAKfa,EAAuBC,GACxBC,IACG,GAAIH,GAAgC,WAAhBnB,IAA6BiB,EAC7C,OAAO,EAaX,OAPkBM,EAAaC,aAC3BF,EACA,GAAGV,MAAaG,MAKDE,EAAQd,EAAW,EAAE,GAE5C,CAACgB,EAAcF,EAAOjB,EAAaY,EAAUG,EAAYZ,IAMvDsB,EAAsBC,GACxB,IAAMN,EAAqBnB,IAC3B,CAACmB,EAAsBnB,IAErB0B,EAAsBD,GACxB,IAAMpB,GAAYc,EAAqBd,IACvC,CAACc,EAAsBd,IAWrBsB,EAAqBN,IACvB,IAAKpB,EACD,OAAOoB,EAGX,MAAMO,EAAQ3B,EAAW4B,cAAcC,OACjCC,EAAaV,EAAYQ,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAa9B,EAAWiC,OAEzC,OAAmB,IAAfH,EACOV,EAIPc,EAAAC,EAAA,CAAAC,SAAA,CACKrC,EAAMsC,MAAM,EAAGP,GAChBQ,EAACC,EAAW,CAAAC,SAAWlC,EAAO8B,SACzBrC,EAAMsC,MAAMP,EAAYE,KAE5BjC,EAAMsC,MAAML,KACd,EAILS,EAAuBrB,GAErBc,EAAAC,EAAA,CAAAC,SAAA,CACIE,EAACI,EAAiB,CAAAC,UAAY1C,EAAQ,eAAA,EAAAmC,SACjCV,EAAkBN,KAEvBkB,EAACM,EAAkB,CAAAD,UAAY1C,EAAQ,eAAA,EAAAmC,SAClCV,EAAkBN,QAMnC,OACIc,EAACW,EAAK,CAAC/B,IAAKA,EAAGgC,kBA3CfvB,GAAuBE,EAAsB,YAAc3B,EA2CR0C,SAAYlC,EAAO8B,SAAA,CAClEE,EAACS,EAAW,CAAA,aACIhD,EAAKiD,MACVnD,EAAI8C,UACA1C,EAAQgD,UACR/C,EAAQgD,UACR/C,EAAQgD,cACJ9C,EAAc+B,SAET,WAAnB/B,GAA+BkB,EAC1BkB,EAAoB1C,GACpB2B,EAAkB3B,KAE3BK,GACGkC,EAACc,gBACehD,EAAQuC,UACT1C,EAAQkD,cACJ9C,EAAcyC,kBACVhD,EAAWsC,SAEV,WAAnB/B,GAA+BoB,EAC1BgB,EAAoBrC,GACpBA,MAGV"}

package/shared/dropdown-list/types.d.ts

@@ -1,4 +1,4 @@
-export type TruncateType = "middle" | "end";
+export type TruncateType = "middle" | "end" | "none";
 export type ItemsLoadStateType = "loading" | "fail" | "success";
 export type LabelDisplayType = "inline" | "next-line";
 export type DropdownVariantType = "small" | "default";
@@ -58,7 +58,7 @@ export interface DropdownConfigProps {
      * Values: "loading" | "fail" | "success"
      */
     itemsLoadState?: ItemsLoadStateType | undefined;
-    /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Values: "middle" | "end" */
+    /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Specify "none" to display the text in full. Values: "middle" | "end" | "none" */
     itemTruncationType?: TruncateType | undefined;
     /** Specifies the maximum number of lines visible before the label is truncated for "end" type */
     itemMaxLines?: number | undefined;

package/shared/fade-wrapper/fade-wrapper.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import{ChevronLeftIcon as i}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as n}from"@lifesg/react-icons/chevron-right";import l from"../../external/lodash/throttle.js";import{forwardRef as d,useState as c,useRef as s,useImperativeHandle as a,useEffect as f}from"react";import{useResizeDetector as h}from"../../external/react-resize-detector/build/index.esm.js";import{Wrapper as u,Content as m,Fade as p,FadeIndicatorButton as g}from"./fade-wrapper.style.js";const b=d(((d,b)=>{var{children:v,fadeColor:$,fadePosition:j="both",showIndicator:w=!1,onResize:x}=d,z=r(d,["children","fadeColor","fadePosition","showIndicator","onResize"]);const[R,C]=c("left"===j||"both"===j),[I,L]=c("right"===j||"both"===j),W=s(null),y=s(null),k=l(A,50);function A(){const r=W.current,t=y.current;r&&t&&t.scrollWidth>r.offsetWidth?(L(Math.round(t.scrollLeft)<t.scrollWidth-t.offsetWidth),C(t.scrollLeft>=1)):(L(!1),C(!1))}function E(){A(),x&&x({content:y.current,wrapper:W.current})}h({onResize:E,targetRef:W,refreshMode:"debounce",refreshRate:50}),a(b,(()=>({resize(){E()}}))),f((()=>{const r=y.current;return A(),r&&r.addEventListener("scroll",k),()=>{r&&r.removeEventListener("scroll",k)}}),[]);return t(u,Object.assign({ref:W},z,{children:[e(m,{ref:y,children:v}),(()=>{let r;return r=Array.isArray($)&&$.length>0?{left:$,right:$}:$||{left:void 0,right:void 0},t(o,{children:[R&&e(p,{$backgroundColor:r.left,$position:"left",$showIndicator:w,"data-id":"left-fade",children:w&&e(g,{$position:"left","data-id":"left-fade-indicator-button",children:e(i,{})})}),I&&e(p,{$backgroundColor:r.right,$position:"right",$showIndicator:w,"data-id":"right-fade",children:w&&e(g,{$position:"right","data-id":"right-fade-indicator-button",children:e(n,{})})})]})})()]}))}));export{b as FadeWrapper};
+import{__rest as r}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import{ChevronLeftIcon as i}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as n}from"@lifesg/react-icons/chevron-right";import l from"../../external/lodash/throttle.js";import{forwardRef as c,useState as d,useRef as s,useImperativeHandle as a,useEffect as f}from"react";import{useResizeDetector as h}from"../../external/react-resize-detector/build/index.esm.js";import{Wrapper as u,Content as m,Fade as p,FadeIndicatorButton as g}from"./fade-wrapper.style.js";const b=c(((c,b)=>{var{children:v,fadeColor:$,fadePosition:j="both",showIndicator:w=!1,onResize:W}=c,x=r(c,["children","fadeColor","fadePosition","showIndicator","onResize"]);const[z,L]=d("left"===j||"both"===j),[R,C]=d("right"===j||"both"===j),I=s(null),y=s(null),E=l(k,50);function k(){const r=I.current,t=y.current;r&&t&&t.scrollWidth>r.offsetWidth?(C(Math.round(t.scrollLeft)<t.scrollWidth-t.offsetWidth),L(t.scrollLeft>=1)):(C(!1),L(!1))}function A(){k(),W&&W({content:y.current,wrapper:I.current})}h({onResize:A,targetRef:I,refreshMode:"debounce",refreshRate:50}),a(b,(()=>({resize(){A()},scrollToEnd(){const r=y.current,t=I.current;r&&t&&(r.scrollLeft=r.scrollWidth-t.offsetWidth)}}))),f((()=>{const r=y.current;return k(),r&&r.addEventListener("scroll",E),()=>{r&&r.removeEventListener("scroll",E)}}),[]);return t(u,Object.assign({ref:I},x,{children:[e(m,{ref:y,children:v}),(()=>{let r;return r=Array.isArray($)&&$.length>0?{left:$,right:$}:$||{left:void 0,right:void 0},t(o,{children:[z&&e(p,{$backgroundColor:r.left,$position:"left",$showIndicator:w,"data-id":"left-fade",children:w&&e(g,{$position:"left","data-id":"left-fade-indicator-button",children:e(i,{})})}),R&&e(p,{$backgroundColor:r.right,$position:"right",$showIndicator:w,"data-id":"right-fade",children:w&&e(g,{$position:"right","data-id":"right-fade-indicator-button",children:e(n,{})})})]})})()]}))}));export{b as FadeWrapper};
 //# sourceMappingURL=fade-wrapper.js.map

package/shared/fade-wrapper/fade-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade-wrapper.js","sources":["../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport throttle from \"lodash/throttle\";\nimport React, {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n    Content,\n    Fade,\n    FadeIndicatorButton,\n    Wrapper,\n} from \"./fade-wrapper.style\";\nimport { FadeColorSet, FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const throttledScrollHandler = throttle(handleScroll, 50);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n        };\n    }, []);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleScroll() {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n\n        // TODO: Will move this out to Breadcrumb when it uses this component\n        // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n        //     content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        // }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFade = () => {\n        let fadeColorSet: FadeColorSet;\n\n        if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n            // Single array, apply same color\n            fadeColorSet = {\n                left: fadeColor,\n                right: fadeColor,\n            };\n        } else if (!fadeColor) {\n            fadeColorSet = {\n                left: undefined,\n                right: undefined,\n            };\n        } else {\n            fadeColorSet = fadeColor as FadeColorSet;\n        }\n\n        return (\n            <>\n                {showFadeLeft && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.left}\n                        $position=\"left\"\n                        $showIndicator={showIndicator}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"left\"\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n                {showFadeRight && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.right}\n                        $position=\"right\"\n                        $showIndicator={showIndicator}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"right\"\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <Wrapper ref={wrapperRef} {...otherProps}>\n            <Content ref={contentRef}>{children}</Content>\n            {renderFade()}\n        </Wrapper>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","throttledScrollHandler","throttle","handleScroll","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","handleResize","useResizeDetector","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","useEffect","addEventListener","removeEventListener","_jsxs","Wrapper","Object","assign","_jsx","Content","fadeColorSet","Array","isArray","length","left","right","undefined","_Fragment","Fade","$backgroundColor","$position","FadeIndicatorButton","ChevronLeftIcon","$showIndicator","ChevronRightIcon","renderFade"],"mappings":"8kBAmBA,MA2KaA,EAAcC,GA3KT,CACdC,EAQAC,KARA,IAAAC,SACIA,EAAQC,UACRA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQN,EACLO,EAAUC,EAAAR,EANjB,oEAaA,MAAOS,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MAEpCE,EAAyBC,EAASC,EAAc,IAyCtD,SAASA,IACL,MAAMC,EAAUN,EAAWO,QACrBC,EAAUN,EAAWK,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpDX,EACIY,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtCd,EAAgBY,EAAQK,YAAc,KAEtCd,GAAiB,GACjBH,GAAgB,GAExB,CAEA,SAASkB,IACLT,IAEIb,GACAA,EAAS,CACLgB,QAASN,EAAWK,QACpBD,QAASN,EAAWO,SAQhC,CAzEAQ,EAAkB,CACdvB,SAAUsB,EACVE,UAAWhB,EACXiB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIN,GACJ,MAORO,GAAU,KACN,MAAMb,EAAUN,EAAWK,QAQ3B,OANAF,IAEIG,GACAA,EAAQc,iBAAiB,SAAUnB,GAGhC,KACCK,GACAA,EAAQe,oBAAoB,SAAUpB,EAC1C,CACH,GACF,IAwGH,OACIqB,EAACC,EAAOC,OAAAC,OAAA,CAACxC,IAAKa,GAAgBP,EAAU,CAAAL,SAAA,CACpCwC,EAACC,GAAQ1C,IAAKe,EAAUd,SAAGA,IA5DhB,MACf,IAAI0C,EAiBJ,OAbIA,EAFAC,MAAMC,QAAQ3C,IAAcA,EAAU4C,OAAS,EAEhC,CACXC,KAAM7C,EACN8C,MAAO9C,GAEHA,GACO,CACX6C,UAAME,EACND,WAAOC,GAOXZ,EAAAa,EAAA,CAAAjD,SAAA,CACKO,GACGiC,EAACU,EAAI,CAAAC,iBACiBT,EAAaI,KAAIM,UACzB,sBACMjD,EAAa,UACrB,YAAWH,SAElBG,GACGqC,EAACa,EAAmB,CAAAD,UACN,OAAM,UACR,sCAERZ,EAACc,EAAe,CAAA,OAK/B5C,GACG8B,EAACU,oBACqBR,EAAaK,MAAKK,UAC1B,QAAOG,eACDpD,EAAa,UACrB,sBAEPA,GACGqC,EAACa,EAAmB,CAAAD,UACN,QAAO,UACT,8BAA6BpD,SAErCwC,EAACgB,EAAgB,CAAA,SAKlC,EAOFC,MACK"}
+{"version":3,"file":"fade-wrapper.js","sources":["../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport throttle from \"lodash/throttle\";\nimport React, {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n    Content,\n    Fade,\n    FadeIndicatorButton,\n    Wrapper,\n} from \"./fade-wrapper.style\";\nimport { FadeColorSet, FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const throttledScrollHandler = throttle(handleScroll, 50);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n            scrollToEnd() {\n                const content = contentRef.current;\n                const wrapper = wrapperRef.current;\n                if (content && wrapper) {\n                    content.scrollLeft =\n                        content.scrollWidth - wrapper.offsetWidth;\n                }\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n        };\n    }, []);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleScroll() {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n\n        // TODO: Will move this out to Breadcrumb when it uses this component\n        // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n        //     content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        // }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFade = () => {\n        let fadeColorSet: FadeColorSet;\n\n        if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n            // Single array, apply same color\n            fadeColorSet = {\n                left: fadeColor,\n                right: fadeColor,\n            };\n        } else if (!fadeColor) {\n            fadeColorSet = {\n                left: undefined,\n                right: undefined,\n            };\n        } else {\n            fadeColorSet = fadeColor as FadeColorSet;\n        }\n\n        return (\n            <>\n                {showFadeLeft && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.left}\n                        $position=\"left\"\n                        $showIndicator={showIndicator}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"left\"\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n                {showFadeRight && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.right}\n                        $position=\"right\"\n                        $showIndicator={showIndicator}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"right\"\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <Wrapper ref={wrapperRef} {...otherProps}>\n            <Content ref={contentRef}>{children}</Content>\n            {renderFade()}\n        </Wrapper>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","throttledScrollHandler","throttle","handleScroll","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","handleResize","useResizeDetector","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","scrollToEnd","useEffect","addEventListener","removeEventListener","_jsxs","Wrapper","Object","assign","_jsx","Content","fadeColorSet","Array","isArray","length","left","right","undefined","_Fragment","Fade","$backgroundColor","$position","FadeIndicatorButton","ChevronLeftIcon","$showIndicator","ChevronRightIcon","renderFade"],"mappings":"8kBAmBA,MAmLaA,EAAcC,GAnLT,CACdC,EAQAC,KARA,IAAAC,SACIA,EAAQC,UACRA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQN,EACLO,EAAUC,EAAAR,EANjB,oEAaA,MAAOS,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MAEpCE,EAAyBC,EAASC,EAAc,IAiDtD,SAASA,IACL,MAAMC,EAAUN,EAAWO,QACrBC,EAAUN,EAAWK,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpDX,EACIY,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtCd,EAAgBY,EAAQK,YAAc,KAEtCd,GAAiB,GACjBH,GAAgB,GAExB,CAEA,SAASkB,IACLT,IAEIb,GACAA,EAAS,CACLgB,QAASN,EAAWK,QACpBD,QAASN,EAAWO,SAQhC,CAjFAQ,EAAkB,CACdvB,SAAUsB,EACVE,UAAWhB,EACXiB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIN,GACJ,EACA,WAAAO,GACI,MAAMb,EAAUN,EAAWK,QACrBD,EAAUN,EAAWO,QACvBC,GAAWF,IACXE,EAAQK,WACJL,EAAQC,YAAcH,EAAQI,YAE1C,MAORY,GAAU,KACN,MAAMd,EAAUN,EAAWK,QAQ3B,OANAF,IAEIG,GACAA,EAAQe,iBAAiB,SAAUpB,GAGhC,KACCK,GACAA,EAAQgB,oBAAoB,SAAUrB,EAC1C,CACH,GACF,IAwGH,OACIsB,EAACC,EAAOC,OAAAC,OAAA,CAACzC,IAAKa,GAAgBP,EAAU,CAAAL,SAAA,CACpCyC,EAACC,GAAQ3C,IAAKe,EAAUd,SAAGA,IA5DhB,MACf,IAAI2C,EAiBJ,OAbIA,EAFAC,MAAMC,QAAQ5C,IAAcA,EAAU6C,OAAS,EAEhC,CACXC,KAAM9C,EACN+C,MAAO/C,GAEHA,GACO,CACX8C,UAAME,EACND,WAAOC,GAOXZ,EAAAa,EAAA,CAAAlD,SAAA,CACKO,GACGkC,EAACU,EAAI,CAAAC,iBACiBT,EAAaI,KAAIM,UACzB,sBACMlD,EAAa,UACrB,YAAWH,SAElBG,GACGsC,EAACa,EAAmB,CAAAD,UACN,OAAM,UACR,sCAERZ,EAACc,EAAe,CAAA,OAK/B7C,GACG+B,EAACU,oBACqBR,EAAaK,MAAKK,UAC1B,QAAOG,eACDrD,EAAa,UACrB,sBAEPA,GACGsC,EAACa,EAAmB,CAAAD,UACN,QAAO,UACT,8BAA6BrD,SAErCyC,EAACgB,EAAgB,CAAA,SAKlC,EAOFC,MACK"}

package/shared/fade-wrapper/types.d.ts

@@ -19,4 +19,5 @@ export interface FadeWrapperProps {
 }
 export interface FadeWrapperRef {
     resize: () => void;
+    scrollToEnd: () => void;
 }