@mantine/core 8.3.9 → 8.3.10

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

@@ -10,7 +10,7 @@ export type NumberInputStylesNames = 'controls' | 'control' | __InputStylesNames
 export type NumberInputCssVariables = {
     controls: '--ni-chevron-size';
 };
-export interface NumberInputProps extends BoxProps, __BaseInputProps, StylesApiProps<NumberInputFactory>, ElementProps<'input', 'size' | 'type' | 'onChange'> {
+export interface NumberInputProps extends BoxProps, Omit<__BaseInputProps, 'pointer'>, StylesApiProps<NumberInputFactory>, ElementProps<'input', 'size' | 'type' | 'onChange'> {
     /** Controlled component value */
     value?: number | string;
     /** Uncontrolled component default value */

package/lib/components/PasswordInput/PasswordInput.d.ts

@@ -4,7 +4,7 @@ export type PasswordInputStylesNames = 'root' | 'visibilityToggle' | 'innerInput
 export type PasswordInputCssVariables = {
     root: '--psi-icon-size' | '--psi-button-size';
 };
-export interface PasswordInputProps extends BoxProps, __BaseInputProps, StylesApiProps<PasswordInputFactory>, ElementProps<'input', 'size'> {
+export interface PasswordInputProps extends BoxProps, Omit<__BaseInputProps, 'pointer'>, StylesApiProps<PasswordInputFactory>, ElementProps<'input', 'size'> {
     /** A component to replace the visibility toggle icon */
     visibilityToggleIcon?: React.FC<{
         reveal: boolean;

package/lib/core/MantineProvider/MantineCssVariables/MantineCssVariables.d.ts

@@ -1,5 +1,5 @@
 interface MantineCssVariablesProps {
-    cssVariablesSelector: string;
+    cssVariablesSelector?: string;
     deduplicateCssVariables: boolean;
 }
 export declare function MantineCssVariables({ cssVariablesSelector, deduplicateCssVariables, }: MantineCssVariablesProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/core/MantineProvider/MantineProvider.d.ts

@@ -14,7 +14,7 @@ export interface MantineProviderProps {
     defaultColorScheme?: MantineColorScheme;
     /** Forces color scheme value, if set, MantineProvider ignores `colorSchemeManager` and `defaultColorScheme` */
     forceColorScheme?: 'light' | 'dark';
-    /** CSS selector to which CSS variables should be added, `:root` by default */
+    /** CSS selector to which CSS variables should be added, by default variables are applied to `:root` and `:host` */
     cssVariablesSelector?: string;
     /** Determines whether theme CSS variables should be added to given `cssVariablesSelector` @default `true` */
     withCssVariables?: boolean;

package/lib/core/MantineProvider/convert-css-variables/convert-css-variables.d.ts

@@ -7,4 +7,4 @@ export interface ConvertCSSVariablesInput {
     /** CSS variables available only in light color scheme */
     light: CSSVariables;
 }
-export declare function convertCssVariables(input: ConvertCSSVariablesInput, selector: string): string;
+export declare function convertCssVariables(input: ConvertCSSVariablesInput, selectorOverride?: string): string;

package/lib/core/utils/get-single-element-child/get-single-element-child.d.ts

@@ -0,0 +1 @@
+export declare function getSingleElementChild(children: React.ReactNode): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -26,3 +26,4 @@ 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';
+export { getSingleElementChild } from './get-single-element-child/get-single-element-child';

package/package.json

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

package/styles/InlineInput.css

@@ -57,6 +57,7 @@ fieldset:disabled .m_8ee546b8,
   margin-top: calc(var(--mantine-spacing-xs) / 2);
   padding-inline-start: var(--label-offset-start);
   padding-inline-end: var(--label-offset-end);
+  cursor: default;
 }
 
 .m_8e8a99cc {

package/styles/InlineInput.layer.css

@@ -57,6 +57,7 @@ fieldset:disabled .m_8ee546b8,
   margin-top: calc(var(--mantine-spacing-xs) / 2);
   padding-inline-start: var(--label-offset-start);
   padding-inline-end: var(--label-offset-end);
+  cursor: default;
 }
 
 .m_8e8a99cc {

package/styles/baseline.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   color-scheme: var(--mantine-color-scheme);
 }
 
@@ -20,7 +21,8 @@ select {
   text-transform: none;
 }
 
-body {
+body,
+:host {
   margin: 0;
   font-family: var(--mantine-font-family);
   font-size: var(--mantine-font-size-md);
@@ -34,7 +36,8 @@ body {
 
 @media screen and (max-device-width: 31.25em) {
 
-body {
+body,
+:host {
     -webkit-text-size-adjust: 100%
 }
   }

package/styles/baseline.layer.css

@@ -1,4 +1,5 @@
-@layer mantine {:root {
+@layer mantine {:root,
+:host {
   color-scheme: var(--mantine-color-scheme);
 }
 
@@ -20,7 +21,8 @@ select {
   text-transform: none;
 }
 
-body {
+body,
+:host {
   margin: 0;
   font-family: var(--mantine-font-family);
   font-size: var(--mantine-font-size-md);
@@ -34,7 +36,8 @@ body {
 
 @media screen and (max-device-width: 31.25em) {
 
-body {
+body,
+:host {
     -webkit-text-size-adjust: 100%
 }
   }

package/styles/default-css-variables.css

@@ -1,5 +1,6 @@
 /* This file is automatically generated, do not modify it directly. */
-:root {
+:root,
+:host {
   --mantine-z-index-app: 100;
   --mantine-z-index-modal: 200;
   --mantine-z-index-popover: 300;
@@ -256,7 +257,8 @@
   --mantine-h6-font-weight: 700;
 }
 
-:root[data-mantine-color-scheme='dark'] {
+:root[data-mantine-color-scheme='dark'],
+:host([data-mantine-color-scheme='dark']) {
   --mantine-color-scheme: dark;
   --mantine-primary-color-contrast: var(--mantine-color-white);
   --mantine-color-bright: var(--mantine-color-white);
@@ -387,7 +389,8 @@
   --mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);
 }
 
-:root[data-mantine-color-scheme='light'] {
+:root[data-mantine-color-scheme='light'],
+:host([data-mantine-color-scheme='light']) {
   --mantine-color-scheme: light;
   --mantine-primary-color-contrast: var(--mantine-color-white);
   --mantine-color-bright: var(--mantine-color-black);

package/styles/default-css-variables.layer.css

@@ -1,5 +1,6 @@
 @layer mantine {/* This file is automatically generated, do not modify it directly. */
-:root {
+:root,
+:host {
   --mantine-z-index-app: 100;
   --mantine-z-index-modal: 200;
   --mantine-z-index-popover: 300;
@@ -256,7 +257,8 @@
   --mantine-h6-font-weight: 700;
 }
 
-:root[data-mantine-color-scheme='dark'] {
+:root[data-mantine-color-scheme='dark'],
+:host([data-mantine-color-scheme='dark']) {
   --mantine-color-scheme: dark;
   --mantine-primary-color-contrast: var(--mantine-color-white);
   --mantine-color-bright: var(--mantine-color-white);
@@ -387,7 +389,8 @@
   --mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);
 }
 
-:root[data-mantine-color-scheme='light'] {
+:root[data-mantine-color-scheme='light'],
+:host([data-mantine-color-scheme='light']) {
   --mantine-color-scheme: light;
   --mantine-primary-color-contrast: var(--mantine-color-white);
   --mantine-color-bright: var(--mantine-color-black);

package/styles.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   color-scheme: var(--mantine-color-scheme);
 }
 
@@ -20,7 +21,8 @@ select {
   text-transform: none;
 }
 
-body {
+body,
+:host {
   margin: 0;
   font-family: var(--mantine-font-family);
   font-size: var(--mantine-font-size-md);
@@ -34,7 +36,8 @@ body {
 
 @media screen and (max-device-width: 31.25em) {
 
-body {
+body,
+:host {
     -webkit-text-size-adjust: 100%
 }
   }
@@ -81,7 +84,8 @@ fieldset:disabled .mantine-active:active {
 }
 
 /* This file is automatically generated, do not modify it directly. */
-:root {
+:root,
+:host {
   --mantine-z-index-app: 100;
   --mantine-z-index-modal: 200;
   --mantine-z-index-popover: 300;
@@ -338,7 +342,8 @@ fieldset:disabled .mantine-active:active {
   --mantine-h6-font-weight: 700;
 }
 
-:root[data-mantine-color-scheme='dark'] {
+:root[data-mantine-color-scheme='dark'],
+:host([data-mantine-color-scheme='dark']) {
   --mantine-color-scheme: dark;
   --mantine-primary-color-contrast: var(--mantine-color-white);
   --mantine-color-bright: var(--mantine-color-white);
@@ -469,7 +474,8 @@ fieldset:disabled .mantine-active:active {
   --mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);
 }
 
-:root[data-mantine-color-scheme='light'] {
+:root[data-mantine-color-scheme='light'],
+:host([data-mantine-color-scheme='light']) {
   --mantine-color-scheme: light;
   --mantine-primary-color-contrast: var(--mantine-color-white);
   --mantine-color-bright: var(--mantine-color-black);
@@ -2604,6 +2610,7 @@ fieldset:disabled .m_8ee546b8,
   margin-top: calc(var(--mantine-spacing-xs) / 2);
   padding-inline-start: var(--label-offset-start);
   padding-inline-end: var(--label-offset-end);
+  cursor: default;
 }
 
 .m_8e8a99cc {

package/styles.layer.css

@@ -1,4 +1,5 @@
-@layer mantine {:root {
+@layer mantine {:root,
+:host {
   color-scheme: var(--mantine-color-scheme);
 }
 
@@ -20,7 +21,8 @@ select {
   text-transform: none;
 }
 
-body {
+body,
+:host {
   margin: 0;
   font-family: var(--mantine-font-family);
   font-size: var(--mantine-font-size-md);
@@ -34,7 +36,8 @@ body {
 
 @media screen and (max-device-width: 31.25em) {
 
-body {
+body,
+:host {
     -webkit-text-size-adjust: 100%
 }
   }
@@ -81,7 +84,8 @@ fieldset:disabled .mantine-active:active {
 }
 
 /* This file is automatically generated, do not modify it directly. */
-:root {
+:root,
+:host {
   --mantine-z-index-app: 100;
   --mantine-z-index-modal: 200;
   --mantine-z-index-popover: 300;
@@ -338,7 +342,8 @@ fieldset:disabled .mantine-active:active {
   --mantine-h6-font-weight: 700;
 }
 
-:root[data-mantine-color-scheme='dark'] {
+:root[data-mantine-color-scheme='dark'],
+:host([data-mantine-color-scheme='dark']) {
   --mantine-color-scheme: dark;
   --mantine-primary-color-contrast: var(--mantine-color-white);
   --mantine-color-bright: var(--mantine-color-white);
@@ -469,7 +474,8 @@ fieldset:disabled .mantine-active:active {
   --mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);
 }
 
-:root[data-mantine-color-scheme='light'] {
+:root[data-mantine-color-scheme='light'],
+:host([data-mantine-color-scheme='light']) {
   --mantine-color-scheme: light;
   --mantine-primary-color-contrast: var(--mantine-color-white);
   --mantine-color-bright: var(--mantine-color-black);
@@ -2604,6 +2610,7 @@ fieldset:disabled .m_8ee546b8,
   margin-top: calc(var(--mantine-spacing-xs) / 2);
   padding-inline-start: var(--label-offset-start);
   padding-inline-end: var(--label-offset-end);
+  cursor: default;
 }
 
 .m_8e8a99cc {

package/cjs/core/MantineProvider/convert-css-variables/wrap-with-selector.cjs

@@ -1,10 +0,0 @@
-'use client';
-'use strict';
-
-function wrapWithSelector(selectors, code) {
-  const _selectors = Array.isArray(selectors) ? selectors : [selectors];
-  return _selectors.reduce((acc, selector) => `${selector}{${acc}}`, code);
-}
-
-exports.wrapWithSelector = wrapWithSelector;
-//# sourceMappingURL=wrap-with-selector.cjs.map

package/cjs/core/MantineProvider/convert-css-variables/wrap-with-selector.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"wrap-with-selector.cjs","sources":["../../../../src/core/MantineProvider/convert-css-variables/wrap-with-selector.ts"],"sourcesContent":["export function wrapWithSelector(selectors: string | string[], code: string) {\n  const _selectors = Array.isArray(selectors) ? selectors : [selectors];\n  return _selectors.reduce((acc, selector) => `${selector}{${acc}}`, code);\n}\n"],"names":[],"mappings":";;;AAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAiB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAA8B,IAAA,CAAA,CAAc,CAAA;AAC3E,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAa,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAY,CAAC,SAAS,CAAA,CAAA;AACpE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,UAAA,CAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAC,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAa,GAAG,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CAAA,CAAA,CAAI,CAAA,CAAA,CAAG,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAA,CAAA,CAAI,CAAA,CAAA;AACzE,CAAA;;"}

package/esm/core/MantineProvider/convert-css-variables/wrap-with-selector.mjs

@@ -1,8 +0,0 @@
-'use client';
-function wrapWithSelector(selectors, code) {
-  const _selectors = Array.isArray(selectors) ? selectors : [selectors];
-  return _selectors.reduce((acc, selector) => `${selector}{${acc}}`, code);
-}
-
-export { wrapWithSelector };
-//# sourceMappingURL=wrap-with-selector.mjs.map

package/esm/core/MantineProvider/convert-css-variables/wrap-with-selector.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"wrap-with-selector.mjs","sources":["../../../../src/core/MantineProvider/convert-css-variables/wrap-with-selector.ts"],"sourcesContent":["export function wrapWithSelector(selectors: string | string[], code: string) {\n  const _selectors = Array.isArray(selectors) ? selectors : [selectors];\n  return _selectors.reduce((acc, selector) => `${selector}{${acc}}`, code);\n}\n"],"names":[],"mappings":";AAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAiB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAA8B,IAAA,CAAA,CAAc,CAAA;AAC3E,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAa,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAY,CAAC,SAAS,CAAA,CAAA;AACpE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,UAAA,CAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAC,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAa,GAAG,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CAAA,CAAA,CAAI,CAAA,CAAA,CAAG,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAA,CAAA,CAAI,CAAA,CAAA;AACzE,CAAA;;"}

package/lib/core/MantineProvider/convert-css-variables/wrap-with-selector.d.ts

@@ -1 +0,0 @@
-export declare function wrapWithSelector(selectors: string | string[], code: string): string;