@mantine/core 9.4.3-alpha.0 → 9.5.0

package/lib/components/FloatingWindow/FloatingWindow.d.ts

@@ -2,6 +2,8 @@ import { SetFloatingWindowPosition, UseFloatingWindowOptions } from '@mantine/ho
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { PaperBaseProps } from '../Paper';
 import { PortalProps } from '../Portal';
+import { FloatingWindowDimensions } from './FloatingWindow.context';
+import { FloatingWindowResizeHandle } from './FloatingWindowResizeHandle';
 export type FloatingWindowStylesNames = 'root';
 export interface FloatingWindowProps extends UseFloatingWindowOptions, PaperBaseProps, BoxProps, StylesApiProps<FloatingWindowFactory>, ElementProps<'div', keyof UseFloatingWindowOptions> {
     /** Assigns ref to set position programmatically */
@@ -12,19 +14,22 @@ export interface FloatingWindowProps extends UseFloatingWindowOptions, PaperBase
     portalProps?: Omit<PortalProps, 'children'>;
     /** `z-index` of the root element @default 400 */
     zIndex?: React.CSSProperties['zIndex'];
+    /** Dimensions configuration for resizable floating window */
+    dimensions?: FloatingWindowDimensions;
 }
 export type FloatingWindowFactory = Factory<{
     props: FloatingWindowProps;
     ref: HTMLDivElement;
     stylesNames: FloatingWindowStylesNames;
+    staticComponents: {
+        ResizeHandle: typeof FloatingWindowResizeHandle;
+    };
 }>;
 export declare const FloatingWindow: import("../..").MantineComponent<{
     props: FloatingWindowProps;
     ref: HTMLDivElement;
     stylesNames: FloatingWindowStylesNames;
+    staticComponents: {
+        ResizeHandle: typeof FloatingWindowResizeHandle;
+    };
 }>;
-export declare namespace FloatingWindow {
-    type Props = FloatingWindowProps;
-    type StylesNames = FloatingWindowStylesNames;
-    type Factory = FloatingWindowFactory;
-}

package/lib/components/FloatingWindow/FloatingWindowResizeHandle.d.ts

@@ -0,0 +1,11 @@
+import { BoxProps, ElementProps, Factory } from '../../core';
+export interface FloatingWindowResizeHandleProps extends BoxProps, ElementProps<'div', 'role'> {
+}
+export type FloatingWindowResizeHandleFactory = Factory<{
+    props: FloatingWindowResizeHandleProps;
+    ref: HTMLDivElement;
+}>;
+export declare const FloatingWindowResizeHandle: import("../..").MantineComponent<{
+    props: FloatingWindowResizeHandleProps;
+    ref: HTMLDivElement;
+}>;

package/lib/components/FloatingWindow/index.d.ts

@@ -1,3 +1,5 @@
 import type { FloatingWindowFactory, FloatingWindowProps, FloatingWindowStylesNames } from './FloatingWindow';
 export { FloatingWindow } from './FloatingWindow';
 export type { FloatingWindowProps, FloatingWindowStylesNames, FloatingWindowFactory };
+export type { FloatingWindowDimensions } from './FloatingWindow.context';
+export type { FloatingWindowResizeHandleProps, FloatingWindowResizeHandleFactory, } from './FloatingWindowResizeHandle';

package/lib/components/ScrollArea/ScrollArea.d.ts

@@ -62,6 +62,11 @@ export interface ScrollAreaProps extends BoxProps, StylesApiProps<ScrollAreaFact
         x?: number;
         y?: number;
     };
+    /**
+     * Pins the vertical scrollbar to a physical side (`left` or `right`) regardless of direction.
+     * By default, the scrollbar follows the inline-end edge (right in LTR, left in RTL).
+     */
+    verticalScrollbarPosition?: 'left' | 'right';
 }
 export interface ScrollAreaAutosizeProps extends ScrollAreaProps {
     /** Called when content overflows due to max-height, making the container scrollable */

package/lib/components/Timeline/TimelineItem/TimelineItem.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, MantineColor, MantineRadius } from '../../../core';
-export type TimelineItemStylesNames = 'itemBody' | 'itemContent' | 'itemBullet' | 'item' | 'itemTitle';
+export type TimelineItemStylesNames = 'itemBody' | 'itemContent' | 'itemBullet' | 'item' | 'itemTitle' | 'itemOpposite';
 export interface TimelineItemProps extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {
     __active?: boolean;
     __lineActive?: boolean;
@@ -10,6 +10,10 @@ export interface TimelineItemProps extends BoxProps, CompoundStylesApiProps<Time
     children?: React.ReactNode;
     /** React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. */
     bullet?: React.ReactNode;
+    /** Content displayed on the opposite side of the timeline item */
+    opposite?: React.ReactNode;
+    /** If set, switches the position of content and opposite @default false */
+    alternate?: boolean;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */
     radius?: MantineRadius;
     /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */

package/lib/components/index.d.ts

@@ -31,6 +31,7 @@ export * from './Breadcrumbs';
 export * from './Burger';
 export * from './Button';
 export * from './Card';
+export * from './Cascader';
 export * from './Center';
 export * from './Checkbox';
 export * from './Chip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.4.3-alpha.0",
+  "version": "9.5.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.4.3-alpha.0",
+    "@mantine/hooks": "9.5.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -52,7 +52,7 @@
     "clsx": "^2.1.1",
     "react-number-format": "^5.4.5",
     "react-remove-scroll": "^2.7.2",
-    "type-fest": "^5.7.0"
+    "type-fest": "^5.8.0"
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",

package/styles/Cascader.css

@@ -0,0 +1,215 @@
+.m_9a782f2c {
+  --cascader-column-width: 200px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.m_4c5a03a5 {
+  display: flex;
+  flex-direction: column;
+  width: var(--cascader-column-width);
+  min-width: var(--cascader-column-width);
+  border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--popover-border-color, var(--mantine-color-default-border));
+}
+
+/* Keep the border width reserved so revealing the next column does not shift the layout */
+
+.m_4c5a03a5:where([data-last]) {
+    border-inline-end-color: transparent;
+  }
+
+.m_7f3ac6d2 {
+  flex: 1;
+  padding: var(--combobox-padding);
+}
+
+.m_6b93b90 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  padding-inline: calc(var(--combobox-padding) / 2);
+  color: var(--mantine-color-dimmed);
+  cursor: pointer;
+  border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--popover-border-color, var(--mantine-color-default-border));
+}
+
+@media (hover: hover) {
+    :where([data-mantine-color-scheme='light']) .m_6b93b90:hover {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_6b93b90:hover {
+      background-color: var(--mantine-color-dark-7);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m_6b93b90:active {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_6b93b90:active {
+      background-color: var(--mantine-color-dark-7);
+  }
+}
+
+.m_6b93b90 > svg {
+    width: 0.9em;
+    height: 0.9em;
+    transform: rotate(90deg);
+  }
+
+/* Round the corners that sit against the rounded dropdown edge so the hover background
+     does not overflow the dropdown corners */
+
+.m_6b93b90:where([data-position='start']) {
+    border-start-start-radius: var(--popover-radius, var(--mantine-radius-default));
+    border-end-start-radius: var(--popover-radius, var(--mantine-radius-default));
+  }
+
+/* The divider on the left is provided by the previous column, so this control has none */
+
+.m_6b93b90:where([data-position='end']) {
+    border-inline-end-color: transparent;
+    border-start-end-radius: var(--popover-radius, var(--mantine-radius-default));
+    border-end-end-radius: var(--popover-radius, var(--mantine-radius-default));
+  }
+
+.m_6b93b90:where([data-position='end']) > svg {
+      transform: rotate(-90deg);
+    }
+
+:where([dir="rtl"]) .m_6b93b90 > svg {
+      transform: rotate(-90deg);
+    }
+
+:where([dir="rtl"]) .m_6b93b90:where([data-position='end']) > svg {
+      transform: rotate(90deg);
+    }
+
+.m_791f687a {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  width: 100%;
+  padding: var(--combobox-option-padding);
+  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
+  border-radius: var(--combobox-option-radius, var(--mantine-radius-default));
+  color: var(--mantine-color-text);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) .m_791f687a:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_791f687a:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-7);
+  }
+}
+
+@media (hover: none) {
+      :where([data-mantine-color-scheme='light']) .m_791f687a:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_791f687a:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-7);
+  }
+}
+
+/* Selected options in the ancestor columns (the navigation trail) */
+
+:where([data-mantine-color-scheme='light']) .m_791f687a:where([data-in-path]) {
+      background-color: var(--mantine-color-gray-1);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_791f687a:where([data-in-path]) {
+      background-color: var(--mantine-color-dark-6);
+}
+
+/* Option in the column that is currently being navigated */
+
+.m_791f687a:where([data-active]) {
+    background-color: var(--mantine-primary-color-filled);
+    color: var(--mantine-color-white);
+  }
+
+@media (hover: hover) {
+
+  .m_791f687a:where([data-active]):hover {
+      background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_791f687a:where([data-active]):active {
+      background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+
+.m_791f687a:where([data-disabled]) {
+    color: var(--mantine-color-dimmed);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+.m_452a61d {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  width: 100%;
+}
+
+.m_aecd629a {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.m_92054c13 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.9em;
+  min-width: 0.9em;
+  height: 0.9em;
+  color: var(--mantine-color-dimmed);
+  transform: rotate(-90deg);
+}
+
+:where([data-active]) .m_92054c13 {
+    color: inherit;
+  }
+
+:where([dir="rtl"]) .m_92054c13 {
+    transform: rotate(90deg);
+}
+
+.m_ae51c8ae {
+  width: 0.8em;
+  min-width: 0.8em;
+  height: 0.8em;
+  opacity: 0.4;
+}
+
+:where([data-active]) .m_ae51c8ae,
+  :where([data-combobox-selected]) .m_ae51c8ae {
+    opacity: 1;
+  }
+
+.m_97ff10a8 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--combobox-option-padding);
+  color: var(--mantine-color-dimmed);
+  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
+  white-space: nowrap;
+}

package/styles/Cascader.layer.css

@@ -0,0 +1,216 @@
+@layer mantine {.m_9a782f2c {
+  --cascader-column-width: 200px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.m_4c5a03a5 {
+  display: flex;
+  flex-direction: column;
+  width: var(--cascader-column-width);
+  min-width: var(--cascader-column-width);
+  border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--popover-border-color, var(--mantine-color-default-border));
+}
+
+/* Keep the border width reserved so revealing the next column does not shift the layout */
+
+.m_4c5a03a5:where([data-last]) {
+    border-inline-end-color: transparent;
+  }
+
+.m_7f3ac6d2 {
+  flex: 1;
+  padding: var(--combobox-padding);
+}
+
+.m_6b93b90 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  padding-inline: calc(var(--combobox-padding) / 2);
+  color: var(--mantine-color-dimmed);
+  cursor: pointer;
+  border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--popover-border-color, var(--mantine-color-default-border));
+}
+
+@media (hover: hover) {
+    :where([data-mantine-color-scheme='light']) .m_6b93b90:hover {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_6b93b90:hover {
+      background-color: var(--mantine-color-dark-7);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m_6b93b90:active {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_6b93b90:active {
+      background-color: var(--mantine-color-dark-7);
+  }
+}
+
+.m_6b93b90 > svg {
+    width: 0.9em;
+    height: 0.9em;
+    transform: rotate(90deg);
+  }
+
+/* Round the corners that sit against the rounded dropdown edge so the hover background
+     does not overflow the dropdown corners */
+
+.m_6b93b90:where([data-position='start']) {
+    border-start-start-radius: var(--popover-radius, var(--mantine-radius-default));
+    border-end-start-radius: var(--popover-radius, var(--mantine-radius-default));
+  }
+
+/* The divider on the left is provided by the previous column, so this control has none */
+
+.m_6b93b90:where([data-position='end']) {
+    border-inline-end-color: transparent;
+    border-start-end-radius: var(--popover-radius, var(--mantine-radius-default));
+    border-end-end-radius: var(--popover-radius, var(--mantine-radius-default));
+  }
+
+.m_6b93b90:where([data-position='end']) > svg {
+      transform: rotate(-90deg);
+    }
+
+:where([dir="rtl"]) .m_6b93b90 > svg {
+      transform: rotate(-90deg);
+    }
+
+:where([dir="rtl"]) .m_6b93b90:where([data-position='end']) > svg {
+      transform: rotate(90deg);
+    }
+
+.m_791f687a {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  width: 100%;
+  padding: var(--combobox-option-padding);
+  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
+  border-radius: var(--combobox-option-radius, var(--mantine-radius-default));
+  color: var(--mantine-color-text);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) .m_791f687a:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_791f687a:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-7);
+  }
+}
+
+@media (hover: none) {
+      :where([data-mantine-color-scheme='light']) .m_791f687a:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_791f687a:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-7);
+  }
+}
+
+/* Selected options in the ancestor columns (the navigation trail) */
+
+:where([data-mantine-color-scheme='light']) .m_791f687a:where([data-in-path]) {
+      background-color: var(--mantine-color-gray-1);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_791f687a:where([data-in-path]) {
+      background-color: var(--mantine-color-dark-6);
+}
+
+/* Option in the column that is currently being navigated */
+
+.m_791f687a:where([data-active]) {
+    background-color: var(--mantine-primary-color-filled);
+    color: var(--mantine-color-white);
+  }
+
+@media (hover: hover) {
+
+  .m_791f687a:where([data-active]):hover {
+      background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_791f687a:where([data-active]):active {
+      background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+
+.m_791f687a:where([data-disabled]) {
+    color: var(--mantine-color-dimmed);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+.m_452a61d {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  width: 100%;
+}
+
+.m_aecd629a {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.m_92054c13 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.9em;
+  min-width: 0.9em;
+  height: 0.9em;
+  color: var(--mantine-color-dimmed);
+  transform: rotate(-90deg);
+}
+
+:where([data-active]) .m_92054c13 {
+    color: inherit;
+  }
+
+:where([dir="rtl"]) .m_92054c13 {
+    transform: rotate(90deg);
+}
+
+.m_ae51c8ae {
+  width: 0.8em;
+  min-width: 0.8em;
+  height: 0.8em;
+  opacity: 0.4;
+}
+
+:where([data-active]) .m_ae51c8ae,
+  :where([data-combobox-selected]) .m_ae51c8ae {
+    opacity: 1;
+  }
+
+.m_97ff10a8 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--combobox-option-padding);
+  color: var(--mantine-color-dimmed);
+  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
+  white-space: nowrap;
+}
+}

package/styles/FloatingWindow.css

@@ -1,4 +1,6 @@
 .m_df020499 {
   position: fixed;
   z-index: var(--floating-window-z-index);
+  width: var(--floating-window-width, auto);
+  height: var(--floating-window-height, auto);
 }

package/styles/FloatingWindow.layer.css

@@ -1,5 +1,7 @@
 @layer mantine {.m_df020499 {
   position: fixed;
   z-index: var(--floating-window-z-index);
+  width: var(--floating-window-width, auto);
+  height: var(--floating-window-height, auto);
 }
 }

package/styles/ScrollArea.css

@@ -40,6 +40,26 @@
         padding-inline-start: unset;
       }
 
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
+      [data-offset-scrollbars='xy'],
+      [data-offset-scrollbars='y'],
+      [data-offset-scrollbars='present']
+    ):not([data-vertical-hidden]):where([data-vertical-scrollbar-position='left']) {
+          padding-inline-end: unset;
+          padding-left: var(--scrollarea-scrollbar-size);
+          padding-right: unset;
+        }
+
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
+      [data-offset-scrollbars='xy'],
+      [data-offset-scrollbars='y'],
+      [data-offset-scrollbars='present']
+    ):not([data-vertical-hidden]):where([data-vertical-scrollbar-position='right']) {
+          padding-inline-end: unset;
+          padding-left: unset;
+          padding-right: var(--scrollarea-scrollbar-size);
+        }
+
 .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
       [data-offset-scrollbars='xy'],
       [data-offset-scrollbars='x'],
@@ -122,6 +142,18 @@
     inset-inline-end: 0;
   }
 
+.m_c44ba933:where([data-orientation='vertical']):where([data-vertical-scrollbar-position='left']) {
+      inset-inline-end: auto;
+      left: 0;
+      right: auto;
+    }
+
+.m_c44ba933:where([data-orientation='vertical']):where([data-vertical-scrollbar-position='right']) {
+      inset-inline-end: auto;
+      left: auto;
+      right: 0;
+    }
+
 .m_c44ba933:where([data-orientation='horizontal']) {
     height: var(--scrollarea-scrollbar-size);
     flex-direction: column;
@@ -130,6 +162,20 @@
     inset-inline-end: var(--sa-corner-width);
   }
 
+.m_c44ba933:where([data-orientation='horizontal']):where([data-vertical-scrollbar-position='left']) {
+      inset-inline-start: auto;
+      inset-inline-end: auto;
+      left: var(--sa-corner-width);
+      right: 0;
+    }
+
+.m_c44ba933:where([data-orientation='horizontal']):where([data-vertical-scrollbar-position='right']) {
+      inset-inline-start: auto;
+      inset-inline-end: auto;
+      left: 0;
+      right: var(--sa-corner-width);
+    }
+
 .m_d8b5e363 {
   flex: 1;
   border-radius: var(--scrollarea-scrollbar-size);
@@ -168,6 +214,18 @@
   bottom: 0;
 }
 
+.m_21657268:where([data-vertical-scrollbar-position='left']) {
+    inset-inline-end: auto;
+    left: 0;
+    right: auto;
+  }
+
+.m_21657268:where([data-vertical-scrollbar-position='right']) {
+    inset-inline-end: auto;
+    left: auto;
+    right: 0;
+  }
+
 :where([data-mantine-color-scheme='light']) .m_21657268 {
     background-color: var(--mantine-color-gray-0);
 }