@telefonica/mistica 13.1.3 → 13.2.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/css/mistica.css +1 -1
- package/dist/avatar.css-mistica.js +3 -3
- package/dist/badge.css-mistica.js +2 -2
- package/dist/button-group.css-mistica.js +1 -1
- package/dist/button-layout.css-mistica.js +8 -8
- package/dist/button.css-mistica.js +20 -20
- package/dist/callout.css-mistica.js +2 -2
- package/dist/card.css-mistica.js +7 -7
- package/dist/carousel.css-mistica.js +15 -15
- package/dist/checkbox.css-mistica.js +8 -8
- package/dist/chip.css-mistica.js +4 -4
- package/dist/circle.css-mistica.js +2 -2
- package/dist/credit-card-number-field.css-mistica.js +3 -3
- package/dist/cvv-field.css-mistica.js +3 -3
- package/dist/dialog.css-mistica.js +6 -6
- package/dist/double-field.css-mistica.js +4 -4
- package/dist/empty-state-card.css-mistica.js +4 -4
- package/dist/empty-state.css-mistica.js +7 -7
- package/dist/feedback.css-mistica.js +1 -1
- package/dist/fixed-footer-layout.css-mistica.js +4 -4
- package/dist/header.d.ts +20 -1
- package/dist/header.js +60 -59
- package/dist/highlighted-card.css-mistica.js +6 -6
- package/dist/icon-button.css-mistica.js +1 -1
- package/dist/image.css-mistica.js +2 -2
- package/dist/image.d.ts +2 -2
- package/dist/image.js +63 -48
- package/dist/list.css-mistica.js +12 -12
- package/dist/loading-bar.css-mistica.js +6 -6
- package/dist/maybe-dismissable.css-mistica.js +3 -3
- package/dist/menu.css-mistica.js +2 -2
- package/dist/navigation-bar.css-mistica.js +12 -12
- package/dist/navigation-breadcrumbs.css-mistica.js +3 -3
- package/dist/package-version.js +1 -1
- package/dist/password-field.css-mistica.js +2 -2
- package/dist/popover.css-mistica.js +9 -9
- package/dist/progress-bar.css-mistica.js +3 -3
- package/dist/radio-button.css-mistica.js +5 -5
- package/dist/responsive-layout.css-mistica.js +3 -3
- package/dist/screen-reader-only.css-mistica.js +1 -1
- package/dist/select.css-mistica.js +13 -13
- package/dist/select.js +73 -73
- package/dist/skeleton-base.d.ts +2 -1
- package/dist/skeleton-base.js +6 -6
- package/dist/skeletons.css-mistica.js +3 -3
- package/dist/skeletons.d.ts +2 -1
- package/dist/skeletons.js +21 -20
- package/dist/skins/blau.js +19 -9
- package/dist/skins/movistar.js +17 -7
- package/dist/skins/o2-classic.js +17 -7
- package/dist/skins/o2.js +17 -7
- package/dist/skins/skin-contract.css-mistica.js +133 -123
- package/dist/skins/skin-contract.css.d.ts +10 -0
- package/dist/skins/telefonica.d.ts +1 -1
- package/dist/skins/telefonica.js +18 -8
- package/dist/skins/types.d.ts +5 -0
- package/dist/skins/vivo.js +17 -7
- package/dist/snackbar.css-mistica.js +5 -5
- package/dist/spinner.css-mistica.js +1 -1
- package/dist/sprinkles.css-mistica.js +336 -306
- package/dist/stepper.css-mistica.js +9 -9
- package/dist/switch-component.css-mistica.js +22 -22
- package/dist/tabs.css-mistica.js +14 -14
- package/dist/tag.css-mistica.js +2 -2
- package/dist/tag.js +21 -16
- package/dist/text-field-base.css-mistica.js +6 -6
- package/dist/text-field-components.css-mistica.js +8 -8
- package/dist/text-link.css-mistica.js +3 -3
- package/dist/text.js +5 -5
- package/dist/tooltip.css-mistica.js +4 -4
- package/dist/touchable.css-mistica.js +1 -1
- package/dist/utils/aspect-ratio-support.css-mistica.js +3 -3
- package/dist/utils/aspect-ratio-support.js +2 -3
- package/dist/video.css-mistica.js +2 -2
- package/dist-es/avatar.css-mistica.js +2 -2
- package/dist-es/badge.css-mistica.js +2 -2
- package/dist-es/button-group.css-mistica.js +1 -1
- package/dist-es/button-layout.css-mistica.js +7 -7
- package/dist-es/button.css-mistica.js +9 -9
- package/dist-es/callout.css-mistica.js +2 -2
- package/dist-es/card.css-mistica.js +2 -2
- package/dist-es/carousel.css-mistica.js +2 -2
- package/dist-es/checkbox.css-mistica.js +6 -6
- package/dist-es/chip.css-mistica.js +4 -4
- package/dist-es/circle.css-mistica.js +2 -2
- package/dist-es/credit-card-number-field.css-mistica.js +3 -3
- package/dist-es/cvv-field.css-mistica.js +2 -2
- package/dist-es/dialog.css-mistica.js +5 -5
- package/dist-es/double-field.css-mistica.js +4 -4
- package/dist-es/empty-state-card.css-mistica.js +2 -2
- package/dist-es/empty-state.css-mistica.js +3 -3
- package/dist-es/feedback.css-mistica.js +1 -1
- package/dist-es/fixed-footer-layout.css-mistica.js +3 -3
- package/dist-es/header.js +89 -88
- package/dist-es/highlighted-card.css-mistica.js +5 -5
- package/dist-es/icon-button.css-mistica.js +1 -1
- package/dist-es/image.css-mistica.js +2 -2
- package/dist-es/image.js +74 -59
- package/dist-es/list.css-mistica.js +2 -2
- package/dist-es/loading-bar.css-mistica.js +2 -2
- package/dist-es/maybe-dismissable.css-mistica.js +2 -2
- package/dist-es/menu.css-mistica.js +2 -2
- package/dist-es/navigation-bar.css-mistica.js +9 -9
- package/dist-es/navigation-breadcrumbs.css-mistica.js +2 -2
- package/dist-es/package-version.js +1 -1
- package/dist-es/password-field.css-mistica.js +2 -2
- package/dist-es/popover.css-mistica.js +2 -2
- package/dist-es/progress-bar.css-mistica.js +2 -2
- package/dist-es/radio-button.css-mistica.js +4 -4
- package/dist-es/responsive-layout.css-mistica.js +2 -2
- package/dist-es/screen-reader-only.css-mistica.js +1 -1
- package/dist-es/select.css-mistica.js +10 -10
- package/dist-es/select.js +84 -84
- package/dist-es/skeleton-base.js +12 -12
- package/dist-es/skeletons.css-mistica.js +2 -2
- package/dist-es/skeletons.js +38 -37
- package/dist-es/skins/blau.js +19 -9
- package/dist-es/skins/movistar.js +19 -9
- package/dist-es/skins/o2-classic.js +17 -7
- package/dist-es/skins/o2.js +17 -7
- package/dist-es/skins/skin-contract.css-mistica.js +133 -123
- package/dist-es/skins/telefonica.js +20 -10
- package/dist-es/skins/vivo.js +19 -9
- package/dist-es/snackbar.css-mistica.js +2 -2
- package/dist-es/spinner.css-mistica.js +1 -1
- package/dist-es/sprinkles.css-mistica.js +336 -306
- package/dist-es/stepper.css-mistica.js +2 -2
- package/dist-es/style.css +1 -1
- package/dist-es/switch-component.css-mistica.js +19 -19
- package/dist-es/tabs.css-mistica.js +10 -10
- package/dist-es/tag.css-mistica.js +2 -2
- package/dist-es/tag.js +36 -31
- package/dist-es/text-field-base.css-mistica.js +2 -2
- package/dist-es/text-field-components.css-mistica.js +2 -2
- package/dist-es/text-link.css-mistica.js +3 -3
- package/dist-es/text.js +5 -5
- package/dist-es/tooltip.css-mistica.js +3 -3
- package/dist-es/touchable.css-mistica.js +1 -1
- package/dist-es/utils/aspect-ratio-support.css-mistica.js +3 -3
- package/dist-es/utils/aspect-ratio-support.js +2 -3
- package/dist-es/video.css-mistica.js +2 -2
- package/package.json +6 -6
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.js";
|
|
2
2
|
import "./menu.css.ts.vanilla.js";
|
|
3
|
-
var
|
|
3
|
+
var k = "_2k0k3u9", _ = "_2k0k3u7 _1y2v1nf63 _1y2v1nf6h _1y2v1nf6v _1y2v1nf79 _1y2v1nf5c _1y2v1nf2p _1y2v1nf9i", a = "_2k0k3u8", t = {
|
|
4
4
|
top: "var(--_2k0k3u0)",
|
|
5
5
|
bottom: "var(--_2k0k3u1)",
|
|
6
6
|
right: "var(--_2k0k3u2)",
|
|
@@ -8,4 +8,4 @@ var v = "_2k0k3u9", _ = "_2k0k3u7 _1y2v1nf5t _1y2v1nf67 _1y2v1nf6l _1y2v1nf6z _1
|
|
|
8
8
|
transformOrigin: "var(--_2k0k3u4)",
|
|
9
9
|
maxHeight: "var(--_2k0k3u5)"
|
|
10
10
|
};
|
|
11
|
-
export {
|
|
11
|
+
export { k as hideItems, _ as menuContainer, a as showItems, t as vars };
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.js";
|
|
2
2
|
import "./navigation-bar.css.ts.vanilla.js";
|
|
3
|
-
var y = "_1vcy5dz1
|
|
3
|
+
var y = "_1vcy5dz1 _1y2v1nf5b _1y2v1nf7v _1y2v1nf8a", _ = "_1vcy5dzr _1y2v1nf5d _1y2v1nf9y _1y2v1nfa2 _1y2v1nfag _1y2v1nf2o", e = "_1vcy5dzl", r = "_1vcy5dzm", f = "_1vcy5dzn", a = "_1vcy5dzo", c = {
|
|
4
4
|
default: "_1vcy5dzu _1y2v1nf1e",
|
|
5
5
|
inverse: "_1vcy5dzv _1y2v1nf1d"
|
|
6
|
-
},
|
|
7
|
-
default: "_1vcy5dza _1vcy5dz9
|
|
8
|
-
inverse: "_1vcy5dzb _1vcy5dz9
|
|
9
|
-
menuOpen: "_1vcy5dzc _1vcy5dz9
|
|
10
|
-
}, u = "_1vcy5dze
|
|
6
|
+
}, d = "_1vcy5dz4 _1vcy5dz3 _1y2v1nf5c", i = "_1vcy5dz5 _1vcy5dz3 _1y2v1nf5c", t = "_1vcy5dzw", z = "_1y2v1nf5g _1y2v1nf5p", o = {
|
|
7
|
+
default: "_1vcy5dza _1vcy5dz9 _1y2v1nf68 _1y2v1nf6m _1y2v1nf5g _1y2v1nf5v _1y2v1nf7n _1y2v1nf8h",
|
|
8
|
+
inverse: "_1vcy5dzb _1vcy5dz9 _1y2v1nf68 _1y2v1nf6m _1y2v1nf5g _1y2v1nf5v _1y2v1nf7n _1y2v1nf8h",
|
|
9
|
+
menuOpen: "_1vcy5dzc _1vcy5dz9 _1y2v1nf68 _1y2v1nf6m _1y2v1nf5g _1y2v1nf5v _1y2v1nf7n _1y2v1nf8h"
|
|
10
|
+
}, u = "_1vcy5dze _1y2v1nf6y _1y2v1nf7c _1y2v1nf8h _1y2v1nf5g _1y2v1nf5v _1y2v1nf9e _1y2v1nf5a", g = {
|
|
11
11
|
default: "_1vcy5dzf",
|
|
12
12
|
inverse: "_1vcy5dzg"
|
|
13
|
-
}, s = "_1vcy5dzk
|
|
13
|
+
}, s = "_1vcy5dzk _1y2v1nf8h", l = {
|
|
14
14
|
default: "_1vcy5dzh",
|
|
15
15
|
inverse: "_1vcy5dzi"
|
|
16
|
-
}, b = "_1vcy5dz7
|
|
17
|
-
export { y as burgerIconContainer, _ as burgerMenu, e as burgerMenuEnter, r as burgerMenuEnterActive, f as burgerMenuExit,
|
|
16
|
+
}, b = "_1vcy5dz7 _1y2v1nf5d _1y2v1nf9o _1y2v1nfa2 _1y2v1nfag";
|
|
17
|
+
export { y as burgerIconContainer, _ as burgerMenu, e as burgerMenuEnter, r as burgerMenuEnterActive, f as burgerMenuExit, a as burgerMenuExitActive, c as iconButtonVariants, d as iconCloseHidden, i as iconMenuHidden, t as lineHeightFix, z as logoContainer, o as navbarBorderColorVariants, u as section, g as selectedSectionVariantes, s as spacer, l as textWrapperVariants, b as topFixed };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.js";
|
|
2
2
|
import "./navigation-breadcrumbs.css.ts.vanilla.js";
|
|
3
|
-
var
|
|
4
|
-
export {
|
|
3
|
+
var r = "_1fniauj3", f = "_1fniauj2", i = "_1fniauj5 _1y2v1nf63 _1y2v1nf6h _1y2v1nf6v _1y2v1nf79", _ = "_1y2v1nf5j";
|
|
4
|
+
export { r as current, f as link, i as list, _ as listItem };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const o = "13.1
|
|
1
|
+
const o = "13.2.1";
|
|
2
2
|
export { o as PACKAGE_VERSION };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.js";
|
|
2
2
|
import "./password-field.css.ts.vanilla.js";
|
|
3
|
-
var
|
|
4
|
-
export {
|
|
3
|
+
var v = "ptqylz1 _1y2v1nf66 _1y2v1nf6k _1y2v1nf6y _1y2v1nf7c _1y2v1nf9f _1y2v1nf5a";
|
|
4
|
+
export { v as shadow };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.js";
|
|
2
2
|
import "./popover.css.ts.vanilla.js";
|
|
3
|
-
var
|
|
4
|
-
export {
|
|
3
|
+
var r = "_12igu661 _1y2v1nf5c _1y2v1nf9o _1y2v1nf9d _1y2v1nf9g _1y2v1nf2p", t = 12, o = "_12igu663 _1y2v1nf5c _1y2v1nf2 _1y2v1nf9m", a = "_12igu669 _1y2v1nf5c _1y2v1nf9r _1y2v1nfaj", _ = "_12igu665 _1y2v1nf5c _1y2v1nf7o _1y2v1nf2p _1y2v1nf9d _1y2v1nf9i", f = "bottom", i = "top", y = 20, e = 16, g = 488, p = "_1y2v1nf5g _1y2v1nf5v _1y2v1nf83", c = "_12igu667";
|
|
4
|
+
export { r as arrow, t as arrowSize, o as arrowWrapper, a as closeButtonIcon, _ as container, f as defaultPositionDesktop, i as defaultPositionMobile, y as distanceToTarget, e as marginLeftRightMobile, g as maxWidthDesktop, p as textAlign, c as textContent };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.js";
|
|
2
2
|
import "./progress-bar.css.ts.vanilla.js";
|
|
3
|
-
var
|
|
4
|
-
export {
|
|
3
|
+
var n = "j0y7r93 _1y2v1nf83 _1y2v1nf9g", y = "_1y2v1nf9g _1y2v1nf86 _1y2v1nf3k";
|
|
4
|
+
export { n as bar, y as barBackground };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.js";
|
|
2
2
|
import "./radio-button.css.ts.vanilla.js";
|
|
3
|
-
var f = "c6dmsub", r = "c6dmsu5
|
|
3
|
+
var f = "c6dmsub", r = "c6dmsu5 _1y2v1nf5g _1y2v1nf9f", y = "c6dmsu7 _1y2v1nf3l", d = {
|
|
4
4
|
default: "c6dmsu9",
|
|
5
5
|
ios: "c6dmsua"
|
|
6
6
|
}, _ = {
|
|
7
|
-
default: "c6dmsu2 c6dmsu1
|
|
8
|
-
ios: "c6dmsu3 c6dmsu1
|
|
7
|
+
default: "c6dmsu2 c6dmsu1 _1y2v1nf5h _1y2v1nf5v _1y2v1nf5p _1y2v1nf9l _1y2v1nf5y _1y2v1nf9f _1y2v1nf2o",
|
|
8
|
+
ios: "c6dmsu3 c6dmsu1 _1y2v1nf5h _1y2v1nf5v _1y2v1nf5p _1y2v1nf9l _1y2v1nf5y _1y2v1nf9f _1y2v1nf2o"
|
|
9
9
|
}, c = "c6dmsu8";
|
|
10
|
-
export { f as disabled, r as innerCircle,
|
|
10
|
+
export { f as disabled, r as innerCircle, y as innerCircleChecked, d as outerCircleCheckedVariants, _ as outerCircleVariants, c as radioButton };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.js";
|
|
2
2
|
import "./responsive-layout.css.ts.vanilla.js";
|
|
3
|
-
var
|
|
4
|
-
export {
|
|
3
|
+
var o = "_1y2v1nf7n", v = "_17lofg75 _1y2v1nf7n", a = "_1y2v1nf2q", e = "_17lofg73";
|
|
4
|
+
export { o as container, v as fullWidth, a as inverseBackground, e as responsiveLayout };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.js";
|
|
2
2
|
import "./screen-reader-only.css.ts.vanilla.js";
|
|
3
|
-
var y = "gwdgwo1
|
|
3
|
+
var y = "gwdgwo1 _1y2v1nf63 _1y2v1nf6h _1y2v1nf6v _1y2v1nf79 _1y2v1nf5c _1y2v1nf9m _1y2v1nf9e";
|
|
4
4
|
export { y as screenReaderOnly };
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.js";
|
|
2
2
|
import "./select.css.ts.vanilla.js";
|
|
3
|
-
var
|
|
3
|
+
var _ = "_1sqpivvo _1y2v1nf5c _1y2v1nfal", f = "_1sqpivvq _1y2v1nf70 _1y2v1nf7e _1y2v1nf66 _1y2v1nf6k _1y2v1nf1n _1y2v1nf5g _1y2v1nf5v _1y2v1nf9l _1y2v1nf8d", i = "_1y2v1nf2u", y = {
|
|
4
4
|
show: "_1sqpivv7",
|
|
5
5
|
hide: "_1sqpivv8"
|
|
6
|
-
},
|
|
7
|
-
default: "_1sqpivvd _1sqpivvc
|
|
8
|
-
fullWidth: "_1sqpivve _1sqpivvc
|
|
9
|
-
},
|
|
10
|
-
default: "_1sqpivvl _1sqpivvk
|
|
11
|
-
disabled: "_1sqpivvm _1sqpivvk
|
|
6
|
+
}, a = "_1sqpivv6 _1y2v1nf63 _1y2v1nf6h _1y2v1nf6v _1y2v1nf79 _1y2v1nf5c _1y2v1nf9i _1y2v1nf2p", s = {
|
|
7
|
+
default: "_1sqpivvd _1sqpivvc _1y2v1nf5b",
|
|
8
|
+
fullWidth: "_1sqpivve _1sqpivvc _1y2v1nf5b"
|
|
9
|
+
}, e = {
|
|
10
|
+
default: "_1sqpivvl _1sqpivvk _1y2v1nf5c _1y2v1nf9m _1y2v1nf9b _1y2v1nf1n",
|
|
11
|
+
disabled: "_1sqpivvm _1sqpivvk _1y2v1nf5c _1y2v1nf9m _1y2v1nf9b _1y2v1nf1n"
|
|
12
12
|
}, p = {
|
|
13
|
-
default: "_1sqpivvh _1sqpivvg
|
|
14
|
-
disabled: "_1sqpivvi _1sqpivvg
|
|
13
|
+
default: "_1sqpivvh _1sqpivvg _1y2v1nf9e _1y2v1nf1n _1y2v1nf5a _1y2v1nf7n _1y2v1nf83",
|
|
14
|
+
disabled: "_1sqpivvi _1sqpivvg _1y2v1nf9e _1y2v1nf1n _1y2v1nf5a _1y2v1nf7n _1y2v1nf83"
|
|
15
15
|
}, r = {
|
|
16
16
|
top: "var(--_1sqpivv0)",
|
|
17
17
|
left: "var(--_1sqpivv1)",
|
|
@@ -19,4 +19,4 @@ var n = "_1sqpivvo _1y2v1nf52 _1y2v1nfab", f = "_1sqpivvq _1y2v1nf6q _1y2v1nf74
|
|
|
19
19
|
minWidth: "var(--_1sqpivv3)",
|
|
20
20
|
maxHeight: "var(--_1sqpivv4)"
|
|
21
21
|
};
|
|
22
|
-
export {
|
|
22
|
+
export { _ as arrowDown, f as menuItem, i as menuItemSelected, y as optionsAnimationsVariants, a as optionsContainer, s as selectContainerVariants, e as selectTextVariants, p as selectVariants, r as vars };
|
package/dist-es/select.js
CHANGED
|
@@ -50,11 +50,11 @@ function _objectSpreadProps(target, source) {
|
|
|
50
50
|
}
|
|
51
51
|
return target;
|
|
52
52
|
}
|
|
53
|
-
import * as
|
|
53
|
+
import * as r from "react";
|
|
54
54
|
import oe from "classnames";
|
|
55
55
|
import { useForm as Ce } from "./form-context.js";
|
|
56
56
|
import { useAriaId as Ne, useTheme as Ae } from "./hooks.js";
|
|
57
|
-
import { TAB as Re, ESC as
|
|
57
|
+
import { TAB as Re, ESC as be, ENTER as re, SPACE as se, UP as ve, DOWN as ke } from "./utils/key-codes.js";
|
|
58
58
|
import { FieldContainer as _e, HelperText as Ve, Label as De } from "./text-field-components.js";
|
|
59
59
|
import ie from "./generated/mistica-icons/icon-chevron-down-regular.js";
|
|
60
60
|
import { TextFieldBaseAutosuggest as Me } from "./text-field-base.js";
|
|
@@ -64,173 +64,173 @@ import { cancelEvent as m } from "./utils/dom.js";
|
|
|
64
64
|
import { Text3 as Ge } from "./text.js";
|
|
65
65
|
import { selectVariants as Ze, arrowDown as We, selectContainerVariants as Be, selectTextVariants as Le, vars as C, optionsContainer as $e, optionsAnimationsVariants as ce, menuItem as qe, menuItemSelected as je } from "./select.css-mistica.js";
|
|
66
66
|
import { assignInlineVars as ze } from "@vanilla-extract/dynamic";
|
|
67
|
-
import { jsxs as
|
|
67
|
+
import { jsxs as k, jsx as a, Fragment as Ke } from "./_virtual/jsx-runtime.js";
|
|
68
68
|
const ut = (param)=>{
|
|
69
|
-
let { id: le , label: h , helperText: ae , value:
|
|
70
|
-
var
|
|
71
|
-
const g =
|
|
72
|
-
|
|
69
|
+
let { id: le , label: h , helperText: ae , value: _ , onChangeValue: V , name: i , fullWidth: D , options: d , optional: M , disabled: ue , error: de , onBlur: H , autoFocus: q = !1 , native: fe } = param;
|
|
70
|
+
var ee, te, ne;
|
|
71
|
+
const g = r.useRef(null), f = r.useRef(null), T = r.useRef(null), I = r.useRef(null), N = r.useRef(/* @__PURE__ */ new Map()), [c, pe] = r.useState(), [F, j] = r.useState(!1), [z, K] = r.useState(!1), [U, y] = r.useState(!1), [u, P] = r.useState({}), [x, G] = r.useState(), Z = r.useRef(null), W = Ne(le), { rawValues: me , setRawValue: B , setValue: L , formStatus: he , formErrors: X , setFormError: ge , register: $ } = Ce(), { platformOverrides: J } = Ae(), Te = fe || process.env.NODE_ENV === "test" || Fe(J) || Pe(J), E = ue || he === "sending", A = de || !!X[i], Q = X[i] || ae, o = _ != null ? _ : me[i], R = (e)=>{
|
|
72
|
+
V == null || V(e), ge({
|
|
73
73
|
name: i,
|
|
74
74
|
error: ""
|
|
75
|
-
}),
|
|
75
|
+
}), B({
|
|
76
76
|
name: i,
|
|
77
77
|
value: e
|
|
78
|
-
}),
|
|
78
|
+
}), L({
|
|
79
79
|
name: i,
|
|
80
80
|
value: e
|
|
81
81
|
});
|
|
82
|
-
},
|
|
82
|
+
}, S = (e)=>{
|
|
83
83
|
if (e) {
|
|
84
84
|
if (T != null && T.current) {
|
|
85
|
-
const { top:
|
|
86
|
-
if (p +
|
|
87
|
-
const
|
|
88
|
-
if (
|
|
89
|
-
const ye =
|
|
90
|
-
|
|
91
|
-
minWidth:
|
|
92
|
-
left:
|
|
85
|
+
const { top: s , width: w , left: O , height: b } = T.current.getBoundingClientRect(), p = s + b, v = Math.min(d.length, 8) * 48 + 16;
|
|
86
|
+
if (p + v + 12 > window.innerHeight) {
|
|
87
|
+
const Oe = window.innerHeight - p;
|
|
88
|
+
if (s > Oe) {
|
|
89
|
+
const ye = s - v;
|
|
90
|
+
P({
|
|
91
|
+
minWidth: w,
|
|
92
|
+
left: O,
|
|
93
93
|
top: Math.max(ye, 12),
|
|
94
|
-
maxHeight:
|
|
94
|
+
maxHeight: Math.min(s - 12, v),
|
|
95
95
|
transformOrigin: "center bottom"
|
|
96
96
|
});
|
|
97
|
-
} else
|
|
98
|
-
minWidth:
|
|
97
|
+
} else P({
|
|
98
|
+
minWidth: w,
|
|
99
99
|
top: p,
|
|
100
|
-
left:
|
|
100
|
+
left: O,
|
|
101
101
|
maxHeight: window.innerHeight - p - 12,
|
|
102
102
|
transformOrigin: "center top"
|
|
103
103
|
});
|
|
104
|
-
} else
|
|
105
|
-
minWidth:
|
|
104
|
+
} else P({
|
|
105
|
+
minWidth: w,
|
|
106
106
|
top: p,
|
|
107
|
-
left:
|
|
108
|
-
maxHeight:
|
|
107
|
+
left: O,
|
|
108
|
+
maxHeight: v,
|
|
109
109
|
transformOrigin: "center top"
|
|
110
110
|
});
|
|
111
111
|
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}),
|
|
115
|
-
} else
|
|
116
|
-
},
|
|
112
|
+
j(!0), requestAnimationFrame(()=>{
|
|
113
|
+
Z.current && I.current && "scrollTop" in I.current && (I.current.scrollTop = Z.current), K(!0);
|
|
114
|
+
}), G(c != null ? c : o);
|
|
115
|
+
} else K(!1), j(!1), G(void 0);
|
|
116
|
+
}, Y = (e)=>{
|
|
117
117
|
var t;
|
|
118
|
-
|
|
118
|
+
Z.current = (t = I.current) == null ? void 0 : t.scrollTop, S(!1), R && typeof e == "string" && R(e), typeof o > "u" && pe(e);
|
|
119
119
|
}, Ie = (e)=>{
|
|
120
120
|
var n;
|
|
121
121
|
const t = (n = I.current) == null ? void 0 : n.getBoundingClientRect();
|
|
122
122
|
if (t && e && N.current.has(e)) {
|
|
123
|
-
const l = N.current.get(e),
|
|
124
|
-
if (
|
|
123
|
+
const l = N.current.get(e), s = l == null ? void 0 : l.getBoundingClientRect();
|
|
124
|
+
if (s && s.top + s.height / 2 >= t.top + t.height) {
|
|
125
125
|
l == null || l.scrollIntoView();
|
|
126
126
|
return;
|
|
127
127
|
}
|
|
128
|
-
|
|
128
|
+
s && s.top + s.height / 2 <= t.top && (l == null || l.scrollIntoView(!1));
|
|
129
129
|
}
|
|
130
130
|
}, xe = f.current, Ee = g.current;
|
|
131
|
-
|
|
132
|
-
|
|
131
|
+
r.useEffect(()=>{
|
|
132
|
+
B({
|
|
133
133
|
name: i,
|
|
134
134
|
value: o
|
|
135
|
-
}),
|
|
135
|
+
}), L({
|
|
136
136
|
name: i,
|
|
137
137
|
value: o
|
|
138
138
|
});
|
|
139
139
|
}, [
|
|
140
140
|
i,
|
|
141
|
-
W,
|
|
142
141
|
B,
|
|
142
|
+
L,
|
|
143
143
|
o
|
|
144
|
-
]),
|
|
144
|
+
]), r.useEffect(()=>($(i, {
|
|
145
145
|
input: g.current,
|
|
146
146
|
focusableElement: f.current
|
|
147
147
|
}), ()=>{
|
|
148
|
-
|
|
148
|
+
$(i, {
|
|
149
149
|
input: null,
|
|
150
150
|
focusableElement: null
|
|
151
151
|
});
|
|
152
152
|
}), [
|
|
153
153
|
i,
|
|
154
|
-
|
|
154
|
+
$,
|
|
155
155
|
f,
|
|
156
156
|
g,
|
|
157
157
|
xe,
|
|
158
158
|
Ee
|
|
159
|
-
]),
|
|
159
|
+
]), r.useEffect(()=>{
|
|
160
160
|
const e = (n)=>{
|
|
161
|
-
var
|
|
162
|
-
const
|
|
163
|
-
[
|
|
161
|
+
var w, O;
|
|
162
|
+
const s = {
|
|
163
|
+
[ve]: -1,
|
|
164
164
|
[ke]: 1
|
|
165
165
|
}[n.keyCode];
|
|
166
|
-
if (
|
|
166
|
+
if (s) {
|
|
167
167
|
m(n);
|
|
168
|
-
const
|
|
168
|
+
const b = (O = (w = d[d.findIndex((param)=>{
|
|
169
169
|
let { value: p } = param;
|
|
170
170
|
return p === x;
|
|
171
|
-
}) +
|
|
172
|
-
|
|
171
|
+
}) + s]) == null ? void 0 : w.value) != null ? O : x;
|
|
172
|
+
G(b), Ie(b);
|
|
173
173
|
}
|
|
174
174
|
}, t = (n)=>{
|
|
175
|
-
|
|
175
|
+
F && (n.keyCode === Re && m(n), n.keyCode === be && S(!1), (n.keyCode === re || n.keyCode === se) && (m(n), d.findIndex((param)=>{
|
|
176
176
|
let { value: l } = param;
|
|
177
177
|
return l === x;
|
|
178
|
-
}) !== -1 && x !== c &&
|
|
178
|
+
}) !== -1 && x !== c && Y(x), S(!1))), z && e(n);
|
|
179
179
|
};
|
|
180
180
|
return document.addEventListener("keydown", t, !1), ()=>{
|
|
181
181
|
document.removeEventListener("keydown", t, !1);
|
|
182
182
|
};
|
|
183
|
-
}),
|
|
184
|
-
|
|
183
|
+
}), r.useEffect(()=>{
|
|
184
|
+
q && f.current && f.current.focus();
|
|
185
185
|
}, [
|
|
186
|
-
|
|
186
|
+
q
|
|
187
187
|
]);
|
|
188
|
-
const
|
|
188
|
+
const Se = (e)=>{
|
|
189
189
|
var t;
|
|
190
190
|
return e ? (t = d.find((param)=>{
|
|
191
191
|
let { value: n } = param;
|
|
192
192
|
return n === e;
|
|
193
193
|
})) == null ? void 0 : t.text : "";
|
|
194
|
-
},
|
|
194
|
+
}, we = {
|
|
195
195
|
tabIndex: 0,
|
|
196
196
|
onFocus: ()=>y(!0),
|
|
197
197
|
onBlur: ()=>y(!1),
|
|
198
198
|
onClick: ()=>{
|
|
199
|
-
|
|
199
|
+
S(!0), y(!0);
|
|
200
200
|
},
|
|
201
201
|
onKeyDown: (e)=>{
|
|
202
|
-
!
|
|
202
|
+
!F && (e.keyCode === se || e.keyCode === re) && (m(e), S(!0));
|
|
203
203
|
}
|
|
204
204
|
};
|
|
205
|
-
return Te ? /* @__PURE__ */
|
|
205
|
+
return Te ? /* @__PURE__ */ k(_e, {
|
|
206
206
|
disabled: E,
|
|
207
207
|
helperText: /* @__PURE__ */ a(Ve, {
|
|
208
208
|
error: A,
|
|
209
|
-
leftText:
|
|
209
|
+
leftText: Q
|
|
210
210
|
}),
|
|
211
211
|
fieldRef: T,
|
|
212
|
-
fullWidth:
|
|
212
|
+
fullWidth: D,
|
|
213
213
|
children: [
|
|
214
214
|
h && /* @__PURE__ */ a(De, {
|
|
215
215
|
error: A,
|
|
216
|
-
forId:
|
|
217
|
-
inputState:
|
|
218
|
-
optional:
|
|
216
|
+
forId: W,
|
|
217
|
+
inputState: U ? "focused" : ((te = o != null ? o : c) != null ? te : (ee = g.current) == null ? void 0 : ee.value) ? "filled" : "default",
|
|
218
|
+
optional: M,
|
|
219
219
|
children: h
|
|
220
220
|
}),
|
|
221
|
-
/* @__PURE__ */
|
|
221
|
+
/* @__PURE__ */ k("select", {
|
|
222
222
|
className: Ze[E ? "disabled" : "default"],
|
|
223
|
-
id:
|
|
223
|
+
id: W,
|
|
224
224
|
"aria-invalid": !!A,
|
|
225
225
|
value: o,
|
|
226
|
-
required: !
|
|
226
|
+
required: !M,
|
|
227
227
|
disabled: E,
|
|
228
228
|
onChange: (e)=>{
|
|
229
229
|
R && R(e.target.value);
|
|
230
230
|
},
|
|
231
231
|
onFocus: ()=>y(!0),
|
|
232
232
|
onBlur: (e)=>{
|
|
233
|
-
y(!1),
|
|
233
|
+
y(!1), H == null || H(e);
|
|
234
234
|
},
|
|
235
235
|
ref: (e)=>{
|
|
236
236
|
[
|
|
@@ -272,32 +272,32 @@ const ut = (param)=>{
|
|
|
272
272
|
})
|
|
273
273
|
})
|
|
274
274
|
]
|
|
275
|
-
}) : /* @__PURE__ */
|
|
275
|
+
}) : /* @__PURE__ */ k(Ke, {
|
|
276
276
|
children: [
|
|
277
|
-
/* @__PURE__ */
|
|
278
|
-
className: Be[
|
|
277
|
+
/* @__PURE__ */ k("div", _objectSpreadProps(_objectSpread({
|
|
278
|
+
className: Be[D ? "fullWidth" : "default"],
|
|
279
279
|
role: "button",
|
|
280
280
|
"aria-haspopup": "listbox",
|
|
281
281
|
ref: f
|
|
282
|
-
}, !E &&
|
|
282
|
+
}, !E && we), {
|
|
283
283
|
children: [
|
|
284
284
|
/* @__PURE__ */ a(Me, {
|
|
285
285
|
style: {
|
|
286
286
|
visibility: "hidden"
|
|
287
287
|
},
|
|
288
|
-
fullWidth:
|
|
288
|
+
fullWidth: D,
|
|
289
289
|
endIcon: /* @__PURE__ */ a(ie, {
|
|
290
290
|
size: 20
|
|
291
291
|
}),
|
|
292
|
-
focus:
|
|
292
|
+
focus: U,
|
|
293
293
|
label: h,
|
|
294
294
|
value: o,
|
|
295
295
|
shrinkLabel: !!(o || c),
|
|
296
296
|
name: i,
|
|
297
|
-
helperText:
|
|
298
|
-
required: !
|
|
297
|
+
helperText: Q,
|
|
298
|
+
required: !M,
|
|
299
299
|
disabled: E,
|
|
300
|
-
id:
|
|
300
|
+
id: W,
|
|
301
301
|
error: A,
|
|
302
302
|
inputRef: g,
|
|
303
303
|
fieldRef: T
|
|
@@ -307,13 +307,13 @@ const ut = (param)=>{
|
|
|
307
307
|
style: {
|
|
308
308
|
top: h ? 27 : 17
|
|
309
309
|
},
|
|
310
|
-
children:
|
|
310
|
+
children: Se(o != null ? o : c)
|
|
311
311
|
})
|
|
312
312
|
]
|
|
313
313
|
})),
|
|
314
|
-
|
|
314
|
+
F && /* @__PURE__ */ a(He, {
|
|
315
315
|
onPress: (e)=>{
|
|
316
|
-
|
|
316
|
+
S(!1), m(e);
|
|
317
317
|
},
|
|
318
318
|
disableScroll: !0,
|
|
319
319
|
children: /* @__PURE__ */ a("ul", {
|
|
@@ -322,10 +322,10 @@ const ut = (param)=>{
|
|
|
322
322
|
[C.left]: u.left ? `${u.left}px` : "",
|
|
323
323
|
[C.maxHeight]: u.maxHeight ? `${u.maxHeight}px` : "",
|
|
324
324
|
[C.minWidth]: u.minWidth ? `${u.minWidth}px` : "",
|
|
325
|
-
[C.transformOrigin]: (
|
|
325
|
+
[C.transformOrigin]: (ne = u.transformOrigin) != null ? ne : ""
|
|
326
326
|
}),
|
|
327
327
|
onPointerDown: m,
|
|
328
|
-
className: oe($e,
|
|
328
|
+
className: oe($e, z ? ce.show : ce.hide),
|
|
329
329
|
role: "listbox",
|
|
330
330
|
ref: I,
|
|
331
331
|
children: d.map((param)=>/* @__PURE__ */ {
|
|
@@ -338,7 +338,7 @@ const ut = (param)=>{
|
|
|
338
338
|
[je]: e === x || e === (c != null ? c : o)
|
|
339
339
|
}),
|
|
340
340
|
onPointerDown: m,
|
|
341
|
-
onClick: ()=>
|
|
341
|
+
onClick: ()=>Y(e),
|
|
342
342
|
ref: (n)=>{
|
|
343
343
|
n ? N.current.set(e, n) : N.current.delete(e);
|
|
344
344
|
},
|
package/dist-es/skeleton-base.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { useIsInverseVariant as
|
|
2
|
-
import
|
|
3
|
-
import { sprinkles as
|
|
1
|
+
import { useIsInverseVariant as i } from "./theme-variant-context.js";
|
|
2
|
+
import m from "classnames";
|
|
3
|
+
import { sprinkles as l } from "./sprinkles.css-mistica.js";
|
|
4
4
|
import { vars as r } from "./skins/skin-contract.css-mistica.js";
|
|
5
|
-
import { jsx as
|
|
6
|
-
const
|
|
7
|
-
let { width: e = "100%" , height: o = 8 , radius: s = 8 , className: a } = param;
|
|
8
|
-
const
|
|
9
|
-
return /* @__PURE__ */
|
|
10
|
-
className:
|
|
11
|
-
background:
|
|
5
|
+
import { jsx as c } from "./_virtual/jsx-runtime.js";
|
|
6
|
+
const v = (param)=>{
|
|
7
|
+
let { width: e = "100%" , height: o = 8 , radius: s = 8 , className: a , noBorderRadius: n = !1 } = param;
|
|
8
|
+
const t = i();
|
|
9
|
+
return /* @__PURE__ */ c("div", {
|
|
10
|
+
className: m(a, l({
|
|
11
|
+
background: t ? r.colors.backgroundSkeletonInverse : r.colors.backgroundSkeleton
|
|
12
12
|
})),
|
|
13
13
|
style: {
|
|
14
|
-
borderRadius: s,
|
|
14
|
+
borderRadius: n ? 0 : s,
|
|
15
15
|
width: e,
|
|
16
16
|
height: o
|
|
17
17
|
},
|
|
18
18
|
"aria-hidden": !0
|
|
19
19
|
});
|
|
20
20
|
};
|
|
21
|
-
export {
|
|
21
|
+
export { v as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.js";
|
|
2
2
|
import "./skeletons.css.ts.vanilla.js";
|
|
3
|
-
var o = "zopolw2
|
|
4
|
-
export { o as animation, r as circle,
|
|
3
|
+
var o = "zopolw2 _1y2v1nf5i", r = "_1y2v1nf5y _1y2v1nf60", y = "zopolw6 _1y2v1nf5z", f = "_1y2v1nf5g _1y2v1nf5v _1y2v1nf5p";
|
|
4
|
+
export { o as animation, r as circle, y as line, f as row };
|