@12-apps/ui 6.24.1 → 6.24.3
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/NATIVE.md +1 -1
- package/dist/_internal/components/data-display/Alert/Alert.js +5 -3
- package/dist/_internal/components/data-display/Alert/Alert.metrics.js +1 -1
- package/dist/_internal/components/data-display/Alert/Alert.styles.js +2 -2
- package/dist/_internal/components/data-display/Banner/Banner.js +7 -2
- package/dist/_internal/components/data-display/Banner/Banner.styles.js +10 -1
- package/dist/_internal/components/data-display/CardKit/card-actions-context.js +4 -4
- package/dist/_internal/components/data-display/CardKit/use-remove-confirm.js +5 -5
- package/dist/_internal/components/data-display/DataViews/DataViewsGrid.js +6 -6
- package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js +11 -11
- package/dist/_internal/components/data-display/DataViews/data-views-display-panel.js +2 -2
- package/dist/_internal/components/data-display/DataViews/data-views-grid-parts.js +5 -5
- package/dist/_internal/components/data-display/DataViews/data-views-shell-toolbar.js +4 -4
- package/dist/_internal/components/data-display/DataViews/data-views-table-parts.js +4 -4
- package/dist/_internal/components/data-display/DataViews/data-views-toolbar.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-view-nav.js +1 -1
- package/dist/_internal/components/data-display/index.js +5 -5
- package/dist/_internal/components/index.js +5 -5
- package/dist/{chunk-7L6LAVJ7.js → chunk-4IVDVZZ2.js} +25 -11
- package/dist/chunk-4IVDVZZ2.js.map +1 -0
- package/dist/{chunk-U2YJCNRU.js → chunk-4T7TXRGM.js} +2 -2
- package/dist/{chunk-E27Y7FF2.js → chunk-57Z2ND3N.js} +9 -10
- package/dist/{chunk-E27Y7FF2.js.map → chunk-57Z2ND3N.js.map} +1 -1
- package/dist/{chunk-6RZDDUSM.js → chunk-7GKRZJWI.js} +2 -2
- package/dist/{chunk-2C47DEVU.js → chunk-JD4IVP22.js} +2 -2
- package/dist/{chunk-JQ45NDBS.js → chunk-JPV45AD6.js} +3 -3
- package/dist/{chunk-PRUSQQDT.js → chunk-KM5O4ICK.js} +2 -2
- package/dist/{chunk-2YEZONLX.js → chunk-M4LFDGI6.js} +30 -5
- package/dist/chunk-M4LFDGI6.js.map +1 -0
- package/dist/{chunk-TSYWI3NP.js → chunk-NXNNICH7.js} +2 -2
- package/dist/{chunk-2FDBR77W.js → chunk-O6AZDQJJ.js} +2 -2
- package/dist/chunk-O6AZDQJJ.js.map +1 -0
- package/dist/{chunk-XO753WHD.js → chunk-QX2PLXQA.js} +2 -2
- package/dist/{chunk-OAYX4XN7.js → chunk-SQNW22ZZ.js} +2 -2
- package/dist/{chunk-O3336DJ6.js → chunk-SYJMI2NP.js} +2 -2
- package/dist/{chunk-B2Y3BABA.js → chunk-TXKZEKJN.js} +6 -9
- package/dist/chunk-TXKZEKJN.js.map +1 -0
- package/dist/{chunk-QFVFHIHE.js → chunk-WNMYWQ7D.js} +98 -30
- package/dist/chunk-WNMYWQ7D.js.map +1 -0
- package/dist/data-display/Alert.js +3 -3
- package/dist/data-display/Banner.js +7 -2
- package/dist/data-display/CardKit.js +5 -5
- package/dist/data-display/DataViews.js +11 -11
- package/dist/native/data-display/Alert.js +2 -5
- package/dist/native/data-display/Alert.js.map +1 -1
- package/dist/types/components/data-display/Alert/Alert.d.ts +14 -0
- package/dist/types/components/data-display/Alert/Alert.d.ts.map +1 -1
- package/dist/types/components/data-display/Alert/Alert.metrics.d.ts +66 -23
- package/dist/types/components/data-display/Alert/Alert.metrics.d.ts.map +1 -1
- package/dist/types/components/data-display/Alert/Alert.styles.d.ts.map +1 -1
- package/dist/types/components/data-display/Banner/Banner.d.ts.map +1 -1
- package/dist/types/components/data-display/Banner/Banner.styles.d.ts +3 -0
- package/dist/types/components/data-display/Banner/Banner.styles.d.ts.map +1 -1
- package/dist/types/components/data-display/DataViews/data-views-view-nav.d.ts +1 -1
- package/dist/types/components/data-display/DataViews/data-views-view-nav.d.ts.map +1 -1
- package/dist/types-native/components/data-display/Alert/Alert.metrics.d.ts +66 -23
- package/dist/types-native/components/data-display/Alert/Alert.metrics.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/data-display/Alert/Alert.metrics.ts +66 -9
- package/src/components/data-display/Alert/Alert.styles.tsx +4 -5
- package/src/components/data-display/Alert/Alert.tsx +139 -21
- package/src/components/data-display/Alert/NATIVE-NOTES.md +1 -1
- package/src/components/data-display/Banner/Banner.styles.ts +40 -2
- package/src/components/data-display/Banner/Banner.tsx +22 -9
- package/src/components/data-display/DataViews/data-views-view-nav.tsx +3 -3
- package/dist/chunk-2FDBR77W.js.map +0 -1
- package/dist/chunk-2YEZONLX.js.map +0 -1
- package/dist/chunk-7L6LAVJ7.js.map +0 -1
- package/dist/chunk-B2Y3BABA.js.map +0 -1
- package/dist/chunk-QFVFHIHE.js.map +0 -1
- /package/dist/{chunk-U2YJCNRU.js.map → chunk-4T7TXRGM.js.map} +0 -0
- /package/dist/{chunk-6RZDDUSM.js.map → chunk-7GKRZJWI.js.map} +0 -0
- /package/dist/{chunk-2C47DEVU.js.map → chunk-JD4IVP22.js.map} +0 -0
- /package/dist/{chunk-JQ45NDBS.js.map → chunk-JPV45AD6.js.map} +0 -0
- /package/dist/{chunk-PRUSQQDT.js.map → chunk-KM5O4ICK.js.map} +0 -0
- /package/dist/{chunk-TSYWI3NP.js.map → chunk-NXNNICH7.js.map} +0 -0
- /package/dist/{chunk-XO753WHD.js.map → chunk-QX2PLXQA.js.map} +0 -0
- /package/dist/{chunk-OAYX4XN7.js.map → chunk-SQNW22ZZ.js.map} +0 -0
- /package/dist/{chunk-O3336DJ6.js.map → chunk-SYJMI2NP.js.map} +0 -0
package/NATIVE.md
CHANGED
|
@@ -84,7 +84,7 @@ Ported: **27 of 141** public subpaths carry a `react-native` condition.
|
|
|
84
84
|
|
|
85
85
|
| subpath | shared stories run natively | skipped (`native-skip`) | known gaps |
|
|
86
86
|
|---|---|---|---|
|
|
87
|
-
| `@12-apps/ui/data-display/Alert` | 41 | 2 | `glass` paints its 0.85 paper wash and hairline without the 20px backdrop blur and saturation — React Native has no backdrop filter.; `gradient` paints its first stop (`alpha(light, 0.9)`) flat and has no shimmer sweep — React Native core has no gradient fill and no pseudo-elements.; Hover
|
|
87
|
+
| `@12-apps/ui/data-display/Alert` | 41 | 2 | `glass` paints its 0.85 paper wash and hairline without the 20px backdrop blur and saturation — React Native has no backdrop filter.; `gradient` paints its first stop (`alpha(light, 0.9)`) flat and has no shimmer sweep — React Native core has no gradient fill and no pseudo-elements.; Hover (a 6% tint layer), press (a 20% one, easing back) and `:focus-visible` (the keyboard ring) have no touch equivalent; the close button's pressed state stands in for its hover.; The hairline the web draws around a `Button` placed inside the message is a descendant selector; native children are rendered as given. Consecutive text children DO flow as one sentence (`src/platform/text-children.tsx`); an element child breaks the run, as a block would on the web.; After dismissal the web keeps a collapsed, hidden node in the DOM; native unmounts once the 300ms collapse has run.; Title, description and children are set in MUI's default `body1`/`body2` numbers; a host that re-themes MUI's typography variants moves the web only. |
|
|
88
88
|
| `@12-apps/ui/data-display/Avatar` | 45 | 1 | Hover has no touch equivalent: the interactive lift (`scale(1.1) translateY(-2px)`, the `0 8px 20px` shadow and the brightness), the `:active` squeeze and the `:focus-visible` ring are all web-only. The avatar still reports itself as a button and takes a tab stop.; The shimmer that runs across a loading avatar is a moving gradient; React Native core has neither, so the box keeps its accent and only the overlay and its spinner say it is loading. `backdrop-filter: blur(2px)` behind that overlay has no equivalent either — the wash is the flat `alpha(paper, 0.7)`.; `glow` paints the halo but not the `brightness(1.05)` filter that goes with it; React Native has no filters.; `pulse` is a ring behind the avatar scaling out to 10px and fading, rather than MUI's growing `box-shadow` on an `::after` — the same colour, cadence and travel, drawn by a sibling.; The status dot is a bordered circle placed at MUI's `overlap="circular"` inset; MUI's `Badge` additionally draws a `::after` ripple layer over it.; `AvatarGroup` overlaps and counts exactly as the web does, but the web ALSO gives every child a paper ring through a `& > *` descendant rule. A native renderer cannot restyle children, so an avatar in a group takes `bordered` from its own prop.; The default and broken-image glyphs are the house `Icon` at 24px, which is what MUI's `SvgIcon` draws them at here; the initials are set in the theme's own font rather than MUI's `Avatar` typography. |
|
|
89
89
|
| `@12-apps/ui/data-display/Badge` | 55 | 1 | `gradient` paints the 135° run's first stop flat and `glass` keeps its 10% wash and 20% hairline without the `blur(10px) saturate(200%)` backdrop or the inset white highlight — React Native has no gradient fill, no backdrop filter and no inset shadow.; `shimmer` is a gradient sweeping across a pseudo-element and is not drawn at all; the chip keeps its variant's paint.; `glow` draws the 15px halo but not the `brightness(1.1)` filter beside it, and `glow` WITH `pulse` breathes only the scale and the opacity — the halo itself cannot be animated, because a box shadow is not an animatable style there.; Hover has no touch equivalent: the chip's `scale(1.1)` under the pointer and the glow's brighter hover halo are web-only.; `count` is drawn as a pill (`height / 2`); MUI asks for `border-radius: 50%`, which on a chip wider than it is tall is an ellipse React Native cannot express.; MUI's `transition: all 0.3s` on the chip has no equivalent: a colour or size change is drawn immediately. The mount, pulse and close animations are `Animated` and do run.; `onClick` on the badge reaches the DOM through react-native-web and fires there, as it does on the web; a device has no click, so a shared screen that needs a press should put one on its own child. |
|
|
90
90
|
| `@12-apps/ui/data-display/Chip` | 25 | 0 | Hover has no touch equivalent, so a press stands in for it: the chip takes MUI's hover wash (`palette[color].dark` filled, `alpha(main, 0.04)` outlined) while pressed, but not this package's own 1px lift or the `0 4px 12px` shadow under it, which are `:hover`-only.; The keyboard contract — Enter and Space activate, Delete and Backspace remove — is shared (`chipKeyAction`) and answered under react-native-web, half by its `Pressable` and half by the chip's own handler. On a DEVICE none of it runs: React Native delivers no key events to a `View`, so a chip there is pressed and removed by touch.; MUI restyles the leading icon ELEMENT through a class — 24px, 18px when small, and `inherit` ink on a coloured chip. A native renderer cannot restyle an arbitrary node, so the slot carries MUI's margins and the glyph keeps the size and colour it was given.; An `avatarSrc` is drawn as a round `Image` at MUI's 24px (18px small) box; MUI's own `Avatar` additionally shows an initials fallback and repaints itself in `primary.dark`/`secondary.dark` for those two colours.; MUI's `transition: background-color, box-shadow` and this package's `all 0.2s cubic-bezier(0.4, 0, 0.2, 1)` have no equivalent: a colour change is drawn immediately.; A keyboard activation (Space on a selectable chip, Delete on a deletable one) fires `onClick` and `onDelete` but not `onPress`: it only exists under react-native-web, where the chip synthesizes the activation `Pressable` will not, and so has no `GestureResponderEvent` to pass. A press on a device fires both. |
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
|
+
ALERT_ONLY_PROPS,
|
|
2
3
|
Alert
|
|
3
|
-
} from "../../../../chunk-
|
|
4
|
-
import "../../../../chunk-
|
|
5
|
-
import "../../../../chunk-B2Y3BABA.js";
|
|
4
|
+
} from "../../../../chunk-WNMYWQ7D.js";
|
|
5
|
+
import "../../../../chunk-57Z2ND3N.js";
|
|
6
6
|
import "../../../../chunk-N3QUEBNS.js";
|
|
7
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
7
8
|
import "../../../../chunk-TYJR4GOF.js";
|
|
8
9
|
import "../../../../chunk-NQN5Z36J.js";
|
|
9
10
|
import "../../../../chunk-AG66JBNH.js";
|
|
@@ -11,6 +12,7 @@ import "../../../../chunk-6JAIFIPW.js";
|
|
|
11
12
|
import "../../../../chunk-FZXKH2ZT.js";
|
|
12
13
|
import "../../../../chunk-PZ5AY32C.js";
|
|
13
14
|
export {
|
|
15
|
+
ALERT_ONLY_PROPS,
|
|
14
16
|
Alert
|
|
15
17
|
};
|
|
16
18
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -33,7 +33,7 @@ import {
|
|
|
33
33
|
gradientSurface,
|
|
34
34
|
seconds,
|
|
35
35
|
semanticSurface
|
|
36
|
-
} from "../../../../chunk-
|
|
36
|
+
} from "../../../../chunk-TXKZEKJN.js";
|
|
37
37
|
import "../../../../chunk-NQN5Z36J.js";
|
|
38
38
|
import "../../../../chunk-AG66JBNH.js";
|
|
39
39
|
import "../../../../chunk-6JAIFIPW.js";
|
|
@@ -8,9 +8,9 @@ import {
|
|
|
8
8
|
iconRotate,
|
|
9
9
|
pulseAnimation,
|
|
10
10
|
shimmerAnimation
|
|
11
|
-
} from "../../../../chunk-
|
|
12
|
-
import "../../../../chunk-B2Y3BABA.js";
|
|
11
|
+
} from "../../../../chunk-57Z2ND3N.js";
|
|
13
12
|
import "../../../../chunk-N3QUEBNS.js";
|
|
13
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
14
14
|
import "../../../../chunk-NQN5Z36J.js";
|
|
15
15
|
import "../../../../chunk-AG66JBNH.js";
|
|
16
16
|
import "../../../../chunk-6JAIFIPW.js";
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Banner
|
|
3
|
-
} from "../../../../chunk-
|
|
4
|
-
import "../../../../chunk-
|
|
3
|
+
} from "../../../../chunk-4IVDVZZ2.js";
|
|
4
|
+
import "../../../../chunk-M4LFDGI6.js";
|
|
5
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
6
|
+
import "../../../../chunk-NQN5Z36J.js";
|
|
7
|
+
import "../../../../chunk-AG66JBNH.js";
|
|
8
|
+
import "../../../../chunk-6JAIFIPW.js";
|
|
9
|
+
import "../../../../chunk-FZXKH2ZT.js";
|
|
5
10
|
import "../../../../chunk-PZ5AY32C.js";
|
|
6
11
|
export {
|
|
7
12
|
Banner
|
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import {
|
|
2
|
+
BANNER_TINT_S,
|
|
2
3
|
bannerPartStyles,
|
|
4
|
+
bannerPointerStates,
|
|
3
5
|
fadeInSlide,
|
|
4
6
|
getVariantColor
|
|
5
|
-
} from "../../../../chunk-
|
|
7
|
+
} from "../../../../chunk-M4LFDGI6.js";
|
|
8
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
9
|
+
import "../../../../chunk-NQN5Z36J.js";
|
|
10
|
+
import "../../../../chunk-AG66JBNH.js";
|
|
11
|
+
import "../../../../chunk-6JAIFIPW.js";
|
|
12
|
+
import "../../../../chunk-FZXKH2ZT.js";
|
|
6
13
|
import "../../../../chunk-PZ5AY32C.js";
|
|
7
14
|
export {
|
|
15
|
+
BANNER_TINT_S,
|
|
8
16
|
bannerPartStyles,
|
|
17
|
+
bannerPointerStates,
|
|
9
18
|
fadeInSlide,
|
|
10
19
|
getVariantColor
|
|
11
20
|
};
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
import {
|
|
3
3
|
CardActionsProvider,
|
|
4
4
|
useCardActions
|
|
5
|
-
} from "../../../../chunk-
|
|
5
|
+
} from "../../../../chunk-SYJMI2NP.js";
|
|
6
6
|
import "../../../../chunk-NUGT7LMR.js";
|
|
7
|
-
import "../../../../chunk-
|
|
8
|
-
import "../../../../chunk-
|
|
9
|
-
import "../../../../chunk-B2Y3BABA.js";
|
|
7
|
+
import "../../../../chunk-WNMYWQ7D.js";
|
|
8
|
+
import "../../../../chunk-57Z2ND3N.js";
|
|
10
9
|
import "../../../../chunk-N3QUEBNS.js";
|
|
10
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
11
11
|
import "../../../../chunk-TYJR4GOF.js";
|
|
12
12
|
import "../../../../chunk-NQN5Z36J.js";
|
|
13
13
|
import "../../../../chunk-AG66JBNH.js";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
useRemoveConfirm
|
|
4
|
-
} from "../../../../chunk-
|
|
5
|
-
import "../../../../chunk-
|
|
4
|
+
} from "../../../../chunk-KM5O4ICK.js";
|
|
5
|
+
import "../../../../chunk-SYJMI2NP.js";
|
|
6
6
|
import "../../../../chunk-XCBQXSTR.js";
|
|
7
7
|
import "../../../../chunk-NWNSUHEB.js";
|
|
8
8
|
import "../../../../chunk-HJOABXKN.js";
|
|
@@ -10,12 +10,12 @@ import "../../../../chunk-3P4THDBM.js";
|
|
|
10
10
|
import "../../../../chunk-QQS3GQYS.js";
|
|
11
11
|
import "../../../../chunk-EMYESBIT.js";
|
|
12
12
|
import "../../../../chunk-NUGT7LMR.js";
|
|
13
|
-
import "../../../../chunk-
|
|
14
|
-
import "../../../../chunk-
|
|
15
|
-
import "../../../../chunk-B2Y3BABA.js";
|
|
13
|
+
import "../../../../chunk-WNMYWQ7D.js";
|
|
14
|
+
import "../../../../chunk-57Z2ND3N.js";
|
|
16
15
|
import "../../../../chunk-N3QUEBNS.js";
|
|
17
16
|
import "../../../../chunk-2IBFEHIX.js";
|
|
18
17
|
import "../../../../chunk-BWB2MVWP.js";
|
|
18
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
19
19
|
import "../../../../chunk-BA4RHQ3B.js";
|
|
20
20
|
import "../../../../chunk-YTOYMJPM.js";
|
|
21
21
|
import "../../../../chunk-JT6TERQL.js";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
DataViewsGrid
|
|
4
|
-
} from "../../../../chunk-
|
|
5
|
-
import "../../../../chunk-
|
|
4
|
+
} from "../../../../chunk-QX2PLXQA.js";
|
|
5
|
+
import "../../../../chunk-NXNNICH7.js";
|
|
6
6
|
import "../../../../chunk-BPLFM2GL.js";
|
|
7
7
|
import "../../../../chunk-E55CJV65.js";
|
|
8
8
|
import "../../../../chunk-PN5CQKA2.js";
|
|
@@ -21,21 +21,21 @@ import "../../../../chunk-CBOB5AV6.js";
|
|
|
21
21
|
import "../../../../chunk-HP2ODXNA.js";
|
|
22
22
|
import "../../../../chunk-TQ6FPOPD.js";
|
|
23
23
|
import "../../../../chunk-IAGOUTI6.js";
|
|
24
|
-
import "../../../../chunk-
|
|
24
|
+
import "../../../../chunk-7GKRZJWI.js";
|
|
25
25
|
import "../../../../chunk-KX75HM5U.js";
|
|
26
26
|
import "../../../../chunk-XKV5ZIBG.js";
|
|
27
27
|
import "../../../../chunk-A7Q5AQVD.js";
|
|
28
28
|
import "../../../../chunk-OGGHD64H.js";
|
|
29
29
|
import "../../../../chunk-CZPU5TW3.js";
|
|
30
30
|
import "../../../../chunk-6VP2L3DJ.js";
|
|
31
|
-
import "../../../../chunk-
|
|
32
|
-
import "../../../../chunk-
|
|
31
|
+
import "../../../../chunk-JD4IVP22.js";
|
|
32
|
+
import "../../../../chunk-SQNW22ZZ.js";
|
|
33
33
|
import "../../../../chunk-7NSX7A5H.js";
|
|
34
34
|
import "../../../../chunk-DW5FRWRQ.js";
|
|
35
35
|
import "../../../../chunk-SNR537TI.js";
|
|
36
36
|
import "../../../../chunk-XUJG2HFW.js";
|
|
37
37
|
import "../../../../chunk-ZPIMPOHV.js";
|
|
38
|
-
import "../../../../chunk-
|
|
38
|
+
import "../../../../chunk-O6AZDQJJ.js";
|
|
39
39
|
import "../../../../chunk-TX5V42AY.js";
|
|
40
40
|
import "../../../../chunk-TW3BXVEU.js";
|
|
41
41
|
import "../../../../chunk-YGQX7BNI.js";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
DataViewsTableBase
|
|
4
|
-
} from "../../../../chunk-
|
|
4
|
+
} from "../../../../chunk-JPV45AD6.js";
|
|
5
5
|
import "../../../../chunk-4X4KM4ZB.js";
|
|
6
|
-
import "../../../../chunk-
|
|
6
|
+
import "../../../../chunk-QX2PLXQA.js";
|
|
7
7
|
import "../../../../chunk-ZOLAYP2D.js";
|
|
8
|
-
import "../../../../chunk-
|
|
8
|
+
import "../../../../chunk-NXNNICH7.js";
|
|
9
9
|
import "../../../../chunk-BPLFM2GL.js";
|
|
10
10
|
import "../../../../chunk-E55CJV65.js";
|
|
11
11
|
import "../../../../chunk-PN5CQKA2.js";
|
|
@@ -24,22 +24,22 @@ import "../../../../chunk-CBOB5AV6.js";
|
|
|
24
24
|
import "../../../../chunk-HP2ODXNA.js";
|
|
25
25
|
import "../../../../chunk-TQ6FPOPD.js";
|
|
26
26
|
import "../../../../chunk-IAGOUTI6.js";
|
|
27
|
-
import "../../../../chunk-
|
|
27
|
+
import "../../../../chunk-7GKRZJWI.js";
|
|
28
28
|
import "../../../../chunk-KX75HM5U.js";
|
|
29
29
|
import "../../../../chunk-XKV5ZIBG.js";
|
|
30
30
|
import "../../../../chunk-A7Q5AQVD.js";
|
|
31
31
|
import "../../../../chunk-OGGHD64H.js";
|
|
32
32
|
import "../../../../chunk-CZPU5TW3.js";
|
|
33
33
|
import "../../../../chunk-6VP2L3DJ.js";
|
|
34
|
-
import "../../../../chunk-
|
|
35
|
-
import "../../../../chunk-
|
|
34
|
+
import "../../../../chunk-JD4IVP22.js";
|
|
35
|
+
import "../../../../chunk-SQNW22ZZ.js";
|
|
36
36
|
import "../../../../chunk-7NSX7A5H.js";
|
|
37
37
|
import "../../../../chunk-DW5FRWRQ.js";
|
|
38
38
|
import "../../../../chunk-SNR537TI.js";
|
|
39
39
|
import "../../../../chunk-XUJG2HFW.js";
|
|
40
40
|
import "../../../../chunk-ZPIMPOHV.js";
|
|
41
|
-
import "../../../../chunk-
|
|
42
|
-
import "../../../../chunk-
|
|
41
|
+
import "../../../../chunk-O6AZDQJJ.js";
|
|
42
|
+
import "../../../../chunk-4T7TXRGM.js";
|
|
43
43
|
import "../../../../chunk-CHPZTF34.js";
|
|
44
44
|
import "../../../../chunk-6JGPPTLX.js";
|
|
45
45
|
import "../../../../chunk-5M4TYFR3.js";
|
|
@@ -139,12 +139,12 @@ import "../../../../chunk-KZLLTOB2.js";
|
|
|
139
139
|
import "../../../../chunk-E5LWJDI3.js";
|
|
140
140
|
import "../../../../chunk-G3E66C6J.js";
|
|
141
141
|
import "../../../../chunk-NUGT7LMR.js";
|
|
142
|
-
import "../../../../chunk-
|
|
143
|
-
import "../../../../chunk-
|
|
144
|
-
import "../../../../chunk-B2Y3BABA.js";
|
|
142
|
+
import "../../../../chunk-WNMYWQ7D.js";
|
|
143
|
+
import "../../../../chunk-57Z2ND3N.js";
|
|
145
144
|
import "../../../../chunk-N3QUEBNS.js";
|
|
146
145
|
import "../../../../chunk-2IBFEHIX.js";
|
|
147
146
|
import "../../../../chunk-BWB2MVWP.js";
|
|
147
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
148
148
|
import "../../../../chunk-6DPAWXZ3.js";
|
|
149
149
|
import "../../../../chunk-WEBEOBN5.js";
|
|
150
150
|
import "../../../../chunk-VUHLNYAE.js";
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
DataViewsDisplayPanel
|
|
4
|
-
} from "../../../../chunk-
|
|
4
|
+
} from "../../../../chunk-SQNW22ZZ.js";
|
|
5
5
|
import "../../../../chunk-7NSX7A5H.js";
|
|
6
6
|
import "../../../../chunk-DW5FRWRQ.js";
|
|
7
7
|
import "../../../../chunk-SNR537TI.js";
|
|
8
8
|
import "../../../../chunk-ZPIMPOHV.js";
|
|
9
|
-
import "../../../../chunk-
|
|
9
|
+
import "../../../../chunk-O6AZDQJJ.js";
|
|
10
10
|
import "../../../../chunk-LHHAYZ55.js";
|
|
11
11
|
import "../../../../chunk-KHG57NAE.js";
|
|
12
12
|
import "../../../../chunk-PGM5RRQO.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
GridShell
|
|
4
|
-
} from "../../../../chunk-
|
|
4
|
+
} from "../../../../chunk-NXNNICH7.js";
|
|
5
5
|
import "../../../../chunk-BPLFM2GL.js";
|
|
6
6
|
import "../../../../chunk-E55CJV65.js";
|
|
7
7
|
import "../../../../chunk-PN5CQKA2.js";
|
|
@@ -20,21 +20,21 @@ import "../../../../chunk-CBOB5AV6.js";
|
|
|
20
20
|
import "../../../../chunk-HP2ODXNA.js";
|
|
21
21
|
import "../../../../chunk-TQ6FPOPD.js";
|
|
22
22
|
import "../../../../chunk-IAGOUTI6.js";
|
|
23
|
-
import "../../../../chunk-
|
|
23
|
+
import "../../../../chunk-7GKRZJWI.js";
|
|
24
24
|
import "../../../../chunk-KX75HM5U.js";
|
|
25
25
|
import "../../../../chunk-XKV5ZIBG.js";
|
|
26
26
|
import "../../../../chunk-A7Q5AQVD.js";
|
|
27
27
|
import "../../../../chunk-OGGHD64H.js";
|
|
28
28
|
import "../../../../chunk-CZPU5TW3.js";
|
|
29
29
|
import "../../../../chunk-6VP2L3DJ.js";
|
|
30
|
-
import "../../../../chunk-
|
|
31
|
-
import "../../../../chunk-
|
|
30
|
+
import "../../../../chunk-JD4IVP22.js";
|
|
31
|
+
import "../../../../chunk-SQNW22ZZ.js";
|
|
32
32
|
import "../../../../chunk-7NSX7A5H.js";
|
|
33
33
|
import "../../../../chunk-DW5FRWRQ.js";
|
|
34
34
|
import "../../../../chunk-SNR537TI.js";
|
|
35
35
|
import "../../../../chunk-XUJG2HFW.js";
|
|
36
36
|
import "../../../../chunk-ZPIMPOHV.js";
|
|
37
|
-
import "../../../../chunk-
|
|
37
|
+
import "../../../../chunk-O6AZDQJJ.js";
|
|
38
38
|
import "../../../../chunk-LYKV3C7B.js";
|
|
39
39
|
import "../../../../chunk-U2ZDN2AL.js";
|
|
40
40
|
import "../../../../chunk-LHHAYZ55.js";
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
ShellToolbar
|
|
4
|
-
} from "../../../../chunk-
|
|
5
|
-
import "../../../../chunk-
|
|
6
|
-
import "../../../../chunk-
|
|
4
|
+
} from "../../../../chunk-7GKRZJWI.js";
|
|
5
|
+
import "../../../../chunk-JD4IVP22.js";
|
|
6
|
+
import "../../../../chunk-SQNW22ZZ.js";
|
|
7
7
|
import "../../../../chunk-7NSX7A5H.js";
|
|
8
8
|
import "../../../../chunk-DW5FRWRQ.js";
|
|
9
9
|
import "../../../../chunk-SNR537TI.js";
|
|
10
10
|
import "../../../../chunk-XUJG2HFW.js";
|
|
11
11
|
import "../../../../chunk-ZPIMPOHV.js";
|
|
12
|
-
import "../../../../chunk-
|
|
12
|
+
import "../../../../chunk-O6AZDQJJ.js";
|
|
13
13
|
import "../../../../chunk-U2ZDN2AL.js";
|
|
14
14
|
import "../../../../chunk-LHHAYZ55.js";
|
|
15
15
|
import "../../../../chunk-KHG57NAE.js";
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
ViewDialogs,
|
|
4
4
|
ViewMutationErrorAlert,
|
|
5
5
|
ViewsMenuSlot
|
|
6
|
-
} from "../../../../chunk-
|
|
6
|
+
} from "../../../../chunk-4T7TXRGM.js";
|
|
7
7
|
import "../../../../chunk-CHPZTF34.js";
|
|
8
8
|
import "../../../../chunk-6JGPPTLX.js";
|
|
9
9
|
import "../../../../chunk-5M4TYFR3.js";
|
|
@@ -43,12 +43,12 @@ import "../../../../chunk-5KEMPCW4.js";
|
|
|
43
43
|
import "../../../../chunk-VM3HRSAU.js";
|
|
44
44
|
import "../../../../chunk-GYXUCS37.js";
|
|
45
45
|
import "../../../../chunk-NUGT7LMR.js";
|
|
46
|
-
import "../../../../chunk-
|
|
47
|
-
import "../../../../chunk-
|
|
48
|
-
import "../../../../chunk-B2Y3BABA.js";
|
|
46
|
+
import "../../../../chunk-WNMYWQ7D.js";
|
|
47
|
+
import "../../../../chunk-57Z2ND3N.js";
|
|
49
48
|
import "../../../../chunk-N3QUEBNS.js";
|
|
50
49
|
import "../../../../chunk-2IBFEHIX.js";
|
|
51
50
|
import "../../../../chunk-BWB2MVWP.js";
|
|
51
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
52
52
|
import "../../../../chunk-6DPAWXZ3.js";
|
|
53
53
|
import "../../../../chunk-WEBEOBN5.js";
|
|
54
54
|
import "../../../../chunk-VUHLNYAE.js";
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
GridToolbar
|
|
4
|
-
} from "../../../../chunk-
|
|
5
|
-
import "../../../../chunk-
|
|
4
|
+
} from "../../../../chunk-JD4IVP22.js";
|
|
5
|
+
import "../../../../chunk-SQNW22ZZ.js";
|
|
6
6
|
import "../../../../chunk-7NSX7A5H.js";
|
|
7
7
|
import "../../../../chunk-DW5FRWRQ.js";
|
|
8
8
|
import "../../../../chunk-SNR537TI.js";
|
|
9
9
|
import "../../../../chunk-XUJG2HFW.js";
|
|
10
10
|
import "../../../../chunk-ZPIMPOHV.js";
|
|
11
|
-
import "../../../../chunk-
|
|
11
|
+
import "../../../../chunk-O6AZDQJJ.js";
|
|
12
12
|
import "../../../../chunk-U2ZDN2AL.js";
|
|
13
13
|
import "../../../../chunk-LHHAYZ55.js";
|
|
14
14
|
import "../../../../chunk-KHG57NAE.js";
|
|
@@ -191,9 +191,8 @@ import "../../../chunk-MWFSIB6K.js";
|
|
|
191
191
|
import "../../../chunk-NUGT7LMR.js";
|
|
192
192
|
import {
|
|
193
193
|
Alert
|
|
194
|
-
} from "../../../chunk-
|
|
195
|
-
import "../../../chunk-
|
|
196
|
-
import "../../../chunk-B2Y3BABA.js";
|
|
194
|
+
} from "../../../chunk-WNMYWQ7D.js";
|
|
195
|
+
import "../../../chunk-57Z2ND3N.js";
|
|
197
196
|
import "../../../chunk-N3QUEBNS.js";
|
|
198
197
|
import "../../../chunk-2IBFEHIX.js";
|
|
199
198
|
import {
|
|
@@ -210,8 +209,9 @@ import "../../../chunk-HI2OFZSZ.js";
|
|
|
210
209
|
import "../../../chunk-KVEHH4SA.js";
|
|
211
210
|
import {
|
|
212
211
|
Banner
|
|
213
|
-
} from "../../../chunk-
|
|
214
|
-
import "../../../chunk-
|
|
212
|
+
} from "../../../chunk-4IVDVZZ2.js";
|
|
213
|
+
import "../../../chunk-M4LFDGI6.js";
|
|
214
|
+
import "../../../chunk-TXKZEKJN.js";
|
|
215
215
|
import "../../../chunk-5KLSLD72.js";
|
|
216
216
|
import {
|
|
217
217
|
SpecChart
|
|
@@ -695,9 +695,8 @@ import "../../chunk-MWFSIB6K.js";
|
|
|
695
695
|
import "../../chunk-NUGT7LMR.js";
|
|
696
696
|
import {
|
|
697
697
|
Alert
|
|
698
|
-
} from "../../chunk-
|
|
699
|
-
import "../../chunk-
|
|
700
|
-
import "../../chunk-B2Y3BABA.js";
|
|
698
|
+
} from "../../chunk-WNMYWQ7D.js";
|
|
699
|
+
import "../../chunk-57Z2ND3N.js";
|
|
701
700
|
import "../../chunk-N3QUEBNS.js";
|
|
702
701
|
import "../../chunk-2IBFEHIX.js";
|
|
703
702
|
import {
|
|
@@ -714,8 +713,9 @@ import "../../chunk-HI2OFZSZ.js";
|
|
|
714
713
|
import "../../chunk-KVEHH4SA.js";
|
|
715
714
|
import {
|
|
716
715
|
Banner
|
|
717
|
-
} from "../../chunk-
|
|
718
|
-
import "../../chunk-
|
|
716
|
+
} from "../../chunk-4IVDVZZ2.js";
|
|
717
|
+
import "../../chunk-M4LFDGI6.js";
|
|
718
|
+
import "../../chunk-TXKZEKJN.js";
|
|
719
719
|
import "../../chunk-RTSK5OZT.js";
|
|
720
720
|
import "../../chunk-5KLSLD72.js";
|
|
721
721
|
import {
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
|
+
BANNER_TINT_S,
|
|
2
3
|
bannerPartStyles,
|
|
4
|
+
bannerPointerStates,
|
|
3
5
|
fadeInSlide,
|
|
4
6
|
getVariantColor
|
|
5
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-M4LFDGI6.js";
|
|
8
|
+
import {
|
|
9
|
+
FOCUS
|
|
10
|
+
} from "./chunk-TXKZEKJN.js";
|
|
6
11
|
|
|
7
12
|
// src/components/data-display/Banner/Banner.tsx
|
|
8
13
|
import CheckCircle from "@mui/icons-material/CheckCircle";
|
|
@@ -37,11 +42,19 @@ var StyledBanner = styled(Box, {
|
|
|
37
42
|
marginLeft: fullWidth ? "50%" : 0,
|
|
38
43
|
transform: fullWidth ? "translateX(-50%)" : "none",
|
|
39
44
|
animation: `${fadeInSlide} 0.3s ease-out`,
|
|
40
|
-
transition:
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
+
transition: `all 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow ${BANNER_TINT_S}s cubic-bezier(0.4, 0, 0.2, 1)`,
|
|
46
|
+
...bannerPointerStates(theme),
|
|
47
|
+
// Focus: `:focus-visible`, not `:focus-within`.
|
|
48
|
+
//
|
|
49
|
+
// The banner carries `tabIndex={0}`, so a MOUSE CLICK focused it and
|
|
50
|
+
// painted this ring — a keyboard affordance answering a pointer, which is
|
|
51
|
+
// what made clicking one look like an error state. `:focus-visible` is the
|
|
52
|
+
// browser's own answer to whether the focus came from the keyboard: the
|
|
53
|
+
// ring stays for whoever tabs here and never fires on a click. Same defect
|
|
54
|
+
// and same fix as `Alert`, which is the sibling surface (FUT-1458).
|
|
55
|
+
"&:focus-visible": {
|
|
56
|
+
outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
|
|
57
|
+
outlineOffset: `${FOCUS.offset}px`
|
|
45
58
|
},
|
|
46
59
|
...bannerPartStyles(theme, colorPalette),
|
|
47
60
|
// Responsive layout
|
|
@@ -97,9 +110,11 @@ var buildActionSx = (theme, variant, actionVariant) => {
|
|
|
97
110
|
...actionVariant === "primary" && {
|
|
98
111
|
backgroundColor: palette.main,
|
|
99
112
|
color: theme.palette.getContrastText(palette.main),
|
|
113
|
+
// Colour only. The banner itself moves nothing under a pointer, and an
|
|
114
|
+
// action that lifts inside one that does not is the inconsistency a
|
|
115
|
+
// reader notices without being able to name it (FUT-1458).
|
|
100
116
|
"&:hover": {
|
|
101
|
-
backgroundColor: palette.dark || palette.main
|
|
102
|
-
transform: "translateY(-1px)"
|
|
117
|
+
backgroundColor: palette.dark || palette.main
|
|
103
118
|
}
|
|
104
119
|
},
|
|
105
120
|
...actionVariant === "secondary" && {
|
|
@@ -107,8 +122,7 @@ var buildActionSx = (theme, variant, actionVariant) => {
|
|
|
107
122
|
color: palette.main,
|
|
108
123
|
"&:hover": {
|
|
109
124
|
backgroundColor: alpha(palette.main, 0.1),
|
|
110
|
-
borderColor: palette.main
|
|
111
|
-
transform: "translateY(-1px)"
|
|
125
|
+
borderColor: palette.main
|
|
112
126
|
}
|
|
113
127
|
}
|
|
114
128
|
};
|
|
@@ -246,4 +260,4 @@ Banner.displayName = "Banner";
|
|
|
246
260
|
export {
|
|
247
261
|
Banner
|
|
248
262
|
};
|
|
249
|
-
//# sourceMappingURL=chunk-
|
|
263
|
+
//# sourceMappingURL=chunk-4IVDVZZ2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/data-display/Banner/Banner.tsx"],"sourcesContent":["import CheckCircle from '@mui/icons-material/CheckCircle';\nimport Close from '@mui/icons-material/Close';\nimport Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport Warning from '@mui/icons-material/Warning';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { BANNER_TINT_S, bannerPartStyles, bannerPointerStates, fadeInSlide, getVariantColor } from './Banner.styles';\nimport { FOCUS } from '../Alert/Alert.metrics';\nimport type { BannerProps, BannerVariant } from './Banner.types';\n\n\n\nconst StyledBanner = styled(Box, {\n shouldForwardProp: (prop) => !['variant', 'sticky', 'fullWidth'].includes(prop as string),\n})<{\n variant: BannerVariant;\n sticky: boolean;\n fullWidth: boolean;\n}>(({ theme, variant, sticky, fullWidth }) => {\n\n const colorPalette = getVariantColor(theme, variant);\n\n return {\n display: 'flex',\n alignItems: 'flex-start',\n gap: theme.spacing(1.5),\n padding: theme.spacing(1.5, 2),\n borderRadius: theme.spacing(1),\n backgroundColor: alpha(colorPalette.main, 0.1),\n border: `1px solid ${alpha(colorPalette.main, 0.2)}`,\n color: colorPalette.main,\n position: sticky ? 'sticky' : 'relative',\n top: sticky ? 0 : 'auto',\n zIndex: sticky ? theme.zIndex.appBar : 'auto',\n width: fullWidth ? '100vw' : '100%',\n marginLeft: fullWidth ? '50%' : 0,\n transform: fullWidth ? 'translateX(-50%)' : 'none',\n animation: `${fadeInSlide} 0.3s ease-out`,\n transition: `all 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow ${BANNER_TINT_S}s cubic-bezier(0.4, 0, 0.2, 1)`,\n\n ...bannerPointerStates(theme),\n\n // Focus: `:focus-visible`, not `:focus-within`.\n //\n // The banner carries `tabIndex={0}`, so a MOUSE CLICK focused it and\n // painted this ring — a keyboard affordance answering a pointer, which is\n // what made clicking one look like an error state. `:focus-visible` is the\n // browser's own answer to whether the focus came from the keyboard: the\n // ring stays for whoever tabs here and never fires on a click. Same defect\n // and same fix as `Alert`, which is the sibling surface (FUT-1458).\n '&:focus-visible': {\n outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,\n outlineOffset: `${FOCUS.offset}px`,\n },\n\n ...bannerPartStyles(theme, colorPalette),\n\n // Responsive layout\n [theme.breakpoints.down('sm')]: {\n flexDirection: 'column',\n alignItems: 'stretch',\n gap: theme.spacing(1),\n \n '.banner-content': {\n order: 1,\n },\n\n '.banner-actions': {\n order: 2,\n justifyContent: 'flex-start',\n marginTop: theme.spacing(1),\n marginLeft: 0,\n },\n },\n\n // Glass effect variant (optional enhancement)\n '&.banner-glass': {\n backgroundColor: alpha(theme.palette.background.paper, 0.1),\n backdropFilter: 'blur(20px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n color: theme.palette.text.primary,\n \n '.banner-icon': {\n color: colorPalette.main,\n },\n },\n };\n});\n\nconst getVariantIcon = (variant: BannerVariant) => {\n const iconMap: Record<BannerVariant, React.ReactNode> = {\n info: <Info />,\n success: <CheckCircle />,\n warning: <Warning />,\n critical: <Error />,\n };\n return iconMap[variant];\n};\n\ntype BannerAction = NonNullable<BannerProps['actions']>[number];\n\n// Warnings and criticals interrupt the screen reader; the rest are announced\n// politely when it next pauses.\nconst resolveAriaAnnouncement = (variant: BannerVariant) => ({\n role: variant === 'warning' || variant === 'critical' ? 'alert' : 'status',\n live: (variant === 'critical' ? 'assertive' : 'polite') as 'assertive' | 'polite',\n});\n\nconst testIdFor = (base: string | undefined, suffix: string) =>\n base ? `${base}-${suffix}` : `banner-${suffix}`;\n\n// Resolves the banner's palette once, rather than per property as the inline\n// version did — getVariantColor was being called nine times to build one button.\nconst buildActionSx = (\n theme: Theme,\n variant: BannerVariant,\n actionVariant: BannerAction['variant'],\n) => {\n const palette = getVariantColor(theme, variant);\n\n return {\n minWidth: 'auto',\n px: 1.5,\n py: 0.5,\n fontSize: '0.8125rem',\n fontWeight: 500,\n borderRadius: 1,\n\n ...(actionVariant === 'primary' && {\n backgroundColor: palette.main,\n color: theme.palette.getContrastText(palette.main),\n\n // Colour only. The banner itself moves nothing under a pointer, and an\n // action that lifts inside one that does not is the inconsistency a\n // reader notices without being able to name it (FUT-1458).\n '&:hover': {\n backgroundColor: palette.dark || palette.main,\n },\n }),\n\n ...(actionVariant === 'secondary' && {\n borderColor: palette.main,\n color: palette.main,\n\n '&:hover': {\n backgroundColor: alpha(palette.main, 0.1),\n borderColor: palette.main,\n },\n }),\n };\n};\n\nconst BannerActionButton: React.FC<{\n action: BannerAction;\n variant: BannerVariant;\n dataTestId?: string;\n}> = ({ action, variant, dataTestId }) => (\n <Button\n size=\"small\"\n variant={action.variant === 'primary' ? 'contained' : 'outlined'}\n onClick={action.onClick}\n data-testid={testIdFor(dataTestId, 'action')}\n sx={(theme) => buildActionSx(theme, variant, action.variant)}\n >\n {action.label}\n </Button>\n);\n\nconst BannerBody: React.FC<{\n displayIcon: React.ReactNode;\n title?: BannerProps['title'];\n description?: BannerProps['description'];\n dataTestId?: string;\n children?: React.ReactNode;\n}> = ({ displayIcon, title, description, dataTestId, children }) => (\n <>\n {displayIcon && (\n <Box className=\"banner-icon\" aria-hidden=\"true\" data-testid={testIdFor(dataTestId, 'icon')}>\n {displayIcon}\n </Box>\n )}\n\n <Box className=\"banner-content\">\n {title && (\n <Typography\n className=\"banner-title\"\n variant=\"subtitle2\"\n component=\"div\"\n data-testid={testIdFor(dataTestId, 'title')}\n >\n {title}\n </Typography>\n )}\n {description && (\n <Typography\n className=\"banner-description\"\n variant=\"body2\"\n component=\"div\"\n data-testid={testIdFor(dataTestId, 'message')}\n >\n {description}\n </Typography>\n )}\n {children}\n </Box>\n </>\n);\n\nconst BannerTrailing: React.FC<{\n actions?: BannerProps['actions'];\n variant: BannerVariant;\n dismissible: boolean;\n onDismissClick: () => void;\n dismissLabel: string;\n dataTestId?: string;\n}> = ({ actions, variant, dismissible, onDismissClick, dismissLabel, dataTestId }) => (\n <Box display=\"flex\" alignItems=\"center\" gap={1}>\n {actions && actions.length > 0 && (\n <Box className=\"banner-actions\">\n {actions.map((action, index) => (\n <BannerActionButton\n key={index}\n action={action}\n variant={variant}\n dataTestId={dataTestId}\n />\n ))}\n </Box>\n )}\n\n {dismissible && (\n <IconButton\n className=\"banner-dismiss\"\n size=\"small\"\n onClick={onDismissClick}\n aria-label={dismissLabel}\n data-testid={testIdFor(dataTestId, 'close')}\n sx={{ transition: 'all 0.2s ease' }}\n >\n <Close fontSize=\"small\" />\n </IconButton>\n )}\n </Box>\n);\n\nexport const Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n (\n {\n variant = 'info',\n title,\n description,\n icon,\n dismissible = false,\n dismissLabel,\n onDismiss,\n actions,\n sticky = false,\n fullWidth = false,\n className,\n children,\n 'data-testid': dataTestId = 'banner',\n ...props\n },\n ref,\n ) => {\n const [visible, setVisible] = React.useState(true);\n\n const handleDismiss = React.useCallback(() => {\n setVisible(false);\n onDismiss?.();\n }, [onDismiss]);\n\n const displayIcon = icon || getVariantIcon(variant);\n\n const { role: ariaRole, live: ariaLive } = resolveAriaAnnouncement(variant);\n\n if (!visible) {\n return null;\n }\n\n return (\n <StyledBanner\n ref={ref}\n variant={variant}\n sticky={sticky}\n fullWidth={fullWidth}\n className={className}\n role={ariaRole}\n aria-live={ariaLive}\n aria-atomic=\"true\"\n tabIndex={0}\n data-testid={dataTestId}\n {...props}\n >\n <BannerBody\n displayIcon={displayIcon}\n title={title}\n description={description}\n dataTestId={dataTestId}\n >\n {children}\n </BannerBody>\n\n <BannerTrailing\n actions={actions}\n variant={variant}\n dismissible={dismissible}\n onDismissClick={handleDismiss}\n dismissLabel={dismissLabel}\n dataTestId={dataTestId}\n />\n </StyledBanner>\n );\n },\n);\n\nBanner.displayName = 'Banner';"],"mappings":"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","names":[]}
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
} from "./chunk-EFEZWG4C.js";
|
|
13
13
|
import {
|
|
14
14
|
Alert
|
|
15
|
-
} from "./chunk-
|
|
15
|
+
} from "./chunk-WNMYWQ7D.js";
|
|
16
16
|
|
|
17
17
|
// src/components/data-display/DataViews/data-views-table-parts.tsx
|
|
18
18
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -121,4 +121,4 @@ export {
|
|
|
121
121
|
ViewsMenuSlot,
|
|
122
122
|
ViewDialogs
|
|
123
123
|
};
|
|
124
|
-
//# sourceMappingURL=chunk-
|
|
124
|
+
//# sourceMappingURL=chunk-4T7TXRGM.js.map
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import {
|
|
2
|
+
VARIANT_ICON
|
|
3
|
+
} from "./chunk-N3QUEBNS.js";
|
|
1
4
|
import {
|
|
2
5
|
ACTION_SLOT,
|
|
3
6
|
ALERT_EASING,
|
|
@@ -18,10 +21,7 @@ import {
|
|
|
18
21
|
SEMANTIC_SURFACE,
|
|
19
22
|
SEMANTIC_VARIANTS,
|
|
20
23
|
seconds
|
|
21
|
-
} from "./chunk-
|
|
22
|
-
import {
|
|
23
|
-
VARIANT_ICON
|
|
24
|
-
} from "./chunk-N3QUEBNS.js";
|
|
24
|
+
} from "./chunk-TXKZEKJN.js";
|
|
25
25
|
import {
|
|
26
26
|
px
|
|
27
27
|
} from "./chunk-NQN5Z36J.js";
|
|
@@ -216,15 +216,14 @@ var alertVariantStyles = (theme, customVariant, colorPalette) => ({
|
|
|
216
216
|
height: "100%",
|
|
217
217
|
background: `linear-gradient(90deg, transparent, ${alpha(theme.palette.common.white, GRADIENT.shimmerAlpha)}, transparent)`,
|
|
218
218
|
animation: `${shimmerAnimation} ${seconds(GRADIENT.shimmerMs)} infinite`
|
|
219
|
-
},
|
|
220
|
-
"&:hover": {
|
|
221
|
-
filter: `brightness(${GRADIENT.hoverBrightness})`,
|
|
222
|
-
transform: `translateY(-${GRADIENT.hoverLift}px) scale(${GRADIENT.hoverScale})`
|
|
223
219
|
}
|
|
224
220
|
}
|
|
225
221
|
});
|
|
226
222
|
var glowStyles = (colorPalette) => ({
|
|
227
|
-
|
|
223
|
+
// No `!important`: the pointer states paint their tint as an INSET shadow on
|
|
224
|
+
// the same property, and compose this one alongside it rather than fighting
|
|
225
|
+
// it. `glowShadow` in `Alert.tsx` is the other half of that pair.
|
|
226
|
+
boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`,
|
|
228
227
|
filter: `brightness(${GLOW.brightness})`
|
|
229
228
|
});
|
|
230
229
|
var pulseAfter = (colorPalette) => ({
|
|
@@ -267,4 +266,4 @@ export {
|
|
|
267
266
|
alertVariantStyles,
|
|
268
267
|
alertEmphasisStyles
|
|
269
268
|
};
|
|
270
|
-
//# sourceMappingURL=chunk-
|
|
269
|
+
//# sourceMappingURL=chunk-57Z2ND3N.js.map
|