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

package/lib/components/Combobox/ComboboxHeader/ComboboxHeader.d.ts

@@ -0,0 +1,16 @@
+import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../../core';
+export type ComboboxHeaderStylesNames = 'header';
+export interface ComboboxHeaderProps extends BoxProps, StylesApiProps<ComboboxHeaderFactory>, ElementProps<'div'> {
+}
+export type ComboboxHeaderFactory = Factory<{
+    props: ComboboxHeaderProps;
+    ref: HTMLDivElement;
+    stylesNames: ComboboxHeaderStylesNames;
+    compound: true;
+}>;
+export declare const ComboboxHeader: import("../../../core").MantineComponent<{
+    props: ComboboxHeaderProps;
+    ref: HTMLDivElement;
+    stylesNames: ComboboxHeaderStylesNames;
+    compound: true;
+}>;

package/lib/components/Combobox/ComboboxTarget/ComboboxTarget.d.ts

@@ -9,6 +9,11 @@ export interface ComboboxTargetProps {
     withKeyboardNavigation?: boolean;
     /** Determines whether the target should have `aria-` attributes, `true` by default */
     withAriaAttributes?: boolean;
+    /** Determines which events should be handled by the target element.
+     * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.
+     * `input` by default.
+     * */
+    targetType?: 'button' | 'input';
 }
 export type ComboboxTargetFactory = Factory<{
     props: ComboboxTargetProps;

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

@@ -10,7 +10,7 @@ export { ComboboxEmpty } from './ComboboxEmpty/ComboboxEmpty';
 export { useCombobox } from './use-combobox/use-combobox';
 export { useVirtualizedCombobox } from './use-combobox/use-virtualized-combobox';
 export { useComboboxTargetProps } from './use-combobox-target-props/use-combobox-target-props';
-export type { ComboboxStore } from './use-combobox/use-combobox';
+export type { ComboboxStore, ComboboxDropdownEventSource } from './use-combobox/use-combobox';
 export type { ComboboxItem, ComboboxData, ComboboxParsedItem, ComboboxItemGroup, ComboboxParsedItemGroup, } from './Combobox.types';
 export type { ComboboxFactory, ComboboxProps, ComboboxStylesNames } from './Combobox';
 export type { ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';

package/lib/components/Combobox/use-combobox/use-combobox.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
+export type ComboboxDropdownEventSource = 'keyboard' | 'mouse' | 'unknown';
 export interface ComboboxStore {
     dropdownOpened: boolean;
-    openDropdown(): void;
-    closeDropdown(): void;
-    toggleDropdown(): void;
+    openDropdown(eventSource?: ComboboxDropdownEventSource): void;
+    closeDropdown(eventSource?: ComboboxDropdownEventSource): void;
+    toggleDropdown(eventSource?: ComboboxDropdownEventSource): void;
     selectedOptionIndex: number;
     selectOption(index: number): void;
     selectActiveOption(): string | null;
@@ -12,6 +13,7 @@ export interface ComboboxStore {
     selectPreviousOption(): string | null;
     resetSelectedOption(): void;
     clickSelectedOption(): void;
+    updateSelectedOptionIndex(target?: 'active' | 'selected'): void;
     listId: string | null;
     setListId(id: string): void;
     searchRef: React.MutableRefObject<HTMLInputElement | null>;
@@ -26,12 +28,14 @@ interface UseComboboxOptions {
     opened?: boolean;
     /** Called when `dropdownOpened` state changes */
     onOpenedChange?(opened: boolean): void;
-    /** Called when dropdown closes */
-    onDropdownClose?(): void;
-    /** Called when dropdown opens */
-    onDropdownOpen?(): void;
+    /** Called when dropdown closes with event source: keyboard, mouse or unknown */
+    onDropdownClose?(eventSource: ComboboxDropdownEventSource): void;
+    /** Called when dropdown opens with event source: keyboard, mouse or unknown */
+    onDropdownOpen?(eventSource: ComboboxDropdownEventSource): void;
     /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
     loop?: boolean;
+    /** `behavior` passed down to `element.scrollIntoView`, `'instant'` by default */
+    scrollBehavior?: ScrollBehavior;
 }
-export declare function useCombobox({ defaultOpened, opened, onOpenedChange, onDropdownClose, onDropdownOpen, loop, }?: UseComboboxOptions): ComboboxStore;
+export declare function useCombobox({ defaultOpened, opened, onOpenedChange, onDropdownClose, onDropdownOpen, loop, scrollBehavior, }?: UseComboboxOptions): ComboboxStore;
 export {};

package/lib/components/Combobox/use-combobox-target-props/use-combobox-target-props.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 interface UseComboboxTargetPropsInput {
+    targetType: 'input' | 'button' | undefined;
     withAriaAttributes: boolean | undefined;
     withKeyboardNavigation: boolean | undefined;
     onKeyDown: React.KeyboardEventHandler<HTMLInputElement> | undefined;
 }
-export declare function useComboboxTargetProps({ onKeyDown, withKeyboardNavigation, withAriaAttributes, }: UseComboboxTargetPropsInput): {
+export declare function useComboboxTargetProps({ onKeyDown, withKeyboardNavigation, withAriaAttributes, targetType, }: UseComboboxTargetPropsInput): {
     onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     'aria-haspopup': string;
     'aria-expanded': boolean | undefined;

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,103 +9,67 @@ 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]>; }, "vars" | "variant" | "className" | "style" | "unstyled" | "classNames" | "styles" | "size" | "__staticSelector" | "label" | "id" | "required" | "error" | "description" | "__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;
     wrapperProps: {
+        className: string | undefined;
+        style: import("../../core").MantineStyleProp;
         children?: import("react").ReactNode;
+        hidden?: boolean | undefined;
+        color?: string | undefined;
         slot?: string | undefined;
-        style: import("../../core").MantineStyleProp;
         title?: string | undefined;
-        onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-        dir?: string | undefined;
-        color?: string | 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;
-        contextMenu?: string | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
-        hidden?: boolean | undefined;
         id: string;
         lang?: string | undefined;
-        nonce?: string | undefined;
-        placeholder?: string | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined;
-        translate?: "yes" | "no" | undefined;
-        radioGroup?: string | undefined;
         role?: import("react").AriaRole | undefined;
-        about?: string | undefined;
-        datatype?: string | undefined;
-        inlist?: any;
-        prefix?: string | undefined;
-        property?: string | undefined;
-        resource?: string | undefined;
-        typeof?: string | undefined;
-        vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
-        autoCorrect?: string | undefined;
-        autoSave?: string | undefined;
-        itemProp?: string | undefined;
-        itemScope?: boolean | undefined;
-        itemType?: string | undefined;
-        itemID?: string | undefined;
-        itemRef?: string | undefined;
-        results?: number | undefined;
-        security?: string | undefined;
-        unselectable?: "on" | "off" | undefined;
-        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-        is?: string | undefined;
+        tabIndex?: number | 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'?: "both" | "none" | "inline" | "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 | "page" | "false" | "true" | "time" | "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 | "listbox" | "grid" | "menu" | "false" | "true" | "dialog" | "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'?: "all" | "text" | "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-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
         'aria-valuemax'?: number | undefined;
         'aria-valuemin'?: number | undefined;
         'aria-valuenow'?: number | undefined;
@@ -144,6 +109,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;
@@ -273,6 +239,41 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
+        nonce?: string | undefined;
+        placeholder?: string | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
+        translate?: "no" | "yes" | undefined;
+        radioGroup?: string | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "off" | "on" | undefined;
+        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        is?: string | undefined;
         label: import("react").ReactNode;
         description: import("react").ReactNode;
         error: import("react").ReactNode;

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

@@ -5,6 +5,8 @@ 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;
 }
 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/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/UnstyledButton/UnstyledButton.d.ts

@@ -12,7 +12,7 @@ export type UnstyledButtonFactory = PolymorphicFactory<{
 }>;
 export declare const UnstyledButton: (<C = "button">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, UnstyledButtonProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(UnstyledButtonProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, "component" | keyof UnstyledButtonProps> & {
+} & Omit<Omit<any, "ref">, keyof UnstyledButtonProps | "component"> & {
     ref?: any;
 }) | (UnstyledButtonProps & {
     component: React.ElementType<any>;

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';
@@ -54,5 +57,3 @@ export * from './Title';
 export * from './Tooltip';
 export * from './Transition';
 export * from './TypographyStylesProvider';
-export * from './UnstyledButton';
-export * from './VisuallyHidden';

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

@@ -22,7 +22,7 @@ export interface BoxComponentProps extends BoxProps {
 }
 export declare const Box: (<C = "div">(props: import("../factory/create-polymorphic-component").PolymorphicComponentProps<C, BoxComponentProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(BoxComponentProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, "component" | keyof BoxComponentProps> & {
+} & Omit<Omit<any, "ref">, keyof BoxComponentProps | "component"> & {
     ref?: any;
 }) | (BoxComponentProps & {
     component: React.ElementType<any>;

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.15",
   "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.15",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },