@mantine/core 9.4.3-alpha.0 → 9.5.1-alpha.0

package/lib/components/Cascader/Cascader.d.ts

@@ -0,0 +1,114 @@
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
+import { ComboboxLikeStylesNames } from '../Combobox';
+import { __BaseInputProps, __InputStylesNames, ClearSectionMode, InputClearButtonProps, InputVariant } from '../Input';
+import { ScrollAreaProps } from '../ScrollArea';
+export interface CascaderOption {
+    /** Option value, must be unique across the whole data tree */
+    value: string;
+    /** Option label, if not set `value` is used instead */
+    label?: React.ReactNode;
+    /** Nested options */
+    children?: CascaderOption[];
+    /** If set, the option cannot be selected or expanded */
+    disabled?: boolean;
+}
+export interface CascaderFormatValueInput {
+    /** Selected path from root to node */
+    value: string[];
+    /** Option chain resolved from the selected path */
+    options: CascaderOption[];
+}
+export type CascaderFormatValue = (input: CascaderFormatValueInput) => React.ReactNode;
+export type CascaderStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'columnsList' | 'columnsOverflow' | 'column' | 'columnScroll' | 'columnOption' | 'columnOptionLabel' | 'columnOptionIcon' | 'columnOptionCheck' | 'columnEmpty' | 'flatOption';
+export interface CascaderProps extends BoxProps, __BaseInputProps, StylesApiProps<CascaderFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
+    /** Hierarchical options data */
+    data: CascaderOption[];
+    /** Controlled selected path from root to node */
+    value?: string[] | null;
+    /** Uncontrolled selected path from root to node */
+    defaultValue?: string[] | null;
+    /** Called when the selected path changes with the path and the resolved option chain */
+    onChange?: (value: string[] | null, options: CascaderOption[]) => void;
+    /** If set, any intermediate option can be selected, not only leaf options @default false */
+    changeOnSelect?: boolean;
+    /** Determines whether the dropdown should be closed when a value is selected, defaults to `!allowDeselect` */
+    closeOnSelect?: boolean;
+    /** If set, the selected value can be deselected by selecting it again @default true */
+    allowDeselect?: boolean;
+    /** If set, the check icon is displayed on the selected option @default true */
+    withCheckIcon?: boolean;
+    /** Position of the check icon relative to the option label @default 'right' */
+    checkIconPosition?: 'left' | 'right';
+    /** Renders the dropdown as cascading columns. When `false`, options are rendered as a flat list of paths, the same way as search results (useful for narrow/mobile layouts) @default true */
+    withColumns?: boolean;
+    /** Determines how the next column is opened @default 'click' */
+    expandTrigger?: 'click' | 'hover';
+    /** If set, options can be searched by their flattened paths @default false */
+    searchable?: boolean;
+    /** Controlled search value */
+    searchValue?: string;
+    /** Uncontrolled search value */
+    defaultSearchValue?: string;
+    /** Called when the search value changes */
+    onSearchChange?: (value: string) => void;
+    /** Custom search filter, matched against the full option path */
+    filter?: (query: string, options: CascaderOption[]) => boolean;
+    /** Custom rendering of a search result row */
+    renderSearchOption?: (query: string, options: CascaderOption[]) => React.ReactNode;
+    /** A function to format the selected path displayed in the input, should return a string */
+    formatValue?: CascaderFormatValue;
+    /** Custom rendering of an option in columns */
+    renderOption?: (option: CascaderOption, level: number) => React.ReactNode;
+    /** Path separator displayed in the input and search results @default '/' */
+    separator?: React.ReactNode;
+    /** Width of each column */
+    columnWidth?: number | string;
+    /** Maximum number of columns (levels) displayed next to each other, deeper levels replace earlier ones @default 3 */
+    maxDisplayedLevels?: number;
+    /** `aria-label` and `title` of the control that reveals levels hidden before the visible ones by `maxDisplayedLevels` @default 'Show previous levels' */
+    previousLevelsControlLabel?: string;
+    /** `aria-label` and `title` of the control that reveals levels hidden after the visible ones by `maxDisplayedLevels` @default 'Show next levels' */
+    nextLevelsControlLabel?: string;
+    /** Max height of a column before it becomes scrollable @default 260 */
+    maxDropdownHeight?: number | string;
+    /** Message displayed when there are no options or search results */
+    nothingFoundMessage?: React.ReactNode;
+    /** If set, the clear button is displayed when a value is selected @default false */
+    clearable?: boolean;
+    /** Determines how the clear button and `rightSection` are rendered @default 'both' */
+    clearSectionMode?: ClearSectionMode;
+    /** Props passed down to the clear button */
+    clearButtonProps?: InputClearButtonProps;
+    /** Called when the clear button is clicked */
+    onClear?: () => void;
+    /** Controlled dropdown opened state */
+    dropdownOpened?: boolean;
+    /** Uncontrolled dropdown opened state */
+    defaultDropdownOpened?: boolean;
+    /** Called when the dropdown opens */
+    onDropdownOpen?: () => void;
+    /** Called when the dropdown closes */
+    onDropdownClose?: () => void;
+    /** Props passed down to the underlying `Combobox` component */
+    comboboxProps?: Record<string, any>;
+    /** Props passed down to the dropdown `ScrollArea` */
+    scrollAreaProps?: ScrollAreaProps;
+    /** Controls the default chevron color */
+    chevronColor?: MantineColor;
+    /** Props passed down to the hidden input */
+    hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;
+    /** Opens the dropdown when the input is focused in `searchable` mode @default true */
+    openOnFocus?: boolean;
+}
+export type CascaderFactory = Factory<{
+    props: CascaderProps;
+    ref: HTMLInputElement;
+    stylesNames: CascaderStylesNames;
+    variant: InputVariant;
+}>;
+export declare const Cascader: import("../..").MantineComponent<{
+    props: CascaderProps;
+    ref: HTMLInputElement;
+    stylesNames: CascaderStylesNames;
+    variant: InputVariant;
+}>;

package/lib/components/Cascader/CascaderColumns.d.ts

@@ -0,0 +1,36 @@
+import type { GetStylesApi } from '../../core';
+import { ScrollAreaProps } from '../ScrollArea';
+import type { CascaderOption, CascaderStylesNames } from './Cascader';
+type CascaderColumnsGetStyles = GetStylesApi<{
+    props: any;
+    stylesNames: CascaderStylesNames;
+}>;
+export interface CascaderColumnsProps {
+    data: CascaderOption[];
+    activePath: string[];
+    value: string[] | null;
+    keyboardNav: boolean;
+    withCheckIcon: boolean | undefined;
+    checkIconPosition: 'left' | 'right' | undefined;
+    renderOption: ((option: CascaderOption, level: number) => React.ReactNode) | undefined;
+    columnWidth: number | string | undefined;
+    maxDisplayedLevels: number | undefined;
+    previousLevelsControlLabel: string | undefined;
+    nextLevelsControlLabel: string | undefined;
+    maxDropdownHeight: number | string | undefined;
+    nothingFoundMessage: React.ReactNode;
+    getStyles: CascaderColumnsGetStyles;
+    unstyled: boolean | undefined;
+    scrollAreaProps: ScrollAreaProps | undefined;
+    onOptionClick: (level: number, option: CascaderOption) => void;
+    onOptionMouseEnter: (level: number, option: CascaderOption) => void;
+    onColumnsMouseLeave: (() => void) | undefined;
+    onPointerActivity: (() => void) | undefined;
+    listId: string | undefined;
+}
+export declare function getCascaderOptionId(listId: string | undefined, level: number, value: string): string | undefined;
+export declare function CascaderColumns({ data, activePath, value, keyboardNav, withCheckIcon, checkIconPosition, renderOption, columnWidth, maxDisplayedLevels, previousLevelsControlLabel, nextLevelsControlLabel, maxDropdownHeight, nothingFoundMessage, getStyles, unstyled, scrollAreaProps, onOptionClick, onOptionMouseEnter, onColumnsMouseLeave, onPointerActivity, listId, }: CascaderColumnsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CascaderColumns {
+    var displayName: string;
+}
+export {};

package/lib/components/Cascader/flatten-cascader-paths.d.ts

@@ -0,0 +1,12 @@
+import type { CascaderOption } from './Cascader';
+export interface CascaderFlatPath {
+    /** Values from root to node */
+    path: string[];
+    /** Option chain from root to node */
+    options: CascaderOption[];
+    /** `true` if the node has no children */
+    leaf: boolean;
+    /** `true` if the node or any of its ancestors is disabled */
+    disabled: boolean;
+}
+export declare function flattenCascaderPaths(data: CascaderOption[]): CascaderFlatPath[];

package/lib/components/Cascader/get-cascader-columns.d.ts

@@ -0,0 +1,4 @@
+import type { CascaderOption } from './Cascader';
+export declare function cascaderOptionHasChildren(option: CascaderOption): boolean;
+export declare function findCascaderOption(options: CascaderOption[], value: string): CascaderOption | undefined;
+export declare function getCascaderColumns(data: CascaderOption[], activePath: string[]): CascaderOption[][];

package/lib/components/Cascader/get-cascader-path-options.d.ts

@@ -0,0 +1,2 @@
+import type { CascaderOption } from './Cascader';
+export declare function getCascaderPathOptions(data: CascaderOption[], value: string[] | null | undefined): CascaderOption[];

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

@@ -0,0 +1,12 @@
+import type { CascaderFactory, CascaderFormatValue, CascaderFormatValueInput, CascaderOption, CascaderProps, CascaderStylesNames } from './Cascader';
+export { Cascader } from './Cascader';
+export type { CascaderFlatPath } from './flatten-cascader-paths';
+export { flattenCascaderPaths } from './flatten-cascader-paths';
+export { getCascaderPathOptions } from './get-cascader-path-options';
+export type { CascaderProps, CascaderStylesNames, CascaderFactory, CascaderOption, CascaderFormatValue, CascaderFormatValueInput, };
+export declare namespace Cascader {
+    type Props = CascaderProps;
+    type StylesNames = CascaderStylesNames;
+    type Factory = CascaderFactory;
+    type Option = CascaderOption;
+}

package/lib/components/Cascader/use-cascader.d.ts

@@ -0,0 +1,25 @@
+import type { CascaderOption } from './Cascader';
+export interface UseCascaderInput {
+    data: CascaderOption[];
+    value: string[] | null | undefined;
+    defaultValue: string[] | null | undefined;
+    onChange: ((value: string[] | null, options: CascaderOption[]) => void) | undefined;
+    changeOnSelect: boolean | undefined;
+    allowDeselect: boolean | undefined;
+    expandTrigger: 'click' | 'hover' | undefined;
+    onLeafSelect?: () => void;
+}
+export declare function useCascader({ data, value, defaultValue, onChange, changeOnSelect, allowDeselect, expandTrigger, onLeafSelect, }: UseCascaderInput): {
+    value: string[] | null;
+    setValue: (value: string[] | null, ...payload: any[]) => void;
+    selectPath: (path: string[]) => void;
+    activePath: string[];
+    setActivePath: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    resetActivePath: () => void;
+    keyboardNav: boolean;
+    setKeyboardNav: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleOptionClick: (level: number, option: CascaderOption) => void;
+    handleOptionMouseEnter: (level: number, option: CascaderOption) => void;
+    handleColumnsKeyDown: (event: React.KeyboardEvent) => boolean;
+    pathOptions: CascaderOption[];
+};

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

@@ -0,0 +1,30 @@
+export interface FloatingWindowDimensions {
+    /** Initial width of the floating window in px */
+    initialWidth?: number;
+    /** Minimum width of the floating window in px */
+    minWidth?: number;
+    /** Maximum width of the floating window in px */
+    maxWidth?: number;
+    /** Initial height of the floating window in px */
+    initialHeight?: number;
+    /** Minimum height of the floating window in px */
+    minHeight?: number;
+    /** Maximum height of the floating window in px */
+    maxHeight?: number;
+}
+export interface FloatingWindowSize {
+    /** Width of the floating window in px */
+    width: number;
+    /** Height of the floating window in px */
+    height: number;
+}
+export interface FloatingWindowContextValue {
+    rootRef: React.RefObject<HTMLDivElement | null>;
+    dimensions: FloatingWindowDimensions | undefined;
+    constrainToViewport: boolean | undefined;
+    constrainOffset: number | undefined;
+    onResizeStart: (() => void) | undefined;
+    onResizeEnd: (() => void) | undefined;
+    onSizeChange: ((size: FloatingWindowSize) => void) | undefined;
+}
+export declare const FloatingWindowProvider: import("react").Context<FloatingWindowContextValue | null>, useFloatingWindowContext: () => FloatingWindowContextValue;

package/lib/components/FloatingWindow/FloatingWindow.d.ts

@@ -2,6 +2,8 @@ import { SetFloatingWindowPosition, UseFloatingWindowOptions } from '@mantine/ho
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { PaperBaseProps } from '../Paper';
 import { PortalProps } from '../Portal';
+import { FloatingWindowDimensions, FloatingWindowSize } from './FloatingWindow.context';
+import { FloatingWindowResizeHandle } from './FloatingWindowResizeHandle';
 export type FloatingWindowStylesNames = 'root';
 export interface FloatingWindowProps extends UseFloatingWindowOptions, PaperBaseProps, BoxProps, StylesApiProps<FloatingWindowFactory>, ElementProps<'div', keyof UseFloatingWindowOptions> {
     /** Assigns ref to set position programmatically */
@@ -12,19 +14,28 @@ export interface FloatingWindowProps extends UseFloatingWindowOptions, PaperBase
     portalProps?: Omit<PortalProps, 'children'>;
     /** `z-index` of the root element @default 400 */
     zIndex?: React.CSSProperties['zIndex'];
+    /** Dimensions configuration for resizable floating window */
+    dimensions?: FloatingWindowDimensions;
+    /** Called when the window is resized with `FloatingWindow.ResizeHandle` */
+    onSizeChange?: (size: FloatingWindowSize) => void;
+    /** Called when the resize with `FloatingWindow.ResizeHandle` starts. Not called for keyboard resize. */
+    onResizeStart?: () => void;
+    /** Called when the resize with `FloatingWindow.ResizeHandle` stops. Not called for keyboard resize. */
+    onResizeEnd?: () => void;
 }
 export type FloatingWindowFactory = Factory<{
     props: FloatingWindowProps;
     ref: HTMLDivElement;
     stylesNames: FloatingWindowStylesNames;
+    staticComponents: {
+        ResizeHandle: typeof FloatingWindowResizeHandle;
+    };
 }>;
 export declare const FloatingWindow: import("../..").MantineComponent<{
     props: FloatingWindowProps;
     ref: HTMLDivElement;
     stylesNames: FloatingWindowStylesNames;
+    staticComponents: {
+        ResizeHandle: typeof FloatingWindowResizeHandle;
+    };
 }>;
-export declare namespace FloatingWindow {
-    type Props = FloatingWindowProps;
-    type StylesNames = FloatingWindowStylesNames;
-    type Factory = FloatingWindowFactory;
-}

package/lib/components/FloatingWindow/FloatingWindowResizeHandle.d.ts

@@ -0,0 +1,11 @@
+import { BoxProps, ElementProps, Factory } from '../../core';
+export interface FloatingWindowResizeHandleProps extends BoxProps, ElementProps<'div', 'role'> {
+}
+export type FloatingWindowResizeHandleFactory = Factory<{
+    props: FloatingWindowResizeHandleProps;
+    ref: HTMLDivElement;
+}>;
+export declare const FloatingWindowResizeHandle: import("../..").MantineComponent<{
+    props: FloatingWindowResizeHandleProps;
+    ref: HTMLDivElement;
+}>;

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

@@ -1,3 +1,5 @@
 import type { FloatingWindowFactory, FloatingWindowProps, FloatingWindowStylesNames } from './FloatingWindow';
 export { FloatingWindow } from './FloatingWindow';
 export type { FloatingWindowProps, FloatingWindowStylesNames, FloatingWindowFactory };
+export type { FloatingWindowDimensions, FloatingWindowSize } from './FloatingWindow.context';
+export type { FloatingWindowResizeHandleProps, FloatingWindowResizeHandleFactory, } from './FloatingWindowResizeHandle';

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

@@ -1,4 +1,4 @@
-import { BoxProps, DataAttributes, ElementProps, Factory, MantineFontSize, StylesApiProps } from '../../../core';
+import { BoxProps, DataAttributes, ElementProps, Factory, MantineFontSize, PlaceholderPolymorphicProps, StylesApiProps } from '../../../core';
 import { InputDescriptionCssVariables, InputDescriptionProps, InputDescriptionStylesNames } from '../InputDescription/InputDescription';
 import { InputErrorCssVariables, InputErrorProps, InputErrorStylesNames } from '../InputError/InputError';
 import { InputLabelCssVariables, InputLabelProps, InputLabelStylesNames } from '../InputLabel/InputLabel';
@@ -19,13 +19,13 @@ export interface __InputWrapperProps {
     /** If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. @default false */
     withAsterisk?: boolean;
     /** Props passed down to the `Input.Label` component */
-    labelProps?: InputLabelProps & DataAttributes;
+    labelProps?: InputLabelProps & DataAttributes & PlaceholderPolymorphicProps;
     /** Props passed down to the `Input.Description` component */
-    descriptionProps?: InputDescriptionProps & DataAttributes;
+    descriptionProps?: InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps;
     /** Props passed down to the `Input.Error` component */
-    errorProps?: InputErrorProps & DataAttributes;
+    errorProps?: InputErrorProps & DataAttributes & PlaceholderPolymorphicProps;
     /** Props passed down to the `Input.Success` component */
-    successProps?: InputSuccessProps & DataAttributes;
+    successProps?: InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps;
     /** Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. @default React.Fragment */
     inputContainer?: (children: React.ReactNode) => React.ReactNode;
     /** Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. @default ['label', 'description', 'input', 'error'] */

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

@@ -303,10 +303,10 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         classNames: Partial<Record<string, string | undefined>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string | undefined>>) | undefined;
         __staticSelector: string | undefined;
         __stylesApiProps: Record<string, any> | BaseProps;
-        errorProps: (import(".").InputErrorProps & import("../..").DataAttributes) | undefined;
-        successProps: (import(".").InputSuccessProps & import("../..").DataAttributes) | undefined;
-        labelProps: (import(".").InputLabelProps & import("../..").DataAttributes) | undefined;
-        descriptionProps: (import(".").InputDescriptionProps & import("../..").DataAttributes) | undefined;
+        errorProps: (import(".").InputErrorProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps) | undefined;
+        successProps: (import(".").InputSuccessProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps) | undefined;
+        labelProps: (import(".").InputLabelProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps) | undefined;
+        descriptionProps: (import(".").InputDescriptionProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps) | undefined;
         unstyled: boolean | undefined;
         styles: Partial<Record<string, import("../..").CSSProperties>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../..").CSSProperties>>) | undefined;
         size: (string & {}) | import("../..").MantineSize | undefined;

package/lib/components/MaskInput/use-mask-input-props.d.ts

@@ -74,10 +74,10 @@ export declare function useMaskInputProps(props: MaskInputProps & {
         success?: React.ReactNode;
         required?: boolean;
         withAsterisk?: boolean;
-        labelProps?: import("..").InputLabelProps & import("../..").DataAttributes;
-        descriptionProps?: import("..").InputDescriptionProps & import("../..").DataAttributes;
-        errorProps?: import("..").InputErrorProps & import("../..").DataAttributes;
-        successProps?: import("..").InputSuccessProps & import("../..").DataAttributes;
+        labelProps?: import("..").InputLabelProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps;
+        descriptionProps?: import("..").InputDescriptionProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps;
+        errorProps?: import("..").InputErrorProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps;
+        successProps?: import("..").InputSuccessProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps;
         inputContainer?: (children: React.ReactNode) => React.ReactNode;
         inputWrapperOrder?: ("label" | "input" | "description" | "error")[];
         leftSection?: React.ReactNode;

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

@@ -62,6 +62,11 @@ export interface ScrollAreaProps extends BoxProps, StylesApiProps<ScrollAreaFact
         x?: number;
         y?: number;
     };
+    /**
+     * Pins the vertical scrollbar to a physical side (`left` or `right`) regardless of direction.
+     * By default, the scrollbar follows the inline-end edge (right in LTR, left in RTL).
+     */
+    verticalScrollbarPosition?: 'left' | 'right';
 }
 export interface ScrollAreaAutosizeProps extends ScrollAreaProps {
     /** Called when content overflows due to max-height, making the container scrollable */

package/lib/components/Timeline/TimelineItem/TimelineItem.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, MantineColor, MantineRadius } from '../../../core';
-export type TimelineItemStylesNames = 'itemBody' | 'itemContent' | 'itemBullet' | 'item' | 'itemTitle';
+export type TimelineItemStylesNames = 'itemBody' | 'itemContent' | 'itemBullet' | 'item' | 'itemTitle' | 'itemOpposite';
 export interface TimelineItemProps extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {
     __active?: boolean;
     __lineActive?: boolean;
@@ -10,6 +10,10 @@ export interface TimelineItemProps extends BoxProps, CompoundStylesApiProps<Time
     children?: React.ReactNode;
     /** React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. */
     bullet?: React.ReactNode;
+    /** Content displayed on the opposite side of the timeline item */
+    opposite?: React.ReactNode;
+    /** If set, switches the position of content and opposite @default false */
+    alternate?: boolean;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */
     radius?: MantineRadius;
     /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */

package/lib/components/index.d.ts

@@ -31,6 +31,7 @@ export * from './Breadcrumbs';
 export * from './Burger';
 export * from './Button';
 export * from './Card';
+export * from './Cascader';
 export * from './Center';
 export * from './Checkbox';
 export * from './Chip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.4.3-alpha.0",
+  "version": "9.5.1-alpha.0",
   "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": "9.4.3-alpha.0",
+    "@mantine/hooks": "9.5.1-alpha.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -52,7 +52,7 @@
     "clsx": "^2.1.1",
     "react-number-format": "^5.4.5",
     "react-remove-scroll": "^2.7.2",
-    "type-fest": "^5.7.0"
+    "type-fest": "^5.8.0"
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",

package/styles/Cascader.css

@@ -0,0 +1,215 @@
+.m_9a782f2c {
+  --cascader-column-width: 200px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.m_4c5a03a5 {
+  display: flex;
+  flex-direction: column;
+  width: var(--cascader-column-width);
+  min-width: var(--cascader-column-width);
+  border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--popover-border-color, var(--mantine-color-default-border));
+}
+
+/* Keep the border width reserved so revealing the next column does not shift the layout */
+
+.m_4c5a03a5:where([data-last]) {
+    border-inline-end-color: transparent;
+  }
+
+.m_7f3ac6d2 {
+  flex: 1;
+  padding: var(--combobox-padding);
+}
+
+.m_6b93b90 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  padding-inline: calc(var(--combobox-padding) / 2);
+  color: var(--mantine-color-dimmed);
+  cursor: pointer;
+  border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--popover-border-color, var(--mantine-color-default-border));
+}
+
+@media (hover: hover) {
+    :where([data-mantine-color-scheme='light']) .m_6b93b90:hover {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_6b93b90:hover {
+      background-color: var(--mantine-color-dark-7);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m_6b93b90:active {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_6b93b90:active {
+      background-color: var(--mantine-color-dark-7);
+  }
+}
+
+.m_6b93b90 > svg {
+    width: 0.9em;
+    height: 0.9em;
+    transform: rotate(90deg);
+  }
+
+/* Round the corners that sit against the rounded dropdown edge so the hover background
+     does not overflow the dropdown corners */
+
+.m_6b93b90:where([data-position='start']) {
+    border-start-start-radius: var(--popover-radius, var(--mantine-radius-default));
+    border-end-start-radius: var(--popover-radius, var(--mantine-radius-default));
+  }
+
+/* The divider on the left is provided by the previous column, so this control has none */
+
+.m_6b93b90:where([data-position='end']) {
+    border-inline-end-color: transparent;
+    border-start-end-radius: var(--popover-radius, var(--mantine-radius-default));
+    border-end-end-radius: var(--popover-radius, var(--mantine-radius-default));
+  }
+
+.m_6b93b90:where([data-position='end']) > svg {
+      transform: rotate(-90deg);
+    }
+
+:where([dir="rtl"]) .m_6b93b90 > svg {
+      transform: rotate(-90deg);
+    }
+
+:where([dir="rtl"]) .m_6b93b90:where([data-position='end']) > svg {
+      transform: rotate(90deg);
+    }
+
+.m_791f687a {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  width: 100%;
+  padding: var(--combobox-option-padding);
+  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
+  border-radius: var(--combobox-option-radius, var(--mantine-radius-default));
+  color: var(--mantine-color-text);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) .m_791f687a:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_791f687a:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-7);
+  }
+}
+
+@media (hover: none) {
+      :where([data-mantine-color-scheme='light']) .m_791f687a:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_791f687a:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-7);
+  }
+}
+
+/* Selected options in the ancestor columns (the navigation trail) */
+
+:where([data-mantine-color-scheme='light']) .m_791f687a:where([data-in-path]) {
+      background-color: var(--mantine-color-gray-1);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_791f687a:where([data-in-path]) {
+      background-color: var(--mantine-color-dark-6);
+}
+
+/* Option in the column that is currently being navigated */
+
+.m_791f687a:where([data-active]) {
+    background-color: var(--mantine-primary-color-filled);
+    color: var(--mantine-color-white);
+  }
+
+@media (hover: hover) {
+
+  .m_791f687a:where([data-active]):hover {
+      background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_791f687a:where([data-active]):active {
+      background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+
+.m_791f687a:where([data-disabled]) {
+    color: var(--mantine-color-dimmed);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+.m_452a61d {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  width: 100%;
+}
+
+.m_aecd629a {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.m_92054c13 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.9em;
+  min-width: 0.9em;
+  height: 0.9em;
+  color: var(--mantine-color-dimmed);
+  transform: rotate(-90deg);
+}
+
+:where([data-active]) .m_92054c13 {
+    color: inherit;
+  }
+
+:where([dir="rtl"]) .m_92054c13 {
+    transform: rotate(90deg);
+}
+
+.m_ae51c8ae {
+  width: 0.8em;
+  min-width: 0.8em;
+  height: 0.8em;
+  opacity: 0.4;
+}
+
+:where([data-active]) .m_ae51c8ae,
+  :where([data-combobox-selected]) .m_ae51c8ae {
+    opacity: 1;
+  }
+
+.m_97ff10a8 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--combobox-option-padding);
+  color: var(--mantine-color-dimmed);
+  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
+  white-space: nowrap;
+}