@pismo/marola 1.0.27 → 1.0.29
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/assets/PageHeader.css +1 -1
- package/dist/assets/Snackbar.css +1 -1
- package/dist/components/PageHeader/PageHeader.d.ts +4 -2
- package/dist/components/PageHeader/PageHeader.js +88 -76
- package/dist/components/PageHeader/PageHeader.stories.d.ts +2 -1
- package/dist/components/Snackbar/Snackbar.d.ts +1 -1
- package/dist/components/Snackbar/Snackbar.js +102 -101
- package/dist/components/Snackbar/Snackbar.stories.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
._u-typography-
|
|
1
|
+
._u-typography-h1_7yb9o_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_7yb9o_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_7yb9o_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_7yb9o_22,._page-header__main-left-content_7yb9o_22 ._title_7yb9o_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_7yb9o_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_7yb9o_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_7yb9o_43,._page-header__main-left-content_7yb9o_22 ._subtitle_7yb9o_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_7yb9o_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_7yb9o_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_7yb9o_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_7yb9o_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_7yb9o_65,._page-header__main-left-content_7yb9o_22 ._title_7yb9o_22{font-weight:var(--base-bold)}._u-typography-base--strikethrough_7yb9o_68{text-decoration:line-through}._u-typography-base--underlined_7yb9o_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_7yb9o_74{text-decoration:underline line-through}._page-header_7yb9o_22{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:7.375rem;background:var(--cream);-webkit-font-smoothing:antialiased!important}._page-header_7yb9o_22:has(._page-header__top-content_7yb9o_87){justify-content:flex-start}._page-header__top-content_7yb9o_87,._page-header__main-content_7yb9o_90,._page-header__bottom-content_7yb9o_90{width:64rem;max-width:100%;margin:0 auto}._page-header__top-content_7yb9o_87{display:flex;align-items:center;justify-content:space-between;padding:1rem 0 .5rem}._page-header__top-content_7yb9o_87 button{width:fit-content;height:1.125rem;padding:0;line-height:1.125rem}._page-header__breadcrumb_7yb9o_107{display:flex;gap:.5rem;align-items:center}._page-header__breadcrumb_7yb9o_107 button{color:var(--gray-95)}._page-header__breadcrumb_7yb9o_107 button:hover:enabled{color:var(--hover)}._page-header__breadcrumb__separator_7yb9o_118{height:1.125rem;padding:0;line-height:1.125rem}._page-header__main-content_7yb9o_90{position:relative;display:flex}._page-header__main-left-content_7yb9o_22{display:flex;flex:1;flex-direction:column;justify-content:center}._page-header__main-left-content_7yb9o_22 ._title_7yb9o_22,._page-header__main-left-content_7yb9o_22 ._subtitle_7yb9o_43{display:block;width:100%;padding:0;margin:0;color:var(--gray-90)}._page-header__main-left-content_7yb9o_22 ._header-bubble_7yb9o_141{flex:1}._page-header__main-left-content_7yb9o_22 ._header-bubble--container_7yb9o_144{position:absolute;max-width:80%;height:5.75rem;background-color:var(--white-100);border:1px solid var(--border-secondary);border-radius:8px}._page-header__main-left-content_7yb9o_22 ._header-bubble--container--full_7yb9o_152{max-width:100%}._page-header__main-right-content_7yb9o_155{display:flex;align-items:center}._page-header__bottom-content_7yb9o_90{margin-top:.8125rem}._header-bubble-margin_7yb9o_163{padding-bottom:16px}
|
package/dist/assets/Snackbar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._snackbar_14f4w_2{display:block;width:40.5rem;margin:0 auto}@keyframes _bottomToTop_14f4w_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._snackbar__snackbar-el-wrapper_14f4w_15{position:fixed;bottom:1rem;z-index:5500}._snackbar--content_14f4w_20{display:flex;gap:1rem;align-items:center;justify-content:space-between;width:40.5rem;min-height:3.5rem;padding:var(--size-base-size-sm) var(--size-base-size);overflow:hidden;border-spacing:2px;border-style:solid;border-radius:var(--border-radius-border-radius)}._snackbar--message_14f4w_33{flex:1;word-break:break-word}._snackbar_14f4w_2:has(._snackbar--success_14f4w_37) ._snackbar--content_14f4w_20{background:var(--colors-brand-success-color-success-bg);border-color:var(--colors-brand-success-color-success-border)}._snackbar_14f4w_2:has(._snackbar--error_14f4w_41) ._snackbar--content_14f4w_20{background:var(--colors-brand-error-color-error-bg);border-color:var(--colors-brand-error-color-error-border)}._snackbar_14f4w_2:has(._snackbar--warning_14f4w_45) ._snackbar--content_14f4w_20{background:var(--colors-brand-warning-color-warning-bg);border-color:var(--colors-brand-warning-color-warning-border)}._snackbar--action_14f4w_49{all:unset;display:inline-flex;cursor:pointer}
|
|
@@ -22,6 +22,8 @@ type PageHeaderCommonProps = {
|
|
|
22
22
|
subtitle?: string;
|
|
23
23
|
/** component to be rendered in the place of title and subtitle */
|
|
24
24
|
headerBubble?: ReactNode;
|
|
25
|
+
/** prop that sets the header bubble to be full width */
|
|
26
|
+
fullWidthHeaderBubble?: boolean;
|
|
25
27
|
/** Back link text
|
|
26
28
|
* @deprecated Use breadcrumb prop instead.
|
|
27
29
|
*/
|
|
@@ -58,7 +60,7 @@ type PageHeaderCommonProps = {
|
|
|
58
60
|
/** Id to be applied as `data-testid` on the subtitle element */
|
|
59
61
|
'data-testid-subtitle'?: string;
|
|
60
62
|
/** Id to be applied as `data-testid` on the headerBubble element */
|
|
61
|
-
'data-testid-
|
|
63
|
+
'data-testid-header-bubble'?: string;
|
|
62
64
|
breadcrumb?: never;
|
|
63
65
|
};
|
|
64
66
|
type PageHeaderWithBreadcrumb = Omit<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick' | 'classNameBackLink' | 'data-testid-backLink' | 'breadcrumb'> & {
|
|
@@ -66,5 +68,5 @@ type PageHeaderWithBreadcrumb = Omit<PageHeaderCommonProps, 'backLinkText' | 'on
|
|
|
66
68
|
breadcrumb?: [...BreadcrumbItem[], LastBreadcrumbItem];
|
|
67
69
|
};
|
|
68
70
|
export type PageHeaderProps = RequireAllOrNone<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick'> | PageHeaderWithBreadcrumb;
|
|
69
|
-
export declare const PageHeader: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, headerBubble, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, "data-testid-
|
|
71
|
+
export declare const PageHeader: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, headerBubble, fullWidthHeaderBubble, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, "data-testid-header-bubble": headerBubbleTestId, ...props }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
70
72
|
export {};
|
|
@@ -1,93 +1,105 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useMemo as
|
|
3
|
-
import { c as
|
|
4
|
-
import { Icon as
|
|
5
|
-
import { IconButton as
|
|
6
|
-
import '../../assets/PageHeader.css';const
|
|
7
|
-
"u-typography-h1": "_u-typography-
|
|
8
|
-
"u-typography-h2": "_u-typography-
|
|
9
|
-
"u-typography-h3": "_u-typography-
|
|
10
|
-
"u-typography-h4": "_u-typography-
|
|
11
|
-
"page-header__main-left-content": "_page-header__main-left-
|
|
12
|
-
title:
|
|
13
|
-
"u-typography-h5": "_u-typography-
|
|
14
|
-
"u-typography-h6": "_u-typography-
|
|
15
|
-
"u-typography-base": "_u-typography-
|
|
16
|
-
subtitle:
|
|
17
|
-
"u-typography-base--xxl": "_u-typography-base--
|
|
18
|
-
"u-typography-base--xl": "_u-typography-base--
|
|
19
|
-
"u-typography-base--lg": "_u-typography-base--
|
|
20
|
-
"u-typography-base--sm": "_u-typography-base--
|
|
21
|
-
"u-typography-base--bold": "_u-typography-base--
|
|
22
|
-
"u-typography-base--strikethrough": "_u-typography-base--
|
|
23
|
-
"u-typography-base--underlined": "_u-typography-base--
|
|
24
|
-
"u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-
|
|
25
|
-
"page-header": "_page-
|
|
26
|
-
"page-header__top-content": "_page-header__top-
|
|
27
|
-
"page-header__main-content": "_page-header__main-
|
|
28
|
-
"page-header__bottom-content": "_page-header__bottom-
|
|
29
|
-
"page-header__breadcrumb": "_page-
|
|
30
|
-
"page-header__breadcrumb__separator": "_page-
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
|
|
1
|
+
import { jsxs as _, jsx as a, Fragment as l } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as I } from "react";
|
|
3
|
+
import { c as b } from "../../clsx-DB4S2d7J.js";
|
|
4
|
+
import { Icon as T } from "../Icon/Icon.js";
|
|
5
|
+
import { IconButton as $ } from "../IconButton/IconButton.js";
|
|
6
|
+
import '../../assets/PageHeader.css';const q = "_title_7yb9o_22", F = "_subtitle_7yb9o_43", e = {
|
|
7
|
+
"u-typography-h1": "_u-typography-h1_7yb9o_1",
|
|
8
|
+
"u-typography-h2": "_u-typography-h2_7yb9o_8",
|
|
9
|
+
"u-typography-h3": "_u-typography-h3_7yb9o_15",
|
|
10
|
+
"u-typography-h4": "_u-typography-h4_7yb9o_22",
|
|
11
|
+
"page-header__main-left-content": "_page-header__main-left-content_7yb9o_22",
|
|
12
|
+
title: q,
|
|
13
|
+
"u-typography-h5": "_u-typography-h5_7yb9o_29",
|
|
14
|
+
"u-typography-h6": "_u-typography-h6_7yb9o_36",
|
|
15
|
+
"u-typography-base": "_u-typography-base_7yb9o_43",
|
|
16
|
+
subtitle: F,
|
|
17
|
+
"u-typography-base--xxl": "_u-typography-base--xxl_7yb9o_49",
|
|
18
|
+
"u-typography-base--xl": "_u-typography-base--xl_7yb9o_53",
|
|
19
|
+
"u-typography-base--lg": "_u-typography-base--lg_7yb9o_57",
|
|
20
|
+
"u-typography-base--sm": "_u-typography-base--sm_7yb9o_61",
|
|
21
|
+
"u-typography-base--bold": "_u-typography-base--bold_7yb9o_65",
|
|
22
|
+
"u-typography-base--strikethrough": "_u-typography-base--strikethrough_7yb9o_68",
|
|
23
|
+
"u-typography-base--underlined": "_u-typography-base--underlined_7yb9o_71",
|
|
24
|
+
"u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_7yb9o_74",
|
|
25
|
+
"page-header": "_page-header_7yb9o_22",
|
|
26
|
+
"page-header__top-content": "_page-header__top-content_7yb9o_87",
|
|
27
|
+
"page-header__main-content": "_page-header__main-content_7yb9o_90",
|
|
28
|
+
"page-header__bottom-content": "_page-header__bottom-content_7yb9o_90",
|
|
29
|
+
"page-header__breadcrumb": "_page-header__breadcrumb_7yb9o_107",
|
|
30
|
+
"page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_7yb9o_118",
|
|
31
|
+
"header-bubble": "_header-bubble_7yb9o_141",
|
|
32
|
+
"header-bubble--container": "_header-bubble--container_7yb9o_144",
|
|
33
|
+
"header-bubble--container--full": "_header-bubble--container--full_7yb9o_152",
|
|
34
|
+
"page-header__main-right-content": "_page-header__main-right-content_7yb9o_155",
|
|
35
|
+
"header-bubble-margin": "_header-bubble-margin_7yb9o_163"
|
|
36
|
+
}, E = ({
|
|
36
37
|
title: n,
|
|
37
|
-
subtitle:
|
|
38
|
-
rightChildren:
|
|
39
|
-
bottomChildren:
|
|
40
|
-
classNameWrapper:
|
|
41
|
-
classNameTitle:
|
|
42
|
-
classNameSubtitle:
|
|
38
|
+
subtitle: c,
|
|
39
|
+
rightChildren: y,
|
|
40
|
+
bottomChildren: h,
|
|
41
|
+
classNameWrapper: m,
|
|
42
|
+
classNameTitle: k,
|
|
43
|
+
classNameSubtitle: N,
|
|
43
44
|
headerBubble: r,
|
|
44
|
-
|
|
45
|
-
"data-testid-
|
|
46
|
-
"data-testid-
|
|
47
|
-
"data-testid-
|
|
48
|
-
|
|
45
|
+
fullWidthHeaderBubble: f,
|
|
46
|
+
"data-testid-wrapper": v,
|
|
47
|
+
"data-testid-title": x,
|
|
48
|
+
"data-testid-subtitle": C,
|
|
49
|
+
"data-testid-header-bubble": L,
|
|
50
|
+
...w
|
|
49
51
|
}) => {
|
|
50
52
|
const {
|
|
51
|
-
breadcrumb:
|
|
52
|
-
backLinkText:
|
|
53
|
+
breadcrumb: s,
|
|
54
|
+
backLinkText: d,
|
|
53
55
|
onBackLinkClick: p,
|
|
54
|
-
classNameBackLink:
|
|
55
|
-
"data-testid-backLink":
|
|
56
|
-
...
|
|
57
|
-
} =
|
|
58
|
-
r && (n ||
|
|
59
|
-
const
|
|
60
|
-
const
|
|
61
|
-
return
|
|
62
|
-
label:
|
|
63
|
-
className:
|
|
64
|
-
"data-testid":
|
|
56
|
+
classNameBackLink: u,
|
|
57
|
+
"data-testid-backLink": g,
|
|
58
|
+
...j
|
|
59
|
+
} = w;
|
|
60
|
+
r && (n || c || h) && console.error("headerBubble prop can not be used with title, subtitle or bottomChildren"), !r && !n && console.error("title prop is required when not using headerBubble");
|
|
61
|
+
const B = b([e["page-header"], m]), H = I(() => {
|
|
62
|
+
const o = [];
|
|
63
|
+
return d && p && o.push({
|
|
64
|
+
label: d,
|
|
65
|
+
className: u,
|
|
66
|
+
"data-testid": g,
|
|
65
67
|
onClick: p
|
|
66
|
-
}),
|
|
67
|
-
/* @__PURE__ */ a("div", { className: e["page-header__breadcrumb"], children:
|
|
68
|
-
|
|
68
|
+
}), s && o.push(...s), /* @__PURE__ */ _("div", { className: e["page-header__top-content"], children: [
|
|
69
|
+
/* @__PURE__ */ a("div", { className: e["page-header__breadcrumb"], children: o.map((t, i) => /* @__PURE__ */ a(
|
|
70
|
+
$,
|
|
69
71
|
{
|
|
70
|
-
icon:
|
|
72
|
+
icon: i === 0 ? /* @__PURE__ */ a(T, { icon: "house-blank" }) : /* @__PURE__ */ a("span", { className: e["page-header__breadcrumb__separator"], children: "/" }),
|
|
71
73
|
onClick: () => t.onClick && t.onClick(),
|
|
72
74
|
className: t.className,
|
|
73
75
|
"data-testid": t["data-testid"],
|
|
74
|
-
disabled:
|
|
76
|
+
disabled: o.length === 1 ? !1 : i === o.length - 1,
|
|
75
77
|
children: t.label
|
|
76
78
|
},
|
|
77
|
-
`${t.label}_${
|
|
79
|
+
`${t.label}_${i}`
|
|
78
80
|
)) }),
|
|
79
|
-
|
|
81
|
+
y && /* @__PURE__ */ a("div", { className: e["page-header__main-right-content"], children: y })
|
|
80
82
|
] });
|
|
81
|
-
}, [
|
|
82
|
-
return /* @__PURE__ */
|
|
83
|
-
B,
|
|
84
|
-
|
|
85
|
-
/* @__PURE__ */ a("
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
83
|
+
}, [s, d, u, g, p]);
|
|
84
|
+
return /* @__PURE__ */ _(l, { children: [
|
|
85
|
+
/* @__PURE__ */ _("div", { className: B, "data-testid": v, ...j, children: [
|
|
86
|
+
H,
|
|
87
|
+
/* @__PURE__ */ a("div", { className: e["page-header__main-content"], children: /* @__PURE__ */ a("div", { className: e["page-header__main-left-content"], children: r ? /* @__PURE__ */ a(l, { children: /* @__PURE__ */ a("div", { className: e["header-bubble"], children: /* @__PURE__ */ a(
|
|
88
|
+
"div",
|
|
89
|
+
{
|
|
90
|
+
className: f ? b(e["header-bubble--container"], e["header-bubble--container--full"]) : e["header-bubble--container"],
|
|
91
|
+
"data-testid": L,
|
|
92
|
+
children: r
|
|
93
|
+
}
|
|
94
|
+
) }) }) : /* @__PURE__ */ _(l, { children: [
|
|
95
|
+
/* @__PURE__ */ a("h1", { className: b(e.title, k), "data-testid": x, children: n }),
|
|
96
|
+
/* @__PURE__ */ a("h2", { className: b(e.subtitle, N), "data-testid": C, children: c })
|
|
97
|
+
] }) }) }),
|
|
98
|
+
h && /* @__PURE__ */ a("div", { className: e["page-header__bottom-content"], children: h })
|
|
99
|
+
] }),
|
|
100
|
+
r && /* @__PURE__ */ a("div", { className: e["header-bubble-margin"] })
|
|
101
|
+
] });
|
|
90
102
|
};
|
|
91
103
|
export {
|
|
92
|
-
|
|
104
|
+
E as PageHeader
|
|
93
105
|
};
|
|
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
|
|
|
2
2
|
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, headerBubble, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, "data-testid-
|
|
5
|
+
component: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, headerBubble, fullWidthHeaderBubble, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, "data-testid-header-bubble": headerBubbleTestId, ...props }: import('./PageHeader').PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
tags: string[];
|
|
7
7
|
};
|
|
8
8
|
export default meta;
|
|
@@ -14,3 +14,4 @@ export declare const WithRightChildren: Story;
|
|
|
14
14
|
export declare const WithBottomChildren: Story;
|
|
15
15
|
export declare const WithHeaderBubble: Story;
|
|
16
16
|
export declare const WithLargeHeaderBubble: Story;
|
|
17
|
+
export declare const WithFullHeaderBubble: Story;
|
|
@@ -10,7 +10,7 @@ export type SnackbarProps = InputHTMLAttributes<HTMLInputElement> & {
|
|
|
10
10
|
open?: boolean;
|
|
11
11
|
/** ID that tests can use to get this component from the DOM */
|
|
12
12
|
'data-testid'?: string;
|
|
13
|
-
/** Space
|
|
13
|
+
/** Space separated list of CSS classes to apply */
|
|
14
14
|
classNameWrapper?: string;
|
|
15
15
|
/** Duration of visibility */
|
|
16
16
|
autoHideDuration?: number;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as h, jsxs as Y } from "react/jsx-runtime";
|
|
2
|
-
import * as
|
|
3
|
-
import
|
|
4
|
-
import { c as
|
|
2
|
+
import * as N from "react";
|
|
3
|
+
import S, { useState as V, useRef as X } from "react";
|
|
4
|
+
import { c as R } from "../../clsx-DB4S2d7J.js";
|
|
5
5
|
import { Icon as K } from "../Icon/Icon.js";
|
|
6
6
|
import { Text as $ } from "../Typography/Typography.js";
|
|
7
|
-
import { g as z, a as J, b as
|
|
7
|
+
import { g as z, a as J, b as D, f as H, _ as j, c as U, P as n, d as Q, e as Z } from "../../useSlotProps-C_I1kEHr.js";
|
|
8
8
|
import { u as ee } from "../../useTimeout-DxF9kiZL.js";
|
|
9
9
|
import { u as I } from "../../useEventCallback-BAQJJ3ye.js";
|
|
10
10
|
import { C as B } from "../../ClickAwayListener-DbEYZpyh.js";
|
|
@@ -22,58 +22,58 @@ function ne(u = {}) {
|
|
|
22
22
|
open: t,
|
|
23
23
|
resumeHideDuration: e
|
|
24
24
|
} = u, o = ee();
|
|
25
|
-
|
|
25
|
+
N.useEffect(() => {
|
|
26
26
|
if (!t)
|
|
27
27
|
return;
|
|
28
|
-
function l
|
|
29
|
-
|
|
28
|
+
function c(l) {
|
|
29
|
+
l.defaultPrevented || (l.key === "Escape" || l.key === "Esc") && (r == null || r(l, "escapeKeyDown"));
|
|
30
30
|
}
|
|
31
|
-
return document.addEventListener("keydown",
|
|
32
|
-
document.removeEventListener("keydown",
|
|
31
|
+
return document.addEventListener("keydown", c), () => {
|
|
32
|
+
document.removeEventListener("keydown", c);
|
|
33
33
|
};
|
|
34
34
|
}, [t, r]);
|
|
35
|
-
const a = I((
|
|
36
|
-
r == null || r(
|
|
37
|
-
}), d = I((
|
|
38
|
-
!r ||
|
|
35
|
+
const a = I((c, l) => {
|
|
36
|
+
r == null || r(c, l);
|
|
37
|
+
}), d = I((c) => {
|
|
38
|
+
!r || c == null || o.start(c, () => {
|
|
39
39
|
a(null, "timeout");
|
|
40
40
|
});
|
|
41
41
|
});
|
|
42
|
-
|
|
43
|
-
const m = (
|
|
44
|
-
r == null || r(
|
|
45
|
-
}, p = o.clear, E =
|
|
42
|
+
N.useEffect(() => (t && d(s), o.clear), [t, s, d, o]);
|
|
43
|
+
const m = (c) => {
|
|
44
|
+
r == null || r(c, "clickaway");
|
|
45
|
+
}, p = o.clear, E = N.useCallback(() => {
|
|
46
46
|
s != null && d(e ?? s * 0.5);
|
|
47
|
-
}, [s, e, d]),
|
|
48
|
-
const f =
|
|
49
|
-
f == null || f(
|
|
50
|
-
},
|
|
51
|
-
const f =
|
|
52
|
-
f == null || f(
|
|
53
|
-
},
|
|
54
|
-
const f =
|
|
55
|
-
f == null || f(
|
|
56
|
-
},
|
|
57
|
-
const f =
|
|
58
|
-
f == null || f(
|
|
47
|
+
}, [s, e, d]), b = (c) => (l) => {
|
|
48
|
+
const f = c.onBlur;
|
|
49
|
+
f == null || f(l), E();
|
|
50
|
+
}, g = (c) => (l) => {
|
|
51
|
+
const f = c.onFocus;
|
|
52
|
+
f == null || f(l), p();
|
|
53
|
+
}, w = (c) => (l) => {
|
|
54
|
+
const f = c.onMouseEnter;
|
|
55
|
+
f == null || f(l), p();
|
|
56
|
+
}, O = (c) => (l) => {
|
|
57
|
+
const f = c.onMouseLeave;
|
|
58
|
+
f == null || f(l), E();
|
|
59
59
|
};
|
|
60
|
-
return
|
|
60
|
+
return N.useEffect(() => {
|
|
61
61
|
if (!i && t)
|
|
62
62
|
return window.addEventListener("focus", E), window.addEventListener("blur", p), () => {
|
|
63
63
|
window.removeEventListener("focus", E), window.removeEventListener("blur", p);
|
|
64
64
|
};
|
|
65
65
|
}, [i, t, E, p]), {
|
|
66
|
-
getRootProps: (
|
|
67
|
-
const
|
|
68
|
-
return
|
|
66
|
+
getRootProps: (c = {}) => {
|
|
67
|
+
const l = D({}, H(u), H(c));
|
|
68
|
+
return D({
|
|
69
69
|
// ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
|
|
70
70
|
// See https://github.com/mui/material-ui/issues/29080
|
|
71
71
|
role: "presentation"
|
|
72
|
-
},
|
|
73
|
-
onBlur:
|
|
74
|
-
onFocus:
|
|
75
|
-
onMouseEnter:
|
|
76
|
-
onMouseLeave:
|
|
72
|
+
}, c, l, {
|
|
73
|
+
onBlur: b(l),
|
|
74
|
+
onFocus: g(l),
|
|
75
|
+
onMouseEnter: w(l),
|
|
76
|
+
onMouseLeave: O(l)
|
|
77
77
|
});
|
|
78
78
|
},
|
|
79
79
|
onClickAway: m
|
|
@@ -81,7 +81,7 @@ function ne(u = {}) {
|
|
|
81
81
|
}
|
|
82
82
|
const oe = ["autoHideDuration", "children", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"], re = () => Q({
|
|
83
83
|
root: ["root"]
|
|
84
|
-
}, Z(te)), q = /* @__PURE__ */
|
|
84
|
+
}, Z(te)), q = /* @__PURE__ */ N.forwardRef(function(s, i) {
|
|
85
85
|
const {
|
|
86
86
|
autoHideDuration: r = null,
|
|
87
87
|
children: t,
|
|
@@ -92,35 +92,35 @@ const oe = ["autoHideDuration", "children", "disableWindowBlurListener", "exited
|
|
|
92
92
|
resumeHideDuration: m,
|
|
93
93
|
slotProps: p = {},
|
|
94
94
|
slots: E = {}
|
|
95
|
-
} = s,
|
|
96
|
-
getRootProps:
|
|
97
|
-
onClickAway:
|
|
98
|
-
} = ne(
|
|
95
|
+
} = s, b = j(s, oe), g = re(), {
|
|
96
|
+
getRootProps: w,
|
|
97
|
+
onClickAway: O
|
|
98
|
+
} = ne(D({}, s, {
|
|
99
99
|
autoHideDuration: r,
|
|
100
100
|
disableWindowBlurListener: e,
|
|
101
101
|
onClose: a,
|
|
102
102
|
open: d,
|
|
103
103
|
resumeHideDuration: m
|
|
104
|
-
})), L = s,
|
|
105
|
-
elementType:
|
|
106
|
-
getSlotProps:
|
|
107
|
-
externalForwardedProps:
|
|
104
|
+
})), L = s, c = E.root || "div", l = U({
|
|
105
|
+
elementType: c,
|
|
106
|
+
getSlotProps: w,
|
|
107
|
+
externalForwardedProps: b,
|
|
108
108
|
externalSlotProps: p.root,
|
|
109
109
|
additionalProps: {
|
|
110
110
|
ref: i
|
|
111
111
|
},
|
|
112
112
|
ownerState: L,
|
|
113
|
-
className:
|
|
113
|
+
className: g.root
|
|
114
114
|
}), f = U({
|
|
115
115
|
elementType: B,
|
|
116
116
|
externalSlotProps: p.clickAwayListener,
|
|
117
117
|
additionalProps: {
|
|
118
|
-
onClickAway:
|
|
118
|
+
onClickAway: O
|
|
119
119
|
},
|
|
120
120
|
ownerState: L
|
|
121
121
|
});
|
|
122
|
-
return delete f.ownerState, !d && o ? null : /* @__PURE__ */ h(B,
|
|
123
|
-
children: /* @__PURE__ */ h(
|
|
122
|
+
return delete f.ownerState, !d && o ? null : /* @__PURE__ */ h(B, D({}, f, {
|
|
123
|
+
children: /* @__PURE__ */ h(c, D({}, l, {
|
|
124
124
|
children: t
|
|
125
125
|
}))
|
|
126
126
|
}));
|
|
@@ -225,22 +225,22 @@ process.env.NODE_ENV !== "production" && n.oneOfType([n.string, n.shape({
|
|
|
225
225
|
exitDone: n.string,
|
|
226
226
|
exitActive: n.string
|
|
227
227
|
})]);
|
|
228
|
-
const G =
|
|
228
|
+
const G = S.createContext(null);
|
|
229
229
|
var ie = function(s) {
|
|
230
230
|
return s.scrollTop;
|
|
231
|
-
},
|
|
231
|
+
}, C = "unmounted", v = "exited", k = "entering", y = "entered", A = "exiting", x = /* @__PURE__ */ function(u) {
|
|
232
232
|
se(s, u);
|
|
233
233
|
function s(r, t) {
|
|
234
234
|
var e;
|
|
235
235
|
e = u.call(this, r, t) || this;
|
|
236
236
|
var o = t, a = o && !o.isMounting ? r.enter : r.appear, d;
|
|
237
|
-
return e.appearStatus = null, r.in ? a ? (d = v, e.appearStatus = k) : d =
|
|
237
|
+
return e.appearStatus = null, r.in ? a ? (d = v, e.appearStatus = k) : d = y : r.unmountOnExit || r.mountOnEnter ? d = C : d = v, e.state = {
|
|
238
238
|
status: d
|
|
239
239
|
}, e.nextCallback = null, e;
|
|
240
240
|
}
|
|
241
241
|
s.getDerivedStateFromProps = function(t, e) {
|
|
242
242
|
var o = t.in;
|
|
243
|
-
return o && e.status ===
|
|
243
|
+
return o && e.status === C ? {
|
|
244
244
|
status: v
|
|
245
245
|
} : null;
|
|
246
246
|
};
|
|
@@ -251,7 +251,7 @@ var ie = function(s) {
|
|
|
251
251
|
var e = null;
|
|
252
252
|
if (t !== this.props) {
|
|
253
253
|
var o = this.state.status;
|
|
254
|
-
this.props.in ? o !== k && o !==
|
|
254
|
+
this.props.in ? o !== k && o !== y && (e = k) : (o === k || o === y) && (e = A);
|
|
255
255
|
}
|
|
256
256
|
this.updateStatus(!1, e);
|
|
257
257
|
}, i.componentWillUnmount = function() {
|
|
@@ -275,13 +275,13 @@ var ie = function(s) {
|
|
|
275
275
|
this.performExit();
|
|
276
276
|
else
|
|
277
277
|
this.props.unmountOnExit && this.state.status === v && this.setState({
|
|
278
|
-
status:
|
|
278
|
+
status: C
|
|
279
279
|
});
|
|
280
280
|
}, i.performEnter = function(t) {
|
|
281
|
-
var e = this, o = this.props.enter, a = this.context ? this.context.isMounting : t, d = this.props.nodeRef ? [a] : [P.findDOMNode(this), a], m = d[0], p = d[1], E = this.getTimeouts(),
|
|
281
|
+
var e = this, o = this.props.enter, a = this.context ? this.context.isMounting : t, d = this.props.nodeRef ? [a] : [P.findDOMNode(this), a], m = d[0], p = d[1], E = this.getTimeouts(), b = a ? E.appear : E.enter;
|
|
282
282
|
if (!t && !o || F.disabled) {
|
|
283
283
|
this.safeSetState({
|
|
284
|
-
status:
|
|
284
|
+
status: y
|
|
285
285
|
}, function() {
|
|
286
286
|
e.props.onEntered(m);
|
|
287
287
|
});
|
|
@@ -290,9 +290,9 @@ var ie = function(s) {
|
|
|
290
290
|
this.props.onEnter(m, p), this.safeSetState({
|
|
291
291
|
status: k
|
|
292
292
|
}, function() {
|
|
293
|
-
e.props.onEntering(m, p), e.onTransitionEnd(
|
|
293
|
+
e.props.onEntering(m, p), e.onTransitionEnd(b, function() {
|
|
294
294
|
e.safeSetState({
|
|
295
|
-
status:
|
|
295
|
+
status: y
|
|
296
296
|
}, function() {
|
|
297
297
|
e.props.onEntered(m, p);
|
|
298
298
|
});
|
|
@@ -344,21 +344,21 @@ var ie = function(s) {
|
|
|
344
344
|
t != null && setTimeout(this.nextCallback, t);
|
|
345
345
|
}, i.render = function() {
|
|
346
346
|
var t = this.state.status;
|
|
347
|
-
if (t ===
|
|
347
|
+
if (t === C)
|
|
348
348
|
return null;
|
|
349
349
|
var e = this.props, o = e.children;
|
|
350
350
|
e.in, e.mountOnEnter, e.unmountOnExit, e.appear, e.enter, e.exit, e.timeout, e.addEndListener, e.onEnter, e.onEntering, e.onEntered, e.onExit, e.onExiting, e.onExited, e.nodeRef;
|
|
351
351
|
var a = j(e, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
|
|
352
352
|
return (
|
|
353
353
|
// allows for nested Transitions
|
|
354
|
-
/* @__PURE__ */
|
|
354
|
+
/* @__PURE__ */ S.createElement(G.Provider, {
|
|
355
355
|
value: null
|
|
356
|
-
}, typeof o == "function" ? o(t, a) :
|
|
356
|
+
}, typeof o == "function" ? o(t, a) : S.cloneElement(S.Children.only(o), a))
|
|
357
357
|
);
|
|
358
358
|
}, s;
|
|
359
|
-
}(
|
|
360
|
-
|
|
361
|
-
|
|
359
|
+
}(S.Component);
|
|
360
|
+
x.contextType = G;
|
|
361
|
+
x.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
362
362
|
/**
|
|
363
363
|
* A React reference to DOM element that need to transition:
|
|
364
364
|
* https://stackoverflow.com/a/51127130/4671932
|
|
@@ -527,36 +527,37 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
527
527
|
*/
|
|
528
528
|
onExited: n.func
|
|
529
529
|
} : {};
|
|
530
|
-
function
|
|
530
|
+
function _() {
|
|
531
531
|
}
|
|
532
|
-
|
|
532
|
+
x.defaultProps = {
|
|
533
533
|
in: !1,
|
|
534
534
|
mountOnEnter: !1,
|
|
535
535
|
unmountOnExit: !1,
|
|
536
536
|
appear: !1,
|
|
537
537
|
enter: !0,
|
|
538
538
|
exit: !0,
|
|
539
|
-
onEnter:
|
|
540
|
-
onEntering:
|
|
541
|
-
onEntered:
|
|
542
|
-
onExit:
|
|
543
|
-
onExiting:
|
|
544
|
-
onExited:
|
|
539
|
+
onEnter: _,
|
|
540
|
+
onEntering: _,
|
|
541
|
+
onEntered: _,
|
|
542
|
+
onExit: _,
|
|
543
|
+
onExiting: _,
|
|
544
|
+
onExited: _
|
|
545
545
|
};
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
const ue = "
|
|
546
|
+
x.UNMOUNTED = C;
|
|
547
|
+
x.EXITED = v;
|
|
548
|
+
x.ENTERING = k;
|
|
549
|
+
x.ENTERED = y;
|
|
550
|
+
x.EXITING = A;
|
|
551
|
+
const ue = "_snackbar_14f4w_2", ce = "_bottomToTop_14f4w_1", T = {
|
|
552
552
|
snackbar: ue,
|
|
553
|
-
"snackbar__snackbar-el-wrapper": "_snackbar__snackbar-el-
|
|
554
|
-
"snackbar--content": "_snackbar--
|
|
555
|
-
"snackbar--
|
|
556
|
-
"snackbar--
|
|
557
|
-
"snackbar--
|
|
558
|
-
"snackbar--
|
|
559
|
-
|
|
553
|
+
"snackbar__snackbar-el-wrapper": "_snackbar__snackbar-el-wrapper_14f4w_15",
|
|
554
|
+
"snackbar--content": "_snackbar--content_14f4w_20",
|
|
555
|
+
"snackbar--message": "_snackbar--message_14f4w_33",
|
|
556
|
+
"snackbar--success": "_snackbar--success_14f4w_37",
|
|
557
|
+
"snackbar--error": "_snackbar--error_14f4w_41",
|
|
558
|
+
"snackbar--warning": "_snackbar--warning_14f4w_45",
|
|
559
|
+
"snackbar--action": "_snackbar--action_14f4w_49",
|
|
560
|
+
bottomToTop: ce
|
|
560
561
|
}, ke = ({
|
|
561
562
|
snackbarMessage: u,
|
|
562
563
|
variant: s,
|
|
@@ -573,43 +574,43 @@ const ue = "_snackbar_8unab_2", le = "_bottomToTop_8unab_1", _ = {
|
|
|
573
574
|
exiting: "translateY(80px)",
|
|
574
575
|
exited: "translateY(80px)",
|
|
575
576
|
unmounted: "translateY(80px)"
|
|
576
|
-
},
|
|
577
|
+
}, b = () => {
|
|
577
578
|
m(!1);
|
|
578
|
-
},
|
|
579
|
+
}, g = () => {
|
|
579
580
|
m(!0);
|
|
580
581
|
};
|
|
581
|
-
return /* @__PURE__ */ h("div", { className:
|
|
582
|
+
return /* @__PURE__ */ h("div", { className: R(T.snackbar, o), children: /* @__PURE__ */ h(
|
|
582
583
|
q,
|
|
583
584
|
{
|
|
584
585
|
autoHideDuration: i,
|
|
585
586
|
open: r,
|
|
586
|
-
onClose: (
|
|
587
|
+
onClose: (w, O) => O !== "clickaway" && (t == null ? void 0 : t()),
|
|
587
588
|
exited: d,
|
|
588
|
-
className:
|
|
589
|
+
className: R(T["snackbar__snackbar-el-wrapper"]),
|
|
589
590
|
children: /* @__PURE__ */ h(
|
|
590
|
-
|
|
591
|
+
x,
|
|
591
592
|
{
|
|
592
593
|
timeout: { enter: 400, exit: 400 },
|
|
593
594
|
in: r,
|
|
594
595
|
appear: !0,
|
|
595
596
|
unmountOnExit: !0,
|
|
596
|
-
onEnter:
|
|
597
|
-
onExited:
|
|
597
|
+
onEnter: b,
|
|
598
|
+
onExited: g,
|
|
598
599
|
onExit: e,
|
|
599
600
|
nodeRef: p,
|
|
600
|
-
children: (
|
|
601
|
+
children: (w) => /* @__PURE__ */ Y(
|
|
601
602
|
"div",
|
|
602
603
|
{
|
|
603
|
-
className:
|
|
604
|
+
className: R(T["snackbar--content"], T[`snackbar--${s}`]),
|
|
604
605
|
style: {
|
|
605
|
-
transform: E[
|
|
606
|
+
transform: E[w],
|
|
606
607
|
transition: "transform 300ms ease"
|
|
607
608
|
},
|
|
608
609
|
ref: p,
|
|
609
610
|
"data-testid": a,
|
|
610
611
|
children: [
|
|
611
|
-
/* @__PURE__ */ h("div", { className:
|
|
612
|
-
/* @__PURE__ */ h("
|
|
612
|
+
/* @__PURE__ */ h("div", { className: T["snackbar--message"], children: /* @__PURE__ */ h($, { variant: "base-lg", bold: !0, color: "var(--colors-neutral-text-color-text)", children: u }) }),
|
|
613
|
+
/* @__PURE__ */ h("button", { type: "button", className: R(T["snackbar--action"]), onClick: t, children: /* @__PURE__ */ h(K, { icon: "circle-xmark", color: "var(--colors-neutral-text-color-text)", size: "1.5rem" }) })
|
|
613
614
|
]
|
|
614
615
|
}
|
|
615
616
|
)
|