@gfazioli/mantine-split-pane 1.1.7 → 2.0.0

package/dist/types/Pane/SplitPane.d.ts

@@ -1,20 +1,54 @@
 import React from 'react';
 import { BoxProps, Factory, StylesApiProps } from '@mantine/core';
-import { SplitPaneResizerBaseProps, SplitPaneResizerVariant } from '../Resizer/SplitPaneResizer';
+import { SplitPaneResizerVariant } from '../Resizer/SplitPaneResizer';
 export type SplitPaneStylesNames = 'root';
 export type SplitPaneVariant = SplitPaneResizerVariant;
 export type SplitPaneCssVariables = {};
-export interface SplitPaneProps extends BoxProps, Omit<SplitPaneResizerBaseProps, 'paneRef'>, StylesApiProps<SplitPaneFactory> {
-    /** Split pane content */
-    children: React.ReactNode;
+export interface SplitPaneHandlers {
+    resetInitialSize?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    getMinWidth?: () => number;
+    getMinHeight?: () => number;
+    getMaxWidth?: () => number;
+    getMaxHeight?: () => number;
+    getInitialWidth?: () => number;
+    getInitialHeight?: () => number;
+    onResizeStart?: () => void;
+    onResizing?: (size: SPLIT_PANE_SIZE) => void;
+    onResizeEnd?: (size: SPLIT_PANE_SIZE) => void;
+    splitPane?: HTMLDivElement;
+}
+export type SPLIT_PANE_SIZE = {
+    width: number;
+    height: number;
+};
+export interface SplitPaneBaseProps {
     /** Grow pane to fill available space */
     grow?: boolean;
     /** Initial width of the pane */
     initialWidth?: number | string;
     /** Initial height of the pane */
     initialHeight?: number | string;
-    /** Usually you won't need to use this prop directly, it's used internally by Split component */
-    withResizer?: boolean;
+    /** The minimum width of the pane when orientation is vertical */
+    minWidth?: number | string;
+    /** The minimum height of the pane when orientation is horizontal */
+    minHeight?: number | string;
+    /** The maximum width of the pane when orientation is vertical */
+    maxWidth?: number | string;
+    /** The maximum height of the pane when orientation is horizontal */
+    maxHeight?: number | string;
+    /** Event called when pane size starts changing */
+    onResizeStart?: () => void;
+    /** Event called when pane size changes */
+    onResizing?: (size: SPLIT_PANE_SIZE) => void;
+    /** Event called when pane size changes */
+    onResizeEnd?: (size: SPLIT_PANE_SIZE) => void;
+    /** Event called to reset initial size */
+    onResetInitialSize?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export interface SplitPaneProps extends BoxProps, SplitPaneBaseProps, StylesApiProps<SplitPaneFactory> {
+    /** Split pane content */
+    children: React.ReactNode;
+    ref?: React.RefObject<HTMLDivElement & SplitPaneHandlers>;
 }
 export type SplitPaneFactory = Factory<{
     props: SplitPaneProps;

package/dist/types/Resizer/SplitPaneResizer.d.ts

@@ -1,13 +1,16 @@
-import React, { CSSProperties, MutableRefObject } from 'react';
-import { BoxProps, Factory, MantineColor, MantineRadius, MantineSize, MantineSpacing, StylesApiProps } from '@mantine/core';
+import React, { CSSProperties } from 'react';
+import { BoxProps, Factory, MantineColor, MantineRadius, MantineSize, MantineSpacing, StyleProp, StylesApiProps } from '@mantine/core';
+import { SplitPaneHandlers } from '../Pane/SplitPane';
 export type SplitPaneResizerStylesNames = 'root';
 export type SplitPaneResizerVariant = 'default' | 'filled' | 'outline' | 'transparent' | 'dotted' | 'dashed';
 export type SplitPaneResizerCssVariables = {
     root: '--split-resizer-size' | '--split-resizer-color' | '--split-resizer-color-light' | '--split-resizer-color-dark' | '--split-resizer-hover-color-light' | '--split-resizer-hover-color-dark' | '--split-resizer-radius' | '--split-resizer-knob-size' | '--split-resizer-knob-opacity' | '--split-resizer-knob-radius' | '--split-resizer-knob-color' | '--split-resizer-knob-hover-color' | '--split-resizer-spacing' | '--split-resizer-cursor-vertical' | '--split-resizer-cursor-horizontal';
 };
-export interface SplitPaneResizerSharedProps {
+export interface SplitPaneResizerContextProps {
     /** Split orientation, `'vertical'` by default */
     orientation?: 'horizontal' | 'vertical';
+    /** Resizer opacity */
+    opacity?: StyleProp<React.CSSProperties['opacity']>;
     /** Resizer size */
     size?: MantineSize | number | (string & {});
     /** Resizer radius */
@@ -41,31 +44,37 @@ export interface SplitPaneResizerSharedProps {
     /** The CSS cursor property for horizontal orientation */
     cursorHorizontal?: CSSProperties['cursor'];
 }
-export type SPLIT_PANE_RESIZE_SIZE = {
-    width: string;
-    height: string;
+export type SPLIT_PANE_RESIZE_SIZES = {
+    beforePane: {
+        width: number;
+        height: number;
+    };
+    afterPane: {
+        width: number;
+        height: number;
+    };
 };
-export interface SplitPaneResizerBaseProps extends SplitPaneResizerSharedProps {
-    /** The minimum width of the pane when orientation is vertical */
-    minWidth?: number;
-    /** The minimum height of the pane when orientation is horizontal */
-    minHeight?: number;
-    /** The maximum width of the pane when orientation is vertical */
-    maxWidth?: number;
-    /** The maximum height of the pane when orientation is horizontal */
-    maxHeight?: number;
+export interface SplitPaneResizerBaseProps extends SplitPaneResizerContextProps {
     /** Event called when resizer is double clicked */
     onDoubleClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Event called when pane size starts changing */
     onResizeStart?: () => void;
     /** Event called when pane size changes */
-    onResizing?: (size: SPLIT_PANE_RESIZE_SIZE) => void;
+    onResizing?: (sizes: SPLIT_PANE_RESIZE_SIZES) => void;
     /** Event called when pane size changes */
-    onResizeEnd?: (size: SPLIT_PANE_RESIZE_SIZE) => void;
-    /** The pane ref */
-    paneRef: MutableRefObject<HTMLDivElement | null>;
+    onResizeEnd?: (sizes: SPLIT_PANE_RESIZE_SIZES) => void;
 }
 export interface SplitPaneResizerProps extends BoxProps, SplitPaneResizerBaseProps, StylesApiProps<SplitPaneResizerFactory> {
+    /**
+     * The before (left | up) componentRef
+     * @access private
+     * */
+    __beforeRef?: React.RefObject<HTMLDivElement & SplitPaneHandlers>;
+    /**
+     * The after (right | down) componentRef
+     * @access private
+     * */
+    __afterRef?: React.RefObject<HTMLDivElement & SplitPaneHandlers>;
 }
 export type SplitPaneResizerFactory = Factory<{
     props: SplitPaneResizerProps;
@@ -74,6 +83,7 @@ export type SplitPaneResizerFactory = Factory<{
     vars: SplitPaneResizerCssVariables;
     variant: SplitPaneResizerVariant;
 }>;
+export declare const defaultProps: Partial<SplitPaneResizerContextProps>;
 export declare const SplitPaneResizer: import("@mantine/core").MantineComponent<{
     props: SplitPaneResizerProps;
     ref: HTMLButtonElement;

package/dist/types/Split.context.d.ts

@@ -1,6 +1,8 @@
 import { MantineSpacing } from '@mantine/core';
-import { SplitPaneResizerProps } from './Resizer/SplitPaneResizer';
-interface SplitContext extends Omit<SplitPaneResizerProps, 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight' | 'onDoubleClick' | 'onResizeEnd' | 'onResizeStart' | 'onResize' | 'paneRef'> {
+import { SplitPaneResizerContextProps, SplitPaneResizerVariant } from './Resizer/SplitPaneResizer';
+interface SplitContext extends SplitPaneResizerContextProps {
+    /** Resizer Variant */
+    variant?: SplitPaneResizerVariant;
     /** Spacing between resizer and pane */
     spacing?: MantineSpacing;
 }

package/dist/types/Split.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
 import { BoxProps, Factory, StylesApiProps } from '@mantine/core';
 import { SplitPane } from './Pane/SplitPane';
-import { SplitPaneResizerSharedProps, SplitPaneResizerVariant } from './Resizer/SplitPaneResizer';
+import { SplitPaneResizer, type SplitPaneResizerContextProps, type SplitPaneResizerVariant } from './Resizer/SplitPaneResizer';
 export type SplitStylesNames = 'root';
 export type SplitVariant = SplitPaneResizerVariant;
 export type SplitCssVariables = {
     root: '--split-inline';
 };
-export interface SplitBaseProps extends SplitPaneResizerSharedProps {
+export interface SplitBaseProps extends SplitPaneResizerContextProps {
     /** Make main split container inline */
     inline?: boolean;
     /** Split children */
-    children?: React.ReactNode;
+    children: React.ReactNode;
 }
 export interface SplitProps extends BoxProps, SplitBaseProps, StylesApiProps<SplitFactory> {
 }
@@ -24,6 +24,7 @@ export type SplitFactory = Factory<{
     variant: SplitVariant;
     staticComponents: {
         Pane: typeof SplitPane;
+        Resizer: typeof SplitPaneResizer;
     };
 }>;
 export declare const Split: import("@mantine/core").MantineComponent<{
@@ -35,5 +36,6 @@ export declare const Split: import("@mantine/core").MantineComponent<{
     variant: SplitVariant;
     staticComponents: {
         Pane: typeof SplitPane;
+        Resizer: typeof SplitPaneResizer;
     };
 }>;

package/dist/types/index.d.mts

@@ -1,7 +1,5 @@
-export { SplitPane } from './Pane';
-export type { SplitPaneFactory, SplitPaneProps } from './Pane/SplitPane';
-export { SplitPaneResizer } from './Resizer';
-export type { SplitPaneResizerFactory, SplitPaneResizerProps } from './Resizer/SplitPaneResizer';
-export { Split } from './Split';
-export type { SplitBaseProps, SplitCssVariables, SplitFactory } from './Split';
 export { useSplitContext } from './Split.context';
+export { Split } from './Split';
+export type { SplitCssVariables, SplitFactory, SplitProps } from './Split';
+export type { SPLIT_PANE_SIZE, SplitPaneFactory, SplitPaneProps } from './Pane/SplitPane';
+export type { SPLIT_PANE_RESIZE_SIZES, SplitPaneResizerFactory, SplitPaneResizerProps, } from './Resizer/SplitPaneResizer';

package/dist/types/index.d.ts

@@ -1,7 +1,5 @@
-export { SplitPane } from './Pane';
-export type { SplitPaneFactory, SplitPaneProps } from './Pane/SplitPane';
-export { SplitPaneResizer } from './Resizer';
-export type { SplitPaneResizerFactory, SplitPaneResizerProps } from './Resizer/SplitPaneResizer';
-export { Split } from './Split';
-export type { SplitBaseProps, SplitCssVariables, SplitFactory } from './Split';
 export { useSplitContext } from './Split.context';
+export { Split } from './Split';
+export type { SplitCssVariables, SplitFactory, SplitProps } from './Split';
+export type { SPLIT_PANE_SIZE, SplitPaneFactory, SplitPaneProps } from './Pane/SplitPane';
+export type { SPLIT_PANE_RESIZE_SIZES, SplitPaneResizerFactory, SplitPaneResizerProps, } from './Resizer/SplitPaneResizer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gfazioli/mantine-split-pane",
-  "version": "1.1.7",
+  "version": "2.0.0",
   "description": "A React component that manages split panes allows users to divide and resize content areas within a layout efficiently.",
   "homepage": "https://gfazioli.github.io/mantine-split-pane/",
   "packageManager": "yarn@4.0.1",

package/dist/cjs/Split.errors.cjs

@@ -1,8 +0,0 @@
-'use client';
-'use strict';
-
-const SPLIT_ERRORS = {
-  context: "Split component was not found in the tree"};
-
-exports.SPLIT_ERRORS = SPLIT_ERRORS;
-//# sourceMappingURL=Split.errors.cjs.map

package/dist/cjs/Split.errors.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Split.errors.cjs","sources":["../../src/Split.errors.ts"],"sourcesContent":["export const SPLIT_ERRORS = {\n  context: 'Split component was not found in the tree',\n  children:\n    'Split.Pane component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported',\n};\n"],"names":[],"mappings":";;;AAAY,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC,YAAY,CAAG,CAAA,CAAA,CAAA;AAC5B,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,EAAE,CAEX,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;"}

package/dist/esm/Split.errors.mjs

@@ -1,6 +0,0 @@
-'use client';
-const SPLIT_ERRORS = {
-  context: "Split component was not found in the tree"};
-
-export { SPLIT_ERRORS };
-//# sourceMappingURL=Split.errors.mjs.map

package/dist/esm/Split.errors.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Split.errors.mjs","sources":["../../src/Split.errors.ts"],"sourcesContent":["export const SPLIT_ERRORS = {\n  context: 'Split component was not found in the tree',\n  children:\n    'Split.Pane component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported',\n};\n"],"names":[],"mappings":";AAAY,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC,YAAY,CAAG,CAAA,CAAA,CAAA;AAC5B,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,EAAE,CAEX,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;"}