@mantine/core 7.11.2 → 7.12.1

package/lib/components/Accordion/Accordion.d.ts

@@ -48,6 +48,7 @@ export declare namespace Accordion {
         vars: AccordionCssVariables;
         variant: AccordionVariant;
     }>) => MantineThemeComponent;
+    var withProps: (props: Partial<AccordionProps<false>>) => AccordionProps<false>;
     var classes: any;
     var displayName: string;
     var Item: import("../../core").MantineComponent<{

package/lib/components/Accordion/AccordionPanel/AccordionPanel.d.ts

@@ -1,6 +1,8 @@
 import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
 export type AccordionPanelStylesNames = 'panel' | 'content';
-export interface AccordionPanelProps extends BoxProps, CompoundStylesApiProps<AccordionPanelFactory>, ElementProps<'div', 'onTransitionEnd'> {
+export interface AccordionPanelProps extends BoxProps, CompoundStylesApiProps<AccordionPanelFactory>, ElementProps<'div'> {
+    /** Called when the panel animation completes */
+    onTransitionEnd?: () => void;
 }
 export type AccordionPanelFactory = Factory<{
     props: AccordionPanelProps;

package/lib/components/PinInput/PinInput.d.ts

@@ -1,4 +1,5 @@
 import { BoxProps, ElementProps, Factory, MantineRadius, MantineSize, MantineSpacing, StylesApiProps } from '../../core';
+import { InputProps } from '../Input';
 export type PinInputStylesNames = 'root' | 'pinInput' | 'input';
 export type PinInputCssVariables = {
     root: '--pin-input-size';
@@ -54,6 +55,8 @@ export interface PinInputProps extends BoxProps, StylesApiProps<PinInputFactory>
     hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
     /** Assigns ref of the root element */
     rootRef?: React.ForwardedRef<HTMLDivElement>;
+    /** Props added to the input element depending on its index */
+    getInputProps?: (index: number) => InputProps & ElementProps<'input', 'size'>;
 }
 export type PinInputFactory = Factory<{
     props: PinInputProps;

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

@@ -30,6 +30,10 @@ export interface ScrollAreaProps extends BoxProps, StylesApiProps<ScrollAreaFact
         x: number;
         y: number;
     }) => void;
+    /** Called when scrollarea is scrolled all the way to the bottom */
+    onBottomReached?: () => void;
+    /** Called when scrollarea is scrolled all the way to the top */
+    onTopReached?: () => void;
 }
 export interface ScrollAreaAutosizeProps extends ScrollAreaProps {
 }

package/lib/components/SemiCircleProgress/SemiCircleProgress.d.ts

@@ -0,0 +1,39 @@
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
+export type SemiCircleProgressStylesNames = 'root' | 'svg' | 'emptySegment' | 'filledSegment' | 'label';
+export type SemiCircleProgressCssVariables = {
+    root: '--scp-filled-segment-color' | '--scp-empty-segment-color' | '--scp-rotation' | '--scp-transition-duration' | '--scp-thickness';
+};
+export interface SemiCircleProgressProps extends BoxProps, StylesApiProps<SemiCircleProgressFactory>, ElementProps<'div'> {
+    /** Progress value from `0` to `100` */
+    value: number;
+    /** Diameter of the svg in px, `200` by default */
+    size?: number;
+    /** Circle thickness in px, `12` by default */
+    thickness?: number;
+    /** Orientation of the circle, `'up'` by default */
+    orientation?: 'up' | 'down';
+    /** Direction from which the circle is filled, `'left-to-right'` by default */
+    fillDirection?: 'right-to-left' | 'left-to-right';
+    /** Key of `theme.colors` or any valid CSS color value, `theme.primaryColor` by default */
+    filledSegmentColor?: MantineColor;
+    /** Key of `theme.colors` or any valid CSS color value, by default the value is determined based on the color scheme value */
+    emptySegmentColor?: MantineColor;
+    /** Transition duration of filled section styles changes in ms, `0` by default */
+    transitionDuration?: number;
+    /** Label rendered inside the circle */
+    label?: React.ReactNode;
+    /** Label position relative to the circle center, `'bottom'` by default */
+    labelPosition?: 'center' | 'bottom';
+}
+export type SemiCircleProgressFactory = Factory<{
+    props: SemiCircleProgressProps;
+    ref: HTMLDivElement;
+    stylesNames: SemiCircleProgressStylesNames;
+    vars: SemiCircleProgressCssVariables;
+}>;
+export declare const SemiCircleProgress: import("../../core").MantineComponent<{
+    props: SemiCircleProgressProps;
+    ref: HTMLDivElement;
+    stylesNames: SemiCircleProgressStylesNames;
+    vars: SemiCircleProgressCssVariables;
+}>;

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

@@ -0,0 +1,2 @@
+export { SemiCircleProgress } from './SemiCircleProgress';
+export type { SemiCircleProgressCssVariables, SemiCircleProgressFactory, SemiCircleProgressProps, SemiCircleProgressStylesNames, } from './SemiCircleProgress';

package/lib/components/Tooltip/TooltipGroup/TooltipGroup.d.ts

@@ -1,3 +1,4 @@
+import { Factory, MantineThemeComponent } from '../../../core';
 export interface TooltipGroupProps {
     /** <Tooltip /> components */
     children: React.ReactNode;
@@ -9,4 +10,10 @@ export interface TooltipGroupProps {
 export declare function TooltipGroup(props: TooltipGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace TooltipGroup {
     var displayName: string;
+    var extend: (c: import("../../../core/factory/factory").ExtendsRootComponent<{
+        props: TooltipGroupProps;
+    }>) => MantineThemeComponent;
 }
+export type TooltipGroupFactory = Factory<{
+    props: TooltipGroupProps;
+}>;

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

@@ -17,6 +17,8 @@ export interface RenderTreeNodePayload {
     selected: boolean;
     /** Node data from the `data` prop of `Tree` */
     node: TreeNodeData;
+    /** Tree controller instance, return value of `useTree` hook */
+    tree: TreeController;
     /** Props to spread into the root node element */
     elementProps: {
         className: string;

package/lib/components/Tree/get-all-checked-nodes/get-all-checked-nodes.d.ts

@@ -0,0 +1,11 @@
+import type { TreeNodeData } from '../Tree';
+export interface CheckedNodeStatus {
+    checked: boolean;
+    indeterminate: boolean;
+    hasChildren: boolean;
+    value: string;
+}
+export declare function getAllCheckedNodes(data: TreeNodeData[], checkedState: string[], acc?: CheckedNodeStatus[]): {
+    result: CheckedNodeStatus[];
+    currentTreeChecked: CheckedNodeStatus[];
+};

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

@@ -0,0 +1,3 @@
+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[];

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

@@ -2,3 +2,4 @@ export { Tree } from './Tree';
 export { useTree } 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/is-node-checked/is-node-checked.d.ts

@@ -0,0 +1,3 @@
+import type { TreeNodeData } from '../Tree';
+export declare function isNodeChecked(value: string, data: TreeNodeData[], checkedState: string[]): boolean;
+export declare const memoizedIsNodeChecked: (value: string, data: TreeNodeData[], checkedState: string[]) => boolean;

package/lib/components/Tree/is-node-indeterminate/is-node-indeterminate.d.ts

@@ -0,0 +1,3 @@
+import type { TreeNodeData } from '../Tree';
+export declare function isNodeIndeterminate(value: string, data: TreeNodeData[], checkedState: string[]): boolean;
+export declare const memoizedIsNodeIndeterminate: (value: string, data: TreeNodeData[], checkedState: string[]) => boolean;

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

@@ -1,3 +1,4 @@
+import { CheckedNodeStatus } from './get-all-checked-nodes/get-all-checked-nodes';
 import type { TreeNodeData } from './Tree';
 export type TreeExpandedState = Record<string, boolean>;
 export interface UseTreeInput {
@@ -15,6 +16,8 @@ export interface UseTreeReturnType {
     expandedState: TreeExpandedState;
     /** An array of selected nodes values */
     selectedState: string[];
+    /** An array of checked nodes values */
+    checkedState: string[];
     /** A value of the node that was last clicked
      * Anchor node is used to determine range of selected nodes for multiple selection
      */
@@ -47,6 +50,16 @@ export interface UseTreeReturnType {
     hoveredNode: string | null;
     /** Sets hovered node */
     setHoveredNode: React.Dispatch<React.SetStateAction<string | null>>;
+    /** Checks node with provided value */
+    checkNode: (value: string) => void;
+    /** Unchecks node with provided value */
+    uncheckNode: (value: string) => void;
+    /** Returns all checked nodes with status */
+    getCheckedNodes: () => CheckedNodeStatus[];
+    /** Returns `true` if node with provided value is checked */
+    isNodeChecked: (value: string) => boolean;
+    /** Returns `true` if node with provided value is indeterminate */
+    isNodeIndeterminate: (value: string) => boolean;
 }
 export declare function useTree({ initialSelectedState, initialExpandedState, multiple, }?: UseTreeInput): UseTreeReturnType;
 export type TreeController = ReturnType<typeof useTree>;

package/lib/components/index.d.ts

@@ -77,6 +77,7 @@ export * from './Rating';
 export * from './RingProgress';
 export * from './SegmentedControl';
 export * from './Select';
+export * from './SemiCircleProgress';
 export * from './SimpleGrid';
 export * from './Skeleton';
 export * from './Slider';

package/lib/core/factory/factory.d.ts

@@ -40,4 +40,5 @@ export type MantineComponent<Payload extends FactoryPayload> = React.ForwardRefE
     renderRoot?: (props: Record<string, any>) => React.ReactNode;
 }> & MantineComponentStaticProperties<Payload>;
 export declare function identity<T>(value: T): T;
+export declare function getWithProps<T, Props>(Component: T): (props: Partial<Props>) => T;
 export declare function factory<Payload extends FactoryPayload>(ui: React.ForwardRefRenderFunction<Payload['ref'], Payload['props']>): MantineComponent<Payload>;

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

@@ -1,4 +1,4 @@
-export { factory } from './factory';
+export { factory, getWithProps } from './factory';
 export { polymorphicFactory } from './polymorphic-factory';
 export { createPolymorphicComponent } from './create-polymorphic-component';
 export type { FactoryPayload, ExtendComponent, MantineComponent, MantineComponentStaticProperties, FactoryComponentWithProps, } from './factory';

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

@@ -22,3 +22,4 @@ export { getContextItemIndex } from './get-context-item-index/get-context-item-i
 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';

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

@@ -0,0 +1 @@
+export declare function memoize<T extends (...args: any[]) => any>(func: T): (...args: Parameters<T>) => ReturnType<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "7.11.2",
+  "version": "7.12.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.11.2",
+    "@mantine/hooks": "7.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -57,6 +57,6 @@
   },
   "devDependencies": {
     "@mantine-tests/core": "1.1.0",
-    "@mantine/hooks": "7.11.2"
+    "@mantine/hooks": "7.12.1"
   }
 }

package/styles/Badge.css

@@ -33,7 +33,8 @@
   line-height: var(--badge-lh);
   text-decoration: none;
   padding: 0 var(--badge-padding-x);
-  display: inline-flex;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
   align-items: center;
   justify-content: center;
   width: fit-content;
@@ -55,6 +56,7 @@
 
   .m_347db0ec:where([data-circle]) {
     padding-inline: 2px;
+    display: flex;
     width: var(--badge-height);
   }
 

package/styles/Badge.layer.css

@@ -33,7 +33,8 @@
   line-height: var(--badge-lh);
   text-decoration: none;
   padding: 0 var(--badge-padding-x);
-  display: inline-flex;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
   align-items: center;
   justify-content: center;
   width: fit-content;
@@ -55,6 +56,7 @@
 
   .m_347db0ec:where([data-circle]) {
     padding-inline: 2px;
+    display: flex;
     width: var(--badge-height);
   }
 

package/styles/Chip.css

@@ -21,7 +21,7 @@
   --chip-checked-padding-sm: 10px;
   --chip-checked-padding-md: 11.7px;
   --chip-checked-padding-lg: 13.5px;
-  --chip-checked-padding-xl: 12.5px;
+  --chip-checked-padding-xl: 15.7px;
 
   --chip-spacing-xs: 10px;
   --chip-spacing-sm: 12px;

package/styles/Chip.layer.css

@@ -21,7 +21,7 @@
   --chip-checked-padding-sm: 10px;
   --chip-checked-padding-md: 11.7px;
   --chip-checked-padding-lg: 13.5px;
-  --chip-checked-padding-xl: 12.5px;
+  --chip-checked-padding-xl: 15.7px;
 
   --chip-spacing-xs: 10px;
   --chip-spacing-sm: 12px;

package/styles/Combobox.css

@@ -7,6 +7,10 @@
     padding-inline-end: 0;
   }
 
+  .m_88b62a41:has([data-mantine-scrollbar]) .m_985517d8 {
+      max-width: calc(100% + var(--combobox-padding));
+    }
+
   .m_88b62a41[data-hidden] {
     display: none;
   }

package/styles/Combobox.layer.css

@@ -7,6 +7,10 @@
     padding-inline-end: 0;
   }
 
+  .m_88b62a41:has([data-mantine-scrollbar]) .m_985517d8 {
+      max-width: calc(100% + var(--combobox-padding));
+    }
+
   .m_88b62a41[data-hidden] {
     display: none;
   }

package/styles/Pill.css

@@ -80,6 +80,8 @@
   padding-inline-start: 0.1em;
   padding-inline-end: 0.3em;
   flex: 0;
+  border-end-end-radius: var(--pill-radius, 50%);
+  border-start-end-radius: var(--pill-radius, 50%);
 }
 
 .m_7cda1cd6[data-disabled] > .m_ae386778,

package/styles/Pill.layer.css

@@ -80,6 +80,8 @@
   padding-inline-start: 0.1em;
   padding-inline-end: 0.3em;
   flex: 0;
+  border-end-end-radius: var(--pill-radius, 50%);
+  border-start-end-radius: var(--pill-radius, 50%);
 }
 
 .m_7cda1cd6[data-disabled] > .m_ae386778,

package/styles/ScrollArea.css

@@ -109,7 +109,7 @@
 }
 
 .m_d8b5e363::before {
-    content: '""';
+    content: '';
     position: absolute;
     top: 50%;
     left: 50%;

package/styles/ScrollArea.layer.css

@@ -109,7 +109,7 @@
 }
 
 .m_d8b5e363::before {
-    content: '""';
+    content: '';
     position: absolute;
     top: 50%;
     left: 50%;

package/styles/SemiCircleProgress.css

@@ -0,0 +1,56 @@
+.m_fa528724 {
+  --scp-filled-segment-color: var(--mantine-primary-color-filled);
+  --scp-transition-duration: 0ms;
+  --scp-thickness: 10px;
+}
+
+  :where([data-mantine-color-scheme='light']) .m_fa528724 {
+    --scp-empty-segment-color: var(--mantine-color-gray-2);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_fa528724 {
+    --scp-empty-segment-color: var(--mantine-color-dark-4);
+}
+
+  .m_fa528724 {
+
+  position: relative;
+  width: fit-content;
+}
+
+.m_62e9e7e2 {
+  display: block;
+  transform: var(--scp-rotation);
+  overflow: hidden;
+}
+
+.m_c573fb6f {
+  transition:
+    stroke-dashoffset var(--scp-transition-duration) ease,
+    stroke-dasharray var(--scp-transition-duration) ease,
+    stroke var(--scp-transition-duration);
+}
+
+.m_4fa340f2 {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  inset-inline: 0;
+  text-align: center;
+  z-index: 1;
+}
+
+.m_4fa340f2:where([data-position='bottom']) {
+    bottom: 0;
+    padding-inline: calc(var(--scp-thickness) * 2);
+  }
+
+.m_4fa340f2:where([data-position='bottom']):where([data-orientation='down']) {
+      bottom: auto;
+      top: 0;
+    }
+
+.m_4fa340f2:where([data-position='center']) {
+    top: 50%;
+    padding-inline: calc(var(--scp-thickness) * 3);
+  }

package/styles/SemiCircleProgress.layer.css

@@ -0,0 +1,57 @@
+@layer mantine {.m_fa528724 {
+  --scp-filled-segment-color: var(--mantine-primary-color-filled);
+  --scp-transition-duration: 0ms;
+  --scp-thickness: 10px;
+}
+
+  :where([data-mantine-color-scheme='light']) .m_fa528724 {
+    --scp-empty-segment-color: var(--mantine-color-gray-2);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_fa528724 {
+    --scp-empty-segment-color: var(--mantine-color-dark-4);
+}
+
+  .m_fa528724 {
+
+  position: relative;
+  width: fit-content;
+}
+
+.m_62e9e7e2 {
+  display: block;
+  transform: var(--scp-rotation);
+  overflow: hidden;
+}
+
+.m_c573fb6f {
+  transition:
+    stroke-dashoffset var(--scp-transition-duration) ease,
+    stroke-dasharray var(--scp-transition-duration) ease,
+    stroke var(--scp-transition-duration);
+}
+
+.m_4fa340f2 {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  inset-inline: 0;
+  text-align: center;
+  z-index: 1;
+}
+
+.m_4fa340f2:where([data-position='bottom']) {
+    bottom: 0;
+    padding-inline: calc(var(--scp-thickness) * 2);
+  }
+
+.m_4fa340f2:where([data-position='bottom']):where([data-orientation='down']) {
+      bottom: auto;
+      top: 0;
+    }
+
+.m_4fa340f2:where([data-position='center']) {
+    top: 50%;
+    padding-inline: calc(var(--scp-thickness) * 3);
+  }
+}

package/styles/Slider.css

@@ -175,7 +175,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   height: var(--slider-size);
   width: var(--slider-size);
   border-radius: 1000px;
-  transform: translateX((calc(var(--slider-size) / -2)));
+  transform: translateX(calc(var(--slider-size) / -2));
   background-color: var(--mantine-color-white);
   pointer-events: none;
 }

package/styles/Slider.layer.css

@@ -175,7 +175,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   height: var(--slider-size);
   width: var(--slider-size);
   border-radius: 1000px;
-  transform: translateX((calc(var(--slider-size) / -2)));
+  transform: translateX(calc(var(--slider-size) / -2));
   background-color: var(--mantine-color-white);
   pointer-events: none;
 }

package/styles/Switch.css

@@ -77,6 +77,10 @@
   color: var(--switch-text-color);
 }
 
+.m_9307d992:where([data-without-labels]) {
+    width: var(--switch-width);
+  }
+
 .m_926b4011:focus-visible + .m_9307d992 {
     outline: 2px solid var(--mantine-primary-color-filled);
     outline-offset: 2px;

package/styles/Switch.layer.css

@@ -77,6 +77,10 @@
   color: var(--switch-text-color);
 }
 
+.m_9307d992:where([data-without-labels]) {
+    width: var(--switch-width);
+  }
+
 .m_926b4011:focus-visible + .m_9307d992 {
     outline: 2px solid var(--mantine-primary-color-filled);
     outline-offset: 2px;

package/styles/global.css

@@ -68,6 +68,10 @@ body {
     transform: translateY(calc(0.0625rem * var(--mantine-scale)));
   }
 
+fieldset:disabled .mantine-active:active {
+    transform: none;
+  }
+
 :where([dir="rtl"]) .mantine-rotate-rtl {
     transform: rotate(180deg);
 }

package/styles/global.layer.css

@@ -68,6 +68,10 @@ body {
     transform: translateY(calc(0.0625rem * var(--mantine-scale)));
   }
 
+fieldset:disabled .mantine-active:active {
+    transform: none;
+  }
+
 :where([dir="rtl"]) .mantine-rotate-rtl {
     transform: rotate(180deg);
 }