@navikt/ds-react 2.4.0 → 2.4.2
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/_docs.json +24 -1
- package/cjs/date/datepicker/DatePickerStandalone.js +2 -2
- package/cjs/list/List.js +5 -1
- package/cjs/list/ListItem.js +21 -10
- package/esm/date/datepicker/DatePickerStandalone.d.ts +5 -0
- package/esm/date/datepicker/DatePickerStandalone.js +2 -2
- package/esm/date/datepicker/DatePickerStandalone.js.map +1 -1
- package/esm/list/List.d.ts +2 -1
- package/esm/list/List.js +7 -3
- package/esm/list/List.js.map +1 -1
- package/esm/list/ListItem.d.ts +4 -0
- package/esm/list/ListItem.js +21 -10
- package/esm/list/ListItem.js.map +1 -1
- package/esm/util/AnimateHeight.d.ts +6 -0
- package/esm/util/AnimateHeight.js.map +1 -1
- package/package.json +2 -2
- package/src/date/datepicker/DatePickerStandalone.tsx +7 -1
- package/src/list/List.tsx +16 -4
- package/src/list/ListItem.tsx +63 -37
- package/src/list/list.stories.tsx +29 -0
- package/src/util/AnimateHeight.tsx +6 -0
package/_docs.json
CHANGED
|
@@ -8255,7 +8255,9 @@
|
|
|
8255
8255
|
"displayName": "AnimateHeight",
|
|
8256
8256
|
"props": {
|
|
8257
8257
|
"duration": {
|
|
8258
|
-
"defaultValue":
|
|
8258
|
+
"defaultValue": {
|
|
8259
|
+
"value": "250ms"
|
|
8260
|
+
},
|
|
8259
8261
|
"description": "",
|
|
8260
8262
|
"name": "duration",
|
|
8261
8263
|
"parent": {
|
|
@@ -8877,6 +8879,27 @@
|
|
|
8877
8879
|
"name": "string"
|
|
8878
8880
|
}
|
|
8879
8881
|
},
|
|
8882
|
+
"fixedWeeks": {
|
|
8883
|
+
"defaultValue": {
|
|
8884
|
+
"value": "true"
|
|
8885
|
+
},
|
|
8886
|
+
"description": "If datepicker should be fixed to 6 weeks, regardless of actual weeks in month",
|
|
8887
|
+
"name": "fixedWeeks",
|
|
8888
|
+
"parent": {
|
|
8889
|
+
"fileName": "src/date/datepicker/DatePickerStandalone.tsx",
|
|
8890
|
+
"name": "DatePickerStandaloneDefaultProps"
|
|
8891
|
+
},
|
|
8892
|
+
"declarations": [
|
|
8893
|
+
{
|
|
8894
|
+
"fileName": "src/date/datepicker/DatePickerStandalone.tsx",
|
|
8895
|
+
"name": "DatePickerStandaloneDefaultProps"
|
|
8896
|
+
}
|
|
8897
|
+
],
|
|
8898
|
+
"required": false,
|
|
8899
|
+
"type": {
|
|
8900
|
+
"name": "boolean"
|
|
8901
|
+
}
|
|
8902
|
+
},
|
|
8880
8903
|
"children": {
|
|
8881
8904
|
"defaultValue": null,
|
|
8882
8905
|
"description": "Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle, or make your own with the open/onClose props",
|
|
@@ -48,7 +48,7 @@ const caption_1 = require("./caption");
|
|
|
48
48
|
const Head_1 = require("./Head");
|
|
49
49
|
exports.DatePickerStandalone = (0, react_1.forwardRef)((_a, ref) => {
|
|
50
50
|
var _b;
|
|
51
|
-
var { children, className, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, onSelect } = _a, rest = __rest(_a, ["children", "className", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "onSelect"]);
|
|
51
|
+
var { children, className, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, onSelect, fixedWeeks = true } = _a, rest = __rest(_a, ["children", "className", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "onSelect", "fixedWeeks"]);
|
|
52
52
|
const [selectedDates, setSelectedDates] = react_1.default.useState(defaultSelected);
|
|
53
53
|
const handleSingleSelect = (selectedDay) => {
|
|
54
54
|
setSelectedDates(selectedDay);
|
|
@@ -80,6 +80,6 @@ exports.DatePickerStandalone = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
80
80
|
weekend: (day) => disableWeekends && (0, isWeekend_1.default)(day),
|
|
81
81
|
}, modifiersClassNames: {
|
|
82
82
|
weekend: "rdp-day__weekend",
|
|
83
|
-
}, showWeekNumber: showWeekNumber, fixedWeeks:
|
|
83
|
+
}, showWeekNumber: showWeekNumber, fixedWeeks: fixedWeeks, showOutsideDays: true }, (0, __1.omit)(rest, ["onSelect"])))));
|
|
84
84
|
});
|
|
85
85
|
exports.default = exports.DatePickerStandalone;
|
package/cjs/list/List.js
CHANGED
|
@@ -49,13 +49,17 @@ exports.ListContext = (0, react_1.createContext)({
|
|
|
49
49
|
exports.List = (0, react_1.forwardRef)((_a, ref) => {
|
|
50
50
|
var { children, className, as: ListTag = "ul", title, description, headingTag = "h3" } = _a, rest = __rest(_a, ["children", "className", "as", "title", "description", "headingTag"]);
|
|
51
51
|
const ariaId = (0, useId_1.useId)();
|
|
52
|
+
const { isNested } = (0, react_1.useContext)(ListItem_1.ListItemContext);
|
|
52
53
|
return (react_1.default.createElement(exports.ListContext.Provider, { value: {
|
|
53
54
|
listType: ListTag,
|
|
54
55
|
} },
|
|
55
|
-
react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-list", className
|
|
56
|
+
react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-list", className, {
|
|
57
|
+
"navds-list--nested": isNested,
|
|
58
|
+
}) }),
|
|
56
59
|
title && (react_1.default.createElement(typography_1.Heading, { id: `tittel-${ariaId}`, size: "small", as: headingTag }, title)),
|
|
57
60
|
description && (react_1.default.createElement(typography_1.BodyShort, { id: `description-${ariaId}` }, description)),
|
|
58
61
|
react_1.default.createElement(ListTag, { "aria-labelledby": title && `tittel-${ariaId}`, "aria-describedby": description && `description-${ariaId}` }, children))));
|
|
59
62
|
});
|
|
60
63
|
exports.List.Item = ListItem_1.ListItem;
|
|
64
|
+
exports.List.componentType = "list";
|
|
61
65
|
exports.default = exports.List;
|
package/cjs/list/ListItem.js
CHANGED
|
@@ -37,22 +37,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
37
37
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
38
|
};
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
exports.ListItem = void 0;
|
|
40
|
+
exports.ListItem = exports.ListItemContext = void 0;
|
|
41
41
|
const clsx_1 = __importDefault(require("clsx"));
|
|
42
42
|
const react_1 = __importStar(require("react"));
|
|
43
43
|
const typography_1 = require("../typography");
|
|
44
44
|
const List_1 = require("./List");
|
|
45
|
+
exports.ListItemContext = (0, react_1.createContext)({
|
|
46
|
+
isNested: false,
|
|
47
|
+
});
|
|
45
48
|
exports.ListItem = (0, react_1.forwardRef)((_a, ref) => {
|
|
49
|
+
var _b;
|
|
46
50
|
var { className, children, title, icon } = _a, rest = __rest(_a, ["className", "children", "title", "icon"]);
|
|
47
51
|
const { listType } = (0, react_1.useContext)(List_1.ListContext);
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
52
|
+
if (listType === "ol" && icon) {
|
|
53
|
+
console.warn("<List />: Icon prop is not supported for ordered lists. Please remove the icon prop.");
|
|
54
|
+
}
|
|
55
|
+
const hasNestedList = (_b = react_1.default.Children.toArray(children)) === null || _b === void 0 ? void 0 : _b.some((child) => { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.componentType) === "list"; });
|
|
56
|
+
return (react_1.default.createElement(exports.ListItemContext.Provider, { value: { isNested: hasNestedList } },
|
|
57
|
+
react_1.default.createElement("li", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-list__item", className, {
|
|
58
|
+
"navds-list__item--noMargin": hasNestedList,
|
|
59
|
+
}) }),
|
|
60
|
+
listType === "ul" && (react_1.default.createElement("div", { className: (0, clsx_1.default)({
|
|
61
|
+
"navds-list__item-marker--icon": icon,
|
|
62
|
+
"navds-list__item-marker--bullet": !icon,
|
|
63
|
+
}) }, icon ? (icon) : (react_1.default.createElement("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, focusable: false, role: "img" },
|
|
64
|
+
react_1.default.createElement("rect", { width: "6", height: "6", rx: "3", fill: "currentColor" }))))),
|
|
65
|
+
react_1.default.createElement(typography_1.BodyShort, { as: "div", size: "small", className: "navds-list__item-content" },
|
|
66
|
+
title && (react_1.default.createElement(typography_1.Label, { as: "p", size: "small" }, title)),
|
|
67
|
+
children))));
|
|
57
68
|
});
|
|
58
69
|
exports.default = exports.ListItem;
|
|
@@ -5,6 +5,11 @@ interface DatePickerStandaloneDefaultProps extends Omit<DatePickerDefaultProps,
|
|
|
5
5
|
* Datepicker classname
|
|
6
6
|
*/
|
|
7
7
|
className?: string;
|
|
8
|
+
/**
|
|
9
|
+
* If datepicker should be fixed to 6 weeks, regardless of actual weeks in month
|
|
10
|
+
* @default true
|
|
11
|
+
*/
|
|
12
|
+
fixedWeeks?: boolean;
|
|
8
13
|
}
|
|
9
14
|
export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps & ConditionalModeProps;
|
|
10
15
|
export type DatePickerStandaloneType = React.ForwardRefExoticComponent<DatePickerStandaloneProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -19,7 +19,7 @@ import { Caption, DropdownCaption } from "./caption";
|
|
|
19
19
|
import { Head } from "./Head";
|
|
20
20
|
export const DatePickerStandalone = forwardRef((_a, ref) => {
|
|
21
21
|
var _b;
|
|
22
|
-
var { children, className, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, onSelect } = _a, rest = __rest(_a, ["children", "className", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "onSelect"]);
|
|
22
|
+
var { children, className, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, onSelect, fixedWeeks = true } = _a, rest = __rest(_a, ["children", "className", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "onSelect", "fixedWeeks"]);
|
|
23
23
|
const [selectedDates, setSelectedDates] = React.useState(defaultSelected);
|
|
24
24
|
const handleSingleSelect = (selectedDay) => {
|
|
25
25
|
setSelectedDates(selectedDay);
|
|
@@ -51,7 +51,7 @@ export const DatePickerStandalone = forwardRef((_a, ref) => {
|
|
|
51
51
|
weekend: (day) => disableWeekends && isWeekend(day),
|
|
52
52
|
}, modifiersClassNames: {
|
|
53
53
|
weekend: "rdp-day__weekend",
|
|
54
|
-
}, showWeekNumber: showWeekNumber, fixedWeeks:
|
|
54
|
+
}, showWeekNumber: showWeekNumber, fixedWeeks: fixedWeeks, showOutsideDays: true }, omit(rest, ["onSelect"])))));
|
|
55
55
|
});
|
|
56
56
|
export default DatePickerStandalone;
|
|
57
57
|
//# sourceMappingURL=DatePickerStandalone.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerStandalone.js","sourceRoot":"","sources":["../../../src/date/datepicker/DatePickerStandalone.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAEL,SAAS,EACT,OAAO,GAIR,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"DatePickerStandalone.js","sourceRoot":"","sources":["../../../src/date/datepicker/DatePickerStandalone.tsx"],"names":[],"mappings":"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"}
|
package/esm/list/List.d.ts
CHANGED
|
@@ -21,8 +21,9 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
21
21
|
*/
|
|
22
22
|
headingTag?: React.ElementType<any>;
|
|
23
23
|
}
|
|
24
|
-
interface ListComponent extends React.ForwardRefExoticComponent<ListProps> {
|
|
24
|
+
export interface ListComponent extends React.ForwardRefExoticComponent<ListProps> {
|
|
25
25
|
Item: ListItemType;
|
|
26
|
+
componentType: string;
|
|
26
27
|
}
|
|
27
28
|
interface ListContextProps {
|
|
28
29
|
listType: "ul" | "ol";
|
package/esm/list/List.js
CHANGED
|
@@ -10,24 +10,28 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import cl from "clsx";
|
|
13
|
-
import React, { createContext, forwardRef } from "react";
|
|
13
|
+
import React, { createContext, forwardRef, useContext } from "react";
|
|
14
14
|
import { BodyShort, Heading } from "../typography";
|
|
15
15
|
import { useId } from "../util/useId";
|
|
16
|
-
import { ListItem } from "./ListItem";
|
|
16
|
+
import { ListItem, ListItemContext } from "./ListItem";
|
|
17
17
|
export const ListContext = createContext({
|
|
18
18
|
listType: "ul",
|
|
19
19
|
});
|
|
20
20
|
export const List = forwardRef((_a, ref) => {
|
|
21
21
|
var { children, className, as: ListTag = "ul", title, description, headingTag = "h3" } = _a, rest = __rest(_a, ["children", "className", "as", "title", "description", "headingTag"]);
|
|
22
22
|
const ariaId = useId();
|
|
23
|
+
const { isNested } = useContext(ListItemContext);
|
|
23
24
|
return (React.createElement(ListContext.Provider, { value: {
|
|
24
25
|
listType: ListTag,
|
|
25
26
|
} },
|
|
26
|
-
React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-list", className
|
|
27
|
+
React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-list", className, {
|
|
28
|
+
"navds-list--nested": isNested,
|
|
29
|
+
}) }),
|
|
27
30
|
title && (React.createElement(Heading, { id: `tittel-${ariaId}`, size: "small", as: headingTag }, title)),
|
|
28
31
|
description && (React.createElement(BodyShort, { id: `description-${ariaId}` }, description)),
|
|
29
32
|
React.createElement(ListTag, { "aria-labelledby": title && `tittel-${ariaId}`, "aria-describedby": description && `description-${ariaId}` }, children))));
|
|
30
33
|
});
|
|
31
34
|
List.Item = ListItem;
|
|
35
|
+
List.componentType = "list";
|
|
32
36
|
export default List;
|
|
33
37
|
//# sourceMappingURL=List.js.map
|
package/esm/list/List.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/list/List.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/list/List.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAgB,MAAM,YAAY,CAAC;AAkCrE,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAmB;IACzD,QAAQ,EAAE,IAAI;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,OAAO,GAAG,IAAI,EAClB,KAAK,EACL,WAAW,EACX,UAAU,GAAG,IAAI,OAElB,EADI,IAAI,cAPT,qEAQC,CADQ;IAIT,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAGjD,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;YACL,QAAQ,EAAE,OAAO;SAClB;QAED,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE;gBACrC,oBAAoB,EAAE,QAAQ;aAC/B,CAAC;YAED,KAAK,IAAI,CACR,oBAAC,OAAO,IAAC,EAAE,EAAE,UAAU,MAAM,EAAE,EAAE,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,UAAU,IACzD,KAAK,CACE,CACX;YACA,WAAW,IAAI,CACd,oBAAC,SAAS,IAAC,EAAE,EAAE,eAAe,MAAM,EAAE,IAAG,WAAW,CAAa,CAClE;YACD,oBAAC,OAAO,uBACW,KAAK,IAAI,UAAU,MAAM,EAAE,sBAC1B,WAAW,IAAI,eAAe,MAAM,EAAE,IAEvD,QAAQ,CACD,CACN,CACe,CACxB,CAAC;AACJ,CAAC,CACe,CAAC;AAEnB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;AACrB,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;AAE5B,eAAe,IAAI,CAAC"}
|
package/esm/list/ListItem.d.ts
CHANGED
|
@@ -12,5 +12,9 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
|
|
|
12
12
|
}
|
|
13
13
|
export interface ListItemType extends React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>> {
|
|
14
14
|
}
|
|
15
|
+
interface ListItemContextProps {
|
|
16
|
+
isNested: boolean;
|
|
17
|
+
}
|
|
18
|
+
export declare const ListItemContext: React.Context<ListItemContextProps>;
|
|
15
19
|
export declare const ListItem: ListItemType;
|
|
16
20
|
export default ListItem;
|
package/esm/list/ListItem.js
CHANGED
|
@@ -10,21 +10,32 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import cl from "clsx";
|
|
13
|
-
import React, { forwardRef, useContext } from "react";
|
|
13
|
+
import React, { createContext, forwardRef, useContext } from "react";
|
|
14
14
|
import { BodyShort, Label } from "../typography";
|
|
15
15
|
import { ListContext } from "./List";
|
|
16
|
+
export const ListItemContext = createContext({
|
|
17
|
+
isNested: false,
|
|
18
|
+
});
|
|
16
19
|
export const ListItem = forwardRef((_a, ref) => {
|
|
20
|
+
var _b;
|
|
17
21
|
var { className, children, title, icon } = _a, rest = __rest(_a, ["className", "children", "title", "icon"]);
|
|
18
22
|
const { listType } = useContext(ListContext);
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
if (listType === "ol" && icon) {
|
|
24
|
+
console.warn("<List />: Icon prop is not supported for ordered lists. Please remove the icon prop.");
|
|
25
|
+
}
|
|
26
|
+
const hasNestedList = (_b = React.Children.toArray(children)) === null || _b === void 0 ? void 0 : _b.some((child) => { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.componentType) === "list"; });
|
|
27
|
+
return (React.createElement(ListItemContext.Provider, { value: { isNested: hasNestedList } },
|
|
28
|
+
React.createElement("li", Object.assign({}, rest, { ref: ref, className: cl("navds-list__item", className, {
|
|
29
|
+
"navds-list__item--noMargin": hasNestedList,
|
|
30
|
+
}) }),
|
|
31
|
+
listType === "ul" && (React.createElement("div", { className: cl({
|
|
32
|
+
"navds-list__item-marker--icon": icon,
|
|
33
|
+
"navds-list__item-marker--bullet": !icon,
|
|
34
|
+
}) }, icon ? (icon) : (React.createElement("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, focusable: false, role: "img" },
|
|
35
|
+
React.createElement("rect", { width: "6", height: "6", rx: "3", fill: "currentColor" }))))),
|
|
36
|
+
React.createElement(BodyShort, { as: "div", size: "small", className: "navds-list__item-content" },
|
|
37
|
+
title && (React.createElement(Label, { as: "p", size: "small" }, title)),
|
|
38
|
+
children))));
|
|
28
39
|
});
|
|
29
40
|
export default ListItem;
|
|
30
41
|
//# sourceMappingURL=ListItem.js.map
|
package/esm/list/ListItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../src/list/ListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../src/list/ListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AA0BrC,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAuB;IACjE,QAAQ,EAAE,KAAK;CAChB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAiB,UAAU,CAC9C,CAAC,EAA6C,EAAE,GAAG,EAAE,EAAE;;QAAtD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,OAAW,EAAN,IAAI,cAA3C,0CAA6C,CAAF;IAC1C,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE7C,IAAI,QAAQ,KAAK,IAAI,IAAI,IAAI,EAAE;QAC7B,OAAO,CAAC,IAAI,CACV,sFAAsF,CACvF,CAAC;KACH;IAED,MAAM,aAAa,GAAG,MAAA,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,0CAAE,IAAI,CAC1D,CAAC,KAAU,EAAE,EAAE,WAAC,OAAA,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,aAAa,MAAK,MAAM,CAAA,EAAA,CACtD,CAAC;IAEF,OAAO,CACL,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE;QAC1D,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;gBAC3C,4BAA4B,EAAE,aAAa;aAC5C,CAAC;YAED,QAAQ,KAAK,IAAI,IAAI,CACpB,6BACE,SAAS,EAAE,EAAE,CAAC;oBACZ,+BAA+B,EAAE,IAAI;oBACrC,iCAAiC,EAAE,CAAC,IAAI;iBACzC,CAAC,IAED,IAAI,CAAC,CAAC,CAAC,CACN,IAAI,CACL,CAAC,CAAC,CAAC,CACF,6BACE,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,uBAElC,SAAS,EAAE,KAAK,EAChB,IAAI,EAAC,KAAK;gBAEV,8BAAM,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CACpD,CACP,CACG,CACP;YAED,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,0BAA0B;gBAClE,KAAK,IAAI,CACR,oBAAC,KAAK,IAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,IACvB,KAAK,CACA,CACT;gBACA,QAAQ,CACC,CACT,CACoB,CAC5B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export type Height = "auto" | number | `${number}%`;
|
|
3
3
|
interface AnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/**
|
|
5
|
+
* @default 250ms
|
|
6
|
+
*/
|
|
4
7
|
duration?: number;
|
|
8
|
+
/**
|
|
9
|
+
* @default ease
|
|
10
|
+
*/
|
|
5
11
|
easing?: string;
|
|
6
12
|
height: Height;
|
|
7
13
|
innerClassName?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimateHeight.js","sourceRoot":"","sources":["../../src/util/AnimateHeight.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,0EAA0E;AAC1E,OAAO,KAAK,EAAE,EAAiB,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQ1E,6BAA6B;AAE7B,SAAS,QAAQ,CAAC,CAAS;IACzB,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IAC7B,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC5C,CAAC;AAED,SAAS,YAAY,CAAC,MAAc;IAClC,oBAAoB;IACpB,OAAO,CACL,OAAO,MAAM,KAAK,QAAQ;QAC1B,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,GAAG;QACjC,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CACjD,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,OAA8B,EAAE,MAAc;IACjE,yFAAyF;IACzF,2EAA2E;IAC3E,IAAI,MAAM,KAAK,CAAC,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAA,EAAE;QAClC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;KAChC;AACH,CAAC;AAED,SAAS,WAAW,CAAC,OAA8B,EAAE,MAAc;IACjE,yFAAyF;IACzF,2EAA2E;IAC3E,IAAI,MAAM,KAAK,CAAC,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAA,EAAE;QAClC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;KAC5B;AACH,CAAC;
|
|
1
|
+
{"version":3,"file":"AnimateHeight.js","sourceRoot":"","sources":["../../src/util/AnimateHeight.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.2",
|
|
4
4
|
"description": "Aksel react-components for NAV designsystem",
|
|
5
5
|
"author": "Aksel | NAV designsystem team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@floating-ui/react": "0.17.0",
|
|
40
|
-
"@navikt/ds-icons": "^2.4.
|
|
40
|
+
"@navikt/ds-icons": "^2.4.2",
|
|
41
41
|
"@radix-ui/react-tabs": "1.0.0",
|
|
42
42
|
"@radix-ui/react-toggle-group": "1.0.0",
|
|
43
43
|
"clsx": "^1.2.1",
|
|
@@ -24,6 +24,11 @@ interface DatePickerStandaloneDefaultProps
|
|
|
24
24
|
* Datepicker classname
|
|
25
25
|
*/
|
|
26
26
|
className?: string;
|
|
27
|
+
/**
|
|
28
|
+
* If datepicker should be fixed to 6 weeks, regardless of actual weeks in month
|
|
29
|
+
* @default true
|
|
30
|
+
*/
|
|
31
|
+
fixedWeeks?: boolean;
|
|
27
32
|
}
|
|
28
33
|
|
|
29
34
|
export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps &
|
|
@@ -50,6 +55,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
|
|
|
50
55
|
id,
|
|
51
56
|
defaultSelected,
|
|
52
57
|
onSelect,
|
|
58
|
+
fixedWeeks = true,
|
|
53
59
|
...rest
|
|
54
60
|
},
|
|
55
61
|
ref
|
|
@@ -113,7 +119,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
|
|
|
113
119
|
weekend: "rdp-day__weekend",
|
|
114
120
|
}}
|
|
115
121
|
showWeekNumber={showWeekNumber}
|
|
116
|
-
fixedWeeks
|
|
122
|
+
fixedWeeks={fixedWeeks}
|
|
117
123
|
showOutsideDays
|
|
118
124
|
{...omit(rest, ["onSelect"])}
|
|
119
125
|
/>
|
package/src/list/List.tsx
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import cl from "clsx";
|
|
2
|
-
import React, { createContext, forwardRef } from "react";
|
|
2
|
+
import React, { createContext, forwardRef, useContext } from "react";
|
|
3
3
|
import { BodyShort, Heading } from "../typography";
|
|
4
4
|
import { useId } from "../util/useId";
|
|
5
|
-
import { ListItem, ListItemType } from "./ListItem";
|
|
5
|
+
import { ListItem, ListItemContext, ListItemType } from "./ListItem";
|
|
6
6
|
|
|
7
7
|
export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
8
8
|
children: React.ReactNode;
|
|
@@ -26,8 +26,10 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
26
26
|
headingTag?: React.ElementType<any>;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
interface ListComponent
|
|
29
|
+
export interface ListComponent
|
|
30
|
+
extends React.ForwardRefExoticComponent<ListProps> {
|
|
30
31
|
Item: ListItemType;
|
|
32
|
+
componentType: string;
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
interface ListContextProps {
|
|
@@ -53,13 +55,22 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
|
|
|
53
55
|
) => {
|
|
54
56
|
const ariaId = useId();
|
|
55
57
|
|
|
58
|
+
const { isNested } = useContext(ListItemContext);
|
|
59
|
+
|
|
60
|
+
|
|
56
61
|
return (
|
|
57
62
|
<ListContext.Provider
|
|
58
63
|
value={{
|
|
59
64
|
listType: ListTag,
|
|
60
65
|
}}
|
|
61
66
|
>
|
|
62
|
-
<div
|
|
67
|
+
<div
|
|
68
|
+
{...rest}
|
|
69
|
+
ref={ref}
|
|
70
|
+
className={cl("navds-list", className, {
|
|
71
|
+
"navds-list--nested": isNested,
|
|
72
|
+
})}
|
|
73
|
+
>
|
|
63
74
|
{title && (
|
|
64
75
|
<Heading id={`tittel-${ariaId}`} size="small" as={headingTag}>
|
|
65
76
|
{title}
|
|
@@ -81,5 +92,6 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
|
|
|
81
92
|
) as ListComponent;
|
|
82
93
|
|
|
83
94
|
List.Item = ListItem;
|
|
95
|
+
List.componentType = "list";
|
|
84
96
|
|
|
85
97
|
export default List;
|
package/src/list/ListItem.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import cl from "clsx";
|
|
2
|
-
import React, { forwardRef, useContext } from "react";
|
|
2
|
+
import React, { createContext, forwardRef, useContext } from "react";
|
|
3
3
|
import { BodyShort, Label } from "../typography";
|
|
4
4
|
import { ListContext } from "./List";
|
|
5
5
|
|
|
@@ -13,7 +13,7 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
|
|
|
13
13
|
*/
|
|
14
14
|
title?: string;
|
|
15
15
|
/*
|
|
16
|
-
* Icon to be used as list marker
|
|
16
|
+
* Icon to be used as list marker for unordered lists.
|
|
17
17
|
*/
|
|
18
18
|
icon?: React.ReactNode;
|
|
19
19
|
}
|
|
@@ -23,47 +23,73 @@ export interface ListItemType
|
|
|
23
23
|
ListItemProps & React.RefAttributes<HTMLLIElement>
|
|
24
24
|
> {}
|
|
25
25
|
|
|
26
|
+
interface ListItemContextProps {
|
|
27
|
+
isNested: boolean;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export const ListItemContext = createContext<ListItemContextProps>({
|
|
31
|
+
isNested: false,
|
|
32
|
+
});
|
|
33
|
+
|
|
26
34
|
export const ListItem: ListItemType = forwardRef(
|
|
27
35
|
({ className, children, title, icon, ...rest }, ref) => {
|
|
28
36
|
const { listType } = useContext(ListContext);
|
|
29
37
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"navds-list__item-marker--icon": icon,
|
|
36
|
-
"navds-list__item-marker--bullet": !icon,
|
|
37
|
-
})}
|
|
38
|
-
>
|
|
39
|
-
{icon ? (
|
|
40
|
-
icon
|
|
41
|
-
) : (
|
|
42
|
-
<svg
|
|
43
|
-
width="6"
|
|
44
|
-
height="6"
|
|
45
|
-
viewBox="0 0 6 6"
|
|
46
|
-
fill="none"
|
|
47
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
48
|
-
aria-hidden
|
|
49
|
-
focusable={false}
|
|
50
|
-
role="img"
|
|
51
|
-
>
|
|
52
|
-
<rect width="6" height="6" rx="3" fill="currentColor" />
|
|
53
|
-
</svg>
|
|
54
|
-
)}
|
|
55
|
-
</div>
|
|
56
|
-
)}
|
|
38
|
+
if (listType === "ol" && icon) {
|
|
39
|
+
console.warn(
|
|
40
|
+
"<List />: Icon prop is not supported for ordered lists. Please remove the icon prop."
|
|
41
|
+
);
|
|
42
|
+
}
|
|
57
43
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
44
|
+
const hasNestedList = React.Children.toArray(children)?.some(
|
|
45
|
+
(child: any) => child?.type?.componentType === "list"
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<ListItemContext.Provider value={{ isNested: hasNestedList }}>
|
|
50
|
+
<li
|
|
51
|
+
{...rest}
|
|
52
|
+
ref={ref}
|
|
53
|
+
className={cl("navds-list__item", className, {
|
|
54
|
+
"navds-list__item--noMargin": hasNestedList,
|
|
55
|
+
})}
|
|
56
|
+
>
|
|
57
|
+
{listType === "ul" && (
|
|
58
|
+
<div
|
|
59
|
+
className={cl({
|
|
60
|
+
"navds-list__item-marker--icon": icon,
|
|
61
|
+
"navds-list__item-marker--bullet": !icon,
|
|
62
|
+
})}
|
|
63
|
+
>
|
|
64
|
+
{icon ? (
|
|
65
|
+
icon
|
|
66
|
+
) : (
|
|
67
|
+
<svg
|
|
68
|
+
width="6"
|
|
69
|
+
height="6"
|
|
70
|
+
viewBox="0 0 6 6"
|
|
71
|
+
fill="none"
|
|
72
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
73
|
+
aria-hidden
|
|
74
|
+
focusable={false}
|
|
75
|
+
role="img"
|
|
76
|
+
>
|
|
77
|
+
<rect width="6" height="6" rx="3" fill="currentColor" />
|
|
78
|
+
</svg>
|
|
79
|
+
)}
|
|
80
|
+
</div>
|
|
63
81
|
)}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
82
|
+
|
|
83
|
+
<BodyShort as="div" size="small" className="navds-list__item-content">
|
|
84
|
+
{title && (
|
|
85
|
+
<Label as="p" size="small">
|
|
86
|
+
{title}
|
|
87
|
+
</Label>
|
|
88
|
+
)}
|
|
89
|
+
{children}
|
|
90
|
+
</BodyShort>
|
|
91
|
+
</li>
|
|
92
|
+
</ListItemContext.Provider>
|
|
67
93
|
);
|
|
68
94
|
}
|
|
69
95
|
);
|
|
@@ -117,3 +117,32 @@ export const Icons = {
|
|
|
117
117
|
);
|
|
118
118
|
},
|
|
119
119
|
};
|
|
120
|
+
|
|
121
|
+
export const Nested = {
|
|
122
|
+
render: () => {
|
|
123
|
+
return (
|
|
124
|
+
<List>
|
|
125
|
+
<List.Item title="Sed Do Eiusmod Tempor Incididunt">
|
|
126
|
+
Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
|
|
127
|
+
<List>
|
|
128
|
+
<List.Item title="Lorem Ipsum Dolor Sit Amet">
|
|
129
|
+
Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
|
|
130
|
+
</List.Item>
|
|
131
|
+
<List.Item title="Consectetur Adipiscing Elit">
|
|
132
|
+
Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
|
|
133
|
+
</List.Item>
|
|
134
|
+
<List.Item>
|
|
135
|
+
Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
|
|
136
|
+
</List.Item>
|
|
137
|
+
<List.Item>
|
|
138
|
+
Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
|
|
139
|
+
</List.Item>
|
|
140
|
+
</List>
|
|
141
|
+
</List.Item>
|
|
142
|
+
<List.Item>
|
|
143
|
+
Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
|
|
144
|
+
</List.Item>
|
|
145
|
+
</List>
|
|
146
|
+
);
|
|
147
|
+
},
|
|
148
|
+
};
|
|
@@ -42,7 +42,13 @@ function showContent(element: HTMLDivElement | null, height: Height) {
|
|
|
42
42
|
// ------------------ Component
|
|
43
43
|
|
|
44
44
|
interface AnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
45
|
+
/**
|
|
46
|
+
* @default 250ms
|
|
47
|
+
*/
|
|
45
48
|
duration?: number;
|
|
49
|
+
/**
|
|
50
|
+
* @default ease
|
|
51
|
+
*/
|
|
46
52
|
easing?: string;
|
|
47
53
|
height: Height;
|
|
48
54
|
innerClassName?: string;
|