@navikt/ds-react 0.18.0 → 0.18.1
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.
- package/cjs/table/ExpandableRow.js +9 -10
- package/esm/table/ExpandableRow.d.ts +5 -0
- package/esm/table/ExpandableRow.js +9 -10
- package/esm/table/ExpandableRow.js.map +1 -1
- package/package.json +2 -2
- package/src/table/ExpandableRow.tsx +28 -20
- package/src/table/stories/table-expandable.stories.tsx +2 -1
|
@@ -45,7 +45,7 @@ const react_collapse_1 = require("react-collapse");
|
|
|
45
45
|
const ds_icons_1 = require("@navikt/ds-icons");
|
|
46
46
|
const __1 = require("..");
|
|
47
47
|
const ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
|
|
48
|
-
var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange"]);
|
|
48
|
+
var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange, expansionDisabled = false } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange", "expansionDisabled"]);
|
|
49
49
|
const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
|
|
50
50
|
const id = `expandable-${(0, __1.useId)()}`;
|
|
51
51
|
const isOpen = open !== null && open !== void 0 ? open : internalOpen;
|
|
@@ -56,15 +56,14 @@ const ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
56
56
|
togglePlacement === "right" && children,
|
|
57
57
|
react_1.default.createElement(DataCell_1.default, { className: (0, classnames_1.default)("navds-table__toggle-expand-cell", {
|
|
58
58
|
"navds-table__toggle-expand-cell--open": isOpen,
|
|
59
|
-
}) },
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
react_1.default.createElement(ds_icons_1.ExpandFilled, { className: "navds-table__expandable-icon navds-table__expandable-icon--filled", title: isOpen ? "Vis mindre" : "Vis mer" }))),
|
|
59
|
+
}) }, !expansionDisabled && (react_1.default.createElement("button", { className: "navds-table__toggle-expand-button", "aria-controls": id, "aria-expanded": isOpen, onClick: () => {
|
|
60
|
+
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isOpen);
|
|
61
|
+
if (open === undefined) {
|
|
62
|
+
setInternalOpen((open) => !open);
|
|
63
|
+
}
|
|
64
|
+
} },
|
|
65
|
+
react_1.default.createElement(ds_icons_1.Expand, { className: "navds-table__expandable-icon", title: isOpen ? "Vis mindre" : "Vis mer" }),
|
|
66
|
+
react_1.default.createElement(ds_icons_1.ExpandFilled, { className: "navds-table__expandable-icon navds-table__expandable-icon--filled", title: isOpen ? "Vis mindre" : "Vis mer" })))),
|
|
68
67
|
togglePlacement === "left" && children),
|
|
69
68
|
react_1.default.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !isOpen, id: id },
|
|
70
69
|
react_1.default.createElement("td", { colSpan: 999, className: "navds-table__expanded-row-cell" },
|
|
@@ -24,6 +24,11 @@ interface ExpandableRowProps extends RowProps {
|
|
|
24
24
|
* Change handler for open
|
|
25
25
|
*/
|
|
26
26
|
onOpenChange?: (open: boolean) => void;
|
|
27
|
+
/**
|
|
28
|
+
* Disable expansion
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
expansionDisabled?: boolean;
|
|
27
32
|
}
|
|
28
33
|
export interface ExpandableRowType extends React.ForwardRefExoticComponent<ExpandableRowProps & React.RefAttributes<HTMLTableRowElement>> {
|
|
29
34
|
}
|
|
@@ -17,7 +17,7 @@ import { UnmountClosed } from "react-collapse";
|
|
|
17
17
|
import { Expand, ExpandFilled } from "@navikt/ds-icons";
|
|
18
18
|
import { useId } from "..";
|
|
19
19
|
const ExpandableRow = forwardRef((_a, ref) => {
|
|
20
|
-
var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange"]);
|
|
20
|
+
var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange, expansionDisabled = false } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange", "expansionDisabled"]);
|
|
21
21
|
const [internalOpen, setInternalOpen] = useState(defaultOpen);
|
|
22
22
|
const id = `expandable-${useId()}`;
|
|
23
23
|
const isOpen = open !== null && open !== void 0 ? open : internalOpen;
|
|
@@ -28,15 +28,14 @@ const ExpandableRow = forwardRef((_a, ref) => {
|
|
|
28
28
|
togglePlacement === "right" && children,
|
|
29
29
|
React.createElement(DataCell, { className: cl("navds-table__toggle-expand-cell", {
|
|
30
30
|
"navds-table__toggle-expand-cell--open": isOpen,
|
|
31
|
-
}) },
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
React.createElement(ExpandFilled, { className: "navds-table__expandable-icon navds-table__expandable-icon--filled", title: isOpen ? "Vis mindre" : "Vis mer" }))),
|
|
31
|
+
}) }, !expansionDisabled && (React.createElement("button", { className: "navds-table__toggle-expand-button", "aria-controls": id, "aria-expanded": isOpen, onClick: () => {
|
|
32
|
+
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isOpen);
|
|
33
|
+
if (open === undefined) {
|
|
34
|
+
setInternalOpen((open) => !open);
|
|
35
|
+
}
|
|
36
|
+
} },
|
|
37
|
+
React.createElement(Expand, { className: "navds-table__expandable-icon", title: isOpen ? "Vis mindre" : "Vis mer" }),
|
|
38
|
+
React.createElement(ExpandFilled, { className: "navds-table__expandable-icon navds-table__expandable-icon--filled", title: isOpen ? "Vis mindre" : "Vis mer" })))),
|
|
40
39
|
togglePlacement === "left" && children),
|
|
41
40
|
React.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !isOpen, id: id },
|
|
42
41
|
React.createElement("td", { colSpan: 999, className: "navds-table__expanded-row-cell" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableRow.js","sourceRoot":"","sources":["../../src/table/ExpandableRow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,GAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"ExpandableRow.js","sourceRoot":"","sources":["../../src/table/ExpandableRow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,GAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAsC3B,MAAM,aAAa,GAAsB,UAAU,CACjD,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,cAAc,KAAK,EAAE,EAAE,CAAC;IAEnC,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,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE;wBACL,QAAQ,EAAE,oCAAoC;wBAC9C,OAAO,EAAE,mCAAmC;qBAC7C,IAEA,OAAO,CACM,CACb,CACF,CACJ,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "NAV designsystem react components",
|
|
6
6
|
"author": "NAV Designsystem team",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"@types/react": "^17.0.30 || ^18.0.0",
|
|
70
70
|
"react": "^17.0.0 || ^18.0.0"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "56642ed7b59629d46254655d7c5453c19e76568a"
|
|
73
73
|
}
|
|
@@ -30,6 +30,11 @@ interface ExpandableRowProps extends RowProps {
|
|
|
30
30
|
* Change handler for open
|
|
31
31
|
*/
|
|
32
32
|
onOpenChange?: (open: boolean) => void;
|
|
33
|
+
/**
|
|
34
|
+
* Disable expansion
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
expansionDisabled?: boolean;
|
|
33
38
|
}
|
|
34
39
|
|
|
35
40
|
export interface ExpandableRowType
|
|
@@ -47,6 +52,7 @@ const ExpandableRow: ExpandableRowType = forwardRef(
|
|
|
47
52
|
defaultOpen = false,
|
|
48
53
|
open,
|
|
49
54
|
onOpenChange,
|
|
55
|
+
expansionDisabled = false,
|
|
50
56
|
...rest
|
|
51
57
|
},
|
|
52
58
|
ref
|
|
@@ -71,26 +77,28 @@ const ExpandableRow: ExpandableRowType = forwardRef(
|
|
|
71
77
|
"navds-table__toggle-expand-cell--open": isOpen,
|
|
72
78
|
})}
|
|
73
79
|
>
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
80
|
+
{!expansionDisabled && (
|
|
81
|
+
<button
|
|
82
|
+
className="navds-table__toggle-expand-button"
|
|
83
|
+
aria-controls={id}
|
|
84
|
+
aria-expanded={isOpen}
|
|
85
|
+
onClick={() => {
|
|
86
|
+
onOpenChange?.(!isOpen);
|
|
87
|
+
if (open === undefined) {
|
|
88
|
+
setInternalOpen((open) => !open);
|
|
89
|
+
}
|
|
90
|
+
}}
|
|
91
|
+
>
|
|
92
|
+
<Expand
|
|
93
|
+
className="navds-table__expandable-icon"
|
|
94
|
+
title={isOpen ? "Vis mindre" : "Vis mer"}
|
|
95
|
+
/>
|
|
96
|
+
<ExpandFilled
|
|
97
|
+
className="navds-table__expandable-icon navds-table__expandable-icon--filled"
|
|
98
|
+
title={isOpen ? "Vis mindre" : "Vis mer"}
|
|
99
|
+
/>
|
|
100
|
+
</button>
|
|
101
|
+
)}
|
|
94
102
|
</DataCell>
|
|
95
103
|
{togglePlacement === "left" && children}
|
|
96
104
|
</Row>
|
|
@@ -12,7 +12,7 @@ export const Expandable = () => {
|
|
|
12
12
|
|
|
13
13
|
return (
|
|
14
14
|
<>
|
|
15
|
-
<Table>
|
|
15
|
+
<Table zebraStripes>
|
|
16
16
|
<Table.Header>
|
|
17
17
|
<Table.Row>
|
|
18
18
|
{columns.map(({ key, name }) => (
|
|
@@ -24,6 +24,7 @@ export const Expandable = () => {
|
|
|
24
24
|
<Table.Body>
|
|
25
25
|
{data.map((data) => (
|
|
26
26
|
<Table.ExpandableRow
|
|
27
|
+
expansionDisabled={data.animal === "Sel"}
|
|
27
28
|
content={data.content}
|
|
28
29
|
key={data.name}
|
|
29
30
|
togglePlacement="right"
|