@mantine/core 7.1.7 → 7.2.0

package/lib/components/FileInput/FileInput.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ElementProps, Factory } from '../../core';
-import { __InputStylesNames, InputVariant } from '../Input';
-import { InputBaseProps } from '../InputBase/InputBase';
-export interface FileInputProps<Multiple = false> extends InputBaseProps, ElementProps<'button', 'value' | 'defaultValue' | 'onChange'> {
+import { ElementProps, Factory, BoxProps, StylesApiProps } from '../../core';
+import { __InputStylesNames, InputVariant, __BaseInputProps } from '../Input';
+export interface FileInputProps<Multiple = false> extends BoxProps, __BaseInputProps, StylesApiProps<FileInputFactory>, ElementProps<'button', 'value' | 'defaultValue' | 'onChange'> {
     /** Called when value changes */
     onChange?: (payload: Multiple extends true ? File[] : File | null) => void;
     /** Controlled component value */

package/lib/components/Flex/Flex.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, StyleProp, MantineSize } from '../../core';
+import { BoxProps, StylesApiProps, ElementProps, StyleProp, MantineSize, PolymorphicFactory } from '../../core';
 export type FlexStylesNames = 'root';
 export interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, ElementProps<'div'> {
     /** `gap` CSS property */
@@ -10,20 +10,35 @@ export interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, Elemen
     columnGap?: StyleProp<MantineSize | (string & {}) | number>;
     /** `align-items` CSS property */
     align?: StyleProp<React.CSSProperties['alignItems']>;
-    /** justify-content CSS property */
+    /** `justify-content` CSS property */
     justify?: StyleProp<React.CSSProperties['justifyContent']>;
-    /** flex-wrap CSS property */
+    /** `flex-wrap` CSS property */
     wrap?: StyleProp<React.CSSProperties['flexWrap']>;
-    /** flex-direction CSS property */
+    /** `flex-direction` CSS property */
     direction?: StyleProp<React.CSSProperties['flexDirection']>;
 }
-export type FlexFactory = Factory<{
+export type FlexFactory = PolymorphicFactory<{
     props: FlexProps;
-    ref: HTMLDivElement;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
     stylesNames: FlexStylesNames;
 }>;
-export declare const Flex: import("../../core").MantineComponent<{
+export declare const Flex: (<C = "div">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, FlexProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(FlexProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof FlexProps> & {
+    ref?: any;
+    renderRoot?: ((props: any) => any) | undefined;
+}) | (FlexProps & {
+    component: React.ElementType<any>;
+    renderRoot?: ((props: Record<string, any>) => any) | undefined;
+})>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: FlexProps;
-    ref: HTMLDivElement;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
     stylesNames: FlexStylesNames;
-}>;
+}> & import("../../core/factory/factory").ComponentClasses<{
+    props: FlexProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: FlexStylesNames;
+}> & Record<string, never>;

package/lib/components/Input/Input.d.ts

@@ -5,7 +5,9 @@ import { InputError } from './InputError/InputError';
 import { InputDescription } from './InputDescription/InputDescription';
 import { InputPlaceholder } from './InputPlaceholder/InputPlaceholder';
 import { InputWrapper, __InputWrapperProps, InputWrapperStylesNames } from './InputWrapper/InputWrapper';
-export interface __BaseInputProps extends __InputWrapperProps, __InputProps {
+export interface __BaseInputProps extends __InputWrapperProps, Omit<__InputProps, 'wrapperProps'> {
+    /** Props passed down to the root element */
+    wrapperProps?: Record<string, any>;
 }
 export type __InputStylesNames = InputStylesNames | InputWrapperStylesNames;
 export type InputStylesNames = 'input' | 'wrapper' | 'section';

package/lib/components/Loader/Loader.d.ts

@@ -14,6 +14,8 @@ export interface LoaderProps extends BoxProps, StylesApiProps<LoaderFactory>, Om
     type?: MantineLoader;
     /** Object of loaders components, can be customized via default props or inline. Default value contains `bars`, `oval` and `dots` */
     loaders?: MantineLoadersRecord;
+    /** Overrides default loader with given content */
+    children?: React.ReactNode;
 }
 export type LoaderFactory = Factory<{
     props: LoaderProps;

package/lib/components/NativeSelect/NativeSelect.d.ts

@@ -1,8 +1,7 @@
-import { ElementProps, Factory } from '../../core';
-import { InputBaseProps } from '../InputBase';
-import { __InputStylesNames } from '../Input';
+import { ElementProps, Factory, BoxProps, StylesApiProps } from '../../core';
+import { __InputStylesNames, __BaseInputProps } from '../Input';
 import { ComboboxData } from '../Combobox';
-export interface NativeSelectProps extends InputBaseProps, ElementProps<'select', 'size'> {
+export interface NativeSelectProps extends BoxProps, __BaseInputProps, StylesApiProps<NativeSelectFactory>, ElementProps<'select', 'size'> {
     /** Data used to render options, can be replaced with `children` */
     data?: ComboboxData;
 }

package/lib/components/NumberFormatter/NumberFormatter.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Factory, MantineThemeComponent } from '../../core';
+export interface NumberFormatterProps extends React.ComponentPropsWithoutRef<'span'> {
+    /** Value to format */
+    value?: number | string;
+    /** Determines whether negative values are allowed, `true` by default */
+    allowNegative?: boolean;
+    /** Limits the number of digits that are displayed after the decimal point, by default there is no limit */
+    decimalScale?: number;
+    /** Character used as a decimal separator, `'.'` by default */
+    decimalSeparator?: string;
+    /** If set, 0s are added after `decimalSeparator` to match given `decimalScale`. `false` by default */
+    fixedDecimalScale?: boolean;
+    /** Prefix added before the value */
+    prefix?: string;
+    /** Suffix added after the value */
+    suffix?: string;
+    /** Defines the thousand grouping style */
+    thousandsGroupStyle?: 'thousand' | 'lakh' | 'wan' | 'none';
+    /** A character used to separate thousands, `','` by default */
+    thousandSeparator?: string | boolean;
+}
+export type NumberFormatterFactory = Factory<{
+    props: NumberFormatterProps;
+    ref: HTMLDivElement;
+}>;
+export declare function NumberFormatter(_props: NumberFormatterProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace NumberFormatter {
+    var extend: (c: import("../../core/factory/factory").ExtendsRootComponent<{
+        props: NumberFormatterProps;
+        ref: HTMLDivElement;
+    }>) => MantineThemeComponent;
+    var displayName: string;
+}

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

@@ -0,0 +1,2 @@
+export { NumberFormatter } from './NumberFormatter';
+export type { NumberFormatterFactory, NumberFormatterProps } from './NumberFormatter';

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

@@ -1,12 +1,11 @@
 import React from 'react';
-import { StylesApiProps, ElementProps, Factory } from '../../core';
-import { InputBaseProps } from '../InputBase';
-import { InputVariant, __InputStylesNames } from '../Input';
+import { StylesApiProps, ElementProps, Factory, BoxProps } from '../../core';
+import { InputVariant, __InputStylesNames, __BaseInputProps } from '../Input';
 export type PasswordInputStylesNames = 'root' | 'visibilityToggle' | 'innerInput' | __InputStylesNames;
 export type PasswordInputCssVariables = {
     root: '--psi-icon-size' | '--psi-button-size';
 };
-export interface PasswordInputProps extends Omit<InputBaseProps, 'classNames' | 'styles' | 'vars'>, StylesApiProps<PasswordInputFactory>, ElementProps<'input', 'size'> {
+export interface PasswordInputProps extends BoxProps, __BaseInputProps, StylesApiProps<PasswordInputFactory>, ElementProps<'input', 'size'> {
     /** Custom visibility toggle icon */
     visibilityToggleIcon?: React.FC<{
         reveal: boolean;

package/lib/components/PillsInput/PillsInput.d.ts

@@ -1,8 +1,10 @@
-import { ElementProps, Factory } from '../../core';
-import { __InputStylesNames } from '../Input';
-import { InputBaseProps } from '../InputBase';
+import { ElementProps, Factory, BoxProps, StylesApiProps } from '../../core';
+import { __InputStylesNames, __BaseInputProps } from '../Input';
 import { PillsInputField } from './PillsInputField/PillsInputField';
-export interface PillsInputProps extends InputBaseProps, ElementProps<'div', 'size'> {
+export interface PillsInputProps extends BoxProps, __BaseInputProps, StylesApiProps<PillsInputFactory>, ElementProps<'div', 'size'> {
+    __stylesApiProps?: Record<string, any>;
+    __staticSelector?: string;
+    multiline?: boolean;
 }
 export type PillsInputFactory = Factory<{
     props: PillsInputProps;

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

@@ -5,7 +5,7 @@ import { RadioIconProps } from './RadioIcon';
 import { RadioGroup } from './RadioGroup/RadioGroup';
 export type RadioStylesNames = InlineInputStylesNames | 'inner' | 'radio' | 'icon';
 export type RadioCssVariables = {
-    root: '--radio-size' | '--radio-radius' | '--radio-color';
+    root: '--radio-size' | '--radio-radius' | '--radio-color' | '--radio-icon-color';
 };
 export interface RadioProps extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size'> {
     /** Radio label */
@@ -28,6 +28,8 @@ export interface RadioProps extends BoxProps, StylesApiProps<RadioFactory>, Elem
     radius?: MantineRadius;
     /** Assigns ref of the root element, can be used with `Tooltip` and other similar components */
     rootRef?: React.ForwardedRef<HTMLDivElement>;
+    /** Key of `theme.colors` or any valid CSS color to set icon color, `theme.white` by default */
+    iconColor?: MantineColor;
 }
 export type RadioFactory = Factory<{
     props: RadioProps;

package/lib/components/Table/Table.components.d.ts

@@ -66,6 +66,7 @@ interface TableElementOptions {
     striped?: true;
     highlightOnHover?: true;
     captionSide?: true;
+    stickyHeader?: true;
 }
 export declare function tableElement<Factory extends FactoryPayload>(element: 'th' | 'td' | 'tr' | 'thead' | 'tbody' | 'tfoot' | 'caption', options?: TableElementOptions): import("../../core").MantineComponent<Factory>;
 export declare const TableTh: import("../../core").MantineComponent<{

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

@@ -3,6 +3,7 @@ import { GetStylesApi } from '../../core';
 import type { TableFactory } from './Table';
 export interface TableContextValue {
     getStyles: GetStylesApi<TableFactory>;
+    stickyHeader: boolean | undefined;
     striped: 'odd' | 'even' | undefined;
     highlightOnHover: boolean | undefined;
     withColumnBorders: boolean | undefined;

package/lib/components/Table/Table.d.ts

@@ -1,11 +1,18 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, ElementProps, MantineColor, MantineSpacing, Factory } from '../../core';
 import { TableCaption, TableTbody, TableTd, TableTfoot, TableTh, TableTr, TableThead } from './Table.components';
+import { TableDataRenderer } from './TableDataRenderer';
 import { TableScrollContainer } from './TableScrollContainer';
 export type TableStylesNames = 'table' | 'thead' | 'tbody' | 'tfoot' | 'tr' | 'th' | 'td' | 'caption';
 export type TableCssVariables = {
-    table: '--table-layout' | '--table-border-color' | '--table-caption-side' | '--table-horizontal-spacing' | '--table-vertical-spacing' | '--table-striped-color' | '--table-highlight-on-hover-color';
+    table: '--table-layout' | '--table-border-color' | '--table-caption-side' | '--table-horizontal-spacing' | '--table-vertical-spacing' | '--table-striped-color' | '--table-highlight-on-hover-color' | '--table-sticky-header-offset';
 };
+export interface TableData {
+    head?: React.ReactNode[];
+    body?: React.ReactNode[][];
+    foot?: React.ReactNode[];
+    caption?: string;
+}
 export interface TableProps extends BoxProps, StylesApiProps<TableFactory>, ElementProps<'table'> {
     /** Value of `table-layout` style, `auto` by default */
     layout?: React.CSSProperties['tableLayout'];
@@ -31,6 +38,12 @@ export interface TableProps extends BoxProps, StylesApiProps<TableFactory>, Elem
     highlightOnHover?: boolean;
     /** Background color of table rows when hovered, key of `theme.colors` or any valid CSS color */
     highlightOnHoverColor?: MantineColor;
+    /** Data that should be used to generate table, ignored if `children` prop is set */
+    data?: TableData;
+    /** Determines whether `Table.Thead` should be sticky, `false` by default */
+    stickyHeader?: boolean;
+    /** Offset from top at which `Table.Thead` should become sticky, `0` by default */
+    stickyHeaderOffset?: number | string;
 }
 export type TableFactory = Factory<{
     props: TableProps;
@@ -46,6 +59,7 @@ export type TableFactory = Factory<{
         Tr: typeof TableTr;
         Caption: typeof TableCaption;
         ScrollContainer: typeof TableScrollContainer;
+        DataRenderer: typeof TableDataRenderer;
     };
 }>;
 export declare const Table: import("../../core").MantineComponent<{
@@ -62,5 +76,6 @@ export declare const Table: import("../../core").MantineComponent<{
         Tr: typeof TableTr;
         Caption: typeof TableCaption;
         ScrollContainer: typeof TableScrollContainer;
+        DataRenderer: typeof TableDataRenderer;
     };
 }>;

package/lib/components/Table/TableDataRenderer.d.ts

@@ -0,0 +1,8 @@
+import type { TableData } from './Table';
+export interface TableDataRendererProps {
+    data: TableData;
+}
+export declare function TableDataRenderer({ data }: TableDataRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TableDataRenderer {
+    var displayName: string;
+}

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

@@ -1,5 +1,5 @@
 export { Table } from './Table';
 export { TableCaption, TableTbody, TableTd, TableTfoot, TableTr, TableTh, TableThead, } from './Table.components';
 export { TableScrollContainer } from './TableScrollContainer';
-export type { TableProps, TableStylesNames, TableCssVariables, TableFactory } from './Table';
+export type { TableProps, TableStylesNames, TableCssVariables, TableFactory, TableData, } from './Table';
 export type { TableTbodyProps, TableTdProps, TableThProps, TableTrProps, TableCaptionProps, TableTfootProps, TableTheadProps, } from './Table.components';

package/lib/components/TextInput/TextInput.d.ts

@@ -1,7 +1,6 @@
-import { ElementProps, Factory } from '../../core';
-import { InputBaseProps } from '../InputBase';
-import { __InputStylesNames } from '../Input';
-export interface TextInputProps extends InputBaseProps, ElementProps<'input', 'size'> {
+import { ElementProps, Factory, BoxProps, StylesApiProps } from '../../core';
+import { __InputStylesNames, __BaseInputProps } from '../Input';
+export interface TextInputProps extends BoxProps, __BaseInputProps, StylesApiProps<TextInputFactory>, ElementProps<'input', 'size'> {
 }
 export type TextInputFactory = Factory<{
     props: TextInputProps;

package/lib/components/Textarea/Textarea.d.ts

@@ -1,7 +1,7 @@
-import { ElementProps, Factory } from '../../core';
-import { InputBaseProps } from '../InputBase';
-import { __InputStylesNames } from '../Input';
-export interface TextareaProps extends InputBaseProps, ElementProps<'textarea', 'size'> {
+import { ElementProps, Factory, BoxProps, StylesApiProps } from '../../core';
+import { __BaseInputProps, __InputStylesNames } from '../Input';
+export interface TextareaProps extends BoxProps, __BaseInputProps, StylesApiProps<TextareaFactory>, ElementProps<'textarea', 'size'> {
+    __staticSelector?: string;
     /** Determines whether the textarea height should grow with its content, `false` by default */
     autosize?: boolean;
     /** Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set */

package/lib/components/index.d.ts

@@ -62,6 +62,7 @@ export * from './MultiSelect';
 export * from './NativeSelect';
 export * from './NavLink';
 export * from './Notification';
+export * from './NumberFormatter';
 export * from './NumberInput';
 export * from './Pagination';
 export * from './PasswordInput';

package/lib/core/Box/Box.d.ts

@@ -15,6 +15,10 @@ export interface BoxProps extends MantineStyleProps {
     hiddenFrom?: MantineBreakpoint;
     /** Breakpoint below which the component is hidden with `display: none` */
     visibleFrom?: MantineBreakpoint;
+    /** Determines whether component should be hidden in light color scheme with `display: none` */
+    lightHidden?: boolean;
+    /** Determines whether component should be hidden in dark color scheme with `display: none` */
+    darkHidden?: boolean;
 }
 export type ElementProps<ElementType extends React.ElementType, PropsToOmit extends string = never> = Omit<React.ComponentPropsWithoutRef<ElementType>, 'style' | PropsToOmit>;
 export interface BoxComponentProps extends BoxProps {

package/lib/core/MantineProvider/color-functions/default-variant-colors-resolver/default-variant-colors-resolver.d.ts

@@ -10,6 +10,7 @@ export interface VariantColorResolverResult {
     hover: string;
     color: string;
     border: string;
+    hoverColor?: string;
 }
 export type VariantColorsResolver = (input: VariantColorsResolverInput) => VariantColorResolverResult;
 export declare const defaultVariantColorsResolver: VariantColorsResolver;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/core",
   "description": "React components library focused on usability, accessibility and developer experience",
-  "version": "7.1.7",
+  "version": "7.2.0",
   "main": "./cjs/index.js",
   "types": "./lib/index.d.ts",
   "module": "./esm/index.mjs",
@@ -43,7 +43,7 @@
     "design"
   ],
   "peerDependencies": {
-    "@mantine/hooks": "7.1.7",
+    "@mantine/hooks": "7.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },