@navikt/ds-react 5.10.0 → 5.10.2

package/cjs/table/ExpandableRow.js

@@ -57,11 +57,7 @@ exports.ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
         }
         e.stopPropagation();
     };
-    const onRowClick = (e) => {
-        if (e.target.nodeName === "TD" || e.target.nodeName === "TH") {
-            expansionHandler(e);
-        }
-    };
+    const onRowClick = (e) => !isInteractiveTarget(e.target) && 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,
@@ -82,4 +78,13 @@ exports.ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
             react_1.default.createElement("td", { colSpan: colSpan, className: "navds-table__expanded-row-cell" },
                 react_1.default.createElement(AnimateHeight_1.default, { className: "navds-table__expanded-row-collapse", innerClassName: "navds-table__expanded-row-content", height: isOpen ? "auto" : 0, duration: 250 }, content)))));
 });
+function isInteractiveTarget(elm) {
+    if (elm.nodeName === "TD" || elm.nodeName === "TH" || !elm.parentElement) {
+        return false;
+    }
+    if (["BUTTON", "DETAILS", "LABEL", "SELECT", "TEXTAREA", "INPUT", "A"].includes(elm.nodeName)) {
+        return true;
+    }
+    return isInteractiveTarget(elm.parentElement);
+}
 exports.default = exports.ExpandableRow;

package/esm/table/ExpandableRow.js

@@ -28,11 +28,7 @@ export const ExpandableRow = forwardRef((_a, ref) => {
         }
         e.stopPropagation();
     };
-    const onRowClick = (e) => {
-        if (e.target.nodeName === "TD" || e.target.nodeName === "TH") {
-            expansionHandler(e);
-        }
-    };
+    const onRowClick = (e) => !isInteractiveTarget(e.target) && 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,
@@ -53,5 +49,14 @@ export const ExpandableRow = forwardRef((_a, ref) => {
             React.createElement("td", { colSpan: colSpan, className: "navds-table__expanded-row-cell" },
                 React.createElement(AnimateHeight, { className: "navds-table__expanded-row-collapse", innerClassName: "navds-table__expanded-row-content", height: isOpen ? "auto" : 0, duration: 250 }, content)))));
 });
+function isInteractiveTarget(elm) {
+    if (elm.nodeName === "TD" || elm.nodeName === "TH" || !elm.parentElement) {
+        return false;
+    }
+    if (["BUTTON", "DETAILS", "LABEL", "SELECT", "TEXTAREA", "INPUT", "A"].includes(elm.nodeName)) {
+        return true;
+    }
+    return isInteractiveTarget(elm.parentElement);
+}
 export default ExpandableRow;
 //# sourceMappingURL=ExpandableRow.js.map

package/esm/table/ExpandableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableRow.js","sourceRoot":"","sources":["../../src/table/ExpandableRow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,aAAa,MAAM,uBAAuB,CAAC;AAClD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,GAAiB,MAAM,OAAO,CAAC;AAgDtC,MAAM,CAAC,MAAM,aAAa,GAAsB,UAAU,CACxD,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,SAAS,EACT,QAAQ,EACR,OAAO,EACP,eAAe,GAAG,MAAM,EACxB,WAAW,GAAG,KAAK,EACnB,IAAI,EACJ,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,gBAAgB,GAAG,KAAK,EACxB,OAAO,GAAG,GAAG,OAEd,EADI,IAAI,cAXT,kJAYC,CADQ;IAIT,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,WAAW,CAAC,CAAC;IACvE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,MAAM,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,YAAY,CAAC;IAEpC,MAAM,gBAAgB,GAAG,CAAC,CAAC,EAAE,EAAE;QAC7B,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,MAAM,CAAC,CAAC;QACxB,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,eAAe,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;SACxC;QACD,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,CAAC,EAAE,EAAE;QACvB,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,KAAK,IAAI,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC5D,gBAAgB,CAAC,CAAC,CAAC,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,OAAO,CACL;QACE,oBAAC,GAAG,oBACE,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,EAAE;gBACtD,mCAAmC,EAAE,MAAM;gBAC3C,iDAAiD,EAC/C,iBAAiB;gBACnB,wCAAwC,EAAE,gBAAgB;aAC3D,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;;gBACb,CAAC,iBAAiB,IAAI,gBAAgB,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC;gBACxD,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,qDAAG,CAAC,CAAC,CAAC;YACrB,CAAC;YAEA,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,SAAS,EAAC,mCAAmC,EAC7C,IAAI,EAAC,QAAQ,mBACE,EAAE,mBACF,MAAM,EACrB,OAAO,EAAE,gBAAgB;gBAEzB,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/esm/util/OverridableComponent.d.ts

@@ -1,7 +1,24 @@
 import React from "react";
+/**
+ * This interface represents a component that can be overridden with different props and elements.
+ * @template Component The type of the props for the component.
+ * @template Element The type of the HTML element that the component renders.
+ */
 export interface OverridableComponent<Component, Element extends HTMLElement> {
+    /**
+     * This is a function type that takes props and returns a React functional component.
+     * @param props The props for the component, which are a combination of the Component type and React.RefAttributes for the Element type.
+     * @returns A React functional component.
+     */
     (props: Component & React.RefAttributes<Element>): ReturnType<React.FC>;
+    /**
+     * This is a function type that takes props and returns a React functional component.
+     * It allows for the 'as' prop to override the type of element that the component renders.
+     * @template As The type of the element that the component should render as.
+     * @param props The props for the component, which are a combination of the Component type, the 'as' prop, and any other props that are not part of the Component type or the 'as' prop.
+     * @returns A React functional component.
+     */
     <As extends React.ElementType>(props: {
-        as: As;
+        as?: As;
     } & Component & Omit<React.ComponentPropsWithRef<As>, keyof Component | "as">): ReturnType<React.FC>;
 }

package/package.json

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

package/src/layout/bleed/Bleed.stories.tsx

@@ -1,8 +1,8 @@
-import React from "react";
 import type { Meta } from "@storybook/react";
+import React from "react";
+import { Box, HStack, VStack } from "../..";
 import { BodyLong } from "../../typography";
 import { Bleed } from "./Bleed";
-import { Box, HStack, VStack } from "../..";
 
 export default {
   title: "ds-react/Primitives/Bleed",

package/src/table/ExpandableRow.tsx

@@ -81,11 +81,8 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       e.stopPropagation();
     };
 
-    const onRowClick = (e) => {
-      if (e.target.nodeName === "TD" || e.target.nodeName === "TH") {
-        expansionHandler(e);
-      }
-    };
+    const onRowClick = (e) =>
+      !isInteractiveTarget(e.target) && expansionHandler(e);
 
     return (
       <>
@@ -143,4 +140,19 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
   }
 );
 
+function isInteractiveTarget(elm: HTMLElement) {
+  if (elm.nodeName === "TD" || elm.nodeName === "TH" || !elm.parentElement) {
+    return false;
+  }
+  if (
+    ["BUTTON", "DETAILS", "LABEL", "SELECT", "TEXTAREA", "INPUT", "A"].includes(
+      elm.nodeName
+    )
+  ) {
+    return true;
+  }
+
+  return isInteractiveTarget(elm.parentElement);
+}
+
 export default ExpandableRow;

package/src/table/stories/tests/table.stories.tsx

@@ -0,0 +1,100 @@
+import { expect, jest } from "@storybook/jest";
+import { userEvent, within } from "@storybook/testing-library";
+import React from "react";
+import { Table } from "../..";
+
+export default {
+  title: "ds-react/Table/Tests",
+  component: Table,
+};
+
+export const ClickableRowTest = {
+  render: ({ onOpenChange }) => {
+    return (
+      <>
+        <Table zebraStripes>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell aria-hidden />
+              <Table.HeaderCell aria-hidden />
+              <Table.HeaderCell aria-hidden />
+              <Table.HeaderCell aria-hidden />
+              <Table.HeaderCell aria-hidden />
+              <Table.HeaderCell aria-hidden />
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <Table.ExpandableRow
+              content={<div>placeholder row 2</div>}
+              togglePlacement="right"
+              data-testid="row1"
+              expandOnRowClick
+              onOpenChange={onOpenChange}
+            >
+              <Table.DataCell>
+                <div data-testid="cell1">Should be clickable</div>
+              </Table.DataCell>
+              <Table.DataCell data-testid="cell2">
+                Should also be clickable
+              </Table.DataCell>
+
+              <Table.DataCell>
+                <button data-testid="cell3">Should not be clickable</button>
+              </Table.DataCell>
+              <Table.DataCell>
+                <div>
+                  <div>
+                    <button data-testid="cell4">
+                      Nested should not be clickable
+                    </button>
+                  </div>
+                </div>
+              </Table.DataCell>
+              <Table.DataCell>
+                <div>
+                  <div>
+                    <button data-testid="cell4">
+                      <span>2x nested should not be clickable</span>
+                    </button>
+                  </div>
+                </div>
+              </Table.DataCell>
+            </Table.ExpandableRow>
+          </Table.Body>
+        </Table>
+      </>
+    );
+  },
+  args: {
+    onOpenChange: jest.fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    args.onOpenChange.mockClear();
+    const canvas = within(canvasElement);
+
+    const cell1 = canvas.getByText("Should be clickable");
+    const cell2 = canvas.getByText("Should also be clickable");
+    const cell3 = canvas.getByText("Should not be clickable");
+    const cell4 = canvas.getByText("Nested should not be clickable");
+    const cell5 = canvas.getByText("2x nested should not be clickable");
+
+    await userEvent.click(cell1);
+    expect(args.onOpenChange.mock.calls).toHaveLength(1);
+    await userEvent.click(cell1);
+    expect(args.onOpenChange.mock.calls).toHaveLength(2);
+
+    await userEvent.click(cell2);
+    expect(args.onOpenChange.mock.calls).toHaveLength(3);
+    await userEvent.click(cell2);
+    expect(args.onOpenChange.mock.calls).toHaveLength(4);
+
+    await userEvent.click(cell3);
+    expect(args.onOpenChange.mock.calls).toHaveLength(4);
+
+    await userEvent.click(cell4);
+    expect(args.onOpenChange.mock.calls).toHaveLength(4);
+
+    await userEvent.click(cell5);
+    expect(args.onOpenChange.mock.calls).toHaveLength(4);
+  },
+};

package/src/util/OverridableComponent.ts

@@ -1,11 +1,28 @@
 import React from "react";
 
+/**
+ * This interface represents a component that can be overridden with different props and elements.
+ * @template Component The type of the props for the component.
+ * @template Element The type of the HTML element that the component renders.
+ */
 export interface OverridableComponent<Component, Element extends HTMLElement> {
+  /**
+   * This is a function type that takes props and returns a React functional component.
+   * @param props The props for the component, which are a combination of the Component type and React.RefAttributes for the Element type.
+   * @returns A React functional component.
+   */
   (props: Component & React.RefAttributes<Element>): ReturnType<React.FC>;
 
+  /**
+   * This is a function type that takes props and returns a React functional component.
+   * It allows for the 'as' prop to override the type of element that the component renders.
+   * @template As The type of the element that the component should render as.
+   * @param props The props for the component, which are a combination of the Component type, the 'as' prop, and any other props that are not part of the Component type or the 'as' prop.
+   * @returns A React functional component.
+   */
   <As extends React.ElementType>(
     props: {
-      as: As;
+      as?: As;
     } & Component &
       Omit<React.ComponentPropsWithRef<As>, keyof Component | "as">
   ): ReturnType<React.FC>;