@navikt/ds-react 2.6.1 → 2.7.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.
|
@@ -33,9 +33,13 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
33
33
|
}
|
|
34
34
|
return t;
|
|
35
35
|
};
|
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
+
};
|
|
36
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
40
|
/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js */
|
|
38
41
|
const react_1 = __importStar(require("react"));
|
|
42
|
+
const react_dom_1 = __importDefault(require("react-dom"));
|
|
39
43
|
const __1 = require("..");
|
|
40
44
|
/**
|
|
41
45
|
* https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument.ts
|
|
@@ -56,7 +60,7 @@ const TextareaAutosize = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
56
60
|
const shadowRef = (0, react_1.useRef)(null);
|
|
57
61
|
const renders = (0, react_1.useRef)(0);
|
|
58
62
|
const [state, setState] = (0, react_1.useState)({});
|
|
59
|
-
const
|
|
63
|
+
const getUpdatedState = react_1.default.useCallback(() => {
|
|
60
64
|
if (!inputRef.current || !shadowRef.current)
|
|
61
65
|
return;
|
|
62
66
|
const input = inputRef.current;
|
|
@@ -97,42 +101,69 @@ const TextareaAutosize = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
97
101
|
// Take the box sizing into account for applying this value as a style.
|
|
98
102
|
const outerHeightStyle = outerHeight + (boxSizing === "border-box" ? padding + border : 0);
|
|
99
103
|
const overflow = Math.abs(outerHeight - innerHeight) <= 1;
|
|
104
|
+
return { outerHeightStyle, overflow };
|
|
105
|
+
}, [maxRows, minRows, other === null || other === void 0 ? void 0 : other.placeholder]);
|
|
106
|
+
const syncHeight = react_1.default.useCallback(() => {
|
|
107
|
+
const newState = getUpdatedState();
|
|
108
|
+
if (isEmpty(newState)) {
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
100
111
|
setState((prevState) => {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
112
|
+
return updateState(prevState, newState);
|
|
113
|
+
});
|
|
114
|
+
}, [getUpdatedState]);
|
|
115
|
+
const updateState = (prevState, newState) => {
|
|
116
|
+
const { outerHeightStyle, overflow } = newState;
|
|
117
|
+
// Need a large enough difference to update the height.
|
|
118
|
+
// This prevents infinite rendering loop.
|
|
119
|
+
if (renders.current < 20 &&
|
|
120
|
+
((outerHeightStyle > 0 &&
|
|
121
|
+
Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
|
|
122
|
+
prevState.overflow !== overflow)) {
|
|
123
|
+
renders.current += 1;
|
|
124
|
+
return {
|
|
125
|
+
overflow,
|
|
126
|
+
outerHeightStyle,
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
if (process.env.NODE_ENV !== "production") {
|
|
130
|
+
if (renders.current === 20) {
|
|
131
|
+
console.error([
|
|
132
|
+
"Textarea: Too many re-renders. The layout is unstable.",
|
|
133
|
+
"TextareaAutosize limits the number of renders to prevent an infinite loop.",
|
|
134
|
+
].join("\n"));
|
|
121
135
|
}
|
|
122
|
-
|
|
136
|
+
}
|
|
137
|
+
return prevState;
|
|
138
|
+
};
|
|
139
|
+
const withFlushSync = () => {
|
|
140
|
+
const newState = getUpdatedState();
|
|
141
|
+
if (isEmpty(newState)) {
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
// In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
|
|
145
|
+
// when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
|
|
146
|
+
// Related issue - https://github.com/facebook/react/issues/24331
|
|
147
|
+
react_dom_1.default.flushSync(() => {
|
|
148
|
+
setState((prevState) => {
|
|
149
|
+
return updateState(prevState, newState);
|
|
150
|
+
});
|
|
123
151
|
});
|
|
124
|
-
}
|
|
125
|
-
|
|
152
|
+
};
|
|
153
|
+
react_1.default.useEffect(() => {
|
|
126
154
|
const handleResize = (0, __1.debounce)(() => {
|
|
127
155
|
renders.current = 0;
|
|
128
|
-
|
|
156
|
+
if (inputRef.current) {
|
|
157
|
+
withFlushSync();
|
|
158
|
+
}
|
|
129
159
|
});
|
|
130
|
-
const containerWindow = ownerWindow(inputRef.current);
|
|
131
|
-
containerWindow.addEventListener("resize", handleResize);
|
|
132
160
|
let resizeObserver;
|
|
161
|
+
const input = inputRef.current;
|
|
162
|
+
const containerWindow = ownerWindow(input);
|
|
163
|
+
containerWindow.addEventListener("resize", handleResize);
|
|
133
164
|
if (typeof ResizeObserver !== "undefined") {
|
|
134
165
|
resizeObserver = new ResizeObserver(handleResize);
|
|
135
|
-
resizeObserver.observe(
|
|
166
|
+
resizeObserver.observe(input);
|
|
136
167
|
}
|
|
137
168
|
return () => {
|
|
138
169
|
handleResize.clear();
|
|
@@ -141,7 +172,7 @@ const TextareaAutosize = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
141
172
|
resizeObserver.disconnect();
|
|
142
173
|
}
|
|
143
174
|
};
|
|
144
|
-
}
|
|
175
|
+
});
|
|
145
176
|
(0, __1.useClientLayoutEffect)(() => {
|
|
146
177
|
syncHeight();
|
|
147
178
|
});
|
|
@@ -171,4 +202,10 @@ const TextareaAutosize = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
171
202
|
// Create a new layer, increase the isolation of the computed values
|
|
172
203
|
transform: "translateZ(0)" }, style) })));
|
|
173
204
|
});
|
|
205
|
+
function isEmpty(obj) {
|
|
206
|
+
return (obj === undefined ||
|
|
207
|
+
obj === null ||
|
|
208
|
+
Object.keys(obj).length === 0 ||
|
|
209
|
+
((obj === null || obj === void 0 ? void 0 : obj.outerHeightStyle) === 0 && !(obj === null || obj === void 0 ? void 0 : obj.overflow)));
|
|
210
|
+
}
|
|
174
211
|
exports.default = TextareaAutosize;
|
|
@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js */
|
|
13
|
-
import React, { forwardRef,
|
|
13
|
+
import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
|
|
14
|
+
import ReactDOM from "react-dom";
|
|
14
15
|
import { debounce, mergeRefs, useClientLayoutEffect } from "..";
|
|
15
16
|
/**
|
|
16
17
|
* https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument.ts
|
|
@@ -31,7 +32,7 @@ const TextareaAutosize = forwardRef((_a, ref) => {
|
|
|
31
32
|
const shadowRef = useRef(null);
|
|
32
33
|
const renders = useRef(0);
|
|
33
34
|
const [state, setState] = useState({});
|
|
34
|
-
const
|
|
35
|
+
const getUpdatedState = React.useCallback(() => {
|
|
35
36
|
if (!inputRef.current || !shadowRef.current)
|
|
36
37
|
return;
|
|
37
38
|
const input = inputRef.current;
|
|
@@ -72,42 +73,69 @@ const TextareaAutosize = forwardRef((_a, ref) => {
|
|
|
72
73
|
// Take the box sizing into account for applying this value as a style.
|
|
73
74
|
const outerHeightStyle = outerHeight + (boxSizing === "border-box" ? padding + border : 0);
|
|
74
75
|
const overflow = Math.abs(outerHeight - innerHeight) <= 1;
|
|
76
|
+
return { outerHeightStyle, overflow };
|
|
77
|
+
}, [maxRows, minRows, other === null || other === void 0 ? void 0 : other.placeholder]);
|
|
78
|
+
const syncHeight = React.useCallback(() => {
|
|
79
|
+
const newState = getUpdatedState();
|
|
80
|
+
if (isEmpty(newState)) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
75
83
|
setState((prevState) => {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
84
|
+
return updateState(prevState, newState);
|
|
85
|
+
});
|
|
86
|
+
}, [getUpdatedState]);
|
|
87
|
+
const updateState = (prevState, newState) => {
|
|
88
|
+
const { outerHeightStyle, overflow } = newState;
|
|
89
|
+
// Need a large enough difference to update the height.
|
|
90
|
+
// This prevents infinite rendering loop.
|
|
91
|
+
if (renders.current < 20 &&
|
|
92
|
+
((outerHeightStyle > 0 &&
|
|
93
|
+
Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
|
|
94
|
+
prevState.overflow !== overflow)) {
|
|
95
|
+
renders.current += 1;
|
|
96
|
+
return {
|
|
97
|
+
overflow,
|
|
98
|
+
outerHeightStyle,
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
if (process.env.NODE_ENV !== "production") {
|
|
102
|
+
if (renders.current === 20) {
|
|
103
|
+
console.error([
|
|
104
|
+
"Textarea: Too many re-renders. The layout is unstable.",
|
|
105
|
+
"TextareaAutosize limits the number of renders to prevent an infinite loop.",
|
|
106
|
+
].join("\n"));
|
|
96
107
|
}
|
|
97
|
-
|
|
108
|
+
}
|
|
109
|
+
return prevState;
|
|
110
|
+
};
|
|
111
|
+
const withFlushSync = () => {
|
|
112
|
+
const newState = getUpdatedState();
|
|
113
|
+
if (isEmpty(newState)) {
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
// In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
|
|
117
|
+
// when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
|
|
118
|
+
// Related issue - https://github.com/facebook/react/issues/24331
|
|
119
|
+
ReactDOM.flushSync(() => {
|
|
120
|
+
setState((prevState) => {
|
|
121
|
+
return updateState(prevState, newState);
|
|
122
|
+
});
|
|
98
123
|
});
|
|
99
|
-
}
|
|
100
|
-
useEffect(() => {
|
|
124
|
+
};
|
|
125
|
+
React.useEffect(() => {
|
|
101
126
|
const handleResize = debounce(() => {
|
|
102
127
|
renders.current = 0;
|
|
103
|
-
|
|
128
|
+
if (inputRef.current) {
|
|
129
|
+
withFlushSync();
|
|
130
|
+
}
|
|
104
131
|
});
|
|
105
|
-
const containerWindow = ownerWindow(inputRef.current);
|
|
106
|
-
containerWindow.addEventListener("resize", handleResize);
|
|
107
132
|
let resizeObserver;
|
|
133
|
+
const input = inputRef.current;
|
|
134
|
+
const containerWindow = ownerWindow(input);
|
|
135
|
+
containerWindow.addEventListener("resize", handleResize);
|
|
108
136
|
if (typeof ResizeObserver !== "undefined") {
|
|
109
137
|
resizeObserver = new ResizeObserver(handleResize);
|
|
110
|
-
resizeObserver.observe(
|
|
138
|
+
resizeObserver.observe(input);
|
|
111
139
|
}
|
|
112
140
|
return () => {
|
|
113
141
|
handleResize.clear();
|
|
@@ -116,7 +144,7 @@ const TextareaAutosize = forwardRef((_a, ref) => {
|
|
|
116
144
|
resizeObserver.disconnect();
|
|
117
145
|
}
|
|
118
146
|
};
|
|
119
|
-
}
|
|
147
|
+
});
|
|
120
148
|
useClientLayoutEffect(() => {
|
|
121
149
|
syncHeight();
|
|
122
150
|
});
|
|
@@ -146,5 +174,11 @@ const TextareaAutosize = forwardRef((_a, ref) => {
|
|
|
146
174
|
// Create a new layer, increase the isolation of the computed values
|
|
147
175
|
transform: "translateZ(0)" }, style) })));
|
|
148
176
|
});
|
|
177
|
+
function isEmpty(obj) {
|
|
178
|
+
return (obj === undefined ||
|
|
179
|
+
obj === null ||
|
|
180
|
+
Object.keys(obj).length === 0 ||
|
|
181
|
+
((obj === null || obj === void 0 ? void 0 : obj.outerHeightStyle) === 0 && !(obj === null || obj === void 0 ? void 0 : obj.overflow)));
|
|
182
|
+
}
|
|
149
183
|
export default TextareaAutosize;
|
|
150
184
|
//# sourceMappingURL=TextareaAutoSize.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextareaAutoSize.js","sourceRoot":"","sources":["../../src/util/TextareaAutoSize.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,+GAA+G;AAC/G,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"TextareaAutoSize.js","sourceRoot":"","sources":["../../src/util/TextareaAutoSize.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.
|
|
3
|
+
"version": "2.7.0",
|
|
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.
|
|
40
|
+
"@navikt/ds-icons": "^2.7.0",
|
|
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",
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
/* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js */
|
|
2
|
-
import React, {
|
|
3
|
-
|
|
4
|
-
useCallback,
|
|
5
|
-
useEffect,
|
|
6
|
-
useMemo,
|
|
7
|
-
useRef,
|
|
8
|
-
useState,
|
|
9
|
-
} from "react";
|
|
2
|
+
import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
|
|
3
|
+
import ReactDOM from "react-dom";
|
|
10
4
|
import { debounce, mergeRefs, useClientLayoutEffect } from "..";
|
|
11
5
|
|
|
12
6
|
/**
|
|
@@ -50,7 +44,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
|
|
|
50
44
|
const renders = useRef(0);
|
|
51
45
|
const [state, setState] = useState<any>({});
|
|
52
46
|
|
|
53
|
-
const
|
|
47
|
+
const getUpdatedState = React.useCallback(() => {
|
|
54
48
|
if (!inputRef.current || !shadowRef.current) return;
|
|
55
49
|
const input = inputRef.current;
|
|
56
50
|
const containerWindow = ownerWindow(input);
|
|
@@ -102,50 +96,85 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
|
|
|
102
96
|
outerHeight + (boxSizing === "border-box" ? padding + border : 0);
|
|
103
97
|
const overflow = Math.abs(outerHeight - innerHeight) <= 1;
|
|
104
98
|
|
|
99
|
+
return { outerHeightStyle, overflow };
|
|
100
|
+
}, [maxRows, minRows, other?.placeholder]);
|
|
101
|
+
|
|
102
|
+
const syncHeight = React.useCallback(() => {
|
|
103
|
+
const newState = getUpdatedState();
|
|
104
|
+
|
|
105
|
+
if (isEmpty(newState)) {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
|
|
105
109
|
setState((prevState) => {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
renders.current < 20 &&
|
|
110
|
-
((outerHeightStyle > 0 &&
|
|
111
|
-
Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) >
|
|
112
|
-
1) ||
|
|
113
|
-
prevState.overflow !== overflow)
|
|
114
|
-
) {
|
|
115
|
-
renders.current += 1;
|
|
116
|
-
return {
|
|
117
|
-
overflow,
|
|
118
|
-
outerHeightStyle,
|
|
119
|
-
};
|
|
120
|
-
}
|
|
110
|
+
return updateState(prevState, newState);
|
|
111
|
+
});
|
|
112
|
+
}, [getUpdatedState]);
|
|
121
113
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
114
|
+
const updateState = (prevState, newState) => {
|
|
115
|
+
const { outerHeightStyle, overflow } = newState;
|
|
116
|
+
// Need a large enough difference to update the height.
|
|
117
|
+
// This prevents infinite rendering loop.
|
|
118
|
+
if (
|
|
119
|
+
renders.current < 20 &&
|
|
120
|
+
((outerHeightStyle > 0 &&
|
|
121
|
+
Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
|
|
122
|
+
prevState.overflow !== overflow)
|
|
123
|
+
) {
|
|
124
|
+
renders.current += 1;
|
|
125
|
+
return {
|
|
126
|
+
overflow,
|
|
127
|
+
outerHeightStyle,
|
|
128
|
+
};
|
|
129
|
+
}
|
|
130
|
+
if (process.env.NODE_ENV !== "production") {
|
|
131
|
+
if (renders.current === 20) {
|
|
132
|
+
console.error(
|
|
133
|
+
[
|
|
134
|
+
"Textarea: Too many re-renders. The layout is unstable.",
|
|
135
|
+
"TextareaAutosize limits the number of renders to prevent an infinite loop.",
|
|
136
|
+
].join("\n")
|
|
137
|
+
);
|
|
131
138
|
}
|
|
139
|
+
}
|
|
140
|
+
return prevState;
|
|
141
|
+
};
|
|
132
142
|
|
|
133
|
-
|
|
143
|
+
const withFlushSync = () => {
|
|
144
|
+
const newState = getUpdatedState();
|
|
145
|
+
|
|
146
|
+
if (isEmpty(newState)) {
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
|
|
151
|
+
// when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
|
|
152
|
+
// Related issue - https://github.com/facebook/react/issues/24331
|
|
153
|
+
ReactDOM.flushSync(() => {
|
|
154
|
+
setState((prevState) => {
|
|
155
|
+
return updateState(prevState, newState);
|
|
156
|
+
});
|
|
134
157
|
});
|
|
135
|
-
}
|
|
158
|
+
};
|
|
136
159
|
|
|
137
|
-
useEffect(() => {
|
|
160
|
+
React.useEffect(() => {
|
|
138
161
|
const handleResize = debounce(() => {
|
|
139
162
|
renders.current = 0;
|
|
140
|
-
|
|
163
|
+
|
|
164
|
+
if (inputRef.current) {
|
|
165
|
+
withFlushSync();
|
|
166
|
+
}
|
|
141
167
|
});
|
|
142
|
-
|
|
168
|
+
let resizeObserver: ResizeObserver;
|
|
169
|
+
|
|
170
|
+
const input = inputRef.current!;
|
|
171
|
+
const containerWindow = ownerWindow(input);
|
|
172
|
+
|
|
143
173
|
containerWindow.addEventListener("resize", handleResize);
|
|
144
|
-
let resizeObserver;
|
|
145
174
|
|
|
146
175
|
if (typeof ResizeObserver !== "undefined") {
|
|
147
176
|
resizeObserver = new ResizeObserver(handleResize);
|
|
148
|
-
resizeObserver.observe(
|
|
177
|
+
resizeObserver.observe(input);
|
|
149
178
|
}
|
|
150
179
|
|
|
151
180
|
return () => {
|
|
@@ -155,7 +184,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
|
|
|
155
184
|
resizeObserver.disconnect();
|
|
156
185
|
}
|
|
157
186
|
};
|
|
158
|
-
}
|
|
187
|
+
});
|
|
159
188
|
|
|
160
189
|
useClientLayoutEffect(() => {
|
|
161
190
|
syncHeight();
|
|
@@ -221,4 +250,13 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
|
|
|
221
250
|
}
|
|
222
251
|
);
|
|
223
252
|
|
|
253
|
+
function isEmpty(obj: any) {
|
|
254
|
+
return (
|
|
255
|
+
obj === undefined ||
|
|
256
|
+
obj === null ||
|
|
257
|
+
Object.keys(obj).length === 0 ||
|
|
258
|
+
(obj?.outerHeightStyle === 0 && !obj?.overflow)
|
|
259
|
+
);
|
|
260
|
+
}
|
|
261
|
+
|
|
224
262
|
export default TextareaAutosize;
|