@telefonica/mistica 14.23.0 → 14.23.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/snackbar.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  Object.defineProperty(exports, "default", {
6
6
  enumerable: true,
7
7
  get: function() {
8
- return y;
8
+ return re;
9
9
  }
10
10
  });
11
11
  const _jsxruntime = require("react/jsx-runtime");
@@ -19,6 +19,7 @@ const _snackbarcssmistica = require("./snackbar.css-mistica.js");
19
19
  const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
20
20
  const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
21
21
  const _dom = require("./utils/dom.js");
22
+ const _portal = require("./portal.js");
22
23
  function _interop_require_default(obj) {
23
24
  return obj && obj.__esModule ? obj : {
24
25
  default: obj
@@ -116,94 +117,96 @@ function _object_spread_props(target, source) {
116
117
  return target;
117
118
  }
118
119
  const z = (param)=>{
119
- let { message: a , buttonText: e , duration: r = e ? 1e4 : 5e3 , onClose: t = ()=>{} , type: n = "INFORMATIVE" , dataAttributes: c } = param;
120
- const [o, u] = _react.useState(!1), { width: d , ref: h } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: I } = (0, _hooks.useScreenSize)(), m = d > (I ? 160 : 128), f = _react.useCallback(()=>{
120
+ let { message: a , buttonText: e , duration: t = e ? 1e4 : 5e3 , onClose: n = ()=>{} , type: o = "INFORMATIVE" , dataAttributes: c } = param;
121
+ const [i, u] = _react.useState(!1), { width: d , ref: h } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: I } = (0, _hooks.useScreenSize)(), m = d > (I ? 160 : 128), f = _react.useCallback(()=>{
121
122
  u(!1), setTimeout(()=>{
122
- t();
123
+ n();
123
124
  }, _snackbarcssmistica.TRANSITION_TIME_IN_MS);
124
125
  }, [
125
- t
126
+ n
126
127
  ]);
127
128
  return _react.useEffect(()=>{
128
129
  const g = setTimeout(()=>{
129
130
  u(!0);
130
- }, 50), b = setTimeout(f, r);
131
+ }, 50), b = setTimeout(f, t);
131
132
  return ()=>{
132
133
  clearTimeout(g), clearTimeout(b);
133
134
  };
134
135
  }, [
135
136
  f,
136
- r
137
- ]), /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
138
- className: (0, _classnames.default)(_snackbarcssmistica.snackbar, {
139
- [_snackbarcssmistica.snackbarOpen]: o
140
- }),
141
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
142
- role: "alert",
143
- className: (0, _classnames.default)(_snackbarcssmistica.wrapper, n === "CRITICAL" ? _snackbarcssmistica.wrapperCritical : _snackbarcssmistica.wrapperInfo, {
144
- [_snackbarcssmistica.wrapperOpen]: o
145
- })
146
- }, (0, _dom.getPrefixedDataAttributes)(c, "SnackBar")), {
147
- children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
148
- className: (0, _classnames.default)(_snackbarcssmistica.content, (0, _sprinklescssmistica.sprinkles)({
149
- flexDirection: m ? "column" : "row",
150
- alignItems: m ? void 0 : "center"
151
- })),
152
- children: [
153
- /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
154
- regular: !0,
155
- color: _skincontractcssmistica.vars.colors.textPrimaryInverse,
156
- children: a
157
- }),
158
- e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
159
- className: (0, _classnames.default)(_snackbarcssmistica.button, n === "CRITICAL" ? _snackbarcssmistica.buttonCritical : _snackbarcssmistica.buttonInfo, {
160
- [_snackbarcssmistica.longButton]: m
137
+ t
138
+ ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
139
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
140
+ className: (0, _classnames.default)(_snackbarcssmistica.snackbar, {
141
+ [_snackbarcssmistica.snackbarOpen]: i
142
+ }),
143
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
144
+ role: "alert",
145
+ className: (0, _classnames.default)(_snackbarcssmistica.wrapper, o === "CRITICAL" ? _snackbarcssmistica.wrapperCritical : _snackbarcssmistica.wrapperInfo, {
146
+ [_snackbarcssmistica.wrapperOpen]: i
147
+ })
148
+ }, (0, _dom.getPrefixedDataAttributes)(c, "SnackBar")), {
149
+ children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
150
+ className: (0, _classnames.default)(_snackbarcssmistica.content, (0, _sprinklescssmistica.sprinkles)({
151
+ flexDirection: m ? "column" : "row",
152
+ alignItems: m ? void 0 : "center"
153
+ })),
154
+ children: [
155
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
156
+ regular: !0,
157
+ color: _skincontractcssmistica.vars.colors.textPrimaryInverse,
158
+ children: a
161
159
  }),
162
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
163
- className: (0, _sprinklescssmistica.sprinkles)({
164
- border: "none",
165
- padding: 0,
166
- background: "transparent",
167
- color: "inherit"
160
+ e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
161
+ className: (0, _classnames.default)(_snackbarcssmistica.button, o === "CRITICAL" ? _snackbarcssmistica.buttonCritical : _snackbarcssmistica.buttonInfo, {
162
+ [_snackbarcssmistica.longButton]: m
168
163
  }),
169
- style: {
170
- lineHeight: "inherit",
171
- fontWeight: "inherit"
172
- },
173
- ref: h,
174
- onPress: f,
175
- children: e
164
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
165
+ className: (0, _sprinklescssmistica.sprinkles)({
166
+ border: "none",
167
+ padding: 0,
168
+ background: "transparent",
169
+ color: "inherit"
170
+ }),
171
+ style: {
172
+ lineHeight: "inherit",
173
+ fontWeight: "inherit"
174
+ },
175
+ ref: h,
176
+ onPress: f,
177
+ children: e
178
+ })
176
179
  })
177
- })
178
- ]
179
- })
180
- }))
180
+ ]
181
+ })
182
+ }))
183
+ })
181
184
  });
182
185
  }, H = (param)=>{
183
- let { message: a , buttonText: e , duration: r = e ? 1e4 : 5e3 , onClose: t = ()=>{} , type: n = "INFORMATIVE" } = param;
184
- const c = (0, _webviewbridge.isWebViewBridgeAvailable)(), o = _react.useRef(t);
186
+ let { message: a , buttonText: e , duration: t = e ? 1e4 : 5e3 , onClose: n = ()=>{} , type: o = "INFORMATIVE" } = param;
187
+ const c = (0, _webviewbridge.isWebViewBridgeAvailable)(), i = _react.useRef(n);
185
188
  return _react.useEffect(()=>{
186
- o.current = t;
189
+ i.current = n;
187
190
  }, [
188
- t
191
+ n
189
192
  ]), _react.useEffect(()=>{
190
193
  c && (0, _webviewbridge.nativeMessage)({
191
194
  message: a,
192
- duration: r,
195
+ duration: t,
193
196
  buttonText: e,
194
- type: n
195
- }).then(o.current);
197
+ type: o
198
+ }).then(i.current);
196
199
  }, [
197
200
  e,
198
- r,
201
+ t,
199
202
  a,
200
203
  c,
201
- n
204
+ o
202
205
  ]), c ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
203
206
  message: a,
204
- duration: r,
207
+ duration: t,
205
208
  buttonText: e,
206
- type: n,
207
- onClose: o.current
209
+ type: o,
210
+ onClose: i.current
208
211
  });
209
- }, y = H;
212
+ }, re = H;
package/dist-es/header.js CHANGED
@@ -91,7 +91,7 @@ import { hideOnTabletOrSmaller as R, hideOnDesktop as j, breadcrumbs as G } from
91
91
  import { getPrefixedDataAttributes as I } from "./utils/dom.js";
92
92
  import { Title2 as O, Title3 as P } from "./title.js";
93
93
  const $ = (param)=>{
94
- let { pretitle: t , title: o , description: e , dataAttributes: d , small: m = !1 , preamount: s , amount: p , button: n , subtitle: i , isErrorAmount: h , secondaryButton: b } = param;
94
+ let { pretitle: t , title: e , description: o , dataAttributes: d , small: m = !1 , preamount: s , amount: p , button: n , subtitle: i , isErrorAmount: h , secondaryButton: b } = param;
95
95
  const H = S(), g = (f, v)=>{
96
96
  if (typeof f == "string") return /* @__PURE__ */ r(x, _object_spread_props(_object_spread({
97
97
  regular: !0
@@ -114,7 +114,7 @@ const $ = (param)=>{
114
114
  },
115
115
  dataAttributes: d,
116
116
  children: [
117
- (o || t || e) && /* @__PURE__ */ r(u, {
117
+ (e || t || o) && /* @__PURE__ */ r(u, {
118
118
  paddingRight: 16,
119
119
  children: /* @__PURE__ */ l(a, {
120
120
  space: 8,
@@ -122,21 +122,21 @@ const $ = (param)=>{
122
122
  t && g(t, {
123
123
  color: c.colors.textPrimary
124
124
  }),
125
- m ? /* @__PURE__ */ r(O, {
125
+ e && (m ? /* @__PURE__ */ r(O, {
126
126
  as: "h2",
127
- children: o
127
+ children: e
128
128
  }) : /* @__PURE__ */ r(P, {
129
129
  as: "h2",
130
- children: o
131
- }),
132
- e && (m ? /* @__PURE__ */ r(B, {
130
+ children: e
131
+ })),
132
+ o && (m ? /* @__PURE__ */ r(B, {
133
133
  regular: !0,
134
134
  color: c.colors.textSecondary,
135
- children: e
135
+ children: o
136
136
  }) : /* @__PURE__ */ r(x, {
137
137
  regular: !0,
138
138
  color: c.colors.textSecondary,
139
- children: e
139
+ children: o
140
140
  }))
141
141
  ]
142
142
  })
@@ -166,7 +166,7 @@ const $ = (param)=>{
166
166
  ]
167
167
  });
168
168
  }, E = (param)=>/* @__PURE__ */ {
169
- let { title: t , description: o , button: e } = param;
169
+ let { title: t , description: e , button: o } = param;
170
170
  return l(a, {
171
171
  space: 32,
172
172
  children: [
@@ -181,23 +181,23 @@ const $ = (param)=>{
181
181
  "aria-level": 1,
182
182
  children: t
183
183
  }),
184
- o && /* @__PURE__ */ r(M, {
185
- children: o
184
+ e && /* @__PURE__ */ r(M, {
185
+ children: e
186
186
  })
187
187
  ]
188
188
  }),
189
- e
189
+ o
190
190
  ]
191
191
  });
192
192
  }, Y = (param)=>{
193
- let { isInverse: t = !0 , breadcrumbs: o , header: e , extra: d , sideBySideExtraOnDesktop: m = !1 , dataAttributes: s , bleed: p = !1 , noPaddingY: n = !1 } = param;
193
+ let { isInverse: t = !0 , breadcrumbs: e , header: o , extra: d , sideBySideExtraOnDesktop: m = !1 , dataAttributes: s , bleed: p = !1 , noPaddingY: n = !1 } = param;
194
194
  const i = p && t && d, h = /* @__PURE__ */ l("div", {
195
195
  children: [
196
- o && /* @__PURE__ */ r("div", {
196
+ e && /* @__PURE__ */ r("div", {
197
197
  className: G,
198
- children: o
198
+ children: e
199
199
  }),
200
- e
200
+ o
201
201
  ]
202
202
  });
203
203
  return /* @__PURE__ */ l("div", _object_spread_props(_object_spread({}, I(_object_spread({
@@ -210,8 +210,8 @@ const $ = (param)=>{
210
210
  /* @__PURE__ */ r(T, {}),
211
211
  /* @__PURE__ */ r(u, {
212
212
  paddingTop: n ? 0 : {
213
- mobile: e ? 32 : 0,
214
- desktop: o ? 16 : 48
213
+ mobile: o ? 32 : 0,
214
+ desktop: e ? 16 : 48
215
215
  },
216
216
  paddingBottom: {
217
217
  mobile: n && !i ? 0 : 24,
@@ -224,14 +224,14 @@ const $ = (param)=>{
224
224
  className: i ? R : "",
225
225
  children: /* @__PURE__ */ r(u, {
226
226
  paddingTop: {
227
- mobile: e ? 24 : 0,
227
+ mobile: o ? 24 : 0,
228
228
  desktop: 0
229
229
  },
230
230
  children: d
231
231
  })
232
232
  })
233
233
  }) : /* @__PURE__ */ l(a, {
234
- space: e ? {
234
+ space: o ? {
235
235
  mobile: 24,
236
236
  desktop: 32
237
237
  } : 0,
@@ -251,12 +251,12 @@ const $ = (param)=>{
251
251
  ]
252
252
  }));
253
253
  }, rr = (param)=>/* @__PURE__ */ {
254
- let { isInverse: t = !0 , children: o , dataAttributes: e } = param;
254
+ let { isInverse: t = !0 , children: e , dataAttributes: o } = param;
255
255
  return l(k, {
256
256
  isInverse: t,
257
257
  dataAttributes: _object_spread({
258
258
  "component-name": "MainSectionHeaderLayout"
259
- }, e),
259
+ }, o),
260
260
  children: [
261
261
  /* @__PURE__ */ r(T, {}),
262
262
  /* @__PURE__ */ r(y, {
@@ -270,7 +270,7 @@ const $ = (param)=>{
270
270
  mobile: 24,
271
271
  desktop: 48
272
272
  },
273
- children: o
273
+ children: e
274
274
  }),
275
275
  right: null
276
276
  })
@@ -41,16 +41,16 @@ const d = (param)=>{
41
41
  /* @__PURE__ */ e("circle", _object_spread({
42
42
  cx: "32",
43
43
  cy: "32",
44
- r: "25",
44
+ r: "31",
45
45
  stroke: `url(#${t})`
46
- }, c("25", r))),
46
+ }, c("31", r))),
47
47
  /* @__PURE__ */ e("polyline", _object_spread({
48
48
  fill: "none",
49
49
  stroke: "white",
50
50
  strokeWidth: "1.5",
51
51
  strokeLinecap: "round",
52
52
  strokeLinejoin: "round",
53
- points: "25.75,32.75 29.69,37.5 38.25,26.5"
53
+ points: "24,32.75 30,39 40.5,24.5"
54
54
  }, l("44", "0.4s", r, "0.5 0 0.83 0.83"))),
55
55
  /* @__PURE__ */ e("defs", {
56
56
  children: /* @__PURE__ */ s("linearGradient", {
@@ -1,2 +1,2 @@
1
- const o = "14.23.0";
1
+ const o = "14.23.1";
2
2
  export { o as PACKAGE_VERSION };
@@ -50,8 +50,8 @@ function _object_spread_props(target, source) {
50
50
  }
51
51
  return target;
52
52
  }
53
- import { jsx as s, jsxs as N } from "react/jsx-runtime";
54
- import * as i from "react";
53
+ import { jsx as r, jsxs as N } from "react/jsx-runtime";
54
+ import * as s from "react";
55
55
  import { BaseTouchable as T } from "./touchable.js";
56
56
  import l from "classnames";
57
57
  import { isWebViewBridgeAvailable as k, nativeMessage as v } from "@tef-novum/webview-bridge";
@@ -61,96 +61,99 @@ import { TRANSITION_TIME_IN_MS as C, snackbar as O, snackbarOpen as w, wrapper a
61
61
  import { sprinkles as p } from "./sprinkles.css-mistica.js";
62
62
  import { vars as x } from "./skins/skin-contract.css-mistica.js";
63
63
  import { getPrefixedDataAttributes as F } from "./utils/dom.js";
64
+ import { Portal as P } from "./portal.js";
64
65
  const z = (param)=>{
65
- let { message: a , buttonText: e , duration: r = e ? 1e4 : 5e3 , onClose: t = ()=>{} , type: n = "INFORMATIVE" , dataAttributes: c } = param;
66
- const [o, u] = i.useState(!1), { width: d , ref: h } = R(), { isDesktopOrBigger: I } = S(), m = d > (I ? 160 : 128), f = i.useCallback(()=>{
66
+ let { message: a , buttonText: e , duration: t = e ? 1e4 : 5e3 , onClose: n = ()=>{} , type: o = "INFORMATIVE" , dataAttributes: c } = param;
67
+ const [i, u] = s.useState(!1), { width: d , ref: h } = R(), { isDesktopOrBigger: I } = S(), m = d > (I ? 160 : 128), f = s.useCallback(()=>{
67
68
  u(!1), setTimeout(()=>{
68
- t();
69
+ n();
69
70
  }, C);
70
71
  }, [
71
- t
72
+ n
72
73
  ]);
73
- return i.useEffect(()=>{
74
+ return s.useEffect(()=>{
74
75
  const g = setTimeout(()=>{
75
76
  u(!0);
76
- }, 50), b = setTimeout(f, r);
77
+ }, 50), b = setTimeout(f, t);
77
78
  return ()=>{
78
79
  clearTimeout(g), clearTimeout(b);
79
80
  };
80
81
  }, [
81
82
  f,
82
- r
83
- ]), /* @__PURE__ */ s("div", {
84
- className: l(O, {
85
- [w]: o
86
- }),
87
- children: /* @__PURE__ */ s("div", _object_spread_props(_object_spread({
88
- role: "alert",
89
- className: l(A, n === "CRITICAL" ? E : M, {
90
- [W]: o
91
- })
92
- }, F(c, "SnackBar")), {
93
- children: /* @__PURE__ */ N("div", {
94
- className: l(D, p({
95
- flexDirection: m ? "column" : "row",
96
- alignItems: m ? void 0 : "center"
97
- })),
98
- children: [
99
- /* @__PURE__ */ s(B, {
100
- regular: !0,
101
- color: x.colors.textPrimaryInverse,
102
- children: a
103
- }),
104
- e && /* @__PURE__ */ s("div", {
105
- className: l(L, n === "CRITICAL" ? V : _, {
106
- [j]: m
83
+ t
84
+ ]), /* @__PURE__ */ r(P, {
85
+ children: /* @__PURE__ */ r("div", {
86
+ className: l(O, {
87
+ [w]: i
88
+ }),
89
+ children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({
90
+ role: "alert",
91
+ className: l(A, o === "CRITICAL" ? E : M, {
92
+ [W]: i
93
+ })
94
+ }, F(c, "SnackBar")), {
95
+ children: /* @__PURE__ */ N("div", {
96
+ className: l(D, p({
97
+ flexDirection: m ? "column" : "row",
98
+ alignItems: m ? void 0 : "center"
99
+ })),
100
+ children: [
101
+ /* @__PURE__ */ r(B, {
102
+ regular: !0,
103
+ color: x.colors.textPrimaryInverse,
104
+ children: a
107
105
  }),
108
- children: /* @__PURE__ */ s(T, {
109
- className: p({
110
- border: "none",
111
- padding: 0,
112
- background: "transparent",
113
- color: "inherit"
106
+ e && /* @__PURE__ */ r("div", {
107
+ className: l(L, o === "CRITICAL" ? V : _, {
108
+ [j]: m
114
109
  }),
115
- style: {
116
- lineHeight: "inherit",
117
- fontWeight: "inherit"
118
- },
119
- ref: h,
120
- onPress: f,
121
- children: e
110
+ children: /* @__PURE__ */ r(T, {
111
+ className: p({
112
+ border: "none",
113
+ padding: 0,
114
+ background: "transparent",
115
+ color: "inherit"
116
+ }),
117
+ style: {
118
+ lineHeight: "inherit",
119
+ fontWeight: "inherit"
120
+ },
121
+ ref: h,
122
+ onPress: f,
123
+ children: e
124
+ })
122
125
  })
123
- })
124
- ]
125
- })
126
- }))
126
+ ]
127
+ })
128
+ }))
129
+ })
127
130
  });
128
131
  }, H = (param)=>{
129
- let { message: a , buttonText: e , duration: r = e ? 1e4 : 5e3 , onClose: t = ()=>{} , type: n = "INFORMATIVE" } = param;
130
- const c = k(), o = i.useRef(t);
131
- return i.useEffect(()=>{
132
- o.current = t;
132
+ let { message: a , buttonText: e , duration: t = e ? 1e4 : 5e3 , onClose: n = ()=>{} , type: o = "INFORMATIVE" } = param;
133
+ const c = k(), i = s.useRef(n);
134
+ return s.useEffect(()=>{
135
+ i.current = n;
133
136
  }, [
134
- t
135
- ]), i.useEffect(()=>{
137
+ n
138
+ ]), s.useEffect(()=>{
136
139
  c && v({
137
140
  message: a,
138
- duration: r,
141
+ duration: t,
139
142
  buttonText: e,
140
- type: n
141
- }).then(o.current);
143
+ type: o
144
+ }).then(i.current);
142
145
  }, [
143
146
  e,
144
- r,
147
+ t,
145
148
  a,
146
149
  c,
147
- n
148
- ]), c ? null : /* @__PURE__ */ s(z, {
150
+ o
151
+ ]), c ? null : /* @__PURE__ */ r(z, {
149
152
  message: a,
150
- duration: r,
153
+ duration: t,
151
154
  buttonText: e,
152
- type: n,
153
- onClose: o.current
155
+ type: o,
156
+ onClose: i.current
154
157
  });
155
- }, y = H;
156
- export { y as default };
158
+ }, re = H;
159
+ export { re as default };