@mantine/core 8.0.0-alpha.1 → 8.0.0-alpha.2

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.
Files changed (36) hide show
  1. package/cjs/components/ColorInput/EyeDropperIcon.cjs +6 -2
  2. package/cjs/components/ColorInput/EyeDropperIcon.cjs.map +1 -1
  3. package/cjs/components/Menu/Menu.cjs +2 -0
  4. package/cjs/components/Menu/Menu.cjs.map +1 -1
  5. package/cjs/components/Notification/Notification.cjs +2 -1
  6. package/cjs/components/Notification/Notification.cjs.map +1 -1
  7. package/cjs/components/ScrollArea/ScrollArea.cjs +24 -1
  8. package/cjs/components/ScrollArea/ScrollArea.cjs.map +1 -1
  9. package/cjs/components/Tooltip/Tooltip.cjs +2 -2
  10. package/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
  11. package/cjs/components/Transition/get-transition-styles/get-transition-styles.cjs +2 -0
  12. package/cjs/components/Transition/get-transition-styles/get-transition-styles.cjs.map +1 -1
  13. package/esm/components/ColorInput/EyeDropperIcon.mjs +6 -2
  14. package/esm/components/ColorInput/EyeDropperIcon.mjs.map +1 -1
  15. package/esm/components/Menu/Menu.mjs +2 -0
  16. package/esm/components/Menu/Menu.mjs.map +1 -1
  17. package/esm/components/Notification/Notification.mjs +2 -1
  18. package/esm/components/Notification/Notification.mjs.map +1 -1
  19. package/esm/components/ScrollArea/ScrollArea.mjs +25 -2
  20. package/esm/components/ScrollArea/ScrollArea.mjs.map +1 -1
  21. package/esm/components/Tooltip/Tooltip.mjs +2 -2
  22. package/esm/components/Tooltip/Tooltip.mjs.map +1 -1
  23. package/esm/components/Transition/get-transition-styles/get-transition-styles.mjs +2 -0
  24. package/esm/components/Transition/get-transition-styles/get-transition-styles.mjs.map +1 -1
  25. package/lib/components/Input/use-input-props.d.ts +22 -22
  26. package/lib/components/Menu/Menu.d.ts +1 -0
  27. package/lib/components/Notification/Notification.d.ts +3 -0
  28. package/lib/components/ScrollArea/ScrollArea.d.ts +1 -1
  29. package/lib/core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.d.ts +1 -1
  30. package/package.json +2 -2
  31. package/styles/Input.css +0 -8
  32. package/styles/Input.layer.css +0 -8
  33. package/styles/ScrollArea.css +33 -8
  34. package/styles/ScrollArea.layer.css +33 -8
  35. package/styles.css +32 -15
  36. package/styles.layer.css +32 -15
package/styles/ScrollArea.css CHANGED
@@ -18,14 +18,39 @@
18
18
  display: none;
19
19
  }
20
20
 
21
- .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='y']) {
22
- padding-inline-end: var(--scrollarea-scrollbar-size);
23
- padding-inline-start: unset;
24
- }
25
-
26
- .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='x']) {
27
- padding-bottom: var(--scrollarea-scrollbar-size);
28
- }
21
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
22
+ [data-offset-scrollbars='xy'],
23
+ [data-offset-scrollbars='y'],
24
+ [data-offset-scrollbars='present']
25
+ ):where([data-vertical-hidden]) {
26
+ padding-inline-end: 0;
27
+ padding-inline-start: 0;
28
+ }
29
+
30
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
31
+ [data-offset-scrollbars='xy'],
32
+ [data-offset-scrollbars='y'],
33
+ [data-offset-scrollbars='present']
34
+ ):not([data-vertical-hidden]) {
35
+ padding-inline-end: var(--scrollarea-scrollbar-size);
36
+ padding-inline-start: unset;
37
+ }
38
+
39
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
40
+ [data-offset-scrollbars='xy'],
41
+ [data-offset-scrollbars='x'],
42
+ [data-offset-scrollbars='present']
43
+ ):where([data-horizontal-hidden]) {
44
+ padding-bottom: 0;
45
+ }
46
+
47
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
48
+ [data-offset-scrollbars='xy'],
49
+ [data-offset-scrollbars='x'],
50
+ [data-offset-scrollbars='present']
51
+ ):not([data-horizontal-hidden]) {
52
+ padding-bottom: var(--scrollarea-scrollbar-size);
53
+ }
29
54
 
30
55
  .m_f8f631dd {
31
56
  min-width: 100%;
package/styles/ScrollArea.layer.css CHANGED
@@ -18,14 +18,39 @@
18
18
  display: none;
19
19
  }
20
20
 
21
- .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='y']) {
22
- padding-inline-end: var(--scrollarea-scrollbar-size);
23
- padding-inline-start: unset;
24
- }
25
-
26
- .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='x']) {
27
- padding-bottom: var(--scrollarea-scrollbar-size);
28
- }
21
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
22
+ [data-offset-scrollbars='xy'],
23
+ [data-offset-scrollbars='y'],
24
+ [data-offset-scrollbars='present']
25
+ ):where([data-vertical-hidden]) {
26
+ padding-inline-end: 0;
27
+ padding-inline-start: 0;
28
+ }
29
+
30
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
31
+ [data-offset-scrollbars='xy'],
32
+ [data-offset-scrollbars='y'],
33
+ [data-offset-scrollbars='present']
34
+ ):not([data-vertical-hidden]) {
35
+ padding-inline-end: var(--scrollarea-scrollbar-size);
36
+ padding-inline-start: unset;
37
+ }
38
+
39
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
40
+ [data-offset-scrollbars='xy'],
41
+ [data-offset-scrollbars='x'],
42
+ [data-offset-scrollbars='present']
43
+ ):where([data-horizontal-hidden]) {
44
+ padding-bottom: 0;
45
+ }
46
+
47
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
48
+ [data-offset-scrollbars='xy'],
49
+ [data-offset-scrollbars='x'],
50
+ [data-offset-scrollbars='present']
51
+ ):not([data-horizontal-hidden]) {
52
+ padding-bottom: var(--scrollarea-scrollbar-size);
53
+ }
29
54
 
30
55
  .m_f8f631dd {
31
56
  min-width: 100%;
package/styles.css CHANGED
@@ -608,14 +608,39 @@ fieldset:disabled .mantine-active:active {
608
608
  display: none;
609
609
  }
610
610
 
611
- .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='y']) {
612
- padding-inline-end: var(--scrollarea-scrollbar-size);
613
- padding-inline-start: unset;
614
- }
611
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
612
+ [data-offset-scrollbars='xy'],
613
+ [data-offset-scrollbars='y'],
614
+ [data-offset-scrollbars='present']
615
+ ):where([data-vertical-hidden]) {
616
+ padding-inline-end: 0;
617
+ padding-inline-start: 0;
618
+ }
615
619
 
616
- .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='x']) {
617
- padding-bottom: var(--scrollarea-scrollbar-size);
618
- }
620
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
621
+ [data-offset-scrollbars='xy'],
622
+ [data-offset-scrollbars='y'],
623
+ [data-offset-scrollbars='present']
624
+ ):not([data-vertical-hidden]) {
625
+ padding-inline-end: var(--scrollarea-scrollbar-size);
626
+ padding-inline-start: unset;
627
+ }
628
+
629
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
630
+ [data-offset-scrollbars='xy'],
631
+ [data-offset-scrollbars='x'],
632
+ [data-offset-scrollbars='present']
633
+ ):where([data-horizontal-hidden]) {
634
+ padding-bottom: 0;
635
+ }
636
+
637
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
638
+ [data-offset-scrollbars='xy'],
639
+ [data-offset-scrollbars='x'],
640
+ [data-offset-scrollbars='present']
641
+ ):not([data-horizontal-hidden]) {
642
+ padding-bottom: var(--scrollarea-scrollbar-size);
643
+ }
619
644
 
620
645
  .m_f8f631dd {
621
646
  min-width: 100%;
@@ -1523,14 +1548,6 @@ fieldset:disabled .mantine-active:active {
1523
1548
  color: var(--input-disabled-color);
1524
1549
  }
1525
1550
 
1526
- /* Fixes odd Firefox behavior in Select – https://github.com/mantinedev/mantine/issues/7476 */
1527
-
1528
- @supports (-moz-appearance: none) {
1529
- .m_8fb7ebe7[readonly][aria-haspopup] {
1530
- pointer-events: none;
1531
- }
1532
- }
1533
-
1534
1551
  .m_82577fc2 {
1535
1552
  pointer-events: var(--section-pointer-events);
1536
1553
  position: absolute;
package/styles.layer.css CHANGED
@@ -608,14 +608,39 @@ fieldset:disabled .mantine-active:active {
608
608
  display: none;
609
609
  }
610
610
 
611
- .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='y']) {
612
- padding-inline-end: var(--scrollarea-scrollbar-size);
613
- padding-inline-start: unset;
614
- }
611
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
612
+ [data-offset-scrollbars='xy'],
613
+ [data-offset-scrollbars='y'],
614
+ [data-offset-scrollbars='present']
615
+ ):where([data-vertical-hidden]) {
616
+ padding-inline-end: 0;
617
+ padding-inline-start: 0;
618
+ }
615
619
 
616
- .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='x']) {
617
- padding-bottom: var(--scrollarea-scrollbar-size);
618
- }
620
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
621
+ [data-offset-scrollbars='xy'],
622
+ [data-offset-scrollbars='y'],
623
+ [data-offset-scrollbars='present']
624
+ ):not([data-vertical-hidden]) {
625
+ padding-inline-end: var(--scrollarea-scrollbar-size);
626
+ padding-inline-start: unset;
627
+ }
628
+
629
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
630
+ [data-offset-scrollbars='xy'],
631
+ [data-offset-scrollbars='x'],
632
+ [data-offset-scrollbars='present']
633
+ ):where([data-horizontal-hidden]) {
634
+ padding-bottom: 0;
635
+ }
636
+
637
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
638
+ [data-offset-scrollbars='xy'],
639
+ [data-offset-scrollbars='x'],
640
+ [data-offset-scrollbars='present']
641
+ ):not([data-horizontal-hidden]) {
642
+ padding-bottom: var(--scrollarea-scrollbar-size);
643
+ }
619
644
 
620
645
  .m_f8f631dd {
621
646
  min-width: 100%;
@@ -1523,14 +1548,6 @@ fieldset:disabled .mantine-active:active {
1523
1548
  color: var(--input-disabled-color);
1524
1549
  }
1525
1550
 
1526
- /* Fixes odd Firefox behavior in Select – https://github.com/mantinedev/mantine/issues/7476 */
1527
-
1528
- @supports (-moz-appearance: none) {
1529
- .m_8fb7ebe7[readonly][aria-haspopup] {
1530
- pointer-events: none;
1531
- }
1532
- }
1533
-
1534
1551
  .m_82577fc2 {
1535
1552
  pointer-events: var(--section-pointer-events);
1536
1553
  position: absolute;