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

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, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { InputSelect } from \"../input-select\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\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 type { 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 = V3_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 = useRef(SimpleIdGenerator.generate());\n    const paginationId = `${internalId.current}-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                    <InputSelect\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","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","selectedOption","setSelectedOption","pageSizeLocal","setPageSize","value","paginationId","useRef","SimpleIdGenerator","generate","current","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 clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { InputSelect } from \"../input-select\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId, useIsMounted } from \"../util\";\nimport * as styles from \"./pagination.styles\";\nimport type { 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 isMounted = useIsMounted();\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\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        // eslint-disable-next-line react-hooks/exhaustive-deps\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                    <button\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        className={clsx(\n                            styles.pageItem,\n                            active && styles.pageItemSelected\n                        )}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </button>\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                    <button\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        className={clsx(\n                            styles.pageItem,\n                            active && styles.pageItemSelected\n                        )}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </button>\n                );\n            }\n\n            return null;\n        });\n    };\n\n    const renderStartEllipsis = (pageIndex: number) => (\n        <div key={pageIndex} className={styles.ellipsisContainer}>\n            <ClickableIcon\n                className={styles.iconButton}\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            </ClickableIcon>\n            {hoverLeftButton && (\n                <div className={styles.hover}>Previous 5 pages</div>\n            )}\n        </div>\n    );\n\n    const renderEndEllipsis = (pageIndex: number) => (\n        <div key={pageIndex} className={styles.ellipsisContainer}>\n            <ClickableIcon\n                className={styles.iconButton}\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            </ClickableIcon>\n            {hoverRightButton && (\n                <div className={styles.hover}>Next 5 pages</div>\n            )}\n        </div>\n    );\n\n    const renderMobile = () => (\n        <div className={styles.paginationMobileInput}>\n            <form onSubmit={handleInputSubmit}>\n                <Input\n                    className={styles.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            <Typography.BodyBL className={styles.labelDivider}>\n                /\n            </Typography.BodyBL>\n            <Typography.BodyBL className={styles.label}>\n                {totalPages}\n            </Typography.BodyBL>\n        </div>\n    );\n\n    return (\n        <nav\n            className={clsx(styles.paginationWrapper, 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            <div className={styles.paginationList}>\n                <div className={styles.paginationMenu}>\n                    {showFirstAndLastNav && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonNavigation\n                            )}\n                            onClick={firstPaginationItem}\n                            disabled={isFirstPage}\n                            focusHighlight={false}\n                            aria-label=\"First page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineLeftIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n                    <ClickableIcon\n                        className={clsx(\n                            styles.iconButton,\n                            styles.iconButtonNavigation\n                        )}\n                        onClick={prevPaginationItem}\n                        disabled={isFirstPage}\n                        focusHighlight={false}\n                        aria-label=\"Previous page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronLeftIcon aria-hidden />\n                    </ClickableIcon>\n                    {isMounted && isMobile\n                        ? renderMobile()\n                        : renderPaginationItems()}\n                    <ClickableIcon\n                        className={clsx(\n                            styles.iconButton,\n                            styles.iconButtonNavigation\n                        )}\n                        onClick={nextPaginationItem}\n                        disabled={isLastPage}\n                        focusHighlight={false}\n                        aria-label=\"Next page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronRightIcon aria-hidden />\n                    </ClickableIcon>\n                    {showFirstAndLastNav && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonNavigation\n                            )}\n                            onClick={lastPaginationItem}\n                            disabled={isLastPage}\n                            focusHighlight={false}\n                            aria-label=\"Last page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineRightIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n                </div>\n            </div>\n            {showPageSizeChanger && !isMobile && (\n                <div className={styles.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                </div>\n            )}\n        </nav>\n    );\n};\n// @catalog\n/**\n * A navigation control for moving through paged content.\n *\n * Use `Pagination` to let users navigate between pages of a data set.\n * @keywords navigation, pager, pages\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","isMounted","useIsMounted","isMobile","useMaxWidthMediaQuery","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","styles.ellipsisContainer","children","_jsx","ClickableIcon","styles.iconButton","focusHighlight","focusOutline","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","Chevron2LeftIcon","EllipsisHorizontalIcon","styles.hover","renderEndEllipsis","Chevron2RightIcon","clsx","styles.paginationWrapper","VisuallyHidden","styles.paginationList","styles.paginationMenu","styles.iconButtonNavigation","disabled","ChevronLineLeftIcon","ChevronLeftIcon","styles.paginationMobileInput","onSubmit","Input","styles.inputView","onChange","autoComplete","type","Typography","BodyBL","styles.labelDivider","styles.label","Array","map","e","i","endRange","boundaryRange","active","styles.pageItem","styles.pageItemSelected","onMouseOver","ChevronRightIcon","ChevronLineRightIcon","styles.inputSelectWrapper","InputSelect","options","valueExtractor","item","listExtractor","label","displayValueExtractor","onSelectOption","pagesize","totalPage"],"mappings":"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"}

package/pagination/pagination.styles.d.ts

@@ -1,24 +1,14 @@
-interface StyleProps {
-    $selected: boolean;
-}
-interface ButtonProps {
-    $position: string;
-}
-export declare const PaginationWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-export declare const PaginationList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const PaginationMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const EllipsisButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const NavigationButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, ButtonProps>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const PageItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyleProps>> & string;
-export declare const EllipsisContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const PaginationMobileInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const LabelDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const InputView: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").InputProps & import("react").RefAttributes<HTMLInputElement>, never>> & string & Omit<(props: import("..").InputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const Hover: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const InputSelectWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};
+export declare const paginationWrapper: import("@linaria/core").LinariaClassName;
+export declare const paginationList: import("@linaria/core").LinariaClassName;
+export declare const paginationMenu: import("@linaria/core").LinariaClassName;
+export declare const iconButton: import("@linaria/core").LinariaClassName;
+export declare const iconButtonNavigation: import("@linaria/core").LinariaClassName;
+export declare const pageItem: import("@linaria/core").LinariaClassName;
+export declare const pageItemSelected: import("@linaria/core").LinariaClassName;
+export declare const ellipsisContainer: import("@linaria/core").LinariaClassName;
+export declare const paginationMobileInput: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const labelDivider: import("@linaria/core").LinariaClassName;
+export declare const inputView: import("@linaria/core").LinariaClassName;
+export declare const hover: import("@linaria/core").LinariaClassName;
+export declare const inputSelectWrapper: import("@linaria/core").LinariaClassName;

package/pagination/pagination.styles.js

@@ -1,165 +1,2 @@
-import e,{css as i}from"styled-components";import{Input as r}from"../input/input.js";import{ClickableIcon as o}from"../shared/clickable-icon/clickable-icon.js";import{Typography as t}from"../typography/index.js";import{V3_MediaQuery as n,V3_Radius as s,V3_Spacing as a,V3_Colour as d,V3_Border as l,V3_Font as c}from"../v3_theme/index.js";const g=e.nav`
-    display: flex;
-`,m=e.div`
-    align-self: flex-start;
-
-    display: flex;
-    align-items: center;
-
-    ${n.MaxWidth.lg} {
-        align-self: center;
-    }
-`,p=e.div`
-    display: inline-flex;
-    align-items: center;
-`,b=e(o)`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    outline: none;
-    border-radius: ${s.sm};
-    height: 2.5rem;
-    width: 2.5rem;
-    padding: 0 ${a["spacing-8"]};
-
-    color: ${d["icon-primary"]};
-
-    svg {
-        height: 1.25rem;
-        width: 1.25rem;
-    }
-
-    &:disabled {
-        color: ${d["icon-disabled-subtle"]};
-        cursor: not-allowed;
-    }
-
-    &:hover,
-    &:focus-visible {
-        background-color: ${d["bg-hover"]};
-    }
-`,$=e(o)`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    outline: none;
-    margin: ${a["spacing-4"]};
-    border-radius: ${s.sm};
-    height: 2.5rem;
-    width: 2.5rem;
-    padding: 0 ${a["spacing-8"]};
-
-    color: ${d["icon-primary"]};
-
-    svg {
-        height: 1.25rem;
-        width: 1.25rem;
-    }
-
-    &:disabled {
-        color: ${d["icon-disabled-subtle"]};
-        cursor: not-allowed;
-    }
-
-    &:not(:disabled):hover,
-    &:not(:disabled):focus-visible {
-        background: ${d["bg-hover"]};
-    }
-`,h=e.button`
-    outline: none;
-    margin: ${a["spacing-4"]};
-    box-shadow: none;
-    border: ${l["width-010"]} ${l.solid}
-        ${e=>i`
-                ${e.$selected?d["bg-primary"]:d.border}
-            `};
-    border-radius: ${s.sm};
-    min-width: 2.5rem;
-    height: 2.5rem;
-    padding: 0 ${a["spacing-8"]};
-
-    background: ${e=>e.$selected?d["bg-primary"]:d.bg};
-    cursor: pointer;
-
-    ${c["body-baseline-regular"]};
-    text-align: center;
-    color: ${e=>e.$selected?d["text-inverse"]:d.text};
-
-    ${e=>e.$selected?i`
-                  font-weight: ${c.Spec["weight-bold"]};
-
-                  &:hover,
-                  &:focus-visible {
-                      border-color: ${d["bg-selected-strongest-hover"]};
-                      background: ${d["bg-selected-strongest-hover"]};
-                      color: ${d["text-inverse"]};
-                  }
-              `:i`
-                  &:hover,
-                  &:focus-visible {
-                      border-color: ${d["bg-hover"]};
-                      background: ${d["bg-hover"]};
-                      color: ${d["text-hover"]};
-                      font-weight: ${c.Spec["weight-semibold"]};
-                  }
-              `}
-`,u=e.div`
-    position: relative;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: ${a["spacing-4"]};
-    border-radius: ${s.sm};
-    width: 2.5rem;
-    height: 2.5rem;
-
-    cursor: pointer;
-`,v=e.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: ${a["spacing-4"]};
-
-    color: ${d.text};
-`,f=e(t.BodyBL)`
-    white-space: nowrap;
-`,y=e(t.BodyBL)`
-    margin: 0 ${a["spacing-16"]};
-    white-space: nowrap;
-`,x=e(r)`
-    width: 3.5rem;
-    height: 2.5rem;
-    ${c["body-baseline-regular"]};
-
-    input {
-        padding: 0 ${a["spacing-8"]};
-        text-align: center;
-    }
-`,w=e.div`
-    position: absolute;
-    top: -${a["spacing-8"]};
-    transform: translateY(-100%);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border: none;
-    border-radius: ${s.sm};
-    width: max-content;
-    padding: ${a["spacing-4"]} ${a["spacing-12"]};
-
-    background-color: ${d["bg-hover"]};
-
-    ${c["body-xs-regular"]}
-    color: ${d["text-hover"]};
-`,j=e.div`
-    margin-left: ${a["spacing-4"]};
-    width: 10rem;
-`;export{b as EllipsisButton,u as EllipsisContainer,w as Hover,j as InputSelectWrapper,x as InputView,f as Label,y as LabelDivider,$ as NavigationButton,h as PageItem,m as PaginationList,p as PaginationMenu,v as PaginationMobileInput,g as PaginationWrapper};
+import"./pagination.styles_6bcgva.css";const i="p1afjf30",p="p1ma9kw3",a="p1sz1s7f",s="irakt3t",t="i1eo6n86",n="pia4hww",o="p673w5b",e="e1peilt2",g="p1yg278j",x="l1nxoktb",f="lquxmfr",l="i1hj21s6",m="h1x6xag5",r="issm41d";export{e as ellipsisContainer,m as hover,s as iconButton,t as iconButtonNavigation,r as inputSelectWrapper,l as inputView,x as label,f as labelDivider,n as pageItem,o as pageItemSelected,p as paginationList,a as paginationMenu,g as paginationMobileInput,i as paginationWrapper};
 //# sourceMappingURL=pagination.styles.js.map

package/pagination/pagination.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.styles.js","sources":["../../src/pagination/pagination.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Input } from \"../input\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected: boolean;\n}\ninterface ButtonProps {\n    $position: string;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const PaginationWrapper = styled.nav`\n    display: flex;\n`;\n\nexport const PaginationList = styled.div`\n    align-self: flex-start;\n\n    display: flex;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        align-self: center;\n    }\n`;\n\nexport const PaginationMenu = styled.div`\n    display: inline-flex;\n    align-items: center;\n`;\n\nexport const EllipsisButton = styled(ClickableIcon)`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    outline: none;\n    border-radius: ${V3_Radius[\"sm\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: 0 ${V3_Spacing[\"spacing-8\"]};\n\n    color: ${V3_Colour[\"icon-primary\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n\n    &:disabled {\n        color: ${V3_Colour[\"icon-disabled-subtle\"]};\n        cursor: not-allowed;\n    }\n\n    &:hover,\n    &:focus-visible {\n        background-color: ${V3_Colour[\"bg-hover\"]};\n    }\n`;\n\nexport const NavigationButton = styled(ClickableIcon)<ButtonProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    outline: none;\n    margin: ${V3_Spacing[\"spacing-4\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: 0 ${V3_Spacing[\"spacing-8\"]};\n\n    color: ${V3_Colour[\"icon-primary\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n\n    &:disabled {\n        color: ${V3_Colour[\"icon-disabled-subtle\"]};\n        cursor: not-allowed;\n    }\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus-visible {\n        background: ${V3_Colour[\"bg-hover\"]};\n    }\n`;\n\nexport const PageItem = styled.button<StyleProps>`\n    outline: none;\n    margin: ${V3_Spacing[\"spacing-4\"]};\n    box-shadow: none;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${(props) =>\n            css`\n                ${props.$selected ? V3_Colour[\"bg-primary\"] : V3_Colour.border}\n            `};\n    border-radius: ${V3_Radius[\"sm\"]};\n    min-width: 2.5rem;\n    height: 2.5rem;\n    padding: 0 ${V3_Spacing[\"spacing-8\"]};\n\n    background: ${(props) =>\n        props.$selected ? V3_Colour[\"bg-primary\"] : V3_Colour.bg};\n    cursor: pointer;\n\n    ${V3_Font[\"body-baseline-regular\"]};\n    text-align: center;\n    color: ${(props) =>\n        props.$selected ? V3_Colour[\"text-inverse\"] : V3_Colour.text};\n\n    ${(props) =>\n        props.$selected\n            ? css`\n                  font-weight: ${V3_Font.Spec[\"weight-bold\"]};\n\n                  &:hover,\n                  &:focus-visible {\n                      border-color: ${V3_Colour[\"bg-selected-strongest-hover\"]};\n                      background: ${V3_Colour[\"bg-selected-strongest-hover\"]};\n                      color: ${V3_Colour[\"text-inverse\"]};\n                  }\n              `\n            : css`\n                  &:hover,\n                  &:focus-visible {\n                      border-color: ${V3_Colour[\"bg-hover\"]};\n                      background: ${V3_Colour[\"bg-hover\"]};\n                      color: ${V3_Colour[\"text-hover\"]};\n                      font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n                  }\n              `}\n`;\n\nexport const EllipsisContainer = styled.div`\n    position: relative;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${V3_Spacing[\"spacing-4\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    width: 2.5rem;\n    height: 2.5rem;\n\n    cursor: pointer;\n`;\n\nexport const PaginationMobileInput = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${V3_Spacing[\"spacing-4\"]};\n\n    color: ${V3_Colour.text};\n`;\n\nexport const Label = styled(Typography.BodyBL)`\n    white-space: nowrap;\n`;\n\nexport const LabelDivider = styled(Typography.BodyBL)`\n    margin: 0 ${V3_Spacing[\"spacing-16\"]};\n    white-space: nowrap;\n`;\n\nexport const InputView = styled(Input)`\n    width: 3.5rem;\n    height: 2.5rem;\n    ${V3_Font[\"body-baseline-regular\"]};\n\n    input {\n        padding: 0 ${V3_Spacing[\"spacing-8\"]};\n        text-align: center;\n    }\n`;\n\nexport const Hover = styled.div`\n    position: absolute;\n    top: -${V3_Spacing[\"spacing-8\"]};\n    transform: translateY(-100%);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border: none;\n    border-radius: ${V3_Radius[\"sm\"]};\n    width: max-content;\n    padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-12\"]};\n\n    background-color: ${V3_Colour[\"bg-hover\"]};\n\n    ${V3_Font[\"body-xs-regular\"]}\n    color: ${V3_Colour[\"text-hover\"]};\n`;\n\nexport const InputSelectWrapper = styled.div`\n    margin-left: ${V3_Spacing[\"spacing-4\"]};\n    width: 10rem;\n`;\n"],"names":["PaginationWrapper","styled","nav","PaginationList","div","V3_MediaQuery","MaxWidth","lg","PaginationMenu","EllipsisButton","ClickableIcon","V3_Radius","V3_Spacing","V3_Colour","NavigationButton","PageItem","button","V3_Border","solid","props","css","$selected","border","bg","V3_Font","text","Spec","EllipsisContainer","PaginationMobileInput","Label","Typography","BodyBL","LabelDivider","InputView","Input","Hover","InputSelectWrapper"],"mappings":"mVA2BO,MAAMA,EAAoBC,EAAOC,GAAG;;EAI9BC,EAAiBF,EAAOG,GAAG;;;;;;MAMlCC,EAAcC,SAASC;;;EAKhBC,EAAiBP,EAAOG,GAAG;;;EAK3BK,EAAiBR,EAAOS,EAAc;;;;;;qBAM9BC,EAAc;;;iBAGlBC,EAAW;;aAEfC,EAAU;;;;;;;;iBAQNA,EAAU;;;;;;4BAMCA,EAAU;;EAIzBC,EAAmBb,EAAOS,EAA2B;;;;;;cAMpDE,EAAW;qBACJD,EAAc;;;iBAGlBC,EAAW;;aAEfC,EAAU;;;;;;;;iBAQNA,EAAU;;;;;;sBAMLA,EAAU;;EAInBE,EAAWd,EAAOe,MAAkB;;cAEnCJ,EAAW;;cAEXK,EAAU,gBAAgBA,EAAUC;UACvCC,GACCC,CAAG;kBACGD,EAAME,UAAYR,EAAU,cAAgBA,EAAUS;;qBAEnDX,EAAc;;;iBAGlBC,EAAW;;kBAETO,GACXA,EAAME,UAAYR,EAAU,cAAgBA,EAAUU;;;MAGxDC,EAAQ;;aAEAL,GACNA,EAAME,UAAYR,EAAU,gBAAkBA,EAAUY;;MAEzDN,GACCA,EAAME,UACAD,CAAG;iCACgBI,EAAQE,KAAK;;;;sCAIRb,EAAU;oCACZA,EAAU;+BACfA,EAAU;;gBAG3BO,CAAG;;;sCAGqBP,EAAU;oCACZA,EAAU;+BACfA,EAAU;qCACJW,EAAQE,KAAK;;;EAKrCC,EAAoB1B,EAAOG,GAAG;;;;;;;cAO7BQ,EAAW;qBACJD,EAAc;;;;;EAOtBiB,EAAwB3B,EAAOG,GAAG;;;;;cAKjCQ,EAAW;;aAEZC,EAAUY;EAGVI,EAAQ5B,EAAO6B,EAAWC,OAAO;;EAIjCC,EAAe/B,EAAO6B,EAAWC,OAAO;gBACrCnB,EAAW;;EAIdqB,EAAYhC,EAAOiC,EAAM;;;MAGhCV,EAAQ;;;qBAGOZ,EAAW;;;EAKnBuB,EAAQlC,EAAOG,GAAG;;YAEnBQ,EAAW;;;;;;;;qBAQFD,EAAc;;eAEpBC,EAAW,gBAAgBA,EAAW;;wBAE7BC,EAAU;;MAE5BW,EAAQ;aACDX,EAAU;EAGVuB,EAAqBnC,EAAOG,GAAG;mBACzBQ,EAAW;;"}
+{"version":3,"file":"pagination.styles.js","sources":["../../src/pagination/pagination.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../theme\";\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const paginationWrapper = css`\n    display: flex;\n`;\n\nexport const paginationList = css`\n    align-self: flex-start;\n\n    display: flex;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        align-self: center;\n    }\n`;\n\nexport const paginationMenu = css`\n    display: inline-flex;\n    align-items: center;\n`;\n\nexport const iconButton = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    outline: none;\n    border-radius: ${Radius.sm};\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n\n    color: ${Colour[\"icon-primary\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n\n    &:disabled {\n        color: ${Colour[\"icon-disabled-subtle\"]};\n        cursor: not-allowed;\n    }\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus-visible {\n        background: ${Colour[\"bg-hover\"]};\n    }\n`;\n\nexport const iconButtonNavigation = css`\n    margin: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const pageItem = css`\n    outline: none;\n    margin: ${Spacing[\"spacing-4\"]};\n    box-shadow: none;\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-radius: ${Radius.sm};\n    min-width: 2.5rem;\n    height: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n\n    background: ${Colour.bg};\n    cursor: pointer;\n\n    ${Font[\"body-baseline-regular\"]};\n    text-align: center;\n    color: ${Colour.text};\n\n    &:hover,\n    &:focus-visible {\n        border-color: ${Colour[\"bg-hover\"]};\n        background: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n        font-weight: ${Font.Spec[\"weight-semibold\"]};\n    }\n`;\n\nexport const pageItemSelected = css`\n    border-color: ${Colour[\"bg-primary\"]};\n    background: ${Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n\n    &:hover,\n    &:focus-visible {\n        border-color: ${Colour[\"bg-selected-strongest-hover\"]};\n        background: ${Colour[\"bg-selected-strongest-hover\"]};\n        color: ${Colour[\"text-inverse\"]};\n        font-weight: ${Font.Spec[\"weight-bold\"]};\n    }\n`;\n\nexport const ellipsisContainer = css`\n    position: relative;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${Spacing[\"spacing-4\"]};\n\n    cursor: pointer;\n`;\n\nexport const paginationMobileInput = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    margin: ${Spacing[\"spacing-4\"]};\n\n    color: ${Colour.text};\n`;\n\nexport const label = css`\n    white-space: nowrap;\n`;\n\nexport const labelDivider = css`\n    margin: 0 ${Spacing[\"spacing-16\"]};\n    white-space: nowrap;\n`;\n\nexport const inputView = css`\n    width: 3.5rem;\n    height: 2.5rem;\n    ${Font[\"body-baseline-regular\"]};\n\n    input {\n        padding: 0 ${Spacing[\"spacing-8\"]};\n        text-align: center;\n    }\n`;\n\nexport const hover = css`\n    position: absolute;\n    top: calc(${Spacing[\"spacing-8\"]} * -1);\n    transform: translateY(-100%);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border: none;\n    border-radius: ${Radius.sm};\n    width: max-content;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-12\"]};\n\n    background: ${Colour[\"bg-hover\"]};\n\n    ${Font[\"body-xs-regular\"]}\n    color: ${Colour[\"text-hover\"]};\n`;\n\nexport const inputSelectWrapper = css`\n    margin-left: ${Spacing[\"spacing-4\"]};\n    width: 10rem;\n`;\n"],"names":["paginationWrapper","paginationList","paginationMenu","iconButton","iconButtonNavigation","pageItem","pageItemSelected","ellipsisContainer","paginationMobileInput","label","labelDivider","inputView","hover","inputSelectWrapper"],"mappings":"iEAMO,MAAMA,EAAiB,WAIjBC,EAAc,WAWdC,EAAc,WAKdC,EAAU,UA6BVC,EAAoB,WAIpBC,EAAQ,UA0BRC,EAAgB,UAehBC,EAAiB,WAYjBC,EAAqB,WAUrBC,EAAK,WAILC,EAAY,UAKZC,EAAS,WAWTC,EAAK,WAoBLC,EAAkB"}

package/pagination/pagination.styles_6bcgva.css

@@ -0,0 +1,14 @@
+@layer fds{.p1afjf30{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.p1ma9kw3{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .p1ma9kw3{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}
+.p1sz1s7f{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.irakt3t{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;outline:none;border-radius:var(--fds-radius-sm);height:2.5rem;width:2.5rem;padding:0 var(--fds-spacing-8);color:var(--fds-colour-icon-primary);}.irakt3t svg{height:1.25rem;width:1.25rem;}.irakt3t:disabled{color:var(--fds-colour-icon-disabled-subtle);cursor:not-allowed;}.irakt3t:not(:disabled):hover,.irakt3t:not(:disabled):focus-visible{background:var(--fds-colour-bg-hover);}
+.i1eo6n86{margin:var(--fds-spacing-4);}
+.pia4hww{outline:none;margin:var(--fds-spacing-4);box-shadow:none;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);min-width:2.5rem;height:2.5rem;padding:0 var(--fds-spacing-8);background:var(--fds-colour-bg);cursor:pointer;font-family:var(--fds-font-family-body);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:center;color:var(--fds-colour-text);}.pia4hww:hover,.pia4hww:focus-visible{border-color:var(--fds-colour-bg-hover);background:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);font-weight:var(--fds-font-weight-semibold);}
+.p673w5b{border-color:var(--fds-colour-bg-primary);background:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);font-weight:var(--fds-font-weight-bold);}.p673w5b:hover,.p673w5b:focus-visible{border-color:var(--fds-colour-bg-selected-strongest-hover);background:var(--fds-colour-bg-selected-strongest-hover);color:var(--fds-colour-text-inverse);font-weight:var(--fds-font-weight-bold);}
+.e1peilt2{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:var(--fds-spacing-4);cursor:pointer;}
+.p1yg278j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:var(--fds-spacing-4);color:var(--fds-colour-text);}
+.l1nxoktb{white-space:nowrap;}
+.lquxmfr{margin:0 var(--fds-spacing-16);white-space:nowrap;}
+.i1hj21s6{width:3.5rem;height:2.5rem;font-family:var(--fds-font-family-body);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);}.i1hj21s6 input{padding:0 var(--fds-spacing-8);text-align:center;}
+.h1x6xag5{position:absolute;top:calc(var(--fds-spacing-8) * -1);-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border:none;border-radius:var(--fds-radius-sm);width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:var(--fds-spacing-4) var(--fds-spacing-12);background:var(--fds-colour-bg-hover);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-hover);}
+.issm41d{margin-left:var(--fds-spacing-4);width:10rem;}}

package/pagination/types.d.ts

@@ -1,16 +1,64 @@
+/**
+ * Props for the `Pagination` component.
+ */
 export interface PaginationProps {
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
+    /**
+     * Number of items displayed per page.
+     *
+     * @default 10
+     */
     pageSize?: number | undefined;
+    /**
+     * Total number of items across all pages. Used to compute the total page count.
+     */
     totalItems: number;
+    /**
+     * The currently active 1-based page number. This is a controlled prop;
+     * update it in response to `onPageChange`.
+     */
     activePage: number;
+    /**
+     * Options listed in the page-size changer dropdown.
+     *
+     * Only relevant when `showPageSizeChanger` is `true`.
+     *
+     * @default 10, 20, 30 per page
+     */
     pageSizeOptions?: PageSizeItemProps[] | undefined;
+    /**
+     * When `true`, renders first-page and last-page navigation buttons
+     * alongside the previous/next buttons.
+     */
     showFirstAndLastNav?: boolean | undefined;
+    /**
+     * When `true`, renders a dropdown on desktop viewports to change the `pageSize`.
+     *
+     * @default false
+     */
     showPageSizeChanger?: boolean | undefined;
+    /**
+     * Called when the user navigates to a different page.
+     *
+     * @param page The 1-based index of the newly selected page.
+     */
     onPageChange?: ((page: number) => void) | undefined;
+    /**
+     * Called when the user selects a different page size from
+     * the dropdown  and `showPageSizeChanger` is `true`.
+     *
+     * @param page The adjusted active page after the size change. If the current
+     * `activePage` exceeds the new total page count, this value is capped to the
+     * new last page.
+     * @param pageSize The newly selected number of items per page.
+     */
     onPageSizeChange?: ((page: number, pageSize: number) => void) | undefined;
 }
+/**
+ * A single option in the page-size changer dropdown.
+ */
 export interface PageSizeItemProps {
     value: number;
     label: string;

package/phone-number-input/phone-number-input.d.ts

@@ -1,2 +1,10 @@
 import type { PhoneNumberInputProps } from "./types";
-export declare const PhoneNumberInput: ({ onChange, value, allowClear, onClear, onBlur, error, fixedCountry, optionPlaceholder, optionSearchPlaceholder, enableSearch, onHideOptions, onShowOptions, placeholder, autoComplete, noBorder, ...otherProps }: PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A phone number field composed of a country code selector and a number input.
+ *
+ * Use `PhoneNumberInput` when collecting an internationalised phone number.
+ * The country code can be selected from a searchable dropdown or locked to a
+ * fixed value via `fixedCountry`.
+ * @keywords contact, country code, field, form, input, number, telephone
+ */
+export declare const PhoneNumberInput: ({ id, onChange, value, allowClear, onClear, onBlur, error, fixedCountry, optionPlaceholder, optionSearchPlaceholder, enableSearch, onHideOptions, onShowOptions, placeholder, autoComplete, noBorder, getAriaLabel, ...otherProps }: PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;

package/phone-number-input/phone-number-input.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as o}from"react/jsx-runtime";import{useState as r,useRef as t,useEffect as n}from"react";import{InputGroup as l}from"../input-group/input-group.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/string-helper.js";import{useNextInputState as a}from"../util/use-next-input-state.js";import{PhoneNumberInputHelper as i}from"./phone-number-input-helper.js";const u=u=>{var{onChange:s,value:d,allowClear:m,onClear:h,onBlur:C,error:b,fixedCountry:f=!1,optionPlaceholder:y="Select",optionSearchPlaceholder:j,enableSearch:v,onHideOptions:g,onShowOptions:S,placeholder:x,autoComplete:O,noBorder:w=!1}=u,B=e(u,["onChange","value","allowClear","onClear","onBlur","error","fixedCountry","optionPlaceholder","optionSearchPlaceholder","enableSearch","onHideOptions","onShowOptions","placeholder","autoComplete","noBorder"]);const[P]=r(i.getCountries()),[N,E]=r(void 0),[H,$]=r(""),_=t(null),L=a({ref:_,formatter:e=>i.formatNumber(e.replace(/[^0-9]/g,""),N)});n((()=>{const e=P.filter((e=>e.countryCode===p(null==d?void 0:d.countryCode)))[0];E(e),$(i.formatNumber(null==d?void 0:d.number,e))}),[d]);const M=e=>{k(H,e),s&&V(H,e)},V=(e,o)=>{const r=i.formatNumber(e,o);null==s||s({number:r.replace(/[\s()]+/g,""),countryCode:o&&c(o.countryCode)})},k=(e,o)=>{$(i.formatNumber(e,o)),E(o)};return o(l,Object.assign({ref:_,value:H,onChange:()=>{const e=L();if(!e)return;const{nextValue:o,updateCaretPosition:r}=e;r(),k(o,N),s&&V(o,N)},allowClear:m&&!!H,onClear:()=>{h?h():$("")},onBlur:C,error:b,placeholder:x,addon:f?{type:"label",attributes:{value:c(null==N?void 0:N.countryCode)}}:{type:"list",attributes:{"aria-label":"Country code",placeholder:y,options:P,selectedOption:N,enableSearch:v,searchPlaceholder:j,valueExtractor:e=>`+${e.countryCode}`,listExtractor:e=>({title:e.name,secondaryLabel:c(e.countryCode)}),onSelectOption:M,onHideOptions:g,onShowOptions:S}},inputMode:"numeric",autoComplete:O,"aria-label":"Enter phone number",noBorder:w},B))},p=e=>e?e.replace("+",""):"",c=e=>e?e.includes("+")?e:`+${e}`:"";export{u as PhoneNumberInput};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as o}from"react/jsx-runtime";import{useState as r,useRef as t,useEffect as n}from"react";import{InputGroup as l}from"../input-group/input-group.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useNextInputState as a}from"../util/use-next-input-state.js";import{PhoneNumberInputHelper as i}from"./phone-number-input-helper.js";const u=u=>{var d,{id:s,onChange:m,value:h,allowClear:C,onClear:b,onBlur:f,error:y,fixedCountry:v=!1,optionPlaceholder:g="Select",optionSearchPlaceholder:j,enableSearch:S,onHideOptions:x,onShowOptions:O,placeholder:w,autoComplete:B,noBorder:P=!1,getAriaLabel:N}=u,E=e(u,["id","onChange","value","allowClear","onClear","onBlur","error","fixedCountry","optionPlaceholder","optionSearchPlaceholder","enableSearch","onHideOptions","onShowOptions","placeholder","autoComplete","noBorder","getAriaLabel"]);const[H]=r(i.getCountries()),[L,A]=r(void 0),[$,_]=r(""),M=t(null),V=a({ref:M,formatter:e=>i.formatNumber(e.replace(/[^0-9]/g,""),L)}),k=null!==(d=null==N?void 0:N(L))&&void 0!==d?d:"Enter phone number";n((()=>{const e=H.filter((e=>e.countryCode===p(null==h?void 0:h.countryCode)))[0];A(e),_(i.formatNumber(null==h?void 0:h.number,e))}),[h]);const q=e=>{D($,e),m&&z($,e)},z=(e,o)=>{const r=i.formatNumber(e,o);null==m||m({number:r.replace(/[\s()]+/g,""),countryCode:o&&c(o.countryCode)})},D=(e,o)=>{_(i.formatNumber(e,o)),A(o)};return o(l,Object.assign({id:s,ref:M,value:$,onChange:()=>{const e=V();if(!e)return;const{nextValue:o,updateCaretPosition:r}=e;r(),D(o,L),m&&z(o,L)},allowClear:C&&!!$,onClear:()=>{b?b():_("")},onBlur:f,error:y,placeholder:w,addon:v?{type:"label",attributes:{value:c(null==L?void 0:L.countryCode)}}:{type:"list",attributes:{"aria-label":"Country code",placeholder:g,options:H,selectedOption:L,enableSearch:S,searchPlaceholder:j,valueExtractor:e=>`+${e.countryCode}`,listExtractor:e=>({title:e.name,secondaryLabel:c(e.countryCode)}),onSelectOption:q,onHideOptions:x,onShowOptions:O}},inputMode:"numeric",autoComplete:B,noBorder:P,"aria-label":k},E))},p=e=>e?e.replace("+",""):"",c=e=>e?e.includes("+")?e:`+${e}`:"";export{u as PhoneNumberInput};
 //# sourceMappingURL=phone-number-input.js.map

package/phone-number-input/phone-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-number-input.js","sources":["../../src/phone-number-input/phone-number-input.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group/input-group\";\nimport type { AddonProps, LabelAddon, ListAddon } from \"../input-group/types\";\nimport { useNextInputState } from \"../util\";\nimport { PhoneNumberInputHelper } from \"./phone-number-input-helper\";\nimport type { CountryValue, PhoneNumberInputProps } from \"./types\";\n\nexport const PhoneNumberInput = ({\n    onChange,\n    value,\n    allowClear,\n    onClear,\n    onBlur,\n    error,\n    fixedCountry = false,\n    optionPlaceholder = \"Select\",\n    optionSearchPlaceholder,\n    enableSearch,\n    onHideOptions,\n    onShowOptions,\n    placeholder,\n    autoComplete,\n    noBorder = false,\n    ...otherProps\n}: PhoneNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [options] = useState<CountryValue[]>(\n        PhoneNumberInputHelper.getCountries()\n    );\n\n    const [selectedCountry, setSelectedCountry] = useState<\n        CountryValue | undefined\n    >(undefined);\n    const [inputValue, setInputValue] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLInputElement>(null);\n\n    const getNextInputState = useNextInputState({\n        ref: nodeRef,\n        formatter: (value) =>\n            PhoneNumberInputHelper.formatNumber(\n                value.replace(/[^0-9]/g, \"\"),\n                selectedCountry\n            ),\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const selectedOption = options.filter(\n            (country) =>\n                country.countryCode === normaliseCountryCode(value?.countryCode)\n        )[0];\n\n        setSelectedCountry(selectedOption);\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(value?.number, selectedOption)\n        );\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClear = () => {\n        if (onClear) {\n            onClear();\n        } else {\n            setInputValue(\"\");\n        }\n    };\n\n    const handleInputChange = () => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        updateCaretPosition();\n        performLocalChangeHandler(nextValue, selectedCountry);\n        if (onChange) {\n            performOnChangeHandler(nextValue, selectedCountry);\n        }\n    };\n\n    const handleSelectOption = (country: CountryValue) => {\n        performLocalChangeHandler(inputValue, country);\n        if (onChange) {\n            performOnChangeHandler(inputValue, country);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        const formatedInputValue = PhoneNumberInputHelper.formatNumber(\n            inputValue,\n            selectedCountry\n        );\n        onChange?.({\n            number: formatedInputValue.replace(/[\\s()]+/g, \"\"), // strip formatted spaces\n            countryCode:\n                selectedCountry && addPlusPrefix(selectedCountry.countryCode),\n        });\n    };\n\n    const performLocalChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(inputValue, selectedCountry)\n        );\n\n        setSelectedCountry(selectedCountry);\n    };\n\n    const getAddonProps = (): AddonProps<CountryValue, string> => {\n        if (fixedCountry) {\n            return {\n                type: \"label\",\n                attributes: {\n                    value: addPlusPrefix(selectedCountry?.countryCode),\n                } as LabelAddon,\n            };\n        } else {\n            return {\n                type: \"list\",\n                attributes: {\n                    \"aria-label\": \"Country code\",\n                    placeholder: optionPlaceholder,\n                    options,\n                    selectedOption: selectedCountry,\n                    enableSearch: enableSearch,\n                    searchPlaceholder: optionSearchPlaceholder,\n                    valueExtractor: (option) => `+${option.countryCode}`,\n                    listExtractor: (option) => ({\n                        title: option.name,\n                        secondaryLabel: addPlusPrefix(option.countryCode),\n                    }),\n                    onSelectOption: handleSelectOption,\n                    onHideOptions: onHideOptions,\n                    onShowOptions: onShowOptions,\n                } as ListAddon<CountryValue, string>,\n            };\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <InputGroup\n            ref={nodeRef}\n            value={inputValue}\n            onChange={handleInputChange}\n            allowClear={allowClear && !!inputValue}\n            onClear={handleClear}\n            onBlur={onBlur}\n            error={error}\n            placeholder={placeholder}\n            addon={getAddonProps()}\n            inputMode=\"numeric\"\n            autoComplete={autoComplete}\n            aria-label=\"Enter phone number\"\n            noBorder={noBorder}\n            {...otherProps}\n        />\n    );\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\n/**\n * This strips the + off the specified country code if it\n * is present.\n */\nconst normaliseCountryCode = (countryCode: string | undefined): string => {\n    return countryCode ? countryCode.replace(\"+\", \"\") : \"\";\n};\n\nconst addPlusPrefix = (countryCode?: string): string => {\n    if (!countryCode) return \"\";\n    return countryCode.includes(\"+\") ? countryCode : `+${countryCode}`;\n};\n"],"names":["PhoneNumberInput","_a","onChange","value","allowClear","onClear","onBlur","error","fixedCountry","optionPlaceholder","optionSearchPlaceholder","enableSearch","onHideOptions","onShowOptions","placeholder","autoComplete","noBorder","otherProps","__rest","options","useState","PhoneNumberInputHelper","getCountries","selectedCountry","setSelectedCountry","undefined","inputValue","setInputValue","nodeRef","useRef","getNextInputState","useNextInputState","ref","formatter","formatNumber","replace","useEffect","selectedOption","filter","country","countryCode","normaliseCountryCode","number","handleSelectOption","performLocalChangeHandler","performOnChangeHandler","formatedInputValue","addPlusPrefix","_jsx","InputGroup","Object","assign","nextState","nextValue","updateCaretPosition","addon","type","attributes","searchPlaceholder","valueExtractor","option","listExtractor","title","name","secondaryLabel","onSelectOption","inputMode","includes"],"mappings":"qcAQO,MAAMA,EAAoBC,IAAA,IAAAC,SAC7BA,EAAQC,MACRA,EAAKC,WACLA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,aACLA,GAAe,EAAKC,kBACpBA,EAAoB,SAAQC,wBAC5BA,EAAuBC,aACvBA,EAAYC,cACZA,EAAaC,cACbA,EAAaC,YACbA,EAAWC,aACXA,EAAYC,SACZA,GAAW,GAAKf,EACbgB,EAAUC,EAAAjB,EAhBgB,kNAqB7B,MAAOkB,GAAWC,EACdC,EAAuBC,iBAGpBC,EAAiBC,GAAsBJ,OAE5CK,IACKC,EAAYC,GAAiBP,EAAiB,IAE/CQ,EAAUC,EAAyB,MAEnCC,EAAoBC,EAAkB,CACxCC,IAAKJ,EACLK,UAAY9B,GACRkB,EAAuBa,aACnB/B,EAAMgC,QAAQ,UAAW,IACzBZ,KAOZa,GAAU,KACN,MAAMC,EAAiBlB,EAAQmB,QAC1BC,GACGA,EAAQC,cAAgBC,EAAqBtC,aAAK,EAALA,EAAOqC,eAC1D,GAEFhB,EAAmBa,GACnBV,EACIN,EAAuBa,aAAa/B,aAAK,EAALA,EAAOuC,OAAQL,GACtD,GACF,CAAClC,IAKJ,MAqBMwC,EAAsBJ,IACxBK,EAA0BlB,EAAYa,GAClCrC,GACA2C,EAAuBnB,EAAYa,EACvC,EAMEM,EAAyB,CAC3BnB,EACAH,KAEA,MAAMuB,EAAqBzB,EAAuBa,aAC9CR,EACAH,GAEJrB,SAAAA,EAAW,CACPwC,OAAQI,EAAmBX,QAAQ,WAAY,IAC/CK,YACIjB,GAAmBwB,EAAcxB,EAAgBiB,cACvD,EAGAI,EAA4B,CAC9BlB,EACAH,KAEAI,EACIN,EAAuBa,aAAaR,EAAYH,IAGpDC,EAAmBD,EAAgB,EAqCvC,OACIyB,EAACC,EAAUC,OAAAC,OAAA,CACPnB,IAAKJ,EACLzB,MAAOuB,EACPxB,SAvFkB,KACtB,MAAMkD,EAAYtB,IAClB,IAAKsB,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAE3CE,IACAV,EAA0BS,EAAW9B,GACjCrB,GACA2C,EAAuBQ,EAAW9B,EACtC,EA8EInB,WAAYA,KAAgBsB,EAC5BrB,QAjGY,KACZA,EACAA,IAEAsB,EAAc,GAClB,EA6FIrB,OAAQA,EACRC,MAAOA,EACPO,YAAaA,EACbyC,MA3CA/C,EACO,CACHgD,KAAM,QACNC,WAAY,CACRtD,MAAO4C,EAAcxB,aAAe,EAAfA,EAAiBiB,eAIvC,CACHgB,KAAM,OACNC,WAAY,CACR,aAAc,eACd3C,YAAaL,EACbU,UACAkB,eAAgBd,EAChBZ,aAAcA,EACd+C,kBAAmBhD,EACnBiD,eAAiBC,GAAW,IAAIA,EAAOpB,cACvCqB,cAAgBD,IAAM,CAClBE,MAAOF,EAAOG,KACdC,eAAgBjB,EAAca,EAAOpB,eAEzCyB,eAAgBtB,EAChB/B,cAAeA,EACfC,cAAeA,IAoBvBqD,UAAU,UACVnD,aAAcA,EAAY,aACf,qBACXC,SAAUA,GACNC,GACN,EAWJwB,EAAwBD,GACnBA,EAAcA,EAAYL,QAAQ,IAAK,IAAM,GAGlDY,EAAiBP,GACdA,EACEA,EAAY2B,SAAS,KAAO3B,EAAc,IAAIA,IAD5B"}
+{"version":3,"file":"phone-number-input.js","sources":["../../src/phone-number-input/phone-number-input.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group/input-group\";\nimport type { AddonProps, LabelAddon, ListAddon } from \"../input-group/types\";\nimport { useNextInputState } from \"../util\";\nimport { PhoneNumberInputHelper } from \"./phone-number-input-helper\";\nimport type { CountryValue, PhoneNumberInputProps } from \"./types\";\n\n// @catalog\n/**\n * A phone number field composed of a country code selector and a number input.\n *\n * Use `PhoneNumberInput` when collecting an internationalised phone number.\n * The country code can be selected from a searchable dropdown or locked to a\n * fixed value via `fixedCountry`.\n * @keywords contact, country code, field, form, input, number, telephone\n */\nexport const PhoneNumberInput = ({\n    id,\n    onChange,\n    value,\n    allowClear,\n    onClear,\n    onBlur,\n    error,\n    fixedCountry = false,\n    optionPlaceholder = \"Select\",\n    optionSearchPlaceholder,\n    enableSearch,\n    onHideOptions,\n    onShowOptions,\n    placeholder,\n    autoComplete,\n    noBorder = false,\n    getAriaLabel,\n    ...otherProps\n}: PhoneNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [options] = useState<CountryValue[]>(\n        PhoneNumberInputHelper.getCountries()\n    );\n\n    const [selectedCountry, setSelectedCountry] = useState<\n        CountryValue | undefined\n    >(undefined);\n    const [inputValue, setInputValue] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLInputElement>(null);\n\n    const getNextInputState = useNextInputState({\n        ref: nodeRef,\n        formatter: (value) =>\n            PhoneNumberInputHelper.formatNumber(\n                value.replace(/[^0-9]/g, \"\"),\n                selectedCountry\n            ),\n    });\n\n    const resolvedAriaLabel =\n        getAriaLabel?.(selectedCountry) ?? \"Enter phone number\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const selectedOption = options.filter(\n            (country) =>\n                country.countryCode === normaliseCountryCode(value?.countryCode)\n        )[0];\n\n        setSelectedCountry(selectedOption);\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(value?.number, selectedOption)\n        );\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClear = () => {\n        if (onClear) {\n            onClear();\n        } else {\n            setInputValue(\"\");\n        }\n    };\n\n    const handleInputChange = () => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        updateCaretPosition();\n        performLocalChangeHandler(nextValue, selectedCountry);\n        if (onChange) {\n            performOnChangeHandler(nextValue, selectedCountry);\n        }\n    };\n\n    const handleSelectOption = (country: CountryValue) => {\n        performLocalChangeHandler(inputValue, country);\n        if (onChange) {\n            performOnChangeHandler(inputValue, country);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        const formatedInputValue = PhoneNumberInputHelper.formatNumber(\n            inputValue,\n            selectedCountry\n        );\n        onChange?.({\n            number: formatedInputValue.replace(/[\\s()]+/g, \"\"), // strip formatted spaces\n            countryCode:\n                selectedCountry && addPlusPrefix(selectedCountry.countryCode),\n        });\n    };\n\n    const performLocalChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(inputValue, selectedCountry)\n        );\n\n        setSelectedCountry(selectedCountry);\n    };\n\n    const getAddonProps = (): AddonProps<CountryValue, string> => {\n        if (fixedCountry) {\n            return {\n                type: \"label\",\n                attributes: {\n                    value: addPlusPrefix(selectedCountry?.countryCode),\n                } as LabelAddon,\n            };\n        } else {\n            return {\n                type: \"list\",\n                attributes: {\n                    \"aria-label\": \"Country code\",\n                    placeholder: optionPlaceholder,\n                    options,\n                    selectedOption: selectedCountry,\n                    enableSearch: enableSearch,\n                    searchPlaceholder: optionSearchPlaceholder,\n                    valueExtractor: (option) => `+${option.countryCode}`,\n                    listExtractor: (option) => ({\n                        title: option.name,\n                        secondaryLabel: addPlusPrefix(option.countryCode),\n                    }),\n                    onSelectOption: handleSelectOption,\n                    onHideOptions: onHideOptions,\n                    onShowOptions: onShowOptions,\n                } as ListAddon<CountryValue, string>,\n            };\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <InputGroup\n            id={id}\n            ref={nodeRef}\n            value={inputValue}\n            onChange={handleInputChange}\n            allowClear={allowClear && !!inputValue}\n            onClear={handleClear}\n            onBlur={onBlur}\n            error={error}\n            placeholder={placeholder}\n            addon={getAddonProps()}\n            inputMode=\"numeric\"\n            autoComplete={autoComplete}\n            noBorder={noBorder}\n            aria-label={resolvedAriaLabel}\n            {...otherProps}\n        />\n    );\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\n/**\n * This strips the + off the specified country code if it\n * is present.\n */\nconst normaliseCountryCode = (countryCode: string | undefined): string => {\n    return countryCode ? countryCode.replace(\"+\", \"\") : \"\";\n};\n\nconst addPlusPrefix = (countryCode?: string): string => {\n    if (!countryCode) return \"\";\n    return countryCode.includes(\"+\") ? countryCode : `+${countryCode}`;\n};\n"],"names":["PhoneNumberInput","_a","id","onChange","value","allowClear","onClear","onBlur","error","fixedCountry","optionPlaceholder","optionSearchPlaceholder","enableSearch","onHideOptions","onShowOptions","placeholder","autoComplete","noBorder","getAriaLabel","otherProps","__rest","options","useState","PhoneNumberInputHelper","getCountries","selectedCountry","setSelectedCountry","undefined","inputValue","setInputValue","nodeRef","useRef","getNextInputState","useNextInputState","ref","formatter","formatNumber","replace","resolvedAriaLabel","_b","useEffect","selectedOption","filter","country","countryCode","normaliseCountryCode","number","handleSelectOption","performLocalChangeHandler","performOnChangeHandler","formatedInputValue","addPlusPrefix","_jsx","InputGroup","Object","assign","nextState","nextValue","updateCaretPosition","addon","type","attributes","searchPlaceholder","valueExtractor","option","listExtractor","title","name","secondaryLabel","onSelectOption","inputMode","includes"],"mappings":"+gBAiBO,MAAMA,EAAoBC,WAAAC,GAC7BA,EAAEC,SACFA,EAAQC,MACRA,EAAKC,WACLA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,aACLA,GAAe,EAAKC,kBACpBA,EAAoB,SAAQC,wBAC5BA,EAAuBC,aACvBA,EAAYC,cACZA,EAAaC,cACbA,EAAaC,YACbA,EAAWC,aACXA,EAAYC,SACZA,GAAW,EAAKC,aAChBA,GAAYjB,EACTkB,EAAUC,EAAAnB,EAlBgB,sOAuB7B,MAAOoB,GAAWC,EACdC,EAAuBC,iBAGpBC,EAAiBC,GAAsBJ,OAE5CK,IACKC,EAAYC,GAAiBP,EAAiB,IAE/CQ,EAAUC,EAAyB,MAEnCC,EAAoBC,EAAkB,CACxCC,IAAKJ,EACLK,UAAY/B,GACRmB,EAAuBa,aACnBhC,EAAMiC,QAAQ,UAAW,IACzBZ,KAINa,EAC6B,QAA/BC,EAAArB,aAAY,EAAZA,EAAeO,UAAgB,IAAAc,EAAAA,EAAI,qBAKvCC,GAAU,KACN,MAAMC,EAAiBpB,EAAQqB,QAC1BC,GACGA,EAAQC,cAAgBC,EAAqBzC,aAAK,EAALA,EAAOwC,eAC1D,GAEFlB,EAAmBe,GACnBZ,EACIN,EAAuBa,aAAahC,aAAK,EAALA,EAAO0C,OAAQL,GACtD,GAEF,CAACrC,IAKJ,MAqBM2C,EAAsBJ,IACxBK,EAA0BpB,EAAYe,GAClCxC,GACA8C,EAAuBrB,EAAYe,EACvC,EAMEM,EAAyB,CAC3BrB,EACAH,KAEA,MAAMyB,EAAqB3B,EAAuBa,aAC9CR,EACAH,GAEJtB,SAAAA,EAAW,CACP2C,OAAQI,EAAmBb,QAAQ,WAAY,IAC/CO,YACInB,GAAmB0B,EAAc1B,EAAgBmB,cACvD,EAGAI,EAA4B,CAC9BpB,EACAH,KAEAI,EACIN,EAAuBa,aAAaR,EAAYH,IAGpDC,EAAmBD,EAAgB,EAqCvC,OACI2B,EAACC,EAAUC,OAAAC,OAAA,CACPrD,GAAIA,EACJgC,IAAKJ,EACL1B,MAAOwB,EACPzB,SAxFkB,KACtB,MAAMqD,EAAYxB,IAClB,IAAKwB,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAE3CE,IACAV,EAA0BS,EAAWhC,GACjCtB,GACA8C,EAAuBQ,EAAWhC,EACtC,EA+EIpB,WAAYA,KAAgBuB,EAC5BtB,QAlGY,KACZA,EACAA,IAEAuB,EAAc,GAClB,EA8FItB,OAAQA,EACRC,MAAOA,EACPO,YAAaA,EACb4C,MA5CAlD,EACO,CACHmD,KAAM,QACNC,WAAY,CACRzD,MAAO+C,EAAc1B,aAAe,EAAfA,EAAiBmB,eAIvC,CACHgB,KAAM,OACNC,WAAY,CACR,aAAc,eACd9C,YAAaL,EACbW,UACAoB,eAAgBhB,EAChBb,aAAcA,EACdkD,kBAAmBnD,EACnBoD,eAAiBC,GAAW,IAAIA,EAAOpB,cACvCqB,cAAgBD,IAAM,CAClBE,MAAOF,EAAOG,KACdC,eAAgBjB,EAAca,EAAOpB,eAEzCyB,eAAgBtB,EAChBlC,cAAeA,EACfC,cAAeA,IAqBvBwD,UAAU,UACVtD,aAAcA,EACdC,SAAUA,EAAQ,aACNqB,GACRnB,GACN,EAWJ0B,EAAwBD,GACnBA,EAAcA,EAAYP,QAAQ,IAAK,IAAM,GAGlDc,EAAiBP,GACdA,EACEA,EAAY2B,SAAS,KAAO3B,EAAc,IAAIA,IAD5B"}