@mantine/core 9.2.1 → 9.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.2.1",
+  "version": "9.3.0",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.2.1",
+    "@mantine/hooks": "9.3.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

package/styles/Blockquote.css

@@ -3,6 +3,7 @@
 
   position: relative;
   margin: 0;
+  text-wrap: var(--bq-text-wrap, var(--mantine-text-wrap, wrap));
   border-inline-start: var(--blockquote-border);
   border-start-end-radius: var(--bq-radius);
   border-end-end-radius: var(--bq-radius);

package/styles/Blockquote.layer.css

@@ -3,6 +3,7 @@
 
   position: relative;
   margin: 0;
+  text-wrap: var(--bq-text-wrap, var(--mantine-text-wrap, wrap));
   border-inline-start: var(--blockquote-border);
   border-start-end-radius: var(--bq-radius);
   border-end-end-radius: var(--bq-radius);

package/styles/Combobox.css

@@ -15,6 +15,14 @@
     display: none;
   }
 
+  .m_88b62a41[data-floating-height='viewport']:not([data-hidden]) {
+    --combobox-floating-options-max-height: calc(
+      var(--combobox-floating-max-height, 100vh) - var(--combobox-padding) * 2
+    );
+    max-height: var(--combobox-floating-max-height, none);
+    overflow: hidden;
+  }
+
 /* Variables must be both on dropdown and options to support usage of Combobox.Options without Combobox.Dropdown */
 .m_88b62a41,
 .m_b2821a6e {

package/styles/Combobox.layer.css

@@ -15,6 +15,14 @@
     display: none;
   }
 
+  .m_88b62a41[data-floating-height='viewport']:not([data-hidden]) {
+    --combobox-floating-options-max-height: calc(
+      var(--combobox-floating-max-height, 100vh) - var(--combobox-padding) * 2
+    );
+    max-height: var(--combobox-floating-max-height, none);
+    overflow: hidden;
+  }
+
 /* Variables must be both on dropdown and options to support usage of Combobox.Options without Combobox.Dropdown */
 .m_88b62a41,
 .m_b2821a6e {

package/styles/Input.css

@@ -19,7 +19,6 @@
   --input-radius: var(--mantine-radius-default);
 
   --input-cursor: text;
-  --input-text-align: left;
   --input-line-height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)));
   --input-padding: calc(var(--input-height) / 3);
   --input-padding-inline-start: var(--input-padding);
@@ -57,6 +56,10 @@
     --input-cursor: pointer;
   }
 
+  .m_6c018570[data-with-bottom-section] {
+    --input-bottom-section-height: 28px;
+  }
+
   .m_6c018570[data-multiline] {
     --input-padding-y-xs: 4.5px;
     --input-padding-y-sm: 5.5px;
@@ -144,11 +147,15 @@
 }
 
   :where([dir="rtl"]) .m_6c018570 {
-    --input-text-align: right;
     --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
     --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
 }
 
+  .m_6c018570[dir='ltr'] {
+    --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
+    --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
+  }
+
 .m_8fb7ebe7 {
   -webkit-tap-highlight-color: transparent;
   appearance: none;
@@ -157,7 +164,7 @@
   width: 100%;
   transition: border-color 100ms ease;
 
-  text-align: var(--input-text-align);
+  text-align: start;
   color: var(--input-color);
   border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
   background-color: var(--input-bg);
@@ -237,6 +244,26 @@
     caret-color: transparent;
   }
 
+[data-with-bottom-section] .m_8fb7ebe7 {
+    padding-bottom: calc(var(--input-padding-y, 0rem) + var(--input-bottom-section-height));
+  }
+
+.m_93f4ed57 {
+  position: absolute;
+  bottom: 1px;
+  left: 1px;
+  right: 1px;
+  height: var(--input-bottom-section-height);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-inline: var(--input-padding);
+  border-radius: 0 0 var(--input-radius) var(--input-radius);
+  pointer-events: all;
+  color: var(--mantine-color-dimmed);
+  font-size: var(--input-fz, var(--mantine-font-size-sm));
+}
+
 .m_82577fc2 {
   pointer-events: var(--section-pointer-events);
   position: absolute;

package/styles/Input.layer.css

@@ -19,7 +19,6 @@
   --input-radius: var(--mantine-radius-default);
 
   --input-cursor: text;
-  --input-text-align: left;
   --input-line-height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)));
   --input-padding: calc(var(--input-height) / 3);
   --input-padding-inline-start: var(--input-padding);
@@ -57,6 +56,10 @@
     --input-cursor: pointer;
   }
 
+  .m_6c018570[data-with-bottom-section] {
+    --input-bottom-section-height: 28px;
+  }
+
   .m_6c018570[data-multiline] {
     --input-padding-y-xs: 4.5px;
     --input-padding-y-sm: 5.5px;
@@ -144,11 +147,15 @@
 }
 
   :where([dir="rtl"]) .m_6c018570 {
-    --input-text-align: right;
     --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
     --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
 }
 
+  .m_6c018570[dir='ltr'] {
+    --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
+    --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
+  }
+
 .m_8fb7ebe7 {
   -webkit-tap-highlight-color: transparent;
   appearance: none;
@@ -157,7 +164,7 @@
   width: 100%;
   transition: border-color 100ms ease;
 
-  text-align: var(--input-text-align);
+  text-align: start;
   color: var(--input-color);
   border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
   background-color: var(--input-bg);
@@ -237,6 +244,26 @@
     caret-color: transparent;
   }
 
+[data-with-bottom-section] .m_8fb7ebe7 {
+    padding-bottom: calc(var(--input-padding-y, 0rem) + var(--input-bottom-section-height));
+  }
+
+.m_93f4ed57 {
+  position: absolute;
+  bottom: 1px;
+  left: 1px;
+  right: 1px;
+  height: var(--input-bottom-section-height);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-inline: var(--input-padding);
+  border-radius: 0 0 var(--input-radius) var(--input-radius);
+  pointer-events: all;
+  color: var(--mantine-color-dimmed);
+  font-size: var(--input-fz, var(--mantine-font-size-sm));
+}
+
 .m_82577fc2 {
   pointer-events: var(--section-pointer-events);
   position: absolute;

package/styles/Menu.css

@@ -41,11 +41,11 @@
     cursor: not-allowed;
   }
 
-:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where(:hover, :focus, [data-menu-active]):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
 }
 
-:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where(:hover, :focus, [data-menu-active]):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
 }
 
@@ -53,10 +53,49 @@
     padding-inline-end: 5px;
   }
 
+.m_ef8769b6 {
+  --menu-search-padding: var(--popover-padding, 4px);
+
+  margin-inline: calc(var(--menu-search-padding) * -1);
+  margin-top: calc(var(--menu-search-padding) * -1);
+  width: calc(100% + var(--menu-search-padding) * 2);
+  border-top-width: 0;
+  border-inline-width: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  margin-bottom: var(--menu-search-padding);
+}
+
+:where([data-mantine-color-scheme='light']) .m_ef8769b6, :where([data-mantine-color-scheme='light']) .m_ef8769b6:focus {
+      border-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_ef8769b6, :where([data-mantine-color-scheme='dark']) .m_ef8769b6:focus {
+      border-color: var(--mantine-color-dark-4);
+}
+
+:where([data-mantine-color-scheme='light']) .m_ef8769b6 {
+    background-color: var(--mantine-color-white);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_ef8769b6 {
+    background-color: var(--mantine-color-dark-7);
+}
+
 .m_5476e0d3 {
   flex: 1;
 }
 
+.m_8395186e {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-end: 8px;
+}
+
 .m_8b75e504 {
   display: flex;
   justify-content: center;

package/styles/Menu.layer.css

@@ -41,11 +41,11 @@
     cursor: not-allowed;
   }
 
-:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where(:hover, :focus, [data-menu-active]):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
 }
 
-:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where(:hover, :focus, [data-menu-active]):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
 }
 
@@ -53,10 +53,49 @@
     padding-inline-end: 5px;
   }
 
+.m_ef8769b6 {
+  --menu-search-padding: var(--popover-padding, 4px);
+
+  margin-inline: calc(var(--menu-search-padding) * -1);
+  margin-top: calc(var(--menu-search-padding) * -1);
+  width: calc(100% + var(--menu-search-padding) * 2);
+  border-top-width: 0;
+  border-inline-width: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  margin-bottom: var(--menu-search-padding);
+}
+
+:where([data-mantine-color-scheme='light']) .m_ef8769b6, :where([data-mantine-color-scheme='light']) .m_ef8769b6:focus {
+      border-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_ef8769b6, :where([data-mantine-color-scheme='dark']) .m_ef8769b6:focus {
+      border-color: var(--mantine-color-dark-4);
+}
+
+:where([data-mantine-color-scheme='light']) .m_ef8769b6 {
+    background-color: var(--mantine-color-white);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_ef8769b6 {
+    background-color: var(--mantine-color-dark-7);
+}
+
 .m_5476e0d3 {
   flex: 1;
 }
 
+.m_8395186e {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-end: 8px;
+}
+
 .m_8b75e504 {
   display: flex;
   justify-content: center;

package/styles/Pagination.css

@@ -16,6 +16,10 @@
   --pagination-active-bg: var(--mantine-primary-color-filled);
 }
 
+  .m_4addd315:where([data-layout='responsive']) {
+    container-type: inline-size;
+  }
+
 .m_326d024a {
   display: flex;
   align-items: center;
@@ -101,3 +105,32 @@
   justify-content: center;
   pointer-events: none;
 }
+
+.m_105fdbed {
+  display: flex;
+  gap: inherit;
+  align-items: center;
+}
+
+@container (width <= 400px) {
+
+.m_105fdbed {
+    display: none
+}
+  }
+
+.m_10817321 {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  height: var(--pagination-control-size);
+  font-size: var(--pagination-control-fz);
+  white-space: nowrap;
+}
+
+@container (width <= 400px) {
+
+.m_10817321 {
+    display: flex
+}
+  }

package/styles/Pagination.layer.css

@@ -16,6 +16,10 @@
   --pagination-active-bg: var(--mantine-primary-color-filled);
 }
 
+  .m_4addd315:where([data-layout='responsive']) {
+    container-type: inline-size;
+  }
+
 .m_326d024a {
   display: flex;
   align-items: center;
@@ -101,4 +105,33 @@
   justify-content: center;
   pointer-events: none;
 }
+
+.m_105fdbed {
+  display: flex;
+  gap: inherit;
+  align-items: center;
+}
+
+@container (width <= 400px) {
+
+.m_105fdbed {
+    display: none
+}
+  }
+
+.m_10817321 {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  height: var(--pagination-control-size);
+  font-size: var(--pagination-control-fz);
+  white-space: nowrap;
+}
+
+@container (width <= 400px) {
+
+.m_10817321 {
+    display: flex
+}
+  }
 }

package/styles/Pill.css

@@ -98,13 +98,11 @@
 
 .m_1e0e6180 {
   cursor: inherit;
+  display: block;
   overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  align-items: center;
   height: 100%;
-  text-box-trim: trim-both;
-  text-box-edge: cap alphabetic;
+  line-height: var(--pill-height);
+  text-overflow: ellipsis;
 }
 
 .m_ae386778 {

package/styles/Pill.layer.css

@@ -98,13 +98,11 @@
 
 .m_1e0e6180 {
   cursor: inherit;
+  display: block;
   overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  align-items: center;
   height: 100%;
-  text-box-trim: trim-both;
-  text-box-edge: cap alphabetic;
+  line-height: var(--pill-height);
+  text-overflow: ellipsis;
 }
 
 .m_ae386778 {

package/styles/Splitter.css

@@ -0,0 +1,76 @@
+.m_19e66008 {
+  display: flex;
+}
+
+  .m_19e66008:where([data-orientation='horizontal']) {
+    flex-direction: row;
+  }
+
+  .m_19e66008:where([data-orientation='vertical']) {
+    flex-direction: column;
+  }
+
+.m_19e5428e {
+  flex-grow: 0;
+  flex-shrink: 1;
+  overflow: auto;
+}
+
+.m_27f81bce {
+  flex: 0 0 var(--splitter-line-size, calc(0.125rem * var(--mantine-scale)));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  touch-action: none;
+  outline: none;
+  background-color: var(--splitter-handle-color, var(--mantine-color-body));
+}
+
+.m_27f81bce:where([data-orientation='horizontal']) {
+    cursor: col-resize;
+  }
+
+.m_27f81bce:where([data-orientation='vertical']) {
+    cursor: row-resize;
+  }
+
+.m_22feb770 {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 1000px;
+  color: var(--mantine-color-dimmed);
+  transition: color 100ms ease;
+}
+
+:where([data-mantine-color-scheme='light']) .m_22feb770 {
+    background-color: var(--mantine-color-white);
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_22feb770 {
+    background-color: var(--mantine-color-dark-6);
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+}
+
+.m_22feb770:where([data-orientation='horizontal']) {
+    width: calc(0.75rem * var(--mantine-scale));
+    height: calc(3.75rem * var(--mantine-scale));
+  }
+
+.m_22feb770:where([data-orientation='vertical']) {
+    width: calc(3.75rem * var(--mantine-scale));
+    height: calc(0.75rem * var(--mantine-scale));
+  }
+
+.m_22feb770 > svg {
+    width: 100%;
+    height: 100%;
+  }
+
+.m_27f81bce:focus-visible .m_22feb770 {
+    box-shadow: 0 0 0 calc(0.125rem * var(--mantine-scale)) var(--mantine-primary-color-filled);
+  }

package/styles/Splitter.layer.css

@@ -0,0 +1,77 @@
+@layer mantine {.m_19e66008 {
+  display: flex;
+}
+
+  .m_19e66008:where([data-orientation='horizontal']) {
+    flex-direction: row;
+  }
+
+  .m_19e66008:where([data-orientation='vertical']) {
+    flex-direction: column;
+  }
+
+.m_19e5428e {
+  flex-grow: 0;
+  flex-shrink: 1;
+  overflow: auto;
+}
+
+.m_27f81bce {
+  flex: 0 0 var(--splitter-line-size, calc(0.125rem * var(--mantine-scale)));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  touch-action: none;
+  outline: none;
+  background-color: var(--splitter-handle-color, var(--mantine-color-body));
+}
+
+.m_27f81bce:where([data-orientation='horizontal']) {
+    cursor: col-resize;
+  }
+
+.m_27f81bce:where([data-orientation='vertical']) {
+    cursor: row-resize;
+  }
+
+.m_22feb770 {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 1000px;
+  color: var(--mantine-color-dimmed);
+  transition: color 100ms ease;
+}
+
+:where([data-mantine-color-scheme='light']) .m_22feb770 {
+    background-color: var(--mantine-color-white);
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_22feb770 {
+    background-color: var(--mantine-color-dark-6);
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+}
+
+.m_22feb770:where([data-orientation='horizontal']) {
+    width: calc(0.75rem * var(--mantine-scale));
+    height: calc(3.75rem * var(--mantine-scale));
+  }
+
+.m_22feb770:where([data-orientation='vertical']) {
+    width: calc(3.75rem * var(--mantine-scale));
+    height: calc(0.75rem * var(--mantine-scale));
+  }
+
+.m_22feb770 > svg {
+    width: 100%;
+    height: 100%;
+  }
+
+.m_27f81bce:focus-visible .m_22feb770 {
+    box-shadow: 0 0 0 calc(0.125rem * var(--mantine-scale)) var(--mantine-primary-color-filled);
+  }
+}

package/styles/Stepper.css

@@ -185,14 +185,10 @@
   }
 
 .m_1956aa2a:where([data-icon-position='right']) {
-    text-align: right;
+    text-align: end;
     margin-inline-end: var(--mantine-spacing-sm);
   }
 
-:where([dir="rtl"]) .m_1956aa2a:where([data-icon-position='right']) {
-      text-align: left;
-}
-
 .m_12051f6c {
   font-weight: var(--mantine-font-weight-medium);
   font-size: var(--stepper-fz);

package/styles/Stepper.layer.css

@@ -185,14 +185,10 @@
   }
 
 .m_1956aa2a:where([data-icon-position='right']) {
-    text-align: right;
+    text-align: end;
     margin-inline-end: var(--mantine-spacing-sm);
   }
 
-:where([dir="rtl"]) .m_1956aa2a:where([data-icon-position='right']) {
-      text-align: left;
-}
-
 .m_12051f6c {
   font-weight: var(--mantine-font-weight-medium);
   font-size: var(--stepper-fz);

package/styles/Table.css

@@ -42,11 +42,7 @@
 }
 
 .m_4e7aa4f3 {
-  text-align: left;
-}
-
-:where([dir="rtl"]) .m_4e7aa4f3 {
-    text-align: right;
+  text-align: start;
 }
 
 .m_4e7aa4fd {

package/styles/Table.layer.css

@@ -42,11 +42,7 @@
 }
 
 .m_4e7aa4f3 {
-  text-align: left;
-}
-
-:where([dir="rtl"]) .m_4e7aa4f3 {
-    text-align: right;
+  text-align: start;
 }
 
 .m_4e7aa4fd {