@telefonica/mistica 16.0.0 → 16.1.0
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/README.md +11 -9
- package/css/mistica.css +1 -1
- package/dist/box.d.ts +1 -0
- package/dist/box.js +12 -12
- package/dist/card.d.ts +14 -2
- package/dist/card.js +210 -206
- package/dist/credit-card-expiration-field.d.ts +1 -1
- package/dist/credit-card-expiration-field.js +53 -52
- package/dist/credit-card-number-field.d.ts +1 -1
- package/dist/credit-card-number-field.js +47 -45
- package/dist/cvv-field.d.ts +1 -1
- package/dist/cvv-field.js +38 -37
- package/dist/date-field.d.ts +1 -1
- package/dist/date-field.js +15 -13
- package/dist/date-time-field.d.ts +1 -1
- package/dist/date-time-field.js +13 -11
- package/dist/decimal-field.d.ts +1 -1
- package/dist/decimal-field.js +39 -38
- package/dist/email-field.d.ts +1 -1
- package/dist/email-field.js +21 -19
- package/dist/form-context.d.ts +7 -2
- package/dist/form-context.js +69 -62
- package/dist/form.d.ts +2 -1
- package/dist/form.js +94 -80
- package/dist/iban-field.d.ts +1 -1
- package/dist/iban-field.js +32 -30
- package/dist/index.d.ts +12 -3
- package/dist/index.js +19 -8
- package/dist/inline.d.ts +2 -1
- package/dist/inline.js +16 -15
- package/dist/integer-field.d.ts +1 -1
- package/dist/integer-field.js +30 -30
- package/dist/month-field.d.ts +1 -1
- package/dist/month-field.js +15 -13
- package/dist/package-version.js +1 -1
- package/dist/password-field.d.ts +1 -1
- package/dist/password-field.js +24 -22
- package/dist/phone-number-field.d.ts +4 -1
- package/dist/phone-number-field.js +84 -52
- package/dist/pin-field.js +21 -20
- package/dist/radio-button.d.ts +1 -0
- package/dist/radio-button.js +42 -41
- package/dist/rating.css-mistica.js +44 -0
- package/dist/rating.css.d.ts +11 -0
- package/dist/rating.css.ts.vanilla.css-mistica.js +11 -0
- package/dist/rating.d.ts +37 -0
- package/dist/rating.js +320 -0
- package/dist/search-field.d.ts +1 -0
- package/dist/search-field.js +18 -16
- package/dist/select.js +36 -33
- package/dist/sheet-action-row.css-mistica.js +13 -0
- package/dist/sheet-action-row.css.d.ts +1 -0
- package/dist/sheet-actions-list.d.ts +26 -0
- package/dist/sheet-actions-list.js +147 -0
- package/dist/sheet-actions.d.ts +23 -0
- package/dist/sheet-actions.js +175 -0
- package/dist/{sheet.css-mistica.js → sheet-common.css-mistica.js} +15 -21
- package/dist/{sheet.css.d.ts → sheet-common.css.d.ts} +0 -2
- package/dist/sheet-common.css.ts.vanilla.css-mistica.js +11 -0
- package/dist/sheet-common.d.ts +24 -0
- package/dist/sheet-common.js +429 -0
- package/dist/sheet-info.css-mistica.js +12 -0
- package/dist/sheet-info.css.d.ts +1 -0
- package/dist/sheet-info.d.ts +28 -0
- package/dist/sheet-info.js +156 -0
- package/dist/sheet-native.d.ts +2 -0
- package/dist/sheet-native.js +173 -0
- package/dist/sheet-radio-list.d.ts +22 -0
- package/dist/sheet-radio-list.js +143 -0
- package/dist/sheet-root.d.ts +4 -85
- package/dist/sheet-root.js +48 -322
- package/dist/sheet-types.d.ts +88 -0
- package/dist/sheet-web.d.ts +8 -0
- package/dist/sheet-web.js +183 -0
- package/dist/slider.js +40 -39
- package/dist/switch-component.js +18 -17
- package/dist/text-field-base.d.ts +3 -1
- package/dist/text-field-base.js +74 -66
- package/dist/text-field-components.css-mistica.js +14 -14
- package/dist/text-field-components.css.d.ts +2 -2
- package/dist/text-field-components.js +49 -39
- package/dist/text-field.d.ts +1 -0
- package/dist/text-field.js +24 -22
- package/dist/text-tokens.d.ts +14 -0
- package/dist/text-tokens.js +145 -89
- package/dist/theme-context-provider.js +6 -5
- package/dist/theme.d.ts +2 -0
- package/dist/utils/credit-card.d.ts +2 -2
- package/dist/utils/credit-card.js +1 -1
- package/dist/vivinho-loading-animation/in-lottie.json.js +544 -612
- package/dist/vivinho-loading-animation/out-lottie.json.js +828 -896
- package/dist/vivinho-loading-animation/pulse-lottie.json.js +798 -866
- package/dist/vivinho-loading-animation/wave-lottie.json.js +4303 -4409
- package/dist-es/box.js +18 -18
- package/dist-es/card.js +305 -301
- package/dist-es/credit-card-expiration-field.js +57 -56
- package/dist-es/credit-card-number-field.js +74 -72
- package/dist-es/cvv-field.js +82 -81
- package/dist-es/date-field.js +29 -27
- package/dist-es/date-time-field.js +29 -27
- package/dist-es/decimal-field.js +46 -45
- package/dist-es/email-field.js +26 -24
- package/dist-es/form-context.js +70 -63
- package/dist-es/form.js +102 -88
- package/dist-es/iban-field.js +35 -33
- package/dist-es/index.js +1822 -1817
- package/dist-es/inline.js +26 -25
- package/dist-es/integer-field.js +31 -31
- package/dist-es/month-field.js +28 -26
- package/dist-es/package-version.js +1 -1
- package/dist-es/password-field.js +37 -35
- package/dist-es/phone-number-field.js +92 -60
- package/dist-es/pin-field.js +32 -31
- package/dist-es/radio-button.js +42 -41
- package/dist-es/rating.css-mistica.js +6 -0
- package/dist-es/rating.css.ts.vanilla.css-mistica.js +2 -0
- package/dist-es/rating.js +257 -0
- package/dist-es/search-field.js +33 -31
- package/dist-es/select.js +49 -46
- package/dist-es/sheet-action-row.css-mistica.js +4 -0
- package/dist-es/sheet-actions-list.js +92 -0
- package/dist-es/sheet-actions.js +125 -0
- package/dist-es/sheet-common.css-mistica.js +4 -0
- package/dist-es/sheet-common.css.ts.vanilla.css-mistica.js +2 -0
- package/dist-es/sheet-common.js +366 -0
- package/dist-es/sheet-info.css-mistica.js +3 -0
- package/dist-es/sheet-info.js +101 -0
- package/dist-es/sheet-native.js +164 -0
- package/dist-es/sheet-radio-list.js +88 -0
- package/dist-es/sheet-root.js +50 -319
- package/dist-es/sheet-web.js +128 -0
- package/dist-es/slider.js +49 -48
- package/dist-es/style.css +1 -1
- package/dist-es/switch-component.js +27 -26
- package/dist-es/text-field-base.js +108 -100
- package/dist-es/text-field-components.css-mistica.js +2 -2
- package/dist-es/text-field-components.js +70 -60
- package/dist-es/text-field.js +33 -31
- package/dist-es/text-tokens.js +80 -45
- package/dist-es/theme-context-provider.js +20 -19
- package/dist-es/utils/credit-card.js +1 -1
- package/dist-es/vivinho-loading-animation/in-lottie.json.js +534 -599
- package/dist-es/vivinho-loading-animation/out-lottie.json.js +821 -886
- package/dist-es/vivinho-loading-animation/pulse-lottie.json.js +790 -855
- package/dist-es/vivinho-loading-animation/wave-lottie.json.js +4297 -4400
- package/package.json +4 -3
- package/dist/sheet.d.ts +0 -107
- package/dist/sheet.js +0 -642
- package/dist-es/sheet.css-mistica.js +0 -4
- package/dist-es/sheet.js +0 -567
- /package/dist/{sheet.css.ts.vanilla.css-mistica.js → sheet-action-row.css.ts.vanilla.css-mistica.js} +0 -0
- /package/dist-es/{sheet.css.ts.vanilla.css-mistica.js → sheet-action-row.css.ts.vanilla.css-mistica.js} +0 -0
|
@@ -51,7 +51,7 @@ function _object_spread_props(target, source) {
|
|
|
51
51
|
}
|
|
52
52
|
return target;
|
|
53
53
|
}
|
|
54
|
-
import { jsx as
|
|
54
|
+
import { jsx as l, Fragment as x, jsxs as b } from "react/jsx-runtime";
|
|
55
55
|
import * as o from "react";
|
|
56
56
|
import { debounce as C } from "./utils/helpers.js";
|
|
57
57
|
import { SPACE as D } from "./utils/keys.js";
|
|
@@ -62,31 +62,32 @@ import { useTheme as g } from "./hooks.js";
|
|
|
62
62
|
import { getPrefixedDataAttributes as E } from "./utils/dom.js";
|
|
63
63
|
import { containerDisabled as P, container as A, interactiveArea as j, disabled as K, checkboxVariants as M, switchCheckboxContainerVariants as R, switchCheckboxLabel as T, barVariants as $, ballVariants as F } from "./switch-component.css-mistica.js";
|
|
64
64
|
const L = (e)=>{
|
|
65
|
-
const { isIos: d, isDarkMode: f } = g(), u = o.useId(), n = e["aria-labelledby"] || u, { defaultValue: k, value:
|
|
65
|
+
const { isIos: d, isDarkMode: f } = g(), u = o.useId(), n = e["aria-labelledby"] || u, { defaultValue: k, value: s, onChange: a, focusableRef: v, disabled: i } = S({
|
|
66
66
|
name: e.name,
|
|
67
|
+
label: e["aria-label"],
|
|
67
68
|
value: e.checked,
|
|
68
69
|
defaultValue: e.defaultChecked,
|
|
69
70
|
onChange: e.onChange,
|
|
70
71
|
disabled: e.disabled
|
|
71
|
-
}), [
|
|
72
|
-
a == null || a(
|
|
72
|
+
}), [c, I] = o.useState(!!k), r = s !== null && s !== void 0 ? s : c, N = o.useMemo(()=>process.env.NODE_ENV === "test" ? (t)=>a == null ? void 0 : a(t) : C((t)=>{
|
|
73
|
+
a == null || a(t);
|
|
73
74
|
}, 300), [
|
|
74
75
|
a
|
|
75
76
|
]), m = ()=>{
|
|
76
|
-
|
|
77
|
-
}, w = (
|
|
78
|
-
|
|
79
|
-
}, h = /* @__PURE__ */
|
|
80
|
-
className: M[d ?
|
|
81
|
-
children: /* @__PURE__ */
|
|
77
|
+
s !== void 0 ? a == null || a(!s) : (I(!c), N(!c));
|
|
78
|
+
}, w = (t)=>{
|
|
79
|
+
t.key === D && (t.preventDefault(), t.stopPropagation(), m());
|
|
80
|
+
}, h = /* @__PURE__ */ l("div", {
|
|
81
|
+
className: M[d ? i ? "disabledIos" : "ios" : i ? "disabled" : "default"],
|
|
82
|
+
children: /* @__PURE__ */ l("div", {
|
|
82
83
|
className: R[d ? "ios" : "default"],
|
|
83
84
|
children: /* @__PURE__ */ b("div", {
|
|
84
85
|
className: T,
|
|
85
86
|
children: [
|
|
86
|
-
/* @__PURE__ */
|
|
87
|
+
/* @__PURE__ */ l("span", {
|
|
87
88
|
className: $[d ? r ? "checkedIos" : f ? "iosDark" : "ios" : r ? "checked" : "default"]
|
|
88
89
|
}),
|
|
89
|
-
/* @__PURE__ */
|
|
90
|
+
/* @__PURE__ */ l("span", {
|
|
90
91
|
className: F[d ? r ? "checkedIos" : "ios" : r ? "checked" : "default"]
|
|
91
92
|
})
|
|
92
93
|
]
|
|
@@ -95,26 +96,26 @@ const L = (e)=>{
|
|
|
95
96
|
});
|
|
96
97
|
return(// When the switch is disabled, it shouldn't be focusable
|
|
97
98
|
// eslint-disable-next-line jsx-a11y/interactive-supports-focus
|
|
98
|
-
/* @__PURE__ */
|
|
99
|
+
/* @__PURE__ */ l("span", _object_spread_props(_object_spread({
|
|
99
100
|
role: "switch",
|
|
100
|
-
"aria-checked":
|
|
101
|
-
onClick: (
|
|
102
|
-
|
|
101
|
+
"aria-checked": s !== null && s !== void 0 ? s : c,
|
|
102
|
+
onClick: (t)=>{
|
|
103
|
+
t.stopPropagation(), i || m();
|
|
103
104
|
},
|
|
104
|
-
onKeyDown:
|
|
105
|
-
tabIndex:
|
|
105
|
+
onKeyDown: i ? void 0 : w,
|
|
106
|
+
tabIndex: i ? void 0 : 0,
|
|
106
107
|
ref: v,
|
|
107
|
-
className:
|
|
108
|
-
"aria-disabled":
|
|
108
|
+
className: i ? P : A,
|
|
109
|
+
"aria-disabled": i,
|
|
109
110
|
"aria-label": e["aria-label"],
|
|
110
111
|
"aria-labelledby": e["aria-label"] ? void 0 : n
|
|
111
112
|
}, E(e.dataAttributes, "Switch")), {
|
|
112
|
-
children: e.render ? /* @__PURE__ */
|
|
113
|
+
children: e.render ? /* @__PURE__ */ l(x, {
|
|
113
114
|
children: e.render({
|
|
114
115
|
controlElement: h,
|
|
115
116
|
labelId: n,
|
|
116
|
-
disabled: !!
|
|
117
|
-
checked:
|
|
117
|
+
disabled: !!i,
|
|
118
|
+
checked: s !== null && s !== void 0 ? s : c
|
|
118
119
|
})
|
|
119
120
|
}) : /* @__PURE__ */ b(y, {
|
|
120
121
|
space: 16,
|
|
@@ -122,12 +123,12 @@ const L = (e)=>{
|
|
|
122
123
|
className: j,
|
|
123
124
|
children: [
|
|
124
125
|
h,
|
|
125
|
-
e.children && /* @__PURE__ */
|
|
126
|
+
e.children && /* @__PURE__ */ l(V, {
|
|
126
127
|
regular: !0,
|
|
127
128
|
as: "div",
|
|
128
129
|
id: n,
|
|
129
|
-
children: /* @__PURE__ */
|
|
130
|
-
className:
|
|
130
|
+
children: /* @__PURE__ */ l("span", {
|
|
131
|
+
className: i ? K : "",
|
|
131
132
|
children: e.children
|
|
132
133
|
})
|
|
133
134
|
})
|
|
@@ -78,49 +78,51 @@ function _object_without_properties_loose(source, excluded) {
|
|
|
78
78
|
}
|
|
79
79
|
return target;
|
|
80
80
|
}
|
|
81
|
-
import { jsx as n, jsxs as
|
|
81
|
+
import { jsx as n, jsxs as le } from "react/jsx-runtime";
|
|
82
82
|
import * as r from "react";
|
|
83
|
-
import { FieldContainer as
|
|
84
|
-
import { LABEL_SCALE_MOBILE as
|
|
85
|
-
import { Text3 as
|
|
86
|
-
import { isFirefox as
|
|
87
|
-
import {
|
|
88
|
-
import
|
|
89
|
-
import { combineRefs as
|
|
90
|
-
import { startIcon as
|
|
91
|
-
import { vars as
|
|
92
|
-
import { InternalToggleIconButton as
|
|
93
|
-
import { ThemeVariant as
|
|
94
|
-
import { iconSize as
|
|
95
|
-
import { menuLabelSuffix as
|
|
96
|
-
const
|
|
83
|
+
import { FieldContainer as oe, HelperText as de, Label as se } from "./text-field-components.js";
|
|
84
|
+
import { LABEL_SCALE_MOBILE as ce, LABEL_SCALE_DESKTOP as ue } from "./text-field-components.css-mistica.js";
|
|
85
|
+
import { Text3 as N } from "./text.js";
|
|
86
|
+
import { isFirefox as fe, isRunningAcceptanceTest as me } from "./utils/platform.js";
|
|
87
|
+
import { useTheme as k, useScreenSize as he, useIsomorphicLayoutEffect as ge } from "./hooks.js";
|
|
88
|
+
import T from "classnames";
|
|
89
|
+
import { combineRefs as K } from "./utils/common.js";
|
|
90
|
+
import { startIcon as pe, prefix as Se, inputWithLabel as _, inputWithoutLabel as G, fullWidth as xe, fieldRightPadding as j, fieldLeftPadding as L, textArea as be, textAreaWithLabel as ye, textAreaWithoutLabel as Ie, input as Ce, inputFirefoxStyles as Ee, hiddenDatePlaceholder as Re, emptyDateValue as ve, endIconContainer as Le, menuItem as Te, menuItemSelected as Ae, suggestionsContainer as $e, fieldEndIconContainer as Fe, fieldElementsGap as We, iconButtonSize as Ne, fieldEndIconGap as we } from "./text-field-base.css-mistica.js";
|
|
91
|
+
import { vars as Pe } from "./skins/skin-contract.css-mistica.js";
|
|
92
|
+
import { InternalToggleIconButton as De, InternalIconButton as Oe } from "./icon-button.js";
|
|
93
|
+
import { ThemeVariant as Be } from "./theme-variant-context.js";
|
|
94
|
+
import { iconSize as qe } from "./icon-button.css-mistica.js";
|
|
95
|
+
import { menuLabelSuffix as ze } from "./text-tokens.js";
|
|
96
|
+
const _e = (l, u)=>{
|
|
97
97
|
if (!u) return !0;
|
|
98
98
|
const t = document.createElement("input");
|
|
99
|
-
return t.type = u, t.value =
|
|
100
|
-
},
|
|
101
|
-
let { hasBackgroundColor:
|
|
99
|
+
return t.type = u, t.value = l || "", t.value !== "";
|
|
100
|
+
}, nt = (param)=>{
|
|
101
|
+
let { hasBackgroundColor: l = !0, onPress: u, onChange: t, disabled: m, Icon: S, checkedProps: o, uncheckedProps: a, "aria-label": h } = param;
|
|
102
102
|
return /* @__PURE__ */ n("div", {
|
|
103
|
-
className:
|
|
104
|
-
children:
|
|
105
|
-
checkedProps: _object_spread_props(_object_spread({},
|
|
106
|
-
"aria-label":
|
|
103
|
+
className: Fe,
|
|
104
|
+
children: o ? /* @__PURE__ */ n(De, {
|
|
105
|
+
checkedProps: _object_spread_props(_object_spread({}, o), {
|
|
106
|
+
"aria-label": o["aria-label"] || ""
|
|
107
107
|
}),
|
|
108
108
|
uncheckedProps: _object_spread_props(_object_spread({}, a), {
|
|
109
109
|
"aria-label": a["aria-label"] || ""
|
|
110
110
|
}),
|
|
111
111
|
onChange: t,
|
|
112
|
-
hasOverlay:
|
|
112
|
+
hasOverlay: l,
|
|
113
113
|
disabled: m
|
|
114
|
-
}) : /* @__PURE__ */ n(
|
|
114
|
+
}) : /* @__PURE__ */ n(Oe, {
|
|
115
115
|
Icon: S,
|
|
116
116
|
disabled: m,
|
|
117
117
|
"aria-label": h || "",
|
|
118
118
|
onPress: u,
|
|
119
|
-
hasOverlay:
|
|
119
|
+
hasOverlay: l
|
|
120
120
|
})
|
|
121
121
|
});
|
|
122
|
-
},
|
|
123
|
-
|
|
122
|
+
}, H = (l)=>{
|
|
123
|
+
l.preventDefault();
|
|
124
|
+
}, W = /*#__PURE__*/ r.forwardRef((_param, Y)=>{
|
|
125
|
+
var { error: l, helperText: u, label: t, inputProps: m, inputRef: S, defaultValue: o, value: a, onFocus: h, onBlur: b, inputComponent: v, prefix: y, startIcon: f, endIcon: x, endIconOverlay: i, shrinkLabel: g, multiline: p = !1, focus: I, fieldRef: M, maxLength: C, id: J, autoComplete: Q, fullWidth: U, dataAttributes: X, preventCopy: A } = _param, d = _object_without_properties(_param, [
|
|
124
126
|
"error",
|
|
125
127
|
"helperText",
|
|
126
128
|
"label",
|
|
@@ -143,88 +145,100 @@ const De = (d, u)=>{
|
|
|
143
145
|
"id",
|
|
144
146
|
"autoComplete",
|
|
145
147
|
"fullWidth",
|
|
146
|
-
"dataAttributes"
|
|
148
|
+
"dataAttributes",
|
|
149
|
+
"preventCopy"
|
|
147
150
|
]);
|
|
151
|
+
const { preventCopyInFormFields: Z } = k();
|
|
152
|
+
A = A !== null && A !== void 0 ? A : Z;
|
|
148
153
|
var _ref;
|
|
149
|
-
const
|
|
150
|
-
|
|
151
|
-
const e = E && !
|
|
154
|
+
const V = r.useId(), w = J || V, P = r.useId(), [s, c] = r.useState(o != null && o.length || a != null && a.length ? "filled" : "default"), { isTabletOrSmaller: ee } = he(), [D, O] = r.useState((_ref = o == null ? void 0 : o.length) !== null && _ref !== void 0 ? _ref : 0), $ = !!t || !d.required, E = d.type === "date" || d.type === "datetime-local" || d.type === "month", B = r.useRef(void 0);
|
|
155
|
+
ge(()=>{
|
|
156
|
+
const e = E && !_e(a, d.type) ? "" : a;
|
|
152
157
|
B.current !== a && E && !(e != null && e.length) && s === "filled" && I === void 0 && c("default"), B.current = a, s !== "focused" && e != null && e.length && (O(e.length), c("filled")), I && c("focused"), I === !1 && !(e != null && e.length) && c("default"), I === !1 && e != null && e.length && c("filled");
|
|
153
158
|
}, [
|
|
154
159
|
s,
|
|
155
160
|
a,
|
|
156
161
|
I,
|
|
157
162
|
E,
|
|
158
|
-
|
|
163
|
+
d.type
|
|
159
164
|
]), r.useEffect(()=>{
|
|
160
|
-
|
|
165
|
+
d.autoFocus && c("focused");
|
|
161
166
|
}, [
|
|
162
|
-
|
|
167
|
+
d.autoFocus
|
|
163
168
|
]);
|
|
164
|
-
const
|
|
169
|
+
const te = p ? "textarea" : "input", ie = v ? {
|
|
165
170
|
inputRef: S
|
|
166
171
|
} : {
|
|
167
|
-
ref:
|
|
168
|
-
}, R = _object_spread(_object_spread_props(_object_spread({},
|
|
172
|
+
ref: K(Y, S)
|
|
173
|
+
}, R = _object_spread(_object_spread_props(_object_spread({}, d), {
|
|
169
174
|
maxLength: C,
|
|
170
|
-
autoComplete:
|
|
171
|
-
}), m),
|
|
172
|
-
left: `calc(${
|
|
175
|
+
autoComplete: Q
|
|
176
|
+
}), m), F = `calc(${qe.default} + ${We}px)`, q = `calc(${Ne} + ${we}px)`, ne = g || s === "focused" || s === "filled" ? ee ? ce : ue : 1, ae = {
|
|
177
|
+
left: `calc(${L}px + ${f ? F : "0px"})`,
|
|
173
178
|
// shrinking means applying a scale transformation, so width will be proportionally reduced.
|
|
174
179
|
// Let's keep the original width.
|
|
175
|
-
width: `calc((100% - ${
|
|
176
|
-
},
|
|
177
|
-
return /* @__PURE__ */ n(
|
|
178
|
-
disabled:
|
|
179
|
-
helperText: /* @__PURE__ */ n(
|
|
180
|
-
error:
|
|
180
|
+
width: `calc((100% - ${L}px - ${f ? F : "0px"} - ${x || i ? q : `${j}px`}) / ${ne})`
|
|
181
|
+
}, re = d.type === "password" && D > 0 ? "Lucida Grande, Arial, sans-serif" : "inherit";
|
|
182
|
+
return /* @__PURE__ */ n(oe, {
|
|
183
|
+
disabled: d.disabled,
|
|
184
|
+
helperText: /* @__PURE__ */ n(de, {
|
|
185
|
+
error: l,
|
|
181
186
|
leftText: u,
|
|
182
|
-
id:
|
|
183
|
-
rightText: p && C ? `${
|
|
187
|
+
id: P,
|
|
188
|
+
rightText: p && C ? `${D}/${C}` : void 0
|
|
184
189
|
}),
|
|
185
190
|
multiline: p,
|
|
186
|
-
fullWidth:
|
|
187
|
-
fieldRef:
|
|
188
|
-
readOnly:
|
|
189
|
-
dataAttributes:
|
|
190
|
-
children: /* @__PURE__ */
|
|
191
|
-
|
|
191
|
+
fullWidth: U,
|
|
192
|
+
fieldRef: M,
|
|
193
|
+
readOnly: d.readOnly,
|
|
194
|
+
dataAttributes: X,
|
|
195
|
+
children: /* @__PURE__ */ le(Be, {
|
|
196
|
+
variant: "default",
|
|
192
197
|
children: [
|
|
193
198
|
f && /* @__PURE__ */ n("div", {
|
|
194
|
-
className:
|
|
199
|
+
className: pe,
|
|
195
200
|
children: f
|
|
196
201
|
}),
|
|
197
202
|
y && /* @__PURE__ */ n("div", {
|
|
198
|
-
className:
|
|
203
|
+
className: T(Se, $ ? _ : G),
|
|
199
204
|
style: {
|
|
200
205
|
opacity: s === "default" ? 0 : 1
|
|
201
206
|
},
|
|
202
|
-
children: /* @__PURE__ */ n(
|
|
203
|
-
color:
|
|
207
|
+
children: /* @__PURE__ */ n(N, {
|
|
208
|
+
color: Pe.colors.textSecondary,
|
|
204
209
|
regular: !0,
|
|
205
210
|
wordBreak: !1,
|
|
206
211
|
children: y
|
|
207
212
|
})
|
|
208
213
|
}),
|
|
214
|
+
t && /* @__PURE__ */ n(se, {
|
|
215
|
+
style: ae,
|
|
216
|
+
error: l,
|
|
217
|
+
forId: w,
|
|
218
|
+
inputState: s,
|
|
219
|
+
shrinkLabel: g,
|
|
220
|
+
optional: !d.required,
|
|
221
|
+
children: t
|
|
222
|
+
}),
|
|
209
223
|
/* @__PURE__ */ n("div", {
|
|
210
|
-
className:
|
|
211
|
-
children: /* @__PURE__ */ n(
|
|
224
|
+
className: xe,
|
|
225
|
+
children: /* @__PURE__ */ n(N, {
|
|
212
226
|
as: "div",
|
|
213
227
|
regular: !0,
|
|
214
|
-
children: /*#__PURE__*/ r.createElement(
|
|
215
|
-
id:
|
|
228
|
+
children: /*#__PURE__*/ r.createElement(v || te, _object_spread(_object_spread_props(_object_spread({}, ie, R), {
|
|
229
|
+
id: w,
|
|
216
230
|
style: _object_spread_props(_object_spread({
|
|
217
|
-
paddingRight: x ? 0 : i ?
|
|
218
|
-
paddingLeft: y ? 0 : f ? `calc(${
|
|
231
|
+
paddingRight: x ? 0 : i ? q : j,
|
|
232
|
+
paddingLeft: y ? 0 : f ? `calc(${F} + ${L}px)` : L
|
|
219
233
|
}, R.style), {
|
|
220
|
-
fontFamily:
|
|
234
|
+
fontFamily: re
|
|
221
235
|
}),
|
|
222
|
-
className: p ?
|
|
223
|
-
[
|
|
236
|
+
className: p ? T(be, $ ? ye : Ie) : T(Ce, $ ? _ : G, {
|
|
237
|
+
[Ee]: fe(),
|
|
224
238
|
// Hide webkit placeholder when label is not shrinked and value is empty
|
|
225
|
-
[
|
|
239
|
+
[Re]: E && s === "default",
|
|
226
240
|
// Force height of input when value is empty to avoid field from having height 0 in iOS
|
|
227
|
-
[
|
|
241
|
+
[ve]: E && s !== "filled"
|
|
228
242
|
}),
|
|
229
243
|
onFocus: (e)=>{
|
|
230
244
|
c("focused"), h == null || h(e);
|
|
@@ -233,50 +247,44 @@ const De = (d, u)=>{
|
|
|
233
247
|
e.target.value.length > 0 ? c("filled") : c("default"), b == null || b(e);
|
|
234
248
|
},
|
|
235
249
|
onChange: (e)=>{
|
|
236
|
-
var
|
|
237
|
-
C === void 0 || e.target.value.length <= C ? (O(e.target.value.length), e.target.value.length > 0 && s !== "focused" && c(e.target.value.length > 0 ? "filled" : "default"), (
|
|
250
|
+
var z;
|
|
251
|
+
C === void 0 || e.target.value.length <= C ? (O(e.target.value.length), e.target.value.length > 0 && s !== "focused" && c(e.target.value.length > 0 ? "filled" : "default"), (z = R.onChange) == null || z.call(R, e)) : (e.stopPropagation(), e.preventDefault());
|
|
238
252
|
},
|
|
239
|
-
defaultValue:
|
|
253
|
+
defaultValue: o,
|
|
240
254
|
value: a
|
|
241
|
-
}),
|
|
255
|
+
}), l && {
|
|
242
256
|
"aria-invalid": !0
|
|
243
257
|
}, u && {
|
|
244
|
-
"aria-describedby":
|
|
258
|
+
"aria-describedby": P
|
|
259
|
+
}, A && {
|
|
260
|
+
onCopy: H,
|
|
261
|
+
onCut: H
|
|
245
262
|
}))
|
|
246
263
|
})
|
|
247
264
|
}),
|
|
248
|
-
t && /* @__PURE__ */ n(re, {
|
|
249
|
-
style: ee,
|
|
250
|
-
error: d,
|
|
251
|
-
forId: N,
|
|
252
|
-
inputState: s,
|
|
253
|
-
shrinkLabel: g,
|
|
254
|
-
optional: !o.required,
|
|
255
|
-
children: t
|
|
256
|
-
}),
|
|
257
265
|
x && /* @__PURE__ */ n("div", {
|
|
258
|
-
className:
|
|
266
|
+
className: Le,
|
|
259
267
|
children: x
|
|
260
268
|
}),
|
|
261
269
|
i
|
|
262
270
|
]
|
|
263
271
|
})
|
|
264
272
|
});
|
|
265
|
-
}),
|
|
266
|
-
var { getSuggestions:
|
|
273
|
+
}), Ge = /*#__PURE__*/ r.lazy(()=>import(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")), at = /*#__PURE__*/ r.forwardRef((_param, m)=>{
|
|
274
|
+
var { getSuggestions: l, id: u } = _param, t = _object_without_properties(_param, [
|
|
267
275
|
"getSuggestions",
|
|
268
276
|
"id"
|
|
269
277
|
]);
|
|
270
|
-
const [S,
|
|
271
|
-
if (
|
|
272
|
-
return
|
|
278
|
+
const [S, o] = r.useState([]), a = r.useRef(null), { platformOverrides: h, texts: b, t: v } = k(), y = r.useId(), f = u || y, x = r.useId();
|
|
279
|
+
if (l && (t.value === void 0 || t.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
|
|
280
|
+
return l ? /* @__PURE__ */ n(r.Suspense, {
|
|
273
281
|
fallback: /* @__PURE__ */ n(W, _object_spread_props(_object_spread({}, t), {
|
|
274
|
-
label:
|
|
282
|
+
label: me(h) ? "" : t.label,
|
|
275
283
|
autoComplete: "off",
|
|
276
284
|
ref: m,
|
|
277
285
|
id: f
|
|
278
286
|
})),
|
|
279
|
-
children: /* @__PURE__ */ n(
|
|
287
|
+
children: /* @__PURE__ */ n(Ge, {
|
|
280
288
|
id: x,
|
|
281
289
|
inputProps: _object_spread_props(_object_spread({}, t), {
|
|
282
290
|
id: f,
|
|
@@ -293,23 +301,23 @@ const De = (d, u)=>{
|
|
|
293
301
|
}
|
|
294
302
|
}),
|
|
295
303
|
renderInputComponent: (i)=>/* @__PURE__ */ n(W, _object_spread_props(_object_spread({}, i), {
|
|
296
|
-
inputRef:
|
|
304
|
+
inputRef: K(a, t.inputRef, m)
|
|
297
305
|
})),
|
|
298
306
|
suggestions: S,
|
|
299
307
|
onSuggestionsFetchRequested: (param)=>{
|
|
300
308
|
let { value: i } = param;
|
|
301
|
-
return l(
|
|
309
|
+
return o(l(i));
|
|
302
310
|
},
|
|
303
|
-
onSuggestionsClearRequested: ()=>
|
|
311
|
+
onSuggestionsClearRequested: ()=>o([]),
|
|
304
312
|
getSuggestionValue: (i)=>i,
|
|
305
313
|
renderSuggestion: (i, param)=>{
|
|
306
314
|
let { isHighlighted: g } = param;
|
|
307
315
|
return /* @__PURE__ */ n("div", {
|
|
308
316
|
role: "menuitem",
|
|
309
|
-
className:
|
|
310
|
-
[
|
|
317
|
+
className: T(Te, {
|
|
318
|
+
[Ae]: g
|
|
311
319
|
}),
|
|
312
|
-
children: /* @__PURE__ */ n(
|
|
320
|
+
children: /* @__PURE__ */ n(N, {
|
|
313
321
|
regular: !0,
|
|
314
322
|
children: i
|
|
315
323
|
})
|
|
@@ -319,8 +327,8 @@ const De = (d, u)=>{
|
|
|
319
327
|
style: {
|
|
320
328
|
width: a.current ? a.current.clientWidth + 2 : 0
|
|
321
329
|
},
|
|
322
|
-
className:
|
|
323
|
-
"aria-label": `${t.label} ${b.menuLabelSuffix ||
|
|
330
|
+
className: $e,
|
|
331
|
+
"aria-label": `${t.label} ${b.menuLabelSuffix || v(ze)}`,
|
|
324
332
|
children: i.children
|
|
325
333
|
}))
|
|
326
334
|
})
|
|
@@ -329,4 +337,4 @@ const De = (d, u)=>{
|
|
|
329
337
|
ref: m
|
|
330
338
|
}));
|
|
331
339
|
});
|
|
332
|
-
export {
|
|
340
|
+
export { nt as FieldEndIcon, W as TextFieldBase, at as TextFieldBaseAutosuggest };
|
|
@@ -2,5 +2,5 @@ import "./sprinkles.css.ts.vanilla.css-mistica.js";
|
|
|
2
2
|
import "./icon-button.css.ts.vanilla.css-mistica.js";
|
|
3
3
|
import "./text-field-base.css.ts.vanilla.css-mistica.js";
|
|
4
4
|
import "./text-field-components.css.ts.vanilla.css-mistica.js";
|
|
5
|
-
var a = 328, f = 0.78, e = 0.75,
|
|
6
|
-
export { a as DEFAULT_WIDTH, f as LABEL_SCALE_DESKTOP, e as LABEL_SCALE_MOBILE,
|
|
5
|
+
var a = 328, f = 0.78, e = 0.75, y = "_15k6ur97", k = "_1y2v1nfkl _1y2v1nfk1 _1y2v1nfhk _1y2v1nfka _1y2v1nfhe", i = "_15k6ur96 _1y2v1nfhk _1y2v1nfhq", l = "_1y2v1nfi7", h = "_1y2v1nfa7 _1y2v1nfbj _1y2v1nfhk", t = "_1y2v1nfi5 _1y2v1nf7j", o = "_15k6ur91 _1y2v1nfhf _1y2v1nfhk _1y2v1nfhp", p = "_15k6ur93 _1y2v1nfkl _1y2v1nfi3", u = "_15k6ur9e _1y2v1nfhk", L = "_15k6ur99 _1y2v1nfi7", d = "_15k6ur94", E = "_15k6ur9g";
|
|
6
|
+
export { a as DEFAULT_WIDTH, f as LABEL_SCALE_DESKTOP, e as LABEL_SCALE_MOBILE, y as disabled, k as field, i as fieldContainer, l as fullWidth, h as helperContainer, t as helperText, o as labelContainer, p as labelText, u as leftHelperText, L as normalWidth, d as shrinked, E as warnIcon };
|