@biblioteksentralen/react 1.0.1 → 2.0.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/dist/index.js +72 -205
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +35 -139
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -3
package/dist/index.mjs
CHANGED
|
@@ -1,112 +1,6 @@
|
|
|
1
1
|
// src/index.ts
|
|
2
2
|
export * from "@chakra-ui/react";
|
|
3
3
|
|
|
4
|
-
// ../icons/dist/index.mjs
|
|
5
|
-
import React from "react";
|
|
6
|
-
import React2 from "react";
|
|
7
|
-
import React3 from "react";
|
|
8
|
-
import React4 from "react";
|
|
9
|
-
import React5 from "react";
|
|
10
|
-
import React6 from "react";
|
|
11
|
-
import React7 from "react";
|
|
12
|
-
import React8 from "react";
|
|
13
|
-
import * as React9 from "react";
|
|
14
|
-
import * as React10 from "react";
|
|
15
|
-
import * as React11 from "react";
|
|
16
|
-
import * as React12 from "react";
|
|
17
|
-
import React13 from "react";
|
|
18
|
-
import React14 from "react";
|
|
19
|
-
import React15 from "react";
|
|
20
|
-
import React16 from "react";
|
|
21
|
-
import React17 from "react";
|
|
22
|
-
import React18 from "react";
|
|
23
|
-
import React19 from "react";
|
|
24
|
-
import React20 from "react";
|
|
25
|
-
import React21 from "react";
|
|
26
|
-
import React22 from "react";
|
|
27
|
-
import React23 from "react";
|
|
28
|
-
import React24 from "react";
|
|
29
|
-
import React25 from "react";
|
|
30
|
-
import React26 from "react";
|
|
31
|
-
import React27 from "react";
|
|
32
|
-
import React28 from "react";
|
|
33
|
-
import React29 from "react";
|
|
34
|
-
import React30 from "react";
|
|
35
|
-
import React31 from "react";
|
|
36
|
-
import React32 from "react";
|
|
37
|
-
import * as React33 from "react";
|
|
38
|
-
import React34 from "react";
|
|
39
|
-
import React35 from "react";
|
|
40
|
-
import React36 from "react";
|
|
41
|
-
import React37 from "react";
|
|
42
|
-
import React38 from "react";
|
|
43
|
-
import React39 from "react";
|
|
44
|
-
import React40 from "react";
|
|
45
|
-
import React41 from "react";
|
|
46
|
-
import React42 from "react";
|
|
47
|
-
import * as React43 from "react";
|
|
48
|
-
import React44 from "react";
|
|
49
|
-
import React45 from "react";
|
|
50
|
-
import React46 from "react";
|
|
51
|
-
import React47 from "react";
|
|
52
|
-
import React48 from "react";
|
|
53
|
-
import React49 from "react";
|
|
54
|
-
import React50 from "react";
|
|
55
|
-
import React51 from "react";
|
|
56
|
-
import React52 from "react";
|
|
57
|
-
import React53 from "react";
|
|
58
|
-
import * as React54 from "react";
|
|
59
|
-
import React55 from "react";
|
|
60
|
-
import React56 from "react";
|
|
61
|
-
import React57 from "react";
|
|
62
|
-
import React58 from "react";
|
|
63
|
-
import React59 from "react";
|
|
64
|
-
import React60 from "react";
|
|
65
|
-
import React61 from "react";
|
|
66
|
-
import React62 from "react";
|
|
67
|
-
import React63 from "react";
|
|
68
|
-
import React64 from "react";
|
|
69
|
-
import React65 from "react";
|
|
70
|
-
import React66 from "react";
|
|
71
|
-
import React67 from "react";
|
|
72
|
-
import React68 from "react";
|
|
73
|
-
import React69 from "react";
|
|
74
|
-
import * as React70 from "react";
|
|
75
|
-
import React71 from "react";
|
|
76
|
-
import React72 from "react";
|
|
77
|
-
import React73 from "react";
|
|
78
|
-
import React74 from "react";
|
|
79
|
-
import React75 from "react";
|
|
80
|
-
import React76 from "react";
|
|
81
|
-
import React77 from "react";
|
|
82
|
-
import React78 from "react";
|
|
83
|
-
import React79 from "react";
|
|
84
|
-
import React80 from "react";
|
|
85
|
-
import * as React81 from "react";
|
|
86
|
-
import React82 from "react";
|
|
87
|
-
import React83 from "react";
|
|
88
|
-
import React84 from "react";
|
|
89
|
-
import React85 from "react";
|
|
90
|
-
import React86 from "react";
|
|
91
|
-
import React87 from "react";
|
|
92
|
-
import React88 from "react";
|
|
93
|
-
import React89 from "react";
|
|
94
|
-
import React90 from "react";
|
|
95
|
-
import React91 from "react";
|
|
96
|
-
import React92 from "react";
|
|
97
|
-
import React93 from "react";
|
|
98
|
-
import React94 from "react";
|
|
99
|
-
var BsCheckCircle = (props) => /* @__PURE__ */ React16.createElement("svg", { fill: "currentColor", viewBox: "0 0 16 16", height: "1em", width: "1em", ...props }, /* @__PURE__ */ React16.createElement("path", { d: "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" }), /* @__PURE__ */ React16.createElement("path", { d: "M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" }));
|
|
100
|
-
var BsExclamationCircle = (props) => /* @__PURE__ */ React21.createElement("svg", { fill: "currentColor", viewBox: "0 0 16 16", height: "1em", width: "1em", ...props }, /* @__PURE__ */ React21.createElement("path", { d: "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" }), /* @__PURE__ */ React21.createElement("path", { d: "M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" }));
|
|
101
|
-
var BsXCircle = (props) => /* @__PURE__ */ React31.createElement("svg", { fill: "currentColor", viewBox: "0 0 16 16", height: "1em", width: "1em", ...props }, /* @__PURE__ */ React31.createElement("path", { d: "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" }), /* @__PURE__ */ React31.createElement("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }));
|
|
102
|
-
var InformationIcon = (props) => /* @__PURE__ */ React70.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", ...props, viewBox: "2 2 20 20" }, /* @__PURE__ */ React70.createElement(
|
|
103
|
-
"path",
|
|
104
|
-
{
|
|
105
|
-
d: "M12 2.25c5.385 0 9.75 4.365 9.75 9.75s-4.365 9.75-9.75 9.75c-5.384 0-9.75-4.365-9.75-9.75S6.616 2.25 12 2.25zm0 1.5a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5zm0 6.5a.75.75 0 0 1 .75.75v4.971l-.007.102a.75.75 0 0 1-1.493-.102V11l.007-.102A.75.75 0 0 1 12 10.25zm0-2.75A.75.75 0 1 1 12 9a.75.75 0 0 1 0-1.5z",
|
|
106
|
-
fill: "currentColor"
|
|
107
|
-
}
|
|
108
|
-
));
|
|
109
|
-
|
|
110
4
|
// ../utils/dist/index.mjs
|
|
111
5
|
import { format } from "date-fns/format";
|
|
112
6
|
import { nb } from "date-fns/locale/nb";
|
|
@@ -137,8 +31,8 @@ var colors = {
|
|
|
137
31
|
statusYellow: "#bc5600",
|
|
138
32
|
statusGreen: "#24845b",
|
|
139
33
|
statusGreenLight: "#edf4f1",
|
|
140
|
-
|
|
141
|
-
|
|
34
|
+
statusRedLight: "#f8efef",
|
|
35
|
+
statusYellowLight: "#fff6e4",
|
|
142
36
|
neptune: {
|
|
143
37
|
"100": "#CFE6E8",
|
|
144
38
|
"200": "#9FCDD2",
|
|
@@ -157,18 +51,19 @@ function isDevelopment() {
|
|
|
157
51
|
|
|
158
52
|
// src/components/Alert.tsx
|
|
159
53
|
import { Box, Flex } from "@chakra-ui/react";
|
|
160
|
-
import
|
|
54
|
+
import React from "react";
|
|
55
|
+
import { AlertCircle, CheckCircle, Info, XCircle } from "react-feather";
|
|
161
56
|
var colorLookup = {
|
|
162
57
|
info: { bg: colors.lightBlue, color: colors.accentBlueMedium },
|
|
163
|
-
warning: { bg: colors.
|
|
164
|
-
success: { bg:
|
|
165
|
-
error: { bg: colors.
|
|
58
|
+
warning: { bg: colors.statusYellowLight, color: colors.statusYellow },
|
|
59
|
+
success: { bg: colors.statusGreenLight, color: colors.statusGreen },
|
|
60
|
+
error: { bg: colors.statusRedLight, color: colors.statusRed }
|
|
166
61
|
};
|
|
167
62
|
var iconLookup = {
|
|
168
|
-
info: /* @__PURE__ */
|
|
169
|
-
warning: /* @__PURE__ */
|
|
170
|
-
success: /* @__PURE__ */
|
|
171
|
-
error: /* @__PURE__ */
|
|
63
|
+
info: /* @__PURE__ */ React.createElement(Info, { strokeWidth: 1.75, role: "img", "aria-label": "Informasjon" }),
|
|
64
|
+
warning: /* @__PURE__ */ React.createElement(AlertCircle, { strokeWidth: 1.75, role: "img", "aria-label": "Advarsel" }),
|
|
65
|
+
success: /* @__PURE__ */ React.createElement(CheckCircle, { strokeWidth: 1.75, role: "img", "aria-label": "Suksess" }),
|
|
66
|
+
error: /* @__PURE__ */ React.createElement(XCircle, { strokeWidth: 1.75, role: "img", "aria-label": "Feil" })
|
|
172
67
|
};
|
|
173
68
|
var variantStyles = {
|
|
174
69
|
inline: {
|
|
@@ -179,13 +74,13 @@ var variantStyles = {
|
|
|
179
74
|
};
|
|
180
75
|
function Alert({ status, children, variant, ...rest }) {
|
|
181
76
|
const colors2 = colorLookup[status];
|
|
182
|
-
return /* @__PURE__ */
|
|
77
|
+
return /* @__PURE__ */ React.createElement(
|
|
183
78
|
Flex,
|
|
184
79
|
{
|
|
185
80
|
role: "alert",
|
|
186
81
|
flexWrap: "wrap",
|
|
187
82
|
alignItems: "center",
|
|
188
|
-
gridGap: "0.
|
|
83
|
+
gridGap: "0.5em 0.6em",
|
|
189
84
|
background: "white",
|
|
190
85
|
border: `0.1rem solid`,
|
|
191
86
|
borderColor: colors2.color,
|
|
@@ -195,8 +90,8 @@ function Alert({ status, children, variant, ...rest }) {
|
|
|
195
90
|
...variant ? variantStyles[variant] : {},
|
|
196
91
|
...rest
|
|
197
92
|
},
|
|
198
|
-
/* @__PURE__ */
|
|
199
|
-
/* @__PURE__ */
|
|
93
|
+
/* @__PURE__ */ React.createElement(Box, { color: colors2.color, flex: "0 0", marginLeft: "auto", marginRight: "auto", lineHeight: "1", fontSize: "1.5em" }, iconLookup[status]),
|
|
94
|
+
/* @__PURE__ */ React.createElement(Box, { flex: "1" }, children)
|
|
200
95
|
);
|
|
201
96
|
}
|
|
202
97
|
|
|
@@ -205,18 +100,18 @@ import { Button as ChakraButton } from "@chakra-ui/react";
|
|
|
205
100
|
var Button = ChakraButton;
|
|
206
101
|
|
|
207
102
|
// src/components/ConditionalWrapper.tsx
|
|
208
|
-
import
|
|
209
|
-
var ConditionalWrapper = ({ condition, children, wrapper: Wrapper }) => condition ? /* @__PURE__ */
|
|
103
|
+
import React2 from "react";
|
|
104
|
+
var ConditionalWrapper = ({ condition, children, wrapper: Wrapper }) => condition ? /* @__PURE__ */ React2.createElement(Wrapper, null, children) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
|
|
210
105
|
|
|
211
106
|
// src/components/HideWithCSS.tsx
|
|
212
107
|
import { Box as Box2 } from "@chakra-ui/react";
|
|
213
|
-
import
|
|
108
|
+
import React3 from "react";
|
|
214
109
|
var HideWithCSS = ({ children, above, below, ...chakraProps }) => {
|
|
215
110
|
const display = {
|
|
216
111
|
...!!below ? { base: "none", [below]: "block" } : {},
|
|
217
112
|
...!!above ? { [above]: "none" } : {}
|
|
218
113
|
};
|
|
219
|
-
return /* @__PURE__ */
|
|
114
|
+
return /* @__PURE__ */ React3.createElement(Box2, { ...chakraProps, display }, children);
|
|
220
115
|
};
|
|
221
116
|
|
|
222
117
|
// src/components/Input.tsx
|
|
@@ -227,13 +122,13 @@ import {
|
|
|
227
122
|
FormLabel,
|
|
228
123
|
Input as ChakraInput
|
|
229
124
|
} from "@chakra-ui/react";
|
|
230
|
-
import
|
|
125
|
+
import React5, { forwardRef } from "react";
|
|
231
126
|
|
|
232
127
|
// src/components/VisuallyHidden.tsx
|
|
233
|
-
import
|
|
128
|
+
import React4, { useEffect } from "react";
|
|
234
129
|
import { VisuallyHidden as ChakraVisuallyHidden } from "@chakra-ui/react";
|
|
235
130
|
function VisuallyHidden({ children, ...rest }) {
|
|
236
|
-
const [forceShow, setForceShow] =
|
|
131
|
+
const [forceShow, setForceShow] = React4.useState(false);
|
|
237
132
|
useEffect(() => {
|
|
238
133
|
if (isDevelopment()) {
|
|
239
134
|
const handleKeyDown = (ev) => {
|
|
@@ -254,13 +149,14 @@ function VisuallyHidden({ children, ...rest }) {
|
|
|
254
149
|
};
|
|
255
150
|
}
|
|
256
151
|
}, []);
|
|
257
|
-
return forceShow ? /* @__PURE__ */
|
|
152
|
+
return forceShow ? /* @__PURE__ */ React4.createElement("span", null, children) : /* @__PURE__ */ React4.createElement(ChakraVisuallyHidden, { position: "fixed" }, children);
|
|
258
153
|
}
|
|
259
154
|
|
|
260
155
|
// src/components/Input.tsx
|
|
261
156
|
var Input = forwardRef((props, ref) => {
|
|
262
157
|
const { labelProps, label, helperText, errorMessage, hideLabel, ...inputProps } = props;
|
|
263
|
-
|
|
158
|
+
const formLabel = /* @__PURE__ */ React5.createElement(FormLabel, { ...labelProps }, label);
|
|
159
|
+
return /* @__PURE__ */ React5.createElement(FormControl, { isInvalid: !!errorMessage }, hideLabel ? /* @__PURE__ */ React5.createElement(VisuallyHidden, null, formLabel) : formLabel, helperText && /* @__PURE__ */ React5.createElement(FormHelperText, { marginTop: "-0.25em", marginBottom: "0.25em" }, helperText), /* @__PURE__ */ React5.createElement(ChakraInput, { ref, ...inputProps }), errorMessage && /* @__PURE__ */ React5.createElement(FormErrorMessage, { color: colors.statusRed, fontWeight: 600 }, errorMessage));
|
|
264
160
|
});
|
|
265
161
|
|
|
266
162
|
// src/components/Link.tsx
|
|
@@ -269,7 +165,7 @@ var Link = ChakraLink;
|
|
|
269
165
|
|
|
270
166
|
// src/BiblioteksentralenProvider.tsx
|
|
271
167
|
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
|
|
272
|
-
import
|
|
168
|
+
import React6 from "react";
|
|
273
169
|
|
|
274
170
|
// src/styles/chakraTheme/ButtonStyles.ts
|
|
275
171
|
var variants = {
|
|
@@ -472,13 +368,13 @@ var biblioteksentralenChakraTheme = {
|
|
|
472
368
|
|
|
473
369
|
// src/BiblioteksentralenProvider.tsx
|
|
474
370
|
var emptyTheme = {};
|
|
475
|
-
var BiblioteksentralenProvider = (props) => /* @__PURE__ */
|
|
371
|
+
var BiblioteksentralenProvider = (props) => /* @__PURE__ */ React6.createElement(ChakraProvider, { theme: extendTheme(biblioteksentralenChakraTheme, props.customTheme ?? emptyTheme) }, props.children);
|
|
476
372
|
|
|
477
373
|
// src/components/ErrorBoundary.tsx
|
|
478
374
|
import { Box as Box3 } from "@chakra-ui/react";
|
|
479
|
-
import
|
|
480
|
-
var StyledPre = (props) => /* @__PURE__ */
|
|
481
|
-
var ErrorBoundary = class extends
|
|
375
|
+
import React7 from "react";
|
|
376
|
+
var StyledPre = (props) => /* @__PURE__ */ React7.createElement(Box3, { as: "pre", paddingTop: "0.5rem", wordBreak: "break-all", whiteSpace: "pre-wrap", fontSize: "0.8rem", ...props });
|
|
377
|
+
var ErrorBoundary = class extends React7.Component {
|
|
482
378
|
constructor(props) {
|
|
483
379
|
super(props);
|
|
484
380
|
this.state = { hasError: false };
|
|
@@ -495,7 +391,7 @@ var ErrorBoundary = class extends React101.Component {
|
|
|
495
391
|
const stackTrace = this.state.errorInfo?.componentStack;
|
|
496
392
|
const errormsg = this.state.error?.message;
|
|
497
393
|
const info = this.props.boundaryName;
|
|
498
|
-
return /* @__PURE__ */
|
|
394
|
+
return /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement(Alert, { status: "error" }, /* @__PURE__ */ React7.createElement("p", null, "Beklager, det skjedde en teknisk feil."), isDevelopment() && (stackTrace || errormsg) && /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement(StyledPre, null, errormsg || ""), /* @__PURE__ */ React7.createElement(StyledPre, null, info || ""), /* @__PURE__ */ React7.createElement(StyledPre, null, stackTrace || ""))));
|
|
499
395
|
}
|
|
500
396
|
return this.props.children;
|
|
501
397
|
}
|
|
@@ -503,7 +399,7 @@ var ErrorBoundary = class extends React101.Component {
|
|
|
503
399
|
|
|
504
400
|
// src/components/HashLinkTarget.tsx
|
|
505
401
|
import { Box as Box4 } from "@chakra-ui/react";
|
|
506
|
-
import
|
|
402
|
+
import React8 from "react";
|
|
507
403
|
var focusOnRelativeParentStyle = {
|
|
508
404
|
"&:focus-within": {
|
|
509
405
|
position: "static",
|
|
@@ -522,7 +418,7 @@ var focusOnRelativeParentStyle = {
|
|
|
522
418
|
}
|
|
523
419
|
};
|
|
524
420
|
function HashLinkTarget(props) {
|
|
525
|
-
return /* @__PURE__ */
|
|
421
|
+
return /* @__PURE__ */ React8.createElement(Box4, { position: "relative", sx: props.focusOnParent ? focusOnRelativeParentStyle : void 0 }, /* @__PURE__ */ React8.createElement(
|
|
526
422
|
Box4,
|
|
527
423
|
{
|
|
528
424
|
id: props.id,
|
|
@@ -537,9 +433,9 @@ function HashLinkTarget(props) {
|
|
|
537
433
|
}
|
|
538
434
|
|
|
539
435
|
// src/components/withErrorBoundary.tsx
|
|
540
|
-
import
|
|
436
|
+
import React9 from "react";
|
|
541
437
|
var withErrorBoundary = (Component, boundaryName) => {
|
|
542
|
-
return
|
|
438
|
+
return React9.forwardRef((props, ref) => /* @__PURE__ */ React9.createElement(ErrorBoundary, { boundaryName }, /* @__PURE__ */ React9.createElement(Component, { ...props, ref })));
|
|
543
439
|
};
|
|
544
440
|
export {
|
|
545
441
|
Alert,
|