@pismo/marola 0.0.1-alpha.14 → 0.0.1-alpha.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/assets/Snackbar.css +1 -1
  2. package/dist/components/Snackbar/Snackbar.d.ts +17 -5
  3. package/dist/components/Snackbar/Snackbar.js +180 -180
  4. package/dist/components/Snackbar/Snackbar.stories.d.ts +318 -0
  5. package/dist/components/Snackbar/Snackbar.stories.js +62 -0
  6. package/package.json +1 -1
package/dist/assets/Snackbar.css CHANGED
@@ -1 +1 @@
1
- ._snackbar_kt3bd_1{display:block;width:40.5rem;margin:0 auto}@keyframes _bottomToTop_kt3bd_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._snackbar__snackbar-el-wrapper_kt3bd_14{position:fixed;bottom:1rem;z-index:5500}._snackbar--content_kt3bd_19{display:flex;align-items:center;justify-content:space-between;width:40.5rem;height:3.5rem;padding:1rem;overflow:hidden;border-radius:8px}._snackbar_kt3bd_1:has(._snackbar--success_kt3bd_29) ._snackbar--content_kt3bd_19{background-color:var(--secondary-green-darker)}._snackbar_kt3bd_1:has(._snackbar--error_kt3bd_32) ._snackbar--content_kt3bd_19{background-color:var(--alert)}._snackbar_kt3bd_1:has(._snackbar--attention_kt3bd_35) ._snackbar--content_kt3bd_19{background-color:var(--secondary-orange)}._snackbar--message_kt3bd_38{text-align:start}._snackbar--message_kt3bd_38 p{font-size:1rem;font-weight:900;color:var(--white-100)}._snackbar--action_kt3bd_46{position:absolute;top:1rem;right:1rem;padding:0;margin:0;cursor:pointer;background:none;border:none}
1
+ ._snackbar_13dfh_1{display:block;width:40.5rem;margin:0 auto}@keyframes _bottomToTop_13dfh_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._snackbar__snackbar-el-wrapper_13dfh_14{position:fixed;bottom:1rem;z-index:5500}._snackbar--content_13dfh_19{display:flex;align-items:center;justify-content:space-between;width:40.5rem;height:3.5rem;padding:1rem;overflow:hidden;border-radius:8px}._snackbar_13dfh_1:has(._snackbar--success_13dfh_29) ._snackbar--content_13dfh_19{background-color:var(--secondary-green-darker)}._snackbar_13dfh_1:has(._snackbar--error_13dfh_32) ._snackbar--content_13dfh_19{background-color:var(--alert)}._snackbar_13dfh_1:has(._snackbar--warning_13dfh_35) ._snackbar--content_13dfh_19{background-color:var(--secondary-orange)}._snackbar--message_13dfh_38{text-align:start}._snackbar--message_13dfh_38 p{font-size:1rem;font-weight:900;color:var(--white-100)}._snackbar--action_13dfh_46{position:absolute;top:1rem;right:1rem;padding:0;margin:0;cursor:pointer;background:none;border:none}
package/dist/components/Snackbar/Snackbar.d.ts CHANGED
@@ -1,13 +1,25 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
 
3
- type SnackbarProps = InputHTMLAttributes<HTMLInputElement> & {
3
+ export type SnackbarVariant = 'success' | 'error' | 'warning';
4
+ export type SnackbarProps = InputHTMLAttributes<HTMLInputElement> & {
5
+ /** Snackbar variant */
6
+ variant: SnackbarVariant;
7
+ /** Message of snackbar */
8
+ snackbarMessage: string;
9
+ /** The open state for component visibility */
4
10
  open?: boolean;
11
+ /** ID that tests can use to get this component from the DOM */
5
12
  'data-testid'?: string;
13
+ /** Space seperated list of CSS classes to apply */
6
14
  classNameWrapper?: string;
7
- color?: 'success' | 'error' | 'attention';
8
- snackbarMessage: string;
15
+ /** Duration of visibility */
9
16
  autoHideDuration?: number;
17
+ /** Callback for when close is clicked */
10
18
  onClose?: () => void;
11
19
  };
12
- export declare const Snackbar: ({ snackbarMessage, color, autoHideDuration, open, onClose, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
13
- export {};
20
+ /**
21
+ * Snackbars (also known as toasts) are used for
22
+ * brief notification of processes that
23
+ * have been or will be performed.
24
+ * */
25
+ export declare const Snackbar: ({ snackbarMessage, variant, autoHideDuration, open, onClose, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/Snackbar/Snackbar.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import '../../assets/Snackbar.css';
2
2
  import { jsx as h, jsxs as Y } from "react/jsx-runtime";
3
- import * as N from "react";
4
- import C, { useState as V, useRef as X } from "react";
5
- import { c as O } from "../../clsx-DB4S2d7J.js";
3
+ import * as w from "react";
4
+ import S, { useState as V, useRef as X } from "react";
5
+ import { c as N } from "../../clsx-DB4S2d7J.js";
6
6
  import { Icon as K } from "../Icon/Icon.js";
7
- import { a as w, _ as j } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
8
- import { g as $, a as z, e as H, b as U, P as t, c as J, d as Q } from "../../index-CqjC7P5Y.js";
7
+ import { a as D, _ as j } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
8
+ import { g as $, a as z, e as H, b as U, P as n, c as J, d as Q } from "../../index-CqjC7P5Y.js";
9
9
  import { u as Z } from "../../useTimeout-DxF9kiZL.js";
10
10
  import { u as I } from "../../useEventCallback-vAfOD-oT.js";
11
11
  import { C as B } from "../../ClickAwayListener-HI1G6ob9.js";
12
- import { R as D } from "../../index-BJ8HbRCy.js";
12
+ import { R } from "../../index-BJ8HbRCy.js";
13
13
  const W = "Snackbar";
14
14
  function ee(u) {
15
15
  return $(W, u);
@@ -20,60 +20,60 @@ function te(u = {}) {
20
20
  autoHideDuration: s = null,
21
21
  disableWindowBlurListener: a = !1,
22
22
  onClose: r,
23
- open: n,
23
+ open: t,
24
24
  resumeHideDuration: e
25
25
  } = u, o = Z();
26
- N.useEffect(() => {
27
- if (!n)
26
+ w.useEffect(() => {
27
+ if (!t)
28
28
  return;
29
- function l(d) {
29
+ function c(d) {
30
30
  d.defaultPrevented || (d.key === "Escape" || d.key === "Esc") && (r == null || r(d, "escapeKeyDown"));
31
31
  }
32
- return document.addEventListener("keydown", l), () => {
33
- document.removeEventListener("keydown", l);
32
+ return document.addEventListener("keydown", c), () => {
33
+ document.removeEventListener("keydown", c);
34
34
  };
35
- }, [n, r]);
36
- const i = I((l, d) => {
37
- r == null || r(l, d);
38
- }), c = I((l) => {
39
- !r || l == null || o.start(l, () => {
35
+ }, [t, r]);
36
+ const i = I((c, d) => {
37
+ r == null || r(c, d);
38
+ }), l = I((c) => {
39
+ !r || c == null || o.start(c, () => {
40
40
  i(null, "timeout");
41
41
  });
42
42
  });
43
- N.useEffect(() => (n && c(s), o.clear), [n, s, c, o]);
44
- const m = (l) => {
45
- r == null || r(l, "clickaway");
46
- }, p = o.clear, E = N.useCallback(() => {
47
- s != null && c(e ?? s * 0.5);
48
- }, [s, e, c]), x = (l) => (d) => {
49
- const f = l.onBlur;
43
+ w.useEffect(() => (t && l(s), o.clear), [t, s, l, o]);
44
+ const m = (c) => {
45
+ r == null || r(c, "clickaway");
46
+ }, p = o.clear, E = w.useCallback(() => {
47
+ s != null && l(e ?? s * 0.5);
48
+ }, [s, e, l]), x = (c) => (d) => {
49
+ const f = c.onBlur;
50
50
  f == null || f(d), E();
51
- }, g = (l) => (d) => {
52
- const f = l.onFocus;
51
+ }, _ = (c) => (d) => {
52
+ const f = c.onFocus;
53
53
  f == null || f(d), p();
54
- }, R = (l) => (d) => {
55
- const f = l.onMouseEnter;
54
+ }, O = (c) => (d) => {
55
+ const f = c.onMouseEnter;
56
56
  f == null || f(d), p();
57
- }, P = (l) => (d) => {
58
- const f = l.onMouseLeave;
57
+ }, P = (c) => (d) => {
58
+ const f = c.onMouseLeave;
59
59
  f == null || f(d), E();
60
60
  };
61
- return N.useEffect(() => {
62
- if (!a && n)
61
+ return w.useEffect(() => {
62
+ if (!a && t)
63
63
  return window.addEventListener("focus", E), window.addEventListener("blur", p), () => {
64
64
  window.removeEventListener("focus", E), window.removeEventListener("blur", p);
65
65
  };
66
- }, [a, n, E, p]), {
67
- getRootProps: (l = {}) => {
68
- const d = w({}, H(u), H(l));
69
- return w({
66
+ }, [a, t, E, p]), {
67
+ getRootProps: (c = {}) => {
68
+ const d = D({}, H(u), H(c));
69
+ return D({
70
70
  // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
71
71
  // See https://github.com/mui/material-ui/issues/29080
72
72
  role: "presentation"
73
- }, l, d, {
73
+ }, c, d, {
74
74
  onBlur: x(d),
75
- onFocus: g(d),
76
- onMouseEnter: R(d),
75
+ onFocus: _(d),
76
+ onMouseEnter: O(d),
77
77
  onMouseLeave: P(d)
78
78
  });
79
79
  },
@@ -82,36 +82,36 @@ function te(u = {}) {
82
82
  }
83
83
  const ne = ["autoHideDuration", "children", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"], oe = () => J({
84
84
  root: ["root"]
85
- }, Q(ee)), q = /* @__PURE__ */ N.forwardRef(function(s, a) {
85
+ }, Q(ee)), q = /* @__PURE__ */ w.forwardRef(function(s, a) {
86
86
  const {
87
87
  autoHideDuration: r = null,
88
- children: n,
88
+ children: t,
89
89
  disableWindowBlurListener: e = !1,
90
90
  exited: o = !0,
91
91
  onClose: i,
92
- open: c,
92
+ open: l,
93
93
  resumeHideDuration: m,
94
94
  slotProps: p = {},
95
95
  slots: E = {}
96
- } = s, x = j(s, ne), g = oe(), {
97
- getRootProps: R,
96
+ } = s, x = j(s, ne), _ = oe(), {
97
+ getRootProps: O,
98
98
  onClickAway: P
99
- } = te(w({}, s, {
99
+ } = te(D({}, s, {
100
100
  autoHideDuration: r,
101
101
  disableWindowBlurListener: e,
102
102
  onClose: i,
103
- open: c,
103
+ open: l,
104
104
  resumeHideDuration: m
105
- })), L = s, l = E.root || "div", d = U({
106
- elementType: l,
107
- getSlotProps: R,
105
+ })), L = s, c = E.root || "div", d = U({
106
+ elementType: c,
107
+ getSlotProps: O,
108
108
  externalForwardedProps: x,
109
109
  externalSlotProps: p.root,
110
110
  additionalProps: {
111
111
  ref: a
112
112
  },
113
113
  ownerState: L,
114
- className: g.root
114
+ className: _.root
115
115
  }), f = U({
116
116
  elementType: B,
117
117
  externalSlotProps: p.clickAwayListener,
@@ -120,9 +120,9 @@ const ne = ["autoHideDuration", "children", "disableWindowBlurListener", "exited
120
120
  },
121
121
  ownerState: L
122
122
  });
123
- return delete f.ownerState, !c && o ? null : /* @__PURE__ */ h(B, w({}, f, {
124
- children: /* @__PURE__ */ h(l, w({}, d, {
125
- children: n
123
+ return delete f.ownerState, !l && o ? null : /* @__PURE__ */ h(B, D({}, f, {
124
+ children: /* @__PURE__ */ h(c, D({}, d, {
125
+ children: t
126
126
  }))
127
127
  }));
128
128
  });
@@ -138,21 +138,21 @@ process.env.NODE_ENV !== "production" && (q.propTypes = {
138
138
  * the `null` value.
139
139
  * @default null
140
140
  */
141
- autoHideDuration: t.number,
141
+ autoHideDuration: n.number,
142
142
  /**
143
143
  * @ignore
144
144
  */
145
- children: t.node,
145
+ children: n.node,
146
146
  /**
147
147
  * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
148
148
  * @default false
149
149
  */
150
- disableWindowBlurListener: t.bool,
150
+ disableWindowBlurListener: n.bool,
151
151
  /**
152
152
  * The prop used to handle exited transition and unmount the component.
153
153
  * @default true
154
154
  */
155
- exited: t.bool,
155
+ exited: n.bool,
156
156
  /**
157
157
  * Callback fired when the component requests to be closed.
158
158
  * Typically `onClose` is used to set state in the parent component,
@@ -163,44 +163,44 @@ process.env.NODE_ENV !== "production" && (q.propTypes = {
163
163
  * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
164
164
  * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
165
165
  */
166
- onClose: t.func,
166
+ onClose: n.func,
167
167
  /**
168
168
  * If `true`, the component is shown.
169
169
  */
170
- open: t.bool,
170
+ open: n.bool,
171
171
  /**
172
172
  * The number of milliseconds to wait before dismissing after user interaction.
173
173
  * If `autoHideDuration` prop isn't specified, it does nothing.
174
174
  * If `autoHideDuration` prop is specified but `resumeHideDuration` isn't,
175
175
  * we default to `autoHideDuration / 2` ms.
176
176
  */
177
- resumeHideDuration: t.number,
177
+ resumeHideDuration: n.number,
178
178
  /**
179
179
  * The props used for each slot inside the Snackbar.
180
180
  * @default {}
181
181
  */
182
- slotProps: t.shape({
183
- clickAwayListener: t.oneOfType([t.func, t.shape({
184
- children: t.element.isRequired,
185
- disableReactTree: t.bool,
186
- mouseEvent: t.oneOf(["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", !1]),
187
- onClickAway: t.func,
188
- touchEvent: t.oneOf(["onTouchEnd", "onTouchStart", !1])
182
+ slotProps: n.shape({
183
+ clickAwayListener: n.oneOfType([n.func, n.shape({
184
+ children: n.element.isRequired,
185
+ disableReactTree: n.bool,
186
+ mouseEvent: n.oneOf(["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", !1]),
187
+ onClickAway: n.func,
188
+ touchEvent: n.oneOf(["onTouchEnd", "onTouchStart", !1])
189
189
  })]),
190
- root: t.oneOfType([t.func, t.object])
190
+ root: n.oneOfType([n.func, n.object])
191
191
  }),
192
192
  /**
193
193
  * The components used for each slot inside the Snackbar.
194
194
  * Either a string to use a HTML element or a component.
195
195
  * @default {}
196
196
  */
197
- slots: t.shape({
198
- root: t.elementType
197
+ slots: n.shape({
198
+ root: n.elementType
199
199
  })
200
200
  });
201
201
  function M(u, s) {
202
- return M = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(r, n) {
203
- return r.__proto__ = n, r;
202
+ return M = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(r, t) {
203
+ return r.__proto__ = t, r;
204
204
  }, M(u, s);
205
205
  }
206
206
  function re(u, s) {
@@ -209,80 +209,80 @@ function re(u, s) {
209
209
  const F = {
210
210
  disabled: !1
211
211
  };
212
- var se = process.env.NODE_ENV !== "production" ? t.oneOfType([t.number, t.shape({
213
- enter: t.number,
214
- exit: t.number,
215
- appear: t.number
212
+ var se = process.env.NODE_ENV !== "production" ? n.oneOfType([n.number, n.shape({
213
+ enter: n.number,
214
+ exit: n.number,
215
+ appear: n.number
216
216
  }).isRequired]) : null;
217
- process.env.NODE_ENV !== "production" && t.oneOfType([t.string, t.shape({
218
- enter: t.string,
219
- exit: t.string,
220
- active: t.string
221
- }), t.shape({
222
- enter: t.string,
223
- enterDone: t.string,
224
- enterActive: t.string,
225
- exit: t.string,
226
- exitDone: t.string,
227
- exitActive: t.string
217
+ process.env.NODE_ENV !== "production" && n.oneOfType([n.string, n.shape({
218
+ enter: n.string,
219
+ exit: n.string,
220
+ active: n.string
221
+ }), n.shape({
222
+ enter: n.string,
223
+ enterDone: n.string,
224
+ enterActive: n.string,
225
+ exit: n.string,
226
+ exitDone: n.string,
227
+ exitActive: n.string
228
228
  })]);
229
- const G = C.createContext(null);
229
+ const G = S.createContext(null);
230
230
  var ie = function(s) {
231
231
  return s.scrollTop;
232
- }, S = "unmounted", v = "exited", k = "entering", y = "entered", A = "exiting", b = /* @__PURE__ */ function(u) {
232
+ }, C = "unmounted", v = "exited", k = "entering", g = "entered", A = "exiting", b = /* @__PURE__ */ function(u) {
233
233
  re(s, u);
234
- function s(r, n) {
234
+ function s(r, t) {
235
235
  var e;
236
- e = u.call(this, r, n) || this;
237
- var o = n, i = o && !o.isMounting ? r.enter : r.appear, c;
238
- return e.appearStatus = null, r.in ? i ? (c = v, e.appearStatus = k) : c = y : r.unmountOnExit || r.mountOnEnter ? c = S : c = v, e.state = {
239
- status: c
236
+ e = u.call(this, r, t) || this;
237
+ var o = t, i = o && !o.isMounting ? r.enter : r.appear, l;
238
+ return e.appearStatus = null, r.in ? i ? (l = v, e.appearStatus = k) : l = g : r.unmountOnExit || r.mountOnEnter ? l = C : l = v, e.state = {
239
+ status: l
240
240
  }, e.nextCallback = null, e;
241
241
  }
242
- s.getDerivedStateFromProps = function(n, e) {
243
- var o = n.in;
244
- return o && e.status === S ? {
242
+ s.getDerivedStateFromProps = function(t, e) {
243
+ var o = t.in;
244
+ return o && e.status === C ? {
245
245
  status: v
246
246
  } : null;
247
247
  };
248
248
  var a = s.prototype;
249
249
  return a.componentDidMount = function() {
250
250
  this.updateStatus(!0, this.appearStatus);
251
- }, a.componentDidUpdate = function(n) {
251
+ }, a.componentDidUpdate = function(t) {
252
252
  var e = null;
253
- if (n !== this.props) {
253
+ if (t !== this.props) {
254
254
  var o = this.state.status;
255
- this.props.in ? o !== k && o !== y && (e = k) : (o === k || o === y) && (e = A);
255
+ this.props.in ? o !== k && o !== g && (e = k) : (o === k || o === g) && (e = A);
256
256
  }
257
257
  this.updateStatus(!1, e);
258
258
  }, a.componentWillUnmount = function() {
259
259
  this.cancelNextCallback();
260
260
  }, a.getTimeouts = function() {
261
- var n = this.props.timeout, e, o, i;
262
- return e = o = i = n, n != null && typeof n != "number" && (e = n.exit, o = n.enter, i = n.appear !== void 0 ? n.appear : o), {
261
+ var t = this.props.timeout, e, o, i;
262
+ return e = o = i = t, t != null && typeof t != "number" && (e = t.exit, o = t.enter, i = t.appear !== void 0 ? t.appear : o), {
263
263
  exit: e,
264
264
  enter: o,
265
265
  appear: i
266
266
  };
267
- }, a.updateStatus = function(n, e) {
268
- if (n === void 0 && (n = !1), e !== null)
267
+ }, a.updateStatus = function(t, e) {
268
+ if (t === void 0 && (t = !1), e !== null)
269
269
  if (this.cancelNextCallback(), e === k) {
270
270
  if (this.props.unmountOnExit || this.props.mountOnEnter) {
271
- var o = this.props.nodeRef ? this.props.nodeRef.current : D.findDOMNode(this);
271
+ var o = this.props.nodeRef ? this.props.nodeRef.current : R.findDOMNode(this);
272
272
  o && ie(o);
273
273
  }
274
- this.performEnter(n);
274
+ this.performEnter(t);
275
275
  } else
276
276
  this.performExit();
277
277
  else
278
278
  this.props.unmountOnExit && this.state.status === v && this.setState({
279
- status: S
279
+ status: C
280
280
  });
281
- }, a.performEnter = function(n) {
282
- var e = this, o = this.props.enter, i = this.context ? this.context.isMounting : n, c = this.props.nodeRef ? [i] : [D.findDOMNode(this), i], m = c[0], p = c[1], E = this.getTimeouts(), x = i ? E.appear : E.enter;
283
- if (!n && !o || F.disabled) {
281
+ }, a.performEnter = function(t) {
282
+ var e = this, o = this.props.enter, i = this.context ? this.context.isMounting : t, l = this.props.nodeRef ? [i] : [R.findDOMNode(this), i], m = l[0], p = l[1], E = this.getTimeouts(), x = i ? E.appear : E.enter;
283
+ if (!t && !o || F.disabled) {
284
284
  this.safeSetState({
285
- status: y
285
+ status: g
286
286
  }, function() {
287
287
  e.props.onEntered(m);
288
288
  });
@@ -293,71 +293,71 @@ var ie = function(s) {
293
293
  }, function() {
294
294
  e.props.onEntering(m, p), e.onTransitionEnd(x, function() {
295
295
  e.safeSetState({
296
- status: y
296
+ status: g
297
297
  }, function() {
298
298
  e.props.onEntered(m, p);
299
299
  });
300
300
  });
301
301
  });
302
302
  }, a.performExit = function() {
303
- var n = this, e = this.props.exit, o = this.getTimeouts(), i = this.props.nodeRef ? void 0 : D.findDOMNode(this);
303
+ var t = this, e = this.props.exit, o = this.getTimeouts(), i = this.props.nodeRef ? void 0 : R.findDOMNode(this);
304
304
  if (!e || F.disabled) {
305
305
  this.safeSetState({
306
306
  status: v
307
307
  }, function() {
308
- n.props.onExited(i);
308
+ t.props.onExited(i);
309
309
  });
310
310
  return;
311
311
  }
312
312
  this.props.onExit(i), this.safeSetState({
313
313
  status: A
314
314
  }, function() {
315
- n.props.onExiting(i), n.onTransitionEnd(o.exit, function() {
316
- n.safeSetState({
315
+ t.props.onExiting(i), t.onTransitionEnd(o.exit, function() {
316
+ t.safeSetState({
317
317
  status: v
318
318
  }, function() {
319
- n.props.onExited(i);
319
+ t.props.onExited(i);
320
320
  });
321
321
  });
322
322
  });
323
323
  }, a.cancelNextCallback = function() {
324
324
  this.nextCallback !== null && (this.nextCallback.cancel(), this.nextCallback = null);
325
- }, a.safeSetState = function(n, e) {
326
- e = this.setNextCallback(e), this.setState(n, e);
327
- }, a.setNextCallback = function(n) {
325
+ }, a.safeSetState = function(t, e) {
326
+ e = this.setNextCallback(e), this.setState(t, e);
327
+ }, a.setNextCallback = function(t) {
328
328
  var e = this, o = !0;
329
329
  return this.nextCallback = function(i) {
330
- o && (o = !1, e.nextCallback = null, n(i));
330
+ o && (o = !1, e.nextCallback = null, t(i));
331
331
  }, this.nextCallback.cancel = function() {
332
332
  o = !1;
333
333
  }, this.nextCallback;
334
- }, a.onTransitionEnd = function(n, e) {
334
+ }, a.onTransitionEnd = function(t, e) {
335
335
  this.setNextCallback(e);
336
- var o = this.props.nodeRef ? this.props.nodeRef.current : D.findDOMNode(this), i = n == null && !this.props.addEndListener;
336
+ var o = this.props.nodeRef ? this.props.nodeRef.current : R.findDOMNode(this), i = t == null && !this.props.addEndListener;
337
337
  if (!o || i) {
338
338
  setTimeout(this.nextCallback, 0);
339
339
  return;
340
340
  }
341
341
  if (this.props.addEndListener) {
342
- var c = this.props.nodeRef ? [this.nextCallback] : [o, this.nextCallback], m = c[0], p = c[1];
342
+ var l = this.props.nodeRef ? [this.nextCallback] : [o, this.nextCallback], m = l[0], p = l[1];
343
343
  this.props.addEndListener(m, p);
344
344
  }
345
- n != null && setTimeout(this.nextCallback, n);
345
+ t != null && setTimeout(this.nextCallback, t);
346
346
  }, a.render = function() {
347
- var n = this.state.status;
348
- if (n === S)
347
+ var t = this.state.status;
348
+ if (t === C)
349
349
  return null;
350
350
  var e = this.props, o = e.children;
351
351
  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;
352
352
  var i = j(e, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
353
353
  return (
354
354
  // allows for nested Transitions
355
- /* @__PURE__ */ C.createElement(G.Provider, {
355
+ /* @__PURE__ */ S.createElement(G.Provider, {
356
356
  value: null
357
- }, typeof o == "function" ? o(n, i) : C.cloneElement(C.Children.only(o), i))
357
+ }, typeof o == "function" ? o(t, i) : S.cloneElement(S.Children.only(o), i))
358
358
  );
359
359
  }, s;
360
- }(C.Component);
360
+ }(S.Component);
361
361
  b.contextType = G;
362
362
  b.propTypes = process.env.NODE_ENV !== "production" ? {
363
363
  /**
@@ -371,10 +371,10 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
371
371
  * (see
372
372
  * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
373
373
  */
374
- nodeRef: t.shape({
375
- current: typeof Element > "u" ? t.any : function(u, s, a, r, n, e) {
374
+ nodeRef: n.shape({
375
+ current: typeof Element > "u" ? n.any : function(u, s, a, r, t, e) {
376
376
  var o = u[s];
377
- return t.instanceOf(o && "ownerDocument" in o ? o.ownerDocument.defaultView.Element : Element)(u, s, a, r, n, e);
377
+ return n.instanceOf(o && "ownerDocument" in o ? o.ownerDocument.defaultView.Element : Element)(u, s, a, r, t, e);
378
378
  }
379
379
  }),
380
380
  /**
@@ -391,23 +391,23 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
391
391
  * </Transition>
392
392
  * ```
393
393
  */
394
- children: t.oneOfType([t.func.isRequired, t.element.isRequired]).isRequired,
394
+ children: n.oneOfType([n.func.isRequired, n.element.isRequired]).isRequired,
395
395
  /**
396
396
  * Show the component; triggers the enter or exit states
397
397
  */
398
- in: t.bool,
398
+ in: n.bool,
399
399
  /**
400
400
  * By default the child component is mounted immediately along with
401
401
  * the parent `Transition` component. If you want to "lazy mount" the component on the
402
402
  * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
403
403
  * mounted, even on "exited", unless you also specify `unmountOnExit`.
404
404
  */
405
- mountOnEnter: t.bool,
405
+ mountOnEnter: n.bool,
406
406
  /**
407
407
  * By default the child component stays mounted after it reaches the `'exited'` state.
408
408
  * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
409
409
  */
410
- unmountOnExit: t.bool,
410
+ unmountOnExit: n.bool,
411
411
  /**
412
412
  * By default the child component does not perform the enter transition when
413
413
  * it first mounts, regardless of the value of `in`. If you want this
@@ -419,15 +419,15 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
419
419
  * > additional `.appear-*` classes, that way you can choose to style it
420
420
  * > differently.
421
421
  */
422
- appear: t.bool,
422
+ appear: n.bool,
423
423
  /**
424
424
  * Enable or disable enter transitions.
425
425
  */
426
- enter: t.bool,
426
+ enter: n.bool,
427
427
  /**
428
428
  * Enable or disable exit transitions.
429
429
  */
430
- exit: t.bool,
430
+ exit: n.bool,
431
431
  /**
432
432
  * The duration of the transition, in milliseconds.
433
433
  * Required unless `addEndListener` is provided.
@@ -457,9 +457,9 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
457
457
  timeout: function(s) {
458
458
  var a = se;
459
459
  s.addEndListener || (a = a.isRequired);
460
- for (var r = arguments.length, n = new Array(r > 1 ? r - 1 : 0), e = 1; e < r; e++)
461
- n[e - 1] = arguments[e];
462
- return a.apply(void 0, [s].concat(n));
460
+ for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), e = 1; e < r; e++)
461
+ t[e - 1] = arguments[e];
462
+ return a.apply(void 0, [s].concat(t));
463
463
  },
464
464
  /**
465
465
  * Add a custom transition end trigger. Called with the transitioning
@@ -475,7 +475,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
475
475
  * }}
476
476
  * ```
477
477
  */
478
- addEndListener: t.func,
478
+ addEndListener: n.func,
479
479
  /**
480
480
  * Callback fired before the "entering" status is applied. An extra parameter
481
481
  * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
@@ -484,7 +484,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
484
484
  *
485
485
  * @type Function(node: HtmlElement, isAppearing: bool) -> void
486
486
  */
487
- onEnter: t.func,
487
+ onEnter: n.func,
488
488
  /**
489
489
  * Callback fired after the "entering" status is applied. An extra parameter
490
490
  * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
@@ -493,7 +493,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
493
493
  *
494
494
  * @type Function(node: HtmlElement, isAppearing: bool)
495
495
  */
496
- onEntering: t.func,
496
+ onEntering: n.func,
497
497
  /**
498
498
  * Callback fired after the "entered" status is applied. An extra parameter
499
499
  * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
@@ -502,7 +502,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
502
502
  *
503
503
  * @type Function(node: HtmlElement, isAppearing: bool) -> void
504
504
  */
505
- onEntered: t.func,
505
+ onEntered: n.func,
506
506
  /**
507
507
  * Callback fired before the "exiting" status is applied.
508
508
  *
@@ -510,7 +510,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
510
510
  *
511
511
  * @type Function(node: HtmlElement) -> void
512
512
  */
513
- onExit: t.func,
513
+ onExit: n.func,
514
514
  /**
515
515
  * Callback fired after the "exiting" status is applied.
516
516
  *
@@ -518,7 +518,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
518
518
  *
519
519
  * @type Function(node: HtmlElement) -> void
520
520
  */
521
- onExiting: t.func,
521
+ onExiting: n.func,
522
522
  /**
523
523
  * Callback fired after the "exited" status is applied.
524
524
  *
@@ -526,9 +526,9 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
526
526
  *
527
527
  * @type Function(node: HtmlElement) -> void
528
528
  */
529
- onExited: t.func
529
+ onExited: n.func
530
530
  } : {};
531
- function _() {
531
+ function T() {
532
532
  }
533
533
  b.defaultProps = {
534
534
  in: !1,
@@ -537,56 +537,56 @@ b.defaultProps = {
537
537
  appear: !1,
538
538
  enter: !0,
539
539
  exit: !0,
540
- onEnter: _,
541
- onEntering: _,
542
- onEntered: _,
543
- onExit: _,
544
- onExiting: _,
545
- onExited: _
540
+ onEnter: T,
541
+ onEntering: T,
542
+ onEntered: T,
543
+ onExit: T,
544
+ onExiting: T,
545
+ onExited: T
546
546
  };
547
- b.UNMOUNTED = S;
547
+ b.UNMOUNTED = C;
548
548
  b.EXITED = v;
549
549
  b.ENTERING = k;
550
- b.ENTERED = y;
550
+ b.ENTERED = g;
551
551
  b.EXITING = A;
552
- const ae = "_snackbar_kt3bd_1", ue = "_bottomToTop_kt3bd_1", T = {
552
+ const ae = "_snackbar_13dfh_1", ue = "_bottomToTop_13dfh_1", y = {
553
553
  snackbar: ae,
554
- "snackbar__snackbar-el-wrapper": "_snackbar__snackbar-el-wrapper_kt3bd_14",
555
- "snackbar--content": "_snackbar--content_kt3bd_19",
556
- "snackbar--success": "_snackbar--success_kt3bd_29",
557
- "snackbar--error": "_snackbar--error_kt3bd_32",
558
- "snackbar--attention": "_snackbar--attention_kt3bd_35",
559
- "snackbar--message": "_snackbar--message_kt3bd_38",
560
- "snackbar--action": "_snackbar--action_kt3bd_46",
554
+ "snackbar__snackbar-el-wrapper": "_snackbar__snackbar-el-wrapper_13dfh_14",
555
+ "snackbar--content": "_snackbar--content_13dfh_19",
556
+ "snackbar--success": "_snackbar--success_13dfh_29",
557
+ "snackbar--error": "_snackbar--error_13dfh_32",
558
+ "snackbar--warning": "_snackbar--warning_13dfh_35",
559
+ "snackbar--message": "_snackbar--message_13dfh_38",
560
+ "snackbar--action": "_snackbar--action_13dfh_46",
561
561
  bottomToTop: ue
562
562
  }, ve = ({
563
563
  snackbarMessage: u,
564
- color: s,
564
+ variant: s,
565
565
  autoHideDuration: a = 5e3,
566
566
  open: r = !0,
567
- onClose: n,
567
+ onClose: t,
568
568
  classNameWrapper: e,
569
569
  "data-testid": o
570
570
  }) => {
571
- const [i, c] = V(!0), m = X(null), p = {
571
+ const [i, l] = V(!0), m = X(null), p = {
572
572
  entering: "translateY(0)",
573
573
  entered: "translateY(0)",
574
574
  exiting: "translateY(80px)",
575
575
  exited: "translateY(80px)",
576
576
  unmounted: "translateY(80px)"
577
577
  }, E = () => {
578
- c(!1);
578
+ l(!1);
579
579
  }, x = () => {
580
- c(!0);
580
+ l(!0);
581
581
  };
582
- return /* @__PURE__ */ h("div", { className: O(T.snackbar, e), children: /* @__PURE__ */ h(
582
+ return /* @__PURE__ */ h("div", { className: N(y.snackbar, e), children: /* @__PURE__ */ h(
583
583
  q,
584
584
  {
585
585
  autoHideDuration: a,
586
586
  open: r,
587
- onClose: n,
587
+ onClose: (_, O) => O !== "clickaway" && (t == null ? void 0 : t()),
588
588
  exited: i,
589
- className: O(T["snackbar__snackbar-el-wrapper"]),
589
+ className: N(y["snackbar__snackbar-el-wrapper"]),
590
590
  children: /* @__PURE__ */ h(
591
591
  b,
592
592
  {
@@ -597,19 +597,19 @@ const ae = "_snackbar_kt3bd_1", ue = "_bottomToTop_kt3bd_1", T = {
597
597
  onEnter: E,
598
598
  onExited: x,
599
599
  nodeRef: m,
600
- children: (g) => /* @__PURE__ */ Y(
600
+ children: (_) => /* @__PURE__ */ Y(
601
601
  "div",
602
602
  {
603
- className: O(T["snackbar--content"], T[`snackbar--${s}`]),
603
+ className: N(y["snackbar--content"], y[`snackbar--${s}`]),
604
604
  style: {
605
- transform: p[g],
605
+ transform: p[_],
606
606
  transition: "transform 300ms ease"
607
607
  },
608
608
  ref: m,
609
609
  "data-testid": o,
610
610
  children: [
611
- /* @__PURE__ */ h("div", { className: O(T["snackbar--message"]), children: /* @__PURE__ */ h("p", { children: u }) }),
612
- /* @__PURE__ */ h("div", { className: O(T["snackbar--action"]), children: /* @__PURE__ */ h("a", { onClick: n, children: /* @__PURE__ */ h(K, { icon: "xmark", color: "var(--white-100)", size: "1.5rem" }) }) })
611
+ /* @__PURE__ */ h("div", { className: N(y["snackbar--message"]), children: /* @__PURE__ */ h("p", { children: u }) }),
612
+ /* @__PURE__ */ h("div", { className: N(y["snackbar--action"]), children: /* @__PURE__ */ h("a", { onClick: t, children: /* @__PURE__ */ h(K, { icon: "xmark", color: "var(--white-100)", size: "1.5rem" }) }) })
613
613
  ]
614
614
  }
615
615
  )
package/dist/components/Snackbar/Snackbar.stories.d.ts ADDED
@@ -0,0 +1,318 @@
1
+ import { SnackbarProps } from './Snackbar';
2
+ import { StoryObj } from '@storybook/react';
3
+
4
+ declare const meta: {
5
+ title: string;
6
+ component: ({ snackbarMessage, variant, autoHideDuration, open, onClose, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
7
+ tags: string[];
8
+ decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
9
+ accept?: string | undefined;
10
+ alt?: string | undefined;
11
+ autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;
12
+ capture?: boolean | "user" | "environment" | undefined;
13
+ checked?: boolean | undefined;
14
+ disabled?: boolean | undefined;
15
+ enterKeyHint?: "search" | "next" | "enter" | "done" | "go" | "previous" | "send" | undefined;
16
+ form?: string | undefined;
17
+ formAction?: string | undefined;
18
+ formEncType?: string | undefined;
19
+ formMethod?: string | undefined;
20
+ formNoValidate?: boolean | undefined;
21
+ formTarget?: string | undefined;
22
+ height?: string | number | undefined;
23
+ list?: string | undefined;
24
+ max?: string | number | undefined;
25
+ maxLength?: number | undefined;
26
+ min?: string | number | undefined;
27
+ minLength?: number | undefined;
28
+ multiple?: boolean | undefined;
29
+ name?: string | undefined;
30
+ pattern?: string | undefined;
31
+ placeholder?: string | undefined;
32
+ readOnly?: boolean | undefined;
33
+ required?: boolean | undefined;
34
+ size?: number | undefined;
35
+ src?: string | undefined;
36
+ step?: string | number | undefined;
37
+ type?: import('react').HTMLInputTypeAttribute | undefined;
38
+ value?: string | number | readonly string[] | undefined;
39
+ width?: string | number | undefined;
40
+ onChange?: import('react').ChangeEventHandler<HTMLInputElement> | undefined;
41
+ defaultChecked?: boolean | undefined;
42
+ defaultValue?: string | number | readonly string[] | undefined;
43
+ suppressContentEditableWarning?: boolean | undefined;
44
+ suppressHydrationWarning?: boolean | undefined;
45
+ accessKey?: string | undefined;
46
+ autoFocus?: boolean | undefined;
47
+ className?: string | undefined;
48
+ contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
49
+ contextMenu?: string | undefined;
50
+ dir?: string | undefined;
51
+ draggable?: (boolean | "true" | "false") | undefined;
52
+ hidden?: boolean | undefined;
53
+ id?: string | undefined;
54
+ lang?: string | undefined;
55
+ nonce?: string | undefined;
56
+ slot?: string | undefined;
57
+ spellCheck?: (boolean | "true" | "false") | undefined;
58
+ style?: import('react').CSSProperties | undefined;
59
+ tabIndex?: number | undefined;
60
+ title?: string | undefined;
61
+ translate?: "no" | "yes" | undefined;
62
+ radioGroup?: string | undefined;
63
+ role?: import('react').AriaRole | undefined;
64
+ about?: string | undefined;
65
+ content?: string | undefined;
66
+ datatype?: string | undefined;
67
+ inlist?: any;
68
+ prefix?: string | undefined;
69
+ property?: string | undefined;
70
+ rel?: string | undefined;
71
+ resource?: string | undefined;
72
+ rev?: string | undefined;
73
+ typeof?: string | undefined;
74
+ vocab?: string | undefined;
75
+ autoCapitalize?: string | undefined;
76
+ autoCorrect?: string | undefined;
77
+ autoSave?: string | undefined;
78
+ color?: string | undefined;
79
+ itemProp?: string | undefined;
80
+ itemScope?: boolean | undefined;
81
+ itemType?: string | undefined;
82
+ itemID?: string | undefined;
83
+ itemRef?: string | undefined;
84
+ results?: number | undefined;
85
+ security?: string | undefined;
86
+ unselectable?: "on" | "off" | undefined;
87
+ inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
88
+ is?: string | undefined;
89
+ "aria-activedescendant"?: string | undefined;
90
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
91
+ "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
92
+ "aria-braillelabel"?: string | undefined;
93
+ "aria-brailleroledescription"?: string | undefined;
94
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
95
+ "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
96
+ "aria-colcount"?: number | undefined;
97
+ "aria-colindex"?: number | undefined;
98
+ "aria-colindextext"?: string | undefined;
99
+ "aria-colspan"?: number | undefined;
100
+ "aria-controls"?: string | undefined;
101
+ "aria-current"?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
102
+ "aria-describedby"?: string | undefined;
103
+ "aria-description"?: string | undefined;
104
+ "aria-details"?: string | undefined;
105
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
106
+ "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
107
+ "aria-errormessage"?: string | undefined;
108
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
109
+ "aria-flowto"?: string | undefined;
110
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
111
+ "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
112
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
113
+ "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
114
+ "aria-keyshortcuts"?: string | undefined;
115
+ "aria-label"?: string | undefined;
116
+ "aria-labelledby"?: string | undefined;
117
+ "aria-level"?: number | undefined;
118
+ "aria-live"?: "off" | "assertive" | "polite" | undefined;
119
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
120
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
121
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
122
+ "aria-orientation"?: "horizontal" | "vertical" | undefined;
123
+ "aria-owns"?: string | undefined;
124
+ "aria-placeholder"?: string | undefined;
125
+ "aria-posinset"?: number | undefined;
126
+ "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
127
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
128
+ "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
129
+ "aria-required"?: (boolean | "true" | "false") | undefined;
130
+ "aria-roledescription"?: string | undefined;
131
+ "aria-rowcount"?: number | undefined;
132
+ "aria-rowindex"?: number | undefined;
133
+ "aria-rowindextext"?: string | undefined;
134
+ "aria-rowspan"?: number | undefined;
135
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
136
+ "aria-setsize"?: number | undefined;
137
+ "aria-sort"?: "none" | "other" | "ascending" | "descending" | undefined;
138
+ "aria-valuemax"?: number | undefined;
139
+ "aria-valuemin"?: number | undefined;
140
+ "aria-valuenow"?: number | undefined;
141
+ "aria-valuetext"?: string | undefined;
142
+ children?: import('react').ReactNode;
143
+ dangerouslySetInnerHTML?: {
144
+ __html: string | TrustedHTML;
145
+ } | undefined;
146
+ onCopy?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
147
+ onCopyCapture?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
148
+ onCut?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
149
+ onCutCapture?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
150
+ onPaste?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
151
+ onPasteCapture?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
152
+ onCompositionEnd?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
153
+ onCompositionEndCapture?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
154
+ onCompositionStart?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
155
+ onCompositionStartCapture?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
156
+ onCompositionUpdate?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
157
+ onCompositionUpdateCapture?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
158
+ onFocus?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
159
+ onFocusCapture?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
160
+ onBlur?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
161
+ onBlurCapture?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
162
+ onChangeCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
163
+ onBeforeInput?: import('react').FormEventHandler<HTMLInputElement> | undefined;
164
+ onBeforeInputCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
165
+ onInput?: import('react').FormEventHandler<HTMLInputElement> | undefined;
166
+ onInputCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
167
+ onReset?: import('react').FormEventHandler<HTMLInputElement> | undefined;
168
+ onResetCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
169
+ onSubmit?: import('react').FormEventHandler<HTMLInputElement> | undefined;
170
+ onSubmitCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
171
+ onInvalid?: import('react').FormEventHandler<HTMLInputElement> | undefined;
172
+ onInvalidCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
173
+ onLoad?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
174
+ onLoadCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
175
+ onError?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
176
+ onErrorCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
177
+ onKeyDown?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
178
+ onKeyDownCapture?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
179
+ onKeyPress?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
180
+ onKeyPressCapture?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
181
+ onKeyUp?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
182
+ onKeyUpCapture?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
183
+ onAbort?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
184
+ onAbortCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
185
+ onCanPlay?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
186
+ onCanPlayCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
187
+ onCanPlayThrough?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
188
+ onCanPlayThroughCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
189
+ onDurationChange?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
190
+ onDurationChangeCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
191
+ onEmptied?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
192
+ onEmptiedCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
193
+ onEncrypted?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
194
+ onEncryptedCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
195
+ onEnded?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
196
+ onEndedCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
197
+ onLoadedData?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
198
+ onLoadedDataCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
199
+ onLoadedMetadata?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
200
+ onLoadedMetadataCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
201
+ onLoadStart?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
202
+ onLoadStartCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
203
+ onPause?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
204
+ onPauseCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
205
+ onPlay?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
206
+ onPlayCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
207
+ onPlaying?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
208
+ onPlayingCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
209
+ onProgress?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
210
+ onProgressCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
211
+ onRateChange?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
212
+ onRateChangeCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
213
+ onResize?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
214
+ onResizeCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
215
+ onSeeked?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
216
+ onSeekedCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
217
+ onSeeking?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
218
+ onSeekingCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
219
+ onStalled?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
220
+ onStalledCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
221
+ onSuspend?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
222
+ onSuspendCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
223
+ onTimeUpdate?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
224
+ onTimeUpdateCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
225
+ onVolumeChange?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
226
+ onVolumeChangeCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
227
+ onWaiting?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
228
+ onWaitingCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
229
+ onAuxClick?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
230
+ onAuxClickCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
231
+ onClick?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
232
+ onClickCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
233
+ onContextMenu?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
234
+ onContextMenuCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
235
+ onDoubleClick?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
236
+ onDoubleClickCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
237
+ onDrag?: import('react').DragEventHandler<HTMLInputElement> | undefined;
238
+ onDragCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
239
+ onDragEnd?: import('react').DragEventHandler<HTMLInputElement> | undefined;
240
+ onDragEndCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
241
+ onDragEnter?: import('react').DragEventHandler<HTMLInputElement> | undefined;
242
+ onDragEnterCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
243
+ onDragExit?: import('react').DragEventHandler<HTMLInputElement> | undefined;
244
+ onDragExitCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
245
+ onDragLeave?: import('react').DragEventHandler<HTMLInputElement> | undefined;
246
+ onDragLeaveCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
247
+ onDragOver?: import('react').DragEventHandler<HTMLInputElement> | undefined;
248
+ onDragOverCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
249
+ onDragStart?: import('react').DragEventHandler<HTMLInputElement> | undefined;
250
+ onDragStartCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
251
+ onDrop?: import('react').DragEventHandler<HTMLInputElement> | undefined;
252
+ onDropCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
253
+ onMouseDown?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
254
+ onMouseDownCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
255
+ onMouseEnter?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
256
+ onMouseLeave?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
257
+ onMouseMove?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
258
+ onMouseMoveCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
259
+ onMouseOut?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
260
+ onMouseOutCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
261
+ onMouseOver?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
262
+ onMouseOverCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
263
+ onMouseUp?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
264
+ onMouseUpCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
265
+ onSelect?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
266
+ onSelectCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
267
+ onTouchCancel?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
268
+ onTouchCancelCapture?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
269
+ onTouchEnd?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
270
+ onTouchEndCapture?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
271
+ onTouchMove?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
272
+ onTouchMoveCapture?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
273
+ onTouchStart?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
274
+ onTouchStartCapture?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
275
+ onPointerDown?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
276
+ onPointerDownCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
277
+ onPointerMove?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
278
+ onPointerMoveCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
279
+ onPointerUp?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
280
+ onPointerUpCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
281
+ onPointerCancel?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
282
+ onPointerCancelCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
283
+ onPointerEnter?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
284
+ onPointerLeave?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
285
+ onPointerOver?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
286
+ onPointerOverCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
287
+ onPointerOut?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
288
+ onPointerOutCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
289
+ onGotPointerCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
290
+ onGotPointerCaptureCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
291
+ onLostPointerCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
292
+ onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
293
+ onScroll?: import('react').UIEventHandler<HTMLInputElement> | undefined;
294
+ onScrollCapture?: import('react').UIEventHandler<HTMLInputElement> | undefined;
295
+ onWheel?: import('react').WheelEventHandler<HTMLInputElement> | undefined;
296
+ onWheelCapture?: import('react').WheelEventHandler<HTMLInputElement> | undefined;
297
+ onAnimationStart?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
298
+ onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
299
+ onAnimationEnd?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
300
+ onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
301
+ onAnimationIteration?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
302
+ onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
303
+ onTransitionEnd?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
304
+ onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
305
+ variant: import('./Snackbar').SnackbarVariant;
306
+ snackbarMessage: string;
307
+ open?: boolean | undefined;
308
+ 'data-testid'?: string | undefined;
309
+ classNameWrapper?: string | undefined;
310
+ autoHideDuration?: number | undefined;
311
+ onClose?: (() => void) | undefined;
312
+ }>) => import("react/jsx-runtime").JSX.Element)[];
313
+ };
314
+ export default meta;
315
+ type Story = StoryObj<typeof meta>;
316
+ export declare const Success: Story;
317
+ export declare const Error: Story;
318
+ export declare const Warning: Story;
package/dist/components/Snackbar/Snackbar.stories.js ADDED
@@ -0,0 +1,62 @@
1
+ import { jsx as o, jsxs as s, Fragment as i } from "react/jsx-runtime";
2
+ import { useState as l } from "react";
3
+ import { Button as c } from "../Button/Button.js";
4
+ import { Snackbar as a } from "./Snackbar.js";
5
+ const C = {
6
+ title: "Components/Snackbar",
7
+ component: a,
8
+ tags: ["autodocs"],
9
+ decorators: [
10
+ (e) => /* @__PURE__ */ o("div", { style: { padding: "1em" }, children: /* @__PURE__ */ o(e, {}) })
11
+ ]
12
+ };
13
+ function n(e) {
14
+ const [r, t] = l(!1);
15
+ return /* @__PURE__ */ s(i, { children: [
16
+ /* @__PURE__ */ o(c, { onClick: () => t(!0), children: "Open Snackbar" }),
17
+ /* @__PURE__ */ o(
18
+ a,
19
+ {
20
+ ...e,
21
+ open: r,
22
+ onClose: () => {
23
+ t(!1), e != null && e.onClose && (e == null || e.onClose());
24
+ }
25
+ }
26
+ )
27
+ ] });
28
+ }
29
+ const f = {
30
+ render: n,
31
+ args: {
32
+ snackbarMessage: "Dialog success",
33
+ variant: "success",
34
+ autoHideDuration: 5e3,
35
+ onClose: () => alert("Consider the dialog closed"),
36
+ open: !1
37
+ }
38
+ }, g = {
39
+ render: n,
40
+ args: {
41
+ variant: "error",
42
+ snackbarMessage: "Dialog error",
43
+ autoHideDuration: 5e3,
44
+ onClose: () => alert("Consider the dialog closed"),
45
+ open: !1
46
+ }
47
+ }, k = {
48
+ render: n,
49
+ args: {
50
+ variant: "warning",
51
+ snackbarMessage: "Dialog attention",
52
+ autoHideDuration: 5e3,
53
+ onClose: () => alert("Consider the dialog closed"),
54
+ open: !1
55
+ }
56
+ };
57
+ export {
58
+ g as Error,
59
+ f as Success,
60
+ k as Warning,
61
+ C as default
62
+ };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pismo/marola",
3
3
  "description": "CDX tribe component library",
4
- "version": "0.0.1-alpha.14",
4
+ "version": "0.0.1-alpha.15",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",