@mantine/core 7.7.1 → 7.7.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 (44) hide show
  1. package/cjs/components/Avatar/Avatar.cjs.map +1 -1
  2. package/cjs/components/CloseButton/CloseButton.cjs +1 -1
  3. package/cjs/components/CloseButton/CloseButton.cjs.map +1 -1
  4. package/cjs/components/NumberInput/NumberInput.cjs +7 -0
  5. package/cjs/components/NumberInput/NumberInput.cjs.map +1 -1
  6. package/cjs/components/PinInput/PinInput.cjs +2 -0
  7. package/cjs/components/PinInput/PinInput.cjs.map +1 -1
  8. package/cjs/components/ScrollArea/ScrollArea.cjs +4 -4
  9. package/cjs/components/ScrollArea/ScrollArea.cjs.map +1 -1
  10. package/cjs/components/Tabs/Tabs.cjs.map +1 -1
  11. package/cjs/components/TagsInput/TagsInput.cjs +1 -1
  12. package/cjs/components/TagsInput/TagsInput.cjs.map +1 -1
  13. package/cjs/core/MantineProvider/MantineProvider.cjs.map +1 -1
  14. package/cjs/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs.map +1 -1
  15. package/esm/components/Avatar/Avatar.mjs.map +1 -1
  16. package/esm/components/CloseButton/CloseButton.mjs +1 -1
  17. package/esm/components/CloseButton/CloseButton.mjs.map +1 -1
  18. package/esm/components/NumberInput/NumberInput.mjs +7 -0
  19. package/esm/components/NumberInput/NumberInput.mjs.map +1 -1
  20. package/esm/components/PinInput/PinInput.mjs +2 -0
  21. package/esm/components/PinInput/PinInput.mjs.map +1 -1
  22. package/esm/components/ScrollArea/ScrollArea.mjs +4 -4
  23. package/esm/components/ScrollArea/ScrollArea.mjs.map +1 -1
  24. package/esm/components/Tabs/Tabs.mjs.map +1 -1
  25. package/esm/components/TagsInput/TagsInput.mjs +1 -1
  26. package/esm/components/TagsInput/TagsInput.mjs.map +1 -1
  27. package/esm/core/MantineProvider/MantineProvider.mjs.map +1 -1
  28. package/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs.map +1 -1
  29. package/lib/components/Avatar/Avatar.d.ts +1 -1
  30. package/lib/components/PinInput/PinInput.d.ts +2 -0
  31. package/lib/components/Tabs/Tabs.d.ts +1 -1
  32. package/lib/core/MantineProvider/MantineProvider.d.ts +1 -1
  33. package/lib/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.d.ts +1 -1
  34. package/package.json +3 -3
  35. package/styles/AppShell.css +3 -2
  36. package/styles/AppShell.layer.css +3 -2
  37. package/styles/CloseButton.css +10 -4
  38. package/styles/CloseButton.layer.css +10 -4
  39. package/styles/ScrollArea.css +2 -2
  40. package/styles/ScrollArea.layer.css +2 -2
  41. package/styles/Tabs.css +1 -1
  42. package/styles/Tabs.layer.css +1 -1
  43. package/styles.css +16 -9
  44. package/styles.layer.css +16 -9
package/lib/components/PinInput/PinInput.d.ts CHANGED
@@ -53,6 +53,8 @@ export interface PinInputProps extends BoxProps, StylesApiProps<PinInputFactory>
53
53
  ariaLabel?: string;
54
54
  /** Props passed down to the hidden input */
55
55
  hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
56
+ /** Assigns ref of the root element */
57
+ rootRef?: React.ForwardedRef<HTMLDivElement>;
56
58
  }
57
59
  export type PinInputFactory = Factory<{
58
60
  props: PinInputProps;
package/lib/components/Tabs/Tabs.d.ts CHANGED
@@ -28,7 +28,7 @@ export interface TabsProps extends BoxProps, StylesApiProps<TabsFactory>, Elemen
28
28
  /** Determines whether tab can be deactivated, `false` by default */
29
29
  allowTabDeactivation?: boolean;
30
30
  /** Tabs content */
31
- children: React.ReactNode;
31
+ children?: React.ReactNode;
32
32
  /** Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants */
33
33
  color?: MantineColor;
34
34
  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
package/lib/core/MantineProvider/MantineProvider.d.ts CHANGED
@@ -41,7 +41,7 @@ export interface HeadlessMantineProviderProps {
41
41
  /** Theme override object */
42
42
  theme?: MantineThemeOverride;
43
43
  /** Your application */
44
- children: React.ReactNode;
44
+ children?: React.ReactNode;
45
45
  }
46
46
  export declare function HeadlessMantineProvider({ children, theme }: HeadlessMantineProviderProps): React.JSX.Element;
47
47
  export declare namespace HeadlessMantineProvider {
package/lib/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.d.ts CHANGED
@@ -9,7 +9,7 @@ export interface MantineThemeProviderProps {
9
9
  /** Theme override object */
10
10
  theme?: MantineThemeOverride;
11
11
  /** Your application or part of the application that requires different theme */
12
- children: React.ReactNode;
12
+ children?: React.ReactNode;
13
13
  }
14
14
  export declare function MantineThemeProvider({ theme, children, inherit, }: MantineThemeProviderProps): React.JSX.Element;
15
15
  export declare namespace MantineThemeProvider {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine/core",
3
- "version": "7.7.1",
3
+ "version": "7.7.2",
4
4
  "description": "React components library focused on usability, accessibility and developer experience",
5
5
  "homepage": "https://mantine.dev/",
6
6
  "license": "MIT",
@@ -43,7 +43,7 @@
43
43
  "directory": "packages/@mantine/core"
44
44
  },
45
45
  "peerDependencies": {
46
- "@mantine/hooks": "7.7.1",
46
+ "@mantine/hooks": "7.7.2",
47
47
  "react": "^18.2.0",
48
48
  "react-dom": "^18.2.0"
49
49
  },
@@ -57,6 +57,6 @@
57
57
  },
58
58
  "devDependencies": {
59
59
  "@mantine-tests/core": "1.1.0",
60
- "@mantine/hooks": "7.7.1"
60
+ "@mantine/hooks": "7.7.2"
61
61
  }
62
62
  }
package/styles/AppShell.css CHANGED
@@ -103,8 +103,9 @@
103
103
  }
104
104
 
105
105
  .m_3840c879 {
106
- bottom: env(safe-area-inset-bottom);
107
- height: var(--app-shell-footer-height);
106
+ bottom: 0;
107
+ height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));
108
+ padding-bottom: env(safe-area-inset-bottom);
108
109
  transform: var(--app-shell-footer-transform);
109
110
  z-index: var(--app-shell-footer-z-index);
110
111
  }
package/styles/AppShell.layer.css CHANGED
@@ -103,8 +103,9 @@
103
103
  }
104
104
 
105
105
  .m_3840c879 {
106
- bottom: env(safe-area-inset-bottom);
107
- height: var(--app-shell-footer-height);
106
+ bottom: 0;
107
+ height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));
108
+ padding-bottom: env(safe-area-inset-bottom);
108
109
  transform: var(--app-shell-footer-transform);
109
110
  z-index: var(--app-shell-footer-z-index);
110
111
  }
package/styles/CloseButton.css CHANGED
@@ -31,22 +31,28 @@
31
31
  color: var(--mantine-color-dark-1);
32
32
  }
33
33
 
34
+ .m_86a44da5[data-disabled],
35
+ .m_86a44da5:disabled {
36
+ cursor: not-allowed;
37
+ opacity: 0.6;
38
+ }
39
+
34
40
  @media (hover: hover) {
35
- :where([data-mantine-color-scheme='light']) .m_220c80f2:hover {
41
+ :where([data-mantine-color-scheme='light']) .m_220c80f2:not([data-disabled], :disabled):hover {
36
42
  background-color: var(--mantine-color-gray-0);
37
43
  }
38
44
 
39
- :where([data-mantine-color-scheme='dark']) .m_220c80f2:hover {
45
+ :where([data-mantine-color-scheme='dark']) .m_220c80f2:not([data-disabled], :disabled):hover {
40
46
  background-color: var(--mantine-color-dark-6);
41
47
  }
42
48
  }
43
49
 
44
50
  @media (hover: none) {
45
- :where([data-mantine-color-scheme='light']) .m_220c80f2:active {
51
+ :where([data-mantine-color-scheme='light']) .m_220c80f2:not([data-disabled], :disabled):active {
46
52
  background-color: var(--mantine-color-gray-0);
47
53
  }
48
54
 
49
- :where([data-mantine-color-scheme='dark']) .m_220c80f2:active {
55
+ :where([data-mantine-color-scheme='dark']) .m_220c80f2:not([data-disabled], :disabled):active {
50
56
  background-color: var(--mantine-color-dark-6);
51
57
  }
52
58
  }
package/styles/CloseButton.layer.css CHANGED
@@ -31,22 +31,28 @@
31
31
  color: var(--mantine-color-dark-1);
32
32
  }
33
33
 
34
+ .m_86a44da5[data-disabled],
35
+ .m_86a44da5:disabled {
36
+ cursor: not-allowed;
37
+ opacity: 0.6;
38
+ }
39
+
34
40
  @media (hover: hover) {
35
- :where([data-mantine-color-scheme='light']) .m_220c80f2:hover {
41
+ :where([data-mantine-color-scheme='light']) .m_220c80f2:not([data-disabled], :disabled):hover {
36
42
  background-color: var(--mantine-color-gray-0);
37
43
  }
38
44
 
39
- :where([data-mantine-color-scheme='dark']) .m_220c80f2:hover {
45
+ :where([data-mantine-color-scheme='dark']) .m_220c80f2:not([data-disabled], :disabled):hover {
40
46
  background-color: var(--mantine-color-dark-6);
41
47
  }
42
48
  }
43
49
 
44
50
  @media (hover: none) {
45
- :where([data-mantine-color-scheme='light']) .m_220c80f2:active {
51
+ :where([data-mantine-color-scheme='light']) .m_220c80f2:not([data-disabled], :disabled):active {
46
52
  background-color: var(--mantine-color-gray-0);
47
53
  }
48
54
 
49
- :where([data-mantine-color-scheme='dark']) .m_220c80f2:active {
55
+ :where([data-mantine-color-scheme='dark']) .m_220c80f2:not([data-disabled], :disabled):active {
50
56
  background-color: var(--mantine-color-dark-6);
51
57
  }
52
58
  }
package/styles/ScrollArea.css CHANGED
@@ -96,8 +96,8 @@
96
96
  height: var(--scrollarea-scrollbar-size);
97
97
  flex-direction: column;
98
98
  bottom: 0;
99
- inset-inline-end: 0;
100
- inset-inline-start: var(--sa-corner-height);
99
+ inset-inline-start: 0;
100
+ inset-inline-end: var(--sa-corner-width);
101
101
  }
102
102
 
103
103
  .m_d8b5e363 {
package/styles/ScrollArea.layer.css CHANGED
@@ -96,8 +96,8 @@
96
96
  height: var(--scrollarea-scrollbar-size);
97
97
  flex-direction: column;
98
98
  bottom: 0;
99
- inset-inline-end: 0;
100
- inset-inline-start: var(--sa-corner-height);
99
+ inset-inline-start: 0;
100
+ inset-inline-end: var(--sa-corner-width);
101
101
  }
102
102
 
103
103
  .m_d8b5e363 {
package/styles/Tabs.css CHANGED
@@ -7,7 +7,7 @@
7
7
  --tabs-panel-grow: unset;
8
8
  --tabs-display: block;
9
9
  --tabs-flex-direction: row;
10
- --tabs-list-border-width: 0;
10
+ --tabs-list-border-width: 0rem;
11
11
  --tabs-list-border-size: 0 0 var(--tabs-list-border-width) 0;
12
12
  --tabs-list-gap: unset;
13
13
 
package/styles/Tabs.layer.css CHANGED
@@ -7,7 +7,7 @@
7
7
  --tabs-panel-grow: unset;
8
8
  --tabs-display: block;
9
9
  --tabs-flex-direction: row;
10
- --tabs-list-border-width: 0;
10
+ --tabs-list-border-width: 0rem;
11
11
  --tabs-list-border-size: 0 0 var(--tabs-list-border-width) 0;
12
12
  --tabs-list-gap: unset;
13
13
 
package/styles.css CHANGED
@@ -681,8 +681,8 @@ body {
681
681
  height: var(--scrollarea-scrollbar-size);
682
682
  flex-direction: column;
683
683
  bottom: 0;
684
- inset-inline-end: 0;
685
- inset-inline-start: var(--sa-corner-height);
684
+ inset-inline-start: 0;
685
+ inset-inline-end: var(--sa-corner-width);
686
686
  }
687
687
 
688
688
  .m_d8b5e363 {
@@ -1123,22 +1123,28 @@ body {
1123
1123
  color: var(--mantine-color-dark-1);
1124
1124
  }
1125
1125
 
1126
+ .m_86a44da5[data-disabled],
1127
+ .m_86a44da5:disabled {
1128
+ cursor: not-allowed;
1129
+ opacity: 0.6;
1130
+ }
1131
+
1126
1132
  @media (hover: hover) {
1127
- :where([data-mantine-color-scheme='light']) .m_220c80f2:hover {
1133
+ :where([data-mantine-color-scheme='light']) .m_220c80f2:not([data-disabled], :disabled):hover {
1128
1134
  background-color: var(--mantine-color-gray-0);
1129
1135
  }
1130
1136
 
1131
- :where([data-mantine-color-scheme='dark']) .m_220c80f2:hover {
1137
+ :where([data-mantine-color-scheme='dark']) .m_220c80f2:not([data-disabled], :disabled):hover {
1132
1138
  background-color: var(--mantine-color-dark-6);
1133
1139
  }
1134
1140
  }
1135
1141
 
1136
1142
  @media (hover: none) {
1137
- :where([data-mantine-color-scheme='light']) .m_220c80f2:active {
1143
+ :where([data-mantine-color-scheme='light']) .m_220c80f2:not([data-disabled], :disabled):active {
1138
1144
  background-color: var(--mantine-color-gray-0);
1139
1145
  }
1140
1146
 
1141
- :where([data-mantine-color-scheme='dark']) .m_220c80f2:active {
1147
+ :where([data-mantine-color-scheme='dark']) .m_220c80f2:not([data-disabled], :disabled):active {
1142
1148
  background-color: var(--mantine-color-dark-6);
1143
1149
  }
1144
1150
  }
@@ -2014,8 +2020,9 @@ body {
2014
2020
  }
2015
2021
 
2016
2022
  .m_3840c879 {
2017
- bottom: env(safe-area-inset-bottom);
2018
- height: var(--app-shell-footer-height);
2023
+ bottom: 0;
2024
+ height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));
2025
+ padding-bottom: env(safe-area-inset-bottom);
2019
2026
  transform: var(--app-shell-footer-transform);
2020
2027
  z-index: var(--app-shell-footer-z-index);
2021
2028
  }
@@ -6174,7 +6181,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
6174
6181
  --tabs-panel-grow: unset;
6175
6182
  --tabs-display: block;
6176
6183
  --tabs-flex-direction: row;
6177
- --tabs-list-border-width: 0;
6184
+ --tabs-list-border-width: 0rem;
6178
6185
  --tabs-list-border-size: 0 0 var(--tabs-list-border-width) 0;
6179
6186
  --tabs-list-gap: unset;
6180
6187
 
package/styles.layer.css CHANGED
@@ -681,8 +681,8 @@ body {
681
681
  height: var(--scrollarea-scrollbar-size);
682
682
  flex-direction: column;
683
683
  bottom: 0;
684
- inset-inline-end: 0;
685
- inset-inline-start: var(--sa-corner-height);
684
+ inset-inline-start: 0;
685
+ inset-inline-end: var(--sa-corner-width);
686
686
  }
687
687
 
688
688
  .m_d8b5e363 {
@@ -1123,22 +1123,28 @@ body {
1123
1123
  color: var(--mantine-color-dark-1);
1124
1124
  }
1125
1125
 
1126
+ .m_86a44da5[data-disabled],
1127
+ .m_86a44da5:disabled {
1128
+ cursor: not-allowed;
1129
+ opacity: 0.6;
1130
+ }
1131
+
1126
1132
  @media (hover: hover) {
1127
- :where([data-mantine-color-scheme='light']) .m_220c80f2:hover {
1133
+ :where([data-mantine-color-scheme='light']) .m_220c80f2:not([data-disabled], :disabled):hover {
1128
1134
  background-color: var(--mantine-color-gray-0);
1129
1135
  }
1130
1136
 
1131
- :where([data-mantine-color-scheme='dark']) .m_220c80f2:hover {
1137
+ :where([data-mantine-color-scheme='dark']) .m_220c80f2:not([data-disabled], :disabled):hover {
1132
1138
  background-color: var(--mantine-color-dark-6);
1133
1139
  }
1134
1140
  }
1135
1141
 
1136
1142
  @media (hover: none) {
1137
- :where([data-mantine-color-scheme='light']) .m_220c80f2:active {
1143
+ :where([data-mantine-color-scheme='light']) .m_220c80f2:not([data-disabled], :disabled):active {
1138
1144
  background-color: var(--mantine-color-gray-0);
1139
1145
  }
1140
1146
 
1141
- :where([data-mantine-color-scheme='dark']) .m_220c80f2:active {
1147
+ :where([data-mantine-color-scheme='dark']) .m_220c80f2:not([data-disabled], :disabled):active {
1142
1148
  background-color: var(--mantine-color-dark-6);
1143
1149
  }
1144
1150
  }
@@ -2014,8 +2020,9 @@ body {
2014
2020
  }
2015
2021
 
2016
2022
  .m_3840c879 {
2017
- bottom: env(safe-area-inset-bottom);
2018
- height: var(--app-shell-footer-height);
2023
+ bottom: 0;
2024
+ height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));
2025
+ padding-bottom: env(safe-area-inset-bottom);
2019
2026
  transform: var(--app-shell-footer-transform);
2020
2027
  z-index: var(--app-shell-footer-z-index);
2021
2028
  }
@@ -6174,7 +6181,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
6174
6181
  --tabs-panel-grow: unset;
6175
6182
  --tabs-display: block;
6176
6183
  --tabs-flex-direction: row;
6177
- --tabs-list-border-width: 0;
6184
+ --tabs-list-border-width: 0rem;
6178
6185
  --tabs-list-border-size: 0 0 var(--tabs-list-border-width) 0;
6179
6186
  --tabs-list-gap: unset;
6180
6187