@navikt/ds-react 0.17.8 → 0.17.11

package/cjs/alert/Alert.js

@@ -37,9 +37,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const ds_icons_1 = require("@navikt/ds-icons");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
 const __1 = require("..");
 const Icon = (_a) => {
     var { variant } = _a, props = __rest(_a, ["variant"]);

package/cjs/help-text/HelpText.js

@@ -51,8 +51,8 @@ const HelpText = (0, react_1.forwardRef)((_a, ref) => {
         react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
                 setOpen((x) => !x);
                 onClick === null || onClick === void 0 ? void 0 : onClick(e);
-            }, className: (0, classnames_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open, title: title }),
-            react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon", "aria-hidden": true })),
+            }, className: (0, classnames_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open }),
+            react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon", title: title })),
         react_1.default.createElement(__1.Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy },
             react_1.default.createElement(__1.Popover.Content, { className: "navds-body-short" }, children))));
 });

package/cjs/pagination/Pagination.js

@@ -1,10 +1,44 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSteps = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const ds_icons_1 = require("@navikt/ds-icons");
 const __1 = require("..");
@@ -30,7 +64,8 @@ const getSteps = ({ page, count, boundaryCount = 1, siblingCount = 1, }) => {
     ];
 };
 exports.getSteps = getSteps;
-const Pagination = ({ page, onPageChange, count, boundaryCount = 1, siblingCount = 1, className, size = "medium", prevNextTexts = false, }) => {
+const Pagination = (0, react_1.forwardRef)((_a, ref) => {
+    var { page, onPageChange, count, boundaryCount = 1, siblingCount = 1, className, size = "medium", prevNextTexts = false } = _a, rest = __rest(_a, ["page", "onPageChange", "count", "boundaryCount", "siblingCount", "className", "size", "prevNextTexts"]);
     if (page < 1) {
         console.error("page cannot be less than 1");
         return null;
@@ -47,13 +82,17 @@ const Pagination = ({ page, onPageChange, count, boundaryCount = 1, siblingCount
         console.error("siblingCount cannot be less than 0");
         return null;
     }
-    return (react_1.default.createElement("nav", { className: (0, classnames_1.default)("navds-pagination", `navds-pagination--${size}`, className) },
-        prevNextTexts && page !== 1 && (react_1.default.createElement("button", { className: "navds-pagination__prev-next", onClick: () => onPageChange(page - 1) },
+    return (react_1.default.createElement("nav", Object.assign({ ref: ref }, rest, { className: (0, classnames_1.default)("navds-pagination", `navds-pagination--${size}`, className) }),
+        prevNextTexts && (react_1.default.createElement("button", { className: (0, classnames_1.default)("navds-pagination__prev-next", {
+                "navds-pagination--invisible": page === 1,
+            }), disabled: page === 1, onClick: () => onPageChange(page - 1) },
             react_1.default.createElement(ds_icons_1.Back, { className: "navds-pagination__prev-next-icon", role: "presentation" }),
             react_1.default.createElement(__1.BodyShort, { size: size, className: "navds-pagination__prev-text" }, "Forrige"))),
         react_1.default.createElement("ul", { className: "navds-pagination__list" },
-            !prevNextTexts && page !== 1 && (react_1.default.createElement("li", null,
-                react_1.default.createElement("button", { className: "navds-pagination__prev-next", onClick: () => onPageChange(page - 1) },
+            !prevNextTexts && (react_1.default.createElement("li", null,
+                react_1.default.createElement("button", { className: (0, classnames_1.default)("navds-pagination__prev-next", {
+                        "navds-pagination--invisible": page === 1,
+                    }), disabled: page === 1, onClick: () => onPageChange(page - 1) },
                     react_1.default.createElement(ds_icons_1.Back, { className: "navds-pagination__prev-next-icon", title: "Forrige" })))),
             (0, exports.getSteps)({ page, count, siblingCount, boundaryCount }).map((step, i) => {
                 const n = Number(step);
@@ -61,11 +100,15 @@ const Pagination = ({ page, onPageChange, count, boundaryCount = 1, siblingCount
                     react_1.default.createElement(__1.BodyShort, { size: size }, "..."))) : (react_1.default.createElement("li", { key: step },
                     react_1.default.createElement(__1.BodyShort, { size: size, as: "button", className: "navds-pagination__item", onClick: () => onPageChange(n), "aria-current": page === n ? true : undefined }, n)));
             }),
-            !prevNextTexts && page !== count && (react_1.default.createElement("li", null,
-                react_1.default.createElement("button", { className: "navds-pagination__prev-next", onClick: () => onPageChange(page + 1) },
+            !prevNextTexts && (react_1.default.createElement("li", null,
+                react_1.default.createElement("button", { className: (0, classnames_1.default)("navds-pagination__prev-next", {
+                        "navds-pagination--invisible": page === count,
+                    }), disabled: page === count, onClick: () => onPageChange(page + 1) },
                     react_1.default.createElement(ds_icons_1.Next, { className: "navds-pagination__prev-next-icon", title: "Neste" }))))),
-        prevNextTexts && page !== count && (react_1.default.createElement("button", { className: "navds-pagination__prev-next", onClick: () => onPageChange(page + 1) },
+        prevNextTexts && (react_1.default.createElement("button", { className: (0, classnames_1.default)("navds-pagination__prev-next", {
+                "navds-pagination--invisible": page === count,
+            }), disabled: page === count, onClick: () => onPageChange(page + 1) },
             react_1.default.createElement(__1.BodyShort, { size: size, className: "navds-pagination__next-text" }, "Neste"),
             react_1.default.createElement(ds_icons_1.Next, { className: "navds-pagination__prev-next-icon", role: "presentation" })))));
-};
+});
 exports.default = Pagination;

package/esm/alert/Alert.js

@@ -9,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from "react";
+import { ErrorFilled, InformationFilled, SuccessFilled, WarningFilled, } from "@navikt/ds-icons";
 import cl from "classnames";
-import { ErrorFilled, WarningFilled, InformationFilled, SuccessFilled, } from "@navikt/ds-icons";
+import React, { forwardRef } from "react";
 import { BodyLong } from "..";
 const Icon = (_a) => {
     var { variant } = _a, props = __rest(_a, ["variant"]);

package/esm/alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,aAAa,GACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AA2B9B,MAAM,IAAI,GAAG,CAAC,EAAqB,EAAE,EAAE;QAAzB,EAAE,OAAO,OAAY,EAAP,KAAK,cAAnB,WAAqB,CAAF;IAC/B,QAAQ,OAAO,EAAE;QACf,KAAK,OAAO;YACV,OAAO,oBAAC,WAAW,kBAAC,KAAK,EAAC,MAAM,IAAK,KAAK,EAAI,CAAC;QACjD,KAAK,SAAS;YACZ,OAAO,oBAAC,aAAa,kBAAC,KAAK,EAAC,UAAU,IAAK,KAAK,EAAI,CAAC;QACvD,KAAK,MAAM;YACT,OAAO,oBAAC,iBAAiB,kBAAC,KAAK,EAAC,aAAa,IAAK,KAAK,EAAI,CAAC;QAC9D,KAAK,SAAS;YACZ,OAAO,oBAAC,aAAa,kBAAC,KAAK,EAAC,SAAS,IAAK,KAAK,EAAI,CAAC;QACtD;YACE,OAAO,IAAI,CAAC;KACf;AACH,CAAC,CAAC;AAMF,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,KAAK,OAEf,EADI,IAAI,cAPT,mEAQC,CADQ;IAGN,OAAA,CACH,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,aAAa,EACb,gBAAgB,OAAO,EAAE,EACzB,gBAAgB,IAAI,EAAE,EACtB,EAAE,yBAAyB,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,EAAE,CACxE;QAED,oBAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,mBAAmB,GAAG;QACxD,oBAAC,QAAQ,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,sBAAsB,IAC5D,QAAQ,CACA,CACP,CACP,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,aAAa,GACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AA2B9B,MAAM,IAAI,GAAG,CAAC,EAAqB,EAAE,EAAE;QAAzB,EAAE,OAAO,OAAY,EAAP,KAAK,cAAnB,WAAqB,CAAF;IAC/B,QAAQ,OAAO,EAAE;QACf,KAAK,OAAO;YACV,OAAO,oBAAC,WAAW,kBAAC,KAAK,EAAC,MAAM,IAAK,KAAK,EAAI,CAAC;QACjD,KAAK,SAAS;YACZ,OAAO,oBAAC,aAAa,kBAAC,KAAK,EAAC,UAAU,IAAK,KAAK,EAAI,CAAC;QACvD,KAAK,MAAM;YACT,OAAO,oBAAC,iBAAiB,kBAAC,KAAK,EAAC,aAAa,IAAK,KAAK,EAAI,CAAC;QAC9D,KAAK,SAAS;YACZ,OAAO,oBAAC,aAAa,kBAAC,KAAK,EAAC,SAAS,IAAK,KAAK,EAAI,CAAC;QACtD;YACE,OAAO,IAAI,CAAC;KACf;AACH,CAAC,CAAC;AAMF,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,KAAK,OAEf,EADI,IAAI,cAPT,mEAQC,CADQ;IAGN,OAAA,CACH,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,aAAa,EACb,gBAAgB,OAAO,EAAE,EACzB,gBAAgB,IAAI,EAAE,EACtB,EAAE,yBAAyB,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,EAAE,CACxE;QAED,oBAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,mBAAmB,GAAG;QACxD,oBAAC,QAAQ,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,sBAAsB,IAC5D,QAAQ,CACA,CACP,CACP,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/help-text/HelpText.js

@@ -23,8 +23,8 @@ const HelpText = forwardRef((_a, ref) => {
         React.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
                 setOpen((x) => !x);
                 onClick === null || onClick === void 0 ? void 0 : onClick(e);
-            }, className: cl(className, "navds-help-text__button"), type: "button", "aria-expanded": open, title: title }),
-            React.createElement(HelpTextIcon, { className: "navds-help-text__icon", "aria-hidden": true })),
+            }, className: cl(className, "navds-help-text__button"), type: "button", "aria-expanded": open }),
+            React.createElement(HelpTextIcon, { className: "navds-help-text__icon", title: title })),
         React.createElement(Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy },
             React.createElement(Popover.Content, { className: "navds-body-short" }, children))));
 });

package/esm/help-text/HelpText.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAgB,MAAM,IAAI,CAAC;AAW3C,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,EACf,OAAO,OAER,EADI,IAAI,cAPT,sEAQC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI,EACnB,KAAK,EAAE,KAAK;YAEZ,oBAAC,YAAY,IAAC,SAAS,EAAC,uBAAuB,wBAAc,CACtD;QACT,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,kBAAkB,IAC1C,QAAQ,CACO,CACV,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAgB,MAAM,IAAI,CAAC;AAW3C,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,EACf,OAAO,OAER,EADI,IAAI,cAPT,sEAQC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI;YAEnB,oBAAC,YAAY,IAAC,SAAS,EAAC,uBAAuB,EAAC,KAAK,EAAE,KAAK,GAAI,CACzD;QACT,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,kBAAkB,IAC1C,QAAQ,CACO,CACV,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/pagination/Pagination.d.ts

@@ -39,5 +39,5 @@ export declare const getSteps: ({ page, count, boundaryCount, siblingCount, }: {
     boundaryCount?: number | undefined;
     siblingCount?: number | undefined;
 }) => (string | number)[];
-declare const Pagination: ({ page, onPageChange, count, boundaryCount, siblingCount, className, size, prevNextTexts, }: PaginationProps) => JSX.Element | null;
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
 export default Pagination;

package/esm/pagination/Pagination.js

@@ -1,4 +1,15 @@
-import React from "react";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from "react";
 import cl from "classnames";
 import { Back, Next } from "@navikt/ds-icons";
 import { BodyShort } from "..";
@@ -23,7 +34,8 @@ export const getSteps = ({ page, count, boundaryCount = 1, siblingCount = 1, })
         ...endPages,
     ];
 };
-const Pagination = ({ page, onPageChange, count, boundaryCount = 1, siblingCount = 1, className, size = "medium", prevNextTexts = false, }) => {
+const Pagination = forwardRef((_a, ref) => {
+    var { page, onPageChange, count, boundaryCount = 1, siblingCount = 1, className, size = "medium", prevNextTexts = false } = _a, rest = __rest(_a, ["page", "onPageChange", "count", "boundaryCount", "siblingCount", "className", "size", "prevNextTexts"]);
     if (page < 1) {
         console.error("page cannot be less than 1");
         return null;
@@ -40,13 +52,17 @@ const Pagination = ({ page, onPageChange, count, boundaryCount = 1, siblingCount
         console.error("siblingCount cannot be less than 0");
         return null;
     }
-    return (React.createElement("nav", { className: cl("navds-pagination", `navds-pagination--${size}`, className) },
-        prevNextTexts && page !== 1 && (React.createElement("button", { className: "navds-pagination__prev-next", onClick: () => onPageChange(page - 1) },
+    return (React.createElement("nav", Object.assign({ ref: ref }, rest, { className: cl("navds-pagination", `navds-pagination--${size}`, className) }),
+        prevNextTexts && (React.createElement("button", { className: cl("navds-pagination__prev-next", {
+                "navds-pagination--invisible": page === 1,
+            }), disabled: page === 1, onClick: () => onPageChange(page - 1) },
             React.createElement(Back, { className: "navds-pagination__prev-next-icon", role: "presentation" }),
             React.createElement(BodyShort, { size: size, className: "navds-pagination__prev-text" }, "Forrige"))),
         React.createElement("ul", { className: "navds-pagination__list" },
-            !prevNextTexts && page !== 1 && (React.createElement("li", null,
-                React.createElement("button", { className: "navds-pagination__prev-next", onClick: () => onPageChange(page - 1) },
+            !prevNextTexts && (React.createElement("li", null,
+                React.createElement("button", { className: cl("navds-pagination__prev-next", {
+                        "navds-pagination--invisible": page === 1,
+                    }), disabled: page === 1, onClick: () => onPageChange(page - 1) },
                     React.createElement(Back, { className: "navds-pagination__prev-next-icon", title: "Forrige" })))),
             getSteps({ page, count, siblingCount, boundaryCount }).map((step, i) => {
                 const n = Number(step);
@@ -54,12 +70,16 @@ const Pagination = ({ page, onPageChange, count, boundaryCount = 1, siblingCount
                     React.createElement(BodyShort, { size: size }, "..."))) : (React.createElement("li", { key: step },
                     React.createElement(BodyShort, { size: size, as: "button", className: "navds-pagination__item", onClick: () => onPageChange(n), "aria-current": page === n ? true : undefined }, n)));
             }),
-            !prevNextTexts && page !== count && (React.createElement("li", null,
-                React.createElement("button", { className: "navds-pagination__prev-next", onClick: () => onPageChange(page + 1) },
+            !prevNextTexts && (React.createElement("li", null,
+                React.createElement("button", { className: cl("navds-pagination__prev-next", {
+                        "navds-pagination--invisible": page === count,
+                    }), disabled: page === count, onClick: () => onPageChange(page + 1) },
                     React.createElement(Next, { className: "navds-pagination__prev-next-icon", title: "Neste" }))))),
-        prevNextTexts && page !== count && (React.createElement("button", { className: "navds-pagination__prev-next", onClick: () => onPageChange(page + 1) },
+        prevNextTexts && (React.createElement("button", { className: cl("navds-pagination__prev-next", {
+                "navds-pagination--invisible": page === count,
+            }), disabled: page === count, onClick: () => onPageChange(page + 1) },
             React.createElement(BodyShort, { size: size, className: "navds-pagination__next-text" }, "Neste"),
             React.createElement(Next, { className: "navds-pagination__prev-next-icon", role: "presentation" })))));
-};
+});
 export default Pagination;
 //# sourceMappingURL=Pagination.js.map

package/esm/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/pagination/Pagination.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/pagination/Pagination.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.8",
+  "version": "0.17.11",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -67,5 +67,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "a3b28bb9ad1ca3a3a188d643ee26918d36805bf2"
+  "gitHead": "62ba36ae0944d7db43a265b24b24040322f0366f"
 }

package/src/alert/Alert.tsx

@@ -1,11 +1,11 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
 import {
   ErrorFilled,
-  WarningFilled,
   InformationFilled,
   SuccessFilled,
+  WarningFilled,
 } from "@navikt/ds-icons";
+import cl from "classnames";
+import React, { forwardRef } from "react";
 import { BodyLong } from "..";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/grid/stories/styles.css

@@ -1,12 +1,12 @@
 .navds-story-cell {
-  border-radius: 0.25rem;
+  border-radius: var(--navds-border-radius-medium);
   background: white;
   padding: 1rem;
 }
 
 .navds-story-content-container {
   display: flex;
-  border-radius: 0.25rem;
+  border-radius: var(--navds-border-radius-medium);
   justify-content: center;
   align-items: center;
   margin-bottom: 1.5rem;

package/src/help-text/HelpText.tsx

@@ -42,9 +42,8 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           className={cl(className, "navds-help-text__button")}
           type="button"
           aria-expanded={open}
-          title={title}
         >
-          <HelpTextIcon className="navds-help-text__icon" aria-hidden/>
+          <HelpTextIcon className="navds-help-text__icon" title={title} />
         </button>
         <Popover
           onClose={() => setOpen(false)}

package/src/pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import cl from "classnames";
 import { Back, Next } from "@navikt/ds-icons";
 import { BodyShort } from "..";
@@ -71,117 +71,141 @@ export const getSteps = ({
   ];
 };
 
-const Pagination = ({
-  page,
-  onPageChange,
-  count,
-  boundaryCount = 1,
-  siblingCount = 1,
-  className,
-  size = "medium",
-  prevNextTexts = false,
-}: PaginationProps) => {
-  if (page < 1) {
-    console.error("page cannot be less than 1");
-    return null;
-  }
-  if (count < 1) {
-    console.error("count cannot be less than 1");
-    return null;
-  }
-  if (boundaryCount < 0) {
-    console.error("boundaryCount cannot be less than 0");
-    return null;
-  }
-  if (siblingCount < 0) {
-    console.error("siblingCount cannot be less than 0");
-    return null;
-  }
+const Pagination = forwardRef<HTMLElement, PaginationProps>(
+  (
+    {
+      page,
+      onPageChange,
+      count,
+      boundaryCount = 1,
+      siblingCount = 1,
+      className,
+      size = "medium",
+      prevNextTexts = false,
+      ...rest
+    },
+    ref
+  ) => {
+    if (page < 1) {
+      console.error("page cannot be less than 1");
+      return null;
+    }
+    if (count < 1) {
+      console.error("count cannot be less than 1");
+      return null;
+    }
+    if (boundaryCount < 0) {
+      console.error("boundaryCount cannot be less than 0");
+      return null;
+    }
+    if (siblingCount < 0) {
+      console.error("siblingCount cannot be less than 0");
+      return null;
+    }
 
-  return (
-    <nav
-      className={cl("navds-pagination", `navds-pagination--${size}`, className)}
-    >
-      {prevNextTexts && page !== 1 && (
-        <button
-          className="navds-pagination__prev-next"
-          onClick={() => onPageChange(page - 1)}
-        >
-          <Back
-            className="navds-pagination__prev-next-icon"
-            role="presentation"
-          />
-          <BodyShort size={size} className="navds-pagination__prev-text">
-            Forrige
-          </BodyShort>
-        </button>
-      )}
-      <ul className="navds-pagination__list">
-        {!prevNextTexts && page !== 1 && (
-          <li>
-            <button
-              className="navds-pagination__prev-next"
-              onClick={() => onPageChange(page - 1)}
-            >
-              <Back
-                className="navds-pagination__prev-next-icon"
-                title="Forrige"
-              />
-            </button>
-          </li>
+    return (
+      <nav
+        ref={ref}
+        {...rest}
+        className={cl(
+          "navds-pagination",
+          `navds-pagination--${size}`,
+          className
         )}
-        {getSteps({ page, count, siblingCount, boundaryCount }).map(
-          (step, i) => {
-            const n = Number(step);
-            return isNaN(n) ? (
-              <li className="navds-pagination__ellipsis" key={`${step}${i}`}>
-                <BodyShort size={size}>...</BodyShort>
-              </li>
-            ) : (
-              <li key={step}>
-                <BodyShort
-                  size={size}
-                  as="button"
-                  className="navds-pagination__item"
-                  onClick={() => onPageChange(n)}
-                  aria-current={page === n ? true : undefined}
-                >
-                  {n}
-                </BodyShort>
-              </li>
-            );
-          }
+      >
+        {prevNextTexts && (
+          <button
+            className={cl("navds-pagination__prev-next", {
+              "navds-pagination--invisible": page === 1,
+            })}
+            disabled={page === 1}
+            onClick={() => onPageChange(page - 1)}
+          >
+            <Back
+              className="navds-pagination__prev-next-icon"
+              role="presentation"
+            />
+            <BodyShort size={size} className="navds-pagination__prev-text">
+              Forrige
+            </BodyShort>
+          </button>
         )}
-        {!prevNextTexts && page !== count && (
-          <li>
-            <button
-              className="navds-pagination__prev-next"
-              onClick={() => onPageChange(page + 1)}
-            >
-              <Next
-                className="navds-pagination__prev-next-icon"
-                title="Neste"
-              />
-            </button>
-          </li>
+        <ul className="navds-pagination__list">
+          {!prevNextTexts && (
+            <li>
+              <button
+                className={cl("navds-pagination__prev-next", {
+                  "navds-pagination--invisible": page === 1,
+                })}
+                disabled={page === 1}
+                onClick={() => onPageChange(page - 1)}
+              >
+                <Back
+                  className="navds-pagination__prev-next-icon"
+                  title="Forrige"
+                />
+              </button>
+            </li>
+          )}
+          {getSteps({ page, count, siblingCount, boundaryCount }).map(
+            (step, i) => {
+              const n = Number(step);
+              return isNaN(n) ? (
+                <li className="navds-pagination__ellipsis" key={`${step}${i}`}>
+                  <BodyShort size={size}>...</BodyShort>
+                </li>
+              ) : (
+                <li key={step}>
+                  <BodyShort
+                    size={size}
+                    as="button"
+                    className="navds-pagination__item"
+                    onClick={() => onPageChange(n)}
+                    aria-current={page === n ? true : undefined}
+                  >
+                    {n}
+                  </BodyShort>
+                </li>
+              );
+            }
+          )}
+          {!prevNextTexts && (
+            <li>
+              <button
+                className={cl("navds-pagination__prev-next", {
+                  "navds-pagination--invisible": page === count,
+                })}
+                disabled={page === count}
+                onClick={() => onPageChange(page + 1)}
+              >
+                <Next
+                  className="navds-pagination__prev-next-icon"
+                  title="Neste"
+                />
+              </button>
+            </li>
+          )}
+        </ul>
+        {prevNextTexts && (
+          <button
+            className={cl("navds-pagination__prev-next", {
+              "navds-pagination--invisible": page === count,
+            })}
+            disabled={page === count}
+            onClick={() => onPageChange(page + 1)}
+          >
+            <BodyShort size={size} className="navds-pagination__next-text">
+              Neste
+            </BodyShort>
+            <Next
+              className="navds-pagination__prev-next-icon"
+              role="presentation"
+            />
+          </button>
         )}
-      </ul>
-      {prevNextTexts && page !== count && (
-        <button
-          className="navds-pagination__prev-next"
-          onClick={() => onPageChange(page + 1)}
-        >
-          <BodyShort size={size} className="navds-pagination__next-text">
-            Neste
-          </BodyShort>
-          <Next
-            className="navds-pagination__prev-next-icon"
-            role="presentation"
-          />
-        </button>
-      )}
-    </nav>
-  );
-};
+      </nav>
+    );
+  }
+);
 
 export default Pagination;

package/src/pagination/pagination.stories.tsx

@@ -29,6 +29,7 @@ export const All = (props) => {
     </div>
   );
 };
+
 All.args = {
   page: 1,
   count: 8,