@navikt/ds-react 5.10.4 → 5.11.0

package/_docs.json

@@ -3507,6 +3507,25 @@
           }
         ],
         "required": false,
+        "type": {
+          "name": "boolean | \"vertical\" | \"horizontal\""
+        }
+      },
+      "UNSAFE_autoScrollbar": {
+        "defaultValue": null,
+        "description": "Textarea will stop growing and get a scrollbar when there's no more room to grow.\nRequires `display:flex` on the parent.\nExperimental feature that may be removed or get breaking changes in a minor version.",
+        "name": "UNSAFE_autoScrollbar",
+        "parent": {
+          "fileName": "src/form/Textarea.tsx",
+          "name": "TextareaProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/form/Textarea.tsx",
+            "name": "TextareaProps"
+          }
+        ],
+        "required": false,
         "type": {
           "name": "boolean"
         }
@@ -10411,6 +10430,25 @@
           "name": "number"
         }
       },
+      "autoScrollbar": {
+        "defaultValue": null,
+        "description": "If true, textarea will never get `overflow:hidden`",
+        "name": "autoScrollbar",
+        "parent": {
+          "fileName": "src/util/TextareaAutoSize.tsx",
+          "name": "TextareaAutosizeProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/util/TextareaAutoSize.tsx",
+            "name": "TextareaAutosizeProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",

package/cjs/form/Textarea.js

@@ -60,7 +60,7 @@ const useFormField_1 = require("./useFormField");
 exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textarea");
-    const { label, className, description, maxLength, hideLabel = false, resize, i18n, readOnly } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel", "resize", "i18n", "readOnly"]);
+    const { label, className, description, maxLength, hideLabel = false, resize, UNSAFE_autoScrollbar, i18n, readOnly } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel", "resize", "UNSAFE_autoScrollbar", "i18n", "readOnly"]);
     const maxLengthId = (0, util_1.useId)();
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
     const [controlledValue, setControlledValue] = (0, react_1.useState)((_a = props === null || props === void 0 ? void 0 : props.defaultValue) !== null && _a !== void 0 ? _a : "");
@@ -79,7 +79,8 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
             "navds-form-field--readonly": readOnly,
             "navds-textarea--readonly": readOnly,
             "navds-textarea--error": hasError,
-            "navds-textarea--resize": resize,
+            "navds-textarea--autoscrollbar": UNSAFE_autoScrollbar,
+            [`navds-textarea--resize-${resize === true ? "both" : resize}`]: resize,
         }) },
         react_1.default.createElement(typography_1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
                 "navds-sr-only": hideLabel,
@@ -92,7 +93,7 @@ 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"}`) }, (describedBy ? { "aria-describedby": describedBy } : {}))),
+                    : setControlledValue(e.target.value), minRows: getMinRows(), autoScrollbar: UNSAFE_autoScrollbar, 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(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 })))),

package/cjs/form/TextareaCounter.js

@@ -1,18 +1,57 @@
 "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 __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 react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
+const debounce_1 = __importDefault(require("../util/debounce"));
 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
+    const [debouncedDiff, setDebouncedDiff] = (0, react_1.useState)(difference);
+    (0, react_1.useEffect)(() => {
+        const debounceFunc = (0, debounce_1.default)(() => {
+            setDebouncedDiff(difference);
+        }, 2000);
+        debounceFunc();
+        return () => {
+            debounceFunc.clear();
+        };
+    }, [difference]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        difference < 20 && (react_1.default.createElement("span", { role: "status", className: "navds-textarea__sr-counter navds-sr-only" }, getCounterText(debouncedDiff, i18n))),
+        react_1.default.createElement(typography_1.BodyShort, { className: (0, clsx_1.default)("navds-textarea__counter", {
+                "navds-textarea__counter--error": difference < 0,
+            }), size: size }, getCounterText(difference, i18n))));
+};
+const getCounterText = (difference, i18n) => {
+    var _a, _b;
+    return 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"}`));
+        : `${difference} ${(_b = i18n === null || i18n === void 0 ? void 0 : i18n.counterLeft) !== null && _b !== void 0 ? _b : "tegn igjen"}`;
 };
 exports.default = TextareaCounter;

package/cjs/util/TextareaAutoSize.js

@@ -37,53 +37,75 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js */
+/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx */
 const react_1 = __importStar(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const util_1 = require("../util");
+const updateState = (prevState, newState, renders) => {
+    const { outerHeightStyle, overflow } = newState;
+    // Need a large enough difference to update the height.
+    // This prevents infinite rendering loop.
+    if (renders.current < 20 &&
+        ((outerHeightStyle > 0 &&
+            Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
+            prevState.overflow !== overflow)) {
+        renders.current += 1;
+        return {
+            overflow,
+            outerHeightStyle,
+        };
+    }
+    if (process.env.NODE_ENV !== "production") {
+        if (renders.current === 20) {
+            console.error([
+                "Textarea: Too many re-renders. The layout is unstable.",
+                "TextareaAutosize limits the number of renders to prevent an infinite loop.",
+            ].join("\n"));
+        }
+    }
+    return prevState;
+};
 /**
- * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument.ts
- * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow.ts
+ * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument/ownerDocument.ts
+ * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow/ownerWindow.ts
  */
 const ownerWindow = (node) => {
     const doc = (node && node.ownerDocument) || document;
     return doc.defaultView || window;
 };
-function getStyleValue(computedStyle, property) {
-    return parseInt(computedStyle[property], 10) || 0;
+function getStyleValue(value) {
+    return parseInt(value, 10) || 0;
 }
 const TextareaAutosize = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, onChange, maxRows, minRows = 1, style, value } = _a, other = __rest(_a, ["className", "onChange", "maxRows", "minRows", "style", "value"]);
+    var { className, onChange, maxRows, minRows = 1, autoScrollbar, style, value } = _a, other = __rest(_a, ["className", "onChange", "maxRows", "minRows", "autoScrollbar", "style", "value"]);
     const { current: isControlled } = (0, react_1.useRef)(value != null);
     const inputRef = (0, react_1.useRef)(null);
     const handleRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([inputRef, ref]), [ref]);
     const shadowRef = (0, react_1.useRef)(null);
     const renders = (0, react_1.useRef)(0);
-    const [state, setState] = (0, react_1.useState)({});
+    const [state, setState] = (0, react_1.useState)({ outerHeightStyle: 0 });
     const getUpdatedState = react_1.default.useCallback(() => {
-        if (!inputRef.current || !shadowRef.current)
-            return;
         const input = inputRef.current;
         const containerWindow = ownerWindow(input);
         const computedStyle = containerWindow.getComputedStyle(input);
         // If input's width is shrunk and it's not visible, don't sync height.
         if (computedStyle.width === "0px") {
-            return;
+            return { outerHeightStyle: 0 };
         }
         const inputShallow = shadowRef.current;
         inputShallow.style.width = computedStyle.width;
-        inputShallow.value = input.value || (other === null || other === void 0 ? void 0 : other.placeholder) || "x";
+        inputShallow.value = input.value || other.placeholder || "x";
         if (inputShallow.value.slice(-1) === "\n") {
             // Certain fonts which overflow the line height will cause the textarea
             // to report a different scrollHeight depending on whether the last line
             // is empty. Make it non-empty to avoid this issue.
             inputShallow.value += " ";
         }
-        const boxSizing = computedStyle["box-sizing"];
-        const padding = getStyleValue(computedStyle, "padding-bottom") +
-            getStyleValue(computedStyle, "padding-top");
-        const border = getStyleValue(computedStyle, "border-bottom-width") +
-            getStyleValue(computedStyle, "border-top-width");
+        const boxSizing = computedStyle.boxSizing;
+        const padding = getStyleValue(computedStyle.paddingBottom) +
+            getStyleValue(computedStyle.paddingTop);
+        const border = getStyleValue(computedStyle.borderBottomWidth) +
+            getStyleValue(computedStyle.borderTopWidth);
         // The height of the inner content
         const innerHeight = inputShallow.scrollHeight - padding;
         // Measure height of a textarea with a single row
@@ -102,77 +124,50 @@ const TextareaAutosize = (0, react_1.forwardRef)((_a, ref) => {
         const outerHeightStyle = outerHeight + (boxSizing === "border-box" ? padding + border : 0);
         const overflow = Math.abs(outerHeight - innerHeight) <= 1;
         return { outerHeightStyle, overflow };
-    }, [maxRows, minRows, other === null || other === void 0 ? void 0 : other.placeholder]);
+    }, [maxRows, minRows, other.placeholder]);
     const syncHeight = react_1.default.useCallback(() => {
         const newState = getUpdatedState();
         if (isEmpty(newState)) {
             return;
         }
-        setState((prevState) => {
-            return updateState(prevState, newState);
-        });
+        setState((prevState) => updateState(prevState, newState, renders));
     }, [getUpdatedState]);
-    const updateState = (prevState, newState) => {
-        const { outerHeightStyle, overflow } = newState;
-        // Need a large enough difference to update the height.
-        // This prevents infinite rendering loop.
-        if (renders.current < 20 &&
-            ((outerHeightStyle > 0 &&
-                Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
-                prevState.overflow !== overflow)) {
-            renders.current += 1;
-            return {
-                overflow,
-                outerHeightStyle,
-            };
-        }
-        if (process.env.NODE_ENV !== "production") {
-            if (renders.current === 20) {
-                console.error([
-                    "Textarea: Too many re-renders. The layout is unstable.",
-                    "TextareaAutosize limits the number of renders to prevent an infinite loop.",
-                ].join("\n"));
+    (0, util_1.useClientLayoutEffect)(() => {
+        const syncHeightWithFlushSync = () => {
+            const newState = getUpdatedState();
+            if (isEmpty(newState)) {
+                return;
             }
-        }
-        return prevState;
-    };
-    const withFlushSync = () => {
-        const newState = getUpdatedState();
-        if (isEmpty(newState)) {
-            return;
-        }
-        // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
-        // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
-        // Related issue - https://github.com/facebook/react/issues/24331
-        react_dom_1.default.flushSync(() => {
-            setState((prevState) => {
-                return updateState(prevState, newState);
+            // In React 18, state updates in a ResizeObserver's callback are happening after
+            // the paint, this leads to an infinite rendering.
+            //
+            // Using flushSync ensures that the states is updated before the next pain.
+            // Related issue - https://github.com/facebook/react/issues/24331
+            react_dom_1.default.flushSync(() => {
+                setState((prevState) => updateState(prevState, newState, renders));
             });
-        });
-    };
-    react_1.default.useEffect(() => {
-        const handleResize = (0, util_1.debounce)(() => {
+        };
+        const handleResize = () => {
             renders.current = 0;
-            if (inputRef.current) {
-                withFlushSync();
-            }
-        });
-        let resizeObserver;
+            syncHeightWithFlushSync();
+        };
+        const debounceHandleResize = (0, util_1.debounce)(handleResize);
         const input = inputRef.current;
         const containerWindow = ownerWindow(input);
-        containerWindow.addEventListener("resize", handleResize);
+        containerWindow.addEventListener("resize", debounceHandleResize);
+        let resizeObserver;
         if (typeof ResizeObserver !== "undefined") {
             resizeObserver = new ResizeObserver(handleResize);
             resizeObserver.observe(input);
         }
         return () => {
-            handleResize.clear();
-            containerWindow.removeEventListener("resize", handleResize);
+            debounceHandleResize.clear();
+            containerWindow.removeEventListener("resize", debounceHandleResize);
             if (resizeObserver) {
                 resizeObserver.disconnect();
             }
         };
-    });
+    }, [getUpdatedState]);
     (0, util_1.useClientLayoutEffect)(() => {
         syncHeight();
     });
@@ -191,7 +186,10 @@ const TextareaAutosize = (0, react_1.forwardRef)((_a, ref) => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("textarea", Object.assign({ value: value, onChange: handleChange, ref: handleRef, 
             // Apply the rows prop to get a "correct" first SSR paint
-            rows: minRows, style: Object.assign(Object.assign({ height: state.outerHeightStyle }, (state.overflow ? { overflow: "hidden" } : {})), style) }, other, { className: className })),
+            rows: minRows, style: Object.assign({ height: state.outerHeightStyle, 
+                // Need a large enough difference to allow scrolling.
+                // This prevents infinite rendering loop.
+                overflow: state.overflow && !autoScrollbar ? "hidden" : undefined }, style) }, other, { className: className })),
         react_1.default.createElement("textarea", { "aria-hidden": true, className: className, readOnly: true, ref: shadowRef, tabIndex: -1, style: Object.assign({ 
                 // Visibility needed to hide the extra text area on iPads
                 visibility: "hidden", 
@@ -206,6 +204,6 @@ function isEmpty(obj) {
     return (obj === undefined ||
         obj === null ||
         Object.keys(obj).length === 0 ||
-        ((obj === null || obj === void 0 ? void 0 : obj.outerHeightStyle) === 0 && !(obj === null || obj === void 0 ? void 0 : obj.overflow)));
+        (obj.outerHeightStyle === 0 && !obj.overflow));
 }
 exports.default = TextareaAutosize;

package/esm/form/Textarea.d.ts

@@ -36,7 +36,13 @@ export interface TextareaProps extends FormFieldProps, React.TextareaHTMLAttribu
     /**
      * Enables resizing of field
      */
-    resize?: boolean;
+    resize?: boolean | "vertical" | "horizontal";
+    /**
+     * Textarea will stop growing and get a scrollbar when there's no more room to grow.
+     * Requires `display:flex` on the parent.
+     * Experimental feature that may be removed or get breaking changes in a minor version.
+     */
+    UNSAFE_autoScrollbar?: boolean;
     /**
      * i18n-translations for counter-text
      */

package/esm/form/Textarea.js

@@ -31,7 +31,7 @@ import { useFormField } from "./useFormField";
 export const Textarea = forwardRef((props, ref) => {
     var _a, _b, _c;
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useFormField(props, "textarea");
-    const { label, className, description, maxLength, hideLabel = false, resize, i18n, readOnly } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel", "resize", "i18n", "readOnly"]);
+    const { label, className, description, maxLength, hideLabel = false, resize, UNSAFE_autoScrollbar, i18n, readOnly } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel", "resize", "UNSAFE_autoScrollbar", "i18n", "readOnly"]);
     const maxLengthId = useId();
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
     const [controlledValue, setControlledValue] = useState((_a = props === null || props === void 0 ? void 0 : props.defaultValue) !== null && _a !== void 0 ? _a : "");
@@ -50,7 +50,8 @@ export const Textarea = forwardRef((props, ref) => {
             "navds-form-field--readonly": readOnly,
             "navds-textarea--readonly": readOnly,
             "navds-textarea--error": hasError,
-            "navds-textarea--resize": resize,
+            "navds-textarea--autoscrollbar": UNSAFE_autoScrollbar,
+            [`navds-textarea--resize-${resize === true ? "both" : resize}`]: resize,
         }) },
         React.createElement(Label, { htmlFor: inputProps.id, size: size, className: cl("navds-form-field__label", {
                 "navds-sr-only": hideLabel,
@@ -63,7 +64,7 @@ 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"}`) }, (describedBy ? { "aria-describedby": describedBy } : {}))),
+                    : setControlledValue(e.target.value), minRows: getMinRows(), autoScrollbar: UNSAFE_autoScrollbar, 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 })))),

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.js

@@ -1,14 +1,30 @@
 import cl from "clsx";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { BodyShort } from "../typography";
+import debounce from "../util/debounce";
 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
+    const [debouncedDiff, setDebouncedDiff] = useState(difference);
+    useEffect(() => {
+        const debounceFunc = debounce(() => {
+            setDebouncedDiff(difference);
+        }, 2000);
+        debounceFunc();
+        return () => {
+            debounceFunc.clear();
+        };
+    }, [difference]);
+    return (React.createElement(React.Fragment, null,
+        difference < 20 && (React.createElement("span", { role: "status", className: "navds-textarea__sr-counter navds-sr-only" }, getCounterText(debouncedDiff, i18n))),
+        React.createElement(BodyShort, { className: cl("navds-textarea__counter", {
+                "navds-textarea__counter--error": difference < 0,
+            }), size: size }, getCounterText(difference, i18n))));
+};
+const getCounterText = (difference, i18n) => {
+    var _a, _b;
+    return 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"}`));
+        : `${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

@@ -1 +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"}
+{"version":3,"file":"TextareaCounter.js","sourceRoot":"","sources":["../../src/form/TextareaCounter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AAUxC,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAS,EAAE,EAAE;IAC1E,MAAM,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;IAE7C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAE/D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE;YACjC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAC/B,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,YAAY,EAAE,CAAC;QAEf,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,KAAK,EAAE,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL;QACG,UAAU,GAAG,EAAE,IAAI,CAClB,8BACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,0CAA0C,IAEnD,cAAc,CAAC,aAAa,EAAE,IAAI,CAAC,CAC/B,CACR;QAED,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;gBACvC,gCAAgC,EAAE,UAAU,GAAG,CAAC;aACjD,CAAC,EACF,IAAI,EAAE,IAAI,IAET,cAAc,CAAC,UAAU,EAAE,IAAI,CAAC,CACvB,CACX,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,IAA2B,EAAE,EAAE;;IACzE,OAAA,UAAU,GAAG,CAAC;QACZ,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,CAAA;CAAA,CAAC;AAE3D,eAAe,eAAe,CAAC"}

package/esm/util/TextareaAutoSize.d.ts

@@ -9,6 +9,10 @@ interface TextareaAutosizeProps extends Omit<React.TextareaHTMLAttributes<HTMLTe
      * @default 1
      */
     minRows?: number;
+    /**
+     * If true, textarea will never get `overflow:hidden`
+     */
+    autoScrollbar?: boolean;
 }
 declare const TextareaAutosize: React.ForwardRefExoticComponent<TextareaAutosizeProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextareaAutosize;

package/esm/util/TextareaAutoSize.js

@@ -9,53 +9,75 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js */
+/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx */
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { debounce, mergeRefs, useClientLayoutEffect } from "../util";
+const updateState = (prevState, newState, renders) => {
+    const { outerHeightStyle, overflow } = newState;
+    // Need a large enough difference to update the height.
+    // This prevents infinite rendering loop.
+    if (renders.current < 20 &&
+        ((outerHeightStyle > 0 &&
+            Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
+            prevState.overflow !== overflow)) {
+        renders.current += 1;
+        return {
+            overflow,
+            outerHeightStyle,
+        };
+    }
+    if (process.env.NODE_ENV !== "production") {
+        if (renders.current === 20) {
+            console.error([
+                "Textarea: Too many re-renders. The layout is unstable.",
+                "TextareaAutosize limits the number of renders to prevent an infinite loop.",
+            ].join("\n"));
+        }
+    }
+    return prevState;
+};
 /**
- * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument.ts
- * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow.ts
+ * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument/ownerDocument.ts
+ * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow/ownerWindow.ts
  */
 const ownerWindow = (node) => {
     const doc = (node && node.ownerDocument) || document;
     return doc.defaultView || window;
 };
-function getStyleValue(computedStyle, property) {
-    return parseInt(computedStyle[property], 10) || 0;
+function getStyleValue(value) {
+    return parseInt(value, 10) || 0;
 }
 const TextareaAutosize = forwardRef((_a, ref) => {
-    var { className, onChange, maxRows, minRows = 1, style, value } = _a, other = __rest(_a, ["className", "onChange", "maxRows", "minRows", "style", "value"]);
+    var { className, onChange, maxRows, minRows = 1, autoScrollbar, style, value } = _a, other = __rest(_a, ["className", "onChange", "maxRows", "minRows", "autoScrollbar", "style", "value"]);
     const { current: isControlled } = useRef(value != null);
     const inputRef = useRef(null);
     const handleRef = useMemo(() => mergeRefs([inputRef, ref]), [ref]);
     const shadowRef = useRef(null);
     const renders = useRef(0);
-    const [state, setState] = useState({});
+    const [state, setState] = useState({ outerHeightStyle: 0 });
     const getUpdatedState = React.useCallback(() => {
-        if (!inputRef.current || !shadowRef.current)
-            return;
         const input = inputRef.current;
         const containerWindow = ownerWindow(input);
         const computedStyle = containerWindow.getComputedStyle(input);
         // If input's width is shrunk and it's not visible, don't sync height.
         if (computedStyle.width === "0px") {
-            return;
+            return { outerHeightStyle: 0 };
         }
         const inputShallow = shadowRef.current;
         inputShallow.style.width = computedStyle.width;
-        inputShallow.value = input.value || (other === null || other === void 0 ? void 0 : other.placeholder) || "x";
+        inputShallow.value = input.value || other.placeholder || "x";
         if (inputShallow.value.slice(-1) === "\n") {
             // Certain fonts which overflow the line height will cause the textarea
             // to report a different scrollHeight depending on whether the last line
             // is empty. Make it non-empty to avoid this issue.
             inputShallow.value += " ";
         }
-        const boxSizing = computedStyle["box-sizing"];
-        const padding = getStyleValue(computedStyle, "padding-bottom") +
-            getStyleValue(computedStyle, "padding-top");
-        const border = getStyleValue(computedStyle, "border-bottom-width") +
-            getStyleValue(computedStyle, "border-top-width");
+        const boxSizing = computedStyle.boxSizing;
+        const padding = getStyleValue(computedStyle.paddingBottom) +
+            getStyleValue(computedStyle.paddingTop);
+        const border = getStyleValue(computedStyle.borderBottomWidth) +
+            getStyleValue(computedStyle.borderTopWidth);
         // The height of the inner content
         const innerHeight = inputShallow.scrollHeight - padding;
         // Measure height of a textarea with a single row
@@ -74,77 +96,50 @@ const TextareaAutosize = forwardRef((_a, ref) => {
         const outerHeightStyle = outerHeight + (boxSizing === "border-box" ? padding + border : 0);
         const overflow = Math.abs(outerHeight - innerHeight) <= 1;
         return { outerHeightStyle, overflow };
-    }, [maxRows, minRows, other === null || other === void 0 ? void 0 : other.placeholder]);
+    }, [maxRows, minRows, other.placeholder]);
     const syncHeight = React.useCallback(() => {
         const newState = getUpdatedState();
         if (isEmpty(newState)) {
             return;
         }
-        setState((prevState) => {
-            return updateState(prevState, newState);
-        });
+        setState((prevState) => updateState(prevState, newState, renders));
     }, [getUpdatedState]);
-    const updateState = (prevState, newState) => {
-        const { outerHeightStyle, overflow } = newState;
-        // Need a large enough difference to update the height.
-        // This prevents infinite rendering loop.
-        if (renders.current < 20 &&
-            ((outerHeightStyle > 0 &&
-                Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
-                prevState.overflow !== overflow)) {
-            renders.current += 1;
-            return {
-                overflow,
-                outerHeightStyle,
-            };
-        }
-        if (process.env.NODE_ENV !== "production") {
-            if (renders.current === 20) {
-                console.error([
-                    "Textarea: Too many re-renders. The layout is unstable.",
-                    "TextareaAutosize limits the number of renders to prevent an infinite loop.",
-                ].join("\n"));
+    useClientLayoutEffect(() => {
+        const syncHeightWithFlushSync = () => {
+            const newState = getUpdatedState();
+            if (isEmpty(newState)) {
+                return;
             }
-        }
-        return prevState;
-    };
-    const withFlushSync = () => {
-        const newState = getUpdatedState();
-        if (isEmpty(newState)) {
-            return;
-        }
-        // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
-        // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
-        // Related issue - https://github.com/facebook/react/issues/24331
-        ReactDOM.flushSync(() => {
-            setState((prevState) => {
-                return updateState(prevState, newState);
+            // In React 18, state updates in a ResizeObserver's callback are happening after
+            // the paint, this leads to an infinite rendering.
+            //
+            // Using flushSync ensures that the states is updated before the next pain.
+            // Related issue - https://github.com/facebook/react/issues/24331
+            ReactDOM.flushSync(() => {
+                setState((prevState) => updateState(prevState, newState, renders));
             });
-        });
-    };
-    React.useEffect(() => {
-        const handleResize = debounce(() => {
+        };
+        const handleResize = () => {
             renders.current = 0;
-            if (inputRef.current) {
-                withFlushSync();
-            }
-        });
-        let resizeObserver;
+            syncHeightWithFlushSync();
+        };
+        const debounceHandleResize = debounce(handleResize);
         const input = inputRef.current;
         const containerWindow = ownerWindow(input);
-        containerWindow.addEventListener("resize", handleResize);
+        containerWindow.addEventListener("resize", debounceHandleResize);
+        let resizeObserver;
         if (typeof ResizeObserver !== "undefined") {
             resizeObserver = new ResizeObserver(handleResize);
             resizeObserver.observe(input);
         }
         return () => {
-            handleResize.clear();
-            containerWindow.removeEventListener("resize", handleResize);
+            debounceHandleResize.clear();
+            containerWindow.removeEventListener("resize", debounceHandleResize);
             if (resizeObserver) {
                 resizeObserver.disconnect();
             }
         };
-    });
+    }, [getUpdatedState]);
     useClientLayoutEffect(() => {
         syncHeight();
     });
@@ -163,7 +158,10 @@ const TextareaAutosize = forwardRef((_a, ref) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("textarea", Object.assign({ value: value, onChange: handleChange, ref: handleRef, 
             // Apply the rows prop to get a "correct" first SSR paint
-            rows: minRows, style: Object.assign(Object.assign({ height: state.outerHeightStyle }, (state.overflow ? { overflow: "hidden" } : {})), style) }, other, { className: className })),
+            rows: minRows, style: Object.assign({ height: state.outerHeightStyle, 
+                // Need a large enough difference to allow scrolling.
+                // This prevents infinite rendering loop.
+                overflow: state.overflow && !autoScrollbar ? "hidden" : undefined }, style) }, other, { className: className })),
         React.createElement("textarea", { "aria-hidden": true, className: className, readOnly: true, ref: shadowRef, tabIndex: -1, style: Object.assign({ 
                 // Visibility needed to hide the extra text area on iPads
                 visibility: "hidden", 
@@ -178,7 +176,7 @@ function isEmpty(obj) {
     return (obj === undefined ||
         obj === null ||
         Object.keys(obj).length === 0 ||
-        ((obj === null || obj === void 0 ? void 0 : obj.outerHeightStyle) === 0 && !(obj === null || obj === void 0 ? void 0 : obj.overflow)));
+        (obj.outerHeightStyle === 0 && !obj.overflow));
 }
 export default TextareaAutosize;
 //# sourceMappingURL=TextareaAutoSize.js.map

package/esm/util/TextareaAutoSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaAutoSize.js","sourceRoot":"","sources":["../../src/util/TextareaAutoSize.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,+GAA+G;AAC/G,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErE;;;GAGG;AACH,MAAM,WAAW,GAAG,CAAC,IAAiB,EAAU,EAAE;IAChD,MAAM,GAAG,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,QAAQ,CAAC;IACrD,OAAO,GAAG,CAAC,WAAW,IAAI,MAAM,CAAC;AACnC,CAAC,CAAC;AAEF,SAAS,aAAa,CAAC,aAAa,EAAE,QAAQ;IAC5C,OAAO,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC;AACpD,CAAC;AAkBD,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EAAqE,EACrE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,OAAY,EAAP,KAAK,cAAnE,iEAAqE,CAAF;IAGnE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAC1B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAM,EAAE,CAAC,CAAC;IAE5C,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE,OAAO;QACpD,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,MAAM,eAAe,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;QAC3C,MAAM,aAAa,GAAG,eAAe,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAE9D,sEAAsE;QACtE,IAAI,aAAa,CAAC,KAAK,KAAK,KAAK,EAAE;YACjC,OAAO;SACR;QAED,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC;QACvC,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC;QAC/C,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,KAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA,IAAI,GAAG,CAAC;QAC9D,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE;YACzC,uEAAuE;YACvE,wEAAwE;YACxE,mDAAmD;YACnD,YAAY,CAAC,KAAK,IAAI,GAAG,CAAC;SAC3B;QAED,MAAM,SAAS,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;QAC9C,MAAM,OAAO,GACX,aAAa,CAAC,aAAa,EAAE,gBAAgB,CAAC;YAC9C,aAAa,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QAC9C,MAAM,MAAM,GACV,aAAa,CAAC,aAAa,EAAE,qBAAqB,CAAC;YACnD,aAAa,CAAC,aAAa,EAAE,kBAAkB,CAAC,CAAC;QAEnD,kCAAkC;QAClC,MAAM,WAAW,GAAG,YAAY,CAAC,YAAY,GAAG,OAAO,CAAC;QAExD,iDAAiD;QACjD,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;QACzB,MAAM,eAAe,GAAG,YAAY,CAAC,YAAY,GAAG,OAAO,CAAC;QAE5D,kCAAkC;QAClC,IAAI,WAAW,GAAG,WAAW,CAAC;QAE9B,IAAI,OAAO,EAAE;YACX,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,eAAe,EAAE,WAAW,CAAC,CAAC;SACxE;QACD,IAAI,OAAO,EAAE;YACX,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,eAAe,EAAE,WAAW,CAAC,CAAC;SACxE;QACD,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QAErD,uEAAuE;QACvE,MAAM,gBAAgB,GACpB,WAAW,GAAG,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACpE,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QAE1D,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,CAAC;IACxC,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAC,CAAC,CAAC;IAE3C,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,MAAM,QAAQ,GAAG,eAAe,EAAE,CAAC;QAEnC,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;YACrB,OAAO;SACR;QAED,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE;YACrB,OAAO,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,EAAE;QAC1C,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC;QAChD,uDAAuD;QACvD,yCAAyC;QACzC,IACE,OAAO,CAAC,OAAO,GAAG,EAAE;YACpB,CAAC,CAAC,gBAAgB,GAAG,CAAC;gBACpB,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,gBAAgB,IAAI,CAAC,CAAC,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;gBACnE,SAAS,CAAC,QAAQ,KAAK,QAAQ,CAAC,EAClC;YACA,OAAO,CAAC,OAAO,IAAI,CAAC,CAAC;YACrB,OAAO;gBACL,QAAQ;gBACR,gBAAgB;aACjB,CAAC;SACH;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;YACzC,IAAI,OAAO,CAAC,OAAO,KAAK,EAAE,EAAE;gBAC1B,OAAO,CAAC,KAAK,CACX;oBACE,wDAAwD;oBACxD,4EAA4E;iBAC7E,CAAC,IAAI,CAAC,IAAI,CAAC,CACb,CAAC;aACH;SACF;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,MAAM,QAAQ,GAAG,eAAe,EAAE,CAAC;QAEnC,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;YACrB,OAAO;SACR;QAED,kHAAkH;QAClH,6HAA6H;QAC7H,iEAAiE;QACjE,QAAQ,CAAC,SAAS,CAAC,GAAG,EAAE;YACtB,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE;gBACrB,OAAO,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;YAC1C,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE;YACjC,OAAO,CAAC,OAAO,GAAG,CAAC,CAAC;YAEpB,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,aAAa,EAAE,CAAC;aACjB;QACH,CAAC,CAAC,CAAC;QACH,IAAI,cAA8B,CAAC;QAEnC,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAQ,CAAC;QAChC,MAAM,eAAe,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;QAE3C,eAAe,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAEzD,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;YACzC,cAAc,GAAG,IAAI,cAAc,CAAC,YAAY,CAAC,CAAC;YAClD,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;SAC/B;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,KAAK,EAAE,CAAC;YACrB,eAAe,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAC5D,IAAI,cAAc,EAAE;gBAClB,cAAc,CAAC,UAAU,EAAE,CAAC;aAC7B;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,qBAAqB,CAAC,GAAG,EAAE;QACzB,UAAU,EAAE,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,EAAE;QAC7B,OAAO,CAAC,OAAO,GAAG,CAAC,CAAC;QAEpB,IAAI,CAAC,YAAY,EAAE;YACjB,UAAU,EAAE,CAAC;SACd;QAED,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,CAAC;IAEF,OAAO,CACL;QACE,gDACE,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,SAAS;YACd,yDAAyD;YACzD,IAAI,EAAE,OAAO,EACb,KAAK,gCACH,MAAM,EAAE,KAAK,CAAC,gBAAgB,IAG3B,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAC9C,KAAK,KAEN,KAAK,IACT,SAAS,EAAE,SAAS,IACpB;QACF,uDAEE,SAAS,EAAE,SAAS,EACpB,QAAQ,QACR,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK;gBACH,yDAAyD;gBACzD,UAAU,EAAE,QAAQ;gBACpB,+BAA+B;gBAC/B,QAAQ,EAAE,UAAU;gBACpB,6BAA6B;gBAC7B,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,EACT,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC;gBACP,oEAAoE;gBACpE,SAAS,EAAE,eAAe,IACvB,KAAK,IAEV,CACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,OAAO,CAAC,GAAQ;IACvB,OAAO,CACL,GAAG,KAAK,SAAS;QACjB,GAAG,KAAK,IAAI;QACZ,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,CAAC;QAC7B,CAAC,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,gBAAgB,MAAK,CAAC,IAAI,CAAC,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,CAAA,CAAC,CAChD,CAAC;AACJ,CAAC;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"TextareaAutoSize.js","sourceRoot":"","sources":["../../src/util/TextareaAutoSize.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.10.4",
+  "version": "5.11.0",
   "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.4",
-    "@navikt/ds-tokens": "^5.10.4",
+    "@navikt/aksel-icons": "^5.11.0",
+    "@navikt/ds-tokens": "^5.11.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/form/Textarea.tsx

@@ -45,7 +45,13 @@ export interface TextareaProps
   /**
    * Enables resizing of field
    */
-  resize?: boolean;
+  resize?: boolean | "vertical" | "horizontal";
+  /**
+   * Textarea will stop growing and get a scrollbar when there's no more room to grow.
+   * Requires `display:flex` on the parent.
+   * Experimental feature that may be removed or get breaking changes in a minor version.
+   */
+  UNSAFE_autoScrollbar?: boolean;
   /**
    * i18n-translations for counter-text
    */
@@ -86,6 +92,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       maxLength,
       hideLabel = false,
       resize,
+      UNSAFE_autoScrollbar,
       i18n,
       readOnly,
       ...rest
@@ -121,7 +128,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             "navds-form-field--readonly": readOnly,
             "navds-textarea--readonly": readOnly,
             "navds-textarea--error": hasError,
-            "navds-textarea--resize": resize,
+            "navds-textarea--autoscrollbar": UNSAFE_autoScrollbar,
+            [`navds-textarea--resize-${resize === true ? "both" : resize}`]:
+              resize,
           }
         )}
       >
@@ -157,6 +166,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                 : setControlledValue(e.target.value)
             }
             minRows={getMinRows()}
+            autoScrollbar={UNSAFE_autoScrollbar}
             ref={ref}
             readOnly={readOnly}
             className={cl(

package/src/form/TextareaCounter.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { BodyShort } from "../typography";
+import debounce from "../util/debounce";
 import type { TextareaProps } from "./Textarea";
 
 interface Props {
@@ -13,19 +14,45 @@ interface Props {
 const TextareaCounter = ({ maxLength, currentLength, size, i18n }: Props) => {
   const difference = maxLength - currentLength;
 
+  const [debouncedDiff, setDebouncedDiff] = useState(difference);
+
+  useEffect(() => {
+    const debounceFunc = debounce(() => {
+      setDebouncedDiff(difference);
+    }, 2000);
+    debounceFunc();
+
+    return () => {
+      debounceFunc.clear();
+    };
+  }, [difference]);
+
   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>
+    <>
+      {difference < 20 && (
+        <span
+          role="status"
+          className="navds-textarea__sr-counter navds-sr-only"
+        >
+          {getCounterText(debouncedDiff, i18n)}
+        </span>
+      )}
+
+      <BodyShort
+        className={cl("navds-textarea__counter", {
+          "navds-textarea__counter--error": difference < 0,
+        })}
+        size={size}
+      >
+        {getCounterText(difference, i18n)}
+      </BodyShort>
+    </>
   );
 };
 
+const getCounterText = (difference: number, i18n: TextareaProps["i18n"]) =>
+  difference < 0
+    ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
+    : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`;
+
 export default TextareaCounter;

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

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { Button } from "../../button";
 import { Textarea } from "../index";
 
 const meta: Meta<typeof Textarea> = {
@@ -16,10 +17,13 @@ export const Default: StoryObj<typeof Textarea> = {
   args: {
     maxLength: 0,
     label: "Ipsum enim quis culpa",
-    resize: false,
   },
 
   argTypes: {
+    resize: {
+      control: { type: "radio" },
+      options: [true, "vertical", "horizontal"],
+    },
     size: {
       control: { type: "radio" },
       options: ["medium", "small"],
@@ -99,7 +103,7 @@ export const HideLabel = () => {
 };
 
 export const MaxLength = () => {
-  return <Textarea maxLength={200} label="Ipsum enim quis culpa" />;
+  return <Textarea maxLength={50} label="Ipsum enim quis culpa" />;
 };
 
 export const MinRows = () => {
@@ -138,3 +142,35 @@ export const Readonly = () => {
     </div>
   );
 };
+
+export const AutoScrollbar = (props) => (
+  <div
+    style={{
+      border: "1px solid lightGreen",
+      height: "90vh",
+      display: "flex",
+      flexDirection: "column",
+    }}
+  >
+    <div style={{ border: "1px dashed gray" }}>
+      <h1>Header</h1>
+    </div>
+    <Textarea
+      resize
+      label="Textarea with autoScrollbar"
+      description="Description"
+      maxLength={30}
+      UNSAFE_autoScrollbar
+      {...props}
+    />
+    <div style={{ border: "1px dashed gray" }}>
+      <Button>Send</Button>
+    </div>
+  </div>
+);
+AutoScrollbar.argTypes = {
+  error: { type: "string" },
+  hideLabel: { type: "boolean" },
+  maxRows: { type: "number" },
+  minRows: { type: "number" },
+};

package/src/util/TextareaAutoSize.tsx

@@ -1,19 +1,57 @@
-/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js */
+/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx */
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { debounce, mergeRefs, useClientLayoutEffect } from "../util";
 
+type State = {
+  outerHeightStyle: number;
+  overflow?: boolean | undefined;
+};
+
+const updateState = (
+  prevState: State,
+  newState: State,
+  renders: React.MutableRefObject<number>
+) => {
+  const { outerHeightStyle, overflow } = newState;
+  // Need a large enough difference to update the height.
+  // This prevents infinite rendering loop.
+  if (
+    renders.current < 20 &&
+    ((outerHeightStyle > 0 &&
+      Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
+      prevState.overflow !== overflow)
+  ) {
+    renders.current += 1;
+    return {
+      overflow,
+      outerHeightStyle,
+    };
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (renders.current === 20) {
+      console.error(
+        [
+          "Textarea: Too many re-renders. The layout is unstable.",
+          "TextareaAutosize limits the number of renders to prevent an infinite loop.",
+        ].join("\n")
+      );
+    }
+  }
+  return prevState;
+};
+
 /**
- * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument.ts
- * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow.ts
+ * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument/ownerDocument.ts
+ * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow/ownerWindow.ts
  */
-const ownerWindow = (node: Node | null): Window => {
+const ownerWindow = (node: Node | undefined): Window => {
   const doc = (node && node.ownerDocument) || document;
   return doc.defaultView || window;
 };
 
-function getStyleValue(computedStyle, property) {
-  return parseInt(computedStyle[property], 10) || 0;
+function getStyleValue(value: string) {
+  return parseInt(value, 10) || 0;
 }
 
 interface TextareaAutosizeProps
@@ -30,34 +68,46 @@ interface TextareaAutosizeProps
    * @default 1
    */
   minRows?: number;
+  /**
+   * If true, textarea will never get `overflow:hidden`
+   */
+  autoScrollbar?: boolean;
 }
 
 const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
   (
-    { className, onChange, maxRows, minRows = 1, style, value, ...other },
+    {
+      className,
+      onChange,
+      maxRows,
+      minRows = 1,
+      autoScrollbar,
+      style,
+      value,
+      ...other
+    }: TextareaAutosizeProps,
     ref
   ) => {
     const { current: isControlled } = useRef(value != null);
-    const inputRef = useRef<HTMLTextAreaElement | null>(null);
+    const inputRef = useRef<HTMLTextAreaElement>(null);
     const handleRef = useMemo(() => mergeRefs([inputRef, ref]), [ref]);
-    const shadowRef = useRef<HTMLTextAreaElement | null>(null);
+    const shadowRef = useRef<HTMLTextAreaElement>(null);
     const renders = useRef(0);
-    const [state, setState] = useState<any>({});
+    const [state, setState] = useState<State>({ outerHeightStyle: 0 });
 
     const getUpdatedState = React.useCallback(() => {
-      if (!inputRef.current || !shadowRef.current) return;
-      const input = inputRef.current;
+      const input = inputRef.current!;
       const containerWindow = ownerWindow(input);
       const computedStyle = containerWindow.getComputedStyle(input);
 
       // If input's width is shrunk and it's not visible, don't sync height.
       if (computedStyle.width === "0px") {
-        return;
+        return { outerHeightStyle: 0 };
       }
 
-      const inputShallow = shadowRef.current;
+      const inputShallow = shadowRef.current!;
       inputShallow.style.width = computedStyle.width;
-      inputShallow.value = input.value || other?.placeholder || "x";
+      inputShallow.value = input.value || other.placeholder || "x";
       if (inputShallow.value.slice(-1) === "\n") {
         // Certain fonts which overflow the line height will cause the textarea
         // to report a different scrollHeight depending on whether the last line
@@ -65,13 +115,13 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
         inputShallow.value += " ";
       }
 
-      const boxSizing = computedStyle["box-sizing"];
+      const boxSizing = computedStyle.boxSizing;
       const padding =
-        getStyleValue(computedStyle, "padding-bottom") +
-        getStyleValue(computedStyle, "padding-top");
+        getStyleValue(computedStyle.paddingBottom) +
+        getStyleValue(computedStyle.paddingTop);
       const border =
-        getStyleValue(computedStyle, "border-bottom-width") +
-        getStyleValue(computedStyle, "border-top-width");
+        getStyleValue(computedStyle.borderBottomWidth) +
+        getStyleValue(computedStyle.borderTopWidth);
 
       // The height of the inner content
       const innerHeight = inputShallow.scrollHeight - padding;
@@ -97,7 +147,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
       const overflow = Math.abs(outerHeight - innerHeight) <= 1;
 
       return { outerHeightStyle, overflow };
-    }, [maxRows, minRows, other?.placeholder]);
+    }, [maxRows, minRows, other.placeholder]);
 
     const syncHeight = React.useCallback(() => {
       const newState = getUpdatedState();
@@ -106,85 +156,52 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
         return;
       }
 
-      setState((prevState) => {
-        return updateState(prevState, newState);
-      });
+      setState((prevState) => updateState(prevState, newState, renders));
     }, [getUpdatedState]);
 
-    const updateState = (prevState, newState) => {
-      const { outerHeightStyle, overflow } = newState;
-      // Need a large enough difference to update the height.
-      // This prevents infinite rendering loop.
-      if (
-        renders.current < 20 &&
-        ((outerHeightStyle > 0 &&
-          Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
-          prevState.overflow !== overflow)
-      ) {
-        renders.current += 1;
-        return {
-          overflow,
-          outerHeightStyle,
-        };
-      }
-      if (process.env.NODE_ENV !== "production") {
-        if (renders.current === 20) {
-          console.error(
-            [
-              "Textarea: Too many re-renders. The layout is unstable.",
-              "TextareaAutosize limits the number of renders to prevent an infinite loop.",
-            ].join("\n")
-          );
-        }
-      }
-      return prevState;
-    };
-
-    const withFlushSync = () => {
-      const newState = getUpdatedState();
+    useClientLayoutEffect(() => {
+      const syncHeightWithFlushSync = () => {
+        const newState = getUpdatedState();
 
-      if (isEmpty(newState)) {
-        return;
-      }
+        if (isEmpty(newState)) {
+          return;
+        }
 
-      // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
-      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
-      // Related issue - https://github.com/facebook/react/issues/24331
-      ReactDOM.flushSync(() => {
-        setState((prevState) => {
-          return updateState(prevState, newState);
+        // In React 18, state updates in a ResizeObserver's callback are happening after
+        // the paint, this leads to an infinite rendering.
+        //
+        // Using flushSync ensures that the states is updated before the next pain.
+        // Related issue - https://github.com/facebook/react/issues/24331
+        ReactDOM.flushSync(() => {
+          setState((prevState) => updateState(prevState, newState, renders));
         });
-      });
-    };
+      };
 
-    React.useEffect(() => {
-      const handleResize = debounce(() => {
+      const handleResize = () => {
         renders.current = 0;
+        syncHeightWithFlushSync();
+      };
 
-        if (inputRef.current) {
-          withFlushSync();
-        }
-      });
-      let resizeObserver: ResizeObserver;
-
+      const debounceHandleResize = debounce(handleResize);
       const input = inputRef.current!;
       const containerWindow = ownerWindow(input);
 
-      containerWindow.addEventListener("resize", handleResize);
+      containerWindow.addEventListener("resize", debounceHandleResize);
 
+      let resizeObserver: ResizeObserver;
       if (typeof ResizeObserver !== "undefined") {
         resizeObserver = new ResizeObserver(handleResize);
         resizeObserver.observe(input);
       }
 
       return () => {
-        handleResize.clear();
-        containerWindow.removeEventListener("resize", handleResize);
+        debounceHandleResize.clear();
+        containerWindow.removeEventListener("resize", debounceHandleResize);
         if (resizeObserver) {
           resizeObserver.disconnect();
         }
       };
-    });
+    }, [getUpdatedState]);
 
     useClientLayoutEffect(() => {
       syncHeight();
@@ -194,7 +211,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
       renders.current = 0;
     }, [value]);
 
-    const handleChange = (event) => {
+    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
       renders.current = 0;
 
       if (!isControlled) {
@@ -218,7 +235,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
             height: state.outerHeightStyle,
             // Need a large enough difference to allow scrolling.
             // This prevents infinite rendering loop.
-            ...(state.overflow ? { overflow: "hidden" } : {}),
+            overflow: state.overflow && !autoScrollbar ? "hidden" : undefined,
             ...style,
           }}
           {...other}
@@ -250,12 +267,12 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
   }
 );
 
-function isEmpty(obj: any) {
+function isEmpty(obj: State) {
   return (
     obj === undefined ||
     obj === null ||
     Object.keys(obj).length === 0 ||
-    (obj?.outerHeightStyle === 0 && !obj?.overflow)
+    (obj.outerHeightStyle === 0 && !obj.overflow)
   );
 }