@mantine/core 7.13.5 → 7.14.0

package/lib/components/AngleSlider/AngleSlider.d.ts

@@ -0,0 +1,50 @@
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
+export type AngleSliderStylesNames = 'root' | 'thumb' | 'label' | 'marks' | 'mark';
+export type AngleSliderCssVariables = {
+    root: '--slider-size' | '--thumb-size';
+};
+export interface AngleSliderProps extends BoxProps, StylesApiProps<AngleSliderFactory>, ElementProps<'div', 'onChange'> {
+    /** Step between values, used when the component is controlled with keyboard, `1` by default */
+    step?: number;
+    /** Value of the controlled component */
+    value?: number;
+    /** Default value for uncontrolled component */
+    defaultValue?: number;
+    /** Called on value change */
+    onChange?: (value: number) => void;
+    /** Called after the selection is finished */
+    onChangeEnd?: (value: number) => void;
+    /** Determines whether the label should be displayed inside the slider, `true` by default */
+    withLabel?: boolean;
+    /** Array of marks that are displayed on the slider */
+    marks?: {
+        value: number;
+        label?: string;
+    }[];
+    /** Slider size in px, `60px` */
+    size?: number;
+    /** Size of the thumb in px, by default is calculated based on the `size` value */
+    thumbSize?: number;
+    /** Formats label based on the current value */
+    formatLabel?: (value: number) => React.ReactNode;
+    /** Disables interactions */
+    disabled?: boolean;
+    /** Determines whether the selection should be only allowed from the given marks array, `false` by default */
+    restrictToMarks?: boolean;
+    /** Props passed down to the hidden input */
+    hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
+    /** Hidden input name, use with uncontrolled component */
+    name?: string;
+}
+export type AngleSliderFactory = Factory<{
+    props: AngleSliderProps;
+    ref: HTMLDivElement;
+    stylesNames: AngleSliderStylesNames;
+    vars: AngleSliderCssVariables;
+}>;
+export declare const AngleSlider: import("../../core").MantineComponent<{
+    props: AngleSliderProps;
+    ref: HTMLDivElement;
+    stylesNames: AngleSliderStylesNames;
+    vars: AngleSliderCssVariables;
+}>;

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

@@ -0,0 +1,2 @@
+export { AngleSlider } from './AngleSlider';
+export type { AngleSliderCssVariables, AngleSliderFactory, AngleSliderProps, AngleSliderStylesNames, } from './AngleSlider';

package/lib/components/Drawer/Drawer.d.ts

@@ -6,6 +6,7 @@ import { DrawerContent } from './DrawerContent';
 import { DrawerHeader } from './DrawerHeader';
 import { DrawerOverlay } from './DrawerOverlay';
 import { DrawerRoot, DrawerRootCssVariables, DrawerRootProps, DrawerRootStylesNames } from './DrawerRoot';
+import { DrawerStack } from './DrawerStack';
 import { DrawerTitle } from './DrawerTitle';
 export type DrawerStylesNames = DrawerRootStylesNames;
 export type DrawerCssVariables = DrawerRootCssVariables;
@@ -22,6 +23,8 @@ export interface DrawerProps extends DrawerRootProps {
     withCloseButton?: boolean;
     /** Props passed down to the close button */
     closeButtonProps?: ModalBaseCloseButtonProps;
+    /** Id of the drawer in the `Drawer.Stack` */
+    stackId?: string;
 }
 export type DrawerFactory = Factory<{
     props: DrawerProps;
@@ -36,6 +39,7 @@ export type DrawerFactory = Factory<{
         Header: typeof DrawerHeader;
         Title: typeof DrawerTitle;
         CloseButton: typeof DrawerCloseButton;
+        Stack: typeof DrawerStack;
     };
 }>;
 export declare const Drawer: import("../../core").MantineComponent<{
@@ -51,5 +55,6 @@ export declare const Drawer: import("../../core").MantineComponent<{
         Header: typeof DrawerHeader;
         Title: typeof DrawerTitle;
         CloseButton: typeof DrawerCloseButton;
+        Stack: typeof DrawerStack;
     };
 }>;

package/lib/components/Drawer/DrawerContent.d.ts

@@ -2,6 +2,7 @@ import { CompoundStylesApiProps, Factory } from '../../core';
 import { ModalBaseContentProps } from '../ModalBase';
 export type DrawerContentStylesNames = 'content' | 'inner';
 export interface DrawerContentProps extends ModalBaseContentProps, CompoundStylesApiProps<DrawerContentFactory> {
+    __hidden?: boolean;
 }
 export type DrawerContentFactory = Factory<{
     props: DrawerContentProps;

package/lib/components/Drawer/DrawerStack.d.ts

@@ -0,0 +1,17 @@
+interface DrawerStackContext {
+    stack: string[];
+    addModal: (id: string, zIndex: number | string) => void;
+    removeModal: (id: string) => void;
+    getZIndex: (id: string) => string;
+    currentId: string;
+    maxZIndex: string | number;
+}
+declare const useDrawerStackContext: () => DrawerStackContext | null;
+export { useDrawerStackContext };
+interface DrawerStackProps {
+    children: React.ReactNode;
+}
+export declare function DrawerStack({ children }: DrawerStackProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DrawerStack {
+    var displayName: string;
+}

package/lib/components/Modal/Modal.d.ts

@@ -6,6 +6,7 @@ import { ModalContent } from './ModalContent';
 import { ModalHeader } from './ModalHeader';
 import { ModalOverlay } from './ModalOverlay';
 import { ModalRoot, ModalRootCssVariables, ModalRootProps, ModalRootStylesNames } from './ModalRoot';
+import { ModalStack } from './ModalStack';
 import { ModalTitle } from './ModalTitle';
 export type ModalStylesNames = ModalRootStylesNames;
 export type ModalCssVariables = ModalRootCssVariables;
@@ -23,6 +24,8 @@ export interface ModalProps extends ModalRootProps {
     withCloseButton?: boolean;
     /** Props passed down to the close button */
     closeButtonProps?: ModalBaseCloseButtonProps;
+    /** Id of the modal in the `Modal.Stack` */
+    stackId?: string;
 }
 export type ModalFactory = Factory<{
     props: ModalProps;
@@ -37,6 +40,7 @@ export type ModalFactory = Factory<{
         Header: typeof ModalHeader;
         Title: typeof ModalTitle;
         CloseButton: typeof ModalCloseButton;
+        Stack: typeof ModalStack;
     };
 }>;
 export declare const Modal: import("../../core").MantineComponent<{
@@ -52,5 +56,6 @@ export declare const Modal: import("../../core").MantineComponent<{
         Header: typeof ModalHeader;
         Title: typeof ModalTitle;
         CloseButton: typeof ModalCloseButton;
+        Stack: typeof ModalStack;
     };
 }>;

package/lib/components/Modal/ModalContent.d.ts

@@ -2,6 +2,7 @@ import { CompoundStylesApiProps, Factory } from '../../core';
 import { ModalBaseContentProps } from '../ModalBase';
 export type ModalContentStylesNames = 'content' | 'inner';
 export interface ModalContentProps extends ModalBaseContentProps, CompoundStylesApiProps<ModalContentFactory> {
+    __hidden?: boolean;
 }
 export type ModalContentFactory = Factory<{
     props: ModalContentProps;

package/lib/components/Modal/ModalStack.d.ts

@@ -0,0 +1,17 @@
+interface ModalStackContext {
+    stack: string[];
+    addModal: (id: string, zIndex: number | string) => void;
+    removeModal: (id: string) => void;
+    getZIndex: (id: string) => string;
+    currentId: string;
+    maxZIndex: string | number;
+}
+declare const useModalStackContext: () => ModalStackContext | null;
+export { useModalStackContext };
+interface ModalStackProps {
+    children: React.ReactNode;
+}
+export declare function ModalStack({ children }: ModalStackProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModalStack {
+    var displayName: string;
+}

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

@@ -6,6 +6,8 @@ export { ModalContent } from './ModalContent';
 export { ModalHeader } from './ModalHeader';
 export { ModalOverlay } from './ModalOverlay';
 export { ModalTitle } from './ModalTitle';
+export { ModalStack } from './ModalStack';
+export { useModalsStack, useDrawersStack } from './use-modals-stack';
 export type { ModalCssVariables, ModalFactory, ModalProps, ModalStylesNames } from './Modal';
 export type { ModalRootProps } from './ModalRoot';
 export type { ModalBodyProps } from './ModalBody';

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/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.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": "7.13.5",
+    "@mantine/hooks": "7.14.0",
     "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;