@telefonica/mistica 16.62.0-beta.1 → 16.62.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/css/mistica.css +1 -1
- package/dist/accordion.css-mistica.js +16 -16
- package/dist/align.css-mistica.js +2 -2
- package/dist/autocomplete.css-mistica.js +6 -6
- package/dist/avatar.css-mistica.js +3 -3
- package/dist/badge.css-mistica.js +7 -7
- package/dist/box.css-mistica.js +15 -15
- package/dist/boxed.css-mistica.js +31 -31
- package/dist/button-group.css-mistica.js +10 -10
- package/dist/button-layout.css-mistica.js +21 -21
- package/dist/button.css-mistica.js +51 -51
- package/dist/callout.css-mistica.js +16 -16
- package/dist/card-internal.css-mistica.js +38 -38
- package/dist/carousel.css-mistica.js +18 -18
- package/dist/checkbox.css-mistica.js +21 -21
- package/dist/chip.css-mistica.js +30 -30
- package/dist/circle.css-mistica.js +2 -2
- package/dist/community/advanced-data-card.css-mistica.js +26 -26
- package/dist/community/ai-card.css-mistica.js +48 -0
- package/dist/community/ai-card.css.d.ts +13 -0
- package/dist/community/ai-card.d.ts +19 -0
- package/dist/community/ai-card.js +312 -0
- package/dist/community/blocks.css-mistica.js +3 -3
- package/dist/community/example-component.css-mistica.js +2 -2
- package/dist/community/index.d.ts +1 -0
- package/dist/community/index.js +4 -0
- package/dist/counter.css-mistica.js +12 -12
- package/dist/cover-hero.css-mistica.js +16 -16
- package/dist/credit-card-number-field.css-mistica.js +6 -6
- package/dist/date-field.css-mistica.js +1 -1
- package/dist/date-time-picker.css-mistica.js +2 -2
- package/dist/dialog.css-mistica.js +15 -15
- package/dist/divider.css-mistica.js +5 -5
- package/dist/double-field.css-mistica.js +4 -4
- package/dist/drawer.css-mistica.js +15 -15
- package/dist/empty-state-card.css-mistica.js +4 -4
- package/dist/empty-state.css-mistica.js +14 -14
- package/dist/fade-in.css-mistica.js +1 -1
- package/dist/feedback.css-mistica.js +14 -14
- package/dist/file-upload.css-mistica.js +14 -14
- package/dist/fixed-footer-layout.css-mistica.js +12 -12
- package/dist/form.css-mistica.js +2 -2
- package/dist/generated/mistica-icons/icon-artificial-intelligence-filled.js +7 -7
- package/dist/generated/mistica-icons/icon-artificial-intelligence-light.js +9 -9
- package/dist/generated/mistica-icons/icon-artificial-intelligence-regular.js +12 -12
- package/dist/grid-layout.css-mistica.js +9 -9
- package/dist/grid.css-mistica.js +147 -147
- package/dist/header.css-mistica.js +5 -5
- package/dist/hero.css-mistica.js +11 -11
- package/dist/horizontal-scroll.css-mistica.js +3 -3
- package/dist/icon-button.css-mistica.js +66 -66
- package/dist/icons/icon-chevron.css-mistica.js +6 -6
- package/dist/icons/icon-error.css-mistica.js +3 -3
- package/dist/image.css-mistica.js +11 -11
- package/dist/index.d.ts +1 -0
- package/dist/index.js +4 -0
- package/dist/inline.css-mistica.js +16 -16
- package/dist/list.css-mistica.js +15 -15
- package/dist/loading-bar.css-mistica.js +5 -5
- package/dist/loading-screen.css-mistica.js +15 -15
- package/dist/logo.css-mistica.js +9 -9
- package/dist/menu.css-mistica.js +27 -24
- package/dist/menu.css.d.ts +1 -0
- package/dist/menu.d.ts +2 -1
- package/dist/menu.js +139 -132
- package/dist/mosaic.css-mistica.js +3 -3
- package/dist/navigation-bar.css-mistica.js +45 -45
- package/dist/navigation-breadcrumbs.css-mistica.js +5 -5
- package/dist/package-version.js +2 -2
- package/dist/pin-field.css-mistica.js +10 -10
- package/dist/popover.css-mistica.js +2 -2
- package/dist/progress-bar.css-mistica.js +12 -12
- package/dist/radio-button.css-mistica.js +33 -33
- package/dist/rating.css-mistica.js +12 -12
- package/dist/responsive-layout.css-mistica.js +20 -20
- package/dist/screen-reader-only.css-mistica.js +2 -2
- package/dist/select.css-mistica.js +29 -29
- package/dist/sheet-action-row.css-mistica.js +2 -2
- package/dist/sheet-common.css-mistica.js +16 -16
- package/dist/sheet-info.css-mistica.js +4 -4
- package/dist/skeletons.css-mistica.js +12 -12
- package/dist/skins/skin-contract.css-mistica.js +686 -686
- package/dist/skip-link.css-mistica.js +3 -3
- package/dist/slider.css-mistica.js +28 -28
- package/dist/snackbar.css-mistica.js +16 -16
- package/dist/spinner.css-mistica.js +5 -5
- package/dist/square.css-mistica.js +2 -2
- package/dist/stack.css-mistica.js +9 -9
- package/dist/stacking-group.css-mistica.js +2 -2
- package/dist/stepper.css-mistica.js +16 -16
- package/dist/switch-component.css-mistica.js +53 -53
- package/dist/table.css-mistica.js +24 -24
- package/dist/tabs.css-mistica.js +30 -30
- package/dist/tag.css-mistica.js +5 -5
- package/dist/text-field-base.css-mistica.js +30 -30
- package/dist/text-field-components.css-mistica.js +19 -19
- package/dist/text-link.css-mistica.js +10 -10
- package/dist/text.css-mistica.js +13 -13
- package/dist/theme-context.css-mistica.js +2 -2
- package/dist/timeline.css-mistica.js +18 -18
- package/dist/timer.css-mistica.js +13 -13
- package/dist/tooltip.css-mistica.js +12 -12
- package/dist/touchable.css-mistica.js +5 -5
- package/dist/utils/aspect-ratio-support.css-mistica.js +7 -7
- package/dist/video.css-mistica.js +2 -2
- package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +3 -3
- package/dist-es/accordion.css-mistica.js +7 -7
- package/dist-es/align.css-mistica.js +2 -2
- package/dist-es/autocomplete.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/box.css-mistica.js +15 -15
- package/dist-es/boxed.css-mistica.js +25 -25
- package/dist-es/button-group.css-mistica.js +2 -2
- package/dist-es/button-layout.css-mistica.js +16 -16
- package/dist-es/button.css-mistica.js +38 -38
- package/dist-es/callout.css-mistica.js +12 -12
- package/dist-es/card-internal.css-mistica.js +20 -20
- package/dist-es/carousel.css-mistica.js +10 -10
- package/dist-es/checkbox.css-mistica.js +14 -14
- package/dist-es/chip.css-mistica.js +17 -17
- package/dist-es/circle.css-mistica.js +2 -2
- package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
- package/dist-es/community/ai-card.css-mistica.js +4 -0
- package/dist-es/community/ai-card.js +257 -0
- package/dist-es/community/blocks.css-mistica.js +2 -2
- package/dist-es/community/example-component.css-mistica.js +2 -2
- package/dist-es/community/index.js +5 -4
- package/dist-es/counter.css-mistica.js +2 -2
- package/dist-es/cover-hero.css-mistica.js +4 -4
- package/dist-es/credit-card-number-field.css-mistica.js +4 -4
- package/dist-es/date-field.css-mistica.js +1 -1
- package/dist-es/date-time-picker.css-mistica.js +2 -2
- package/dist-es/dialog.css-mistica.js +5 -5
- package/dist-es/divider.css-mistica.js +5 -5
- package/dist-es/double-field.css-mistica.js +4 -4
- package/dist-es/drawer.css-mistica.js +2 -2
- package/dist-es/empty-state-card.css-mistica.js +2 -2
- package/dist-es/empty-state.css-mistica.js +7 -7
- package/dist-es/fade-in.css-mistica.js +1 -1
- package/dist-es/feedback.css-mistica.js +2 -2
- package/dist-es/file-upload.css-mistica.js +8 -8
- package/dist-es/fixed-footer-layout.css-mistica.js +4 -4
- package/dist-es/form.css-mistica.js +2 -2
- package/dist-es/generated/mistica-icons/icon-artificial-intelligence-filled.js +12 -12
- package/dist-es/generated/mistica-icons/icon-artificial-intelligence-light.js +15 -15
- package/dist-es/generated/mistica-icons/icon-artificial-intelligence-regular.js +17 -17
- package/dist-es/grid-layout.css-mistica.js +4 -4
- package/dist-es/grid.css-mistica.js +127 -127
- package/dist-es/header.css-mistica.js +2 -2
- package/dist-es/hero.css-mistica.js +4 -4
- package/dist-es/horizontal-scroll.css-mistica.js +2 -2
- package/dist-es/icon-button.css-mistica.js +56 -56
- package/dist-es/icons/icon-chevron.css-mistica.js +4 -4
- package/dist-es/icons/icon-error.css-mistica.js +2 -2
- package/dist-es/image.css-mistica.js +4 -4
- package/dist-es/index.js +2183 -2182
- package/dist-es/inline.css-mistica.js +10 -10
- package/dist-es/list.css-mistica.js +2 -2
- package/dist-es/loading-bar.css-mistica.js +2 -2
- package/dist-es/loading-screen.css-mistica.js +5 -5
- package/dist-es/logo.css-mistica.js +7 -7
- package/dist-es/menu.css-mistica.js +15 -15
- package/dist-es/menu.js +186 -179
- package/dist-es/mosaic.css-mistica.js +2 -2
- package/dist-es/navigation-bar.css-mistica.js +20 -20
- package/dist-es/navigation-breadcrumbs.css-mistica.js +2 -2
- package/dist-es/package-version.js +2 -2
- package/dist-es/pin-field.css-mistica.js +2 -2
- package/dist-es/popover.css-mistica.js +2 -2
- package/dist-es/progress-bar.css-mistica.js +8 -8
- package/dist-es/radio-button.css-mistica.js +25 -25
- package/dist-es/rating.css-mistica.js +4 -4
- package/dist-es/responsive-layout.css-mistica.js +7 -7
- package/dist-es/screen-reader-only.css-mistica.js +2 -2
- package/dist-es/select.css-mistica.js +20 -20
- package/dist-es/sheet-action-row.css-mistica.js +2 -2
- package/dist-es/sheet-common.css-mistica.js +2 -2
- package/dist-es/sheet-info.css-mistica.js +2 -2
- package/dist-es/skeletons.css-mistica.js +8 -8
- package/dist-es/skins/skin-contract.css-mistica.js +686 -686
- package/dist-es/skip-link.css-mistica.js +2 -2
- package/dist-es/slider.css-mistica.js +20 -20
- package/dist-es/snackbar.css-mistica.js +5 -5
- package/dist-es/spinner.css-mistica.js +2 -2
- package/dist-es/square.css-mistica.js +2 -2
- package/dist-es/stack.css-mistica.js +7 -7
- package/dist-es/stacking-group.css-mistica.js +2 -2
- package/dist-es/stepper.css-mistica.js +4 -4
- package/dist-es/style.css +1 -1
- package/dist-es/switch-component.css-mistica.js +41 -41
- package/dist-es/table.css-mistica.js +11 -11
- package/dist-es/tabs.css-mistica.js +21 -21
- package/dist-es/tag.css-mistica.js +2 -2
- package/dist-es/text-field-base.css-mistica.js +17 -17
- package/dist-es/text-field-components.css-mistica.js +4 -4
- package/dist-es/text-link.css-mistica.js +9 -9
- package/dist-es/text.css-mistica.js +8 -8
- package/dist-es/theme-context.css-mistica.js +2 -2
- package/dist-es/timeline.css-mistica.js +11 -11
- package/dist-es/timer.css-mistica.js +7 -7
- package/dist-es/tooltip.css-mistica.js +3 -3
- package/dist-es/touchable.css-mistica.js +2 -2
- package/dist-es/utils/aspect-ratio-support.css-mistica.js +4 -4
- package/dist-es/video.css-mistica.js +2 -2
- package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +2 -2
- package/doc/components.md +0 -19
- package/doc/layout.md +1 -20
- package/doc/llms.md +0 -7
- package/doc/patterns.md +17 -6
- package/package.json +1 -1
- package/src/community/__stories__/ai-card-story.tsx +101 -0
- package/src/community/ai-card.css.ts +135 -0
- package/src/community/ai-card.tsx +231 -0
- package/src/community/index.tsx +1 -0
- package/src/index.tsx +1 -0
- package/src/menu.css.ts +6 -0
- package/src/menu.tsx +19 -8
- package/src/package-version.tsx +1 -1
- package/doc/figma-mcp.md +0 -136
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/* empty css */ var a = {
|
|
2
|
-
space: "var(--
|
|
3
|
-
spaceMobile: "var(--
|
|
4
|
-
spaceTablet: "var(--
|
|
5
|
-
spaceDesktop: "var(--
|
|
6
|
-
verticalSpace: "var(--
|
|
7
|
-
verticalSpaceMobile: "var(--
|
|
8
|
-
verticalSpaceTablet: "var(--
|
|
9
|
-
verticalSpaceDesktop: "var(--
|
|
10
|
-
},
|
|
11
|
-
export {
|
|
2
|
+
space: "var(--v16_62_kkfbnv0)",
|
|
3
|
+
spaceMobile: "var(--v16_62_kkfbnv1)",
|
|
4
|
+
spaceTablet: "var(--v16_62_kkfbnv2)",
|
|
5
|
+
spaceDesktop: "var(--v16_62_kkfbnv3)",
|
|
6
|
+
verticalSpace: "var(--v16_62_kkfbnv4)",
|
|
7
|
+
verticalSpaceMobile: "var(--v16_62_kkfbnv5)",
|
|
8
|
+
verticalSpaceTablet: "var(--v16_62_kkfbnv6)",
|
|
9
|
+
verticalSpaceDesktop: "var(--v16_62_kkfbnv7)"
|
|
10
|
+
}, k = "v16_62_kkfbnv8", _ = "v16_62_kkfbnv9", r = "v16_62_kkfbnva", e = "v16_62_kkfbnvb", n = "v16_62_kkfbnvc", b = "v16_62_kkfbnvd", f = "v16_62_kkfbnve";
|
|
11
|
+
export { r as fullWidth, _ as inline, k as marginInline, n as noFullWidth, b as stringSpace, f as stringSpaceWithWrap, a as vars, e as wrap };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/* empty css */ /* empty css */ var
|
|
2
|
-
export {
|
|
1
|
+
/* empty css */ /* empty css */ var n = "v16_62_2buj9g0", f = "v16_62_2buj9g1 v16_62_1y2v1nfqr", y = "v16_62_2buj9g2", r = "v16_62_2buj9g3", u = "v16_62_2buj9g4", a = "v16_62_2buj9g5 v16_62_1y2v1nft7", g = "v16_62_2buj9g7 v16_62_2buj9g6 v16_62_1y2v1nffx v16_62_1y2v1nfh6 v16_62_1y2v1nfif v16_62_1y2v1nfjo v16_62_1y2v1nfqr v16_62_1y2v1nfsm v16_62_1y2v1nffw v16_62_1y2v1nfq6 v16_62_1y2v1nfr8 v16_62_1y2v1nfpy", j = "v16_62_2buj9g8 v16_62_1y2v1nfiu v16_62_1y2v1nfk3", b = "v16_62_2buj9g9 v16_62_1y2v1nfgc v16_62_1y2v1nfhl v16_62_1y2v1nfq4 v16_62_1y2v1nfqr v16_62_1y2v1nfsh", t = "v16_62_2buj9ga v16_62_1y2v1nfk3", i = "v16_62_2buj9gb v16_62_1y2v1nfq4 v16_62_1y2v1nfqm v16_62_1y2v1nfqo", o = "v16_62_2buj9gc v16_62_1y2v1nfq4 v16_62_1y2v1nfqa v16_62_1y2v1nfqq", q = "v16_62_2buj9gd v16_62_1y2v1nfq4 v16_62_1y2v1nfqj", e = "v16_62_2buj9gf v16_62_2buj9gd v16_62_1y2v1nfq4 v16_62_1y2v1nfqj v16_62_2buj9ge v16_62_1y2v1nfqd v16_62_1y2v1nfru v16_62_1y2v1nfr8 v16_62_1y2v1nfqm", d = "v16_62_2buj9gg", l = "v16_62_2buj9gh", h = "v16_62_2buj9gi", c = "v16_62_2buj9gj v16_62_2buj9gd v16_62_1y2v1nfq4 v16_62_1y2v1nfqj", s = "v16_62_2buj9gk v16_62_1y2v1nfq4 v16_62_1y2v1nfq9 v16_62_1y2v1nfr8", m = "v16_62_2buj9gn v16_62_2buj9gl v16_62_1y2v1nffx v16_62_1y2v1nfh6 v16_62_1y2v1nfif v16_62_1y2v1nfjo v16_62_1y2v1nfsm v16_62_1y2v1nffw v16_62_2buj9gm v16_62_1y2v1nfiu v16_62_1y2v1nfk3 v16_62_1y2v1nfq6 v16_62_1y2v1nfqp", k = "v16_62_2buj9gp v16_62_2buj9go v16_62_1y2v1nfq4", w = "v16_62_2buj9gr v16_62_2buj9gl v16_62_1y2v1nffx v16_62_1y2v1nfh6 v16_62_1y2v1nfif v16_62_1y2v1nfjo v16_62_1y2v1nfsm v16_62_1y2v1nffw v16_62_2buj9gq v16_62_1y2v1nfiu v16_62_1y2v1nfk3 v16_62_1y2v1nfq4 v16_62_1y2v1nfqj v16_62_1y2v1nfqo v16_62_1y2v1nfqs v16_62_1y2v1nfr8", p = "v16_62_2buj9gs", C = "v16_62_2buj9gt", x = "v16_62_2buj9gu", A = "v16_62_2buj9gv", B = "v16_62_2buj9gw";
|
|
2
|
+
export { i as asset, t as assetContainer, e as badge, y as boxed, q as center, b as content, c as detail, h as detailRight, n as disabled, s as dualActionContainer, k as dualActionDivider, m as dualActionLeft, w as dualActionRight, A as li, B as liContent, C as liWithCustomIcon, x as liWithoutMarker, a as pointer, d as rightContent, l as rightRestrictedWidth, f as row, o as rowBody, g as rowContent, j as rowContentPadding, r as touchableBackground, u as touchableBackgroundBrand, p as ul };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/* empty css */ /* empty css */ var
|
|
2
|
-
export {
|
|
1
|
+
/* empty css */ /* empty css */ var n = "v16_62_1num3qg2 v16_62_1num3qg1 v16_62_1y2v1nfq0 v16_62_1y2v1nfte v16_62_1y2v1nftt v16_62_1y2v1nfu8", r = "v16_62_1num3qg3", y = "v16_62_1num3qg4 v16_62_1y2v1nfqr v16_62_1y2v1nft8 v16_62_1y2v1nfpy v16_62_1y2v1nfbx v16_62_1y2v1nfrb", f = "v16_62_1num3qg7 v16_62_1num3qg6 v16_62_1y2v1nfpz v16_62_1y2v1nfqr v16_62_1y2v1nfr8";
|
|
2
|
+
export { r as hidden, n as portal, f as progress, y as progressContainer };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* empty css */ /* empty css */ var
|
|
2
|
-
default: "
|
|
3
|
-
brand: "
|
|
4
|
-
},
|
|
5
|
-
export {
|
|
1
|
+
/* empty css */ /* empty css */ var e = "v16_62_flke8b1 v16_62_flke8b0 v16_62_1y2v1nfq4 v16_62_1y2v1nfqa v16_62_1y2v1nfqj", n = 500, a = "v16_62_flke8b3", r = {
|
|
2
|
+
default: "v16_62_flke8b4",
|
|
3
|
+
brand: "v16_62_flke8b5"
|
|
4
|
+
}, f = "v16_62_flke8b6", l = "v16_62_flke8b7 v16_62_1y2v1nfqq v16_62_1y2v1nfq4 v16_62_1y2v1nfqa v16_62_1y2v1nfqj v16_62_1y2v1nfqd", d = "v16_62_flke8b9 v16_62_flke8b8 v16_62_1y2v1nfgi", k = "v16_62_flke8bb", o = "v16_62_flke8bc", b = "v16_62_flke8be", i = "v16_62_flke8bf";
|
|
5
|
+
export { n as inOutAnimationMs, e as loadingScreen, l as loadingScreenChildren, d as loadingScreenText, k as loadingScreenTextAnimated, o as loadingScreenTextAnimatedOut, i as logo, b as pulseLogo, r as screenBackground, a as screenBackgroundAnimated, f as screenBackgroundFadeOut };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
/* empty css */ var
|
|
2
|
-
size: "var(--
|
|
3
|
-
sizeMobile: "var(--
|
|
4
|
-
sizeTablet: "var(--
|
|
5
|
-
sizeDesktop: "var(--
|
|
6
|
-
},
|
|
7
|
-
export {
|
|
1
|
+
/* empty css */ var _ = {
|
|
2
|
+
size: "var(--v16_62_140ft6x0)",
|
|
3
|
+
sizeMobile: "var(--v16_62_140ft6x1)",
|
|
4
|
+
sizeTablet: "var(--v16_62_140ft6x2)",
|
|
5
|
+
sizeDesktop: "var(--v16_62_140ft6x3)"
|
|
6
|
+
}, r = "v16_62_140ft6x4", t = "v16_62_140ft6x5";
|
|
7
|
+
export { t as logoContainer, r as svg, _ as vars };
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
/* empty css */ /* empty css */ var
|
|
2
|
-
top: "var(--
|
|
3
|
-
bottom: "var(--
|
|
4
|
-
left: "var(--
|
|
5
|
-
right: "var(--
|
|
6
|
-
width: "var(--
|
|
7
|
-
maxHeight: "var(--
|
|
8
|
-
transformOrigin: "var(--
|
|
9
|
-
},
|
|
10
|
-
enter: "
|
|
11
|
-
enterActive: "
|
|
12
|
-
exit: "
|
|
13
|
-
exitActive: "
|
|
14
|
-
},
|
|
15
|
-
export {
|
|
1
|
+
/* empty css */ /* empty css */ var k = {
|
|
2
|
+
top: "var(--v16_62_2k0k3u0)",
|
|
3
|
+
bottom: "var(--v16_62_2k0k3u1)",
|
|
4
|
+
left: "var(--v16_62_2k0k3u2)",
|
|
5
|
+
right: "var(--v16_62_2k0k3u4)",
|
|
6
|
+
width: "var(--v16_62_2k0k3u3)",
|
|
7
|
+
maxHeight: "var(--v16_62_2k0k3u5)",
|
|
8
|
+
transformOrigin: "var(--v16_62_2k0k3u6)"
|
|
9
|
+
}, e = "v16_62_2k0k3u8 v16_62_2k0k3u7 v16_62_1y2v1nfg6 v16_62_1y2v1nfhf v16_62_1y2v1nfio v16_62_1y2v1nfjx v16_62_1y2v1nf83 v16_62_1y2v1nfsy v16_62_1y2v1nfq4 v16_62_1y2v1nfqa v16_62_1y2v1nfpz", n = {
|
|
10
|
+
enter: "v16_62_2k0k3u9",
|
|
11
|
+
enterActive: "v16_62_2k0k3ua",
|
|
12
|
+
exit: "v16_62_2k0k3ub",
|
|
13
|
+
exitActive: "v16_62_2k0k3uc"
|
|
14
|
+
}, r = "v16_62_2k0k3ud", t = "v16_62_2k0k3ue", a = "v16_62_2k0k3uf", u = "v16_62_2k0k3ug", i = "v16_62_2k0k3ui v16_62_2k0k3uh v16_62_1y2v1nfg6 v16_62_1y2v1nfhf", m = "v16_62_2k0k3uj", f = "v16_62_2k0k3uk", o = "v16_62_2k0k3ul";
|
|
15
|
+
export { o as iconContainer, m as itemContent, f as itemTextContent, e as menuContainer, r as menuItem, u as menuItemDisabled, a as menuItemEnabled, t as menuItemHovered, i as menuSectionDivider, n as menuTransitionClasses, k as vars };
|
package/dist-es/menu.js
CHANGED
|
@@ -51,283 +51,290 @@ function _object_spread_props(target, source) {
|
|
|
51
51
|
}
|
|
52
52
|
return target;
|
|
53
53
|
}
|
|
54
|
-
import { jsxs as
|
|
55
|
-
import * as
|
|
56
|
-
import
|
|
57
|
-
import { TAB as
|
|
58
|
-
import { getPrefixedDataAttributes as
|
|
59
|
-
import
|
|
60
|
-
import { menuTransitionClasses as
|
|
54
|
+
import { jsxs as O, jsx as e, Fragment as K } from "react/jsx-runtime";
|
|
55
|
+
import * as n from "react";
|
|
56
|
+
import te from "classnames";
|
|
57
|
+
import { TAB as ne, ENTER as j, SPACE as X, ESC as oe, UP as re, LEFT as se, DOWN as Y, RIGHT as ie } from "./utils/keys.js";
|
|
58
|
+
import { getPrefixedDataAttributes as ce, cancelEvent as E } from "./utils/dom.js";
|
|
59
|
+
import ae from "./overlay.js";
|
|
60
|
+
import { menuTransitionClasses as le, menuContainer as me, vars as I, menuItem as ue, menuItemHovered as de, menuItemDisabled as fe, menuItemEnabled as pe, menuSectionDivider as he, itemContent as q, iconContainer as V, itemTextContent as ge } from "./menu.css-mistica.js";
|
|
61
61
|
import { useWindowSize as xe } from "./hooks.js";
|
|
62
62
|
import { Portal as be } from "./portal.js";
|
|
63
|
-
import
|
|
63
|
+
import L from "./box.js";
|
|
64
64
|
import Ie from "./inline.js";
|
|
65
65
|
import ve from "./touchable.js";
|
|
66
|
-
import { Text3 as
|
|
67
|
-
import { vars as
|
|
68
|
-
import
|
|
69
|
-
import
|
|
70
|
-
import { CSSTransition as
|
|
71
|
-
import { combineRefs as
|
|
72
|
-
import { applyCssVars as
|
|
73
|
-
import { isRunningAcceptanceTest as
|
|
74
|
-
const
|
|
66
|
+
import { Text3 as Me, Text2 as Te } from "./text.js";
|
|
67
|
+
import { vars as $ } from "./skins/skin-contract.css-mistica.js";
|
|
68
|
+
import Oe from "./divider.js";
|
|
69
|
+
import Se from "./checkbox.js";
|
|
70
|
+
import { CSSTransition as Ce } from "react-transition-group";
|
|
71
|
+
import { combineRefs as Ee } from "./utils/common.js";
|
|
72
|
+
import { applyCssVars as ke } from "./utils/css.js";
|
|
73
|
+
import { isRunningAcceptanceTest as Ne } from "./utils/platform.js";
|
|
74
|
+
const Ae = 120, Z = /*#__PURE__*/ n.createContext({
|
|
75
75
|
focusedItem: null,
|
|
76
76
|
isMenuOpen: !1,
|
|
77
77
|
setFocusedItem: ()=>{},
|
|
78
78
|
closeMenu: ()=>{}
|
|
79
|
-
}),
|
|
80
|
-
if (!
|
|
81
|
-
const
|
|
82
|
-
return
|
|
83
|
-
},
|
|
84
|
-
let { label:
|
|
85
|
-
const { focusedItem:
|
|
79
|
+
}), Re = ()=>n.useContext(Z), H = (r)=>r ? Array.from(r.querySelectorAll("[role=menuitem],[role=menuitemcheckbox]")) : [], Fe = (r, d)=>{
|
|
80
|
+
if (!d) return null;
|
|
81
|
+
const f = H(r).indexOf(d);
|
|
82
|
+
return f < 0 ? null : f;
|
|
83
|
+
}, Je = (param)=>{
|
|
84
|
+
let { label: r, Icon: d, destructive: f, disabled: a, onPress: k, controlType: o, checked: p, description: l, dataAttributes: N } = param;
|
|
85
|
+
const { focusedItem: s, setFocusedItem: A, closeMenu: m, isMenuOpen: g } = Re(), v = n.useRef(null), x = f ? $.colors.textLinkDanger : $.colors.neutralHigh, S = v === null || v === void 0 ? void 0 : v.current, i = (S === null || S === void 0 ? void 0 : S.closest("[role=menu]")) || null, u = Fe(i, S), b = _object_spread({
|
|
86
86
|
testid: "MenuItem"
|
|
87
|
-
},
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
87
|
+
}, N), R = (M)=>/* @__PURE__ */ O("div", {
|
|
88
|
+
id: M,
|
|
89
|
+
className: ge,
|
|
90
|
+
children: [
|
|
91
|
+
/* @__PURE__ */ e(Me, {
|
|
92
|
+
regular: !0,
|
|
93
|
+
color: x,
|
|
94
|
+
children: r
|
|
95
|
+
}),
|
|
96
|
+
l && /* @__PURE__ */ e(Te, {
|
|
97
|
+
regular: !0,
|
|
98
|
+
color: $.colors.textSecondary,
|
|
99
|
+
children: l
|
|
100
|
+
})
|
|
101
|
+
]
|
|
102
|
+
}), P = ()=>o === "checkbox" ? /* @__PURE__ */ e(Se, {
|
|
103
|
+
ref: v,
|
|
104
|
+
name: r,
|
|
105
|
+
checked: p,
|
|
91
106
|
onChange: ()=>{
|
|
92
|
-
|
|
107
|
+
g && u !== null && (k(u), m());
|
|
93
108
|
},
|
|
94
109
|
disabled: a,
|
|
95
110
|
role: "menuitemcheckbox",
|
|
96
|
-
dataAttributes:
|
|
111
|
+
dataAttributes: b,
|
|
97
112
|
render: (param)=>{
|
|
98
|
-
let { controlElement:
|
|
99
|
-
return /* @__PURE__ */ e(
|
|
113
|
+
let { controlElement: M, labelId: F } = param;
|
|
114
|
+
return /* @__PURE__ */ e(L, {
|
|
100
115
|
paddingX: 8,
|
|
101
116
|
paddingY: 12,
|
|
102
|
-
children: /* @__PURE__ */
|
|
117
|
+
children: /* @__PURE__ */ O(Ie, {
|
|
103
118
|
space: "between",
|
|
104
119
|
alignItems: "center",
|
|
105
120
|
children: [
|
|
106
|
-
/* @__PURE__ */
|
|
107
|
-
className:
|
|
121
|
+
/* @__PURE__ */ O("div", {
|
|
122
|
+
className: q,
|
|
108
123
|
children: [
|
|
109
|
-
|
|
110
|
-
className:
|
|
111
|
-
children: /* @__PURE__ */ e(
|
|
124
|
+
d && /* @__PURE__ */ e("div", {
|
|
125
|
+
className: V,
|
|
126
|
+
children: /* @__PURE__ */ e(d, {
|
|
112
127
|
size: 24,
|
|
113
|
-
color:
|
|
128
|
+
color: x
|
|
114
129
|
})
|
|
115
130
|
}),
|
|
116
|
-
|
|
117
|
-
regular: !0,
|
|
118
|
-
color: h,
|
|
119
|
-
children: s
|
|
120
|
-
})
|
|
131
|
+
R(F)
|
|
121
132
|
]
|
|
122
133
|
}),
|
|
123
|
-
/* @__PURE__ */ e(
|
|
134
|
+
/* @__PURE__ */ e(L, {
|
|
124
135
|
paddingLeft: 16,
|
|
125
|
-
children:
|
|
136
|
+
children: M
|
|
126
137
|
})
|
|
127
138
|
]
|
|
128
139
|
})
|
|
129
140
|
});
|
|
130
141
|
}
|
|
131
142
|
}) : /* @__PURE__ */ e(ve, {
|
|
132
|
-
ref:
|
|
143
|
+
ref: v,
|
|
133
144
|
onPress: ()=>{
|
|
134
|
-
|
|
145
|
+
g && u !== null && (k(u), m());
|
|
135
146
|
},
|
|
136
147
|
disabled: a,
|
|
137
148
|
role: "menuitem",
|
|
138
|
-
dataAttributes:
|
|
139
|
-
children: /* @__PURE__ */ e(
|
|
149
|
+
dataAttributes: b,
|
|
150
|
+
children: /* @__PURE__ */ e(L, {
|
|
140
151
|
paddingX: 8,
|
|
141
152
|
paddingY: 12,
|
|
142
|
-
children: /* @__PURE__ */
|
|
143
|
-
className:
|
|
153
|
+
children: /* @__PURE__ */ O("div", {
|
|
154
|
+
className: q,
|
|
144
155
|
children: [
|
|
145
|
-
|
|
146
|
-
className:
|
|
147
|
-
children: /* @__PURE__ */ e(
|
|
156
|
+
d && /* @__PURE__ */ e("div", {
|
|
157
|
+
className: V,
|
|
158
|
+
children: /* @__PURE__ */ e(d, {
|
|
148
159
|
size: 24,
|
|
149
|
-
color:
|
|
160
|
+
color: x
|
|
150
161
|
})
|
|
151
162
|
}),
|
|
152
|
-
|
|
153
|
-
regular: !0,
|
|
154
|
-
color: h,
|
|
155
|
-
children: s
|
|
156
|
-
})
|
|
163
|
+
R()
|
|
157
164
|
]
|
|
158
165
|
})
|
|
159
166
|
})
|
|
160
167
|
});
|
|
161
168
|
return /* @__PURE__ */ e("div", {
|
|
162
|
-
className:
|
|
163
|
-
[
|
|
164
|
-
[
|
|
165
|
-
[de]: !a &&
|
|
169
|
+
className: te(ue, {
|
|
170
|
+
[pe]: !a,
|
|
171
|
+
[fe]: a,
|
|
172
|
+
[de]: !a && u !== null && s === u
|
|
166
173
|
}),
|
|
167
|
-
onMouseMove: ()=>
|
|
168
|
-
onMouseLeave: ()=>
|
|
169
|
-
children:
|
|
174
|
+
onMouseMove: ()=>A(a ? null : u),
|
|
175
|
+
onMouseLeave: ()=>A(null),
|
|
176
|
+
children: P()
|
|
170
177
|
});
|
|
171
|
-
},
|
|
172
|
-
let { children:
|
|
173
|
-
return
|
|
178
|
+
}, Qe = (param)=>{
|
|
179
|
+
let { children: r } = param;
|
|
180
|
+
return r ? /* @__PURE__ */ O(K, {
|
|
174
181
|
children: [
|
|
175
|
-
|
|
182
|
+
r,
|
|
176
183
|
/* @__PURE__ */ e("div", {
|
|
177
184
|
className: he,
|
|
178
|
-
children: /* @__PURE__ */ e(
|
|
185
|
+
children: /* @__PURE__ */ e(Oe, {})
|
|
179
186
|
})
|
|
180
187
|
]
|
|
181
|
-
}) : /* @__PURE__ */ e(
|
|
182
|
-
}, J = 12, Q = 8,
|
|
183
|
-
let { renderTarget:
|
|
184
|
-
const [
|
|
185
|
-
|
|
186
|
-
const c =
|
|
187
|
-
if (!
|
|
188
|
-
const { top:
|
|
189
|
-
|
|
190
|
-
left:
|
|
191
|
-
right:
|
|
192
|
-
top: `${
|
|
188
|
+
}) : /* @__PURE__ */ e(K, {});
|
|
189
|
+
}, J = 12, Q = 8, Ze = (param)=>{
|
|
190
|
+
let { renderTarget: r, renderMenu: d, width: f, position: a = "left", dataAttributes: k } = param;
|
|
191
|
+
const [o, p] = n.useState(!1), [l, N] = n.useState(null), [s, A] = n.useState(null), [m, g] = n.useState(null), [v, x] = n.useState(!1), S = n.useRef(null), [i, u] = n.useState(null), b = xe();
|
|
192
|
+
n.useEffect(()=>{
|
|
193
|
+
const c = l === null || l === void 0 ? void 0 : l.getBoundingClientRect();
|
|
194
|
+
if (!s || !c || !o) return;
|
|
195
|
+
const { top: t, right: C, left: h, bottom: y } = c, T = s.scrollHeight, D = a === "left" ? h : void 0, B = a === "right" ? b.width - C : void 0, z = t - Q, U = y + Q, w = b.height - U - J, _ = z - J, W = w > T, G = _ > T, ee = W || !G && w > _;
|
|
196
|
+
u(ee ? {
|
|
197
|
+
left: D,
|
|
198
|
+
right: B,
|
|
199
|
+
top: `${U}px`,
|
|
193
200
|
bottom: "auto",
|
|
194
|
-
maxHeight:
|
|
201
|
+
maxHeight: W ? void 0 : w,
|
|
195
202
|
transformOrigin: "center top"
|
|
196
203
|
} : {
|
|
197
|
-
left:
|
|
198
|
-
right:
|
|
204
|
+
left: D,
|
|
205
|
+
right: B,
|
|
199
206
|
top: "auto",
|
|
200
|
-
bottom: `${
|
|
201
|
-
maxHeight:
|
|
207
|
+
bottom: `${b.height - z}px`,
|
|
208
|
+
maxHeight: G ? void 0 : _,
|
|
202
209
|
transformOrigin: "center bottom"
|
|
203
210
|
});
|
|
204
211
|
}, [
|
|
205
212
|
a,
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
213
|
+
o,
|
|
214
|
+
s,
|
|
215
|
+
l,
|
|
216
|
+
f,
|
|
217
|
+
b
|
|
211
218
|
]);
|
|
212
|
-
const
|
|
213
|
-
ref:
|
|
219
|
+
const R = n.useMemo(()=>({
|
|
220
|
+
ref: N,
|
|
214
221
|
onPress: ()=>{
|
|
215
|
-
|
|
222
|
+
p(!o);
|
|
216
223
|
}
|
|
217
224
|
}), [
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
]),
|
|
221
|
-
ref:
|
|
222
|
-
className:
|
|
223
|
-
close: ()=>
|
|
224
|
-
},
|
|
225
|
-
const
|
|
226
|
-
|
|
225
|
+
N,
|
|
226
|
+
o
|
|
227
|
+
]), P = {
|
|
228
|
+
ref: Ee(A, S),
|
|
229
|
+
className: me,
|
|
230
|
+
close: ()=>p(!1)
|
|
231
|
+
}, M = n.useCallback(()=>{
|
|
232
|
+
const t = H(s).findIndex((C)=>!C.getAttribute("aria-disabled"));
|
|
233
|
+
g(t < 0 ? null : t);
|
|
227
234
|
}, [
|
|
228
|
-
|
|
229
|
-
]),
|
|
230
|
-
var
|
|
231
|
-
const
|
|
232
|
-
c &&
|
|
233
|
-
const
|
|
234
|
-
let
|
|
235
|
-
|
|
236
|
-
const
|
|
237
|
-
|
|
235
|
+
s
|
|
236
|
+
]), F = n.useCallback((c)=>{
|
|
237
|
+
var _t_h;
|
|
238
|
+
const t = H(s);
|
|
239
|
+
c && t.reverse();
|
|
240
|
+
const C = m === null ? -1 : c ? t.length - 1 - m : m;
|
|
241
|
+
let h = t.findIndex((T, D)=>!T.getAttribute("aria-disabled") && D > C);
|
|
242
|
+
h === -1 && (h = t.findIndex((T)=>!T.getAttribute("aria-disabled")));
|
|
243
|
+
const y = c && h !== -1 ? t.length - 1 - h : h;
|
|
244
|
+
g(y < 0 ? null : y), (_t_h = t[h]) === null || _t_h === void 0 ? void 0 : _t_h.focus();
|
|
238
245
|
}, [
|
|
239
|
-
|
|
240
|
-
|
|
246
|
+
m,
|
|
247
|
+
s
|
|
241
248
|
]);
|
|
242
|
-
return
|
|
243
|
-
|
|
249
|
+
return n.useEffect(()=>{
|
|
250
|
+
o ? v && s && (M(), x(!1)) : g(null);
|
|
244
251
|
}, [
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
]),
|
|
250
|
-
const c = (
|
|
251
|
-
if (
|
|
252
|
-
case ce:
|
|
253
|
-
case j:
|
|
254
|
-
T(n), _();
|
|
255
|
-
break;
|
|
252
|
+
o,
|
|
253
|
+
M,
|
|
254
|
+
v,
|
|
255
|
+
s
|
|
256
|
+
]), n.useEffect(()=>{
|
|
257
|
+
const c = (t)=>{
|
|
258
|
+
if (o) switch(t.key){
|
|
256
259
|
case ie:
|
|
257
|
-
case
|
|
258
|
-
|
|
260
|
+
case Y:
|
|
261
|
+
E(t), F();
|
|
259
262
|
break;
|
|
263
|
+
case se:
|
|
260
264
|
case re:
|
|
261
|
-
|
|
262
|
-
break;
|
|
263
|
-
case K:
|
|
264
|
-
case G:
|
|
265
|
-
T(n), l !== null && F(i)[l].click();
|
|
265
|
+
E(t), F(!0);
|
|
266
266
|
break;
|
|
267
267
|
case oe:
|
|
268
|
-
|
|
268
|
+
p(!1);
|
|
269
269
|
break;
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
270
|
+
case X:
|
|
271
|
+
case j:
|
|
272
|
+
E(t), m !== null && H(s)[m].click();
|
|
273
|
+
break;
|
|
274
|
+
case ne:
|
|
275
|
+
E(t);
|
|
275
276
|
break;
|
|
277
|
+
}
|
|
278
|
+
else switch(t.key){
|
|
276
279
|
case j:
|
|
277
|
-
|
|
280
|
+
case X:
|
|
281
|
+
x(!0);
|
|
282
|
+
break;
|
|
283
|
+
case Y:
|
|
284
|
+
l === document.activeElement && (x(!0), p(!0));
|
|
278
285
|
break;
|
|
279
286
|
}
|
|
280
287
|
};
|
|
281
288
|
return document.addEventListener("keydown", c, !1), ()=>{
|
|
282
289
|
document.removeEventListener("keydown", c, !1);
|
|
283
290
|
};
|
|
284
|
-
}),
|
|
285
|
-
|
|
291
|
+
}), n.useEffect(()=>{
|
|
292
|
+
l === null || l === void 0 ? void 0 : l.setAttribute("aria-haspopup", "menu"), l === null || l === void 0 ? void 0 : l.setAttribute("aria-expanded", String(o));
|
|
286
293
|
}, [
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
]), /* @__PURE__ */
|
|
294
|
+
l,
|
|
295
|
+
o
|
|
296
|
+
]), /* @__PURE__ */ O("div", _object_spread_props(_object_spread({}, ce(k, "Menu")), {
|
|
290
297
|
children: [
|
|
291
|
-
|
|
292
|
-
isMenuOpen:
|
|
298
|
+
r(_object_spread_props(_object_spread({}, R), {
|
|
299
|
+
isMenuOpen: o
|
|
293
300
|
})),
|
|
294
301
|
/* @__PURE__ */ e(be, {
|
|
295
|
-
children: /* @__PURE__ */ e(
|
|
296
|
-
in:
|
|
297
|
-
nodeRef:
|
|
298
|
-
timeout:
|
|
299
|
-
classNames:
|
|
302
|
+
children: /* @__PURE__ */ e(Ce, {
|
|
303
|
+
in: o,
|
|
304
|
+
nodeRef: S,
|
|
305
|
+
timeout: Ne() ? 0 : Ae,
|
|
306
|
+
classNames: le,
|
|
300
307
|
mountOnEnter: !0,
|
|
301
308
|
unmountOnExit: !0,
|
|
302
|
-
onExit: ()=>
|
|
303
|
-
children: /* @__PURE__ */ e(
|
|
309
|
+
onExit: ()=>l === null || l === void 0 ? void 0 : l.focus(),
|
|
310
|
+
children: /* @__PURE__ */ e(ae, {
|
|
304
311
|
onPress: (c)=>{
|
|
305
|
-
|
|
312
|
+
E(c), p(!1);
|
|
306
313
|
},
|
|
307
314
|
disableScroll: !0,
|
|
308
315
|
children: /* @__PURE__ */ e("div", {
|
|
309
|
-
style: _object_spread({},
|
|
310
|
-
[
|
|
311
|
-
[
|
|
312
|
-
[
|
|
313
|
-
},
|
|
314
|
-
[
|
|
315
|
-
},
|
|
316
|
-
[
|
|
317
|
-
},
|
|
318
|
-
[
|
|
319
|
-
},
|
|
320
|
-
[
|
|
316
|
+
style: _object_spread({}, ke(_object_spread({}, i ? _object_spread({
|
|
317
|
+
[I.top]: i.top,
|
|
318
|
+
[I.bottom]: i.bottom,
|
|
319
|
+
[I.transformOrigin]: i.transformOrigin
|
|
320
|
+
}, i.left !== void 0 && {
|
|
321
|
+
[I.left]: `${i.left}px`
|
|
322
|
+
}, i.right !== void 0 && {
|
|
323
|
+
[I.right]: `${i.right}px`
|
|
324
|
+
}, i.maxHeight !== void 0 && {
|
|
325
|
+
[I.maxHeight]: `${i.maxHeight}px`
|
|
326
|
+
}, f !== void 0 && {
|
|
327
|
+
[I.width]: f ? `${f}px` : ""
|
|
321
328
|
}) : {}))),
|
|
322
329
|
role: "menu",
|
|
323
330
|
children: /* @__PURE__ */ e(Z.Provider, {
|
|
324
331
|
value: {
|
|
325
|
-
isMenuOpen:
|
|
326
|
-
focusedItem:
|
|
327
|
-
setFocusedItem:
|
|
328
|
-
closeMenu: ()=>
|
|
332
|
+
isMenuOpen: o,
|
|
333
|
+
focusedItem: m,
|
|
334
|
+
setFocusedItem: g,
|
|
335
|
+
closeMenu: ()=>p(!1)
|
|
329
336
|
},
|
|
330
|
-
children:
|
|
337
|
+
children: d(P)
|
|
331
338
|
})
|
|
332
339
|
})
|
|
333
340
|
})
|
|
@@ -336,4 +343,4 @@ const ke = 120, Z = /*#__PURE__*/ o.createContext({
|
|
|
336
343
|
]
|
|
337
344
|
}));
|
|
338
345
|
};
|
|
339
|
-
export {
|
|
346
|
+
export { Ze as Menu, Je as MenuItem, Qe as MenuSection };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/* empty css */ var
|
|
2
|
-
export { a as fourItemsContainer,
|
|
1
|
+
/* empty css */ var r = "v16_62_1j2q6te0", t = "v16_62_1j2q6te1", a = "v16_62_1j2q6te2";
|
|
2
|
+
export { a as fourItemsContainer, t as singleItemRowContainer, r as squareContainer };
|