npm - @navikt/ds-react - Versions diffs - 4.8.0 → 4.9.0 - Mend

@navikt/ds-react 4.8.0 → 4.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/_docs.json +22 -1
package/cjs/table/ExpandableRow.js +20 -8
package/esm/table/ExpandableRow.d.ts +6 -1
package/esm/table/ExpandableRow.js +20 -8
package/esm/table/ExpandableRow.js.map +1 -1
package/package.json +2 -2
package/src/table/ExpandableRow.tsx +28 -8
package/src/table/stories/table-expandable.stories.tsx +62 -1

package/_docs.json CHANGED Viewed

@@ -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"

package/cjs/table/ExpandableRow.js CHANGED Viewed

@@ -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/table/ExpandableRow.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "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.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/table/ExpandableRow.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>
+      </>
+    );
+  },
+};