@mantine/core 6.0.9 → 7.0.0-alpha.2

package/lib/components/Floating/use-floating-auto-update.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { FloatingPosition } from './types';
+interface Payload {
+    opened: boolean | undefined;
+    floating: {
+        update(): void;
+        refs: {
+            floating: React.MutableRefObject<any>;
+            reference: React.MutableRefObject<any>;
+        };
+    };
+    positionDependencies: any[];
+    position: FloatingPosition;
+}
+export declare function useFloatingAutoUpdate({ opened, floating, position, positionDependencies, }: Payload): void;
+export {};

package/lib/components/FocusTrap/FocusTrap.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface FocusTrapProps {
+    /** Element at which focus should be trapped, should support ref prop */
+    children: any;
+    /** Determines whether focus should be trapped within child element */
+    active?: boolean;
+    /** Prop that should be used to access component ref */
+    refProp?: string;
+}
+export declare function FocusTrap({ children, active, refProp, }: FocusTrapProps): React.ReactElement;
+export declare namespace FocusTrap {
+    var displayName: string;
+}

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

@@ -0,0 +1,2 @@
+export { FocusTrap } from './FocusTrap';
+export type { FocusTrapProps } from './FocusTrap';

package/lib/components/Group/Group.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, MantineSpacing, Factory } from '../../core';
+export type GroupStylesNames = 'root';
+export type GroupVariant = string;
+export type GroupCssVariables = {
+    root: '--group-gap' | '--group-align' | '--group-justify' | '--group-wrap' | '--group-child-width';
+};
+export interface GroupStylesCtx {
+    childWidth: string;
+}
+export interface GroupProps extends BoxProps, StylesApiProps<GroupFactory>, ElementProps<'div'> {
+    /** Controls `justify-content` CSS property, `'flex-start'` by default */
+    justify?: React.CSSProperties['justifyContent'];
+    /** Controls `align-items` CSS property, `'center'` by default */
+    align?: React.CSSProperties['alignItems'];
+    /** Controls `flex-wrap` CSS property, `'wrap'` by default */
+    wrap?: React.CSSProperties['flexWrap'];
+    /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem (1rem = 16px), `'md'` by default */
+    gap?: MantineSpacing | (string & {}) | number;
+    /** Determines whether each child element should have `flex-grow: 1` style, `false` by default */
+    grow?: boolean;
+    /** Determines whether children should take only dedicated amount of space (`max-width` style is set based on the number of children), `true` by default */
+    preventGrowOverflow?: boolean;
+}
+export type GroupFactory = Factory<{
+    props: GroupProps;
+    ref: HTMLDivElement;
+    stylesNames: GroupStylesNames;
+    vars: GroupCssVariables;
+    ctx: GroupStylesCtx;
+    variant: GroupVariant;
+}>;
+export declare const Group: import("../../core").MantineComponent<{
+    props: GroupProps;
+    ref: HTMLDivElement;
+    stylesNames: GroupStylesNames;
+    vars: GroupCssVariables;
+    ctx: GroupStylesCtx;
+    variant: GroupVariant;
+}>;

package/lib/components/Group/filter-falsy-children/filter-falsy-children.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement, ReactNode } from 'react';
+export declare function filterFalsyChildren(children: ReactNode): ReactElement<any, string | import("react").JSXElementConstructor<any>>[];

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

@@ -0,0 +1,2 @@
+export { Group } from './Group';
+export type { GroupCssVariables, GroupFactory, GroupStylesNames, GroupStylesCtx, GroupVariant, GroupProps, } from './Group';

package/lib/components/Highlight/Highlight.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { MantineColor, MantineTheme, PolymorphicFactory } from '../../core';
+import { TextStylesNames, TextProps, TextVariant } from '../Text';
+export interface HighlightProps extends TextProps {
+    /** Substring or an array of substrings to highlight in `children` */
+    highlight: string | string[];
+    /** Key of `theme.colors` or any valid CSS color, passed to `Mark` component `color` prop, `yellow` by default */
+    color?: MantineColor | string;
+    /** Styles applied to `mark` elements */
+    highlightStyles?: React.CSSProperties | ((theme: MantineTheme) => React.CSSProperties);
+    /** String parts of which must be highlighted */
+    children: string;
+}
+export type HighlightFactory = PolymorphicFactory<{
+    props: HighlightProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: TextStylesNames;
+    variant: TextVariant;
+}>;
+export declare const Highlight: (<C = "div">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, HighlightProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(HighlightProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof HighlightProps> & {
+    ref?: any;
+}) | (HighlightProps & {
+    component: React.ElementType<any>;
+})>, never> & import("../../core/factory/factory").ThemeExtend<{
+    props: HighlightProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: TextStylesNames;
+    variant: TextVariant;
+}> & Record<string, never>;

package/lib/components/Highlight/highlighter/highlighter.d.ts

@@ -0,0 +1,4 @@
+export declare function highlighter(value: string, _highlight: string | string[]): {
+    chunk: string;
+    highlighted: boolean;
+}[];

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

@@ -0,0 +1,2 @@
+export { Highlight } from './Highlight';
+export type { HighlightFactory, HighlightProps } from './Highlight';

package/lib/components/InlineInput/InlineInput.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, MantineSize, Factory } from '../../core';
+export type InlineInputStylesNames = 'root' | 'body' | 'labelWrapper' | 'label' | 'description' | 'error';
+export interface InlineInputProps extends BoxProps, StylesApiProps<InlineInputFactory>, ElementProps<'div'> {
+    __staticSelector: string;
+    __stylesApiProps: Record<string, any>;
+    label: React.ReactNode;
+    description: React.ReactNode;
+    id: string;
+    disabled: boolean | undefined;
+    error: React.ReactNode;
+    size: MantineSize | (string & {}) | undefined;
+    labelPosition?: 'left' | 'right';
+}
+export type InlineInputFactory = Factory<{
+    props: any;
+    stylesNames: InlineInputStylesNames;
+}>;
+export declare const InlineInput: React.ForwardRefExoticComponent<InlineInputProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { InlineInput } from './InlineInput';
+export type { InlineInputStylesNames } from './InlineInput';

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, MantineRadius, MantineSize, PolymorphicFactory } from '../../core';
+import { InputLabel } from './InputLabel/InputLabel';
+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 type __InputStylesNames = InputStylesNames | InputWrapperStylesNames;
+export type InputStylesNames = 'input' | 'wrapper' | 'section';
+export type InputVariant = 'default' | 'filled' | 'unstyled';
+export type InputCssVariables = {
+    wrapper: '--input-height' | '--input-fz' | '--input-radius' | '--input-left-section-width' | '--input-right-section-width' | '--input-left-section-pointer-events' | '--input-right-section-pointer-events' | '--input-padding-y' | '--input-margin-top' | '--input-margin-bottom';
+};
+export interface InputStylesCtx {
+    offsetTop: boolean;
+    offsetBottom: boolean;
+}
+export interface __InputProps {
+    /** Content section rendered on the left side of the input */
+    leftSection?: React.ReactNode;
+    /** Left section width, used to set `width` of the section and input `padding-left`, by default equals to input height */
+    leftSectionWidth?: React.CSSProperties['width'];
+    /** Props added to `leftSection` element */
+    leftSectionProps?: React.ComponentPropsWithoutRef<'div'>;
+    /** Sets `pointer-events` styles of `leftSection` node, `'none'` by default */
+    leftSectionPointerEvents?: React.CSSProperties['pointerEvents'];
+    /** Content section rendered on the right side of the input */
+    rightSection?: React.ReactNode;
+    /** Right section width, used to set `width` of the section and input `padding-right`, by default equals to input height */
+    rightSectionWidth?: React.CSSProperties['width'];
+    /** Props added to `rightSection` element */
+    rightSectionProps?: React.ComponentPropsWithoutRef<'div'>;
+    /** Sets `pointer-events` styles of `rightSection` node, `'none'` by default */
+    rightSectionPointerEvents?: React.CSSProperties['pointerEvents'];
+    /** Props added to root element of `Input` component */
+    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
+    /** Sets `required` attribute on the `input` element */
+    required?: boolean;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem (1rem = 16px), `theme.defaultRadius` by default */
+    radius?: MantineRadius | (string & {}) | number;
+    /** Sets `disabled` attribute on the `input` element */
+    disabled?: boolean;
+    /** Input size */
+    size?: MantineSize | (string & {});
+    /** Determines whether the input should have `cursor: pointer` style, `false` by default */
+    pointer?: boolean;
+}
+export interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {
+    __staticSelector?: string;
+    /** Props passed to Styles API context, replaces Input.Wrapper props */
+    __stylesApiProps?: Record<string, any>;
+    /** Determines whether the input should have error styles and `aria-invalid` attribute */
+    error?: React.ReactNode;
+    /** Determines whether the input can have multiple lines, for example when `component="textarea"`, `false` by default */
+    multiline?: boolean;
+}
+export type InputFactory = PolymorphicFactory<{
+    props: InputProps;
+    defaultRef: HTMLInputElement;
+    defaultComponent: 'input';
+    stylesNames: InputStylesNames;
+    variant: InputVariant;
+    vars: InputCssVariables;
+    ctx: InputStylesCtx;
+    staticComponents: {
+        Label: typeof InputLabel;
+        Error: typeof InputError;
+        Description: typeof InputDescription;
+        Placeholder: typeof InputPlaceholder;
+        Wrapper: typeof InputWrapper;
+    };
+}>;
+export declare const Input: (<C = "input">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, InputProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(InputProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof InputProps> & {
+    ref?: any;
+}) | (InputProps & {
+    component: React.ElementType<any>;
+})>, never> & import("../../core/factory/factory").ThemeExtend<{
+    props: InputProps;
+    defaultRef: HTMLInputElement;
+    defaultComponent: 'input';
+    stylesNames: InputStylesNames;
+    variant: InputVariant;
+    vars: InputCssVariables;
+    ctx: InputStylesCtx;
+    staticComponents: {
+        Label: typeof InputLabel;
+        Error: typeof InputError;
+        Description: typeof InputDescription;
+        Placeholder: typeof InputPlaceholder;
+        Wrapper: typeof InputWrapper;
+    };
+}> & {
+    Label: typeof InputLabel;
+    Error: typeof InputError;
+    Description: typeof InputDescription;
+    Placeholder: typeof InputPlaceholder;
+    Wrapper: typeof InputWrapper;
+};

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

@@ -0,0 +1,25 @@
+import { BoxProps, StylesApiProps, ElementProps, MantineSize, Factory } from '../../../core';
+export type InputDescriptionStylesNames = 'description';
+export type InputDescriptionVariant = string;
+export type InputDescriptionCssVariables = {
+    description: '--input-description-size';
+};
+export interface InputDescriptionProps extends BoxProps, StylesApiProps<InputDescriptionFactory>, ElementProps<'div'> {
+    __staticSelector?: string;
+    /** Controls description `font-size`, `'sm'` by default */
+    size?: MantineSize | (string & {});
+}
+export type InputDescriptionFactory = Factory<{
+    props: InputDescriptionProps;
+    ref: HTMLParagraphElement;
+    stylesNames: InputDescriptionStylesNames;
+    vars: InputDescriptionCssVariables;
+    variant: InputDescriptionVariant;
+}>;
+export declare const InputDescription: import("../../../core").MantineComponent<{
+    props: InputDescriptionProps;
+    ref: HTMLParagraphElement;
+    stylesNames: InputDescriptionStylesNames;
+    vars: InputDescriptionCssVariables;
+    variant: InputDescriptionVariant;
+}>;

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

@@ -0,0 +1,25 @@
+import { BoxProps, StylesApiProps, ElementProps, MantineSize, Factory } from '../../../core';
+export type InputErrorStylesNames = 'error';
+export type InputErrorVariant = string;
+export type InputErrorCssVariables = {
+    error: '--input-error-size';
+};
+export interface InputErrorProps extends BoxProps, StylesApiProps<InputErrorFactory>, ElementProps<'div'> {
+    __staticSelector?: string;
+    /** Controls error `font-size`, `'sm'` by default */
+    size?: MantineSize | (string & {});
+}
+export type InputErrorFactory = Factory<{
+    props: InputErrorProps;
+    ref: HTMLParagraphElement;
+    stylesNames: InputErrorStylesNames;
+    vars: InputErrorCssVariables;
+    variant: InputErrorVariant;
+}>;
+export declare const InputError: import("../../../core").MantineComponent<{
+    props: InputErrorProps;
+    ref: HTMLParagraphElement;
+    stylesNames: InputErrorStylesNames;
+    vars: InputErrorCssVariables;
+    variant: InputErrorVariant;
+}>;

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

@@ -0,0 +1,29 @@
+import { BoxProps, StylesApiProps, ElementProps, MantineSize, Factory } from '../../../core';
+export type InputLabelStylesNames = 'label' | 'required';
+export type InputLabelVariant = string;
+export type InputLabelCssVariables = {
+    label: '--input-asterisk-color' | '--input-label-size';
+};
+export interface InputLabelProps extends BoxProps, StylesApiProps<InputLabelFactory>, ElementProps<'label'> {
+    __staticSelector?: string;
+    /** Determines whether required asterisk should be displayed  */
+    required?: boolean;
+    /** Controls label `font-size`, `'sm'` by default */
+    size?: MantineSize | (string & {});
+    /** Root element of the label, `'label'` by default */
+    labelElement?: 'label' | 'div';
+}
+export type InputLabelFactory = Factory<{
+    props: InputLabelProps;
+    ref: HTMLLabelElement;
+    stylesNames: InputLabelStylesNames;
+    vars: InputLabelCssVariables;
+    variant: InputLabelVariant;
+}>;
+export declare const InputLabel: import("../../../core").MantineComponent<{
+    props: InputLabelProps;
+    ref: HTMLLabelElement;
+    stylesNames: InputLabelStylesNames;
+    vars: InputLabelCssVariables;
+    variant: InputLabelVariant;
+}>;

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

@@ -0,0 +1,18 @@
+import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../../core';
+export type InputPlaceholderStylesNames = 'placeholder';
+export type InputPlaceholderVariant = string;
+export interface InputPlaceholderProps extends BoxProps, StylesApiProps<InputPlaceholderFactory>, ElementProps<'span'> {
+    __staticSelector?: string;
+}
+export type InputPlaceholderFactory = Factory<{
+    props: InputPlaceholderProps;
+    ref: HTMLSpanElement;
+    stylesNames: InputPlaceholderStylesNames;
+    variant: InputPlaceholderVariant;
+}>;
+export declare const InputPlaceholder: import("../../../core").MantineComponent<{
+    props: InputPlaceholderProps;
+    ref: HTMLSpanElement;
+    stylesNames: InputPlaceholderStylesNames;
+    variant: InputPlaceholderVariant;
+}>;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, MantineSize, Factory } from '../../../core';
+import { InputLabelStylesNames, InputLabelCssVariables } from '../InputLabel/InputLabel';
+import { InputDescriptionStylesNames, InputDescriptionCssVariables } from '../InputDescription/InputDescription';
+import { InputErrorStylesNames, InputErrorCssVariables } from '../InputError/InputError';
+export type InputWrapperCssVariables = InputLabelCssVariables & InputErrorCssVariables & InputDescriptionCssVariables;
+export type InputWrapperStylesNames = 'root' | InputLabelStylesNames | InputDescriptionStylesNames | InputErrorStylesNames;
+export interface __InputWrapperProps {
+    /** Contents of `Input.Label` component, if not set, label is not rendered. */
+    label?: React.ReactNode;
+    /** Contents of `Input.Description` component, if not set, description is not rendered. */
+    description?: React.ReactNode;
+    /** Contents of `Input.Error` component, if not set, error is not rendered. */
+    error?: React.ReactNode;
+    /** Adds required attribute to the input and a red asterisk on the right side of label, `false` by default */
+    required?: boolean;
+    /** Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input, `false` by default */
+    withAsterisk?: boolean;
+    /** Props spread to the `Input.Label` component */
+    labelProps?: Record<string, any>;
+    /** Props spread to the `Input.Description` component */
+    descriptionProps?: Record<string, any>;
+    /** Props spread to the `InputError` component */
+    errorProps?: Record<string, any>;
+    /** Input container component, defaults to `React.Fragment` */
+    inputContainer?(children: React.ReactNode): React.ReactNode;
+    /** Controls order of the elements, `['label', 'description', 'input', 'error']` by default */
+    inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];
+}
+export interface InputWrapperProps extends __InputWrapperProps, BoxProps, StylesApiProps<InputWrapperFactory>, ElementProps<'div'> {
+    __staticSelector?: string;
+    /** Props passed to Styles API context, replaces Input.Wrapper props */
+    __stylesApiProps?: Record<string, any>;
+    /** Static id used as base to generate `aria-` attributes, by default generates random id */
+    id?: string;
+    /** Controls size of `Input.Label`, `Input.Description` and `Input.Error` components */
+    size?: MantineSize | (string & {});
+    /** `Input.Label` root element, `'label'` by default */
+    labelElement?: 'label' | 'div';
+}
+export type InputWrapperFactory = Factory<{
+    props: InputWrapperProps;
+    ref: HTMLDivElement;
+    stylesNames: InputWrapperStylesNames;
+    vars: InputWrapperCssVariables;
+}>;
+export declare const InputWrapper: import("../../../core").MantineComponent<{
+    props: InputWrapperProps;
+    ref: HTMLDivElement;
+    stylesNames: InputWrapperStylesNames;
+    vars: InputWrapperCssVariables;
+}>;

package/lib/components/Input/InputWrapper/get-input-offsets/get-input-offsets.d.ts

@@ -0,0 +1,7 @@
+export declare function getInputOffsets(inputWrapperOrder: ('label' | 'input' | 'description' | 'error')[], { hasDescription, hasError }: {
+    hasDescription: boolean;
+    hasError: boolean;
+}): {
+    offsetBottom: boolean;
+    offsetTop: boolean;
+};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { GetStylesApi } from '../../core';
+import type { InputWrapperFactory } from './InputWrapper/InputWrapper';
+interface InputWrapperContextValue {
+    offsetTop: boolean;
+    offsetBottom: boolean;
+    describedBy: string | undefined;
+    getStyles: GetStylesApi<InputWrapperFactory> | null;
+}
+export declare const InputWrapperProvider: import("react").Provider<InputWrapperContextValue>;
+export declare const useInputWrapperContext: () => InputWrapperContextValue;
+export {};

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

@@ -0,0 +1,8 @@
+export { Input } from './Input';
+export { useInputProps } from './use-input-props';
+export type { __InputProps, __BaseInputProps, __InputStylesNames, InputCssVariables, InputFactory, InputProps, InputStylesNames, InputVariant, } from './Input';
+export type { __InputWrapperProps, InputWrapperFactory, InputWrapperProps, InputWrapperStylesNames, } from './InputWrapper/InputWrapper';
+export type { InputDescriptionCssVariables, InputDescriptionFactory, InputDescriptionProps, InputDescriptionStylesNames, InputDescriptionVariant, } from './InputDescription/InputDescription';
+export type { InputErrorCssVariables, InputErrorFactory, InputErrorProps, InputErrorStylesNames, InputErrorVariant, } from './InputError/InputError';
+export type { InputLabelCssVariables, InputLabelFactory, InputLabelProps, InputLabelStylesNames, InputLabelVariant, } from './InputLabel/InputLabel';
+export type { InputPlaceholderFactory, InputPlaceholderProps, InputPlaceholderStylesNames, InputPlaceholderVariant, } from './InputPlaceholder/InputPlaceholder';