npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.1 → 4.0.0-alpha.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2348) hide show

package/pagination/pagination.js CHANGED Viewed

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

package/pagination/pagination.js.map CHANGED Viewed

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

package/pagination/pagination.styles.d.ts CHANGED Viewed

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

package/pagination/pagination.styles.js CHANGED Viewed

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

package/pagination/pagination.styles.js.map CHANGED Viewed

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

package/pagination/pagination.styles_1u898rb.css ADDED Viewed

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

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

@@ -1,2 +1,2 @@
 import type { PhoneNumberInputProps } from "./types";
-export declare const PhoneNumberInput: ({ onChange, value, allowClear, onClear, onBlur, error, fixedCountry, optionPlaceholder, optionSearchPlaceholder, enableSearch, onHideOptions, onShowOptions, placeholder, autoComplete, noBorder, ...otherProps }: PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PhoneNumberInput: ({ id, onChange, value, allowClear, onClear, onBlur, error, fixedCountry, optionPlaceholder, optionSearchPlaceholder, enableSearch, onHideOptions, onShowOptions, placeholder, autoComplete, noBorder, getAriaLabel, ...otherProps }: PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

package/phone-number-input/types.d.ts CHANGED Viewed

@@ -50,4 +50,5 @@ export interface PhoneNumberInputProps extends React.AriaAttributes {
     readOnly?: boolean | undefined;
     id?: string | undefined;
     autoComplete?: string | undefined;
+    getAriaLabel?: ((country?: CountryValue) => string) | undefined;
 }

package/pill/pill.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import type { PillProps } from "./types";
-export declare const Pill: ({ type, colorType, children, icon, ...otherProps }: PillProps) => JSX.Element;
+export declare const Pill: ({ type, colorType, children, icon, className, ...otherProps }: PillProps) => JSX.Element;

package/pill/pill.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"react";import{Wrapper as i,Label as c}from"./pill.style.js";const l=l=>{var{type:n,colorType:p="black",children:m,icon:a}=l,s=r(l,["type","colorType","children","icon"]);return e(i,Object.assign({$type:n,$color:p},s,{children:[a&&t.cloneElement(a,{"aria-hidden":!0}),o(c,{children:m})]}))};export{l as Pill};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as l}from"react/jsx-runtime";import i from"clsx";import o from"react";import{label as c,wrapperBase as a,wrapperSolid as s,wrapperOutlinePrimary as t,wrapperOutlineBlue as m,wrapperOutlineRed as n,wrapperOutlineYellow as p,wrapperOutlineGreen as d,wrapperOutlineGrey as y,wrapperOutlineBlack as b,wrapperSolidPrimary as u,wrapperSolidBlue as f,wrapperSolidRed as g,wrapperSolidYellow as h,wrapperSolidGreen as j,wrapperSolidGrey as v,wrapperSolidBlack as N}from"./pill.styles.js";const k={solid:{black:N,grey:v,green:j,yellow:h,red:g,blue:f,primary:u},outline:{black:b,grey:y,green:d,yellow:p,red:n,blue:m,primary:t}},x=t=>{var{type:m,colorType:n="black",children:p,icon:d,className:y}=t,b=e(t,["type","colorType","children","icon","className"]);return r("div",Object.assign({},b,{className:i(a,"solid"===m&&s,k[m][n],y),children:[d&&o.cloneElement(d,{"aria-hidden":!0}),l("div",{className:c,children:p})]}))};export{x as Pill};
 //# sourceMappingURL=pill.js.map

package/pill/pill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pill.js","sources":["../../src/pill/pill.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ~~Label,~~ ~~Wrapper~~ } from \"./pill.~~style~~\";\nimport type { PillProps } from \"./types\";\n\nexport const Pill = ({\n type,\n colorType = \"black\",\n children,\n icon,\n ...otherProps\n}: PillProps): JSX.Element => {\n return (\n <~~Wrapper $type~~={type} ~~$color={~~colorType} ~~{...otherProps}~~>\n {icon && React.cloneElement(icon, { \"aria-hidden\": true })}\n <~~Label~~>{children}</~~Label~~>\n </~~Wrapper~~>\n );\n};\n"],"names":["Pill","_a","type","colorType","children","icon","otherProps","__rest","_jsxs","~~Wrapper~~","~~Object~~","~~assign~~","~~$type~~","~~$color~~","React","cloneElement","_jsx","~~Label~~"],"mappings":"~~2KAKO~~,MAAMA,EAAQC,IAAA,IAAAC,KACjBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,KACRA,~~GAAIJ~~,~~EACDK~~,EAAUC,~~EAAAN~~,~~EALI~~,~~wCAOjB~~,~~OACIO~~,~~EAACC~~,~~EAAOC~~,OAAAC,OAAA,~~CAAAC~~,~~MAAQV~~,~~EAAIW~~,~~OAAUV~~,~~GAAeG~~,~~EAAU~~,~~CAAAF~~,SAAA,~~CAClDC~~,~~GAAQS~~,EAAMC,~~aAAaV~~,EAAM,CAAE,eAAe,~~IACnDW~~,~~EAACC~~,~~EAAK~~,~~CAAAb~~,~~SAAEA~~,~~OACF~~"}
1	+ {"version":3,"file":"pill.js","sources":["../../src/pill/pill.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./pill.styles\";\nimport type { PillColorType, PillProps, PillType } from \"./types\";\n\nconst WRAPPER_CLASS: Record<PillType, Record<PillColorType, string>> = {\n solid: {\n black: styles.wrapperSolidBlack,\n grey: styles.wrapperSolidGrey,\n green: styles.wrapperSolidGreen,\n yellow: styles.wrapperSolidYellow,\n red: styles.wrapperSolidRed,\n blue: styles.wrapperSolidBlue,\n primary: styles.wrapperSolidPrimary,\n },\n outline: {\n black: styles.wrapperOutlineBlack,\n grey: styles.wrapperOutlineGrey,\n green: styles.wrapperOutlineGreen,\n yellow: styles.wrapperOutlineYellow,\n red: styles.wrapperOutlineRed,\n blue: styles.wrapperOutlineBlue,\n primary: styles.wrapperOutlinePrimary,\n },\n};\n\nexport const Pill = ({\n type,\n colorType = \"black\",\n children,\n icon,\n className,\n ...otherProps\n}: PillProps): JSX.Element => {\n return (\n <div\n {...otherProps}\n className={clsx(\n styles.wrapperBase,\n type === \"solid\" && styles.wrapperSolid,\n WRAPPER_CLASS[type][colorType],\n className\n )}\n >\n {icon && React.cloneElement(icon, { \"aria-hidden\": true })}\n <div className={styles.label}>{children}</div>\n </div>\n );\n};\n"],"names":["WRAPPER_CLASS","solid","black","styles.wrapperSolidBlack","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","outline","styles.wrapperOutlineBlack","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","Pill","_a","type","colorType","children","icon","className","otherProps","__rest","_jsxs","Object","assign","clsx","styles.wrapperBase","styles.wrapperSolid","React","cloneElement","_jsx","styles.label"],"mappings":"oiBAMA,MAAMA,EAAiE,CACnEC,MAAO,CACHC,MAAOC,EACPC,KAAMC,EACNC,MAAOC,EACPC,OAAQC,EACRC,IAAKC,EACLC,KAAMC,EACNC,QAASC,GAEbC,QAAS,CACLd,MAAOe,EACPb,KAAMc,EACNZ,MAAOa,EACPX,OAAQY,EACRV,IAAKW,EACLT,KAAMU,EACNR,QAASS,IAIJC,EAAQC,IAAA,IAAAC,KACjBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,KACRA,EAAIC,UACJA,GAASL,EACNM,EAAUC,EAAAP,EANI,oDAQjB,OACIQ,EAAA,MAAAC,OAAAC,OAAA,GACQJ,EAAU,CACdD,UAAWM,EACPC,EACS,UAATX,GAAoBY,EACpBtC,EAAc0B,GAAMC,GACpBG,GACHF,SAAA,CAEAC,GAAQU,EAAMC,aAAaX,EAAM,CAAE,eAAe,IACnDY,EAAA,MAAA,CAAKX,UAAWY,EAAYd,SAAGA,OAC7B"}

package/pill/pill.styles.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+export declare const wrapperBase: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolid: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidBlack: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidGrey: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidGreen: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidYellow: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidRed: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidBlue: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidPrimary: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineBlack: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineGrey: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineGreen: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineYellow: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineRed: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineBlue: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlinePrimary: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;

package/pill/pill.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./pill.styles_1wiyl8.css";const w="w2wrvwd",l="w1bnitgk",i="w10rd591",n="w14ozhbm",o="w1dquypt",r="wijzmbj",t="wtf7rkw",m="w17huuqy",s="w1lx8mm6",p="wnrixoo",y="wnolbsf",z="w1nlhiv2",b="wfw4qqz",c="w1c1fn8z",f="w19krjn1",h="w1h3c6yz",q="l1uma0l6";export{q as label,w as wrapperBase,p as wrapperOutlineBlack,f as wrapperOutlineBlue,z as wrapperOutlineGreen,y as wrapperOutlineGrey,h as wrapperOutlinePrimary,c as wrapperOutlineRed,b as wrapperOutlineYellow,l as wrapperSolid,i as wrapperSolidBlack,m as wrapperSolidBlue,o as wrapperSolidGreen,n as wrapperSolidGrey,s as wrapperSolidPrimary,t as wrapperSolidRed,r as wrapperSolidYellow};
2	+ //# sourceMappingURL=pill.styles.js.map