@navikt/ds-react 4.5.0 → 4.6.0

package/_docs.json

@@ -1849,6 +1849,25 @@
           "name": "string"
         }
       },
+      "readOnly": {
+        "defaultValue": null,
+        "description": "Read only-state",
+        "name": "readOnly",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -2068,6 +2087,25 @@
           "name": "string"
         }
       },
+      "readOnly": {
+        "defaultValue": null,
+        "description": "Read only-state",
+        "name": "readOnly",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -2847,6 +2885,44 @@
       }
     }
   },
+  {
+    "filePath": "src/form/ReadOnlyIcon.tsx",
+    "displayName": "ReadOnlyIcon",
+    "props": {
+      "readOnly": {
+        "defaultValue": null,
+        "description": "",
+        "name": "readOnly",
+        "declarations": [
+          {
+            "fileName": "src/form/ReadOnlyIcon.tsx",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "nativeReadOnly": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "",
+        "name": "nativeReadOnly",
+        "declarations": [
+          {
+            "fileName": "src/form/ReadOnlyIcon.tsx",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/form/Select.tsx",
     "displayName": "Select",
@@ -3060,6 +3136,25 @@
           "name": "string"
         }
       },
+      "readOnly": {
+        "defaultValue": null,
+        "description": "Read only-state",
+        "name": "readOnly",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -3258,6 +3353,25 @@
           "name": "string"
         }
       },
+      "readOnly": {
+        "defaultValue": null,
+        "description": "Read only-state",
+        "name": "readOnly",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -3532,6 +3646,25 @@
           "name": "string"
         }
       },
+      "readOnly": {
+        "defaultValue": null,
+        "description": "Read only-state",
+        "name": "readOnly",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -3861,6 +3994,25 @@
           "name": "string"
         }
       },
+      "readOnly": {
+        "defaultValue": null,
+        "description": "Read only-state",
+        "name": "readOnly",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -12891,6 +13043,25 @@
           "name": "boolean"
         }
       },
+      "nativeReadOnly": {
+        "defaultValue": null,
+        "description": "",
+        "name": "nativeReadOnly",
+        "parent": {
+          "fileName": "src/form/Fieldset/Fieldset.tsx",
+          "name": "FieldsetProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/form/Fieldset/Fieldset.tsx",
+            "name": "FieldsetProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "error": {
         "defaultValue": null,
         "description": "Error message for element",
@@ -13005,6 +13176,25 @@
           "name": "string"
         }
       },
+      "readOnly": {
+        "defaultValue": null,
+        "description": "Read only-state",
+        "name": "readOnly",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -13243,6 +13433,25 @@
           "name": "string"
         }
       },
+      "readOnly": {
+        "defaultValue": null,
+        "description": "Read only-state",
+        "name": "readOnly",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -13403,6 +13612,25 @@
           "name": "boolean"
         }
       },
+      "nativeReadOnly": {
+        "defaultValue": null,
+        "description": "",
+        "name": "nativeReadOnly",
+        "parent": {
+          "fileName": "react/src/form/Fieldset/Fieldset.tsx",
+          "name": "FieldsetProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/Fieldset/Fieldset.tsx",
+            "name": "FieldsetProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "error": {
         "defaultValue": null,
         "description": "Error message for element",
@@ -13517,6 +13745,25 @@
           "name": "string"
         }
       },
+      "readOnly": {
+        "defaultValue": null,
+        "description": "Read only-state",
+        "name": "readOnly",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -14079,6 +14326,25 @@
           "name": "boolean"
         }
       },
+      "nativeReadOnly": {
+        "defaultValue": null,
+        "description": "",
+        "name": "nativeReadOnly",
+        "parent": {
+          "fileName": "react/src/form/Fieldset/Fieldset.tsx",
+          "name": "FieldsetProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/Fieldset/Fieldset.tsx",
+            "name": "FieldsetProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "error": {
         "defaultValue": null,
         "description": "Error message for element",
@@ -14193,6 +14459,25 @@
           "name": "string"
         }
       },
+      "readOnly": {
+        "defaultValue": null,
+        "description": "Read only-state",
+        "name": "readOnly",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",

package/cjs/date/DateInput.js

@@ -44,6 +44,7 @@ const react_1 = __importStar(require("react"));
 const __1 = require("..");
 const useFormField_1 = require("../form/useFormField");
 const context_1 = require("./context");
+const ReadOnlyIcon_1 = require("../form/ReadOnlyIcon");
 const DateInput = (0, react_1.forwardRef)((props, ref) => {
     const { className, hideLabel = false, label, description, variant = "datepicker" } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "variant"]);
     const isDatepickerVariant = variant === "datepicker";
@@ -55,22 +56,26 @@ const DateInput = (0, react_1.forwardRef)((props, ref) => {
         },
     };
     const { onOpen, ariaId, open } = (0, context_1.useDateInputContext)();
-    const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, } = (0, useFormField_1.useFormField)(props, conditionalVariables.prefix);
+    const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, readOnly, } = (0, useFormField_1.useFormField)(props, conditionalVariables.prefix);
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${size}`, "navds-date__field", {
             "navds-text-field--error": hasError,
             "navds-date__field--error": hasError,
             "navds-form-field--disabled": !!inputProps.disabled,
             "navds-text-field--disabled": !!inputProps.disabled,
+            "navds-text-field--readonly": readOnly,
+            "navds-date__field--readonly": readOnly,
         }) },
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
                 "navds-sr-only": hideLabel,
-            }) }, label),
+            }) },
+            react_1.default.createElement(ReadOnlyIcon_1.ReadOnlyIcon, { readOnly: readOnly }),
+            label),
         !!description && (react_1.default.createElement(__1.BodyShort, { as: "div", className: (0, clsx_1.default)("navds-form-field__description", {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-date__field-wrapper" },
-            react_1.default.createElement("input", Object.assign({ ref: ref }, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { autoComplete: "off", "aria-controls": ariaId, className: (0, clsx_1.default)("navds-date__field-input", "navds-text-field__input", "navds-body-short", `navds-body-${size}`), size: 14 })),
-            react_1.default.createElement("button", { disabled: inputProps.disabled, tabIndex: open ? -1 : 0, onClick: () => onOpen(), type: "button", className: "navds-date__field-button" },
+            react_1.default.createElement("input", Object.assign({ ref: ref }, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { autoComplete: "off", "aria-controls": ariaId, readOnly: readOnly, className: (0, clsx_1.default)("navds-date__field-input", "navds-text-field__input", "navds-body-short", `navds-body-${size}`), size: 14 })),
+            react_1.default.createElement("button", { disabled: inputProps.disabled || readOnly, tabIndex: readOnly ? -1 : open ? -1 : 0, onClick: () => onOpen(), type: "button", className: "navds-date__field-button" },
                 react_1.default.createElement(aksel_icons_1.CalendarIcon, { pointerEvents: "none", title: open
                         ? conditionalVariables.iconTitle.close
                         : conditionalVariables.iconTitle.open }))),

package/cjs/date/hooks/useDatepicker.js

@@ -71,6 +71,9 @@ const useDatepicker = (opt = {}) => {
         setInputValue(date ? (0, utils_1.formatDateForInput)(date, locale, "date", inputFormat) : "");
     };
     const handleFocus = (e) => {
+        if (e.target.readOnly) {
+            return;
+        }
         !open && openOnFocus && handleOpen(true);
         let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
         if ((0, utils_1.isValidDate)(day)) {

package/cjs/date/hooks/useMonthPicker.js

@@ -77,6 +77,9 @@ const useMonthpicker = (opt = {}) => {
     };
     const handleFocus = (e) => {
         var _a;
+        if (e.target.readOnly) {
+            return;
+        }
         !open && openOnFocus && handleOpen(true);
         let day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
         const isBefore = getIsBefore({ fromDate, date: day });

package/cjs/date/hooks/useRangeDatepicker.js

@@ -151,6 +151,9 @@ const useRangeDatepicker = (opt = {}) => {
         setValidation(initialValidation(range, opt));
     };
     const handleFocus = (e, src) => {
+        if (e.target.readOnly) {
+            return;
+        }
         !open && openOnFocus && setOpen(true);
         let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
         if ((0, utils_1.isValidDate)(day)) {

package/cjs/form/Fieldset/Fieldset.js

@@ -42,12 +42,13 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("../..");
 const useFieldset_1 = require("./useFieldset");
+const ReadOnlyIcon_1 = require("../ReadOnlyIcon");
 exports.FieldsetContext = react_1.default.createContext(null);
 exports.Fieldset = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
-    const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFieldset_1.useFieldset)(props);
+    const { inputProps, errorId, showErrorMsg, hasError, size, readOnly, inputDescriptionId, } = (0, useFieldset_1.useFieldset)(props);
     const fieldset = (0, react_1.useContext)(exports.FieldsetContext);
-    const { children, className, errorPropagation = true, legend, description, hideLegend } = props, rest = __rest(props, ["children", "className", "errorPropagation", "legend", "description", "hideLegend"]);
+    const { children, className, errorPropagation = true, legend, description, hideLegend, nativeReadOnly = true } = props, rest = __rest(props, ["children", "className", "errorPropagation", "legend", "description", "hideLegend", "nativeReadOnly"]);
     return (react_1.default.createElement(exports.FieldsetContext.Provider, { value: {
             error: errorPropagation ? (_a = props.error) !== null && _a !== void 0 ? _a : fieldset === null || fieldset === void 0 ? void 0 : fieldset.error : undefined,
             errorId: (0, clsx_1.default)({
@@ -56,11 +57,17 @@ exports.Fieldset = (0, react_1.forwardRef)((props, ref) => {
             }),
             size,
             disabled: (_c = props.disabled) !== null && _c !== void 0 ? _c : false,
+            readOnly,
         } },
-        react_1.default.createElement("fieldset", Object.assign({}, (0, __1.omit)(rest, ["errorId", "error", "size"]), inputProps, { ref: ref, className: (0, clsx_1.default)(className, "navds-fieldset", `navds-fieldset--${size}`, { "navds-fieldset--error": hasError }) }),
+        react_1.default.createElement("fieldset", Object.assign({}, (0, __1.omit)(rest, ["errorId", "error", "size", "readOnly"]), inputProps, { ref: ref, className: (0, clsx_1.default)(className, "navds-fieldset", `navds-fieldset--${size}`, {
+                "navds-fieldset--error": hasError,
+                "navds-fieldset--readonly": readOnly,
+            }) }),
             react_1.default.createElement(__1.Label, { size: size, as: "legend", className: (0, clsx_1.default)("navds-fieldset__legend", {
                     "navds-sr-only": !!hideLegend,
-                }) }, legend),
+                }) },
+                react_1.default.createElement(ReadOnlyIcon_1.ReadOnlyIcon, { readOnly: readOnly, nativeReadOnly: nativeReadOnly }),
+                legend),
             !!description && (react_1.default.createElement(__1.BodyShort, { className: (0, clsx_1.default)("navds-fieldset__description", {
                     "navds-sr-only": !!hideLegend,
                 }), id: inputDescriptionId, size: size !== null && size !== void 0 ? size : "medium", as: "div" }, props.description)),

package/cjs/form/ReadOnlyIcon.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReadOnlyIcon = void 0;
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const react_1 = __importDefault(require("react"));
+const ReadOnlyIcon = ({ readOnly, nativeReadOnly = true, }) => {
+    if (readOnly) {
+        return (react_1.default.createElement(aksel_icons_1.PadlockLockedFillIcon, Object.assign({}, (nativeReadOnly ? { "aria-hidden": true } : { title: "readonly" }), { className: "navds-form-field__readonly-icon" })));
+    }
+    return null;
+};
+exports.ReadOnlyIcon = ReadOnlyIcon;

package/cjs/form/Select.js

@@ -43,6 +43,7 @@ const react_1 = __importStar(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
 const __1 = require("..");
 const useFormField_1 = require("./useFormField");
+const ReadOnlyIcon_1 = require("./ReadOnlyIcon");
 /**
  * A component that displays a select input field.
  *
@@ -60,20 +61,39 @@ const useFormField_1 = require("./useFormField");
  * ```
  */
 exports.Select = (0, react_1.forwardRef)((props, ref) => {
-    const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textField");
+    const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, readOnly, } = (0, useFormField_1.useFormField)(props, "select");
     const { children, label, className, description, htmlSize, hideLabel = false, style } = props, rest = __rest(props, ["children", "label", "className", "description", "htmlSize", "hideLabel", "style"]);
+    const readOnlyEventHandlers = {
+        onMouseDown: (evt) => {
+            // NOTE: does not prevent click
+            if (readOnly) {
+                evt.preventDefault();
+                // focus on the element as per readonly input behavior
+                evt.target.focus();
+            }
+        },
+        onKeyDown: (evt) => {
+            if (readOnly &&
+                ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", " "].includes(evt.key)) {
+                evt.preventDefault();
+            }
+        },
+    };
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
             "navds-form-field--disabled": !!inputProps.disabled,
             "navds-select--error": hasError,
+            "navds-select--readonly": readOnly,
         }) },
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
                 "navds-sr-only": hideLabel,
-            }) }, label),
+            }) },
+            react_1.default.createElement(ReadOnlyIcon_1.ReadOnlyIcon, { readOnly: readOnly, nativeReadOnly: false }),
+            label),
         !!description && (react_1.default.createElement(__1.BodyShort, { className: (0, clsx_1.default)("navds-form-field__description", {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size, as: "div" }, description)),
         react_1.default.createElement("div", { className: "navds-select__container", style: style },
-            react_1.default.createElement("select", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: (0, clsx_1.default)("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),
+            react_1.default.createElement("select", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size", "readOnly"]), inputProps, readOnlyEventHandlers, { ref: ref, className: (0, clsx_1.default)("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),
             react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "navds-select__chevron", "aria-hidden": true })),
         react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error)))));
 });

package/cjs/form/Switch.js

@@ -42,6 +42,7 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
 const useFormField_1 = require("./useFormField");
+const ReadOnlyIcon_1 = require("./ReadOnlyIcon");
 const SelectedIcon = () => (react_1.default.createElement("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Deaktiver valg" },
     react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z", fill: "currentColor" })));
 /**
@@ -52,26 +53,36 @@ const SelectedIcon = () => (react_1.default.createElement("svg", { width: "12",
  *
  * @example
  * ```jsx
- * <Switch>Slå på notifikasjoner</Switch>
+ * <Switch>Varsle med SMS</Switch>
  * ```
  */
 exports.Switch = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
-    const { inputProps, size } = (0, useFormField_1.useFormField)(props, "switch");
+    const { inputProps, size, readOnly } = (0, useFormField_1.useFormField)(props, "switch");
     const { children, className, description, hideLabel = false, loading, checked: checkedProp, defaultChecked, position = "left" } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading", "checked", "defaultChecked", "position"]);
     const [checked, setChecked] = (0, react_1.useState)((_a = defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : checkedProp) !== null && _a !== void 0 ? _a : false);
     (0, react_1.useEffect)(() => {
         checkedProp !== undefined && setChecked(checkedProp);
     }, [checkedProp]);
-    const handleChange = (e) => {
-        setChecked(e.target.checked);
-        props.onChange && props.onChange(e);
-    };
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-switch", props.className, `navds-switch--${size}`, `navds-switch--${position}`, {
             "navds-switch--loading": loading,
             "navds-switch--disabled": (_b = inputProps.disabled) !== null && _b !== void 0 ? _b : loading,
+            "navds-switch--readonly": readOnly,
         }) },
-        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size"]), (0, __1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { disabled: (_c = inputProps.disabled) !== null && _c !== void 0 ? _c : loading, checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => handleChange(e), className: (0, clsx_1.default)(className, "navds-switch__input") })),
+        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size", "readOnly"]), (0, __1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { disabled: (_c = inputProps.disabled) !== null && _c !== void 0 ? _c : loading, checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => {
+                if (readOnly) {
+                    return;
+                }
+                setChecked(e.target.checked);
+                props.onChange && props.onChange(e);
+            }, onClick: (e) => {
+                var _a;
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }, className: (0, clsx_1.default)(className, "navds-switch__input") })),
         react_1.default.createElement("span", { className: "navds-switch__track" },
             react_1.default.createElement("span", { className: "navds-switch__thumb" }, loading ? (react_1.default.createElement(__1.Loader, { size: "xsmall", "aria-live": "polite" })) : checked ? (react_1.default.createElement(SelectedIcon, null)) : null)),
         react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
@@ -79,7 +90,9 @@ exports.Switch = (0, react_1.forwardRef)((props, ref) => {
                     "navds-sr-only": hideLabel,
                     "navds-switch--with-description": !!description && !hideLabel,
                 }) },
-                react_1.default.createElement(__1.BodyShort, { as: "div", size: size, className: "navds-switch__label" }, children),
+                react_1.default.createElement(__1.BodyShort, { as: "div", size: size, className: "navds-switch__label" },
+                    react_1.default.createElement(ReadOnlyIcon_1.ReadOnlyIcon, { readOnly: readOnly, nativeReadOnly: false }),
+                    children),
                 description && (react_1.default.createElement(__1.BodyShort, { size: size, as: "div", className: "navds-form-field__subdescription navds-switch__description" }, description))))));
 });
 exports.default = exports.Switch;

package/cjs/form/TextField.js

@@ -41,6 +41,7 @@ exports.TextField = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
+const ReadOnlyIcon_1 = require("./ReadOnlyIcon");
 const useFormField_1 = require("./useFormField");
 /**
  * A component that displays a text input field with a label.
@@ -55,19 +56,22 @@ const useFormField_1 = require("./useFormField");
  */
 exports.TextField = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textField");
-    const { label, className, description, htmlSize, hideLabel = false, type = "text" } = props, rest = __rest(props, ["label", "className", "description", "htmlSize", "hideLabel", "type"]);
+    const { label, className, description, htmlSize, hideLabel = false, type = "text", readOnly } = props, rest = __rest(props, ["label", "className", "description", "htmlSize", "hideLabel", "type", "readOnly"]);
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
             "navds-text-field--error": hasError,
             "navds-text-field--disabled": !!inputProps.disabled,
             "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-text-field--readonly": readOnly,
         }) },
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
                 "navds-sr-only": hideLabel,
-            }) }, label),
+            }) },
+            react_1.default.createElement(ReadOnlyIcon_1.ReadOnlyIcon, { readOnly: readOnly }),
+            label),
         !!description && (react_1.default.createElement(__1.BodyShort, { className: (0, clsx_1.default)("navds-form-field__description", {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size, as: "div" }, description)),
-        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, type: type, className: (0, clsx_1.default)("navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`), size: htmlSize })),
+        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, type: type, readOnly: readOnly, className: (0, clsx_1.default)("navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`), size: htmlSize })),
         react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error)))));
 });
 exports.default = exports.TextField;