@navikt/ds-react 4.8.0 → 4.9.1

package/_docs.json

@@ -7810,7 +7810,7 @@
         "defaultValue": {
           "value": "false"
         },
-        "description": "Disable expansio",
+        "description": "Disable expansion. shadeOnHover will not be visible.",
         "name": "expansionDisabled",
         "parent": {
           "fileName": "src/table/ExpandableRow.tsx",
@@ -7827,6 +7827,27 @@
           "name": "boolean"
         }
       },
+      "expandOnRowClick": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "Makes the whole row clickable",
+        "name": "expandOnRowClick",
+        "parent": {
+          "fileName": "src/table/ExpandableRow.tsx",
+          "name": "ExpandableRowProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/table/ExpandableRow.tsx",
+            "name": "ExpandableRowProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "colSpan": {
         "defaultValue": {
           "value": "999"
@@ -14324,7 +14345,7 @@
       },
       "onToggleSelected": {
         "defaultValue": null,
-        "description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected\n@returns",
+        "description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected - Whether the option has been selected or unselected\n@param isAddedByUser - Whether the option comes from user input, instead of from the list\n@returns",
         "name": "onToggleSelected",
         "parent": {
           "fileName": "react/src/form/combobox/types.ts",
@@ -14338,7 +14359,7 @@
         ],
         "required": false,
         "type": {
-          "name": "((option: string, isSelected: boolean) => void)"
+          "name": "((option: string, isSelected: boolean, isAddedByUser: boolean) => void)"
         }
       },
       "selectedOptions": {
@@ -14777,7 +14798,7 @@
       },
       "onToggleSelected": {
         "defaultValue": null,
-        "description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected\n@returns",
+        "description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected - Whether the option has been selected or unselected\n@param isAddedByUser - Whether the option comes from user input, instead of from the list\n@returns",
         "name": "onToggleSelected",
         "parent": {
           "fileName": "react/src/form/combobox/types.ts",
@@ -14791,7 +14812,7 @@
         ],
         "required": false,
         "type": {
-          "name": "((option: string, isSelected: boolean) => void)"
+          "name": "((option: string, isSelected: boolean, isAddedByUser: boolean) => void)"
         }
       },
       "selectedOptions": {

package/cjs/button/Button.js

@@ -76,7 +76,7 @@ exports.Button = (0, react_1.forwardRef)((_a, ref) => {
             "navds-button--disabled": disabled !== null && disabled !== void 0 ? disabled : widthOverride,
         }), style: Object.assign(Object.assign({}, style), { width: widthOverride }), disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }), widthOverride ? (react_1.default.createElement(__1.Loader, { size: size })) : (react_1.default.createElement(react_1.default.Fragment, null,
         icon && iconPosition === "left" && (react_1.default.createElement("span", { className: "navds-button__icon" }, icon)),
-        children && (react_1.default.createElement(__1.Label, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, children)),
+        children && (react_1.default.createElement(__1.Label, { as: "span", size: size === "medium" ? "medium" : "small" }, children)),
         icon && iconPosition === "right" && (react_1.default.createElement("span", { className: "navds-button__icon" }, icon))))));
 });
 exports.default = exports.Button;

package/cjs/form/combobox/ComboboxWrapper.js

@@ -30,22 +30,26 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize, toggleIsListOpen, toggleListButtonRef, }) => {
     const wrapperRef = (0, react_1.useRef)(null);
+    const [hasFocusWithin, setHasFocusWithin] = (0, react_1.useState)(false);
     function onFocusInsideWrapper(e) {
         var _a;
         if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
             (toggleListButtonRef === null || toggleListButtonRef === void 0 ? void 0 : toggleListButtonRef.current) !== e.target) {
             toggleIsListOpen(true);
+            setHasFocusWithin(true);
         }
     }
     function onBlurWrapper(e) {
         var _a;
         if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
             toggleIsListOpen(false);
+            setHasFocusWithin(false);
         }
     }
     return (react_1.default.createElement("div", { ref: wrapperRef, className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${inputSize}`, "navds-search", {
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
-        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper }, children));
+            "navds-combobox--focused": hasFocusWithin,
+        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper, tabIndex: -1 }, children));
 };
 exports.default = ComboboxWrapper;

package/cjs/form/combobox/FilteredOptions/FilteredOptions.js

@@ -11,7 +11,7 @@ const filteredOptionsContext_1 = require("./filteredOptionsContext");
 const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
 const inputContext_1 = require("../Input/inputContext");
 const FilteredOptions = () => {
-    const { inputProps: { id }, size, value, } = (0, inputContext_1.useInputContext)();
+    const { clearInput, inputProps: { id }, size, value, } = (0, inputContext_1.useInputContext)();
     const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isValueNew, toggleIsListOpen, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
     const { isMultiSelect, selectedOptions, toggleOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
     return (react_1.default.createElement("ul", { ref: filteredOptionsRef, className: (0, clsx_1.default)("navds-combobox__list", {
@@ -19,7 +19,10 @@ const FilteredOptions = () => {
         }), id: `${id}-filtered-options`, role: "listbox", tabIndex: -1 },
         isLoading && (react_1.default.createElement("li", { className: "navds-combobox__list-item--loading", role: "option", "aria-selected": false, id: `${id}-is-loading` },
             react_1.default.createElement(__1.Loader, { "aria-label": "S\u00F8ker..." }))),
-        isValueNew && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onPointerUp: (event) => toggleOption(value, event), id: `${id}-combobox-new-option`, className: (0, clsx_1.default)("navds-combobox__list-item__new-option", {
+        isValueNew && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onPointerUp: (event) => {
+                toggleOption(value, event);
+                clearInput(event);
+            }, id: `${id}-combobox-new-option`, className: (0, clsx_1.default)("navds-combobox__list-item__new-option", {
                 "navds-combobox__list-item__new-option--focus": filteredOptionsIndex === -1,
             }), role: "option", "aria-selected": false },
             react_1.default.createElement(aksel_icons_1.PlusIcon, { "aria-hidden": true }),
@@ -36,6 +39,7 @@ const FilteredOptions = () => {
                 "navds-combobox__list-item--selected": selectedOptions.includes(option),
             }), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onPointerUp: (event) => {
                 toggleOption(option, event);
+                clearInput(event);
                 if (!isMultiSelect) {
                     toggleIsListOpen(false);
                 }

package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js

@@ -40,9 +40,10 @@ const SelectedOptionsProvider = ({ children, value, }) => {
     const selectedOptions = (0, react_1.useMemo)(() => externalSelectedOptions !== null && externalSelectedOptions !== void 0 ? externalSelectedOptions : [...customOptions, ...internalSelectedOptions], [customOptions, externalSelectedOptions, internalSelectedOptions]);
     const addSelectedOption = (0, react_1.useCallback)((option) => {
         var _a;
-        if (!options
+        const isAddedByUser = !options
             .map((opt) => opt.toLowerCase())
-            .includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option))) {
+            .includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option));
+        if (isAddedByUser) {
             allowNewValues && addCustomOption(option);
         }
         else if (isMultiSelect) {
@@ -54,16 +55,17 @@ const SelectedOptionsProvider = ({ children, value, }) => {
         else {
             setSelectedOptions([option]);
         }
-        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true);
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true, isAddedByUser);
     }, [addCustomOption, allowNewValues, isMultiSelect, onToggleSelected, options]);
     const removeSelectedOption = (0, react_1.useCallback)((option) => {
-        if (customOptions.includes(option)) {
+        const isAddedByUser = customOptions.includes(option);
+        if (isAddedByUser) {
             removeCustomOption(option);
         }
         else {
             setSelectedOptions((prevSelectedOptions) => prevSelectedOptions.filter((selectedOption) => selectedOption !== option));
         }
-        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false);
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false, isAddedByUser);
     }, [customOptions, onToggleSelected, removeCustomOption]);
     const toggleOption = (0, react_1.useCallback)((option, event) => {
         if (selectedOptions.includes(option)) {

package/cjs/table/ExpandableRow.js

@@ -46,23 +46,35 @@ const DataCell_1 = __importDefault(require("./DataCell"));
 const Row_1 = __importDefault(require("./Row"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
 exports.ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange, expansionDisabled = false, colSpan = 999 } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange", "expansionDisabled", "colSpan"]);
+    var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange, expansionDisabled = false, expandOnRowClick = false, colSpan = 999 } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange", "expansionDisabled", "expandOnRowClick", "colSpan"]);
     const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
     const id = (0, __1.useId)();
     const isOpen = open !== null && open !== void 0 ? open : internalOpen;
+    const expansionHandler = (e) => {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isOpen);
+        if (open === undefined) {
+            setInternalOpen((open) => !open);
+        }
+        e.stopPropagation();
+    };
+    const onRowClick = (e) => {
+        if (e.target.nodeName === "TD" || e.target.nodeName === "TH") {
+            expansionHandler(e);
+        }
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Row_1.default, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-table__expandable-row", className, {
                 "navds-table__expandable-row--open": isOpen,
-            }) }),
+                "navds-table__expandable-row--expansion-disabled": expansionDisabled,
+            }), onClick: (e) => {
+                var _a;
+                !expansionDisabled && expandOnRowClick && onRowClick(e);
+                (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+            } }),
             togglePlacement === "right" && children,
             react_1.default.createElement(DataCell_1.default, { className: (0, clsx_1.default)("navds-table__toggle-expand-cell", {
                     "navds-table__toggle-expand-cell--open": isOpen,
-                }) }, !expansionDisabled && (react_1.default.createElement("button", { type: "button", className: "navds-table__toggle-expand-button", "aria-controls": id, "aria-expanded": isOpen, onClick: () => {
-                    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isOpen);
-                    if (open === undefined) {
-                        setInternalOpen((open) => !open);
-                    }
-                } },
+                }) }, !expansionDisabled && (react_1.default.createElement("button", { type: "button", className: "navds-table__toggle-expand-button", "aria-controls": id, "aria-expanded": isOpen, onClick: expansionHandler },
                 react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "navds-table__expandable-icon", title: isOpen ? "Vis mindre" : "Vis mer" })))),
             togglePlacement === "left" && children),
         react_1.default.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !isOpen, id: id },

package/esm/button/Button.js

@@ -47,7 +47,7 @@ export const Button = forwardRef((_a, ref) => {
             "navds-button--disabled": disabled !== null && disabled !== void 0 ? disabled : widthOverride,
         }), style: Object.assign(Object.assign({}, style), { width: widthOverride }), disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }), widthOverride ? (React.createElement(Loader, { size: size })) : (React.createElement(React.Fragment, null,
         icon && iconPosition === "left" && (React.createElement("span", { className: "navds-button__icon" }, icon)),
-        children && (React.createElement(Label, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, children)),
+        children && (React.createElement(Label, { as: "span", size: size === "medium" ? "medium" : "small" }, children)),
         icon && iconPosition === "right" && (React.createElement("span", { className: "navds-button__icon" }, icon))))));
 });
 export default Button;

package/esm/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAwB,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA8CtD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,MAAM,GACjB,UAAU,CACR,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,OAAO,GAAG,SAAS,EACnB,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,YAAY,GAAG,MAAM,OAEtB,EADI,IAAI,cAXT,0GAYC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAU,CAAC;IAE7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEpE,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,OAAO,EAAE;YACX,MAAM,SAAS,GAAG,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;;gBAClD,gBAAgB,CACd,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,qBAAqB,EAAE,0CAAE,KAAK,CACnD,CAAC;YACJ,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,EAAE;gBACV,gBAAgB,CAAC,SAAS,CAAC,CAAC;gBAC5B,oBAAoB,CAAC,SAAS,CAAC,CAAC;YAClC,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,MAAM,WAAW,GACf,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa,EAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE1D,OAAO,CACL,oBAAC,SAAS,oBACJ,WAAW,IACf,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CACX,SAAS,EACT,cAAc,EACd,iBAAiB,OAAO,EAAE,EAC1B,iBAAiB,IAAI,EAAE,EACvB;YACE,uBAAuB,EAAE,aAAa;YACtC,yBAAyB,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ;YAC9C,wBAAwB,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa;SACpD,CACF,EACD,KAAK,kCACA,KAAK,KACR,KAAK,EAAE,aAAa,KAEtB,QAAQ,EAAE,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,KAErD,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,GAAI,CACvB,CAAC,CAAC,CAAC,CACF;QACG,IAAI,IAAI,YAAY,KAAK,MAAM,IAAI,CAClC,8BAAM,SAAS,EAAC,oBAAoB,IAAE,IAAI,CAAQ,CACnD;QACA,QAAQ,IAAI,CACX,oBAAC,KAAK,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,IAC1D,QAAQ,CACH,CACT;QACA,IAAI,IAAI,YAAY,KAAK,OAAO,IAAI,CACnC,8BAAM,SAAS,EAAC,oBAAoB,IAAE,IAAI,CAAQ,CACnD,CACA,CACJ,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,MAAM,CAAC"}

package/esm/form/combobox/ComboboxWrapper.js

@@ -1,24 +1,28 @@
 import cl from "clsx";
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize, toggleIsListOpen, toggleListButtonRef, }) => {
     const wrapperRef = useRef(null);
+    const [hasFocusWithin, setHasFocusWithin] = useState(false);
     function onFocusInsideWrapper(e) {
         var _a;
         if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
             (toggleListButtonRef === null || toggleListButtonRef === void 0 ? void 0 : toggleListButtonRef.current) !== e.target) {
             toggleIsListOpen(true);
+            setHasFocusWithin(true);
         }
     }
     function onBlurWrapper(e) {
         var _a;
         if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
             toggleIsListOpen(false);
+            setHasFocusWithin(false);
         }
     }
     return (React.createElement("div", { ref: wrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${inputSize}`, "navds-search", {
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
-        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper }, children));
+            "navds-combobox--focused": hasFocusWithin,
+        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper, tabIndex: -1 }, children));
 };
 export default ComboboxWrapper;
 //# sourceMappingURL=ComboboxWrapper.js.map

package/esm/form/combobox/ComboboxWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxWrapper.js","sourceRoot":"","sources":["../../../src/form/combobox/ComboboxWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AActC,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,mBAAmB,GACE,EAAE,EAAE;IACzB,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEvD,SAAS,oBAAoB,CAAC,CAAC;;QAC7B,IACE,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;YAC9C,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,MAAK,CAAC,CAAC,MAAM,EACzC;YACA,gBAAgB,CAAC,IAAI,CAAC,CAAC;SACxB;IACH,CAAC;IAED,SAAS,aAAa,CAAC,CAAC;;QACtB,IAAI,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA,EAAE;YAClD,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACzB;IACH,CAAC;IAED,OAAO,CACL,6BACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,SAAS,EAAE,EAChC,cAAc,EACd;YACE,qBAAqB,EAAE,QAAQ;YAC/B,wBAAwB,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;SAChD,CACF,EACD,OAAO,EAAE,oBAAoB,EAC7B,MAAM,EAAE,aAAa,IAEpB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ComboboxWrapper.js","sourceRoot":"","sources":["../../../src/form/combobox/ComboboxWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAchD,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,mBAAmB,GACE,EAAE,EAAE;IACzB,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,SAAS,oBAAoB,CAAC,CAAC;;QAC7B,IACE,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;YAC9C,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,MAAK,CAAC,CAAC,MAAM,EACzC;YACA,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;IACH,CAAC;IAED,SAAS,aAAa,CAAC,CAAC;;QACtB,IAAI,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA,EAAE;YAClD,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACxB,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC1B;IACH,CAAC;IAED,OAAO,CACL,6BACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,SAAS,EAAE,EAChC,cAAc,EACd;YACE,qBAAqB,EAAE,QAAQ;YAC/B,wBAAwB,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;YAC/C,yBAAyB,EAAE,cAAc;SAC1C,CACF,EACD,OAAO,EAAE,oBAAoB,EAC7B,MAAM,EAAE,aAAa,EACrB,QAAQ,EAAE,CAAC,CAAC,IAEX,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/esm/form/combobox/FilteredOptions/FilteredOptions.js

@@ -6,7 +6,7 @@ import { useFilteredOptionsContext } from "./filteredOptionsContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { useInputContext } from "../Input/inputContext";
 const FilteredOptions = () => {
-    const { inputProps: { id }, size, value, } = useInputContext();
+    const { clearInput, inputProps: { id }, size, value, } = useInputContext();
     const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isValueNew, toggleIsListOpen, } = useFilteredOptionsContext();
     const { isMultiSelect, selectedOptions, toggleOption } = useSelectedOptionsContext();
     return (React.createElement("ul", { ref: filteredOptionsRef, className: cl("navds-combobox__list", {
@@ -14,7 +14,10 @@ const FilteredOptions = () => {
         }), id: `${id}-filtered-options`, role: "listbox", tabIndex: -1 },
         isLoading && (React.createElement("li", { className: "navds-combobox__list-item--loading", role: "option", "aria-selected": false, id: `${id}-is-loading` },
             React.createElement(Loader, { "aria-label": "S\u00F8ker..." }))),
-        isValueNew && allowNewValues && (React.createElement("li", { tabIndex: -1, onPointerUp: (event) => toggleOption(value, event), id: `${id}-combobox-new-option`, className: cl("navds-combobox__list-item__new-option", {
+        isValueNew && allowNewValues && (React.createElement("li", { tabIndex: -1, onPointerUp: (event) => {
+                toggleOption(value, event);
+                clearInput(event);
+            }, id: `${id}-combobox-new-option`, className: cl("navds-combobox__list-item__new-option", {
                 "navds-combobox__list-item__new-option--focus": filteredOptionsIndex === -1,
             }), role: "option", "aria-selected": false },
             React.createElement(PlusIcon, { "aria-hidden": true }),
@@ -31,6 +34,7 @@ const FilteredOptions = () => {
                 "navds-combobox__list-item--selected": selectedOptions.includes(option),
             }), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onPointerUp: (event) => {
                 toggleOption(option, event);
+                clearInput(event);
                 if (!isMultiSelect) {
                     toggleIsListOpen(false);
                 }

package/esm/form/combobox/FilteredOptions/FilteredOptions.js.map

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

package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js

@@ -11,9 +11,10 @@ export const SelectedOptionsProvider = ({ children, value, }) => {
     const selectedOptions = useMemo(() => externalSelectedOptions !== null && externalSelectedOptions !== void 0 ? externalSelectedOptions : [...customOptions, ...internalSelectedOptions], [customOptions, externalSelectedOptions, internalSelectedOptions]);
     const addSelectedOption = useCallback((option) => {
         var _a;
-        if (!options
+        const isAddedByUser = !options
             .map((opt) => opt.toLowerCase())
-            .includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option))) {
+            .includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option));
+        if (isAddedByUser) {
             allowNewValues && addCustomOption(option);
         }
         else if (isMultiSelect) {
@@ -25,16 +26,17 @@ export const SelectedOptionsProvider = ({ children, value, }) => {
         else {
             setSelectedOptions([option]);
         }
-        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true);
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true, isAddedByUser);
     }, [addCustomOption, allowNewValues, isMultiSelect, onToggleSelected, options]);
     const removeSelectedOption = useCallback((option) => {
-        if (customOptions.includes(option)) {
+        const isAddedByUser = customOptions.includes(option);
+        if (isAddedByUser) {
             removeCustomOption(option);
         }
         else {
             setSelectedOptions((prevSelectedOptions) => prevSelectedOptions.filter((selectedOption) => selectedOption !== option));
         }
-        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false);
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false, isAddedByUser);
     }, [customOptions, onToggleSelected, removeCustomOption]);
     const toggleOption = useCallback((option, event) => {
         if (selectedOptions.includes(option)) {

package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js.map

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

package/esm/form/combobox/types.d.ts

@@ -75,10 +75,11 @@ export interface ComboboxProps extends FormFieldProps, Omit<InputHTMLAttributes<
      * Callback function triggered whenever an option is selected or de-selected
      *
      * @param option
-     * @param isSelected
+     * @param isSelected - Whether the option has been selected or unselected
+     * @param isAddedByUser - Whether the option comes from user input, instead of from the list
      * @returns
      */
-    onToggleSelected?: (option: string, isSelected: boolean) => void;
+    onToggleSelected?: (option: string, isSelected: boolean, isAddedByUser: boolean) => void;
     /**
      * List of selected options.
      *

package/esm/table/ExpandableRow.d.ts

@@ -25,10 +25,15 @@ export interface ExpandableRowProps extends Omit<RowProps, "content"> {
      */
     onOpenChange?: (open: boolean) => void;
     /**
-     * Disable expansio
+     * Disable expansion. shadeOnHover will not be visible.
      * @default false
      */
     expansionDisabled?: boolean;
+    /**
+     * Makes the whole row clickable
+     * @default false
+     */
+    expandOnRowClick?: boolean;
     /**
      * The width of the expanded row's internal cell
      * @default 999

package/esm/table/ExpandableRow.js

@@ -17,23 +17,35 @@ import DataCell from "./DataCell";
 import Row from "./Row";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 export const ExpandableRow = forwardRef((_a, ref) => {
-    var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange, expansionDisabled = false, colSpan = 999 } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange", "expansionDisabled", "colSpan"]);
+    var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange, expansionDisabled = false, expandOnRowClick = false, colSpan = 999 } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange", "expansionDisabled", "expandOnRowClick", "colSpan"]);
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     const id = useId();
     const isOpen = open !== null && open !== void 0 ? open : internalOpen;
+    const expansionHandler = (e) => {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isOpen);
+        if (open === undefined) {
+            setInternalOpen((open) => !open);
+        }
+        e.stopPropagation();
+    };
+    const onRowClick = (e) => {
+        if (e.target.nodeName === "TD" || e.target.nodeName === "TH") {
+            expansionHandler(e);
+        }
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(Row, Object.assign({}, rest, { ref: ref, className: cl("navds-table__expandable-row", className, {
                 "navds-table__expandable-row--open": isOpen,
-            }) }),
+                "navds-table__expandable-row--expansion-disabled": expansionDisabled,
+            }), onClick: (e) => {
+                var _a;
+                !expansionDisabled && expandOnRowClick && onRowClick(e);
+                (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+            } }),
             togglePlacement === "right" && children,
             React.createElement(DataCell, { className: cl("navds-table__toggle-expand-cell", {
                     "navds-table__toggle-expand-cell--open": isOpen,
-                }) }, !expansionDisabled && (React.createElement("button", { type: "button", className: "navds-table__toggle-expand-button", "aria-controls": id, "aria-expanded": isOpen, onClick: () => {
-                    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isOpen);
-                    if (open === undefined) {
-                        setInternalOpen((open) => !open);
-                    }
-                } },
+                }) }, !expansionDisabled && (React.createElement("button", { type: "button", className: "navds-table__toggle-expand-button", "aria-controls": id, "aria-expanded": isOpen, onClick: expansionHandler },
                 React.createElement(ChevronDownIcon, { className: "navds-table__expandable-icon", title: isOpen ? "Vis mindre" : "Vis mer" })))),
             togglePlacement === "left" && children),
         React.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !isOpen, id: id },

package/esm/table/ExpandableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableRow.js","sourceRoot":"","sources":["../../src/table/ExpandableRow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAC3B,OAAO,aAAa,MAAM,uBAAuB,CAAC;AAClD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,GAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AA2CtD,MAAM,CAAC,MAAM,aAAa,GAAsB,UAAU,CACxD,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,SAAS,EACT,QAAQ,EACR,OAAO,EACP,eAAe,GAAG,MAAM,EACxB,WAAW,GAAG,KAAK,EACnB,IAAI,EACJ,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,OAAO,GAAG,GAAG,OAEd,EADI,IAAI,cAVT,8HAWC,CADQ;IAIT,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,WAAW,CAAC,CAAC;IACvE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,MAAM,MAAM,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,YAAY,CAAC;IAEpC,OAAO,CACL;QACE,oBAAC,GAAG,oBACE,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,EAAE;gBACtD,mCAAmC,EAAE,MAAM;aAC5C,CAAC;YAED,eAAe,KAAK,OAAO,IAAI,QAAQ;YACxC,oBAAC,QAAQ,IACP,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE;oBAC/C,uCAAuC,EAAE,MAAM;iBAChD,CAAC,IAED,CAAC,iBAAiB,IAAI,CACrB,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,mBAC9B,EAAE,mBACF,MAAM,EACrB,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,MAAM,CAAC,CAAC;oBACxB,IAAI,IAAI,KAAK,SAAS,EAAE;wBACtB,eAAe,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;qBAClC;gBACH,CAAC;gBAED,oBAAC,eAAe,IACd,SAAS,EAAC,8BAA8B,EACxC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,GACxC,CACK,CACV,CACQ;YACV,eAAe,KAAK,MAAM,IAAI,QAAQ,CACnC;QACN,4BAAI,SAAS,EAAC,2BAA2B,iBAAc,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;YACpE,4BAAI,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,gCAAgC;gBAC9D,oBAAC,aAAa,IACZ,SAAS,EAAC,oCAAoC,EAC9C,cAAc,EAAC,mCAAmC,EAClD,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAC3B,QAAQ,EAAE,GAAG,IAEZ,OAAO,CACM,CACb,CACF,CACJ,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ExpandableRow.js","sourceRoot":"","sources":["../../src/table/ExpandableRow.tsx"],"names":[],"mappings":"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"}

package/package.json

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

package/src/button/Button.tsx

@@ -126,11 +126,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
                 <span className="navds-button__icon">{icon}</span>
               )}
               {children && (
-                <Label
-                  as="span"
-                  size={size === "medium" ? "medium" : "small"}
-                  aria-live="polite"
-                >
+                <Label as="span" size={size === "medium" ? "medium" : "small"}>
                   {children}
                 </Label>
               )}

package/src/button/button.stories.tsx

@@ -148,8 +148,9 @@ export const Loading = {
     </div>
   ),
 
-  args: { chromatic: { disableSnapshot: true } },
-  chromatic: { disableSnapshot: true },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };
 
 export const Icon = () => (
@@ -275,6 +276,7 @@ export const LoadingWithAs = {
     </div>
   ),
 
-  args: { chromatic: { disableSnapshot: true } },
-  chromatic: { disableSnapshot: true },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };

package/src/form/combobox/ComboboxWrapper.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 
 type ComboboxWrapperProps = {
   children: any;
@@ -23,6 +23,7 @@ const ComboboxWrapper = ({
   toggleListButtonRef,
 }: ComboboxWrapperProps) => {
   const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const [hasFocusWithin, setHasFocusWithin] = useState(false);
 
   function onFocusInsideWrapper(e) {
     if (
@@ -30,12 +31,14 @@ const ComboboxWrapper = ({
       toggleListButtonRef?.current !== e.target
     ) {
       toggleIsListOpen(true);
+      setHasFocusWithin(true);
     }
   }
 
   function onBlurWrapper(e) {
     if (!wrapperRef.current?.contains(e.relatedTarget)) {
       toggleIsListOpen(false);
+      setHasFocusWithin(false);
     }
   }
 
@@ -50,10 +53,12 @@ const ComboboxWrapper = ({
         {
           "navds-search--error": hasError,
           "navds-search--disabled": !!inputProps.disabled,
+          "navds-combobox--focused": hasFocusWithin,
         }
       )}
       onFocus={onFocusInsideWrapper}
       onBlur={onBlurWrapper}
+      tabIndex={-1}
     >
       {children}
     </div>

package/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -8,6 +8,7 @@ import { useInputContext } from "../Input/inputContext";
 
 const FilteredOptions = () => {
   const {
+    clearInput,
     inputProps: { id },
     size,
     value,
@@ -48,7 +49,10 @@ const FilteredOptions = () => {
       {isValueNew && allowNewValues && (
         <li
           tabIndex={-1}
-          onPointerUp={(event) => toggleOption(value, event)}
+          onPointerUp={(event) => {
+            toggleOption(value, event);
+            clearInput(event);
+          }}
           id={`${id}-combobox-new-option`}
           className={cl("navds-combobox__list-item__new-option", {
             "navds-combobox__list-item__new-option--focus":
@@ -88,6 +92,7 @@ const FilteredOptions = () => {
           tabIndex={-1}
           onPointerUp={(event) => {
             toggleOption(option, event);
+            clearInput(event);
             if (!isMultiSelect) {
               toggleIsListOpen(false);
             }

package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -60,11 +60,10 @@ export const SelectedOptionsProvider = ({
 
   const addSelectedOption = useCallback(
     (option: string) => {
-      if (
-        !options
-          .map((opt) => opt.toLowerCase())
-          .includes(option?.toLowerCase?.())
-      ) {
+      const isAddedByUser = !options
+        .map((opt) => opt.toLowerCase())
+        .includes(option?.toLowerCase?.());
+      if (isAddedByUser) {
         allowNewValues && addCustomOption(option);
       } else if (isMultiSelect) {
         setSelectedOptions((prevSelectedOptions) => [
@@ -74,14 +73,15 @@ export const SelectedOptionsProvider = ({
       } else {
         setSelectedOptions([option]);
       }
-      onToggleSelected?.(option, true);
+      onToggleSelected?.(option, true, isAddedByUser);
     },
     [addCustomOption, allowNewValues, isMultiSelect, onToggleSelected, options]
   );
 
   const removeSelectedOption = useCallback(
     (option: string) => {
-      if (customOptions.includes(option)) {
+      const isAddedByUser = customOptions.includes(option);
+      if (isAddedByUser) {
         removeCustomOption(option);
       } else {
         setSelectedOptions((prevSelectedOptions) =>
@@ -90,7 +90,7 @@ export const SelectedOptionsProvider = ({
           )
         );
       }
-      onToggleSelected?.(option, false);
+      onToggleSelected?.(option, false, isAddedByUser);
     },
     [customOptions, onToggleSelected, removeCustomOption]
   );

package/src/form/combobox/combobox.stories.tsx

@@ -82,6 +82,7 @@ export function MultiSelect(props) {
         label="Komboboks - velg flere"
         options={props.options}
         isMultiSelect={props.isMultiSelect}
+        size={props.size}
       />
     </DemoContainer>
   );
@@ -90,6 +91,7 @@ export function MultiSelect(props) {
 MultiSelect.args = {
   options,
   isMultiSelect: true,
+  size: "medium",
 };
 
 export function MultiSelectWithAddNewOptions(props) {

package/src/form/combobox/types.ts

@@ -78,10 +78,15 @@ export interface ComboboxProps
    * Callback function triggered whenever an option is selected or de-selected
    *
    * @param option
-   * @param isSelected
+   * @param isSelected - Whether the option has been selected or unselected
+   * @param isAddedByUser - Whether the option comes from user input, instead of from the list
    * @returns
    */
-  onToggleSelected?: (option: string, isSelected: boolean) => void;
+  onToggleSelected?: (
+    option: string,
+    isSelected: boolean,
+    isAddedByUser: boolean
+  ) => void;
   /**
    * List of selected options.
    *

package/src/table/ExpandableRow.tsx

@@ -31,10 +31,15 @@ export interface ExpandableRowProps extends Omit<RowProps, "content"> {
    */
   onOpenChange?: (open: boolean) => void;
   /**
-   * Disable expansio
+   * Disable expansion. shadeOnHover will not be visible.
    * @default false
    */
   expansionDisabled?: boolean;
+  /**
+   * Makes the whole row clickable
+   * @default false
+   */
+  expandOnRowClick?: boolean;
   /**
    * The width of the expanded row's internal cell
    * @default 999
@@ -58,6 +63,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       open,
       onOpenChange,
       expansionDisabled = false,
+      expandOnRowClick = false,
       colSpan = 999,
       ...rest
     },
@@ -65,9 +71,22 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
   ) => {
     const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
     const id = useId();
-
     const isOpen = open ?? internalOpen;
 
+    const expansionHandler = (e) => {
+      onOpenChange?.(!isOpen);
+      if (open === undefined) {
+        setInternalOpen((open) => !open);
+      }
+      e.stopPropagation();
+    };
+
+    const onRowClick = (e) => {
+      if (e.target.nodeName === "TD" || e.target.nodeName === "TH") {
+        expansionHandler(e);
+      }
+    };
+
     return (
       <>
         <Row
@@ -75,7 +94,13 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
           ref={ref}
           className={cl("navds-table__expandable-row", className, {
             "navds-table__expandable-row--open": isOpen,
+            "navds-table__expandable-row--expansion-disabled":
+              expansionDisabled,
           })}
+          onClick={(e) => {
+            !expansionDisabled && expandOnRowClick && onRowClick(e);
+            rest?.onClick?.(e);
+          }}
         >
           {togglePlacement === "right" && children}
           <DataCell
@@ -89,12 +114,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
                 className="navds-table__toggle-expand-button"
                 aria-controls={id}
                 aria-expanded={isOpen}
-                onClick={() => {
-                  onOpenChange?.(!isOpen);
-                  if (open === undefined) {
-                    setInternalOpen((open) => !open);
-                  }
-                }}
+                onClick={expansionHandler}
               >
                 <ChevronDownIcon
                   className="navds-table__expandable-icon"

package/src/table/stories/table-expandable.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Table } from "..";
-import { Link } from "../..";
+import { Button, Checkbox, Link } from "../..";
 
 export default {
   title: "ds-react/Table",
@@ -37,6 +37,7 @@ export const Expandable = () => {
 };
 
 export const ExpandableSmall = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [open, setOpen] = useState(false);
   return (
     <Table size="small">
@@ -227,3 +228,63 @@ export const ExpandableOpen = () => {
     </Table>
   );
 };
+
+export const ClickableRow = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isRowOpen1, setIsRowOpen1] = useState(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isRowOpen2, setIsRowOpen2] = useState(false);
+
+    return (
+      <>
+        <Table zebraStripes>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Navn</Table.HeaderCell>
+              <Table.HeaderCell>Info</Table.HeaderCell>
+              <Table.HeaderCell aria-hidden />
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <Table.ExpandableRow
+              content={<div>placeholder row 1</div>}
+              togglePlacement="right"
+              onOpenChange={setIsRowOpen1}
+              data-testid="row1"
+              open={isRowOpen1}
+              expandOnRowClick
+            >
+              <Table.DataCell>Ola</Table.DataCell>
+              <Table.DataCell>
+                <Button
+                  size="xsmall"
+                  onClick={(e) => {
+                    alert("Mer info");
+                  }}
+                >
+                  Mer info
+                </Button>
+              </Table.DataCell>
+            </Table.ExpandableRow>
+            <Table.ExpandableRow
+              content={<div>placeholder row 2</div>}
+              togglePlacement="right"
+              onOpenChange={setIsRowOpen2}
+              data-testid="row2"
+              open={isRowOpen2}
+              expandOnRowClick
+            >
+              <Table.DataCell>Hans</Table.DataCell>
+              <Table.DataCell>
+                <Checkbox hideLabel size="small">
+                  Sett
+                </Checkbox>
+              </Table.DataCell>
+            </Table.ExpandableRow>
+          </Table.Body>
+        </Table>
+      </>
+    );
+  },
+};