@lifesg/react-design-system 4.0.0-alpha.12 → 4.0.0-alpha.13

package/pagination/pagination.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import{Chevron2LeftIcon as a}from"@lifesg/react-icons/chevron-2-left";import{Chevron2RightIcon as r}from"@lifesg/react-icons/chevron-2-right";import{ChevronLeftIcon as o}from"@lifesg/react-icons/chevron-left";import{ChevronLineLeftIcon as t}from"@lifesg/react-icons/chevron-line-left";import{ChevronLineRightIcon as s}from"@lifesg/react-icons/chevron-line-right";import{ChevronRightIcon as l}from"@lifesg/react-icons/chevron-right";import{EllipsisHorizontalIcon as n}from"@lifesg/react-icons/ellipsis-horizontal";import c from"clsx";import m,{useState as d,useEffect as p}from"react";import{Input as h}from"../input/input.js";import{InputSelect as u}from"../input-select/input-select.js";import{VisuallyHidden as g}from"../shared/accessibility/index.js";import{ClickableIcon as f}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as v}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsMounted as b}from"../util/use-mount.js";import{useMaxWidthMediaQuery as N}from"../theme/utils/use-media-query.js";import{Typography as j}from"../typography/index.js";import{paginationList as x,paginationMenu as y,iconButton as k,iconButtonNavigation as C,inputSelectWrapper as M,paginationWrapper as O,paginationMobileInput as w,inputView as $,labelDivider as P,label as S,pageItem as z,pageItemSelected as B,ellipsisContainer as F,hover as H}from"./pagination.styles.js";const L=m.forwardRef((({id:m,"data-testid":L,className:I,pageSize:q=10,totalItems:A,activePage:D,pageSizeOptions:R=E,showFirstAndLastNav:V,showPageSizeChanger:G=!1,onPageChange:J,onPageSizeChange:K},Q)=>{const T=b(),U=N("sm"),[W,X]=d(!1),[Y,Z]=d(!1),[_,ee]=d(""),[ie,ae]=d(R[0]),[re,oe]=d(!U&&G&&ie?ie.value:q),te=`${v()}-pagination`,se=Math.ceil(A/re),le=1===D,ne=D===se,ce=D>1?()=>ge(1):void 0,me=D<se?()=>ge(se):void 0,de=D>1?()=>ge(D-1):void 0,pe=D<se?()=>ge(parseInt(D.toString())+1):void 0;p((()=>{D&&he(D)}),[D]),p((()=>{oe(q),ae(R.find((e=>e.value===q)))}),[q]);const he=e=>{ee(e.toString())},ue=()=>{X(!1),Z(!1)},ge=e=>{J&&(J(e),he(e))},fe=()=>{const e=Math.min(se,D+5);ge(e),he(e),X(!0),Z(!1)},ve=()=>{const e=Math.max(1,D-5);ge(e),he(e),X(!1),Z(!0)},be=e=>{const i=e.target.value;if(void 0===i||0===i.length)ee("");else if(/^[0-9]+$/.test(i)){const e=parseInt(i.replace(/[^0-9]/g,""));he(Math.max(1,Math.min(se,e)))}else ee(i.replace(/[^0-9]/g,""))},Ne=e=>{e.preventDefault(),_&&(null==J||J(parseInt(_)))},je=()=>{X(!0)},xe=()=>{X(!1)},ye=()=>{Z(!0)},ke=()=>{Z(!1)},Ce=r=>e("div",{className:F,children:[i(f,{className:k,focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:ye,onMouseLeave:ke,onFocus:ye,onBlur:ke,onClick:ve,children:i(Y?a:n,{"aria-hidden":!0})}),Y&&i("div",{className:H,children:"Previous 5 pages"})]},r),Me=a=>e("div",{className:F,children:[i(f,{className:k,focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:je,onMouseLeave:xe,onFocus:je,onBlur:xe,onClick:fe,children:i(W?r:n,{"aria-hidden":!0})}),W&&i("div",{className:H,children:"Next 5 pages"})]},a);return e("nav",{className:c(O,I),ref:Q,id:m||"pagination-wrapper","data-testid":L||"pagination","aria-labelledby":te,children:[i(g,{id:te,"aria-hidden":!0,children:"pagination"}),i("div",{className:x,children:e("div",{className:y,children:[V&&i(f,{className:c(k,C),onClick:ce,disabled:le,focusHighlight:!1,"aria-label":"First page",focusOutline:"browser",children:i(t,{"aria-hidden":!0})}),i(f,{className:c(k,C),onClick:de,disabled:le,focusHighlight:!1,"aria-label":"Previous page",focusOutline:"browser",children:i(o,{"aria-hidden":!0})}),T&&U?e("div",{className:w,children:[i("form",{onSubmit:Ne,children:i(h,{className:$,value:_,onChange:be,autoComplete:"off",type:"numeric",id:(m||"pagination")+"-input","data-testid":(L||"pagination")+"-input","aria-label":`Page ${D} of ${se}`})}),i(j.BodyBL,{className:P,children:"/"}),i(j.BodyBL,{className:S,children:se})]}):[...Array(se)].map(((e,a)=>{const r=a+1,o=se-5,t=D===r;return se<=7?i("button",{onClick:()=>ge(r),className:c(z,t&&B),"aria-label":`page ${r} of ${se}`,"aria-current":!!t&&"page",onMouseOver:ue,onFocus:ue,children:r},r):D+1>5&&2===r?Ce(r):D-1<=o&&r===se-1-1?Me(r):r<=5&&D+1<=5||r<=1||r===D||r<=D+1&&r>=D-1-1||r>o&&D-1>o||r>se-1?i("button",{onClick:()=>ge(r),className:c(z,t&&B),"aria-label":`page ${r} of ${se}`,"aria-current":!!t&&"page",onMouseOver:ue,onFocus:ue,children:r},r):null})),i(f,{className:c(k,C),onClick:pe,disabled:ne,focusHighlight:!1,"aria-label":"Next page",focusOutline:"browser",children:i(l,{"aria-hidden":!0})}),V&&i(f,{className:c(k,C),onClick:me,disabled:ne,focusHighlight:!1,"aria-label":"Last page",focusOutline:"browser",children:i(s,{"aria-hidden":!0})})]})}),G&&!U&&e("div",{className:M,children:[i(g,{id:`${te}-page-size`,children:"Items per page"}),i(u,{"aria-labelledby":`${te}-page-size`,options:R,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:ie,onSelectOption:e=>{ae(e);const i=e.value,a=Math.ceil(A/i);oe(i);K&&K(D>=a?a:D,i)}})]})]})})),E=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];export{L as Pagination};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import{Chevron2LeftIcon as i}from"@lifesg/react-icons/chevron-2-left";import{Chevron2RightIcon as r}from"@lifesg/react-icons/chevron-2-right";import{ChevronLeftIcon as o}from"@lifesg/react-icons/chevron-left";import{ChevronLineLeftIcon as t}from"@lifesg/react-icons/chevron-line-left";import{ChevronLineRightIcon as l}from"@lifesg/react-icons/chevron-line-right";import{ChevronRightIcon as s}from"@lifesg/react-icons/chevron-right";import{EllipsisHorizontalIcon as n}from"@lifesg/react-icons/ellipsis-horizontal";import c from"clsx";import m,{useState as d,useEffect as p}from"react";import{Input as u}from"../input/input.js";import{InputSelect as h}from"../input-select/input-select.js";import{VisuallyHidden as g}from"../shared/accessibility/index.js";import{ClickableIcon as f}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as v}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsMounted as b}from"../util/use-mount.js";import{useMaxWidthMediaQuery as N}from"../theme/utils/use-media-query.js";import{Typography as j}from"../typography/index.js";import{paginationList as x,paginationMenu as y,iconButton as k,iconButtonNavigation as C,inputSelectWrapper as M,paginationWrapper as O,paginationMobileInput as w,inputView as $,labelDivider as P,label as S,pageItem as z,pageItemSelected as B,ellipsisContainer as F,hover as H}from"./pagination.styles.js";const L=m.forwardRef((({id:m,"data-testid":L,className:I,variant:q="default",pageSize:A=10,totalItems:D,activePage:R,pageSizeOptions:V=E,showFirstAndLastNav:G,showPageSizeChanger:J=!1,onPageChange:K,onPageSizeChange:Q},T)=>{const U=b(),W=N("sm"),X="default"===q?U&&W?"compact":"full":q,Y="compact"===X,Z=J&&"full"===X,[_,ee]=d(!1),[ae,ie]=d(!1),[re,oe]=d(""),[te,le]=d(A),se=((e,a)=>{var i;return null!==(i=e.find((e=>e.value===a)))&&void 0!==i?i:e[0]})(V,te),ne=`${v()}-pagination`,ce=Math.ceil(D/te),me=1===R,de=R===ce,pe=R>1?()=>be(1):void 0,ue=R<ce?()=>be(ce):void 0,he=R>1?()=>be(R-1):void 0,ge=R<ce?()=>be(parseInt(R.toString())+1):void 0;p((()=>{R&&fe(R)}),[R]),p((()=>{le(A)}),[A]);const fe=e=>{oe(e.toString())},ve=()=>{ee(!1),ie(!1)},be=e=>{K&&(K(e),fe(e))},Ne=()=>{const e=Math.min(ce,R+5);be(e),fe(e),ee(!0),ie(!1)},je=()=>{const e=Math.max(1,R-5);be(e),fe(e),ee(!1),ie(!0)},xe=e=>{const a=e.target.value;if(void 0===a||0===a.length)oe("");else if(/^[0-9]+$/.test(a)){const e=parseInt(a.replace(/[^0-9]/g,""));fe(Math.max(1,Math.min(ce,e)))}else oe(a.replace(/[^0-9]/g,""))},ye=e=>{e.preventDefault(),re&&(null==K||K(parseInt(re)))},ke=()=>{ee(!0)},Ce=()=>{ee(!1)},Me=()=>{ie(!0)},Oe=()=>{ie(!1)},we=r=>e("div",{className:F,children:[a(f,{className:k,focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:Me,onMouseLeave:Oe,onFocus:Me,onBlur:Oe,onClick:je,children:a(ae?i:n,{"aria-hidden":!0})}),ae&&a("div",{className:H,children:"Previous 5 pages"})]},r),$e=i=>e("div",{className:F,children:[a(f,{className:k,focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:ke,onMouseLeave:Ce,onFocus:ke,onBlur:Ce,onClick:Ne,children:a(_?r:n,{"aria-hidden":!0})}),_&&a("div",{className:H,children:"Next 5 pages"})]},i);return e("nav",{className:c(O,I),ref:T,id:m||"pagination-wrapper","data-testid":L||"pagination","aria-labelledby":ne,children:[a(g,{id:ne,"aria-hidden":!0,children:"pagination"}),a("div",{className:x,children:e("div",{className:y,children:[G&&a(f,{className:c(k,C),onClick:pe,disabled:me,focusHighlight:!1,"aria-label":"First page",focusOutline:"browser",children:a(t,{"aria-hidden":!0})}),a(f,{className:c(k,C),onClick:he,disabled:me,focusHighlight:!1,"aria-label":"Previous page",focusOutline:"browser",children:a(o,{"aria-hidden":!0})}),Y?e("div",{className:w,children:[a("form",{onSubmit:ye,children:a(u,{className:$,value:re,onChange:xe,autoComplete:"off",type:"numeric",id:(m||"pagination")+"-input","data-testid":(L||"pagination")+"-input","aria-label":`Page ${R} of ${ce}`})}),a(j.BodyBL,{className:P,children:"/"}),a(j.BodyBL,{className:S,children:ce})]}):[...Array(ce)].map(((e,i)=>{const r=i+1,o=ce-5,t=R===r;return ce<=7?a("button",{onClick:()=>be(r),className:c(z,t&&B),"aria-label":`page ${r} of ${ce}`,"aria-current":!!t&&"page",onMouseOver:ve,onFocus:ve,children:r},r):R+1>5&&2===r?we(r):R-1<=o&&r===ce-1-1?$e(r):r<=5&&R+1<=5||r<=1||r===R||r<=R+1&&r>=R-1-1||r>o&&R-1>o||r>ce-1?a("button",{onClick:()=>be(r),className:c(z,t&&B),"aria-label":`page ${r} of ${ce}`,"aria-current":!!t&&"page",onMouseOver:ve,onFocus:ve,children:r},r):null})),a(f,{className:c(k,C),onClick:ge,disabled:de,focusHighlight:!1,"aria-label":"Next page",focusOutline:"browser",children:a(s,{"aria-hidden":!0})}),G&&a(f,{className:c(k,C),onClick:ue,disabled:de,focusHighlight:!1,"aria-label":"Last page",focusOutline:"browser",children:a(l,{"aria-hidden":!0})})]})}),Z&&e("div",{className:M,children:[a(g,{id:`${ne}-page-size`,children:"Items per page"}),a(h,{"aria-labelledby":`${ne}-page-size`,options:V,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:se,onSelectOption:e=>{const a=e.value,i=Math.ceil(D/a);le(a);Q&&Q(R>=i?i:R,a)}})]})]})})),E=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];export{L as Pagination};
 //# sourceMappingURL=pagination.js.map

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 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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"}
+{"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 getPageSizeOption = (\n    pageSizeOptions: PageSizeItemProps[],\n    value: number\n) =>\n    pageSizeOptions.find((option) => option.value === value) ??\n    pageSizeOptions[0];\n\nconst Component = (\n    {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        variant = \"default\",\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 resolvedVariant =\n        variant === \"default\"\n            ? isMounted && isMobile\n                ? \"compact\"\n                : \"full\"\n            : variant;\n    const useInputLayout = resolvedVariant === \"compact\";\n    const usesPageSizeChanger =\n        showPageSizeChanger && resolvedVariant === \"full\";\n    const [hoverRightButton, setHoverRightButton] = useState(false);\n    const [hoverLeftButton, setHoverLeftButton] = useState(false);\n    const [inputText, setInputText] = useState<string>(\"\");\n    const [pageSizeLocal, setPageSize] = useState<number>(pageSize);\n    const selectedOption = getPageSizeOption(pageSizeOptions, pageSizeLocal);\n\n    const boundaryRange = 1;\n    const siblingRange = 1;\n\n    const internalId = useId();\n    const paginationId = `${internalId}-pagination`;\n\n    const totalPages = Math.ceil(totalItems / pageSizeLocal);\n    const isFirstPage = activePage === 1;\n    const isLastPage = activePage === totalPages;\n\n    const firstPaginationItem =\n        activePage > 1 ? () => handlePaginationItemClick(1) : undefined;\n    const lastPaginationItem =\n        activePage < totalPages\n            ? () => handlePaginationItemClick(totalPages)\n            : undefined;\n    const prevPaginationItem =\n        activePage > 1\n            ? () => handlePaginationItemClick(activePage - 1)\n            : undefined;\n    const nextPaginationItem =\n        activePage < totalPages\n            ? () =>\n                  handlePaginationItemClick(parseInt(activePage.toString()) + 1)\n            : undefined;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (activePage) {\n            setInputValue(activePage);\n        }\n    }, [activePage]);\n\n    useEffect(() => {\n        setPageSize(pageSize);\n    }, [pageSize]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const setInputValue = (value: number) => {\n        setInputText(value.toString());\n    };\n\n    const closeAllTooltips = () => {\n        setHoverRightButton(false);\n        setHoverLeftButton(false);\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handlePaginationItemClick = (pageIndex: number) => {\n        if (onPageChange) {\n            onPageChange(pageIndex);\n            setInputValue(pageIndex);\n        }\n    };\n\n    const handleFastForwardClick = () => {\n        const currentIndex = Math.min(totalPages, activePage + 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(true);\n        setHoverLeftButton(false);\n    };\n\n    const handleFastBackwardClick = () => {\n        const currentIndex = Math.max(1, activePage - 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(false);\n        setHoverLeftButton(true);\n    };\n\n    const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = event.target.value;\n        const numericRegex = /^[0-9]+$/;\n        if (value === undefined || value.length === 0) {\n            setInputText(\"\");\n        } else if (!numericRegex.test(value)) {\n            setInputText(value.replace(/[^0-9]/g, \"\"));\n        } else {\n            const newPage = parseInt(value.replace(/[^0-9]/g, \"\"));\n            setInputValue(Math.max(1, Math.min(totalPages, newPage)));\n        }\n    };\n\n    const handleInputSubmit = (event: React.FormEvent) => {\n        event.preventDefault();\n        if (inputText) {\n            onPageChange?.(parseInt(inputText));\n        }\n    };\n\n    const onHoverRightButton = () => {\n        setHoverRightButton(true);\n    };\n\n    const onBlurRightButton = () => {\n        setHoverRightButton(false);\n    };\n\n    const onHoverLeftButton = () => {\n        setHoverLeftButton(true);\n    };\n\n    const onBlurLeftButton = () => {\n        setHoverLeftButton(false);\n    };\n\n    const handleListItemClick = (item: PageSizeItemProps) => {\n        const pagesize = item.value;\n        const totalPage = Math.ceil(totalItems / pagesize);\n\n        setPageSize(pagesize);\n\n        const page = activePage >= totalPage ? totalPage : activePage;\n\n        if (onPageSizeChange) {\n            onPageSizeChange(page, pagesize);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPaginationItems = () => {\n        return [...Array(totalPages)].map((e, i) => {\n            const pageIndex = i + 1;\n            const startRange = boundaryRange + 2 + siblingRange * 2;\n            const endRange = totalPages - startRange;\n            const totalRange = (boundaryRange + siblingRange) * 2 + 3;\n            const active = activePage === pageIndex;\n            if (totalPages <= totalRange) {\n                return (\n                    <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                    {useInputLayout ? renderMobile() : 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            {usesPageSizeChanger && (\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","variant","pageSize","totalItems","activePage","pageSizeOptions","DEFAULT_OPTIONS","showFirstAndLastNav","showPageSizeChanger","onPageChange","onPageSizeChange","ref","isMounted","useIsMounted","isMobile","useMaxWidthMediaQuery","resolvedVariant","useInputLayout","usesPageSizeChanger","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","pageSizeLocal","setPageSize","selectedOption","value","_a","find","option","getPageSizeOption","paginationId","useId","totalPages","Math","ceil","isFirstPage","isLastPage","firstPaginationItem","handlePaginationItemClick","undefined","lastPaginationItem","prevPaginationItem","nextPaginationItem","parseInt","toString","useEffect","setInputValue","closeAllTooltips","pageIndex","handleFastForwardClick","currentIndex","min","handleFastBackwardClick","max","handleInput","event","target","length","test","newPage","replace","handleInputSubmit","preventDefault","onHoverRightButton","onBlurRightButton","onHoverLeftButton","onBlurLeftButton","renderStartEllipsis","_jsxs","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/types.d.ts

@@ -5,6 +5,13 @@ export interface PaginationProps {
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
+    /**
+     * Controls whether the pagination follows the responsive layout
+     * or always renders the full or compact layout.
+     *
+     * @default "default"
+     */
+    variant?: "default" | "full" | "compact" | undefined;
     /**
      * Number of items displayed per page.
      *
@@ -34,7 +41,7 @@ export interface PaginationProps {
      */
     showFirstAndLastNav?: boolean | undefined;
     /**
-     * When `true`, renders a dropdown on desktop viewports to change the `pageSize`.
+     * When `true`, renders a dropdown in the full layout to change the `pageSize`.
      *
      * @default false
      */

package/select-histogram/types.d.ts

@@ -29,6 +29,7 @@ export interface SelectHistogramProps extends Pick<AriaAttributes, "aria-labelle
     histogramSlider: SelectHistogramSliderProps;
     /**
      * Controls how long option labels are truncated when they overflow.
+     * Specify `"none"` to display option labels in full.
      *
      * @default "end"
      */

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-label.js","sources":["../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Font } from \"../../theme\";\nimport { useApplyStyle } from \"../../theme/utils/use-apply-styles\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport * as styles from \"./dropdown-label.styles\";\nimport type { DropdownVariantType, LabelDisplayType } from \"./types\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: \"middle\" | \"end\" | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]\n            : Font.Spec[\"body-size-baseline\"];\n    const fontFamily = Font.Spec[\"font-family-body\"];\n    const { ref, width } = useResizeDetector();\n\n    const primaryTextRef = useRef<HTMLDivElement>(null);\n    const secondaryTextRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(primaryTextRef, {\n        [styles.tokens.primaryText.maxLines]: String(maxLines),\n    });\n\n    useApplyStyle(secondaryTextRef, {\n        [styles.tokens.secondaryText.maxLines]: String(maxLines),\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width - 50;\n        },\n        [width, displayType, fontSize, fontFamily]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        truncationType === \"middle\" &&\n        (shouldTruncateTitle || shouldTruncateLabel)\n            ? \"next-line\"\n            : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <span className={styles.matchedText}>\n                    {label.slice(startIndex, endIndex)}\n                </span>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateFirstLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateSecondLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                styles.label,\n                variant === \"small\" && styles.labelVariantSmall,\n                itemDisplayType === \"next-line\" && styles.labelNextLine\n            )}\n        >\n            <div\n                ref={primaryTextRef}\n                aria-label={label}\n                className={clsx(\n                    styles.primaryText,\n                    bold && styles.primaryTextBold,\n                    disabled && styles.primaryTextDisabled,\n                    !disabled && selected && styles.primaryTextSelected,\n                    itemDisplayType === \"inline\" &&\n                        styles.primaryTextLabelInline,\n                    truncationType === \"end\" && styles.primaryTextTruncateEnd\n                )}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </div>\n            {sublabel && (\n                <div\n                    ref={secondaryTextRef}\n                    aria-label={sublabel}\n                    className={clsx(\n                        styles.secondaryText,\n                        itemDisplayType === \"inline\" &&\n                            styles.secondaryTextLabelInline,\n                        truncationType === \"end\" &&\n                            styles.secondaryTextTruncateEnd,\n                        displayType === \"next-line\"\n                            ? styles.secondaryTextNextLine\n                            : styles.secondaryTextInline\n                    )}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["DropdownLabel","bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"soCAuBO,MAAMA,EAAgB,EACzBC,OACAC,cAAc,SAAQC,MACtBA,EACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAKC,KAAK,gBACVD,EAAKC,KAAK,sBACdC,EAAaF,EAAKC,KAAK,qBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,IAEjBC,EAAiBC,EAAuB,MACxCC,EAAmBD,EAAuB,MAEhDE,EAAcH,EAAgB,CAC1B,CAACI,EAAcC,YAAYlB,UAAWmB,OAAOnB,KAGjDgB,EAAcD,EAAkB,CAC5B,CAACE,EAAcG,cAAcpB,UAAWmB,OAAOnB,KAMnD,MAAMqB,EAAuBC,GACxBC,IACG,GAAoB,WAAhB1B,IAA6Bc,EAC7B,OAAO,EAaX,OAPkBa,EAAaC,aAC3BF,EACA,GAAGjB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACA,EAAOd,EAAaS,EAAUG,IAM7BiB,EAAsBC,GACxB,IAAMN,EAAqBvB,IAC3B,CAACuB,EAAsBvB,IAErB8B,EAAsBD,GACxB,IAAMxB,GAAYkB,EAAqBlB,IACvC,CAACkB,EAAsBlB,IAKrB0B,EACiB,WAAnBzB,IACCsB,GAAuBE,GAClB,YACA/B,EAKJiC,EAAqBP,IACvB,IAAKxB,EACD,OAAOwB,EAGX,MAAMQ,EAAQhC,EAAWiC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAanC,EAAWsC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,EAAAC,EAAA,CAAAC,SAAA,CACK1C,EAAM2C,MAAM,EAAGP,GAChBQ,EAAA,OAAA,CAAMC,UAAWC,EAAkBJ,SAC9B1C,EAAM2C,MAAMP,EAAYE,KAE5BtC,EAAM2C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAC,EAAA,CAAAC,SAAA,CACIE,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAC,EACa,IAAbhD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAG,EACa,IAAblD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAA,MAAA,CACI5B,IAAKA,EACLiC,UAAWG,EACPK,EACY,UAAZ9C,GAAuB+C,EACH,cAApBvB,GAAmCwB,GACtCb,SAAA,CAEDE,SACIhC,IAAKG,EAAc,aACPf,EACZ6C,UAAWG,EACPQ,EACA1D,GAAQ2D,EACRrD,GAAYsD,GACXtD,GAAYD,GAAYwD,EACL,WAApB5B,GACI6B,EACe,QAAnBtD,GAA4BuD,GAC/BnB,SAEmB,WAAnBpC,GAA+BsB,EAC1BmB,EAAoB/C,GACpBgC,EAAkBhC,KAE3BK,GACGuC,EAAA,MAAA,CACIhC,IAAKK,EAAgB,aACTZ,EACZwC,UAAWG,EACPc,EACoB,WAApB/B,GACIgC,EACe,QAAnBzD,GACI0D,EACY,cAAhBjE,EACMkE,EACAC,YAGU,WAAnB5D,GAA+BwB,EAC1BiB,EAAoB1C,GACpBA,MAGZ"}
+{"version":3,"file":"dropdown-label.js","sources":["../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Font } from \"../../theme\";\nimport { useApplyStyle } from \"../../theme/utils/use-apply-styles\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport * as styles from \"./dropdown-label.styles\";\nimport type {\n    DropdownVariantType,\n    LabelDisplayType,\n    TruncateType,\n} from \"./types\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: TruncateType | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]\n            : Font.Spec[\"body-size-baseline\"];\n    const fontFamily = Font.Spec[\"font-family-body\"];\n    const { ref, width } = useResizeDetector();\n\n    const noTruncation = truncationType === \"none\";\n\n    const primaryTextRef = useRef<HTMLDivElement>(null);\n    const secondaryTextRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(primaryTextRef, {\n        [styles.tokens.primaryText.maxLines]: noTruncation\n            ? null\n            : String(maxLines),\n    });\n\n    useApplyStyle(secondaryTextRef, {\n        [styles.tokens.secondaryText.maxLines]: noTruncation\n            ? null\n            : String(maxLines),\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (noTruncation || displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width - 50;\n        },\n        [noTruncation, width, displayType, fontSize, fontFamily]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        truncationType === \"middle\" &&\n        (shouldTruncateTitle || shouldTruncateLabel)\n            ? \"next-line\"\n            : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <span className={styles.matchedText}>\n                    {label.slice(startIndex, endIndex)}\n                </span>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateFirstLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateSecondLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                styles.label,\n                variant === \"small\" && styles.labelVariantSmall,\n                itemDisplayType === \"next-line\" && styles.labelNextLine\n            )}\n        >\n            <div\n                ref={primaryTextRef}\n                aria-label={label}\n                className={clsx(\n                    styles.primaryText,\n                    bold && styles.primaryTextBold,\n                    disabled && styles.primaryTextDisabled,\n                    !disabled && selected && styles.primaryTextSelected,\n                    itemDisplayType === \"inline\" &&\n                        styles.primaryTextLabelInline,\n                    truncationType === \"end\" && styles.primaryTextTruncateEnd\n                )}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </div>\n            {sublabel && (\n                <div\n                    ref={secondaryTextRef}\n                    aria-label={sublabel}\n                    className={clsx(\n                        styles.secondaryText,\n                        itemDisplayType === \"inline\" &&\n                            styles.secondaryTextLabelInline,\n                        truncationType === \"end\" &&\n                            styles.secondaryTextTruncateEnd,\n                        displayType === \"next-line\"\n                            ? styles.secondaryTextNextLine\n                            : styles.secondaryTextInline\n                    )}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["DropdownLabel","bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","noTruncation","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"soCA2BO,MAAMA,EAAgB,EACzBC,OACAC,cAAc,SAAQC,MACtBA,EACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAKC,KAAK,gBACVD,EAAKC,KAAK,sBACdC,EAAaF,EAAKC,KAAK,qBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,IAEjBC,EAAkC,SAAnBT,EAEfU,EAAiBC,EAAuB,MACxCC,EAAmBD,EAAuB,MAEhDE,EAAcH,EAAgB,CAC1B,CAACI,EAAcC,YAAYnB,UAAWa,EAChC,KACAO,OAAOpB,KAGjBiB,EAAcD,EAAkB,CAC5B,CAACE,EAAcG,cAAcrB,UAAWa,EAClC,KACAO,OAAOpB,KAMjB,MAAMsB,EAAuBC,GACxBC,IACG,GAAIX,GAAgC,WAAhBhB,IAA6Bc,EAC7C,OAAO,EAaX,OAPkBc,EAAaC,aAC3BF,EACA,GAAGlB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACE,EAAcF,EAAOd,EAAaS,EAAUG,IAM3CkB,EAAsBC,GACxB,IAAMN,EAAqBxB,IAC3B,CAACwB,EAAsBxB,IAErB+B,EAAsBD,GACxB,IAAMzB,GAAYmB,EAAqBnB,IACvC,CAACmB,EAAsBnB,IAKrB2B,EACiB,WAAnB1B,IACCuB,GAAuBE,GAClB,YACAhC,EAKJkC,EAAqBP,IACvB,IAAKzB,EACD,OAAOyB,EAGX,MAAMQ,EAAQjC,EAAWkC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAapC,EAAWuC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,EAAAC,EAAA,CAAAC,SAAA,CACK3C,EAAM4C,MAAM,EAAGP,GAChBQ,EAAA,OAAA,CAAMC,UAAWC,EAAkBJ,SAC9B3C,EAAM4C,MAAMP,EAAYE,KAE5BvC,EAAM4C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAC,EAAA,CAAAC,SAAA,CACIE,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAC,EACa,IAAbjD,GAAkBkD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAG,EACa,IAAbnD,GAAkBkD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAA,MAAA,CACI7B,IAAKA,EACLkC,UAAWG,EACPK,EACY,UAAZ/C,GAAuBgD,EACH,cAApBvB,GAAmCwB,GACtCb,SAAA,CAEDE,SACIjC,IAAKI,EAAc,aACPhB,EACZ8C,UAAWG,EACPQ,EACA3D,GAAQ4D,EACRtD,GAAYuD,GACXvD,GAAYD,GAAYyD,EACL,WAApB5B,GACI6B,EACe,QAAnBvD,GAA4BwD,GAC/BnB,SAEmB,WAAnBrC,GAA+BuB,EAC1BmB,EAAoBhD,GACpBiC,EAAkBjC,KAE3BK,GACGwC,EAAA,MAAA,CACIjC,IAAKM,EAAgB,aACTb,EACZyC,UAAWG,EACPc,EACoB,WAApB/B,GACIgC,EACe,QAAnB1D,GACI2D,EACY,cAAhBlE,EACMmE,EACAC,YAGU,WAAnB7D,GAA+ByB,EAC1BiB,EAAoB3C,GACpBA,MAGZ"}

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

@@ -3,8 +3,9 @@
  *
  * - `"middle"` trims the centre of the text.
  * - `"end"` trims from the right.
+ * - `"none"` disables truncation, the text wraps and is displayed in full.
  */
-export type TruncateType = "middle" | "end";
+export type TruncateType = "middle" | "end" | "none";
 /**
  * Async load state for dropdown items.
  *
@@ -84,7 +85,10 @@ export interface DropdownConfigProps {
     itemsLoadState?: ItemsLoadStateType | undefined;
     /** How overflowing item text is truncated. */
     itemTruncationType?: TruncateType | undefined;
-    /** Maximum visible lines before the label is truncated (applies to `"end"` truncation). */
+    /**
+     * Maximum visible lines before the label is truncated (applies to `"end"`
+     * truncation). Ignored when `itemTruncationType` is `"none"`.
+     */
     itemMaxLines?: number | undefined;
     /** Visual size variant for the dropdown items. */
     variant?: DropdownVariantType | undefined;

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

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as o}from"react/jsx-runtime";import{ChevronLeftIcon as i}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as s}from"@lifesg/react-icons/chevron-right";import l from"clsx";import n from"../../external/lodash/throttle.js";import{forwardRef as c,useState as a,useRef as d,useImperativeHandle as m,useCallback as f,useMemo as h,useEffect as p}from"react";import{useResizeDetector as u}from"../../external/react-resize-detector/build/index.esm.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as j}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{ClickableIcon as b}from"../clickable-icon/clickable-icon.js";import{tokens as v,wrapper as g,content as k,fadeIndicatorButton as x,indicatorLeft as N,fade as y,fadeLeft as z,indicatorRight as R,fadeRight as w}from"./fade-wrapper.styles.js";import{getFadeColorSet as C,getFadeBackgroundColorValue as L}from"./helpers.js";const W=c(((c,W)=>{var{children:q,className:E,fadeColor:I,fadePosition:M="both",showIndicator:P=!1,onResize:_}=c,O=e(c,["children","className","fadeColor","fadePosition","showIndicator","onResize"]);const[A,B]=a("left"===M||"both"===M),[D,F]=a("right"===M||"both"===M),G=d(null),H=d(null),J=d(null),K=d(null),Q=C(I);j(J,{[v.backgroundColor]:L(Q.left,P)}),j(K,{[v.backgroundColor]:L(Q.right,P)}),u({onResize:U,targetRef:G,refreshMode:"debounce",refreshRate:50}),m(W,(()=>({resize(){U()}})));const S=f((()=>{const e=G.current,r=H.current;e&&r&&r.scrollWidth>e.offsetWidth?(F(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),B(r.scrollLeft>=1)):(F(!1),B(!1))}),[]),T=h((()=>n(S,50)),[S]);function U(){S(),_&&_({content:H.current,wrapper:G.current})}p((()=>{const e=H.current;return S(),e&&e.addEventListener("scroll",T),()=>{e&&e.removeEventListener("scroll",T),T.cancel()}}),[S,T]);return r("div",Object.assign({ref:G,className:l(g,E)},O,{children:[t("div",{ref:H,className:k,children:q}),r(o,{children:[A&&t("div",{ref:J,className:l(y,z),"data-id":"left-fade",children:P&&t(b,{className:l(x,N),"data-id":"left-fade-indicator-button",children:t(i,{})})}),D&&t("div",{ref:K,className:l(y,w),"data-id":"right-fade",children:P&&t(b,{className:l(x,R),"data-id":"right-fade-indicator-button",children:t(s,{})})})]})]}))}));export{W as FadeWrapper};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as o}from"react/jsx-runtime";import{ChevronLeftIcon as i}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as s}from"@lifesg/react-icons/chevron-right";import l from"clsx";import n from"../../external/lodash/throttle.js";import{forwardRef as c,useState as a,useRef as d,useImperativeHandle as m,useCallback as f,useMemo as h,useEffect as u}from"react";import{useResizeDetector as p}from"../../external/react-resize-detector/build/index.esm.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as j}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{ClickableIcon as b}from"../clickable-icon/clickable-icon.js";import{tokens as v,wrapper as g,content as k,fadeIndicatorButton as x,indicatorLeft as N,fade as W,fadeLeft as y,indicatorRight as z,fadeRight as L}from"./fade-wrapper.styles.js";import{getFadeColorSet as R,getFadeBackgroundColorValue as w}from"./helpers.js";const C=c(((c,C)=>{var{children:E,className:q,fadeColor:I,fadePosition:M="both",showIndicator:P=!1,onResize:_}=c,O=e(c,["children","className","fadeColor","fadePosition","showIndicator","onResize"]);const[T,A]=a("left"===M||"both"===M),[B,D]=a("right"===M||"both"===M),F=d(null),G=d(null),H=d(null),J=d(null),K=R(I);j(H,{[v.backgroundColor]:w(K.left,P)}),j(J,{[v.backgroundColor]:w(K.right,P)}),p({onResize:U,targetRef:F,refreshMode:"debounce",refreshRate:50}),m(C,(()=>({resize(){U()},scrollToEnd(){const e=G.current,r=F.current;e&&r&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)}})));const Q=f((()=>{const e=F.current,r=G.current;e&&r&&r.scrollWidth>e.offsetWidth?(D(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),A(r.scrollLeft>=1)):(D(!1),A(!1))}),[]),S=h((()=>n(Q,50)),[Q]);function U(){Q(),_&&_({content:G.current,wrapper:F.current})}u((()=>{const e=G.current;return Q(),e&&e.addEventListener("scroll",S),()=>{e&&e.removeEventListener("scroll",S),S.cancel()}}),[Q,S]);return r("div",Object.assign({ref:F,className:l(g,q)},O,{children:[t("div",{ref:G,className:k,children:E}),r(o,{children:[T&&t("div",{ref:H,className:l(W,y),"data-id":"left-fade",children:P&&t(b,{className:l(x,N),"data-id":"left-fade-indicator-button",children:t(i,{})})}),B&&t("div",{ref:J,className:l(W,L),"data-id":"right-fade",children:P&&t(b,{className:l(x,z),"data-id":"right-fade-indicator-button",children:t(s,{})})})]})]}))}));export{C as FadeWrapper};
 //# sourceMappingURL=fade-wrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fade-wrapper.js","sources":["../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport * as styles from \"./fade-wrapper.styles\";\nimport { getFadeBackgroundColorValue, getFadeColorSet } from \"./helpers\";\nimport type { FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    const fadeColorSet = getFadeColorSet(fadeColor);\n\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.left,\n            showIndicator\n        ),\n    });\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.right,\n            showIndicator\n        ),\n    });\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const handleScroll = useCallback(() => {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }, []);\n\n    const throttledScrollHandler = useMemo(() => {\n        return throttle(handleScroll, 50);\n    }, [handleScroll]);\n\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n\n            throttledScrollHandler.cancel();\n        };\n    }, [handleScroll, throttledScrollHandler]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n\n        // TODO: Will move this out to Breadcrumb when it uses this component\n        // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n        //     content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        // }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorLeft\n                                )}\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n                {showFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorRight\n                                )}\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <div ref={contentRef} className={styles.content}>\n                {children}\n            </div>\n            {renderFade()}\n        </div>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","className","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","fadeColorSet","getFadeColorSet","useApplyStyle","styles.tokens","backgroundColor","getFadeBackgroundColorValue","left","right","useResizeDetector","handleResize","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","handleScroll","useCallback","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","throttledScrollHandler","useMemo","throttle","useEffect","addEventListener","removeEventListener","cancel","_jsxs","Object","assign","clsx","styles.wrapper","_jsx","styles.content","styles.fade","styles.fadeLeft","ClickableIcon","styles.fadeIndicatorButton","styles.indicatorLeft","ChevronLeftIcon","styles.fadeRight","styles.indicatorRight","ChevronRightIcon"],"mappings":"ysCAsBA,MA0LaA,EAAcC,GA1LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MACpCE,EAAcF,EAAuB,MACrCG,EAAeH,EAAuB,MAEtCI,EAAeC,EAAgBjB,GAErCkB,EAAcJ,EAAa,CACvB,CAACK,EAAcC,iBAAkBC,EAC7BL,EAAaM,KACbpB,KAGRgB,EAAcH,EAAc,CACxB,CAACI,EAAcC,iBAAkBC,EAC7BL,EAAaO,MACbrB,KAKRsB,EAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,MAOR,MAAMM,EAAeC,GAAY,KAC7B,MAAMC,EAAUtB,EAAWuB,QACrBC,EAAUtB,EAAWqB,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpD3B,EACI4B,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtC9B,EAAgB4B,EAAQK,YAAc,KAEtC9B,GAAiB,GACjBH,GAAgB,GACpB,GACD,IAEGkC,EAAyBC,GAAQ,IAC5BC,EAASZ,EAAc,KAC/B,CAACA,IAwBJ,SAASN,IACLM,IAEI5B,GACAA,EAAS,CACLgC,QAAStB,EAAWqB,QACpBD,QAAStB,EAAWuB,SAQhC,CApCAU,GAAU,KACN,MAAMT,EAAUtB,EAAWqB,QAQ3B,OANAH,IAEII,GACAA,EAAQU,iBAAiB,SAAUJ,GAGhC,KACCN,GACAA,EAAQW,oBAAoB,SAAUL,GAG1CA,EAAuBM,QAAQ,CAClC,GACF,CAAChB,EAAcU,IAsElB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CACIrD,IAAKc,EACLZ,UAAWoD,EAAKC,EAAgBrD,IAC5BK,EAAU,CAAAN,SAAA,CAEduD,EAAA,MAAA,CAAKxD,IAAKgB,EAAYd,UAAWuD,EAAcxD,SAC1CA,IAlDLkD,eACK1C,GACG+C,EAAA,MAAA,CACIxD,IAAKiB,EACLf,UAAWoD,EAAKI,EAAaC,GAAgB,UACrC,YAAW1D,SAElBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAC,GACH,UACO,6BAA4B7D,SAEpCuD,EAACO,EAAe,CAAA,OAK/BnD,GACG4C,EAAA,MAAA,CACIxD,IAAKkB,EACLhB,UAAWoD,EAAKI,EAAaM,aACrB,aAAY/D,SAEnBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAI,aAEI,8BAA6BhE,SAErCuD,EAACU,EAAgB,CAAA,aAmBnC"}
+{"version":3,"file":"fade-wrapper.js","sources":["../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport * as styles from \"./fade-wrapper.styles\";\nimport { getFadeBackgroundColorValue, getFadeColorSet } from \"./helpers\";\nimport type { FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    const fadeColorSet = getFadeColorSet(fadeColor);\n\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.left,\n            showIndicator\n        ),\n    });\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.right,\n            showIndicator\n        ),\n    });\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n            scrollToEnd() {\n                const content = contentRef.current;\n                const wrapper = wrapperRef.current;\n                if (content && wrapper) {\n                    content.scrollLeft =\n                        content.scrollWidth - wrapper.offsetWidth;\n                }\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const handleScroll = useCallback(() => {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }, []);\n\n    const throttledScrollHandler = useMemo(() => {\n        return throttle(handleScroll, 50);\n    }, [handleScroll]);\n\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n\n            throttledScrollHandler.cancel();\n        };\n    }, [handleScroll, throttledScrollHandler]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorLeft\n                                )}\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n                {showFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorRight\n                                )}\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <div ref={contentRef} className={styles.content}>\n                {children}\n            </div>\n            {renderFade()}\n        </div>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","className","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","fadeColorSet","getFadeColorSet","useApplyStyle","styles.tokens","backgroundColor","getFadeBackgroundColorValue","left","right","useResizeDetector","handleResize","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","scrollToEnd","content","current","wrapper","scrollLeft","scrollWidth","offsetWidth","handleScroll","useCallback","Math","round","throttledScrollHandler","useMemo","throttle","useEffect","addEventListener","removeEventListener","cancel","_jsxs","Object","assign","clsx","styles.wrapper","_jsx","styles.content","styles.fade","styles.fadeLeft","ClickableIcon","styles.fadeIndicatorButton","styles.indicatorLeft","ChevronLeftIcon","styles.fadeRight","styles.indicatorRight","ChevronRightIcon"],"mappings":"ysCAsBA,MA6LaA,EAAcC,GA7LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MACpCE,EAAcF,EAAuB,MACrCG,EAAeH,EAAuB,MAEtCI,EAAeC,EAAgBjB,GAErCkB,EAAcJ,EAAa,CACvB,CAACK,EAAcC,iBAAkBC,EAC7BL,EAAaM,KACbpB,KAGRgB,EAAcH,EAAc,CACxB,CAACI,EAAcC,iBAAkBC,EAC7BL,EAAaO,MACbrB,KAKRsB,EAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,EACA,WAAAM,GACI,MAAMC,EAAUnB,EAAWoB,QACrBC,EAAUvB,EAAWsB,QACvBD,GAAWE,IACXF,EAAQG,WACJH,EAAQI,YAAcF,EAAQG,YAE1C,MAOR,MAAMC,EAAeC,GAAY,KAC7B,MAAML,EAAUvB,EAAWsB,QACrBD,EAAUnB,EAAWoB,QAEvBC,GAAWF,GAAWA,EAAQI,YAAcF,EAAQG,aAMpD3B,EACI8B,KAAKC,MAAMT,EAAQG,YACfH,EAAQI,YAAcJ,EAAQK,aAEtC9B,EAAgByB,EAAQG,YAAc,KAEtCzB,GAAiB,GACjBH,GAAgB,GACpB,GACD,IAEGmC,EAAyBC,GAAQ,IAC5BC,EAASN,EAAc,KAC/B,CAACA,IAwBJ,SAASb,IACLa,IAEInC,GACAA,EAAS,CACL6B,QAASnB,EAAWoB,QACpBC,QAASvB,EAAWsB,SAGhC,CA/BAY,GAAU,KACN,MAAMb,EAAUnB,EAAWoB,QAQ3B,OANAK,IAEIN,GACAA,EAAQc,iBAAiB,SAAUJ,GAGhC,KACCV,GACAA,EAAQe,oBAAoB,SAAUL,GAG1CA,EAAuBM,QAAQ,CAClC,GACF,CAACV,EAAcI,IAiElB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CACItD,IAAKc,EACLZ,UAAWqD,EAAKC,EAAgBtD,IAC5BK,EAAU,CAAAN,SAAA,CAEdwD,EAAA,MAAA,CAAKzD,IAAKgB,EAAYd,UAAWwD,EAAczD,SAC1CA,IAlDLmD,eACK3C,GACGgD,EAAA,MAAA,CACIzD,IAAKiB,EACLf,UAAWqD,EAAKI,EAAaC,GAAgB,UACrC,YAAW3D,SAElBI,GACGoD,EAACI,EAAa,CACV3D,UAAWqD,EACPO,EACAC,GACH,UACO,6BAA4B9D,SAEpCwD,EAACO,EAAe,CAAA,OAK/BpD,GACG6C,EAAA,MAAA,CACIzD,IAAKkB,EACLhB,UAAWqD,EAAKI,EAAaM,aACrB,aAAYhE,SAEnBI,GACGoD,EAACI,EAAa,CACV3D,UAAWqD,EACPO,EACAI,aAEI,8BAA6BjE,SAErCwD,EAACU,EAAgB,CAAA,aAmBnC"}

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

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

package/shared/styles/index.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Generates CSS for a styled scrollbar. Pass "vertical" for panels that scroll
+ * vertically and "horizontal" for containers that scroll horizontally.
+ */
+export declare const scrollbarCss: (axis: "vertical" | "horizontal") => string;
 /**
  * Generates CSS for limiting text to a specified number of lines after which it
  * is truncated with an ellipsis.

package/theme/styles/a11y-playground.css

@@ -103,6 +103,9 @@
     --fds-radius-sm: 4px;
     --fds-radius-md: 8px;
     --fds-radius-lg: 12px;
+    --fds-radius-xl: 16px;
+    --fds-radius-xxl: 24px;
+    --fds-radius-xxxl: 32px;
     --fds-radius-full: 9999px;
 }
 
@@ -224,6 +227,8 @@
 
     --fds-colour-text-primary-strong: var(--fds-colour-primary-40);
 
+    --fds-colour-text-primary-stronger: var(--fds-colour-primary-30);
+
     --fds-colour-text-primary-strongest: var(--fds-colour-primary-20);
 
     --fds-colour-text-brand: var(--fds-colour-brand-50);
@@ -360,6 +365,28 @@
 
     --fds-colour-bg-strongest: var(--fds-colour-neutral-90);
 
+    --fds-colour-bg-primary: var(--fds-colour-primary-50);
+
+    --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
+
+    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
+
+    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
+
+    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
+
+    --fds-colour-bg-brand-subtler: var(--fds-colour-brand-95);
+
+    --fds-colour-bg-brand-subtlest: var(--fds-colour-brand-100);
+
+    --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
+
+    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
+
+    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
+
+    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
+
     --fds-colour-bg-hover: var(--fds-colour-primary-95);
 
     --fds-colour-bg-hover-strong: var(--fds-colour-primary-90);
@@ -430,24 +457,6 @@
 
     --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-40);
 
-    --fds-colour-bg-primary: var(--fds-colour-primary-50);
-
-    --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
-
-    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
-
-    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
-
-    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
-
-    --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
-
-    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
-
-    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
-
-    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
-
     --fds-colour-bg-available: #6DD0A1;
 
     --fds-colour-bg-primary-hover: var(--fds-colour-primary-40);
@@ -653,12 +662,13 @@
     /* text */
     --fds-colour-text: var(--fds-colour-neutral-100);
     --fds-colour-text-subtle: var(--fds-colour-neutral-80);
-    --fds-colour-text-subtler: var(--fds-colour-neutral-60);
-    --fds-colour-text-subtlest: var(--fds-colour-neutral-50);
+    --fds-colour-text-subtler: var(--fds-colour-neutral-70);
+    --fds-colour-text-subtlest: var(--fds-colour-neutral-60);
     --fds-colour-text-primary: var(--fds-colour-primary-60);
     --fds-colour-text-primary-strong: var(--fds-colour-primary-70);
+    --fds-colour-text-primary-stronger: var(--fds-colour-primary-80);
     --fds-colour-text-primary-strongest: var(--fds-colour-primary-90);
-    --fds-colour-text-brand: var(--fds-colour-brand-50);
+    --fds-colour-text-brand: var(--fds-colour-brand-60);
     --fds-colour-text-secondary: var(--fds-colour-secondary-60);
     --fds-colour-text-secondary-subtle: var(--fds-colour-secondary-50);
     --fds-colour-text-hover: var(--fds-colour-primary-70);
@@ -674,13 +684,13 @@
     --fds-colour-text-info: var(--fds-colour-info-70);
     --fds-colour-text-inverse: var(--fds-colour-black);
     /* icon */
-    --fds-colour-icon: var(--fds-colour-neutral-60);
-    --fds-colour-icon-subtle: var(--fds-colour-neutral-50);
-    --fds-colour-icon-strongest: var(--fds-colour-neutral-90);
+    --fds-colour-icon: var(--fds-colour-neutral-70);
+    --fds-colour-icon-subtle: var(--fds-colour-neutral-60);
+    --fds-colour-icon-strongest: var(--fds-colour-neutral-100);
     --fds-colour-icon-primary: var(--fds-colour-primary-60);
     --fds-colour-icon-primary-subtle: var(--fds-colour-primary-50);
     --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-40);
-    --fds-colour-icon-brand: var(--fds-colour-brand-50);
+    --fds-colour-icon-brand: var(--fds-colour-brand-60);
     --fds-colour-icon-secondary: var(--fds-colour-secondary-60);
     --fds-colour-icon-secondary-subtle: var(--fds-colour-secondary-50);
     --fds-colour-icon-hover: var(--fds-colour-primary-70);
@@ -690,15 +700,15 @@
     --fds-colour-icon-disabled-subtle: var(--fds-colour-neutral-50);
     --fds-colour-icon-selected-disabled: var(--fds-colour-neutral-50);
     --fds-colour-icon-success: var(--fds-colour-success-60);
-    --fds-colour-icon-warning: var(--fds-colour-warning-50);
+    --fds-colour-icon-warning: var(--fds-colour-warning-70);
     --fds-colour-icon-error: var(--fds-colour-error-60);
     --fds-colour-icon-error-strong: var(--fds-colour-error-70);
     --fds-colour-icon-info: var(--fds-colour-info-60);
     --fds-colour-icon-inverse: var(--fds-colour-black);
     --fds-colour-icon-primary-inverse: var(--fds-colour-primary-inverse);
     /* border - adjusted for dark mode */
-    --fds-colour-border: var(--fds-colour-neutral-20);
-    --fds-colour-border-strong: var(--fds-colour-neutral-40);
+    --fds-colour-border: var(--fds-colour-neutral-40);
+    --fds-colour-border-strong: var(--fds-colour-neutral-50);
     --fds-colour-border-stronger: var(--fds-colour-neutral-60);
     --fds-colour-border-primary: var(--fds-colour-primary-60);
     --fds-colour-border-primary-strong: var(--fds-colour-primary-70);
@@ -724,7 +734,18 @@
     --fds-colour-bg: var(--fds-colour-black);
     --fds-colour-bg-strong: var(--fds-colour-neutral-10);
     --fds-colour-bg-stronger: var(--fds-colour-neutral-20);
-    --fds-colour-bg-strongest: var(--fds-colour-neutral-20);
+    --fds-colour-bg-strongest: var(--fds-colour-neutral-30);
+    --fds-colour-bg-primary: var(--fds-colour-primary-60);
+    --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
+    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
+    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
+    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
+    --fds-colour-bg-brand-subtler: var(--fds-colour-brand-20);
+    --fds-colour-bg-brand-subtlest: var(--fds-colour-brand-10);
+    --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
+    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
+    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
+    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
     --fds-colour-bg-hover: var(--fds-colour-primary-20);
     --fds-colour-bg-hover-strong: var(--fds-colour-primary-20);
     --fds-colour-bg-hover-subtle: var(--fds-colour-primary-10);
@@ -745,8 +766,8 @@
     --fds-colour-bg-success-strong-hover: var(--fds-colour-success-70);
     --fds-colour-bg-warning: var(--fds-colour-warning-10);
     --fds-colour-bg-warning-hover: var(--fds-colour-warning-20);
-    --fds-colour-bg-warning-strong: var(--fds-colour-warning-60);
-    --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-70);
+    --fds-colour-bg-warning-strong: var(--fds-colour-warning-70);
+    --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-80);
     --fds-colour-bg-info: var(--fds-colour-info-10);
     --fds-colour-bg-info-hover: var(--fds-colour-info-20);
     --fds-colour-bg-info-strong: var(--fds-colour-info-60);
@@ -760,16 +781,7 @@
     --fds-colour-bg-inverse-subtler: var(--fds-colour-neutral-60);
     --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-50);
     --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-70);
-    --fds-colour-bg-primary: var(--fds-colour-primary-60);
-    --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
-    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
-    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
-    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
     --fds-colour-bg-available: #185339;
-    --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
-    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
-    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
-    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
     --fds-colour-bg-primary-hover: var(--fds-colour-primary-70);
     --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-80);
     --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-20);