@navikt/ds-react 2.0.12 → 2.0.15
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 +40 -0
- package/cjs/chat/Bubble.js +2 -2
- package/cjs/chat/Chat.js +2 -2
- package/cjs/popover/Popover.js +17 -17
- package/cjs/tooltip/Tooltip.js +24 -24
- package/esm/chat/Bubble.d.ts +4 -0
- package/esm/chat/Bubble.js +2 -2
- package/esm/chat/Bubble.js.map +1 -1
- package/esm/chat/Chat.d.ts +5 -0
- package/esm/chat/Chat.js +2 -2
- package/esm/chat/Chat.js.map +1 -1
- package/esm/popover/Popover.js +1 -1
- package/esm/popover/Popover.js.map +1 -1
- package/esm/tooltip/Tooltip.js +1 -1
- package/esm/tooltip/Tooltip.js.map +1 -1
- package/package.json +3 -3
- package/src/chat/Bubble.tsx +22 -2
- package/src/chat/Chat.tsx +13 -1
- package/src/chat/chat.stories.tsx +51 -0
- package/src/popover/Popover.tsx +1 -1
- package/src/tooltip/Tooltip.tsx +1 -1
package/_docs.json
CHANGED
|
@@ -701,6 +701,25 @@
|
|
|
701
701
|
"name": "string"
|
|
702
702
|
}
|
|
703
703
|
},
|
|
704
|
+
"toptextPosition": {
|
|
705
|
+
"defaultValue": null,
|
|
706
|
+
"description": "Overrides hoizontal position of toptext",
|
|
707
|
+
"name": "toptextPosition",
|
|
708
|
+
"parent": {
|
|
709
|
+
"fileName": "src/chat/Bubble.tsx",
|
|
710
|
+
"name": "BubbleProps"
|
|
711
|
+
},
|
|
712
|
+
"declarations": [
|
|
713
|
+
{
|
|
714
|
+
"fileName": "src/chat/Bubble.tsx",
|
|
715
|
+
"name": "BubbleProps"
|
|
716
|
+
}
|
|
717
|
+
],
|
|
718
|
+
"required": false,
|
|
719
|
+
"type": {
|
|
720
|
+
"name": "\"left\" | \"right\""
|
|
721
|
+
}
|
|
722
|
+
},
|
|
704
723
|
"className": {
|
|
705
724
|
"defaultValue": null,
|
|
706
725
|
"description": "",
|
|
@@ -880,6 +899,27 @@
|
|
|
880
899
|
"name": "\"left\" | \"right\""
|
|
881
900
|
}
|
|
882
901
|
},
|
|
902
|
+
"toptextPosition": {
|
|
903
|
+
"defaultValue": {
|
|
904
|
+
"value": "Same as chat"
|
|
905
|
+
},
|
|
906
|
+
"description": "Hoizontal position of toptext",
|
|
907
|
+
"name": "toptextPosition",
|
|
908
|
+
"parent": {
|
|
909
|
+
"fileName": "src/chat/Chat.tsx",
|
|
910
|
+
"name": "ChatProps"
|
|
911
|
+
},
|
|
912
|
+
"declarations": [
|
|
913
|
+
{
|
|
914
|
+
"fileName": "src/chat/Chat.tsx",
|
|
915
|
+
"name": "ChatProps"
|
|
916
|
+
}
|
|
917
|
+
],
|
|
918
|
+
"required": false,
|
|
919
|
+
"type": {
|
|
920
|
+
"name": "\"left\" | \"right\""
|
|
921
|
+
}
|
|
922
|
+
},
|
|
883
923
|
"className": {
|
|
884
924
|
"defaultValue": null,
|
|
885
925
|
"description": "",
|
package/cjs/chat/Bubble.js
CHANGED
|
@@ -41,9 +41,9 @@ const react_1 = __importStar(require("react"));
|
|
|
41
41
|
const clsx_1 = __importDefault(require("clsx"));
|
|
42
42
|
const typography_1 = require("../typography");
|
|
43
43
|
const Bubble = (0, react_1.forwardRef)((_a, ref) => {
|
|
44
|
-
var { children, className, name, timestamp, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor"]);
|
|
44
|
+
var { children, className, name, timestamp, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor", "toptextPosition"]);
|
|
45
45
|
return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat__bubble", className), style: { backgroundColor: backgroundColor } }, rest),
|
|
46
|
-
(timestamp || name) && (react_1.default.createElement("div", { className:
|
|
46
|
+
(timestamp || name) && (react_1.default.createElement("div", { className: (0, clsx_1.default)(`navds-chat__top-text`, toptextPosition && `navds-chat__top-text--${toptextPosition}`) },
|
|
47
47
|
name && react_1.default.createElement(typography_1.Detail, { className: "navds-chat__name" }, name),
|
|
48
48
|
timestamp && (react_1.default.createElement(typography_1.Detail, { className: "navds-chat__timestamp" }, timestamp)))),
|
|
49
49
|
children));
|
package/cjs/chat/Chat.js
CHANGED
|
@@ -43,8 +43,8 @@ const clsx_1 = __importDefault(require("clsx"));
|
|
|
43
43
|
const Bubble_1 = __importDefault(require("./Bubble"));
|
|
44
44
|
const __1 = require("..");
|
|
45
45
|
exports.Chat = (0, react_1.forwardRef)((_a, ref) => {
|
|
46
|
-
var { children, className, name, timestamp, avatar, position = "left", avatarBgColor, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "avatarBgColor", "backgroundColor"]);
|
|
47
|
-
return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat", className, `navds-chat--${position}`) }, rest),
|
|
46
|
+
var { children, className, name, timestamp, avatar, position = "left", avatarBgColor, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "avatarBgColor", "backgroundColor", "toptextPosition"]);
|
|
47
|
+
return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat", className, `navds-chat--${position} navds-chat--top-text-${toptextPosition !== null && toptextPosition !== void 0 ? toptextPosition : position}`) }, rest),
|
|
48
48
|
react_1.default.createElement(__1.BodyShort, { as: "div", className: "navds-chat__avatar", style: { backgroundColor: avatarBgColor } }, avatar),
|
|
49
49
|
react_1.default.createElement("ol", { className: "navds-chat__bubble-wrapper" }, react_1.default.Children.map(children, (child, i) => {
|
|
50
50
|
if (react_1.default.isValidElement(child)) {
|
package/cjs/popover/Popover.js
CHANGED
|
@@ -38,42 +38,42 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
38
38
|
};
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
40
|
exports.Popover = void 0;
|
|
41
|
-
const
|
|
41
|
+
const react_1 = require("@floating-ui/react");
|
|
42
42
|
const clsx_1 = __importDefault(require("clsx"));
|
|
43
|
-
const
|
|
43
|
+
const react_2 = __importStar(require("react"));
|
|
44
44
|
const __1 = require("..");
|
|
45
45
|
const util_1 = require("../util");
|
|
46
46
|
const PopoverContent_1 = __importDefault(require("./PopoverContent"));
|
|
47
|
-
exports.Popover = (0,
|
|
47
|
+
exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
|
|
48
48
|
var { className, children, anchorEl, arrow = true, open, onClose, placement = "top", offset, strategy: userStrategy = "absolute" } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset", "strategy"]);
|
|
49
|
-
const arrowRef = (0,
|
|
50
|
-
const { x, y, reference, floating, strategy, context, update, refs, placement: flPlacement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, } = (0,
|
|
49
|
+
const arrowRef = (0, react_2.useRef)(null);
|
|
50
|
+
const { x, y, reference, floating, strategy, context, update, refs, placement: flPlacement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, } = (0, react_1.useFloating)({
|
|
51
51
|
strategy: userStrategy,
|
|
52
52
|
placement,
|
|
53
53
|
open: open,
|
|
54
54
|
onOpenChange: onClose,
|
|
55
55
|
middleware: [
|
|
56
|
-
(0,
|
|
57
|
-
(0,
|
|
58
|
-
(0,
|
|
59
|
-
(0,
|
|
56
|
+
(0, react_1.offset)(offset !== null && offset !== void 0 ? offset : (arrow ? 16 : 4)),
|
|
57
|
+
(0, react_1.shift)(),
|
|
58
|
+
(0, react_1.flip)({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
|
|
59
|
+
(0, react_1.arrow)({ element: arrowRef, padding: 8 }),
|
|
60
60
|
],
|
|
61
61
|
});
|
|
62
|
-
const { getFloatingProps } = (0,
|
|
63
|
-
(0,
|
|
64
|
-
(0,
|
|
62
|
+
const { getFloatingProps } = (0, react_1.useInteractions)([
|
|
63
|
+
(0, react_1.useClick)(context),
|
|
64
|
+
(0, react_1.useDismiss)(context),
|
|
65
65
|
]);
|
|
66
66
|
(0, util_1.useClientLayoutEffect)(() => {
|
|
67
67
|
reference(anchorEl);
|
|
68
68
|
}, [anchorEl]);
|
|
69
|
-
const floatingRef = (0,
|
|
69
|
+
const floatingRef = (0, react_2.useMemo)(() => (0, __1.mergeRefs)([floating, ref]), [floating, ref]);
|
|
70
70
|
(0, util_1.useClientLayoutEffect)(() => {
|
|
71
71
|
if (!refs.reference.current || !refs.floating.current || !open)
|
|
72
72
|
return;
|
|
73
|
-
const cleanup = (0,
|
|
73
|
+
const cleanup = (0, react_1.autoUpdate)(refs.reference.current, refs.floating.current, update);
|
|
74
74
|
return () => cleanup();
|
|
75
75
|
}, [refs.floating, refs.reference, update, open, anchorEl]);
|
|
76
|
-
(0, util_1.useEventListener)("focusin", (0,
|
|
76
|
+
(0, util_1.useEventListener)("focusin", (0, react_2.useCallback)((e) => {
|
|
77
77
|
var _a;
|
|
78
78
|
if (![anchorEl, (_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target))) {
|
|
79
79
|
open && onClose();
|
|
@@ -85,7 +85,7 @@ exports.Popover = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
85
85
|
bottom: "top",
|
|
86
86
|
left: "right",
|
|
87
87
|
}[flPlacement.split("-")[0]];
|
|
88
|
-
return (
|
|
88
|
+
return (react_2.default.createElement("div", Object.assign({ className: (0, clsx_1.default)("navds-popover", className, {
|
|
89
89
|
"navds-popover--hidden": !open || !anchorEl,
|
|
90
90
|
}), "data-placement": flPlacement, "aria-hidden": !open || !anchorEl, tabIndex: -1 }, getFloatingProps({
|
|
91
91
|
ref: floatingRef,
|
|
@@ -96,7 +96,7 @@ exports.Popover = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
96
96
|
},
|
|
97
97
|
}), rest),
|
|
98
98
|
children,
|
|
99
|
-
arrow && (
|
|
99
|
+
arrow && (react_2.default.createElement("div", { ref: (node) => {
|
|
100
100
|
arrowRef.current = node;
|
|
101
101
|
}, style: Object.assign(Object.assign(Object.assign({}, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), (staticSide ? { [staticSide]: "-0.5rem" } : {})), className: "navds-popover__arrow" }))));
|
|
102
102
|
});
|
package/cjs/tooltip/Tooltip.js
CHANGED
|
@@ -38,40 +38,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
38
38
|
};
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
40
|
exports.Tooltip = void 0;
|
|
41
|
-
const
|
|
41
|
+
const react_1 = require("@floating-ui/react");
|
|
42
42
|
const clsx_1 = __importDefault(require("clsx"));
|
|
43
|
-
const
|
|
43
|
+
const react_2 = __importStar(require("react"));
|
|
44
44
|
const __1 = require("..");
|
|
45
45
|
const util_1 = require("../util");
|
|
46
|
-
exports.Tooltip = (0,
|
|
46
|
+
exports.Tooltip = (0, react_2.forwardRef)((_a, ref) => {
|
|
47
47
|
var _b;
|
|
48
48
|
var { children, className, arrow: _arrow = true, placement: _placement = "top", open: userOpen, defaultOpen = false, offset: _offset, content, delay = 150, id, keys, maxChar = 80 } = _a, rest = __rest(_a, ["children", "className", "arrow", "placement", "open", "defaultOpen", "offset", "content", "delay", "id", "keys", "maxChar"]);
|
|
49
|
-
const [open, setOpen] = (0,
|
|
50
|
-
const arrowRef = (0,
|
|
49
|
+
const [open, setOpen] = (0, react_2.useState)(defaultOpen);
|
|
50
|
+
const arrowRef = (0, react_2.useRef)(null);
|
|
51
51
|
const rootElement = (_b = (0, __1.useProvider)()) === null || _b === void 0 ? void 0 : _b.rootElement;
|
|
52
|
-
const { x, y, reference, floating, strategy, context, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: { referenceHidden } = {}, }, } = (0,
|
|
52
|
+
const { x, y, reference, floating, strategy, context, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: { referenceHidden } = {}, }, } = (0, react_1.useFloating)({
|
|
53
53
|
placement: _placement,
|
|
54
54
|
open: userOpen !== null && userOpen !== void 0 ? userOpen : open,
|
|
55
55
|
onOpenChange: setOpen,
|
|
56
56
|
middleware: [
|
|
57
|
-
(0,
|
|
58
|
-
(0,
|
|
59
|
-
(0,
|
|
60
|
-
(0,
|
|
57
|
+
(0, react_1.offset)(_offset ? _offset : _arrow ? 10 : 2),
|
|
58
|
+
(0, react_1.shift)(),
|
|
59
|
+
(0, react_1.flip)({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
|
|
60
|
+
(0, react_1.arrow)({ element: arrowRef, padding: 5 }),
|
|
61
61
|
],
|
|
62
|
-
whileElementsMounted:
|
|
62
|
+
whileElementsMounted: react_1.autoUpdate,
|
|
63
63
|
});
|
|
64
|
-
const { getReferenceProps, getFloatingProps } = (0,
|
|
65
|
-
(0,
|
|
66
|
-
(0,
|
|
67
|
-
(0,
|
|
64
|
+
const { getReferenceProps, getFloatingProps } = (0, react_1.useInteractions)([
|
|
65
|
+
(0, react_1.useHover)(context, { handleClose: (0, react_1.safePolygon)(), restMs: delay }),
|
|
66
|
+
(0, react_1.useFocus)(context),
|
|
67
|
+
(0, react_1.useDismiss)(context),
|
|
68
68
|
]);
|
|
69
69
|
const ariaId = (0, util_1.useId)(id);
|
|
70
|
-
const mergedRef = (0,
|
|
71
|
-
const childMergedRef = (0,
|
|
70
|
+
const mergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([ref, floating]), [floating, ref]);
|
|
71
|
+
const childMergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([children.ref, reference]), [children, reference]);
|
|
72
72
|
if (!children ||
|
|
73
|
-
(children === null || children === void 0 ? void 0 : children.type) ===
|
|
74
|
-
children ===
|
|
73
|
+
(children === null || children === void 0 ? void 0 : children.type) === react_2.default.Fragment ||
|
|
74
|
+
children === react_2.default.Fragment) {
|
|
75
75
|
console.error("<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>");
|
|
76
76
|
return null;
|
|
77
77
|
}
|
|
@@ -79,19 +79,19 @@ exports.Tooltip = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
79
79
|
(userOpen !== null && userOpen !== void 0 ? userOpen : open) &&
|
|
80
80
|
console.warn(`Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop\n\nLength:${content.length}\nTooltip-content: ${content}`);
|
|
81
81
|
}
|
|
82
|
-
return (
|
|
83
|
-
(0,
|
|
82
|
+
return (react_2.default.createElement(react_2.default.Fragment, null,
|
|
83
|
+
(0, react_2.cloneElement)(children, getReferenceProps(Object.assign(Object.assign({}, children.props), { ref: childMergedRef, "aria-describedby": (userOpen !== null && userOpen !== void 0 ? userOpen : open)
|
|
84
84
|
? (0, clsx_1.default)(ariaId, children === null || children === void 0 ? void 0 : children.props["aria-describedby"])
|
|
85
85
|
: children === null || children === void 0 ? void 0 : children.props["aria-describedby"] }))),
|
|
86
|
-
|
|
86
|
+
react_2.default.createElement(react_1.FloatingPortal, { root: rootElement }, (userOpen !== null && userOpen !== void 0 ? userOpen : open) && (react_2.default.createElement("div", Object.assign({}, getFloatingProps(Object.assign(Object.assign({}, rest), { ref: mergedRef, style: {
|
|
87
87
|
position: strategy,
|
|
88
88
|
top: y !== null && y !== void 0 ? y : 0,
|
|
89
89
|
left: x !== null && x !== void 0 ? x : 0,
|
|
90
90
|
visibility: referenceHidden ? "hidden" : "visible",
|
|
91
91
|
}, role: "tooltip", id: ariaId, className: (0, clsx_1.default)("navds-tooltip", "navds-detail navds-detail--small", className) })), { "data-side": placement }),
|
|
92
92
|
content,
|
|
93
|
-
keys && (
|
|
94
|
-
_arrow && (
|
|
93
|
+
keys && (react_2.default.createElement("span", { className: "navds-tooltip__keys" }, keys.map((key) => (react_2.default.createElement(__1.Detail, { size: "small", as: "kbd", key: key, className: "navds-tooltip__key" }, key))))),
|
|
94
|
+
_arrow && (react_2.default.createElement("div", { ref: (node) => {
|
|
95
95
|
arrowRef.current = node;
|
|
96
96
|
}, className: "navds-tooltip__arrow", style: {
|
|
97
97
|
left: arrowX != null ? `${arrowX}px` : "",
|
package/esm/chat/Bubble.d.ts
CHANGED
|
@@ -16,6 +16,10 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
16
16
|
* Background color on bubble
|
|
17
17
|
*/
|
|
18
18
|
backgroundColor?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Overrides hoizontal position of toptext
|
|
21
|
+
*/
|
|
22
|
+
toptextPosition?: "left" | "right";
|
|
19
23
|
}
|
|
20
24
|
export type BubbleType = React.ForwardRefExoticComponent<BubbleProps & React.RefAttributes<HTMLDivElement>>;
|
|
21
25
|
declare const Bubble: BubbleType;
|
package/esm/chat/Bubble.js
CHANGED
|
@@ -13,9 +13,9 @@ import React, { forwardRef } from "react";
|
|
|
13
13
|
import cl from "clsx";
|
|
14
14
|
import { Detail } from "../typography";
|
|
15
15
|
const Bubble = forwardRef((_a, ref) => {
|
|
16
|
-
var { children, className, name, timestamp, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor"]);
|
|
16
|
+
var { children, className, name, timestamp, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor", "toptextPosition"]);
|
|
17
17
|
return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-chat__bubble", className), style: { backgroundColor: backgroundColor } }, rest),
|
|
18
|
-
(timestamp || name) && (React.createElement("div", { className:
|
|
18
|
+
(timestamp || name) && (React.createElement("div", { className: cl(`navds-chat__top-text`, toptextPosition && `navds-chat__top-text--${toptextPosition}`) },
|
|
19
19
|
name && React.createElement(Detail, { className: "navds-chat__name" }, name),
|
|
20
20
|
timestamp && (React.createElement(Detail, { className: "navds-chat__timestamp" }, timestamp)))),
|
|
21
21
|
children));
|
package/esm/chat/Bubble.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bubble.js","sourceRoot":"","sources":["../../src/chat/Bubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Bubble.js","sourceRoot":"","sources":["../../src/chat/Bubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AA6BvC,MAAM,MAAM,GAAe,UAAU,CACnC,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,eAAe,EACf,eAAe,OAEhB,EADI,IAAI,cAPT,oFAQC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAC9C,KAAK,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,IACvC,IAAI;QAEP,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CACtB,6BACE,SAAS,EAAE,EAAE,CACX,sBAAsB,EACtB,eAAe,IAAI,yBAAyB,eAAe,EAAE,CAC9D;YAEA,IAAI,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAC,kBAAkB,IAAE,IAAI,CAAU;YAC5D,SAAS,IAAI,CACZ,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,IAAE,SAAS,CAAU,CAC/D,CACG,CACP;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
package/esm/chat/Chat.d.ts
CHANGED
|
@@ -30,6 +30,11 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
30
30
|
* @default "left"
|
|
31
31
|
*/
|
|
32
32
|
position?: "left" | "right";
|
|
33
|
+
/**
|
|
34
|
+
* Hoizontal position of toptext
|
|
35
|
+
* @default Same as chat
|
|
36
|
+
*/
|
|
37
|
+
toptextPosition?: "left" | "right";
|
|
33
38
|
}
|
|
34
39
|
interface ChatComponent extends React.ForwardRefExoticComponent<ChatProps & React.RefAttributes<HTMLDivElement>> {
|
|
35
40
|
Bubble: BubbleType;
|
package/esm/chat/Chat.js
CHANGED
|
@@ -14,8 +14,8 @@ import cl from "clsx";
|
|
|
14
14
|
import Bubble from "./Bubble";
|
|
15
15
|
import { BodyLong, BodyShort } from "..";
|
|
16
16
|
export const Chat = forwardRef((_a, ref) => {
|
|
17
|
-
var { children, className, name, timestamp, avatar, position = "left", avatarBgColor, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "avatarBgColor", "backgroundColor"]);
|
|
18
|
-
return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-chat", className, `navds-chat--${position}`) }, rest),
|
|
17
|
+
var { children, className, name, timestamp, avatar, position = "left", avatarBgColor, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "avatarBgColor", "backgroundColor", "toptextPosition"]);
|
|
18
|
+
return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-chat", className, `navds-chat--${position} navds-chat--top-text-${toptextPosition !== null && toptextPosition !== void 0 ? toptextPosition : position}`) }, rest),
|
|
19
19
|
React.createElement(BodyShort, { as: "div", className: "navds-chat__avatar", style: { backgroundColor: avatarBgColor } }, avatar),
|
|
20
20
|
React.createElement("ol", { className: "navds-chat__bubble-wrapper" }, React.Children.map(children, (child, i) => {
|
|
21
21
|
if (React.isValidElement(child)) {
|
package/esm/chat/Chat.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../src/chat/Chat.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../src/chat/Chat.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AA8CzC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,aAAa,EACb,eAAe,EACf,eAAe,OAEhB,EADI,IAAI,cAVT,2HAWC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,YAAY,EACZ,SAAS,EACT,eAAe,QAAQ,yBACrB,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,QACrB,EAAE,CACH,IACG,IAAI;QAER,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE,IAExC,MAAM,CACG;QACZ,4BAAI,SAAS,EAAC,4BAA4B,IACvC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC/B,OAAO,CACL,oBAAC,QAAQ,IAAC,EAAE,EAAC,IAAI,IACd,KAAK,CAAC,YAAY,CAAC,KAAK,kBACvB,IAAI,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACxC,SAAS,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvD,eAAe,IACZ,KAAK,CAAC,KAAK,EACd,CACO,CACZ,CAAC;aACH;QACH,CAAC,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CACe,CAAC;AAEnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AAErB,eAAe,IAAI,CAAC"}
|
package/esm/popover/Popover.js
CHANGED
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { arrow as flArrow, autoUpdate, flip, offset as flOffset, shift, useClick, useDismiss, useFloating, useInteractions, } from "@floating-ui/react
|
|
12
|
+
import { arrow as flArrow, autoUpdate, flip, offset as flOffset, shift, useClick, useDismiss, useFloating, useInteractions, } from "@floating-ui/react";
|
|
13
13
|
import cl from "clsx";
|
|
14
14
|
import React, { forwardRef, useCallback, useMemo, useRef, } from "react";
|
|
15
15
|
import { mergeRefs } from "..";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/popover/Popover.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,KAAK,IAAI,OAAO,EAChB,UAAU,EACV,IAAI,EACJ,MAAM,IAAI,QAAQ,EAClB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,WAAW,EACX,eAAe,GAChB,MAAM,
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/popover/Popover.tsx"],"names":[],"mappings":"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"}
|
package/esm/tooltip/Tooltip.js
CHANGED
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { arrow as flArrow, autoUpdate, flip, FloatingPortal, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react
|
|
12
|
+
import { arrow as flArrow, autoUpdate, flip, FloatingPortal, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
|
|
13
13
|
import cl from "clsx";
|
|
14
14
|
import React, { cloneElement, forwardRef, useMemo, useRef, useState, } from "react";
|
|
15
15
|
import { Detail, useProvider } from "..";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,KAAK,IAAI,OAAO,EAChB,UAAU,EACV,IAAI,EACJ,cAAc,EACd,MAAM,EACN,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,eAAe,GAChB,MAAM,
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/tooltip/Tooltip.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.0.
|
|
3
|
+
"version": "2.0.15",
|
|
4
4
|
"description": "Aksel react-components for NAV designsystem",
|
|
5
5
|
"author": "Aksel | NAV designsystem team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"test": "TZ=UTC jest"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@floating-ui/react
|
|
40
|
-
"@navikt/ds-icons": "^2.0.
|
|
39
|
+
"@floating-ui/react": "0.17.0",
|
|
40
|
+
"@navikt/ds-icons": "^2.0.15",
|
|
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",
|
package/src/chat/Bubble.tsx
CHANGED
|
@@ -19,6 +19,10 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
19
19
|
* Background color on bubble
|
|
20
20
|
*/
|
|
21
21
|
backgroundColor?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Overrides hoizontal position of toptext
|
|
24
|
+
*/
|
|
25
|
+
toptextPosition?: "left" | "right";
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
export type BubbleType = React.ForwardRefExoticComponent<
|
|
@@ -26,7 +30,18 @@ export type BubbleType = React.ForwardRefExoticComponent<
|
|
|
26
30
|
>;
|
|
27
31
|
|
|
28
32
|
const Bubble: BubbleType = forwardRef(
|
|
29
|
-
(
|
|
33
|
+
(
|
|
34
|
+
{
|
|
35
|
+
children,
|
|
36
|
+
className,
|
|
37
|
+
name,
|
|
38
|
+
timestamp,
|
|
39
|
+
backgroundColor,
|
|
40
|
+
toptextPosition,
|
|
41
|
+
...rest
|
|
42
|
+
},
|
|
43
|
+
ref
|
|
44
|
+
) => {
|
|
30
45
|
return (
|
|
31
46
|
<div
|
|
32
47
|
ref={ref}
|
|
@@ -35,7 +50,12 @@ const Bubble: BubbleType = forwardRef(
|
|
|
35
50
|
{...rest}
|
|
36
51
|
>
|
|
37
52
|
{(timestamp || name) && (
|
|
38
|
-
<div
|
|
53
|
+
<div
|
|
54
|
+
className={cl(
|
|
55
|
+
`navds-chat__top-text`,
|
|
56
|
+
toptextPosition && `navds-chat__top-text--${toptextPosition}`
|
|
57
|
+
)}
|
|
58
|
+
>
|
|
39
59
|
{name && <Detail className="navds-chat__name">{name}</Detail>}
|
|
40
60
|
{timestamp && (
|
|
41
61
|
<Detail className="navds-chat__timestamp">{timestamp}</Detail>
|
package/src/chat/Chat.tsx
CHANGED
|
@@ -33,6 +33,11 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
33
33
|
* @default "left"
|
|
34
34
|
*/
|
|
35
35
|
position?: "left" | "right";
|
|
36
|
+
/**
|
|
37
|
+
* Hoizontal position of toptext
|
|
38
|
+
* @default Same as chat
|
|
39
|
+
*/
|
|
40
|
+
toptextPosition?: "left" | "right";
|
|
36
41
|
}
|
|
37
42
|
|
|
38
43
|
interface ChatComponent
|
|
@@ -53,6 +58,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
|
|
|
53
58
|
position = "left",
|
|
54
59
|
avatarBgColor,
|
|
55
60
|
backgroundColor,
|
|
61
|
+
toptextPosition,
|
|
56
62
|
...rest
|
|
57
63
|
},
|
|
58
64
|
ref
|
|
@@ -60,7 +66,13 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
|
|
|
60
66
|
return (
|
|
61
67
|
<div
|
|
62
68
|
ref={ref}
|
|
63
|
-
className={cl(
|
|
69
|
+
className={cl(
|
|
70
|
+
"navds-chat",
|
|
71
|
+
className,
|
|
72
|
+
`navds-chat--${position} navds-chat--top-text-${
|
|
73
|
+
toptextPosition ?? position
|
|
74
|
+
}`
|
|
75
|
+
)}
|
|
64
76
|
{...rest}
|
|
65
77
|
>
|
|
66
78
|
<BodyShort
|
|
@@ -116,6 +116,57 @@ export const Position = () => {
|
|
|
116
116
|
);
|
|
117
117
|
};
|
|
118
118
|
|
|
119
|
+
export const ToptextPosition = () => {
|
|
120
|
+
return (
|
|
121
|
+
<div className="colgap">
|
|
122
|
+
<Chat
|
|
123
|
+
avatar="ON"
|
|
124
|
+
name="Ola Normann"
|
|
125
|
+
timestamp="01.01.21 14:00"
|
|
126
|
+
backgroundColor="rgba(255, 249, 240, 1)"
|
|
127
|
+
avatarBgColor="rgba(255, 236, 204, 1)"
|
|
128
|
+
toptextPosition="right"
|
|
129
|
+
>
|
|
130
|
+
<Chat.Bubble>
|
|
131
|
+
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
|
132
|
+
laboris labore nisi ut.
|
|
133
|
+
</Chat.Bubble>
|
|
134
|
+
</Chat>
|
|
135
|
+
<Chat
|
|
136
|
+
avatar="KH"
|
|
137
|
+
name="Kari Høyli"
|
|
138
|
+
timestamp="01.01.21 14:32"
|
|
139
|
+
position="right"
|
|
140
|
+
backgroundColor="rgba(230, 240, 255, 1)"
|
|
141
|
+
avatarBgColor="rgba(204, 225, 255, 1)"
|
|
142
|
+
toptextPosition="left"
|
|
143
|
+
>
|
|
144
|
+
<Chat.Bubble>
|
|
145
|
+
Reprehenderit pariatur officia exercitation laboris.
|
|
146
|
+
</Chat.Bubble>
|
|
147
|
+
<Chat.Bubble>
|
|
148
|
+
Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
|
|
149
|
+
est dolore incididunt. Occaecat cupidatat magna.
|
|
150
|
+
</Chat.Bubble>
|
|
151
|
+
</Chat>
|
|
152
|
+
<Chat
|
|
153
|
+
avatar="ON"
|
|
154
|
+
name="Ola Normann"
|
|
155
|
+
timestamp="01.01.21 15:00"
|
|
156
|
+
backgroundColor="rgba(255, 249, 240, 1)"
|
|
157
|
+
avatarBgColor="rgba(255, 236, 204, 1)"
|
|
158
|
+
>
|
|
159
|
+
<Chat.Bubble toptextPosition="right">
|
|
160
|
+
Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
|
|
161
|
+
dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
|
|
162
|
+
ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
|
|
163
|
+
labore sunt aute.
|
|
164
|
+
</Chat.Bubble>
|
|
165
|
+
</Chat>
|
|
166
|
+
</div>
|
|
167
|
+
);
|
|
168
|
+
};
|
|
169
|
+
|
|
119
170
|
export const Avatar = () => {
|
|
120
171
|
return (
|
|
121
172
|
<Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
|
package/src/popover/Popover.tsx
CHANGED