@mantine/core 7.0.0-alpha.14 → 7.0.0-alpha.16

package/lib/components/Input/use-input-props.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BoxProps, StylesApiProps } from '../../core';
 import { __BaseInputProps } from './Input';
 interface BaseProps extends __BaseInputProps, BoxProps, StylesApiProps<{
@@ -8,7 +9,7 @@ interface BaseProps extends __BaseInputProps, BoxProps, StylesApiProps<{
     __stylesApiProps?: Record<string, any>;
     id?: string;
 }
-export declare function useInputProps<T extends BaseProps, U extends Partial<T>>(component: string, defaultProps: U, _props: T): Omit<T & { [Key in Extract<keyof T, never>]-?: {}[Key] | NonNullable<T[Key]>; }, "label" | "style" | "size" | "variant" | "error" | "className" | "id" | "classNames" | "styles" | "vars" | "description" | "required" | "unstyled" | "__staticSelector" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
+export declare function useInputProps<T extends BaseProps, U extends Partial<T>>(component: string, defaultProps: U, _props: T): Omit<T & { [Key in Extract<keyof T, never>]-?: {}[Key] | NonNullable<T[Key]>; }, "label" | "style" | "className" | "variant" | "size" | "styles" | "description" | "required" | "id" | "__staticSelector" | "unstyled" | "classNames" | "vars" | "error" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
     classNames: Partial<Record<string, string>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
     styles: Partial<Record<string, import("react").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("react").CSSProperties>>) | undefined;
     unstyled: boolean | undefined;
@@ -17,27 +18,26 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         slot?: string | undefined;
         style: import("../../core").MantineStyleProp;
         title?: string | undefined;
-        onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-        dir?: string | undefined;
+        className: string | undefined;
         color?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        hidden?: boolean | undefined;
         key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
-        className: string | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
         contextMenu?: string | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
-        hidden?: boolean | undefined;
-        id: string;
+        dir?: string | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
+        id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
         placeholder?: string | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
         tabIndex?: number | undefined;
-        translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: import("react").AriaRole | undefined;
         about?: string | undefined;
@@ -62,47 +62,47 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
-        'aria-atomic'?: (boolean | "true" | "false") | undefined;
-        'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
-        'aria-busy'?: (boolean | "true" | "false") | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-atomic'?: (boolean | "false" | "true") | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "both" | "list" | undefined;
+        'aria-busy'?: (boolean | "false" | "true") | undefined;
+        'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
         'aria-colcount'?: number | undefined;
         'aria-colindex'?: number | undefined;
         'aria-colspan'?: number | undefined;
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+        'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
-        'aria-disabled'?: (boolean | "true" | "false") | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-disabled'?: (boolean | "false" | "true") | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
-        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-expanded'?: (boolean | "false" | "true") | undefined;
         'aria-flowto'?: string | undefined;
-        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-        'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
-        'aria-hidden'?: (boolean | "true" | "false") | undefined;
-        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        'aria-grabbed'?: (boolean | "false" | "true") | undefined;
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
+        'aria-hidden'?: (boolean | "false" | "true") | undefined;
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         'aria-keyshortcuts'?: string | undefined;
         'aria-label'?: string | undefined;
         'aria-labelledby'?: string | undefined;
         'aria-level'?: number | undefined;
         'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        'aria-modal'?: (boolean | "true" | "false") | undefined;
-        'aria-multiline'?: (boolean | "true" | "false") | undefined;
-        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
-        'aria-orientation'?: "vertical" | "horizontal" | undefined;
+        'aria-modal'?: (boolean | "false" | "true") | undefined;
+        'aria-multiline'?: (boolean | "false" | "true") | undefined;
+        'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
         'aria-owns'?: string | undefined;
         'aria-placeholder'?: string | undefined;
         'aria-posinset'?: number | undefined;
-        'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-        'aria-readonly'?: (boolean | "true" | "false") | undefined;
-        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+        'aria-readonly'?: (boolean | "false" | "true") | undefined;
+        'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "false" | "true") | undefined;
         'aria-roledescription'?: string | undefined;
         'aria-rowcount'?: number | undefined;
         'aria-rowindex'?: number | undefined;
         'aria-rowspan'?: number | undefined;
-        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-selected'?: (boolean | "false" | "true") | undefined;
         'aria-setsize'?: number | undefined;
         'aria-sort'?: "none" | "other" | "ascending" | "descending" | undefined;
         'aria-valuemax'?: number | undefined;
@@ -144,6 +144,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
         onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
         onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
         onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
@@ -287,7 +288,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         styles: Partial<Record<string, import("react").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("react").CSSProperties>>) | undefined;
         size: (string & {}) | import("../../core").MantineSize | undefined;
         inputContainer: ((children: import("react").ReactNode) => import("react").ReactNode) | undefined;
-        inputWrapperOrder: ("input" | "label" | "error" | "description")[] | undefined;
+        inputWrapperOrder: ("input" | "label" | "description" | "error")[] | undefined;
         withAsterisk: boolean | undefined;
         variant: string | undefined;
     } & BoxProps;
@@ -296,7 +297,6 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         classNames: Partial<Record<string, string>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
         styles: Partial<Record<string, import("react").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("react").CSSProperties>>) | undefined;
         unstyled: boolean | undefined;
-        id: string;
         size: (string & {}) | import("../../core").MantineSize | undefined;
         __staticSelector: string | undefined;
         __stylesApiProps: Record<string, any>;

package/lib/components/InputBase/InputBase.d.ts

@@ -5,6 +5,10 @@ export interface InputBaseProps extends BoxProps, __BaseInputProps, StylesApiPro
     __staticSelector?: string;
     /** Props passed to the root element (`Input.Wrapper` component) */
     wrapperProps?: Record<string, any>;
+    /** Determines whether the input can have multiple lines, for example when `component="textarea"`, `false` by default */
+    multiline?: boolean;
+    /** Determines whether `aria-` and other accessibility attributes should be added to the input, `true` by default */
+    withAria?: boolean;
 }
 export type InputBaseFactory = PolymorphicFactory<{
     props: InputBaseProps;

package/lib/components/ModalBase/use-modal.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TransitionOverride } from '../Transition';
 interface UseModalInput {
     opened: boolean;

package/lib/components/Pill/Pill.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize, MantineRadius } from '../../core';
+import { PillGroup } from './PillGroup/PillGroup';
+export type PillStylesNames = 'root' | 'label' | 'remove';
+export type PillVariant = 'default' | 'contrast';
+export type PillCssVariables = {
+    root: '--pill-fz' | '--pill-radius' | '--pill-height';
+};
+export interface PillProps extends BoxProps, StylesApiProps<PillFactory>, ElementProps<'div'> {
+    /** Controls pill `font-size` and `padding`, `'sm'` by default */
+    size?: MantineSize;
+    /** Determines whether the remove button should be displayed, `false` by default */
+    withRemoveButton?: boolean;
+    /** Called when the remove button is clicked */
+    onRemove?(): void;
+    /** Props passed down to the remove button */
+    removeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
+    /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. `'xl'` by default. */
+    radius?: MantineRadius | (string & {}) | number;
+    /** If pill is disabled it has higher contrast to be visible on the disabled input background and the remove button is hidden */
+    disabled?: boolean;
+}
+export type PillFactory = Factory<{
+    props: PillProps;
+    ref: HTMLDivElement;
+    stylesNames: PillStylesNames;
+    vars: PillCssVariables;
+    variant: PillVariant;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+    staticComponents: {
+        Group: typeof PillGroup;
+    };
+}>;
+export declare const Pill: import("../../core").MantineComponent<{
+    props: PillProps;
+    ref: HTMLDivElement;
+    stylesNames: PillStylesNames;
+    vars: PillCssVariables;
+    variant: PillVariant;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+    staticComponents: {
+        Group: typeof PillGroup;
+    };
+}>;

package/lib/components/Pill/PillGroup/PillGroup.d.ts

@@ -0,0 +1,31 @@
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize } from '../../../core';
+export type PillGroupStylesNames = 'root';
+export type PillGroupCssVariables = {
+    root: '--pg-gap';
+};
+export interface PillGroupProps extends BoxProps, StylesApiProps<PillGroupFactory>, ElementProps<'div'> {
+    /** Controls spacing between pills, by default controlled by `size` */
+    gap?: MantineSize | (string & {}) | number;
+    /** Controls size of the child `Pill` components and gap between them, `'sm'` by default */
+    size?: MantineSize | (string & {});
+    /** Determines whether child `Pill` components should be disabled */
+    disabled?: boolean;
+}
+export type PillGroupFactory = Factory<{
+    props: PillGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: PillGroupStylesNames;
+    vars: PillGroupCssVariables;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+}>;
+export declare const PillGroup: import("../../../core").MantineComponent<{
+    props: PillGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: PillGroupStylesNames;
+    vars: PillGroupCssVariables;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+}>;

package/lib/components/Pill/PillGroup.context.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MantineSize } from '../../core';
+export interface PillGroupContextValue {
+    size: MantineSize | (string & {}) | undefined;
+    disabled: boolean | undefined;
+}
+export declare const PillGroupProvider: ({ children, value }: {
+    value: PillGroupContextValue;
+    children: import("react").ReactNode;
+}) => JSX.Element, usePillGroupContext: () => PillGroupContextValue | null;

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

@@ -0,0 +1,4 @@
+export { Pill } from './Pill';
+export { PillGroup } from './PillGroup/PillGroup';
+export type { PillCssVariables, PillFactory, PillProps, PillStylesNames, PillVariant, } from './Pill';
+export type { PillGroupCssVariables, PillGroupFactory, PillGroupProps, PillGroupStylesNames, } from './PillGroup/PillGroup';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MantineSize } from '../../core';
+import { InputVariant } from '../Input';
+export interface PillsInputContextValue {
+    fieldRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    size: MantineSize | (string & {});
+    disabled: boolean | undefined;
+    hasError: boolean | undefined;
+    variant: InputVariant | (string & {}) | undefined;
+}
+export declare const PillsInputProvider: ({ children, value }: {
+    value: PillsInputContextValue;
+    children: React.ReactNode;
+}) => JSX.Element, usePillsInputContext: () => PillsInputContextValue | null;

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

@@ -0,0 +1,22 @@
+import { ElementProps, Factory } from '../../core';
+import { __InputStylesNames } from '../Input';
+import { InputBaseProps } from '../InputBase';
+import { PillsInputField } from './PillsInputField/PillsInputField';
+export interface PillsInputProps extends InputBaseProps, ElementProps<'div', 'size'> {
+}
+export type PillsInputFactory = Factory<{
+    props: PillsInputProps;
+    ref: HTMLInputElement;
+    stylesNames: __InputStylesNames;
+    staticComponents: {
+        Field: typeof PillsInputField;
+    };
+}>;
+export declare const PillsInput: import("../../core").MantineComponent<{
+    props: PillsInputProps;
+    ref: HTMLInputElement;
+    stylesNames: __InputStylesNames;
+    staticComponents: {
+        Field: typeof PillsInputField;
+    };
+}>;

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

@@ -0,0 +1,22 @@
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize } from '../../../core';
+export type PillsInputFieldStylesNames = 'root';
+export interface PillsInputFieldProps extends BoxProps, StylesApiProps<PillsInputFieldFactory>, ElementProps<'input', 'type'> {
+    /** Controls input styles when focused. If `auto` the input is hidden when not focused. If `visible` the input will always remain visible. `'visible'` by default  */
+    type?: 'auto' | 'visible' | 'hidden';
+}
+export type PillsInputFieldFactory = Factory<{
+    props: PillsInputFieldProps;
+    ref: HTMLInputElement;
+    stylesNames: PillsInputFieldStylesNames;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+}>;
+export declare const PillsInputField: import("../../../core").MantineComponent<{
+    props: PillsInputFieldProps;
+    ref: HTMLInputElement;
+    stylesNames: PillsInputFieldStylesNames;
+    ctx: {
+        size: MantineSize | (string & {});
+    };
+}>;

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

@@ -0,0 +1,4 @@
+export { PillsInput } from './PillsInput';
+export { PillsInputField } from './PillsInputField/PillsInputField';
+export type { PillsInputFactory, PillsInputProps } from './PillsInput';
+export type { PillsInputFieldFactory, PillsInputFieldProps, PillsInputFieldStylesNames, } from './PillsInputField/PillsInputField';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface ScrollAreaContextValue {
     type: 'auto' | 'always' | 'scroll' | 'hover' | 'never';
     scrollHideDelay: number;

package/lib/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.context.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface ScrollbarContextValue {
     hasThumb: boolean;
     scrollbar: HTMLDivElement | null;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GetStylesApi } from '../../core';
 export type SliderStylesNames = 'root' | 'label' | 'thumb' | 'trackContainer' | 'track' | 'bar' | 'markWrapper' | 'mark' | 'markLabel';
 export type SliderCssVariables = {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GetStylesApi } from '../../core';
 import type { TableFactory } from './Table';
 export interface TableContextValue {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GetStylesApi } from '../../core';
 import type { TabsFactory } from './Tabs';
 export interface TabsContextValue {

package/lib/components/Tooltip/TooltipFloating/use-floating-tooltip.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FloatingPosition } from '../../Floating';
 interface UseFloatingTooltip {
     offset: number;

package/lib/components/index.d.ts

@@ -1,3 +1,6 @@
+export * from './UnstyledButton';
+export * from './VisuallyHidden';
+export * from './Accordion';
 export * from './ActionIcon';
 export * from './Affix';
 export * from './Alert';
@@ -39,6 +42,8 @@ export * from './NativeSelect';
 export * from './Notification';
 export * from './Overlay';
 export * from './Paper';
+export * from './Pill';
+export * from './PillsInput';
 export * from './Popover';
 export * from './Portal';
 export * from './ScrollArea';
@@ -54,5 +59,3 @@ export * from './Title';
 export * from './Tooltip';
 export * from './Transition';
 export * from './TypographyStylesProvider';
-export * from './UnstyledButton';
-export * from './VisuallyHidden';

package/lib/core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.d.ts

@@ -1,2 +1,2 @@
 import { UseMediaQueryOptions } from '@mantine/hooks';
-export declare function useComputedColorScheme(defaultValue: 'light' | 'dark', options?: UseMediaQueryOptions): "light" | "dark";
+export declare function useComputedColorScheme(defaultValue: 'light' | 'dark', options?: UseMediaQueryOptions): "dark" | "light";

package/lib/core/utils/create-optional-context/create-optional-context.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function createOptionalContext<ContextValue>(initialValue?: ContextValue | null): readonly [({ children, value }: {
+    value: ContextValue;
+    children: React.ReactNode;
+}) => JSX.Element, () => ContextValue | null];

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

@@ -6,6 +6,7 @@ export { filterProps } from './filter-props/filter-props';
 export { isNumberLike } from './is-number-like/is-number-like';
 export { isElement } from './is-element/is-element';
 export { createSafeContext } from './create-safe-context/create-safe-context';
+export { createOptionalContext } from './create-optional-context/create-optional-context';
 export { getSafeId } from './get-safe-id/get-safe-id';
 export { createScopedKeydownHandler } from './create-scoped-keydown-handler/create-scoped-keydown-handler';
 export { findElementAncestor } from './find-element-ancestor/find-element-ancestor';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/core",
   "description": "React components library focused on usability, accessibility and developer experience",
-  "version": "7.0.0-alpha.14",
+  "version": "7.0.0-alpha.16",
   "types": "./lib/index.d.ts",
   "exports": {
     ".": {
@@ -34,7 +34,7 @@
     "design"
   ],
   "peerDependencies": {
-    "@mantine/hooks": "7.0.0-alpha.14",
+    "@mantine/hooks": "7.0.0-alpha.16",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },