@navikt/ds-react 4.7.4 → 4.9.0

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"
@@ -16428,6 +16449,373 @@
       }
     }
   },
+  {
+    "filePath": "src/layout/stack/HStack.tsx",
+    "displayName": "HStack",
+    "props": {
+      "justify": {
+        "defaultValue": null,
+        "description": "Justify-content",
+        "name": "justify",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\""
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Align-items",
+        "name": "align",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\""
+        }
+      },
+      "wrap": {
+        "defaultValue": null,
+        "description": "flex-wrap",
+        "name": "wrap",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "gap": {
+        "defaultValue": null,
+        "description": "@example gap='4'\ngap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}",
+        "name": "gap",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ResponsiveProp<SpacingScale>"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).\n@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom",
+        "name": "ref",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      }
+    }
+  },
+  {
+    "filePath": "src/layout/stack/Spacer.tsx",
+    "displayName": "Spacer",
+    "props": {}
+  },
+  {
+    "filePath": "src/layout/stack/Stack.tsx",
+    "displayName": "Stack",
+    "props": {
+      "justify": {
+        "defaultValue": null,
+        "description": "Justify-content",
+        "name": "justify",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\""
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Align-items",
+        "name": "align",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\""
+        }
+      },
+      "wrap": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "flex-wrap",
+        "name": "wrap",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "gap": {
+        "defaultValue": null,
+        "description": "@example gap='4'\ngap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}",
+        "name": "gap",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ResponsiveProp<SpacingScale>"
+        }
+      },
+      "direction": {
+        "defaultValue": null,
+        "description": "",
+        "name": "direction",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "\"row\" | \"column\""
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).\n@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom",
+        "name": "ref",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      }
+    }
+  },
+  {
+    "filePath": "src/layout/stack/VStack.tsx",
+    "displayName": "VStack",
+    "props": {
+      "justify": {
+        "defaultValue": null,
+        "description": "Justify-content",
+        "name": "justify",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\""
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Align-items",
+        "name": "align",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\""
+        }
+      },
+      "gap": {
+        "defaultValue": null,
+        "description": "@example gap='4'\ngap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}",
+        "name": "gap",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ResponsiveProp<SpacingScale>"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).\n@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom",
+        "name": "ref",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/timeline/period/NonClickablePeriod.tsx",
     "displayName": "NonClickablePeriod",

package/cjs/index.js

@@ -48,3 +48,4 @@ __exportStar(require("./toggle-group"), exports);
 __exportStar(require("./tooltip"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./util"), exports);
+__exportStar(require("./layout/stack"), exports);

package/cjs/layout/stack/HStack.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HStack = void 0;
+const react_1 = __importStar(require("react"));
+const Stack_1 = require("./Stack");
+/**
+ * Layout-primitive for horizontal flexbox
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see 🏷️ {@link HStackProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <HStack gap="8">
+ *  <MyComponent />
+ *  <MyComponent />
+ * </HStack>
+ *
+ * @example
+ * // Responsive gap
+ * <HStack gap={{xs: "2", md: "6"}}>
+ *  <MyComponent />
+ *  <MyComponent />
+ * </HStack>
+ */
+exports.HStack = (0, react_1.forwardRef)((props, ref) => {
+    return react_1.default.createElement(Stack_1.Stack, Object.assign({}, props, { ref: ref, direction: "row" }));
+});

package/cjs/layout/stack/Spacer.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacer = void 0;
+const react_1 = __importDefault(require("react"));
+/**
+ * Layout-primitive for auto-spacing between elements
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ *
+ * @example
+ * <HStack gap="8">
+ *  <MyComponent />
+ *  <Spacer />
+ *  <MyComponent />
+ * </HStack>
+ */
+const Spacer = () => react_1.default.createElement("div", { className: "navds-stack__spacer" });
+exports.Spacer = Spacer;

package/cjs/layout/stack/Stack.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stack = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const css_1 = require("../utilities/css");
+exports.Stack = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "div", className, align, justify, wrap = true, gap, style: _style, direction } = _a, rest = __rest(_a, ["as", "className", "align", "justify", "wrap", "gap", "style", "direction"]);
+    const style = Object.assign(Object.assign({ "--ac-stack-direction": direction, "--ac-stack-align": align, "--ac-stack-justify": justify, "--ac-stack-wrap": wrap ? "wrap" : "nowrap" }, (0, css_1.getResponsiveProps)(`stack`, "gap", "spacing", gap)), _style);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, style: style, className: (0, clsx_1.default)("navds-stack", className, {
+            "navds-vstack": direction === "column",
+            "navds-hstack": direction === "row",
+        }) })));
+});

package/cjs/layout/stack/VStack.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VStack = void 0;
+const react_1 = __importStar(require("react"));
+const Stack_1 = require("./Stack");
+/**
+ * Layout-primitive for vetical flexbox
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see 🏷️ {@link VStackProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <VStack gap="8">
+ *  <MyComponent />
+ *  <MyComponent />
+ * </VStack>
+ *
+ * @example
+ * // Responsive gap
+ * <VStack gap={{xs: "2", md: "6"}}>
+ *  <MyComponent />
+ *  <MyComponent />
+ * </VStack>
+ */
+exports.VStack = (0, react_1.forwardRef)((props, ref) => {
+    return react_1.default.createElement(Stack_1.Stack, Object.assign({}, props, { ref: ref, direction: "column", wrap: false }));
+});

package/cjs/layout/stack/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacer = exports.VStack = exports.HStack = void 0;
+var HStack_1 = require("./HStack");
+Object.defineProperty(exports, "HStack", { enumerable: true, get: function () { return HStack_1.HStack; } });
+var VStack_1 = require("./VStack");
+Object.defineProperty(exports, "VStack", { enumerable: true, get: function () { return VStack_1.VStack; } });
+var Spacer_1 = require("./Spacer");
+Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return Spacer_1.Spacer; } });

package/cjs/layout/stack/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../../esm/layout/stack/index.js",
+  "types": "../../../esm/layout/stack/index.d.ts"
+}

package/cjs/layout/utilities/css.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getResponsiveProps = void 0;
+function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp) {
+    if (!responsiveProp)
+        return {};
+    if (typeof responsiveProp === "string") {
+        return {
+            [`--ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
+        };
+    }
+    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
+        `--ac-${componentName}-${componentProp}-${breakpointAlias}`,
+        `var(--a-${tokenSubgroup}-${aliasOrScale})`,
+    ]));
+}
+exports.getResponsiveProps = getResponsiveProps;

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 },