Updated to latest dependencies

Author: GeoffCox

demo/.gitignore

@@ -1,2 +1,3 @@
+.DS_Store
 node_modules/
 dist/

demo/package-lock.json

@@ -10,29 +10,28 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@types/react": "^16.9.36",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-measure": "^2.0.6",
-    "@types/recoil": "0.0.1",
-    "@types/styled-components": "4.1.8",
-    "@types/uuid": "^8.3.0",
-    "awesome-typescript-loader": "^5.2.1",
-    "css-loader": "^3.5.3",
-    "html-webpack-plugin": "^4.3.0",
+    "@types/react": ">=16.8.0 <19.0.0",
+    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "@types/react-measure": "^2.0.8",
+    "@types/styled-components": "^5.1.26",
+    "@types/uuid": "^9.0.0",
+    "ts-loader": "^9.4.2",
+    "css-loader": "^6.7.3",
+    "html-webpack-plugin": "^5.5.0",
     "html-webpack-template": "^6.2.0",
-    "source-map-loader": "^1.0.0",
-    "style-loader": "^1.2.1",
-    "typescript": "3.7.5",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.1",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0 ",
+    "webpack-cli": "^5.0.1"
   },
   "dependencies": {
-    "@geoffcox/react-splitter": "^2.1.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "@geoffcox/react-splitter": "file:../package",
+    "react": ">=16.8.0 <19.0.0",
+    "react-dom": ">=16.8.0 <19.0.0",
     "react-measure": "^2.5.2",
-    "recoil": "^0.1.2",
-    "styled-components": "^5.1.1",
-    "uuid": "^8.3.2"
+    "recoil": "^0.7.6",
+    "styled-components": "^5.3.5",
+    "uuid": "^9.0.0"
   }
 }

demo/package.json

@@ -34,7 +34,7 @@ module.exports = {
   module: {
     rules: [
       // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
-      { test: /\.tsx?$/, loaders: ["awesome-typescript-loader"] },
+      { test: /\.tsx?$/, loader: "ts-loader" },
 
       // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
       { enforce: "pre", test: /\.js?$/, loader: "source-map-loader" },

demo/webpack.config.js

@@ -1,2 +1,3 @@
+.DS_Store
 node_modules/
 build/

package/.gitignore

@@ -0,0 +1,12 @@
+import { RenderSplitterProps } from './RenderSplitterProps';
+import './defaultSplitter.css';
+type Props = RenderSplitterProps & {
+    color?: string;
+    hoverColor?: string;
+    dragColor?: string;
+};
+/**
+ * The default splitter which provides a thin line within a larger mouse hit area.
+ */
+export declare const DefaultSplitter: (props: Props) => JSX.Element;
+export {};

package/dist/2.1.2/DefaultSplitter.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Props for the renderSplitter callback in Split
+ */
+export type RenderSplitterProps = {
+    /**
+     * The measured size of the splitter in pixels.
+     */
+    pixelSize: number;
+    /**
+     * True if the splitter is horizontal (i.e. top/bottom); false otherwise.
+     */
+    horizontal: boolean;
+    /**
+     * True if the user is currently dragging the splitter; false otherwise.
+     */
+    dragging: boolean;
+};

package/dist/2.1.2/RenderSplitterProps.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { RenderSplitterProps } from './RenderSplitterProps';
+import './split.css';
+export type SplitMeasuredSizes = {
+    /**
+     * The measured size of the primary pane in pixels.
+     */
+    primary: number;
+    /**
+     * The measured size of the splitter in pixels.
+     */
+    splitter: number;
+    /**
+     * The measured size of the secondary pane in pixels.
+     */
+    secondary: number;
+};
+export type SplitProps = {
+    /**
+     * Add this attribute or set to true to create a top/bottom split.
+     * Set to false to create a left|right split.
+     */
+    horizontal?: boolean;
+    /**
+     * The initial width/height of the left/top pane.
+     * Width is specified as a CSS unit (e.g. %, fr, px).
+     * The default is 50%.
+     */
+    initialPrimarySize?: string;
+    /**
+     * The preferred minimum width/height of the left/top pane.
+     * Specified as a CSS unit (e.g. %, fr, px).
+     * The default is 0.
+     */
+    minPrimarySize?: string;
+    /**
+     * The preferred minimum width/height of the right/bottom pane.
+     * Specified as a CSS unit (e.g. %, fr, px).
+     * The default is 0.
+     */
+    minSecondarySize?: string;
+    /**
+     * The width of the splitter between the panes.
+     * Specified as a CSS unit (e.g. %, fr, px).
+     * The default is 7px.
+     */
+    splitterSize?: string;
+    /**
+     * Render props for the splitter.
+     * @param pixelSize The measured size of the splitter in pixels.
+     * @param horizontal True if the splitter is horizontal (i.e. top/bottom); false otherwise.
+     */
+    renderSplitter?: (props: RenderSplitterProps) => React.ReactNode | undefined;
+    /**
+     * When true, if the user double clicks the splitter it will reset to its initial position.
+     * The default is false.
+     */
+    resetOnDoubleClick?: boolean;
+    /**
+     * The colors to use for the default splitter.
+     * Only used when renderSplitter is undefined;
+     * The defaults are silver, gray, and black
+     */
+    defaultSplitterColors?: {
+        color: string;
+        hover: string;
+        drag: string;
+    };
+    /**
+     * Raised when the splitter moves to provide the primary size.
+     * When the user has adjusted the splitter, this will be a percentage.
+     * Otherwise, this will be the initialPrimarySize.
+     */
+    onSplitChanged?: (primarySize: string) => void;
+    /**
+     * Raised whenever the primary, splitter, or secondary measured sizes change.
+     * These values are debounced at 500ms to prevent spamming this event.
+     */
+    onMeasuredSizesChanged?: (sizes: SplitMeasuredSizes) => void;
+};
+export declare const Split: (props: React.PropsWithChildren<SplitProps>) => JSX.Element;

package/dist/2.1.2/Split.d.ts

@@ -0,0 +1,3 @@
+export * from './DefaultSplitter';
+export * from './RenderSplitterProps';
+export * from './Split';