@mantine/core 7.13.5 → 7.14.1

package/lib/components/Modal/use-modals-stack.d.ts

@@ -0,0 +1,15 @@
+interface ModalStackReturnType<T extends string> {
+    state: Record<T, boolean>;
+    open: (id: T) => void;
+    close: (id: T) => void;
+    toggle: (id: T) => void;
+    closeAll: () => void;
+    register: (id: T) => {
+        opened: boolean;
+        onClose: () => void;
+        stackId: T;
+    };
+}
+export declare function useModalsStack<const T extends string>(modals: T[]): ModalStackReturnType<T>;
+export declare const useDrawersStack: typeof useModalsStack;
+export {};

package/lib/components/ModalBase/ModalBaseOverlay.d.ts

@@ -4,5 +4,7 @@ import { TransitionOverride } from '../Transition';
 export interface ModalBaseOverlayProps extends Omit<OverlayProps, 'styles' | 'classNames' | 'variant' | 'vars'>, ElementProps<'div', 'color'> {
     /** Props passed down to the `Transition` component */
     transitionProps?: TransitionOverride;
+    /** Determines whether the overlay should be visible. By default, has the same value as `opened` state. */
+    visible?: boolean;
 }
 export declare const ModalBaseOverlay: import("react").ForwardRefExoticComponent<ModalBaseOverlayProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib/components/Popover/Popover.context.d.ts

@@ -44,6 +44,7 @@ interface PopoverContext {
     variant: string | undefined;
     keepMounted: boolean | undefined;
     getStyles: GetStylesApi<PopoverFactory>;
+    resolvedStyles: Record<string, any>;
     floatingStrategy: FloatingStrategy | undefined;
 }
 export declare const PopoverContextProvider: ({ children, value }: {

package/lib/components/RingProgress/RingProgress.d.ts

@@ -6,7 +6,7 @@ interface RingProgressSection extends React.ComponentPropsWithRef<'circle'> {
 }
 export type RingProgressStylesNames = 'root' | 'svg' | 'label' | 'curve';
 export type RingProgressCssVariables = {
-    root: '--rp-size' | '--rp-label-offset';
+    root: '--rp-size' | '--rp-label-offset' | '--rp-transition-duration';
 };
 export interface RingProgressProps extends BoxProps, StylesApiProps<RingProgressFactory>, ElementProps<'div'> {
     /** Label displayed in the center of the ring */
@@ -21,6 +21,8 @@ export interface RingProgressProps extends BoxProps, StylesApiProps<RingProgress
     sections: RingProgressSection[];
     /** Color of the root section, key of theme.colors or CSS color value */
     rootColor?: MantineColor;
+    /** Transition duration of filled section styles changes in ms, `0` by default */
+    transitionDuration?: number;
 }
 export type RingProgressFactory = Factory<{
     props: RingProgressProps;

package/lib/components/Slider/Slider/Slider.d.ts

@@ -53,6 +53,8 @@ export interface SliderProps extends BoxProps, StylesApiProps<SliderFactory>, El
     inverted?: boolean;
     /** Props passed down to the hidden input */
     hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
+    /** Determines whether the selection should be only allowed from the given marks array, `false` by default */
+    restrictToMarks?: boolean;
 }
 export type SliderFactory = Factory<{
     props: SliderProps;

package/lib/components/Tree/get-children-nodes-values/get-children-nodes-values.d.ts

@@ -1,3 +1,4 @@
 import type { TreeNodeData } from '../Tree';
 export declare function findTreeNode(value: string, data: TreeNodeData[]): TreeNodeData | null;
 export declare function getChildrenNodesValues(value: string, data: TreeNodeData[], acc?: string[]): string[];
+export declare function getAllChildrenNodes(data: TreeNodeData[]): string[];

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

@@ -1,5 +1,5 @@
 export { Tree } from './Tree';
-export { useTree } from './use-tree';
+export { useTree, getTreeExpandedState } from './use-tree';
 export type { TreeCssVariables, TreeFactory, TreeProps, TreeStylesNames, TreeNodeData, RenderTreeNodePayload, } from './Tree';
 export type { UseTreeInput, UseTreeReturnType } from './use-tree';
 export type { CheckedNodeStatus } from './get-all-checked-nodes/get-all-checked-nodes';

package/lib/components/Tree/use-tree.d.ts

@@ -1,6 +1,7 @@
 import { CheckedNodeStatus } from './get-all-checked-nodes/get-all-checked-nodes';
 import type { TreeNodeData } from './Tree';
 export type TreeExpandedState = Record<string, boolean>;
+export declare function getTreeExpandedState(data: TreeNodeData[], expandedNodesValues: string[] | '*'): {};
 export interface UseTreeInput {
     /** Initial expanded state of all nodes */
     initialExpandedState?: TreeExpandedState;
@@ -10,6 +11,10 @@ export interface UseTreeInput {
     initialCheckedState?: string[];
     /** Determines whether multiple node can be selected at a time */
     multiple?: boolean;
+    /** Called with the node value when it is expanded */
+    onNodeExpand?: (value: string) => void;
+    /** Called with the node value when it is collapsed */
+    onNodeCollapse?: (value: string) => void;
 }
 export interface UseTreeReturnType {
     /** Determines whether multiple node can be selected at a time */
@@ -56,6 +61,12 @@ export interface UseTreeReturnType {
     checkNode: (value: string) => void;
     /** Unchecks node with provided value */
     uncheckNode: (value: string) => void;
+    /** Checks all nodes */
+    checkAllNodes: () => void;
+    /** Unchecks all nodes */
+    uncheckAllNodes: () => void;
+    /** Sets checked state */
+    setCheckedState: React.Dispatch<React.SetStateAction<string[]>>;
     /** Returns all checked nodes with status */
     getCheckedNodes: () => CheckedNodeStatus[];
     /** Returns `true` if node with provided value is checked */
@@ -63,5 +74,5 @@ export interface UseTreeReturnType {
     /** Returns `true` if node with provided value is indeterminate */
     isNodeIndeterminate: (value: string) => boolean;
 }
-export declare function useTree({ initialSelectedState, initialCheckedState, initialExpandedState, multiple, }?: UseTreeInput): UseTreeReturnType;
+export declare function useTree({ initialSelectedState, initialCheckedState, initialExpandedState, multiple, onNodeCollapse, onNodeExpand, }?: UseTreeInput): UseTreeReturnType;
 export type TreeController = ReturnType<typeof useTree>;

package/lib/components/index.d.ts

@@ -18,6 +18,7 @@ export * from './Accordion';
 export * from './Affix';
 export * from './Alert';
 export * from './Anchor';
+export * from './AngleSlider';
 export * from './AppShell';
 export * from './AspectRatio';
 export * from './Autocomplete';

package/lib/core/utils/find-closest-number/find-closest-number.d.ts

@@ -0,0 +1 @@
+export declare function findClosestNumber(value: number, numbers: number[]): number;

package/lib/core/utils/index.d.ts

@@ -23,4 +23,5 @@ export { useHovered } from './use-hovered/use-hovered';
 export { createUseExternalEvents } from './create-use-external-events/create-use-external-events';
 export { getEnv } from './get-env/get-env';
 export { memoize } from './memoize/memoize';
+export { findClosestNumber } from './find-closest-number/find-closest-number';
 export { getRefProp } from './get-ref-prop/get-ref-prop';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "7.13.5",
+  "version": "7.14.1",
   "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": "7.13.5",
+    "@mantine/hooks": "7.14.1",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },

package/styles/AngleSlider.css

@@ -0,0 +1,107 @@
+.m_48204f9b {
+  width: var(--slider-size);
+  height: var(--slider-size);
+  position: relative;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+
+  .m_48204f9b:focus-within {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: 2px;
+  }
+
+  .m_48204f9b {
+
+  --slider-size: 60px;
+  --thumb-size: calc(var(--slider-size) / 5);
+}
+
+  :where([data-mantine-color-scheme='light']) .m_48204f9b {
+    background-color: var(--mantine-color-gray-1);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_48204f9b {
+    background-color: var(--mantine-color-dark-5);
+}
+
+.m_bb9cdbad {
+  position: absolute;
+  inset: 1px;
+  border-radius: var(--slider-size);
+  pointer-events: none;
+}
+
+.m_481dd586 {
+  width: 2px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(50% - 1px);
+  transform: rotate(var(--angle));
+}
+
+.m_481dd586::before {
+    content: '';
+    position: absolute;
+    top: calc(var(--thumb-size) / 3);
+    left: 0.5px;
+    width: 1px;
+    height: calc(var(--thumb-size) / 1.5);
+    transform: translate(-50%, -50%);
+  }
+
+:where([data-mantine-color-scheme='light']) .m_481dd586::before {
+      background-color: var(--mantine-color-gray-4);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_481dd586::before {
+      background-color: var(--mantine-color-dark-3);
+}
+
+.m_481dd586[data-label]::after {
+    min-width: 18px;
+    text-align: center;
+    content: attr(data-label);
+    position: absolute;
+    top: -24px;
+    left: -7px;
+    transform: rotate(calc(360deg - var(--angle)));
+    font-size: var(--mantine-font-size-xs);
+  }
+
+.m_bc02ba3d {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: calc(50% - 1.5px);
+  height: 100%;
+  width: 3px;
+  outline: none;
+  pointer-events: none;
+}
+
+.m_bc02ba3d::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: min(var(--thumb-size), calc(var(--slider-size) / 2));
+    width: 3px;
+  }
+
+:where([data-mantine-color-scheme='light']) .m_bc02ba3d::before {
+      background-color: var(--mantine-color-gray-7);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_bc02ba3d::before {
+      background-color: var(--mantine-color-dark-1);
+}
+
+.m_bb8e875b {
+  font-size: var(--mantine-font-size-xs);
+}

package/styles/AngleSlider.layer.css

@@ -0,0 +1,108 @@
+@layer mantine {.m_48204f9b {
+  width: var(--slider-size);
+  height: var(--slider-size);
+  position: relative;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+
+  .m_48204f9b:focus-within {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: 2px;
+  }
+
+  .m_48204f9b {
+
+  --slider-size: 60px;
+  --thumb-size: calc(var(--slider-size) / 5);
+}
+
+  :where([data-mantine-color-scheme='light']) .m_48204f9b {
+    background-color: var(--mantine-color-gray-1);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_48204f9b {
+    background-color: var(--mantine-color-dark-5);
+}
+
+.m_bb9cdbad {
+  position: absolute;
+  inset: 1px;
+  border-radius: var(--slider-size);
+  pointer-events: none;
+}
+
+.m_481dd586 {
+  width: 2px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(50% - 1px);
+  transform: rotate(var(--angle));
+}
+
+.m_481dd586::before {
+    content: '';
+    position: absolute;
+    top: calc(var(--thumb-size) / 3);
+    left: 0.5px;
+    width: 1px;
+    height: calc(var(--thumb-size) / 1.5);
+    transform: translate(-50%, -50%);
+  }
+
+:where([data-mantine-color-scheme='light']) .m_481dd586::before {
+      background-color: var(--mantine-color-gray-4);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_481dd586::before {
+      background-color: var(--mantine-color-dark-3);
+}
+
+.m_481dd586[data-label]::after {
+    min-width: 18px;
+    text-align: center;
+    content: attr(data-label);
+    position: absolute;
+    top: -24px;
+    left: -7px;
+    transform: rotate(calc(360deg - var(--angle)));
+    font-size: var(--mantine-font-size-xs);
+  }
+
+.m_bc02ba3d {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: calc(50% - 1.5px);
+  height: 100%;
+  width: 3px;
+  outline: none;
+  pointer-events: none;
+}
+
+.m_bc02ba3d::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: min(var(--thumb-size), calc(var(--slider-size) / 2));
+    width: 3px;
+  }
+
+:where([data-mantine-color-scheme='light']) .m_bc02ba3d::before {
+      background-color: var(--mantine-color-gray-7);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_bc02ba3d::before {
+      background-color: var(--mantine-color-dark-1);
+}
+
+.m_bb8e875b {
+  font-size: var(--mantine-font-size-xs);
+}
+}

package/styles/Drawer.css

@@ -21,6 +21,11 @@
   overflow-y: auto;
 }
 
+.m_b8a05bbd[data-hidden] {
+    opacity: 0 !important;
+    pointer-events: none;
+  }
+
 .m_31cd769a {
   display: flex;
   justify-content: var(--drawer-justify, flex-start);

package/styles/Drawer.layer.css

@@ -21,6 +21,11 @@
   overflow-y: auto;
 }
 
+.m_b8a05bbd[data-hidden] {
+    opacity: 0 !important;
+    pointer-events: none;
+  }
+
 .m_31cd769a {
   display: flex;
   justify-content: var(--drawer-justify, flex-start);

package/styles/Modal.css

@@ -46,6 +46,11 @@
     border-radius: 0;
   }
 
+.m_54c44539[data-hidden] {
+    opacity: 0 !important;
+    pointer-events: none;
+  }
+
 .m_1f958f16 {
   display: flex;
   justify-content: center;

package/styles/Modal.layer.css

@@ -46,6 +46,11 @@
     border-radius: 0;
   }
 
+.m_54c44539[data-hidden] {
+    opacity: 0 !important;
+    pointer-events: none;
+  }
+
 .m_1f958f16 {
   display: flex;
   justify-content: center;

package/styles/RingProgress.css

@@ -4,6 +4,7 @@
   height: var(--rp-size);
   min-width: var(--rp-size);
   min-height: var(--rp-size);
+  --rp-transition-duration: 0ms;
 }
 
 .m_d43b5134 {
@@ -16,6 +17,10 @@
 
 .m_b1ca1fbf {
   stroke: var(--curve-color, var(--rp-curve-root-color));
+  transition:
+    stroke-dashoffset var(--rp-transition-duration) ease,
+    stroke-dasharray var(--rp-transition-duration) ease,
+    stroke var(--rp-transition-duration);
 }
 
 [data-mantine-color-scheme='light'] .m_b1ca1fbf {

package/styles/RingProgress.layer.css

@@ -4,6 +4,7 @@
   height: var(--rp-size);
   min-width: var(--rp-size);
   min-height: var(--rp-size);
+  --rp-transition-duration: 0ms;
 }
 
 .m_d43b5134 {
@@ -16,6 +17,10 @@
 
 .m_b1ca1fbf {
   stroke: var(--curve-color, var(--rp-curve-root-color));
+  transition:
+    stroke-dashoffset var(--rp-transition-duration) ease,
+    stroke-dasharray var(--rp-transition-duration) ease,
+    stroke var(--rp-transition-duration);
 }
 
 [data-mantine-color-scheme='light'] .m_b1ca1fbf {

package/styles.css

@@ -1941,6 +1941,114 @@ fieldset:disabled .mantine-active:active {
     display: -webkit-box;
   }
 
+.m_48204f9b {
+  width: var(--slider-size);
+  height: var(--slider-size);
+  position: relative;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+
+  .m_48204f9b:focus-within {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: calc(0.125rem * var(--mantine-scale));
+  }
+
+  .m_48204f9b {
+
+  --slider-size: calc(3.75rem * var(--mantine-scale));
+  --thumb-size: calc(var(--slider-size) / 5);
+}
+
+  :where([data-mantine-color-scheme='light']) .m_48204f9b {
+    background-color: var(--mantine-color-gray-1);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_48204f9b {
+    background-color: var(--mantine-color-dark-5);
+}
+
+.m_bb9cdbad {
+  position: absolute;
+  inset: calc(0.0625rem * var(--mantine-scale));
+  border-radius: var(--slider-size);
+  pointer-events: none;
+}
+
+.m_481dd586 {
+  width: calc(0.125rem * var(--mantine-scale));
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(50% - 1px);
+  transform: rotate(var(--angle));
+}
+
+.m_481dd586::before {
+    content: '';
+    position: absolute;
+    top: calc(var(--thumb-size) / 3);
+    left: calc(0.03125rem * var(--mantine-scale));
+    width: calc(0.0625rem * var(--mantine-scale));
+    height: calc(var(--thumb-size) / 1.5);
+    transform: translate(-50%, -50%);
+  }
+
+:where([data-mantine-color-scheme='light']) .m_481dd586::before {
+      background-color: var(--mantine-color-gray-4);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_481dd586::before {
+      background-color: var(--mantine-color-dark-3);
+}
+
+.m_481dd586[data-label]::after {
+    min-width: calc(1.125rem * var(--mantine-scale));
+    text-align: center;
+    content: attr(data-label);
+    position: absolute;
+    top: calc(-1.5rem * var(--mantine-scale));
+    left: calc(-0.4375rem * var(--mantine-scale));
+    transform: rotate(calc(360deg - var(--angle)));
+    font-size: var(--mantine-font-size-xs);
+  }
+
+.m_bc02ba3d {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: calc(50% - 1.5px);
+  height: 100%;
+  width: calc(0.1875rem * var(--mantine-scale));
+  outline: none;
+  pointer-events: none;
+}
+
+.m_bc02ba3d::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: min(var(--thumb-size), calc(var(--slider-size) / 2));
+    width: calc(0.1875rem * var(--mantine-scale));
+  }
+
+:where([data-mantine-color-scheme='light']) .m_bc02ba3d::before {
+      background-color: var(--mantine-color-gray-7);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_bc02ba3d::before {
+      background-color: var(--mantine-color-dark-1);
+}
+
+.m_bb8e875b {
+  font-size: var(--mantine-font-size-xs);
+}
+
 .m_89ab340[data-resizing] {
     --app-shell-transition-duration: 0ms !important;
   }
@@ -3836,6 +3944,11 @@ fieldset:disabled .m_d3ea56bb,
   overflow-y: auto;
 }
 
+.m_b8a05bbd[data-hidden] {
+    opacity: 0 !important;
+    pointer-events: none;
+  }
+
 .m_31cd769a {
   display: flex;
   justify-content: var(--drawer-justify, flex-start);
@@ -4236,6 +4349,11 @@ fieldset:disabled .m_d3ea56bb,
     border-radius: 0;
   }
 
+.m_54c44539[data-hidden] {
+    opacity: 0 !important;
+    pointer-events: none;
+  }
+
 .m_1f958f16 {
   display: flex;
   justify-content: center;
@@ -5390,6 +5508,7 @@ fieldset:disabled .m_d3ea56bb,
   height: var(--rp-size);
   min-width: var(--rp-size);
   min-height: var(--rp-size);
+  --rp-transition-duration: 0ms;
 }
 
 .m_d43b5134 {
@@ -5402,6 +5521,10 @@ fieldset:disabled .m_d3ea56bb,
 
 .m_b1ca1fbf {
   stroke: var(--curve-color, var(--rp-curve-root-color));
+  transition:
+    stroke-dashoffset var(--rp-transition-duration) ease,
+    stroke-dasharray var(--rp-transition-duration) ease,
+    stroke var(--rp-transition-duration);
 }
 
 [data-mantine-color-scheme='light'] .m_b1ca1fbf {