@entur/alert 0.17.13-beta.3 → 0.17.13-beta.4

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/alert.esm.js CHANGED
@@ -1,372 +1,399 @@
1
- import { warnAboutMissingStyles } from "@entur/utils";
2
- import { jsxs, jsx } from "react/jsx-runtime";
3
- import React from "react";
4
- import classNames from "classnames";
5
- import { ValidationErrorIcon, ValidationInfoIcon, ValidationExclamationIcon, ValidationSuccessIcon, CloseIcon, CopyIcon } from "@entur/icons";
6
- import { IconButton } from "@entur/button";
7
- import { Tooltip } from "@entur/tooltip";
8
- import copy from "copy-text-to-clipboard";
9
- import { PreformattedText } from "@entur/typography";
10
- import { BaseExpand, ExpandArrow } from "@entur/expand";
11
- const iconsMap = {
1
+ import { warnAboutMissingStyles } from '@entur/utils';
2
+ import React from 'react';
3
+ import classNames from 'classnames';
4
+ import { CloseIcon, ValidationSuccessIcon, ValidationInfoIcon, ValidationExclamationIcon, ValidationErrorIcon, CopyIcon } from '@entur/icons';
5
+ import { IconButton } from '@entur/button';
6
+ import { Tooltip } from '@entur/tooltip';
7
+ import copy from 'copy-text-to-clipboard';
8
+ import { PreformattedText } from '@entur/typography';
9
+ import { BaseExpand, ExpandArrow } from '@entur/expand/';
10
+
11
+ function _extends() {
12
+ return _extends = Object.assign ? Object.assign.bind() : function (n) {
13
+ for (var e = 1; e < arguments.length; e++) {
14
+ var t = arguments[e];
15
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
16
+ }
17
+ return n;
18
+ }, _extends.apply(null, arguments);
19
+ }
20
+ function _objectWithoutPropertiesLoose(r, e) {
21
+ if (null == r) return {};
22
+ var t = {};
23
+ for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
24
+ if (-1 !== e.indexOf(n)) continue;
25
+ t[n] = r[n];
26
+ }
27
+ return t;
28
+ }
29
+
30
+ var _excluded$3 = ["children", "className", "closable", "closeButtonLabel", "variant", "onClose", "size", "title", "toastIsBeingRemoved"];
31
+ var iconsMap = {
12
32
  success: {
13
33
  icon: ValidationSuccessIcon,
14
- description: "Suksessmelding"
34
+ description: 'Suksessmelding'
35
+ },
36
+ information: {
37
+ icon: ValidationInfoIcon,
38
+ description: 'Infomelding'
15
39
  },
16
- information: { icon: ValidationInfoIcon, description: "Infomelding" },
17
40
  warning: {
18
41
  icon: ValidationExclamationIcon,
19
- description: "Varselmelding"
42
+ description: 'Varselmelding'
43
+ },
44
+ negative: {
45
+ icon: ValidationErrorIcon,
46
+ description: 'Feilmelding'
20
47
  },
21
- negative: { icon: ValidationErrorIcon, description: "Feilmelding" },
22
48
  //deprecated
23
- info: { icon: ValidationInfoIcon, description: "Infomelding" },
24
- error: { icon: ValidationErrorIcon, description: "Feilmelding" }
49
+ info: {
50
+ icon: ValidationInfoIcon,
51
+ description: 'Infomelding'
52
+ },
53
+ error: {
54
+ icon: ValidationErrorIcon,
55
+ description: 'Feilmelding'
56
+ }
25
57
  };
26
- const BaseAlertBox = ({
27
- children,
28
- className,
29
- closable = false,
30
- closeButtonLabel = "Lukk",
31
- variant,
32
- onClose = () => ({}),
33
- size,
34
- title,
35
- toastIsBeingRemoved,
36
- ...rest
37
- }) => {
38
- const [isClosed, setClosed] = React.useState(false);
58
+ var BaseAlertBox = function BaseAlertBox(_ref) {
59
+ var children = _ref.children,
60
+ className = _ref.className,
61
+ _ref$closable = _ref.closable,
62
+ closable = _ref$closable === void 0 ? false : _ref$closable,
63
+ _ref$closeButtonLabel = _ref.closeButtonLabel,
64
+ closeButtonLabel = _ref$closeButtonLabel === void 0 ? 'Lukk' : _ref$closeButtonLabel,
65
+ variant = _ref.variant,
66
+ _ref$onClose = _ref.onClose,
67
+ onClose = _ref$onClose === void 0 ? function () {
68
+ return {};
69
+ } : _ref$onClose,
70
+ size = _ref.size,
71
+ title = _ref.title,
72
+ toastIsBeingRemoved = _ref.toastIsBeingRemoved,
73
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
74
+ var _React$useState = React.useState(false),
75
+ isClosed = _React$useState[0],
76
+ setClosed = _React$useState[1];
39
77
  if (isClosed) {
40
78
  return null;
41
79
  }
42
- const handleClose = () => {
80
+ var handleClose = function handleClose() {
43
81
  setClosed(true);
44
82
  onClose();
45
83
  };
46
- const Icon = iconsMap[variant].icon;
47
- return /* @__PURE__ */ jsxs(
48
- "div",
49
- {
50
- className: classNames(
51
- "eds-alert-box",
52
- `eds-alert-box--${size}`,
53
- `eds-alert-box--${variant}`,
54
- {
55
- "eds-alert-box--toast--exit-animation": toastIsBeingRemoved,
56
- "eds-alert-box--no-title": !title
57
- },
58
- className
59
- ),
60
- ...rest,
61
- children: [
62
- /* @__PURE__ */ jsx(
63
- Icon,
64
- {
65
- role: "img",
66
- className: "eds-alert-box__icon",
67
- "aria-label": iconsMap[variant].description
68
- }
69
- ),
70
- /* @__PURE__ */ jsxs(
71
- "div",
72
- {
73
- className: classNames("eds-alert-box__content", {
74
- "eds-alert-box__content--no-children": !children
75
- }),
76
- children: [
77
- title && /* @__PURE__ */ jsx("div", { className: "eds-alert-box__title", children: title }),
78
- children && children
79
- ]
80
- }
81
- ),
82
- closable && /* @__PURE__ */ jsx(
83
- Tooltip,
84
- {
85
- className: "eds-alert-box__tooltip",
86
- "aria-hidden": true,
87
- placement: "bottom",
88
- content: "Lukk",
89
- children: /* @__PURE__ */ jsx(
90
- IconButton,
91
- {
92
- className: "eds-alert-box__close-button",
93
- "aria-label": closeButtonLabel,
94
- onClick: handleClose,
95
- type: "button",
96
- children: /* @__PURE__ */ jsx(CloseIcon, {})
97
- }
98
- )
99
- }
100
- )
101
- ]
102
- }
103
- );
84
+ var Icon = iconsMap[variant].icon;
85
+ return React.createElement("div", _extends({
86
+ className: classNames('eds-alert-box', "eds-alert-box--" + size, "eds-alert-box--" + variant, {
87
+ 'eds-alert-box--toast--exit-animation': toastIsBeingRemoved,
88
+ 'eds-alert-box--no-title': !title
89
+ }, className)
90
+ }, rest), React.createElement(Icon, {
91
+ role: "img",
92
+ className: "eds-alert-box__icon",
93
+ "aria-label": iconsMap[variant].description
94
+ }), React.createElement("div", {
95
+ className: classNames('eds-alert-box__content', {
96
+ 'eds-alert-box__content--no-children': !children
97
+ })
98
+ }, title && React.createElement("div", {
99
+ className: "eds-alert-box__title"
100
+ }, title), children && children), closable && React.createElement(Tooltip, {
101
+ className: "eds-alert-box__tooltip",
102
+ "aria-hidden": true,
103
+ placement: "bottom",
104
+ content: "Lukk"
105
+ }, React.createElement(IconButton, {
106
+ className: "eds-alert-box__close-button",
107
+ "aria-label": closeButtonLabel,
108
+ onClick: handleClose,
109
+ type: "button"
110
+ }, React.createElement(CloseIcon, null))));
111
+ };
112
+
113
+ var BannerAlertBox = function BannerAlertBox(props) {
114
+ return React.createElement(BaseAlertBox, _extends({}, props, {
115
+ size: "banner"
116
+ }));
117
+ };
118
+
119
+ var ToastAlertBox = function ToastAlertBox(props) {
120
+ return React.createElement(BaseAlertBox, _extends({}, props, {
121
+ size: "toast",
122
+ role: "status"
123
+ }));
104
124
  };
105
- const BannerAlertBox = (props) => /* @__PURE__ */ jsx(BaseAlertBox, { ...props, size: "banner" });
106
- const ToastAlertBox = (props) => /* @__PURE__ */ jsx(BaseAlertBox, { ...props, size: "toast", role: "status" });
107
- const SmallAlertBox = ({
108
- className,
109
- width,
110
- onClose,
111
- closable = false,
112
- closeButtonLabel,
113
- ...rest
114
- }) => /* @__PURE__ */ jsx(
115
- BaseAlertBox,
116
- {
125
+
126
+ var _excluded$2 = ["className", "width", "onClose", "closable", "closeButtonLabel"];
127
+ var SmallAlertBox = function SmallAlertBox(_ref) {
128
+ var className = _ref.className,
129
+ width = _ref.width,
130
+ onClose = _ref.onClose,
131
+ _ref$closable = _ref.closable,
132
+ closable = _ref$closable === void 0 ? false : _ref$closable,
133
+ closeButtonLabel = _ref.closeButtonLabel,
134
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
135
+ return React.createElement(BaseAlertBox, _extends({
117
136
  className: classNames(className, {
118
- "eds-alert-box--fit-content": width === "fit-content"
119
- }),
120
- ...rest,
121
- onClose,
122
- closable,
123
- closeButtonLabel,
137
+ 'eds-alert-box--fit-content': width === 'fit-content'
138
+ })
139
+ }, rest, {
140
+ onClose: onClose,
141
+ closable: closable,
142
+ closeButtonLabel: closeButtonLabel,
124
143
  size: "small"
125
- }
126
- );
127
- const EXIT_ANIMATION_TIME = 400;
128
- const ToastContext = React.createContext(null);
129
- const toastReducer = (prevToasts, action) => {
144
+ }));
145
+ };
146
+
147
+ var EXIT_ANIMATION_TIME = 400;
148
+ var ToastContext = /*#__PURE__*/React.createContext(null);
149
+ var toastReducer = function toastReducer(prevToasts, action) {
130
150
  switch (action.type) {
131
- case "ADD_TOAST":
132
- return [action.payload, ...prevToasts];
133
- case "PLAY_EXIT_ANIMATION":
134
- return prevToasts.map((toast) => {
135
- if (toast.id === action.payload)
136
- return { ...toast, isBeingRemoved: true };
151
+ case 'ADD_TOAST':
152
+ return [action.payload].concat(prevToasts);
153
+ case 'PLAY_EXIT_ANIMATION':
154
+ return prevToasts.map(function (toast) {
155
+ if (toast.id === action.payload) return _extends({}, toast, {
156
+ isBeingRemoved: true
157
+ });
137
158
  return toast;
138
159
  });
139
- case "REMOVE_TOAST":
140
- return prevToasts.filter((toast) => toast.id !== action.payload);
160
+ case 'REMOVE_TOAST':
161
+ return prevToasts.filter(function (toast) {
162
+ return toast.id !== action.payload;
163
+ });
141
164
  }
142
165
  };
143
- const createUniqueId = () => Math.random().toString().substring(2);
144
- const createToast = (toast, id) => {
145
- if (typeof toast === "string") {
146
- return { id, content: toast, variant: "success", isBeingRemoved: false };
166
+ var createUniqueId = function createUniqueId() {
167
+ return Math.random().toString().substring(2);
168
+ };
169
+ var createToast = function createToast(toast, id) {
170
+ if (typeof toast === 'string') {
171
+ return {
172
+ id: id,
173
+ content: toast,
174
+ variant: 'success',
175
+ isBeingRemoved: false
176
+ };
147
177
  } else {
148
- return { id, variant: "success", isBeingRemoved: false, ...toast };
178
+ return _extends({
179
+ id: id,
180
+ variant: 'success',
181
+ isBeingRemoved: false
182
+ }, toast);
149
183
  }
150
184
  };
151
- const ToastProvider = ({
152
- delay = 6e3,
153
- children,
154
- position = "bottom-right",
155
- className,
156
- style
157
- }) => {
158
- const [toasts, dispatch] = React.useReducer(toastReducer, []);
159
- const [hoveringId, setHovering] = React.useState();
160
- const timeoutIdRefs = React.useRef({});
161
- const removeToast = React.useCallback((id) => {
185
+ var ToastProvider = function ToastProvider(_ref) {
186
+ var _ref$delay = _ref.delay,
187
+ delay = _ref$delay === void 0 ? 6000 : _ref$delay,
188
+ children = _ref.children,
189
+ _ref$position = _ref.position,
190
+ position = _ref$position === void 0 ? 'bottom-right' : _ref$position,
191
+ className = _ref.className,
192
+ style = _ref.style;
193
+ var _React$useReducer = React.useReducer(toastReducer, []),
194
+ toasts = _React$useReducer[0],
195
+ dispatch = _React$useReducer[1];
196
+ var _React$useState = React.useState(),
197
+ hoveringId = _React$useState[0],
198
+ setHovering = _React$useState[1];
199
+ var timeoutIdRefs = React.useRef({});
200
+ var removeToast = React.useCallback(function (id) {
162
201
  window.clearTimeout(timeoutIdRefs.current[id]);
163
- dispatch({ type: "REMOVE_TOAST", payload: id });
202
+ dispatch({
203
+ type: 'REMOVE_TOAST',
204
+ payload: id
205
+ });
164
206
  delete timeoutIdRefs.current[id];
165
207
  }, []);
166
- const playExitAnimation = React.useCallback((id) => {
167
- window.clearTimeout(timeoutIdRefs.current[id + "animation"]);
168
- dispatch({ type: "PLAY_EXIT_ANIMATION", payload: id });
169
- delete timeoutIdRefs.current[id + "animation"];
208
+ var playExitAnimation = React.useCallback(function (id) {
209
+ window.clearTimeout(timeoutIdRefs.current[id + 'animation']);
210
+ dispatch({
211
+ type: 'PLAY_EXIT_ANIMATION',
212
+ payload: id
213
+ });
214
+ delete timeoutIdRefs.current[id + 'animation'];
170
215
  }, []);
171
- const removeToastWithAnimationAfterDelay = React.useCallback(
172
- (id, delay2) => {
173
- timeoutIdRefs.current[id + "animation"] = window.setTimeout(
174
- () => playExitAnimation(id),
175
- delay2 - EXIT_ANIMATION_TIME
176
- );
177
- timeoutIdRefs.current[id] = window.setTimeout(
178
- () => removeToast(id),
179
- delay2
180
- );
181
- },
182
- [timeoutIdRefs, playExitAnimation, removeToast]
183
- );
184
- const addToast = React.useCallback(
185
- (toast) => {
186
- const id = createUniqueId();
187
- const payload = createToast(toast, id);
188
- dispatch({ type: "ADD_TOAST", payload });
189
- removeToastWithAnimationAfterDelay(id, delay);
190
- },
191
- [delay, removeToastWithAnimationAfterDelay]
192
- );
193
- const handleMouseEnter = (toast) => () => {
194
- if (toast.isBeingRemoved) return;
195
- setHovering(toast.id);
196
- Object.values(timeoutIdRefs.current).forEach((timeoutId) => {
197
- window.clearTimeout(timeoutId);
216
+ var removeToastWithAnimationAfterDelay = React.useCallback(function (id, delay) {
217
+ timeoutIdRefs.current[id + 'animation'] = window.setTimeout(function () {
218
+ return playExitAnimation(id);
219
+ }, delay - EXIT_ANIMATION_TIME);
220
+ timeoutIdRefs.current[id] = window.setTimeout(function () {
221
+ return removeToast(id);
222
+ }, delay);
223
+ }, [timeoutIdRefs, playExitAnimation, removeToast]);
224
+ var addToast = React.useCallback(function (toast) {
225
+ var id = createUniqueId();
226
+ var payload = createToast(toast, id);
227
+ dispatch({
228
+ type: 'ADD_TOAST',
229
+ payload: payload
198
230
  });
199
- timeoutIdRefs.current = {};
231
+ removeToastWithAnimationAfterDelay(id, delay);
232
+ }, [delay, removeToastWithAnimationAfterDelay]);
233
+ var handleMouseEnter = function handleMouseEnter(toast) {
234
+ return function () {
235
+ if (toast.isBeingRemoved) return;
236
+ setHovering(toast.id);
237
+ Object.values(timeoutIdRefs.current).forEach(function (timeoutId) {
238
+ window.clearTimeout(timeoutId);
239
+ });
240
+ timeoutIdRefs.current = {};
241
+ };
200
242
  };
201
- const handleMouseLeave = () => {
202
- setHovering(void 0);
203
- toasts.forEach((toast) => {
243
+ var handleMouseLeave = function handleMouseLeave() {
244
+ setHovering(undefined);
245
+ toasts.forEach(function (toast) {
204
246
  removeToastWithAnimationAfterDelay(toast.id, delay);
205
247
  });
206
248
  };
207
- const handleClose = (toastId) => () => {
208
- removeToast(toastId);
209
- handleMouseLeave();
249
+ var handleClose = function handleClose(toastId) {
250
+ return function () {
251
+ removeToast(toastId);
252
+ handleMouseLeave();
253
+ };
210
254
  };
211
- const contextValue = React.useMemo(
212
- () => ({ toasts, addToast, removeToast }),
213
- [addToast, removeToast, toasts]
214
- );
215
- return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: contextValue, children: [
216
- toasts.length > 0 && /* @__PURE__ */ jsx(
217
- "div",
218
- {
219
- className: classNames(
220
- "eds-toast-container",
221
- `eds-toast-container--${position}`,
222
- className
223
- ),
224
- style,
225
- children: toasts.slice(0, 3).map((toastToShow) => /* @__PURE__ */ jsx(
226
- ToastAlertBox,
227
- {
228
- variant: toastToShow.variant,
229
- title: toastToShow.title,
230
- onClose: handleClose(toastToShow.id),
231
- onMouseEnter: handleMouseEnter(toastToShow),
232
- onMouseLeave: handleMouseLeave,
233
- closable: hoveringId === toastToShow.id,
234
- toastIsBeingRemoved: toastToShow.isBeingRemoved,
235
- children: toastToShow.content
236
- },
237
- toastToShow.id
238
- ))
239
- }
240
- ),
241
- children
242
- ] });
255
+ var contextValue = React.useMemo(function () {
256
+ return {
257
+ toasts: toasts,
258
+ addToast: addToast,
259
+ removeToast: removeToast
260
+ };
261
+ }, [addToast, removeToast, toasts]);
262
+ return React.createElement(ToastContext.Provider, {
263
+ value: contextValue
264
+ }, toasts.length > 0 && React.createElement("div", {
265
+ className: classNames('eds-toast-container', "eds-toast-container--" + position, className),
266
+ style: style
267
+ }, toasts.slice(0, 3).map(function (toastToShow) {
268
+ return React.createElement(ToastAlertBox, {
269
+ variant: toastToShow.variant,
270
+ title: toastToShow.title,
271
+ onClose: handleClose(toastToShow.id),
272
+ onMouseEnter: handleMouseEnter(toastToShow),
273
+ onMouseLeave: handleMouseLeave,
274
+ closable: hoveringId === toastToShow.id,
275
+ toastIsBeingRemoved: toastToShow.isBeingRemoved,
276
+ key: toastToShow.id
277
+ }, toastToShow.content);
278
+ })), children);
243
279
  };
244
- const useToast = () => {
245
- const context = React.useContext(ToastContext);
280
+ var useToast = function useToast() {
281
+ var context = React.useContext(ToastContext);
246
282
  if (!context) {
247
- throw new Error(
248
- "You need to wrap your component in a ToastProvider component in order to use the useToast hook"
249
- );
283
+ throw new Error('You need to wrap your component in a ToastProvider component in ' + 'order to use the useToast hook');
250
284
  }
251
- const { addToast } = context;
285
+ var addToast = context.addToast;
252
286
  return {
253
- addToast
287
+ addToast: addToast
254
288
  };
255
289
  };
256
- const CopyableText = ({
257
- children,
258
- successHeading = "Kopiert!",
259
- successMessage,
260
- textToCopy,
261
- className,
262
- "aria-label": ariaLabel = `Kopier ${textToCopy ?? children} til utklippstavlen`,
263
- ...rest
264
- }) => {
265
- const { addToast } = useToast();
266
- const buttonRef = React.useRef(null);
267
- const _textToCopy = textToCopy ?? children;
268
- const _successMessage = successMessage ?? `${_textToCopy} ble kopiert til utklippstavlen.`;
269
- const handleClick = () => {
290
+
291
+ var _excluded$1 = ["children", "successHeading", "successMessage", "textToCopy", "className", "aria-label"];
292
+ var CopyableText = function CopyableText(_ref) {
293
+ var children = _ref.children,
294
+ _ref$successHeading = _ref.successHeading,
295
+ successHeading = _ref$successHeading === void 0 ? 'Kopiert!' : _ref$successHeading,
296
+ successMessage = _ref.successMessage,
297
+ textToCopy = _ref.textToCopy,
298
+ className = _ref.className,
299
+ _ref$ariaLabel = _ref['aria-label'],
300
+ ariaLabel = _ref$ariaLabel === void 0 ? "Kopier " + (textToCopy != null ? textToCopy : children) + " til utklippstavlen" : _ref$ariaLabel,
301
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
302
+ var _useToast = useToast(),
303
+ addToast = _useToast.addToast;
304
+ var buttonRef = React.useRef(null);
305
+ var _textToCopy = textToCopy != null ? textToCopy : children;
306
+ var _successMessage = successMessage != null ? successMessage : _textToCopy + " ble kopiert til utklippstavlen.";
307
+ var handleClick = function handleClick() {
270
308
  buttonRef.current && copy(_textToCopy, {
271
309
  target: buttonRef.current
272
- }) && addToast({ title: successHeading, content: _successMessage });
310
+ }) && addToast({
311
+ title: successHeading,
312
+ content: _successMessage
313
+ });
273
314
  };
274
- return /* @__PURE__ */ jsx(
275
- "div",
276
- {
277
- className: "eds-copyable-text " + className,
278
- style: { ...rest.style },
279
- type: "button",
280
- onClick: handleClick,
281
- tabIndex: -1,
282
- "aria-label": "",
283
- ...rest,
284
- children: /* @__PURE__ */ jsxs(PreformattedText, { className: "eds-copyable-text__preformatted-text", children: [
285
- /* @__PURE__ */ jsx("span", { className: "eds-copyable-text__displayed-text", children }),
286
- /* @__PURE__ */ jsx(
287
- IconButton,
288
- {
289
- className: "eds-copyable-text__button",
290
- "aria-label": ariaLabel,
291
- type: "button",
292
- ref: buttonRef,
293
- children: /* @__PURE__ */ jsx(CopyIcon, { className: "eds-copyable-text__button__icon" })
294
- }
295
- )
296
- ] })
297
- }
298
- );
299
- };
300
- const SmallExpandableAlertBox = (props) => {
301
- return /* @__PURE__ */ jsx(ExpandableAlertBox, { size: "small", ...props });
315
+ return React.createElement("div", _extends({
316
+ className: 'eds-copyable-text ' + className,
317
+ style: _extends({}, rest.style),
318
+ type: "button",
319
+ onClick: handleClick,
320
+ tabIndex: -1,
321
+ "aria-label": ""
322
+ }, rest), React.createElement(PreformattedText, {
323
+ className: "eds-copyable-text__preformatted-text"
324
+ }, React.createElement("span", {
325
+ className: "eds-copyable-text__displayed-text"
326
+ }, children), React.createElement(IconButton, {
327
+ className: "eds-copyable-text__button",
328
+ "aria-label": ariaLabel,
329
+ type: "button",
330
+ ref: buttonRef
331
+ }, React.createElement(CopyIcon, {
332
+ className: 'eds-copyable-text__button__icon'
333
+ }))));
302
334
  };
303
- const BannerExpandableAlertBox = (props) => {
304
- return /* @__PURE__ */ jsx(ExpandableAlertBox, { size: "banner", ...props });
335
+
336
+ var _excluded = ["variant", "title", "children", "size", "className", "openLabel", "closeLabel"];
337
+ var SmallExpandableAlertBox = function SmallExpandableAlertBox(props) {
338
+ return React.createElement(ExpandableAlertBox, _extends({
339
+ size: "small"
340
+ }, props));
305
341
  };
306
- const ExpandableAlertBox = ({
307
- variant,
308
- title,
309
- children,
310
- size,
311
- className,
312
- openLabel,
313
- closeLabel,
314
- ...rest
315
- }) => {
316
- const [open, setopen] = React.useState(false);
317
- return /* @__PURE__ */ jsx(
318
- BaseAlertBox,
319
- {
320
- size,
321
- variant,
322
- className: classNames("eds-expandable-alert-box", className),
323
- title: /* @__PURE__ */ jsx(
324
- ExpandableAlertBoxTitle,
325
- {
326
- open,
327
- title,
328
- onClick: () => setopen(!open),
329
- openLabel,
330
- closeLabel
331
- }
332
- ),
333
- ...rest,
334
- children: /* @__PURE__ */ jsx(BaseExpand, { open, children })
335
- }
336
- );
342
+ var BannerExpandableAlertBox = function BannerExpandableAlertBox(props) {
343
+ return React.createElement(ExpandableAlertBox, _extends({
344
+ size: "banner"
345
+ }, props));
337
346
  };
338
- const ExpandableAlertBoxTitle = ({
339
- title,
340
- open,
341
- openLabel = "Les mer",
342
- closeLabel = "Lukk",
343
- onClick
344
- }) => {
345
- return /* @__PURE__ */ jsxs("div", { className: "eds-expandable-alert-box__title", children: [
346
- /* @__PURE__ */ jsx("div", { children: title }),
347
- /* @__PURE__ */ jsxs(
348
- "button",
349
- {
350
- className: "eds-expandable-alert-box__button",
351
- onClick,
352
- type: "button",
353
- children: [
354
- open ? closeLabel : openLabel,
355
- /* @__PURE__ */ jsx(ExpandArrow, { open, inline: true })
356
- ]
357
- }
358
- )
359
- ] });
347
+ var ExpandableAlertBox = function ExpandableAlertBox(_ref) {
348
+ var variant = _ref.variant,
349
+ title = _ref.title,
350
+ children = _ref.children,
351
+ size = _ref.size,
352
+ className = _ref.className,
353
+ openLabel = _ref.openLabel,
354
+ closeLabel = _ref.closeLabel,
355
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
356
+ var _React$useState = React.useState(false),
357
+ open = _React$useState[0],
358
+ setopen = _React$useState[1];
359
+ return React.createElement(BaseAlertBox, _extends({
360
+ size: size,
361
+ variant: variant,
362
+ className: classNames('eds-expandable-alert-box', className),
363
+ title: React.createElement(ExpandableAlertBoxTitle, {
364
+ open: open,
365
+ title: title,
366
+ onClick: function onClick() {
367
+ return setopen(!open);
368
+ },
369
+ openLabel: openLabel,
370
+ closeLabel: closeLabel
371
+ })
372
+ }, rest), React.createElement(BaseExpand, {
373
+ open: open
374
+ }, children));
360
375
  };
361
- warnAboutMissingStyles("alert", "icons");
362
- export {
363
- BannerAlertBox,
364
- BannerExpandableAlertBox,
365
- CopyableText,
366
- SmallAlertBox,
367
- SmallExpandableAlertBox,
368
- ToastAlertBox,
369
- ToastProvider,
370
- useToast
376
+ var ExpandableAlertBoxTitle = function ExpandableAlertBoxTitle(_ref2) {
377
+ var title = _ref2.title,
378
+ open = _ref2.open,
379
+ _ref2$openLabel = _ref2.openLabel,
380
+ openLabel = _ref2$openLabel === void 0 ? 'Les mer' : _ref2$openLabel,
381
+ _ref2$closeLabel = _ref2.closeLabel,
382
+ closeLabel = _ref2$closeLabel === void 0 ? 'Lukk' : _ref2$closeLabel,
383
+ onClick = _ref2.onClick;
384
+ return React.createElement("div", {
385
+ className: "eds-expandable-alert-box__title"
386
+ }, React.createElement("div", null, title), React.createElement("button", {
387
+ className: "eds-expandable-alert-box__button",
388
+ onClick: onClick,
389
+ type: "button"
390
+ }, open ? closeLabel : openLabel, React.createElement(ExpandArrow, {
391
+ open: open,
392
+ inline: true
393
+ })));
371
394
  };
395
+
396
+ warnAboutMissingStyles('alert', 'icons');
397
+
398
+ export { BannerAlertBox, BannerExpandableAlertBox, CopyableText, SmallAlertBox, SmallExpandableAlertBox, ToastAlertBox, ToastProvider, useToast };
372
399
  //# sourceMappingURL=alert.esm.js.map