@navikt/ds-react 4.4.2 → 4.6.0

package/_docs.json

@@ -480,6 +480,46 @@
           "name": "boolean"
         }
       },
+      "closeButton": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "Removes close-button(X) when false\nRequires onClose to be set",
+        "name": "closeButton",
+        "parent": {
+          "fileName": "src/alert/Alert.tsx",
+          "name": "AlertProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/alert/Alert.tsx",
+            "name": "AlertProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "onClose": {
+        "defaultValue": null,
+        "description": "Callback for alert wanting to close\nrequires closeButton to be true",
+        "name": "onClose",
+        "parent": {
+          "fileName": "src/alert/Alert.tsx",
+          "name": "AlertProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/alert/Alert.tsx",
+            "name": "AlertProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "(() => void)"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -1809,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": "",
@@ -2028,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": "",
@@ -2807,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",
@@ -3020,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": "",
@@ -3218,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": "",
@@ -3492,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": "",
@@ -3821,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": "",
@@ -12851,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",
@@ -12965,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": "",
@@ -13203,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": "",
@@ -13363,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",
@@ -13477,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": "",
@@ -14039,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",
@@ -14153,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/alert/Alert.js

@@ -42,6 +42,7 @@ const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const BodyLong_1 = require("../typography/BodyLong");
+const button_1 = require("../button");
 const Icon = (_a) => {
     var { variant } = _a, props = __rest(_a, ["variant"]);
     switch (variant) {
@@ -67,9 +68,14 @@ const Icon = (_a) => {
  * ```
  */
 exports.Alert = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, variant, size = "medium", fullWidth = false, inline = false } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "fullWidth", "inline"]);
-    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }) }),
+    var { children, className, variant, size = "medium", fullWidth = false, inline = false, closeButton = false, onClose } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "fullWidth", "inline", "closeButton", "onClose"]);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, {
+            "navds-alert--full-width": fullWidth,
+            "navds-alert--inline": inline,
+        }) }),
         react_1.default.createElement(Icon, { variant: variant, className: "navds-alert__icon" }),
-        react_1.default.createElement(BodyLong_1.BodyLong, { as: "div", size: size, className: "navds-alert__wrapper" }, children)));
+        react_1.default.createElement(BodyLong_1.BodyLong, { as: "div", size: size, className: "navds-alert__wrapper" }, children),
+        closeButton && !inline && (react_1.default.createElement("div", { className: "navds-alert__button-wrapper" },
+            react_1.default.createElement(button_1.Button, { className: "navds-alert__button", size: "small", variant: "tertiary-neutral", onClick: onClose, icon: react_1.default.createElement(aksel_icons_1.XMarkIcon, { title: "Lukk Alert" }) })))));
 });
 exports.default = exports.Alert;

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)))));
 });