@mantine/core 9.0.0-alpha.6 → 9.0.0-alpha.7

package/lib/components/Tree/merge-async-children/merge-async-children.d.ts

@@ -1,2 +0,0 @@
-import type { TreeNodeData } from '../Tree';
-export declare function mergeAsyncChildren(data: TreeNodeData[], parentValue: string, children: TreeNodeData[]): TreeNodeData[];

package/lib/components/Tree/move-tree-node/move-tree-node.d.ts

@@ -1,11 +0,0 @@
-import type { TreeNodeData } from '../Tree';
-export type TreeDragDropPosition = 'before' | 'after' | 'inside';
-export interface TreeDragDropPayload {
-    /** Value of the dragged node */
-    draggedNode: string;
-    /** Value of the target node */
-    targetNode: string;
-    /** Position relative to the target node */
-    position: TreeDragDropPosition;
-}
-export declare function moveTreeNode(data: TreeNodeData[], payload: TreeDragDropPayload): TreeNodeData[];

package/lib/components/Tree/use-tree-node-drag-drop.d.ts

@@ -1,18 +0,0 @@
-import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
-import type { TreeDragState, TreeNodeData } from './Tree';
-interface UseTreeNodeDragDropInput {
-    nodeValue: string;
-    hasChildren: boolean;
-    data: TreeNodeData[];
-    onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;
-    dragStateRef: React.RefObject<TreeDragState>;
-}
-export declare function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef, }: UseTreeNodeDragDropInput): Record<string, never> | {
-    draggable: true;
-    onDragStart: (event: React.DragEvent) => void;
-    onDragOver: (event: React.DragEvent) => void;
-    onDragLeave: (event: React.DragEvent) => void;
-    onDrop: (event: React.DragEvent) => void;
-    onDragEnd: (event: React.DragEvent) => void;
-};
-export {};

package/lib/components/TreeSelect/TreeSelect.d.ts

@@ -1,122 +0,0 @@
-import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
-import { ComboboxLikeStylesNames } from '../Combobox';
-import { __BaseInputProps, __InputStylesNames, ClearSectionMode, InputClearButtonProps, InputVariant } from '../Input';
-import { ScrollAreaProps } from '../ScrollArea';
-import type { TreeNodeData } from '../Tree';
-import { CheckedStrategy } from './get-checked-values-by-strategy';
-import { TreeSelectRenderNodePayload } from './TreeSelectOption';
-export type TreeSelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
-export type TreeSelectMode = 'single' | 'multiple' | 'checkbox';
-export type TreeSelectValue<Mode extends TreeSelectMode> = Mode extends 'single' ? string | null : string[];
-export interface TreeSelectProps<Mode extends TreeSelectMode = 'single'> extends BoxProps, __BaseInputProps, StylesApiProps<TreeSelectFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
-    /** Tree data */
-    data: TreeNodeData[];
-    /** Selection mode: 'single', 'multiple', or 'checkbox' (with cascade) @default 'single' */
-    mode?: Mode;
-    /** Controlled value */
-    value?: TreeSelectValue<Mode>;
-    /** Default value */
-    defaultValue?: TreeSelectValue<Mode>;
-    /** Called when value changes */
-    onChange?: (value: TreeSelectValue<Mode>) => void;
-    /** Disables parent-child cascade in checkbox mode @default false */
-    checkStrictly?: boolean;
-    /** Controls which checked nodes appear in value/pills in checkbox mode @default 'child' */
-    checkedStrategy?: CheckedStrategy;
-    /** Default expanded node values */
-    defaultExpandedValues?: string[];
-    /** Expand all nodes by default @default false */
-    defaultExpandAll?: boolean;
-    /** Controlled expanded state */
-    expandedValues?: string[];
-    /** Called when expanded state changes */
-    onExpandedChange?: (values: string[]) => void;
-    /** Also toggle expand when clicking a parent node (not just the chevron) @default false */
-    expandOnClick?: boolean;
-    /** Enables search filtering @default false */
-    searchable?: boolean;
-    /** Controlled search value */
-    searchValue?: string;
-    /** Default search value */
-    defaultSearchValue?: string;
-    /** Called when search changes */
-    onSearchChange?: (value: string) => void;
-    /** Custom filter function */
-    filter?: (query: string, node: TreeNodeData) => boolean;
-    /** Message when no nodes match search */
-    nothingFoundMessage?: React.ReactNode;
-    /** Allows deselecting in single mode @default true */
-    allowDeselect?: boolean;
-    /** Shows clear button @default false */
-    clearable?: boolean;
-    /** Determines how the clear button and rightSection are rendered @default 'both' */
-    clearSectionMode?: ClearSectionMode;
-    /** Props for the clear button */
-    clearButtonProps?: InputClearButtonProps;
-    /** Maximum selectable values (multiple/checkbox mode) */
-    maxValues?: number;
-    /** Maximum displayed pills before "+N more" */
-    maxDisplayedValues?: number;
-    /** Content shown when values overflow maxDisplayedValues */
-    maxDisplayedValuesContent?: React.ReactNode | ((overflow: number) => React.ReactNode);
-    /** Called with removed value in multiple/checkbox mode */
-    onRemove?: (value: string) => void;
-    /** Called when clear button is clicked */
-    onClear?: () => void;
-    /** Custom node rendering in the dropdown */
-    renderNode?: (payload: TreeSelectRenderNodePayload) => React.ReactNode;
-    /** Show tree connection lines between parent and child nodes @default true */
-    withLines?: boolean;
-    /** Props for the hidden input */
-    hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;
-    /** Divider for hidden input values @default ',' */
-    hiddenInputValuesDivider?: string;
-    /** Props for the ScrollArea in the dropdown */
-    scrollAreaProps?: ScrollAreaProps;
-    /** Controls the default chevron color */
-    chevronColor?: MantineColor;
-    /** Max dropdown height @default 220 */
-    maxDropdownHeight?: number | string;
-    /** Controlled dropdown state */
-    dropdownOpened?: boolean;
-    /** Default dropdown state */
-    defaultDropdownOpened?: boolean;
-    /** Called when dropdown opens */
-    onDropdownOpen?: () => void;
-    /** Called when dropdown closes */
-    onDropdownClose?: () => void;
-    /** Props passed to the underlying Combobox */
-    comboboxProps?: Record<string, any>;
-    /** Clear search on selection change @default true */
-    clearSearchOnChange?: boolean;
-    /** Opens dropdown on focus (searchable mode) @default true */
-    openOnFocus?: boolean;
-}
-export type TreeSelectFactory = Factory<{
-    props: TreeSelectProps;
-    ref: HTMLInputElement;
-    stylesNames: TreeSelectStylesNames;
-    variant: InputVariant;
-    signature: <Mode extends TreeSelectMode = 'single'>(props: TreeSelectProps<Mode>) => React.JSX.Element;
-}>;
-export declare const TreeSelect: (<Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element) & import("../..").ThemeExtend<{
-    props: TreeSelectProps;
-    ref: HTMLInputElement;
-    stylesNames: TreeSelectStylesNames;
-    variant: InputVariant;
-    signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
-}> & import("../..").ComponentClasses<{
-    props: TreeSelectProps;
-    ref: HTMLInputElement;
-    stylesNames: TreeSelectStylesNames;
-    variant: InputVariant;
-    signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
-}> & Record<string, never> & import("../..").FactoryComponentWithProps<{
-    props: TreeSelectProps;
-    ref: HTMLInputElement;
-    stylesNames: TreeSelectStylesNames;
-    variant: InputVariant;
-    signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
-}> & {
-    displayName?: string;
-};

package/lib/components/TreeSelect/TreeSelectOption.d.ts

@@ -1,29 +0,0 @@
-import type { TreeNodeData } from '../Tree';
-export interface TreeSelectOptionProps {
-    node: TreeNodeData;
-    level: number;
-    expanded: boolean;
-    hasChildren: boolean;
-    selected: boolean;
-    checked: boolean;
-    indeterminate: boolean;
-    showCheckbox: boolean;
-    isLastChild: boolean;
-    lineGuides: boolean[];
-    withLines: boolean;
-    onToggleExpand: (value: string) => void;
-    renderNode?: (payload: TreeSelectRenderNodePayload) => React.ReactNode;
-}
-export interface TreeSelectRenderNodePayload {
-    node: TreeNodeData;
-    level: number;
-    expanded: boolean;
-    hasChildren: boolean;
-    selected: boolean;
-    checked: boolean;
-    indeterminate: boolean;
-}
-export declare function TreeSelectOption({ node, level, expanded, hasChildren, selected, checked, indeterminate, showCheckbox, isLastChild, lineGuides, withLines, onToggleExpand, renderNode, }: TreeSelectOptionProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace TreeSelectOption {
-    var displayName: string;
-}

package/lib/components/TreeSelect/flatten-tree-select-data.d.ts

@@ -1,12 +0,0 @@
-import type { TreeNodeData } from '../Tree';
-import type { TreeExpandedState } from '../Tree/use-tree';
-export interface TreeSelectFlatNode {
-    node: TreeNodeData;
-    level: number;
-    parent: string | null;
-    hasChildren: boolean;
-    expanded: boolean;
-    isLastChild: boolean;
-    lineGuides: boolean[];
-}
-export declare function flattenTreeSelectData(data: TreeNodeData[], expandedState: TreeExpandedState): TreeSelectFlatNode[];

package/lib/components/TreeSelect/get-checked-values-by-strategy.d.ts

@@ -1,4 +0,0 @@
-import type { TreeNodeData } from '../Tree';
-export type CheckedStrategy = 'all' | 'parent' | 'child';
-export declare function expandToLeafChecked(value: string[], data: TreeNodeData[]): string[];
-export declare function checkedToValue(checkedState: string[], data: TreeNodeData[], strategy: CheckedStrategy): string[];

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

@@ -1,13 +0,0 @@
-import type { TreeSelectFactory, TreeSelectMode, TreeSelectProps, TreeSelectStylesNames, TreeSelectValue } from './TreeSelect';
-export { TreeSelect } from './TreeSelect';
-export { TreeSelectOption } from './TreeSelectOption';
-export type { TreeSelectRenderNodePayload } from './TreeSelectOption';
-export type { CheckedStrategy } from './get-checked-values-by-strategy';
-export type { TreeSelectProps, TreeSelectStylesNames, TreeSelectFactory, TreeSelectMode, TreeSelectValue, };
-export declare namespace TreeSelect {
-    type Props = TreeSelectProps;
-    type StylesNames = TreeSelectStylesNames;
-    type Factory = TreeSelectFactory;
-    type Mode = TreeSelectMode;
-    type Value<Mode extends TreeSelectMode> = TreeSelectValue<Mode>;
-}

package/styles/RollingNumber.css

@@ -1,50 +0,0 @@
-.m_47dd3981 {
-  display: inline-flex;
-  align-items: baseline;
-  overflow: hidden;
-}
-
-  .m_47dd3981[data-tabular-numbers] {
-    font-variant-numeric: tabular-nums;
-  }
-
-.m_b301d46e {
-  display: inline-block;
-  width: 1ch;
-  height: 1em;
-  overflow: hidden;
-  line-height: 1;
-  transition:
-    width var(--rn-duration) var(--rn-timing-function),
-    opacity var(--rn-duration) var(--rn-timing-function);
-}
-
-.m_b301d46e[data-empty] {
-    width: 0;
-    opacity: 0;
-  }
-
-.m_8ae40964 {
-  display: flex;
-  flex-direction: column;
-  transition: transform var(--rn-duration) var(--rn-timing-function);
-}
-
-.m_8ae40964 > span {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 1em;
-  }
-
-.m_47d64bf5 {
-  display: inline-block;
-  overflow: hidden;
-  white-space: pre;
-  transition: opacity var(--rn-duration) var(--rn-timing-function);
-}
-
-.m_47d64bf5[data-empty] {
-    width: 0;
-    opacity: 0;
-  }

package/styles/RollingNumber.layer.css

@@ -1,51 +0,0 @@
-@layer mantine {.m_47dd3981 {
-  display: inline-flex;
-  align-items: baseline;
-  overflow: hidden;
-}
-
-  .m_47dd3981[data-tabular-numbers] {
-    font-variant-numeric: tabular-nums;
-  }
-
-.m_b301d46e {
-  display: inline-block;
-  width: 1ch;
-  height: 1em;
-  overflow: hidden;
-  line-height: 1;
-  transition:
-    width var(--rn-duration) var(--rn-timing-function),
-    opacity var(--rn-duration) var(--rn-timing-function);
-}
-
-.m_b301d46e[data-empty] {
-    width: 0;
-    opacity: 0;
-  }
-
-.m_8ae40964 {
-  display: flex;
-  flex-direction: column;
-  transition: transform var(--rn-duration) var(--rn-timing-function);
-}
-
-.m_8ae40964 > span {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 1em;
-  }
-
-.m_47d64bf5 {
-  display: inline-block;
-  overflow: hidden;
-  white-space: pre;
-  transition: opacity var(--rn-duration) var(--rn-timing-function);
-}
-
-.m_47d64bf5[data-empty] {
-    width: 0;
-    opacity: 0;
-  }
-}

package/styles/TreeSelect.css

@@ -1,113 +0,0 @@
-.m_529d33e8 {
-  --ts-level-offset: 20px;
-  --ts-line-width: calc(0.0625rem * var(--mantine-scale));
-  --ts-line-color: var(--mantine-color-default-border);
-  --ts-option-padding-y: 4px;
-  --ts-option-padding-x: 8px;
-}
-
-.m_28bb748 {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  position: relative;
-  padding: var(--ts-option-padding-y) var(--ts-option-padding-x);
-  padding-inline-start: var(--ts-option-padding-x);
-}
-
-.m_aa3e3f86 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  --_ts-expand-icon-size: calc(1.45 * var(--combobox-option-fz, var(--mantine-font-size-sm)));
-  width: var(--_ts-expand-icon-size);
-  min-width: var(--_ts-expand-icon-size);
-  height: var(--_ts-expand-icon-size);
-  border-radius: var(--mantine-radius-sm);
-  cursor: pointer;
-  color: var(--mantine-color-dimmed);
-  transform: rotate(-90deg);
-}
-
-:where([data-combobox-selected]) .m_aa3e3f86 {
-    color: var(--mantine-color-white);
-  }
-
-:where([dir="rtl"]) .m_aa3e3f86 {
-    transform: rotate(90deg);
-}
-
-.m_aa3e3f86:where([data-expanded]) {
-    transform: rotate(0deg);
-  }
-
-@media (hover: hover) {
-    :where([data-mantine-color-scheme='light']) .m_aa3e3f86:hover {
-      background-color: var(--mantine-color-gray-1);
-  }
-
-    :where([data-mantine-color-scheme='dark']) .m_aa3e3f86:hover {
-      background-color: var(--mantine-color-dark-5);
-  }
-}
-
-@media (hover: none) {
-    :where([data-mantine-color-scheme='light']) .m_aa3e3f86:active {
-      background-color: var(--mantine-color-gray-1);
-  }
-
-    :where([data-mantine-color-scheme='dark']) .m_aa3e3f86:active {
-      background-color: var(--mantine-color-dark-5);
-  }
-}
-
-.m_eaa4cdee {
-  opacity: 0.4;
-  width: 0.8em;
-  min-width: 0.8em;
-  height: 0.8em;
-  margin-inline-start: auto;
-}
-
-:where([data-combobox-selected]) .m_eaa4cdee {
-    opacity: 1;
-  }
-
-.m_ffe3a9c1 {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Tree lines */
-.m_57207d5d {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 0;
-  border-inline-start: var(--ts-line-width) solid var(--ts-line-color);
-  pointer-events: none;
-}
-
-.m_41b9db0b {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 0;
-  border-inline-start: var(--ts-line-width) solid var(--ts-line-color);
-  pointer-events: none;
-}
-
-.m_41b9db0b:where([data-last]) {
-    bottom: auto;
-    height: 50%;
-  }
-
-.m_1246e79 {
-  position: absolute;
-  top: 50%;
-  height: 0;
-  border-top: var(--ts-line-width) solid var(--ts-line-color);
-  pointer-events: none;
-}

package/styles/TreeSelect.layer.css

@@ -1,114 +0,0 @@
-@layer mantine {.m_529d33e8 {
-  --ts-level-offset: 20px;
-  --ts-line-width: calc(0.0625rem * var(--mantine-scale));
-  --ts-line-color: var(--mantine-color-default-border);
-  --ts-option-padding-y: 4px;
-  --ts-option-padding-x: 8px;
-}
-
-.m_28bb748 {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  position: relative;
-  padding: var(--ts-option-padding-y) var(--ts-option-padding-x);
-  padding-inline-start: var(--ts-option-padding-x);
-}
-
-.m_aa3e3f86 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  --_ts-expand-icon-size: calc(1.45 * var(--combobox-option-fz, var(--mantine-font-size-sm)));
-  width: var(--_ts-expand-icon-size);
-  min-width: var(--_ts-expand-icon-size);
-  height: var(--_ts-expand-icon-size);
-  border-radius: var(--mantine-radius-sm);
-  cursor: pointer;
-  color: var(--mantine-color-dimmed);
-  transform: rotate(-90deg);
-}
-
-:where([data-combobox-selected]) .m_aa3e3f86 {
-    color: var(--mantine-color-white);
-  }
-
-:where([dir="rtl"]) .m_aa3e3f86 {
-    transform: rotate(90deg);
-}
-
-.m_aa3e3f86:where([data-expanded]) {
-    transform: rotate(0deg);
-  }
-
-@media (hover: hover) {
-    :where([data-mantine-color-scheme='light']) .m_aa3e3f86:hover {
-      background-color: var(--mantine-color-gray-1);
-  }
-
-    :where([data-mantine-color-scheme='dark']) .m_aa3e3f86:hover {
-      background-color: var(--mantine-color-dark-5);
-  }
-}
-
-@media (hover: none) {
-    :where([data-mantine-color-scheme='light']) .m_aa3e3f86:active {
-      background-color: var(--mantine-color-gray-1);
-  }
-
-    :where([data-mantine-color-scheme='dark']) .m_aa3e3f86:active {
-      background-color: var(--mantine-color-dark-5);
-  }
-}
-
-.m_eaa4cdee {
-  opacity: 0.4;
-  width: 0.8em;
-  min-width: 0.8em;
-  height: 0.8em;
-  margin-inline-start: auto;
-}
-
-:where([data-combobox-selected]) .m_eaa4cdee {
-    opacity: 1;
-  }
-
-.m_ffe3a9c1 {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Tree lines */
-.m_57207d5d {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 0;
-  border-inline-start: var(--ts-line-width) solid var(--ts-line-color);
-  pointer-events: none;
-}
-
-.m_41b9db0b {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 0;
-  border-inline-start: var(--ts-line-width) solid var(--ts-line-color);
-  pointer-events: none;
-}
-
-.m_41b9db0b:where([data-last]) {
-    bottom: auto;
-    height: 50%;
-  }
-
-.m_1246e79 {
-  position: absolute;
-  top: 50%;
-  height: 0;
-  border-top: var(--ts-line-width) solid var(--ts-line-color);
-  pointer-events: none;
-}
-}