@mantine/core 7.17.1 → 7.17.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.
Files changed (59) hide show
  1. package/cjs/components/Autocomplete/Autocomplete.cjs +7 -3
  2. package/cjs/components/Autocomplete/Autocomplete.cjs.map +1 -1
  3. package/cjs/components/Checkbox/Checkbox.cjs +9 -2
  4. package/cjs/components/Checkbox/Checkbox.cjs.map +1 -1
  5. package/cjs/components/Menu/Menu.cjs +2 -0
  6. package/cjs/components/Menu/Menu.cjs.map +1 -1
  7. package/cjs/components/MultiSelect/MultiSelect.cjs +8 -4
  8. package/cjs/components/MultiSelect/MultiSelect.cjs.map +1 -1
  9. package/cjs/components/Notification/Notification.cjs +2 -1
  10. package/cjs/components/Notification/Notification.cjs.map +1 -1
  11. package/cjs/components/Pill/Pill.cjs.map +1 -1
  12. package/cjs/components/ScrollArea/ScrollArea.cjs +26 -3
  13. package/cjs/components/ScrollArea/ScrollArea.cjs.map +1 -1
  14. package/cjs/components/SegmentedControl/SegmentedControl.cjs +6 -1
  15. package/cjs/components/SegmentedControl/SegmentedControl.cjs.map +1 -1
  16. package/cjs/components/Select/Select.cjs +10 -6
  17. package/cjs/components/Select/Select.cjs.map +1 -1
  18. package/cjs/components/TagsInput/TagsInput.cjs +10 -6
  19. package/cjs/components/TagsInput/TagsInput.cjs.map +1 -1
  20. package/cjs/components/Tooltip/Tooltip.cjs +2 -2
  21. package/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
  22. package/cjs/components/Transition/get-transition-styles/get-transition-styles.cjs +2 -0
  23. package/cjs/components/Transition/get-transition-styles/get-transition-styles.cjs.map +1 -1
  24. package/esm/components/Autocomplete/Autocomplete.mjs +7 -3
  25. package/esm/components/Autocomplete/Autocomplete.mjs.map +1 -1
  26. package/esm/components/Checkbox/Checkbox.mjs +9 -2
  27. package/esm/components/Checkbox/Checkbox.mjs.map +1 -1
  28. package/esm/components/Menu/Menu.mjs +2 -0
  29. package/esm/components/Menu/Menu.mjs.map +1 -1
  30. package/esm/components/MultiSelect/MultiSelect.mjs +8 -4
  31. package/esm/components/MultiSelect/MultiSelect.mjs.map +1 -1
  32. package/esm/components/Notification/Notification.mjs +2 -1
  33. package/esm/components/Notification/Notification.mjs.map +1 -1
  34. package/esm/components/Pill/Pill.mjs.map +1 -1
  35. package/esm/components/ScrollArea/ScrollArea.mjs +27 -4
  36. package/esm/components/ScrollArea/ScrollArea.mjs.map +1 -1
  37. package/esm/components/SegmentedControl/SegmentedControl.mjs +7 -2
  38. package/esm/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
  39. package/esm/components/Select/Select.mjs +10 -6
  40. package/esm/components/Select/Select.mjs.map +1 -1
  41. package/esm/components/TagsInput/TagsInput.mjs +10 -6
  42. package/esm/components/TagsInput/TagsInput.mjs.map +1 -1
  43. package/esm/components/Tooltip/Tooltip.mjs +2 -2
  44. package/esm/components/Tooltip/Tooltip.mjs.map +1 -1
  45. package/esm/components/Transition/get-transition-styles/get-transition-styles.mjs +2 -0
  46. package/esm/components/Transition/get-transition-styles/get-transition-styles.mjs.map +1 -1
  47. package/lib/components/Menu/Menu.d.ts +1 -0
  48. package/lib/components/Notification/Notification.d.ts +3 -0
  49. package/lib/components/Pill/Pill.d.ts +2 -1
  50. package/lib/components/ScrollArea/ScrollArea.d.ts +1 -1
  51. package/package.json +2 -2
  52. package/styles/AppShell.css +2 -0
  53. package/styles/AppShell.layer.css +2 -0
  54. package/styles/Input.css +0 -8
  55. package/styles/Input.layer.css +0 -8
  56. package/styles/ScrollArea.css +33 -8
  57. package/styles/ScrollArea.layer.css +33 -8
  58. package/styles.css +34 -15
  59. package/styles.layer.css +34 -15
package/styles/AppShell.layer.css CHANGED
@@ -4,6 +4,8 @@
4
4
  .m_89ab340[data-disabled] {
5
5
  --app-shell-header-offset: 0rem !important;
6
6
  --app-shell-navbar-offset: 0rem !important;
7
+ --app-shell-aside-offset: 0rem !important;
8
+ --app-shell-footer-offset: 0rem !important;
7
9
  }
8
10
  [data-mantine-color-scheme='light'] .m_89ab340 {
9
11
  --app-shell-border-color: var(--mantine-color-gray-3);
package/styles/Input.css CHANGED
@@ -222,14 +222,6 @@
222
222
  color: var(--input-disabled-color);
223
223
  }
224
224
 
225
- /* Fixes odd Firefox behavior in Select – https://github.com/mantinedev/mantine/issues/7476 */
226
-
227
- @supports (-moz-appearance: none) {
228
- .m_8fb7ebe7[readonly][aria-haspopup] {
229
- pointer-events: none;
230
- }
231
- }
232
-
233
225
  .m_82577fc2 {
234
226
  pointer-events: var(--section-pointer-events);
235
227
  position: absolute;
package/styles/Input.layer.css CHANGED
@@ -222,14 +222,6 @@
222
222
  color: var(--input-disabled-color);
223
223
  }
224
224
 
225
- /* Fixes odd Firefox behavior in Select – https://github.com/mantinedev/mantine/issues/7476 */
226
-
227
- @supports (-moz-appearance: none) {
228
- .m_8fb7ebe7[readonly][aria-haspopup] {
229
- pointer-events: none;
230
- }
231
- }
232
-
233
225
  .m_82577fc2 {
234
226
  pointer-events: var(--section-pointer-events);
235
227
  position: absolute;
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
@@ -607,14 +607,39 @@ fieldset:disabled .mantine-active:active {
607
607
  display: none;
608
608
  }
609
609
 
610
- .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='y']) {
611
- padding-inline-end: var(--scrollarea-scrollbar-size);
612
- padding-inline-start: unset;
613
- }
610
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
611
+ [data-offset-scrollbars='xy'],
612
+ [data-offset-scrollbars='y'],
613
+ [data-offset-scrollbars='present']
614
+ ):where([data-vertical-hidden]) {
615
+ padding-inline-end: 0;
616
+ padding-inline-start: 0;
617
+ }
614
618
 
615
- .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='x']) {
616
- padding-bottom: var(--scrollarea-scrollbar-size);
617
- }
619
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
620
+ [data-offset-scrollbars='xy'],
621
+ [data-offset-scrollbars='y'],
622
+ [data-offset-scrollbars='present']
623
+ ):not([data-vertical-hidden]) {
624
+ padding-inline-end: var(--scrollarea-scrollbar-size);
625
+ padding-inline-start: unset;
626
+ }
627
+
628
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
629
+ [data-offset-scrollbars='xy'],
630
+ [data-offset-scrollbars='x'],
631
+ [data-offset-scrollbars='present']
632
+ ):where([data-horizontal-hidden]) {
633
+ padding-bottom: 0;
634
+ }
635
+
636
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
637
+ [data-offset-scrollbars='xy'],
638
+ [data-offset-scrollbars='x'],
639
+ [data-offset-scrollbars='present']
640
+ ):not([data-horizontal-hidden]) {
641
+ padding-bottom: var(--scrollarea-scrollbar-size);
642
+ }
618
643
 
619
644
  .m_f8f631dd {
620
645
  min-width: 100%;
@@ -1518,14 +1543,6 @@ fieldset:disabled .mantine-active:active {
1518
1543
  color: var(--input-disabled-color);
1519
1544
  }
1520
1545
 
1521
- /* Fixes odd Firefox behavior in Select – https://github.com/mantinedev/mantine/issues/7476 */
1522
-
1523
- @supports (-moz-appearance: none) {
1524
- .m_8fb7ebe7[readonly][aria-haspopup] {
1525
- pointer-events: none;
1526
- }
1527
- }
1528
-
1529
1546
  .m_82577fc2 {
1530
1547
  pointer-events: var(--section-pointer-events);
1531
1548
  position: absolute;
@@ -2127,6 +2144,8 @@ fieldset:disabled .mantine-active:active {
2127
2144
  .m_89ab340[data-disabled] {
2128
2145
  --app-shell-header-offset: 0rem !important;
2129
2146
  --app-shell-navbar-offset: 0rem !important;
2147
+ --app-shell-aside-offset: 0rem !important;
2148
+ --app-shell-footer-offset: 0rem !important;
2130
2149
  }
2131
2150
  [data-mantine-color-scheme='light'] .m_89ab340 {
2132
2151
  --app-shell-border-color: var(--mantine-color-gray-3);
package/styles.layer.css CHANGED
@@ -607,14 +607,39 @@ fieldset:disabled .mantine-active:active {
607
607
  display: none;
608
608
  }
609
609
 
610
- .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='y']) {
611
- padding-inline-end: var(--scrollarea-scrollbar-size);
612
- padding-inline-start: unset;
613
- }
610
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
611
+ [data-offset-scrollbars='xy'],
612
+ [data-offset-scrollbars='y'],
613
+ [data-offset-scrollbars='present']
614
+ ):where([data-vertical-hidden]) {
615
+ padding-inline-end: 0;
616
+ padding-inline-start: 0;
617
+ }
614
618
 
615
- .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='x']) {
616
- padding-bottom: var(--scrollarea-scrollbar-size);
617
- }
619
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
620
+ [data-offset-scrollbars='xy'],
621
+ [data-offset-scrollbars='y'],
622
+ [data-offset-scrollbars='present']
623
+ ):not([data-vertical-hidden]) {
624
+ padding-inline-end: var(--scrollarea-scrollbar-size);
625
+ padding-inline-start: unset;
626
+ }
627
+
628
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
629
+ [data-offset-scrollbars='xy'],
630
+ [data-offset-scrollbars='x'],
631
+ [data-offset-scrollbars='present']
632
+ ):where([data-horizontal-hidden]) {
633
+ padding-bottom: 0;
634
+ }
635
+
636
+ .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
637
+ [data-offset-scrollbars='xy'],
638
+ [data-offset-scrollbars='x'],
639
+ [data-offset-scrollbars='present']
640
+ ):not([data-horizontal-hidden]) {
641
+ padding-bottom: var(--scrollarea-scrollbar-size);
642
+ }
618
643
 
619
644
  .m_f8f631dd {
620
645
  min-width: 100%;
@@ -1518,14 +1543,6 @@ fieldset:disabled .mantine-active:active {
1518
1543
  color: var(--input-disabled-color);
1519
1544
  }
1520
1545
 
1521
- /* Fixes odd Firefox behavior in Select – https://github.com/mantinedev/mantine/issues/7476 */
1522
-
1523
- @supports (-moz-appearance: none) {
1524
- .m_8fb7ebe7[readonly][aria-haspopup] {
1525
- pointer-events: none;
1526
- }
1527
- }
1528
-
1529
1546
  .m_82577fc2 {
1530
1547
  pointer-events: var(--section-pointer-events);
1531
1548
  position: absolute;
@@ -2127,6 +2144,8 @@ fieldset:disabled .mantine-active:active {
2127
2144
  .m_89ab340[data-disabled] {
2128
2145
  --app-shell-header-offset: 0rem !important;
2129
2146
  --app-shell-navbar-offset: 0rem !important;
2147
+ --app-shell-aside-offset: 0rem !important;
2148
+ --app-shell-footer-offset: 0rem !important;
2130
2149
  }
2131
2150
  [data-mantine-color-scheme='light'] .m_89ab340 {
2132
2151
  --app-shell-border-color: var(--mantine-color-gray-3);