@sikt/sds-pagination 2.0.1 → 2.1.1
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.
- package/CHANGELOG.md +18 -0
- package/dist/index.css +21 -14
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [2.1.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-pagination@2.1.0...@sikt/sds-pagination@2.1.1) (2025-06-20)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **pagination:** current page style ([1218388](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/1218388eeeab26b3c319ae658ef64fb1f8434e3c))
|
|
10
|
+
|
|
11
|
+
## [2.1.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-pagination@2.0.1...@sikt/sds-pagination@2.1.0) (2025-05-21)
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
- **pagination:** update with new typography ([e8f614f](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/e8f614fec2764e3cafcdb7a119a85c4c4ba2320d))
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
- **deps:** update @sikt/sds-core ([f1f7023](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/f1f7023a7e77980ef15993b0bdac76bff254b651))
|
|
20
|
+
- **deps:** update @sikt/sds-core to 4.4.0 ([9dd6147](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9dd6147cd902975653f03b29db9f580ec19c261c))
|
|
21
|
+
- make required props non nullable ([9b26a28](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9b26a28bfdc7af1a8f1a0d8350a028240c350669))
|
|
22
|
+
|
|
5
23
|
## [2.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-pagination@2.0.0...@sikt/sds-pagination@2.0.1) (2024-11-20)
|
|
6
24
|
|
|
7
25
|
### Bug Fixes
|
package/dist/index.css
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
/* src/pagination.pcss */
|
|
2
2
|
.sds-pagination {
|
|
3
|
-
--pagination-background-color: var( --sds-color-interaction-
|
|
3
|
+
--pagination-background-color: var( --sds-color-interaction-neutral-subtle-default );
|
|
4
4
|
--pagination-color: var(--sds-color-text-primary);
|
|
5
5
|
}
|
|
6
|
+
.sds-pagination__list {
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-wrap: wrap;
|
|
9
|
+
gap: var(--sds-space-gap-small);
|
|
10
|
+
font-size: var(--sds-typography-label-l-fontsize);
|
|
11
|
+
font-variant-numeric: tabular-nums;
|
|
12
|
+
font-weight: var(--sds-typography-label-l-fontweight);
|
|
13
|
+
line-height: var(--sds-typography-label-l-lineheight);
|
|
14
|
+
}
|
|
6
15
|
.sds-pagination__list-item {
|
|
7
16
|
align-items: center;
|
|
8
|
-
display:
|
|
9
|
-
gap: var(--sds-space-gap-small);
|
|
17
|
+
display: flex;
|
|
10
18
|
justify-content: center;
|
|
11
19
|
}
|
|
12
20
|
.sds-pagination__button {
|
|
@@ -18,29 +26,27 @@
|
|
|
18
26
|
border-radius: var(--sds-space-border-radius-full);
|
|
19
27
|
color: var(--pagination-color);
|
|
20
28
|
cursor: pointer;
|
|
21
|
-
font-size: var(--sds-typography-body-fontsize-large);
|
|
22
|
-
line-height: var(--sds-typography-body-lineheight-large);
|
|
23
29
|
text-align: center;
|
|
24
|
-
width: var(--sds-
|
|
25
|
-
height: var(--sds-
|
|
30
|
+
width: var(--sds-typography-fontsize-1200);
|
|
31
|
+
height: var(--sds-typography-fontsize-1200);
|
|
26
32
|
padding: 0;
|
|
27
33
|
}
|
|
28
34
|
.sds-pagination__button:hover,
|
|
29
35
|
.sds-pagination__button:focus-visible {
|
|
30
|
-
--pagination-background-color: var( --sds-color-interaction-
|
|
36
|
+
--pagination-background-color: var( --sds-color-interaction-neutral-subtle-highlight );
|
|
31
37
|
}
|
|
32
38
|
.sds-pagination__button:focus-visible {
|
|
33
39
|
outline: var(--sds-focus-outline);
|
|
34
40
|
}
|
|
35
41
|
.sds-pagination__button:active {
|
|
36
|
-
--pagination-background-color: var( --sds-color-interaction-
|
|
42
|
+
--pagination-background-color: var( --sds-color-interaction-neutral-subtle-pressed );
|
|
37
43
|
}
|
|
38
44
|
.sds-pagination__button--spacer {
|
|
39
45
|
align-items: center;
|
|
40
46
|
display: flex;
|
|
41
47
|
justify-content: center;
|
|
42
|
-
width: var(--sds-
|
|
43
|
-
height: var(--sds-
|
|
48
|
+
width: var(--sds-typography-fontsize-700);
|
|
49
|
+
height: var(--sds-typography-fontsize-700);
|
|
44
50
|
}
|
|
45
51
|
.sds-pagination__button[disabled],
|
|
46
52
|
.sds-pagination__button--spacer {
|
|
@@ -56,13 +62,14 @@
|
|
|
56
62
|
--pagination-background-color: initial;
|
|
57
63
|
}
|
|
58
64
|
.sds-pagination__button[aria-current] {
|
|
59
|
-
--pagination-background-color: var( --sds-color-interaction-primary-
|
|
60
|
-
--pagination-color: var(--sds-color-text-on-strong);
|
|
65
|
+
--pagination-background-color: var( --sds-color-interaction-primary-subtle-default );
|
|
61
66
|
cursor: inherit;
|
|
67
|
+
text-decoration: underline;
|
|
68
|
+
text-decoration-thickness: var(--sds-space-border-weight-regular);
|
|
62
69
|
}
|
|
63
70
|
.sds-pagination__button[aria-current]:active,
|
|
64
71
|
.sds-pagination__button[aria-current]:hover,
|
|
65
72
|
.sds-pagination__button[aria-current]:focus-visible {
|
|
66
|
-
--pagination-background-color: var( --sds-color-interaction-primary-
|
|
73
|
+
--pagination-background-color: var( --sds-color-interaction-primary-subtle-default );
|
|
67
74
|
}
|
|
68
75
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/pagination.pcss"],"sourcesContent":[".sds-pagination {\n --pagination-background-color: var(\n --sds-color-interaction-
|
|
1
|
+
{"version":3,"sources":["../src/pagination.pcss"],"sourcesContent":[".sds-pagination {\n --pagination-background-color: var(\n --sds-color-interaction-neutral-subtle-default\n );\n --pagination-color: var(--sds-color-text-primary);\n}\n\n .sds-pagination__list {\n display: flex;\n flex-wrap: wrap;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-label-l-fontsize);\n font-variant-numeric: tabular-nums;\n font-weight: var(--sds-typography-label-l-fontweight);\n line-height: var(--sds-typography-label-l-lineheight);\n }\n\n .sds-pagination__list-item {\n align-items: center;\n display: flex;\n justify-content: center;\n }\n\n .sds-pagination__button {\n align-items: center;\n display: flex;\n justify-content: center;\n background-color: var(--pagination-background-color);\n border: none;\n border-radius: var(--sds-space-border-radius-full);\n color: var(--pagination-color);\n cursor: pointer;\n text-align: center;\n width: var(--sds-typography-fontsize-1200);\n height: var(--sds-typography-fontsize-1200);\n padding: 0;\n }\n\n .sds-pagination__button:hover,\n .sds-pagination__button:focus-visible {\n --pagination-background-color: var(\n --sds-color-interaction-neutral-subtle-highlight\n );\n }\n\n .sds-pagination__button:focus-visible {\n outline: var(--sds-focus-outline);\n }\n\n .sds-pagination__button:active {\n --pagination-background-color: var(\n --sds-color-interaction-neutral-subtle-pressed\n );\n }\n\n .sds-pagination__button--spacer {\n align-items: center;\n display: flex;\n justify-content: center;\n width: var(--sds-typography-fontsize-700);\n height: var(--sds-typography-fontsize-700);\n }\n\n .sds-pagination__button[disabled],\n .sds-pagination__button--spacer {\n --pagination-background-color: initial;\n\n cursor: inherit;\n }\n\n .sds-pagination__button[disabled]:active,\n .sds-pagination__button[disabled]:hover,\n .sds-pagination__button[disabled]:focus-visible,\n .sds-pagination__button--spacer:active,\n .sds-pagination__button--spacer:hover,\n .sds-pagination__button--spacer:focus-visible {\n --pagination-background-color: initial;\n }\n\n .sds-pagination__button[aria-current] {\n --pagination-background-color: var(\n --sds-color-interaction-primary-subtle-default\n );\n\n cursor: inherit;\n text-decoration: underline;\n text-decoration-thickness: var(--sds-space-border-weight-regular);\n }\n\n .sds-pagination__button[aria-current]:active,\n .sds-pagination__button[aria-current]:hover,\n .sds-pagination__button[aria-current]:focus-visible {\n --pagination-background-color: var(\n --sds-color-interaction-primary-subtle-default\n );\n }\n"],"mappings":";AAAA,CAAC;AACC,iCAA+B,KAC7B;AAEF,sBAAoB,IAAI;AAC1B;AAEE,CAAC;AACC,WAAS;AACT,aAAW;AACX,OAAK,IAAI;AACT,aAAW,IAAI;AACf,wBAAsB;AACtB,eAAa,IAAI;AACjB,eAAa,IAAI;AACnB;AAEA,CAAC;AACC,eAAa;AACb,WAAS;AACT,mBAAiB;AACnB;AAEA,CAAC;AACC,eAAa;AACb,WAAS;AACT,mBAAiB;AACjB,oBAAkB,IAAI;AACtB,UAAQ;AACR,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,UAAQ;AACR,cAAY;AACZ,SAAO,IAAI;AACX,UAAQ,IAAI;AACZ,WAAS;AACX;AAEA,CAfC,sBAesB;AACrB,CAhBD,sBAgBwB;AACrB,iCAA+B,KAC7B;AAEJ;AAEF,CAtBC,sBAsBsB;AACnB,WAAS,IAAI;AACf;AAEF,CA1BC,sBA0BsB;AACnB,iCAA+B,KAC7B;AAEJ;AAEF,CAAC;AACG,eAAa;AACb,WAAS;AACT,mBAAiB;AACjB,SAAO,IAAI;AACX,UAAQ,IAAI;AACd;AAEF,CAxCC,sBAwCsB,CAAC;AACtB,CATD;AAUG,iCAA+B;AAE/B,UAAQ;AACV;AAEF,CA/CC,sBA+CsB,CAAC,SAAS;AAC7B,CAhDH,sBAgD0B,CAAC,SAAS;AACjC,CAjDH,sBAiD0B,CAAC,SAAS;AACjC,CAlBH,8BAkBkC;AAC/B,CAnBH,8BAmBkC;AAC/B,CApBH,8BAoBkC;AAC7B,iCAA+B;AACjC;AAEJ,CAxDC,sBAwDsB,CAAC;AACpB,iCAA+B,KAC7B;AAGF,UAAQ;AACR,mBAAiB;AACjB,6BAA2B,IAAI;AACjC;AAEF,CAlEC,sBAkEsB,CAAC,aAAa;AACjC,CAnEH,sBAmE0B,CAAC,aAAa;AACrC,CApEH,sBAoE0B,CAAC,aAAa;AACnC,iCAA+B,KAC7B;AAEJ;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import { HTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
interface PaginationProps extends HTMLAttributes<HTMLElement> {
|
|
5
|
-
"aria-label": string
|
|
5
|
+
"aria-label": NonNullable<string>;
|
|
6
6
|
ariaLabelPrevious?: string;
|
|
7
7
|
ariaLabelNext?: string;
|
|
8
8
|
ariaLabelItem?: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import { HTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
interface PaginationProps extends HTMLAttributes<HTMLElement> {
|
|
5
|
-
"aria-label": string
|
|
5
|
+
"aria-label": NonNullable<string>;
|
|
6
6
|
ariaLabelPrevious?: string;
|
|
7
7
|
ariaLabelNext?: string;
|
|
8
8
|
ariaLabelItem?: string;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var a=require("@sikt/sds-icons"),e=require("clsx/lite"),i=require("react/jsx-runtime"),s=Object.defineProperty,t=Object.defineProperties,r=Object.getOwnPropertyDescriptors,l=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,o=(a,e,i)=>e in a?s(a,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):a[e]=i;exports.Pagination=s=>{var d=s,{"aria-label":b,ariaLabelNext:u="Vis neste side",ariaLabelPrevious:m="Vis forrige side",ariaLabelItem:p="Vis side",count:x,currentIndex:j,limit:
|
|
1
|
+
"use strict";var a=require("@sikt/sds-icons"),e=require("clsx/lite"),i=require("react/jsx-runtime"),s=Object.defineProperty,t=Object.defineProperties,r=Object.getOwnPropertyDescriptors,l=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,o=(a,e,i)=>e in a?s(a,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):a[e]=i;exports.Pagination=s=>{var d=s,{"aria-label":b,ariaLabelNext:u="Vis neste side",ariaLabelPrevious:m="Vis forrige side",ariaLabelItem:p="Vis side",count:x,currentIndex:j,limit:v=7,handleClick:_,className:g}=d,N=((a,e)=>{var i={};for(var s in a)n.call(a,s)&&e.indexOf(s)<0&&(i[s]=a[s]);if(null!=a&&l)for(var s of l(a))e.indexOf(s)<0&&c.call(a,s)&&(i[s]=a[s]);return i})(d,["aria-label","ariaLabelNext","ariaLabelPrevious","ariaLabelItem","count","currentIndex","limit","handleClick","className"]);const f=Math.ceil(v/2)-2-1,h=j+f,O=j-f,y=x-1-h-1,P=O-1;let k=x-1>h?h-1:h;k=P<0?k-P:k;let I=1<O?O+1:O;return I=y<0?I+y:I,i.jsx("nav",(L=((a,e)=>{for(var i in e||(e={}))n.call(e,i)&&o(a,i,e[i]);if(l)for(var i of l(e))c.call(e,i)&&o(a,i,e[i]);return a})({className:e.clsx("sds-pagination",g),"aria-label":b},N),C={children:i.jsxs("ol",{className:"sds-pagination__list",children:[i.jsx("li",{className:"sds-pagination__list-item",children:i.jsx("button",{className:"sds-pagination__button","aria-label":"".concat(m," ").concat(j),disabled:0===j,onClick:()=>{_(j-1)},children:i.jsx(a.MoveToPreviousIcon,{})})}),[...Array(x).keys()].map((a=>0===a||a===x-1||a>=I&&a<=k?i.jsx("li",{className:"sds-pagination__list-item",children:i.jsx("button",{className:"sds-pagination__button","aria-current":a===j||void 0,"aria-label":"".concat(p," ").concat(a+1),disabled:a===j,onClick:()=>{_(a)},children:a+1})},a):a==k+1||a==I-1?i.jsx("li",{className:"sds-pagination__list-item",children:i.jsx("div",{className:"sds-pagination__button--spacer",children:"…"})},a):void 0)),i.jsx("li",{className:"sds-pagination__list-item",children:i.jsx("button",{className:"sds-pagination__button","aria-label":"".concat(u," ").concat(j+2),disabled:j===x-1,onClick:()=>{_(j+1)},children:i.jsx(a.MoveToNextIcon,{})})})]})},t(L,r(C))));var L,C};//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Pagination.tsx"],"names":["jsx","clsx","jsxs","
|
|
1
|
+
{"version":3,"sources":["../src/Pagination.tsx"],"names":["jsx","clsx","jsxs","MoveToPreviousIcon","MoveToNextIcon"],"mappings":"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","file":"index.js","sourcesContent":["import { MoveToPreviousIcon, MoveToNextIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { HTMLAttributes } from \"react\";\nimport \"./pagination.pcss\";\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n \"aria-label\": NonNullable<string>;\n ariaLabelPrevious?: string;\n ariaLabelNext?: string;\n ariaLabelItem?: string;\n count: number;\n currentIndex: number;\n /** Total limit of elements, this includes previous/next/first/last. Minimum is 7 (previous/next/first/last/current/) */\n limit?: number;\n handleClick: (index: number) => void;\n className?: string;\n}\n\nexport const Pagination = ({\n \"aria-label\": ariaLabel,\n ariaLabelNext = \"Vis neste side\",\n ariaLabelPrevious = \"Vis forrige side\",\n ariaLabelItem = \"Vis side\",\n count,\n currentIndex,\n limit = 7,\n handleClick,\n className,\n ...rest\n}: PaginationProps) => {\n const constantCount = 2;\n const delimiter = Math.ceil(limit / 2) - constantCount - 1;\n const max = currentIndex + delimiter;\n const min = currentIndex - delimiter;\n const hasMaxSpacer = count - 1 > max;\n const hasMinSpacer = 1 < min;\n const maxModifier = count - 1 - max - 1;\n const minModifier = min - 1;\n const hasLessBeforeIndex = minModifier < 0;\n const hasLessAfterIndex = maxModifier < 0;\n let maxLimit = hasMaxSpacer ? max - 1 : max;\n maxLimit = hasLessBeforeIndex ? maxLimit - minModifier : maxLimit;\n let minLimit = hasMinSpacer ? min + 1 : min;\n minLimit = hasLessAfterIndex ? minLimit + maxModifier : minLimit;\n\n return (\n <nav\n className={clsx(\"sds-pagination\", className)}\n aria-label={ariaLabel}\n {...rest}\n >\n <ol className=\"sds-pagination__list\">\n <li className=\"sds-pagination__list-item\">\n <button\n className=\"sds-pagination__button\"\n aria-label={`${ariaLabelPrevious} ${currentIndex}`}\n disabled={currentIndex === 0}\n onClick={() => {\n handleClick(currentIndex - 1);\n }}\n >\n <MoveToPreviousIcon />\n </button>\n </li>\n {[...Array(count).keys()].map((value) => {\n if (\n value === 0 ||\n value === count - 1 ||\n (value >= minLimit && value <= maxLimit)\n ) {\n return (\n <li className=\"sds-pagination__list-item\" key={value}>\n <button\n className=\"sds-pagination__button\"\n aria-current={value === currentIndex ? true : undefined}\n aria-label={`${ariaLabelItem} ${value + 1}`}\n disabled={value === currentIndex}\n onClick={() => {\n handleClick(value);\n }}\n >\n {value + 1}\n </button>\n </li>\n );\n } else if (value == maxLimit + 1 || value == minLimit - 1) {\n return (\n <li className=\"sds-pagination__list-item\" key={value}>\n <div className=\"sds-pagination__button--spacer\">…</div>\n </li>\n );\n }\n })}\n <li className=\"sds-pagination__list-item\">\n <button\n className=\"sds-pagination__button\"\n aria-label={`${ariaLabelNext} ${currentIndex + 2}`}\n disabled={currentIndex === count - 1}\n onClick={() => {\n handleClick(currentIndex + 1);\n }}\n >\n <MoveToNextIcon />\n </button>\n </li>\n </ol>\n </nav>\n );\n};\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{MoveToPreviousIcon as a,MoveToNextIcon as e}from"@sikt/sds-icons";import{clsx as i}from"clsx/lite";import{jsx as t,jsxs as l}from"react/jsx-runtime";var r=Object.defineProperty,n=Object.defineProperties,s=Object.getOwnPropertyDescriptors,c=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable,b=(a,e,i)=>e in a?r(a,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):a[e]=i,m=r=>{var m=r,{"aria-label":p,ariaLabelNext:u="Vis neste side",ariaLabelPrevious:_="Vis forrige side",ariaLabelItem:f="Vis side",count:v,currentIndex:g,limit:h=7,handleClick:N,className:O}=m,y=((a,e)=>{var i={};for(var t in a)o.call(a,t)&&e.indexOf(t)<0&&(i[t]=a[t]);if(null!=a&&c)for(var t of c(a))e.indexOf(t)<0&&d.call(a,t)&&(i[t]=a[t]);return i})(m,["aria-label","ariaLabelNext","ariaLabelPrevious","ariaLabelItem","count","currentIndex","limit","handleClick","className"]);const x=Math.ceil(h/2)-2-1,j=g+x,k=g-x,P=v-1-j-1,L=k-1;let C=v-1>j?j-1:j;C=L<0?C-L:C;let I=1<k?k+1:k;return I=P<0?I+P:I,t("nav",(w=((a,e)=>{for(var i in e||(e={}))o.call(e,i)&&b(a,i,e[i]);if(c)for(var i of c(e))d.call(e,i)&&b(a,i,e[i]);return a})({className:i("sds-pagination",O),"aria-label":p},y),V={children:l("ol",{className:"sds-pagination__list",children:[t("li",{className:"sds-pagination__list-item",children:t("button",{className:"sds-pagination__button","aria-label":"".concat(_," ").concat(g),disabled:0===g,onClick:()=>{N(g-1)},children:t(a,{})})}),[...Array(v).keys()].map((a=>0===a||a===v-1||a>=I&&a<=C?t("li",{className:"sds-pagination__list-item",children:t("button",{className:"sds-pagination__button","aria-current":a===g||void 0,"aria-label":"".concat(f," ").concat(a+1),disabled:a===g,onClick:()=>{N(a)},children:a+1})},a):a==C+1||a==I-1?t("li",{className:"sds-pagination__list-item",children:t("div",{className:"sds-pagination__button--spacer",children:"…"})},a):void 0)),t("li",{className:"sds-pagination__list-item",children:t("button",{className:"sds-pagination__button","aria-label":"".concat(u," ").concat(g+2),disabled:g===v-1,onClick:()=>{N(g+1)},children:t(e,{})})})]})},n(w,s(V))));var w,V};export{m as Pagination};//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Pagination.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBa,IAAA,UAAA,GAAa,CAAC,EAWJ,KAAA;AAXI,EACzB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAc,YAAA,EAAA,SAAA;AAAA,IACd,aAAgB,GAAA,gBAAA;AAAA,IAChB,iBAAoB,GAAA,kBAAA;AAAA,IACpB,aAAgB,GAAA,UAAA;AAAA,IAChB,KAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAQ,GAAA,CAAA;AAAA,IACR,WAAA;AAAA,IACA
|
|
1
|
+
{"version":3,"sources":["../src/Pagination.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import { MoveToPreviousIcon, MoveToNextIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { HTMLAttributes } from \"react\";\nimport \"./pagination.pcss\";\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n \"aria-label\": NonNullable<string>;\n ariaLabelPrevious?: string;\n ariaLabelNext?: string;\n ariaLabelItem?: string;\n count: number;\n currentIndex: number;\n /** Total limit of elements, this includes previous/next/first/last. Minimum is 7 (previous/next/first/last/current/) */\n limit?: number;\n handleClick: (index: number) => void;\n className?: string;\n}\n\nexport const Pagination = ({\n \"aria-label\": ariaLabel,\n ariaLabelNext = \"Vis neste side\",\n ariaLabelPrevious = \"Vis forrige side\",\n ariaLabelItem = \"Vis side\",\n count,\n currentIndex,\n limit = 7,\n handleClick,\n className,\n ...rest\n}: PaginationProps) => {\n const constantCount = 2;\n const delimiter = Math.ceil(limit / 2) - constantCount - 1;\n const max = currentIndex + delimiter;\n const min = currentIndex - delimiter;\n const hasMaxSpacer = count - 1 > max;\n const hasMinSpacer = 1 < min;\n const maxModifier = count - 1 - max - 1;\n const minModifier = min - 1;\n const hasLessBeforeIndex = minModifier < 0;\n const hasLessAfterIndex = maxModifier < 0;\n let maxLimit = hasMaxSpacer ? max - 1 : max;\n maxLimit = hasLessBeforeIndex ? maxLimit - minModifier : maxLimit;\n let minLimit = hasMinSpacer ? min + 1 : min;\n minLimit = hasLessAfterIndex ? minLimit + maxModifier : minLimit;\n\n return (\n <nav\n className={clsx(\"sds-pagination\", className)}\n aria-label={ariaLabel}\n {...rest}\n >\n <ol className=\"sds-pagination__list\">\n <li className=\"sds-pagination__list-item\">\n <button\n className=\"sds-pagination__button\"\n aria-label={`${ariaLabelPrevious} ${currentIndex}`}\n disabled={currentIndex === 0}\n onClick={() => {\n handleClick(currentIndex - 1);\n }}\n >\n <MoveToPreviousIcon />\n </button>\n </li>\n {[...Array(count).keys()].map((value) => {\n if (\n value === 0 ||\n value === count - 1 ||\n (value >= minLimit && value <= maxLimit)\n ) {\n return (\n <li className=\"sds-pagination__list-item\" key={value}>\n <button\n className=\"sds-pagination__button\"\n aria-current={value === currentIndex ? true : undefined}\n aria-label={`${ariaLabelItem} ${value + 1}`}\n disabled={value === currentIndex}\n onClick={() => {\n handleClick(value);\n }}\n >\n {value + 1}\n </button>\n </li>\n );\n } else if (value == maxLimit + 1 || value == minLimit - 1) {\n return (\n <li className=\"sds-pagination__list-item\" key={value}>\n <div className=\"sds-pagination__button--spacer\">…</div>\n </li>\n );\n }\n })}\n <li className=\"sds-pagination__list-item\">\n <button\n className=\"sds-pagination__button\"\n aria-label={`${ariaLabelNext} ${currentIndex + 2}`}\n disabled={currentIndex === count - 1}\n onClick={() => {\n handleClick(currentIndex + 1);\n }}\n >\n <MoveToNextIcon />\n </button>\n </li>\n </ol>\n </nav>\n );\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-pagination",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.1",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"homepage": "https://designsystem.sikt.no/",
|
|
6
6
|
"repository": {
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"build": "tsup"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@sikt/sds-core": "^4.
|
|
39
|
-
"@sikt/sds-icons": "^
|
|
38
|
+
"@sikt/sds-core": "^4.6.0",
|
|
39
|
+
"@sikt/sds-icons": "^3.0.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"@types/react": "^18.0.0 || ^19.0.0",
|