@mantine/core 8.3.6 → 8.3.8

package/lib/components/Menu/MenuSub/MenuSub.d.ts

@@ -6,10 +6,12 @@ import { MenuSubTarget } from '../MenuSubTarget/MenuSubTarget';
 export type MenuSubFactory = Factory<{
     props: MenuSubProps;
 }>;
-interface MenuSubProps extends __PopoverProps {
+export interface MenuSubProps extends __PopoverProps {
     children: React.ReactNode;
     /** Called with current state when dropdown opens or closes */
     onChange?: (opened: boolean) => void;
+    /** Open delay in ms */
+    openDelay?: number;
     /** Close delay in ms */
     closeDelay?: number;
     /** Dropdown position relative to the target element @default `'right-start'` */
@@ -27,37 +29,36 @@ export declare namespace MenuSub {
     var displayName: string;
     var Target: typeof MenuSubTarget;
     var Dropdown: import("../../..").MantineComponent<{
-        props: import("../MenuSubDropdown/MenuSubDropdown").MenuSubDropdownProps;
+        props: import("..").MenuSubDropdownProps;
         ref: HTMLDivElement;
         stylesNames: import("../MenuSubDropdown/MenuSubDropdown").MenuSubDropdownStylesNames;
         compound: true;
     }>;
-    var Item: (<C = "button">(props: import("../../..").PolymorphicComponentProps<C, import("../MenuSubItem/MenuSubItem").MenuSubItemProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(import("../MenuSubItem/MenuSubItem").MenuSubItemProps & {
+    var Item: (<C = "button">(props: import("../../..").PolymorphicComponentProps<C, import("..").MenuSubItemProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(import("..").MenuSubItemProps & {
         component?: any;
-    } & Omit<Omit<any, "ref">, "component" | keyof import("../MenuSubItem/MenuSubItem").MenuSubItemProps> & {
+    } & Omit<Omit<any, "ref">, "component" | keyof import("..").MenuSubItemProps> & {
         ref?: any;
         renderRoot?: (props: any) => any;
-    }) | (import("../MenuSubItem/MenuSubItem").MenuSubItemProps & {
+    }) | (import("..").MenuSubItemProps & {
         component: React.ElementType;
         renderRoot?: (props: Record<string, any>) => any;
     })>, never> & import("../../../core/factory/factory").ThemeExtend<{
-        props: import("../MenuSubItem/MenuSubItem").MenuSubItemProps;
+        props: import("..").MenuSubItemProps;
         defaultRef: HTMLButtonElement;
         defaultComponent: "button";
         stylesNames: import("../MenuSubItem/MenuSubItem").MenuSubItemStylesNames;
         compound: true;
     }> & import("../../../core/factory/factory").ComponentClasses<{
-        props: import("../MenuSubItem/MenuSubItem").MenuSubItemProps;
+        props: import("..").MenuSubItemProps;
         defaultRef: HTMLButtonElement;
         defaultComponent: "button";
         stylesNames: import("../MenuSubItem/MenuSubItem").MenuSubItemStylesNames;
         compound: true;
     }> & import("../../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
-        props: import("../MenuSubItem/MenuSubItem").MenuSubItemProps;
+        props: import("..").MenuSubItemProps;
         defaultRef: HTMLButtonElement;
         defaultComponent: "button";
         stylesNames: import("../MenuSubItem/MenuSubItem").MenuSubItemStylesNames;
         compound: true;
     }> & Record<string, never>;
 }
-export {};

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

@@ -4,9 +4,17 @@ export { MenuItem } from './MenuItem/MenuItem';
 export { MenuLabel } from './MenuLabel/MenuLabel';
 export { MenuDropdown } from './MenuDropdown/MenuDropdown';
 export { MenuTarget } from './MenuTarget/MenuTarget';
+export { MenuSub } from './MenuSub/MenuSub';
+export { MenuSubDropdown } from './MenuSubDropdown/MenuSubDropdown';
+export { MenuSubItem } from './MenuSubItem/MenuSubItem';
+export { MenuSubTarget } from './MenuSubTarget/MenuSubTarget';
 export type { MenuFactory, MenuProps, MenuStylesNames } from './Menu';
 export type { MenuDividerProps } from './MenuDivider/MenuDivider';
 export type { MenuItemProps } from './MenuItem/MenuItem';
 export type { MenuLabelProps } from './MenuLabel/MenuLabel';
 export type { MenuDropdownProps } from './MenuDropdown/MenuDropdown';
 export type { MenuTargetProps } from './MenuTarget/MenuTarget';
+export type { MenuSubProps } from './MenuSub/MenuSub';
+export type { MenuSubDropdownProps } from './MenuSubDropdown/MenuSubDropdown';
+export type { MenuSubItemProps } from './MenuSubItem/MenuSubItem';
+export type { MenuSubTargetProps } from './MenuSubTarget/MenuSubTarget';

package/lib/components/NumberInput/NumberInput.d.ts

@@ -23,7 +23,7 @@ export interface NumberInputProps extends BoxProps, __BaseInputProps, StylesApiP
     allowLeadingZeros?: boolean;
     /** If set, negative values are allowed @default `true` */
     allowNegative?: boolean;
-    /** Characters which when pressed result in a decimal separator @default `['.']` */
+    /** Characters which when pressed result in a decimal separator @default `['.', ',']` */
     allowedDecimalSeparators?: string[];
     /** Limits the number of digits that can be entered after the decimal point @default `Infinity` */
     decimalScale?: number;

package/lib/components/Radio/RadioGroup/RadioGroup.d.ts

@@ -18,6 +18,8 @@ export interface RadioGroupProps extends Omit<InputWrapperProps, 'onChange' | 'v
     name?: string;
     /** If set, value cannot be changed */
     readOnly?: boolean;
+    /** Sets `disabled` attribute, prevents interactions */
+    disabled?: boolean;
 }
 export type RadioGroupFactory = Factory<{
     props: RadioGroupProps;

package/lib/components/Radio/RadioGroup.context.d.ts

@@ -4,6 +4,7 @@ interface RadioGroupContextValue {
     value: string;
     onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;
     name: string;
+    disabled?: boolean;
 }
 export declare const RadioGroupProvider: ({ children, value }: {
     value: RadioGroupContextValue;

package/lib/components/Switch/SwitchGroup/SwitchGroup.d.ts

@@ -16,6 +16,8 @@ export interface SwitchGroupProps extends Omit<InputWrapperProps, 'onChange'> {
     size?: MantineSize | (string & {});
     /** If set, value cannot be changed */
     readOnly?: boolean;
+    /** Sets `disabled` attribute, prevents interactions */
+    disabled?: boolean;
 }
 export type SwitchGroupFactory = Factory<{
     props: SwitchGroupProps;

package/lib/components/Switch/SwitchGroup.context.d.ts

@@ -3,6 +3,7 @@ interface SwitchGroupContextValue {
     value: string[];
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     size: MantineSize | (string & {}) | undefined;
+    disabled?: boolean;
 }
 export declare const SwitchGroupProvider: import("react").Provider<SwitchGroupContextValue | null>;
 export declare const useSwitchGroupContext: () => SwitchGroupContextValue | null;

package/lib/core/utils/find-element-in-shadow-dom/find-element-in-shadow-dom.d.ts

@@ -0,0 +1,7 @@
+export declare function findElementBySelector<T extends HTMLElement>(selector: string, root?: Document | Element | ShadowRoot): T | null;
+export declare function findElementsBySelector<T extends HTMLElement>(selector: string, root?: Document | Element | ShadowRoot): T[];
+/**
+ * Gets the appropriate root element (Document or ShadowRoot) for DOM queries
+ * based on the provided target element reference.
+ */
+export declare function getRootElement(targetElement: HTMLElement | null | undefined): Document | ShadowRoot;

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

@@ -25,3 +25,4 @@ 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';
+export { findElementBySelector, findElementsBySelector, getRootElement, } from './find-element-in-shadow-dom/find-element-in-shadow-dom';

package/package.json

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

package/styles/AppShell.css

@@ -72,6 +72,10 @@
     border-inline-start: 1px solid var(--app-shell-border-color);
   }
 
+:where([data-scroll-locked]) .m_9cdde9a {
+    visibility: var(--app-shell-aside-scroll-locked-visibility);
+  }
+
 .m_8983817 {
   padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
   padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
@@ -85,13 +89,13 @@
 .m_3840c879 {
   position: fixed;
   inset-inline: 0;
-  transition-property: transform, left, right;
+  transition-property: transform, margin-inline-start, margin-inline-end;
   background-color: var(--mantine-color-body);
 }
 
 :where([data-layout='alt']) .m_3b16f56b, :where([data-layout='alt']) .m_3840c879 {
-    inset-inline-start: var(--app-shell-navbar-offset, 0rem);
-    inset-inline-end: var(--app-shell-aside-offset, 0rem);
+    margin-inline-start: var(--app-shell-navbar-offset, 0rem);
+    margin-inline-end: var(--app-shell-aside-offset, 0rem);
   }
 
 .m_3b16f56b {

package/styles/AppShell.layer.css

@@ -72,6 +72,10 @@
     border-inline-start: 1px solid var(--app-shell-border-color);
   }
 
+:where([data-scroll-locked]) .m_9cdde9a {
+    visibility: var(--app-shell-aside-scroll-locked-visibility);
+  }
+
 .m_8983817 {
   padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
   padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
@@ -85,13 +89,13 @@
 .m_3840c879 {
   position: fixed;
   inset-inline: 0;
-  transition-property: transform, left, right;
+  transition-property: transform, margin-inline-start, margin-inline-end;
   background-color: var(--mantine-color-body);
 }
 
 :where([data-layout='alt']) .m_3b16f56b, :where([data-layout='alt']) .m_3840c879 {
-    inset-inline-start: var(--app-shell-navbar-offset, 0rem);
-    inset-inline-end: var(--app-shell-aside-offset, 0rem);
+    margin-inline-start: var(--app-shell-navbar-offset, 0rem);
+    margin-inline-end: var(--app-shell-aside-offset, 0rem);
   }
 
 .m_3b16f56b {

package/styles.css

@@ -2256,6 +2256,10 @@ fieldset:disabled .mantine-active:active {
     border-inline-start: 1px solid var(--app-shell-border-color);
   }
 
+:where([data-scroll-locked]) .m_9cdde9a {
+    visibility: var(--app-shell-aside-scroll-locked-visibility);
+  }
+
 .m_8983817 {
   padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
   padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
@@ -2269,13 +2273,13 @@ fieldset:disabled .mantine-active:active {
 .m_3840c879 {
   position: fixed;
   inset-inline: 0;
-  transition-property: transform, left, right;
+  transition-property: transform, margin-inline-start, margin-inline-end;
   background-color: var(--mantine-color-body);
 }
 
 :where([data-layout='alt']) .m_3b16f56b, :where([data-layout='alt']) .m_3840c879 {
-    inset-inline-start: var(--app-shell-navbar-offset, 0rem);
-    inset-inline-end: var(--app-shell-aside-offset, 0rem);
+    margin-inline-start: var(--app-shell-navbar-offset, 0rem);
+    margin-inline-end: var(--app-shell-aside-offset, 0rem);
   }
 
 .m_3b16f56b {

package/styles.layer.css

@@ -2256,6 +2256,10 @@ fieldset:disabled .mantine-active:active {
     border-inline-start: 1px solid var(--app-shell-border-color);
   }
 
+:where([data-scroll-locked]) .m_9cdde9a {
+    visibility: var(--app-shell-aside-scroll-locked-visibility);
+  }
+
 .m_8983817 {
   padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
   padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
@@ -2269,13 +2273,13 @@ fieldset:disabled .mantine-active:active {
 .m_3840c879 {
   position: fixed;
   inset-inline: 0;
-  transition-property: transform, left, right;
+  transition-property: transform, margin-inline-start, margin-inline-end;
   background-color: var(--mantine-color-body);
 }
 
 :where([data-layout='alt']) .m_3b16f56b, :where([data-layout='alt']) .m_3840c879 {
-    inset-inline-start: var(--app-shell-navbar-offset, 0rem);
-    inset-inline-end: var(--app-shell-aside-offset, 0rem);
+    margin-inline-start: var(--app-shell-navbar-offset, 0rem);
+    margin-inline-end: var(--app-shell-aside-offset, 0rem);
   }
 
 .m_3b16f56b {