@navikt/ds-react 5.10.1 → 5.10.3

package/_docs.json

@@ -3418,7 +3418,7 @@
       },
       "maxRows": {
         "defaultValue": null,
-        "description": "Maximum number of character rows to display.\n@bug Internal scrolling with `maxLength` scrolls over maxLength-text",
+        "description": "Maximum number of character rows to display.",
         "name": "maxRows",
         "parent": {
           "fileName": "src/form/Textarea.tsx",
@@ -3704,43 +3704,83 @@
     }
   },
   {
-    "filePath": "src/form/Textarea.tsx",
-    "displayName": "Counter",
+    "filePath": "src/form/TextareaCounter.tsx",
+    "displayName": "TextareaCounter",
     "props": {
       "maxLength": {
         "defaultValue": null,
         "description": "",
         "name": "maxLength",
+        "parent": {
+          "fileName": "src/form/TextareaCounter.tsx",
+          "name": "Props"
+        },
+        "declarations": [
+          {
+            "fileName": "src/form/TextareaCounter.tsx",
+            "name": "Props"
+          }
+        ],
         "required": true,
         "type": {
-          "name": "any"
+          "name": "number"
         }
       },
       "currentLength": {
         "defaultValue": null,
         "description": "",
         "name": "currentLength",
+        "parent": {
+          "fileName": "src/form/TextareaCounter.tsx",
+          "name": "Props"
+        },
+        "declarations": [
+          {
+            "fileName": "src/form/TextareaCounter.tsx",
+            "name": "Props"
+          }
+        ],
         "required": true,
         "type": {
-          "name": "any"
+          "name": "number"
         }
       },
       "size": {
         "defaultValue": null,
         "description": "",
         "name": "size",
+        "parent": {
+          "fileName": "src/form/TextareaCounter.tsx",
+          "name": "Props"
+        },
+        "declarations": [
+          {
+            "fileName": "src/form/TextareaCounter.tsx",
+            "name": "Props"
+          }
+        ],
         "required": true,
         "type": {
-          "name": "any"
+          "name": "\"medium\" | \"small\" | undefined"
         }
       },
       "i18n": {
         "defaultValue": null,
         "description": "",
         "name": "i18n",
+        "parent": {
+          "fileName": "src/form/TextareaCounter.tsx",
+          "name": "Props"
+        },
+        "declarations": [
+          {
+            "fileName": "src/form/TextareaCounter.tsx",
+            "name": "Props"
+          }
+        ],
         "required": true,
         "type": {
-          "name": "any"
+          "name": "{ counterLeft?: string | undefined; counterTooMuch?: string | undefined; } | undefined"
         }
       }
     }

package/cjs/form/Textarea.js

@@ -37,14 +37,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Counter = exports.Textarea = void 0;
+exports.Textarea = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
+const util_1 = require("../util");
 const TextareaAutoSize_1 = __importDefault(require("../util/TextareaAutoSize"));
-const useFormField_1 = require("./useFormField");
 const ReadOnlyIcon_1 = require("./ReadOnlyIcon");
-const util_1 = require("../util");
+const TextareaCounter_1 = __importDefault(require("./TextareaCounter"));
+const useFormField_1 = require("./useFormField");
 /**
  * A component that displays a textarea input field with a label.
  *
@@ -91,22 +92,10 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
         react_1.default.createElement("div", { className: "navds-textarea__wrapper" },
             react_1.default.createElement(TextareaAutoSize_1.default, Object.assign({}, (0, util_1.omit)(rest, ["error", "errorId", "size"]), inputProps, { onChange: (e) => props.onChange
                     ? props.onChange(e)
-                    : setControlledValue(e.target.value), minRows: getMinRows(), ref: ref, readOnly: readOnly, className: (0, clsx_1.default)("navds-textarea__input", "navds-body-short", `navds-body-short--${size !== null && size !== void 0 ? size : "medium"}`, {
-                    "navds-textarea--counter": hasMaxLength,
-                }) }, (describedBy ? { "aria-describedby": describedBy } : {}))),
-            hasMaxLength && (react_1.default.createElement(react_1.default.Fragment, null,
+                    : setControlledValue(e.target.value), minRows: getMinRows(), ref: ref, readOnly: readOnly, className: (0, clsx_1.default)("navds-textarea__input", "navds-body-short", `navds-body-short--${size !== null && size !== void 0 ? size : "medium"}`) }, (describedBy ? { "aria-describedby": describedBy } : {}))),
+            hasMaxLength && !readOnly && !inputProps.disabled && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("span", { id: maxLengthId, className: "navds-sr-only" }, `Tekstområde med plass til ${maxLength} tegn.`),
-                react_1.default.createElement(exports.Counter, { maxLength: maxLength, currentLength: (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : controlledValue === null || controlledValue === void 0 ? void 0 : controlledValue.length, size: size, i18n: i18n })))),
+                react_1.default.createElement(TextareaCounter_1.default, { maxLength: maxLength, currentLength: (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : controlledValue === null || controlledValue === void 0 ? void 0 : controlledValue.length, size: size, i18n: i18n })))),
         react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(typography_1.ErrorMessage, { size: size }, props.error)))));
 });
-const Counter = ({ maxLength, currentLength, size, i18n }) => {
-    var _a, _b;
-    const difference = maxLength - currentLength;
-    return (react_1.default.createElement(typography_1.BodyShort, { className: (0, clsx_1.default)("navds-textarea__counter", {
-            "navds-textarea__counter--error": difference < 0,
-        }), "aria-live": difference < 20 ? "polite" : "off", size: size }, difference < 0
-        ? `${Math.abs(difference)} ${(_a = i18n === null || i18n === void 0 ? void 0 : i18n.counterTooMuch) !== null && _a !== void 0 ? _a : "tegn for mye"}`
-        : `${difference} ${(_b = i18n === null || i18n === void 0 ? void 0 : i18n.counterLeft) !== null && _b !== void 0 ? _b : "tegn igjen"}`));
-};
-exports.Counter = Counter;
 exports.default = exports.Textarea;

package/cjs/form/TextareaCounter.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../typography");
+const TextareaCounter = ({ maxLength, currentLength, size, i18n }) => {
+    var _a, _b;
+    const difference = maxLength - currentLength;
+    return (react_1.default.createElement(typography_1.BodyShort, { className: (0, clsx_1.default)("navds-textarea__counter", {
+            "navds-textarea__counter--error": difference < 0,
+        }), role: difference < 20 ? "status" : undefined, size: size }, difference < 0
+        ? `${Math.abs(difference)} ${(_a = i18n === null || i18n === void 0 ? void 0 : i18n.counterTooMuch) !== null && _a !== void 0 ? _a : "tegn for mye"}`
+        : `${difference} ${(_b = i18n === null || i18n === void 0 ? void 0 : i18n.counterLeft) !== null && _b !== void 0 ? _b : "tegn igjen"}`));
+};
+exports.default = TextareaCounter;

package/cjs/form/error-summary/ErrorSummary.js

@@ -67,7 +67,10 @@ exports.ErrorSummary = (0, react_1.forwardRef)((_a, ref) => {
     return (react_1.default.createElement("section", Object.assign({ ref: ref }, rest, { className: (0, clsx_1.default)(className, "navds-error-summary", `navds-error-summary--${size}`), tabIndex: -1, "aria-live": "polite", "aria-relevant": "all", "aria-labelledby": headingId }),
         react_1.default.createElement(typography_1.Heading, { className: "navds-error-summary__heading", as: headingTag, size: "small", id: headingId }, heading),
         react_1.default.createElement(typography_1.BodyShort, { as: "ul", size: size, className: "navds-error-summary__list" }, react_1.default.Children.map(children, (child) => {
-            return react_1.default.createElement("li", { key: child === null || child === void 0 ? void 0 : child.toString() }, child);
+            if (!(0, react_1.isValidElement)(child)) {
+                return null;
+            }
+            return react_1.default.createElement("li", { key: child.toString() }, child);
         }))));
 });
 exports.ErrorSummary.Item = ErrorSummaryItem_1.default;

package/cjs/form/index.js

@@ -3,30 +3,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextField = exports.Textarea = exports.Counter = exports.Switch = exports.Select = exports.UNSAFE_Combobox = exports.Search = exports.RadioGroup = exports.Radio = exports.FieldsetContext = exports.Fieldset = exports.ErrorSummary = exports.ConfirmationPanel = exports.CheckboxGroup = exports.Checkbox = void 0;
-var checkbox_1 = require("./checkbox");
-Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });
-Object.defineProperty(exports, "CheckboxGroup", { enumerable: true, get: function () { return checkbox_1.CheckboxGroup; } });
+exports.Search = exports.RadioGroup = exports.Radio = exports.ErrorSummary = exports.UNSAFE_Combobox = exports.CheckboxGroup = exports.Checkbox = exports.Textarea = exports.TextField = exports.Switch = exports.Select = exports.FieldsetContext = exports.Fieldset = exports.ConfirmationPanel = void 0;
 var ConfirmationPanel_1 = require("./ConfirmationPanel");
 Object.defineProperty(exports, "ConfirmationPanel", { enumerable: true, get: function () { return __importDefault(ConfirmationPanel_1).default; } });
-var error_summary_1 = require("./error-summary");
-Object.defineProperty(exports, "ErrorSummary", { enumerable: true, get: function () { return error_summary_1.ErrorSummary; } });
 var Fieldset_1 = require("./Fieldset");
 Object.defineProperty(exports, "Fieldset", { enumerable: true, get: function () { return Fieldset_1.Fieldset; } });
 Object.defineProperty(exports, "FieldsetContext", { enumerable: true, get: function () { return Fieldset_1.FieldsetContext; } });
-var radio_1 = require("./radio");
-Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return radio_1.Radio; } });
-Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return radio_1.RadioGroup; } });
-var search_1 = require("./search");
-Object.defineProperty(exports, "Search", { enumerable: true, get: function () { return search_1.Search; } });
-var combobox_1 = require("./combobox");
-Object.defineProperty(exports, "UNSAFE_Combobox", { enumerable: true, get: function () { return combobox_1.Combobox; } });
 var Select_1 = require("./Select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(Select_1).default; } });
 var Switch_1 = require("./Switch");
 Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return __importDefault(Switch_1).default; } });
-var Textarea_1 = require("./Textarea");
-Object.defineProperty(exports, "Counter", { enumerable: true, get: function () { return Textarea_1.Counter; } });
-Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return __importDefault(Textarea_1).default; } });
 var TextField_1 = require("./TextField");
 Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return __importDefault(TextField_1).default; } });
+var Textarea_1 = require("./Textarea");
+Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return __importDefault(Textarea_1).default; } });
+var checkbox_1 = require("./checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });
+Object.defineProperty(exports, "CheckboxGroup", { enumerable: true, get: function () { return checkbox_1.CheckboxGroup; } });
+var combobox_1 = require("./combobox");
+Object.defineProperty(exports, "UNSAFE_Combobox", { enumerable: true, get: function () { return combobox_1.Combobox; } });
+var error_summary_1 = require("./error-summary");
+Object.defineProperty(exports, "ErrorSummary", { enumerable: true, get: function () { return error_summary_1.ErrorSummary; } });
+var radio_1 = require("./radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return radio_1.Radio; } });
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return radio_1.RadioGroup; } });
+var search_1 = require("./search");
+Object.defineProperty(exports, "Search", { enumerable: true, get: function () { return search_1.Search; } });

package/esm/form/Textarea.d.ts

@@ -19,7 +19,6 @@ export interface TextareaProps extends FormFieldProps, React.TextareaHTMLAttribu
     defaultValue?: string;
     /**
      * Maximum number of character rows to display.
-     * @bug Internal scrolling with `maxLength` scrolls over maxLength-text
      */
     maxRows?: number;
     /**
@@ -42,7 +41,7 @@ export interface TextareaProps extends FormFieldProps, React.TextareaHTMLAttribu
      * i18n-translations for counter-text
      */
     i18n?: {
-        /** @default Antall tegn igjen */
+        /** @default tegn igjen */
         counterLeft?: string;
         /** @default tegn for mye */
         counterTooMuch?: string;
@@ -60,10 +59,4 @@ export interface TextareaProps extends FormFieldProps, React.TextareaHTMLAttribu
  * ```
  */
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export declare const Counter: ({ maxLength, currentLength, size, i18n }: {
-    maxLength: any;
-    currentLength: any;
-    size: any;
-    i18n: any;
-}) => React.JSX.Element;
 export default Textarea;

package/esm/form/Textarea.js

@@ -12,10 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { BodyShort, ErrorMessage, Label } from "../typography";
+import { omit, useId } from "../util";
 import TextareaAutosize from "../util/TextareaAutoSize";
-import { useFormField } from "./useFormField";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
-import { omit, useId } from "../util";
+import Counter from "./TextareaCounter";
+import { useFormField } from "./useFormField";
 /**
  * A component that displays a textarea input field with a label.
  *
@@ -62,22 +63,11 @@ export const Textarea = forwardRef((props, ref) => {
         React.createElement("div", { className: "navds-textarea__wrapper" },
             React.createElement(TextareaAutosize, Object.assign({}, omit(rest, ["error", "errorId", "size"]), inputProps, { onChange: (e) => props.onChange
                     ? props.onChange(e)
-                    : setControlledValue(e.target.value), minRows: getMinRows(), ref: ref, readOnly: readOnly, className: cl("navds-textarea__input", "navds-body-short", `navds-body-short--${size !== null && size !== void 0 ? size : "medium"}`, {
-                    "navds-textarea--counter": hasMaxLength,
-                }) }, (describedBy ? { "aria-describedby": describedBy } : {}))),
-            hasMaxLength && (React.createElement(React.Fragment, null,
+                    : setControlledValue(e.target.value), minRows: getMinRows(), ref: ref, readOnly: readOnly, className: cl("navds-textarea__input", "navds-body-short", `navds-body-short--${size !== null && size !== void 0 ? size : "medium"}`) }, (describedBy ? { "aria-describedby": describedBy } : {}))),
+            hasMaxLength && !readOnly && !inputProps.disabled && (React.createElement(React.Fragment, null,
                 React.createElement("span", { id: maxLengthId, className: "navds-sr-only" }, `Tekstområde med plass til ${maxLength} tegn.`),
                 React.createElement(Counter, { maxLength: maxLength, currentLength: (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : controlledValue === null || controlledValue === void 0 ? void 0 : controlledValue.length, size: size, i18n: i18n })))),
         React.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (React.createElement(ErrorMessage, { size: size }, props.error)))));
 });
-export const Counter = ({ maxLength, currentLength, size, i18n }) => {
-    var _a, _b;
-    const difference = maxLength - currentLength;
-    return (React.createElement(BodyShort, { className: cl("navds-textarea__counter", {
-            "navds-textarea__counter--error": difference < 0,
-        }), "aria-live": difference < 20 ? "polite" : "off", size: size }, difference < 0
-        ? `${Math.abs(difference)} ${(_a = i18n === null || i18n === void 0 ? void 0 : i18n.counterTooMuch) !== null && _a !== void 0 ? _a : "tegn for mye"}`
-        : `${difference} ${(_b = i18n === null || i18n === void 0 ? void 0 : i18n.counterLeft) !== null && _b !== void 0 ? _b : "tegn igjen"}`));
-};
 export default Textarea;
 //# sourceMappingURL=Textarea.js.map

package/esm/form/Textarea.js.map

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

package/esm/form/TextareaCounter.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { TextareaProps } from "./Textarea";
+interface Props {
+    maxLength: number;
+    currentLength: number;
+    size: TextareaProps["size"];
+    i18n: TextareaProps["i18n"];
+}
+declare const TextareaCounter: ({ maxLength, currentLength, size, i18n }: Props) => React.JSX.Element;
+export default TextareaCounter;

package/esm/form/TextareaCounter.js

@@ -0,0 +1,14 @@
+import cl from "clsx";
+import React from "react";
+import { BodyShort } from "../typography";
+const TextareaCounter = ({ maxLength, currentLength, size, i18n }) => {
+    var _a, _b;
+    const difference = maxLength - currentLength;
+    return (React.createElement(BodyShort, { className: cl("navds-textarea__counter", {
+            "navds-textarea__counter--error": difference < 0,
+        }), role: difference < 20 ? "status" : undefined, size: size }, difference < 0
+        ? `${Math.abs(difference)} ${(_a = i18n === null || i18n === void 0 ? void 0 : i18n.counterTooMuch) !== null && _a !== void 0 ? _a : "tegn for mye"}`
+        : `${difference} ${(_b = i18n === null || i18n === void 0 ? void 0 : i18n.counterLeft) !== null && _b !== void 0 ? _b : "tegn igjen"}`));
+};
+export default TextareaCounter;
+//# sourceMappingURL=TextareaCounter.js.map

package/esm/form/TextareaCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaCounter.js","sourceRoot":"","sources":["../../src/form/TextareaCounter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAU1C,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAS,EAAE,EAAE;;IAC1E,MAAM,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;IAE7C,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;YACvC,gCAAgC,EAAE,UAAU,GAAG,CAAC;SACjD,CAAC,EACF,IAAI,EAAE,UAAU,GAAG,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAE,IAAI,IAET,UAAU,GAAG,CAAC;QACb,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,cAAc,mCAAI,cAAc,EAAE;QACrE,CAAC,CAAC,GAAG,UAAU,IAAI,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,mCAAI,YAAY,EAAE,CAC9C,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/esm/form/error-summary/ErrorSummary.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from "react";
+import React, { forwardRef, isValidElement } from "react";
 import cl from "clsx";
 import { Heading, BodyShort } from "../../typography";
 import ErrorSummaryItem from "./ErrorSummaryItem";
@@ -38,7 +38,10 @@ export const ErrorSummary = forwardRef((_a, ref) => {
     return (React.createElement("section", Object.assign({ ref: ref }, rest, { className: cl(className, "navds-error-summary", `navds-error-summary--${size}`), tabIndex: -1, "aria-live": "polite", "aria-relevant": "all", "aria-labelledby": headingId }),
         React.createElement(Heading, { className: "navds-error-summary__heading", as: headingTag, size: "small", id: headingId }, heading),
         React.createElement(BodyShort, { as: "ul", size: size, className: "navds-error-summary__list" }, React.Children.map(children, (child) => {
-            return React.createElement("li", { key: child === null || child === void 0 ? void 0 : child.toString() }, child);
+            if (!isValidElement(child)) {
+                return null;
+            }
+            return React.createElement("li", { key: child.toString() }, child);
         }))));
 });
 ErrorSummary.Item = ErrorSummaryItem;

package/esm/form/error-summary/ErrorSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorSummary.js","sourceRoot":"","sources":["../../../src/form/error-summary/ErrorSummary.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,gBAA0C,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AA0CnC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,IAAI,EACjB,OAAO,OAER,EADI,IAAI,cANT,0DAOC,CADQ;IAIT,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAE1B,OAAO,CACL,+CACE,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,qBAAqB,EACrB,wBAAwB,IAAI,EAAE,CAC/B,EACD,QAAQ,EAAE,CAAC,CAAC,eACF,QAAQ,mBACJ,KAAK,qBACF,SAAS;QAE1B,oBAAC,OAAO,IACN,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,SAAS,IAEZ,OAAO,CACA;QACV,oBAAC,SAAS,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,2BAA2B,IACjE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACtC,OAAO,4BAAI,GAAG,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,IAAG,KAAK,CAAM,CAAC;QAClD,CAAC,CAAC,CACQ,CACJ,CACX,CAAC;AACJ,CAAC,CACuB,CAAC;AAE3B,YAAY,CAAC,IAAI,GAAG,gBAAgB,CAAC;AAErC,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ErrorSummary.js","sourceRoot":"","sources":["../../../src/form/error-summary/ErrorSummary.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,cAAc,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,gBAA0C,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AA0CnC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,IAAI,EACjB,OAAO,OAER,EADI,IAAI,cANT,0DAOC,CADQ;IAIT,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAE1B,OAAO,CACL,+CACE,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,qBAAqB,EACrB,wBAAwB,IAAI,EAAE,CAC/B,EACD,QAAQ,EAAE,CAAC,CAAC,eACF,QAAQ,mBACJ,KAAK,qBACF,SAAS;QAE1B,oBAAC,OAAO,IACN,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,SAAS,IAEZ,OAAO,CACA;QACV,oBAAC,SAAS,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,2BAA2B,IACjE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACtC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC1B,OAAO,IAAI,CAAC;aACb;YACD,OAAO,4BAAI,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAG,KAAK,CAAM,CAAC;QACjD,CAAC,CAAC,CACQ,CACJ,CACX,CAAC;AACJ,CAAC,CACuB,CAAC;AAE3B,YAAY,CAAC,IAAI,GAAG,gBAAgB,CAAC;AAErC,eAAe,YAAY,CAAC"}

package/esm/form/index.d.ts

@@ -1,11 +1,11 @@
-export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, } from "./checkbox";
-export { type ConfirmationPanelProps, default as ConfirmationPanel, } from "./ConfirmationPanel";
-export { ErrorSummary, type ErrorSummaryProps } from "./error-summary";
+export { default as ConfirmationPanel, type ConfirmationPanelProps, } from "./ConfirmationPanel";
 export { Fieldset, FieldsetContext, type FieldsetProps } from "./Fieldset";
-export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, } from "./radio";
-export { Search, type SearchClearEvent, type SearchProps } from "./search";
-export { Combobox as UNSAFE_Combobox, type ComboboxProps } from "./combobox";
 export { default as Select, type SelectProps } from "./Select";
 export { default as Switch, type SwitchProps } from "./Switch";
-export { Counter, default as Textarea, type TextareaProps } from "./Textarea";
 export { default as TextField, type TextFieldProps } from "./TextField";
+export { default as Textarea, type TextareaProps } from "./Textarea";
+export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, } from "./checkbox";
+export { Combobox as UNSAFE_Combobox, type ComboboxProps } from "./combobox";
+export { ErrorSummary, type ErrorSummaryProps } from "./error-summary";
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, } from "./radio";
+export { Search, type SearchClearEvent, type SearchProps } from "./search";

package/esm/form/index.js

@@ -1,12 +1,12 @@
-export { Checkbox, CheckboxGroup, } from "./checkbox";
 export { default as ConfirmationPanel, } from "./ConfirmationPanel";
-export { ErrorSummary } from "./error-summary";
 export { Fieldset, FieldsetContext } from "./Fieldset";
-export { Radio, RadioGroup, } from "./radio";
-export { Search } from "./search";
-export { Combobox as UNSAFE_Combobox } from "./combobox";
 export { default as Select } from "./Select";
 export { default as Switch } from "./Switch";
-export { Counter, default as Textarea } from "./Textarea";
 export { default as TextField } from "./TextField";
+export { default as Textarea } from "./Textarea";
+export { Checkbox, CheckboxGroup, } from "./checkbox";
+export { Combobox as UNSAFE_Combobox } from "./combobox";
+export { ErrorSummary } from "./error-summary";
+export { Radio, RadioGroup, } from "./radio";
+export { Search } from "./search";
 //# sourceMappingURL=index.js.map

package/esm/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,aAAa,GAGd,MAAM,YAAY,CAAC;AACpB,OAAO,EAEL,OAAO,IAAI,iBAAiB,GAC7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,YAAY,EAA0B,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAsB,MAAM,YAAY,CAAC;AAC3E,OAAO,EACL,KAAK,EACL,UAAU,GAGX,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,MAAM,EAA2C,MAAM,UAAU,CAAC;AAC3E,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAsB,MAAM,YAAY,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,UAAU,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,UAAU,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAuB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,iBAAiB,GAE7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAsB,MAAM,YAAY,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,UAAU,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,UAAU,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAuB,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EACL,QAAQ,EACR,aAAa,GAGd,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAsB,MAAM,YAAY,CAAC;AAC7E,OAAO,EAAE,YAAY,EAA0B,MAAM,iBAAiB,CAAC;AACvE,OAAO,EACL,KAAK,EACL,UAAU,GAGX,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,MAAM,EAA2C,MAAM,UAAU,CAAC"}

package/esm/util/OverridableComponent.d.ts

@@ -1,7 +1,24 @@
 import React from "react";
+/**
+ * This interface represents a component that can be overridden with different props and elements.
+ * @template Component The type of the props for the component.
+ * @template Element The type of the HTML element that the component renders.
+ */
 export interface OverridableComponent<Component, Element extends HTMLElement> {
+    /**
+     * This is a function type that takes props and returns a React functional component.
+     * @param props The props for the component, which are a combination of the Component type and React.RefAttributes for the Element type.
+     * @returns A React functional component.
+     */
     (props: Component & React.RefAttributes<Element>): ReturnType<React.FC>;
+    /**
+     * This is a function type that takes props and returns a React functional component.
+     * It allows for the 'as' prop to override the type of element that the component renders.
+     * @template As The type of the element that the component should render as.
+     * @param props The props for the component, which are a combination of the Component type, the 'as' prop, and any other props that are not part of the Component type or the 'as' prop.
+     * @returns A React functional component.
+     */
     <As extends React.ElementType>(props: {
-        as: As;
+        as?: As;
     } & Component & Omit<React.ComponentPropsWithRef<As>, keyof Component | "as">): ReturnType<React.FC>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.10.1",
+  "version": "5.10.3",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.10.1",
-    "@navikt/ds-tokens": "^5.10.1",
+    "@navikt/aksel-icons": "^5.10.3",
+    "@navikt/ds-tokens": "^5.10.3",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/form/Textarea.tsx

@@ -1,10 +1,11 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { BodyShort, ErrorMessage, Label } from "../typography";
+import { omit, useId } from "../util";
 import TextareaAutosize from "../util/TextareaAutoSize";
-import { FormFieldProps, useFormField } from "./useFormField";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
-import { omit, useId } from "../util";
+import Counter from "./TextareaCounter";
+import { FormFieldProps, useFormField } from "./useFormField";
 
 /**
  * TODO: Mulighet for lokalisering av sr-only/counter text
@@ -27,7 +28,6 @@ export interface TextareaProps
   defaultValue?: string;
   /**
    * Maximum number of character rows to display.
-   * @bug Internal scrolling with `maxLength` scrolls over maxLength-text
    */
   maxRows?: number;
   /**
@@ -50,7 +50,7 @@ export interface TextareaProps
    * i18n-translations for counter-text
    */
   i18n?: {
-    /** @default Antall tegn igjen */
+    /** @default tegn igjen */
     counterLeft?: string;
     /** @default tegn for mye */
     counterTooMuch?: string;
@@ -162,14 +162,11 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             className={cl(
               "navds-textarea__input",
               "navds-body-short",
-              `navds-body-short--${size ?? "medium"}`,
-              {
-                "navds-textarea--counter": hasMaxLength,
-              }
+              `navds-body-short--${size ?? "medium"}`
             )}
             {...(describedBy ? { "aria-describedby": describedBy } : {})}
           />
-          {hasMaxLength && (
+          {hasMaxLength && !readOnly && !inputProps.disabled && (
             <>
               <span id={maxLengthId} className="navds-sr-only">
                 {`Tekstområde med plass til ${maxLength} tegn.`}
@@ -198,22 +195,4 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   }
 );
 
-export const Counter = ({ maxLength, currentLength, size, i18n }) => {
-  const difference = maxLength - currentLength;
-
-  return (
-    <BodyShort
-      className={cl("navds-textarea__counter", {
-        "navds-textarea__counter--error": difference < 0,
-      })}
-      aria-live={difference < 20 ? "polite" : "off"}
-      size={size}
-    >
-      {difference < 0
-        ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
-        : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`}
-    </BodyShort>
-  );
-};
-
 export default Textarea;

package/src/form/TextareaCounter.tsx

@@ -0,0 +1,31 @@
+import cl from "clsx";
+import React from "react";
+import { BodyShort } from "../typography";
+import type { TextareaProps } from "./Textarea";
+
+interface Props {
+  maxLength: number;
+  currentLength: number;
+  size: TextareaProps["size"];
+  i18n: TextareaProps["i18n"];
+}
+
+const TextareaCounter = ({ maxLength, currentLength, size, i18n }: Props) => {
+  const difference = maxLength - currentLength;
+
+  return (
+    <BodyShort
+      className={cl("navds-textarea__counter", {
+        "navds-textarea__counter--error": difference < 0,
+      })}
+      role={difference < 20 ? "status" : undefined}
+      size={size}
+    >
+      {difference < 0
+        ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
+        : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`}
+    </BodyShort>
+  );
+};
+
+export default TextareaCounter;

package/src/form/error-summary/ErrorSummary.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLAttributes } from "react";
+import React, { forwardRef, HTMLAttributes, isValidElement } from "react";
 import cl from "clsx";
 import { Heading, BodyShort } from "../../typography";
 import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
@@ -100,7 +100,10 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         </Heading>
         <BodyShort as="ul" size={size} className="navds-error-summary__list">
           {React.Children.map(children, (child) => {
-            return <li key={child?.toString()}>{child}</li>;
+            if (!isValidElement(child)) {
+              return null;
+            }
+            return <li key={child.toString()}>{child}</li>;
           })}
         </BodyShort>
       </section>

package/src/form/index.ts

@@ -1,15 +1,20 @@
+export {
+  default as ConfirmationPanel,
+  type ConfirmationPanelProps,
+} from "./ConfirmationPanel";
+export { Fieldset, FieldsetContext, type FieldsetProps } from "./Fieldset";
+export { default as Select, type SelectProps } from "./Select";
+export { default as Switch, type SwitchProps } from "./Switch";
+export { default as TextField, type TextFieldProps } from "./TextField";
+export { default as Textarea, type TextareaProps } from "./Textarea";
 export {
   Checkbox,
   CheckboxGroup,
   type CheckboxGroupProps,
   type CheckboxProps,
 } from "./checkbox";
-export {
-  type ConfirmationPanelProps,
-  default as ConfirmationPanel,
-} from "./ConfirmationPanel";
+export { Combobox as UNSAFE_Combobox, type ComboboxProps } from "./combobox";
 export { ErrorSummary, type ErrorSummaryProps } from "./error-summary";
-export { Fieldset, FieldsetContext, type FieldsetProps } from "./Fieldset";
 export {
   Radio,
   RadioGroup,
@@ -17,8 +22,3 @@ export {
   type RadioProps,
 } from "./radio";
 export { Search, type SearchClearEvent, type SearchProps } from "./search";
-export { Combobox as UNSAFE_Combobox, type ComboboxProps } from "./combobox";
-export { default as Select, type SelectProps } from "./Select";
-export { default as Switch, type SwitchProps } from "./Switch";
-export { Counter, default as Textarea, type TextareaProps } from "./Textarea";
-export { default as TextField, type TextFieldProps } from "./TextField";

package/src/form/stories/textarea.stories.tsx

@@ -14,7 +14,7 @@ export const Default: StoryObj<typeof Textarea> = {
   },
 
   args: {
-    maxLength: 100,
+    maxLength: 0,
     label: "Ipsum enim quis culpa",
     resize: false,
   },
@@ -28,6 +28,7 @@ export const Default: StoryObj<typeof Textarea> = {
     error: { type: "string" },
     hideLabel: { type: "boolean" },
     disabled: { type: "boolean" },
+    readOnly: { type: "boolean" },
     maxRows: { type: "number" },
     minRows: { type: "number" },
   },
@@ -66,6 +67,20 @@ export const Error = () => {
         error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
         size="small"
       />
+
+      <Textarea
+        label="Ipsum enim quis culpa"
+        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+        maxLength={20}
+      />
+
+      <Textarea
+        label="Ipsum enim quis culpa"
+        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+        value="Sed dignissim sollicitudin porta."
+        maxLength={20}
+        size="small"
+      />
     </div>
   );
 };

package/src/layout/bleed/Bleed.stories.tsx

@@ -1,8 +1,8 @@
-import React from "react";
 import type { Meta } from "@storybook/react";
+import React from "react";
+import { Box, HStack, VStack } from "../..";
 import { BodyLong } from "../../typography";
 import { Bleed } from "./Bleed";
-import { Box, HStack, VStack } from "../..";
 
 export default {
   title: "ds-react/Primitives/Bleed",

package/src/util/OverridableComponent.ts

@@ -1,11 +1,28 @@
 import React from "react";
 
+/**
+ * This interface represents a component that can be overridden with different props and elements.
+ * @template Component The type of the props for the component.
+ * @template Element The type of the HTML element that the component renders.
+ */
 export interface OverridableComponent<Component, Element extends HTMLElement> {
+  /**
+   * This is a function type that takes props and returns a React functional component.
+   * @param props The props for the component, which are a combination of the Component type and React.RefAttributes for the Element type.
+   * @returns A React functional component.
+   */
   (props: Component & React.RefAttributes<Element>): ReturnType<React.FC>;
 
+  /**
+   * This is a function type that takes props and returns a React functional component.
+   * It allows for the 'as' prop to override the type of element that the component renders.
+   * @template As The type of the element that the component should render as.
+   * @param props The props for the component, which are a combination of the Component type, the 'as' prop, and any other props that are not part of the Component type or the 'as' prop.
+   * @returns A React functional component.
+   */
   <As extends React.ElementType>(
     props: {
-      as: As;
+      as?: As;
     } & Component &
       Omit<React.ComponentPropsWithRef<As>, keyof Component | "as">
   ): ReturnType<React.FC>;