@navikt/ds-react 1.3.1 → 1.3.3

package/_docs.json

@@ -5061,6 +5061,27 @@
           "name": "boolean"
         }
       },
+      "colSpan": {
+        "defaultValue": {
+          "value": "999"
+        },
+        "description": "The width of the expanded row's internal cell",
+        "name": "colSpan",
+        "parent": {
+          "fileName": "src/table/ExpandableRow.tsx",
+          "name": "ExpandableRowProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/table/ExpandableRow.tsx",
+            "name": "ExpandableRowProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
       "selected": {
         "defaultValue": {
           "value": "false"
@@ -5082,6 +5103,27 @@
           "name": "boolean"
         }
       },
+      "shadeOnHover": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Shade the table row on hover.",
+        "name": "shadeOnHover",
+        "parent": {
+          "fileName": "react/src/table/Row.tsx",
+          "name": "RowProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/table/Row.tsx",
+            "name": "RowProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -5275,6 +5317,27 @@
           "name": "boolean"
         }
       },
+      "shadeOnHover": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Shade the table row on hover.",
+        "name": "shadeOnHover",
+        "parent": {
+          "fileName": "src/table/Row.tsx",
+          "name": "RowProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/table/Row.tsx",
+            "name": "RowProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",

package/cjs/table/ExpandableRow.js

@@ -46,7 +46,7 @@ const AnimateHeight_1 = __importDefault(require("../util/AnimateHeight"));
 const DataCell_1 = __importDefault(require("./DataCell"));
 const Row_1 = __importDefault(require("./Row"));
 exports.ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange, expansionDisabled = false } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange", "expansionDisabled"]);
+    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"]);
     const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
     const id = (0, __1.useId)();
     const isOpen = open !== null && open !== void 0 ? open : internalOpen;
@@ -67,7 +67,7 @@ exports.ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
                 react_1.default.createElement(ds_icons_1.ExpandFilled, { className: "navds-table__expandable-icon navds-table__expandable-icon--filled", title: isOpen ? "Vis mindre" : "Vis mer" })))),
             togglePlacement === "left" && children),
         react_1.default.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !isOpen, id: id },
-            react_1.default.createElement("td", { colSpan: 999, className: "navds-table__expanded-row-cell" },
+            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)))));
 });
 exports.default = exports.ExpandableRow;

package/cjs/table/Row.js

@@ -41,9 +41,10 @@ exports.Row = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 exports.Row = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, selected = false } = _a, rest = __rest(_a, ["className", "selected"]);
+    var { className, selected = false, shadeOnHover = true } = _a, rest = __rest(_a, ["className", "selected", "shadeOnHover"]);
     return (react_1.default.createElement("tr", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-table__row", className, {
             "navds-table__row--selected": selected,
+            "navds-table__row--shade-on-hover": shadeOnHover,
         }) })));
 });
 exports.default = exports.Row;

package/esm/table/ExpandableRow.d.ts

@@ -29,6 +29,11 @@ export interface ExpandableRowProps extends RowProps {
      * @default false
      */
     expansionDisabled?: boolean;
+    /**
+     * The width of the expanded row's internal cell
+     * @default 999
+     */
+    colSpan?: number;
 }
 export interface ExpandableRowType extends React.ForwardRefExoticComponent<ExpandableRowProps & React.RefAttributes<HTMLTableRowElement>> {
 }

package/esm/table/ExpandableRow.js

@@ -17,7 +17,7 @@ import AnimateHeight from "../util/AnimateHeight";
 import DataCell from "./DataCell";
 import Row from "./Row";
 export const ExpandableRow = forwardRef((_a, ref) => {
-    var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange, expansionDisabled = false } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange", "expansionDisabled"]);
+    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"]);
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     const id = useId();
     const isOpen = open !== null && open !== void 0 ? open : internalOpen;
@@ -38,7 +38,7 @@ export const ExpandableRow = forwardRef((_a, ref) => {
                 React.createElement(ExpandFilled, { className: "navds-table__expandable-icon navds-table__expandable-icon--filled", title: isOpen ? "Vis mindre" : "Vis mer" })))),
             togglePlacement === "left" && children),
         React.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !isOpen, id: id },
-            React.createElement("td", { colSpan: 999, className: "navds-table__expanded-row-cell" },
+            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)))));
 });
 export default ExpandableRow;

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,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,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;AAsCtC,MAAM,CAAC,MAAM,aAAa,GAAsB,UAAU,CACxD,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,SAAS,EACT,QAAQ,EACR,OAAO,EACP,eAAe,GAAG,MAAM,EACxB,WAAW,GAAG,KAAK,EACnB,IAAI,EACJ,YAAY,EACZ,iBAAiB,GAAG,KAAK,OAE1B,EADI,IAAI,cATT,mHAUC,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,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,MAAM,IACL,SAAS,EAAC,8BAA8B,EACxC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,GACxC;gBACF,oBAAC,YAAY,IACX,SAAS,EAAC,mEAAmE,EAC7E,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,GAAG,EAAE,SAAS,EAAC,gCAAgC;gBAC1D,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":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,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;AA2CtC,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,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,MAAM,IACL,SAAS,EAAC,8BAA8B,EACxC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,GACxC;gBACF,oBAAC,YAAY,IACX,SAAS,EAAC,mEAAmE,EAC7E,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"}

package/esm/table/Row.d.ts

@@ -5,6 +5,11 @@ export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
      * @default false
      */
     selected?: boolean;
+    /**
+     * Shade the table row on hover.
+     * @default true
+     */
+    shadeOnHover?: boolean;
 }
 export interface RowType extends React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLTableRowElement>> {
 }

package/esm/table/Row.js

@@ -12,9 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from "react";
 import cl from "clsx";
 export const Row = forwardRef((_a, ref) => {
-    var { className, selected = false } = _a, rest = __rest(_a, ["className", "selected"]);
+    var { className, selected = false, shadeOnHover = true } = _a, rest = __rest(_a, ["className", "selected", "shadeOnHover"]);
     return (React.createElement("tr", Object.assign({}, rest, { ref: ref, className: cl("navds-table__row", className, {
             "navds-table__row--selected": selected,
+            "navds-table__row--shade-on-hover": shadeOnHover,
         }) })));
 });
 export default Row;

package/esm/table/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/table/Row.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAetB,MAAM,CAAC,MAAM,GAAG,GAAY,UAAU,CACpC,CAAC,EAAwC,EAAE,GAAG,EAAE,EAAE;QAAjD,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,OAAW,EAAN,IAAI,cAAtC,yBAAwC,CAAF;IAAY,OAAA,CACjD,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;YAC3C,4BAA4B,EAAE,QAAQ;SACvC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/table/Row.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAoBtB,MAAM,CAAC,MAAM,GAAG,GAAY,UAAU,CACpC,CAAC,EAA6D,EAAE,GAAG,EAAE,EAAE;QAAtE,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,YAAY,GAAG,IAAI,OAAW,EAAN,IAAI,cAA3D,yCAA6D,CAAF;IAAY,OAAA,CACtE,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;YAC3C,4BAA4B,EAAE,QAAQ;YACtC,kCAAkC,EAAE,YAAY;SACjD,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom-interactions": "0.9.2",
-    "@navikt/ds-icons": "^1.3.1",
+    "@navikt/ds-icons": "^1.3.3",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.1.1",
@@ -74,5 +74,5 @@
       "optional": true
     }
   },
-  "gitHead": "6f3aa4690f40c80f49551bd91a0d908c9815476c"
+  "gitHead": "85518226c65170c4692b484118dcba8d2135944e"
 }

package/src/table/ExpandableRow.tsx

@@ -35,6 +35,11 @@ export interface ExpandableRowProps extends RowProps {
    * @default false
    */
   expansionDisabled?: boolean;
+  /**
+   * The width of the expanded row's internal cell
+   * @default 999
+   */
+  colSpan?: number;
 }
 
 export interface ExpandableRowType
@@ -53,6 +58,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       open,
       onOpenChange,
       expansionDisabled = false,
+      colSpan = 999,
       ...rest
     },
     ref
@@ -103,7 +109,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
           {togglePlacement === "left" && children}
         </Row>
         <tr className="navds-table__expanded-row" aria-hidden={!isOpen} id={id}>
-          <td colSpan={999} className="navds-table__expanded-row-cell">
+          <td colSpan={colSpan} className="navds-table__expanded-row-cell">
             <AnimateHeight
               className="navds-table__expanded-row-collapse"
               innerClassName="navds-table__expanded-row-content"

package/src/table/Row.tsx

@@ -7,6 +7,11 @@ export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
    * @default false
    */
   selected?: boolean;
+  /**
+   * Shade the table row on hover.
+   * @default true
+   */
+  shadeOnHover?: boolean;
 }
 
 export interface RowType
@@ -15,12 +20,13 @@ export interface RowType
   > {}
 
 export const Row: RowType = forwardRef(
-  ({ className, selected = false, ...rest }, ref) => (
+  ({ className, selected = false, shadeOnHover = true, ...rest }, ref) => (
     <tr
       {...rest}
       ref={ref}
       className={cl("navds-table__row", className, {
         "navds-table__row--selected": selected,
+        "navds-table__row--shade-on-hover": shadeOnHover,
       })}
     />
   )

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

@@ -19,7 +19,7 @@ const TableComponent = (props) => (
       </Table.Row>
     </Table.Header>
     <Table.Body>
-      <Table.Row>
+      <Table.Row shadeOnHover={props.shadeOnHover}>
         {props.button && (
           <Table.DataCell
             style={{
@@ -35,7 +35,7 @@ const TableComponent = (props) => (
         <Table.DataCell>Picard</Table.DataCell>
         <Table.DataCell>Kaptein</Table.DataCell>
       </Table.Row>
-      <Table.Row>
+      <Table.Row shadeOnHover={props.shadeOnHover}>
         {props.button && (
           <Table.DataCell
             style={{
@@ -51,7 +51,7 @@ const TableComponent = (props) => (
         <Table.DataCell>Riker</Table.DataCell>
         <Table.DataCell>Kommandør</Table.DataCell>
       </Table.Row>
-      <Table.Row>
+      <Table.Row shadeOnHover={props.shadeOnHover}>
         {props.button && (
           <Table.DataCell
             style={{
@@ -73,6 +73,10 @@ const TableComponent = (props) => (
 
 export const Default = () => <TableComponent />;
 export const Zebra = () => <TableComponent zebraStripes />;
+export const NoShadeOnHover = () => <TableComponent shadeOnHover={false} />;
+export const ZebraNoShadeOnHover = () => (
+  <TableComponent zebraStripes shadeOnHover={false} />
+);
 export const Small = () => <TableComponent size="small" />;
 export const Buttons = () => <TableComponent size="small" button />;